Dreamweaver és jQuery Mobile Integration

• Lehet 17, 2024

Az elmúlt években a Dreamweaver^R egyre több funkciót kapott a mobil webtartalom és a mobil alkalmazások készítéséhez. Ez a CS6-ra való új frissítés nem kivétel. A Dreamweaver CS6 továbbfejlesztett munkafolyamatával rendelkezik a jQuery Mobile funkcióival.

Egy új mobil projekt elindítása egyszerű az Új oldal párbeszédpanelen található Minta új opcióval. A jQuery Mobile mintát a Mobile Starters mappából választhat. Ez a mintaoldal tartalmaz néhány előre elkészített grafikus, css és JavaScript fájlt.

Ebből a mintaoldalból megkezdhetjük a projekt felépítését az elemek hozzáadásával az oldalhoz.

1. Az Beszúrás panelen a jQuery Mobile lehetőséget választjuk a kategória menüből. Ez megjeleníti az előre épített összetevőket.
   
   
2. Új összetevő hozzáadásához vigye a kurzort arra a helyre, ahol az új tervezési elem felkerül, és kattintson a listában szereplő egyik elemre. Példaként válasszunk egy csúszkát.
   
   A Dreamweaver automatikusan hozzáadja oldalunkhoz a csúszka kódját. Élő nézetben láthatjuk új csúszkavezérlőnket.
   
   

De ez az oldal kissé általános megjelenésű. Az új jQuery Mobile Színtárak panellel gyorsan és egyszerűen formázhatjuk oldalunkat.

1. A menüsorban kattintson az Ablak - jQuery Mobile Színtárak elemre. Ha még nem töltötte be a támogató grafikai, css és JavaScript fájlokat, megjelenik egy felbukkanó párbeszédpanel. A fájlok betöltéséhez kattintson a Másolás gombra.
   
   
2. Az új jQuery Mobile Színtárak panel üres, amíg nem választ ki egy elemet a mintaoldalon. Amikor kiválaszt egy elemet, a panel megjeleníti az elemhez rendelkezésre álló megfelelő színmintákat. Ha a fejlécet választjuk meg, akkor több fejléc-témát fogunk látni.
   
   
3. Ha átkapcsolunk az Élő nézet elemre, akkor kattinthatunk az egyes témamintákra, hogy megnézhessük, hogyan néznek ki ezek.
   
   

Ezt megismételhetjük az összes oldalunkon található design elemnél. Amint ezt megtesszük, a jQuery Mobile Színtárak panel megjeleníti a rendelkezésre álló megfelelő témamintákat. A Resolution Switcher segítségével is megnézhetjük a tervezést, mivel az az asztali és a táblagép felbontásán fog megjelenni.

Ha a Panel alján található További témák linket használjuk, egy böngésző nyílik meg a ThemeRoller for jQuery Mobile webhelyhez.

* Az Adobe átadta nekem a szoftver egy példányát felülvizsgálat céljából.

Szerzői jog 2018 Adobe Systems Incorporated. Minden jog fenntartva. Az Adobe termék képernyőképe (i) újra kinyomtatva az Adobe Systems Incorporated engedélyével. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst és Flash Paper vagy bejegyzett védjegy (ek) vagy az Adobe Systems Incorporated védjegye (i) az Egyesült Államokban és / vagy más országokban.

Video Utasításokat: How to install Bootstrap using Dreamweaver - Dreamweaver Tutorial [8/54] (Lehet 2024).