Sådan oprettes en navigationslinje fra en uordnet liste over links i Dreamweaver - dummies

Her er et godt CSS-trick til at dreje en punktliste i en navigationslinje i Dreamweaver med en simpel rollover-effekt. Brug af en punktliste for navigationsbjælker er en vel accepteret konvention for websteder, der opfylder de nuværende tilgængelighedsstandarder.

Kredit: Fotos af istockphoto. com

De samme links findes stadig i den uordnede liste, men anvendelsen af ​​stilarterne ændrer deres udseende dramatisk.

Kredit: Billeder af istockphoto. com

Følg disse trin for at oprette en navigationslinje ved hjælp af CSS til at omdefinere den uordnede liste og linketiketter:

1. Klik for at placere markøren, hvor du vil oprette navigationslinjen på siden.

2. Indtast den tekst, du vil tjene som linkene, adskille hver ved at trykke på Retur eller Enter-tasten for at oprette et afsnit retur.

   For at formatere linkene som en uordnet liste skal du adskille hver tekstlinje, som du vil linke til en

   tag.

3. Opret links ved at vælge hvert stykke tekst igen, klikke på hyperlinkikonet i panelet Fælles indsæt og derefter vælge den side, du vil linke til eller indtaste en webadresse.

4. Træk for at vælge hele sæt af links, og klik derefter på ikonet Uordnet liste i ejendomsinspektøren.

   Et punkt punkt vises i begyndelsen af ​​hvert link. Hvis et link ikke er afbrudt med en separat kugle, skal du klikke for at slette mellemrummet mellem det og linket før det, og tryk derefter på Retur eller Enter for at adskille forbindelserne med et afsnit tilbage.

   

5. Hvis du vil tilføje et tag omkring en liste over links (eller andet indhold, der allerede findes på en side), skal du vælge indholdet og derefter klikke på Div-ikonet i panelet Fælles indsæt.

   Dialogboksen Indsæt div åbnes.

   Tilføjelse af et tag omkring den uordnede liste over links er nyttigt, hvis du vil tilføje formatering.

6. Vælg Wrap Around Selection fra rullelisten Indsæt.

   For mere præcis kontrol over, hvor du tilføjer et nyt tag, kan du vælge indstillinger fra rullelisten Indsæt øverst i dialogboksen Indsæt div.

   

7. Indtast et navn i feltet Klasse eller ID-feltet.

   Et mærke med klassen eller det id, du indtastede, tilføjes automatisk til siden omkring listen over links.

8. Klik på knappen Ny CSS Rule nederst i dialogboksen Indsæt div.

   Det nye CSS-reglernavn tilføjes til listen over stilnavne i panelet CSS Designer Selectors.

9. Angiv dine ønskede indstillinger for farve, baggrund, størrelse, margener og polstring i panelet Egenskaber.

   Stilformatering anvendes automatisk til indholdet af mærket, fordi du brugte stilen, som du oprettede den i trin 5-7.

10. For at oprette en sammensat stil, der kun formaterer den uordnede liste, når den bruges i navigationslinjen, skal du oprette en sammensat stil, der indeholder klassenavnet. navbar:

    1. Placer markøren hvor som helst i punktlisten.

    2. Klik på plustegnet (+) øverst på panelet Selectors.

    3. Sørg for, at Dreamweaver automatisk indtastes i feltet Selector Name. navbar ul som navnet på en ny stil i panelet Selectors.

    4. I panelet Egenskaber skal du angive margener og polstring til 0.

11. Opret en sammensat stil for at omdefinere listen elementetiketter:

    1. Placer markøren hvor som helst i punktlisten.

    2. Klik på plustegnet øverst på panelet Selectors.

    3. Sørg for, at Dreamweaver automatisk indtastes i feltet Selector Name. navbar ul li som navnet på en ny stil i Selectors panelet.

    4. Indstil Display til Inline i panelet Egenskaber.

    5. Skift List Style Type til None for at fjerne punktet.

    6. Indstil venstre og højre margen til 20 pixel.

       Dette trin adskiller listeposterne fra hinanden i den horisontale liste. Du kan ændre indstillingen for at skabe den mængde plads mellem de links der passer bedst til dit design.

12. Opret en stil til at omdefinere linketiketten:

    1. Klik for at placere markøren inden for et link i navbjælken.

    2. Klik på plustegnet øverst på panelet Selectors.

    3. Hvis du vil ændre stilnavnet, skal du dobbeltklikke på navnet i panelet Selectors og indtaste det navn, du vil bruge.

    4. I tekst-sektionen på panelet Egenskaber skal du indstille Tekst-dekoration til Ingen.

    5. Vælg endnu en farve fra farvebrønden for at angive farven på links, når de er indlæst på en side.

13. Opret en ny stil til at omdefinere hover-link-tagget, så linkfarven ændres, når en bruger ruller en markør over linket:

    1. Klik på plustegnet øverst på Selectors-panelet.

    2. I feltet Selector Name skal du indtaste. navbar a: svæver

    3. I tekst-sektionen på panelet Egenskaber skal du indstille Tekst-dekoration til Ingen.

    4. I tekstafsnittet skal du vælge en farve fra farvebrønden for at angive linkets farve, når brugerne ruller markøren hen over linket.

14. Opret en ny stil til at omdefinere det besøgte link-tag, så linkfarven ændres, efter at en bruger har klikket på et link:

    1. Klik på plustegnet øverst på Selectors-panelet.

    2. I feltet Selector Name skal du indtaste. navbar a: besøgt.

    3. I tekst-sektionen på panelet Egenskaber skal du indstille Tekst-dekoration til Ingen.

    4. I tekstafsnittet skal du vælge en farve fra farvebrønden for at angive linkets farve efter at den er blevet besøgt.

15. Klik på knappen Live øverst i arbejdsområdet, eller klik på knappen Preview for at se siden i en browser for at se effekten af ​​linkformaterne.