Deze wikiHow leert je hoe je Adobe Dreamweaver kunt gebruiken om een vervolgkeuzelijst voor een webpagina te maken. Vervolgkeuzelijsten zijn menu's die "naar beneden vallen" wanneer er op een item op uw webpagina wordt geklikt, waardoor er meer opties worden weergegeven.
Stappen
Stap 1. Open een Dreamweaver-project
Dubbelklik hiervoor op het projectbestand. Als u een nieuw Dreamweaver-project wilt maken, opent u in plaats daarvan Dreamweaver, klikt u op Bestand, Klik Nieuwen volg eventuele aanwijzingen op het scherm.
Stap 2. Maak een geordende lijst
Om een vervolgkeuzemenu te maken, moet u ten minste één item met opsommingstekens hebben. U kunt een opsommingsteken maken door CSS uit te schakelen (klik op de Weergave menu-item, selecteer Stijlweergaveen klik op Weergavestijlen als het is aangevinkt), klikt u op de locatie waar u het punt wilt toevoegen, klikt u op het pictogram met opsommingstekens onder in het venster en typt u de naam van het punt. U moet dan CSS weer inschakelen voordat u doorgaat.
- De naam van het punt hier zal dienen als de activator van uw vervolgkeuzemenu (bijv. de knop waarover u zweeft of tikt om het vervolgkeuzemenu te openen).
- Sla deze stap over als u al een lijstitem heeft dat u naar een vervolgkeuzemenu wilt converteren.
Stap 3. Bepaal de naam van uw lijst
Klik op de Code tabblad en zorg ervoor dat u op de Broncode instelling en scrol vervolgens omlaag naar de code van uw bestelde lijst (deze staat tussen een"
"tag en een"
"tag) en zoek naar de " " tag boven de top"
tag. Het woord tussen aanhalingstekens is de naam van uw lijst.
-
Als u geen naam ziet, plaatst u de tag (waarbij naam verwijst naar uw voorkeursnaam van de lijst) direct boven de
label.
- Klik + rechts van de kop "Selectors".
- Typ #name ul waar "naam" de naam van uw lijst is.
- Druk tweemaal op ↵ Enter.
- Scroll naar beneden en klik op lijst-stijl-type in het paneel onderaan de CSS-ontwerper tabblad.
- Klik geen in het resulterende pop-upmenu.
- Klik + rechts van de kop "Selectors".
- Typ #name li waar "naam" de naam van uw lijst is.
- Zoek de "zwevende" kop in het deelvenster onderaan de CSS-ontwerper tabblad.
- Klik op de Links knop direct rechts van de "zwevende" kop.
- Zorg ervoor dat uw #noem een item is geselecteerd in de CSS-ontwerper tabblad.
- Scrol omlaag naar de kop "weergave" in het deelvenster.
- Klik op de uiterst rechtse kant van de kop "weergave" en klik vervolgens op blok in het resulterende menu.
- Zorg ervoor dat uw #noem een item is geselecteerd in de CSS-ontwerper tabblad.
- Scrol omlaag naar de kop 'opvulling' in het deelvenster.
- Wijzig de bovenste en onderste "px"-tekstvelden om ten minste 5 te lezen.
- Wijzig de linker en rechter "px"-tekstvelden om ten minste 10 te lezen.
- Klik + rechts van de kop "Selectors".
- Typ #nave a:hover (waarbij "naam" de naam van uw lijst is) en druk tweemaal op ↵ Enter.
- Klik op het tabblad "Achtergrondkleur".
- Selecteer Achtergrond kleur en selecteer vervolgens een lichtere kleur dan u voor de achtergrondkleur hebt gebruikt.
- Klik op rechts van het lijstitem waarvan u een vervolgkeuzemenu wilt maken en druk vervolgens op ↵ Enter.
- Druk op Tab ↹.
- Typ de naam van uw eerste vervolgkeuzemenu-item en druk vervolgens op ↵ Enter.
- Typ de naam van het volgende vervolgkeuzemenu, druk vervolgens op ↵ Enter en herhaal indien nodig.
- Klik + naast "Selectors", typ dan #name ul ul en druk tweemaal op ↵ Enter.
- Scroll naar beneden en klik op Scherm, dan klikken geen in het pop-upmenu.
- Zoek en klik positie, dan klikken absoluut in het pop-upmenu.
- Klik + naast "Selectors", typ dan #name ul li:hover > ul en druk tweemaal op ↵ Enter.
- Zoek en klik Scherm, dan klikken blok in het resulterende pop-upmenu.
- Klik + naast "Selectors", typ dan #name ul ul li en druk tweemaal op ↵ Enter.
- Zoek het kopje 'zwevend'.
- Klik op de "geen" () optie rechts van de "zwevende" kop.
Stap 4. Verwijder de opsommingsteken(s)
Zorg ervoor dat u op de juiste plaats bent door op de te klikken Ontwerp tabblad en klik vervolgens op de CSS-ontwerper tabblad in de rechterbovenhoek van het venster en doe het volgende:
Stap 5. Wijzig uw geordende lijst zodat deze horizontaal wordt weergegeven
Om dit te doen:
Stap 6. Voeg een actieve tag toe voor uw lijst
Klik op de + rechts van "Selectors", typ vervolgens #name a (waarbij "name" de naam van uw lijst is) en druk tweemaal op ↵ Enter.
Stap 7. Voeg een achtergrondkleur toe
Selecteer de #noem een item indien nodig, klik dan op het doosvormige tabblad "Achtergrondkleur" bovenaan de CSS-ontwerper paneel, selecteer de Achtergrond kleur en selecteer een achtergrondkleur om te gebruiken.
Dit is de kleur die de items van uw vervolgkeuzelijst zullen gebruiken
Stap 8. Zorg ervoor dat uw lijstitems het "blok" -formaat gebruiken
Dit formaat zorgt ervoor dat wanneer iemand op een item in de lijst gaat klikken of tikken, ze het kunnen openen door iets erboven of eronder te selecteren in plaats van precies de tekst te moeten selecteren:
Stap 9. Voeg zo nodig opvulling toe
Als u merkt dat uw lijstitems tegen elkaar aan staan, kunt u er als volgt wat ruimte tussen plaatsen:
Stap 10. Maak een hover-kleur
Dit is de kleur die verschijnt wanneer u met uw muiscursor over een item in het vervolgkeuzemenu beweegt:
Stap 11. Schakel CSS uit
Klik op de Weergave menu-item, selecteer Stijlweergaveen klik op de Weergavestijlen optie in het pop-outvenster.
Als de Weergavestijlen optie grijs wordt weergegeven, klikt u ergens in uw Dreamweaver-document en probeert u het opnieuw.
Stap 12. Maak de inhoud van het vervolgkeuzemenu
U kunt dit doen door subpunten toe te voegen onder het opsommingsteken dat u wilt gebruiken als de knop van het vervolgkeuzemenu:
Stap 13. Bind de inhoud van het vervolgkeuzemenu aan een opsommingsteken
Om dit te doen:
Stap 14. Maak het vervolgkeuzemenu zelf
Hiervoor moet je nog een selector toevoegen:
Stap 15. Zorg dat de inhoud van het vervolgkeuzemenu verticaal wordt weergegeven
Standaard wordt de inhoud van het vervolgkeuzemenu weergegeven in een horizontale balk, maar u kunt ze als volgt in een verticale kolom forceren:
Stap 16. Sla uw project op
Druk hiervoor op Ctrl+S (Windows) of ⌘ Command+S (Mac).
