Hur man skapar ett navigeringsfält från en oordnad lista med länkar i Dreamweaver

Här är ett bra CSS-trick för att förvandla en punktlista till ett navigeringsfält i Dreamweaver med en enkel rollover-effekt. Att använda en punktlista för navigeringsfält är en väl accepterad konvention för webbplatser som uppfyller gällande tillgänglighetsstandarder.

Kredit: Foton av istockphoto.com

Samma länkar finns fortfarande i den oordnade listan, men tillämpningen av stilarna förändrar deras utseende dramatiskt.

Kredit: Foton av istockphoto.com

För att skapa ett navigeringsfält med CSS för att omdefiniera den oordnade listan och länktaggar, följ dessa steg:

Klicka för att placera markören där du vill skapa ditt navigeringsfält på sidan.

Ange texten som du vill ska fungera som länkar, separera varje genom att trycka på Retur eller Enter för att skapa en styckeretur.

För att formatera länkarna som en oordnad lista, separera varje textrad som du vill länka med en

märka.

Skapa länkar genom att markera varje textstycke i tur och ordning, klicka på Hyperlänkikonen i panelen Common Insert och sedan välja sidan du vill länka till eller ange en URL.

Dra för att markera hela uppsättningen länkar och klicka sedan på ikonen Oordnad lista i egenskapsinspektören.

En punktpunkt visas i början av varje länk. Om någon länk inte har en separat punkt, klicka för att ta bort blanksteg mellan den och länken före den, och tryck sedan på Retur eller Enter för att separera länkarna med en styckeretur.

För att lägga till en

tagga runt en lista med länkar (eller annat innehåll som redan finns på en sida), välj innehållet och klicka sedan på Div-ikonen i panelen Common Insert.

Dialogrutan Infoga Div öppnas.

Lägger till en

taggen runt den oordnade listan med länkar är till hjälp om du vill lägga till formatering.

Välj Wrap Around Selection från rullgardinsmenyn Infoga.

För mer exakt kontroll över var du lägger till en ny

kan du välja alternativ från rullgardinsmenyn Infoga högst upp i dialogrutan Infoga Div.

Ange ett namn i fältet Klass eller ID-fältet.

A

taggen med klass- eller ID-namnet du angav läggs automatiskt till på sidan som omger listan med länkar.

Klicka på knappen Ny CSS-regel längst ned i dialogrutan Infoga Div.

Det nya CSS-regelnamnet läggs till i listan över stilnamn på panelen CSS Designer Selectors.

På panelen Egenskaper anger du önskade inställningar för färg, bakgrund, storlek, marginaler och utfyllnad.

Stilformateringen tillämpas automatiskt på innehållet i

taggen eftersom du använde stilen när du skapade den i steg 5–7.

För att skapa en sammansatt stil som formaterar den oordnade listan endast när den används i navigeringsfältet, skapa en sammansatt stil som innehåller klassnamnet .navbar:

Placera markören var som helst i punktlistan.

Klicka på plustecknet (+) överst på panelen Väljare.

Se till att Dreamweaver automatiskt skrev in .navbar ul som namn på en ny stil i väljarpanelen i fältet Väljarnamn.

I egenskapspanelen ställer du in marginalerna och utfyllnaden till 0.

Skapa en sammansatt stil för att omdefiniera listobjektstaggarna:

Placera markören var som helst i punktlistan.

Klicka på plustecknet högst upp på panelen Väljare.

Se till att Dreamweaver automatiskt skrev in .navbar ul li som namn på en ny stil i väljarpanelen i fältet Väljarnamn.

I egenskapspanelen ställer du in Display på Inline.

Ändra liststilstypen till Ingen för att ta bort punkten.

Ställ in vänster och höger marginal till 20 pixlar.

Detta steg separerar listobjekten från varandra i den horisontella listan. Du kan ändra inställningen för att skapa det utrymme mellan länkarna som bäst passar din design.

Skapa en stil för att omdefiniera länktaggen:

Klicka för att placera markören i en länk i navigeringsfältet.

Klicka på plustecknet högst upp på panelen Väljare.

Om du vill ändra stilnamnet dubbelklickar du på namnet i väljarpanelen och anger namnet du vill använda.

I avsnittet Text på panelen Egenskaper ställer du in Text-dekoration till Ingen.

Fortfarande i textavsnittet, välj en färg från färgbrunnen för att ange färgen på länkar när de läses in på en sida.

Skapa en ny stil för att omdefiniera svävlänkstaggen så att länkfärgen ändras när en användare flyttar markören över länken:

Klicka på plustecknet högst upp på panelen Väljare.

I fältet Väljarnamn anger du .navbar a:hover.

I avsnittet Text på panelen Egenskaper ställer du in Text-dekoration till Ingen.

Fortfarande i textsektionen, välj en färg från färgbrunnen för att ange länkens färg när användare rullar markören över länken.

Skapa en ny stil för att omdefiniera taggen för besökta länkar så att länkfärgen ändras efter att en användare klickar på en länk:

Klicka på plustecknet högst upp på panelen Väljare.

I fältet Väljarnamn anger du .navbar a:visited.

I avsnittet Text på panelen Egenskaper ställer du in Text-dekoration till Ingen.

Fortfarande i textavsnittet, välj en färg från färgbrunnen för att ange länkens färg efter att den har besökts.

Klicka på knappen Live överst i arbetsytan eller klicka på knappen Förhandsgranska för att visa sidan i en webbläsare för att se effekten av länkstilarna.