Embed Size (px)
Citation preview
DreamweaverCS5
Trin 2
af Hasse Sørensen for MicroWorld-NetCom Kursus
Dreamweaver CS5
2
Dreamweaver CS5 trin 2
Tekst og design: Hasse Sørensen, Nordisk GrafikUdgiver og ophavsretsholder: MicroWorld-NetCom Kursus
Copyright © 2011 Nordisk Grafik og NetCom.Alle rettigheder forbeholdes. Kopiering og gen-givelse 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).
Dreamweaver CS5 • Indhold
3
IndholdInternettet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Mini leksikon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
Så langt, så godt... . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Spry menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Tilpas Spry Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Skaleret baggrund . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Brug Div som lag . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Del siden med... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
’Snippets’ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Bridge billedgallerier. . . . . . . . . . . . . . . . . . . . . . . . . .15
IFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Visual Lightbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Mobilt website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Synk’ede mobilsider . . . . . . . . . . . . . . . . . . . . . . . . . .19
SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Fremtidens koder . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
@ font. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Tekst i spalter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Rotation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Afrundede hjørner . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
RGB-farver og gennemsigtighed . . . . . . . . . . . . . 25
Skygger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Farveforløb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Baggrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
CMS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
BrowserLab. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Content Management . . . . . . . . . . . . . . . . . . . . . . . 28
Egne noter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
/* Godt Design */ . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Dreamweaver CS5 • Internettet
4
InternettetInternettet 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 internetkon-sortiet 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 11-12 lande, bla. Pakistan. Skulle alle Pakistans servere blive afbrudt, går datastrøm-men 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
Dreamweaver CS5 • Mini leksikon
5
Mini leksikonBrowserEt program der kan læse HTML, fx Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera m.fl.
CacheNå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.
CMSContent 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.
CSSCascading 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æneEt domæne er en webadresse, fx www.netcom.dk.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.).
E-mailElectronic Mail. E-brev.
FirewallEn ’brandmur’ tjener til at forhindre uønsket adgang til en computer eller server.
FTPFile 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.
HackerEn 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.
HjemmesideEt websites første side, index.html. Bruges også i betydningen privat website.
HTMLHyper 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.
HTTPHyper Text Transfer Protocol, dén protokol der bruges til at hente websider, så de kan læses i en browser.
IP-adresseInternet 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...
PHPHTML-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.
Dreamweaver CS5 • Mini leksikon
6
PornositeEt website der viser amatørgynækologiske billeder og film.
PortalEt website der tjener som en adgangsvej til resten af internettet, fx. www.google.dk eller adx.dk
RSSReally Simple Syndication, XML-data (se det) der kan distribueres via websites og RSS-læsere på computere, mobiltelfoner m.m.Bruges oftest til nyheds-resuméer, blog-opdaterin-ger m.m.
ServerEn computer der altid er tændt, som der altid er adgang til, og som bla. kan bruges til at placere et website og E-mails på (”mail-server”).
WAPWireless Application Protocol, internet trafik på mobil-telefon-netværket.
WebmailE-mail der læses og skrives på et website, fx Gmail eller Hotmail.
WebhotelEn server-plads man lejer til at placere et website, E-mails m.m.
WebshopEt website hvor det er muligt at købe varer, og som regel betale med kreditkort.
WebsideEn enkelt side på et website.
WebsiteEt ’websted’, alle sider placeret på én www-adresse.
WWWWorld 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.
XHTMLExtensible HyperText Markup LanguageEn ’oprydning med en møggreb’ i det tidligere dårligt strukturerede HTML. Har indbygget mulig-hed for fællesstrukturering med XML data.
XMLExtensible Markup Language, en data-strukture-ringsform der minder om – og kan bruges sam-men med – HTML (XHTML). Bruges bla. til adresse-bogen på din mobiltelefon og data i nyere Word dokumenter (.docx).
URLUniform 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: www.netcom.dk”.
Dreamweaver CS5 • Så langt, så godt
7
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 kontakt-formular og et indsat kort fra Google Maps.På dette kursus skal vi indsætte en JavaScript (Spry) menu, en skalérbar baggrund, en dele-funk-tion, ’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.
Dreamweaver CS5 • Spry menu
8
Spry menuSpry 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.dwtMarkér teksten i menuenVælg Insert > Spry > Spry Menu Bar
Vi har nu fået en grå standard menu med Item 1
Item 1.1Item 1.2Item 1.3
Item 2Item 3
Item 3.1Item 3.1.1 Item 3.1.2
Item 3.2Item 3.3
Item 4– som viser at vi kan lave menuer, med under- menuer 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 under-menuer, 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ÅbningstiderPriserArrangementerLedige StillingerAdresse
Vælg ”Priser” og opret tre undermenuer:DrikkevarerMadArrangementer
Når browseren bliver mindre kommer bag under-menuerne ind under hovedteksten. Derfor rykker vi menuen frem med z-index: ”5” i CSS.
Dreamweaver CS5 • Tilpas Spry Menu
9
Tilpas Spry MenuI feltet ”Link” skal vi fortælle menuen hvilke menu-punkter der henter hvilke sider.– ikke alle sider er blevet til endnu, hvorfor de blot skal ’lænke’ til ”#”...Forside = index.htmlÅbningstider = aabningstider.htmlPriser = #Priser/Drikkevarer = #Priser/Mad = #Priser/Arrangementer = #Arrangementer = arrangementer.htmlLedige 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 midlerti-digt 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 udkom-mentere 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.
Dreamweaver CS5 • Tilpas Spry Menu
10
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% 0 0 95%; 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 ’unor-dered 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
Dreamweaver CS5 • Skaleret baggrund
11
Skaleret baggrundVi 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;”
Dreamweaver CS5 • Brug Div som lag
12
Brug Div som lagNu har vi et billede af natklubben som baggrund. Oven på denne baggrund skal vi have en transpa-rent 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 BorderWmode: TransparentClass: Stretch
– så blev siden lidt mere levende...
Dreamweaver CS5 • Del siden med
13
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å www.addthis.comVæ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; }
Dreamweaver CS5 • ’Snippets’
14
’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.htmlKlip 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 html-filer, 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.
Assets panelet kan også bruges til at se – og genbruge – de billeder, flash-filer m.m. der er i brug på websitet.
Opret ny ’snippet’ (Library Item)
Dreamweaver CS5 • Bridge billedgallerier
15
Bridge billedgallerierVed hjælp af Bridge kan vi oprette flotte billedgallerier.1. Åben Bridge og find mappen ”galleri” i opgavemappen2. Markér alle billederne og vælg arbejdsrummet Output3. Vælg Web Gallery4. Prøv de forskellige templates, og tryk på Refresh Preview hver gang du har valgt et nyt5. Når du har valgt en god template, fx Filmstrip, Style > Darkroom, og fjern fluebenet fra Show Title Bar6. 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.
Dreamweaver CS5 • IFrame
16
IFrame1. Opret en ny side af din template i Dreamweaver2. Slet teksten ”Bla bla bla”3. Imens cursoren står og blinker inde i teksfeltet vælger du Insert > HTML > Frames > IFrame4. 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=”http://www.m.dk” target=”iframe”>Metro</a>) vil den linkede side dukke op inde i IFramen.
Dreamweaver CS5 • Visual Lightbox
17
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.
Visual LightboxVi 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-mappe2. Billederne flyttes ind i ”media” mappen i vores site-mappe3. Åben tekst-filen ”koder.txt”, markér al teksten og kopier den (Ctrl + C). Luk bare filen igen4. Åben nu filen ”arrangementer.html” i Dreamweaver5. 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”-mappen6. 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=”http://youtube.com” rel=”width:768,height:576” class=”advanced” title=”Cocktails and Dreams”><img src=”media/vlimage01_sm.jpg” width=”115” height=”86” /> </a>
Dreamweaver CS5 • Mobilt website
18
Mobilt websiteDet 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 Central2. klik på ”Browse” i øverste højre hjørne3. Find Nokia N85, træk den ind i panelet ”Test
Devices” og dobbeltklik på den4. Vælg File > Open URL og tast ”http://m.adx.dk”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”: http://www.adx.dk bliver i den mobile udgave til http://m.adx.dk, ligesom dgs.dk, cph.dk og google.dk...1. Opret en mappe ved navn ”m”2. Opret en ny fil ved navn mobildesign.html3. 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 opgavemap-pen 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 mobil-
design.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.
Dreamweaver CS5 • Synk’ede mobilsider
19
Synk’ede mobilsider1. Opret en ny side på basis af templaten ”mobil-
design.dwt”2. Gem den som kontakt.html i mappen ”m”3. Slet teksten ”Bla bla bla” og indsæt adressen
fra Assets panelet > Library > adresse4. Vælg den lille globus i top-panelet og vælg
Preview in Device Central5. Åben den ’normale’ index.html side, markér
hoved-teksten og klip den ud6. Opret en ny ’snippet’ (Library Item) ved navn
”index” og sæt teksten ind dér7. Sæt den nye ’snippet’ ind i index.html, hvor
teksten oprindeligt kom fra8. Opret en ny side på basis af templaten ”mobil-
design.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 åbne15. 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æv-ner vi retter ind efter, jo flere kan se siden uden problemer
Dreamweaver CS5 • SEO
20
SEOSearch Engine Optimization er en større videnskab som vi kun kommer til at berøre helt grund læggende.I det efterfølgende vil vi primært tage udgangs-punkt i www.google.com, 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 7.350.000.
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å http://www.google.com/analytics/
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
Dreamweaver CS5 • Fremtidens koder
21
Fremtidens koderHTML5 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ærdig-udviklet 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 pro-grammet, så man kan følge med udviklingen af HTML og CSS standarderne. – og så er der et par cowboy-tricks 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=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>– det virker som et stort stykke ekstra arbejde, men vi skal huske på at det kun er for periode, og at afrun-dede 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.
Dreamweaver CS5 • HTML5
22
HTML5Document typeDu har sikkert set doctype koden en million gange: <!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”>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=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></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 en selvstændig del af dokumentet med begrænset relevans eller sammenhæng, fx en faktaboks eller annonce.
hgroup Kan bruges til at holde sammen på – og tilpasse – en gruppe af headere.
header Sidehoved.
footer Sidefod.
nav Sidens navigation/menu.
figure Indsat element, fx billede, video, kort...
figcaption Ledsagende tekst til en figure, fx fotografens navn.
<figure> <video src=”film.ogg”></video> <figcaption>En film om ...</figcaption></figure>
Dreamweaver CS5 • @ font
23
@ fontHidtil 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 8.000 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=’http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold&subset=latin’ rel=’stylesheet’ type=’text/css’> <link href=’http://fonts.googleapis.com/css?family=Lobster&subset=latin’ 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
#maintext
#titlediv
Dreamweaver CS5 • Tekst i spalter
24
Tekst i spalterTekst 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 column-gap: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;
RotationIgen 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
Dreamweaver CS5 • Afrundede hjørner
25
Afrundede hjørnerEndnu 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);
Skygger1. 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)
Dreamweaver CS5 • Farveforløb
26
FarveforløbFarveforlø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));
BaggrundVi 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
Dreamweaver CS5 • PHP
27
BrowserLabHvordan 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.
PHPDe uundværlige codehints i
Dreamweaver hjælper dig nu også i PHP-filer.
CMSHidtil 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 demon-strere fænomenet...
Alt hvad vi kan sige er: Glæd dig!!!
Dreamweaver CS5 • Content Management
28
Content ManagementNæ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 gen-nemgå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 CSS-koderne 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 inter-nettet, 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 template-mappen 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 down-loade 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
Dreamweaver CS5 • Content Management
29
Læs mere – og find gratis CMS – på følgende adresser:drupal.orgjoomla.netmodxcms.comwordpress.org
TemplateDesign i DreamweaverPlaceres i Template-mappe på server
IndholdRedigeres i browserenfx Internet ExplorerLigger i tabeller i database
CMS website
Dreamweaver CS5 • Egne noter
30
Egne noter
Dreamweaver CS5 • /* Godt Design
31
/* 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 +45 70 15 20 20 eller besøg microworld.dk
MicroWorld-NetCom
Tel: +45 70 15 20 20 www.microworld.dk [email protected]
Kursuscentre KøbenhavnDir: 20 84 57 57 ÅrhusDir: 86 17 17 51
”Will you, for the love of God, stop developing Internet Explorer!”– Tim Berners-Lee, opfinder af internettet, i et åbent brev til Microsoft
