Egyoszlopos folyékony rács elrendezés létrehozása a Dreamweaverben

Mielőtt belemerülne a Dreamweaver bonyolult folyékony rácstervének létrehozásába, fontolja meg egy egyszerűbb kipróbálását. Kezdje egy egyszerű, egyoszlopos folyékony rács elrendezés létrehozásával, kövesse az alábbi egyszerű utasításokat:

Válassza a Fájl→Új menüpontot.

Megnyílik az Új dokumentum ablak. Megjegyzés: Győződjön meg arról, hogy befejezte a hely beállítási folyamatát, mielőtt elkezdene dolgozni egy új rugalmas rácselrendezésen.

A képernyő bal oldalán válassza a Fluid Grid Layout lehetőséget.

Az Új dokumentum ablak beállításai a folyékony rácsbeállításokra változnak.

Adja meg a kívánt oszlopok számát mindhárom elrendezésben.

Oszlopok hozzáadásához vagy eltávolításához válassza ki a szövegmezőt az egyes oszlopok felett, és adja meg a kívánt oszlopok számát.

Adja meg a böngészőablak azon százalékát, amelyet az egyes elrendezések lefednek.

Sorra jelölje ki az egyes elrendezések alatti szövegmezőket, és írjon be egy számot, amely azt jelzi, hogy az elrendezés mekkora százalékos területet szeretne lefedni, amikor a tervet böngészőablakban tekintik meg. Például alapértelmezés szerint az asztal elrendezése úgy van beállítva, hogy a rendelkezésre álló terület 90 százalékát foglalja el, de módosíthatja ezt 95 százalékra, hogy több teret kapjon a tervezéshez és csökkentse a margóterületet.

Módosítsa az oszlopszélesség százalékos értékét az egyes oszlopok közötti margóköz méretének módosításához.

Alapértelmezés szerint a Dreamweaver minden margót úgy állít be, hogy a rendelkezésre álló terület 25 százalékát foglalja el.

A legördülő lista segítségével adja meg a dokumentumtípust.

Alapértelmezés szerint a gördülékeny rácselrendezések a HTML5 doctype használatával jönnek létre. Hacsak nem kell módosítania a doctype-ot, hogy jobban kompatibilis legyen a webhelyén használt egyéb formázással, a HMTL5 a javasolt lehetőség az adaptív webdizájnokhoz.

Kattintson a Létrehozás gombra.

Megnyílik a Mentés másként párbeszédpanel, amely készen áll a CSS-fájl mentésére.

Adja meg a CSS-fájl nevét, majd kattintson a Mentés gombra.

Egy új HTML-fájl nyílik meg a Dreamweaver munkaterületen, de még nincs elmentve. A megnevezett CSS-fájl mentésre kerül, és a neve láthatóvá válik a Fájlok panelen.

Megjegyzés: A Dreamweaverben más típusú oldalak létrehozásának folyamatától eltérően a CSS-fájl mentése először történik meg, a HTML-fájl pedig egy későbbi lépésben.

Válassza a Fájl→Mentés menüpontot

Megnyílik a Mentés másként párbeszédpanel.

Adja meg a HTML-fájl nevét, majd kattintson az OK gombra.

A Mentés másként párbeszédpanel bezárul, és egy értesítés jelenik meg a Dreamweaverben, amely arról tájékoztat, hogy a rugalmas rácselrendezéshez két további fájl szükséges: boilerplate.css és answer.min.js.

Kattintson az OK gombra a boilerplate.css és answer.min.js fájlok webhelymappájába másolásához.

Mindhárom fájl hozzáadódik a Fájlok panelhez, és visszatérhet az újonnan elnevezett HTML-fájlhoz, amely a Dreamweaver munkaterületén van megnyitva.

Adjon címet az oldalnak úgy, hogy szöveget ír be a munkaterület tetején található Cím mezőbe.

Ezzel befejeződik az új fájlkészlet létrehozásának folyamata a rugalmas rácselrendezéshez.