Hvordan bygge en nettside Meny

Surfers brukes til å navigere på nettet gjennom ved hjelp av hyperkoblinger. Hyperkoblinger veilede brukeren fra en side til en annen. Nettstedet programmerere vil hjelpe lede besøkende gjennom sitt nettsted ved å tilby en navigasjonsmeny sammensatt av hyperlenker eller menyalternativer. Web side menyalternativer kan organiseres i tabeller. Mange øvre navigasjonsmenyer krever bruk et bord som strekker seg horisontalt, eller til venstre eller høyre. Mens mange navigasjons side menyer bruke en vertikal bord, eller et bord som strekker seg fra topp til bunn. Hvert bord er dannet av celler. Hver celle huser vanligvis en menyalternativet.

Bruksanvisning

1 Åpne eller opprette en ny webside i en webside eller tekst editor.

2 Lag en tabell for å huse menyen. Øvre navigasjon menyer er vanligvis dannet fra en vertikal bord, er navigasjons side tabeller vanligvis dannet av horisontale menyer. For å opprette en tabell, velger du antall rader og kolonner for å danne menyen.

Eksempel A: Vertikal meny med tre celler i tre kolonner og en rad.

<Table style = "text-align: left; width: 100%;" border = "0"

cellpadding = "2" cellspacing = "2">

<Tbody>

<tr>

& Lt; td> Kolonne 1 & lt; / td>

& Lt; td> Kolonne 2 & lt; / td>

& Lt; td> Kolonne 3 & lt; / td>

& Lt; / tr>

</ Tbody>

</ Table>

Eksempel B: Horisontal meny med tre celler i tre rader og en kolonne.

<Table style = "text-align: left; width: 100%;" border = "0"

cellpadding = "2" cellspacing = "2">

<Tbody>

<tr>

& Lt; td> Rad 1 & lt; / td>

& Lt; / tr>

& Lt; tr>

& Lt; td> Row 2 & lt; / td>

& Lt; / tr>

& Lt; tr>

& Lt; td> Row 3 & lt; / td>

& Lt; / tr>

</ Tbody>

</ Table>

3 Skriv inn et navn for hvert menyalternativ i hver celle. Mange menyer vil inneholde lenker til sider som Forside, Om oss og Kontakt oss. Hvert alternativ bør være i sin egen celle. For dette eksempelet, vil vi legge til en ekstra kolonne for å huse en ekstra celle alternativ i vår horisontale menyen.

Eksempel:

<Table style = "text-align: left; width: 100%;" border = "0"

cellpadding = "2" cellspacing = "2">

<Tbody>

<tr>

& Lt; td> Home & lt; / td>

& Lt; td> Kontakt oss & lt; / td>

& Lt; td> Om oss & lt; / td>

& Lt; td> Spørsmål og svar & lt; / td>

& Lt; / tr>

</ Tbody>

</ Table>

4 Sett inn hyperkobling kode for hvert menyalternativ. En hyperkobling er en aktiv link som, når den klikkes, vil lede brukeren til den angitte websiden som er representert ved menyvalget. Hyperkoblinger krever at nettadressene er vedlagt i en "ahref" braketten før og etter teksten knyttes.

<Table style = "text-align: left; width: 100%;" border = "0"

cellpadding = "2" cellspacing = "2">

<Tbody>

<tr>

& Lt; td> & lt; a href = "http://www.myexample.com/home.htm"> Home & lt; / a> & lt; / td>

& Lt; td> & lt; a href = "http://www.myexample.com/contactus.htm"> Kontakt oss & lt; / a> & lt; / td>

& Lt; td> & lt; a href = "http://www.myexample.com/aboutus.htm"> Om oss & lt; / a> & lt; / td>

& Lt; td> & lt; a href = "http://www.yahoo.com"> Spørsmål og svar & lt; / a> & lt; / td>

& Lt; / tr>

</ Tbody>

</ Table>

5 Tilpass menyen. Mest menyen tilpasning foregår i "table style" brakett i begynnelsen av menyen kode. For dette eksempelet, vil vi legge til en tykk, synlig ramme rundt menyen. Plus, vil vi justere all teksten slik at den sitter pent i midten av hver celle, og plass alle cellene lenger fra hverandre.

Eksempel:

<Table style = "text-align: center; width: 100%;" border = "6"

cellpadding = "2" cellspacing = "5">

** Sammenligne denne koden til de to øverste linjene i den opprinnelige koden. Legg merke vi har økt antall ved siden av "grensen" og "cellspacing." Du kan velge så mange du vil, inkludert null. Vi også endre "text-align" fra venstre mot sentrum. Du kan også justere teksten til "riktig".