Hoe maak je een navigatiebalk van een ongeordende lijst met links in Dreamweaver - dummies

Dit is een geweldige CSS-truc voor het omzetten van een lijst met opsommingen in een navigatiebalk in Dreamweaver met een eenvoudig rollover-effect. Het gebruik van een lijst met opsommingstekens voor navigatiebalken is een algemeen geaccepteerde conventie voor websites die voldoen aan de huidige normen voor toegankelijkheid.

Credit: foto's door istockphoto. com

Dezelfde links staan nog steeds in de ongeordende lijst, maar de toepassing van de stijlen verandert hun uiterlijk dramatisch.

Credit: foto's door istockphoto. com

Ga als volgt te werk om een navigatiebalk te maken met CSS om de ongeordende lijst en de koppelingstags opnieuw te definiëren:

Klik om de cursor te plaatsen waar u uw navigatiebalk op de pagina wilt maken.
Voer de tekst in die u als de links wilt gebruiken, scheid deze door op de Return- of Enter-toets te drukken om een paragraafretour te maken.

Als u de koppelingen als een ongeordende lijst wilt opmaken, scheidt u elke regel tekst die u aan een
-tag wilt koppelen.
Maak koppelingen door achtereenvolgens elk stuk tekst te selecteren, op het pictogram Hyperlink in het deelvenster Algemeen invoegen te klikken en vervolgens de pagina te selecteren waarnaar u een koppeling wilt maken of een URL wilt invoeren.
Sleep om de volledige set links te selecteren en klik vervolgens op het pictogram Unordered List in de eigenschappencontrole.

Een opsommingsteken verschijnt aan het begin van elke koppeling. Als een koppeling niet is voorzien van een aparte opsommingsteken, klikt u op om de spatie ertussen te verwijderen en op de koppeling ervoor en drukt u op Return of Enter om de koppelingen te scheiden met een paragraafretour.
Als u een tag rondom een lijst met koppelingen (of andere inhoud die al op een pagina staat) wilt toevoegen, selecteert u de inhoud en klikt u vervolgens op het Div-pictogram in het deelvenster Algemeen invoegen.

Het dialoogvenster Div invoegen wordt geopend.

Het toevoegen van een tag rond de ongeordende lijst met koppelingen is handig als u opmaak wilt toevoegen.
Kies de optie Omwikkelen in de vervolgkeuzelijst Invoegen.

Voor een preciezere controle over waar u een nieuwe tag toevoegt, kunt u opties kiezen in de vervolgkeuzelijst Invoegen boven in het dialoogvenster Div invoegen.
Voer een naam in het veld Class of het veld ID in.

Een tag met de klasse of ID-naam die u hebt ingevoerd, wordt automatisch toegevoegd aan de pagina rond de lijst met koppelingen.
Klik onder aan het dialoogvenster Divine invoegen op de knop Nieuwe CSS-regel.

De nieuwe CSS-regelnaam wordt toegevoegd aan de lijst met stijlnamen in het paneel CSS Designer Selectors.
Geef in het venster Eigenschappen de gewenste instellingen op voor kleur, achtergrond, grootte, marges en opvulling.

De stijlopmaak wordt automatisch toegepast op de inhoud van de tag, omdat u de stijl hebt toegepast zoals u deze hebt gemaakt in stap 5-7.
Als u een samengestelde stijl wilt maken die de ongeordende lijst alleen opmaakt wanneer deze in de navigatiebalk wordt gebruikt, maakt u een samengestelde stijl met de klassenaam. navbar:
1. Plaats uw cursor ergens in de lijst met opsommingen.
2. Klik op het plusteken (+) boven in het deelvenster Selectors.
3. Zorg ervoor dat Dreamweaver automatisch wordt ingevoerd in het veld Naam selecteur. navbar ul als de naam van een nieuwe stijl in het paneel Selectors.
4. Stel in het deelvenster Eigenschappen de marges en opvulling in op 0.
Maak een samengestelde stijl om de lijstitemtags opnieuw te definiëren:
1. Plaats uw cursor ergens in de lijst met opsommingstekens.
2. Klik op het plusteken bovenaan in het deelvenster Selectors.
3. Zorg ervoor dat Dreamweaver automatisch wordt ingevoerd in het veld Naam selecteur. navbar ul li als de naam van een nieuwe stijl in het paneel Selectors.
4. Stel in het deelvenster Eigenschappen de weergave in op Inline.
5. Wijzig het type lijststijl in Geen om de opsommingsteken te verwijderen.
6. Stel de linker- en rechtermarge in op 20 pixels.
  
  Met deze stap worden de lijstitems van elkaar gescheiden in de horizontale lijst. U kunt de instelling wijzigen om de hoeveelheid ruimte te creëren tussen koppelingen die het beste bij uw ontwerp passen.
Een stijl maken om de koppelingstag opnieuw te definiëren:
1. Klik om uw cursor binnen een koppeling in de navigatiebalk te plaatsen.
2. Klik op het plusteken bovenaan in het deelvenster Selectors.
3. Als u de stijlnaam wilt wijzigen, dubbelklikt u op de naam in het deelvenster Selectors en voert u de naam in die u wilt gebruiken.
4. Zet in het gedeelte Tekst van het paneel Eigenschappen Tekst-Decoratie op Geen.
5. Kies in het gedeelte Tekst een kleur uit de kleurenbron om de kleur van links op te geven wanneer ze op een pagina worden geladen.
Maak een nieuwe stijl om de hoverlink-tag opnieuw te definiëren, zodat de linkkleur verandert wanneer een gebruiker een cursor over de link rolt:
1. Klik op het plusteken bovenaan in het deelvenster Selectors.
2. Voer in het veld Naam selector in. navbar a: hover.
3. Zet in het gedeelte Tekst van het paneel Eigenschappen Tekst-Decoratie op Geen.
4. Kies in het gedeelte Tekst een kleur uit de kleurenbron om de kleur van de koppeling op te geven wanneer gebruikers hun muisaanwijzer over de koppeling bewegen.
Een nieuwe stijl maken om de bezochte koppelingstag opnieuw te definiëren, zodat de koppelingskleur verandert nadat een gebruiker op een koppeling klikt:
1. Klik op het plusteken bovenaan in het deelvenster Selectors.
2. Voer in het veld Naam selector in. navbar a: bezocht.
3. Zet in het gedeelte Tekst van het paneel Eigenschappen Tekst-Decoratie op Geen.
4. Kies in het gedeelte Tekst een kleur uit de kleurenbron om de kleur van de koppeling op te geven nadat deze is bezocht.
Klik op de knop Live boven in de werkruimte of klik op de knop Voorbeeld om de pagina in een browser te bekijken om het effect van de koppelingsstijlen te zien.