Elemek elhelyezése a Dreamweaverben, hogy három elrendezést hozzon létre egyetlen folyadékrácsban

A gördülékeny rácselrendezéseket az teszi olyan erőteljessé, hogy megváltoztathatja az elemek helyzetét és méretét a Dreamweaverben, hogy azok mindhárom elrendezéshez eltérően legyenek elrendezve, így mobil-, táblagép- és asztali képernyőkre optimalizált terveket hozhat létre. Egy elem szélességének vagy helyzetének megváltoztatásához használja a Dreamweaver vizuális eszközeit.

A mobil elrendezés szerkesztése a Dreamweaverben

A Dreamweaver úgy állítja be a stílusokat, hogy azok a három elrendezés mindegyikén lépcsőzetesek legyenek. Ez azt jelenti, hogy először olyan mobil kialakítást kell készítenie, amilyennek szeretné. Ezután lépjen tovább a táblagép elrendezésére, és csak azokat az elemeket módosítsa, amelyeket másként szeretne megjeleníteni a táblagépen. Végül tekintse meg az asztal elrendezését. Ismét csak azokat az elemeket módosítsa, amelyeket másként szeretne megjeleníteni.

A mobil elrendezés szerkesztéséhez kövesse az alábbi utasításokat.

Válassza a Mobilméret lehetőséget a munkaterület alján.

A munkaterület területe megváltozik, és a megfelelő stíluskészlettel formázva jeleníti meg az oldalt a mobil előnézetben.

Megjegyzés: A munkaterület jobb alsó sarkában található három kis ikon hozzáférést biztosít a mobil, táblagép és asztali előnézetekhez. Amikor egyikről a másikra vált, nemcsak a megjelenítési terület méretét módosítja, hanem az oldalon alkalmazott stílusok megfelelő készletét is.

Adjon hozzá szöveget és képeket a gördülékeny rácselrendezés elemeihez, ugyanúgy, mint a Dreamweaver bármely más oldalához.

Másolhat és beilleszthet szöveget, valamint alkalmazhat HTML-címkéket és CSS-formázást.

Válasszon ki egy elemet a tervezési területen.

A megfelelő CSS-stílus megjelenik a Selectors panelen, ahol szerkesztheti.

Hozzon létre, szerkesszen és alkalmazzon stílusokat szövegekre és képekre, ahogyan azt a Dreamweaver bármely más oldaltervében tenné.

A mindhárom elrendezésre alkalmazni kívánt stílusokat a mobil elrendezés kiválasztásakor kell létrehozni, mert ezek a stílusok mindhárom tervre vonatkoznak, hacsak nem írják felül őket a táblagépen vagy asztali elrendezésben létrehozott másik stílus.

A táblagép elrendezésének szerkesztése a Dreamweaverben

Miután megkapta a kívánt mobilelrendezést, lépjen tovább a táblagépméret-elrendezésre, és szerkessze az erre az elrendezésre vonatkozó stílusokat.

A táblagép elrendezésének szerkesztéséhez kövesse az alábbi utasításokat.

Válassza a Tablet Size (Táblaméret) lehetőséget a munkaterület jobb alsó sarkában.

A munkaterület területe úgy változik, hogy az oldalt a táblagép előnézetében jelenítse meg, a megfelelő stíluskészlettel formázva.

Jelöljön ki egy elemet, amelyet oszlopmá szeretne változtatni, és a jobb oldalon található fogantyúkkal húzza az oszlopot a kívánt szélességre.

A Dreamweaver vizuális szerkesztőeszközök gyűjteményét kínálja, amelyek megkönnyítik a folyékony rácselemek méretének és elhelyezésének beállítását.

Ha bármelyik gördülékeny rácselem fogantyúját balról jobbra húzza, akkor margóteret ad hozzá, amely arra kényszeríti, hogy az elem az elrendezés jobb oldalán maradjon. Ha egy fogantyút jobbról balra húz, akkor átméretezi az elemet.

Jelöljön ki egy átméretezett elemet, amelyet át szeretne helyezni, majd kattintson a Mozgatás egy sorban nyílra.

Az elem felfelé mozog, és a felette lévő elem mellé igazodik.

Egy elem lefelé mozgatásához kattintson az Új sor indítása nyílra.

Megjegyzés: Kattintson mind a négy ikonra egy elem elrejtéséhez, felfelé vagy lefelé mozgatásához, másolásához vagy törléséhez.

Az asztal elrendezésének szerkesztése a Dreamweaverben

Miután megszerezte a kívánt mobil- és táblagép-elrendezést, lépjen tovább az asztali méretű elrendezésre, és szerkessze azokat a stílusokat, amelyek a három elrendezés közül a legnagyobbra vonatkoznak.

Az asztal elrendezésének szerkesztéséhez kövesse az alábbi utasításokat.

Válassza az Asztal mérete lehetőséget a munkaterület jobb alsó sarkában.

A munkaterület területe úgy változik, hogy az oldalt az asztali előnézetben jelenítse meg, a megfelelő stíluskészlettel formázva.

Válassza ki a Csere nyilat bármelyik két elem közepén a két elem pozíciójának váltásához.

Az 1. cikk és a 2. cikk elemei egyszerűen felcserélhetők a közöttük lévő Csere nyílra kattintva.

Formázza a szöveget, a képeket és az egyéb elemeket az asztali tervezéshez megfelelően.

A táblagép elrendezésében szereplő összes többi vizuális formázási lehetőség elérhető.

Válassza a Fájl→Összes mentése menüpontot az összes fájl mentéséhez a gördülékeny rácselrendezésben.

Egy gördülékeny rácselrendezés szerkesztésekor a HTML-fájlon és a külső stíluslapon is módosít. Az Összes mentése opció használatával az összes szükséges fájlt elmentette, mielőtt megtekinti azokat, vagy közzéteszi webhelyét egy webszerveren.

Az elrendezések közötti váltás a Dreamweaverben

Jó gyakorlat a gördülékeny rácselrendezések tervezése ebben a sorrendben: először a mobil verzió, majd a táblagép, végül az asztali verzió. A tervek finomítása során azonban válthat a három elrendezés között.

Tartsa szem előtt az alábbi néhány általános szabályt és bevált gyakorlatot:

• A rugalmas rácselrendezések olyan médialekérdezések segítségével jönnek létre, amelyek elválasztóként működnek a mobil-, táblagép- és asztali elrendezést formázó stíluskészletek között.

• Stílusok szerkesztésekor ügyelnie kell arra, hogy azokat a stílusokat szerkesztse, amelyek megfelelnek annak az elrendezésnek, amelyen dolgozni szeretne.

• Ha megtekinti a kódnézetben automatikusan létrehozott megfelelő stílusokat, látni fogja, hogy a szélességek és más méretek a negyedik tizedesjegyig vannak megadva, például szélesség: 48,2758%. Ha módosítja ezeket a számokat kódnézetben, a Dreamweaver többé nem fogja automatikusan módosítani őket.

• Amikor olyan stílusokat hoz létre, amelyeket mindhárom elrendezésre alkalmazni szeretne, először válassza ki az Any Media lehetőséget a CSS Designer panel @Media paneljén,