Terwijl tabellen niet langer aanbevolen voor webdesign, worden omdat zij langzamer laden, verkiezen sommige ontwerpers hun betrouwbaarheid en het gemak van setup. Tabellen en div-elementen kunt u een horizontale navigatiebalk maken. De tabellen ook kunnen u afbeeldingen in te voegen in plaats van alleen maar woorden, zodat u kunt het invoegen van een grafisch navigatietoets.
De tabel instellen
De tabel maken door de eerste opzetten van de grens met één tabelrij en vijf tabelkolommen. In het volgende voorbeeld heeft vijf kolommen, maar ontwerpers meer of minder, afhankelijk van de behoeften van uw website kunnen toevoegen. De code zal er zo uitzien:
"
"rij 1, cel 1 rij 1, cel 2 rij 1, cel 3 rij 1, cel 4 rij 1, cel 5 Schrijf de namen van de subpagina's of subdomeinen in de tabelgegevens. Bijvoorbeeld, als uw website over de honden, de navigatie balk zal hebben informatie, zoals "het verhogen van een puppy," "het kiezen van een puppy," "voeden een puppy," "grooming" en puppy gezondheid. " De code zal er zo uitzien:
"
"Het kiezen van een Puppy Het verhogen van een Puppy Een Puppy voeding Het verzorgen van een pup De gezondheid van de pup Afbeeldingen invoegen als u niet dat tekst zonder opmaak wilt. Hebt u de maker van een afbeelding, kunt u het maken van de originele afbeeldingen die er dan als knoppen op de navigatiebalk ziet. Als u wilt dat de afbeeldingen invoegen, hechten het bronadres van de afbeelding binnen de tabelsecties van de gegevens. Bijvoorbeeld:
"
< / td "> http://www.mynewpuppy.com/images/choosingpuppybutton.jpg" > < / td > " Enzovoort, voor de rest van de gegevens van de tabel.
Div-elementen gebruiken om de stijl van de navigatiebalk
Maak een tweede document dat de CSS div-opdrachten hebben zal. Div-tags kunt u de kleur, de uitlijning en het formaat van de tabel wijzigen. Een voorbeeld van CSS opdrachten voor de tabel hierboven zou er zo uitzien:
tborder {}
Achtergrondkleur: #FFFFFF;
kleur: #445534;
rand: 2px;
}
trow {}
align: Midden;
breedte: 10px;
hoogte: 5px;
}
tdata {}
align: Midden;
tekst: 12px;
}
Div-elementen toewijzen aan de HTML-stylesheet. Ga terug naar het HTML-blad waar u de tabel hebt gemaakt. De div-elementen toewijzen aan uw tabel. De nieuwe code ziet er ongeveer als volgt uit:
""
Het kiezen van een Puppy Het verhogen van een Puppy Een Puppy voeding Het verzorgen van een pup De gezondheid van de pup Merk op dat een nieuwe div is geplaatst vlak voor de volgende HTML-code. Zo is de tabel gegevens div, "tdata," ingevoegd vlak voor de eerste tabel gegevens HTML-tag "
." Sla het HTML-blad- en opmaakmodel. Uploaden zowel op uw website server met de cPanel (control panel).
Bekijk de webpagina en ervoor te zorgen dat de navigatiebalk correct wordt weergegeven. Misschien moet u de breedte en de hoogte aanpassen een paar keer te krijgen om te passen precies zoals u dat wilt.
- Zorg ervoor dat u een externe stijlpagina gebruiken in plaats van een ingesloten. Het maakt het bijwerken van de CSS een stuk makkelijker.
- Tabellen kunnen langer duren om te laden op een Web-browser.