Kaip centruoti puslapio išdėstymą su CSS paraštėmis „Dreamweaver“.

„Dreamweaver“ leidžia centruoti išdėstymą naudojant CSS paraštes. Daugelis tinklalapių dizaino yra sutelkti į puslapį, todėl atrodo, kad jie plūduriuoja tarp naršyklės lango kraštų, nesvarbu, koks platus ar siauras langas tampa. Tai padeda sukurti iliuziją, kad dizainas užpildo puslapį, net jei naršyklės langas yra daug platesnis nei puslapio dizainas.

Dauguma tinklalapių dizaino, sukurtų naudojant CSS, pasiekia šį efektą sukuriant vieną

žymą, kuri supa visą puslapio turinį, o tada pritaikykite tam stilių

žyma, kurioje yra stiliaus taisyklė, kuri ją sutelkia

žyma. Kaip matote toliau pateiktose nuosekliose instrukcijose, sukurkite stilių, skirtą centre a

žyma nėra tokia akivaizdi, kaip galėtumėte įsivaizduoti, bet ją lengva įdiegti.

Įprasta praktika yra naudoti ID stilių

žymą, kuri centre jūsų dizainą, ir pavadinti #wrapper arba #container.

Jei jūsų puslapis dar nėra nustatytas naudojant a

pažymėkite visą turinį, čia yra patarimas, kaip jį pridėti. Pirmiausia spustelėkite ir vilkite, kad pasirinktumėte visą tekstą, vaizdus ir kitą puslapio turinį. Tada pasirinkite Insert → Layout Objects → Div Tag. Dialogo lange Insert Div Tag įsitikinkite, kad išskleidžiamajame sąraše Įterpti pasirinkta parinktis Wrap around Selection.

Palikite likusius laukus tuščius ir spustelėkite Gerai, kad pridėtumėte a

pažymėkite visą savo puslapio turinį ir būsite pasiruošę tolesniems veiksmams.

Norėdami centruoti visą puslapio dizainą, įsitikinkite, kad a

žyma supa visą puslapio turinį ir atlikite šiuos veiksmus:

Spustelėkite pliuso ženklą skydelyje CSS Designer Selectors.

Priklausomai nuo to, kas yra puslapyje, skydelyje Selectors pridedamas naujas stiliaus pavadinimas arba tuščias laukas, kuriame galite įvesti stiliaus pavadinimą.

Dukart spustelėkite, kad pasirinktumėte pavadinimą, kurį Dreamweaver įtraukė į skydelį, ir pakeiskite jį į norimą naujo stiliaus pavadinimą arba spustelėkite, kad pasirinktumėte tuščią lauką ir įveskite pavadinimą.

Jei vardas nepridėtas, tuščiame laukelyje įveskite norimą vardą. Galite pavadinti stilių kaip tik norite, bet prieš pavadinimą būtinai įveskite tašką, jei kuriate klasės stilių, arba # ženklą ID stiliui.

Skydelyje Ypatybės nurodykite plotį, paraštes ir visus kitus norimus apibrėžti formatavimo parametrus.

Talpyklos plotis

žyma nustatyta į 980 pikselių. Štai kaip centruoti a

žyma taip: nustatykite kairę ir dešinę paraštes į Auto. Tokiu būdu naršyklė automatiškai prideda vienodą paraštės vietos kiekvienoje pusėje

žymą, efektyviai centruojant ją puslapyje.

Pasirinkite ID, kuris supa visą puslapio turinį.

Kad įsitikintumėte, jog pasirinkote teisingai

žymą, spustelėkite, kad nukreiptumėte žymeklį bet kurioje pagrindinėje puslapio dalyje, tada spustelėkite

Darbo srities apačioje esančiame sparčiosios žymos parinkiklyje esančią toliausiai kairėje esančią žymą.

Su

pažymėtą žymą, nuosavybės inspektoriaus ID išskleidžiamajame sąraše pasirinkite sukurto stiliaus pavadinimą.

Stiliaus taisyklės, kurias nustatėte kurdami stilių, automatiškai taikomos

žyma. Šiame pavyzdyje rezultatas yra toks, kad dydis

žyma pakeičiama į 980 pikselių pločio ir

žyma ir visas jos turinys yra puslapio centre.

Ne visos funkcijos veikia, kai Dreamweaver nustatytas tiesioginis vaizdas. Nors tiesioginis vaizdas yra puikus būdas peržiūrėti, kaip jūsų puslapio dizainas atrodys daugelyje šiuolaikinių žiniatinklio naršyklių, naudojant tiesioginio vaizdo funkciją daugelis „Dreamweaver“ redagavimo įrankių tampa nenaudojami. Jei, pavyzdžiui, nuosavybės inspektorius rodomas pritemdytas, kai norite jį naudoti, įsitikinkite, kad mygtukas Tiesioginis yra panaikintas.