Kuidas tsentreerida lehepaigutust CSS-i veeristega Dreamweaveris

Dreamweaver võimaldab teil paigutuse keskele CSS-i veeriste kasutades. Paljud veebilehtede kujundused on lehe keskel, nii et need näivad hõljuvat brauseriakna külgede vahel, olenemata sellest, kui laiaks või kitsaks aken muutub. See aitab luua illusiooni, et kujundus täidab lehe, isegi kui brauseriaken on lehe kujundusest palju laiem.

Enamik CSS-iga loodud veebilehtede kujundusi saavutab selle efekti, luues selle

kogu lehe sisu ümbritsev silt ja seejärel sellele stiili rakendamine

silt, mis sisaldab stiilireeglit, mis selle keskele asetab

silt. Nagu leiate järgmistest samm-sammult juhistest, looge stiil a tsentreerimiseks

silt pole nii ilmne, kui võite ette kujutada, kuid seda on lihtne rakendada.

Levinud tava on kasutada ID-stiili

silt, mis asetab teie kujunduse keskele, ja andke sellele nimi #wrapper või #container.

Kui teie leht pole veel a-ga seadistatud

sildi kogu sisu ümber, siin on näpunäide selle lisamiseks. Kõigepealt klõpsake ja lohistage, et valida lehel kogu tekst, pildid ja muu sisu. Seejärel vali Insert→Layout Objects→Div Tag. Dialoogiboksis Insert Div Tag veenduge, et ripploendist Lisa on valitud suvand Wrap around Selection.

Jätke ülejäänud väljad tühjaks ja klõpsake a lisamiseks nuppu OK

Märgistage oma lehe kogu sisu ümber ja olete järgmisteks sammudeks valmis.

Terve lehe kujunduse tsentreerimiseks veenduge, et a

silt ümbritseb kogu lehe sisu ja järgige neid samme.

Klõpsake paneelil CSS Designer Selectors plussmärki.

Olenevalt lehel olevast lisatakse valijate paneelile uus stiilinimi või tühi väli, kuhu saate stiili nime sisestada.

Topeltklõpsake nime valimiseks, mille Dreamweaver paneelile lisas, ja muutke see oma uue stiili jaoks soovitud nimeks või klõpsake tühja välja valimiseks ja nime sisestamiseks.

Kui nime pole lisatud, sisestage soovitud nimi tühjale väljale. Saate stiilile nimetada ükskõik, mis teile meeldib, kuid klassistiili loomisel sisestage nime ette punkt või ID-stiili jaoks #-märk.

Määrake paneelil Atribuudid laius, veerised ja muud vormingusätted, mida soovite määratleda.

Mahuti laius

märgend on seatud 980 pikslile. Siin on trikk a tsentreerimiseks

silt nagu see: määrake vasak ja parem veeris valikule Automaatne. Nii lisab brauser automaatselt võrdse koguse veerise ruumi mõlemale küljele

sildi, tsentreerides selle tõhusalt lehele.

Valige ID, mis ümbritseb kogu lehe sisu.

Veendumaks, et olete valinud õige

märgendil, klõpsake kursori paigutamiseks lehe põhiossa ja seejärel klõpsake nuppu

tööala allosas asuvas kiirsildivalijas kõige vasakpoolsemas olev silt.

Koos

silt valitud, valige atribuutide inspektori ID ripploendist loodud stiili nimi.

Stiili loomisel määratletud stiilireeglid rakendatakse automaatselt

silt. Selles näites on tulemuseks, et suurus

silt muudetakse 980 piksli laiuseks ja

silt ja kogu selle sisu on lehe keskel.

Kõik funktsioonid ei tööta, kui Dreamweaver on seatud reaalajavaatele. Kuigi reaalajas vaade on suurepärane võimalus vaadata eelvaadet, kuidas teie lehe kujundus enamikus kaasaegsetes veebibrauserites välja näeb, muudab reaalajavaate funktsiooni kasutamine paljud Dreamweaveri redigeerimistööriistad kasutuskõlbmatuks. Kui näiteks Atribuutide inspektor on selle kasutamise ajal tuhm, veenduge, et nupp Live on tühistatud.