Een website ontwerpen in Dreamweaver met de opmaakweergave door G. Van Soest
Met Dreamweaver kan je zeer snel een website in elkaar bouwen; ook het onderhoud van een website is met Dreamweaver uiterst eenvoudig. Wij zullen met deze een leidraad meegeven hoe je een website kan maken in de opmaakweergave.
Hoe beginnen we eraan? Eerst maken we op onze harde schijf een map aan waar alle gegevens die we vergaard hebben van onze website kunnen worden opgeslagen. Deze map geven we een naam die uniek is voor onze site of de eventuele klant. In ons geval zullen we de map die we aanmaken op de harde schijf BCCG noemen. Bij het opstarten van Dreamweaver zien we volgende:
We drukken op de knop “Define Sites” en zien volgende op het scherm: Nu kiezen we op “New” om een nieuwe map aan te maken op onze harde schijf en geven die de naam
“BCCG”
Druk op OK en bij het voldende druk je op “Done”
Met de muiswijzer in het rechtervak klikken we op de rechter muisknop en maken een nieuwe file aan en geven die de naam “Index”
Nu bent u de trotse bezitten van een enkel bestand voor de homepage. Nu kaunt ge de structuur van de site beginnen ontwikkelen en/of aanpassen. Stel nu dat onze website 3 paginas nodig heeft dan kunnen we deze nu al bij maken op dezelfde manier zoals we dat gedaan hebben voor de index pagina. We krijgen dus volgende:
We klikken nu op de knop “sitemap” links boven en zien nu op het linkse vak de hierarchie van onze site verschijnen. Let wel, er bestaan nog geen linken tussen de index pagina en de andere. Deze maken we nu aan door de verbinding te maken door de muis te slepen vanaf de “index” pagina naar respectivelijk pagina 1, pagina 2 en pagina 3.
Als we nu de index pagina openen zien we dat er bovenaan de andere drie paginas vermeld staan en als je met de preview kijkt dan zal je merken dat de linken inderdaad werken.
Maar natuurlijk kan je ook vanaf de verschillende paginas teruglinken naar de index zoals hierboven getoond.
Hoe kunnen we de verschillende paginas een achtergrondkleur geven zodat we ze beter uit elkaar kunnen houden? Dat gaat vrij eenvoudig! Je opent de gewenste pagina, klik met de rechter muisknop en roep de eigenschappen op. Stel daar de achtergrond kleur in naar uw wens. Wij hebben de pagina 1 zwart, de pagina 2 geel en de pagina 3 rood gemaakt. We kunnen nu vanaf de index pagina naar een van de drie andere schakelen en terug. Het wordt nu tijd dat we de paginas beginnen stofferen. We gaan hiervoor gebruik maken van de opmaak weergave maar eerst gaan we het Objects paneel eens bekijken. Daar zijn de meestegebruikte elementen voor het maken van een webpagina opgeslagen.
Als we bovenaan op common klikken krijgen we de verschillende beschikbare panelen te zien en dat zijn: Characters, Common(default), Forms, Frames, Head, Invisibles en Special. Insert image: Voegt afbeeldingen en geanimeerde GIF’s in de cursor positie Insert rolover image: Plaatst een afbeelding die verandert in een andere als de gebruiker er met de muisaanwijzer overheen beweegt. Insert table: Opent dialoogvenster om een tabel op de cursorpositie in te voegen. Insert tabular data: Importeert scheidingstekens van een spreadsheet od databaseprogramma. Insert navigation bar: Voegt een aantal afbeeldingen met links in, die gebruikt worden als navigatieknoppen. Insert horizontal rule: Tekent een horizontale lijn over de pagina op de cursorpositie. Insert e-mail link: Voegt een tekst-link in die bij selectie een e-mailformulier opent. Insert date: Voegt de huidige datum in een door de gebruiker geselteerde notatie in. Insert server side included: opent het dialoogvenster voor het invoegen van een server-side included Insert Fireworks: Voegt afbeeldingen en code in die door Fireworks zijn gegenereerd Insert Flash: Wordt gebruikt om een Flash movie in te voegen. Insert Flash button: Maakt een Flash knop op basis van een sjabloon. Insert Flash text: Maakt een Flash-Kop of andere tekst. Insert shockwave: Wordt gebruikt om een shockwave-movie in te voegen. Insert generator: Voegt een generator-sjabloonbestand met optionele parameters in.
Ontwerpen in de opmaakweergave. Knop Draw layout Cell Knop draw layout Table
Knop draw layout View
De opmaakweergave kan je best gebruiken om een compleet nieuwe webpagina te maken. Deze mogelijkheid stelt u in staat om snel een basisstructuur van een pagina uit te zetten door de belangrijkste documentgebieden te definiëren.
Hoe begin ik eraan? 1. Klik op de knop Layout view in het paneel objects. 2. Klik op de knop Draw Layout Cell, eveneens in het paneel objects staat. 3. Nu kunt ge een opmaaktabel tekenen in een gebied waar nog geen ceel staat. In een ongeldig gebied geeft de cirsor de vorm van een circel met een schuine streep. 4. Om geneste tabellen in meerdere gebieden te splitsen , klikt u op de knop Draw cell en maak nieuwe cellen. 5. Net als met de opdracht Draw Cell, kanje met de Draw Table standaard slechts één tabel tegelijk maken. Om meerdere tabellen op rij te maken houd je de ctrl toets ingedrukt terwijl u een opmaak tabel op het scherm sleept.
Voorbeeld van de eindresultaat dat kan dienen voor een verdere opbouw voor uw nieuwe website.
EINDE
