Tutorial HTML CSS met Adobe Dreamweaver CSx

Transcriptie

1 Tutorial HTML CSS met Adobe Dreamweaver CSx Johan Smits, Saxion, Minor Internetmarketing, WCM1, week 4 Introductie Bij het werken met content op een website is het van groot belang om tekst en vormgeving gescheiden te houden. De tekst (content) zal vaak beheerd worden met een CMS (Content Management Systeem) en de vormgeving wil men uniform over de site handhaven in een gekozen huisstijl. Binnen Joomla! wordt de vormgeving vastgelegd in de STYLESHEETS (stijlbladen of CSS bestanden) van een template. In deze tutorial bespreken we de basis elementen van HTML en hoe de opmaak via een stijlblad is aan te sturen. Merk op dat men het stijlblad natuurlijk bij alle pagina s (van een sectie) zal gebruiken en dat daarmee automatisch een uniforme opmaak ontstaat. Naast opmaak wordt ook de positionering van elementen van een pagina in een CSS bestand vastgelegd. Deze tutorial is niet meer dan een kennismaking met HTML en CSS. Belangrijk om te onthouden: HTML = Content (structuur) CSS = Presentatie (vormgeving) Structuur van de tekst vastgelegd in HTML De afkorting HTML staat voor HyperText Markup Language. Hoewel veel mensen denken dat met markup de vormgeving, dus lettertype, kleur, grootte etc wordt bedoeld, gebruikt men tegenwoordig HTML om de structuur van de tekst vast te leggen. Dat wil zeggen dat vastgelegd wordt welke functie een stuk tekst binnen het document heeft. Gaat het om een gewone alinea of om een kop, een subkop, een element van een lijst, een genummerde lijst of een ongenummerde lijst. De codes die men in HTML hiervoor gebruikt, worden binnen < en > geplaatst en tags genoemd. Enkele voorbeelden staan in de volgende tabel. Tag Voorbeeld Betekenis p <p>dit is een gewone tekst, een aantal regels die een Paragraph = alinea platte tekst een alinea tekst vormen.</p> h1 <h1>een heading van het hoogste niveau</h1> Heading niveau 1 = Kop1 h2 <h2>een tweede niveau kop</h2> Heading niveau 2 = Kop2 h3 <h3>een subheader, niveau 3</h3> Heading niveau 3 = Kop3 Verder is h4 tot en met h6 nog beschikbaar. li <li>element uit een lijst</li> List element = lijst onderdeel ul <ul>{lijst elementen}</ul> Unordered list = Lijst met bullets ol <ol>{lijst elementen}</ol> Ordered list = Lijst met nummering Merk op dat {lijst elementen} dus een aantal elementen bevat van de vorm: <li>lijst element 1</li> <li>lijst element 2</li> Etc. div <div id= sidebar >Content van de sidebar</div> Division = blok element binnen de pagina a <a href= >Mijn Website</a> Anker met een hyperlink naar een site Figuur 1 Lijst met elementaire HTML tags Minor Internet Marketing Introductie 1

2 Uit de lijst van figuur 1 wordt duidelijk dat HTML-tags altijd in paren voorkomen, als openen sluittag, waarbij de sluittag dus een extra slash </x> bij zich heeft. Verder worden de tags altijd in kleine letters genoteerd. Basisstructuur van een HTML document Ieder geldig HTML document dient uit een aantal basiselementen te bestaan, namelijk de tags <html>, <head> en <body> met hun respectievelijke sluittags. Bovendien wordt op de eerste regel van het document het documenttype gespecificeerd. Daarmee wordt het mogelijk om het document bij de validator van w3c automatisch op correctheid te laten controleren. Een HTML document heeft dus altijd de onderstaande structuur. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="nl"> <head> <title>titel van de pagina</title> </head> <body> </body> </html> Figuur 2 De basisstructuur van een HTML document Merk op dat de doctype regel zich niet houdt aan de syntax regels voor HTML zoals we zojuist hebben besproken, maar deze regel bevindt zich dus buiten het HTML-gebied. Het HTML-gebied bevat dus twee delen, namelijk een head en een body. De head-sectie bevat gegevens over het document, terwijl de body de inhoud van het document bevat. We kunnen binnen de head-sectie de volgende codes tegenkomen: title, meta, script en link. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="nl"> <head> <title>titel van de pagina</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="deze tekst geeft Google weer als beschrijving van de site bij de zoekresultaten" /> </head> <body> </body> <script src="javascript.js" type="text/javascript"></script> <link href="stijblad.css" rel="stylesheet" type="text/css" /> </html> Figuur 3 De tags binnen de HEAD-sectie van een HTML document De title tag is verplicht en bevat de titel van de pagina zoals die door de browser wordt weergegeven in de titelbalk, maar ook bij de favorieten, bookmarks en geschiedenis. Met meta tags kan men extra gegevens over de pagina vastleggen. Dit is niet verplicht maar wordt van harte aanbevolen. De description tekst is wel belangrijk, omdat deze tekst door Google bij de zoekresultaten wordt getoond. Het stijlblad (cssbestand) wordt aan de pagina gekoppeld via de link tag en eventueel javascript wordt via de script tag aan de pagina gekoppeld. Merk op dat deze laatste twee zaken ook direct binnen de head van het html Minor Internet Marketing Introductie 2

3 opgenomen mogen worden, maar dit wordt afgeraden om het zoekmachines zo makkelijk mogelijk te maken het html-bestand te indexeren. Opmerking: Bij de tags meta en link valt op dat er geen sluittag is opgenomen in het html-bestand. Dat komt omdat bij deze tags er geen tussenliggende inhoud is en er dus niets valt te sluiten. Om toch duidelijk te maken dat deze tag zichzelf sluit zie je dat de sluitslash aan het eind van de tag is opgenomen. De tag sluit met />. Binnen de body-sectie van de html-pagina komen we de tags uit figuur 1 tegen. Het belang van het begrijpen van deze tags is dat Google bij het indexeren van je pagina een soort scrabble speelt met de keywords. Op de pagina zorg je dat de dichtheid van het keyword waarop je gevonden wilt worden, tussen de 3% tot 7% is. Wanneer je de pagina gaat optimaliseren moet je je bedenken dat Google hierbij ongeveer als volgt te werk gaat (bron: Schelte Meinsma, zie o.a. devel.bekent.nl/seo/, pagerank-backlinktool.nl/index3.php, wiewatdaar.nl) Keyword in html element Waardering door Google Domeinnaam Woordwaarde x 10 URL Woordwaarde x 10 title Woordwaarde x 6 h1 Woordwaarde x 4 h2 Woordwaarde x 3 In clicks (a href-element) Woordwaarde x 2 In eerste zin van alinea (p) Woordwaarde x 2 Basisstructuur van een CSS stijlblad Zoals aangegeven wordt de vormgeving en positionering van de html elementen vastgelegd in een stijlblad. Omdat verschillende regels van toepassing kunnen zijn op eenzelfde element of verzameling van elementen spreekt men van een cascading style sheet. De koppeling van het stijlblad aan het HTML document gebeurt bij voorkeur via een link in de head-sectie van het HTML document. Het css stijlblad bevat een verzameling van regels die er als volgt uitzien. Selector {eigenschap: waarde; eigenschap2: waarde2;} De selector kan verwijzen naar een HTML-tag, een klasse (.class), een identifier (#id) of een pseudoklasse (:pseudo). In het practicum komen ook de laatste twee aan bod. Een voorbeeld met een html tag is: h1 {color: orange; font-size: 18pt; font-weight: bold;} We zullen Adobe Dreamweaver CS4 gebruiken om zelf een stijlblad samen te stellen. Het is daarbij heel belangrijk om zeer nauwkeurig te werken, want iedere typefout wordt door de browser zonder pardon afgestraft. Gelukkig zijn er hulpmiddelen beschikbaar om het stijlblad te controleren, namelijk de validator van w3c en Firebug, de add-on bij Firefox die precies laat zien welke stijlregels worden toegepast. Wanneer je jouw stijlregel niet in Firebug terugziet, dan zit er een fout in en wordt deze regel door de browser eenvoudigweg overgeslagen. Merk op dat de browser zelf geen foutmeldingen geeft bij syntax fouten in een CSS bestand. Minor Internet Marketing Introductie 3

4 Het practicum Practicum bestanden opslaan 1. Haal van de site mim.saxion.nl/docent/sms/ de bestanden tutorial.htm en stijlblad.css op uit de map Minor_InternetMarketing / CSS practicum. Sla deze twee bestanden op in de map H:\Minor. Adobe Dreamweaver CS4 starten Tijdens dit practicum gebruiken we Dreamweaver, een professionele editor voor websites. Tegenwoordig maakt Dreamweaver onderdeel uit van de Creative Suite van Adobe en kun je het vinden in de bundel CS4 Web Premium. (Overigens doet CS3 het ook prima). Wanneer je zelf deze bundel software wilt aanschaffen voor een studentenprijs, dan kan dat via de site surfspot.nl (inloggen met je Saxion code en wachtwoord). 2. Start Adobe Dreamweaver CSx (vanuit de NAL, rubriek 8 Specific Applications). 3. Open het bestand tutorial.htm dat staat in de map H:\minor. Merk op dat DW het stijlblad al heeft geopend omdat er in de html een link naar toe staat. Met deze knoppen kun je wisselen tussen de drie weergaves: Code, Beide (Split screen) of Design. Zo denkt DW dat een browser de pagina zal laten zien. Handig hulpmiddel om direct het resultaat van je werk te bekijken. Figuur 4 Het scherm van Adobe Dreamweaver CSx Minor Internet Marketing Het practicum 4

5 In de figuur is te zien dat Dreamweaver (DW) is in staat om zowel de code als het resultaat tegelijk in een scherm weer te geven. We gaan eerst aan de slag om de vormgeving van de pagina aan te passen door voor een aantal html elementen stijlregels te definiëren. Binnen DW kan dat op verschillende manieren. Je kunt de regel direct intypen op het stijlblad, maar je kunt ook via menu s en lijsten de regel (met hulp) laten samenstellen. Stijlregels toevoegen aan het stijlblad Wij beginnen met het zelf intypen van een stijlregel op het stijlblad. 4. Schakel over naar het stijlblad door op de knop stijlblad.css te klikken (zie figuur 4). DW toont het nog lege stijlblad. 5. Type hierin de onderstaande regel en geef Ctrl-s om op te slaan. Druk op F5 om het beeld te verversen. Merk op dat DW de kleur van de heading 2 (h2) overal in je document aanpast (als je de regel zonder fouten hebt getypt). Figuur 5 Een stijlregel toegepast op een HTML tag wordt weergegeven op het CSS-palet Het bijzondere van DW is dat niet alleen de voorvertoning in het design window wordt aangepast, maar dat deze stijlregel ook wordt toegevoegd aan het css-palet. 6. Voeg nog twee regels toe aan het stijlblad. 7. Het resultaat kun je zien na opslaan en F5. Minor Internet Marketing Het practicum 5

6 Het resultaat is dat de heading 4 (h4) en de platte tekst (p) een stijlregel hebben. Het ligt voor de hand om dezelfde stijlregel van de alinea s (p) ook te gebruiken voor de elementen van de lijsten. Dat betekent dus dat de HTML tag li dezelfde stijlregel regel moet krijgen. Het blijkt dat we dit kunnen combineren. 8. Voeg de HTML tag li toe aan de regel betreffende de p. Let op dat je deze HTML tags met een komma scheidt. Het resultaat is direct te zien na F5. 9. Voeg zelf een stijlregel toe voor de heading 3 (h3). De html tags waarvoor regels zijn opgesteld. De regels die voor de HTML tag h3 zijn gedefinieerd. Met de knop New CSS Rule kun je een nieuwe stijlregel toevoegen. Figuur 6 Het CSS-palet met de stijlregels voor h3 Wanneer je zelf een regel wilt toevoegen aan het stijlblad en je gebruikt DW dan word je wel een beetje geholpen, maar toch blijft het raden wat je precies moet intypen. Voor mensen die de CSS codes niet kennen heeft DW extra hulpmiddelen. We starten nu bij het palet CSS zoals in de vorige figuur is weergegeven. We gaan een regel toevoegen waarmee een hyperlink een andere kleur krijgt wanneer de muis er overheen beweegt. Merk op dat we dus een regel voor de HTML tag a gaan definiëren, in een Minor Internet Marketing Het practicum 6

7 speciale situatie, namelijk een hover. In css wordt dit aangeduid als pseudoklasse met een dubbele punt, dus a:hover. 10. Zorg dat (in de tweede paragraaf van de tekst) de cursor is geplaatst in de link de heer Ten Dam of in de link de heer Wierda. Klik op de knop New CSS Rule (zie figuur 6). Kies hier compound Selecteer de tag a met pseudo tag :hover uit de lijst. 11. Kies in de keuzelijst de optie Compound (based on your selection) en kies de selector a:hover. Klik vervolgens op OK. Kies een passende kleur. Helaas kan DW niet een hover laten zien, dus om het resultaat te beoordelen starten we onze favoriete browser (Firefox) en kiezen in het menu Bestand > Bestand openen (Ctrl+O) en openen het bestand H:\Minor\Tutorial.htm. Wanneer je nu de muis over de link beweegt zie je dat de tekstkleur verandert. Minor Internet Marketing Het practicum 7

8 Figuur 7 Wanneer de muis boven een link is verandert de tekstkleur Op dezelfde manier willen we de lijststijlen wijzigen. De ongeordende lijst (ul) moet met vierkanten en de geordende lijst met a, b, c gaan nummeren. Ook dit is realiseren door twee regels toe te voegen aan het stijlblad. 12. Gebruik in het CSS palet opnieuw de knop New CSS Rule en kies de HTML tag ul. Figuur 8 Een stijlregel voor ul maken 13. Kies een vierkant als opsommingsymbool en bevestig met OK. 14. Maak voor de HTML tag ol een list-style-type met lower-alpha en bekijk het resultaat. 15. Maak voor beide lijsten de achtergrond lichtgrijs. Het resultaat van deze handelingen is weergegeven in de volgende twee figuren. Minor Internet Marketing Het practicum 8

9 Figuur 9 Het stijlblad met de stijlregels Figuur 10 Een fragment van de pagina Stijlregels voor positionering Naast vormgeving zoals in de vorige paragraaf is beschreven kunnen we ook positionering van elementen met stijlregels vastleggen. Omdat we dan met grotere blokken willen werken moeten we in ons HTML bestand deze blokstructuur gaan toevoegen. Dit kan door te werken met divisions, de zogenaamde div tags. We willen de eerste twee delen in de hoofdkolom plaatsen en de derde paragraaf in een zijkolom aan de rechterkant. Daartoe plaatsen we een tag voor de code <h2>.</h2> waarin aangegeven wordt dat daar het blok begint. 1. Plaats direct na de tag <body> op een nieuwe regel de code <div id= main >. Minor Internet Marketing Het practicum 9

10 2. Voeg de eind tag </div> in vlak voor de <h2> van paragraaf 3. Voeg direct daarna de nieuwe tag <div id= sidebar > in. Dit is de sluittag van de main division. Hier begint de tekst van de sidebar. De sluittag van de sidebar divisie. 3. Plaats vlak voor de body-sluittag </body> de sluittag van de tweede divisie. Wanneer je (weer) overschakelt naar de Design weergave in DW zie dat de beide divisies met stippellijnen worden gemarkeerd. Om de sidebar bovenin aan de rechterkant te kunnen positioneren zullen we eerst ruimte moeten maken. Dat doen we door de rechtermarge van de main divisie aan te passen. Vervolgens schuiven we de sidebar er naast, nadat we de totale wijdte hebben aangepast. 4. Voeg een stijlregel in voor de main divisie. Merk op dat het hekje # verwijst het id. Deze stijlregel creëert aan de rechterkant een ruimte die 40% van de totale breedte beslaat, aan de linkerkant komt een ruimte van 5% van de totale breedte, terwijl aan de onderkant een vaste ruimte van 10 pixels ontstaat. Bovenaan komt geen marge. Lees de marges met de klok mee: boven, rechts, onder, links. Het resultaat laat DW zien in figuur 11. Figuur 11 Resultaat van de stijlregel voor de marge op de main divisie Minor Internet Marketing Het practicum 10

11 Nu we ruimte hebben gemaakt, kunnen we de sidebar aan de rechterkant plaatsen. We moeten wel zorgen dat deze kolom een stuk smaller wordt, laten we zeggen met een wijdte van 25%. Het plaatsen van een divisie op een absolute plaats gaat via het opgeven van de positie zoals de volgende stijlregel laat zien. 5. Voeg de volgende stijlregel voor de sidebar divisie toe. Het resultaat is dat we de sidebar inderdaad rechtsboven hebben, maar de tekst past eigenlijk niet goed in de box. Er zou wat ruimte gemaakt moeten tussen de tekst en de rand van de box. 6. Dat kun je doen met het keyword padding. Geef de sidebar nog een achtergrondkleur mee zodat het verschil met de rest duidelijk is te zien. Deze regel creëert boven en onder een ruimte van 10px en rechts en links van 5%. Opmerking: Er zijn diverse manieren om kleuren aan te duiden. Je kunt werken met de naam zoals we eerder deden, orange, blue etc. maar ook met het kleurnummer #33C, dat eigenlijk staat voor #3333CC zoals het volledig uitgeschreven zou zijn. Dit RGB kleurnummer (Rood Groen Blauw) kan ook via percentages worden opgegeven, als je gebruik maakt van de rgb() functie. Het eindresultaat ziet er dan uit zoals in figuur 12 is weergegeven. Figuur 12 Het eindresultaat van de styling Minor Internet Marketing Het practicum 11

12 Werken met flexibele plaatjes In het resultaat zoals weergegeven in figuur 12 is zien we liquid lay-out. Wanneer je het browservenster smaller maakt dan zie je dat de breedte van de kolommen zich aanpassen aan het smallere scherm. Probeer dit uit en maak het venster smaller en bekijk het resultaat. Wanneer je afbeeldingen opneemt in zo n lay-out dan zie je vaak dat die een vaste afmeting hebben en daarmee eigenlijk de flexibiliteit verstoren. Het is echter best mogelijk om een afbeelding op een manier dat deze wel flexibel schaalt met de kolommen totdat de afbeelding zijn maximale breedte heeft bereikt. We zullen dit in de rechter kolom laten zien. 1. Zorg dat het plaatje dat je wilt gebruiken in dezelfde map staat als het html en het css bestand. Wij gebruiken hier mug-front.jpg. 2. We plaatsen de afbeelding onderin de rechterkolom, dat is in de html broncode voor regel 62. Let op dat de sluittag van de sidebar divisie behouden blijft (en nu op regel 66 staat). Met een img tag voeg je een afbeelding in. 3. Bekijk het resultaat in de browser en maak het venster smal. Je ziet dat het plaatje te breed blijft. Figuur 13 De afbeelding geplaatst in de kolom, Broken Design (links) en rechts in een flexibel grid 4. In het stijlblad kunnen we dit repareren door aan te geven dat een image niet breder mag worden dan het element waarin deze zich bevindt. Voeg de volgende declaratie toe aan het stijlblad. 5. Bekijk opnieuw het resultaat in de browser (verversen met F5) en varieer het scherm in breedte. Minor Internet Marketing Het practicum 12