Sivuasettelun keskittäminen CSS-marginaalilla Dreamweaverissa

Dreamweaverin avulla voit keskittää asettelusi CSS-marginaalien avulla. Monet verkkosivujen mallit on keskitetty sivulle, joten ne näyttävät kelluvan selainikkunan sivujen välissä riippumatta siitä, kuinka leveä tai kapea ikkunasta tulee. Tämä auttaa luomaan illuusion, että ulkoasu täyttää sivun, vaikka selainikkuna olisi paljon leveämpi kuin sivun ulkoasu.

Useimmat CSS:llä luodut verkkosivut saavuttavat tämän vaikutuksen luomalla sellaisen

-tunnisteen, joka ympäröi koko sivun sisällön, ja soveltamalla siihen tyyliä

-tunniste, joka sisältää tyylisäännön, joka keskittää sen

tag. Kuten seuraavissa vaiheittaisissa ohjeissa huomaat, tyylin luominen keskittääksesi a

-tunniste ei ole niin ilmeinen kuin voisi kuvitella, mutta se on helppo ottaa käyttöön.

Yleinen käytäntö on käyttää ID-tyyliä

-tunniste, joka keskittää suunnittelusi, ja anna sille nimeksi #wrapper tai #container.

Jos sivullesi ei ole vielä määritetty a

merkitse koko sisältösi ympärille, tässä on vinkki sellaisen lisäämiseen. Napsauta ja vedä ensin valitaksesi kaikki sivun teksti, kuvat ja muu sisältö. Valitse sitten Insert → Layout Objects → Div Tag. Varmista Insert Div Tag -valintaikkunassa, että Wrap around Selection -vaihtoehto on valittu Lisää-pudotusvalikosta.

Jätä loput kentät tyhjiksi ja lisää a

tagi koko sivusi sisällön ympärille, ja olet valmis seuraaviin vaiheisiin.

Jos haluat keskittää koko sivumallin, varmista, että a

-tunniste ympäröi koko sivun sisällön ja toimi seuraavasti:

Napsauta plusmerkkiä CSS Designer Selectors -paneelissa.

Riippuen siitä, mitä sivulla on, Valitsijat-paneeliin lisätään uusi tyylinimi tai tyhjä kenttä, johon voit kirjoittaa tyylin nimen.

Kaksoisnapsauta valitaksesi nimen, jonka Dreamweaver lisäsi paneeliin, ja muuta se uudelle tyylillesi haluamasi nimeksi, tai napsauta tyhjää kenttää ja anna nimi.

Jos nimeä ei ole lisätty, kirjoita haluamasi nimi tyhjään kenttään. Voit nimetä tyylin haluamallasi tavalla, mutta muista kirjoittaa piste ennen nimeä, jos luot luokkatyyliä, tai #-merkki ID-tyylille.

Määritä Ominaisuudet-paneelissa leveys, marginaalit ja muut muotoiluasetukset, jotka haluat määrittää.

Säiliön leveys

tagi on asetettu 980 pikseliin. Tässä on temppu keskittämiseen a

tagi näin: Aseta vasen ja oikea marginaali tilaan Auto. Tällä tavalla selain lisää automaattisesti yhtä suuren marginaalitilan kummallekin puolelle

-tunnisteen keskittäen sen tehokkaasti sivulle.

Valitse tunnus, joka ympäröi koko sivun sisällön.

Varmistaaksesi, että olet valinnut oikean

-tunnistetta, napsauta asettaaksesi kohdistimen mihin tahansa sivun pääosaan ja napsauta sitten

-tunnisteen, joka on lueteltu työtilan alareunan pikatunnisteen valitsimen vasemmalla puolella.

Kanssa

-tunnisteen valittuna, valitse luomasi tyylin nimi ominaisuustarkastajan avattavasta ID-luettelosta.

Tyylisääntöjä, jotka määritit luodessasi tyyliä, sovelletaan automaattisesti

tag. Tässä esimerkissä tulos on, että koko

-tunniste muutetaan 980 pikseliä leveäksi ja

-tunniste ja kaikki sen sisältö on keskitetty sivulle.

Kaikki ominaisuudet eivät toimi, kun Dreamweaver on asetettu Live view -tilaan. Vaikka Live-näkymä on loistava tapa esikatsella, miltä sivusi ulkoasu näyttää useimmissa nykyaikaisissa verkkoselaimissa, Live view -ominaisuuden käyttö tekee useista Dreamweaverin muokkaustyökaluista käyttökelvottomia. Jos esimerkiksi Kiinteistötarkistus näkyy himmennettynä, kun haluat käyttää sitä, varmista, että Live-painiketta ei ole valittu.