Oldalelrendezés középre állítása CSS-margókkal a Dreamweaverben

A Dreamweaver lehetővé teszi az elrendezés középre állítását CSS margók használatával. Sok weboldalterv az oldal közepén helyezkedik el, így úgy tűnik, hogy a böngészőablak oldalai között lebegnek, függetlenül attól, hogy milyen széles vagy keskeny az ablak. Ez segít azt az illúziót kelteni, hogy a terv kitölti az oldalt, még akkor is, ha a böngészőablak sokkal szélesebb, mint az oldalterv.

A legtöbb CSS-sel készített weblapterv úgy éri el ezt a hatást, ha létrehoz egyet

címkét, amely körülveszi az oldal teljes tartalmát, majd alkalmazza a stílust

címke, amely egy stílusszabályt tartalmaz, amely ezt középre helyezi

címke. Amint azt a következő lépésenkénti utasításokból láthatja, stílus létrehozása az a

címke nem olyan nyilvánvaló, mint gondolná, de könnyen megvalósítható.

Az általános gyakorlat az azonosító stílus használata a

címkét, amely a design közepére helyezi, és a #wrapper vagy #container nevet adja.

Ha az oldal még nincs beállítva a

címkézze meg az összes tartalmat, íme egy tipp a hozzáadáshoz. Először kattintson és húzza az oldal összes szövegét, képét és egyéb tartalmát. Ezután válassza az Insert → Layout Objects → Div Tag menüpontot. A Div tag beszúrása párbeszédpanelen győződjön meg arról, hogy az Insert (Beszúrás) legördülő listából a Wrap around Selection (Kijelölés körbetekerése) opció van kiválasztva.

Hagyja üresen a többi mezőt, és kattintson az OK gombra a hozzáadáshoz

jelölje meg az oldal teljes tartalmát, és készen áll a következő lépésekre.

A teljes oldalterv középre állításához győződjön meg arról, hogy a

címke körülveszi az oldal teljes tartalmát, és kövesse az alábbi lépéseket:

Kattintson a pluszjelre a CSS Designer Selectors panelen.

Attól függően, hogy mi van az oldalon, egy új stílusnév vagy egy üres mező, ahol megadhatja a stílus nevét, megjelenik a Kijelölők panelen.

Kattintson duplán a Dreamweaver által a panelhez adott név kiválasztásához, és módosítsa az új stílushoz kívánt névre, vagy kattintson az üres mezőre, és írjon be egy nevet.

Ha nem ad hozzá nevet, írja be a kívánt nevet az üres mezőbe. Bármilyen nevet adhat a stílusnak, de ügyeljen arra, hogy a név elé egy pontot írjon be, ha osztálystílust hoz létre, vagy egy # jelet azonosítóstílushoz.

A Tulajdonságok panelen adja meg a szélességet, a margókat és az egyéb megadni kívánt formázási beállításokat.

A tartály szélessége

címke 980 képpontra van állítva. Íme a trükk a központosításhoz

a következő címke: Állítsa a bal és jobb margót Auto értékre. Ily módon a böngésző automatikusan azonos mennyiségű margót ad a lap mindkét oldalához

címkét, hatékonyan az oldal közepére helyezve.

Válassza ki az oldal teljes tartalmát körülvevő azonosítót.

Hogy megbizonyosodjon arról, hogy a megfelelőt választotta

címkét, kattintson rá, hogy a kurzort bárhová elhelyezze az oldal fő részén, majd kattintson a gombra

a munkaterület alján található Gyorscímkeválasztóban a bal legszélső helyen felsorolt ​​címkét.

A ... val

kijelölve, válassza ki a létrehozott stílus nevét az ID legördülő listából a Tulajdonságvizsgálóban.

A stílus létrehozásakor megadott stílusszabályok automatikusan alkalmazásra kerülnek a

címke. Ebben a példában az eredmény az, hogy a mérete a

címke 980 pixel szélesre változik, és a

címke és annak teljes tartalma az oldal közepén van.

Nem minden funkció működik, ha a Dreamweaver Élő nézetre van állítva. Bár az Élő nézet nagyszerű módja annak, hogy megtekinthesse, hogyan fog kinézni oldala a legtöbb modern webböngészőben, az Élő nézet funkció használata használhatatlanná teszi a Dreamweaver számos szerkesztőeszközét. Ha például a Property Inspector halványan jelenik meg, amikor használni szeretné, győződjön meg arról, hogy az Élő gomb nincs kiválasztva.