Dreamweaver 4 basiscursus tutorial

Dreamweaver 4 gratis online basiscursus tutorial voor de beginners ...

Eerst beginnen we met het editor gedeelte. WYSIWYG betekent letterlijk: What You See Is What You Get Niet zo zeer in de "sales" termen, maar meer in de praktische zin. Deze editor laat u de inhoud en de opmaak van uw html pagina, voor een groot gedeelte hetzelfde eruit zien, als hoe het straks op het internet binnen een doorsnee webbrowser er uit komt te zien.

Normaal gesproken maakt u gebruik van een apart FTP (File Transfer Protocol) programma, zoals FileZilla, om uw bestanden op het internet (lees FTP server) te zetten. Bij gebruik van Dreamweaver is gebruik van een aparte programma niet nodig, want Dreamweaver beschikt zelf over een ingebouwd FTP cliënt. FTP client is in ons geval, niet een afzonderlijk tooltje zoals het vaak in de praktijk wel het geval is (denk bijvoorbeeld aan FileZilla, WS_FTP, Leech FTP, ed), maar is onderdeel van Dreamweaver zelf. Binnen deze basiscursus gaan we straks hier dieper op in.

Ermee beginnen

Bij het opstarten, zal Dreamweaver standaard een visuele blanco edit venster openen, zoals hieronder weergegeven.

Dreamweaver 4

Dreamweaver 4 opent zijn hoofdvenster gewoonlijk niet over uw hele scherm, zoals de meeste programma's waar we aan gewend zijn (zoals Photoshop bijvoorbeeld), maar ongeacht de scherm resolutie - zal Dreamweaver, zoals u ziet ca. 60% van uw schermgrote in beslag nemen. Uiteraard kunt u hem daarna schalen op de gewenste grootte.

Op hetzelfde blanco venster kunt u makkelijk naar het code gedeelte schakelen, door op de Code Inspector icon te klikken. Deze bevindt zicht rechts onder in het hoofdvenster. Wilt u dat uw "code" alinea's genummerd worden, klik alvast op:

Code Inspector icoon.

Code Inspector gaat in een apart venster open. Klik daar op View Options icoon. Vink hier Line Numbers aan, zoals hieronder afgebeeld.

Code Inspector

Dit is vooral handig bij scripting. Als u straks een eenvoudige JavaScript in een document geplaatst heeft en er bevindt zich een fout in, zal bij het testen uw webbrowser u een foutmelding geven en aangeven in welke alinea de fout precies zit. In Dreamweaver kunt u vervolgens deze lijn direct opzoeken

De code die u in Code Inspector venster hierboven ziet, is min of meer de minimale code dat een html pagina mag bevatten. Browsers als Internet Explorer zullen echter geen bezwaar maken als sommige zogenaamde "tags" ontbreken, niet (of nog erger, incorrect) afgesloten worden, maar maak er een goed gewoonte van (voor het geval u vaak ook handmatig gaat coderen), om alle tags goed in de gaten te houden en er voor te zorgen dat ze, waar nodig, goed en correct afgesloten worden. Internet Explorer is niet bepaald een browser waar u qua correctheid van de weergave van uw pagina's op kunt rekenen. Op Mozilla kunt u voorlopig wel rekenen. Het is een kritische browser maar ook een precieze browser. Wilt u leren en heeft u respect voor eigen werk, gebruikt u dan Mozilla.

Wanneer u een perfectionist bent, gebruik ze dan het liefst allebei. Maar maak toch van Mozilla uw graadmeter. Pagina's die het in Mozilla goed doen, doen het per definitie in alle andere webbrowsers goed. Andersom (wanneer Internet Explorer uw graadmeter is) is niets minder waar.

Wij gaan met Dreamweaver alvast aan het werk. Hier hebben we overzicht van de belangrijkste icoontjes die we bij Dreamweaver 4 tegen zullen komen, en die we het meest zullen gebruiken:

CODE INSPECTOR icoon, bevindt zich rechts onderaan in editor venster en door er op te klikken, komt u in de "bron" van uw html. Dit geeft u de mogelijkheid om uw Html code ook (en vooral) handmatig bij te werken.

INSERT TABLE icoon, waarmee u een tabel creëert. Vergelijkend met Word, alleen veel eenvoudiger. U specificeert in dit geval de grote van uw tabel (in percentage of absolute grote), geeft het aantal rijen en kolommen, border en uitlijning ed.

SHOW SITES icoon, waar u de verbinding met uw FTP Client maakt en eventueel "nieuwe sites" aan FTP Client toevoegt.

Vanaf dit punt, zullen we de verschillende tooltjes bespreken, zoals we ze tijdens het oefenen tegen komen. Over een tijdje zult u het er mee eens zijn, dat de beste manier van leren is; wanneer u er direct mee aan de slag gaat.

Site definitie

Maak alvast een map op uw harde schijf en noem deze "mySite" bijvoorbeeld. Voor het gemak maakt u deze map op uw bureaublad. Open nu Dreamweaver en ga op het hoofdmenu naar: Site ⇒ New Site. U krijgt een "PopUp wizard" die alle nodige gegevens voor uw nieuwe site zal vragen. In Local Info zult u in ieder geval de: Site Name (kan een willekeurige naam zijn) van uw site- en Local Root Folder (de plaats op de lokale schijf waar alle documenten straks lokaal komen te staan) moeten specificeren. De rest in deze tab is optioneel.

Site definition

Selecteer vervolgens onder de Category ⇒ Remote Info tab. De Wizard zal automatisch naar zijn FTP veld springen. Deze is standaard leeg. Selecteer in zijn dropdown menu Ftp en voer in de velden uw (host) Ftp gegevens in. Deze gegevens, als het goed is, krijgt u van uw host (vaak ook van uw provider voor uw eigen homepage), of van een klant indien u een opdracht doet.

Access wordt dus: Ftp (protocool). Onder Ftp Host, wordt de naam van een Ftp Server ergens op het Web gevraagd, waar u uw documenten naar toe kunt gaan uploaden: ftp.somewhereontheweb.nl bijvoorbeeld. Soms zal het om een IP nummer gaan, hangt van uw host af... Host Directory, is een server map die u toegewezen krijgt met uw account. Soms heet deze public_html, soms www, html en soms weer anders. Als u het niet precies weet, laat deze veld dan leeg. Eenmaal verbonden, zult u naar de juiste map zullen gaan bladeren. Deze veld kunt u dan achteraf invoeren. Login en Password spreken voor zich.

Indien de website op de server door meerdere webmasters onderhouden gaat worden, is het ook zinvol om de Check In/Out functies aan te vinken. Zo ja, verschijnen daar twee extra invoer velden, waar u uw Naam en E-mailadres in kunt voeren. Met de behulp van deze twee (functies), zien uw collega's: wie en met welk document momenteel bezig is. Op de Server kant van uw (Dreamweaver Ftp Client) venster, zal dan naast iedere document die u zelf geopend heeft, uw naam (met een groen vinkje ernaast) erbij verschijnen. Op de Dreamweaver vensters van al uw collega's die bij desbetreffende documenten ook toegang hebben, zullen alle vinkjes van de documenten die u zelf geopend heeft, rood zijn. Dit betekent o.a. dat zij zelf deze documenten niet kunnen bewerken tot u ze weer ingecheckt heeft. De documenten die klaar zijn en waar niemand aan werkt, zijn (op Server kant) blanco, ofwel zonder een vinkje en een naam ernaast. Aan de lokale kant van uw Dreamweaver venster, zult u dezelfde bestanden op slot zien (met een Lock icoontje). Deze bestanden worden dan als: Checked beschouwd. Maar dit is voor alle duidelijkheid, alleen van belang als u met meerdere mensen tegelijk aan de slag gaat. Zo niet, kunt u bij de Remote Info tab deze opties beter leeg laten.

Hier volgt een voorbeeld:

Site definition - remote info

Klik nu op OK knop en Dreamweaver zal Cache creëren voor uw nieuw site. Uw gegevens worden nu opgeslagen en zijn klaar voor gebruik. Als u nu de Html documenten gaat maken, kunt u ze gelijk in "mySite" map opslaan. Dreamweaver houdt het allemaal in de gaten. Bewerkt u dezelfde pagina (buiten Dreamweaver om) in Kladblok/Notepad bijvoorbeeld en slaat u het op terwijl het tegelijk in Dreamweaver geopend is - zal Dreamweaver het ontdekken en bij terugschakelen naar Dreamweaver zult u dan ook gelijk gevraagd worden: of de (door u) zojuist gewijzigde document (buiten Dreamweaver om), door Dreamweaver bijgewerkt dient te worden? Het is verstandig in zulke gevallen de vraag met "Ja" te bevestigen.

Creëer een Frameset

Bij Objects menu die u hier links ziet, kunt u niet alleen keuzes maken om diverse objecten in te voegen (zoals: tabellen, plaatjes, flash filmpjes ed.), die onder de tab Common staan - maar kunt u zelfs tussen allerlei submenu's schakelen. Daar zitten nog meer functies en hulp tooltjes onder verborgen. Schakel nu naar Frames menu, door in Objects bovenaan, op dat driehoekig pijltje naast het woord Common te klikken.

Kies bijvoorbeeld voor een driedelige frameset en voeg deze in, door erop te klikken. Als u voor dezelfde optie (net als ik) gekozen heeft, ziet u nu een frameset die uit drie delen bestaat. In werkelijkheid zijn het vier afzonderlijke (Html) documenten. Eigenlijk worden ze dat pas als u ze opslaat. Deze drie frames vormen straks een onderdeel van uw frameset (vierde, index pagina). In mijn geval zie ik dan op het scherm een frameset met: een boven gedeelte die ca. 30% van mijn totale scherm in beslag neemt. Deze is bestemd voor de site titel, logo, een banner of soortgelijks iets. Onderaan links, heb ik een deel dat bestemd is voor het navigatie gedeelte en deze neemt wat minder dan een derde van het scherm (van links naar rechts) in beslag. Uiteindelijk heb ik nog een hoofdgedeelte, die de rest van mijn scherm vult. Hier is het de bedoeling dat mijn overige Html documenten, tijdens het navigeren geopend zullen worden. Het ziet het er nu als volgt uit:

Frames

Zet u nou mijn cursor op de bovenste frame om hem actief te maken en gaat u vervolgens in het hoofdmenu naar: File ⇒ Save as, kunt u hem afzonderlijk opslaan. Geef hem gelijk een naam. Het wordt in mijn geval "topFrame.html". Dezelfde doet u met de andere twee (leftFrame.html, dan wel main.html). Als laatste, selecteer de buitenste rand van het hele frameset (als u het goed doet, ziet u een onderbroken lijn langs de randen van het hele frameset) en kies weer de opties: File ⇒ Save Frameset as... en geef hem een naam "index.html".

Dreamweaver frames code

Kijkt u verder op uw harde schijf, in "mySite" map, dan ziet u daar vier Html documenten staan, met name: index.html (frameset), topFrame.html, leftFrame.html en mainFrame.html. Nu hebben wij een prima basis om verder te gaan.

Pagina's vullen en vanuit het menu linken

Klik één keer in de bovenste frame en geef het een sprekend titel, Welkom, bijvoorbeeld, druk daarna CTRL + S (opslaan). Het hoeft voorlopig niet opgemaakt te zijn. Klik daarna één keer in het grote rechter frame en schrijf: "Welkom op mijn site... Dit is inhoudspagina 1." Druk nogmaals op CTRL + S. Selecteer deze zin en verander het in "Inhoudspagina 2." Ga vervolgens naar: File ⇒ Save as ⇒ geef hem een nieuwe naam, bijvoorbeeld: pagina2.html ⇒ Save. Selecteer nogmaals de laatste zin en wijzig het in: "Inhoudspagina 3" ⇒ File ⇒ Save as ⇒ pagina3.html ⇒ Save.

Klik nu één keer op het linkere frame en schrijf het woord: "Home" ⇒ druk op CTRL + Enter (Dreamweaver voegt een Break toe (<br>) achter het woord Home, i.p.v. een nieuw Paragraph (<p></p>), wanneer u alleen de Enter toets zou indrukken, waardoor een nieuw woord die u gaat typpen gelijk in volgende regel komt, i.p.v. in een nieuwe regel- en met een leeg regel ertussen. Via Code Inspector kunt u het verschil ook goed zien wanneer u beide opties probeert.

Schrijf nu in de nieuwe regel het woord: Pagina 2 ⇒ CTRL + Enter, en schrijf tenslotte Pagina 3.

Dubbel klik op het woord Home. Deze wordt in zijn geheel geselecteerd. In het Link veld van Properties venster, voert u main.html en onder Target (eveneens op Properties venster te vinden) selecteert u mainFrame. U heeft zojuist een hyperlink gemaakt, waarmee main.html vanaf nu altijd in mainFrame aangeroepen zal worden elke keer dat iemand op Home klikt.

Doe hetzelfde met overige items in uw toekomstige menu pagina. Pagina 2 ⇒ Link: pagina2.html ⇒ Target: mainFrame. Pagina 3 ⇒ Link: pagina3.html ⇒ Target: mainFrame. CTRL + S.

In principe heeft u nu een volledig werkende website met het liefst 6 (html) documenten.

Ga naar de mijnSite map en dubbelklik op index.html. Uw website wordt nu als het goed is, in uw webbrowser geopend. Test uw links.

Tabellen en tekst opmaak

Open nu main.html pagina in Dreamweaver. Deze is buitengewoon geschikt als je welkomst pagina. In slechts een paar stappen, gaan we aan deze pagina wat meer inhoud geven. In volgende stappen maakt u kennis met tabellen.

Op uw Objects menu onder de categorie Common ziet u een tabel icoon staan. Klikt op deze icoon (kan ook via het hoofdmenu: Insert ⇒ Table). Er verschijnt dan een Insert Table venster. Hier kunt u de tabel attributen opgeven. De tabel breedte (Width) kan zowel in pixels als in percentage opgegeven worden.

Tabel invoegen

In mijn geval wordt het een tabel met één rij en één kolom. Tabelrand (border) zet ik op nul, tabel breedte op 400 pixels. De rest sla ik over en klik ik op OK knop.

Roept u voor de zoveelste keer (nogmaals, icoon rechtsonder in het hoofdvenster) Code Inspector op, is dit wat u ziet:

Tabel code

Gezien uw tabel verder helemaal leeg is, heeft Dreamweaver in de tabel cel, slechts "no breaking space" oftwel &nbsp; standaard ingevoegd. Want volgens de regels van W3C, kan een tabel cel nooit helemaal leeg zijn. U zult het verschil ook meteen merken als u uw pagina onder oude 4x Netscape browser gaat testen. Mozilla en Internet Explorer maken hier geen punt van.

Door regelmatig op Code Inspector te klikken elke keer dat u iets extra op uw webpagina gedaan heeft, controleert u niet de boel alleen, maar u leert er ook van. Ieder stuk code dat Dreamweaver invoegt, ziet u er direct bij komen.

Klik nu Code Inspector weg en zet uw cursor in de lege tabel cel zodat de cursor gaat knipperen. Het heeft dezelfde effect als in Word. Als u vervolgens in het hoofdmenu naar Insert gaat, daarna Image, blader door uw plaatjes map heen en kies een *.jpg of een *.gif plaatje uit die u in het document wilt hebben, klik vervolgens op OK. Dreamweaver voegt nu de geselecteerde afbeelding toe, in de tabelcel waar u uw cursor zojuist geplaatst had.

Bij creëren van tabbellen, zult u merken dat de Properties menu (die standaard op Tekxt Properties staat) direkt in Table Properties verandert, wanneer u (door op de tabelrand te klikken) binnen uw document de rand van de tabel selecteert die u zojuist gemaakt heeft. Hierdoor is het mogelijk om de tabel attributen altijd in de gaten te houden en eventueel te wijzigen. Selecteert u een plaatje binnen uw document dan krijgt u Image Properties te zien, etc...

Properties menu

Wilt u aan uw tabel meerdere cellen of kolommen toevoegen, dan doet u dit makkelijkst met rechter muis knop. U moet wel eerst in een tabelcel klikken ⇒ rechter muis knop ⇒ Table ⇒ Insert Row. De extra rij die erbij komt, komt altijd bovenaan! Hetzelfde geldt voor het invoegen van een extra kolom, komt altijd rechts. Alleen wanneer u voor Insert Rows or Columns kiest, kunt u een keuze maken; voor een rij: boven/onder en voor een kolom: links/rechts.

Bestaat uw tabel rij uiteindelijk uit twee cellen naast elkaar en wilt er één van maken ⇒ selecteer met de cursor beide cellen ⇒ rechter muis knoop ⇒ Table ⇒ Merge Cells, enz. Experimenteer er een klein beetje mee en kijk wat het doet. Onder Code Inspector checkt u uiteraard elke wijziging opnieuw. Zeer leerzaam...

Oefening

Ga in hoofdmenu naar Window; vink vensters aan en uit. Verken hun namen en sleep ze vanuit de Photoshop hoofdvenster weg naar Optionbar. Haal ze daarvandaan weer terug. Klik willekeurig een venster in Photoshop hoofdvenster weg en haal hem weer terug via het Window hoofdmenu.

1. Doe het volgende in uw main.html document: Maak een tabel, met één rij en één kolom, Border 0, Cellpadding en Cellspacing is 0, Width 400 en Bg color is #000000.
2. Zet uw cursor binnen de tabelcel en maak nu een nieuwe tabel binnen de eerste tabel, met de volgende attributen: Width 400, één rij – één kolom, Cellpadding is 0, Cellspacing is 1, Border is 0. Als u uw cursor binnen de tabelcel opnieuw plaatst, zal hij nu actief zijn binnen die nieuwe tabel(cel). Op Properties venstertje (Bg vierkantje aanklikken) geeft aan deze cel een licht grijze kleur: #EEEEEE.
3. Terwijl uw cursor nog in de tabelcel actief is, gaat u naar Insert ⇒ Image, blader nu door uw plaatjes map en kies een plaatje. Klik op OK. Selecteer uw plaatje en op Properties venstertje selecteert u onder alignement Align ⇒ Left. Eventueel kunt u aan H Space en/of V Space waarde 2 toekennen. Dat betekent dat uw plaatje met 2 pixels van de tekst "horizontaal" of "verticaal" van de celrand uitgelijnd wordt.
4. Terwijl uw cursor nog steeds in dezelfde cel (naast het plaatje) actief is, kunt u nu daar wat tekst in plaatsen. Uw tekst zal automatisch aan de rechter kant van uw plaatje komen te staan, maar dan wel in het midden. Wilt u dat zowel de tekst als het plaatje bovenaan in de cel uitgelijnd worden, selecteer dan, terwijl uw cursor nog steeds ergens in dezelfde tabelcel actief is, op Properties venster Valign: top.
5. Selekteer nu de complete tekst en geef op Properties aan dat u "Verdana", Size: 2 tekst wilt hebben. (merk wel dat Dreamweaver in zijn tekst menu, een aantal gedefinieerde font groepen al heeft. Deze kunt u uiteraard zelf ook maken. Ontdek het hoe!)
6. Klik op Ctrl + S om de inhoud van uw pagina op te slaan en bekijk de resultaat in uw webbrowser.

Normaal zult u zo een uitgebreide opmaak liever met behulp van een Style Sheet gaan doen, maar het is goed om te weten hoe het ook anders kan, want lang niet alle pagina's zult u met een standaard Style Sheet gaan opmaken. Style Sheet komt pas aan bod in volgende (Dreamweaver MX 2004) tutorial.

Tabel opmaak

Uiteindelijk is dit de enige html code die Dreamweaver voor u gaat genereren [ja, ja, kijk maar in Code Inspector :)]:

<html>
<head>
<title>Untitled Document</title>
</head>

<body bgcolor="#FFFFFF">

<table width=400 cellspacing=0 cellpading=0 bgcolor=#000000 border=0>
<tr valign="top">
<td><table width=400 cellspacing=0 cellpading=1 border=0>
<tr>
<td bgcolor=#EEEEEE>
<img src="images/pass.jpg" align="left" vspace="2">
<font face="verdana, arial" size="2">Dit is een tabel binnen een andere tabel. Met de juiste instellingen binnen de Dreamweaver, krijg ik een prima uitlijning (van mijn tekst ten opzichte van mijn plaatje), met een neutrale achtergrondaskleur en een rand. Uiteraard had ik het ook handmatig kunnen doen, maar binnen de Dreamweaver gaat het aanzienlijk sneller.</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Sla het pagina op. Bewerk de overige pagina's op een soortgelijke wijze. U bent zo goed als klaar. Het overzetten van uw locale bestanden naar een Ftp server, komt in een volgende tutoriaal. Daar zullen we het over Dreamweaver MX 2004 hebben. De "upload" principe is hetzelfde, met slechts (geringe) visuele verschillen.