Hoe maak je een horizontale navigatiebalk met behulp van tabellen en div-elementen



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 1rij 1, cel 2rij 1, cel 3rij 1, cel 4rij 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 PuppyHet verhogen van een PuppyEen Puppy voedingHet verzorgen van een pupDe 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 PuppyHet verhogen van een PuppyEen Puppy voedingHet verzorgen van een pupDe 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.

Tips & waarschuwingen
  • 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.

Gerelateerde Artikelen

Hoe maak je een horizontale navigatiebalk met behulp van CSS

Hoe maak je een horizontale navigatiebalk met behulp van CSS

Het creëren van een horizontale navigatiebalk met behulp van CSS is een waardevolle vaardigheid met HTML. U kunt professionele navigatiebalken die u in een website gebruiken kunt bouwen. U kunt de kleur, grootte en rand tekstkleuren wijzigen zonder u
Hoe maak je een verticale navigatiebalk met behulp van CSS

Hoe maak je een verticale navigatiebalk met behulp van CSS

Een horizontale navigatiebalk maken zal toevoegen van functionaliteit aan uw site en Bescherm het georganiseerd. Het kan ook meerwaarde in termen van SEO. Het is een eenvoudig proces dat kan worden gedaan met behulp van CSS en Cascading Style Sheets.
Hoe maak je een gevaar spel met behulp van PowerPoint

Hoe maak je een gevaar spel met behulp van PowerPoint

Met Microsoft PowerPoint-programma, kunt u de indeling van NBC's klassieke TV spel show, gevaar opnieuw maken. Met volledige controle over de vragen, de antwoorden en de toegekende punten, kunt u een gevaar spel aan een instelling of onderwerp. Voor
Hoe maak je een geanimeerde Gif met behulp van Photoshop

Hoe maak je een geanimeerde Gif met behulp van Photoshop

Wil je indruk maken op de wereld met uw website? Maak uw eigen GIF-animatie met behulp van Photoshop.Wat die u nodig hebtPhotoshop 5.5ImageReadyMaken van de kunstOpen Photoshop 5.5 en maak een nieuwe afbeeldingsbestand meten van 100 x 100 pixels. Ste
Hoe maak je een ruige hond met behulp van garen

Hoe maak je een ruige hond met behulp van garen

Maak een ruige hond met behulp van garen te geven aan een jong kind. Dit eenvoudig en leuk project zal leiden tot een schattige kleine pup die elk kind zou houden. Weinig materialen nodig zijn voor dit project, en de tijd zal nemen u minimaal. In min
Hoe maak je een goede presentatie met behulp van een driebladige Board

Hoe maak je een goede presentatie met behulp van een driebladige Board

Driebladige planken zijn door schoolkinderen jarenlang gebruikt om zinvolle en aangenaam presentaties te maken. Voor beurzen van de wetenschap of gewoon een klassenproject, hebben deze platen in zowat elke basisschool in de Verenigde Staten voorgedaa
Hoe maak je een boerderij Diorama met behulp van een schoenendoos

Hoe maak je een boerderij Diorama met behulp van een schoenendoos

Schoenendoos diorama's maken leuke en creatieve klasse projecten voor jonge studenten. Naast het uitdagend hun kunst vaardigheden, kunnen ook diorama's bevatten een educatieve component, of het te leren over het leven op een boerderij met een boerder
Hoe maak je een muziek CD met behulp van iTunes

Hoe maak je een muziek CD met behulp van iTunes

Het maken van een muziek-CD met behulp van iTunes is een eenvoudig en gemakkelijk proces, vooral als u al gebruik van iTunes voor het beheren van uw digitale muziekcollectie. Als u niet iTunes gebruikt voor het beheren van uw digitale muziekverzameli
Hoe maak je een koud verhelpen met behulp van azijn

Hoe maak je een koud verhelpen met behulp van azijn

Apple cider azijn heeft altijd keek naar voor haar natuurlijke helende bevoegdheden van het helpen van de blaasinfecties aan de gewone verkoudheid. Wanneer u een koude vechten, is pH-waarde van het lichaam ook basisch. Apple cider azijn helpt evenwic
Hoe maak je een bal Float met behulp van magneten

Hoe maak je een bal Float met behulp van magneten

Magneten hebben beide een negatieve of positieve polariteit, voor het aantrekken van bepaalde metalen. Die tegengestelde polariteit hebben zijn ook geschikt voor het aantrekken van elkaar. Echter, als u probeert te duwen twee magneten met de dezelfde
Hoe maak je een prinses pop met behulp van de Verwende Chef grote Cup meten

Hoe maak je een prinses pop met behulp van de Verwende Chef grote Cup meten

Je kan al afgevraagd hoe maak je die mooie prinses Pop-taarten zonder te investeren in een pan cake die je nooit weer zal gebruiken. Het goede nieuws is dat u kunt een groot glas van de chef-kok verwend meten container bak de cake pop rok. De 8-cup (
Hoe maak je een Restaurant Menu met behulp van PowerPoint

Hoe maak je een Restaurant Menu met behulp van PowerPoint

Microsoft PowerPoint heeft een gebruikersvriendelijke interface die de taak stroomlijnt van het creëren van tekstdocumenten, zoals menu's. Een minimalistische benadering van menu schrijven is ideaal om verschillende redenen. Het maakt het lezen makke
Hoe maak je een E-Portfolio met behulp van PowerPoint

Hoe maak je een E-Portfolio met behulp van PowerPoint

Landing een baan of het verwerven van nieuwe klanten betekent dat u wilt uw kennis en vaardigheden te demonstreren. In de oude dagen, dat betekende sjouwen rond een omvangrijk portfolio overal waar die je ging. Vandaag kunt u alles wat achter door he
Hoe maak je een eenvoudige tapijt met behulp van Photoshop

Hoe maak je een eenvoudige tapijt met behulp van Photoshop

Als u zich hoe een kamer eruit zou zien met nieuw tapijt afvraagt, neem een foto van het en voeg een virtuele tapijt met Photoshop CC. Als u met een zwart-witte wolken filter begint, kunt u de kleur aanpassen en maken het als licht of donker als u wi