1 01- Inleiding - Enkele inleidende begrippen 02- Inleiding - Een website maken zonder Dreamweaver 03- Inleiding - Creative Suite Hoe kan ik Dreamweav...
inhoud 01- Inleiding - Enkele inleidende begrippen 02- Inleiding - Een website maken zonder Dreamweaver 03- Inleiding - Creative Suite 3 04- Hoe kan ik Dreamweaver opstarten 05- Hoe kan je een nieuwe webpagina maken? - Methode 1 06- Hoe kan je een nieuwe webpagina maken? - Methode 2 07- CSS en Dreamweaver 08- De pagina-instellingen wijzigen 09- Tekstopmaak - tekenopmaak 10- Figuren 11- Tekstopmaak - Alineaopmaak 12- Hyperlinks - maken en wijzigen 13- Hyperlinks - de soorten 14- Tabellen 15- Frames 16- Speciale effecten - de flashbutton 17- Speciale effecten - de Flashanimatie 18- Speciale effecten - de roll-overfiguur 19- Speciale effecten - de lichtkrant 20- Speciale effecten - Javascript 21- Een website publiceren - Een woordje uitleg 22- Een website publiceren 23- Een gastenboek 24- Een teller op je site 25- Een gratis domein: .tk 26- Een website populair maken: inleiding 27- Een website populair maken - Google 28- Google weren - Valkuilen 29- GoogleMaps, YouTube en Lightbox integreren 30- Google maps - een locatie toevoegen
Pagina 1
Cursus Dreamweaver CS3 - deel 1
Page 1 of 2
INLEIDING Enkele inleidende begrippen WEBSITES, WEBPAGINA'S, HOMEPAGE EN HYPERLINKS In de omgangstaal worden websites en webpagina's vaak door elkaar gehaald. Toch is er een fundamenteel verschil tussen beide. Een website is immers opgebouwd uit een aantal webpagina's. Hoeveel webpagina's een bepaalde website bevat verschilt van site tot site. Zo is bijvoorbeeld de website van BMW-Belgie (www.bmw.be) een verzameling van allemaal verschillende webpagina's. Een of meerdere pagina's geven de prijzen weer. Andere pagina's zijn gereserveerd voor de verkooppunten. Je kan het een beetje vergelijken met een boek dat ook pagina's bevat. Het boek is in dit geval de website, de pagina's zijn de webpagina's. De belangrijkste pagina die een website bevat is de homepage. Dit is de eerste pagina van je website. Je bezoeker komt er vanzelf terecht wanneer hij/zij het adres van je website intypt of er via een zoekmachine terechtkomt. Normaal gezien bevat de homepage een overzicht van wat er op je website allemaal te zien en te beleven valt. Het spreekt dan ook voor zich dat deze pagina er aantrekkelijk uit moet zien zodat de bezoeker geneigd is om je website verder te bezoeken. Tegenwoordig verkiezen internationale, professionele site ervoor om de bezoeker eerst een taalkeuze te laten maken De verschillende pagina's zijn met elkaar verbonden door hyperlinks. Dit zijn knoppen of stukken tekst waar de bezoeker op kan klikken. Door erop te klikken wordt een andere pagina geopend, hetzij binnen dezelfde website, hetzij in een andere website, waar die ook ter wereld mag opgeslagen zijn. Het "springen" van de ene naar de andere webpagina en/of website wordt surfen genoemd. Een portaalsite of een startpagina (bv. start.be, go2.be) bevat erg veel hyperlinks naar andere websites. Een webpagina is eigenlijk niet meer dan een bestand. Dit bestand heeft als extensie HTM of HTML. Dit bestand kan je op je computer opslaan. Als je je webpagina voor internauten beschikbaar wil maken, dan zal je het op een computer moeten opslaan die permanent met het internet verbonden is, je maakt dan gebruik van je "webspace of webruimte".
Webspace of webruimte Nagenoeg alle internetproviders verhuren schijfruimte (webspace) op computers die dag en nacht aanstaan. Deze computers worden ook wel servers genoemd. Door je eigen gemaakte website van je harde schijf naar zo'n server te kopieren , is de website voor iedereen toegankelijk. Zo'n server noemt men een webserver. Je kan webruimte of webspace bekomen door gebruik te maken van de ruimte die je provider je ter beschikking stelt. Wanneer je een abonnement neemt bij Telenet, Skynet (ADSL) of Tiscali (ADSL), krijg je daar gratis 50 MB webruimte bij. Je moet dit zelf nog activeren. Je kan ook gebruik maken van de vele internetdiensten waar je gratis webspace kan krijgen, meestal in ruil voor het plaatsen van reclamebanners (GEOCITIES). Heb je met de aangeboden webspace van je eigen provider echter niet genoeg en wil je geen reclamebanners op je website dan kan je tegen betaling extra webspace huren bij je provider. Tegenwoordig bieden verschillende providers echter gratis internettoegang en webspace aan zodat het aanmaken van een nieuwe account de makkelijkste oplossing is.
IP-adressering, domeinnamen en URL's Wanneer je je site op zo'n server geplaatst hebt is er nog 1 klein probleem. Hoe kan je bezoeker immers te weten komen op welke computer je bestanden van je site staan en hoe maakt die er een verbinding mee? Wel, dit gebeurt aan de hand van IP-adressering, domeinnamen en URL's. Wanneer je met je computer een verbinding maakt met het internet krijgt je computer automatisch een IP-adres toegewezen. Dit is een uniek nummer waarmee elke computer die met het internet verbonden is kan geidentificeerd worden. Ook de computer waar de bestanden van je website zich op bevinden heeft zo'n IP-adres. Het bestaat uit 4 getallen die gescheiden zijn door een punt en waarvan de waarde van elk getal zich bevindt tussen 0 en 255. Wanneer je het IP-adres van de computer waar de webpagina kan worden teruggevonden, in de browser intypt, gevolgd door een / en de bestandsnaam van je pagina, krijg je de pagina te zien.
Bijvoorbeeld Dit principe, dus het feit dat iedere computer op het internet een uniek nummer heeft, een zogenaamd IP-adres, noemen we IP-adressering. Natuurlijk is dit geen makkelijke manier van werken. Stelt je maar eens voor dat je voor iedere pagina die je wil bezoeken het IP-adres dient te weten. Daarom kunnen bedrijven (en particulieren) een domeinnaam laten registreren. Een domeinnaam is een naam die gekoppeld is aan het IP-adres. Zo is www.altavista.com veel makkelijker te onthouden dan http://209.73.164.98/index.html Bij het intypen van een domeinnaam gaan speciale computers, zogenaamde DNS-servers, eerst op zoek naar het bijhorende IP-adres en wordt de pagina, uiteindelijk via een klein omwegje, toch bereikt. Uiteindelijk zal ook jou site op deze manier bereikt worden. Voor Belgie gebeurt het beheer van de domeinnamen door DNS-Belgium (www.dns.be)
Net zoals bij een gewone PC, bestaat binnen een website ook een mappenstructuur. Zo bieden tegenwoordig veel sites de mogelijkheid om je taal te kiezen (www.proximus.be) Eigenlijk bevinden zich op de PC waar de site van Promixus op staat 3 mappen (Nederlands, Frans, Engels). Je ziet die mappenstructuur ook telkens bovenaan in de adresbalk terug verschijnen.
SAMENGEVAT Uit voorgaande bespreking moet duidelijk geworden zijn dat een internetsite eigenlijk maar bestaat uit een aantal bestanden en mappen die zich ergens op een server bevinden. De server wordt geïdentificeerd door een IP-adres en het IP-adres wordt gekoppeld aan een domeinnaam. Je kan m.a.w. een internetsite ontwerpen zonder daarvoor verbinding te maken met het internet. Je plaatst de bestanden gewoon op de harde schijf. Hoe we die bestanden achteraf op het net plaatsen en ervoor zorgen dat anderen ze kunnen terugvinden wordt nog uitvoerig besproken. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 19/05/2007
INLEIDING Een website maken zonder Dreamweaver Webpagina's maken kan eigenlijk zonder programma's zoals Dreamweaver of Frontpage. Met de kladblok die standaard onder Windows wordt meegeleverd kan je heel professionele websites ontwikkelen. Een webpagina is immers niet meer dan een bestand met platte tekst aangevuld met een aantal opmaakcodes (tags) die het uitzicht van je webpagina bepalen. Bijvoorbeeld: Door de tekst op deze manier in kladblok in te geven, het bestandje op te slaan met de extensie .htm of .html en te openen in je browser krijg je onderstaand resultaat.
De opmaakcodes die je in de eerste figuur terugvindt zijn HTML-opmaakcodes, ook wel tags genoemd. Ze staan steeds tussen < en >. Het zijn de enige codes die de browsers begrijpen. Willen we dus een pagina maken die in een browser kan getoond worden dan dienen we deze tags in te brengen. Veel mensen zien echter op tegen het aanleren van deze tags. Zij vallen terug op zogenaamde HTML-editors. Dit zijn programma’s die de HTML-code menugestuurd voor jou genereren. Dreamweaver is hier een voorbeeld van. In Dreamweaver is het mogelijk om een tekst te centreren op dezelfde manier als in Word zonder dat je daarvoor de tag
moet kennen. Bovendien is Dreamweaver ook nog een WYSIWYG-editor (What you see is what you get). Je ziet dus dadelijk hoe je website eruit zal zien. Dit was met het kladblok niet het geval. Dit heeft natuurlijk enorme voordelen. Sites kunnen veel sneller gemaakt worden in HTML-editors dan in kladblok. Vooral het typwerk dat beperkt wordt speelt hierin een grote rol. Tabellen kunnen tot 20 keer sneller gemaakt worden in Dreamweaver dan in kladblok. Het feit dat je bovendien ook nog dadelijk ziet wat je maakt is voor velen dan ook de doorslag om de HTML-taal maar niet aan te leren. Nochtans zijn er aan het gebruik van Dreamweaver enkele nadelen verbonden. Maar al te vaak genereert Dreamweaver overbodige code, die er onder andere voor zorgt dat het inladen van je website langzamer verloopt. Bovendien is de code van Dreamweaver vaak onoverzichtelijk en door gebruik te maken van een HTML-editor kan het wel eens lang duren vooraleer het resultaat precies is zoals jij het wil hebben. De beste oplossing is dan ook dat je beiden kent. Zo kan je site precies ontwikkelen zoals jij wil en gaat het relatief snel. Je laat Dreamweaver de code genereren en wat niet goed is gooi je eruit of pas je aan. Vandaar dat deze cursus uit 2 delen bestaat. Een HTML-cursus waarin we je de belangrijkste HTML-tags aanleren en een Dreamweaver-cursus die beschrijft hoe je de reeds aangeleerde HTML-tags genereert in Dreamweaver.
Belangrijke opmerking: wanneer je je webpagina opslaat, moet je ermee rekening houden dat je bestandsnaam in GEEN geval spaties mag bevatten. Wanneer je bestandsnaam meerdere woorden moet bevatten, verbindt deze dan aan elkaar met het liggend streepje (_). Bijvoorbeeld: z
Je kan de HTML-code van elke webpagina op het internet opvragen met volgend trukje: Beeld - Bron of Rechtermuisknop - Bron weergeven. Je krijgt nu de HTML-code van deze pagina te zien in de Kladblok. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 19/05/2007
INLEIDING Creative Suite 3 Dreamweaver is niet altijd van Adobe geweest. Oorspronkelijk is Dreamweaver gemaakt en verspreid door Macromedia. Terwijl versie 8 verscheen waren echter geruchten dat Macromedia zou opgekocht worden door Adobe en deze geruchten bleken later waar te worden. Dreamweaver die toen nog met Fireworks en Flash in de bundel “Studio 8” zaten, werden in de Creative Suite geplaatst samen met Photoshop, Illustrator en andere programma’s. Sindsdien werken deze programma’s allemaal erg goed samen. Een klein overzicht van de mogelijkheden:
Dreamweaver
Hiermee kan je websites bouwen. Je kan tekst, figuren, tabellen en andere objecten invoegen en publiceren op internet.
Fireworks
Hiermee kan je tekenen, bitmaps bewerken en vooral: weblay-outs maken. Het grafische gedeelte van de website kan je via Fireworks ontwerpen. Eigenlijk is dit de eerste stap in het websitebouwen. Daarna komt pas het Dreamweavergedeelte.
Flash
Wanneer je op het internet bewegende zaken tegenkomt zoals banners, webintro’s en kleine animaties, zijn deze meestal in Flash ontwikkeld.
Photoshop
Dit is de absolute standaard wat betreft fotobewerking. Je kon dit ook reeds op snelle en beperkte manier via Fireworks, maar Photoshop is echter meer gespecialiseerd in drukwerk en minder in webdesign.
Illustrator
Dit is een erg uitgebreid tekenprogramma. Je kan hier vectorieel tekenen. Ook dit kon je reeds in beperkte mate doen via Fireworks. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
EEN KORTE RONDLEIDING Hoe kan ik Dreamweaver opstarten? Kies voor Start - Alle Programma’s – Adobe Dreamweaver CS3 of
dubbelklik op het pictogram van Adobe Dreamweaver CS3 op het bureaublad Vervolgens bekom je onderstaand venster:
Je moet nu een keuze maken. Indien je een lege webpagina wil maken, moet je kiezen voor HTML. Maar je kan ook een pagina die je recent gemaakt hebt openen via dit venster. We kiezen voor HTML aangezien we een lege pagina willen openen.
Je bekomt nu het venster waarin je een webpagina kan maken.
We bespreken kort de verschillende delen van het venster. Titelbalk
Hierin vind je "(Untitled-1)" terug. Daarbij is "Untitled-1" de naam van de webpagina en de map waar de webpagina opgeslagen is. Menubalk
Hier vind je de verschillende menu's terug. Let op! Tot versie 8 van Dreamweaver is deze enkel in het Engels verschenen. Je kon je dus aan Engelse menu's verwachten. Vanaf versie 9 (= CS3) bestaat deze ook in het Nederlands. Insertbalk
Je kan in Dreamweaver op 2 verschillende manieren werken: via de Menubalk of via de Insertbalk. Beide methodes zijn gelijk, maar de insertbalk is wat sneller en visueler. Wij zullen in de cursus meestal via de Menubalk werken. Het staat je vrij, welke manier jij gebruikt. Documentbalk
Met de eerste 3 knoppen kan je switchen tussen de HTML-weergave, Split weergave en Normale weergave. In de HTML-weergave kan je de HTML-code achter je webpagina bestuderen en aanpassen. Automatisch zal ook je webpagina in de normale weergave zich aanpassen. In de Split weergave zie je de HTML- en normale weergave tegelijkertijd.
Bij Titel kan je de titel van je webpagina wijzigen. Door op het wereldbolletje te klikken kan je je site bekijken in de browser. Je hebt hierbij de keuze tussen Internet Explorer en Firefox. Door je site in de browser te bekijken, bekom je een goed zicht op hoe je site op Internet eruit zou zien.
Let op: indien je computer niet beschikt over Firefox, zal deze natuurlijk ook niet in de lijst staan. Je kan browsers toevoegen of verwijderen via de knop “Edit Browser List”. Eigenschappenvenster
Dit venster wijzigt naargelang datgene waar je mee bezig bent. Zo zal je een ander eigenschappenvenster krijgen als je tekstopmaak, figuren, tabellen, frames, … aan het wijzigen bent. Tekstopmaak en hyperlinks
Figuren
Tabellen
Enz.
Ook voor frames, flashanimaties, lijnen, formulieren, ... zijn er aangepaste eigenschappenvensters. Wanneer je iets aan je tekst, figuren, tabellen, frames, … wil wijzigen, kan je dat dus doen in bijhorend eigenschappenvenster. Ongeveer dezelfde opties vind je terug in je snelmenu (rechtermuisknop). In het begin is het gebruik van de eigenschappenvensters een beetje wennen, maar al vlug wordt duidelijk dat deze methode erg plaatsbesparend en snel is. Opmerking: wanneer je het eigenschappenvenster per ongeluk kwijtgespeeld bent, kies dan voor Modify - Selection Properties Ontwerpvenster Hier kan je de tekst intypen en later figuren, hyperlinks, tabellen en frames toevoegen. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
HOE KAN JE EEN NIEUWE WEBPAGINA MAKEN? Hoe groter een website wordt, hoe onoverzichtelijker de bestandsstructuur wordt. Maak daarom best een aparte map voor een website met daaronder eventueel een aparte map voor de figuren, animaties, geluid, …
Belangrijke opmerking: er zijn 2 methodes om een nieuwe website te maken. De 1e methode is de eenvoudigste. Maar wanneer je een uitgebreide website hebt, kan je in de problemen geraken. Want wanneer je bestanden van plaats (andere map) gaat veranderen, zullen de links naar deze andere plaats niet automatisch aangepast worden. Bij de 2e methode is dit wel het geval. Maak allereerst een nieuwe map aan, waarin je site zal komen te staan. Methode 1: Kies voor File - New Je krijgt nu een keuze.
Kies voor Blank Page - HTML Kies voor Create. Bij Dynamic Page kan je kiezen voor php, asp, enz.. Deze pagina's worden gebruikt om met databases te werken. Hiermee kan je zelf gastenboeken, forums of webwinkels ontwerpen. Dit wordt echter pas in het derde deel behandeld. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
HOE KAN JE EEN NIEUWE WEBPAGINA MAKEN? Methode 2: Je kan ook werken via het Sitevenster. Dit is vergelijkbaar met de verkenner. Je kan hier 2 dingen mee doen: je bestanden beheren en je site op internet zetten (uploaden - zie hoofdstuk 14). Je kan best nu reeds met deze manier starten aangezien je enkel op deze manier je site op internet kan krijgen. Het sitevenster biedt ook een groot voordeel: wanneer je webpagina's, figuren of andere bestanden verwijdert, hernoemd of verplaatst, gaat Dreamweaver kijken of er een link ligt tussen deze bestanden. Je kan het sitevenster in miniformaat zien tussen je panelen. Indien het er nog niet staat, klik dan op het zwarte pijltje voor 'Files' of druk op F8.
Om het in groot formaat te krijgen, moet je klikken op
.
Deze knop bevindt zich in het paneel 'Files' (zie screenshot rechts).
We gaan allereerst een nieuwe site aanmaken. Kies voor Site - New Site
We kiezen niet voor de Wizard, maar werken met de geavanceerde weergave. Klik op Advanced.
Geef de site een naam (is niet hetzelfde als de title!) bij Site Name. Je mag hier gerust spaties gebruiken. Bij Local Root Folder gaan we een map aanduiden waar onze site gaat komen te staan. Kies een geschikte map door op
te klikken. Blader nu naar de map waarin je je nieuwe website wil plaatsen. Wanneer je nog een nieuwe map moet maken,
Kies voor Select en daarna OK. Wanneer je dit gedaan hebt, krijg je het volgende te zien in het Sitevenster:
Je site "mijn eerste site" ziet er nog enigszins triestig uit, want er zit nog helemaal niets in. Je hebt eigenlijk enkel een mapje aangemaakt. We zullen nu zorgen voor de bijhorende (html-) bestanden.
Keer terug naar je gewone weergave door op
te klikken.
Kies voor File - New Maak nu een nieuwe HTML-pagina aan. Als dit niet lukt, kan je bij “methode 1” eventjes gaan spieken. Je krijgt nu een lege webpagina. We gaan deze direct opslaan. Kies voor File - Save. Aangezien we van deze lege webpagina de startpagina (homepage) gaan maken, noemen we hem index.htm. Sla op in je nieuwe map. Je kan nu aangeven dat index.htm de startpagina van je website zal worden. Klik met je rechtermuisknop op index.htm en kies voor Set as Home Page in het snelmenu.
Opmerking: een startpagina (homepage) wordt steeds index.htm of default.htm genoemd. In deze pagina vind je meestal een menu, foto, figuur, uitleg en/of logo van een bedrijf terug. Erg belangrijk is dat je je webpagina opslaat vooraleer je er hyperlinks of figuren gaat aan toevoegen! Zoniet zal Dreamweaver foutieve links leggen naar de figuren, of zullen de hyperlinks foutief zijn. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
CSS EN DREAMWEAVER… CSS is de afkorting van Cascading Style Sheets en is een manier van opmaak. Het is een uitbreiding op HTML en heeft een aparte codering. In de nieuwste Dreamweaverversie wordt er duchtig met deze CSS-codes gezwierd. Dat heeft zo zijn voor- en nadelen. Het nadeel is dat de code niet meer louter uit HTML bestaat, maar dat er CSS tussen verschijnt. Dit is niet zo optimaal om mee te werken. Zeker als je in HTML soms wil gaan bijsturen of zelfs een site volledig in HTML wil maken. Je kan het gebruik van CSS stopzetten door deze optie uit te vinken. Ga naar Edit – Preferences.
Klik het vinkje bij “Use CSS instead of HTML tags” uit. We zijn nu weer zeker dat we een zuivere HTML-code zullen verkrijgen bij het gebruik van Dreamweaver.
Nog een vervelend iets: elk object dat ingevoegd wordt, zal een melding geven. Zo zal je telkens als je een figuur, frame of ander object wil invoegen een venster krijgen. Wil je dit niet? Kies dan voor “Accessiblity” en klik de vinkjes bij “Form objects”, “Frames”, “Media” en “Images” weg.
Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
HOE KAN JE DE PAGINA-EIGENSCHAPPEN WIJZIGEN? Kies voor Modify - Page Properties
1 Background Image (achtergrondfiguur): hier kan je een figuur aanduiden die als achtergrond moet ingesteld worden. () Klik op Browse en blader naar de figuur die je als achtergrondsfiguur wenst in te stellen. Kies voor OK Indien je je webpagina nog niet opgeslaan hebt, krijg je onderstaande (vervelende) mededeling.
Kies hier voor NO en sla je webpagina zo vlug mogelijk op!!! Dreamweaver vraagt hier of je de figuur die je geselecteerd hebt om als achtergrondfiguur in te stellen, wil kopiëren naar de map van je webpagina. We kiezen voor No omdat we de webpagina zo vlug mogelijk gaan opslaan. Op die manier gaan we niet onnodig figuren kopiëren op onze computer en zullen er geen verkeerde links gelegd worden vanuit je webpagina naar je (achtergronds-) figuur. 2 Background (Achtergrondkleur): wanneer je liever geen figuur gebruikt als achtergrond, kan je ook een kleur instellen als achtergrond (). Je kan dit op 2 manieren: je geeft de kleurcode in of je klikt een kleur aan. 3 Text (Tekstkleur): je kan hier een standaardkleur kiezen voor je tekst (). 4 Links (Hyperlinkkleur): je kan hier een kleur kiezen voor je hyperlinks (). 5 Visited Links (Bezochte hyperlinkkleur): je kan hier een kleur kiezen voor de hyperlinks die reeds bezocht werden (). 6 Active Links (Actieve hyperlinkkleur): je kan hier een kleur kiezen voor de hyperlink die op dat moment actief is () 7 Left Margin (Linkermarge): hier kan je een getal opgeven in pixels dat als linkermarge zal gelden. 8 Top Margin (Bovenmarge): hier kan je een getal opgeven in pixels dat als bovenmarge zal gelden. 9 Margin Width (Marge breedte): hier kan je de breedte van een marge ingeven 10 Margin Height (Marge hoogte): hier kan je de hoogte van een marge ingeven
Indien je bij Edit – Preferences, het vinkje bij “Use CSS instead of HTML tags” niet uitgevinkt hebt, krijg je een ander Propertiesvenster te zien. In dit andere venster zijn er meerdere mogelijkheden, maar het nadeel van deze extra mogelijkheden is dat ze in CSS-code worden omgezet.
Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
TEKENOPMAAK We willen nu wat tekst aan onze webpagina toevoegen. Maar tekst zonder opmaak geeft niet het gewenste effect. We willen onze tekst benadrukken door woorden in het vet en/of cursief te zetten of door te onderlijnen. Vaak spreekt een ander lettertype, een andere lettergrootte en een andere tekstkleur ook veel meer aan tot de verbeelding.
Typ wat tekst in je ontwerpvenster.
Wanneer je tekst selecteert, ga je automatisch je eigenschappenvenster te zien krijgen. (Wanneer dit NIET het geval is, kies dan voor Modify - Selection Properties)
Selecteer de tekst die je een opmaak wil geven
Maak je keuze in het eigenschappenvenster
We bespreken nu kort de verschillende mogelijkheden van je eigenschappenvenster:
1 zie alineaopmaak 2 lettertype (): je kan hier in de lijst de gewenste lettertypes aanklikken (meerdere lettertypes zijn mogelijk). Deze lijst bevat enkel een beperkt aantal lettertypes. Wanneer jouw favoriet lettertype er niet tussen zit, klik dan op Edit Font List.
1 hier kan je een lettertype kiezen 2 door op te klikken kan je een lettertype toevoegen aan de lijst. Door op te klikken, kan je een lettertype terug verwijderen uit de lijst. 3 hier vind je de lijst met de geselecteerde lettertypes 4 hier vind je de selectie terug die je zonet gemaakt hebt Je kan ook de lettertypes zelf intypen, gescheiden door een komma. 3 lettergrootte (): je kan hier in de lijst een gewenste lettergrootte kiezen. Dit cijfer geeft de grootte niet aan in pixels, maar geeft de grootte op een speciale manier weer:
4 tekstkleur (): je kan deze tekstkleur op 2 manieren wijzigen: je kan de gewenste kleur aanduiden in een kleurenpalet of de kleurcode ernaast intypen
5 vet () 6 cursief () 7, 8, 9, 10 zie alineaopmaak of hyperlinks
OPMERKING: het zal je misschien al wel opgevallen zijn, maar via het eigenschappenvenster kan je NIET onderlijnen. Dit is een speciale opvatting van de ontwikkelaars van Dreamweaver. Het is namelijk zo dat op internet het onderlijnen gereserveerd is voor hyperlinks. Vandaar dat je best geen tekst onderlijnd als het geen hyperlink bevat.
Als je toch tekst wil onderlijnen, kan je dit via de menubalk. Kies voor Text – Style - Underline
Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
HEEL BELANGRIJK: vooraleer je een figuur invoegt, moet je steeds je webpagina opslaan! Indien dit niet gebeurt, kan er geen link gelegd worden vanuit de webpagina naar de figuur. Wanneer je je pagina niet opslaat, heeft deze namelijk nog geen plaats. Zorg er ook altijd voor dat je figuren in dezelfde map OF een submap staan als je webpagina's. Indien dit niet het geval is, zal er geen goede link gelegd worden naar je figuur en krijg je problemen als je de site op internet wil plaatsen.
Voeg een figuur () in door te kiezen voor Insert - Image of klik op de knop
in de Insertbalk.
Je kan nu je figuur zoeken in eender welke map. In de rechterkant van het venster, kan je een preview zien van de figuur. Ook staat de grootte en bestandsgrootte van de figuur vermeld. Wanneer je met figuren werkt, mag je enkel figuren met extensie jpg - gif en png gebruiken. Zorg er steeds voor dat deze figuren niet té groot zijn. Zo is 100 KB de limiet. Selecteer een figuur en kies voor OK. Indien je vergeten bent je webpagina op te slaan, vooraleer je de figuur trachtte in te voegen, krijg je onderstaande mededelingen . Kies voor OK, daarna voor JA en sla je webpagina alsnog op.
De figuur verschijnt in je ontwerpvenster. Wanneer je nu je Sitevenster bekijkt, zal je opmerken dat er een bestand bijgekomen is in je lijst.
Hoe kan ik een figuur bewerken? Wanneer je een figuur selecteert, zal automatisch je eigenschappenvenster te voorschijn komen.
1 bestandsgrootte van de figuur. 2 breedte (<WIDTH>): hier zie je hoe breed je figuur is (in pixels). Je kan dit getal wijzigen. 3 hoogte (): hier zie je hoe hoog je figuur is (in pixels). Je kan dit getal wijzigen. Opmerking: je kan de grootte van je figuur ook wijzigen door de rand van de figuur te verslepen. (gebruik de SHIFT-toets om de figuur niet te vervormen) 4 bron (<SRC>): hier zie je waar je figuur zich bevindt en welke bestandsnaam + extensie de figuur heeft. Indien er geen map vermeld staat, zit de figuur in dezelfde map als het html-bestand. Met het gele mapje kan je terug bladeren en alsnog een andere figuur invoegen. Deze figuur zal dan de bestaande vervangen. 5 alt: hier kan je een beschrijving van de figuur intypen. Mocht de figuur niet geladen kunnen worden, dan weet de gebruiker welke figuur daar hoort te staan. 6 Croptool. Hiermee kan je een stukje van de figuur ‘afsnijden’. Druk op de knop en selecteer een stuk van de figuur. Dubbelklik op de figuur. Enkel de selectie blijft over. De rest verdwijnt.
Naderhand krijg je nog de melding dat je deze actie de figuur onherroepelijk zal wijzigen. Enkel via Edit – Undo kan je de actie nog ongedaan maken.
7 Contract – Helderheid: Hier kan je je figuur helderder maken of het contrast tussen de lichte en donkere kleuren wijzigen door met de indicatoren te schuiven of door een waarde in te typen.
8 Scherpte: hier kan je de scherpte van de figuur wijzigen.
uitlijning (): hier kan je de uitlijning van je figuur wijzigen (links, rechts, midden). Deze optie geeft je de mogelijkheid tevens de tekst naast de figuur uit te lijnen (top, bottom, middle) 9 rand (): hier kan je een rand toevoegen rondom je figuur. Voer een getal in (in pixels). 10 uitlijning (): hier kan je de uitlijning van je tekst t.o.v. je figuur wijzigen (boven, onder, midden, ...). Opmerking: bij align kan je opties kiezen zoals Top – Bottom – Middle enz. Met deze opties kan je niet je figuur uitlijnen, maar wel de tekst t.o.v. de figuur.
In bovenstaand voorbeeld is gekozen voor de optie Top. -> de opties die nog niet besproken zijn, worden besproken in het volgende hoofdstuk ("hyperlinks").
Opmerking: Op dit moment kan je een figuur enkel nog maar links, midden of rechts uitlijnen. Wanneer we met tabellen leren werken, zal hier verandering in komen.
Schermafdrukken Een nieuwe functie in Dreamweaver CS3 (ten opzichte van Dreamweaver 8) is dat je schermafdrukken rechtstreeks in het programma kan plakken. Zo kan je op elk moment een schermafdruk nemen met de Prt Scrn-toets en deze plakken in het programma via Edit – Paste.
Je kan zelfs nog een stukje van de schermafdruk snijden met de “export area”-toets.
Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
ALINEA-OPMAAK Uitlijnen, inspringen, opsommingen Ook alinea-opmaak is een vereiste om je tekst op te maken. Om alinea-opmaak toe te passen, moet je zorgen dat je je alinea's juist maakt.
Doe dit als volgt: wanneer je naar een nieuwe regel wil gaan en deze regel hoort nog bij dezelfde alinea, gebruik dan SHIFT – ENTER ( ). Wanneer je naar een nieuwe alinea wil starten, gebruik dan ENTER (
).
Je zal opmerken dat wanneer je enter gebruikt, er automatisch alinea-afstand komt tussen de verschillende alinea's (paragrafen).
We bespreken kort de verschillende mogelijkheden om alinea-opmaak toe te passen:
1 hiermee kan je "headings" toepassen. Deze headings kan je vergelijken met opmaakprofielen. Heading 1 (Kop 1) wordt gebruikt voor de grootste titels, heading 2 (kop 2) voor de 2e grootste titel, enz. Paragraph wordt daarentegen gebruikt voor de gewone tekst (standaard).
Lijnen invoegen Je kan ook lijnen () invoegen in Dreamweaver. Dit doe je als volgt:
Kies voor Insert – HTML - Horizontal Rule.
Je krijgt nu automatisch een standaardlijn (grijs, breedte: 100%, …). Wanneer je deze lijn selecteert, krijg je een eigenschappenvenster.
1 Breedte: door een getal in te typen kan je hier de breedte aanpassen van je lijn. 2 Maatgetal: hier kan je kiezen of de breedte en hoogte van je lijn in pixels (punten) of procenten wordt uitgedrukt. 3 Uitlijning: hier kan je kiezen of je lijn links, rechts of in het midden uitgelijnd wordt. 4 Hoogte: door een getal in te typen kan je hier de hoogte aanpassen van je lijn. 5 Schaduw: hier kan je kiezen of je lijn een schaduw (3D-effect) heeft. 6 Quick Tag Editor: hiermee kan je op een vlugge manier een attribuut toevoegen aan je html-tag of andere dingen in de code van het geselecteerde object veranderen.
OPMERKING: De kleur van een lijn kan je enkel in HTML wijzigen !!!
Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
) worden om 2 uiteenlopende redenen gebruikt: om gegevens (cijfers, berekeningen, weer te geven en om een verzorgde bladspiegel te gebruiken. Dit laatste is belangrijk om een mooie schikking te bekomen.
Hoe kan je tabellen toevoegen aan je webpagina? Kies voor Insert – Table (Ctrl + Alt + T) Je kan nu enkele keuzes maken bij de tabel die je gaat invoegen.
z z z z z z
Rows: aantal rijen Columns: aantal kolommen Table width: breedte van de tabel in pixels of procent Border thickness: dikte van de rand Cell spacing: afstand tussen de cellen Cell padding: afstand tussen de celwand en de celinhoud
Kies voor OK. De tabel verschijnt nu op de plaats waar je cursor stond, volgens de gekozen instellingen.
Hoe kan je de eigenschappen van een tabel wijzigen? Je krijgt een ander eigenschappenvenster afhankelijk hoe je de tabel selecteert. Tip: je kan een tabel of delen ervan (cel, rij, kolom) gemakkelijk selecteren door onderaan links in de statusbalk de juiste tag aan te klikken.
Er bestaan 4 soorten eigenschappenvensters bij een tabel: eigenschappenvenster van de cel, rij, kolom en volledige tabel. Hierin kan je telkens de respectievelijke eigenschappen wijzigen. Je moet enkel zorgen dat je het juiste gedeelte selecteert. Linksonder in het eigenschappenvenster kan je zien welk gedeelte je nu geselecteerd hebt. eigenschappenvenster van een cel
1 horizontaal uitlijnen: hiermee kan je de celinhoud (tekst of figuren) horizontaal uitlijnen verticaal uitlijnen: hiermee kan je de celinhoud (tekst of figuren) verticaal uitlijnen 2 cellen samenvoegen: hiermee kan je meerdere cellen samenvoegen (je moet dan wel meer dan één cel selecteren). 3 cellen splitsen: hiermee kan je cellen splitsen. Je krijgt dan volgend optievenster waarin je kan kiezen of je wil splitsen in rijen of kolommen. Tevens kan je het aantal kiezen.
4 breedte van de cel: hier kan je de breedte van een cel ingeven (in pixels of in procent als je het % zelf intypt). 5 hoogte van de cel: hier kan je de breedte van een cel ingeven (in pixels of in procent als je het % zelf intypt). 6 achtergrondfiguur: hier kan je een figuur instellen als achtergrond voor je cel. 7 achtergrondkleur: je kan de kleur kiezen in een kleurenpalet of de code intypen. 8 kleur van de rand: je kan de kleur kiezen in een kleurenpalet of de code intypen. eigenschappenvenster van een rij en een kolom
Zie eigenschappenvenster van een cel eigenschappenvenster van een tabel
1 aantal rijen: hier kan je het aantal rijen aanpassen 2 aantal kolommen: hier kan je het aantal kolommen aanpassen 3 breedte (<WIDTH>): hier kan je de breedte van de tabel aanpassen (in procent of pixels). De hoogte van een tabel kan je in Dreamweaver CS3 niet meer wijzigen via het eigenschappenvenster. Je moet hiervoor in de HTML-code wijzigingen aanbrengen. 4 cellpad (): hier kan je de celopvulling aanpassen 5 cellspace (): hier kan je de ruimte tussen de cellen aanpassen 6 uitlijning (): hier kan je de uitlijning van de tabel aanpassen 7 rand (): hier kan je de dikte van de rand ingeven 8 achtergrondkleur (): hier kan je een achtergrondkleur kiezen die geldt voor de volledige tabel. 9 randkleur (): hier kan je een kleur instellen voor de rand van de volledige tabel. 10 achtergrondfiguur (): hier kan je een figuur instellen als achtergrond voor de volledige tabel. Voorbeeld van een tabel:
Interactie Office – Dreamweaver Vanaf Dreamweaver MX 2004 is er ook een betere werking tussen Office (Word en Excel ) en Dreamweaver. Zo kan je nu een tabel in Excel gemakkelijk kopiëren en daarna plakken in Dreamweaver. Dreamweaver zal de tabel herkennen, maar de opmaak ben je kwijt.
Selecteer een tabel in Excel en Kies voor Bewerken – Kopiëren. Ga naar Dreamweaver en plaats je cursor waar je je tabel wil laten verschijnen.
Kies voor Edit – Paste De tabel verschijnt in Dreamweaver, maar zonder opmaak. Dreamweaver CS3 - deel 1 | pagina laatst gewijzigd op 18/05/2007
