Új folyadékrács elrendezés Dreamweaver CS6

• Lehet 4, 2024

Ha egyszerű webhelyeket vagy összetett CMS-t fejlesztett ki, mindig szem előtt tartja ezt a szomorú kérdést - minden tőlem telhetőt megteszek minden típusú közönség és képernyőfelbontás célzása érdekében? Nos, a Dreamweaver^R A CS6 új funkciókkal rendelkezik, amelyek ezt megkönnyítik.

A múltban különféle CSS fájlokat kellett létrehoznia minden egyes képernyőfelbontáshoz, és a média lekérdezésével kell megadnia a szükséges CSS fájlt. Ez nagyon időigényes és hozzátette a webhely fejlesztésének általános költségeit, ami rossz hír volt mind a fejlesztő, mind az ügyfél számára. A Dreamweaver CS6 az alkalmazkodó weboldalak létrehozásából sok pénzt megtett.

Ez az új munkafolyamat az új Folyadékrács-elrendezéstől függ, amely kissé olyan, mint egy kezdősablon, alapértelmezett elrendezéssel és tipográfiaval az egyes weboldalak képernyőfelbontásaihoz.

1. Csak kattintson a Fájl - Új folyadékrács elrendezés menüpontra.
   
   
2. Az Új dokumentum párbeszédpanelen látni fogja az új adaptív weboldal alapértelmezéseit. A szélességet rögzítik a képernyő különféle felbontásaihoz.
   
   Mobil 480px
   768px. Táblázat
   Asztali 1232px
   
   
3. Lehetősége van megváltoztatni az alapértelmezett oszlopok számát és az oszlopszélesség százalékát az egyes képernyőfelbontásoknál. Az alapértelmezett értékek:
   
   Mobil 5 oszlop - 91%
   8. tabletta oszlop - 93%
   Asztali 10 oszlop - 90%
   
   
4. Az alapértelmezett munkaterület megjelenítheti a kódot és a tervezési nézeteket. Mint látható a tervezési nézetben, az új fájlnak már van egy div tagje. A div tulajdonság alapértelmezett azonosítóját és osztályát megváltoztathatja a Tulajdonságok panelen.
   
   Természetesen a weboldalához egynél több részre lesz szüksége. Tehát hozzáadhatunk további oszlopokat a fejléchez, a navigációhoz, a fő, az oldal és lábléchez.
   
   
5. Új div felvételéhez válassza a Folyadékrács elrendezés Div tagének beszúrása lehetőséget a Beszúrás panelen.
   
   
6. A párbeszédpanelen megnevezheti a címke azonosítóját.
   
   
7. Miután hozzáadtuk az oldalunk összes fő részét, rákattinthatunk és húzhatjuk őket, hogy áthelyezzük őket a rácson belül.
   
   

Javasolt, hogy kezdjük el webhelyünk mobil verziójának felépítését, és lépjünk fel a nagyobb méretekre. Könnyedén összehasonlíthatja a vizuális eredményeket a munka közben, a Resolution Switcher for Mobile, a Tablet és az asztali felbontások használatával.

Az elrendezés mentésekor egy HTML5 és CSS3 fájlt kapunk, amely mind a három képernyőfelbontáshoz használható. Ha megnézzük ezeket a fájlokat, információkat találhat arról, hogy a fájlok hogyan működnek az adaptív weboldal létrehozásában.

* 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.