A stílusok szerkesztése CSS-elrendezésben a Dreamweaverben

Miután létrehoz egy új oldalt CSS-elrendezéssel a Dreamweaverben, látszólag végtelen számú szerkesztési lehetősége van, de először meg kell határoznia, hogy a stíluslap mely stílusai felelnek meg a szerkeszteni kívánt elemeknek.

Amint azt valószínűleg el tudja képzelni, sokféleképpen szerkesztheti a stílusokat a CSS-elrendezésben saját tervek létrehozásához.

Miután beállította a meglévő stílusokat, hogy az alapvető oldalterv olyan legyen, ahogyan szeretné, tetszőleges számú további stílust hozhat létre.

Hogyan tekintheti meg az elérhető stílusokat és hogyan végezheti el az alapvető szerkesztéseket

Ugyanezeket az alapvető utasításokat használhatja a Dreamweaverben található bármely CSS-elrendezéssel. A stílusok CSS-elrendezésben történő szerkesztéséhez kövesse az alábbi lépéseket:

Nyisson meg egy Dreamweaver CSS-elrendezésen alapuló oldalfájlt, és válassza az Ablak→CSS-stílusok menüpontot (vagy kattintson a CSS Designer fülre a panel kibontásához).

A CSS Designer panel megnyílik vagy kinyílik.

Kattintson a stíluslap nevének kiválasztásához a CSS Designer tetején található Források panelen.

Az új oldalhoz társított összes stílus megjelenik a Kijelölők panelen.

Válassza ki a CSS Designer Selectors panelen felsorolt ​​bármely stílus nevét.

A stílushoz meghatározott megfelelő CSS-szabályok a Tulajdonságok panelen jelennek meg, a CSS Designer panel alján. Ha átkattint a stílusok listájára és áttekinti a hozzájuk tartozó szabályokat, akkor gyorsan áttekintheti a tervezést, és megnézheti, hol vannak tárolva a különböző oldalformázási beállítások.

A HTML5-fejléc-, .nav- és lábléccímkék szabályozzák az oldal főbb részeit. Például a fejléc stílusa tartalmaz egy szabályt, amely a háttér színét zöldre teszi. Így az oldal tetején lévő fejlécterület színének megváltoztatásához módosítsa a háttérszín beállítását a fejlécszabályban.

Az oldalszintű beállítások szerkesztése

Az oldalszintű beállítások – például az oldal háttérszíne vagy a fő betűtípus, az oldalon használt szöveg mérete és színe – szerkesztéséhez kövesse az alábbi lépéseket:

A CSS Designer Selectors panelen válassza ki a body nevű stílust.

A kiválasztott stílusszabályban meghatározott tulajdonságok a Tulajdonságok panelen jelennek meg.

Kattintson a T ikonra a Tulajdonságok panel tetején, és módosítsa vagy adja hozzá a kívánt betűtípus- és egyéb szövegbeállításokat.

Módosíthatja a betűtípus arcát, méretét, stílusát és súlyát. A szövegsorok közötti térköz módosításához módosítsa a sor magasságát.

Görgessen le a Tulajdonságok panel Háttér területére, és használja a Háttérszín mező színét az oldal teljes hátterének színének megadásához.

Alternatív megoldásként bármilyen hexadecimális színkódot megadhat a Háttérszín mezőben, vagy használhatja a pipettát bármely szín mintájára. Háttérkép hozzáadásához kattintson az URL mezőre a Háttér részben, majd kattintson a megjelenő Tallózás gombra, és válassza ki a háttérképként használni kívánt képet. A Background-Repeat ikonok segítségével megadhatja, hogy a háttérkép hogyan ismétlődjön az oldalon.

Végezzen el bármilyen egyéb módosítást vagy kiegészítést a stílusszabályon.

A Tulajdonságok panel stílusszabályainak módosításait a rendszer automatikusan menti, és alkalmazza a szabállyal formázott tartalomra.

A tartalomterületek testreszabása

Az oldal teljes méretét, valamint a fejlécet, láblécet és oldalsávot szabályozó fő tartalmi területek szélességének vagy egyéb beállításainak módosításához kövesse az alábbi lépéseket:

A teljes fő tervezési terület szélességének módosításához:

Kattintson a .container stílusra a CSS Designer panel Selectors paneljén.

A .container stílusszabály tulajdonságai a Tulajdonságok panelen jelennek meg, ahol a stílust is szerkesztheti.

Módosítsa a méretet a Szélesség mezőben, vagy írjon be egy új számot a kívánt oldalszélességhez.

Az oldalterv szélessége automatikusan megváltozik a megadott méret alapján. Ha módosítja a .container stílus szélességét, akkor módosítja a teljes terv szélességét, mert az összes

címkéket és egyéb elemeket tartalmaz a

.container stílussal formázott – és mindegyik kibővül, hogy kitöltse a .container-t

.

Az oldal tartalmi területének méretének módosításához válassza ki a .content nevű stílust, és adja meg a méretet és a kívánt egyéb beállításokat a Tulajdonságok panelen.

Ha módosítja a tartalomterület szélességét egy oldalsávot tartalmazó elrendezésben, akkor az oldalsáv szélességét is módosítania kell.

Az oldalon lévő bármely stílus háttérszínének megváltoztatásához kattintson a megfelelő stílus nevére, és módosítsa a beállításokat a Tulajdonságok panel Háttér részében.

Például a Dreamweaver CSS-elrendezéseiben az oldalsáv .sidebar1 nevű stílusban van meghatározva. Ezért a háttérszín megváltoztatásához kattintson a .sidebar1 elemre a Kijelölők panelen, válassza ki a Háttér kategóriát a Tulajdonságok panelen, és válassza ki a kívánt színt. Hasonlóképpen, a fejléc háttérszínének megváltoztatásához válassza ki a fejléc nevű stílust a Selectors panelen, és jól használja a színt.

Kép hozzáadásához a fejléchez:

Jelölje ki a Logó beszúrása feliratú helyőrző képet, és nyomja meg a Delete vagy a Backspace billentyűt.

Válassza a Beszúrás → Kép → Kép menüpontot, és válasszon ki egy képet a Képforrás kiválasztása párbeszédpanelen.

Cserélje ki a szöveget és szúrjon be képeket az oldalsávba és a fő tartalomterületre.

Hozzáadhat vagy cserélhet szöveget, és beszúrhat képeket bármely CSS-elrendezéssel létrehozott oldalra, akárcsak bármely más weboldalra.

Válassza a Fájl→Összes mentése menüpontot az oldal és a stílusok mentéséhez.