September 2009
Highpotech IT
Nieuwsbrief Een webpagina bouwen Indit nummer •
Maak een webpagina met
•
Gebruik CSS om deze op te maken
•
Volg een proefles en zie hoe het werkt.
Een website wordt weer-
van de verhoudingen
gegeven op een beeld-
dicht in de buurt van de
scherm Dit is het kader
Guldensnede liggen. Het
voor elke site die we be-
indelen van een dergelijk
kijken. De verhoudingen
vlak kan theoretisch elk
van dat kader variëren.
mogelijke manier. Maar
Wat echter een vast ge-
een verdeling die over-
geven is dat de beeld-
eenstemt met de gulden-
schermen die als regel
snede voelt natuurlijker
worden gebruikt hebben
aan, en heeft een zekere
een verhouding van 4:3
esthetische voorkeur.
3:2 OF 16:9 ( zie beeldverhoudingen ) Een liggende rechthoek waar-
Piet Mondriaan Wie zoekt naar een
te verhoudingen als uit-
verzameling en ander-
mooie vlakverdeling kan
gangspunt nemen voor
zijds met een ontwerp.
het werp van Piet Mon-
zijn pagina indeling.
Een verzameling kan
driaan eens als bekijken
Het bouwen van een site
van alles zijn. Tekenin-
en de door hem gebruik-
begint met enerzijds een
gen, foto ’ s, video, arti-
Nieuwsbrief
kelen of combinaties daarvan. Door vorm en inhoud op elkaar af stemmen kunnen we de impact van de pagina nog eens vergroten. Wie verschillende tijdschriften naast elkaar legt zal zien dat lettertype, kleur en vlak verdeling Bijschrift bij afbeelding.
samen de stijl van het tijdschrift bepalen. Deze dient dan ook nog eens te worden afgestemd op de smaak en trends van het publiek dat het wil bereiken. U zult begrijpen dat een goede website geen zaak is van simpel wat plaatjes op een scherm zetten en er wit tekst bij
U zult begrijpen dat
plaatsen. Een gedegen opleiding en markt onderzoek, vormen daarom de
een goede website
basis van elke professionele publicatie.
geen zaak is van
Of dat nu in de vorm van gedrukte me-
simpel wat plaatjes
bpagina en de omschrijving van de vormgeving gescheiden is. Om deze workshop te kunnen volgen hebt u de het Programma Dreamweaver nodig en een afbeelding van ca 300 bij 200 pixels. Deze workshop bestaat uit twee delen. Allereerst bouwen we de webpagina. Daarna gaan we ons pas bezighouden met de opmaak. Heeft u niet de beschikking over Dreamweaver en u wilt dit toch eens uitproberen vraag dan eens een proefles aan. Tijdens deze proefles laten we u stap voor stap zien hoe u deze webpagina bouwt en krijgt u een beeld van het gemak waarmee u met Dreamweaver een webpagina kan bouwen
dia is of in de vorm van een website. Als u uw eigen website gaat bouwen zult u het noodgedwongen zonder deze achtergrond moeten doen. Daarom geld vaak het adagium beter goed geleend dan slecht gemaakt. Wie een leuke verzameling ontwerpen zoekt zou tenminste eens moeten kijken op FreeCssTemplates.org Hier zijn meer dan 400 ontwerpen te vinden die u mag gratis mag gebruiken. De ontwerpen zijn allemaal gebaseerd op Cascading Style Sheets ( CSS) . Dit is een techniek waarbij de inhoud van de we-
Pagina 2
Onze website
Hoofdstuk I zien. Bijvoorbeeld : Welkom op mijn De bouw van de pagina Wie nog nooit een website gebouwd heeft zal het niet gemakkelijk vinden om met deze sjablonen aan de slag te gaan. Vandaar dat ik en deze nieuwsbrief een pagina ontwerp laat zien en de wijze waarop deze van ontwerp tot realisatie tot stand komt. Het kant en klare ontwerp vind u op hier >>Bij het bouwen van deze pagina maken we gebruik van Dreamweaver. Wie een goed boek over het gebruik van Dreamweaver zoekt zou eens een kijkje kunnen nemen op de site van Peter Kassenaar. Uiteraard maken we tijdens onze opleiding web design gebruik van dit boek en krijgt u van ons de gelegenheid om te werken met Dreamweaver. Alvorens we een pagina kunnen maken moeten we een site creëren. In hoofdstuk 2 van het Dreamweaverboek kunt u lezen hoe u dat doet. Daarna beginnen met een nieuwe lege HTML pagina. Kies onder Create New de optie HTML. Het ontwerp is bewust eenvoudig gehouden en bestaat uit een tabel met 2 colommen en slechts 1 rij. Allereerst vullen de titel van de pagina in. Hier vervangen we de tekst Untitled Document door de tekst die we in de titelbalk van de Internet Explorer willen Pagina 3
website. Het is nu tijd om de pagina op te slaan. Klik op File en kies Save. Deze eerste pagina krijgt de naam index.html. Alle voorbereidende handelingen zijn nu klaar en we kunnen gaan beginnen met ontwerpen. Uit het menu kiezen we de optie Insert en vervolgens de optie Table. In het dialoogvenster dat nu verschijnt kunnen we het gewenste aantal rijen en kolommen invullen. ( Rows : 1 en colums : 2 ) . Achter de optie Table width zetten we de waarde 85 en selecteren dan voor de optie Percent in plaats van Pixels. Klik daarna op OK. Op het scherm verschijnt nu een tabel met twee kolommen. De breedte van deze tabel zal zich aan de breedte van het venster van de gebruiker aanpassen en 85% van de breedte van het venster omvatten. Dus ook als de gebruiker de webpagina in een klein venster bekijkt, of beschikt over een groot beeldscherm. De breedte is steeds 85% van het venster. Om te zorgen dat de tekst en afbeelding netjes in het midden van het scherm staat geven we bij de eigenschappen van de tabel op dat deze in het midden moet worden uitgelijnd. ( Align : Center ) . Is het venster met de tabel eigenschappen niet zichtbaar
Het ontwerp is bewust eenvoudig gehouden
Nieuwsbrief
kies dan voor de menukeuze Win-
de tabel ( Table Id ) . Met behulp van
dow en klik op de opties Proper-
deze eigenschap kunnen we de tabel
ties. Onder het werkvenster ver-
een gemakkelijk te onthouden code
schijnt nu het eigenschappenven-
meegeven waar we later gemak van
ster. Ziet u de eigenschappen van
kunnen hebben. Vul hier iets in als
de tabel niet in dit venster verschij- MainTable of geeft een naam op die nen klik dan op de rand van de tawww.highpotech.it
beter bij uw gewoonten past. Let op!
bel om deze te selecteren. De tabel Houdt het kort en gebruik alleen letters behoeft nog enkele aanpassingen.
en cijfer, maar GEEN leestekens en
Zo willen we voorkomen dat de
spaties. Anders dan bij het gebruik in
tekst en de afbeelding elkaar ra-
Windows maakt het hier wel uit of u
ken. Ze dienen enige afstand ten
hoofd-, en/of kleine letters gebruikt. De
op zicht van elkaar te bewaren. Dit tabel is nu klaar voor gebruik. kunnen we bereiken door de Pad-
Plaats de cursor in de linker cel van de
ding van de tabel in te stellen. Pad- tabel. ( Klik eenvoudig in de gewenste ding is de ruimte die de tabel in el-
cel om dit te bereiken ) . U typt nu de
ke cel aanhoud als een soort mar-
tekst WELKOM, gevolgd door ENTER.
ge waarin geen tekst of andere za- Hierna kunt u een korte omschrijving ken kunnen worden geplaatst. Te
typen waarin u beschrijft waar de inter-
vergelijk met de marge van een
netter is beland. Vervolgens selecteert
tekst document. We stellen de
u de kop boven de tekst ( W elkom ) .
waarde achter CellPad in op 15
Het selecteren kan met behulp van de
( p ixels ) en drukken op ENTER.
muis of met de pijltjestoetsen terwijl u
Hiermee bevestigen we de inge-
de shit toets ingedrukt houd. Klik op de
voerde waarde. De hoogte van ta-
menukeuze Insert en kies de optie Lay-
bel wordt nu aangepast. Tenslotte
out Objects en van het submenu dat
zetten we de waarde H van de ta-
verschijnt de optie Div Tag. Er ver-
bel ( die staat voor de hoogte ) op schijnt nu een dialoogvenster. Achter 600 pixels. Dit komt ongeveer over- Insert leest u Wrap around Selection. een met een 15 inch beeldscherm. Achter het wordt Class vind u de curEen andere eigenschap die we
sor. Type hier het wordt titel, en klik op
gaan aanpassen is de identiteit van OK. Rondom het woord Welkom staat
Pagina 4
nu een gestippeld blokje. Het zelfde
heeft geklikt verschijnt de afbeelding op
gaan we nu doen met de tekst die u er
uw scherm en zult u teven zien dat de
onder heeft geschreven. Dus Tekst se-
tabel zich aan de nieuwe informatie
lecteren, Insert -> Layout Objects ->
heeft aan gepast. Heeft u een afbeel-
Div Tag. Dit keer schrijven we achter
ding gekozen die aanzienlijk groter is
de Class de tekst platte_ t ekst. We
dan de hier genoemde waarden, dan
hebben nu twee teksten van een ge-
kan deze een veel te groot deel van uw
makkelijk te onthouden omschrijving
scherm beslaan. Kier een andere af-
voorzien. Dit komt straks van pas als
beelding of pas de grootte van de af-
we het uiterlijk van deze tekst willen
beelding aan met een programma als
aanpassen.
Paint.
We plaatsen nu de cursor in de rechter
Zo langzaamaan is het nu tijd om eens
cel. Schik niet. De tabel past zich aan
te kijken hoe deze pagina er uit gaat
en het lijkt alsof er van alles fout ge-
zien. Druk op de functie toets F12. Als
gaan is. ( Iets fout gedaan? U kunt
de pagina nog niet was opgeslagen,
stap voor stap terug met de toetscom-
vraagt Dreamweaver dit aan u. Klik op
binatie CTRL+Z ) We kiezen weer
OK. Uw Internet Explorer wordt geo-
voor de menukeuze Insert en vervol-
pend en de door u gemaakte pagina is
gens voor de optie Image. Opnieuw
zichtbaar als stond hij al op het inter-
opent zich een dialoogvenster. Blader
net. Het zal u misschien opvallen dat
nu naar de plaats waar u de afbeelding
de tekst ten opzichte van de afbeelding
van 300 bij 200 pixels heeft opgesla-
teveel ruimte in beslag neemt. We
gen en selecteer deze. Al u op OK klik
gaan dit corrigeren. Maakt u het ven-
is het mogelijk dat Dreamweaver u
ster van uw Explorer ( v eel ) smaller
Schik niet. De tabel past zich aan en het lijkt alsof er van alles fout gegaan is
waarschuwt. Klik op OK. In een tweede dan zal tekst in een steeds smallere dialoogvenster kunt u een alternatieve
kolom worden weergegeven, en ver-
tekst invoeren. Deze is bedoeld om
plaatst de afbeelding zich netjes naar
degenen die visueel gehandicapt zijn,
links. Hoe breder het venster hoe meer
en een voorleesmodule aan hun pc
ruimte de tekst kolom krijgt. Dit effect
hebben gekoppeld te horen wat de af-
treed op omdat we niet een vaste
beelding moet voorstellen. Wij vullen
breedte aan onze tabel gegeven heb-
hier de tekst Logo in. Zodra u op OK
ben, maar een percentuele ( 85% ) .
Pagina 5
blog.highpotech.it
Nieuwsbrief
Als het venster van de Explorer
ster. Achter de optie Vert staat de tekst
smaller gemaakt wordt, verplaats
Default. Dit wijzigen we in Top. In de
de afbeelding zich niet alleen naar
rechter cel klikken we naast de afbeel-
links, maar ook steeds verder naar ding en herhalen we de zelfde handeonder. Ook dit gedrag kunnen we
ling. Hier veranderen we bovendien de
veranderen. We sluiten het venster instelling achter Horz. In plaats van Dehttp://www.4templates.com/
van de Explorer en keren weer te-
fault kiezen we hier Center. Drukken
rug naar Dreamweaver.
we weer op F12, dan zult u direct het
De eerste aanpassing is de ver-
verschil zien de afbeelding blijft boven
houding tussen de breedte van de
aan staan als u het venster
tekst en de ruimte voor de afbeel-
( e xtreem ) verkleint, en de verhou-
ding. Op het scherm is midden op
ding tussen de tekst en de afbeelding
het scherm de dubbele getippelde
is verbetert. Sluit het venster van de
lijn te zien die de afscheiding vormt Explorer, en keer terug naar Dreamtussen de linker en rechter cel van
weaver.
Het is tijd om de
onze tabel. Als we de muis aanwij- Het is tijd om de laatste hand te leggen
laatste hand te
zer er boven plaatsen zal deze ver- aan onze pagina.
leggen aan onze
naderen in een dubbele streep met Allereerst klikken we naast de afbeel-
pagina.
een weerszijden en pijltje. Hud nu
ding in de rechter cel, en drukken op
de linkermuisknop ingedrukt en
ENTER. Allereerst gaan we wat tekst
sleep deze naar links. Zodra u de
plaatsen onder de afbeelding. Ik het
muisknop los laat zal onder de ta-
gekozen voor de tekst op weg naar uw
bel een indicatie verschijnen die
toekomst. Druk op enter voor een nieu-
aangeeft war de breedte verhou-
we regel. Kies de menukeuze Insert en
ding tussen de linker en rechter cel kies de optie HTML. Uit het submenu is. Probeer deze op 40% links en
kiezen we de optie Horizontal Rule.
60% rechts in te stellen. Voor de
Hiermee zetten we een nette lijn onder
tweede aanpassing moeten we de
onze afbeelding. Klik achter de lijn en
cellen afzonderlijk selecteren. Klik
druk op ENTER voor een nieuwe regel.
ergens in de tekst links en wijzig de De cursor staat u midden onder de afhttp://www.4templates.com/
Pagina 6
instelling van deze cel in het Pro-
beelding. De cel dirigeert immers alles
perties scherm onderaan het ven-
naar het midden. Typ hier de tekst
Nieuwsbrief. Selecteer de tekst en kies uit het menu de keuze Insert. Bij de optie Layout Objects kiezen we weer de optie Div Tag. Dit maal noemen we de Class : Menu en klikken op OK. Laat de tekst ( nieuwsbrief ) geselecteerd en type achter de optie link in de properties de tekst http:// www.highpotech.nl en druk op ENTER. Onder de tekst verschijnt nu een doorlopende streep die aan geeft dat we hier een hyperlink gecreëerd hebben. De pagina is klaar, maar is natuurlijk nog niet af. Wilt u zien hoe hij er nu uitziet druk dan op F12 voor een voorproefje. Wie de pagina vergelijkt met het voorbeeld waarnaar ik aan het begin van deze nieuwsbrief verwees, zal opmerken dat de tekst nog steeds niet op gemaakt is. In het tweede deel van deze nieuwsbrief gaan we daar aan werken.
Pagina 7
Nieuwsbrief
Hoofdstuk II nier van naamgeving past. In het cenOpmaak In dit tweede deel gaan we ons bezighouden met de opmaak van de pagina. Hierbij maken we gebruik van een Cascading Style Sheet. Dit is een document dat beschrijft hoe de verschillende onderdelen van een webpagina of website moeten worden opgemaakt. Het belangrijkste voordeel van deze aanpak is de mogelijkheid de opmaak van een pagina of zelfs een hele website aan te passen zonder dat de pagina zelf veranderd behoeft te worden. Het allereerste dat moet gebeuren is het aanmaken van een CSS bestand. Met Dreamweaver doen we dit met de menukeuze http://www.freecsstemplates.org/
File en de optie NEW. In het dialoogvenster dat verschijnt zorgen we er voor dat het tabblad General is geselecteerd. In de linkerkolom kiezen we voor een Basic page en in de rechterkolom voor CSS. Als we op de knop Create drukken wordt een nieuw CSS bestand voor ons geopend. Deze style sheet slaan we op met File -> Save. In het dialoogvenster dat verschijnt geven we dit bestand de naam MyCss, of iets dat meer bij uw ma-
Pagina 8
trale venster van Dreamweaver staan nu twee tabbladen open. Het ene is de pagina die we zojuist gebouwd hebben ( i ndex.html ) het andere de zojuist door ons gecreëerde CSS bestand ( M yCss.css ) . Bovenaan het CSS bestand staat de tekst /* CSS Document */. Dit bestand kunnen we nu sluiten met File -> Close ( o f de toetscombinatie CTRL+W ) . Nu we een CSS bestand hebben kunnen we koppelen aan onze webpagina. Dit kan op verschillende manieren hier kies ik voor de Koninklijke weg. Klik op de menukeuze Text en kies de optie CSS Styles. Uit het submenu kiezen we Attach Style Sheet. In het dialoogvenster dat zich opent klikken we op de knop Browse… en in het nieuwe dialoogvenster selecteren we het CSS bestand dat we zojuist gemaakt hebben. Klik op OK, Let er op dat de keuze Link as :Link is geselecteerd en klik op OK. Er wordt nu een koppeling gemaakt tussen de webpagina en de style sheet. Elke wijziging in de Style Sheet wordt nu door de webpagina weergegeven zonder dat er aan de webpagina ook maar iets veranderd. We kunnen ons nu bezig gaan houden met de feitelijke opmaak.
Hiervoor hebben we het venster CSS
maar goed gaan als we ook de kleur
nodig en als dit niet zichtbaar is selec-
van de tekst aanpassen. Klik bij de ca-
teer dit dan onder de menukeuze Win-
tegorie Type op het blokje achter color
dow. *afbeelding*
en er verschijnt een kleurenpallet. Kies
Allereerst gaan we de achtergrond van
hier voor het witte vlakje. Dit bepaald
de tabel een andere kleur geven.
de kleur van de tekst. De achtergrond
Selecteer de tabel. Dit kan wat lastig
wordt zwart dus is het verstandig hier
zijn. Als je de muis beweegt naar de
een contrasterende letterkleur bij te
uiterste punt van de tabel verschijnt
kiezen. Klik nu op de categorie
een tabel direct recht onder de muis-
Background en klik weet op het blokje
aanwijzer. Als je nu klik is de hele tabel
achter background color. Hier kiezen
geselecteerd. Om een nieuw regel te
we zwart als kleur. Wie op de knop OK
maken in ons CSS bestand klikken we
klikt ziet de tabel veranderen van wit in
op het icoontje *afbeelding* New CSS
zwart met witte letters. Alles met uit-
rule. In het dialoog venster staat achter
zondering van de tekst nieuwsbrief. Dit
Selector #MainTable. Dit is de naam
is namelijk geen gewone tekst, maar
die we aan deze tabel gegeven heb-
een hyperlink. En hyperlinks hebben
ben. Heeft u voor een andere naam
andere eigenschapen waardoor ze zich
gekozen, zal deze achter de Selector
onderscheiden van gewone tekst.
verschijnen. Bovendien is de optie Ad-
Na deze ingrijpende wijziging gaan we
vanced ( Ids, pseudo-class selectors )
nog enkele aanpassingen maken. Al-
geselecteerd. We klikken nu op OK en
lereerst de tekst WELKOM. Deze had-
het dialoogvenster CSS Rule Definition
den we de naam ( Class)
for #MainTable in MyCss.css wordt ge-
ven. Selecteer het gestippelde blokje
opend ( zie de titelbalk van dit ven-
rondom de tekst welkom en klik weer
titel gege-
ster ) . In de linker kolom bevinden zich op het icoon New Css Rule. Achter Severschillende categorieën In het aan-
lector staat nu #MainTable.titel. Dit
sluitende venster deel de verschillende
wijst er op de we de eigenschappen
opties die bij de gekozen categorie be-
van alles dat zich in de tabel bevind en
horen.
de naam titel heeft gekregen wordt op-
We willen de achtergrondkleur van de
gemaakt. We klikken weer op OK.
tabel aanpassen. Vaak kan dit alleen
In de categorie Type wijzigen we het
Pagina 9
www.freecsstemplates.org/
We willen de achtergrondkleur van de tabel aanpassen. Vaak kan dit alleen maar goed gaan als we ook de kleur van de tekst aanpassen
Nieuwsbrief
lettertype ( Font ) in “ Geneva,
Uiteraard zijn er nog talloze andere ei-
Arial, Helvtica, sans-serief ” . Bij de genschappen die u op deze mannier optie Weight kiezen we voor Bol-
kunt instellen. Wilt u een overzicht en
der. Klik daarna op OK. De veran-
voorbeelden die u snel kunt toepassen
dering is subtiel.
kijk dan eens in het boekje CSS in 10
Ook de tekst er onder gaan we
minuten uit gegeven bij Pearson Edu-
aanpassen. Selecteer de gestippel- catie. de box rondom de tekst en klik
Tot slot gaan we nog wat extra tekst
weer op het icoon New Css Rule.
toevoegen aan de pagina.
Achter Selector staat nu
Zet de cursor achter de onderste ge-
#MainTable.Platte _tekst. Klik op
stippelde blok in de linker cel en druk
OK. Selecteer de categorie Blok en op ENTER.
Type het blokje achter color en selecteer de kleur geel. Kijk wat er gebeurt als u op OK heeft gedrukt.
verander de waarde Text Align in
We typen “ NIEUW ! ” . ENTER en op
Justify. Deze optie maakt dat de
de nieuwe regel de tekst “ V olg een
tekst tussen de rechter en linker
proefles voordat u een cursus boekt.
klantlijnen wordt uitgevuld en een
Voor slecht € 25,00 kunt u al kennis-
mooi blok gaan vormen.
maken met de opleidingen van HIGH-
Tenslotte is de hyperlink aan de
POTECH IT ” .
beurt. Deze staat midden in de cel
Selecteer de tekst NIEUW !
omdat we de eigenschappen van
Kies de optie Insert in het menu en kies
de cel hebben aangepast zodat de Layout Objects en uit het submenu Div afbeelding netjes in het midden
Tag. In het dialoogvenster selecteer t u
kwam te staan. Selecteer de ge-
achter class titel en klik op OK. Doe het
stippelde box rond de hyperlink en
zelfde met de overige tekst maar se-
klik op het icoon New Css Rule.
lecteer platte _tekst als klasse. De
Achter de selector staat nu
tekst wordt nu automatisch opgemaakt.
#MainTable.menu. Klik op OK. Ook En veranderd u iets in het CSS be-
Pagina 10
hier kiezen we voor de categorie
stand dan past alle tekst zich vanzelf
Block en wijzigen de Text Align in
aan. Om de kleur van de tekst van de
left. Nadat u op OK heeft gedrukt
titels te veranderen kunnen we in het
staat de tekst nieuwsbrief netjes
CSS venster ( SHIFT+F11 ) dubbel-
aan de linkerkant van de cel.
klikken op de regel #MainTable.titel om
zo het venster te openen met de verschillende eigenschappen. Kies bij de categorie Type het blokje achter color en selecteer de kleur geel. Kijk wat er gebeurt als u op OK heeft gedrukt.
Het eind resultaat
Pagina 11
Highpotech IT
Hoge Filterweg 660 3063 KM ROTTERDAM Telefoon:(010) 242 9766 E-mail:
[email protected]
De nieuwsbrieven van highpotech IT verschijnen onregelmatig. Ze zijn meestal geïnspireerd op vragen van onze cursisten. Heeft u een onderwerp waarover u meer zou willen weten, laar het ons dan weten. Wellicht dat wij uw vraag selecteren voor een nieuwsbrief. De eerdere nieuwsbrieven waren: 1.
Werken met Excel
2.
Nieuwsbrief maken met Publisher
3.
Uw eigen briefpapier in Word
4.
Een cd samenstellen
opleiden: schakel tussen kennen en kunnen
www.highpotech.nl
Wilt u aan de slag... We hebben in deze nieuwsbrief besproken hoe we een webpagina bouwen met behulp van een Professioneel Product als Dreamweaver. Heeft u geen Dreamweaver, en wilt u eens zien of dit iets is waarmee u aan de slag zou willen ? U kunt dan een proefles aanvragen.
Bent u geïnteresseerd in deze en op andere nieuws brieven kijk dan op onze website of kijk op www.highpotech.nl onder de knop opleidingen. Stuuranders een mailtje naar
[email protected]
