Nvu – hjemmesider hurtigt og let

Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler i 1990 det system, vi i dag kalder World Wide Web med hjemmesidedokumenter i stedetfor textdokumenter. Hjemmesider præsenterer text, grafik, tabeller, etc., samt understøtter multimediefremstilling af et budskab ifa. lyd, video, animation etc. Hjemmesidedokumenter er en elegant videreudvikling af textdokumenter, men på et punkt adskiller de sig væsentligt fra traditionelle textdokumenter. Hjemmesider er i stand til at linke til andre hjemmesider, da de ligger på servere, hvorfra det er muligt for alle brugere af Internettet at få adgang til dem. At hjemmesider er i stand til at linke til hinanden, så det er nemt at springe fra et dokument til et andet, gør WWW til et utrolig stærkt medie.

HTML-kode er instruxer og koder i et hjemmesidedokument. HTML står for Hyper Text Markup Language og er et opmærkningssprog, der fortæller browseren, hvordan et hjemmesidedokument skal præsenteres. Konsortiet W3C vedligeholder HTML-standarden og beskriver, hvordan korrekt HTML-kode skal se ud. På www.w3.org kan du læse mere om W3C.

Koden til et hjemmesidedokument kan laves i en lille simpel lille texteditor, men Nvu er en hjemmesideeditor, et effektivt og stabilt redskab til udvikling af hjemmesider. Nvu er bla. karakteriseret ved:

• at opfylde kravene til korrekt HTML-kode, som den er defineret og beskrevet af W3C.

• en brugervenlig grænseflade omfattende en WYSIWYG-editor, dvs. hjemmesiden præsenteres i et skærmbillede, som den kommer til at se ud, uden at der vises indforståede og kryptiske koder.

• adgang til filer på den lokale computer og på fjerntliggende servere vha. en webmanager.

• at understøtte CSS, et værktøj til at lette administration og vedligehold af hjemmesidedokumenternes præsentation.

Figur 1 : Lav din hjemmeside i Nvu.

NVU - generel introduktion

I denne gennemgang anvendes Nvu version 1.0. Efter opstart af Nvu præsenteres arbejdsområdet også kaldet editoren. Editoren er arbejdspladsen, hvor hjemmesidedokumenterne laves. Øverst i skærmbilledet vises titellinien, hvis ikke brugeren har navngivet dokumentet kaldes det ”untitled”. Herefter kommer menulinien og omfatter menupunkterne:

File – herfra åbnes, oprettes nye eller gemmes dokumenter. Det er også muligt at overføre dokumenter til en Internetserver, hvorefter dokumentet bliver tilgængeligt for alle Internetbrugere.

Edit – udover klippe-, kopiere- og klistre-funktioner er her en søg- og erstat-funktion, fortryd-facilitet samt mulighed for at administrere oplysninger om, hvor hjemmesiden skal publiceres fra.

View – det er muligt at vælge mellem 4 forskellige visningstilstande: Normal Edit Mode er den mest brugte og normale arbejdstilstand, HTML Tags viser på overskuelig vis de anvendte koder i dokumentet, HTML Source viser nøjagtig de anvendte koder i dokumentet, Preview præsenterer hjemmesiden som den vil komme til at se ud på Internettet. Desuden er det muligt at ændre på størrelsen af texten samt vælge tegnsæt.

Insert – det er muligt at indsætte billeder og links samt lave tabeller og formularer fra dette menupunkt. Det er også muligt at tilføje kommentarer i selve HTML-koden, vandret linie, specielle tegn, HTML-kode og andre detaljer.

Format – herfra er det muligt at vælge tegnstørrelse, fonttyper, fed text, kursiv og understregning. Det er også muligt at oprette en liste og tilføje farve til tegn og baggrund. Dokumentets titel bestemmes også herfra.

Table – opret en tabel herfra. En tabel er defineret ved et antal rækker og søjler. Det er også muligt at bestemme farver, størrelse og placering af celler i tabellen.

Tools – adgang til et valideringsværktøj udviklet af W3C, som kontrollerer HTML-koden for fejl. Et CSS-værktøj til udvikling af CSS-kode. Det er også muligt at lave opsætning af Nvu.

Help – den detaljerede hjælpfunktion kan svare på de fleste spørgsmål.

Et exempel

Start Nvu op, skriv i arbejdsområdet følgende text:

”Min første hjemmeside

mit navn er NN”

• Marker den første linie og fra listen Body Text vælg Heading 1.

• Den næste linie markeres også og til højre for listen Body Text klik på det sorte firkant-ikon Choose color for text. Vælg en farve fra en af de foruddefinerede farver og klik OK.

• Tilføj en ny linie og skriv: ”Dette er et link” og marker linien.

• Fra værktøjslinien klik på Link, skriv en hjemmesideadresse, fx. http://www.dsb.dk, klik OK.

• Til sidst skal der indsættes et billede. Lav et linieskift og klik på Image i værktøjslinien. Fra Choose file... er det muligt at navigere rundt i computerens filhierarki og finde billedfilen, som ønskes indsat. I feltet Alternate text skrives en text, der vises midlertidigt i brugerens browser indtil billedet er overført. Fra fanebladet Dimensions bestemmes billedets størrelse. Og fra Appearance bestemmes hvor meget luft og hvor tyk en ramme billedet skal have.

I fanebladet Link tilføjes et link, hvis billedet skal referere til et andet dokument. Forhåbentlig opnår du et resultat der ligner dette:

Figur 2 : Text, links og billeder laves i arbejdsområdet.

Nu skal siden overføres til en server, hvorfra det er muligt for alle andre på Internettet at få adgang til hjemmesiden.

De fleste Internetudbydere afsætter plads til brugernes hjemmesider. Hos TDC er det exempelvis muligt at få adgang til hjemmesideadministration fra tdc.dk -> Privat -> Internet & TV ->Selvbetjening. Login med brugernavn og password, klik på Bredbåndstjenester -> Hjemmeside, herfra kan du læse og rette oplysninger om hjemmesiden, som følger med i de fleste TDC-abonnementer. Du skal bruge navnet på serveren hjemmesiden skal uploades til, samt brugernavn og password.

Nvu overfører de færdige hjemmesider til serveren ved hjælp af Site Manager. Hvis Site Manager ikke allerede vises i venstre side af skærmbilledet, så klik på View->Show/Hide->Site manager (Genvej: F9) og i Site Manager klik på Edit sites. Formularen udfyldes en gang, med oplysninger om navn på hjemmesiden, domænenavnet, navnet på ftp-serveren hvor hjemmesiden skal være tilgængelig fra, samt brugernavn og password. Klik på OK. Nu er Site Manager sat op til at overføre hjemmesidedokumenter. Se også figur 3.

Figur 3 : Nvu skal kende adressen på din hjemmeside, serveren, dit brugernavn og password for at kunne overføre dokumenter til din hjemmeside.

For at overføre selve dokumentet, klik på Publish-ikonet i værktøjslinien. Udfyld oplysninger om sidetitel, filnavn og klik OK. Husk også at oplyse hvilken billedfil der eventuelt skal overføres. Site Manager vil etablere forbindelse til serveren og filen bliver uploadet. Typisk skal den første hjemmeside på et website hedde noget med index.htm, home.htm eller lignende, din Internetudbyder oplyser dig om, hvad den skal hedde. Men ellers er det op til den enkelte bruger, at vælge navn på filer der skal uploades.

Et udvidet exempel

Et link kan være en adresse på et dokument på en server et helt andet sted i verdenen. Men et link kan også være adressen på et andet dokument, du har liggende på dit website. Typisk vil der være mange html.dokumenter på et website. Det gør det nemmere at vedligeholde et site, men stiler også krav til et struktureret og logisk design.

T

il venstre for denne text er vist exemplet gartneriet Solglimt og hvordan de har struktureret deres hjemmeside. Hovedsiden hedder index.htm og er siden brugerne kommer ind på, når solglimt.dk skrives i browserens adresselinie.

Fra hovedsiden er det muligt at springe over i det selvstændige dokument salg.htm. Her kan være beskrivelse og billeder af produkter. Det er også muligt at springe fra hovedsiden til dokumentet kontakt.htm, som indeholder adresseoplysninger, telefonnumre etc.. Denne måde at strukturere hjemmesiden på gør det nemmere at vedligeholde den, uanset om der skal laves ændringer i existerende dokumenter eller der skal tilføjes yderligere dokumenter.

Det vil ofte være naturligt at oprette en mappe for hvert hjemmesiddokument, hvor også tilhørende billedemateriale og andre filer er gemt. Skal der laves en rettelse, fx. tilføjes nye billeder til salg.htm, så er det kun i mappen ”salg” du skal finde og erstatte filer. I et struktureret mappehierarki med sigende filnavne er det nemt at lave rettelser og opdateringer på hjemmesidernes indhold. Men det er ikke kun indholdet der skal vedligeholdes, præsentationen af hjemmesidedokumenter kræver også en del administration og til det formål er værktøjet CSS (Cascading Style Sheet) udviklet.

Før udviklingen af CSS måtte den ansvarlige for et website ind i hvert eneste html-dokument og lave rettelser i html-koden, hvis der skulle laves en ændring eller rettelse af fx. fonttype, farve, baggrund, rammer etc.. Med CSS er det muligt at flytte information om præsentationen af en eller flere hjemmesider til et style-sheet. Det resulterede i mere simpel html-kode, optimering af hjemmesideoverførslen samt lettere administration og vedligehold af et website.

Gartneriet Solglimt vil blive brugt i det følgende exempel:

• Start med at oprette en mappe i dit mappehierarki med navnet solglimt og to undermapper der hedder salg og kontakt.

• Start Nvu, skriv følgende i editoren:

Gartneriet Solglimt

Salg

Kontakt

Solglimt – frugt&grønt

• Marker den øverste linie og vælg heading1 fra listen Body Text.

• Marker den nederste linie og vælg heading 2.

• Gem dokumentet med navnet index i mappen solglimt. I Page Title kan du skrive ”Solglimt frugt&grønt”, det er texten der vises øverst i browserens titellinie.

• I værktøjslinien vælges menupunktet Tools->CSS Editor.

Figur 4 : Stylesheets hjlæper med at administrere og vedigeholde en hjemmeside.

• Den viste dialogbox gør det muligt at opsætte stylesheet for det aktuelle hjemmesidedokument. Expert mode skal være slået til, klik på Style elt. og på Create Stylesheet.

• Klik herefter på Rule og til højre i dialogboxen markeres Style aplied to all elements of type(...), skriv: h1 i det blanke indlæsningsfelt og klik på Create Style rule.

• Vælg fanebladet Text og få adgang til farvepaletten ved at venstreklikke på den hvide knap længst til højre for Color:.

• Vælg en farve fra Predefined colors->OK.

• Klik på fanebladet Generel, markér Importance og klik på Close. Nu skulle overskriften i dit dokument gerne have skiftet farve.

• Men ændringen gælder kun for dette ene dokument, se hvordan css-koden er indlejret i html-koden, klik på Source nederst i skærmbilledet. Bemærk at kommandoen <style type ....> er tilføjet i headeren og bestemmer, at al text i dette dokument opmærket med html-kommandoen h1 skal gengives med farven anført i parantesen.

Det er også muligt at lave CSS-kode som gælder for flere eller alle dokumenter på en gang:

• Gå ind i mappen solglimt og slet filen index.html.

• Start Nvu op og skriv denne text:

Gartneriet Solglimt

Salg

Kontakt

Solglimt – frugt&grønt

• Marker den øverste linie og vælg heading1 fra listen Body Text.

• Marker den nederste linie og vælg heading 2.

• Gem dokumentet med navnet index i mappen solglimt. I Page Title kan du skrive ”Solglimt frugt&grønt”, det er texten der vises øverst i browserens titellinie.

• I værktøjslinien vælges menupunktet Tools->CSS Editor.

• Expert mode skal være slået til, klik på Link elt., navngiv CSS-filen fx. styleheet og klik på Create Stylesheet.

• Klik på filen du har oprettet i listen til venstre over Sheets and rules og klik herefter på Refresh.

• Klik på Rule, til højre i dialogboxen markeres Style aplied to all elements of type(...), skriv: h1 i det blanke indlæsningsfelt og klik på Create Style rule.

• Vælg fanebladet Text og få adgang til farvepaletten ved at venstreklikke på den hvide knap længst til højre for Color:. Vælg en farve fra Predefined colors->OK.

• Klik på fanebladet Generel, markér Importance og klik på Close.

• Nu skulle overskriften i dit dokument gerne have skiftet farve. Nu gælder ændringen for alle dokumenter, som henviser til CSS-filen.

• Klik på Source nederst i skærmbilledet og bemærk at kommandoen <link rel= ....> er tilføjet i headeren. Når hjemmesiden indlæses, slår browseren op i CSS-filen og bestemmer, at al text i dokumentet opmærket med html-kommandoen h1 skal gengives, som beskrevet i filen. Det er muligt at alle hjemmesidedokumenter kan slå op i den samme CSS-fil og dermed give alle dokumenter et ensartet udseende. Alle rettelser kan nu også laves fra et sted.

Hvis filen salg.html skal anvende den oprettede CSS-fil, så klik på New og lav underdokumentet salg.html sådan her:

Salg

tomat – velsmagende

agurk – sprøde

Solglimt frugt&grønt

• Marker den øverste linie og vælg heading1 fra listen Body Text.

• Marker den nederste linie og vælg heading 2.

• Gem dokumentet med navnet salg i undermappen salg. I Page Title kan du skrive ”Solglimt frugt&grønt”.

• I værktøjslinien vælges menupunktet Tools->CSS Editor.

• Klik på Link elt., klik på Choose file og vælg CSS-filen du har oprettet i mappen solglimt, klik på Create Stylesheet og på Close.

• Bemærk at i html-koden er hele stien til CSS-filen opgivet, det kan nemt skabe problemer når html-dokumentet lægges ud på nettet. Browseren leder efter filen i en mappe et niveau oppe i hierarkiet, hvis der står ../CSS-filnavn og to niveauer oppe hvis der står ../../CSS-filnavn.

Et website med mange html-dokumenter som refererer til det samme stylesheet får et ensartet udseende og rettelser skal kun laves et sted. Det er illustreret med ovenstående exempel.

Links til yderligere vejledning i anvendelse af Nvu :

http://kimludvigsen.dk/programmer-internet-nvu-trin-nem.html

http://www.mozilladanmark.dk/wiki/Nvu

http://www.eccentricgnat.com/nvu/index.html

-ke/06

Oprettet maj 2006; opdateret juli 2006.