Artikeln förutsätter att du läst de föregående artiklarna i Dreamweaver Guide.
Skapa och formatera länkar
Snygga länkar med CSS i Dreamweaver
Så här gör du för att skapa en länk:
- Se till att du har webbsidan som du skapat tidigare öppen i DreamWeaver.
- För att skapa en länk så är det enklaste sättet att använda dig av design-vyn (det undre fönstret i split view m.a.o). Markera sidhuvud-elementet, radera texten "sidhuvud" och skriv in:
Länk 1 Länk 2 Länk 3
Kommentar: Dessa länktexter är inte formaterade som stycken i källkoden, men det kan du givetvis göra som du själv vill.
- Markera texten "Länk 1".
- I "properties"- fönstret som är under "design"-fönstret så finns det en textruta med ordet "link" framför. Där kan du skriva in det filnamn eller den webbsida som du vill länka till. Om du vill länka till en webbsajt på nätet, exempelvis Dagens Nyheter, så skriver du in hela URL:en http://www.dagensnyheter.se i det fönstret.
- Om du vill att den sida som du länkar till ska öppnas i ett nytt fönster så kan du även använda rullgardinsmenyn nedanför "link"-fönstret och sedan välja "target --> blank".
Du kan inte använda dig av target --> blank om du vill att sidan ska validera som strict XHTML!
- Om du vill länka till en fil på din egen sida så kan det snabbaste sättet vara att använda hårkorset som finns till höger om link-rutan och dra det och släppa det över den fil som du vill länka till. I det här exemplet vill jag inte länka till något speciellt så jag skriver bara in "#1" "#2" och "#3" i link-rutan för att skilja länkarna åt. Gör det du med så att vi har lika. OCH: Glöm inte att kolla in källkoden när du har skapat en länk så att du lär dig hur det ser ut även utan hjälp av DreamWeaver.
Behöver du en repetition? Här hittar du infon om XHTML-länkar.
Formatera länkar med CSS
För att formatera länkarna så gör du på liknande sätt som tidigare i din CSS-fil. Den här gången är det dock div-elementet sidhuvud som du vill formatera, därför är det också div#sidhuvud som ska in i CSS-koden. En länk representeras av taggen a, alltså blir det div#sidhuvud a som fungerar som selektor. I din CSS-fil skriver du alltså in följande kod på en ny rad:
div#sidhuvud a {padding-right: 20px;}
Som du märker så gör den högra paddingen att länkarna separeras från varandra med 20 pixlar och de blir mer lättlästa.
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: HTML (.txt) CSS (.txt)
Nästa artikel: Flytande bilder
