EasyPage brugermanual version 3.0

Transkript

1

2 EasyPage brugermanual version 3.0 Indholdsfortegnelse: 1.0 Introduktion Om brugermanualen Systemkrav Log ind - sådan kommer du i gang EasyPage grundmodul Byg og rediger sider Menustruktur Højreklik funktion i menuen Opret ny side Ret side Slet side Kopier side Flyt side op og ned Indholdsredigering...7 Sideelementer HTML-editor...10 Gode råd når du skal bruge HTML-editoren...11 HTML-editorens knapper og funktioner Tabel element Øvelser...16 Øvelse A: Opret en ny side med tabel...16 Øvelse B: Opret en kontaktformular...20 Øvelse C: HTML-editorens tabel-funktioner...22 Øvelse D: Indsættelse af links...25 Øvelse E: Indsættelse af billeder...27 Øvelse F: Indsættelse af flash-animation og video Skabeloner Opsætning af menuer Topmenu...36 Opsætning af topmenu...36 Justering af tekster og farver i topmenu...38 Brug af billeder i topmenu Sidemenu...39 Opsætning af sidemenu...40 Justering af tekster og farver i sidemenu...41 Brug af billeder i sidemenu Opsætning af tekster og design Website info Arkiv Billeder Filer/dokumenter Eksterne links links Statistik

3 1.0 Introduktion EasyPage er et modulopbygget webbaseret system, der gør det muligt at opdatere en hjemmeside online vha. en internetbrowser. EasyPage fås i to udgaver, EasyPage Standard Web og EasyPage Pro Web. Begge versioner indeholder et grundmodul kaldet EasyPage samt to basismoduler, Arkiv og Statistik. Forskellen på Standard Web og Pro Web ligger bl.a. i hvilke servicer, der følger med produktet. I standardudgaven kan der f.eks. maksimalt oprettes 25 sider, mens der i proudgaven kan oprettes et ubegrænset antal sider. Pro-udgaven indeholder også et brugerstyringsmodul, hvormed det bliver muligt at begrænse adgangen til dele eller hele hjemmesiden, hvilket f.eks. kan benyttes af en virksomheds partnere og/eller leverandører. 1.1 Om brugermanualen Denne manual er tilpasset EasyPage Standard Web og EasyPage Pro Web version 3. Selve manualen er opdelt i en række hovedemner, så det bliver lettere at finde de ting man ønsker at få vejledning i. Det er derfor ikke nødvendigt at læse hele manualen fra start til slut for at komme i gang med EasyPage. Kapitel 2, der omhandler EasyPage-grundmodulet, hvor du bl.a. kan oprette nye sider, er det vigtigste kapitel. Det anbefales derfor, at du læser hele afsnit 2.1 og alle dets underafsnit inden du for alvor går i gang med at bruge EasyPage. I slutningen af dette afsnit finder du også en række øvelser, der gennemgår hvordan du udfører en specifik opgave i EasyPage, såsom indsættelse af billeder og opbygning af en kontaktformular. En række af de øvrige afsnit i kapitel 2 indeholder information om design, opsætning af menuer og skabeloner. Disse kan ofte springes over, hvis du har fået leveret en EasyPage-hjemmeside, hvor designet er klargjort af en grafiker. 1.2 Systemkrav For at kunne bruge administrationssystemet i EasyPage kræves følgende: Windows 98 eller nyere Microsoft Internet Explorer 5.0 eller nyere Internetforbindelse (helst 56K modem eller hurtigere forbindelse) Derudover anbefales det, at bruge en PC med en skærmopløsning på minimum 1024x768 pixel. Der skal ikke installeres nogen software på brugernes PC, da administrationssystemet er placeret på EasyPage-serveren, hvor den er integreret med hjemmesiden. Det er derfor muligt at redigere en EasyPage-hjemmeside fra en hvilken som helst PC, uanset hvor den befinder sig i verden. Den skal bare opfylde de ovenstående krav. 1.3 Log ind - sådan kommer du i gang EasyPage leveres med et administrationssystem, hvor al redigering af indhold samt design og opsætning af hjemmesiden foretages. Du får adgang til administrationen ved at skrive /_admin efter hjemmesidens adresse, f.eks. Derefter kommer der en log ind side, hvor der skal oplyses et brugernavn og kodeord. Efter brugervalidering kommer du ind på administrationens forside, hvor fanebladet START er aktiveret (se figur 1). På siderne under dette punkt er der forskellige informationer vedr. EasyPage, f.eks. support telefonnummer, links til pdf-udgaver af denne manual samt manualer til EasyPagemoduler. Derudover kan der f.eks. komme nyheder om produktet og forslagskasse mv. 2

4 Figur 1: Administrationens forside, hvor fanebladet START er aktiveret. Derudover ses de øvrige moduler i EasyPage. EASYPAGE (grundmodulet), ARKIV og STATISTIK. Under fanebladene ses underpunkterne til START : Velkommen, Manualer og Support. EasyPage-modulerne optræder som faneblade til højre for START. Hvis du har købt tillægsmoduler til EasyPage, såsom Nyheder, Mailingsliste, Forum, Brugerstyring mm., så vil de også være synlige som faneblade. 3

5 2.0 EasyPage grundmodul Grundmodulet i EasyPage indeholder alle de funktioner, der gør det muligt at opbygge og vedligeholde din hjemmeside. Når fanebladet EASYPAGE er aktiveret kan du se følgende undersider: Byg og rediger sider, Skabeloner, Opsætning af menuer, Opsætning af tekster og design samt Website info (se figur 2). Figur 2: Grundmodulet EASYPAGE er aktiveret og under fanebladene ses grundmodulets funktioner, hvor der er klikket på Byg og rediger sider. Til venstre ses hjemmesidens indhold i en træstruktur, hvori det fremgår hvilke sider der er oprettet i systemet. Til højre ses indholdsredigeringsområdet, hvor en sides indhold vil komme frem, når der klikkes på de enkelte menupunkter. 2.1 Byg og rediger sider Når du skal tilføje nye sider eller når du ønsker at redigere indholdet på eksisterende sider, så finder du alle nødvendige funktioner på siden Byg og rediger sider. I Figur 2 ses hjemmesidens menustruktur til venstre, hvori der findes en række sider. Når en side skal opbygges eller redigeres, så klikker du på et menupunkt og sidens indhold kan derefter ses i feltet til højre som i denne manual kaldes indholdsredigeringsområdet (du kan læse mere om indholdsredigering i afsnit 2.1.8). 4

6 2.1.1 Menustruktur I EasyPage er der mulighed for at oprette menuer i 3 niveauer: Hovedmenu, 1. undermenu og 2. undermenu. I eksemplet i figur 3 vises der en menutræstruktur med 6 hovedmenupunkter. Siden Moduler har 7 undersider og Demonstration har en enkelt underside. Siderne Medlemmer og Nyheder, der er markeret med orange farve er deaktiveret og vises derfor ikke i menuen på de offentlige sider. Under menuen er der et link - Se siden. Ved at klikke på dette link får du mulighed for at se den side du er i gang med at redigere. Ved hjælp af denne funktion kan du også se de sider, der evt. er deaktiveret. Over menuen er der 3 knapper:, og. Disse funktioner vil blive gennemgået i de følgende afsnit. Kort fortalt opretter et nyt menupunkt og dermed også en ny side. giver adgang til sidens egenskaber, hvor du f.eks. kan redigere navnet. sletter den markerede side og evt. undersider til denne Højreklik funktion i menuen Alle de ovennævnte funktioner kan også tilgås ved at vælge et menupunkt og derefter højreklikke på musen (se figur 4). Ved hjælp af denne funktion opnås der også adgang til flere funktioner: Kopier side og indsæt kopieret side samt flytning af menupunkt op og ned i træstrukturen. Figur 3: Eksempel på menustruktur Opret ny side Ønsker du at oprette en ny side, så klikker du på knappen over menuen. Hvis du har markeret menuens rod i træstrukturen (i eksemplet til højre er menuens rod), så vil du kunne oprette et nyt hovedmenupunkt. Hvis du derimod står på et hovedmenupunkt, så vil du oprette en underside til den aktuelle hovedmenu og hvis du står på en underside så vil du oprette en underside til den aktuelle underside. Når du har klikket på eller Tilføj ny side i højreklikmenuen, så åbnes et popup-vindue (se figur 5). I dette skal der angives et navn på den nye side og i rullemenuen skal der vælges hvilken type side der skal oprettes. Du har mulighed for at oprette Normal side, Kontaktformular eller Link. Hvis der er installeret tillægsmoduler i din EasyPage, så kan der være Figur 4: Højreklik funktion i menuen. flere valgmuligheder. De øvrige felter er ikke obligatoriske. Felterne Knap grafik og Mouseover knap grafik skal kun udfyldes, hvis du ønsker at benytte billeder i stedet for tekst i din menu. Du vælger et billede ved at klikke på ikonet til højre for felterne, der åbner dit billedarkiv. Mouseover funktionen er kun tilgængelig i en skabelon med topmenu (læs mere om skabeloner i afsnit 2.2 og opsætning af menuer i afsnit 2.3). 5

7 Feltet Bundbillede i sidemenu bruges til at indsætte et billede, der altid vil være placeret under menuen. Du kan derfor indsætte et nyt billede på hver side. Deaktiver link i topmenu kan evt. afkrydses, hvis du har et topmenupunkt med en række underpunkter og at du ikke ønsker at topmenupunktet skal åbne en side. Vis sidemenu er som standard aktiveret. Hvis du har en skabelon med hovedmenuer placeret i toppen og evt. undermenuer i en sidemenu, så kan du fjerne sidemenuen. Dette er brugbart, hvis det kun er nogle af hovedmenuerne som har undermenuer. På de sider, hvor der ikke undermenuer, vil der stadig være afsat plads til menuer. Ved at fjerne markeringen i Vis sidemenu får du mulighed for at bruge hele bredden på din hjemmeside. Hvis tillægsmodulet Brugerstyring er installeret i EasyPage, så vil der nederst i popup-vinduet være mulighed for at bestemme hvilke brugere der skal kunne se siden Ret side Når du vil rette navnet på en side eller andre egenskaber, så skal du markere den ønskede side og klikke på, hvilket åbner et popup-vindue (se figur 6). I dette er f.eks. mulighed for at ændre navnet og benytte de funktioner der er beskrevet i foregående afsnit om oprettelse af en ny side. Der er dog et enkelt nyt felt, nemlig Menubredde i topmenu, der bruges til at justere bredden på menufeltet i topmenuen, hvis en sådan er valgt (læs mere om opsætning af menuer i afsnit 2.3). Figur 5: Pop up vindue ved oprettelse af ny side. Den nye side har fået navnet Ny side og det er valgt at det skal være en Normal side Slet side Når du ønsker at slette en side, så skal du markere den ønskede side i menuen og derefter klikke på knappen over menuerne eller højreklikke på musen og vælge Slet side. Handlingen vil slette den valgte side og alle undersider til denne Kopier side Du kan kopiere en side ved at benytte højreklikfunktionen, der er beskrevet i afsnit Start med at vælge den side du gerne vil kopiere ved at klikke på det ønskede menupunkt. Derefter skal du højreklikke og klikke på Kopier side. Efter at skærmbilledet er opdateret kan du vælge hvor i menutræet siden skal indsættes. Hvis du klikker på menutræets rod, der enten er START eller dit domænenavn, så kan du indsætte den Figur 6: Popup-vindue ved rettelse af sidens kopierede side som et nyt hovedmenupunkt. Hvis du egenskaber. derimod har markeret et undermenupunkt, så vil du placere den kopierede side som en underside til dette (læs i øvrigt afsnit 2.1.3). Indsættelsen foregår ved at 6

8 du først klikker på det menupunkt (eller roden) som den kopierede side skal indsættes under. Derefter højreklikker du på musen og vælger punktet Indsæt kopieret side. Efter at skærmbilledet er opdateret vil det nye menupunkt nu optræde i menuen Flyt side op og ned Når du opretter en ny side eller indsætter en kopi vil den altid placere sig nederst i det niveau i menutræet, hvor du befinder dig. Du kan dog let flytte din side op i strukturen ved at vælge den side du gerne vil flytte og derefter højreklikke. I menuen klikker du på Flyt side op og efter opdatering af skærmbilledet vil det valgte menupunkt nu være rykket en plads op. Du kan dog ikke rykke en side ud over det niveau den befinder sig på. Dvs. at du f.eks. ikke kan rykke en side, der er et undermenupunkt, op som et hovedmenupunkt. Ønsker du det så kan du dog benytte Kopier side - funktionen, der blev forklaret i afsnit Ovenstående gør sig også gældende, hvis du vil rykke en side ned ad i træet du skal blot klikke på Flyt side ned Indholdsredigering Når du skal redigere en Normal side eller Kontaktformular, så skal du først klikke på den side du ønsker at redigere. I figur 7 er der blevet oprettet en ny normal side med navnet Ny side. I den højre del af administrationen, der er indholdsredigeringsområdet, er der næsten tomt. Der er kun en Indsæt -knap, hvilket betyder at siden er tom. Figur 7: Indholdsredigering 7

9 Sideelementer Du kan indsætte indhold på den valgte side ved at klikke på Indsæt. Derefter kommer der et lille popup-vindue med en rullemenu med en række sideelementer (figur 8). HTML-editor Wordlignende teksteditor, hvori der også kan indsættes billeder, tabeller, flash, video m.m. Der er mulighed for at arbejde i den bagvedliggende HTML-kode. Editoren kan indsættes på 2 måder, enten som en popup, hvor editoren åbnes i et nyt vindue, eller som et element i indholdsredigeringsområdet. Læs mere om HTML-editoren i afsnit Mellemrum Afstandselement, der indsætter en tom linje. Overskrift 1 Overskrift type 1. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Figur 8: Popup-vindue med elementer. Overskrift 2 Overskrift type 2. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Overskrift 3 Overskrift type 3. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Brødtekst 1 Brødtekst type 1. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Brødtekst 2 Brødtekst type 2. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Billede Indætter et billede. Mulighed for at lave link på billedet (læs mere om brugen af billedelementer i øvelse A i afsnit ). Tabel Indsætter en tabel. Denne tabel bruges primært i forbindelse med den grundlæggende opbygning af en side. Alle elementer der er beskrevet her kan indsættes i tabellen. Således kan en side f.eks. bestå af en tabel med 2 kolonner, hvor den venstre kolonne kan indeholde overskrift og en HTML-editor, mens den venstre kolonne kan indeholde billedelementer eller lign. Læs mere om brugen af tabellen i afsnit eller i øvelse A i afsnit Punktopstilling Kan omdanne en til enten en opstilling med punkter eller med tal. Denne funktion findes også i HTML-editoren.. Typografi styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Skillelinje Indsætter en vandret linje. Udseendet styres af style-sheetet i EasyPage (læs mere om design i afsnit 2.4) Print Indsætter et lille print-ikon på en side. Når der klikkes på ikonet åbner den aktuelle side i en printervenlig udgave, mens din PC s printerstyring startes. 8

10 Hvis du opretter en kontaktformularside, så vil der være lidt flere valgmuligheder i rullemenuen med elementer. Nederst i rullemenuen findes de elementer, der kan indsættes i en kontaktformular (se figur 9). Tekstfelt Indsætter et indtastningsfelt med en linje, der bl.a. kan bruges som navnefelt, adressefelt mv. som brugeren kan udfylde med sine oplysninger. Der kan sættes validering på dette felt, så brugeren skal udfylde feltet for at kunne sende. Notatfelt I modsætning til tekstfelter, så kan der i notatfelter skrives flere linjer tekst. Et notatfelt bruges derfor når brugeren skal skrive bemærkninger eller lignende. Figur 9: Fomularelementer felt Et felt bruges som navnet antyder til en -adresse. Brug dette felt når du vil have, at brugeren skal oplyse sin . Der kan sættes validering på dette felt, så der er en vis sikkerhed for, at det er en korrekt -adresse der er indtastet. Checkbokse Checkbokse er afkrydsningsfelter som bruges når brugeren skal have mulighed for at vælge mellem flere ting. Det kan f.eks. være bestilling af brochurer, hvor brugeren selv kan markere hvilke han/hun er interesseret at få tilsendt. Send knap Det sidste formular-element er Send -knappen, der bl.a. indeholder hvilken -adresse kontaktformularen skal sendes til. Du kan læse mere om kontaktformularer og dets elementer i øvelse B i afsnit

11 Figur 10: Indsættelse af elementet HTML-editor i fuld størrelse, hvori der er skrevet en overskrift. I figur 10 er der blevet indsat et element, en HTML-editor, hvori der er skrevet overskrift. Der kan sættes flere elementer over eller under HTML-editoren. De indsatte elementer kan altid rykkes op eller ned i forhold til hinanden ved at benytte pilene til højre på hvert element. Hvis du ønsker at slette et element skal du klikke på. En side kan derfor opbygges på mange forskellige måder. Den hurtige måde er som vist ovenfor, hvor der blot er indsat en HTML-editor, hvori al teksten kan skrives, men i nogle tilfælde kan det være en fordel at lave en opbygning af siden ved hjælp af tabeller og flere HTML-editorer samt billedelementer. Dette vil blive forklaret i afsnit samt i øvelse A i afsnit HTML-editor Den indbyggede HTML-editor i EasyPage er en fast del, når der skal laves nye sider i EasyPage, enten normalsider eller kontaktformularer. Derudover benyttes editoren også i bl.a. nyhedsmodulet og kalendermodulet. HTML-editoren kan på mange måder opfattes som et lille tekstbehandlingsprogram á la WordPad i Windows. Den indholder en række muligheder for tekstredigering samt indsættelse af tabeller, billeder, links, flash-animationer og videoer. Som navnet antyder, så kan der i editoren også arbejdes direkte i den bagvedliggende HTML-kode, men det vil ikke blive omtalt yderligere i denne manual. Vi vil kun beskrive den normale brug af editoren som et tekstbehandlingsværktøj. I figur 11 ses HTML-editoren som den ser ud når den åbnes i et popup-vindue, der dog ikke adskiller sig væsentligt fra HTML-editoren indsat som et element. Det er kun gem-knappen, der er placeret forskelligt. 10

12 Figur 11: HTML-editor i et popup-vindue. Øverst i editoren findes alle knapperne, der giver adgang forskellige funktioner når teksten skal formateres eller der skal indsættes billeder, links mv.. Nederst til højre i editoren findes Annuller og Gem -knapperne. Når du har skrevet en tekst, så afslutter du ved at klikke på. Indholdet gemmes og HTML-editoren lukkes. Nederst til venstre kan du afkrydse checkboksen HTML, hvis du gerne vil arbejde i HTML-koden (anbefales kun til superbrugere). Hvis du afkrydser checkboksen BR vil du kun lave et linjeskift hver gang du trykker på Enter i stedet for et afsnit med en tom linje (yderlige forklaring om linjeskift kommer længere nede i dette afsnit). Alle knapper og deres virkemåder er vist og beskrevet nedenfor. I den forbindelse er der dog nogle gode råd, der kan være nyttige at kende, når du skal skrive en tekst og formatere den. Gode råd når du skal bruge HTML-editoren Grundlæggende er det ret simpelt at skrive en tekst i editoren. Du bør holde dig til de prædefinerede formater og overskrifter (Overskrift 1, 2, og 3 og Brødtekst 1 og 2), da du på den måde hurtigt kan ændre dit design (skrifttype og farve) ved at gøre det et sted i administrationen (læs mere om opsætning af tekster i afsnit 2.4). Hvis du ikke indsætter teksten i en tabel, behøver du ikke at formatere teksten, da den automatisk vil blive vist som Brødtekst 1. Hvis du derimod har valgt at skrive teksten i en tabel, så skal du formatere teksten for at den bliver vist korrekt. 11

13 Når du skal formatere en tekst i editoren med funktionen, så skal du først markere den tekst, der skal ændres. Her skal du være opmærksom på, at markeringen skal foretages for hvert afsnit i teksten, før at du kan ændre din formatering. Så marker derfor et afsnit af gangen og klik på, hvor du vælger det ønskede format (brødtekst 1 eller brødtekst 2). Du skal yderlige være opmærksom på, at den markerede tekst ikke må indeholde links, da formatering i så fald heller ikke vil slå igennem. Marker derfor teksten foran linket først og vælg et format, hvorefter du skal markere teksten efter linket og vælge et format. Hvis din tekst er skrevet i en tabel, så skal du formatere den hver for sig, hvis den er skrevet i flere celler/kolonner. Det er med andre ord ikke muligt at markere hele teksten i en tabel, hvis teksten spreder sig over flere celler/kolonner. Hvis formateringen af teksten på en side volder problemer, så vil det ofte kunne betale sig rense koden for diverse formateringskoder. Det gør du ved at markere al tekst eller dele af den og først klikke på og vælge Normal, hvorefter du klikker på. Teksten er derefter klar til at blive formateret igen. Du bør så vidt muligt undgå understreget tekst, fordi brugerne kan opfatte teksten som et link. Der er nogle specielle forhold i forbindelse linjeskift på websider. Når du trykker på Enter (Retur-knappen), så vil der automatisk komme et nyt afsnit med en tom linje. Hvis du derimod holder Shift -knappen nede mens du trykker på Enter, så vil du kun starte på en ny linje. Dette forhold gør sig også gældende når du laver lister med punkter eller tal. Hvis du ikke ønsker at starte på et nyt punkt, men blot ønsker at skifte til næste linje, så skal du også holde Shift nede mens du trykker på Enter. HTML-editorens knapper og funktioner Valg af tekstformat. Marker en tekst, klik på knappen og vælg et format. Der kan vælges mellem Brødtekst 1 og Brødtekst 2. Udseendet af de to brødtekstformater styres et andet sted i EasyPage (læs mere om opsætning af tekster i afsnit 2.4). Valg af overskrift. Marker en tekst, klik på knappen og vælg mellem Overskrift 1, Overskrift 2 eller Overskrift 3. Du har også mulighed for at fjerne en overskrift igen ved at vælge Normal. Udseendet af de tre overskrifttyper styres et andet sted i EasyPage (læs mere om opsætning af tekster i afsnit 2.4). Valg af skrifttype. Her kan du vælge mellem mange skrifttyper, men du kan dog ikke være sikker på at brugeren kan se alle skrifttyper, da det kræver, at de skal være installeret på brugerens computer. Der er også mange skrifttyper som ikke egner sig til web. Valg af skriftstørrelse. Du kan vælge mellem 7 forskellige skriftstørrelser, men du kan dog ikke ændre størrelsen på en tekst, der er formateret via Format -knappen Klip funktion. Fjerner markeret tekst, billeder og andre elementer indsat i editoren. Kopierer markeret tekst eller element (f.eks. billede og flash-animation) til udklipsholderen. Indsætter kopieret tekst eller element (f.eks. billede og flash-animation) fra udklipsholderen. 12

14 Fortryder seneste handling. Gentager seneste handling. Gør teksten fed. Gør teksten kursiv. Gør teksten understreget. Gør teksten gennemstreget. Løfter skriften. Sænker skriften. Specielle tegn og symboler. Venstrestiller teksten. Centrerer teksten. Højrestiller teksten. Lige margener. Opstilling af liste med tal. Opstilling af liste med punkter. Forøg indrykning. Formindsk indrykning. Indsæt et billede fra arkivet. Når du klikker på denne knap åbner dit billedarkiv. Her kan du vælge det billede du gerne vil indsætte på din side ved at klikke på Indsæt -linket under billedet. Derefter lukker dit arkiv og det valgte billede indsættes i HTML-editoren. Hvis du gerne vil indsætte et nyt billede som ikke allerede findes i dit arkiv, så skal du først overføre det nye billede til EasyPageserveren (uploade). Yderlige beskrivelse af funktionerne i arkivet kan ses i kap. 3. Skriftfarve. Farver teksten i den ønskede farve, men vær opmærksom på, at du ikke kan ændre farven på en tekst, der er formateret via Format -knappen. Fremhæver teksten (baggrundsfarve). Indsæt link. Marker en tekst og klik på link-knappen, så kan du oprette et internt eller eksternt link. Hvis du senere vil fjerne linket, så skal du sørge for at musen er placeret i linket. Klik på link-knappen igen og slet adressen og afslut ved klikke på Opdater. Indsæt en tabel eller rediger eksisterende tabel (læs mere om indsættelse og redigering af tabeller i øvelse C i afsnit ). 13

15 Fjern formatering. Hvis du har formateret teksten og ønsker at rense den, så kan du markere den ønskede tekst og klikke på knappen. Vær opmærksom at du ikke kan fjerne overskrifter på denne måde. Overskrift skal fjernes ved at vælge Normal i rullemenuen, når du har klikket på Overskrift. Indsæt link eller objekt fra arkivet (f.eks. link til PDF-dokumenter eller lignende). Når du klikker på denne knap åbner dit arkiv med filer og links. Her kan du vælge det du gerne vil indsætte og findes det ikke allerede i arkivet kan du oprette linket eller overføre filen til EasyPage-serveren (uploade). Yderlige beskrivelse af funktionerne i arkivet kan ses i kap. 3. Indsæt en skillelinje. Indsæt kopieret tekst fra Microsoft Word. Hvis du gerne vil indsætte en tekst du har kopieret fra Microsoft Word, så kan det anbefales at bruge denne funktion. Word er dårlig til at lave ren HTMLkode og det kan ofte resultere i, at den tekst der er kopieret fra Word vil blive vist med en forkert skrifttype og/eller farve. Størstedelen af de mange skjulte koder vil blive fjernet, hvis du indsætter teksten vha. af denne funktion Tabel element I EasyPage kan du selv i store træk bestemme hvordan de enkelte sider skal opbygges. Når du har oprettet en ny side, så er den til at starte med helt tom. Hvis du kun skal have tekst på dine sider, så kan det anbefales at indsætte en HTML-editor som det er vist i figur 10. Hvis du derimod både skal have tekst og billeder, samt en nyhedsboks med de seneste nyheder (kun muligt hvis nyhedsmodul er installeret i EasyPage), så skal du opbygge din side ved hjælp af en eller flere tabeller. Ved hjælp af tabel-elementet kan du let opbygge din struktur på siden. Du kan f.eks. vælge, at der skal være tekst til venstre og en nyhedsboks samt billeder til højre. I figur 12 er der oprettet en side med en tabel med 2 kolonner. I den venstre kolonne er der indsat 2 elementer en Overskrift 1 og en HTML-editor. I den højre kolonne er der indsat en nyhedsboks, et mellemrum og til sidst et billedelement. 14

16 Figur 12: En tabel med 2 kolonner. I hver kolonne er der indsat en række sideelementer. Indsættelse af kolonner foregår ved at klikke på til højre i tabellens top. Du kan i princippet indsætte ligeså mange kolonner som du har lyst til, men for ikke at miste overblikket i indholdsredigeringsområdet, så anbefaler vi, at du højst indsætter 3-4 kolonner. En ny kolonne vil altid placere sig yderst til højre, men du kan rykke kolonnen til den ønskede position ved at klikke på pilene og i toppen af den enkelte kolonne. Al indhold i kolonnen bibeholdes selvfølgelig selv om du rykker den. Hvis du har flere tabeller kan du, ligesom det er tilfældet ved alle øvrige elementer på en side, rykke en tabel op og ned i mellem de øvrige. Her skal du blot klikke på pilene og yderst til højre i tabellen. Alle kolonner og indhold i tabellen bibeholdes. Udseendet af både tabel og kolonner kan justeres. Øverst i tabelelementet finder du en række funktioner: Centrering, farve, ramme og margin. I figur 12 er det valgt at der skal være en margin i tabellen, så der bliver lidt afstand fra teksten og ud til kanten af tabellen. Margin justeres et sted i EasyPage under menuen Opsætning af tekster og design (læs mere om dette i afsnit 2.4). I kolonner kan der også foretages justeringer, dog kun bredde og baggrundsfarve. I figur 12 ses det, at der er valgt en baggrundsfarve med farvekoden #E9E9E9 og bredden er sat til 400 pixel. Farven kan vælges ved at klikke på, der åbner et lille vindue med de 252 farver. Du kan også selv skrive en farvekode i feltet, hvis du vil benytte en farve, der ikke findes i farvevælgeren. 15

17 I hver kolonne er der indsat en række sideelementer: Overskrift, editor, nyheder, mellemrum og billede. På den offentlige side bliver resultatet som vist i figur 13. Figur 13: Udsnit af den færdige side, der er opbygget vha. tabel-elementet i EasyPage Øvelser Vi har lavet en række øvelser, hvor vi mere grundigt gennemgår de forskellige funktioner i EasyPage. Øvelse A: Opret en ny side med tabel I denne øvelse skal du lave en lille side med noget tekst til venstre og nogle billeder til højre. Du starter med at oprette en ny side, der skal være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Ny side og derefter vælge typen skal være en Normal side. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet eller ved at bruge højreklikfunktionen. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet til højre er der kun en Indsæt -knap. Du skal nu indsætte det første element, der er en tabel. Klik på og vælg Tabel i rullemenuen. Du har nu indsat en tom tabel uden kolonner/celler, så det næste du skal gøre er at indsætte to kolonner. Klik på og den første kolonne indsættes i tabellen. Når skærmbilledet er opdateret klikker du igen på og den anden kolonne bliver dermed indsat i tabellen (se figur 14). 16

18 Figur 14: En tabel med 2 kolonner Du skal nu have indsat nogle elementer i de to kolonner og det foregår på samme måde som da du indsatte elementet Tabel. Du klikker derfor på Indsæt i den venstre kolonne og vælger HTMLeditor (pop up). I den højre kolonne skal du have indsat to billeder med en tom linje imellem dem for at give lidt luft. Du klikker først på i den højre kolonne og vælger Billede. Når dette element er indsat klikker du på under billedelementet og vælger Mellemrum. Til slut klikker du på under mellemrumselementet og vælger igen Billede i rullemenuen. Du har nu oprettet grundstrukturen på din nye side og den skulle gerne se ud som eksemplet i figur 15. Du kan nå begynde at lægge tekst og billeder på siden. Du starter med at klikke på i elementet HTML-editor (læs mere om HTML-editor i afsnit 2.1.9). Editoren åbnes dermed i et nyt vindue, hvor du kan skrive din tekst eller indsætte en kopieret tekst skrevet i et tekstbehandlingsprogram. Skriv f.eks. Velkommen til min nye hjemmeside og marker denne tekst og vælg Overskrift 1 ved at klikke på. Placer musen efter overskriften og klik på Retur. Under overskriften skriver du en anden tekst som du bagefter markerer. Klik på og vælg Brødtekst 1. 17

19 Figur 15: En tabel med 2 kolonner. Du er nu færdig med at skrive og afslutter ved at klikke på nederst til venstre i vinduet. Indholdet gemmes, vinduet lukkes og indholdsredigeringsområdet opdateres. I editorelementet kan du nu se indholdet er gemt som rå data (HTML-kode) og behøver ikke at foretage dig yderligere. Hvis du ønsker at redigere i den tekst du lige har skrevet, så klikker igen på, laver dine rettelser og klikker på I den højre kolonne skal du have valgt hvilke billeder, der skal vises på din side, så du klikker på og dit billedarkiv åbnes. Vi går ud fra at du allerede har billeder i dit arkiv ellers kan du kan læse mere om hvordan du overfører billeder til dit arkiv i kap. 3. I arkivet vælger du et billede ved at klikke på. Arkivet lukkes og indholdsredigeringsområdet opdateres, så du kan se at billedelementet nu har fået indsat en lille udgave af dit billede (figur 16). Du gentager proceduren for det næste billedelement og vælger et billede mere. Figur 16: Billedelement med valgt billede. Når du har valgt billederne har du mulighed for at bestemme om de skal linke til noget. Du har to muligheder: Du kan enten linke til en intern/ekstern side eller du kan linke til et andet billede, der åbnes i et popup-vindue. Vælger du den første mulighed skal du klikke på, der vil åbne dit arkiv med filer og links. Vælger du den anden mulighed skal du klikke på, der vil åbne dit billedarkiv. Den sidstnævnte mulighed er specielt anvendelig, hvis du på en side har en præsentation af en række produkter. Hvert produkt kunne eksempelvis blive præsenteret med en tekst og i et lille billede. Det lille billede kan med fordel linke til et stor udgave af billedet, så 18

20 brugeren får et bedre indtryk af produktets udseende. Det store billede vil åbnes i et popup-vindue, så brugeren ikke ledes væk fra produktsiden. Du har også mulighed for at bruge denne funktion når du indsætter billeder i HTML-editoren. Du har nu lagt indhold på din nye side og mangler blot at justere indholdet, så det står pænt. Derfor skal du give din tabel en bredde på 100%, så alt indhold på siden kan sprede sig over hele det tilgængelige område med de to billeder placeret helt ude til højre. Skriv 100% i feltet Bredde øverst i tabellen. Du skal gemme ændringen ved at klikke på disketten til højre i tabellens top. Når skærmbilledet er opdateret, så skifter disketten farve igen til. Du skal også sætte bredden på den højre kolonne, så den er lidt bredere end det største billede. I dette eksempel sætter vi bredden til 200 pixel, da billedet er 150 pixel bred. Husk at gemme ved at klikke på. Nu mangler du kun at højrestille de to billeder ved at klikke på i begge billedelementer. Figur 17: Den færdige side set i administrationens indholdsredigeringsområde. Du har nu lavet din nye side og i administrationens indholdsredigeringsområde skulle siden gerne se ud som i figur 17. EasyPage-logoet linker til hvilket er illustreret i teksten under billedet. Linket på billedet kan let fjernes ved at klikke på slet. Det færdige resultat på den offentlige side er vist i figur

21 Figur 18: Det færdige resultat som de besøgende på hjemmesiden kan se det. Øvelse B: Opret en kontaktformular I denne øvelse skal du lave en side med en kontaktformular, så besøgende på din hjemmeside kan sende en til dig. Den skal indeholde en overskrift og felter til henholdsvis navn, telefon og e- mail. Derudover skal siden indeholde to checkbokse som brugeren kan afkrydse hvis han/hun ønsker at blive ringet op og/eller ønsker at få tilsendt materiale. Til sidst skal der være et notatfelt, hvor brugeren kan skrive en besked til dig. Du starter med at oprette en ny side, der skal være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Kontakt og derefter vælge, at typen skal være en Kontaktformular. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet til højre er der kun en Indsæt -knap. Du skal nu indsætte det første element, der skal være en Overskrift 1. Klik derfor på og vælg Overskrift 1 i rullemenuen med elementer. Klik på Vælg og indholdsredigeringsområdet opdateres og der kommer et Overskrift 1 -element øverst på siden. I denne skal du skrive en overskrift, der f.eks. kunne være Kontakt mig. Når du har skrevet teksten kan du se at gem-knappen er blevet orange, hvilket betyder at du skal klikke på den for at gemme din overskrifttekst. Klik på, der efter et kort øjeblik ændres til. Din tekst er gemt og du kan indsætte det næste element på din kontaktside. Det næste element skal være Figur 19: Formular-elementet Tekstfelt et formularelement til indtastning af et navn. Klik på igen og vælg formularelementet med navnet Form-Tekstfelt. Når indholdsredigerings-området er opdateret skal 20

22 du i det indsatte element indtaste et navn på elementet. Da det skal være et felt, hvor brugeren skal indtaste sit navn, så kan du f.eks. skrive Skriv dit navn: I dette element (se figur 19) har du også mulighed for at bestemme om feltet skal valideres. Hvis du gerne vil være sikker på, at brugeren indtaster noget i feltet, så skal du klikke på Ja ud for Obligatorisk felt og derefter klikke på. Indsæt nu næste element, der skal være et mellemrum. Klik på og vælg mellemrum. Når indholdsredigeringsområdet er opdateret indsætter du det næste formularelement, der også skal være et Form-Tekstfelt. Gentag derfor proceduren beskrevet ovenfor for at indsætte elementet. Giv det et navn, f.eks. Skriv dit telefonnummer:, angiv at det skal være et obligatorisk felt og gem ved at klikke på. Indsæt derefter et nyt mellemrum inden du indsætter det næste formularelement, der skal være et -felt. Et -felt adskiller sig fra et tekstfelt ved at valideringen er anderledes. Hvis du vælger at det skal være et obligatorisk felt, så tjekkes der for om der er indtastet en -adresse, dvs. at der i feltet er indtastet og et punktum, samt at adressen er på minimum 6 tegn. Klik på Indsæt og vælg Form felt og skriv derefter en tekst i elementet, f.eks. Skriv din -adresse: Klik på Ja udfor obligatorisk felt og gem ved at klikke på. Ved hjælp af næste formularelement skal brugeren have mulighed for at vælge nogle ting, så derfor har vi brug for nogle checkbokse, som brugeren kan afkrydse afhængig af sine ønsker. Når du har indsat et mellemrum, så klikker du igen på under mellemrumselementet. Vælg Checkbokse i rullemenuen. Når elementet, der vises i figur 20, er indsat, så kan du f.eks. skrive Vælg hvad du ønsker: som elementets navn. Husk at gemme ved at klikke på. Du skal nu indsætte nogle valgmuligheder til brugeren som blev nævnt indledningsvis i denne øvelse. Et ny valgmulighed indsættes ved at klikke, og når indholdsredigeringsområdet er opdateret kommer der et punkt frem med et lille tekstfelt. I tekstfeltet skriver du det som er den valgmulighed som brugeren skal præsenteres for. Skriv derfor Ring mig op og klik på udfor punktet. Indsæt næste valgmulighed på samme måde som før og skriv Send brochure. Husk at gemme ved at klikke på. Du har mulighed for at flytte punkterne op og ned ved at klikke på pilene til højre for hvert punkt. Indsæt et mellemrum for at skabe lidt luft inden du indsætter næste formularelement, der er et notatfelt, hvori brugeren kan skrive en besked til dig. Klik på og vælg Form Notatfelt. Når indholdsredigeringsområdet er opdateret giver du elementet et navn, der f.eks. kunne være Evt. bemærkninger, og klikker på. Figur 20: Formularelementet Checkbokse, hvor der indsat en valgmulighed Ring mig op. Figur 21: Formularelementet Send knap, hvor der bl.a. skal angives hvilken -adresse, der skal sendes til. Indsæt et mellemrum inden du indsætter det sidste element, der er en send-knap (se figur 21), så det bliver muligt at sende indholdet i kontaktformularen til en -adresse som du bestemmer. Vælg derfor Send knap i rullemenuen 21

23 med elementer. I dette element skal du både skrive den tekst der skal stå på knappen (f.eks. Send) og den -adresse som du ønsker at bruge. Husk at gemme ved at klikke på. Siden er nu færdig og det færdige resultat for brugeren skulle gerne se ud som det er vist i figur 22. Figur 22: Den færdige kontaktformular på den offentlige side. Øvelse C: HTML-editorens tabel-funktioner I denne øvelse skal vi arbejde med tabelredskabet i HTML-editoren. Vi skal lave en adresseliste bestående af en tabel med 4 kolonner. Første kolonne skal indeholde navne, i anden kolonne skal der være adresser, i den tredje kolonne skal postnumre vises og i den i sidste skal der være bynavne. Du starter med at oprette en ny side, der skal være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Adresser og derefter vælge typen skal være en Normal side. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter 22

24 højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet til højre er der kun en Indsæt -knap. Du skal nu indsætte en HTMLeditor og klikker derfor på og vælger HTML-editor (fuld størrelse) i rullemenuen. Når indholdsredigeringsområdet er opdateret vil der være en HTML-editor som vist i figur 10. Du starter med at lave en overskrift, der f.eks. kunne være en Adresseliste. Marker teksten og klik på, hvor du vælger Overskrift 1. Du har nu formateret teksten til en overskrift. Placer musen efter den nye overskrift og tryk på Enter på dit tastatur for at lave et nyt afsnit. Du skal nu skal nu indsætte en tabel ved at klikke på i editorens top. Derved åbnes editorens tabelredigeringsvindue som vist i figur 23. Figur 23: HTML-editorens tabelværktøj. I tabelværktøjsvinduet er fanebladet Opret tabel valgt og du kan nu angive hvor mange rækker og kolonner der skal være i tabellen. Du kan senere tilføje flere rækker og/eller kolonner eller slette dem igen hvis du har lavet for mange. Du skal nu skrive 5 rækker i feltet Rækker og 4 i feltet Kolonner. Til at starte er der sat en rammetykkelse på 1 og det er en god ide at bibeholde denne sålænge du arbejder med tabellen. Hvis du ikke vil have ramme i din tabel, så bør du vente med at sætte den til 0, til du er helt færdig med at skrive i din tabel. Sålænge du har en ramme er det nemmere at se i hvilke kolonner du arbejder. Du skal i denne øvelse have en grå ramme i din tabel, så du skal klikke på ved siden af Rammefarve og vælge en lysegrå farve. Når farven er valgt kan du se dens farvekode i det lille (f.eks. #CCCCCC). For at skabe lidt afstand fra teksten og til rammen, så skal du slette 0 i feltet Celle padding og i stedet skrive 2. Du behøver ikke at give tabellen en bredde, da du senere skal give hver kolonne en bredde, så du afslutter ved at klikke på. 23

25 Der er nu indsat en tom tabel i din editor. Du skal nu lave en overskrift i hver kolonne, så du starter med at placere musen i toppen af den første kolonne. Her skriver Navn. I toppen af den anden kolonne skriver du Adresse, i den tredje kolonne skriver du Postnr og i den sidste skriver du By. Formater den første overskrift ved at markere den og derefter klikke på hvor du vælger Brødtekst 1. Mens overskriften stadig er markeret klikker du også på for at gøre teksten fed. Gentag proceduren for de sidste overskrifter i tabellen. Figur 24: Tabelredigeringsvinduet hvor du kan rette en celle Nu skal du ændre baggrundsfarven i den første række, hvor du lige har skrevet noget. Du placerer musen i den første celle og klikker igen på tabel-ikonet. Du får derved tabelredigeringsvinduet frem igen (som vist i figur 24). Nu er det dog et andet faneblad der er valgt, nemlig Ret celle, hvor du nu skal klikke på udfor Baggrundsfarve. Vælg evt. samme farve som den du valgte til din ramme. Giv cellen en bredde ved at skrive 200 i feltet Cellebredde. Klik på. Den første celle i den anden kolonne skal også redigeres, så gentag ovenstående procedure. I den tredje kolonne skal bredden sættes til 50 og du skal igen vælge baggrundsfarve. I den sidste sætter du bredden til 200 og vælger atter den ønskede baggrundsfarve. Du kan nu se, at tabellen har fået et andet udseende. Udfyld nu de fem rækker med nogle navne, adresser og postnumre som vist herunder. Hver tekst skal du formatere, enten ved at gøre som beskrevet ovenfor eller ved at vælge en skrifttype og en størrelse. I denne øvelse skal du formatere teksten ved at markere teksten i hver celle og klikke på, hvor du vælger Brødtekst 1. Du har nu lavet en tabel der ser nogenlunde ud som i figur 25. Figur 25: Den færdige tabel. 24

26 Hvis du ønsker at tilføje en række, så placer f.eks. musen i den nederste række klik på tabel-ikonet. Du kan nu vælge om du vil indsætte en række over eller under den række du har placeret din mus i. Du ønsker at tilføje en ekstra række nederst i tabellen, så du klikker på ud for Indsæt række. Der er nu kommet en tom række nederst i tabellen. Hvis du ønsker at tilføje en ekstra kolonne, så placer f.eks. musen et sted i kolonnen yderst til højre. Klik på ud for Indsæt række og du får derved indsat en ny kolonne til højre i tabellen. Du kan også slette rækker og kolonner ved at klikke på de respektive knapper i tabelredigeringsvinduet under fanebladet Ret celle. Øvelse D: Indsættelse af links I denne øvelse, hvor du skal lave en simpel side med links. I EasyPage kan du lave links på flere forskellige måder, du skal dels prøve at gøre det i HTML-editoren og via et brødtekst-element. Du starter med at oprette en ny side, der skal være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Mine links og derefter vælge typen skal være en Normal side. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet klikker du på og vælger HTML-editor (fuld størrelse). Klik på for at indsætte editoren. I editoren kan du f.eks. starte med at lave en overskrift, der passende kunne være Mine links. Marker teksten og klik på, hvor du skal vælge Overskrift 1. Du har nu indsat en overskrift og kan begynde at skrive dine links. Placer musen efter overskriften og tryk på Enter på dit tastatur for at starte på et nyt afsnit. Skriv din første reference, f.eks. EasyPage. Du kan nu vælge at lave denne tekst til et link på to måder. Vi starter med at bruge den simple måde, hvor linket ikke kommer fra dit arkiv. Marker teksten og klik på. I dette Hyperlink -vindue kan du nu skrive dit link, der skal være (se figur 26). Figur 26: Hyperlink vindue I rullemenuen øverst til højre skal du vælge da det er en hjemmeside du skal linke til. Hvis det derimod var en -adresse du ville linke til, så skulle du vælge mailto. I feltet øverst skriver du dit link, i dette tilfælde 25

27 I den midterste rullemenu kan du vælge om den side du linker til skal åbnes i et nyt browservindue eller om det skal åbne i det samme browservindue som dit link befinder sig i. I denne øvelse vælger du, at skal åbnes i et nyt vindue. Det sidste felt Navn skal ikke udfyldes. Klik derfor på og den markerede tekst er nu blevet til et link. Hvis du ønsker at rette linket eller slette det, så placerer du musen et sted i linket og klikker på. I Hyperlink -vinduet kan du nu rette linket eller slette det ved at slette linket, i dette tilfælde Gem dine ændringer ved at klikke på. Det næste link du skal lave skal hentes fra dit arkiv. På en ny linje skriver du f.eks. Marker teksten og klik på arkiv-knappen, der åbner dit arkiv med filer, interne- og eksterne links samt -adresser (læs mere om arkivet i kap. 3). Du kan bladre mellem de forskellige typer i toppen af arkiv-vinduet. Vælg eksterne og hvis du ikke allerede har oprettet en linkgruppe, så skal du gøre det nu. Klik på og giv den nye gruppe et navn. Klik derefter på og du kan nu se gruppen optræder i menuen til venstre. Du skal nu oprette et link, så klik derfor på. Til højre i vinduet kan du indtaste oplysninger om det nye link (se figur 27). Figur 27: Arkiv med filer og links. Et link til er under oprettelse i gruppen Mine favorit links. Du skal skrive linket, der f.eks. kan være og give linket et beskrivelse. Ligesom i ovenstående eksempel i denne øvelse, så skal du også bestemme om linket skal åbne i et nyt vindue eller i samme vindue. I den nederste rullemenu vises den gruppe som linket vil blive placeret i. Hvis du har oprettet flere linkgrupper, så vil de også optræde i rullemenuen. Figur 28: Arkiv med filer og links. I linkgruppen Mine favorit links er der et link til Det nye link er nu oprettet og kan vælges ved at klikke på (se figur 28). Arkiv-vinduet lukkes og din markerede tekst i editoren opdateres, så det nu er blevet til et link. Du er nu færdig med at arbejde i HTML-editoren og skal nu klikke på i øverste højre af editoren. 26

28 Det tredje og sidste link du skal lave i denne øvelse skal ske i en Brødtekst 1 - elementet, så du indsætter først et Mellemrum og derefter en Brødtekst 1 ved at klikke på under HTMLeditoren (se figur 29). I Brødtekst 1 kan du f.eks. skrive Jubii og derefter markere teksten. Linket oprettes ved at klikke på, der åbner dit arkiv. Her er proceduren den samme som i forrige eksempel. Afslut ved at klikke og når indholdsredigeringsområdet er blevet opdateret kan du se, at der i Brødtekst 1 - elementet nu er kommet nogle link-koder rundt om den tekst du før havde markeret (se figur 29). Figur 29: Brødtekst-element med link til Jubii. Nederst i elementet er det en oversigt over de links der optræder i teksten. I dette tilfælde er der kun det ene link du lige har oprettet. Du kan slette linket ved at klikke på. Du har lavet en lille side med 3 links og resultatet skulle gerne minde om det der er vist i figur 30 en overskrift og 3 links. Figur 30: Udsnit af færdig side med links. Øvelse E: Indsættelse af billeder I denne øvelse skal du prøve at indsætte billeder på en side. Det kan du gøre på 2 forskellige måder, enten i HTML-editoren eller ved hjælp af et billedelement (se evt. øvelse A). Du starter med at oprette en ny side, der f.eks. kan være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Mine billeder og derefter vælge typen skal være en Normal side. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under 27

29 menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet klikker du på og vælger HTML-editor (fuld størrelse). Klik på for at indsætte editoren. I editoren kan du f.eks. starte med at lave en overskrift, der f.eks. kunne være Mine billeder. Marker teksten og klik på, hvor du skal vælge Overskrift 1. Du har nu indsat en overskrift og kan begynde at indsætte dine billeder. Placer musen efter overskriften og tryk på Enter på dit tastatur for at starte på et nyt afsnit. Klik på for at åbne dit billedarkiv. Vi går nu ud fra det billede du ønsker at indsætte på din hjemmeside ikke findes i arkivet, så du skal nu have overført et billede til Easypages-serveren (uploade). Opret evt. en gruppe først, der f.eks. kunne hedde Foto, så start med at klikke på (se figur 31). Skriv navnet på gruppen og gem. Figur 31: Billedarkiv, hvor der er ved at blive oprettet en ny gruppe. Du har nu oprettet en gruppe og skal nu have uploadet dit billede. Klik derfor på og vælg et billede fra din computer (se figur 32). Når du har valgt det og givet det en beskrivelse, så kan du foretage en skalering af billedet, hvis det er i jpeg-format. Denne funktion kan anvendes, hvis du f.eks. har taget nogle billeder med et digitalkamera. Disse billeder er normalt meget store og bør ikke anvendes på hjemmesider. Ved at skrive en bredde (antal pixel) i det nederste felt, så vil billedet blive gemt på serveren i den ønskede størrelse. Du skal dog være opmærksom på, at du ikke må overskride den maksimale størrelse, der er angivet i øverst i upload-formularen (500 kb). Det anbefales dog, at du klargører dine billeder i et billedbehandlingsprogram, f.eks. Paint Shop Pro, eller i de programmer, der ofte følger med digitalkameraer. Figur 32: Billedarkiv, hvor upload-formularen er ved at blive udfyldt. Klik på og vent på, at billedet bliver overført til dit arkiv på EasyPage-serveren. Derefter opdateres vinduet, så du nu kan se, at billedgruppen Foto indeholder dit nye billede. Klik på for at indsætte billedet på din side. 28

30 Billedet vises nu i HTML-editoren under overskriften. Hvis du markerer billedet (klik på det) har du mulighed for at rette dets egenskaber. Klikker derefter på og dit billedarkiv åbnes igen, men nu er det kun dit billede der er vist (se figur 33). Du kan se billedet i toppen og i felterne nedenunder kan du f.eks. skrive en tekst, der bliver vist når brugeren holder musen over billedet på din hjemmeside. Du kan også bestemme hvordan billedet skal justeres på siden og i forhold til teksten. Hvis billedet optræder i en tekst vil det ofte være en fordel at sætte margin til 20, så der bliver lidt luft fra billedet og til teksten. I denne øvelse kan du prøve at lave en ramme omkring billedet ved at vælge 1 i rullemenuen ud for Ramme. Opdater billedet ved at klikke på. Figur 33: Billedarkiv med visning af egenskaber for et billede. Billedet er nu blevet opdateret i HTML-editoren og har fået en tynd sort ramme. Gemt indholdet i editoren ved at klikke på. Du kan nu se billedet på din hjemmeside, hvis du klikker på. Som nævnt indledningsvis i denne øvelse, så kan du også sætte billeder ind ved hjælp af billedelementer (se evt. øvelse A). På den side du lige har lagt et billede ind på, skal du nu indsætte et mellemrum under HTMLeditoren. Klik på og vælg Mellemrum i rullemenuen. Når det er indsat klikker du igen på og vælger Billede. Figur 34: Billedelement I det indsatte billedelement (se figur 34) skal du nu klikke for at åbne dit billedarkiv. Her kan du evt. vælge det samme billede som du indsatte i HTMLeditoren i første del af denne øvelse eller du kan uploade et billede på samme måde som beskrevet ovenfor. Når du har fundet det billede du vil indsætte, så skal du klikke på. 29 Figur 35: Billedelement med indsat billede

31 Billedelementet bliver nu opdateret så du kan se, at det linker til et andet billede. Nederst i figur 36 ses det, at billedet har fået et fotolink til filen moduloversigt. Du kan slette linket igen ved at klikke. Hvis du klikker på for at indsætte et nyt billede, vil fotolinket automatisk blive slettet. Du har også mulighed for at lave et fotolink på et billede du har indsat via HTML-editoren. Her skal du først markere (klikke på det) det billede du ønsker skal linke til et andet billede. Derefter åbner du dit arkiv ved at klikke på og dernæst på Billeder i topmenuen. Vælg det ønskede billede ved at klikke på. Arkivet lukkes og HTML-editoren opdateres. Ligesom alle øvrige elementer i indholdsredigeringsområdet, så kan du flytte dit billedelement op og ned i forhold til andre elementer du evt. har indsat på din side. Klik på for flytte elementet op eller klik på for flytte det ned ad i strukturen på din side. Figur 36: Billedelement med fotolink Øvelse F: Indsættelse af flash-animation og video I denne øvelse skal du prøve indsætte en flash-animation på en side. Eksemplet kan også bruges, hvis du ønsker lære hvordan du indsætter en video, da proceduren er den samme. Du skal dog være opmærksom på, at evt. video indsat på den nedenfor beskrevne måde ikke bliver streamet. Dvs. at når brugeren skal se videoen på din side, så vil hele videoen først blive overført til brugeren computer inden vedkommende kan se den. Du starter med at oprette en ny side, der f.eks. kan være et hovedmenupunkt. Du klikker derfor først på roden i menuen til venstre, der enten er START eller dit domænenavn. Når roden er markeret, så klikker du på knappen. I popup-vinduet kan du f.eks. give siden navnet Flash og derefter vælge typen skal være en Normal side. De øvrige felter i vinduet skal ikke bruges i denne øvelse, så du afslutter ved at klikke på. Du har nu oprettet en ny side, der er blevet placeret nederst i menuen. Du kan evt. flytte den opad i menustrukturen, hvis du ønsker det. Det gør du ved at klikke på det nye menupunkt og derefter højreklikke på musen, hvor du i den lille menu vælger Flyt side op. Gentag denne procedure, hvis du vil flytte menupunktet yderligere. Den nye side bliver ikke vist i den offentlige menu, hvilket vises ved at menupunktet er farvet orange. Når du er færdig med at opbygge din side kan den aktiveres ved at klikke på der er placeret under menutræet. Sørg for at den ønskede side er valgt inden du forsøger at aktivere den. Menupunktet vil ikke længere være orange og ikonet under 30

32 menutræet vil skifte til, hvilket betyder at siden nu bliver vist i den offentlige menu. Mens du er i gang med at lave din side, så kan du se hvordan den ser ud ved at klikke på. I indholdsredigeringsområdet klikker du på og vælger HTML-editor (fuld størrelse). Klik på for at indsætte editoren. I editoren kan du f.eks. starte med at lave en overskrift, der f.eks. kunne være Flash-animationer. Marker teksten og klik på, hvor du skal vælge Overskrift 1. Du har nu indsat en overskrift og kan begynde at indsætte dine billeder. Placer musen efter overskriften og tryk på Enter på dit tastatur for at starte på et nyt afsnit. Åbn dit arkiv med filer og links ved at klikke på. I arkivet vælger du Filer/dokumenter i menuen i toppen af vinduet. Du får mulighed for at overføre en fil til EasyPage-serveren (uploade). Inden du kan uploade en fil skal du dog først oprette en filgruppe, hvis du ikke allerede har gjort det. Klik derfor på og find et navn til gruppen. Når gruppen er oprettet kan du uploade en flash-fil ved at klikke på (se figur 37). Hver opmærksom på at filens størrelse ikke overskrider den maksimale størrelse der er angivet øverst i formularen. Når du har valgt en fil kan du evt. fjerne markeringen nederst i formularen, hvis du vil være sikker på, at du ikke overskriver en fil med samme navn som den du vil til at uploade. Klik på og overførelsen af filen starter. Denne proces kan tage et par minutter afhængig af filstørrelse og internetforbindelse. Figur 37: Arkiv med filer og links, hvor upload-formularen er ved at blive udfyldt. Når filen er uploadet kan du nu se, at filen er placeret i den filgruppe du ønskede (se figur 38). Nederst i fildata-kortet er der mulighed for at indsætte filen på din side. Du kan enten indsætte det som en flash-animation eller som et link, der åbner animationen i nyt browservindue. I denne øvelse skal du indsætte den som et objekt på selve siden, så du skal nu klikke på det første Indsæt ikon. Animationen indsættes nu i HTML-editoren, hvor den allerede afspilles (se figur 39). 31

33 Figur 38: Arkiv med filer og links. I filgruppen flash er der en enkelt flash-animation med navnet publish.swf. Figur 39: Flash-animation i HTML-editor. Flashen er markeret og ved at trække i de små firkanter kan bredde og højde justeres. Når du har justeret flash-animationens bredde og højde kan du gemme indholdet i HTML-editoren ved at klikke på i øverste højre af editoren. 2.2 Skabeloner Opbygningen af en EasyPage-hjemmeside styres vha. en skabelon. I EasyPage er der 12 forskellige skabeloner at vælge imellem (se figur 40). Ud fra valget af skabelon bestemmes hvilke områder (celler), der skal være på hjemmesiden, og hvilken menutype der skal være aktiv. Det er med andre ord grundstrukturen, der styres vha. af de faste skabeloner. Hvordan de enkelte sider på 32

34 hjemmesiden bygges op, styres derimod i indholdsredigeringsområdet, hvilket betyder at når du først har valgt en skabelon, så skal du kun koncentrere dig om indholdet på din hjemmeside. Der kan være følgende celler i en skabelon: Top Sidemenu Indhold Bund I figur 40 ses det, at Skabelon 2 er valgt. Den indeholder en top-, bund- og indholdscelle, hvor menuen er placeret i toppen. Ved at vælge en af de andre skabeloner kan du således bestemme om menuen i stedet skal placeres til venstre eller til højre. Du kan også vælge om hovedmenuer skal være i toppen, mens eventuelle undermenuer skal placeres i en sidemenu til venstre eller til højre. Når du redigerer en side i EasyPage, så er det indholdet i indholdscellen du redigerer. Indholdscellen er derfor en fast del af alle 12 skabeloner. Figur 40: Tilgængelige skabeloner i EasyPage. 33

35 Når du har valgt en skabelon kan du foretage en række justeringer af denne, såsom højde og bredde på de enkelte celler. Disse indstillinger foretages ved at klikke på Opsætning i menuen til venstre (se figur 41). Udover de celler der er i den valgte skabelon, så vil der altid være mulighed for at rette egenskaber for Vindue og Skabelon. Vindue er hele browservinduet, hvor der kan ændres baggrundsfarve og indsættes et baggrundsbillede. I Skabelon kan du ændre egenskaber for den valgte skabelon, hvilket drejer sig om bredde, højde, placering i vinduet og baggrundsbillede. De øvrige dele du kan redigere er afhængig af hvilke celler, der er i den valgte skabelon. Du har således kun mulighed for at justere de celler, der er med i den valgte skabelon. I top- og bundcellen kan du redigere højde, baggrundsfarve og billede. Derudover kan du i begge celler indsætte tekst vha. HTML-editoren. Du skal blot klikke på for at indsætte/redigere indhold. I cellen, hvor sidemenuen er placeret, kan du justere bredde, baggrundsfarve og billede. Du skal dog være opmærksom på, at i denne celle er menuen placeret i en tabel, hvis bredde justeres på siden Opsætning af menuer (se afsnit 2.3). I indholdscellen kan du justere baggrundsfarve og billede. Derudover kan du også bestemme hvilken en af dine sider, der skal vises som forside. Når du redigerer en skabelon skal du altid huske, at Vindue er det bagerste lag i det du ser på din hjemmeside, derefter kommer din Skabelon. Og i denne befinder de enkelte celler sig. Dvs. at når du indsætter en baggrundsfarve i Vindue, så vil den blive dækket af en evt. baggrundsfarve i Skabelon (hvis den fylder hele skærmen 100% bredde og 100% højde ). En baggrundsfarve kan ydermere blive dækket af en baggrundsfarve i henholdsvis top- og bundcelle samt sidemenu- og indholdscelle. 34

36 Figur 41: Opsætning af skabelon 2.3 Opsætning af menuer Konfigurationer af menuernes udseende foretages på siden Opsætning af menuer (se figur 42). Afhængig af hvilken menutype der er valgt, så vil de forskellige indstillingsmuligheder for topmenuen og/eller sidemenuen blive vist i menuen til venstre. For hver menutype er der en generel opsætning af menuen, hvilket bl.a. gælder placering på siden og bredde. Disse indstillinger foretages under punktet Opsætning. Derudover er der i menuen en opdeling i de niveauer som top- og sidemenuen tilbyder. For topmenuen kan der justeres på de 3 tilgængelige menuniveauer som er hovedmenu, 1. undermenu og 2. undermenu, mens der for sidemenu kun kan justeres for hovedmenu og undermenu (undermenu dækker både første og andet niveau). Under det enkelte niveau kan der bl.a. justeres skrifttype, størrelse, format, justering og farve, hvilket er vist til højre i figur

37 Figur 42: Opsætning af menuer Topmenu Topmenuen i EasyPage kan vise menuer i 3 niveauer, når musen føres over menupunkterne, hvilket er illustreret i figur 43, der er et udsnit af Opsætning af topmenuen kan være en kompliceret sag pga. af de mange indstillingsmuligheder, hvilket vil blive beskrevet i de følgende afsnit. Opsætning af topmenu I figur 43 ses en hjemmeside med 5 hovedmenupunkter og menuen Produkter har 3 undersider og af dem har Moduler yderligere 7 undersider. Opsætningen af denne menu gennemgås nu mere detaljeret. Som vist i figur 44 ses de forskellige felter under punktet Opsætning. Første del er Placering og type hvor menuens placering på din side indstilles. Når du skal placere din menu er det altid afstanden fra browservinduets øverste venstre hjørne der er udgangspunkt, hvis din menu er venstrejusteret. Hvis din topmenu i stedet er centreret eller højrejusteret, så har disse to tal ingen indflydelse på placeringen. I dette eksempel er topmenuen venstrejusteret og er placeret 122 pixel fra toppen og 56 pixel fra venstre kant. Derudover ses det at den er venstrejusteret og typen er sat til vandret. Type betyder i dette tilfælde at hovedmenupunkterne ligger på en vandret linje. Der er også mulighed for at vælge en lodret type, hvis det ønskes. Det sidste felt er afstanden mellem hovedmenupunkterne, der i dette eksempel er sat til 25 pixel. 36

38 Figur 43: Topmenu på Den næste del af opsætningen er Hovedmenu. De felter hvor menuteksten er placeret kan justeres ved at angive en bredde og højde. Disse indstillinger vil være gældende for alle topmenupunkter, hvis der ikke er foretaget yderligere justering under det enkelte menupunkt. Det er nemlig muligt at justere hver enkelt menupunkt (på alle 3 niveauer) i forbindelse Ret side (se afsnit 2.1.4, hvor det i figur 6 ses, at siden Ny side har en menubredde på 48 pixel). Evt. undermenuers placering kan sættes ved at vælge i Placering af rullemenuer. I dette eksempel skal undermenuerne (andet niveau) komme frem lige nedenunder hovedmenupunkterne, så der er valgt Under i rullemenuen. Ramme x og Ramme y angiver bredden på en evt. ramme, men i dette eksempel skal der ikke være ramme i topmenuen, så begge felter er sat til 0. Ved hjælp af værdierne Offset x og Offset y kan det bestemmes helt præcist hvor evt. undermenuer skal komme frem. I dette tilfælde er værdierne sat til henholdsvis 1 og 1, da undermenuerne kommer til at ligge præcist i forhold topmenutekst og grafikken hvor topmenuerne er placeret. I det sidste felt er der mulighed for at indsætte et billede (f.eks. en lille pil), der så vil blive vist til højre for de topmenuer som har undermenuer. Den tredje del af opsætningen er 1. undermenu og er fuldstændig identisk med felterne i Hovedmenu. Som det er vist i figur 43, så er der en tynd ramme om de enkelte undermenuer (både på første og andet niveau). Tykkelsen bestemmes af værdierne i felterne Ramme x og Ramme y, der i dette eksempel er 1 pixel. Offset x og Offset y bestemmer ligesom beskrevet ovenfor placeringen af evt. undermenuer (2. niveau). Den sidste del af opsætningen er 2. undermenu og den indeholder kun 2 felter. Her skal der kun sættes en bredde og en højde på de felter som menuerne er placeret i. Bredden kan også sættes for et enkelt menupunkt ved at indsætte en værdi i popup-vinduet Ret side (se afsnit 2.1.4). 37

39 Figur 44: Opsætning af topmenu Justering af tekster og farver i topmenu Når den generelle opsætning af topmenuen er på plads, så kan tekster og farver justeres for de 3 menuniveauer. Som det kan ses i figur 42, har du mulighed for at justere bl.a. farver og skrifttype for menutekst, mouseover tekst og ramme på hvert menuniveau. I figur 45 ses hvilke indstillingsmuligheder der er for tekstens udseende i hovedmenuen. Det første felt er Padding og ved at angive en bredde kan du forøge afstanden fra teksten og til kanten af den celle, hvor den er placeret. I eksemplet vist i figur 43 er der ingen ramme omkring hovedmenuerne, så det er ikke nødvendigt at udfylde dette felt. Men for undermenuerne er der angivet et padding-værdi på 1 pixel (se figur 46), da teksten ikke skal støde helt op til rammerne. Udover justering af tekstens udseende (font, størrelse, format, justering og farve), så er der også mulighed for at vælge en baggrundsfarve 38

40 for de felter hvor menuteksterne optræder. I eksemplet vist i figur 43 er det valgt at der ikke skal være nogen baggrundsfarve, da baggrundsbilledet skal kunne ses. Cellen, hvor hovedmenuens tekst optræder, er derfor transparent. I undermenuerne er det derimod valgt, at der skal være en baggrundsfarve (se figur 46). Under punktet ramme er der kun et felt der kan udfyldes og det er baggrundsfarve, der i dette tilfælde er rammens farve. Husk at rammens tykkelse skal vælges i den generelle opsætning (se figur 44). Figur 45: Indstillingsmuligheder for hovedmenuens tekst Figur 46: Indstillingsmuligheder for undermenuens tekst Figur 47: Indstillingsmulighed for ramme i undermenu Brug af billeder i topmenu Hvis du ikke ønsker at benytte tekst som menupunkter i din topmenu, så kan du i stedet bruge menubilleder/knapper. Du har mulighed for at indsætte billeder på 1. niveau i topmenuen. Indsættelsen sker i forbindelse med oprettelse/redigering af sider (se figur 5 og 6). Du kan opnå mouseover effekt ved at indsætte to billeder for hvert hovedmenupunkt. Billede 1 vil erstattes af billede 2 når musen holdes over menupunktet Sidemenu Sidemenuen, der alt efter valg af skabelon (læs mere i afsnit 2.2), kan vises i både højre og venstre side af hjemmesiden. I modsætning til topmenuen, der blev beskrevet i foregående afsnit, så har sidemenuen ikke så mange indstillingsmuligheder. Sidemenuen kan folde sig ud, hvis der er undersider til de enkelte hovedmenupunkter. I figur 48 ses samme menustruktur som også blev beskrevet i Opsætning af topmenu i afsnit

41 I eksemplet er Moduloversigt, der er en underside til Moduler, blevet valgt. De forskellige indstillingsmuligheder vil blive beskrevet i de kommende afsnit. Figur 48: Sidemenu der er udfoldet Opsætning af sidemenu Sidemenuen er placeret i en usynlig tabel, der er placeret i en celle i den skabelon der er valgt (se afsnit 2.2). Placeringen af sidemenuen kan justeres ved at angive en afstand til toppen og til venstre kant af browservinduet. I figuren ses det, at afstandene er sat til henholdsvis 100 og 20 pixel. Menubredden er bredden på den usynlige tabel som er 180 pixel og denne bredde plus afstanden til venstre kant må ikke være større end den bredde der er angivet i den valgte skabelon. I dette eksempel er også angivet en afstand mellem de enkelte menupunkter (3 pixel). Tegn før hver undermenu, kan f.eks. være nogle mellemrum (tryk nogle gange på space-knappen på tastaturet), hvilket rykker evt. undermenuer lidt ind i forhold det menuniveau, der ligger over. Dette benyttes i eksemplet i figur 48. For ar gøre menuen mere levende kan der også benyttes små ikoner foran menupunkterne (f.eks. små pile). Det kan defineres om det kun er hovedmenupunkter der skal have indsat disse ikoner eller om de også skal vises foran undermenuer. Der er mulighed for at opnå mouseover effekt på disse ikoner ved at indsætte 2 billeder. Når siden er valgt vil ikon 2 endvidere blive vist, så det bliver nemmere at se hvilken side der er aktiv. 40

42 Figur 49: Opsætning af sidemenu Justering af tekster og farver i sidemenu Når den generelle opsætning af sidemenuen er på plads kan tekster og farver justeres for de 3 menuniveauer. Hovedmenuen kan justeres separat, mens undermenuer (2.- og 3. niveau) justeres sammen. Som det kan ses i figur 42, så har du mulighed for at justere bl.a. farver og skrifttype for menutekst, mouseover menutekst, aktiv menutekst og ramme. En række af de indstillingsmuligheder der er for et menupunkt, f.eks. hovedmenu tekst der er vist i figur 50, drejer sig om tekstens udseende, såsom font, størrelse, format og justering. Disse justeringsmuligheder benyttes mest, mens de øvrige felter i figur 50 er sekundære. Dog kan der vha. rammefelterne (tykkelse, type og farve) sættes ramme omkring teksten. Brug af billeder i sidemenu Hvis du ikke ønsker at benytte tekst som menupunkter i din sidemenu, så kan du i stedet bruge menubilleder/knapper. Du har mulighed for at indsætte billeder på alle niveauer i sidemenuen. Indsættelsen sker i forbindelse med oprettelse/redigering af sider (se figur 5 og 6). I modsætningen til topmenuen er der ikke mulighed for at lave mouseover effekt i sidemenuen. 41

43 Figur 50: Justeringsmuligheder for hovedmenuens tekst 2.4 Opsætning af tekster og design Når du har valgt din skabelon og konfigureret din menu, så er det næste skridt en tilpasning af bl.a. tekstens udseende på hjemmesiden. Under punktet Opsætning af tekster og design kan du ændre udseendet af de forskellige teksttyper m.m. du har mulighed for at anvende på din hjemmeside. Ændringer af f.eks. en tekstfarve vil slå igennem på alle sider på din hjemmeside. Normalt vil du få leveret en hjemmeside, der er klargjort af en webdesigner, hvor grafikken er lagt ind og teksterne er justeret. De forskellige justeringsmuligheder er opdelt i 4 grupper: Generelt, Tekster, Formular og Bokse (se figur 51). Generelt Gruppen indeholder to elementer, Vindue og Indholdsfelt. Disse områder er en del af skabelonen (se forklaring i afsnit 2.2). I Vindue kan du justere udseendet af scrollbaren og hvordan et evt. baggrundsbillede skal vises (hvor skal det placeres? skal det gentages ned ad siden?). I Indholdsfelt kan du bl.a. justere margin, dvs. den afstand der er fra dit indhold til kanten af indholdsfeltet. I figur 52 ses det at der indtastet værdier i felterne for både højre-, venstre-, top- og bundmargin. Der er også mulighed for at bestemme udseendet af en evt. ramme. Derudover kan du ligesom i Vindue justere hvordan et evt. baggrundsbillede skal vises. Tekster Gruppen indeholder de forskellige teksttyper, der er tilgængelig i EasyPage. Det drejer sig om Overskrift 1, Overskrift 2, Overskrift 3, Brødtekst1, Brødtekst 2, Link og Link-mouseover. Derudover er der også mulighed for at justere udseendet af skillelinjer samt tabeller. Sidstnævnte er dog kun de tabeller der bruges i opbygningen af den grundlæggende struktur på en side (se afsnit ). Tabeller indsat i HTML-editoren ændrer ikke udseende på grundlag af de værdier du sætter her. Vil du læse mere om tabelredigeringsredskabet i HTML- 42

44 editoren, så se øvelse C i afsnit Formular Gruppen indeholder de elementer du har mulighed for at benytte på en kontaktside. Du har de samme justeringsmuligheder som vist i figur 53. Bokse Gruppen indeholder de dele som f.eks. en nyhedsboks er opbygget af. En nyhedsboks kan f.eks. indsættes på forsiden af din hjemmeside og indeholde de seneste nyheder. Det er kun nødvendigt at redigere disse elementer, hvis du har købt tillægsmodulerne Nyheder og Kalender. Figur 51: Opsætning af tekster og design 43

45 Figur 52: Justeringsmuligheder i indholdsfelt En række af de felter du ser i figur 53, der viser justeringsmulighederne for teksttypen Overskrift 1, bruges ikke særlig ofte. Normalt er det kun nødvendigt at udfylde felterne, Tekst font, Tekststørrelse, Tekstformat og Tekstfarve. Derudover kan du evt. få brug at ændre linjehøjden, der er det sidste felt. Husk at klikke på når du har fuldført dine ændringer. Figur 53: Justeringsmuligheder for teksttypen Overskrift 1 44

46 2.5 Website info Når din hjemmeside er færdig vil du sikkert gerne have nogle besøg på den. Det kan gøres på mange måder, f.eks. gennem almindelig reklame, men på internettet findes også en lang række søgemaskiner (søgerobotter, der er i stand til at finde og indeksere indholdet på websider), du enten kan tilmelde dig til eller som automatisk finder din hjemmeside. Når en søgemaskine, f.eks. Google, skal finde din hjemmeside, kan det ske på flere forskellige måder. Den kan f.eks. finde søgeord på en bestemt side på din hjemmeside og den kan søge i titelfeltet på din hjemmeside. Titelfeltet, der er teksten i den øverste del af browservindet, er vigtig for søgemaskinen og kan derfor redigeres (se figur 54). Normalt bruges et firmanavn eller lignende, men det kan ofte være en fordel, hvis du måske benytter et firmanavn og nogle ekstra ord, der beskriver hvad din hjemmeside indeholder. Figur 54: Website info Når hjemmesiden er fundet af søgemaskinen kan det være en god ide at have nogle skjulte koder på din hjemmeside, de såkaldte metakoder (se figur 55). Disse koder blev førhen betragtet som en hurtig og sikker genvej til at opnå topplaceringer i søgemaskiner, men de tillægges ikke stor betydning længere, da de fleste søgemaskiner er blevet bedre til at søge i det synlige indhold på en hjemmeside. Metakoderne forsyner dog stadig søgemaskinerne med en række informationer om hvad det er for en hjemmeside den har fundet. Når en bruger af f.eks. Google indtaster et søgeord, så kan resultaterne blive vist sammen med en lille beskrivelse af den fundne hjemmeside. I figur 56 har vi brugt Google og søgt på ordet easypage. Den fandt 13 sider, hvor ordet på en eller anden måde optræder. Øverst ses hvor titel og beskrivelse er brugt i søgeresultatet. 45

47 Figur 55: Metakoder Figur 56: Søgemaskinen Google har fundet ordet easypage 46

48 3.0 Arkiv I arkivet, der er et fast modul i EasyPage, kan du gemme de filer (f.eks. billeder, word-dokumenter, og excel-ark) og eksterne links samt -adresser, som du vil benytte på din hjemmeside. Du kan opnå adgang til dit arkiv på to måder, enten ved at klikke på fanebladet Arkiv eller når du er i gang med at lave en side (se evt. afsnit ). I figur 57 er arkivet åbnet og du kan se de 4 grupper i arkivet, der er Billeder, Filer/Dokumenter, Eksterne links og links. Hvis du åbner arkivet ved hjælp af knappen i HTML-editoren, så vil du desuden kunne se gruppen Interne Links, der er alle de sider du har oprettet. Figur 57: Arkiv-modulet i EasyPage 3.1 Billeder Når du klikker på Billeder i topmenuen får du til venstre en oversigt over de billedgrupper, du har oprettet i EasyPage. Du kan oprette et ubegrænset antal grupper og det anbefales derfor at oprette en gruppe for hver side, der skal være billeder på. I figur 58 er billedarkivet åbnet og der er klikket på gruppen Foto. Til højre i skærmbilledet ses de billeder der tilhører den valgte gruppe. Hvert billede har sit eget arkivkort, hvor der udover en lille udgave af billedet findes nogle oplysninger om billedet, såsom navn, format, størrelse og den dato det er uploadet til EasyPageserveren. Du kan se billedet i normal størrelse ved at klikke på den lille lup i højre hjørne. Du kan også flytte billedet til en anden gruppe hvis du ønsker det. Vælg den gruppe du vil flytte billedet til i rullemenuen nederst på arkivkortet. Du sletter et billede ved at klikke på. Ønsker du foretage en 47

49 større oprydning og slette en billedgruppe, så skal du klikke på arkivkort. i højre hjørne over eventuelle Figur 58: Billedarkiv Du opretter en ny gruppe ved at klikke på. Giv gruppen et navn og klik på. Derefter oprettes gruppen og den kan ses i menuen til venstre. Når du skal uploade et billede til din hjemmeside, så skal du klikke på. Du for derefter mulighed for at vælge det billede på din computer (se figur 59), der skal overføres til dit EasyPage-arkiv. Du skal også give det en kort beskrivelse. Vær opmærksom på, at det billede du vil uploade er en af de typer, der er vist i upload-formularen og at det ikke overstiger den maksimale størrelse der er angivet. Hvis billedet er i jpeg-format, så kan du foretage en skalering af billedet. Denne funktion kan anvendes, hvis du f.eks. har taget nogle billeder med et digitalkamera. Disse billeder er normalt meget store og bør ikke anvendes på hjemmesider. Ved at skrive en bredde (antal pixel) i det nederste felt, så vil billedet blive gemt på EasyPage-serveren i den ønskede størrelse. Du skal dog være opmærksom på, at du ikke må overskride den maksimale størrelse, der er angivet øverst i upload-formularen (500 kb). Det anbefales dog at du klargører dine billeder i et billedbehandlingsprogram, f.eks. Paint Shop Pro, eller i de programmer der ofte følger med digitalkameraer. 48

50 Figur 59: Formular til brug ved upload af billede 3.2 Filer/dokumenter Hvis du klikker på Filer/dokumenter i topmenuen får du til venstre en oversigt over de filgrupper du har oprettet i EasyPage. Du kan oprette et ubegrænset antal grupper og det anbefales derfor at oprette grupper efter hvilke filtyper, der skal være i den enkelte gruppe, f.eks. en gruppe til worddokumenter, en gruppe til pdf-filer osv.. I figur 60 er filarkivet åbnet og der er klikket på gruppen diverse filer. Til højre i skærmbilledet ses de filer/dokumenter der tilhører den valgte gruppe. Hver fil har sit eget arkivkort, hvor der kan være et ikon for den enkelte filtype. I arkivkortet findes nogle oplysninger om filen, såsom navn, format, størrelse og den dato det er uploadet til EasyPage-serveren. Du kan åbne/se filen ved at klikke på den lille lup i nederste højre hjørne. Du kan også flytte filen til en anden gruppe, hvis du ønsker det. Vælg den gruppe du vil flytte filen til i rullemenuen nederst på arkivkortet. Du sletter en fil ved at klikke på. Ønsker du foretage en større oprydning og slette en filgruppe, så skal du klikke på i højre hjørne over eventuelle arkivkort. 49

51 Figur 60: Fil/dokument-arkiv Du opretter en ny gruppe ved at klikke på. Giv gruppen et navn og klik på. Derefter oprettes gruppen og den kan ses i menuen til venstre. Når du skal uploade en fil til din hjemmeside skal du klikke på. Du får derefter mulighed for at vælge den fil på din computer (se figur 61), der skal overføres til dit EasyPage-arkiv. Du skal også give det en kort beskrivelse. Vær opmærksom på at din fil er en af de typer der er vist i upload-formularen og at den ikke overstiger den maksimale størrelse der er angivet. Checkboksen nederst i formularen er som standard sat til, hvilket betyder, at du automatisk overskriver en fil med samme navn som den du er i gang med at uploade. Hvis du fjerner markeringen, så vil du blive advaret og der vil ikke ske en overskrivning af en eksisterende fil i dit arkiv. Figur 61: Formular til brug ved upload af fil/dokument 50

52 3.3 Eksterne links Hvis du klikker på Eksterne links i topmenuen får du til venstre en oversigt over de linkgrupper du har oprettet i EasyPage. I figur 62 er linksarkivet åbnet og der er klikket på gruppen Mine favorit links. Til højre i skærmbilledet ses links, der tilhører den valgte gruppe. Hvert link har sit eget arkivkort, hvori der er nogle oplysninger om linket, såsom navn, adresse og den dato det er oprettet/opdateret. Du kan flytte linket til en anden gruppe, hvis du ønsker det. Vælg den gruppe du vil flytte linket til i rullemenuen nederst på arkivkortet. Du sletter et link ved at klikke på. Ønsker du foretage en større oprydning og slette en linkgruppe, så skal du klikke på i højre hjørne over eventuelle arkivkort. Du har mulighed for at redigere linket ved at klikke på. Figur 62: Arkiv med eksterne links Du opretter en ny gruppe ved at klikke på. Giv gruppen et navn og klik på. Derefter oprettes gruppen og den kan ses i menuen til venstre. Når du skal oprette et nyt link, så skal du klikke på. I formularen (se figur 63), skal du skrive adressen på linket (f.eks. og give det en kort beskrivelse. Du skal også vælge hvordan det skal åbnes når brugeren klikker på linket på din hjemmeside i samme vindue som linket er i eller i et nyt vindue. Figur 63: Formular til brug ved oprettelse af eksterne links 3.4 links Hvis du klikker på links i topmenuen får du til venstre en oversigt over de grupper med 51

53 -adresser du har oprettet i EasyPage. I figur 64 er -arkivet åbnet og der er klikket på gruppen Firma adresser. Til højre i skærmbilledet ses de -adresser, der tilhører den valgte gruppe. Hvert adresse har sit eget arkivkort, hvori der er nogle oplysninger om adressen, såsom navn, adresse og den dato det er oprettet/opdateret. Du kan flytte adressen til en anden gruppe, hvis du ønsker det. Vælg den gruppe du vil flytte adressen til i rullemenuen nederst på arkivkortet. Du sletter en adresse ved at klikke på. Ønsker du foretage en større oprydning og slette en gruppe med adresser, så skal du klikke på i højre hjørne over eventuelle arkivkort. Du har mulighed for at redigere adressen ved at klikke på. Figur 64: Arkiv med -adresser Du opretter en ny gruppe ved at klikke på. Giv gruppen et navn og klik på. Derefter oprettes gruppen og den kan ses i menuen til venstre. Når du skal oprette et nyt link skal du klikke på. I formularen (se figur 65), skal du skrive -adressen (f.eks. [email protected]) og give det en kort beskrivelse. Figur 65: Formular til brug ved oprettelse af -adresser 52

54 4.0 Statistik EasyPage leveres også med et statistik modul. Du får adgang til det ved at klikke på fanebladet Statistik i administration og derefter klikke du på Vis statistik. I statistikken kan du bl.a. se antallet af besøg på din hjemmeside samt en række andre informationer som kort vil blive forklaret i dette kapitel. Statistik programmet laver hver nat en række rapporter om besøgene på hjemmesiden udfra logfilerne på EasyPage-serveren. Der laves årlig, månedlig, daglig og time rapporter. Den månedlige rapport indeholder forskellige informationer om det totale antal af besøg, antal besøg pr. dag og time, hvem der besøger din hjemmeside og evt. hvordan de er kommet til din hjemmeside (via hvilket link). Forklaring til indholdet i dine statistik rapporter: Forespørgsler (hits): Hver forespørgsel til din hjemmeside bliver logget og betegnes som et hit. Forespørgslen kan derfor blive alt hvad en enkelt side på din hjemmeside indeholder, f.eks. billeder, flashanimationer, video, javascripts, style sheets. Disse informationer kan normalt ikke bruges til særlig meget, men du kan f.eks. finde ud af hvor mange gange et bestemt pdf-dokument er blevet hentet fra din hjemmeside. Filer: I modsætning til forespørgsler, der kan betegnes som indkomne forespørgsler, så kan filer betegnes som udgående svar, dvs. det serveren sender til brugeren. Sider: Sider er de sider der rent faktisk bliver sendt til brugerne, når de har lavet en forespørgsel. I modsætning til hits, så inkluderer en side ikke evt. billeder og andre elementer på den. Adresser: Adresser indeholder www-adresser til alle de filer (ekskl. billeder), der indgår i en forespørgsel. Disse informationer er nok kun interessante, hvis du f.eks. vil se hvor mange gange et bestemt pdf-dokument er blevet downloadet fra din hjemmeside. Det gør du ved at finde filen i listen og aflæse antallet af forespørgsler. Gæster: Hver anmodning til serveren kommer fra et unikt sted, hvilket i nogle tilfælde kan opløses i et navn (domæne) ellers vises det som en IP-adresse. Antallet af gæster viser hvor mange IP-adresser, der har lavet forespørgsler til serveren. Det er dog ikke det samme som antallet af unikke brugere der har besøgt hjemmesiden, da dette er umuligt at bestemme kun ved brug af log-filer og HTTP-protokollen (men det er nok det tætteste på du kan komme). Besøg: Hver gang der laves en forespørgsel til serveren fra en given IP-adresse vil tiden fra en evt. tidligere forespørgsel blive beregnet. Hvis tidsforskellen er større end 30 minutter eller hvis der ikke har været en tidligere forespørgsel, så vil forespørgslen betegnes som et nyt besøg. Hvis brugeren besøger hjemmesiden kl. 13 og igen kigger forbi kl. 16, så vil det betyde 2 besøg. kb (kilo bytes): kb er den datamængde, der er blevet sendt fra serveren i den givne rapportperiode. 53

55 Henvisende sider Hvis en besøgende har klikket på et link på en eller anden hjemmeside for at komme frem til din hjemmeside, så vil det fremgå i listen over henvisende sider. Den vil indeholde adresser til de sider hvor linket til din hjemmeside findes. Browser Indeholder en oversigt over de internetbrowsere som dine gæster benytter. Lande Her kan du se fra hvilke lande dine gæster kommer fra. 54