Navigációs sáv létrehozása a Dreamweaver rendezetlen hivatkozáslistájából

Íme egy nagyszerű CSS-trükk, amellyel egy felsorolásjeles listát navigációs sávvá alakíthat át a Dreamweaverben egy egyszerű görgetési effektussal. A navigációs sávokhoz felsorolásjeles lista használata jól elfogadott szokás azoknál a webhelyeknél, amelyek megfelelnek a jelenlegi akadálymentesítési szabványoknak.

Köszönet: Fotók: istockphoto.com

Ugyanezek a hivatkozások továbbra is megtalálhatók a rendezetlen listán, de a stílusok alkalmazása drámaian megváltoztatja megjelenésüket.

Köszönet: Fotók: istockphoto.com

Ha CSS használatával szeretne létrehozni egy navigációs sávot a rendezetlen lista és a linkcímkék újradefiniálásához, kövesse az alábbi lépéseket:

Kattintson ide, hogy a kurzort oda helyezze, ahol létre szeretné hozni a navigációs sávot az oldalon.

Írja be a hivatkozásként használni kívánt szöveget, és válassza el mindegyiket a Return vagy az Enter billentyű megnyomásával, hogy bekezdés-visszaadást hozzon létre.

Ha a hivatkozásokat rendezetlen listaként szeretné formázni, válassza el a hivatkozni kívánt szövegsorokat a-val

címke.

Hozzon létre hivatkozásokat úgy, hogy sorra jelölje ki az egyes szövegrészeket, kattintson a Hiperhivatkozás ikonra a Közös beszúrás panelen, majd válassza ki a hivatkozni kívánt oldalt, vagy írjon be egy URL-t.

Húzással jelölje ki a teljes hivatkozáskészletet, majd kattintson a Rendeletlen lista ikonra a Tulajdonságvizsgálóban.

Minden hivatkozás elején megjelenik egy felsorolásjel. Ha valamelyik hivatkozás nincs külön felsorolásjellel kijelölve, kattintson rá a szóköz törléséhez a közte és az előtte lévő hivatkozás között, majd nyomja meg a Return vagy az Enter billentyűt, hogy a hivatkozásokat bekezdésekkel válassza el.

Hozzáadásához a

jelölje meg a hivatkozások listáját (vagy bármely más olyan tartalmat, amely már megtalálható az oldalon), válassza ki a tartalmat, majd kattintson a Div ikonra a Közös beszúrás panelen.

Megnyílik az Insert Div párbeszédpanel.

Hozzáadása a

címke a hivatkozások rendezetlen listájában hasznos lehet, ha formázást szeretne hozzáadni.

A Beszúrás legördülő listából válassza a Kijelölés körbefűzése lehetőséget.

A pontosabb szabályozás érdekében, hogy hova adjon hozzá újat

címkét, választhat a Beszúrás legördülő listából az Insert Div párbeszédpanel tetején.

Írjon be egy nevet az Osztály vagy az azonosító mezőbe.

A

A megadott osztály- vagy azonosítónévvel ellátott címke automatikusan hozzáadódik a hivatkozások listáját körülvevő oldalhoz.

A Div beszúrása párbeszédpanel alján kattintson az Új CSS-szabály gombra.

Az új CSS-szabály neve hozzáadásra kerül a stílusnevek listájához a CSS Designer Selectors panelen.

A Tulajdonságok panelen adja meg a szín, a háttér, a méret, a margók és a kitöltés kívánt beállításait.

A stílusformázás automatikusan alkalmazza a tartalmat

címkét, mert úgy alkalmazta a stílust, ahogy az 5–7. lépésben létrehozta.

Ha olyan összetett stílust szeretne létrehozni, amely csak akkor formázza a rendezetlen listát, ha azt a navigációs sávban használja, hozzon létre egy összetett stílust, amely tartalmazza a .navbar osztálynevet:

Helyezze a kurzort bárhová a felsorolásban.

Kattintson a pluszjelre (+) a Selectors panel tetején.

A Selector Name mezőben győződjön meg arról, hogy a Dreamweaver automatikusan beírta a .navbar ul nevet egy új stílus neveként a Selectors panelen.

A Tulajdonságok panelen állítsa a margókat és a kitöltést 0-ra.

Hozzon létre egy összetett stílust a listaelem címkéinek újradefiniálásához:

Helyezze a kurzort bárhová a felsorolásban.

Kattintson a pluszjelre a Selectors panel tetején.

A Selector Name mezőben győződjön meg arról, hogy a Dreamweaver automatikusan beírta a .navbar ul li nevet egy új stílus neveként a Selectors panelen.

A Tulajdonságok panelen állítsa a Megjelenítést Inline értékre.

Módosítsa a listastílus típusát Nincs értékre a felsorolás eltávolításához.

A bal és jobb margót állítsa 20 képpontra.

Ez a lépés elválasztja a listaelemeket egymástól a vízszintes listában. Módosíthatja a beállítást, hogy a hivatkozások között az Ön tervéhez legjobban illeszkedő teret hozzon létre.

Hozzon létre egy stílust a linkcímke újradefiniálásához:

Kattintson rá, hogy a kurzort a navigációs sáv hivatkozásai közé helyezze.

Kattintson a pluszjelre a Selectors panel tetején.

Ha módosítani szeretné a stílus nevét, kattintson duplán a névre a Kijelölők panelen, és írja be a használni kívánt nevet.

A Tulajdonságok panel Szöveg részében állítsa a Szövegdekorációt Nincs értékre.

Továbbra is a Szöveg részben válasszon színt a színmélységből, hogy megadja a linkek színét, amikor betöltődnek az oldalra.

Hozzon létre egy új stílust a hover-link címke újradefiniálásához, így a hivatkozás színe megváltozik, amikor a felhasználó a kurzort a hivatkozás fölé viszi:

Kattintson a pluszjelre a Selectors panel tetején.

A Selector Name mezőbe írja be a .navbar a:hover parancsot.

A Tulajdonságok panel Szöveg részében állítsa a Szövegdekorációt Nincs értékre.

Továbbra is a Szöveg részben válasszon színt a színmélységből, hogy megadja a hivatkozás színét, amikor a felhasználók a hivatkozás fölé mozgatják a kurzort.

Hozzon létre egy új stílust a meglátogatott linkcímke újradefiniálásához, így a hivatkozás színe megváltozik, miután a felhasználó rákattint egy hivatkozásra:

Kattintson a pluszjelre a Selectors panel tetején.

A Selector Name mezőbe írja be a .navbar a:visited parancsot.

A Tulajdonságok panel Szöveg részében állítsa a Szövegdekorációt Nincs értékre.

Még mindig a Szöveg részben válasszon színt a színmélységből, hogy megadja a hivatkozás színét a látogatás után.

Kattintson az Élő gombra a munkaterület tetején, vagy kattintson az Előnézet gombra az oldal megtekintéséhez a böngészőben, hogy megtekinthesse a hivatkozásstílusok hatását.