Hur man skapar en navigeringsfält från en oordnad lista över länkar i Dreamweaver - dummies

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

Kredit: Bilder av istockphoto. com

Samma länkar finns fortfarande i den oordnade listan, men tillämpningen av formaten ändrar sitt utseende dramatiskt.

Kredit: Bilder av istockphoto. com

Gör så här om du vill skapa en navigationsfält med CSS för att omdefiniera den oordnade listan och länktaggen:

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

2. Skriv in texten som du vill tjäna som länkarna, separera varje genom att trycka på Retur eller Enter-tangenten för att skapa en punktreferens.

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

   -tagg.

3. Skapa länkar genom att välja varje textstycke i sin tur, klicka på hyperlänkikonen i panelen Common Insert och välj sedan den sida du vill länka till eller ange en webbadress.

4. Dra för att välja hela uppsättningen länkar och klicka sedan på ikonen Unordered List i egenskapsinspektören.

   En punktpunkt visas i början av varje länk. Om någon länk inte är avstängd med en separat kula, klicka för att radera mellanslaget mellan den och länken före den, och tryck sedan på Retur eller Enter för att separera länkarna med en styckeåtergång.

   

5. Om du vill lägga till en tagg runt en lista med länkar (eller annat innehåll som redan finns på en sida) markerar du innehållet och klickar sedan på Div-ikonen i panelen Vanlig inmatning.

   Dialogrutan Infoga Div öppnas.

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

6. Välj Wrap Around Selection i rullgardinsmenyn Infoga.

   För mer exakt kontroll över var du lägger till en ny tagg kan du välja alternativ från rullgardinsmenyn Infoga längst upp i dialogrutan Infoga div.

   

7. Ange ett namn i klassfältet eller fältet ID.

   En etikett med klassen eller ID-namnet du skrev in läggs automatiskt till sidan om listan över länkar.

8. Klicka på knappen Ny CSS Rule längst ner i dialogrutan Infoga Div.

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

9. På Egenskaper-panelen anger du önskade inställningar för färg, bakgrund, storlek, marginal och vaddering.

   Stilformateringen tillämpas automatiskt på innehållet i taggen eftersom du använde stilen som du skapade den i steg 5-7.

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

    1. Placera markören någonstans i punktlistan.

    2. Klicka på plustecknet (+) längst upp på panelen Selectors.

    3. Kontrollera att Dreamweaver automatiskt matas in i fältet Väljarnamn. navbar ul som namnet på en ny stil i panelen Selectors.

    4. I fönstret Egenskaper ställer du in marginalerna och vadderingen till 0.

11. Skapa en sammansatt stil för att omdefiniera listobjekttaggarna:

    1. Placera markören någonstans i punktlistan.

    2. Klicka på plustecknet längst upp på panelen Selectors.

    3. Kontrollera att Dreamweaver automatiskt matas in i fältet Väljarnamn. navbar ul li som namnet på en ny stil i panelen Selectors.

    4. På skärmen Egenskaper ställer du in displayen till inline.

    5. Ändra liststilstyp till Ingen för att ta bort kula.

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

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

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

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

    2. Klicka på plustecknet längst upp på panelen Selectors.

    3. Om du vill ändra stilnamnet dubbelklickar du på namnet på panelen Selectors och anger namnet du vill använda.

    4. I Text-delen på Egenskaper-panelen ställer du in Text-Decoration till None.

    5. Välj en färg från färgbrunnen för att ange färgen på länkar när de laddas på en sida.

13. Skapa en ny stil för att omdefiniera markören för svänglänk så att länkfärgen ändras när en användare rullar en markör över länken:

    1. Klicka på plustecknet längst upp på panelen Selectors.

    2. I fältet Väljarnamn anger du. navbar a: svävar.

    3. I Text-delen på Egenskaper-panelen ställer du in Text-Decoration till None.

    4. I textavsnittet väljer du en färg från färgbrunnen för att ange länkens färg när användarna rullar markören över länken.

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

    1. Klicka på plustecknet längst upp på panelen Selectors.

    2. I fältet Väljarnamn anger du. navbar a: besökte.

    3. I Text-delen på Egenskaper-panelen ställer du in Text-Decoration till None.

    4. Välj en färg från färgbrunnen för att ange länkens färg efter att den har besökts.

15. 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.