studentengids Media Vormgever Grafische Vormgeving training 025 Website Bouwen Met Adobe Dreamweaver en Adobe Photoshop leerjaar 2 t 025 versie 001

studentengids

Media Vormgever Grafische Vormgeving

training 025 Website Bouwen Met Adobe Dreamweaver en Adobe Photoshop

leerjaar 2 t 025

versie 001

Competenties In deze training ga je aan de slag met de volgende kerntaken, bijbehorende werkprocessen en competenties. In de laatste kolom staat tijdens welke opdrachten je bezig bent met deze werkprocessen. Kerntaak 1 Ontwerpt media-uiting Werkprocessen

Competenties

Opdrachten

1.4

K. Vakdeskundigheid toepassen L. Materialen en middelen inzetten R. Op de behoeften en verwachtingen van de ‘klant’ richten S. Kwaliteit leveren

STAP 1

Werkprocessen

Competenties

Opdrachten

2.1

Bereidt realisatie voor

K. Vakdeskundigheid toepassen L. Materialen en middelen inzetten T. Instructies en procedures opvolgen

STAP 1

2.3

Maakt de media-uiting

K. Vakdeskundigheid toepassen L. Materialen en middelen inzetten R. Op de behoeften en verwachtingen van de ‘klant’ richten S. Kwaliteit leveren

STAP 2-9

2.4

Beheert hard- en software


STAP 2-12

2.5

Beheert database


UPLOADEN

Maakt ontwerp

Kerntaak 2, etc.

Vakkennis en vaardigheden Na afronden van deze training beheers je de onderstaande vakkennis en vaardigheden: 1. de basis regels voor het bouwen van websites 2. het maken van een website plan voor de opdrachtgever 3. het ontwerp maken voor een website in Photoshop 4. het ontwerp gereed maken voor online toepassing 5. het opzetten van een flexibele, gecentreerde website in HTML 6. het aanpassen van de lay-out in CSS 7. toepassen van typografie in CSS 8. meerdere pagina’s linken met elkaar 9. bekend met basis zoekmachine optimalisatie 10. bekend met basis content management systeem 11. bekend met uploaden (ftp) en hosting van eigen website


Website Bouwen training 025

2

Inleiding Als grafisch vormgever ben je over het algemeen bezig met de vormgeving van print- en drukwerk. Toch komt het steeds vaker voor dat opdrachtgevers ook een website ontwerp nodig hebben. Bij veel startende vormgevers op de arbeidsmarkt zijn het vaak zelfs de eerste betaalde opdrachten. Het vormgeven van een website kun je vergelijken met het vormgeven van een brochure of boek: Je hebt een homepagina (omslag) en vervolgpagina’s (stramien pagina’s). Zoals je bij een brochure of boek rekening moet houden met de eisen van de drukker (resolutie, cmyk, afloop, ect.), zo moet je bij een website rekening houden met de techniek van internet (schermafmeting, rgb, navigatie, links). Om een goed ontwerp te maken voor een website is het dus noodzakelijk om te weten hoe een website wordt gebouwd. In deze training leer je hoe je een Photoshop ontwerp om zet naar een werkende website in Dreamweaver.

Casus Deze training wordt gegeven in 18 weken (2 periodes) van 3 uur. Er zijn drie hoofd-opdrachten met korte deelopdrachten. De hoofdopdrachten zijn: 1. het in stappen opbouwen van een voorbeeld website 2. een websiteplan voor een eigen ontworpen website 3. het bouwen en online zetten van een eigen ontworpen website De deelopdrachten worden bij deze handleiding uitgedeeld. Het zijn oefeningen per STAP, waarmee je de behandelde technieken oefent.

Stappenplan 1. De eerste helft van deze training leer je hoe je een website bouwt. Dit doe je door het nabouwen van een voorbeeld website in stapjes. 2. De tweede helft van de periode bouw je een website voor een klasgenoot. Hiervoor schrijf je een websiteplan, voer je je ontwerp uit en zet je het online.

Werkwijze en begeleiding • Tijdens het maken van de eerste hoofdopdracht werk je zelfstandig. Je doet dit met behulp van het lesmateriaal. • Tijdens het maken van de tweede en derde hoofdopdracht werk je samen met een klasgenoot. Je gebruikt hiervoor het lesmateriaal en de gemaakte voorbeeld website uit de eerste hoofdopdracht als basis. • De docent zal rondlopen en ondersteunen bij het bouwen. • De reader bevat voldoende informatie om zelfstandig de basis opzet te kunnen maken en in je eigen tempo te kunnen werken. De docent bepaalt wanneer een hoofdopdracht wordt afgerond.



3

Beoordeling Bewijslast Je wordt beoordeeld op: 1. de voorbeeld website online volgens voorbeeld in de reader 2. een aparte HTML-pagina met links naar je deelopdrachten (lijst van links) 3. een link vanuit hoofdopdracht 1 naar je websiteplan 4. de klasgenoot-website online volgens jouw ontwerp Beoordelingswijze Je wordt individueel beoordeeld aan de hand van je online resultaat. Je dient je deelopdrachten en hoofdopdrachten op je eigen ruimte op de GLU-webserver te zetten. Aan de hand van je studentnummer zal de docent online je resultaat beoordelen. GLU-webserver: http://webdesign.glu.nl/studentnummer/voorbeeld/ http://webdesign.glu.nl/studentnummer/deelopdrachten/ http://webdesign.glu.nl/studentnummer/klasgenoot/ Beoordelingsmoment en planning De docent bepaald wanneer de hoofdopdrachten moeten zijn afgerond. Dit zal over het algemeen halverwege en aan het einde van 18 weken zijn. Herkansing/repareren Herkansing in overleg met de docent.

Plaats binnen de opleiding: aanwezige kennis en vaardigheden • • • • •

beheersen van Photoshop: leerjaar 1 Photoshop kennis van InDesign: leerjaar 1 InDesign een plan van aanpak kunnen maken: leerjaar 1 Projecten een stramien kunnen ontwerpen: leerjaar 1 grafisch vormgeven een eigen ontwerp kunnen maken: leerjaar 1 grafisch vormgeven

Studiebelastingsuren (SBU) Deze cursus is opgebouwd uit 18 lesuren (met docent) en 9 huiswerkuren (zonder docent). 18 x 3 lesuren (54 x 5/6) 45 18 x 1 huiswerkuur 18 totaal SBU 63

Waar kun je de opdrachten vinden? De lesopdrachten en studentenhandleiding vind je terug op de server van het GLU: les 11-12 / grafisch vormgeven / MultiMedia / Website Bouwen



4

INHOUDSOPGAVE: Wat ga je doen?

1

Ontwerp en vormgeving in Photoshop maak naar aanleiding van de briefing een websiteplan waarin staat wat je aanpak is

maak een website ontwerp in photoshop: afmeting = 994 x 768 pixels / 72 dpi / rgb

2

Basis informatie voor het bouwen van sites maak een nieuwe mappenstructuur aan. let er op dat je tijdens de bouw steeds alle materiaal in deze map zet. Vergelijk het met de links naar afbeeldingen in InDesign. maak in Dreamweaver een nieuw htmldocument (index.html) en koppel een nieuw css-document (layout.css)

3

Basis opzet layout in Dreamweaver 1. stel de body in: geef achtergrondkleur en zet marges op nul pixels

2. maak de div #container aan (gecentreerde site met vaste breedte ‘994px’ en marge links/rechts op ‘auto’)



5

4

Margin, Padding, Floaten Het uitlijnen, positioneren en naast elkaar zetten van div’s. 1. maak een div-stijl aan via het CSS-venster 2. zet de div vervolgens in je HTML-document doe dit via INSERT / LAYOUT / DIV TAG vul de #container met nieuwe div’s, zoals #header, #menu, #content, #footer. stel de site manager in en upload je map met index.html en layout.CSS. Test je site in de browser

5

Afbeeldingen invoegen 1. knip het Photoshop ontwerp door middel van segmenten/slices in stukken 2. voeg afbeeldingen (slices vanuit Photoshop) in: plaats deze in een div of als achtergrond in een div

6

Menu met afbeeldingen zet het rollover menu (slices vanuit Photoshop) in de div #menu. Denk aan twee afbeeldingen per knop: 1. hoe de knop er normaal uit ziet 2. hoe de knop er uit ziet als je er met je muis over heen gaat link meerder pagina’s aan elkaar



6

7

Typografie

8

Menu met CSS

stel de stijlen voor de typografie in: h1 (header, koptekst) p (paragraaf, alinea) a (link) hr (horizontale lijn)

Maak een div #knop a aan het CSS-venster Zet tekst linkjes in de div #menu

9

Verschillende pagina’s beheren link meerder pagina’s aan elkaar met behulp van een template pagina en Editable Regions

10 11 12

Zoekmachine optimalisatie

description

keywords

Content management systemen Zelf je website hosten Uploaden van je website

hosting



7

WEBSITEPLAN

ONTWIKKELEN VAN EEN INTERNET STRATEGIE Wat is een internetstrategie? De internetstrategie vormt het stappenplan waarmee de website ontwikkeld wordt.Een heldere internetstrategie omvat: • de doelen van de site ( Wat wil de opdrachtgever met zijn site bereiken?) • doelgroep(en) • de uitstraling ( look and feel) Het is van belang eerst vast te stellen wat de klant met de website wil bereiken. In de eindopdracht gaat het om een website voor een klasgenoot en waarvoor je een professionele website moet maken... Opdracht: Ontwikkel en schrijf een internetstrategie aan de hand van onderstaande beschrijvingen en vragen. 1. Formuleer het doel van de nieuwe website. Wat wil je met je website bereiken? Moet de website bijvoorbeeld verkopen, informeren, vermaken of een combinatie hiervan? Wat moeten de bezoekers van de site te weten komen? 2. Doelgroep Het vaststellen van doelgroepen is van groot belang voor het slagen van de website. Welke mensen of bedrijven vormen de belangrijkste doelgroep(en) voor je website? Jongeren, mannen, vrouwen en medewerkers van bedrijven?? Iedere doelgroep is gebaat bij een benadering op maat. De doelgroep bepaalt in grote mate wat de uitstraling van de website wordt, welke informatie er wel en niet op een website komt te staan en op welke manier een bezoeker wordt aangesproken. 3. De uitstraling Wanneer de doelen en doelgroepen bekend zijn, kan de uitstraling van website worden bepaald. De uitstraling is afhankelijk zijn van een huisstijl. Aangezien je dit bedrijf zelf opstart bepaal je dit ook zelf. Door bijvoorbeeld websites te bekijken van concurrenten kunt je achterhalen wat je website uit moet stralen of juist niet uit moet stralen. Opdracht: Schrijf je internetstrategie op minimaal 1 A4 en max 2 A4. Opdracht: Van de uitstraling maak je een ‘look and feel’ beeld op A3 formaat.



8

STAP 1 EEN FUNCTIONEEL ONTWERP VOOR DE OPDRACHTGEVER Als je een functioneel ontwerp maakt moet je kennis hebben over usability. De meest gangbare betekenis is gebruiksvriendelijkheid, het gebruik dus. Met andere woorden, de usability van een website geeft aan in hoeverre deze handig en snel te gebruiken is. Als je aan de slag gaat met een functioneel ontwerp, houd je dus rekening met de usabilty. Een functioneel ontwerp gaat uit van de internetstrategie die je gemaakt hebt. Het houdt dus rekening met het doel van de website en de doelgroep. Het stappenplan voor een functioneel ontwerp 1. Beschrijf zo goed mogelijk alle functionaliteiten die op de website terug komen. Doe dit door functionele schetsen te maken. Dit gebeurt voor elke pagina apart. Hierdoor wordt het functioneel ontwerp opgedeeld, en een stuk makkelijker te lezen. 2. Hoe ziet de navigatie structuur van uw website eruit? De navigatie structuur wordt duidelijk gemaakt met behulp van een sitemap. Een sitemap geeft de pagina’s in een website weer in een duidelijke hiërarchie. Het maken van een sitemap is een hulpmiddel bij het visualiseren van een website en de structuur ervan. HOME hoofdpagina’s

subpagina’s

producten categorie 1

vragen

contact route

categorie 2

3. Hoe wordt de pagina ingedeeld op basis van navigatie, decoratie en informatie? In de functionele schetsen wordt deze vraag beantwoord. Er wordt met behulp van kleuren aangegeven wat de specifieke functie is van een gedeelte in de functionele schets. Onder de schets geef je tekstueel aan wat de navigatie, decoratie en informatie elementen binnen de schetsen inhouden. Opdracht: maak een functioneel ontwerp en een navigatiestructuur. Dit kun je doen in InDesign



9

1. ONTWERP EN VORMGEVING INSPIRATIE Om websites te ontwerpen is het belangrijk goed naar andere ontwerpers te kijken. Je kunt bijvoorbeeld zoeken op website templates. Dan tref je duizenden voorbeelden. Hier kun je ook je eigen website ontwerp gratis kant-en-klaar downloaden en hoef je zelf eigenlijk weinig te doen. Nadeel is wel dat deze templates vaak een erg algemene uitstraling hebben en niet altijd passen bij de uitstraling die je voor ogen hebt als vormgever. Voor gratis templates kun je bijvoorbeeld terecht op: http://www.freewebtemplates.com. Het wel erg leerzaam om af en toe een template te downloaden om te zien hoe het site ontwerp is opgebouwd. Een van de grootste webdesign bureau’s van Nederland is het bedrijf Lost Boys (http://lbi.lostboys.nl/werk/projecten) Hier vind je een zeer grote hoeveelheid website ontwerpen van hoge kwaliteit. Kijk daar en laat je inspireren! TIP: Je hebt 3 seconden om indruk te maken op de homepage! Daarna zapt een bezoeker weg als: 1. onduidelijk is wat de site te bieden heeft 2. de pagina niet geladen is 3. de vormgeving niet aansluit bij de verwachting die de bezoeker heeft ONTWERP IN PHOTOSHOP Maak een ontwerp in Photoshop in overzichtelijke lagen en laag-groepen Afmeting = 994 x 768 pixels / 72 dpi / rgb Onderzoek wijst uit dat het grootste deel van de internet gebruikers werkt op een scherm dat minimaal 1024 x 800 pixels is. Het is dus erg gebruiksvriendelijk om je ontwerp binnen dat formaat te maken. Omdat een browservenster nog een adresbalk, zoekbalk en scrollbalk heeft, gaan er nog wat pixels van je beeldoppervlak af. Je komt dan op een ontwerp dat 994 bij 768 pixels is. Kleiner mag ook. Maak het ontwerp in overzichtelijke lagen en laaggroepen op basis van 1. de wensen van de opdrachtgever 2. de doelgroep 3. de mogelijkheden van een beeldscherm: muis cursor, scrollen 4. de mogelijkheden van een mobiel apparaat: vinger top

Webkleuren bestaan uit 6 cijfers en/of letters (A-F)

Denk eerst na over het menu: • horizontaal • verticaal • submenu • uitklap (rollout) menu (wordt niet behandeld in deze training)

#FFFFFF = wit #000000 = zwart #333333 = grijs

Bepaal vervolgens het stramien, zoals je dat ook bij drukwerk doet: • header • kolommen



10

STAP 1 • een home-pagina (aandachttrekker en inhoudsopgave) • een vervolgpagina (standaard tekst-beeld pagina’s) Bewaar afbeeldingen in jpg / gif / png (deze formaten zijn altijd 72 dpi en RGB) Bewaar de site door middel van segmenten/slices: Save for Web and Devices • gelijk aan de indeling in div’s • als losse afbeeldingen: - bewaar in de map: images - denk ook aan de rollover per knop - bewaar als: jpg / gif / png Let wel op dat je met de functie Save for Web de goede balans kiest tussen de kwaliteit en de bestandsgrootte van de afbeelding: • lage kwaliteit van jpg (onder de 70%) geeft een minder scherp en korrelig resultaat, maar wel een kleine bestandsgrootte (sneller laden van afbeelding) • hoge kwaliteit van jpg (boven de 70%) geeft een scherp resultaat, maar wel een flinke bestandsgrootte (langzamer laden van de afbeelding)



11

2. BASIS INFORMATIE VOOR HET BOUWEN VAN SITES Dreamweaver is te vergelijken met InDesign: • InDesign wordt gebruikt voor opmaak van drukwerk; • Dreamweaver wordt gebruikt voor het opmaken van websites • Bij InDesign wordt er gewerkt met illustratiekaders • Bij Dreamweaver wordt er gewerkt met DIV (divisions) • Bij InDesign wordt de vormgeving en typografie bepaald in Paragraph/ Character/Object stijlen • Bij Dreamweaver wordt de vormgeving en typografie bepaald in CSS (Cascading Style Sheets) De stijlen staan bij voorkeur in een CSS-document dat is gelinkt met een HTMLdocument. Zo bepaalt 1 css-document hoe alle html-pagina’s er uit komen te zien. Verandert er iets in het css-document, dan verandert dat in alle html-pagina’s. in bestandsnamen: • gebruik altijd onderkast-letters • gebruik geen ‘vreemde tekens’ en spaties • de eerste pagina (homepage) heet ALTIJD: index.html Document formaat in Photoshop: Totaal is de schermafmeting voor een website + browservenster: 1024 x 800 pixels Het ontwerp maak je in Photoshop op het formaat: 994 x 768 pixels • vanwege een scrollbalk die rechts er bij kan komen wordt de site 19 pixels minder breed • vanwege een zoekmachine balk die er boven bij kan komen wordt de site 32 pixels minder hoog BOX-model TOP margin LEFT

padding

DIV height

tekst of afbeeldingen

RIGHT width BOTTOM



12

STAP 2 HTML (hyper text markup language) Hypertekst en hyperlinks De basis eigenschap van HTML is dat deze hypertekst ondersteunt: documenten en bestanden die verbonden zijn door aanklikbare links, ook wel hyperlinks (in het Nederlands ook wel koppelingen) genoemd. voorbeeld HTML code inhoud van de tag

website inhoud

Opmaaktaal Daarnaast is HTML een opmaaktaal. Je kunt nadruk leggen in tekst, van kopjes, van indeling in paragrafen, van tabellen, en van plaatjes en multimedia. HTML bestaat uit platte tekst waarin met markeringstekens ( < >, groter-kleiner-dan tekens) is aangegeven hoe de tekst moet worden gelezen. Bijvoorbeeld als lijst of als koptekst. Zo’n markering wordt (naar het Engels) een tag genoemd. Hier is niet echt een goed Nederlands woord voor. HTML wordt meestal bekeken met een webbrowser, een programma dat HTML-documenten kan lezen en als opgemaakte tekst aan de gebruiker toont. Hieronder een voorbeeld van de HTML- code.

doctype: Hier wordt bepaald dat het een HTML pagina is.

(wordt hier geopend)

head - section Hier staat de naam van de pagina, de metadata voor zoekmachines, eventuele scripten en de link naar een css-document

(wordt hier geopend) <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> titel van de pagina (wordt hier gesloten)

body - tag Hier staat alle website inhoud. Dus alles wat zichtbaar moet zijn op de website

(wordt hier geopend)
Dit is de koptekst
(wordt hier gesloten) (wordt hier gesloten)

#container { width: 994px; height: 768px; margin-left: auto; margin-right: auto; background-color: #33ffc4; color: #cccccc; border: 1px solid #663cf2; } Dit is een blok (div) van: 994 pixels breed 768 pixels hoog links-rechts gecentreerd achtergrond kleur tekst kleur rand van 1 pixel in kleur

CSS (cascading style sheet) Cascading Style Sheets (afgekort tot CSS) zijn een mogelijkheid om de vormgeving los te koppelen van hun inhoud van webpagina’s. Er is dan 1 plek waar je de vormgeving regelt. Het Engelse “style” betekent “opmaak”. Het begrip “cascading” (als een waterval) verwijst naar het nesten van opmaakeigenschappen. De CSS-informatie voor de vormgeving van het document wordt toegevoegd aan de HTML-code. Die informatie mag in het HTML-bestand zelf staan (inline), maar ook in een apart bestand waar het html-document naar linkt. Een dergelijk extern bestand wordt ook wel stylesheet genoemd. Je kunt drie soorten styles vormgeven: 1. #div: een blok dat is te vergelijken met een illustratiekader in InDesign 2. .class: lijkt op een Div, mag meerdere keren op dezelfde pagina voorkomen 3. tag: een HTML-tag die je in vormgeving kunt aanpassen (body, h1, p, etc)



13

3. BASIS OPZET MAP VOOR HET MAKEN VAN EEN WEBSITE • hoofdmap: website (voor de hele website) • daarin een map: images (voor alle afbeeldingen) NIEUW DOCUMENT (bewaren in de hoofdmap website) Maak een nieuw HTML-document en bewaar als: index.html Vul bij title de titel van de pagina in (goed voor de zoekmachines) Maak een nieuw CSS-document en bewaar als: layout.css LET OP: Bewaar tijdens het werken steeds beide documenten (HTML + CSS) KOPPELEN CSS AAN HTML Klik linksboven op het tabblad: index.html (layout.css heb je even niet nodig) Klik in het CSS-STYLES venster op het ketting-icoontje Selecteer het document: layout.css index.html en layout.css zijn nu gekoppeld BOUWEN VAN DE SITE IN DIV’S 1. instellen van de de body is de inhoud van de website

Klik op de knop PAGE PROPERTIES (beneden in het scherm, properties-venster) Selecteer een pagina-font met bijbehorende kleur en grootte Geef een background color (achtergrond kleur) Zet alle margin op: 0 px (nul pixels) Je kunt in dit venster ook een achtergrond afbeelding instellen. Deze repeteert over de hele venster. Sleep in het CSS-STYLES venster de alle stijlen uit <styles> naar layout.css: body body, td tr Alle stijlen zijn nu verplaatst van index.html naar layout.css Zorg er op deze manier voor dat alle stijlen steeds in layout.css staan 2. stijlen van de eerste div: #container deze div zorgt dat de site altijd in het midden van de browser komt te staan

Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: ID (…) Voer bij SELECTOR NAME de naam van de ID in: container #container



14

STAP 3 Stel in het daarop volgende venster de div in: BACKGROUND: background-color: kies een kleur BOX : width: 994px; height: 500px; margin-left: auto; (alleen nodig bij de #container) margin-right: auto; (alleen nodig bij de #container) Klik op OK

De div #container is nu gestijld, maar staat nog niet in de pagina. Dat is de volgende stap: 3. invoegen van de eerste div: #container Klik in je bestand: index.html Ga in de menubalk naar INSERT / LAYOUT OBJECTS / DIV TAG Vul bij het veld ID in: container (die je kunt kiezen) De container verschijnt nu in de pagina INVOEGEN VAN OVERIGE DIV’S Klik in de div #container op je HTML-pagina Herhaal de stappen vanaf punt 2, maar dan met de div naam #header Breedte = even breed als de container, hoogte = 150 px TIP: Geef de div’s allemaal een andere achtergrond kleur. Dan kun je ze beter zien TIP: Zorg dat de breedte van de andere div’s past in de breedte van #container



15

UPLOAD JE DOCUMENTEN VIA SITE MANAGEMENT KIJK OP PAGINA 38 EN 39

Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 1-3 oefeningen voor de basis HTML



16

STAP 4 4. MARGES, PADDING EN FLOATEN MARGES Ruimte buiten om een Div

Je kunt de afstand tussen twee div’s instellen met behulp van de margin (tussenruimte). Bijvoorbeeld: margin: 10px; betekent dat er om de div 10 pixels tussenruimte is

Je kunt ook de tussenruimte per zijde bepalen: margin-right: 10 px; margin-left: 10 px; margin-top: 10 px; margin-bottom: 10 px; PADDING Ruimte binnen in een div

Je kunt de afstand binnen een div instellen met behulp van de padding (binnenruimte). Bijvoorbeeld: padding: 10px; betekent dat er in de div 10 pixels afstand is tussen de rand en de tekst of afbeelding

Je kunt ook de binnenruimte per zijde bepalen: padding-right: 10 px; padding-left: 10 px; padding-top: 10 px; padding-bottom: 10 px; FLOATEN Het naast elkaar plaatsen van Div’s in plaats van onder elkaar (standaard)

Dreamweaver plaatst verschillende objecten zoals afbeeldingen en DIV’s altijd onder elkaar. Om deze naast elkaar te krijgen maak je gebruik van de cssinstelling: float:left; Je kunt dit vergelijken met Text-Wrap uit InDesign. 1. stijlen van de div: #menu deze div staat onder de div #header

Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: ID (…) Voer bij SELECTOR NAME de naam van de ID in: menu Stel in het daarop volgende venster de div in: BACKGROUND: background-color: kies een kleur BOX : width: 994px; height: 30px; Klik op OK



17

De div #menu is nu gestijld, maar staat nog niet in de pagina. Dat is de volgende stap: 2. invoegen van de div: #menu Klik in je bestand: index.html Ga in via de menubalk naar INSERT / LAYOUT OBJECTS / DIV TAG Vul bij het veld ID in: #menu De menubalk verschijnt nu in de pagina onder de header 3. stijlen van de div: #content deze div staat onder de div #menu

Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: ID (…) Voer bij SELECTOR NAME de naam van de ID in: content Stel in het daarop volgende venster de div in: BACKGROUND: background-color: = kies een kleur BOX : width: 600px; height: 250px; padding: 10px; margin: 10px; Kies hier voor: float: left; Klik op OK #content

content

De div #content is nu gestijld, maar staat nog niet in de pagina. Dat is de volgende stap: 4. invoegen van de div: #content Klik in je bestand: index.html Zorg dat je muiscursor in de div #container staat Controleer dit via de split-view (cursor achter de voorlaatste
) Ga in via de menubalk naar INSERT / LAYOUT OBJECTS / DIV TAG Vul bij het veld ID in: content Klik op OK De div verschijnt nu in de pagina onder het menu Herhaal stap 3 en 4 met de div: #afbeelding Geef deze: BACKGROUND: background-color: kies een kleur BOX : width: 250px; height: 250px padding: 0px; margin: 0px; Kies hier voor: float: left; Op de homepage staan nu 2 div’s naast elkaar.



18

STAP 4 HET MAKEN VAN DE FOOTER Een website heeft ook meestal nog een footer. Daarin staan meestal nog enkele minder belangrijke knoppen, zoals Algemene Voorwaarden en Disclaimer. Ook de knop Home en Contact kom je daar vaak nog tegen. De footer maak je als volgt: 1. stijlen van de div: #footer deze div staat onder de div #content en #afbeelding

Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: ID (…) Voer bij SELECTOR NAME de naam van de ID in: footer Stel in het daarop volgende venster de div in: BACKGROUND: background-color: = kies een kleur BOX : width: leeg laten (neemt de breedte aan van de div #container) height: 30px; Kies hier voor: clear:both; Door de css-regel clear:both; wordt de float van de voorgaande div’s (#content en #afbeelding) weer opgeheven Klik op OK De div #footer is nu gestijld, maar staat nog niet in de pagina. Dat is de volgende stap:

#footer

2. invoegen van de div: #footer Klik in je bestand: index.html Zorg dat je muiscursor in de div #container staat Controleer dit via de split-view (cursor achter de voorlaatste
) Ga in via de menubalk naar INSERT / LAYOUT OBJECTS / DIV TAG Vul bij het veld ID in: footer Klik op OK footer

De div verschijnt nu in de pagina onder de twee div’s #content en #afbeelding Je homepage is nu klaar! Bewaar 3 andere pagina’s door middel van save as… en geef ze de paginanaam 1. producten.html 2. links.html 3. contact.html Zet op elke pagina een andere tekst/afbeelding in #content en #afbeelding. Open een van deze pagina’s in je browser Verander nu in de adresbalk de paginanaam in de paginanaam die je hierboven hebt bewaard. Je ziet nu de pagina inhoud veranderen telkens als je de naam in de adresbalk wijzigt. TIP: Pas zelf de kleur, hoogte en breedte aan van de verschillende div’s.



19


Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 4 oefeningen voor de basis CMS: padding, margin en floaten



20

STAP 5 5. AFBEELDINGEN INVOEGEN AFBEELDINGEN (jpg, gif, png) EN MEDIA (bijv. Flash SWF) INVOEGEN Zorg dat alle afbeeldingen en media die nodig zijn, in de IMAGES-map staan. Alle afbeeldingen zijn altijd 72 dpi en hebben RGB als kleurmodus. Het invoegen van afbeeldingen en media kan op drie manieren: manier 1 • zet je muiscursor op de plaats waar de afbeelding/media moet komen (meestal in een div). • klik in het menu op: INSERT / IMAGE of MEDIA • kies de juiste afbeelding uit je images-map Dreamweaver vraagt nu om een ALT-tag in te geven. Een ALT-tag is bedoeld voor mensen met een visuele handicap. Zij hebben vaak een speciale computer die ‘voorleest’ hoe de pagina er uit ziet. Ook afbeeldingen worden voorgelezen door middel van de beschrijving die in de ALT staat opgeslagen. Vul je niets in bij de ALT-tag, dan zal er gekozen worden voor het uitspreken van de bestandsnaam. Het is dus erg gebruiksvriendelijk om dit veld in te vullen, zeker als je verwacht dat er slechtziende gebruikers de site gaan ‘besluisteren’. manier 2 Indien je de website via de site-manager beheert, kun je via het venster ASSETS de afbeeldingen of media opzoeken en vanuit het venster slepen naar de juiste positie. manier 3 Via het PROPERTIES-venster kun je via het src-veld een afbeelding wijzigen. • zet je muiscursor op de plaats waar de afbeelding/media moet komen (meestal in een div). • klik op het gele mapje achter het src-veld en zoek de afbeelding of media. TIP: Als je in de CSS de hoogte van een div verwijdert, past de div zich in de hoogte aan, aan hoogte van de afbeelding. LET OP: Indien de ingevoegde afbeelding te groot of te klein is, kun je deze schalen door trekken aan de hoekpunten. Helaas is de kans groot dat je afbeelding niet mooi blijft. Deze wordt korrelig. Het beste kun je de afbeelding op maat maken in Photoshop. Daarnaast heeft Dreamweaver ook nog de mogelijkheid de afbeelding te bewerken. Ook deze mogelijkheden geven in Photoshop een veel beter resultaat. Foto’s bewerken kun je dus het beste in Photoshop doen. Let wel op dat je met de functie Save for Web de goede balans kiest tussen de kwaliteit en de bestandsgrootte van de afbeelding: • lage kwaliteit van jpg (onder de 70%) geeft een minder scherp en korrelig resultaat, maar wel een kleine bestandsgrootte (sneller laden van afbeelding) • hoge kwaliteit van jpg (boven de 70%) geeft een scherp resultaat, maar wel een flinke bestandsgrootte (langzamer laden van de afbeelding)



21

AFBEELDINGEN (jpg, gif, png) ALS ACHTERGROND GEBRUIKEN In Dreamweaver kun je heel eenvoudig patronen maken. Denk aan een patroon in de achtergrond van een webpagina. Je hebt hiervoor een (vrijstaande PNG) afbeeldingen die mooi repeteert. Probeer dit eerst uit in Photoshop of Illustrator. Klik op de knop PAGE PROPERTIES (beneden in het scherm, properties-venster) Kies de achtergrond afbeelding bij: background-image Klik OK Of voor een achtergrond in een div: Dubbel Klik op een div in het Styles-venster die je een achtergrond wilt geven BACKGROUND: background-image: kies een achtergrond afbeelding Klik OK Deze repeteert over de hele website Je hebt nog een aantal opties voor het instellen van de achtergrond afbeelding: 1. achtergrond afbeelding niet repeteren: background-repeat: no-repeat; 2. achtergrond afbeelding horizontaal repeteren: background-repeat: y-repeat; 3. achtergrond afbeelding verticaal repeteren: background-repeat: x-repeat; Indien je de afbeelding in Photoshop transparantie meegeeft en opslaat als png-formaat heeft de achtergrond kleur ook invloed op je afbeelding. Daar kun je mooie effecten mee bereiken. Test dit maar eens... animated GIF Dit is een apart soort afbeeldingsformaat waarmee je beweging kunt laten zien. Het is te vergelijken met Flash. In Photoshop kun je via het animatie-venster verschillende afbeeldingen (elke laag is een andere afbeelding) achter elkaar zetten en afspelen. Hierdoor ontstaat een eenvoudige animatie. Deze kun je bewaren als gif via Save for Web. De browser herkent dit formaat en zal het als filmpje afspelen. Veel geanimeerde banners in websites worden zo gemaakt. slideshow maken of effecten toevoegen Beweging en animatie toevoegen in je website doe je meestal om in je site meer dynamiek (beweging) te krijgen. Ook kun je het gebruikersgemak er mee bevorderen. Je kunt op verschillende manieren een slideshow of animatie-effecten toevoegen in je website: 1. via Flash (swf ) 2. via de animatie-tool in Photoshop (animated gif ) 3. in Dreamweaver met behulp van de effecten (venster Behaviours / effecten / …) LINKS OP AFBEELDINGEN Afbeeldingen kun je een link meegeven. Selecteer de afbeelding Vul in het Properties-venster bij Link een bestand of URL in. Als je de pagina test in de borwser zal je muiscursor in een handje (pointer) veranderen wanneer je over de afbeelding beweegt. Bij klikken zal de link worden geopend.



22

STAP 5 TIP: Je kunt ook een zogenaamde Image Map op je afbeelding plaatsten. Dit is een onzichtbaar gebied dat je zelf als vorm kunt tekenen. De muis herkent dit gebied als een knop. Zo kun je bijvoorbeeld een link over een deel van een foto leggen. Onder het Link-veld in het Properties-venster staat het Target-veld. Hiermee kun je een link in een nieuw venster openen (als een pop-up): Kies voor Target= _blank (er wordt een nieuw venster geopend) Standaard wordt een link in hetzelfde venster geladen TIP: Zoek de logo’s van de sociale media (Facebook, Twitter, etc). Zet deze als afbeelding in je website en koppel er de link naar je persoonlijke pagina aan.

http://www.facebook.com

UPLOAD JE DOCUMENTEN VIA SITE MANAGEMENT KIJK OP PAGINA 38 EN 39 Media Vormgever Grafische Vormgeving


23

6. EEN MENU MET AFBEELDINGEN BOUWEN VAN HET MENU IN DIV’S Invoegen van de knop Klik in je bestand: index.html Zorg dat je muiscursor in de div #menu staat. Controleer dit via de split-view. Ga • • • •

in via de menubalk naar INSERT / IMAGE OBJECTS / ROLLOVER IMAGE vul de knopnaam in kies de afbeelding van de eerste knop kies de roll-over afbeelding van de eerste knop geef aan waar de knop naar welke pagina moet linken (home = index.html)

Herhaal stap 3 voor de andere knoppen. Overschrijf de eerder aangemaakte 3 andere pagina’s door middel van save as… en geef ze de paginanaam 1. producten.html 2. links.html 3. contact.html Zet op elke pagina een andere tekst/afbeelding in de #container of #header, zodat je tijdens het klikken op de knoppen de pagina ziet veranderen. Je hebt nu een werkende website gebouwd. Het menu is nu opgebouwd uit rollover afbeeldingen (twee losse afbeeldingen). Het is ook mogelijk deze knoppen geheel uit CSS op te bouwen, met eventueel een achtergrond afbeelding. Deze manier is zeer flexibel. Je kunt zeer snel een knop er bij zetten en aanpassen aan de lengte van de knopnaam. Verwacht je vaak het menu aan te passen dan is het verstandig het menu volledig uit CSS op te bouwen. We behandelen dit in het hoofdstuk 8. TIP: Als je nog niet weet waar een link naar toe moet gaan, dan kun je in het PROPERTIES-venster bij link een # invullen. Het hekje zorgt dat de muis cursor de link herkent, maar nergens naar toe linkt.



24

STAP 6

UPLOAD JE DOCUMENTEN VIA SITE MANAGEMENT KIJK OP PAGINA 38 EN 39 Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 5 oefeningen met afbeeldingen invoegen en linken



25

7. TYPOGRAFIE Typografie in websites is voornamelijk afhankelijk van de fonts die internetgebruikers op hun computer hebben staan. Standaard is er een lijstje van fonts die iedereen met een computer bezit. Hierin is niet zoveel keuze en lastig als je de huisstijl van een bedrijf wilt behouden. Toch kun je met goede styling van de tekst al redelijk mooie resultaten bereiken. Je hebt altijd de mogelijkheid om bijvoorbeeld een koptekst of menuknop in Photoshop te maken. Dan is de tekst een afbeelding. Helaas is deze manier van werken weer niet zo handig voor zoekmachines en als je tekst wilt wijzigen. Tekst als een afbeelding wordt uiteraard niet herkend door een zoekmachine. Ook is er wel een manier om zelfs alle fonts te gebruiken die je maar wilt en herkend wordt door zoekmachines: Cufon (http://cufon.shoqolate.com/generate/). Voor deze methode is meer technische kennis nodig, maar de werking staat ook uitgelegd op de website. In de lesmap, bij VOORBEELD CODES, vind je de scripts van Cufon.

Er zijn 6 standaard kopjes heading 1

h

heading 2

h

heading 3

h

heading 4 h heading 5 h heading 6

h1

h

KOPTEKST Koptekst wordt standaard gemaakt door de tag: H(Header) H1 of H2 of H3 of H…. Hoe kleiner het getal, hoe kleiner het font. Deze koptekst, H’s, worden door een browser standaard herkend, ook als je deze nog niet gestijld is. Je kunt grofweg stellen dat corps 12 pt (punten) in drukwerk ongeveer gelijk lijkt aan de font-size: 12px (pixels) op het scherm. Een H1 is standaard: Times New Roman, bold, 36 pt. PARAGRAFEN Paragraaf tekst wordt standaard gemaakt door de tag: p (paragraaf ). Deze paragraaf tekst, dus p’s, worden door een browser standaard herkend, ook als je deze nog niet gestijld is. INVOEGEN VAN TEKST VANUIT ANDERE PROGRAMMA’S In Dreamweaver kun je tekst vanuit andere programma’s importeren. Het is belangrijk te weten dat veel tekstverwerkers stiekem ook HTML-code schijven wanneer jij een tekst typt of opmaakt. MSWord doet dit zeer regelmatig. Gewoonweg plakken vanuit MSWord in Dreamweaver zal veel typografische problemen geven. De stijlen die voor bijvoorbeeld de paragrafen en kopteksten die je hebt gemaakt worden overschreven. Om dit te voorkomen kun je gebruik maken van simpele tekstverwerkers, zoals Notepad (Windows) of TextEdit (MAC). Zij kunnen bewerkte teksten omzetten naar zogenaamde PLATTE TEKST. Alle stijlen worden er uit gehaald. Deze tekst plak je dan in de juiste div in Dreamweaver. Zo weet je zeker dat je typografische instellingen behouden blijven. Plakken in de CODE-WIEW helpt ook tegen ongewenste stijlen! STYLEN VAN DE TYPOGRAFIE Je kunt met behulp van Tag’s de typografie aanpassen en beheren. Handig voor vormgevers! Zet in een nieuw document eerst wat tekst. Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: Tag Voer bij SELECTOR NAME de naam van de tag in: h1 of h2 of h…. of p (paragraph) Media Vormgever Grafische Vormgeving


26

STAP 7 ALINEA / PARAGRAAF
broodtekst
BOLD / VET bold <strong>vet ITALIC / CURSIEF cursief

Je kunt op een aantal manieren de typografie bepalen met CSS: TYPE corps grootte: font-size: 12px; interlinie: line-height: 18px; vet gedrukt: font-weight: bold; tekst kleur: color: #000000; kapitalen: text-transform: uppercase; onderlijnen: text-decoration: none; BLOCK text-align: links/rechts/centreren uitlijnen TIP: Als je in de CSS de hoogte van de div #content verwijdert, past de div zich in de hoogte aan, aan de hoeveelheid tekst. OVERIGE TYPOGRAFIE Vreemde tekens of interpunctie (trema’s, apostrof, etc) kun je kiezen bij: INSERT / HTML / special characters Lijnen in een tekst kun je invoeren door: INSERT / HTML / horizontal rule en stylen met behulp van de tag: hr (horizontaal rule) Omtreklijnen, bijvoorbeeld als kader om div’s, kun je invoeren door: border: 1px solid #333; LINKS Links worden altijd in blauw en onderlijnd weergegeven. Dit kun je uiteraard naar eigen wens aanpassen met CSS. Niet onderlijnen van bijvoorbeeld links: text-decoration: none;

Je kunt ook tabellen maken in HTML en stijlen met CSS

tekst tekst

tekst tekst

Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 7 oefeningen met Typografie Media Vormgever Grafische Vormgeving


27

8. EEN MENU MET CSS STYLEN VAN LINKS EN MAKEN VAN EEN CSS-MENU Door een link hoogte en breedte te geven en een achtergrondkleur kun je van een link een knop maken. Open index.html en zet de muis in de div #afbeelding onder de foto. Typ hier een woordje. Bijvoorbeeld LINK of iets anders (dit wordt de knop naam) Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: compound Om te voorkomen dat je ALLE links in je website het uiterlijk krijgen van menuknoppen - bij een link in de tekst wil je dit bijvoorbeeld niet - is het verstandig om naar de a IN #afbeelding te verwijzen. Voer bij SELECTOR NAME de naam van de tag in: #afbeelding a Stel in het daarop volgende venster de tag in: BACKGROUND: background-color: kies een kleur BLOCK: display: block; BOX : (geen breedte omdat de knoppen zo breed worden als de div waarin ze komen te staan) height: 20px; Kies hier voor: margin-right: 10px; (geen float omdat de knoppen onder elkaar moeten komen) #afbeelding a

Je hebt nu een rechthoekige knop met een blauwe link daar in. Je kun deze link ook stijlen zodat de knop een geheel wordt. Dubbelklik in het styles-venster op a en zet in het venster nog de volgende code: TYPE color: #ffffff; font-size: 18px; font-weight: bold; text-transform: uppercase; text-decoration: none; BLOCK text-align: center; Je hebt nu een knop gemaakt via CSS. Zeer flexibel en met een achtergrond afbeelding kun je deze nog mooier maken. Open de CODE-VIEW van je document en selecteer de groene code: link1 (dit is de code voor een link. Het hekje staat hier voor een nep-link) Deze code kun je 4 keer dupliceren (kopie-plakken in de CODE-VIEW) zo ontstaat er een menu. Geef de vier knoppen een andere naam en link.



28

STAP 7 De code ziet er dan als volgt uit:

home producten links contact

Kijk nu in de DESIGN-VIEW. Je hebt nu vier gestijlde knoppen. Wel zie je dat de tekst PRODUCTEN buiten de knop valt. Je kunt de lengte van de knoppen aan passen aan de lengte van de tekst. Dubbelklik in het styles-venster op #afbeelding a en pas in het venster nog de volgende zaken aan: BOX maak het veld van de breedte leeg padding-left: 5px; padding-right: 5px; padding-bottom: 3px; Dit is de ultieme flexibele knop! Nu nog een mooie rollover…. Om de menuknoppen ook een rollover te geven maken we een nieuwe style aan met een andere achtergrond en tekst kleur. Klik in het CSS-STYLES venster op het paginaplusje-icoontje Selecteer bij SELECTOR TYPE: compound Voer bij SELECTOR NAME de naam van de tag in: #afbeelding a:hover (:hover = je praat tegen de rollover van een link) Stel in het daarop volgende venster de tag in: TYPE color: #ffffff; (of een andere kleur) BACKGROUND: background-color: kies een andere kleur Bewaar de pagina Test nu je pagina in een browser (de weergave in Dreamweaver kan verkeerd zijn). Als je het goed hebt gedaan, staat er nu een eenvoudig horizontaal, flexibel menu met rollovers! #afbeelding a:hover

Stijl zelf het menu in #footer TIP: Bekijk ook eens het advanced CSS-menu inde lesmap.




29

De website is nu bijna klaar! Uiteraard kun je zelf nog meer stijlen en alle pagina’s apart bewerken via je stylesheet. Uiteindelijk is het belangrijk dat je website goed gevonden wordt door zoekmachines. Hoe je de website zo optimaal mogelijk, zonder extra kosten, optimaliseert, leer je in het volgende hoofdstuk.

Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 8 oefeningen voor het maken van een menu



30

STAP 9 9. VERSCHILLENDE PAGINA’S BEHEREN Het ontwerp van de homepage verschilt meestal van de vervolg pagina’s. De homepage is een eerste spetterende indruk; de vervolgpagina’s bevatten informatie. Het basis ontwerp is over het algemeen wel hetzelfde. Je hoeft op de vervolgpagina’s dus maar kleine aanpassingen te doen. DE INDEX-PAGINA MEERDERE KEREN BEWAREN Open index.html en bewaar deze als: contact.html Vervang in contact.html de tekst in de div #content door je contactgegevens. Overschrijf de 3 eerder gemaakte pagina’s door middel van save as… Selecteer per knop en vul in het Properties-venster bij link: producten.html links.html contact.html De menu knoppen linken nu naar de zojuist bewaarde pagina’s Doordat we bij het aanmaken van de site het CSS-document (layout.css) hebben gekoppeld, zullen alle bewaarde pagina’s er hetzelfde uit zien. Door iets te wijzigen in CSS-document (layout.css), verander je dat voor alle pagina’s.

index.html

De gemiddelde website heeft meestal een flink aantal pagina’s met informatie of beelden. Als je iets wilt wijzigen in de basis van het ontwerp dan is het handig als je dit op 1 plek kunt wijzigen, in plaats van elke pagina apart te wijzigen. Denk aan de handige Master-pagina in InDesign waarop je de basis lay-out op zet voor alle pagina’s. Dit kun je doen met een zogenaamde Dreamweaver Template. GEBRUIK VAN DREAMWEAVER TEMPLATES Indien je iets wilt wijzigen dat op alle pagina’s moet wijzigen dan kost het veel tijd als je alle pagina’s moet openen, bewerken en opslaan. Dreamweaver biedt wel een oplossing hiervoor. De Dreamweaver Template (.dwt). Open index.html en bewaar deze als template. Hiervoor is het noodzakelijk dat je de website al in de sitemanager hebt aangemaakt (pagina 38 en 39). Update de links. Je template staat in een aparte map in je hoofdmap. Nu heb je een template bewaard waarin de vormgeving voor alle gekoppelde pagina’s in 1 keer is te wijzigen. Dus bijvoorbeeld: als in de template het menu een andere volgorde krijgt dan zal dit op alle andere pagina’s ook gebeuren. De gebieden die je per pagina wilt blijven wijzigen, zoals de div #content, geef je een speciaal label mee waardoor je dit gebied kunt wijzigen. Zo’n label heet een Editable Region. Nadat je de template hebt bewaard geef je aan welke gebieden je kunt blijven bewerken. Meestal is dit de div #content. Selecteer de div #content via het pad in de onderste vensterbalk Klik op INSERT / TEMPLATE OBJECT / EDITABLE REGION Geef het gebied een naam. De template is nu gereed. Vervolgens kun je de overige pagina’s gaan maken.



31

Klik op NEW Kies links in het venster voor: PAGE FROM TEMPLATE

Pas in de Editable Region (#content) de inhoud van de website aan en bewaar de pagina onder een andere naam. Doe dit voor alle pagina’s die nodig zijn voor de website. Pas vervolgens iets aan in de Template en bekijk alle pagina’s

Maak de oefeningen in de lesreader: T025_website_bouwen_oefeningen STAP 9 oefeningen voor het beheren van Templates en meerdere pagina’s



32

STAP 10 10. ZOEKMACHINE OPTIMALISATIE Om te zorgen dat zoekmachines, zoals Google, je website vinden zijn er een aantal eisen waaraan je site moet voldoen: 1. zorg voor een duidelijke titel (title). Hierin vooral hetgeen bezoekers kunnen vinden op je site: Wat doe/verkoop je? 2. maak gebruik van keywords (in de head-section). Dit zijn woorden die gaan over de inhoud van je website. Denk als vormgever bijvoorbeeld aan: grafische, vormgeving, ontwerpen, drukwerk, website, communicatie, kwaliteit, visie, professionele, typografie, huisstijl, boek, flyer, folder, logo, briefpapier, lay out, bestellen, kopen, maken

3. maak gebruik van description (in de head-section). Dit is een zin die gaat over de inhoud van je website. Deze wordt weergegeven in de lijst die een zoekmachine produceert. Denk als vormgever bijvoorbeeld aan: Duurzame Grafische Vormgeving | Professionele ontwerp kwaliteit op basis van uw visie in drukwerk en internet vormgeving: logo | huisstijl | affiche | folder | boek | website | nieuwsbrief

4. maak bij voorkeur gebruik van een CSS-menu. Dit is goed te lezen door zoekmachines. Een menu met afbeeldingen rollover (zie hoofdstuk 4) wordt niet geïndexeerd, omdat de knoppen afbeeldingen zijn en geen tekst bevatten. 5. zet altijd een pagina-titel op je pagina. Bij voorkeur gestijld als h1 (Heading1) 6. zorg altijd voor een stukje tekst op de homepage dat vertelt over inhoud van de site. De woorden die hier gebruikt worden versterken de zoekresultaten. Het is nog beter de teksten maandelijks aan te passen. Zoekmachines zijn gevoelig voor veranderingen op je site. Dit is vaak de reden dat nieuwsberichten op de homepage worden getoond. METADATA: KEAYWORDS INVOEGEN INSERT / HTML / HEAD TAGS / keywords METADATA: DESCRIPTION INVOEGEN INSERT / HTML / HEAD TAGS / description GOOGLE ANALYTICS Als je een Google -account hebt of Gmail-adres dan kun je via Google Analytics je site bij Google aanmelden. Dit is een overzicht van de hoeveelheid bezoekers op je site, ook wel site-statistieken genoemd. Nadat je de site (URL) hebt aangemeld krijg je een stukje code die je onderaan al je pagina’s moet zetten (voor de afsluitende body-tag). Gebruik hiervoor de CODE-VIEW. Deze code helpt ook een beetje bij de Google zoekmachine-optimalisatie en geeft je een mooi overzicht over de bezoekers op je site bij Google Dashboard.



33

11. CONTENT MANAGEMENT SYSTEMEN WERKING VAN EEN CMS Een Content Management Systeem (CMS) wordt gebruikt om een website makkelijk te kunnen beheren zonder dat de beheerder verstand hoeft te hebben van HTML of CSS. Je website bestaat met een CMS meestal uit drie onderdelen: 1. de frontend: de zichtbare pagina’s op het internet 2. de backend of admin: een beveiligd deel waarin de beheerder de frontend kan aanpassen. Denk aan het wijzigen van teksten en foto’s. 3. de setup: het beveiligde deel waarin de webbouwer de site opbouwt. Hierin bepaalt de bouwer welke modules (webshop, nieuwsberichten, fotobeheer, etc) actief zijn en wat de site beheerder in de admin kan wijzigen. TIP: Indien je wilt zien hoe een frontend en backend werken, kun je een gratis website aanmaken op www.mijneportfolio.nl. Je krijgt dan de beschikking over een eigen website met beheer (admin). In dit beheer kun je de voorkant van de website aanpassen. TYPO - JOOMLA - MODX - EN MEER Er zijn verschillende gratis CMS-systemen te krijgen. Deze zijn meestal bedoeld voor het opzetten van een weblog. Denk aan: GRATIS (flink puzzelen en complex om je vormgeving aan te koppelen) • Typo • Wordpress • Joomla • Drupal • Modx Je kunt ook een website CMS kopen. Bijvoorbeeld als je opdrachtgever veel technische eisen, zoals een webshop, heeft. Daarnaast, als je veel website opdrachten hebt, is het handig om een eigen CMS te bezitten dat je vaker kunt toepassen. Deze zijn verkrijgbaar vanaf ongeveer 150,00 per website (www. strawberrycms.nl). Deze prijs verreken je uiteraard in de prijs voor de website aan de klant. Je kunt dan ook in het zelfs CMS meerdere kant en klare modules toevoegen. Denk aan: • nieuwsberichten • webshop • gastenboek • links • agenda • boekhouding • fotoalbum en meer…. Googlen maar! BETAALD Snel inzetbaar en eenvoudig te koppelen aan je eigen vormgeving: • www.strawberrycms.nl en meer…. Googlen maar!



34

STAP 11 Hierboven het beheer van een website (backend). Deze pagina kun je alleen bereiken door middel van een wachtwoord. Je hebt, als eigenaar van de website, toegang tot het bewerken van pagina’s, uploaden van foto’s, aanmaken van links en het toevoegen van berichten. Ook grotere modules, zoals een webshop en forum, kunnen hierin ook worden bewerkt. Het bewerken van tekst gaat redelijk eenvoudig via een tekst-editor. De functies lijken veelal op de functies van algemene tekstverwerkers.

TIP: Je kunt gratis een tekst-editor downloaden: Tiny MCE googlen. Let wel op, je hebt hiervoor technische kennis nodig, zoals javascript, php en database



35

12. WEBSITE HOSTEN HOSTING Tijdens de lessen heb je de website op de webserver van school gezet. Deze is geldig gedurende je studie. De URL (webdesign.glu.nl/111111) is helaas wat minder voor de hand liggend dan bijvoorbeeld je eigen (bedrijfs)naam. Uiteraard kun je ook je eigen website hosten. Je zoekt via internet een geschikte en vrije domeinnaam (bijv. www.websitemotor.nl en veel meer via zoekmachines). Daarmee kun je dan een hosting pakket aanvragen. Gemiddeld betaal je ongeveer 45,- per jaar voor eenvoudige, stabiele hosting inclusief domeinnaam. Je hebt ook veel goedkopere hosting, maar daarvan is de stabiliteit vaak slechter. Zodra je de domeinnaam hebt aangevraagd ontvang je de ftp en mail-gegevens. Deze gegevens vul je dan in bij het site management, zoals je dat gewend bent met de gegevens van webdesign.glu.nl UPLOAD JE DOCUMENTEN VIA SITE MANAGEMENT Klik in het menu op SITE / MANAGE SITES of op Manage Sites in het Files-venster Klik op: NEW Vul een voor jouw herkenbare site naam in: website naam/klant Kies de map waar je de site aan het bouwen bent. Goed checken! Selecteer in het linker menu de optie: SERVERS Klik vervolgens op het plusje-icoontje Je vult de onderstaande gegevens in: server naam: ftp-address: username: password:

hosting-server ftp.domeinnaam.nl 111111 (gebruikersnaam: krijg je van je hostingbedrijf ) ***** (wachtwoord: krijg je van je hostingbedrijf )

Klik op de knop: TEST Als je alles goed hebt ingevuld is je computer succesvol gekoppeld met de server Klik 2 x op: SAVE en dan DONE Je kunt nu je website gaan uploaden naar jouw hosting server upload je bestanden door middel van het venster FILES Klap het files-venster open met het meest rechtse icoontje in dit venster Maak verbinding met de server: • in de linker zijde staan je bestanden op jouw hosting-server (remote host) • in de rechter zijde staan je bestanden op je computer (local host) Sleep nu de bestanden van je website van rechts naar links. Bij de meeste hostingbedrijven heet de websitemap: httpdocs of public_html of www Je website staat nu online! Deze kun je testen in de browser: http://www.domeinnaam.nl TIP: Steeds de bestanden naar de romote-server slepen kost veel tijd. Bij het sitemanagement (server / advanced instellingen) kun je instellen dat je bestand tijdens het bewaren ook direct wordt geupload.



36

STAP 12 E--MAIL ADRES AANMAKEN Vaak krijg je ook nog een e-mail account bij je url. Zo kun je de eigen info-adres aanmaken. Deze staat meestal niet standaard aan en moet je eerst activeren. Dat kun je doen in de zogenaamde Direct Admin van je website. In de Direct Admin kun je je hosting beheren. Je kunt bijvoorbeeld: • e-mailadressen toevoegen en beheren • een database toevoegen en beheren • statistieken van bezoekers bekijken Over het algemeen krijg je alle gegevens van je hosting bedrijf. Ook hoe je een mail adres moet aanmaken. Je benadert je Direct Admin via de browser: http://www.domeinnaam.nl:2222 (nummer kan anders zijn) TIP: Veel hosting bedrijven hebben op hun site een handleiding staan over het gebruik, werking en instellingen van jouw hosting pakket.



37

UPLOADEN VAN JE DOCUMENTEN VIA SITE MANAGEMENT (FTP) Klik in het menu op SITE / MANAGE SITES of op Manage Sites in het Files-venster Klik op: NEW Vul een voor jouw herkenbare site naam in: website naam Kies de map waar je je site aan het bouwen bent. Goed checken!

Selecteer in het linker menu de optie: SERVERS Klik vervolgens op het plusje-icoontje Je vult de onderstaande gegevens in: server naam: ftp-address: username: password:

glu-server webdesign.glu.nl/111111 (studentnummer achter de slash) 111111 (studentnummer) ***** (wachtwoord)

Klik op de knop: TEST Als je alles goed hebt ingevuld is je computer succesvol gekoppeld met de server Klik 2 x op: SAVE en dan DONE Je kunt nu je website gaan uploaden naar de glu-server.



38

UPLOADEN Upload je bestanden door middel van het venster FILES Klap het files-venster open met het meest rechtse icoontje in dit venster Maak verbinding met de server: • in de linker zijde staan je bestanden op de school-server (remote host) • in de rechter zijde staan je bestanden op je computer (local host) Sleep nu de bestanden van je website van rechts naar links (bovenop het mapje van je studentnummer) Je website staat nu online! Deze kun je testen in de browser: http://webdesign.glu.nl/111111/ TIP:Test je website altijd in meerdere browsers. door foutjes in je CSS kan je website er in verschillende browsers anders uit zien. Veel uitproberen en oefenen.... Verbinding met de server maken

FILES-venster groter-kleiner maken

sleep je files om te uploaden en te downloaden

SERVER

JE COMPUTER

TIP: Als je geen Dreamweaver hebt, kun je ook van het gratis FTP-programm FileZilla gebruik maken om je files online te zetten. Je vult dan dezelfde gegevens in, zoals hiernaast staat beschreven. In FileZilla kun je helaas geen HTML en CSS documenten bewerken. Daarvoor heb je toch een editor, zoals Dreamweaver nodig. Je hebt ook gratis editors, maar hiervoor dien je zelf de HTML en CSS code te beheersen. Je kunt eens zoeken naar: Crimson Editor



39

..en als je hele werkwijze van het bouwen van een website begrijpt, kun je de HTML en CSS zelf gaan typen. Werkt uiteindelijk sneller...

CSS + DESIGN-VIEW Je kunt zelf de CSS typen. Dreamweaver helpt je daarbij met aanwijzingen. Als je vaker websites gaat bouwen zul je merken dat typen veel sneller en eenvoudiger gaat dan de stappen volgens Dreamweaver. Hiervoor heb je wel wat ervaring nodig in het lezen en schrijven van CSS.



40

TIP: Alle CSS Stijlen op een rijtje en meer info...? http://www.w3schools.com/CSS/css_reference.asp

HTML IN CODE-VIEW Een div wordt altijd geopend: Dan volgt de inhoud van de div: Vervolgens wordt de div gesloten:


tekst en beeld


41

Notities



42

NOTITIES Media Vormgever Grafische Vormgeving


43



44

studentengids Media Vormgever Grafische Vormgeving training 025 Website Bouwen Met Adobe Dreamweaver en Adobe Photoshop leerjaar 2 t 025 versie 001

Recommend Documents

Dit is de koptekst