Dreamweaver CS5. Trin 2. af Hasse Sørensen for MicroWorld-NetCom Kursus

Transkript

1 Dreamweaver CS5 Trin 2 af Hasse Sørensen for MicroWorld-NetCom Kursus

2 Dreamweaver CS5 Dreamweaver CS5 trin 2 Tekst og design: Hasse Sørensen, Nordisk Grafik Udgiver og ophavsretsholder: MicroWorld-NetCom Kursus Copyright 2011 Nordisk Grafik og NetCom. Alle rettigheder forbeholdes. Kopiering og gengivelse af enhver art er strengt forbudt. Adobe, Dreamweaver, Photoshop, Bridge, InDesign, Flash og Illustrator er registrerede varemærker tilhørende Adobe. Den juridiske ophavsretsholder af HTML-sproget er World Wide Web Consortium (W3C). 2

3 Dreamweaver CS5 Indhold Indhold Internettet...4 Mini leksikon...5 Så langt, så godt Spry menu...8 Tilpas Spry Menu...9 Skaleret baggrund...11 Brug Div som lag...12 Del siden med Snippets...14 Bridge billedgallerier...15 IFrame...16 Visual Lightbox...17 Mobilt website...18 Synk ede mobilsider...19 SEO Fremtidens koder...21 HTML5... font Tekst i spalter Rotation Afrundede hjørner RGB-farver og gennemsigtighed Skygger Farveforløb Baggrund PHP CMS BrowserLab Content Management Egne noter /* Godt Design */

4 Dreamweaver CS5 Internettet Internettet Internettet blev opfundet i begyndelsen af marts 1989, hos CERN i Schweiz, af IT-medarbejderen Tim Berners-Lee. Den første internetserver var en NEXT Cube med 64 Mb RAM, 256 Mb harddisk og en label med påskriften DO NOT POWER DOWN!!! Tim har siden initieret oprettelsen af internetkonsortiet W3C, som holder styr på nye protokoller og kodesprog til internettet, og forsøger at opdrage på både browserudviklere og webdesignere. Se evt w3.org for mere information. Opfindelsen af internettet består i et kodesprog til websites (HTML), en protokol til transport af filer (FTP) og en protokol til at hente websider (HTTP) til at læse i en browser. hvis HTML, FTP, HTTP og browser er sort snak kan du læse om dem i afsnittet Mini leksikon. Internettet fungerer på dén måde at filer lægges tilgængelige på en server, der igen er forbundet med et edderkoppespind med alle de andre internetservere. Når en person på Langeland henter en webside i Bangkok går datastrømmen igennem servere i lande, bla. Pakistan. Skulle alle Pakistans servere blive afbrudt, går datastrømmen igennem servere i Tibet, Kirgisistan og Rusland i stedet. Siden de første websites er internettet blevet fodret med mange nye teknologier, for at gøre oplevelsen mere interessant; CSS, JavaScript, Flash, søgemaskiner og kreditkortbetaling. mange af disse opfindelser blev oprindeligt gjort til ære for pornosites (se minileksikon). Tim Berners-Lee Den første internet-server 4

5 Dreamweaver CS5 Mini leksikon Mini leksikon Browser Et program der kan læse HTML, fx Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera m.fl. Cache Når en computer eller internetserver opbevarer en mængde websider sådan at de kan vises hurtigere, end hvis de skal hentes direkte fra serveren hver gang. Smart til 128kb/s modem er til kr. 11,25 i minuttet, men et helvede i forhold til opdatering af websider. CMS Content Management System, et website bygget op omkring én skabelon-side, og hvor både menu, tekst og billeder hentes i en database. Dette gør det muligt at redigere, opdatere og interagere med websitet direkte i browseren. De fleste større virksomheders website er et CMS-site, for let opdatering, imens Facebook og hotels.com også er CMS-sites for let interaktion. CSS Cascading Style Sheet, Det kodesprog der bruges til at styre designet på et website. CSS kan være én lay-out fil der styrer hele websitet, eller koden kan være placeret i toppen af hver enkelt side. Domæne Et domæne er en webadresse, fx Et domæne er delt i et top-level domain (fx.dk ) et domain (fx netcom ) og evt. et sub-domain (fx aarhus i aarhus.netcom.dk ). Top level domains er landedomæner (.dk,.se,.no osv.), typedomæner (fx..com,.org,.gov osv.) og i sjældne tilfælde blandinger (.co.uk,.go.th osv.). Electronic Mail. E-brev. Firewall En brandmur tjener til at forhindre uønsket adgang til en computer eller server. FTP File Transfer Protocol, dén protokol der bruges til at up- og downloade filer mellem en internet server og en computer. Bruges bla. til at placere et website på en internet-server. Hacker En person der skaffer sig uaftoriseret (og ulovlig) adgang til en computer eller server. En hacker kan efterlade sig en virus, en orm, en trojansk hest, spyware eller simpelthen ødelægge eller ændre et website. Hackere kan være tyve, hærværksmænd eller politiske aktivister. Et mål for en politisk hacker kunne være at ændre CIA s website ved at skrive undskyldninger på forsiden, imens et mål for en tyv kunne være at overføre penge fra alle konti i en bank til egen konto. Hjemmeside Et websites første side, index.html. Bruges også i betydningen privat website. HTML Hyper Text Markup Language, det kodesprog der bruges til at udforme websider. HTML findes i forskellige versioner: HTML 1, HTML 2, HTML 3, HTML 4, XHTML (se det) og snart HTML 5. HTTP Hyper Text Transfer Protocol, dén protokol der bruges til at hente websider, så de kan læses i en browser. IP-adresse Internet Protocol; adressen til en computer eller server på internettet. Bruges sjældent til at hente websites, da vi i stedet bruger URL (se det). IP-adresser bruges af bla. politiet til at finde en computer der har været brugt til at hente ulovlig musik eller lægge bombeudskrifter ud på nettet, så det er på tide du holder op... PHP HTML-sider der henter data fra en database, i stedet for at indeholde tekst og billeder. Bruges til dynamiske websites, fx CMS-sites, WikiPedia eller Facebook. 5

6 Dreamweaver CS5 Mini leksikon Pornosite Et website der viser amatørgynækologiske billeder og film. Portal Et website der tjener som en adgangsvej til resten af internettet, fx. eller adx.dk RSS Really Simple Syndication, XML-data (se det) der kan distribueres via websites og RSSlæsere på computere, mobiltelfoner m.m. Bruges oftest til nyheds-resuméer, blog-opdateringer m.m. Server En computer der altid er tændt, som der altid er adgang til, og som bla. kan bruges til at placere et website og s på ( mail-server ). WAP Wireless Application Protocol, internet trafik på mobil-telefon-netværket. Webmail der læses og skrives på et website, fx Gmail eller Hotmail. Webhotel En server-plads man lejer til at placere et website, s m.m. Webshop Et website hvor det er muligt at købe varer, og som regel betale med kreditkort. Webside En enkelt side på et website. Website Et websted, alle sider placeret på én www-adresse. WWW World Wide Web. En beskrivelse af internettet, der oprindeligt tjente til at afgrænse websites fra fx nyhedsgrupper. Nu bruges beskrivelsen ikke længere, da internettet stort set udelukkende består af websites, og www er ikke nødvendigt foran 99% af alle web-adresser. XHTML Extensible HyperText Markup Language En oprydning med en møggreb i det tidligere dårligt strukturerede HTML. Har indbygget mulighed for fællesstrukturering med XML data. XML Extensible Markup Language, en data-struktureringsform der minder om og kan bruges sammen med HTML (XHTML). Bruges bla. til adressebogen på din mobiltelefon og data i nyere Word dokumenter (.docx). URL Uniform Resource Locator, en web-adresse. Begrebet bruges sjældent i Danmark, men i næsten alle andre lande er det almindeligt at finde på fx visitkort; URL: 6

7 Dreamweaver CS5 Så langt, så godt Så langt, så godt... Hvis du var med på Dreamweaver trin 1 har du indtil nu bygget et website som indeholder en flash -top, en statisk menu i siden, en skabelon, og seks sider med forskelligt indhold, bla. en kontaktformular og et indsat kort fra Google Maps. På dette kursus skal vi indsætte en JavaScript (Spry) menu, en skalérbar baggrund, en dele-funktion, snippets og et billedgalleri i en såkaldt Visual Lightbox. Vi skal også kigge på optimering til søgemaskiner og mobil-websites. For dig der ikke var med på det første kursus, og altså har et grundlæggende kendskab til Dreamweaver og HTML ligger sitet klart til at lege med i opgavemappen. du kan sikkert hurtigt gennemskue hvordan det er sat sammen. 7

8 Dreamweaver CS5 Spry menu Spry menu Spry Menu er adobes navn på en JavaScript menu, som vi kender den fra utallige website; en liniær menu, hvor undermenuer popper frem når vi holder musen over et hoved-menu-punkt. Åben Template.dwt Markér teksten i menuen Vælg Insert > Spry > Spry Menu Bar Vi har nu fået en grå standard menu med Item 1 Item 1.1 Item 1.2 Item 1.3 Item 2 Item 3 Item 3.1 Item Item Item 3.2 Item 3.3 Item 4 som viser at vi kan lave menuer, med undermenuer og under-under-menuer. Nu skal vi imidlertid lave vores egne. Slet menuerne i Properties panelet én af gangen ved hjælp af -, men efterlad én uden undermenuer, fx Item 2. Ret nu menuens navn i feltet Text til Forside. Tilføj en ny menu med det lille +, og kald den Åbningstider. Gør det igen-og-igen, indtil du har menuerne: Forside Åbningstider Priser Arrangementer Ledige Stillinger Adresse Vælg Priser og opret tre undermenuer: Drikkevarer Mad Arrangementer Når browseren bliver mindre kommer bag undermenuerne ind under hovedteksten. Derfor rykker vi menuen frem med z-index: 5 i CSS. 8

9 Dreamweaver CS5 Tilpas Spry Menu Tilpas Spry Menu I feltet Link skal vi fortælle menuen hvilke menupunkter der henter hvilke sider. ikke alle sider er blevet til endnu, hvorfor de blot skal lænke til #... Forside = index.html Åbningstider = aabningstider.html Priser = # Priser/Drikkevarer = # Priser/Mad = # Priser/Arrangementer = # Arrangementer = arrangementer.html Ledige stillinger = # Adresse = kontakt.html Når vi gemmer siden og dermed opdaterer alle sider baseret på templaten gemmes automatisk fire filer i assets mappen. Måske skal du opdatere Files panelet for at se dem... De to af dem er små billed-filer, der bruges som pile i menuen. Der er også en JavaScript fil ved navn SpryMenuBar.js, som vi ikke skal pille ved. Den får det hele til at fungere. Til sidst er der en CSS-fil ved navn SpryMenuBarVertical.css. Dén skal vi tilpasse for at ændre farver m.m. Heldigvis er filens kode rigt kommenteret. Find følgende kode i filen: /* Menu items are a light gray block with padding and no text decoration */ ul.menubarvertical a { display: block; cursor: pointer; background-color: #EEE; padding: 0.5em 0.75em; color: #333; text-decoration: none; Vi kan ændre background-color til en anden farve, hvis vi har lyst, eller fjerne farven midlertidigt ved at udkommentere koden: display: block; cursor: pointer; /* background-color: #EEE; */ padding: 0.5em 0.75em; color: #333; text-decoration: none; Vi skal også have ændret tekstfarven: display: block; cursor: pointer; /* background-color: #EEE; */ padding: 0.5em 0.75em; color: #FFF; text-decoration: none; Nu er der kun rammen tilbage, som vi gerne vil af med. Find koden: /* Outermost menu container has borders on all sides */ ul.menubarvertical { border: 1px solid #CCC; Og udkommentér rammen: ul.menubarvertical { /* border: 1px solid #CCC; */ vi udkommenterer i stedet for at slette, sådan at vi altid kan få koden frem igen, og evt. ændre farve, i stedet for at skulle skrive koden igen. Vi kan evt. ændre farven på de små pilebilleder, SpryMenuBarRightHover.gif og SpryMenuBarRight. gif i Photoshop. Spry Menu bar filerne er meget følsomme for ændringer, og mange har ødelagt dem ved at ændre for mange ting på én gang. Derfor er det en god regel at foretage én ændring ad gangen, og teste den. Det er også en god idé at udkommentere i stedet for at slette. En vittig sjæl har skrevet The Ten Commandments for Editing Dreamweaver s Spry Menubars : 1. Thou shalt not edit the style sheet without reading the comments. 2. Thou shalt not edit the styles haphazardly. 3. Verily, rules for some selectors are defined in two locations. 4. Thou shalt not edit the position or display properties within the menubar styles. 5. Thou shalt not use the height property within menubar styles. 6. Thou shalt not apply padding, borders or margins to menubar list items <li>. 7. Thou shalt not set widths for links <a> within menubars. 8. Thou shalt not edit the browser hacks. 9. Thou shalt not edit the menubar JavaScript file. 10. Verily I say unto you, a new style shall appear to define the appearance of submenus. 9

10 Dreamweaver CS5 Tilpas Spry Menu Det eneste problem der nu står tilbage er bredden af vores menu... Find koden /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.menubarvertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.menubarvertical ul { margin: -5% %; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.menubarvertical ul.menubarsubmenuvisible { left: 0; /* Menu item containers are same fixed width as parent */ ul.menubarvertical ul li { width: 8.2em; Bemærk at bredden står i em. Det er m-bredden af font-størrelsen, altså helt bogstaveligt bredden af bogstavet m. Prøv at rette 8 til 9 alle steder der står width. Hvis vi kigger i koden på selve siden (design.dwt) ser vi at menuen i virkeligheden blot er en unordered list, der kalder en funktion. Det betyder at hoved-menuen faktisk stadig ville fungere hvis JavaScriptet manglede, eller den besøgendes computer ikke understøttede JavaScript. omend det ikke er et kønt syn i alle tilfælde... Netcoms website med JavaScript Netcoms website uden JavaScript 10

11 Dreamweaver CS5 Skaleret baggrund Skaleret baggrund Vi har et billede af natklubben der skal ind som baggrund. Man kunne fristes til at sætte billedet som baggrund, enten i CSS ( background:url(media/disco.jpg);) eller i BODY-tag et (background= media/disco.jpg ), men dette er en skidt løsning, da billedet sætter sig ind i sin pixel-størrelse og scroller med... I stedet sætter vi billedet ind i en Div. Denne Div skal tilpasse sig browser-vinduet, så vi indsætter følgende kode i vores CSS: #baggrund { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:-2; Nu er Div en 100% på begge leder, og står helt stille oppe i øverste venstre hjørne, selv når vi scroller. Billedet skal også tilpasse sig inde i Div en, så vi opretter en class til billedet, også i vores CSS:.stretch { width:100%; height:100%; Så mangler vi bare at indsætte Div en med billedet, tilføjet den rigtige class, i koden, lige efter <body>: <div id= baggrund ><img src=../media/disco.jpg class= stretch /></div> Bemærk hvor nemt det er at skrive koden med Code-Hints... Når vi gemmer og tester kan vi se hvor smart det er eller i nogle tilfælde kan være at billedet står stille og tilpasser sig. Det ville være smart hvis menuen også stod stille når vi scroller, så vi finder menuens Div-beskrivelse i CSS en og retter position: absolute: til position: fixed; 11

12 Dreamweaver CS5 Brug Div som lag Brug Div som lag Nu har vi et billede af natklubben som baggrund. Oven på denne baggrund skal vi have en transparent Flash baggrund! Under koden <body> <div id= baggrund ><img src=../media/disco.jpg class= stretch /></div> indsætter vi en ny Div: <div id= flashbaggrund ></div> og en Div-beskrivelse i CSS: #flashbaggrund { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:-1; Placér cursoren i Div en imellem <div id= flashbaggrund > og </div> og vælg Insert > Media > SWF. Indsæt den flash-fil der hedder papirfly.swf fra media mappen, og indstil den i Properties panelet med værdierne: Scale: No Border Wmode: Transparent Class: Stretch så blev siden lidt mere levende... 12

13 Dreamweaver CS5 Del siden med Del siden med... Det ville jo være rart hvis de besøgende på siden ville dele oplevelsen med deres venner på de sociale netværk. derfor kan vi lave et link til Facebook. Og Twitter. Og MySpace. Og LinkedIn. Og Arto. Og Digg. Og Bebo. Og Blogger. Og Boardlite. Og Google. Og... Der findes flere services der kan hjælpe os med det hele på én gang. Vi tager bare én af dem: Add This. Åben et nyt vindue i browseren og gå ind på Vælg knaptype 1, og No, just give me the button, og klik så på Get Your Button. Den side der nu dukker op giver os en kode, som vi helt enkelt vælger og kopierer. I vores Template (design.dwt) skal du nu slette alt imellem <div id= kontakt > og </div>, og i stedet indsætte den kopiere kode. Det bliver også nødvendigt at tilpasse CSS-koden #kontakt { position:fixed; /*background:#000;*/ width:175px; height:30px; left: 10px; bottom: 0px; padding:5px; z-index:4; 13

14 Dreamweaver CS5 Snippets Snippets Vi har jo en template, hvori vi kan placere statisk indhold, altså indhold der skal gå igen på alle sider, og så har vi det individuelle indhold på de enkelte sider. Men hvis vi forestiller os et statisk indhold der skal genbruges på flere forskellige templates (fx et almindeligt website og ét til mobiltelefoner), eller individuelt indhold der skal gengruges på 3-4 sider, men ikke alle, så har vi pludseligt behov for at huske på at ændre det samme indhold flere steder. Derfor kan vi med fordel oprette Snippets. Ved siden af fanen Files i panelerne til højre finder du fanen Assets. Klik på dén, vælg det nederste venstre symbol i fanen ( Library ), og vælg symbolet New nederst i panelet. Nu får du et nyt Library Item, som pt. hedder untitled. Klik på det og kald det adresse. Dobbeltklik nu på det, så det åbner. Åben samtidig siden kontakt.html Klip adressen ud af kontakt.html og sæt den ind i adresse.lbi filen. husk at kopiere fra design view til design view eller code view til code view! Gem nu adresse.lbi filen, og træk den fra Assets panelet ind på den plads hvor adressen skal stå på kontakt-siden. Lbi-filer Library Items indeholder tekst og billeder på samme måde som almindelige htmlfiler, med <H1>, <H2>, <P> osv., men kan trækkes ind på sider med forskellige CSS. Når teksten skal redigeres sker det i Lbi-filen, hvilket betyder at alle steder den er i brug bliver den opdateret. Opret ny snippet (Library Item) Assets panelet kan også bruges til at se og genbruge de billeder, flash-filer m.m. der er i brug på websitet. 14

15 Dreamweaver CS5 Bridge billedgallerier Bridge billedgallerier Ved hjælp af Bridge kan vi oprette flotte billedgallerier. 1. Åben Bridge og find mappen galleri i opgavemappen 2. Markér alle billederne og vælg arbejdsrummet Output 3. Vælg Web Gallery 4. Prøv de forskellige templates, og tryk på Refresh Preview hver gang du har valgt et nyt 5. Når du har valgt en god template, fx Filmstrip, Style > Darkroom, og fjern fluebenet fra Show Title Bar 6. Eksporter galleriet til en en mappe ved navn galleri i mappen media inde i din site-mappe Bridge kan bruges til at få et overblik over dine filer, med et preview, selv af de filer der kun vises som ikoner i stifinderen, fx Illustrator-, InDesign- og Photoshopfiler. I Meta Tags panelet i Bridge kan vi få oplyst hvornår en fil sidst har været åbnet, hvilke Swatches der er brugt i filen (InDesign og Illustrator), hvilken ISO et billede er optaget med, etc. Vi kan omdøbe, flytte, slette og kopiere filer i Bridge. Bridge kan også bruges til en såkaldt Batch Rename, altså at omdøbe en stor mængde filer på én gang. 15

16 Dreamweaver CS5 IFrame IFrame 1. Opret en ny side af din template i Dreamweaver 2. Slet teksten Bla bla bla 3. Imens cursoren står og blinker inde i teksfeltet vælger du Insert > HTML > Frames > IFrame 4. I Code View retter du koden <iframe></iframe> til følgende: <iframe name= iframe frameborder= 0 width= 750 height= 500 scrolling= no src= media/galleri/ index.html ></iframe> 5. Husk at åbne template siden og oprette et link til galleri-siden i menuen! IFrames bruges kort sagt til at skabe et hul i en HTML-side, hvori en anden HTML-side vises. Kortet på Adresse-siden er også indsat i en IFrame, sådan at vi bevarer den fulde funktionalitet fra Google Maps. Hvis man navngiver sin IFrame (fx name= iframe ) og indsætter links på siden med koden target pegende på IFramens navn (fx <a href= target= iframe >Metro</a>) vil den linkede side dukke op inde i IFramen. 16

17 Dreamweaver CS5 Visual Lightbox Visual Lightbox Vi springer lidt let over her, da dette ikke er et JavaScript kursus, men et kursus hvor vi lærer at bruge JavaScripts. husk at tage en kopi af filerne med hjem! I opgavemappen findes en mappe ved navn Visual Lightbox. I dén mappe findes otte billeder, en tekstfil ved navn koder.txt og en mappe ved navn lightbox. lightbox mappen indeholder nogle små billeder, nogle CSS-filer og nogle JavaScript (.js) filer. Vi behøver ikke at pille ved nogen af dem. 1. Hele mappen lightbox flyttes ind i assets mappen i vores site-mappe 2. Billederne flyttes ind i media mappen i vores site-mappe 3. Åben tekst-filen koder.txt, markér al teksten og kopier den (Ctrl + C). Luk bare filen igen 4. Åben nu filen arrangementer.html i Dreamweaver 5. På en ny linie over koden <div id= tekst > indsættes dén kode du kopierede (Ctrl + V). Denne kode henter funktionerne i JavaScript-filerne i dén mappe du kopierede ind i assets -mappen 6. Sæt nu de små billeder ( vlimage01_sm.jpg m.fl.) ind over overskriften i tekst-boksen (under <div id= tekst >) 7. Hvert billede skal være et link til det tilsvarende store billede, med en kode som angiver Class en advanced og beskriver en højde, en bredde og en titel: <a href= media/vlimage01.jpg rel= width:768,height:576 class= advanced title= Cocktails and Dreams ><img src= media/vlimage01_sm.jpg width= 115 height= 86 /></a> (Du kan evt. skrive denne kode én gang, kopiere den tre gange, og rette 01 til 02 i både link og source, osv. En Visual Lightbox er et fremragende alternativ til traditionelle pop-up vinduer, især da mange har en pop-up-stopper i deres browser. Mange lightbox-versioner understøtter billeder, men denne type understøtter også film, flash, Mp3-filer og HTML-sider; prøv at erstatte det sidste link med et website: <a href= rel= width:768,height:576 class= advanced title= Cocktails and Dreams ><img src= media/vlimage01_sm.jpg width= 115 height= 86 /> </a> Visse websites bla. google.com og hotmail.com har et JavaScript der forhinderer at de kan vises i en IFrame eller en Visual Lightbox. Hvis du prøver vil siden tage hele browservinduet. 17

18 Dreamweaver CS5 Mobilt website Mobilt website Det er ikke mange år siden at vi flåede os af grin, når folk talte om websites til mobiltelefoner. Men med den eksplosive udbredelse af smartphones (Android, Symbian 3 og iphone) er der ingen der griner mere. 1. Åben programmet Adobe Device Central 2. klik på Browse i øverste højre hjørne 3. Find Nokia N85, træk den ind i panelet Test Devices og dobbeltklik på den 4. Vælg File > Open URL og tast 5. Du kan nu se et mobilt website i en smartphone Vi skal lave en mobiludgave af vores website, og teste den i Device Central. Der er en vis koncensus for at mobile udgaver af websites ligger i et subdomæne med bogstavet m : bliver i den mobile udgave til ligesom dgs.dk, cph.dk og google.dk Opret en mappe ved navn m 2. Opret en ny fil ved navn mobildesign.html 3. Giv filen følgende CSS: body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFF; body { background-color: #000; margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; a:link { color: #F9F; text-decoration: none; a:visited { text-decoration: none; color: #F9F; a:hover { text-decoration: none; color: #F3C; a:active { text-decoration: none; color: #F3C; h1 { font-size: 18px; h2 { font-size: 14px; 4. Opret en tabel med tre rækker og én kolonne, og bredden 220px 5. Kopier filen mobillogo.jpg fra opgavemappen ind i media -mappen 6. Indsæt billedet i den øverste tabel-celle i mobildesign.html siden 7. I anden celle skriver du i punktopstilling: Forsiden Åbningstider Priser Arrangementer Galleri Ledige stillinger Adresse 8. I tredie celle skriver du Bla bla bla 9. Gem siden som en template ved navn mobildesign.dwt (File > Save as Template...) 10. Markér Bla bla bla og vælg Insert > Template Object > New Editable Region Mobiltelefoner findes i mange størrelser og typer. Mange har enten en Opera Mini browser eller Safari (iphone) der kan vise almindelige websites og zoom e ind og ud på detaljer. En sikker vinder er dog den mest udbredte skærmstørrelse 240 x 320 (minus et par pixels til scrollbar). Hold igen med brugen af JavaScript og AP Div er. Visse mobiltelefoner kan vise Flash, men igen er det en god idé at holde en lav fællesnævner (Action Script 2, Flash Player 8). Hvis dit website er til en lille lukket kreds, og en bestemt type mobiltelefon, kan du finde alle nødvendige informationer i Device Central. 18

19 Dreamweaver CS5 Synk ede mobilsider Synk ede mobilsider 1. Opret en ny side på basis af templaten mobildesign.dwt 2. Gem den som kontakt.html i mappen m 3. Slet teksten Bla bla bla og indsæt adressen fra Assets panelet > Library > adresse 4. Vælg den lille globus i top-panelet og vælg Preview in Device Central 5. Åben den normale index.html side, markér hoved-teksten og klip den ud 6. Opret en ny snippet (Library Item) ved navn index og sæt teksten ind dér 7. Sæt den nye snippet ind i index.html, hvor teksten oprindeligt kom fra 8. Opret en ny side på basis af templaten mobildesign.dwt 9. Gem den som index.html i mappen m 10. Slet teksten Bla bla bla og indsæt også den nye snippet dér 11. Åben templaten mobildesign.dwt 12. Markér Forside og lav et link til index.html i mappen m 13. Markér Adresse og lav et link til kontakt. html i mappen m 14. Nu bliver de to mobil-sider opdateret, men husk at gemme dem, hvis de stadig er åbne 15. Prøv nu et Preview af index.html fra mappen m i Device Central På denne måde kan du lave de øvrige sider, sådan at du til sidst har hele websitet i en normal udgave og en mobil-udgave. Du skal dog ikke forvente at IFrames og Visual Lightbox er en god idé. Der findes mange mobiltelefoner derude, og jo lavere fællesnævner vi retter ind efter, jo flere kan se siden uden problemer 19

20 Dreamweaver CS5 SEO SEO Search Engine Optimization er en større videnskab som vi kun kommer til at berøre helt grundlæggende. I det efterfølgende vil vi primært tage udgangspunkt i da Google står for over 80% af alle søgninger på internettet, og bliver ivrigt kopieret af andre søgetjenester. Google finder alle websites på internettet. Spørgsmålet er hvor højt prioriteret ens website bliver i en søgning. Det er de færreste der ønsker at deres site bliver søgeresultat nummer Den første ting vi skal gøre er at indsætte nogle såkaldte Meta-tags: Description og Keywords. Description er en kortfattet beskrivelse af sitet. Den vises under sitets adresse i Google. Keywords er nøgleord der kan søges. I Head-sectionen indsættes koderne: <meta name= Description content= Limfjordens førende natklub /> <meta name= keywords content= dreams, druk, dans, disco, natklub, musik, arrangementer, mad, cocktails, /> Dette sikrer delvist at det er de rigtige søgeord der hjælper sitet til at blive vist i Google. Men Google søger også i <h1> - <h6> tag s, i sidens <title>, i billedernes alt-tag s, og selv i den almindelige brødtekst (<p>). Jo flere gange det søgte ord forekommer, og i jo flere forskellige typer tag s, jo højere bliver siden prioriteret. Sider prioriteres også efter hvor mange andre sites der lænker til dem (her tæller bannerannoncer og henvisninger fra Facebook også). Sidst men ikke mindst prioriteres de mest besøgte sider højest. Det betyder at hvis vi ønsker lidt forenklet at sitet bliver højt prioriteret i alle søgninger på ordene natklub og limfjord, vil vi bruge ordene ofte i brødtekst (<p>), overskrifter (<h1> - <h6>), billedbeskrivelser (alt= ), i meta-tags og i <title>. Vi vil desuden oprette en Facebook side og en Twitter profil med links til siden, annoncere ivrigt på andre sites, og lave en konkurrence på websitet med attraktive præmier, som sikrede mange besøgende i en periode. Vi kan holde øje med vores besøgende ved at oprette en Google Analytics konto, som giver os mulighed for at se hvor mange der klikker ind på siden, hvorfra, hvilke søgeord der førte dem til vores site, osv. se mere på Sidst, men ikke mindst, kan man annoncere på Google, sådan at der bliver vist en annonce oven over eller til højre for søgeresultaterne, samt på andre websites der lader Google annoncere (GoogleAds). Der betales ikke for at annoncere, men pr. klik; altså pr. reelt besøgende. Description GoogleAds 20

21 Dreamweaver CS5 Fremtidens koder Fremtidens koder HTML5 og CSS3 er ikke bare det nyeste nye. det er science fiction! W3C (The World Wide Web Consortium) som bestemmer internettets standarder, har endnu ikke færdigudviklet HTML5, og det er stadig uvist hvornår det vil blive kaldt en Stable Release. Browserne er endnu ikke blevet strømlinet til HTML5 (Undtagen Safari 5.0.2). Men Adobe kunne ikke vente, og HTML5 er fuldt understøttet i Dreamweaver, forstået på den måde, at man skal sørge for at hente opdateringer til programmet, så man kan følge med udviklingen af HTML og CSS standarderne. og så er der et par cowboytricks vi skal benytte et stykke tid endnu... Et eksempel: At afrunde hjørner i HTML og CSS har aldrig kunnet lade sig gøre, og vi har lavet billeder til dét formål. Med HTML5 og CSS3 kan det nu lade sig gøre, men ikke alle browsere ved hvordan de skal håndtere koden border-radius:10px; Derfor indsætter vi en ekstra kode til Mozilla (Firefox): -moz-border-radius:10px; og én til webkit (Internet Explorer, Safari, Google Chrome m.fl.): -webkit-border-radius:10px; Og til syvende og sidst indsætter vi en kode der sikrer, at hvis browseren ikke forstår koderne får den hjælp af et javascript på nettet: <script src= ></script> det virker som et stort stykke ekstra arbejde, men vi skal huske på at det kun er for periode, og at afrundede hjørner i ren kode er et helt lille mirakel i HTML-kontekst. Det samme er spalter, skygger, gennemsigtighed og rotation... For at prøve dette af åbner vi mappen limatravel_com i opgavemappen. 21

22 Dreamweaver CS5 HTML5 HTML5 Document type Du har sikkert set doctype koden en million gange: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN strict.dtd > <html xmlns= > W3C har valgt at forenkle koden i HTML5, sådan at den nu hedder: <!DOCTYPE HTML> så dét skal vi lige ændre i dokumentet thailand.html Bagud-kompatibilitet Af hensyn til browsere der endnu ikke forstår de nye koder skal vi indsætte et par cowboy-koder 1. I sidens interne stylesheet indsættes linien header, section, footer, aside, nav, article, figure { display: block; 2. Efter styelsheet et indsættes koden <!--[if lt IE 9]> <script src= ></script> <![endif]--> Struktur-koder W3C har erkendt at næsten alle webudviklere sidder og laver de samme ting, på hver sin måde. Vi tag er afsnit, footer osv., med div-navne vi selv finder på, aftaler med kollegaer, eller accepterer simpelthen div1, div2, div3, span style 1... Alternativt bruger vi headers til ting de ikke er beregnet til. Derfor indeholder HTML5 nu koderne section bruges når en side opdeles i sektioner. Det kan anvendes sammen med h1, h2, h3, H4, H5, og h6 elementer til at strukturere dokumentet. article en selvstændig del af dokumentet, fx en blog eller en artikel. aside hgroup header footer nav figure figcaption en selvstændig del af dokumentet med begrænset relevans eller sammenhæng, fx en faktaboks eller annonce. Kan bruges til at holde sammen på og tilpasse en gruppe af headere. Sidehoved. Sidefod. Sidens navigation/menu. Indsat element, fx billede, video, kort... Ledsagende tekst til en figure, fx fotografens navn. <figure> <video src= film.ogg ></video> <figcaption>en film om...</figcaption> </figure> 22

23 Dreamweaver font Hidtil har vi været voldsomt begrænset i forhold til brugen af typografi på websites: Times New Roman, Arial og Verdana... Årsagen er jo at skrifttypen skal være installeret på den besøgendes computer for at virke. Derfor har vi enten brugt billeder eller Flash, når vi ville bruge en alternativ skrifttype. I HTML5/CSS3 er det muligt at benytte skrifter der ligger på en webserver beregnet til formålet. Der findes en række betalingsservices, bla. webfonts.fonts.com, der hoster over fonte, men i dette tilfælde vil vi benytte en gratis: code.google.com/webfonts, der kun hoster 23 fonte. 1. I HEAD delen af koden på siden thailand.html skriver vi <link href= rel= stylesheet type= text/css > <link href= rel= stylesheet type= text/css > hvorved skrifttyperne Yanone Kaffeesatz og Lobster bliver hentet. 2. I sidens interne stylesheet retter vi font-informationen i #titlediv: font-family: Lobster, arial, sans-serif; 3. og i #maintext: font-family: Yanone Kaffeesatz, Verdana, Geneva, sans-serif; 4. Klik på Design og Liveview for at se resultatet. På code.google.com/webfonts er det muligt at hente skrifttyperne som opentype til computeren, så du kan se dem imens du arbejder med udviklingen af siden på din computer. Du kan naturligvis vælge også at bruge dem i tryksager, så du sikrer ensartetheden. Lobster Yanone Kaffeesatz #titlediv #maintext 23

24 Dreamweaver CS5 Tekst i spalter Tekst i spalter Tekst i spalter har ikke rigtigt været en mulighed i HTML4/XHTML, medmindre vi fordelte teksten i tabeller eller div manuelt, hvilket var et helvede når teksten senere blev redigeret. Med koden column-count:4; kan vi fordele teksten i #maintext i fire spalter, og med koden columngap:10px; kan vi give spalterne en indbyrdes afstand på 10 pixels. Desværre skal vi sætte koden ind nogle gange, da ikke alle browserne endnu er helt med på beatet. En browser læser CSS strengent, og hvis flere koder har den samme effekt vil den sidste, som browseren forstår, blive brugt. Derfor sætter vi erstatningskoderne ind først, og den rigtige til sidst. På den måde behøver vi ikke at huske på at slette noget, den dag erstantningskoderne ikke længere er nødvendige. 1. I # maintext i det interne stylesheet på siden thailand.html indsætter du følgende kode -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; Rotation Igen en funtion der i HTML4/XHTML krævede billeder eller Flash. 1. I #titlediv på thailand.html sidens interne stylesheet indsættes følgende kode -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); transform:rotate(-5deg); Så mangler vi bare skygger, afrundede hjørner og gennemsigtighed 24

25 Dreamweaver CS5 Afrundede hjørner Afrundede hjørner Endnu en ting der kræver billeder i skiver... indtil HTML5! 1. I # maintext i det interne stylesheet på siden thailand.html indsætter du følgende kode -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; 2. Og kigger på siden en gang til! Hjørnerne kan naturligvis afrundes mere eller mindre ved at justere 10px til fx 5px eller 15px... RGB-farver og gennemsigtighed Lad mig se en gange; RGB-farven 25,88,133 på en webside hedder #195885, og det giver mening fordi... Aaaaargh!!! I HTML5 hedder RGB-farven 25,88,133 RBG(25,88,133). og det bliver bedre endnu, for vi kan tilføje alpha: RGBA(25,88,133,0.5). Nu er den farvelagte dims (div, tabel, tekst...) 50% gennemsigtig! 1. I # maintext i det interne stylesheet på siden thailand.html finder du følgende kode background-color: #FFF; 2. Og retter den til background-color: rgba(255,255,255,0.7); Skygger 1. I #titlediv i det interne stylesheet på siden thailand.html indsættes koden: text-shadow:3px 3px 6px rgba(0,0,0,0.5) 2px 3px; 2. I #maintext indsættes koden: -webkit-box-shadow:rgba(0,0,0,0.3) 2px 3px; -moz-box-shadow:rgba(0,0,0,0.3) 2px 3px; box-shadow:rgba(0,0,0,0.3) 2px 3px; Som alternativ til RGB kan du også bruge HSL (Hue/Saturation/ Luminance) fx HSLA (0,0,0,0.7) Alpha beskrives på samme måde som opasitet: 0.1 = 10%, 0.9 = 90% Altså sort farve med 70% opasitet: rgba(255,255,255,0.7) 25

26 Dreamweaver CS5 Farveforløb Farveforløb Farveforløb kan indsættes som baggrund på siden, eller som baggrund i en DIV eller tabel. 1. # maintext i det interne stylesheet på siden singapore.html indsætter du følgende kode background: -webkit-gradient(linear, left top, right bottom, from(#ff6666), to(#ffffff)); Baggrund Vi kan nu tilpasse baggrundsbilleder sådan at de følger med browser-vinduet, med koden Cover: 1. I body i det interne stylesheet på siden singapore.html indsættes følgende kode: background: url(images/bangkok.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size:cover; -webkit-background-size:cover; 2. Prøv nu at skalere siden i browseren med Ctrl/Æble +/-, og ved at trække i hjørnet 26

27 Dreamweaver CS5 PHP PHP De uundværlige codehints i Dreamweaver hjælper dig nu også i PHP-filer. CMS Hidtil har CMS websites været nærmest utilgængelige i Dreamweaver. Nu åbner Dreamweaver dit CMS website og viser dig på skærmen hvad du laver, med direkte adgang til databasen. Desværre kan vi på dette kursus ikke demonstrere fænomenet... Alt hvad vi kan sige er: Glæd dig!!! BrowserLab Hvordan ser siden ud i Internet Destroyer? I Firefox? I Google Chrome, Safari eller Opera? Se dit website i alle browserne ved hjælp af den nye funktion Adobe Browserlab, som der er adgang til direkte fra Dreamweaver. Alt hvad du skal bruge er et Adobe login. Tjenesten er gratis i ét år fra første log in. Ingen ved hvad det derefter kommer til at koste. 27

28 Dreamweaver CS5 Content Management Content Management Næsten alle større virksomheder har et CMS website, sådan at hver afdeling kan redigere sin egen del af websitet, i en almindelig browser, uden at behøve Dreamweaver og en frygtelig masse expertise. CMS Content Management System består i princippet af én HTML-side (og dermed ét gennemgående layout), suppleret af Cascading Style Sheets, samt data (tekst, billeder og menuen) som ligger i en database. I virkeligheden er HTML-siden en PHP side. Dette betyder i princippet intet, idet HTML- og CSSkoderne er de samme, og designarbejdet er meget lig det arbejde vi har udført, da vi byggede et layout i en template-fil og CSS, og indsatte tekst fra en Library- snippet. Der findes mange forskellige CMS, nogle rasende dyre, og andre ganske gratis. Blandt de bedre gratis CMS kan Joomla, MODx og Drupal med fordel benyttes. For at benytte et CMS skal du have en server med en tilknyttet database (som regel MySQL). De gratis CMS kan simpelthen downloades fra internettet, som en zip-fil, udpakkes og uploades til serveren. Følg derefter anvisningerne på den side hvor du downloadede systemet for hvordan det skal installeres på serveren. Undervejs får du brug for navnet på databasen, brugernavn og password. Derefter kan du forbinde til serveren med et nyt tomt Site i Dreamweaver og downloade templatemappen til din Site-mappe. Hvis du også har sat serveren som Testing Site kan du se hvad du laver når du redesigner templaten. Er de præinstallerede templates for langt væk fra det layout du ønsker, kan du meget ofte downloade og installere andre templates fra nettet; visse gratis, andre mod betaling. I Dreamweaver kan du forbinde til serveren som Testing Server for at kunne se data-indhold når du designer templaten. eller definere en anden Testing Server... Der findes et alternativ til CMS, for de der har behov for sider med individuelt layout: egospel er et system der kan redigere tekst og billeder online i helt almindelige HTML-sider, og i visse Flash filer, uden database. Læs mere på: nordiskgrafik.com/egospel.html 28

29 Dreamweaver CS5 Content Management CMS website Template Design i Dreamweaver Placeres i Template-mappe på server Indhold Redigeres i browseren fx Internet Explorer Ligger i tabeller i database Læs mere og find gratis CMS på følgende adresser: drupal.org joomla.net modxcms.com wordpress.org 29

30 Dreamweaver CS5 Egne noter Egne noter 30

31 Dreamweaver CS5 /* Godt Design /* Godt Design */ Vidte du at MicroWorld-NetCom Kursus også udbyder kurser i Adobe Photoshop Adobe InDesign Adobe Illustrator Adobe Flash Adobe Acrobat Adobe LiveCycle Enfocus Pitstop Adobe CS5 opgradering HTML & CSS Kreativitet & Inspiration Skræddersyede grafiske kurser Microsoft Office 2007 og 2010 Microsoft Sharepoint Accelereret PRINCE2 i Århus og København Bestil kataloget på telefon eller besøg microworld.dk 31

32 MicroWorld-NetCom Tel: Kursuscentre København Dir: Århus Dir: Will you, for the love of God, stop developing Internet Explorer! Tim Berners-Lee, opfinder af internettet, i et åbent brev til Microsoft