Lav hjemmesider i StarOffice 6.0

Transkript

1 Appendiks til hæftet StarOffice 6.0 af Palle Bruselius Udgivet på Forlaget Libris 1

2 Copyright 2003 by Palle Bruselius Forside og dtp: Palle Bruselius Dette materiale må ikke gøres til genstand for kommerciel udnyttelse under nogen form. Det er dog tilladt at anvende det i forbindelse med fritidsundervisning. Ønskes materialet benyttet kommercielt, bedes man rette henvendelse til forfatteren på følgende -adresse: palle@pbinteractive.dk Der tages forbehold for fejl og mangler i materialet. Forfatteren kan ikke drages til ansvar for eventuelle fejl og problemer hos brugerne af dette appendiks. Indholdsfortegnelse Lav hjemmesider i StarOffice Begreber ganske kort... 3 Planlæg dit websted... 4 Den første hjemmeside... 4 Redigering af webside... 5 Filformater til web... 7 Webside med fotogalleri... 7 Udgiv websted... 8 Titler af Palle Bruselius på Forlaget Libris Opgavehæfte til PC-kørekort Ved hjælp af disse opgaver bliver du i stand til at gennemføre og bestå de syv tests i PC-kørekort-uddannelsen. Paint Shop Pro 7 Hæftet til verdens mest udbredte billedbehandlingsprogram. Paint Shop Pro har masser af funktioner til brug i forbindelse med billedbehandling og design til web, til tryk og håndtering af digitale fotos. Photoshop Elements Lillebror til Photoshop. Med Photoshop Elements kan du skabe flot webgrafik, justere dine digitale eller indscannede fotos og udforske din kreative side. På vej! På vej! Paint Shop Pro 8 Hæftet om den længe ventede afløser til Paint Shop Pro 7. Endnu flere funktioner, endnu bedre resultater. Version 8 har bestemt været ventetiden værd- StarOffice 6.0 StarOffice 6.0 er den første seriøse konkurrent til Microsoft Office og indeholder både tekstbehandling, regneark, præsentationsprogram, tegneprogram, HTML-editor og meget andet. Dette hæfte dække tekstbehandling, regneark og præsentationsprogram. Web Animation Hæftet om alt, hvad der kan bevæge sig på en webside. Hæftet giver en introduktion til Flash animationer, gif-animationer, RealVideo, Quicktime og meget andet. 2

3 Det kan være forvirrende at skulle tage stilling til, hvilket program man skal anvende til at udforme websider i. Et kig på markedet for den type programmer, viser at der er i massevis af programmer til formålet. Nogle er store, dyre programmer, som for eksempel DreamWeaver MX og FrontPage Andre er en hel del billigere og ofte knapt så proppet med muligheder og funktioner. Blandt billigere, men alligevel funktionsrige programmer finder man det danske Stone s Webwriter, der i øvrigt er fremragende. Ønsker du for eksempel at lave dit eget websted, uden at skulle investere i mere eller mindre dyre programmer, har du imidlertid en oplagt mulighed lige for næsen af dig i form af StarOffice 6.0, der indeholder netop muligheden for at udforme websider. Selv om der ikke er masser af avancerede funktioner til rådighed, kan du uden videre komme i gang med dit eget websted. Udtrykkene hjemmeside, website, webside og så videre kan virke forvirrende. Hjemmeside er det samme som et websted, hvor de engelske udtryk er homepage eller website. En webside er èn ud af mange sider, der kan ligge på et websted. Begreber ganske kort Du vil undervejs støde på nogle begreber og udtryk, det kan være nyttigt at kende. Her følger en gennemgang af de vigtigste. HTML Websider opbygges ved hjælp af programmeringssproget HTML (HyperText Markup Language). HTML er et scriptbaseret sprog, hvilket betyder, at du reelt kan skrive HTML-kode direkte i et tekstredigeringsprogram, for eksempel Notesblok. Det kræver dog, at du har et forholdsvis solidt kendskab til HTML. I StarOffice 6.0 kan du oprette websider uden at kende til HTML overhovedet. Programmet hjælper dig, så at sige, med at generere den nødvendige kode. Det kan på længere sigt være en fordel, at kende til HTML-koder. Det kan for eksempel anbefales at købe et hæfte eller en bog om emnet, hvis du har mod på at sætte dig ind i dette. URL (Uniform Ressource Locator) En URL peger til et bestemt objekt. Et sådant objekt kan være en HTML-side. En URL er en entydig reference til et bestemt dokument på Internet. URL en til forfatterens eget firmas websted er for eksempel Hyperlinks Et hyperlink er en elektronisk henvisning til en URL, som du sendes videre til ved at klikke på hyperlinket. Et hyperlink kan desuden henvise til et bestemt sted i en URL ved hjælp af et bogmærke i den pågældende URL Hyperlinks er nødvendige for, at brugerne af dit websted kan dirigeres rundt på de underliggende websider. WWW (World Wide Web) WWW-protokollen gør det muligt for dig at surfe rundt på Internet. World Wide Web bygger på, at der findes et utal af servere på Internet. WWW består blandt andet af http-protokollen og HTML-sproget. Protokoller Det to mest anvendte protokoller på Internet er http og FTP. HTTP (HyperText Transfer Protocol) er et regelsæt for overførsel af HTML-sider. FTP (File Transfer Protocol) anvendes i forbindelse med upload eller download af filer og programmer på Internet. Protokollen bruger ligesom http også servere. FTP-protokollen anvendes, når du skal overføre dit websted til dit webhotel. HTML-tags ET HTML-tag er en kode, der instruerer browseren om, at teksten på en webside, eller et objekt, skal formateres på en nøje defineret måde. Et tag kan med lidt god vilje sammenlignes med en afsnitstypografi i StarOffice Writer. 3

4 Internet og Intranet Begrebet Internet dækker over et verdensomspændende netværk på måske 150 mill. brugere. Internet anvender primært de to tidligere omtalte protokoller http og ftp. Intranet, forveksles ofte med Internet, da det bygger på de samme protokoller som Internet. Intranet er imidlertid et internt netværk, der typisk er placeret i virksomheders lokale netværkssystemer. Internet-protokollerne er udviklet til et stort og derfor langsomt netværk. Et Intranet vil derimod køre ofte tusind gange hurtigere, da lokalnetværk er af en meget mere overskuelig størrelse. kan være spændende nok. Du skal med andre ord finde en balance mellem den grafik, du vil bruge, og den tid det vil tage den typiske bruger af dit website at hente webstedet ned. Den første hjemmeside Nu skal du prøve at oprette websider ved hjælp af Webside-Autopiloten. 1. Åbn StarOffice Vælg Filer-menuen > Autopilot > Webside. Autopiloten Webside startes. Browser Browsere er programmer, der anvendes til at surfe på Internet. Det mest udbredte er Microsoft Internet Explorer. Blandt de øvrige findes Netscape, Mozilla og Opera. Den sidstnævnte kan varmt anbefales. Planlæg dit websted Inden du går i gang med dit eget websted, skal du gøre dig nogle meget nødvendige overvejelser: Hvad er webstedets formål? Du skal med andre ord præcisere, hvad det er du ønsker at opnå med dit websted. Du skal ligeledes gøre dig klart, hvem målgruppen er. Planlæg webstedets udformning. Dan dig et overblik over, hvad du vil have med på webstedet, og hvordan det skal placeres i forhold til hinanden. Du skal blandt andet overveje, hvor mange websider, der skal være på webstedet. Blandt de øvrige overvejelser, du skal gøre dig, er anvendelsen af fotos og anden grafik. Anvender du meget grafik, vil det tage brugeren længere tid at hente dit websted ned. Er de typiske brugere personer, der bruger en almindelig modemforbindelse, risikerer du, at de ikke ønsker at bruge meget tid (og penge) på at hente dit websted. Grafikfiler kan være meget store, og det tager derfor lang tid at hente dem. På den anden side set, er et rent tekstbaseret websted sjældent indbydende at se på, selv om indholdet naturligvis Autopiloten Webside. 3. I Hvilken skabelon skal anvendes-vinduet kan du vælge mellem en række forskellige forud definerede skabeloner. Hver af disse tjener vidt forskellige formål. I denne øvelse skal du vælge Fast bredde, to kolonner. Klik på denne skabelon i oversigten. Der oprettes mens Autopilot Webside stadig er aktiv en side i baggrunden. Denne side skal du senere redigere. 4. I Hvilken typografi skal anvendes-vinduet skal du vælge en webside-typografi. Denne typografi vil definere skrifttyper, skriftfarver, baggrundsfarve, eventuelle faste grafiske elementer og så videre. Vælg Dyrespor. Igen opdateres arbejdsvinduet. Klik på Udfør-knappen. Den netop oprettede webside vil se sådan ud: 4

5 5. Vælg Filer-menuen Gem som. Indtast følgende i Filnavn-feltet: Index Filen får automatisk filtypen.htm. Da denne side skal anvendes som forside til dit websted er det vigtigt, at du benytter det nævnte filnavn. Når din webside er klar til at blive lagt på Internet, skal forsiden have dette navn. INDEX.HTM er simpelthen indgangsdøren til dit websted. Ellers kan dit websted ikke findes. Læs mere sidst i kapitlet om et websteds struktur. Redigering af webside Den netop oprettede webside indeholder dels to spalter med såkaldt mumletekst, felter med dato og klokkeslæt, en titellinje samt diverse hyperlinks. Du skal i det følgende redigere og tilpasse indholdet på websiden. Som du kan se på websiden, er de forskellige elementer indsat i en tabel. Det er ganske smart at anvende tabeller på websider, da dette giver en øget kontrol over de enkelte elementers placering. Du kan tilføje og fjerne rækker, kolonner og celler fuldstændig som i StarOffice Writer. 1. Markér ordet Titellinje, og overskriv dette med DitNavn s websted 2. De to tekstspalter kan formateres ganske som i et tekstdokument. Bemærk dog, at der i Skrifttype-rullemenuen ikke er angivet en skrifttype, men i stedet et skriftsnit, Sansserif. Dette skyldes, at HTML-sider anvender skrifttyper på en lidt anden måde. Du kan sagtens vælge en hvilken som helst skrifttype, du vil, men det er ikke nogen særlig god idé. Hvis brugerne af dit websted ikke har den samme skrifttype, vil teksten blive vist med en standardskrifttype, hvilket vil bevirke at websiderne slet ikke vil se sådan ud, som du havde tænkt dig. Skrifttyperne Times New Roman, Arial, Verdana og Courier vil som regel altid være at finde på alle computere og kan derfor anvendes uden problemer. Markér teksten i den første spalte, højreklik på det markerede, og vælg Tegn i den genvejsmenu, der åbnes. Vælg skriftfarven Sun1, og klik på OK-knappen. Gentag dette med den anden tekstspalte. Grafiske objekter Websiden indeholder ikke grafiske objekter endnu. Alle browsere kan uden videre håndtere og vise grafikfiler i formaterne gif, jpg og png. Gif kan maksimalt indeholde 256 farver, hvilket gør formatet velegnet til grafikfiler med store farveflader og få detaljer, mens det er direkte uegnet til detaljerede fotos. Jpg-formatet er derimod specielt beregnet til fotos og anden detaljerig grafik. Png-formatet kan til gengæld håndtere begge dele, men formatet er endnu ikke så udbredt endnu og understøttes ikke af alle browsere. Du skal nu prøve at indsætte grafik på websiden. 1. Klik øverste på siden i rummet lige over titlen. 2. Dobbeltklik på Gallery-knappen. Gallery åbnes nu. Åbn Flag-kategorien, og find det danske flag. Højreklik på flaget, og vælg Tilføj > Kæde i den genvejsmenu, der åbnes. Skalér grafikken, så flaget i højden kun fylder nogenlunde lige så meget som titelteksten. 3. Baggrunden på siden er hvid. Du skal nu indsætte baggrundsgrafik, der fylder hele siden ud. Højreklik på siden uden for tabellen. Vælg Side i den genvejsmenu, der åbnes. Sidetypografi: HTML-dialogboksen åbnes. Klik på Baggrund-fanen, og klik derefter på Gennemse-knappen. Søg grafikdialogboksen åbnes. Find, og markér SAND- LIGHT.JPG, og klik på Åbn-knappen. 5

6 Nu er du tilbage i Sidetypografi: HTML-diaogboksen. Klik på Side om side-alternativknappen, hvis den ikke allerede er aktiv. Det valgte baggrundsbillede fylder ikke ret meget på skærmen, og Side om side-funktionen sørger for at billedet gentages, så hele skærmen bliver fyldt ud med et ensartet mønster. Klik på OK-knappen. 7. Vælg henholdsvis Fast bredde, én kolonne og Dyrespor i Hvilken skabelon skal anvendes og Hvilken typografi skal anvendesvinduerne. Klik på Udfør-knappen. 8. Formatér siden, så den får samme udseende som INDEX.HTM. Du skal dog ikke indsætte det danske flag. Indsæt samme baggrundsgrafik. Gem siden som Rapport.htm 9. Skift til INDEX.HTM. Du skal nu oprette et hyperlink til RAPPORT.HTM. Markér teksten Side 2. Vælg Sæt ind-menuen >Hyperlink. Hyperlink-dialogboksen åbnes. Nu ser websiden sådan ud. 4. Nu blev baggrundsgrafikken sat ind på hele websiden. Baggrunden i de to tekstspalter er dog stadig hvid. Det skyldes, at de pågældende celler i tabellen teksten er formateret med hvid baggrund. Du kan ændre dette ved at formatere cellernes baggrund med samme baggrundsbillede. I denne øvelse skal du dog ikke ændre på dette. Teksten står fint og skarpt adskilte fra resten af websidens indhold. Derimod skal du ændre formateringen af de tre foreløbigt ubenyttede hyperlinks Side 2, Side 3 og Side 5. Markér disse, og formater dem med Fed. Et websted bliver først rigtig interessant, hvis der er flere underliggende websider med forskelligt indhold. Som du kan se på den åbne webside, er der allerede taget højde for dette, i kraft af de tre inaktive tekstelementer Side 2, Side 3 og Side Du skal nu oprette en webside mere. Denne webside skal være benyttes som Side Vælg Filer-menuen > Autopilot > HTMLdokument. Autopiloten Webside åbnes. Hyperlink-dialogboksen. 10. Klik på Dokument-ikonet i vinduet til venstre. Klik på Åbn fil-knappen, og find RAP- PORT.HTM i den mappe, hvor du gemte filen. Markér filen, og klik på Åbn-knappen. Erstat teksten i Tekst-feltet med: Rapporter Denne tekst vil erstatte Side 2-teksten på INDEX.HTM. Indtast følgende tekst i Navnfeltet: Rapport Denne tekst vil blive anvendt som den titel, der vises, når siden åbnes i en browser. Klik på Anvend-knappen, og klik på Luk-knappen. Hyperlinket er nu indsat. Gem INDEX.HTM igen. 11. Nu er du klar til at afprøve hyperlinket. Vælg Vis-menuen > Fuld skærm. Nu vises INDEX.HTM på hele skærmen. Klik på Rapporter-hyperlinket. RAPPORTER.HTM åbnes nu i din standardbrowser. Luk browseren igen. Du skal til sidst prøve at oprette en webside med et fotogalleri. Inden vi går i gang med det, følger først en kort introduktion til web-egnede filformater. 6

7 Filformater til web CompuServe Graphics Interchange Filtypeforkortelse: gif Dette format er udviklet til netbrug. Det er et 8 bits grafikformat, der maksimalt kan indeholde 256 farver. Det gør det temmelig uegnet til at gengive fotos eller meget detaljerede illustrationer med. Derimod er det velegnet til grafik, der kun bruger få farver. Alle Web-browsere understøtter gif. Udviklet af: CompuServe JPEG - Jfif Compliant Filtypeforkortelse: jpg, jpeg Dette format, der kan indeholde op til 16,7 millioner farver bruges hovedsageligt på Internet samt til store billeder der skal komprimeres. Filformatet hedder egentlig JPEG og er skabt af Joint Photographic Experts Group. Formatet er skabt ud fra et ønske om at kunne anvende et filformat, der kan indeholde millioner af farver i billederne, og som alligevel ikke fylder ret meget. Jpg-formatet anvender kompression for at få billedet til at fylde mindre. Kompressionen kan indstilles til at være mere eller mindre kraftig. Jo kraftigere du komprimerer et billede, jo mindre bliver filstørrelsen. Prisen for dette kan imidlertid være temmelig høj. Når du komprimerer et billede, betyder det samtidig et kvalitetstab. Skal filstørrelsen reduceres, betyder det at der skal smides informationer om billeddetaljer ud. Formlen er groft sagt: færre kilobyte = færre detaljer. Det er dog ikke altid, at selv en kraftig komprimering bliver specielt synlig; det afhænger i noget omfang også af billedets art. Jpgformatet egner sig bedst til fotos og kompliceret grafik med mange farver. Png-formatet er beregnet som afløser for gifformatet, og er også en seriøs konkurrent til jpg. Det kan oven i købet arbejde med langt flere farver end gif. Png er en forkortelse af Portable Network Graphics. Formatet er ikke slået endeligt igennem, selv om flere og flere anvender det. En anden årsag er måske, at gif-formatet har bidt sig godt fast hos udviklere af websites. Png-formatet kan håndtere 24-bit grafik såvel som 8-bit grafik, mens gif kun kan håndtere 8-bit grafik. Formatet giver mulighed for både interlace og transparent farve. Png-formatet understøttes kun af version 4.0-browsere (både Netscape Navigator og Microsoft Internet Explorer) eller senere versioner. Du bør derfor overveje, om formatet vil volde problemer i forhold til målgruppen for din webside. Udviklet af: PNG Working Group Webside med fotogalleri Du kan oprette en webside med fotogalleri ved hjælp af Autopiloten, eller du kan lave websiden manuelt. Det sidste er en smule mere kompliceret, men i den sidste ende langt mere fleksibelt. 1. Opret et nyt, tomt html-dokument ved hjælp af autopiloten. Vælg skabelonen Tom og layoutet Dyrespor. Herefter er resten af arbejdet manuelt. 2. Indsæt overskriften FOTOGALLERI 3. Formatér overskriften med OVERSKRIFT2- tegntypografien. Lav et linjeskift. 4. Indsæt en tabel på 4 x 4 celler. 5. Markér tabellen, og højreklik på denne. Vælg Tabel i genvejsmenuen. På tabelfanen skal du aktivere Venstre i Justering-feltet. 6. I Bredde-feltet sætter du værdien til 16. Den kunne se sådan ud: Udviklet af: Joint Photographers Experts Group. Portable Network Graphics Filtypeforkortelse: png 7. Indsæt nu billederne fra mappen THUMB- NAILS i øvelsesfilerne i kolonne 1 og I kolonne 2 og 4 indsættes relevante billedtekster. Formatér billedteksten med Standard-tegntypografien. 7

8 9. Gem siden som FOTOGALLERI. Filtypen webside (det vil sige html) er automatisk aktiv. navngivning af siderne. Filnavnene må dog blot ikke indeholde danske tegn, altså æ, ø og å. Nu er fotogalleriet sådan set klart til brug. Som du har bemærket er billederne ret små, og derfor går mange detaljer tabt. Du kan derfor vælge at udvide med en række ekstra sider en for hvert billede i galleriet hvor billederne fremtræder i fuld størrelse. De billeder du netop har sat ind fra THUMBNAILS-mappen er små filer, det vil sige billederne netop beregnet til at blive vist som små appetitvækkere. Ved at forsyne hvert af de små thumbnails med et hyperlink til en side, hvor den store version af billedet vises, giver du brugeren muligheden for at betragte dine billeder i en langt mere seværdig størrelse. 10. Opret en tom side. 11. Indsæt billedet ROSE.JPG på siden. 12. Gem siden som Rose. Filtypen webside (det vil sige html) er automatisk aktiv. Filnavnet bliver derfor ROSE.HTML. 13. Gå tilbage til FOTOGALLERI.HTML. Markér billedet Rose.jpg i tabellen. 14. Vælg Sæt ind-menuen > Hyperlink. Hyperlink-menuen åbnes. Klik på Mappe-ikonet til højre for Sti-feltet. I Åbn-dialogboksen skal du finde og markere den side hyperlinket skal henvise til, nemlig ROSE.HTML. Klik på Anvend-knappen og derefter på Luk-knappen. 15. Nu kan du afprøve om hyperlinket virker. Placér markøren over ROSE.JPG-billedet på FOTOGALLERI-websiden. Markøren skifter udseende til en hånd. Klik på billedet. Din standardbrowser (for eksempel Internet Explorer) åbner nu, og åbner samtidig ROSE.HTM. Bemærk, at hvis dit fotogalleri skal være den primære del af dit websted, og FOTOGALLERI-.HTML derfor skal være første side på webstedet, skal du omdøbe filen til for eksempel INDEX-.HTML eller INDEX.HTM. Din Internet-udbyder eller dit webhotel har fastsat regler for dette. Kontrollér derfor den korrekte navngivning med dem. Skal dit fotogalleri blot være en underliggende del af dit websted, er der ingen specielle krav til Et eksempel på et fotogalleri. Udgiv websted For at udgive et websted, så det bliver tilgængeligt på Internet, kræver det at følgende betingelser er opfyldt: Du har adgang til Internet. Du har enten hos din Internet-udbyder eller et andet firma et webhotel, det vil sige lagerplads på udbyderens server til netop dit websted. Det kan enten være på den webadresse, du fik tildelt hos din Internet-udbyder eller eventuelt et selvstændigt domæne, du har købt. Øvelsesfilerne til hæftet Star- Office 6.0 ligger, ligesom øvelsesfilerne til andre af mine hæfter, på et af mine to domæner: pbinteractive.dk og bruselius.dk. Et program, der kan overføre (uploade) dit websted til webhotellet. Dette program et såkaldt FTP-program kan for eksempel være CuteFTP eller WS-FTP LE. Begge er gratis, om end du også kan købe mere funktionsrige versioner af programmerne. Brugernavn og adgangskode som angivet af din Internet-udbyder. 8