Les 7

We hebben nu nog 6 lessen te gaan.

Les7
Nog wat CSS
En een Slice oefening

Les8
SEO
en terug naar Dreamweaver.

Les 9 t/m 12 werken aan de site
FTP



Nu hebben we een vormgeving wat doen we er nu mee:

-we gaan in Fireworks de boel slicen en/of indelen in rechthoeken.

Huh?

Ok.....in de laatste les hebben we gekeken naar de kracht van CSS en geleerd dat CSS tegenwoordig gewoon standaard is.

Wel nu......in CSS deel je je pagina's in rechthoekige containers genaamd DIV's.

Wat is een DIV?
Div staat voor de afkorting division, het is eigenlijk een bijzondere paragraaf.
Het is fijn om een pagina of textvlak precies te positioneren of bijvoorbeeld iets een bepaalde grote mee te geven.
Met div's kun je gedeeltes van je pagina namen geven, die je later kunt gebruiken in bijvoorbeeld CSS of JavaScript.

Vroeger werd een opmaak in tabellen gemaakt.....tegenwoordig dus met DIV's
Tabellen zijn namelijk bedoelt om Data mee weer te geven en niet als vormgevings gereedschap.

CSS wordt van boven naar beneden opgebouwd. Dus je begint bij de Header van de pagina en eindigt met de footer.

Om Fireworks te laten weten dat je een Div wil, plaats je om de desbetreffende ruimte een rechthoek (mag onzichtbaar)
Als je wilt dat Fireworks voor jou DIV’s aanmaakt, moet je die DIV markeren met behulp van een rechthoek. Deze rechthoek hoeft niet perse zichtbaar te zijn, hij moet wel een naam hebben. Deze naam wordt later namelijk de naam van de DIV.


Filmpje

Nog een tutorial:
http://www.adobe.com/devnet/fireworks/articles/smart_css.html

http://layersmagazine.com/fireworks-cs4-css-export.html

Regels:(plak word doc hier)

-Probeer je ontwerp zoveel mogelijk op te delen in rijen en colommen
-Zorg dat slices en DIVrechthoeken elkaar niet overlappen.
-In het filmpje zagen we dat het geven van namen aan de rechthoeken HEEL belangrijk is.
De rechthoeknamen worden namelijk netjes mee ge-exporteerd.
-Alle plaatjes dienen in slices te worden geplaatst.

Alle regels
Hieronder het een en ander nog eens heel duidelijk uitgelegd.

http://www.adobe.com/devnet/fireworks/articles/smart_css.html

Voor iedereen die zelf CSS coding wil leren, hier is een goede tutorial.
http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout

Resume van Adobe (BELANGRIJK)


Huiswerk: maak de vormgeving van je site af, dan kunnen we die gaan exporteren naar HTML en CSS. Daarna kunnen we ons bezig gaan houden met de inhoud van de site.

Les 6

CSS



CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Het betekent allemaal hetzelfde in ieder geval.



Wat is CSS?
http://nl.wikipedia.org/wiki/Cascading_Style_Sheets

Minicursus CSS
http://www.webmasterstart.nl/css/wat-is-css.html

Alles over CSS
http://www.w3schools.com/css/css_intro.asp

Redenen om CSS te gebruiken:
1. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft.

2. CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is.

3. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden.






CSS kan op 3 manieren worden gebruikt



Effect van CSS op een site.....deze site laat zien hoe je vormgeving totaal veranderd kan worden met behulp van CSS:
http://www.csszengarden.com/

Hoop gedoe?

Werk netjes in Fireworks......en het meeste wordt voor je gedaan:
http://layersmagazine.com/fireworks-cs4-css-export.html




http://www.smartwebby.com/free_tutorials/CSS_website_design_guide/adobe_fireworks_CS4_tutorials/fireworks_website_design.asp http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

les 5

Typografie

Typografie omvat het zetten, drukken en vormgeven van teksten, voor functionele en esthetische doeleinden.
Typografie dient rekening te houden met het medium en doel van de geschreven teksten. Deze stellen verschillende eisen voor leesbaarheid en opvallendheid.

Typografie is dus tekstuele vormgeving.

Daarbij let een typograaf op (van wiki):

• de zetbreedte (regellengte): de breedte van een tekstblok of kolom. De typograaf let daarbij op het maximum aantal tekens of woorden per regel. Bij een tekst met te lange regels moet het oog van de lezer namelijk een te grote afstandssprong maken van het eind van de regel naar het begin van de volgende. In het algemeen worden maxima gehanteerd van gemiddeld ca. 85 tekens (inclusief spaties en leestekens) of van gemiddeld twaalf woorden.

• de diverse lettergroottes (corpsen) en -soorten. Door een combinatie daarvan (naast onder andere kleurgebruik) kan de typograaf de diverse tekstelementen visueel onderscheidend maken en daarmee de inhoudelijke hiërarchie goed visualiseren en ordenen. Letterfamilies bestaan uit diverse lettersoorten, meestal minimaal :
  -romein (normaal)
  -vet
  -cursief
  -vet-cursief.
  Er zijn ook uitgebreide letterfamilies, die dan bijvoorbeeld als extra lettersoort vet-cursief, halfvet, extra vet, versmald en verbreed hebben.
• de interlinie: het wit tussen twee regels.
• de regelafstand: de grootte van de letter (het corps) opgeteld bij de grootte van de interlinie. (Voorbeeld: corps 10 punt + 4 punt interlinie geeft een regelafstand van 14 punt.)
• de spatie-breedte: het wit (de ruimte) tussen twee woorden.
• het gebruik van initialen = al dan niet sier-kapitaal van een groter corps aan het begin van een hoofdstuk, in een andere (traditioneel rode) kleur.
• het gebruik van kapitalen (hoofdletters), kleine kapitalen en onderkast (kleine letters als deze)
• de letterspatiëring: het wit tussen de letters onderling
• de gebruikte letterfamilie(s) (lettertypen).
• de leestekens
• de verhoudingen tussen de marges rond het tekst-blok
• het vaste (verticale) tussenwit (bij meerdere kolommen)
• het bijeenblijven van inhoudelijke 'eenheden'

Voor verschillende doeleinden, gebruik je andere lettertypen.

-Krant is vaak gedrukt in een schreef letter (Times New Roman)

-Op een scherm leest een schreefletter niet prettig, omdat het dan lijkt alsof de letters aan elkaar vast gegroeid zijn. Dus een schreeflose letter voor het scherm (Arial, Tahoma)......

-Een poster mag opvallend zijn en kan dus gebruik maken van de vreemdste lettertypen.

Typography filmpje:



Typografie volgens de Wiki.

Een pagina kan worden onderverdeeld in kolommen en een kolom in paragrafen.

Enkele begrippen:

Kerning

Kerning (overhang in het nederlands) is visueel aanpassen van de witruimte tussen twee letters.

Voorbeeld van slechte kerning




Tracking:


Tracking is de algehele horizontale spatiëring van een stuk tekst. Met tracking beïnvloed je de densiteit van een tekst in de breedte.






Leading is interlinie:

Wat regels voor goede typografie en prettige leesbaarheid:

-Lange zetregels zijn overbodig en ongewenst. Lange zinnen zijn vermoeiend voor de ogen. gebruik kolommen
-Zorg voor voldoende contrast met de achtergrond.
-Wees zuinig met KAPITALEN (hoofdletters). Lezen irritirend
-Zorg voor duidelijke verschillen in Titels, subtitels en het artikel zelf.
-Gebruik niet teveel (liefst 1) font per pagina.
-Vermijdt zo veel mogelijk het centreren van complete stukken tekst.

Regels zijn er om gebroken te worden.......dus als het smaakvol gedaan wordt....


Voorbeelden van slechte typografie.

Kunst met Typografie:












Typografie in vogelvlucht





Typografische annimaties:
Pulp Fiction
Fear Loathing





Algemene regels omtrent typografie en leesbaarheid.
http://www.usabilityweb.nl/2005/05/typografie-en-leesbaarheid/

Niet alle fonts zijn beschikbaar op elke computer. Aangezien de browser gebruik maakt van de op de clientmachien aanwezige fonts, is het dus zaak om standaard (web safe) fonts te gebruiken
http://www.stoerebinken.net/kennisbank/typografie/web-safe-fonts

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Het is tegenwoordig wel mogelijk om de gebruiker een font te laten downloaden, maar gebruikersvriendelijk is dat niet. De meeste gebruikers willen immers helemaal niet iets downloaden voordat men een pagina mag/kan lezen. Tevens zit er op fonts ook copyright.

10 goede tips voor typografie op het scherm.
Check ook ff de links onderaan.
http://www.computerfaq.be/website-maken/10-typografie-regels-voor-webdesigners/

Meer over typografie
http://ilovetypography.com/

Em?
http://en.wikipedia.org/wiki/Em_%28typography)

Hoe pas je dit nu toe op een internet site?

Vroeger ging dit binnen HTML, echter was dit allemaal zeer beperkt.

Tegenwoordig wordt dit vastgelegd in CSS.
Waarover volgende week meer.