dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 ·...

29
2006-2007

Transcript of dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 ·...

Page 1: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

2006-2007

Page 2: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

2

I Inleiding ................................................................................................................................... 3

Hoofdstuk 1 Maken vaneen eenvoudige webpagina.................................................................. 4

Hoofdstuk 2 maken van een site ................................................................................................ 8

Hoofdstuk 3 maken van verbindingen tussen pagina’s ............................................................ 10

Hoofdstuk 4 Tabellen en layers................................................................................................ 14

Hoofdstuk 5 Frames ................................................................................................................. 17

Hoofdstuk 6 Figuren................................................................................................................. 20

Hoofdstuk 7 Cascade Style Sheet............................................................................................. 22

Hoofdstuk 8 Hotspot en Behaviours ........................................................................................ 26

Bibliografie............................................................................................................................... 29

Page 3: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

3

I Inleiding

Het Internet, Websites, E mail, FTP, Chatten allemaal recent uitgekomen woorden die min of

meer iets te maken hebben met het ontstaan en gebruiken van Internet.

I.1 Ontstaan van Internet

Het ontstaan van Internet is werkelijk een sprookje voor ons informatici. Zoals al het goede

veelal zijn oorsprong vindt in het slechte, is ook de geboorte van Internet te danken aan

minder goede aspecten van het menselijke bestaan. Het idee ontsproot uit de Amerikaanse

Ministerie van Defensie, die een communicatie middel moest ontwikkelen dat zelfs een

nucleaire aanval zou weerstaan. Na een beetje geharrewar werd een netwerk ontwikkeld

tussen de verschillende ministeries en kazernen in Amerika en daarbuiten, genaamd

ARPANet. Na nog veel heen en weer kwam het Internet. Verdere uitleg kan je vinden op:

HTTP://www.berenddeboer.net/article/het_ware_ontstaan_van_internet.html, en nog meer

technische uitleg over IP adressen enzovoort. Wat ons nu in feite interesseert is de werkwijze

van het Internet en het werk van de browser in het bijzonder.

I.2 Browser

Een browser is geeft de mogelijkheid om in het web zoeken naar de benodigde informatie. To

Browse is de vertaling van rondkijken, opzoeken. Omdat we dit zouden kunnen gebruiken we

een protocol. Wat en protocol is zien we in het 6 de jaar in netwerken. Niettemin had men

nood aan een protocol teneinde te kunnen de informatie lezen. Dit protocol was het

HyperTextTranfer Protocol of het gekende HTTP. Met dit protocol sturen we een verzoek om

iets te bekijken, welke dan ons normaal toegezonden wordt. Normaal want dat is niet altijd,

zie terug 6 info. Om de toegezonden beelden te kunnen bekijken gebruiken we dan de

browser, een programmaatje geschreven in HTML = Hypertext Markup Language. Dit

programmaatje zorgt er dan voor dat een bijna onleesbare tekst verschijnt als verstaanbare

tekst met eventuele tekeningen.

I.3 HTML, Dreamweaver, Frontpage

HTML is een programmeertaal die we nader bekijken in verdere lessen (2de

deel). Sommigen

hebben daar al ervaring mee, maar in deze lessenreeks gaan we die niet gebruiken. We

gebruiken eerder een programma die tekst en tekeningen automatisch omzet naar de HTML-

taal. Deze programma’s kennen we als Dreamweaver, Frontpage,.. en er zijn er nog een paar.

Wij gaan ons beperken op Dreamweaver uitgebracht door de firma Macromedia in plaats van

Frontpage van Microsoft. Het zijn beide programma’s die het zelfde resultaat hebben maar het

is gebleken dat Dreamweaver minder plaats verbruikt op de harde schijf en daardoor zuiniger

is. Let wel Dreamweaver noch Frontpage is Gratis. Beide zijn gelicencieerde programma’s.

Daarom als u na uw studies wilt bezig houden meet dit programma wordt er wel een aankoop

van het programma verwacht. Bij ons echter is het mogelijk te werken met de trial versie. Als

u hogere studies in die richting wil volgen zullen de desbetreffende scholen u wel wegwijs

maken in de aanschaf van die programma’s.

Page 4: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

4

Hoofdstuk 1 Maken vaneen eenvoudige webpagina

1.1 De werkomgeving

We zien hier de werkomgeving van Dreamweaver

Zoals u ziet gebruiken wij hoofdzakelijk Dreamweaver BMX. Daarin zien we de

verschillende onderdelen, zoals hierboven aan u duidt. De bovenstaande tekening noemt men

de werkomgeving.

1.2 De menubalk

Zoals je ziet bestaat het menu balk uit verschillende onderdelen. Langsheen de lessenreeks zal

je de verschillende mogelijkheden wel ontdekken. Echter bestaan re een paar die je überhaupt

moet kennen en welke in alle Windows applicatie terug komen.

1.2.1 File(bestand)

Deze is zoals in alle Windows toepassingen het menu die u de mogelijkheid bied om een

nieuw bestand te openen.

Als we in dit menu onderdeel open aangeeft kan men een . HTM of een . HTML pagina

openen. Een pagina met deze extensie is een gewoon een webpagina welke men in ieder site

werkvlak

eigenschappen

menubalken

werkvensters

Page 5: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

5

ziet. Als u open indrukt kunt u zo een pagina openen. Ga eens naar Internet en ga naar een

pagina. Sla deze pagina op in uw map als nieuw.htm. Nadien met open in dreamweaver tracht

deze pagina eens te openen. U zult zien dat u een volledige pagina in uw werkvenster hebt.

Wilt u nu zelf een webpagina maken ga dan naar File/New.

Volgende figuur zal verschijnen. Ga naar BasicPage, HTML en dan create. Opdat moment

krijg je een blanke pagina nog zonder titel. Bewaar deze met de naam index.htm of

index.html. Ik gebruik voor de eerste pagina van mijn website altijd .html. De reden zal je

nadien wel duidelijk worden. Index is wel de naam dat u moet geven. Deze naam wordt

algemeen herkend door de browser en daarom direct geopend. Daarom ook zal hij als eerste

pagina geopend worden.

Als u een pagina maakt en u wilt dit zien in een browser zal Dreamweaver een mogelijkheid

scheppen om uw pagina in de lokale browser te zien. Door F12 te drukken verschijnt de

pagina in de standaard browser.

1.2.2 Standaard browser

We hebben daarjuist gesproken over de standaard browser. Dat is de browser dat je steeds zult

gebruiken als je een pagina van het Internet opent.

Neem aan dat je een 2-tal browser’s op uw computer staan hebt. Je krijgt de vraag als je een

browser opent om het als uw standaard browser te maken, of hij is het al. Dit heeft echter

geen invloed op Dreamweaver. Daar moet men expliciet invoegen wat de standaard browser

is. Dit kan u instellen op twee manieren.

1. Langs de knop preferences de vorige tekening.

Druk men die bekomt men onderstaande tekening

Page 6: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

6

Daarin kan men de browser aanduiden. U ziet hier dat men kan kiezen voor F12 Netscape of

Ctrl+F12 voor Explorer. Door het + of de+ kunt u er nog andere bijvoegen of verwijderen.

1.3 eerste opmaak

We schrijven boven aan Dit is mijn eerste probeer pagina.

Direct nadien zullen we die bewaren onder dezelfde naam, index .htm (.html).

Drukken we nu op F12 zullen w<e zien dat het geschreven deel in onze browser verschijnt, en

ja we hebben onze eerste webpagina gemaakt. Het lijkt van opmaak maar een beetje mager is

het niet? Daarom gaan we terug naar onze pagina en bekijken onderaan het eigenschappen

venster of properties. Ik weet wel we moeten er ons eigen aan maken dat veelal in het engels

de namen gegeven worden, maar dit zijn de risico’s van het vak. Zo ziet u dat Engels een

belangrijk vak is in de informatica richting.

Terug naar onze pagina gaan we onze eerste tekst selecteren. Dit op de gewone wijze, drie

muisklikken of de muiswijzer erover slepen.

Eens dit gedaan kunnen we bijvoorbeeld de tekst een andere kleur geven bijvoorbeeld groen.

Groen op zijn eigen bestaat niet in de informatica maar is een mening van de kleuren van het

beeldscherm. Dit wordt hexadecimaal aangeduid als #00FF99. Let op het kardinaal teken

waardoor we een getal aanduiden en de samenstelling van het getal.

Page 7: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

7

We kunnen ook de letters volgens een opmaak stijl maken bijvoorbeeld Heading1 dat zoveel

wil zeggen als in word Kop1. Bekijk even de andere mogelijkheden. Let wel we kunnen

hetzelfde bekomen met bijvoorbeeld Ctrl & of crtl2, we kunnen ook van Font veranderen

Nadien kunnen we ook de Italic gebruiken of het centreren volgens de andere mogelijkheden

in het eigenschappen venster.

Page 8: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

8

Hoofdstuk 2 maken van een site

2.1 Inleiding

Voor dat we iets anders proberen gaan we eerst een site maken. Een site is in feite een map

(directory), waarin de verschillende pagina’s (bestanden) verzameld zijn. Uiteindelijk gaan

we onderlinge verbindingen leggen tussen die verschillende pagina’s. Daar beginnen we aan

in het volgende hoofdstuk.

2.4 Hoe maak ik een site

Bij het venster hierboven ziet u dat u een site kunt aanmaken. (1) Als we deze site aanmaken

en een naam geven zie ja op 2 die naam verschijnen. Dat geeft ook dat een directory gemaakt

is met de naam van de site. In deze map of directory zullen al je pagina’s verschijnen die je

aan maakt. 3 geeft de mogelijkheid de bestanden op de server te bekijken of op de lokale

computer.

2.4.1 we beginnen

1

2

3

Page 9: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

9

Na het indrukken van New hebben we bovenstaande tekening waar we de naam van de site

invullen. Nadien gaan we twee maal naar next.

Na twee maal next te hebben gedrukt zien we bovenstaande tekening. Daarin gaan we onze

site plaatsen op onze lokale computer. We kunnen ook direct op een server plaatsen, al dan

niet gebruiken van FTP (file transport protocol). Wij gaan werken op onze computer vanuit

onze map.

Vervolgens wordt gevraagd indien we een verbinding willen met de server. Daar we steeds

lokaal werken wordt dat ingevuld met nooit (none).

Bij de volgende next krijgen we een opsomming van de gemaakte site en dan drukken we op

done en onze site staat gemaakt.

3.4 Index pagina

We gaan nu onze index pagina welke we in hoofdstuk 1 gestart hebben even maken in deze

website. Dus maak een index pagina voor deze site

Page 10: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

10

Hoofdstuk 3 maken van verbindingen tussen pagina’s

3.1 Inleiding

Een pagina in een site is niet veel. Daarom gaan we naar file/New en maken nog 3 pagina’s

bij die we achtereen volgens een tekst mee geven: pagina 1 voor d eerste in het rood, pagina 2

bold en in het blauw en pagina 3 in het groen en italic hoofd 1..

We bewaren elk van die pagina’s met een naam eigen aan de pagina. Vergeet niet ze op te

slaan als .htm (HTML)

3.2 de eerste pagina

Op de eerste pagina zet je dan

Pagina 1 enter

Pagina 2 enter

Pagina 3

Bemerk dat de cursor steeds een open lijntje laat. Dat kan opgelost worden shift+enter te

drukken.

Het pijltje duidt op shift enter. U ziet dat daar direct een teken “BR” verschijnt. Dat is Break

in HTML. Nu we toch bezig zijn zullen we eens naar de HTML uitvoering van de pagina

kijken.

3.3 HTML in Dreamweaver

Bovenstaande tekening duidt het vorige aan, maar met de onderdelen van Dreamweaver erbij.

De drie pijltjes duiden iets aan op het menu balk. Drukken we het eerste in dan bekomt men

de pagina in HTML.

1

2 3 4 5

Page 11: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

11

Drukken we het tweede dan hebben we een deel HTML en deel onze pagina

Bemerk ik heb iets geselecteerd in de pagina, dit is ook geselecteerd in de HTML. Dat is een

handige eigenschap die we later nog zullen gebruiken.

De derde mogelijkheid keren we terug naar het originele.

4 is voor het testen van de pagina op de server.

5 geven we een titel aan de pagina. Deze wordt niet gezien maar kan mooi zijn als we een

website met een aantal pagina’s maken. Ik ben er wel voor dat u dat invult. Untiteld is immers

niets zeggend nietwaar.

3.4 leggen van verbindingen.

U ziet in een website dat men handig van de ene pagina naar de andere wipt. Dat gebeurt door

een verbinding of link.

Page 12: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

12

Een link maken kan men op verschillende manieren die we hier gaan opsommen.

3.4.1 link door selectie

We gaan naar de index pagina van onze nieuwe site en daar gaan we de tekst eerste pagina

selecteren. Dit kan op de ons vroeger geleerde wijzen. Het handigste is nu van selectie door

muisaanduiding te verzorgen. Nadien drukken we op onze rechter muisknop.

In het daar opkomende menuutje duiden we “make link” aan.

Daarin duiden we de eerste pagina aan en drukken op enter

of OK. Ogenblikkelijk wordt eerste pagina in het blauw geplaatst en een lijn onder getrokken.

Wat duid op een aanmaak van verbinding. Probeer eens las F12

3.4.2 link door aanduiding

Een tweede methode is langs het eigenschappen venster. Terug gaan we nu pagina 2

selecteren langs de gekende wegen. Daarna gaan we onderaan in het eigenschappen venster,

waarin we op het tekentje van map het zelfde effect hebben van voordien. We duiden nu

pagina 2 aan en terug hebben we een verbinding gelegd.

Page 13: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

13

3.4.3 link door ingeven

We kunnen ook een link leggen naar een website op pagina die niet in onze map staand. Ik

heb u een link gelegd naar een web site, google.be. Dan moeten we er wel op letten dat we

bijvoegen http://www.google.be.

We zien dat we nu en verbinding hebben met een site of pagina van niet in onze directory.

3.5 opmerking

Het is handig als we op de pagina ook een mogelijkheid geven op het terug keren naar de

oorspronkelijke plaats. Daarom plaats op iedere pagina een teug woord waarbij je terug naar

je index pagina gaat.

Page 14: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

14

Hoofdstuk 4 Tabellen en layers

4.1 Inleiding

Op een pagina kunnen we alle soorten tekst plaatsen. Om een tekst, tekening of iets anders op

een bepaalde plaats te zetten maken we veelal gebruik van een layers. Een layers of laag is

een mogelijkheid in een bestaande pagina iets op een plaats naar eigen keuze. Met een layers

kunnen we nog andere dingen maken, maar dat is voor later.

Een tabel is een mogelijkheid om iets afgelijnd te plaatsen.

4.2 tabel

4.2.1 hoe tekenen

Maak een nieuwe pagina met titel tabellen.

Ga naar het menu bij insert. Dit geeft een submenu (zie hierboven) waar men het deel Table

aanduidt.

Dan krijgt men volgend submenu

Men kan daarin de grootte van de tabel bepalen, het aantal rijen (Rows) en het aantal

kolommen (Columns). We zien ook dat daar een rand van de tabel is (Border). De width is de

breedte van de tabel, in procent of pixel.

Cel spacing is de afstand tussen de cellen van de tabel. Cel padding is de afstand tussen de

inhoud van de cel en de randen.

4.2.2 eigenschappen

We tekenen een tabel in onze pagina van 6 rijen en twee kolommen. Echter maken we hem

een breedte van 200 pixels

Page 15: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

15

We gaan met de cursor in een cel staan en we gaan daar op de rechter muisknop drukken.

Bovenstaand submenu komt tevoorschijn, waarin we eigenschappen van de tabel kunnen

aanduiden. Het zijn dezelfde eigenschappen welke we in normale tabellen kunnen vinden.

Voor verder uitleg daarover kunnen we terug gaan naar alle programma’s die werken met

tabellen. Ook hier geld de zegswijze oefening baadt kunst.

4.3 layers

En laag of layers is een zwevend element boven een HTML pagina. Er zijn twee soorten

layers namelijk de CSS (Cascading Style Sheet) en Netscape layers. De eerste zijn gekend in

het WWW consortium, de tweede zijn ontwikkeld door Netscape.

Maken we een nieuwe pagina en noemen ze layers.

4.3.1 hoe tekenen

layers krijgt men terug langs insert en dan in het menu layers aanduiden.

Boven aan hebben we een tekentje en een handvatje aan de label. Deze noemen we de selectie

handel.

Onderaan in de eigenschappen vinden we de eigenschappen van een layers. Als eerste hebben

we de layers naam, de lengte breedte en de Z index. De z-index duidt de plaats van de layers

aan in de stapel . De layers met de hoge z index liggen op deze met een lagere z-index ziet

voorbeeld

Page 16: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

16

Vis duidt aan als de layers visable is of niet.

4.3.2 eigenschappen

Om en layers te selecteren kan men verschillende methode hanteren. Het simpelste is gewoon

op de selectie handel te staan en aan te duiden.

Een layers is ook handig bij een webpagina, als je in een webpagina layers gebruikt plaats dan

alles in layers anders krijgt je wrapping als het formaat van het venster wordt veranderd.

Page 17: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

17

Hoofdstuk 5 Frames

5.1 Inleiding

Met frames kan men een pagina die verschijnt in een browser opdelen in verschillende

onderdelen. Gedurende de lessen ga je zelf een mogelijkheid vinden om de toe te passen. We

houden ons hier in het tonen van de verschillende frames die er bestaan en hun

eigenschappen.

5.2 hoe maken

Terug bij Insert gaan we naar de aanduiding Frames. Bij het aanduiden van dit verschijnt er

terug een submenu welke de keuze biedt aan verschillende frames.

Zo is left enkel een aparte zijkant links, right en top zijn zelf verklarend.

Het andere zal ontdekken met het gebruik ervan. Zo kan men de index pagina een mooie

uitwerking geven.

Page 18: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

18

5.3 eigenschappen

Als voorbeeld nemen we hier een frame pagina botom nested right.

Als we dit nu willen opslaan gaan we iets eigenaardig bemerken

Zet op het rechtse deel “rechts”, het onderste “onder” en het midden deel“midden”

We kunnen het frame aparte bewaren of alle maal. We

gebruiken eens save all. We gaan zien dat we een aantal pagina’s gaan saven.

Het eerste is de hoofdpagina, dan de andere pagina’s. We zien dat de verschillende delen van

het frame elk en andere pagina zijn. Dat is goed te weten, zo kunnen we bij updating enkel de

pagina updaten.

Page 19: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

19

In het eigenschap venster ziet men dat men verschillende zaken kunnen aangepast worden.

Dit zal bij gebruik wel duidelijker worden.

Met de aanduiding borders kan men zorgen dat u de scheidingslijnen ziet. Met bordercolor

kan je ze een speciaal kleur geven.

Als je op de verticale lijnen drukt heb je bovenstaande eigenschappen, op de horizontale heb

je het zelfde maar die spreken over de horizontale lijnen

Page 20: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

20

Hoofdstuk 6 Figuren

6.1 Inleiding

Het inbrengen van figuren maakt da site een beetje levendiger. Zoals velen al gezegd hebben

is de impact van 1 figuur hetzelfde als van 10 bladzijden tekst.

Het inbrengen van figuren gaat ook langs het submenu insert

6.2 Hoe inbrengen

Met de functie image in het submenu roepen we een ander submenu op. In dit submenu

kunnen we kiezen op de computer waar onze figuur staat

Met bovenstaande figuur kan je zien hoe men kan kiezen op de computer. Meestal staat een

figuur in uw documenten op de computer of op de server. Hier heb ik gezocht met de extensie

jpg wat een foto is. Men kan kiezen met het pijltje naar een andere extensie. Echter het is

verstandig van altijd een jpg file te kiezen.

De figuur maak ik relatief ten opzichte van de pagina waarop ik werk. Dat wil zeggen dat ik

hem inbreng in de pagina. Een tweede mogelijkheid is hem relatief maken ten opzichte van

de site root.

Drukken we op ok zal het programma vragen de foto in de zelfde map te zetten als de pagina

Page 21: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

21

In het ander geval zal hij hem plaatsen in de root van de site. Bij het drukken van ja geeft het

programma de mogelijkheid het bestand de foto te plaatsen ergens in de site. Het is handig om

een speciale map te maken voor foto’s opdat ze gegroepeerd zouden staan. De reden is bij het

opladen van de site is het gemakkelijk een ganse map ineens op te laden.

Nadien verschijnt de foto op de website.

Vergeet niet in feite heeft het programma een link gelegd naar de foto. Het is heel goed

mogelijk dat u door een handeling die link verliest. Dan zal de foto niet meer te zien zijn op

de website, hoewel in dreamweaver wel.

vb

Page 22: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

22

Hoofdstuk 7 Cascade Style Sheet

7.1 Inleiding

Een paar lessen geleden hebben we ook over CSS gesproken. In deze les gaan we even dieper

op in op de voordelen van een CSS en hoe die te maken.

7.2 maken we een CSS

Daarvoor moeten we terug gaan naar ons uitzicht van het eerste werkblad. Als we het

programma opstarten hebben we verschillende onderdelen bekeken op onze werkomgeving.

Aan de rechterkant stonden er vensters die gemakshalve werkvensters genoemd hebben.

Dit is en figuur van het bovenste werkvenster. In dit venster zullen we onze CSS maken.

Eerst vragen, we ons af waarom we dat nodig hebben. Het is in feite maken van een

tijdsbesparing. Veronderstel dat we een tekst hebben van ettelijke lijnen of zelfs bladzijden. In

die tekst moet bijvoorbeeld alle woorden en blauw gekleurd worden en onderlijnd. Nu kunnen

we in die tekst alle en opsporen, ze in het blauw zetten en onderlijnen. Voor een lange tekst is

dat nogal een ingewikkelde zaak. Als we nu daarvoor een CSS maken kunnen we dat met dat

doen. Wat meer is in andere teksten van de site kunnen we het zelfde gebruiken.

We maken een nieuwe pagina en noemen die CSS.

We drukken op de tekening zoals het pijltje en we krijgen en submenu.

Page 23: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

23

Daarin kunnen we een style sheet maken. Deze sheet is afhangend van de pagina waarin we

nu werken, als we ze een naam geven wordt die . Naam genoemd, juist omdat ze afhankelijk

is aan de pagina. De . staat voor de pagina.

We maken een custom style (of class). Voor de personen van het 5de

jaar is dat nog een beetje

chinees omdat ze nog geen klassen gezien hebben. Maar dat komt…

En we bepalen het in dat document. We geven deze CSS een naam. Een naam die zegt wat hij

doet vind ik het makkelijkst. Vb en (van de woordjes en).

Ok en we krijgen volgend submenu.

In dit sub menu kunnen we onze idee waarmaken, laat ons even invullen wat wij verlangen.

Het moet blauw zijn en onderlijnd was het begin idee.

we vullen dat zo in:

Page 24: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

24

Na ok gedrukt te hebben zal deze CSS bewaard worden. We vinden dat terug in het

werkvenster.

7.3 de werking

we hebben nu onze CSS, wel nu gaan we deze even toepassen.

we zorgen voor een tekst op de pagina.

in en tekst kan men nu door simpel de en te selecteren en te drukken op de CSS het zelfde

effect bekomen.

7.4 style sheet file

in onze vorige oefening gaan we op de style sheet .en staan en drukken op de RMK. In het

menu dat dan verschijnt, gaan we de style sheet exporteren.

en bewaren als .CSS file.

als we nu een andere pagina openen met een andere tekst dan kunnen we de oorspronkelijke

css file teug oproepen om dezelfde stijl te handhaven doorheen gans de website.

Page 25: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

25

onderaan bij de style sheet venster kunnen we zo een andere style sheet in een pagina

oproepen. Deze zal dan een ander uizicht hebben en we kunnen terug van start gaan zoals

voordien.

u ziet dat is een groot voordeel om een website de zelfde stijlen te geven.

Page 26: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

26

Hoofdstuk 8 Hotspot en Behaviours

8.1 Inleiding

Een hotspot is een bepaald gebied in een figuur waar men een link kan naar leggen. Die

hotspot blijft echter voor de gebruiker onzichtbaar.

Behaviours zijn kleine scripts welke we kunnen gebruiken om een actie in de pagina te

steken.

8.2 Hotspot

we gaan teug naar het moment dat we een figuur ingevoegd hebben in een pagina. Open we

terug deze pagina en bekijken deze eventjes.

In het eigenschappen venster van deze pagina zien we varschillende eigenschappen van de

tekening of foto. We zien de hoogte, de breedte, waar die foto te vinden is maar onderaan

zien we 3 verschillende figuurtjes. Namelijk rechthoek, rond en een vrije figuur. Deze

figuurtjes zijn de hotspots voor deze tekening.

maken we van de rechthoekige hotspot een afdruk op de foto. deze afdruk geeft nu de

mogelijkheid om een link te leggen naar een andere pagina, teug met de rechter muis knop

met link kunnen we een andere pagina aanduiden. Deze zal dan terug bij F12 kunnen

opgevraagd worden met een link. U zult zien bij F12 ziet men die hotspot niet enkel het

bekende vingertje. Onderaan ziet men dat er een lik gelegd is naar pagina1

Page 27: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

27

8.3 Behaviours

terug gaan we naar het werkvenster rechts boven

op de figuur zien we een + en een – teken. In de informatica wil + zeggen het bijvoegen van

programma’s. – het wegnemen van programma’s. Drukken we even op de +

we zien een scala van mogelijkheden verschijnen. Dit zijn allemaal behaviours of events dat

gebeuren op een door de ontwerper bepaald moment of bij een bepaalde actie.

als voor beeld willen we een pop message laten verschijnen telkens we iets doen.

We duiden popup aan in onze lijst. direct verschijnt er een popup venster.

Page 28: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

28

daarin schrijven we “Cool”. Het moment dat we op ok drukken zal in het behaviours venster

volgende mededeling verschijnen:

als we nu F12 drukken en we klikken in het venster zal er als popup cool verschijnen. Er zijn

echter nog meer mofgelijkheden en paar laten we zien:

Page 29: dreamweaver - Telenetusers.telenet.be/kae.informatica/dreamweaver/dreamweaver.pdf · 2006-08-01 · I.3 HTML, Dreamweaver, Frontpage HTML is een programmeertaal die we nader bekijken

rd

29

in feite zijn dat allemaal verschillende scripts welke we kunnen gebruiken. Dit moet u maar

eens proberen.

Bibliografie cursus van Dreamweaver door Mr. Vuylsteke

Dynamisch webdesign van Patricia Bosselaer