|
Administreres af: |
|
Design af skabelonside |
Tilbage til oversigtstabel Tilbage |
Af: novicen.dk
De sider som skal indgå på web-stedet har alle en ensartet fremtoning og det kan derfor være en fordel at oprette en skabelon, med alle fællesdele indbygget. Herefter kan du oprette kopier af skabelonen med filnavne der passer til det endelig formål og derefter tilrette de dele, som måtte være forskellige i de enkelte filer.
Som udgangspunkt skal du have et design, så web-siderne kan vises i browsere med 600x800 punkts opløsning. Dette har grafikeren taget højde for og du skal alene koncentrere dig om at få sat hjemmeside-komplekset sammen.
Det er yderligere et krav, at indholdet altid skal være centreret på siden - både lodret og vandret. Baggrundsfarven skal altid være blå og denne styres ved at indsætte et baggrundsbillede.
Først opretter du selve skabelon-dokumentet ved i WebWriter at vælge oprettelse af nyt dokument. Det er enten det lille hvide ikon øverst til venstre i ikonlinien, Ctrl+N eller "Filer" -> "Ny..."
Du får herefter en dialogboks, hvorfra du vælger Standard.wws. Du kan enten vælge at dobbeltklikke på ikonet eller enkeltklikke og derefter vælge Ok.
Redigeringsvinduet skifter indhold og basiskoderne til det nye dokument kan ses.
Som det første du skal foretage dig efter at have oprettet et nyt dokument er at gemme resultatet. Med "www" mappen valgt som aktiv i dit web-sted trykker du derfor Ctrl+S eller "Filer" -> "Gem". Navngiv filen skabelon.htm - med kun små bogstaver.
Nederste del af WebWriters Stifinder vil herefter vise dig denne fil som eneste indhold i mappen.
I kodefeltet højreklikker du i den mørkeblå markering for <TITLE> - titel - og retter teksten til "deSign - skabelonside". I dialogboksen kan du straks begynde at skrive, når hele teksten er markeret med blåt. Teksten som står i dette felt er den tekst brugeren kan se i browseren allerøverst i venstre side. Når du har angivet denne tekst vil du også i WebWriter kunne se titlen angivet på samme placering.
| Til top |
Indsæt tabel til midterjustering
Sæt markøren i linien midt mellem de to <BODY> .. </BODY> TAG's. Vælg ikonet fra ikonlinien for indsætning af tabel og opret den tabel der skal anvendes til at centrere indholdet af web-siden. Du skal her være specielt opmærksom på, at sætte tekstjusteringen for højre/venstre til centreret. Både højde og bredde skal sættes til 100% og afstand mellem celler og afstand til cellevæg skal begge sættes til 0. Tabellen skal kun indeholde én række og én kolonne.
Der er i tabellen kun én celle og du skal i denne celle skrive teksten "Midte" for at se, hvordan reaktionen er, når du skalerer browservinduet. Sæt markøren lige i midten af cellen og lav linieskift med Retur-tasten. Du skal ende med et kodestykke, som dette:
Som standard er tabelindholdet i de enkelte celler venstrestillet og højdemæssigt placeret midt i cellen. Skal andre placeringer anvendes, skal dette justeres manuelt.
| Til top |
Lige over redigeringsvinduet i WebWriter - og længst ude til højre - er der fire symboler. De to af disse som er længst til venstre indeholder genveje til test af hjemmesiden i en browser. Explorer symbolet giver en genvej til test i WebWriters interne browser og hvis du klikker på dette ikon skifter redigeringsvinduet til at vise den valgte hjemmeside i Internet Explorer.
Vælger du derimod Netscape ikonet får du en liste med de browsere, du har angivet i forbindelse med opsætningen af WebWriter. Du kan med disse genveje overføre den aktuelle kode til én af de registrerede browsere. Har du ikke på forhånd fået gemt HTML-dokumentet, vil WebWriter oprette en midlertidig fil, hvorfra data kan trækkes. Denne vises i Stifinder-delen med sit rigtige filnavn påsat en ~ (tilde) som første karakter. Denne arbejdsfil fjerner WebWriter selv, når WebWriter lukkes ned.
Du bør være varsom med kun at teste i den interne browser, da du ikke kan forvente at denne virker 100% som den eksterne browser, hvor du har adgang til alle browserens oprindelige funktioner. Test derfor altid din hjemmeside af i en ekstern browser og helst både i Netscape og Explorer. Nogle fejl opdages bedst i den ene browser, andre fejl opdages bedst i den anden - men finder du fejl, skal de altid rettes.
Anvend også jævnligt den fejltest, der findes i WebWriter. Tryk F9 eller vælg "Funktioner" -> "Tjek HTML koder".
Test hjemmesiden og se virkningen af den indsatte tabel ved at du skalerer browserens vindue. Har du opsat koden korrekt, vil teksten hele tiden finde ind til midten af browservinduet. Såfremt der er fejl, skal disse rettes.
| Til top |
Du skal nu have indlænket det stylesheet du oprettede som det allerførste dokument og som blev gemt i mappen /shared. Med din skabelonside åben til redigering finder du i WebWriters Stifinder frem til allstyles.css. Sørg for at have visning af alle filer slået til, så du også kan se stylesheet filen i mappen. Med venstre musetast trækker du allstyles.css over i kodevinduet og slipper markøren lige foran ophævelsen af HEAD-sektionen - </HEAD>. Der indsættes dermed en LINK TAG, hvor den relative sti ud til dit stylesheet automatisk er indsat med den rigtige angivelse.
Med indlænkningen af dit stylesheet vil du ikke længere kunne se den tekst, som du har indsat, når du tester din skabelonside af i browseren. Det skyldes at du har valgt tekstfarven til hvid og at denne farve også bliver brugt som baggrundsfarve i browserens vindue.
| Til top |
Indsætning af baggrundsbilledet kan foretages ved at du højreklikker midt i den TAG som hedder <BODY>. Herved fremkommer der en dialogboks, hvorfra du kan stille egenskaberne for visningen i browseren. Sørg for at pilen ved avanceret er slået til, således at du kan tilknytte stylesheet til BODY TAG'en.
Klik med venstre musetast på style ikonet til højre for feltet, hvor du kan indsætte typografi. Det er ikonet med blyanten, du skal ramme.
I den fremkomne dialogboks til redigering af typografien ruller du ned til feltet for background-image og klikker i egenskabsboksen til højre for. Vælg nu [url(grafik)] og find frem til baggrundsbilledet "bag15x15.gif" i den mappe - /grafik - hvor du gemte de grafiske elementer.
Som navnet på baggrundsgrafikken indikerer er billedet kun 15 x 15 pixel højt. Ved anvendelse af baggrundsbillede vil billedet blive fliselagt. Det betyder, at billedet gentager sig selv - både vandret og lodret - og at et meget lille billede derfor kan fylde en meget stor flade.
Når du har fundet og valgt baggrundsbilledet skal du efterfølgende have sat baggrundsfarven, så den matcher den blå farve, som billedet har. Det er nødvendigt for at mindske blinkeffekt, når brugeren indlæser dokumentet i browseren, da farven bliver registreret hurtigere end baggrundsbilledet. Hvis du undlader at indsætte baggrundsfarven kan brugeren opleve at siden blinker, fordi siden ganske kortvarigt vil fremstå med hvid baggrund under indlæsning i browseren.
Hvis du vil se effekten af ikke at have indsat baggrundsfarven kan du i Netscape prøve at genindlæse HTML-dokumentet inden du indsætter baggrundsfarven men efter at du har indsat baggrundsbilledet.
Du ændrer værdien i feltet Baggrund til #000066 og klikker derefter Ok.
Test din side og konstater, at du nu igen kan se teksten midt på skærmen. Denne gang fremstår teksten som arial. Hvis ikke du ser teksten, skal du have fundet og rettet fejlen(e).
| Til top |