Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: http://www.itu.dk/people/khhp/hotel_holidays/velkommen.html Øvelsen består af 9 trin: 1. Definér et nyt website 2. Opret ny HTML-side 3. Style layout med CSS 4. Tilføj header-billede 5. Opret CSS-Menu 6. Tilføj indhold til din side 7. Opret template 8. Validér site 9. Upload site 1
Trin 1 Definér et nyt website 1. Åbn Dreamweaver CS3 2. Definer en ny side [Site > New Site]. Klik herefter på fanebladet Advanced. Hvis du benytter ITU s maskiner, så læs 2a. Hvis du benytter egen computer, så læs 2b a. ITU s computere Under Local Info angiver du hvad din side skal hedde, og hvor dine filer skal gemmes på computeren. Site name Navnet på dit website. Kald den evt. Hotel Holiday. Local Root folder Klik på det gule mappe-ikon, og opret herefter mappen hotel_holiday under din public_html-mappe. Klik dig ind på den nye mappe, og vælg Select Default Image folder Hvor alle billeder placeres. Klik på det gule mappe-ikon, og opret en mappe kaldet images inde i mappen hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Når du er færdig klikker du på OK. 2
b. Egen computer Under Local Info angiver du hvad din side skal hedde, og hvor dine filer skal gemmes på computeren. Site name Navnet på dit website. Kald den evt. Hotel Holiday. Local Root folder Her angiver du websites lokale placering. Klik på det gule mappe-ikon, og opret en mappe kaldet hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Default Image folder Hvor alle billeder placeres. Klik på det gule mappe-ikon, og opret en mappe kaldet images inde i mappen hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Dreamweaver giver også mulighed for at uploade dine filer til din public_html mappe på ITU s server. Klik på Remote Info. Under rullemenuen Access vælger du FTP. Du skal nu udfylde felterne med følgende værdier: FTP Host: ftp.itu.dk Host Directory: public_html/hotel_holidays/ (NB: FTP-funktionen i DW kan ikke oprette mapper. Du skal derfor selv oprette mappen hotel_holidays under din public_html-mappe først. Du kan evt. gøre det ved hjælp af en SSH-klient.) Login: Dit ITU-brugernavn Password: Dit ITU-password Tryk evt. på knappen Test for at se om du kan få forbindelse til serveren. Klik herefter på OK. 3
Trin 2 Opret ny HTML-side 1. Klik på [File > New] 2. En dialogboks åbnes. Vælg HTML under Page Type og <none> under Layout. DocType Skal være XHTML 1.0 Strict. Klik herefter på Create. NB: Hvis du ikke benytter Dreamweaver CS3, men derimod en ældre version, så skal du sørge for at copy-paste dette ind øverst i din html-fil ligefør dit <head>-tag.: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 3. Gem siden som index.html [File > Save as ] 4. Klik på Split-view, så du både kan se html-koden øverst og designet nederst. Under Title skriver du Hotel Holiday. Læg mærke til at DW har auto-genereret noget html-kode for dig, og du behøves derfor ikke indtaste eks. title, head- og body-tags. 5. Vi skal nu tilføje en header, en menu, content-område og en footer på siden, og bagefter style dem ved hjælp af CSS. Indtast følgende mellem dine to body-tags, og gem din side: <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="content"></div> <div id="footer"></div> </div> 4
Trin 3 Style layout med CSS Nu skal layoutet styles, så opbygningen kommer til at se ud som nedenstående billede: 1. Først skal body-elementet styles. Under panelet CSS (højre side) skal du klikke på ikonet New CSS Rule. Hvis panelet er skjult, så tryk [shift-f11] 2. I dialogboksen vælges Tag. Da vi skal definere body, skal du finde denne i rullemenuen. Vælg Define in New Style Sheet File, som sørger for at oprette et nyt eksternt stylesheet. Klik OK 5
3. Du bliver nu bedt om at navngive dit stylesheet. Gem det evt. som style.css i roden af dit website. 4. I en ny dialogboks skal vi nu definere css-reglen for body i vores nyoprettede stylesheet. Der er en lang række kategorier at vælge i mellem. a. Klik på kategorien Type og ændr Font til Georgia, Times New Roman, Times, serif b. Klik på kategorien Background, og ændr Background color til #C7B18B. Klik Apply 6
c. Klik på kategorien Block og ændr Text-align til center d. Klik på kategorien Box, og sæt Padding til 20, og Margin til 0, og klik OK e. DW har nu generet CSS-koden i dit stylesheet. Den lille asterisk ved filnavnet betyder at dokumentet endnu ikke er gemt. Tryk på [ctrl-s] for at gemme. Du kan nu se dine ændringer ved at klikke på index.html. 7
f. Nu har du lært hvordan man laver nye CSS-regler, men du kan også indtaste koden manuelt, på samme måde som i notepad. Nu skal vi have stylet de andre elementer i vores dokument. Dobbeltklik på style.css i panelet Files: g. Tilføj nu følgende kode efter din body-selektor: #container { text-align: left; margin: 0px auto; width: 750px; border: 8px solid; border-color: #FFFFFF; #header { margin: 0px auto; height: 145px; border-bottom: 5px solid; border-color: #FFFFFF; #content { padding: 15px; color: #660000; background-color: #F8F3EA; #footer { text-align: center; background-color: #8A0E0B; color:#ffffff; font-size: 9px; p { font-size: 12px; Gem herefter dit stylesheet. 8
Trin 4 Tilføj header-billede Siden ser stadig ret kedelig ud, så nu vil vi tilføje et billede til vores header. 1. Find header.jpg på nedenstående link, og gem den i mappen images, som du oprettede i trin 1. http://www.itu.dk/people/khhp/hotel_holidays/images/ 2. Åbn index.html. Under panelet Files (F8 hvis det ikke er synligt) skal du klikke på fanebladet Assets, og herefter klikke på ikonet Images. Her kan du se header.jpg, som du har lagt i mappen Images. Hvis det ikke er synligt, så klik på det lille refresh-symbol nede i hjørnet. 3. Hold musen inde når du trykker på header.jpg, og træk billedet over i din header, og slip billedet. Tilføj en passende alt-tekst når DW beder om det. I kodevinduet, kan du se at DW automatisk har generet mere HTML-kode for dig. 4. Gem siden, og preview siden i din foretrukne browser. Klik på det lille jordklode-ikon, eller tryk F12 9
Trin 5 - Opret CSS- Menu Hvad er et website uden en menu? Nu skal vi oprette en CSS-menu, som gerne skulle komme til at ligne nedenstående: 1. Først skal vi tilføje lidt kode til index.html. Tilføj følgende kode efter elementet <div id= menu >: <div id="menu"> <ul> <li><a href="#">velkommen</a></li> <li><a href="#">beliggenhed</a></li> <li><a href="#">værelser</a></li> <li><a href="#">priser</a></li> <li><a href="#">reservation</a></li> </ul> </div> TIP: Hvis du synes koden ser lidt rodet ud, så kan du formatere den, så den ser pæn og nydelig ud. Klik på Code-view, og klik på ikonet Format Source Code: 2. Resultatet er en kedelig liste med links, men nu skal vi style den. Klik på style.css, og tilføj følgende kode: #menu { #menu ul { font-size: 11px; text-align: center; padding-bottom: 5px; padding-top: 5px; padding-left: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; background-color: #8A0E0B; color: white; width: 100%; font-family: Arial,Helvetica,sans-serif; line-height: 18px; #menu ul li 10
{ display: inline; padding-left: 0; padding-right: 0; padding-bottom: 5px; padding-top: 5px; #menu ul li a { padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; color: white; text-decoration: none; border-right: 1px solid #fff; #menu ul li a:hover { background-color: #D20000; color: white; #menu #active { border-left: 1px solid #fff; Gem dit stylesheet og preview index.html i en browser. Nu skulle du gerne have en mere spændende menu, som reagerer når du kører musen over menupunkterne. NB: Hvis du benytter en ældre version af Dreamweaver end CS3, så er det ikke sikkert at menuen vises korrekt i den indbyggede preview-browser. Den nye version formår at gengive din side næsten ligeså godt som Firefox, Explorer eller Opera. Preview hellere i en rigtig browser. Så skulle resultatet se fint ud. Hvis du er interesseret i at lære mere om ovenstående css-kode, så er der en kort beskrivelse af hvad de enkelte selektorer på sidste side af denne øvelse. 11
Trin 6 Tilføj indhold til din side Hvad er en side uden indhold? Nu skal der tilføjes en overskrift, tekst og billede. 1. Sørg for at index.html er åbent, og klik i content-området under din nyoprettede menu. Skriv en overskrift og lidt indholdstekst. 2. I Properties-panelet i bunden (Ctrl-F3 for at skjule/vise) har du en masse formateringsmuligheder til din overskrift og tekst. Marker din overskrift og vælg Heading 3 i rullemenuen Format. På samme måde laver du din indholdstekst til en paragraf. 3. Nu skal vi tilføje et billede under overskriften. Måske et billede af en Bellboy der byder velkommen til hotellet. Find billedet velkommen.jpg på nedenstående link, og gem det i din images-mappe: http://www.itu.dk/people/khhp/hotel_holidays/images/ Ligesom i trin 4 skal du klikke på fanebladet Assets i files-panelet, og herefter klikke på ikonet Images. Hvis du ikke ser velkommen.jpg, så klik på refresh-ikonet billedet hen mellem din overskrift og din indholdstekst. nede i hjørnet. Træk 4. Selvom DW ikke er et program til billedredigering, så er der nogle grundlæggende funktioner til at beskære, komprimere, og redigere lysstyrke/kontrast. DW CS3 har også god integration med Photoshop, og det er faktisk nu muligt at copy-paste et billede fra Photoshop direkte ind i DW. Det var ikke muligt i tidligere versioner. Aktiver billedet du lige har placeret, ved at klikke på det. Properties-panelet giver dig nu mulighed for at redigere i billedet. Prøv at beskære billedet, så det ikke fylder så meget: 12
5. Nu skal der lidt indhold i footer. Tilføj hotel-adressen til elementet <div id= footer >. Eksempelvis: <div id="footer">hotel Holidays - Hotelvej 9, 1552 København V - tlf: 87654321</div> 6. Nu har vi oprettet en færdig side. Gem og preview siden i browseren [F12]. 13
Trin 7 Opret template Under dette trin lærer du hvordan du benytter Dreamweavers Template Management funktion. Vi skal nu lave en template/skabelon ud fra vores eksisterende side (index.html). Herefter er det muligt at oprette mange nye sider, som bygger på samme template/skabelon. Fordelene er: Alle sider forbliver konsistente Hvis du vil foretage ændringer der skal have effekt på alle sider, så behøves du kun at rette i din template. Herefter vil alle sider blive opdateret automatisk. 1. Nu skal vi gemme index.html som en template. Klik [File > Save as Template]. I tekstfeltet Save as: skrives skabelon. Klik på Save. DW spørger om du vil opdatere links. Klik Yes. I Files-panelet kan man se, at DW har oprettet mappen Templates, og gemt template som skabelon.dwt (dwt står for Dreamweaver Template). 2. Nu skal vi definerer hvilke områder af skabelonen vi vil gøre redigerbare når vi opretter nye html sider baseret på skabelonen. I dette tilfælde er det vores overskrift, billede og indholdstekst. Sørg for at skabelon.dwt er åben. Det kan være lidt svært at se om man redigerer i sin template, eller en almindelig html-fil. Er du i tvivl, så kast et blik på top-baren, hvor det er angivet med <<Template>> Markér overskriften, men sørg også for at få html-tags ene <h3></h3> med i markeringen. Klik herefter på [Insert > Template Objects > Editable region] eller tryk [Ctrl+Alt+V]. Giv et passende navn til regionen. 14
3. Gør nu også det på billedet og på indholdsteksten. Gem din skabelon 4. Nu er skabelonen oprettet, og vi kan nu lave nye html-sider, som baserer sig på denne denne. Klik på fanebladet Assets under panelet Files. Klik herefter på ikonet Templates. Din nyoprettede template skulle gerne kunne ses i panelet. Hvis ikke, så prøv at klikke på refresh-ikonet hjørnet. Højreklik på din template, og vælg New From Template: nede i 5. Du har nu oprettet et nyt dokument, som baserer sig på skabelonen. Gem det nye dokument og kald det velkommen.html. Der skal oprettes fire sider på samme måde, da vi har fire andre menupunkter. Gentag punkt fire, og gem de andre dokumenter som henholdsvis: beliggenhed.html, vaerelser.html, priser.html og reservation.html. 15
6. Nu skal menuen linke til de tilsvarende html-filer. Åbn skabelon.dwt (Ligger i Templates-mappen). Klik med markøren på teksten Velkommen: I Properties-panelet skal du klikke på sigtekorns-ikonet. Hold knappen nede, mens du trækker musen hen til velkommen.html. Du har nu oprettet første link: Gentag punkt 6 med de resterende fire menupunkter, så de linker til deres respektive sider. Gem din template. Dreamweaver spørger nu om du vil opdatere alle sider, som er baseret på skabelonen. Tryk Update. 7. Alle fem sider har stadig samme indhold, selvom de hedder noget forskelligt. Tilføj en passende overskrift og nyt indhold til siderne. Gem siderne, og preview dem i en browser. Test om menuen linker til alle de sider du har oprettet. TIP Hvis du ikke længere vil basere en side på en template, så kan du detache skabelonen [Modify > Templates > Detach From Template ] 16
Trin 8 Validér site Man kan validere alle sider på én gang. 1. Under Properties-panelet finder du Result-panelet [Tryk på F7]. 2. Klik på fanebladet Validation 3. Klik på den grønne Play-knap og vælg Validate Entire Current Local Site. Fordi vi allerede har angivet den korrekte doc-type, da vi oprettede det første dokument, så finder DW selv ud af at vi validerer efter XHTML 1.0 strict. Hvis dette ikke er tilfældet så klik på Settings. 4. Ret de fejl der eventuelt måtte være. 17
Trin 9 Upload site (NB: Dette trin er ikke nødvendigt, hvis du sidder på ITU s systemer og gemmer direkte til din public_htmlmappe på H-drevet eller til W-drevet) Hvis du sidder på egen computer eller derhjemme, så kan du uploade dine filer. Det forudsætter at du har udført punkt 1B korrekt. 1. Under Files-panelet skal du markere alle de filer du gerne vil uploade (Shift-klik for at vælge flere) 2. Klik herefter på den lyseblå pil (Put Files) 3. Dine filer uploades Sådan, Tillykke! Du har nu oprettet et site i Dreamweaver. Så skulle den ged være barberet. Har du fået blod på tanden til at lære lidt mere om Dreamweaver, så kan du evt. videotutorials ud på Adobes side: http://www.adobe.com/designcenter/video_workshop/ 18
Beskrivelse af selektorene i CSS-menuen #menu Her kan du ændre størrelsen på fonten #menu ul Sørger for at centrere menuen og giver rum mellem de enkelte menupunkter. Her kan du også ændre baggrundsfarven på menupunkterne. Bestemmer også farven på fonten. #menu ul li Sørger for at vise listen horisontalt. #menu ul li a Ingen tekstdekoration ved links #menu ul li a:hover Angiver baggrundsfarven på menupunktet når musen er over den. #menu #active { border-left: 1px solid #fff; Angiver at color skal ændre sig, når der sker en action (Eksempelvis at brugeren trykker på linket.) Der finds mange tutorials om hvordan man laver CSS-menuer. Du kan både lave drop-down-menuer, horisontale og vertikale menuer ved hjælp af CSS. Du kan finde mere inspiration på denne side: http://css.maxdesign.com.au/listamatic/index.htm 19