I Inleiding... 3 Hoofdstuk 1 Maken vaneen eenvoudige webpagina... 4 Hoofdstuk 2 maken van een site... 8 Hoofdstuk 3 maken van verbindingen tussen

Transcriptie

1

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 Hoofdstuk 4 Tabellen en layers Hoofdstuk 5 Frames Hoofdstuk 6 Figuren Hoofdstuk 7 Cascade Style Sheet Hoofdstuk 8 Hotspot en Behaviours Bibliografie

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: 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 (2 de 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 HTMLtaal. 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. 3

4 Hoofdstuk 1 Maken vaneen eenvoudige webpagina 1.1 De werkomgeving We zien hier de werkomgeving van Dreamweaver werkvlak menubalken werkvensters eigenschappen 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 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 4

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 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 5

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. 6

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. 7

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 we beginnen 8

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 9

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. 10

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. 11

12 Een link maken kan men op verschillende manieren die we hier gaan opsommen 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 F 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. 12

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 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. 13

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 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 eigenschappen We tekenen een tabel in onze pagina van 6 rijen en twee kolommen. Echter maken we hem een breedte van 200 pixels 14

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 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 15

16 Vis duidt aan als de layers visable is of niet 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. 16

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. 17

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. 18

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 19

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 20

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 21

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. 22

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 5 de 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: 23

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. 24

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. 25

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 26

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. 27

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: 28

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 29