Tutorial:
Del 6: Menu og Hosting
Dette er del 6 i en serie, der vil forklare hvordan man bruger en gratis hjemmesideskabelon til at opbygge og offentliggøre et komplet websted. Læs del 1 for en introduktion til tutorialen, del 2 som beskriver hvordan man henter og udpakker en skabelon og finder en editor til dit operativsystem, del 3 som forklarer hvordan man redigerer index.html, del 4 som forklarer HTML's anatomi, attributter og hvordan man erstatter eller ændrer størrelsen på header-billedet, del 5 som forklarer <head> sektionen af HTML, meta tags og hvordan man redigerer indholdet.
Dette er den sidste del af denne tutorial, så nu er det tid til at få hjemmesiden klar til udgivelse. Hvis du har læst og fulgt instruktionerne i de foregående dele, skal du nu have en index.html fil, hvor kun to ting fra det oprindelige indhold i Variant Duo template er tilbage: navigationsmenuen og sidefoden. I slutningen af del 5, foreslog jeg, at du lavede kopier af index.html og omdøbte dem til noget andet, for eksempel about.html. Efter oprettelse af about.html, kan du redigere det vigtigste indhold af denne fil for at oprette en anden side til din hjemmeside. Denne proces kan gentages, for at oprette så mange sider som du ønsker dit websted skal have. Der er ingen grænser for antallet af sider, du kan have. Men, det visuelle design af navigationsmenuen i Variant Duo skabelonen begrænser antallet af sider, du kan placere i hovedmenuen, så hvis du ønsker at have mere end 7-8 sider, skal du muligvis til at ændre menuens design eller placere nogle links i det overordnede indhold i stedet for i navigationsmenuen.
I denne sidste del vil jeg holde det enkelt og kun bruge tre sider. Jeg har lavet to kopier af index.html og omdøbt dem til about.html og links.html. Jeg har også ændret deres indhold, så den aktuelle fil struktur af template / hjemmeside-mappen ser sådan her ud (klik på miniaturen for at hente skabelonen med mine modifikationer indtil dette punkt):
For nuværende, ser index.html i den modificerede skabelon sådan ud i browseren:
Hvordan man laver links til andre sider eller hjemmesider
Teksterne i det indhold, der har en anden farve end hovedteksten er links. Jeg nævnte <a>tag i en tidligere del ("a" for "anker"), hvor <h1> inkluderede et link til index.html filen, og jeg har også skrevet om absolutte og relative links. Men jeg har ikke skrevet noget om at linke til andre sider på dit websted eller til andre hjemmesider, så her er der en hurtig forklaring:
Et link er oprettet ved hjælp af <a>tag med en href attribut. Værdien af attributten href er placeringen af den side eller et websted, du vil linke til. Indholdet af ankeret element (som kan være enten tekst eller et billede) vil være det faktiske link, når de vises i webbrowseren. Links til sider i din egen hjemmeside kan du (og oftest bør du) bruge relative links, som dette:
<a href="about.html">About me</a>
Links til andre websteder, har du brug for at give en absolut URL sti, som denne:
<a href="http://andreasviklund.com/templates/">Andreas' free website templates</a>
For at skabe et billede link, placerer du <img> tag indholdet mellem åbningen <a>tag og afslutningen </a>, sådan her:
<a href="puppies.html"><img src="billeder/puppies.jpg" alt="Gå til min side om hvalpe"/></a>
Strukturen af navigations menuen
Når du ved, hvordan du opretter links til andre sider, er det pludselig meget nemt at oprette navigationsmenuen til din hjemmeside. I Variant Duo, ser koden for navigationsmenuen sådan her ud:
<div id="menu">
<p class="menulinks">
<strong class="hide">Main menu:</strong>
<a class="menulink active" href="index.html">Home</a><span class="hide"> | </span>
<a class="menulink" href="index.html">Page 2</a><span class="hide"> | </span>
<a class="menulink" href="index.html">Page 3</a><span class="hide"> | </span>
<a class="menulink" href="index.html">Page 4</a><span class="hide"> | </span>
<a class="menulink" href="index.html">Page 5</a>
</p>
</div>
De fleste tags der anvendes i denne kode bør være velkendt for dig på dette punkt. Der er en div, der giver en sektion koden id="menu", som bruges i CSS (som #menu) til at placere menuen i layoutet. Så er der et afsnit med klassen "menulinks", der indeholder links. Klassen højrejusterer afsnittet. Hvert link indeholder class="menulink" og et af linksene har også en anden klasse kaldet "active". Mere om det snart.
De to nye tags, som jeg ikke har nævnt i tidligere dele af tutorialen er <strong>tagget (som gør tekst fed) og <span>tag (som definerer en tekst span, der kan gives en klasse attribut til justering af visuel præsentation ved hjælp af CSS. Begge disse to tags bruges med en klasse med navnet "hide", der reagerer på den linie der starter med ".hide" i CSS-fil. Klassen =".hide" bruges til at fortælle browseren, at elementet ikke skal være synligt i design, så teksten "Main menu:" kan ikke ses nogen steder, når du får vist siden i en almindelig webbrowser. Det ses dog i webbrowsere, som ikke understøtter (eller ikke bruger) CSS, så en besøgende, der bruger en skærmlæser vil være i stand til at høre, at de links repræsenterer sidens hovedmenu -. Pipe karakter ('|') skaber en visuel adskillelse mellem links, i browsere som ikke understøtter CSS, en funktion der ikke virkelig er brug for, men som gør at menuen ser bedre ud i tekst-baserede browsere.
Hvordan du laver navigation menuen til dit website
Nu, hvor jeg har mine tre .html sider klar, ønsker jeg at skabe en menu for disse tre sider. For at gøre dette, må jeg redigere ovenstående kode så der er kun tre links, hver med en href attribut, der reagerer på en html-fil i hjemmesidens mappe -. Og et link tekst til hver menupunkt. Da jeg har tre .html dokumenter, må dette ske i alle tre filer, men jeg vil starte med index.html, da det vil være det første led i navigationsmenuen. Jeg har besluttet at bruge "Velkommen!" som tekstlinket til forsiden (index.html), "Om mig" som tekstlinket til anden menu (about.html) og "Links" som tekst til det tredje menupunkt (links.html).
Den nye kode vil se sådan ud:
<div id="menu">
<p class="menulinks">
<strong class="hide">Main menu:</strong>
<a class="menulink active" href="index.html">Velkommen!</a><span class="hide"> | </span>
<a class="menulink" href="about.html">Om mig</a><span class="hide"> | </span>
<a class="menulink" href="links.html">Links</a>
</p>
</div>
Når den opdaterede kode er gemt, er navigationsmenuen i index.html færdig! Kopier den redigerede kode og åbn about.html i kodeeditoren og erstat koden i menuen med den opdaterede kode, og gør derefter det samme i links.html. Åbn derefter index.html i webbrowseren for at se, hvad det ligner. Du skulle nu være i stand til at bruge navigationsmenuen til at navigere mellem de tre forskellige sider. Men der er endnu en ting at gøre ...
På alle tre sider, er "Velkommen!" linket fremhævet. Men vi ønsker også "Om mig" fremhævet, når about.html ses, og "Links" fremhævet, når links.html ses - så en lille ændring skal der til. I about.html, at klassen "active" flyttes fra det første link til det andet. Og i links.html, behov for at samme klasse skal flyttes til det tredje link. Den endelige menu-kode for about.html skal se sådan ud:
<div id="menu">
<p class="menulinks">
<strong class="hide" >Main menu:</strong>
<a class="menulink" href="index.html">Velkommen!</a><span class="hide"> | </span>
<a class="menulink active" href="about.html">Om mig</a><span class="hide"> | </span>
<a class="menulink" href="links.html">Links</a>
</p>
</div>
…og i links.html skulle det ser sådan ud:
<div id="menu">
<p class="menulinks">
<strong class="hide">Main menu:</strong>
<a class="menulink" href="index.html">Velkommen!</a><span class="hide"> | </span>
<a class="menulink" href="about.html">Om mig</a><span class="hide"> | </span>
<a class="menulink active" href="links.html">Links</a>
</p>
</div>
Gem about.html og links.html når disse ændringer er foretaget, og åbn index.html i webbrowseren igen - og fremhævelse af den side, du ser på i øjeblikket skulle nu virke. Denne funktion er skabt ved hjælp af to klasser på en gang for det aktuelt aktive menu link: (.menulink i CSS-fil) Den første klasse, der definerer, hvordan linket ser ud, og en anden klasse (.active i CSS), der definerer hvordan det markerede menu-link ser ud.
Websidens sidefod
Med navigationsmenuen på plads, er hjemmeside skabelonen nu blevet udvidet til en komplet hjemmeside. Der er kun ét område af designet tilbage at redigere, og det er sidefoden på webstedet. Koden ser i øjeblikket sådan ud:
<p class="footer">Copyright © 2010 <a href="index.html">Your Name</a><br/>
Template design by <a href="http://andreasviklund.com/">Andreas Viklund</a></p>
Dette er et andet afsnit, denne gang med en klasse kaldet "footer", der bruges i CSS til at definere position og stil af teksten. Skift "Your Name" til enten dit eget navn, navnet på dit firma eller titlen på webstedet. Teksten "Template design by Andreas Viklund" med et link til denne hjemmeside kan fjernes, hvis du vil, men jeg beder dig om at lade være, da det hjælper andre med at finde mine skabeloner. At beholde linket er også en god måde at sige "tak!" og give mig kredit for mit arbejde.
Endnu en gang skal sidefoden på alle sider redigeres, så du har brug for at gentage dette trin for hver .html-fil. Men i modsætning til navigationsmenuen, kan du blot kopiere og indsætte den samme kode på alle sider. Med sidefoden på plads, har du bygget dit første websted ved hjælp af en gratis hjemmesideskabelon og stedet er nu klar til at blive offentliggjort på internettet!
For at se, hvordan min skabelon-baserede hjemmeside ser ud i sin endelige form, skal du klikke på skærmbilledet nedenfor:
Du kan også se en live-version af websiden her http://andreasviklund.com/files/tutorial/.
At finde en vært til dit site og publicere det
At finde et godt domænenavn og en web-vært, der passer til dine behov er noget, jeg vil skrive mere om i en kommende artikel. Jeg vil også forklare, hvordan du uploader en skabelon-baseret hjemmeside til din webhost, samt skrive mere om emner som web-standarder og søgemaskine optimering, som jeg har nævnt i denne tutorial.
Hvis du ikke ønsker at vente på artiklen, kan jeg anbefale det hosting selskab, hvor andreasviklund.com er hostet: Svenska Domäner. De tilbyder en god og pålidelig service med top-kvalitet støtte, og hvis du har brug for hjælp med noget i forbindelse med offentliggørelse af en hjemmeside baseret på en af mine skabeloner på Svenska Domäner vil jeg være glad for at hjælpe dig.
At gå til det næste trin…
I denne tutorial har jeg kun rørt overfladen af CSS, og hvordan HTML-kode er koblet til CSS ved hjælp af klasser og id:s. Min oprindelige idé var at inkludere et par artikler specifikt om variant-duo.css samt brug af Learn CSS template for at forklare, hvordan man opretter og redigerer layout, men jeg indså, at det ville være bedre at lade denne første tutorial fokusere på det grundlæggende i HTML og give en enkel måde at komme ind i en verden af web-design. En væsentlig del af den feedback jeg har fået fra dem, der har fulgt tutorialen fra starten er blevet enige om det. At lære CSS vil være emnet for fremtidige artikler og tutorials, både på begynderniveau og til mere erfarne.
Så hvis du har fundet denne tutorial nyttig vil jeg anbefale dig at abonnere på andreasviklund.com RSS feed, follow @andreasviklund.com on Twitter eller blive medlem af andreasviklund.com page on Facebook. Hvis du har brugt denne tutorial til at bygge en egen side baseret på Variant Duo skabelon, og du allerede har offentliggjort det på nettet, er du velkommen til at sende linket i en kommentar til dette indlæg.
Tak for at du læste dette, vi ses snart igen!