Öntanító macromedia dreamweaver 8 | ha kiválasztva
Ha ezt az opciót választja, a stílus a weblap belső stíluslapjára kerül,
A szokásos módon, a szükséges adatok megadásával, kattintson az OK gombra vagy a Mégse gombra. Az első gomb létrehoz egy stílust, a második - törli.
Készítünk egy címke felülírási stílusát <ні> és ezt a stílust egy még nem létező, külső styles.css stylesheet-ben kell megadni. Először válassza ki a rádió gomb Tag, majd - kattints a pop-hi Címkelista, majd - a felső kapcsoló egy csoport definiálása, győződjön meg arról, hogy ez a legördülő listából a jogot ez a kapcsoló lett kiválasztva (New Style Sheet File), majd az OK gombra. A párbeszédablakban mentse a fájlt, jelölje ki a mappát az oldalunkat, adja meg a fájl nevét a teremtett asztal styles.css stílusok és kattintson a Mentés gombra. Mindent, maga a külső stíluslap-fájlt hoztuk létre.
Ezt követően három dolgot észlelünk:
A weboldal default.htm fejlécének középre igazított;
A Dreamweaver megnyitotta a dokumentum egy másik ablakát, amely a létrehozott stíluslap CSS-kódját tartalmazza;
A már létrehozott stílusok hierarchikus listáján, amely a csúcsot foglalja el
154
2. tétel: Bonyolultabb szövegtervezés
(Ha nem látja ezt a listát, ellenőrizze, hogy a panel tetején található AM kapcsoló minden lista fölött van-e.) Ez azt jelenti, hogy a létrehozott külső stíluslap és az egyetlen stílus, amely felülbírálja a címkét.
Most az oldal default.htm flaunts a központosított fejlécet, de mi van a többi oldalakkal? Nyissuk meg egyiküket, mondjuk passions.htm. Mi az - a fejléc balra van igazítva (vagyis az alapértelmezett beállítás be van állítva). Miért?
Igen, létrehoztunk egy külső stíluslapot. Ho csak a csata fele. Még mindig hozzá kell kapcsolnunk egy olyan weboldalhoz, amelyik használni fogja. Nem kell a default.htm oldalra kötni. A Dreamweaver ezt tette. De itt a saját oldalunk más oldalaira való kötődést magunknak kell megtenni.
Mentse el az újonnan létrehozott stíluslapot a nyitott dokumentumablakra való váltáshoz és a billentyűkombináció megnyomásához . Ezután lépjen az ablakra az oldal passions.htm oldalával, és nézze meg a CSS Stílusok panelt. Az alján van egy Attach Style Sheet (AND) gomb. Szükségünk van rá. Kattints rá, és a Csatolja a külső stíluslap párbeszédpanelt a 2. ábrán. 7.3. (A Csatolandó stíluslap elemet a CSS Stílusok panel szövegkörnyezetében vagy további menüjében is használhatjuk.)
Ábra. 7.3. Csatolja a külső stíluslap párbeszédpanelt
Kattintson az ablak Tallózás gombjára, a megjelenő Fájl kiválasztása párbeszédpanelen, válassza ki stíluslapunk fájlját, majd kattintson a megnyitott gombra. Ezután a kiválasztott fájl neve megjelenik a Fájl / URL beviteli mezőben. Kapcsolja be a Link kapcsolót, ha ezt a stíluslapot a weblaphoz kívánja kapcsolni, majd kattintson az OK gombra. (Az Importálás kapcsoló a Dreamweaver-t a külső táblában meghatározott összes stílust a belső-
7. lecke: CSS stílusok használata
Csodálatos! Amint a Dreamweaver, ahogy irányítottuk, a stíluslapot a passions.htm oldalra kötötte, az ebben a táblázatban meghatározott összes stílus automatikusan alkalmazásra kerül erre az oldalra. És a címe a középpontba igazítja magát.
Most váltson az alapértelmezett.htm oldalra, és kísérletezzen a stílusokkal. Hozzunk létre egy olyan belső stíluslapot, amely egyetlen olyan stílust tartalmaz, amely színesen színezi a szöveget. Ez lesz a stílusosztály, amelyhez bármely taghez kötődhetünk.
Ismét kattints az Új CSS Szabály gombra a CSS Stílusok panelen. Az Új CSS-szabály párbeszédpanelen kapcsolja be az Osztálykapcsolót, és írja be stílusunk class -.green nevét a kombinált Név listában. Vegye figyelembe, hogy a stílusosztály neve ponttal kezdődik! Ezután kapcsolja be ezt a kapcsolót csak a Define in csoportban, majd kattintson az OK gombra.
Rögtön megjegyezzük, hogy a CSS Stílusok panel stílusainak listájában egy másik "ág"