Kako centrirati izgled stranice s CSS marginama u Dreamweaveru

Dreamweaver vam omogućuje da centrirate svoj izgled pomoću CSS margina. Mnogi dizajni web stranica su centrirani na stranici pa se čini da lebde između strana prozora preglednika bez obzira na to koliko prozor postaje širok ili uzak. To pomaže stvoriti iluziju da dizajn ispunjava stranicu, čak i ako je prozor preglednika mnogo širi od dizajna stranice.

Većina dizajna web stranica izrađenih pomoću CSS-a postiže ovaj učinak stvaranjem jednog

oznaku koja okružuje sav sadržaj stranice i zatim primijeniti stil na to

oznaku koja uključuje pravilo stila koje centrira to

označiti. Kao što ćete otkriti u sljedećim uputama korak po korak, stvaranje stila za centriranje a

oznaka nije tako očita kao što možete zamisliti, ali je lako implementirati.

Uobičajena praksa je korištenje ID stila za

oznaku koja centrira vaš dizajn i da je nazovete #wrapper ili #container.

Ako vaša stranica još nije postavljena s a

označite sav svoj sadržaj, evo savjeta za dodavanje. Prvo kliknite i povucite da biste odabrali sav tekst, slike i drugi sadržaj na stranici. Zatim odaberite Insert→Layout Objects→Div Tag. U dijaloškom okviru Insert Div Tag, provjerite je li opcija Wrap around Selection odabrana s padajućeg popisa Umetanje.

Ostala polja ostavite prazna i kliknite U redu da dodate a

označite sav sadržaj svoje stranice i spremni ste za korake koji slijede.

Da biste centrirali cijeli dizajn stranice, provjerite je li a

oznaka okružuje sav sadržaj stranice i slijedite ove korake:

Kliknite znak plus na ploči CSS Designer Selectors.

Ovisno o tome što se nalazi na stranici, novi naziv stila ili prazno polje u koje možete unijeti naziv stila dodaje se na ploču Selectors.

Dvaput kliknite da biste odabrali naziv koji je Dreamweaver dodao na ploču i promijenili ga u ime koje želite za svoj novi stil ili kliknite da biste odabrali prazno polje i unesite naziv.

Ako nije dodano ime, u prazno polje unesite željeno ime. Stilu možete imenovati kako god želite, ali svakako unesite točku ispred imena ako stvarate stil klase ili znak # za ID stil.

Na ploči Svojstva navedite širinu, margine i sve druge postavke oblikovanja koje želite definirati.

Širina za kontejner

oznaka je postavljena na 980 piksela. Evo trika za centriranje a

Oznaka ovako: Postavite lijevu i desnu marginu na Auto. Na taj način preglednik automatski dodaje jednaku količinu marginskog prostora na svaku stranu

tag, učinkovito ga centrirajući na stranicu.

Odaberite ID koji okružuje sav sadržaj na stranici.

Kako biste bili sigurni da ste odabrali pravu

oznaku, kliknite da postavite pokazivač bilo gdje u glavnom dijelu stranice, a zatim kliknite na

oznaka navedena krajnje lijevo u brzom biraču oznaka pri dnu radnog prostora.

Uz

odabranu oznaku, odaberite naziv stila koji ste kreirali s padajućeg popisa ID u Inspektoru svojstava.

Pravila stila koja ste definirali kada ste kreirali stil automatski se primjenjuju na

označiti. U ovom primjeru rezultat je da je veličina

oznaka je promijenjena na 980 piksela širine i

tag i sav njegov sadržaj centrirani su na stranici.

Ne rade sve značajke kada je Dreamweaver postavljen na Live View. Iako je prikaz uživo izvrstan način za pregled kako će dizajn vaše stranice izgledati u većini modernih web-preglednika, korištenje značajke Live view čini mnoge Dreamweaverove alate za uređivanje neupotrebljivima. Ako se, na primjer, Inspektor Property pojavi zatamnjen kada ga želite koristiti, provjerite je li gumb Uživo poništen.