| Lav en header |
| I denne tutorial vil jeg prøve at beskrive hvordan man laver en header (Anvendes når man koder i php). Det er ikke sikkert at alle syntes min måde at lave en header på, er 100% korrekt, og det vil jeg heller ikke kunne svare på om den er, da det er selvlært. Men min header funkere for mig, så måske gør den også for dig? ^^" |
. |
|---|
| Hvad indgår i headeren |
| I den header vi skal lave, vil der indgå følgende:
- Includeringen af stylesheetet - Baggrundsbilledet - Titel - Top logo - Sidebaren (Opdelt i tables) - Includeringen af indexen Hvis der er nogen af udtrykkende som du ikke forstår, så ikke gå i panik. Det kommer til at give sig selv hen af vejen, når man får lidt mere erfaring med det. Først vil jeg præsentere jer for den fulde kode. Dernæst vil jeg punktvis, forklare hvilken funktioner hver del af koden har. |
. |
|---|
| Den fulde kode |
| Kopir den koden som står her under, og indsæt den som et nyt dokument (Hvis du ikke er klar over hvilket program du skal bruge, så kan du fx. anvende notesblok)
Gem dit nye dokument som "header.php". Meget vigtigt at alt er skrevet med småt. Åben dit nye dokument (http://dinside.dk/header.php) så du kan se at der fx. er en sidebar. Billederne virker pt. ikke, da du ikke har kodet det endnu. Tag dig ikke af, at headeren aldrig vil kunne blive køn, før du har lavet et stylesheet. |
. |
|---|
| Includering af stylesheet |
| Lige pt. har du nok ikke lavet et stylesheet. Men det leget vi til at du har. Dit stylesheet vil altid hedde "style.css". Nu vil jeg forklare dig hvordan koden til at includere et stylesheet ser ud mm. (Et stylesheet er hvor du koder farver mm. til hvordan din hjemmeside skal se ud)
Der er ikke så meget at sige andet ind, at denne del af koden er includeringen af stylesheetet. Skulle det ske at din side har et andet navn en "style.css" (Kan ikke anbefales) ændre du selvfølgelig bare navnet der hvor der står href="style.css". |
. |
|---|
| Baggrundsbilledet |
| Her vil jeg vise dig det stykke af koden, som gør at du inkludere baggrundsbilledet på din hjemmeside. Den vil blive "repeatet" ned af.
Ændre følgende i koden: Imellem " og " hvor der står /baggrundsbilledeurl.png, skal du skrive urlet til det baggrundsbillede du vil bruge. Hvis den ligger i rodmappen kan du nøjes med at skrive /urlet.png (eller gif, jpg osv. alt afhængelig af hvilken format den er i). Men hvis den ligger i en anden mappe (Som fx. hedder mappe1) skal du skrive således /mappe1/urlet.png. |
. |
|---|
| Titel |
| Her vil jeg vise dig det stykke af koden, som gør at du kan lave din egen titel (den titel der ses ved hvert faneblad i fx. explore, som i mit tilfælde normalt er "MicroCut DK").
Ændre følgende i koden: Imellem > og < hvor der står "titlen på din side her", skal du ændre til det du gerne vil have din titel til at være. Det kan fx. være din hjemmesides navn. Mange skriver alt muligt fancy som fx. . : S i d e n a v n : . eller o O Sidenavn O o osv... vær du bare kreativ ;D |
. |
|---|
| Toplogo |
| Her vil jeg vise dig det stykke af koden, som gør at du kan indsætte dit toplogo. Det er nu det begynder at blive en smule mere indviklet (Mest ikke modet, så svært er det heller ikke. Så snart du har fået lidt træning i det, er det super nemt):
Denne gang opdeler vi den lige i et par mindre bider. Men det er vigtigt at du har den forståelse at det er én samlet kode, og altså ikke kan opdeles til flere forskellige steder i dokumentet. Den første del af koden er placeringen af toploget. Det du egentlig skal ændre på er hvor langt væk toplogoet skal stå fra venstre side/left og toppen/top. Som du nok kan se, står der ud fra "Left:" 0. Dette nul kan du ændre til hvor mange antal pixel toploget skal stå ud fra venstre side. Dernæst kigger du på koden som står lige bagved. Som du nok kan se, står der også nul bagved "top:". Dette tal skal du ændre til det antal pixel, du ønsker toplogoet skal være placeret fra toppen på websitet. Anden del af koden, er bare koden til toplogoet. Indsættelsen af urlet til toplogoet, forgår på samme måde, som da du lavede baggrunden. Dvs. at imellem " og " hvor der står /toplogobilledeurl.png, skal du skrive urlet til det billede du vil bruge som toplogo. Hvis den ligger i rodmappen kan du nøjes med at skrive /urlet.png (eller gif, jpg osv. alt afhængelig af hvilken format den er i). Men hvis den ligger i en anden mappe (Som fx. hedder mappe1) skal du skrive således /mappe1/urlet.png. Vi er nu kommet til at du skal indskrive bredden/width og højden/height på toplogoet. Bredden og højden er allerede bestemt, da du selvfølgelig har lavet toplogoet i en bestemt størrelse. For at tilpasse bredden skal du angive det antal pixel dit toplogos bredde er, der hvor der står "bredden på dit toplogo i tal". Dette tal kan fx. være 150. Dernæst tilpasser du højden på samme måde som du tilpassede bredden. Dette gør du hvor der står "højden på dit logo angivet i tal". Dette tal kan fx. også være 150. Når du har ændret de to steder til fx. de 150 hvert sted vil koden komme til at se således ud: |
. |
|---|
| Sidebaren (Opdelt i tables) |
| Her vil jeg vise dig det stykke af koden, som er din sidebar (menu i siden). Sidebaren er inddelt i det der kaldes tables. dvs. at hvert menupunkt er adskildt. I den kode fulde kode som du startede med at kopiere, og indsætte i det nye dokument, indgår der to tables (to menupunkter) i koden herunder vi jeg nu indsætte begge to igen, så det bliver nemmere at finde. Dernæst koder vi sammen kun den ene. (De skal begge kodes ens):
Som du nok kan se skal dette stykke tekst kun være sat ind en gang, så det omkredser det område kodning der skal være placeret netop dét bestemte sted. dvs. at koden ikke skal placeres for hvert eneste menupunkt du laver, men kun lige over det aller første menupunkt. Du redigere placeringen af menuen på samme måde som du redigerede placeringen af toplogoet. Der hvor der står name="menu" skal du logisk nok finde på hvad sidebaren skal hedde, så du kan kode den i stylesheetet. I dette tilfælde har jeg valgt at kalde den menu. Der hvor der står "left: 708;" skal du tilpasse tallet, efter hvor langt du vil have sidebaren til at stå fra ventre side af skærmen. Der hvor der står "top: 100;" skal du tilpasse tallet, efter hvor langt du vil have sidebaren til at stå fra toppen af skærmen. Der hvor der står "width: 209;" skal du tilpasse tallet, efter hvor bred du vil have selve sidebaren til at være. Nu vil vi tage fat i, hvordan du laver det enklete table (menupunkt). I koden øverst, var der som sagt 2 tables. Nu vil vi kun fukosere på det ene. Vi inddeler endnu engang lige koden i små bidder. Men som sagt tidligere, er det meget vigtigt at huske at det altså er én kode. Først tager vi fat på det første som der skal/kan redigeres i: Der hvor der står "class='header'" skal du navngive hvad overskriften i dit table skal hedde. Dette skal du bruge når du senere skal style din hjemmeside i stylesheetet. Der hvor der imellem > og < står "Menu punkt overskrift 1" skal du skrive overskriften på dit menupunkt. Dette kan fx. være Ejeren af siden, Menuen, Velkommen, osv. Næste del som kan redigeres i, er her hvor du kan skrive selve inholdet. delen ser ud som følgende: Hvis du er god til at se ligheder har du nok fundet ud af at de steder hvor der står "Class=" er steder hvor du skal navngive "områdetypen". Igen skal det anvendes til når du skal style din text osv. Der hvor der står "Menu indhold 1" kan du skrive det indhold du nu engang ønsker. Det sidste stykke af koden skal ikke redigeres i, men er simpelthen bare en "lukning/afslutning" af sin table. Alligvel vil jeg lige indsætte den, så du ikke er i tivl om hvilken del jeg snakker om: |
. |
|---|
| Includeringen af indexen |
| Til aller sidst indsætter vi koden som bestemmer hvor selve dit inhold/indexen på siden skal være placeret. Stykket af koden er aller nederst i den overordnede kode.
Der hvor der står "name="content"" skal du skrive navnet på hvad index området skal hedde. Lad den blive ved med at hedde content, da det ikke forvirre alt for meget så (content betyder indhold på engelsk). Derefter skal du beslutte hvor selve indexet skal være placeret. Igen gør du bare som tidligere. Der hvor der står "left: 150;" skal du tilpasse tallet, efter hvor langt du vil have indexet til at stå fra ventre side af skærmen. Der hvor der står "top: 100;" skal du tilpasse tallet, efter hvor langt du vil have indexet til at stå fra toppen af skærmen. Der hvor der står "width: 550;" skal du tilpasse tallet, efter hvor bred du vil have selve indexet til at være. Nu skulle din header være færdig. Så skal du bare gemme den (som tidligere nævnt skal navnet være "header.php"). Headeren skal være gemt i din rodmappe. Du kan nu gå ind og se hvilke ændringer der er sket ved at klikke ind på http://dinside.dk/header.php . hvis der opstår problemer du ikke selv kan løse, eller du mener der er en fejl eller misledning i min tutorial, er du velkommen til at kontakte mig. |
. |
|---|