Sådan oprettes en hjemmeside Brug en Tabs Layout

June 8

En hjemmeside med en fanerne layout tilbyder en ren og effektiv måde at navigere mellem dine sider. Fanerne kan vises i en række på toppen af ​​din side eller langs siden som en tabbed notesbog. Hemmeligheden bag denne type layout er cascading style sheets (CSS) eller god grafik arbejder med knapper, som du opretter i et grafikprogram. Du kan også genvej oprette en hjemmeside med en tabs layout ved at starte med en web-skabelon, der allerede har fanerne skabt og redigering af tekst labels. Nogle kendskab til HTML vil være nødvendigt at oprette en faner layout.

Instruktioner

Brug en skabelon med færdiglavede Tabs

1 Sådan oprettes en hjemmeside Brug en Tabs Layout

Åbn din web redigeringssoftware og åbne en skabelon, der har faner layout, du vil bruge.

2 Sådan oprettes en hjemmeside Brug en Tabs Layout


Undersøg HTML-koden for at se, hvordan fanerne er skabt. Klik og skriv nye navne på fanerne, hvis de er redigerbare (CSS skabeloner er normalt), eller find de grafikfiler fra skabelonen, der udgør fanerne. Disse kan være placeret i en mappe kaldet "Billeder", der er downloadet med skabelonfilerne. Du kan også erstatte din egen grafik til skabelon dem, så længe de har samme dimensioner.

3 Åbn fanen grafik i dit grafikprogram redigeringsværktøj for at tilpasse dem. Der bør være "kilde" grafikfiler med skabelonen, hvis de er beregnet til at blive redigeret - en PNG eller PSD-fil, ikke en GIF eller JPG / JPEG-fil. GIF og jpgs er komprimerede grafik, og eventuelle ændringer vil være af lavere kvalitet, end hvis du havde den oprindelige kilde fil til at arbejde fra.

4 Eksportere en opdateret JPG-fil (med samme navn) fra dit grafikprogram til at erstatte den skabelon fil. Vend tilbage til din web redigeringsværktøj og opdatere resten af ​​skabelonen med din hjemmeside oplysninger.

5 Opret nye sider til dit websted med din hjemmeside redigeringsværktøj. Tilføj links til fanen knapperne på den første side ved at vælge dem og bruge din web redigeringsværktøjer kommando "Indsæt link".

6 Kopier og indsæt fanen navigation fra første side til alle de andre sider på dit websted, så fanebladet layout er ens på tværs af alle siderne på dit websted. Gem dine filer og overføre dem til din webserver for at teste i webbrowseren.

Opret Tabs med et grafikprogram

7 Åbn din grafik program og starte et nyt dokument med en baggrundsfarve det samme som dit website.

8 Sådan oprettes en hjemmeside Brug en Tabs Layout

Lav en afrundet rektangel i en farve, der koordinerer med din hjemmeside tema og i kontrast til baggrunden.

9 Sådan oprettes en hjemmeside Brug en Tabs Layout


Skabe et tekstobjekt i en farve, der kontrasterer med rektanglet. Indtast etiket for din knap og placere den på toppen af ​​afrundet rektangel. Gentag disse to sidste trin for hver fane / knap, du ønsker på din hjemmeside.

10 Sådan oprettes en hjemmeside Brug en Tabs Layout


Juster tekst og knapper i træk for at danne en navigationsknap bar.

11 Sådan oprettes en hjemmeside Brug en Tabs Layout


Skabe et rektangel uden ramme den samme farve som baggrunden og så brede som rækken af ​​knapper. Placer dette rektangel over den nederste del af knapperne for at gøre dem til "faner." Det kan være nødvendigt at flytte din tekst objekter op et par pixels for at forhindre dem i at blive afskåret.

12 Sådan oprettes en hjemmeside Brug en Tabs Layout


Gem, trim baggrunden og eksportere grafik som din hovednavigation bar for hjemmesiden. Lav kopier af denne fil til at oprette navigationslinjer for de andre web-sider på dit websted, der svarer til de knapper, du netop har lavet. Ændre farven på en fane på hver navigationslinjen som et visuelt stikord til den besøgende, som siden han ser.

13 Eksporter hver af disse nye navigationslinjer som en separat JPG eller GIF-fil.

14 Sådan oprettes en hjemmeside Brug en Tabs Layout

Åbn din web redigeringssoftware og bruge kommandoen "Indsæt grafik" for at tilføje de navigationslinjer til dine websider.

15 Brug billedet kortet værktøj i din web redigeringssoftware til at skabe "hot spots" på de faner, der linker til de andre sider på webstedet. Gentag for hver side. For at spare tid, kopiere og indsætte billedet kortet HTML-kode fra den første side til de andre sider i stedet for redoing det hver gang.

16 Gem dine filer og overføre dem til din webserver for at teste i webbrowseren.

Opret Tabs med CSS

17 Sådan oprettes en hjemmeside Brug en Tabs Layout

Åbn din grafik program og oprette to trekanter eller afrundede hjørner for kanterne af dine faner. CSS kode opretter en rektangel form kun, så disse små grafik hjælper knapperne ligner mere faner.

18 Eksporter hjørnerne som GIF-filer, en GIF til venstre hjørne og én for det højre hjørne.

19 Sådan oprettes en hjemmeside Brug en Tabs Layout

Opret en typografiark fil (.css) i din web redigeringssoftware. Tilføj den kode, du ser i denne illustration tilpasset fra en tutorial ved Trenton Moss (se Resources) til CSS-fil og derefter gemme.

20 Åbn din webside og indsæt HTML-kode i afsnittet HEAD tag at linke din side til CSS stylesheet. Koden vil se ud: link href = "NAME_OF_FILE.css" rel = "stylesheet" type = "text / css". 21 Sådan oprettes en hjemmeside Brug en Tabs Layout


Tilføj HTML-koden du ser i denne illustration til din webside for at referere til .css filen og oprette dine navigationsfanerne.

22 Sådan oprettes en hjemmeside Brug en Tabs Layout


Sæt "#" i "a" HTML-tags med stien til den fil, som fanen skal linke til. Afhængigt af hvad forhåndsvisning funktioner din webeditor tilbud, kan du kun modtage et nøjagtigt billede af de CSS faner, når du åbner siden i en webbrowser.

23 Sådan oprettes en hjemmeside Brug en Tabs Layout


Gem ændringer på din side, og få det vist i din webbrowser til at tjekke det.

TIPS

  • Det kan være nødvendigt at lege med polstring-venstre og polstring til højre indstillinger CSS eller bruge hårde mellemrum at få faner og tekstetiketter at line op på den ønskede måde.
  • Ældre webbrowsere, der ikke kan fortolke CSS vil have problemer med at vise faner, du opretter med CSS kode. Test altid din hjemmeside i en række forskellige browsere og på både Windows og Macintosh-operativsystemer, før man overvejer det fuldstændig.

relaterede artikler