Werkomgeving: Site window – Document window ..................................................................4 1.1 Document window................................................................................................................4 1.1.1 Titelbalk/menubalk/toolbar ...................................................................................4 1.1.2 Status bar .............................................................................................................4 1.1.3 Panels en inspectors ............................................................................................5 1.1.4 Launcher – Mini-Launcher....................................................................................5 1.2 Site Window .........................................................................................................................5
2
Maken van webs en webpagina’s...............................................................................................6 2.1 Een web maken, openen, hernoemen en verwijderen ........................................................7 2.1.1 Een nieuw web maken en definiëren ...................................................................7 2.1.2 Een bestaand web openen...................................................................................8 2.1.3 Een web sluiten ....................................................................................................9 2.1.4 Een web hernoemen ............................................................................................9 2.1.5 Een web verwijderen ............................................................................................9 2.2 Webpagina’s maken, openen en opslaan ........................................................................ 10 2.2.1 Een nieuwe lege pagina maken ........................................................................ 10 2.2.2 Een nieuwe pagina maken op basis van de template digitale huisstijl ............. 10 2.2.3 Pagina’s openen................................................................................................ 10 2.2.4 Pagina’s opslaan in het huidige web en een titel toekennen ............................ 11 2.3 Pagina’s of paginatitels hernoemen, pagina’s verwijderen, verplaatsen, kopiëren en mappen bijmaken.............................................................................................................. 11 2.3.1 Een pagina hernoemen ..................................................................................... 11 2.3.2 De titel van een pagina wijzigen........................................................................ 11 2.3.3 Een pagina verwijderen ..................................................................................... 11 2.3.4 Een pagina verplaatsen..................................................................................... 12 2.3.5 Een pagina kopiëren.......................................................................................... 12 2.3.6 Een map bijmaken............................................................................................. 12 2.4 Tekst typen........................................................................................................................ 12 2.4.1 De verschillende weergaven van de tekst in het document window................. 12 2.4.2 Een nieuwe alinea, een nieuwe regel, spaties en tabs maken ......................... 12 2.4.3 Datum en tijd invoegen...................................................................................... 13 2.4.4 Een speciaal symbool invoegen........................................................................ 13 2.5 Ongedaan maken ............................................................................................................. 13 2.6 De eigenschappen van een item ...................................................................................... 13 2.7 Uw pagina bekijken in de browser .................................................................................... 14 2.7.1 Browsers instellen ............................................................................................. 14 2.7.2 Schermresolutie instellen .................................................................................. 15
3
Afbeeldingen.............................................................................................................................. 17 3.1 Map ‘images’ aanmaken ................................................................................................... 17 3.2 Afbeeldingen invoegen op uw huidige pagina .................................................................. 17 3.2.1 Een afbeelding invoegen die zich in uw web of op een andere plaats van uw schijf bevindt...................................................................................................... 17 3.2.2 Een afbeelding invoegen uit het WWW............................................................. 18 3.2.3 Rollover image................................................................................................... 18 3.2.4 Tekst op afbeelding plaatsen ............................................................................ 18 3.3 Een of meerdere afbeeldingen invoegen in uw web......................................................... 19 3.4 Eigenschappen van de afbeelding.................................................................................... 19 3.5 Een afbeelding bewerken met een Afbeeldingseditor ...................................................... 19 3.5.1 Het programma opgeven waarmee u figuren wilt bewerken............................. 20
4
Bladwijzers en hyperlinks ........................................................................................................ 21 4.1 Een bladwijzer maken....................................................................................................... 21 4.2 Een bladwijzer op de huidige pagina zoeken ................................................................... 21 4.3 Een bladwijzer verwijderen ............................................................................................... 21
ii
Inhoud
5
Hyperlinks maken op tekst of afbeeldingen........................................................................... 22 5.1 Een hyperlink maken naar een pagina van uw huidige web ............................................ 22 5.2 Een hyperlink maken naar een bladwijzer........................................................................ 22 5.3 Een hyperlink maken naar een pagina op het WWW....................................................... 23 5.4 Een hyperlink maken naar een bladwijzer van een pagina op het WWW........................ 23 5.5 Een hyperlink maken naar een e-mailadres ..................................................................... 23 5.6 Een hyperlink maken naar een Word-, Excel-, Powerpoint- bestand of nog andere bestandsformaten ............................................................................................................. 24 5.7 Een hyperlink maken naar de personeelsdatabank ......................................................... 24 5.8 Jump menu (keuzelijstje met hyperlinks).......................................................................... 24 5.9 De bestemming van een hyperlink bepalen ..................................................................... 25 5.10 Hyperlinks maken op een gedeelte van een afbeelding (hotspot ) .................................. 26 5.10.1 Een rechthoekige hotspot maken...................................................................... 26 5.10.2 Een ronde hotspot maken ................................................................................. 26 5.10.3 Een veelhoekige hotspot maken ....................................................................... 27 5.10.4 Het URL-adres van een hotspot bewerken ....................................................... 27 5.10.5 Een hotspot verplaatsen en aligneren............................................................... 27 5.10.6 Een hotspot verwijderen .................................................................................... 27 5.11 Een hyperlink aanpassen ................................................................................................. 28 5.12 Een hyperlink verwijderen................................................................................................. 28 5.13 De grafische weergave van de hyperlinks........................................................................ 28 5.14 Hyperlinks controleren en verbroken hyperlinks aanpassen............................................ 29 5.14.1 Interne hyperlinks controleren en aanpassen ................................................... 29 5.14.2 Hyperlinks over de ganse website aanpassen.................................................. 31 5.14.2.1 Hyperlinks naar een pagina in uw web .............................................. 31 5.14.2.2 Hyperlinks naar pagina’s buiten uw web (external hyperlinks).......... 32
6
Spellingcontrole en synoniemenlijst....................................................................................... 33
7
Tekst en codes zoeken en vervangen in een web ................................................................. 34
8
Opmaak toepassen via CSS..................................................................................................... 36 8.1 De algemene CWIS-stijlen gebruiken............................................................................... 36 8.2 Een tabel invoegen ........................................................................................................... 36 8.2.1 Een tabel maken................................................................................................ 36 8.2.2 Een tabel bewerken........................................................................................... 36 8.2.2.1 Tabelelementen selecteren................................................................ 37 8.2.2.2 Kolommen of rijen toevoegen ............................................................ 37 8.2.2.3 Kolommen of rijen verwijderen........................................................... 37 8.2.2.4 Kolommen gelijkmatig verdelen over de breedte van de tabel.......... 37 8.2.2.5 Kolombreedte en rijhoogte aanpassen / breedte van tabel aanpassen ........................................................................................................... 38 8.2.2.6 Automatisch aanpassen aan de inhoud............................................. 38 8.2.2.7 Tabel omzetten van pixel-waarden naar percentage-waarden of omgekeerd ......................................................................................... 38 8.2.2.8 Cellen splitsen in kolommen of rijen .................................................. 39 8.2.2.9 Cellen samenvoegen ......................................................................... 39 8.2.2.10 Gegevens sorteren............................................................................. 39 8.2.2.11 Tabel in een tabel invoegen............................................................... 39 8.2.2.12 Een bijschrift invoegen ....................................................................... 39 8.2.3 Betekenis van de CSS-stijlen voor tabellen en het toepassen of wijzigen ervan40
9
Template digitale huisstijl K.U.Leuven ................................................................................... 42 9.1 Web klaarmaken voor gebruik .......................................................................................... 42 9.2 Structuur van de template................................................................................................. 43 9.2.1 Onderdelen – technische opbouw van template ............................................... 44 9.2.2 ‘Editable’ en ‘niet-editable’ regions.................................................................... 44 9.3 De template personaliseren.............................................................................................. 45
Inhoud
9.4 9.5 9.6 9.7 9.8 9.9
iii 9.3.1 Meta-header-informatie aanpassen .................................................................. 45 9.3.2 Navigatiebalk (linkerbalk) aanpassen ............................................................... 46 9.3.3 Infobalk aanpassen ........................................................................................... 47 9.3.4 De template opslaan.......................................................................................... 48 Een nieuw document maken op basis van de template ................................................... 49 De inhoud van de template bewerken .............................................................................. 49 9.5.1 De niewsbalk (rechts) ........................................................................................ 49 9.5.2 De middenzone ................................................................................................. 50 Een template wijzigen ....................................................................................................... 52 9.6.1 Een template wijzigen en opslaan..................................................................... 52 9.6.2 Apply Template to Page .................................................................................... 52 Een pagina maken NIET op basis van de template ......................................................... 53 Hoe CSS-stijlbladen opnieuw importeren in uw web in geval van algemene wijzigingen?54 Pagina’s op basis van het oude CWIS-sjabloon omzetten naar pagina’s op basis van de nieuwe template................................................................................................................ 54
10
Analyseren en beheren van uw web ....................................................................................... 55 10.1 Site Files (mappenweergave) ........................................................................................... 55 10.2 Site Map (navigatie- en hyperlinksweergave)................................................................... 55 10.2.1 Wissen van files in het Site Files-venster en wissen van iconen in de Site Map57 10.2.2 Hoe zelf een structuur en hyperlinks opbouwen in de site map?...................... 58 10.3 Design Notes .................................................................................................................... 58 10.4 Opvragen van rapporten ................................................................................................... 60
11
Bestaande (web)pagina’s importeren (= kopiëren in uw web)............................................. 63 11.1 Afzonderlijke pagina’s ....................................................................................................... 63 11.1.1 Rechtstreeks van het WWW ............................................................................. 63 11.1.2 Vanaf uw PC...................................................................................................... 63 11.1.3 Word html-pagina’s............................................................................................ 63 11.2 Meerdere pagina’s in één keer of een gans web importeren ........................................... 64 11.2.1 Van uw PC......................................................................................................... 64 11.2.2 Van de webserver of ‘remote site’(waartoe u FTP-toegang hebt) .................... 65
12
Controleren van pagina’s alvorens te publiceren.................................................................. 66
13
Publiceren en synchroniseren van pagina’s.......................................................................... 67 13.1 U hebt zelf geen toelating om te publiceren ..................................................................... 67 13.2 U hebt zelf toelating om te publiceren .............................................................................. 67 13.2.1 Via een extern FTP-programma (File Transfer Protocol).................................. 67 13.2.2 Via FTP in Dreamweaver .................................................................................. 67 13.2.2.1 Remote Info invullen en publiceren.................................................... 67 13.2.2.2 Structuur van local en remote site ..................................................... 69 13.2.2.3 Publiceren van web met templates digitale huisstijl........................... 69 13.2.3 Files synchroniseren.......................................................................................... 70 13.2.3.1 Controlere op nieuwe(re) files op local of remote site ....................... 70 13.2.3.2 Gebruik maken van het Synchronize-commando.............................. 70
In Dreamweaver wordt een onderscheid gemaakt tussen het document window en het site window. Het document window is het scherm waarin u uw pagina’s bewerkt. Het site window is het scherm waarin u uw website beheert. U kunt gemakkelijk switchen tussen de twee schermen d.m.v. de F8-toets.
1.1
Document window
Wanneer u Dreamweaver opstart wordt standaard een leeg document window geopend.
1.1.1
Titelbalk/menubalk/toolbar
Het document window heeft bovenaan een titelbalk, een menubalk en een toolbar. In de titelbalk staat naast de titel de bestandsnaam van de pagina tussen haakjes. Het is de titel van de pagina die zal worden getoond in de titelbalk van de browser. Ook zoekrobots zoeken op de titel. De bestandsnaam zal getoond worden in de adresbalk van de browser. In de toolbar staan knoppen die frequent worden gebruikt in Dreamweaver. Als deze balk niet zichtbaar is kunt u hem zichtbaar maken via View/Toolbar. 1.1.2
Status bar
Onderaan het scherm ziet u de status bar. Hierin bevindt zich:
5 De tag selector (links onderaan): hierin worden de html-tags getoond van het object dat geselecteerd is of waar de cursor zich bevindt. Wanneer er staat betekent dit dat de cursor zich in de body van het document bevindt. Wanneer een afbeelding ingevoegd wordt en u deze selecteert, zal u in de tag selector ‘ ’ zien staan. De tag selector maakt het bijvoorbeeld eenvoudig om de ganse body van een pagina te selecteren, door op te klikken. en deze kunt u hier ook wijzigen (zie Rechts ziet u welke schermresolutie er is ingesteld punt 2.7.2 Schermresolutie instellen). : geeft de bestandsgrootte en de download tijd van uw pagina weer. : dit is de Mini-Launcher, wordt dadelijk besproken. 1.1.3
Panels en inspectors
In Dreamweaver wordt heel veel gebruikt gemaakt van de panels en inspectors om commando’s uit te voeren, dit zijn in feite werkbalken. De meeste functies van Dreamweaver zijn beschikbaar op meerdere plaatsen, meestal via het menu en via één van de panels. Alle panels en inspectors kunnen geopend en gesloten worden via het menu Window, waarin u ze kunt selecteren of deselecteren. Om ze te sluiten kunt u ook de balk zelf afsluiten. De Property Inspector laat u best altijd open staan. Het Objects Panel wordt in deze basisopleiding weinig gebruikt. De property inspector, die in voorgaande figuur onderaan het scherm weergegeven wordt, toont alle eigenschappen van het huidig geselecteerde object. Hij verandert naargelang het object dat in uw scherm geselecteerd is. Meer uitleg hierover vindt u bij punt 2.6 De eigenschappen van een item Het Objects Panel, in voorgaande figuur links weergegeven, bevat knoppen om elementen in uw pagina in te voegen, zoals afbeeldingen, tabellen, formulieren, hyperlinks. U doet dit door op een knop te klikken of door de knop in het scherm te slepen. In het Objects Panel zitten eigenlijk meerdere panels vervat: Common, Characters, Forms, Frames, Heads, Invisibles en Special. Standaard wordt de Common-panel getoond. U kunt een andere selecteren door op het pijltje naast Common te klikken. 1.1.4
Launcher – Mini-Launcher
De Launcher is een panel die een aantal knoppen bevat om de meest gebruikte panels en windows van Dreamweaver te openen en te sluiten. Wanneer een panel open is, is de knop op de Launcher ingedrukt. Door die ingedrukte knop terug te selecteren wordt het panel of window gesloten. Als deze panel op dat ogenblik niet de bovenste is, zal deze eerst bovenaan komen te liggen, door een tweede maal op de knop te klikken, wordt de panel gesloten. rechts onderaan De Launcher kan horizontaal of verticaal geplaatst worden door op het icoontje te klikken. Eens u vertrouwd bent met de symbolen in de Launcher kunt u wat plaats op uw scherm besparen door hem te sluiten en in de plaats de Mini-Launcher te gebruiken (rechts onderaan in de status bar), die dezelfde knoppen bevat.
1.2
Site Window
Om over te schakelen van het document window naar het site window kunt u de F8-toets gebruiken, of er bestaat nog een tweede snelle manier: klik op de knop Launcher.
Show Site in de Mini
6
Bovenaan bevindt zich ook een titelbalk, een menubalk en een toolbar. Het site window bestaat uit twee delen en deze kunnen twee verschillende benamingen hebben. Het rechtse gedeelte van het scherm wordt local site genoemd, dit is de plaats van het web op uw PC; dit deel wordt ook Site Files-venster genoemd, Het linkse gedeelte van het scherm is de remote site, m.a.w. de plaats van uw web op de server. Van het ogenblik dat u een connectie maakt met de server om het web te publiceren, zullen de files in het linkse gedeelte van het scherm zichtbaar zijn. De remote site is in feite een identieke kopie van de local site. (Hoe het publiceren gebeurt wordt beschreven in punt 13.2.2 Via FTP in Dreamweaver.). In het linkse gedeelte van het scherm kunt u ook de Site Map weergeven. De site map toont de ganse structuur van uw web. Het is in feite een navigatieweergave van het web waarin alle hyperlinks worden weergegeven. De Site Map- en Site Files-weergave worden verder besproken in punt 10. Analyseren en beheren van uw web. U kunt de plaats van uw local site en remote site eventueel wijzigen (linkse of rechtse deel van het scherm) via Edit/Preferences. Kies hiervoor Site onder Category en maak bovenaan bij Always show uw instellingen.
2
Maken van webs en webpagina’s
Een web in Dreamweaver is een verzameling van HTML-pagina’s, afbeeldingen, documenten, multimedia- en andere bestanden. En een web kan in Dreamweaver worden geopend, gekopieerd, bewerkt en beheerd. Het is zeker aan te raden om een web aan te maken in plaats van losse pagina’s. De belangrijkste reden hiervoor is dat wanneer bestanden worden hernoemd of verplaatst binnen uw web, de hyperlinks automatisch worden aangepast. Belangrijk!!! Voordat u een web gaat maken moet u een locatie op uw PC creëren waarin u de webpagina’s gaat plaatsen. Dit wordt dan de werkelijke ‘website root’ of ‘local root folder’ van het web. U maakt een map aan ergens op uw harde schijf, misschien best in de map Mijn documenten\Mijn Webs\… op uw Bureaublad (deze map is speciaal voorzien voor het plaatsen van webs). U geeft een naam aan de map, b.v. cursussen, dit kan om het even welke naam zijn, als de naam maar een kenteken is waaraan u uw website herkent. U moet het web dan in Dreamweaver zelf gaan definiëren, d.w.z. een naam geven en de plaats van het web (local root folder) aanduiden. Opmerking: u maakt de ‘local root folder’ van het web best niet aan in dezelfde map waarin Dreamweaver geïnstalleerd is, want indien u Dreamweaver ooit opnieuw zou moeten installeren, zou u al uw webs kwijt zijn!
7
2.1
Een web maken, openen, hernoemen en verwijderen
Wanneer u Dreamweaver voor de eerste keer opstart wordt enkel een leeg document window geopend. Wanneer u reeds webs gedefinieerd had in het site window zal bij het opstarten het site window geopend worden tesamen met een leeg document window. Gebruik de F8-toets om te switchen tussen de twee vensters. 2.1.1
Een nieuw web maken en definiëren
1. Kies (in het site window of in het document window) Site/Define Sites en het volgende dialoogvenster wordt geopend:
Wanneer er reeds andere webs werden gedefinieerd worden deze allen getoond in dit dialoogvenster. Klik op de knop New voor het creëren van een nieuwe site. 2. Het Site Definition dialoogvenster is de plaats waar u o.a. de gegevens voor de Local info en Remote info invoert.
8 Selecteer Local Info onder Category. In het vakje Local Root Folder typt u het pad (of navigeert u naar de map) waarin de files van uw web zullen worden bewaard, dit is de map die u reeds heeft aangemaakt op uw Bureaublad op uw PC (in de map Mijn Documenten\Mijn webs\cursussen ) of m.a.w. de ‘website root’. In het vakje Site Name geeft u een naam aan de site, b.v. cursussen. Dit mag maar moet niet dezelfde naam zijn als de naam van de map van de ‘website root’. Selecteer ook de optie Refresh Local File List Automatically. In dat geval wordt de local site automatisch vernieuwd telkens wanneer u een nieuwe file toevoegt. Indien deze optie niet aanstaat moet u de lokale bestanden telkens manueel vernieuwen. (Als u werkt op een oudere computer is het aan te raden deze optie niet aan te zetten omdat dit vertragend kan werken in het site window). Typ bij Http Address eventueel reeds het URL-adres in dat zal verwijzen naar de complete website (als u de URL nog niet kent mag u deze later toevoegen). Dit adres helpt Dreamweaver om absolute URL’s in de site te controleren. Selecteer EnableCache. Dit versnelt het automatisch updaten en checken van links bij het hernoemen of verplaatsen van files. Klik even op Remote info onder Category. Hier zullen later de nodige gegevens ingevuld worden om het web te publiceren. Ook het volgende item Design Notes wordt verder in de cursus besproken. Klik tenslotte op OK in het Site Definition-dialoogvenster en er verschijnt een boodschap dat de ‘site cache’ wordt gecreëerd. Klik op OK en tenslotte op Done. De naam van uw web verschijnt in de local site, of ook Site Files-venster genoemd (rechtse gedeelte van het site window). 3. Nu kunt u als u het wenst hier reeds onmiddellijk een structuur aanmaken van uw web, m.a.w. u kunt reeds mappen en submappen aanmaken d.m.v. File/New Folder via het menu (of via rechts klikken in het Site Files-venster en New Folder te selecteren uit het snelmenu). U geeft de mappen dan onmiddellijk een naam (kleine letters!). 2.1.2
Een bestaand web openen
1. U kunt een bestaand web openen door (in het site window of in het document window) Site/Define Sites te kiezen.
In het Define Sites-venster wordt een overzicht van uw bestaande sites getoond. U selecteert de gewenste site en klikt op de knop Done. 2. Of u kunt in het site window via het drop-down menu Site (in de toolbar) de gewenste site selecteren.
9 Opmerking: Wanneer u verkiest dat het web waarin u het laatst hebt gewerkt onmiddellijk wordt geopend bij het opstarten van Dreamweaver, kunt u volgende optie aanzetten via Edit/Preferences – General: Show only Site Window on Startup. Dan wordt enkel het site window opgestart en wordt er geen leeg document window geopend! U kunt uw bestanden dan openen vanuit het site window door erop te dubbelklikken. 2.1.3
Een web sluiten
In Dreamweaver kan men een web niet echt afsluiten en dit hoeft ook niet. U kunt switchen tussen de verschillende sites via het drop-down menu Site (in de toolbar).
De webs worden pas echt afgesloten bij het afsluiten van Dreamweaver. 2.1.4
Een web hernoemen
1. Kies Site/Define Sites.
2. Selecteer het web dat u wilt hernoemen en klik op de knop Edit. 3. Wijzig in het Site Definition-dialoogvenster in de Local Info in het vakje Site Name de naam van het web en klik op OK. 4. U krijgt de boodschap ‘The cache will now be recreated because the name, root folder, or http address of the site has been changed’. Klik op OK. 5. Klik vervolgens in het Define Sites-venster op de kop Done. Opmerking: De Site Name wijzigen is verschillend van het wijzigen van de Local Root Folder. Wanneer u de local root folder, d.w.z. de map op de PC waarin het web zich bevindt, wijzigt, zult u nadien bij het opstarten van Dreamweaver de boodschap krijgen dat de local root folder van het web niet gevonden wordt, en moet u in dit geval in het Site Definition-dialoogvenster bij ‘Local Root Folder’ de nieuwe (hernoemde) map gaan aanduiden. 2.1.5
Een web verwijderen
1. Kies Site/Define Sites.
10
2. Selecteer het web dat u wilt verwijderen en klik op de knop Remove. Opmerking: Het web is op deze manier niet werkelijk verwijderd. Het is enkel verwijderd uit het Define Sitesvenster van Dreamweaver maar het staat nog steeds in de betreffende map op uw PC. Het definitief verwijderen van een web moet gebeuren via de Windows Verkenner.
2.2
Webpagina’s maken, openen en opslaan
Open eerst het web waarin u pagina’s wilt maken of openen. Plaats u in het document window. 2.2.1
Een nieuwe lege pagina maken
In het document window maakt u een nieuwe pagina aan via het menu File/New. U kunt ook vanuit het site window een nieuwe pagina aanmaken: 1. Via het menu File/New Window, dan wordt er onmiddellijk een leeg document window geopend of 2. Klik in het Site Files-venster en kies File/New File in het menu of klik rechts in het Site Filesvenster en kies New File uit het snelmenu. In dit geval moet u onmiddellijk een naam geven aan de file en mag u niet vergeten om de extensie .htm, indien deze zou verwijderd zijn bij het selecteren van de naam, er zelf terug bij te voegen, zoniet wordt de pagina niet herkend door Dreamweaver en kan ze niet geopend worden. 2.2.2
Een nieuwe pagina maken op basis van de template digitale huisstijl
In het document window maken we een nieuwe pagina aan via File/New. U kunt er best een gewoonte van maken om dit op deze manier te doen, vermits we bij het maken van CWIS-pagina’s gebruik zullen maken van een template. CWIS-pagina’s moeten gemaakt worden volgens de vernieuwde huisstijl K.U.Leuven en hierbij moeten we gebruik maken van de template met digitale huisstijl van de dienst Communicatie. Meer informatie over de digitale huisstijl vindt u op volgend adres: http://www.kuleuven.ac.be/icm/digistijl/index.htm. Het bewerken en personaliseren van de template wordt later besproken in punt 9. Template digitale huisstijl Een nieuwe pagina maken op basis van de template gebeurt dan ook via File/New from Template (uitleg zie punt 9.4 Een nieuw document maken op basis van de template). 2.2.3
Pagina’s openen
1. Kies in het document window File/Open en selecteer de gewenste file (of ga via het site window en dubbelklik in het Site Files-venster op de file die u wilt openen.)
11 2.2.4
Pagina’s opslaan in het huidige web en een titel toekennen
Het is aan te raden dat u uw pagina’s onmiddellijk opslaat als u een nieuwe pagina aanmaakt. Wacht niet tot u tekst en figuren hebt ingevoegd. Als u dan figuren (of andere mediabestanden) invoegt, worden de verwijzingen ernaar onmiddellijk op de juiste manier gemaakt. 1. Geef het document eerst een duidelijke titel in het vakje bovenaan in de toolbar. Als de toolbar niet zichtbaar is kunt u deze activeren via View/Toolbar. Vervang ‘Untitled Document’ door een beschrijvende titel, bevestig met Enter. Het is deze titel die zal getoond worden in de titelbalk van de browser, ook zoekrobots zoeken op de titel. De titel kan steeds in de toolbar worden gewijzigd, ofwel in de Page Properties van het document (via het menu Modify/Page Properties of klik rechts in het scherm en kies Page properties). 2. Als u een pagina gemaakt of geopend hebt in uw huidige web kiest u File/Save. Als u de pagina geopend hebt vanuit een andere locatie, kiest u File/Save As en selecteert u de map van het web waarin u de pagina wenst te bewaren. Als u de pagina voor de eerste maal opslaat, typt u een naam in voor het document en klikt u op de knop Opslaan.
2.3
Pagina’s of paginatitels hernoemen, pagina’s verwijderen, verplaatsen, kopiëren en mappen bijmaken
BELANGRIJKE OPMERKING Zorg ervoor dat uw pagina’s steeds GESLOTEN zijn vóór u ze gaat VERPLAATSEN, HERNOEMEN, KOPIËREN OF VERWIJDEREN!! Wanneer bestanden HERNOEMD of VERPLAATST worden BINNEN UW WEB worden de hyperlinks naar deze bestanden AUTOMATISCH aangepast. Er zal een dialoogvenster Update Files verschijnen met de lijst van files die een hyperlink bevatten naar de file die u wilt hernoemen of verplaatsen. KIES HIER STEEDS Update om de hyperlinks aan te passen!! Indien u ‘Don’t update’ kiest zullen de hyperlinks verbroken worden, wees hier dus uiterst voorzichtig!! 2.3.1
Een pagina hernoemen
Klik in het Site Files-venster in het site window met de rechtermuisknop op de pagina die u wilt hernoemen en kies Rename. Vergeet niet om de extensie .htm opnieuw bij te typen moest deze per ongeluk verwijderd zijn (zoniet herkent Dreamweaver de pagina niet en kan ze niet meer geopend worden). 2.3.2
De titel van een pagina wijzigen
Klik in het document window in het vakje Title in de toolbar, wijzig de titel en druk op Enter. Of klik rechts in het venster en kies Page Properties. Wijzig de titel in het vakje Title bovenaan. 2.3.3
Een pagina verwijderen
Klik in het Site Files-venster in het site window rechts op het bestand en kies Delete. Zie ook belangrijke opmerkingen i.v.m. het verwijderen van pagina’s in punt 10.2.1 Wissen van files in het Site Files-venster en wissen van iconen in de Site Map. Opmerking: Om meerdere aaneengesloten bestanden te selecteren: klik op het eerste te selecteren bestand, druk de Shift-toets in (houdt deze ingedrukt) en klik vervolgens op het laatste te selecteren bestand. Om meerdere niet-aaneengesloten bestanden te selecteren: klik op het eerste te selecteren bestand, druk de Ctrl-toets in (houdt deze ingedrukt) en klik achtereenvolgens op elk te selecteren bestand.
12 2.3.4
Een pagina verplaatsen
Klik in het Site Files-venster op de pagina die u wenst te verplaatsen en sleep ze naar de gewenste locatie. Of klik rechts op de pagina en kies Cut, klik vervolgens rechts op de locatie of de map waar u de pagina wilt plaatsen en kies Paste. 2.3.5
Een pagina kopiëren
Klik in het Site Files-venster rechts op de pagina en kies Copy. Klik vervolgens rechts op de map of de locatie waar u de pagina wilt kopiëren en kies Paste. Opmerking: interne hyperlinks in de pagina worden hierbij niet aangepast, deze zullen verbroken zijn! 2.3.6
Een map bijmaken
Klik in het Site Files-venster rechts in het venster (als u onder de root van het web een map wilt bijmaken) of klik rechts op een map (als u in een map een submap wilt creëren) en kies New Folder.
2.4
Tekst typen
2.4.1
De verschillende weergaven van de tekst in het document window
In het document window kunt u de tekst bekijken in Code View, Design View of Code and Design View. U kunt deze weergaven selecteren via het menu View/Code – View/Design – View/Code and Design. Of u kunt deze weergaven kiezen via de knoppen In Design View In Code View
in de toolbar.
maakt u uw pagina’s en kunt u ze bekijken in WYSIWYG-mode. ziet u de tekst in HTML-weergave.
Om de tekst in beide weergaven tegelijk te bekijken en te bewerken, kiest u de knop Code and . Dan wordt de tekst in het bovenste gedeelte van het scherm in Code view (htmlDesign View weergave) getoond en in het onderste gedeelte in Design view. Indien u verkiest om de Design view bovenaan en de Code view onderaan te plaatsen, kan dat via het menu View/Design View on Top. Opmerking: Wanneer u wijzigingen aanbrengt in het scherm van de Code View, verschijnt er een venstertje om Refresh te doen, dit is nodig om de wijzigingen in het scherm van de Design view door te voeren (kan ook via de toets F5). 2.4.2
Een nieuwe alinea, een nieuwe regel, spaties en tabs maken
Nieuwe alinea: Druk Enter. Nieuwe regel: Druk Shift+Enter; hiermee maakt u een nieuwe regel binnen een alinea. Spaties – vaste spatie: In Dreamweaver is het niet mogelijk om oneindig veel spaties na mekaar in te tikken, er kan slechts 1 spatie worden gemaakt tussen 2 woorden. Om een vaste spatie te maken drukt u op Ctrl+Shift+spatiebalk. De HTML-tag (die u in Code View kunt bekijken) geeft: (non-breaking space). Een vaste spatie invoegen kunt ook via Insert/Special Characters/Non-Breaking Space in het menu.
13 Tabs: Tabs zijn enkel bruikbaar in tabellen om van de ene kolom naar de andere te springen. Opmerking voor Office-gebruikers: niet-afdrukbare tekens bestaat niet in Dreamweaver! 2.4.3
Datum en tijd invoegen
U kunt een tijdstempel toevoegen aan de pagina als u de datum en/of tijd wilt weergeven waarop de pagina voor het laatst werd gewijzigd. Hierdoor zien de bezoekers wanneer uw pagina het laatst is bijgewerkt of dat de informatie op de site is gewijzigd sinds hun laatste bezoek. In Dreamweaver kan de datum en tijd echter enkel in het Engels weergegeven worden. 1. Kies Insert/Date
2. 3. 4. 5.
Bij Day Format selecteert u [No Day] Kies een datumnotatie bij Date Format. Kies een tijdnotatie bij Time Format Zet Update Automatically on Save aan, dan zorgt Dreamweaver voor het updaten van de datum telkens u de pagina bewaart, klik tenslotte op OK.
2.4.4
Een speciaal symbool invoegen
1. Plaats de cursor op de plaats waar u het symbool wilt invoegen. 2. Kies Insert/Special Characters. 3. Hier hebt u ook de mogelijkheid om een Line Break (zachte return) of een Non-Breaking Space (vaste spatie) in te voegen. Om een symbool in te voegen, selecteer een teken uit het lijstje eronder of voor meerdere symbolen, klik op Other…, kies in het volgende scherm een symbool en klik op OK.
2.5
Ongedaan maken
U kunt uw laatste handeling(en) ongedaan maken via het menu Edit/Undo. Als er een laatste bewerking is uitgevoerd, wordt ook een beschrijving gegeven van die bewerking, b.v. Edit/Undo Delete. Wanneer u dit ongedaan maakt, toont het Undo-commando vervolgens de voorlaatste bewerking, b.v. Edit/Undo Typing, enzovoort. U kunt de bewerking natuurlijk steeds opnieuw laten uitvoeren door Repeat …. te kiezen.
2.6
De eigenschappen van een item
De eigenschappen van een item worden getoond in de Property Inspector. De property inspector verandert als een kameleon: afhankelijk van het object dat u geselecteerd hebt, past hij zich aan en toont de eigenschappen specifiek voor dat object. U kunt van elk afzonderlijk item van een pagina de eigenschappen opvragen: van tekst, figuren, tabellen (van cellen in een tabel), enz. U kunt tevens de
14 eigenschappen van de pagina zelf opvragen. De eigenschappen van een item worden gebruikt door browsers om te bepalen hoe de items worden weergegeven. Om de eigenschappen van uw pagina op te vragen klikt u rechts in de pagina en kiest u Page Properties of u kiest Modify/Page Properties in het menu. In de page properties kunt u bijvoorbeeld de titel van uw pagina aanpassen (in het vakje Title). De eigenschappen van een item of object worden getoond eenvoudigweg door het object te selecteren. Wanneer u bijvoorbeeld tekst geselecteerd hebt, ziet de property inspector er als volgt uit:
Wanneer u bijvoorbeeld een figuur selecteert ziet de property inspector er plots zo uit:
Opmerking De property inspector is één van de vele ‘panels’ (werkbalken) die in het document window aanwezig zijn. Om de property inspector te tonen/verbergen kiest u Window/Properties. U zult vlug merken dat u de property inspector praktisch altijd nodig hebt, u laat hem dan ook best altijd aanstaan. Tip: Als u de geopende panels tijdelijk niet nodig hebt kunt u ze verbergen d.m.v. de F4-toets op uw klavier. Druk opnieuw F4 om ze terug zichtbaar te maken.
2.7
Uw pagina bekijken in de browser
1. Klik op de knop
in de toolbar
Zo ziet u onmiddellijk welke browsers reeds geïnstalleerd zijn:
In dit geval is dit Internet Explorer en Netscape Navigator, de meest gangbare browsers. Klik op één van de twee en uw pagina wordt weergegeven in de gekozen browser. Opmerking: Het is niet nodig om uw pagina eerst op te slaan alvorens ze in de browser te bekijken! 2.7.1
Browsers instellen
Wanneer er nog geen browsers in Dreamweaver gedefinieerd zijn, doet u dit op de volgende manier: Kies Edit/Preferences in het menu (kan zowel in het site window als in het document window) of klik Preview/Debug in Browser in het document window en kies Edit Browser List. U op de knop komt in beide gevallen in het dialoogvenster Preferences terecht, waarin algemene instellingen kunnen gebeuren voor het programma.
15
Selecteer Preview in Browser. Er staat mogelijk al een browser ingesteld (bv. Internet Explorer). Om een tweede browser, bijvoorbeeld Netscape Navigator toe te voegen, klikt u op het teken. Het programma Netscape moet uiteraard op uw PC geïnstalleerd zijn!!
U typt een naam in voor de nieuwe browser in het vakje Name. Klik vervolgens op de Browse-knop en zoek de locatie van het programma Netscape op uw PC. Als u met Windows werkt is de standaardlocatie voor de meeste browsers de directory ‘Program Files’. U kunt kiezen tussen Primary Browser of Secondary browser. Dit is nuttig wanneer u de browser wenst te starten met een shortcut key: dit is F12 voor de primary, in dit geval Internet Explorer, en Ctrl+F12 voor de secundary, Netscape Navigator. De browser kan ook geactiveerd worden via File/Preview in Browser in het menu. 2.7.2
Schermresolutie instellen
Elke PC-gebruiker kiest zelf de schermresolutie waarmee hij wenst te werken, afhankelijk van zijn PC. Een bezoeker die een pagina bekijkt met een resolutie van bijvoorbeeld 1024 bij 768 pixels kan een groter gedeelte van de pagina zien dan iemand die een resolutie gebruikt van 800 bij 600 pixels. Veel PC-gebruikers werken nog met de resolutie 800 bij 600 pixels. Het instellen van de schermresolutie moet gebeuren via de Windows Verkenner: Ga via de Start-knop en kies Instellingen – Configuratiescherm – Beeldscherm – Instellingen.
Door het pijltje te verslepen kunt u een andere schermresolutie kiezen. Wij werken voor de resoluties: 640x480, 800x600, 1024x768, 1280x1024.
16
Welke resolutie u ook instelt in, het is aan te raden uw pagina’s steeds te controleren in verschillende browserversies en in verschillende resoluties! Ter informatie: U kunt in Dreamweaver zelf ook een schermresolutie instellen, maar dit geeft niet hetzelfde resultaat dan wanneer u de instellingen via de Windows Verkenner doet. Enkel het venster wordt verkleind of vergroot naargelang de resolutie, maar de tekst blijft zoals hij is. De tekst en afbeeldingen worden niet aangepast aan de hogere of lagere resolutie. Om de schermresolutie aan te passen klikt u op het pijltje naast de reeds ingestelde waarde in de en er verschijnt een drop-down menu met de mogelijke resoluties: status bar
De waarden rechts (tussen haakjes) geven de schermresolutie weer. De waarden links zijn de geschatte browser window afmetingen. Ze zijn kleiner dan de schermresolutie omdat de browser interface ook plaats inneemt op het scherm. Selecteer b.v. 760x420 (800 x 600, Maximized).
17
3
Afbeeldingen
GIF- en JPEG-afbeeldingen worden het meest gebruikt voor webpagina’s. Afbeeldingen in GIF-indeling kunnen maximaal 256 kleuren bevatten en gebruiken compressie zonder kwaliteitsverlies. Een van de voordelen van GIF-afbeeldingen is dat u één kleur transparant kunt maken. De JPEG-indeling wordt meestal gebruikt voor fotorealistische afbeeldingen met duizenden of miljoenen kleuren. JPEG-figuren zijn handig omdat u de bestandscompressie kunt bepalen door de beeldkwaliteit te wijzigen. Hoe lager de kwaliteit wordt ingesteld, hoe meer een bestand wordt gecomprimeerd en hoe kleiner het bestand als gevolg daarvan zal zijn. U kunt ook afbeeldingen met de volgende bestandsindelingen toevoegen: BMP (Windows en OS/2) De bitmapindeling van de Microsoft Windows-omgeving. Een figuur bestaande uit een reeks kleine puntjes, met ondersteuning van afbeeldingen van maximaal 24 bits. TIFF Tagged Image File Format. Een bestandsindeling met hoge resolutie, op basis van codes, gebruikt voor universele uitwisseling van digitale afbeeldingen. TGA Truevision Targa Graphics Adaptor. Ondersteunt 1- tot 32-bits afbeeldingen en professionele functies zoals een alpha(masker)kanaal, gamma-instellingen en een ingebouwde miniatuurafbeelding. RAS Raster-indeling. Enigszins gecomprimeerd, met ondersteuning voor 36-bits afbeeldingen. EPS Encapsulated PostScript. Een uitbreiding van de Post Graphic-bestandsindeling, waarmee PostScript-afbeeldingsbestanden in andere documenten kunnen worden geïntegreerd. PNG De Portable Network Graphics-indeling is een alternatief voor GIF, waarin ook transparantie wordt ondersteund voor afbeeldingen met duizenden of miljoenen kleuren. Voor een aantal webbrowsers is echter een speciale invoegtoepassing nodig om PNG-afbeeldingen weer te geven. WMF Microsoft Windows Metafile. Ondersteunt, bitmap-, vector- (weergave van grafische objecten, zoals lijnen, bogen en rechthoeken, met behulp van geometrische formules. Een vectorafbeelding verschilt van een bitmapafbeelding waarin een afbeelding als een verzameling pixels wordt opgeslagen) en EPS-gegevens. Wanneer u op een pagina een afbeelding toevoegt die niet de indeling GIF of JPEG heeft, wordt die afbeelding bij het opslaan automatisch geconverteerd naar een GIF-indeling (bij 8 bits kleur of minder) of naar een JPEG-indeling (bij meer dan 8 bits kleur).
3.1
Map ‘images’ aanmaken
Wanneer u afbeeldingen invoegt moeten deze in uw eigen web worden bewaard. Het is handig om een map images in uw web aan te maken om al deze afbeeldingen in op te slaan. U maakt de map aan in het Site Files-venster in het site window. Klik rechts en kies New Folder in het snelmenu, geef de map de naam images (in kleine letters!!). Indien u heel veel afbeeldingen in uw web invoegt is het misschien aan te raden om ze te groeperen per map, u creëert dan bijvoorbeeld, naargelang de behoefte, en elke aparte map een submap images. De mappen met de afbeeldingen moeten bij het publiceren van het web ook mee gekopieerd worden naar de server, zoniet zullen de afbeeldingen niet zichtbaar zijn voor de bezoeker van uw web.
3.2
Afbeeldingen invoegen op uw huidige pagina
3.2.1
Een afbeelding invoegen die zich in uw web of op een andere plaats van uw schijf bevindt
Insert Image in het Objects panel. 1. Kies Insert/Image of klik op de knop 2. Selecteer de map waarin zich de afbeelding bevindt en selecteer de afbeelding die u wilt invoegen. 3. Klik op Select. Opmerking Indien de afbeelding zich op uw schijf bevond (dus nog niet in het huidige web) wordt bij het invoegen van de afbeelding gevraagd of de afbeelding in uw web moet worden opgeslagen. Hierop antwoordt u bevestigend en u plaatst de afbeelding in de map (of één van de mappen) images.
18 3.2.2
Een afbeelding invoegen uit het WWW
1. Zoek in uw webbrowser de afbeelding die u wilt invoegen, klik rechts op de afbeelding en kies Afbeelding opslaan als (Save picture as). 2. Navigeer naar de gewenste map images van uw huidige web en klik op Opslaan (Save). 3. Plaats u in Dreamweaver in de pagina waarin u de afbeelding wilt invoegen en kies Insert/Image Insert Image in het Objects panel. of klik op de knop 4. Selecteer de afbeelding en klik op de knop Select. 3.2.3
Rollover image
Met een rollover image kunt u 2 afbeeldingen over mekaar laten rollen. Wanneer u met de muisaanwijzer naar de oorspronkelijke afbeelding wijst, verandert deze in een andere afbeelding. Het resultaat is enkel zichtbaar in de browser. Opmerking: het is enkel mogelijk om 2 afbeeldingen van dezelfde grootte over mekaar te laten rollen! 1. Kies Insert/Interactive Images/Rollover Image of kies de knop Objects panel
Insert Rollover Image in het
2. Voeg via de Browse-knop een afbeelding in (al dan niet uit uw huidige web) in het vakje Original Image. Voeg via de Browse-knop een afbeelding in in het vakje Rollover Image. Laat de optie Preload Rollover Image aanstaan. 3. U kunt een hyperlink invoegen die, na het rollen over de afbeelding, wordt uitgevoerd door te klikken op de afbeelding. Vul in dat geval een URL in in het vakje When Clicked, Go To URL. 4. Probeer het uit in de browser. 3.2.4
Tekst op afbeelding plaatsen
U kunt tekst op een afbeelding plaatsen door het gebruik van layers. Dit is een snelle oplossing en mag gebruikt worden, maar de meest aangewezen manier om tekst op een afbeelding te plaatsen is via een tekenprogramma. 1. Open het Layers panel via Window/Layers. Draw Layer in het Objects panel. 2. Kies Insert/Layer of kies de knop Breng de layer tot de gewenste grootte door de randen te verslepen. Geef een naam aan de layer in het vakje
in de property inspector
3. Kies Insert/Image of klik op de knop Insert Image in het Objects panel en voeg een afbeelding in. 4. Voeg een tweede layer in via Insert/Layer of de knop in het Objects panel. Breng de layer tot de gewenste grootte en geef hem een naam in de property inspector. Typ uw tekst in de layer (en pas er eventueel opmaak op toe). 5. Sleep de layer die de tekst bevat op de eerste layer met de figuur. 6. Bekijk het resultaat in de browser.
19
3.3
Een of meerdere afbeeldingen invoegen in uw web
Als u een afbeelding invoegt, plaatst u een kopie hiervan in uw web. U kunt meerdere afbeeldingen tegelijk in uw web invoegen. 1. U kopieert de afbeeldingen in de Windows Verkenner naar de gewenste map in Dreamweaver. U kunt ook een volledige map met afbeeldingen kopiëren. De files van de afbeeldingen zijn onmiddellijk zichtbaar in de Site Files-weergave in het site window in Dreamweaver. U kunt eventueel de naam van de afbeelding wijzigen. 2. U gaat naar het document window en u kiest Insert/Image of de knop Objects panel 3. Selecteer de gewenste afbeelding en klik op Select.
3.4
Insert Image in het
Eigenschappen van de afbeelding
U klikt op de afbeelding om deze te selecteren. De Property Inspector toont de eigenschappen van de figuur.
Wanneer u op het
klikt rechts onderaan wordt het tweede deel van de inspector zichtbaar:
Om het onderste gedeelte opnieuw te verbergen klikt u op
.
De figuur die geselecteerd is wordt verkleind weergegeven in de inspector, hiernaast geeft u best een naam aan de figuur. In het vakje Src (Source) wordt het pad weergegeven waarin de afbeelding zich bevindt. De breedte en de hoogte van de afbeelding zijn reeds ingevuld: W (width) en H (height) en kunt u hier wijzigen. Het is aan te raden om de afbeelding proportioneel te vergroten of te verkleinen: selecteer de afbeelding, plaats de muisaanwijzer in één van de vier hoeken zodat u een dubbele pijl verkrijgt, houd de Shift-toets ingedrukt en versleep de figuur tot de gewenste grootte. In het vakje Alt moet u een alternatieve tekst intypen voor de afbeelding. Dit is tekst die zal getoond wordt bij het downoaden van de figuur in de browser en als u met de muisaanwijzer naar de afbeelding wijst. Deze tekst wordt ook weergegeven als de browser de figuur niet kan downloaden (omdat de browser dit niet aankan of omdat de functie niet beschikbaar of uitgeschakeld is). Alternatieve tekst toevoegen mag niet vergeten worden! Opmerking: Als er een rand rondom de afbeelding wordt geplaatst (dit is meestal enkel zichtbaar in de browser, niet in Dreamweaver zelf), kunt u deze uitzetten door in de property inspector bij Border de waarde ‘0’ in te tikken.
3.5
Een afbeelding bewerken met een Afbeeldingseditor
U kunt een afbeelding bewerken met een afbeeldingseditor programma, b.v. Coreldraw of Photoshop. Er moet dan opgegeven zijn met welk programma u de verschillende bestandstypen wilt bewerken (GIF, JPEG, BMP ...).
20 3.5.1
Het programma opgeven waarmee u figuren wilt bewerken
In Microsoft Windows is elk type bestand (bijvoorbeeld figuurbestanden zoals GIF’s, JPEG’s en PNG’s) gekoppeld aan een standaardtoepassing of editor zoals b.v. Macromedia Fireworks of Microsoft Photo Editor. Wanneer de figuur geselecteerd is, kunt u in de property inspector in het onderste gedeelte de knop gebruiken om de figuur te bewerken in een afbeeldingseditor. Dit editor-programma moet dan uiteraard op uw PC geïnstalleerd zijn. In Dreamweaver zijn de meeste koppelingen tussen standaardeditors en bestandstypen al ingesteld. U kunt een bestandstype (GIF, JPEG,…) koppelen aan een andere editor. Dan gaat u als volgt te werk: 1. Kies Edit/Preferences in het menu en selecteer in dat dialoogvenster onder Category het onderdeel File Types/Editors.
2. U ziet dat voor het bestandstype .gif de editor PHOTOED (Photo Editor) is opgegeven. 3. Om een andere editor te koppelen aan het bestandstype selecteert u onder Extensions het betreffende bestandstype, u klikt boven het schermpje Editors op het teken en u zoekt het gewenste editor-programma. 4. U kunt in het vakje Extensions ook nieuwe bestandstypen bijvoegen d.m.v. de knop en deze dan ook koppelen aan een editor-programma. Om een bestandstype opnieuw te verwijderen selecteert u de extensie en klikt u op het teken 5. Klik tenslotte op OK.
21
4
Bladwijzers en hyperlinks
Een bladwijzer of Named Anchor is een benoemde locatie op een pagina waarnaar een hyperlink kan worden gelegd.
4.1
Een bladwijzer maken
1. Plaats de cursor op de positie waar u een bladwijzer wilt invoegen. 2. Kies in het Objects panel (zichtbaar maken via Windows/Objects) het panel Invisibles en klik op Insert Named Anchor de knop of kies Insert/Invisible tags/Named Anchor in het menu. 3. Geef een naam aan de bladwijzer. U mag geen spaties gebruiken in de naam van een bladwijzer! 4. Klik op OK. Op de plaats van de bladwijzer verschijnt het anchor-teken
in de tag selector, klik vervolgens op de stijl ‘center’ in het CSS Styles Panel. Op de figuur en de tekst wordt dan een hyperlink geplaatst. op de hyperlink die op de figuur wordt geplaatst hoeft geen stijl toegepast te worden op de hyperlink die op de tekst wordt geplaatst wordt de stijl ‘nieuws’ toegepast; de tekst zelf kunt u ook nog in een blauwe of oranje kleur zetten indien u dat wenst, door er de stijl ‘spanblauw’ of ‘spanoranje’ op toe te passen. Een rij toevoegen klik in de rij waarboven u één wilt toevoegen, klik rechts en kies Table – Insert Row in het snelmenu. klik de rij die u wilt kopiëren (met een titel of met opsomming), selecteer de
-tag van die rij en doe Ctrl-C om ze te kopiëren klik opnieuw in de nieuwe rij, selecteer de
-tag van die rij en doe Ctrl-V. Opmerking: Wanneer bij het aanpassen van de nieuwsbalk het resultaat niet meer goed weergegeven wordt, moet u het scherm even ‘resizen’ of verslepen, d.w.z. plaats de muisaanwijzer in de rechterbenedenhoek van het scherm totdat u een een schuine dubbele pijt ziet en versleep het even. 9.5.2
De middenzone
De inhoud van de middenzone, m.a.w. wat in de ‘body’ van de pagina komt te staan, is volledig vrij. . De ‘body’ is uiteraard een ‘editable region’ en wordt aangeduid met Indien u de lay-out van de homepagina K.U.Leuven wenst te gebruiken, kunt u dit eventueel vermelden bij de aanvraag van de template, dan wordt een voorbeeld hiervan onmiddellijk in de template geplaatst. Deze lay-out wordt hoofdzakelijk gebruikt voor navigatiepagina’s, en is ook opgebouwd uit tabellen, waarin u de bestaande tekst kan overtypen of rijen en cellen bijmaken d.m.v. kopiëren en plakken.
51 Navigatiepagina’s gebruiken verplicht als lettertype de stijl ‘txt’ of de default paragraaf stijl zoals die is gedefinieerd in de centrale style sheet. Achterliggende webpagina’s die geen navigatiepagina zijn gebruiken verplicht de standaard paragraaf stijl. De stijl ‘txt’ is een lettertype Verdana van vaste puntgrootte 11. De standaard paragraaf stijl is in het lettertype Verdana. Tussen de navigatiebalk en de middenzone is een witruimte van 10 pixels voorzien. Tussen de middenzone en de eventuele nieuwszone is eveneens een witruimte van 10 px voorzien. Deze witruimte is een cel van 10 px breed, waarin een transparante gif is aangebracht, zoals we reeds eerder vermeld hebben. Dit voorkomt dat de tabellen (de navigatiebalk, middenzone en nieuwszone) die op 100% ingesteld staan, zouden platgedrukt worden. Indien uw pagina een nieuwszone bevat, staat ook deze 10 px van de rechterkant van de browser. Voorbeeld van lay-out homepage K.U.Leuven
Grijze balkjes: dit is een tabel die bestaat uit 3 cellen: de 1e cel bevat een wit bolletje met grijze achtergrond, dit is een image met de naam i_bolleke.gif (uit de map _img van het web). op de 2e cel is de stijl ‘balkje’ toegepast, dit geeft witte tekst op een grijze achtergrond in de 3e cel is eveneens een image ingevoegd, 2 mogelijkheden: een wit pijltje met grijze achtergrond: dit is een image met de naam b_pijltje.gif (uit de map _img). Het pijltje is bedoeld om een hyperlink op te plaatsen, zoniet geeft men deze cel gewoon een grijze achtergrond. grijze cel: dit is in feite ook een image en heeft de naam i_pijltjeleeg.gif (uit de map _img) Onderdeel met tekst: dit is opnieuw een tabel. Eerste voorbeeld: grijze balkjes zijn 2 tabellen naast mekaar, de tekst eronder zijn opnieuw 2 tabellen naast mekaar; deze 4 tabellen staan nog eens in een aparte tabel Tweede voorbeeld: dit zijn 2 tabellen onder mekaar Derde voorbeeld: dit zijn eveneens 2 tabellen onder mekaar, de tabel met het grijze balkje heeft ditmaal een vaste breedte (in pixels). Hoe de middenzone bewerken? U kunt de bestaande tekst van de tabel overtypen of nieuwe rijen en cellen bijmaken waarin u dan bestaande cellen plakt en aanpast. Dit doet u ook volgens het principe dat u de navigatiebalk hebt aangepast:
52 Indien u een cel wilt bijmaken in een tabel voorziet u eerst de nodige ruimte hiervoor: klik in een cel waarboven u een rij wilt bijmaken en doe Table/Insert Row, splits de cel indien nodig via Table/Split Cell; selecteer vervolgens de
-tag van een andere cel en kopieer ze (Ctrl-C), selecteer de
tag van de nieuwe cel en plak de andere cel erin (Ctrl-V), pas de tekst aan. Indien u een volledige tabel wilt kopiëren: selecteer de
-tag van de tabel, positioneer u op de gewenste plaats (binnen een bestaande tabel of buiten een tabel) en plak de tabel op die positie.
9.6
Een template wijzigen
Indien u een originele template nadien wijzigt en opnieuw opslaat, worden de wijzigingen doorgevoerd in alle pagina’s die gemaakt zijn op basis van die template. Het gaat hier wel enkel over wijzigingen die u aanbrengt in de ‘niet-editable regions’ (beschermde zones) van de template. 9.6.1
Een template wijzigen en opslaan
1. Open de originele template (.dwt) vanuit de map Templates in uw web 2. Breng de gewenste wijzigingen aan. Enkel wijzigingen in de ‘niet-editable regions’ van de template zullen worden doorgevoerd in de pagina’s die gemaakt zijn op basis van de template! D.w.z. wijzigingen in bijvoorbeeld de navigatiebalk (linkerbalk) of in de infobalk (behalve de url) worden wel doorgevoerd; wijzigingen die u zou aanbrengen in de url van de infobalk of eventueel in de nieuwszone, en ook wijzigingen in de meta-header-informatie (title-keywords-description) worden niet doorgevoerd! 3. Om de de wijzigingen te laten doorvoeren MOET u bij het bewaren van de wijzigingen File/Save kiezen en NIET Save as Template, want dan zal NIET de vraag gesteld worden om de wijzigingen door te voeren. Het volgende scherm verschijnt met het resultaat welke pagina’s zijn aangepast.
9.6.2
Apply Template to Page
U kunt na het wijzigen van een template, de template toepassen op (of koppelen aan) een pagina: 1. Open de pagina
53 2. Kies Modify/Templates/Apply Temlate to Page
3. Kies de gewenste template en klik op de knop Select.
9.7
Een pagina maken NIET op basis van de template
Indien u een pagina moet maken niet op basis van de template, maar u wenst toch de CSS-stijlen te gebruiken, gaat u als volgt te werk om de CSS-stijlbladen te koppelen aan de pagina. Zoals we reeds eerder vermeldden is het voor Dreamweaver niet voldoende dat er een abslute hyperlink naar de stijlbladen ligt, er moet ook nog een relatieve hyperlink naar de de stijlbladen gemaakt worden om de stijlen te kunnen zien in Dreamweaver en om er mee te kunnen werken. Zorg ervoor dat het CSS Styles Panel open staat (Window/CSS Styles). relatieve hyperlinks naar stijlbladen maken Attach Style Sheet in het CSS Styles panel Klik op de knop Ga naar de map _data in uw web; klik op cwisalgemeen.css en klik op de knop Select; doe dit vervolgens ook voor cwistabellen.css. absolute hyperlinks naar stijlbladen maken Ga naar de pagina http://www.kuleuven.ac.be/aiv/digistijl/index.htm, klik vervolgens rechts op http://www.kuleuven.ac.be/cwis/stijlgids/cwisalgemeen.css en kies Snelkoppeling kopiëren (Copy Shortcut) Attach Style Sheet in het CSS Styles panel Klik in uw pagina op de knop Plak de snelkoppeling (Ctrl-V) in het vakje URL van het dialoogvenster doe dit vervolgens ook voor het koppelen van het stijlblad http://www.kuleuven.ac.be/cwis/stijlgids/cwistabellen.css Opmerking: om de absolute hyperlinks te koppelen kunt u ze eventueel gaan kopiëren uit een template (in de code view). Kopieer dan de 2 volledige regels:
en plak ze in de in de code view van uw pagina, net vóór de -tag.
Opmerking: De RELATIEVE HYPERLINKS moeten EERST staan en NADIEN de ABSOLUTE HYPERLINKS Wat is hiervan het belang? De absolute hyperlinks verwijzen naar de css stijlbladen op de server. Als deze onderaan staan zullen ze voorrang hebben op de css-stijlbladen die in de map _data van uw web staan (relatieve hyperlinks). Dit wil zeggen, als er algemene wijzigingen aan de stijlbladen op de server gebeuren, dan zullen die reeds zichtbaar in uw web wanneer u het in de browser bekijkt. Om met de aangepaste stijlen in uw eigen pagina’s in Dreamweaver te kunnen werken, moet men de stijlbladen opnieuw importeren in het web. Hoe dit gebeurt vindt u onmiddellijk terug in het volgende punt.
54
9.8
Hoe CSS-stijlbladen opnieuw importeren in uw web in geval van algemene wijzigingen?
Ga naar de pagina http://www.kuleuven.ac.be/aiv/digistijl/index.htm. Zie onderdeel CSS (Cascading Style Sheets) gebruikt in template Klik met de rechtermuisknop op http://www.kuleuven.ac.be/cwis/stijlgids/cwisalgemeen.css, kies ‘Doel opslaan als’ (‘Save target as’) (in Internet Explorer) of ‘Save link as’ (in Netscape) en bewaar dit bestand in de map _data van uw web. Als het dialoogvenster ‘Download complete’ verschijnt klikt u op Close om dit te sluiten. Klik vervolgens op http://www.kuleuven.ac.be/cwis/stijlgids/cwistabellen.css en ga op dezelfde manier tewerk. Nu zullen de wijzigingen aan de stijllen ook te zien zijn in uw pagina’s in Dreamweaver, en kunt u met de aangepaste stijlen verder werken.
9.9
Pagina’s op basis van het oude CWIS-sjabloon omzetten naar pagina’s op basis van de nieuwe template
1. Maak een nieuwe pagina op basis van de template met digitale huisstijl 2. Kopieer de tekst uit de oude pagina en plak hem in de nieuwe pagina. In dit geval zult u alle opmaak op de tekst kwijt zijn, d.w.z. dan hebt u volledig platte tekst. Indien u verkiest om de opmaak te behouden is het aan te raden om de oorspronkelijke pagina of zelfs een volledig web binnen te halen in Dreamweaver. De pagina’s zullen ongetwijfeld overtollige en overbodige codes van vroeger bevatten, die moeten dan eerst ‘opgeruimd worden’ eer de nieuwe css-stijlen kunnen toegepast worden. Hoe deze overtollige html kan opgeruimd worden wordt uitgelegd in een aparte opleiding van een halve dag ‘Opruimen html met Dreamweaver’.
55
10
Analyseren en beheren van uw web
10.1
Site Files (mappenweergave)
Om vanuit het document window het Site Files-venster te activeren kiest u in het menu Site/Site Files of u drukt F8. Of u gebruikt de knop onderaan in de Mini-Launcher. In het Site Files-venster (normaal het rechtse gedeelte van het site window) kunt u zien hoe de files van uw web zijn geordend. Net als in de Windows Verkenner kunt u hier uw mappen en bestanden organiseren. U kunt hier bestanden verplaatsen, hernoemen, verwijderen, kopiëren en verplaatsen, openen en toevoegen. Merk op dat naast de bestandsnaam ook de bestandsgrootte (kolom Size), het bestandstype (kolom Type) en de datum waarop het bestand het laatst werd gewijzigd (kolom Modified), worden weergegeven. U kunt deze kolommen sorteren door op de kolomkop te klikken. U kunt ook bepalen welke kolommen al dan niet in het Site Files-venster mogen getoond worden en ook de volgorde ervan instellen. Dit doet u via Site/Define Sites. Selecteer uw site en klik op Edit. Kies onder Category het tabblad File View Columns. BELANGRIJK!! Zorg ervoor dat uw pagina’s steeds GESLOTEN zijn vóór u ze gaat VERPLAATSEN, HERNOEMEN, KOPIËREN OF VERWIJDEREN!! Wanneer bestanden HERNOEMD of VERPLAATST worden BINNEN UW WEB worden de hyperlinks naar deze bestanden AUTOMATISCH aangepast. Er zal een dialoogvenster Update Files verschijnen met de lijst van files die een hyperlink bevatten naar de file die u wilt hernoemen of verplaatsen. KIES HIER STEEDS Update om de hyperlinks aan te passen!! (Indien u ‘Don’t update’ kiest zullen de hyperlinks verbroken worden, wees hier uiterst voorzichtig!!)
10.2
Site Map (navigatie- en hyperlinksweergave)
Om deze weergave te activeren klikt u in het site window op de knop (op het pijltje rechts onder) in de toolbar en kiest u ‘Map and Files’. De Site Map wordt getoond in het linkse gedeelte van het scherm. (Indien u ‘Map only’ kiest wordt enkel de site map getoond.) De Site Map is in feite een navigatie- en hyperlinksweergave van uw web. De ganse structuur van uw web wordt getoond: alle interne links naar pagina’s, afbeeldingen, …. én de externe hyperlinks worden getoond. Om de site map te kunnen weergeven moet een pagina gedefinieerd zijn als homepage. Wanneer u de homepage bij het begin de naam index.htm heeft gegeven wordt de site map onmiddellijk getoond! Indien dit niet het geval is moet u eerst (in het Site Files-venster) een pagina definiëren als homepage. Klik in het Site Files-venster met de rechtermuisknop op de pagina die moet dienen als homepage en kies Set as Home Page uit het snelmenu. Hierna ziet u een voorbeeld van een site met in het rechtse gedeelte de Site Files-weergave en in het linkse gedeelte van het scherm de Site Map-weergave.
56
We bekijken de Site Map even van naderbij:
De files worden weergegeven als iconen, het zijn niet werkelijk de files die getoond worden. De iconen zijn verbonden met lijnen die de hyperlinks weergeven. Naast de iconen staat telkens een
57 symbool dat het soort hyperlink aanduidt. Een externe hyperlink (http://…) wordt weergegeven in blauwe tekst met een klein bolletje ervoor (dat op een wereldbol lijkt). Een verbroken link (intern of extern) wordt weergegeven in rode tekst met een tekentje van een verbroken link ervoor. U ziet dat bij sommige pagina’s een – of + teken staat. Als het – teken getoond wordt betekent dit dat de onderliggende links zichtbaar zijn, als het + teken wordt getoond ziet u de hyperlinks niet, u kunt ze zichtbaar maken door op het + teken te klikken. Hidden files Indien u bepaalde files niet wilt weergeven in de site map kunt u ze verborgen plaatsen. Klik rechts op de icoon van de file en kies Show/Hide Link uit het snelmenu. De icoon is niet meer zichtbaar in de site map als de optie Show Files Marked as Hidden NIET geselecteerd is in het menu View. Als deze optie wel aanstaat worden de verborgen files in italic weergegeven. Om het verborgen plaatsen van een file ongedaan te maken selecteert u de file en u kiest opnieuw Show/Hide Link uit het snelmenu. Dependent files Dependent files zijn gewoonlijk afbeeldingen. U kunt kiezen om ze al dan niet te tonen via View/Show Dependent Files. Door deze te tonen kan uw site map er misschien nogal wanordelijk uitzien. (Opm.: indien je gebruikt maakt van de template worden ook de css-stijlbladen beschouwd als dependent files.) Show Page Titles U kunt kiezen om, in plaats van de bestandsnamen, de titels van uw pagina’s te tonen via View/Show Page Titles. Opmerking: U kunt deze View-opties ook instellen in het dialoogvenster Site Map Layout in het Site Definitionvenster. Hier kunt u naartoe via het menu View/Layout…. Of u gaat via Site/Define Sites, selecteer uw site en klik op Edit en kies onder Category het tabblad Site Map Layout.
10.2.1
Wissen van files in het Site Files-venster en wissen van iconen in de Site Map
ERG BELANGRIJK!!! De Site Map is enkel een weergave van de hyperlinks!! Wanneer u een icoon (die een file weergeeft) wist, wordt de hyperlink naar die file verwijderd (niet de file zelf). Wanneer u vervolgens de bovenliggende file (waarin een link was gelegd naar de verwijderde icoon) opent in het document window, ziet u dat de hyperlink naar de file verdwenen is. Om werkelijk een file te verwijderen moet u de file selecteren in het Site Files-venster en ze deleten. Als er hyperlinks bestaan vanuit bepaalde pagina’s naar deze file, wordt de naam (namen) van die file(s) gemeld en wordt er voorgesteld dat u de links kunt updaten via het commando Change Links Sitewide (uitleg hiervan zie punt 5.14.2 Hyperlinks over de ganse website aanpassen). De verbroken hyperlinks worden in de site map in het rood weergegeven.
58 10.2.2
Hoe zelf een structuur en hyperlinks opbouwen in de site map?
Om de structuur aan te maken zoals weergegeven in de voorgaande figuur (voorbeeld van de site map) gaat u als volgt tewerk: Klik op de icoon index.htm (homepage) in de site map. De icoon is geselecteerd en er verschijnt
een rondje rechts erboven: Klik vervolgens op het rondje naast de icoon en sleep het naar de pagina opmaak.htm in het Site Files-gedeelte van het scherm. Deze pagina wordt dan onder de homepage geplaatst. Doe dit vervolgens ook voor de pagina’s afbeeldingen.htm en hyperlinks.htm. Vervolgens klikt u in de site map op de icoon van de pagina opmaak.htm en u sleept het rondje achtereenvolgens naar de pagina’s css.htm en opmerkingen.htm. Zo worden deze pagina’s onder de icoon van de pagina opmaak.htm geplaatst. Wanneer u nu bijvoorbeeld de pagina index.htm opent in het document window, ziet u dat de links die u gelegd hebt reeds in die pagina terug te vinden zijn. Vanaf het niveau dat we tot hiertoe gemaakt hebben kunnen we geen verdere hyperlinks maken via het klikken en slepen, wel eventueel via het snelmenu. Klik bijvoorbeeld op css.htm in de site map en kies Link to New File of Link to Existing File en geef de naam van de file op. Of, een tweede mogelijkheid is dat u de verdere hyperlinks aanmaakt in de pagina zelf in het document window, wat eerder aan te raden is.
10.3
Design Notes
U kunt Design Notes toevoegen aan uw pagina’s. Dit kan nuttig zijn om: de beschrijving van het ontwerpproces van uw web in op te nemen informatie met anderen te delen extra informatie op te nemen die nuttig kan zijn. Vermits design notes geen echt deel zijn van de webpagina en dus niet kunnen gelezen worden door bezoekers van de website, kunt u er vertrouwelijke informatie instoppen. U kunt design notes toevoegen aan elke pagina van uw web, ook aan templates, afbeeldingen en movies. Webpagina’s gebaseerd op templates bevatten de design notes niet, enkel de originele template file bevat de design notes. Opdat design notes kunnen toegevoegd worden moet deze optie voor uw website ingesteld zijn. Kies Site/Define Sites, selecteer uw website en klik op de knop Edit.
59 Selecteer in dit dialoogvenster vervolgens Design Notes. Zet zeker de eerste optie aan, de tweede zet u aan als u uw web met anderen deelt (standaard staan de 2 opties aan). Klik op OK en nadien op Done. Om een design note toe te voegen aan een pagina die geopend is in het document window, kiest u File/Design Notes in het menu. Om dit te doen in het site window klikt u in het Site Files-venster rechts op de file en u kiest Design Notes uit het snelmenu.
Selecteer op het tabblad Basic Info de status uit het drop-down menu Status. Klik eventueel op het datum-icoontje rechts om de huidige datum toe te voegen. Zet de optie Show When File Is Opened aan als u wilt dat de design notes getoond worden als u de file de volgende keer opent (misschien eerder af te raden, kan nogal storend zijn). Klik op het tabblad All Info.
60
In het vakje Info komt de lijst van de opgenomen informatie te staan. U kunt hier notes toevoegen door op het
teken te klikken en een naam en waarde toe te kennen aan de nieuwe note. U kunt
een note verwijderen door die te selecteren en op het
teken te klikken.
Opmerking: In het site window ziet in u welke pagina’s design notes bevatten door het gele icoontje dat ernaast staat. Door erop te dubbelklikken komt u onmiddellijk in de design notes terecht. Indien dit een pagina is gemaakt op basis van een template wordt dit icoontje echter niet getoond. In dit geval moet u de pagina openen en kunt u de design notes via File/Design Notes bekijken.
De design notes blijven geassocieerd met de file zelfs wanneer de file wordt gekopieerd, hernoemd, verplaatst of verwijderd. De design notes worden bewaard in een directory in de webroot met de naam _notes. Deze directory is niet zichtbaar in het site window. Notes krijgen dezelfde naam als de file gevolgd door de extensie .mno.
10.4
Opvragen van rapporten
U kunt rapporten opvragen over uw website. Deze geven u informatie over uw web zoals wanneer bestanden werden gecreëerd of over errors (fouten) in uw web. Deze rapporten zijn erg nuttig om fouten of problemen op te sporen. De rapporten kunnen ook bewaard en afgedrukt worden. 1. U kunt de rapporten opvragen zowel vanuit het site window als vanuit het document window. Kies in het menu Site/Reports.
61
2. Bij Report On kunt u kiezen tussen Current Document, Entire Local Site, Selected Files in Site of Folder. 3. Selecteer een rapport door het aan te vinken. Het is ook mogelijk om meerdere rapporten tegelijk op te vragen. Checked Out By: dit is enkel van toepassing indien u het web deelt met anderen, m.a.w. wanneer u met meerdere personen aan één web werkt. (Er kan ingesteld worden dat files moeten gemarkeerd worden met de naam van de persoon en de datum waarop de file het laatst werd aangepast). Design Notes: overzicht van pagina’s waaraan design notes toegevoegd werden. Combinable Nested Font Tags: indien er, in de html, meerdere font tags staan omheen een sectie van een document, die tot één enkele html font tag kunnen worden herleid; m.a.w. wanneer te veel font tags staan die niet nodig zijn. b.v. kan herleid worden tot Opm.: wanneer u gebruik maakt van de CSS stijlen kan dit niet voorkomen in uw pagina’s, omdat u dan geen gebruik maakt van de gewone lettertypes voor opmaak. Missing Alt Text: dit spoort de afbeeldingen op waarvoor geen Alt-tekst opgegeven werd. Alttekst is de tekst die getoond wordt tijdens het downloaden van de afbeelding in de browser en wanneer men ernaar wijst met de muisaanwijzer (dit wordt verder in de cursus besproken). Redundant Nested Tags: in het html-document staan te veel onnodige in elkaar geneste tags, b.v. . Removable Empty Tags: lege tags in het document, dit zijn tags waartussen geen tekst getypt is; dit is niet zichtbaar in de Design View (gewone weergave van de tekst) (bijvoorbeeld: ). Untitled Documents: bestanden waaraan u nog geen titel toegekend hebt. Dit is belangrijk want het is die titel die ook in de adresbalk van de browser getoond wordt. Bovendien wordt er ook gezocht op de titels door de zoekrobots. Bij sommige rapporten is het mogelijk om bijkomende instellingen te specifiëren. Dit is bijvoorbeeld het geval bij het rapport Design Notes. Indien u dit aanklikt wordt de knop Report Settings onderaan actief. 4. Klik op de knop Run. 5. Het resultatenvenster verschijnt met een lijst van files . U kunt de fouten onmiddellijk aanpassen door de files in de lijst te selecteren (één voor één) en op de knop Open File te klikken. Indien u het rapport wilt bewaren klikt u op de knop Save Report. U kunt het bewaren ergens in uw web of op uw PC (maak eventueel een map Rapporten aan). Het rapport krijgt de extensie .xml.
62 Opmerking: het resultatenvenster van het rapport wordt enkel getoond in het document window en niet in het site window. U kunt het rapport dus wel opstarten vanuit het site window maar om het resultaat te bekijken moet u steeds overschakelen naar het document window.
63
11
Bestaande (web)pagina’s importeren (= kopiëren in uw web)
11.1
Afzonderlijke pagina’s
11.1.1
Rechtstreeks van het WWW
1. Ga via uw browser naar de pagina die u wilt importeren in Dreamweaver. 2. Indien u dit in Internet Explorer doet: Kies Bestand/Opslaan als (File/Save As). Geef bij Bestandsnaam (File Name) een naam aan de pagina en kies bij Opslaan als type (Save as type) ‘Webpagina, alleen HTML (*.htm, *.html)’ Indien u dit in Netscape Navigator doet: Kies File/Save As. Geef bij File Name een naam aan de pagina. 3. Sla de pagina onmiddellijk op in uw web. 4. Dubbelklik in Dreamweaver in het Site Files-venster in het site window op de pagina om ze te openen. 11.1.2
Vanaf uw PC
U kunt htm-pagina’s die zich ergens op uw schijf bevinden openen in Dreamweaver via File/Open en ze vervolgens via File/Save As opslaan in uw web. U kunt ook via de Windows Verkenner uw pagina’s kopiëren en vervolgens plakken in uw web (om er b.v. een hyperlink naartoe te leggen). 11.1.3
Word html-pagina’s
U kunt tekst uit Word invoegen in Dreamweaver via kopiëren en plakken. De opmaak is dan volledig weg! Indien u de opmaak wel wilt behouden is het mogelijk om het volledige Word-bestand te importeren. Nadien kunnen alle overbodige Word-codes gewist worden met het CleanUp Word HTMLcommando dat in Dreamweaver voorzien is. Het Word-bestand moet dan wel eerst in Word opgeslagen worden als HTML-bestand. Het clean up-commando kan toegepast worden op HTMLbestanden opgeslagen in Word97, Word 98 en Word 2000. U opent het HTML-bestand in Dreamweaver via File/Open, vervolgens kiest u Commands/Clean Up Word HTML en het volgende dialoogvenster verschijnt:
64 U kunt het bestand ook openen via File/Import/Import Word HTML, dan wordt dit dialoogvenster onmiddellijk geopend. Normaal detecteert Dreamweaver zelf de versie van het Word-programma waarin de HTML-file gecreëerd werd (aan de hand van de tags die Word toevoegt aan de file). U kunt de versie ook manueel kiezen in het drop-down menu Clean Up HTML from. Het dialoogvenster heeft 2 tabbladen: Basic en Detailed waarin u opties kunt aan/uitzetten. In het tabblad Detailed kunt u de optie Remove all Word specific markup en Clean up CSS meer in detail bepalen. U kunt best alle opties laten aan staan voor het uitvoeren van het clean up commando. Alle codes die uit Word overgenomen worden zijn immers overbodig voor Dreamweaver! Opmerking Wanneer u tekst uit Word overbrengt naar Dreamweaver worden de opmaakprofielen die in Word gedefinieerd waren ook mee overgenomen. Deze worden niet automatisch verwijderd bij het uitvoeren van het CleanUp Word HTML commando. Ook specifieke font-tags voor de opmaak van tekst worden niet verwijderd. Niet alleen word-documenten, maar ook oude bestaande html-documenten of pagina’s rechtstreeks van het web geïmporteerd kunnen zulke overbodige Word-codes en nog andere foutieve html-codes bevatten. In Dreamweaver bestaan er wel heel wat mogelijkheden om deze overbodige codes op een vrij efficiënte en vlugge manier te verwijderen. Dit wordt uitgelegd in een aparte opleiding ‘Opruimen html met Dreamweaver’.
11.2
Meerdere pagina’s in één keer of een gans web importeren
11.2.1
Van uw PC
Wanneer u reeds een web op uw PC hebt aangemaakt, bijvoorbeeld in Frontpage, is dit op een eenvoudige manier in Dreamweaver te importeren. Dan gaat u op dezelfde manier te werk alsof u een nieuw web zou aanmaken. De naam van het web moet in Dreamweaver gedefinieerd worden. 1. Site/Define Sites en klik op de knop New.
65 2. In het vakje Site Name geeft u een naam op voor de website (mag maar moet niet dezelfde naam zijn als de reeds bestaande naam van het web in FrontPage). 3. bij Local Root Folder typt u het pad in waar het web zich bevindt op uw schijf (of u navigeert er naartoe via de browse-knop). Zet ook de optie Refresh Local File List Automatically aan (dan wordt de local site automatisch vernieuwd telkens wanneer u een nieuwe file toevoegt). 4. Bij HTTP Address kunt u het website-adres, vermits het een reeds bestaand web is, ook reeds invullen. Zet ook de optie Enable Cache aan (versnelt het automatisch updaten van links bij het hernoemen of verplaatsen van files). 5. Klik op OK en het web wordt binnengehaald. 6. Klik tenslotte in het Define Sites-venster op de knop Done. U zult merken dat de naam van het web is toegevoegd in het Define Sites-venster. 11.2.2
Van de webserver of ‘remote site’(waartoe u FTP-toegang hebt)
Als een website enkel bestaat op de webserver (remote site) kunt u die eveneens importeren door de website in Dreamweaver te definiëren. Omdat het enkel mogelijk is om files te bewerken die op uw eigen PC staan, gaat u de bestaande website importeren en er een kopie of spiegelbeeld van maken op uw eigen PC. Bij het importeren gebeurt er geen conversie en de files blijven onveranderd in Dreamweaver. Om dit te kunnen uitvoeren moet een connectie gemaakt worden met de remote site, wat we tot hier toe nog niet besproken hebben. Omdat dit ook de werkwijze is die uitgevoerd wordt bij het publiceren van een web, dient u eerst punt 13.2.2 Via FTP in Dreamweaver door te nemen in het volgende onderdeel over het publiceren van pagina’s. Ga dan als volgt te werk. 1. Kies Site/Define Sites en klik op de Knop New. 2. Vul bij Local Info alle nodige informatie in (net zoals u gedaan hebt bij het importeren van een website die zich op uw schijf bevindt, zonet besproken bij punt 11.2.1 Van uw PC) 3. Klik vervolgens op de category Remote Info en vul daar alle nodige gegevens in, zoals beschreven in punt 13.2.2 Via FTP in Dreamweaver. 4. Selecteer de root folder in de remote site als u de ganse site wilt importeren. Het is ook mogelijk om slechts een aantal files of aantal mappen van de site te importeren, dan selecteert u enkel die files en/of mappen. 5. Klik op de knop
Get File(s) en de files worden naar de local site overgebracht.
66
12
Controleren van pagina’s alvorens te publiceren
Vooraleer uw pagina’s te publiceren is het aan te raden om volgende zaken nogmaals te controleren: 1. Controleer uw pagina op taalfouten (Engelstalige spellingcontrole is voorzien in Dreamweaver). 2. Controleer uw pagina’s op verbroken hyperlinks (zie punt 5.14 Hyperlinks controleren en verbroken hyperlinks aanpassen). 3. Controleer uw pagina in verschillende (versies van) browsers en met verschillende schermresoluties (zie punt 2.7 Uw pagina bekijken in de browser). 4. Controleer via Site/Reports of al uw ingevoegde afbeedingen Alt-tekst bevatten (rapport Missing Alt Text) of al uw pagina’s een titel hebben gekregen (rapport Untitled Documents)
67
13
Publiceren en synchroniseren van pagina’s
Om de pagina’s voor het publiek toegankelijk te maken op het WWW moeten ze op een webserver worden geplaatst.
13.1
U hebt zelf geen toelating om te publiceren
Dit is bijvoorbeeld van toepassing voor de meeste vademecum pagina’s (administratieve en ondersteunende diensten) omdat deze gecoördineerd worden door de centrale vademecumcoördinatie. Vademecum: bezorg de HTML-pagina’s, samen met de ingevoegde afbeeldingen naar [email protected] Anderen: bezorg de HTML-pagina’s, samen met de ingevoegde afbeeldingen aan de beheerder van uw webserver.
13.2
U hebt zelf toelating om te publiceren
13.2.1
Via een extern FTP-programma (File Transfer Protocol)
Indien u nog niet beschikt over een FTP-programma kunt u op volgend internetadres een ftpprogramma downloaden en wordt kort de werking ervan beschreven: http://www.kuleuven.ac.be/aiv/cwis/ftp/index.htm. Een FTP-programma is vrij gemakkelijk in gebruik en doordat u een zicht hebt op de bestanden die u op de webserver plaatst hebt u controle over wat u publiceert. 13.2.2
Via FTP in Dreamweaver
13.2.2.1 Remote Info invullen en publiceren Om uw web via Dreamweaver op de webserver te plaatsen dient de Remote info ingevuld te worden in het Site Definition-venster 1. 2. 3. 4.
Kies Site/Define Sites Selecteer uw web in het Site Definition-dialoogvenster en klik op Edit. Kies Remote info onder Category In het drop-down menu Access kiest u FTP
(Local/Network kan gebruikt worden indien u via het netwerk rechtstreeks kunt aansluiten op de webserver. SourceSafe Database en WebDAV zijn enkel van toepassing bij meer geavanceerde toepassingen.) 5. Wanneer u FTP geselecteerd hebt wordt het Site Definition-venster uitgebreid.
68
In dit scherm dient u de naam van de webserver op te geven (FTP Host), de Login-naam en het Password (beide hoofdlettergevoelig!) die u toegang verlenen tot de webserver. Deze worden u bezorgd door de beheerder van de webserver. Als u niet zeker weet wat de ‘root directory’ op de remote site is, probeer dan om het vakje Host Directory leeg te laten. De FTP-server zet u misschien onmiddellijk in de correcte directory omdat uw account zo geconfigureerd is. 6. Om de login name en het password te bewaren klikt u het vakje Save aan. (De opties Use Passive FTP en Use Firewall zijn enkel van toepassing indien er een firewall opgezet is. Enable File Check In and Check Out is enkel van toepassing indien u met meerdere personen aan een web werkt.) 7. Klik op OK en vervolgens in het Site Definition-venster op de knop Done. In het site window ziet u dat in de toolbar de 4 knoppen rechts actief zijn geworden:
Connects to remote host en u ziet dat de remote site getoond wordt in het 8. Klik op de knop linkse venster van het site window. 9. Indien u het ganse web naar de remote site wilt overbrengen klikt u in de local site (rechts) op de Put File(s) root directory van uw web en u klikt op de knop Indien u afzonderlijke files of mappen naar de remote site wilt kopiëren selecteert u deze file(s) of map(pen) (gebruik Ctrl+klik om er meerdere in één keer te selecteren), klik vervolgens rechts op de selectie en kies Locate in Remote Site (zo worden de betreffende files in de remote site Put File(s). geselecteerd) en klik vervolgens op de knop Bij het kopiëren zal een dialoogvenster verschijnen waarin men vraagt of ook de dependent files (afbeeldingen) moeten overgebracht worden. Als u wilt dat dit niet telkens gevraagd wordt, klikt u in dit dialoogvenster ‘Don’t Ask Me Again’ aan. Het is aan te raden om de ‘dependent files’ niet telkens mee te kopiëren omdat dit het kopiëren kan vertragen. Bovendien, als er niets gewijzigd is aan deze files; is het ook niet nodig om ze telkens mee te kopiëren. Indien u een pagina wilt puliceren die nog openstaat in het document window en nog niet opgeslagen is, zal Dreamweaver vragen of deze eerst moet opgeslagen worden, ze zal niet gesloten worden. 10.Om een file, map of een gans web te kopiëren van de remote site naar de local site gaat u op dezelfde manier tewerk: maak de selectie in de remote site, klik eventueel rechts en kies Locate in Local Site, klik op de knop
Get File(s).
69
Refresh kunt u manueel de local site en de remote site vernieuwen. Dit is enkel 11.Met de knop van toepassing wanneer u bij het opzetten van uw web in het Define Sites-venster bij de Local Info de optie Refresh Local File List Automatically (of bij de Remote Info de optie Refresh Remote File List Automatically, enkel mogelijk indien u Local/Network gebruikt) NIET hebt aangezet. 12.U kunt de connectie met de remote site verbreken of voorlopig uitzetten door opnieuw op de knop te klikken (dan wordt de boodschap Disconnects from remote host getoond als u naar de knop wijst). 13.2.2.2 Structuur van local en remote site Belangrijke opmerking! Get File(s) en Put File(s) moet de structuur Om te kunnen gebruik maken van de knoppen van het web op de local site en op de remote site DEZELFDE zijn! (Als de structuur niet dezelfde is kunt u de files naar de juiste locatie slepen, maar dit is moeilijker.) Indien u uw web onmiddellijk onder de root folder (aangeduid met /, zie onderstaand voorbeeld) van de webserver (remote site) mag plaatsen, kunt u de structuur van uw web ook op de local site onmiddellijk onder de root folder aanmaken (in onderstaand voorbeeld is dit I:\WEBS\anemoon_nieuw).
In andere gevallen kan het zijn dat men slechts één bepaalde folder op de webserver moet onderhouden, en dus enkel naar die folder mag publiceren (de andere mappen worden bijvoorbeeld onderhouden door andere personen), zoals in onderstaand voorbeeld:
In dit geval mag u op de local site de structuur van uw web niet onmiddellijk onder de root folder laten beginnen, want dan zou de structuur aan beide zijden verschillend zijn. U kunt dit oplossen door op de local site eerst een map onder de root aanmaken (zoals in het voorbeeld hierboven de map sporten_importeren) waarin u dan de eigenlijke structuur van uw web aanmaakt. Zo krijgt u een zelfde structuur aan beide zijden en zullen er geen problemen zijn om te publiceren via de knoppen. Indien u voor de eerste maal het volledige web gaat publiceren (dus wanneer het nog niet op de remote site staat) selecteert u de map (sporten_importeren) en NIET de root op de local site, en u Put File(s). Nadien kunt u aparte files kopiëren zonder enige problemen, de file klikt op de knop zal automatisch aan de andere zijde gevonden worden omdat de structuur gelijk is. 13.2.2.3 Publiceren van web met templates digitale huisstijl Wanneer u een web of pagina’s publiceert waarin u gebruik maakt van de templates digitale huisstijl worden bij het publiceren de 3 mappen _img, _data en Templates automatisch mee op de webserver gekopieerd. Enkel de map _img (met de in de template gebruikte images) is NOODZAKELIJK op de webserver
70 (zoniet zijn de afbeeldingen van de template niet zichtbaar in de browser). De mappen _data (met de css-stijlbladen) en de map Templates, moeten niet op de webserver aanwezig zijn (maar ze mogen er wel staan). Vermits de map Templates in de structuur van het web op de local site altijd verplicht onder de root folder moet staan (om de templates te kunnen raadplegen), zal deze map (logischerwijze) bij het publiceren ook altijd onder de root folder van de remote site geplaatst worden. In het geval dat u dus slechts naar één folder van de webserver publiceert (zoals we in het vorige onderdeel net aangehaald hebben), zal de map Templates van uw web zich buiten uw eigen folder op de remote site bevinden. In dit geval kunt u de map Templates best opnieuw verwijderen op de remote site (om verwarring te vermijden voor anderen). 13.2.3
Files synchroniseren
Om te controleren of de remote site en de local site allebei dezelfde en de meest recente files bevatten kunt u uw files synchroniseren. Opgelet! Om te kunnen synchroniseren moet, net zoals voor het publiceren, de structuur van de local site precies overeenkomen met die van de remote site! Connect om aan te sluiten op de remote site. De synchronisatie kan op 2 Klik op de knop verschillende wijzen gebeuren, naargelang wat u precies wenst te doen. 13.2.3.1 Controlere op nieuwe(re) files op local of remote site Indien u enkel wenst te controleren of er nieuwe(re) files bestaan op de local of op de remote site gaat u best als volgt te werk: Om te controleren welke files recenter zijn op de remote site: 1. Selecteer de root directory of een aantal files in de local site 2. Kies Select Newer Remote uit het menu Edit. Om te controleren welke files recenter zijn op de local site: 1. Selecteer de root directory of een aantal files in de remote site 2. Kies Select Newer Local uit het menu Edit. De files die aan één van beide zijden recenter zijn of niet voorkomen worden geselecteerd. Gebruik dan de knop
Get File(s) of
Put File(s) om de beide zijden up-to-date te maken.
Opmerking! Indien u in een groot web werkt is het zeker aan te raden om dit commando per elke afzonderlijke map uit te voeren, en niet voor het volledige web in één keer. Anders loop u het risico om vast te lopen!! 13.2.3.2 Gebruik maken van het Synchronize-commando Wanneer u gebruik maakt van het Synchronize-commando via het menu Site analyseert Dreamweaver de files zowel in de local als in de remote site en geeft u een rapport van welke files moeten gekopieerd worden om de site te synchroniseren. U hebt volledige controle over dit proces en u kunt nog steeds files deselecteren die u niet wil overbrengen. Er wordt ook vermeld indien files volledig up-to-date zijn en er geen synchronisatie nodig is. Opmerking: Het synchroniseren op deze manier is misschien vooral aangewezen indien u werkt met een ‘gedeeld web’, een web dat u met meerdere personen tegelijk onderhoudt. 1. Selecteer de site die u wilt synchroniseren of indien u slechts bepaalde files van de site wilt synchroniseren, selecteer enkel die files.
71 2. Kies Site/Synchronize uit het menu en het volgende dialoogvenster wordt geopend:
Synchronize: u hebt de keuze tussen Selected Local Files Only of Selected Remote Files Only (afhankelijk aan welke zijde u files selcteert) en Entire Site. Opgelet! In het geval u slechts één map onderhoudt op de server en u wenst enkel die map te synchroniseren, selecteert u enkel die map op de remote site en u kiest Selected Remote Files Only. Er zal als tweede mogelijkheid ook voorgesteld worden Entire ‘……..’ Site, met tussen de aanhalingstekens de naam van de map die u geselecteerd hebt (b.v. Entire ‘sporten_voorbeeld’ Site’). Dit is verwarrend en mag u NIET KIEZEN want dan zal de volledige webserver (m.a.w. ook alle andere mappen op de remote site) gecontroleerd worden. Dit is uiteraard niet de bedoeling en zou ook enorm lang kunnen duren!!
3. 4. 5.
6. 7.
Direction: hier bepaalt u hoe de files moeten gesynchroniseerd worden: Put newer files to remote Get newer files from remote Get and Put newer files Met de optie Delete remote files not on local drive dient u voorzichtig te zijn. Zorg ervoor dat u geen files verwijdert die u later nog nodig zou hebben! Klik op de knop Preview. Als de files up-to-date zijn krijgt u een boodschap dat er geen synchronisatie nodig is. Als er wel files moeten gesynchroniseerd worden, wordt een rapport getoond (Synchronize dialoogvenster) met een overzicht van recentere files (met de tekst Put of Get voor de file). Bekijk de lijst en deselecteer de acties die niet mogen uitgevoerd worden. Klik daarna op OK. Tijdens de transfer toont Dreamweaver in de rechter benedenhoek van het Site-dialoogvenster een ‘completion bar’ (een rood kruisje). Door hierop te klikken kunt u de transfer steeds stopzetten. Als de synchronisatie beëindigd is verschijnt de boodschap ‘Synchronization complete’ en wordt de status van elke file getoond. Als u een log van de synchronisatie wenst op te slaan, klikt u op de knop Save Log en u bewaart de file op uw PC. Zoniet klikt u op Close om het venster te sluiten.
72
14 14.1
Bijlagen Bijlage 1: checklist
Controleer volgende zaken alvorens een web op de webserver te plaatsen. Per pagina 1. Aanmaken van nieuwe documenten: titel geven, aanpassingen meta-informatie (in de code view), aanpassing url-adres in de infobalk 2. Invoegen van afbeeldingen: alternatieve tekst (ALT-tekst) toevoegen Invoegen van heel grote afbeeldingen in tabel: vermijden! 3. Verwijzingen naar personeelsdatabank: 2 x amp; toevoegen in adres Voor alle pagina’s van uw web 1. contoleer uw pagina op taalfouten en op verbroken hyperlinks 2. controleer via Site/Reports of alle afbeeldingen Alt-tekst bevatten en of alle pagina’s een titel hebben 3. controleer uw pagina’s in verschillende browsers en schermresoluties 4. plaats uw pagina’s op de webserver en controleer nog eens of alles werkt.
14.2
Bijlage 2: tips
Namen van bestanden, mappen en webs: kleine letters, geen spaties, geen speciale tekens. (Indien u een naam van een bestand wijzigt in het Site Files-venster, zorg er dan voor dat u de extensie .htm toevoegt. Indien deze extensie ontbreekt kan het zijn dat de files niet zullen herkend worden in sommige browsers!) Titel: wordt getoond in blauwe balk van de browser. Bewaar regelmatig uw bestanden. Wissen van document in Dreamweaver: wis enkel een file in het Site Files-venster (niet in de site map, dan wordt enkel de hyperlink verwijderd) en druk Delete, gebruik nooit Cut in het snelmenu!! Het verwijderde document is niet definitief gewist en kan nog steeds teruggezet worden vanuit de Prullenbak. Map ‘images’: het is aan te raden om in uw web 1 of meerdere mappen ‘images’ aan te maken om uw afbeeldingen in te plaatsen (wordt niet automatisch aangemaakt door Dreamweaver). De afbeeldingen die u in deze map(pen) plaatst blijven best gescheiden van de images die zich in de map _img bevinden (afbeeldingen gebruikt in de template digitale huisstijl). D.m.v. de F4-toets kunt u alle geopende panels in uw documentvenster tijdelijk verbergen wanneer u deze niet nodig hebt. Druk opnieuw F4 om ze terug zichtbaar te maken. Op een snelle manier een bookmark naar het begin van uw pagina inlassen: typ een woord of stukje tekst op het einde van de pagina, selecteer dit en typ in het vakje Link in de property inspector de waarde ‘#top’ in. Wat moet absoluut mee op de webserver (remote site) worden geplaatst? Uw HTML-pagina’s uiteraard maar ook: de map _img (met de afbeeldingen gebruikt in de template digitale huisstijl), deze wordt bij het publiceren van pagina’ op basis van de template echter automatisch mee gekopieerd naar de server. ingevoegde afbeeldingen en multimediabestanden in uw web, andere bestandsformaten zoals, Word (.doc), Excel (.xls), Powerpoint (.ppt), Access (.mdb), .Acrobat reader (.pdf) bestanden …, waarnaar hyperlinks bestaan.
Cel Internet Communicatie Management (ICM) - http://www.kuleuven.ac.be/icm/digistijl/ Uitleg digitale huisstijl K.U.Leuven – aanvraag templates AIV- Toelichting bij gebruik van digitale huisstijl http://www.kuleuven.ac.be/aiv/digistijl/index.htm – cursusmateriaal http://www.kuleuven.ac.be/cwis/ Algemene CWIS-info
14.4
Bijlage 4: enkele termen
HTML (Hyper Text Markup Language) De standaardopmaaktaal voor documenten op het World Wide Web. HTML is platformonafhankelijk doordat ze alleen uit ascii-tekst bestaat. De gewone tekst wordt aangevuld met codes (tags) om aan te geven hoe paginaelementen zoals tekst en afbeeldingen in webbrowsers moeten worden weergegeven en hoe in webbrowsers moet worden gereageerd op handelingen van de gebruiker zoals het activeren van een hyperlink door op een toets te drukken of met de muis te klikken. Tags kunt u onderscheiden van gewone tekst door de tekens < en >. De HTML-taal wordt nog steeds uitgebreid. De recentste versie is versie 4.01. U kunt zowel in Dreamweaver als in de browser de HTML-codes opvragen. Scripts Scripts zijn programma’s die door de browser worden uitgevoerd. U kunt hiermee opdrachten toevoegen die niet mogelijk zijn met HTML. Scripts worden openomen in de HTML-broncode van de pagina (in tegenstelling tot Java-applets of ActiveX-besturingselementen). Er is dus geen afzonderlijk programmabestand. De programmeertaal van scripts is eenvoudiger dan die van Java-applets of ActiveX-besturingselementen maar biedt minder mogelijkheden. De meest gebruikte scripttalen zijn JavaScript en Visual Basic Script. JavaScripts Een scripttaal die is ontwikkeld door Netscape Communications en Sun Microsystems, Inc. In vergelijking met Java zijn de prestaties van JavaScript beperkt, omdat deze taal niet voor de uitvoering wordt gecompileerd. Met JavaScript kunnen on line basistoepassingen en –functies aan pagina’s worden toegevoegd, maar het aantal en de complexiteit van de beschikbare interfacefuncties voor het programmeren van toepassingen is kleiner dan het beschikbare aantal in Java. In het algemeen wordt de JavaScript-code, die samen met de HTML-code in een webpagina wordt opgenomen, als gemakkelijker ervaren dan Java. Deze code is daarom met name geschikt voor beginnende programmeurs. U hebt een JavaScript-compatibele webbrowser zoals Microsoft Internet Explorer of Netscape Navigator nodig om de JavaScript-code te lezen. VBScript Een subset van de programmeertaal Visual Basic for Applications die op webprogramma’s is afgestemd. Net als bij JavaScript wordt de code in HTML-documenten ingesloten. Java Een platformonafhankelijke programmeertaal voor algemene doeleinden die is ontwikkeld door Sun Microsystems. Een programma dat in Java is geschreven kan worden uitgevoerd door elke browser die Java ondersteunt of deze nu op een PC, Mac of Unix-systeem draait. De meest gebruikte
74 toepassing van Java op dit moment is het programmeren van kleine toepassingen, applets genaamd, voor het World Wide Web. Java-applet Een Java-klasse die wordt geladen en uitgevoerd door een Java-toepassing die al is gestart, bijvoorbeeld een webbrowser. Java-applets kunnen worden gedownload en gestart in een webbrowser die Java ondersteunt, bijvoorbeeld Microsoft Internet Explorer of Netscape Navigator. Java-applets worden veelvuldig gebruikt om multimediaeffecten en interactiviteit aan webpagina’s toe te voegen, zoals videoweergaven, animaties, rekenmachines, realtime klokken en interactieve spelletjes. Applets kunnen automatisch worden geactiveerd als de pagina met de applets in een webbrowser wordt weergegeven, of er kan een handeling van de websitebezoeker nodig zijn, zoals klikken op een element op de pagina. ActiveX-besturingselementen ActiveX-besturingselementen zijn net als Java Applets programma’s die door de browser worden uitgevoerd. ActiveX-besturingselementen zijn echter niet platformonafhankelijk en worden na het downloaden opgeslagen op de lokale computer zodat ze bij een volgend gebruik niet opnieuw moeten worden gedownload. Sommige plug-ins worden in de vorm van ActiveX-besturingselementen geïnstalleerd. Invoegtoepassing (plug-in) Een softwaremodule die in een webbrowser wordt geïntegreerd om een reeks interactieve mogelijkheden en multimediaeffecten te bieden b.v. Real-audio voor het afspelen van geluidsbestanden en Shockwave voor het weergeven van animaties. Active Server Page (ASP) Een document met ingesloten scripts die op de server worden uitgevoerd. Deze scripts kunnen door ASP-compatibele webservers worden uitgevoerd. Voor een clientcomputer is ASP een standaardHTML-document dat op elk platform en in elke webbrowser kan worden weergegeven. Common Gateway Interface (CGI) Een standaardmethode voor uitbreiding van de webserverfunctionaliteit door programma’s of scripts uit te voeren op een webserver als reactie op aanvragen van een webbrowser. CGI wordt veel toegepast bij de verwerking van formulieren. Hierbij worden formuliergegevens door de webbrowser naar een CGI-script op de server gezonden, worden de gegevens door het script met een database geïntegreerd en vervolgens als resultaat naar een webpagina teruggestuurd. CGI maakt een webpagina veel dynamischer en biedt interactiemogelijkheden voor de gebruiker. W3C (World Wide Web Consortium) Het instituut dat de standaarden voor HTML en andere markuptalen, voor stijlbladen en voor vrijwel alle andere webgerelateerde technieken vastlegt. HTML (HyperText Markup Language) Een documentbeschrijvingstaal voor webpagina’s. CSS (Cascading Style Sheets) Een standaard voor opmaakmodellen. CSS1 is de eerste generatie CSS, CSS2 de tweede generatie. (documenttype) Het allereerste element in een HTML-pagina die de HTML-versie aanduidt die in de pagina wordt gebruikt zodat browsers, validators en andere programma’s weten met welke HTML-versie ze te maken hebben. ISO-8859-1 tekenset ISO staat voor International Organization for Standardization, de organisatie die standaarden opstelt. Het nummer 8859 verwijst naar de tekenset Latin die gebaseerd is op het Latijnse alfabet. Het cijfer 1 verwijst naar het versienummer van deze standaard. Deze tekenset wordt gebruikt voor ASCII plus de meeste West-Europese talen.
75
14.5
Bijlage 5: Toepassen van algemene CSS-stijlen
1. Om de werkwijze van het toepassen van de stijlen te verduidelijken wordt volgend onderscheid gemaakt: 1) de stijlen die u toepast vanuit het CSS Styles panel (tonen/verbergen via Window/CSS Styles). in de property inspector). 2) de stijlen die u toepast via het snelmenu Style of List en/of via Ctrl-T (= Quick Tag Editor = knop 3) de stijlen die u toepast vanuit de property inspector en/of via Ctrl-T. 2. In de 4e kolom staat beschreven hoe u de stijl moet toepassen en in de 5e kolom hoe u de stijl terug moet verwijderen. In het algemeen kunt u volgend principe aannemen: voor het toepassen of verwijderen van stijlen voor tekenopmaak moet het volledige stuk tekst dat u wilt opmaken geselecteerd worden; voor het toepassen of verwijderen van stijlen voor alineopmaak is het voldoende om de cursor in de alinea te plaatsen. De werkwijze van het toepassen en verwijderen verschilt nog naargelang welk soort stijl u toepast en op welke manier (onderscheid zoals hierboven beschreven). DAAROM RADEN WIJ U AAN OM VOOR ELKE STIJL DE ONDERSTAANDE TABEL TE RAADPLEGEN. 3. In de laatste kolom staat of het resultaat van de toegepaste stijl onmiddellijk in het scherm van Dreamweaver zichtbaar is of enkel in de browser. Gebruik daarom regelmatig de F12-toets om het resultaat te bekijken in de browser.
1) Stijlen toe te passen via CSS Styles panel Naam van stijl in CSS-panel
CSS naam
Opmaak
achtergrblauw
.achtergrblauw
achtergrgrijs
Stijl toepassen
Stijl verwijderen
Resultaat: scherm/browser?
Tekst in blauwe achtergrond Klik in de op te maken alinea en (1 paragraaf) vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
.achtergrgrijs
Tekst in grijze achtergrond (1 paragraaf)
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
balkje
.balkje
Witte tekst (in iets kleiner lettertype) op een donkergrijze achtergrond
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
blauw
.blauw
Blauwe tekst
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
center
.center
Centreren
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
DIVaandacht
DIV.DIVaandacht
Tekst in blauwe achtergrond Druk Ctrl-T, typ of selecteer de en rode rand rondom tag
, druk Enter, typ stukje (meerdere paragrafen) tekst, selecteer in de tag selector de tag
; klik
Plaats de cursor in de tekst, selecteer de tag in de tag selector, klik rechts en
scherm maar niet rode rand rondom
76 vervolgens op de stijl DIVaandacht in het CSS Stylespanel DIVachtergrblauw
DIV.DIVachtergrblauw
Tekst in blauwe achtergrond Druk Ctrl-T, typ of selecteer de (meerdere paragrafen) tag
, druk Enter, typ stukje tekst, selecteer in de tag selector de tag
; klik vervolgens op de stijl DIVachtergblauw in het CSS Styles-panel
kies Remove Tag. Druk Enter om opnieuw een
tag te verkrijgen. Plaats de cursor in de scherm tekst, selecteer de tag in de tag selector, klik rechts en kies Remove Tag. Druk Enter om opnieuw een
tag te verkrijgen
Opmerkingen i.v.m. DIV-stijlen: Zorg ervoor dat u een lege paragraaf hebt ná de paragraaf waarop u de DIV-stijl toepast (reden: als u op het einde van de DIV-stijl Enter doet blijft de cursor binnen de DIV-stijl staan, het is niet mogelijk om op die manier uit de DIV-stijl te geraken). Andere stijlen toepassen binnen de DIV-stijl: u kunt andere stijlen toepassen op voorwaarde dat u steeds de volledige paragraaf selecteert volgende stijlen: achtergrblauw, blauw, HRblauw, Pborderblauw, Pborderblauwtekstblauw kunnen logischerwijze niet toegepast worden binnen de DIV-stijl (omdat ze toch niet zichtbaar zijn op een blauwe achtergrond) en ook Ulpijl niet (witte achtergrond achter het pijltje). indien u een opsommingslijst of genummerde lijst in een DIV-stijl wilt toepassen, maakt u eerst de lijst buiten de DIV-stijl, selecteer vervolgens de lijst (code
of selecteren in de tag selector), kopieer de lijst en plak hem in de DIV-stijl. Hrblauw
HR.Hrblauw
Blauwe horizontale lijn
Kies Insert/Horizontal Rule of
Selecteer de lijn en vervolgens op (none)
browser
de knop in het Objects Panel, selecteer de lijn en klik op de stijl IMGlinks
IMG.IMGlinks
Afbeelding links met rechts ernaast tekst
Kies Insert/Image of de knop in het Objects Panel, typ uw tekst, selecteer vervolgens de afbeelding en klik op de stijl
Klik op de afbeelding en vervolgens op (none)
scherm
IMGrechts
IMG.IMGrechts
Afbeelding rechts met links ernaast tekst
Kies Insert/Image of de knop in het Objects Panel, typ uw tekst, selecteer vervolgens de afbeelding en klik op de stijl
Klik op de afbeelding en vervolgens op (none)
scherm
77
Opmerkingen i.v.m. IMG-stijlen: Voeg altijd eerst de afbeelding in en typ daarna uw tekst! Indien bij het bekijken van het resultaat in de browser een dikke zwarte rand rond de afbeelding zou staan, selecteer dan (in het documentvenster) de afbeelding en typ in de property inspector in het vakje Border de waarde 0 (nul). insprong
.insprong
Insprong
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
Opm.: gebruik niet de knop in de property inspector! linkachtergrblauw
a.linkachtergrblauw
Stijl voor hyperlink met blauwe achtergrond
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op de stijl
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op (none)
gedeeltelijk scherm/browser
linkblauwachtergr wit
a.linkblauwachtergrwit
Stijl voor hyperlink in blauwe Selecteer de volledige tekst tekst (waarop stijl .blauw is waarop de link werd gezet en toegepast) met witte klik vervolgens op de stijl achtergrond
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op (none)
gedeeltelijk scherm/browser
menu
a.menu
Stijl voor hyperlink gebruikt in de navigatiebalk (linkerbalk) van de template
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op de stijl
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op (none)
gedeeltelijk scherm/browser
nieuws
a.nieuws
Stijl voor hyperlink gebruikt in de nieuwsbalk (rechterbalk)
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op de stijl
Selecteer de volledige tekst waarop de link werd gezet en klik vervolgens op (none)
gedeeltelijk scherm/browser
nieuwstitel
.nieuwstitel
Opmaak van een titel gebruikt in de nieuwsbalk (rechterbalk)
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
Pborder
P.Pborder
Normale paragraaf met zwarte rand
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
browser
Pborderblauw
P.Pborderblauw
Normale paragraaf met blauwe rand
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
browser
Normale paragraaf met Klik in de op te maken alinea en blauwe rand en blauwe tekst vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
browser (blauwe tekst op scherm)
Pborderblauwtekst P.Pborderblauwtekstblauw blauw
78
Pzonderwit
P.Pzonderwit
Normale paragrafen zonder witruimte ertussen
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
TIP i.v.m. Pborder-stijlen en Pzonderwit: Om nadien verder te gaan met een normale paragraaf: druk Enter, (typ een stukje tekst), klik op (none) in het CSS Styles panel. SPANblauw
SPAN.SPANblauw
Blauwe tekst
Selecteer een stuk tekst binnen Plaats de cursor in de een paragraaf en klik vervolgens blauwe tekst en klik op de stijl vervolgens op (none)
scherm
SPANoranje
SPAN.SPANoranje
Oranje tekst
Selecteer een stuk tekst binnen Plaats de cursor in de een paragraaf en klik vervolgens oranje tekst en klik op de stijl vervolgens op (none)
scherm
titel
.titel
Titel in grijze kleur
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
txt
.txt
Verplicht lettertype in navigatiepagina’s van web (in middenzone)
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
txttitel
.txttitel
Verplicht lettertype voor titeltjes in navigatiepagina’s van web (in middenzone)
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
Ulpijl
UL.Ulpijl
Lijst met als opsommingsteken rode pijltje
Klik op knop (Unordered List) in de property inspector, selecteer de code
in de tag selector en klik op Ulpijl in het CSS Styles panel
Klik in de lijst , selecteer de code in de tag selector en klik op (none) in het CSS Styles panel
browser
voet
.voet
Lettertype gebruikt in infobalk van template
/
/
scherm
websitetitel
.websitetitel
Wordt enkel gebruikt in benaming van dienst of afdeling in CWIS-sjabloon
Klik in de op te maken alinea en vervolgens op de stijl
Klik in de alinea en vervolgens op (none)
scherm
Opmerking: De overige stijlen die u in het CSS Styles panel ziet (vanaf TABLEbl tot en met THbz) zijn enkel van toepassing indien u met tabellen werkt (zie cursus punt 8.2 Een tabel invoegen, meer specifiek 8.2.3 Betekenis van de CSS-stijlen voor tabellen en het toepassen of wijzigen ervan).
79
2) Stijlen toepassen via snelmenu Style of List en/of via Ctrl-T (Quick Tag Editor = knop
in Property Inspector)
CSS naam
Opmaak
Stijl toepassen
Stijl verwijderen
Resultaat: scherm/browser?
EM
Cursief
1. Selecteer het woord of stuk tekst dat u de opmaak cursief wenst te geven, klik rechts en kies Style/Emphasis in het snelmenu of
1. Om de opmaak van één woord of een stuk tekst verwijderen, selecteer het woord of stuk tekst, klik rechts en kies Style/Emphasis in het snelmenu
scherm
2. Om alle opmaak van een paragraaf te 2. Druk Ctrl-T, typ of selecteer de tag <em>, verwijderen: klik in de cursieftekst, klik druk Enter, typ uw tekst (beste manier indien u een ganse regel in cursief wenst te rechts en kies Remove tag <em> in typen) het snelmenu of, klik in de cursieftekst, selecteer de tag <em> in de tag selector, klik er rechts op en kies Remove tag STRONG
Vet
1. Selecteer het woord of stuk tekst dat u de opmaak vet wenst te geven, klik rechts en kies Style/Strong in het snelmenu of
1. Om de opmaak van één woord of een stuk tekst verwijderen, selecteer het woord of stuk tekst, klik rechts en kies Style/Strong in het snelmenu
2. Druk Ctrl-T, typ of selecteer de tag <strong>, druk Enter, typ uw tekst (beste manier indien u een ganse regel in vet wenst te typen)
2. Om alle opmaak van een paragraaf te verwijderen: klik in de vette tekst, klik rechts en kies Remove tag <strong> in het snelmenu of, klik in de vette tekst, selecteer de tag <strong> in de tag selector, klik er rechts op en kies Remove tag
SMALL
Kleinere tekst
1. Selecteer het woord of stuk tekst, druk Ctrl-T, typ of selecteer de tag <small>, druk Enter of
ADDRESS
Cursief (meerdere alinea’s,
Druk Ctrl-T, typ of selecteer de tag , Plaats de cursor in de tekst, klik rechts en kies Remove tag in het
scherm
Plaats de cursor in de kleine tekst, klik scherm rechts en kies Remove tag <small> in het snelmenu of plaats de cursor in de kleine tekst, selecteer de tag <small> in de tag 2. Druk Ctrl-T, typ of selecteer de tag <small>, selector, klik er rechts op en kies Remove druk Enter en typ uw tekst (beste manier Tag indien u een ganse regel in small wilt typen) scherm
80 zonder witruimte ertussen)
druk Enter en typ uw tekst
snelmenu of plaats de cursor in de tekst, selecteer de tag in de tag selector, klik er rechts op en kies Remove Tag Opm.: de tag is een tag die enkel op een ganse paragraaf kan toegepast worden (niet op een stuk tekst). Tip om nadien verder te typen met gewone tekst: druk Enter, selecteer onmiddellijk de tag in de tag selector en verwijder de tag.
SUB
Subscript
Selecteer het woord of stuk tekst, druk Ctrl-T, typ of selecteer de tag <sub>, druk Enter
Plaats de cursor in de tekst in subscript, klik rechts en kies Remove tag <sub> in het snelmenu of plaats de cursor in de tekst in subscript, selecteer de tag <sub> in de tag selector, klik er rechts op en kies Remove Tag
browser
SUP
Superscript
Selecteer het woord of stuk tekst, druk Ctrl-T, typ of selecteer de tag <sup>, druk Enter
Plaats de cursor in de tekst in subscript, klik rechts en kies Remove tag <sup> in het snelmenu of plaats de cursor in de tekst in subscript, selecteer de tag <sup> in de tag selector, klik er rechts op en kies Remove Tag
browser
DL, DT en DD
Definition list: gedefinieerde term met daaronder de definitie hiervan die een beetje inspringt
Plaats de cursor op de positie waar u een definition list wil maken, klik rechts en kies List/Definition List in het snelmenu, typ uw tekst of
Plaats de cursor in de definition list, selecteer de code
in de tag selector. Klik vervolgens terug in uw scherm rechts in de tekst en kies List/Definition List in het snelmenu.
scherm
Druk Ctrl-T, typ of selecteer de tag
, druk 3x Enter, typ uw tekst voor de definitieterm (
), druk Enter en typ uw tekst voor de defintie-omschrijving (
) Om de definitielijst te beëindigen: doe nog 1 maal Enter, typ geen tekst meer en klik op de knop
81
U kunt het toepassen van deze stijlen ook in een commando stoppen. Open hiervoor eerst het panel History via Windows/History. 1. Typ uw tekst en selecteer de tekst. 2. druk Ctrl-T en typ of selecteer de gewenste tag, b.v. <em>. en klik op de knop
3. Selecteer in het venster History 4. 5. 6. 7.
.
Geef een naam aan het commando, b.v. . De naam italic staat nu in het menu Commands onderaan. Om het commando toe te passen: Typ uw tekst, selecteer de tekst en kies italic uit het menu Commands. Om de stijl opnieuw te verwijderen volgt u de werkwijze zoals beschreven in de kolom ‘Stijl verwijderen’.
Om een commando te verwijderen uit de menu Commands: Kies Edit Command List in het menu Commands, selecteer het commando dat u wilt wissen en klik op Delete. Klik daarna op Close.
3) Stijlen toepassen via property inspector en/of via Ctrl-T CSS naam
Opmaak
Stijl toepassen
Stijl verwijderen
Resultaat: scherm/browser?
H1
Kop 1
H2
1. Klik in de alinea en selecteer Paragraph uit het Format scroll menu
H3
Kop 3
H4
Kop 4
H5
Kop 5
H6
Kop 6
1. Klik in de op te maken alinea en selecteer de gewenste heading uit het Format scroll menu in de property inspector. Opmerking: Indien u een andere heading wil toepassen kunt u die onmiddellijk selecteren uit het scroll menu, het is niet nodig de andere heading eerst te verwijderen of
scherm
Kop 2
2. Druk Ctrl-T, typ of selecteer de gewenste heading-tag (H1 … H6), druk Enter, typ uw tekst
2. Plaats de cursor in de tekst, klik rechts en kies Remove Tag in het snelmenu
of
82
UL
Lijst met opsommingstekens
(Unordered List) in de Klik op de knop property inspector en typ uw tekst. Gebruik de knop om een niveau dieper te gaan of op om een niveau terug te keren.
Klik in de eerste regel van de lijst en selecteer de code
in de tag selector (zo selecteert u de volledige opsommingslijst), klik vervolgens op de
scherm
knop
Om de opsomming te beëindigen, doe nog één Klik, terwijl de tekst nog geselecteerd is, maal Enter maar typ geen tekst meer en klik een aantal keren op de knop tot alle . Gebruik de knop om de op de knop alinea’s volledig links staan (op die manier cursor terug volledig naar links te verplaatsen worden de ‘blockquotes’, die automatisch werden aangemaakt in de html, verwijderd) OL
Genummerde lijst
Klik op de knop (Ordered List) in de property inspector en typ uw tekst. Gebruik de knop om een niveau dieper te gaan of op om een niveau terug te keren. Om de opsomming te beëindigen, doe nog één maal Enter maar typ geen tekst meer en klik op de knop . Gebruik de knop om de cursor terug volledig naar links te verplaatsen. Opmerking: Indien u op een onderdeel van de genummerde lijst opsommingstekens wil toepassen, plaatst u de cursor (in het Code View –venster) in de code van dat
Klik in de eerste regel van de lijst en selecteer de code in de tag selector (zo selecteert u de volledige genummerde . lijst), klik vervolgens op de knop Klik, terwijl de tekst nog geselecteerd is, een aantal keren op de knop tot alle alinea’s volledig links staan (op die manier worden de ‘blockquotes’, die automatisch werden aangemaakt in de html, verwijderd)
gedeeltelijk scherm/browser (de nummering zoals de stijl precies voorziet wordt enkel juist getoond in de browser)
onderdeel en u klikt op de knop BLOCKQUOTE
Insprong (alleen gebruiken voor citaten)
Klik op de knop (Text Indent) in de property inspector en typ uw tekst
Plaats de cursor in de tekst en klik op de knop (Text Outdent)
