Dreamweaver MX tutorial. Basics

Transcriptie

1 Dreamweaver MX tutorial Basics In deze tutorial vind je een beschrijving van alle functies in je Object-palet. Klik op een tool om te kijken wat het inhoudt en hoe je hem toe kunt passen. Insert Image Met dit knopje kun je plaatjes invoegen op de plaats waar je cursor staat. Sneltoets: Ctrl + Alt + I Andere mogelijkheden om een plaatje in te voegen: - Insert -> Image - open je Assets panel (F11) en sleep je image naar de plaats waar je wil, of klik erop en het plaatje verschijnt op de plaats waar je cursor staat. Insert Rollover Image Met dit knopje kun je rollover-images invoegen op de plaats waar je cursor staat. Een rollover image zal veranderen als je er met de muis overheen gaat. Andere mogelijkheden om een plaatje in te voegen: Insert -> Interactive Images ->Rollover Image. Allereerst krijg je een venster te zien waar je een aantal dingen in moet vullen: Image Name: Vul hier de naam van de rollover in Original Image: De link naar de knop die je straks als eerste op je scherm zal zien Rollover Image: De link naar de knop die je zult zien als je er met de muis overheen gaat Het is verstandig om de Preload Images funtie aan te vinken. Deze optie laadt alle plaatjes in als Pagina 1 van 16

2 Het is verstandig om de Preload Images funtie aan te vinken. Deze optie laadt alle plaatjes in als de pagina op wordt geroepen, zodat de rollover meteen te zien is als je met je muis eroverheen gaat (anders wordt hij pas geladen als je met de muis op je rollover staat) When Clicked Go to URL: Hier vul je de link in naar de pagina waar je heen wilt gaan als je opde knop klikt. Vul # in als je de pagina nog niet weet. Insert Table Met dit knopje kun je een table invoegen op de plaats waar je cursor staat. Een table kun je gebruiken voor het positioneren van bijvoorbeelding plaatjes en/of tekst. Sneltoets: Ctrl + Alt + T Andere mogelijkheden om een table in te voegen: - Insert -> Table Allereerst krijg je een venster te zien waar je een aantal dingen in moet vullen: Rows: horizontale rijen Columns: verticale kolommen Cell Padding: De marge in de cellen Cell Spacing: De marge tussen de cellen Width: De breedte van de table Border: De rand om de table Insert Tabular Data Met dit knopje kun je externe data invoegen op de plaats waar je cursor staat. Dit geldt dan voornamelijk voor Word en Exel-bestanden. Het is dan belangrijk dat de data dan gescheiden wordt door een specifiek leesteken of een ander uniek symbool. Dreamweaver zal deze dan automatisch converteren naar een tabel met rijen en kolommen. Andere mogelijkheden om een tabular data in te voegen: - Insert -> Tablular Data Draw Layer Klik en sleep om je layer te maken. Andere mogelijkheden om een tabular data in te voegen: - Insert -> Layer Klik op de rand van je Layer om verschillende opties in te stellen in je Propertie Inspector. Insert Navigation Bar Met dit knopje kun je een Navigation Bar invoegen op de plaats waar je cursor staat. Andere mogelijkheden om een Navigation Bar in te voegen: Insert -> Interactive Images ->Navigation Bar. Pagina 2 van 16

3 Allereerst krijg je een venster te zien waar je een aantal dingen in moet vullen: Nav Bar Elements: Dit zijn in principe je hoofdonderwerpen van je navigatie balk Element Name: Een unieke naam van een onderdeel van je balk (bijv. een hoofdonderwerp) Up Image: De link naar de knop die je straks als eerste op je scherm zal zien Over Image: De link naar de knop die je zult zien als je er met de muis overheen gaat Down Image: De link naar de knop die je zult zien als je er met de muis op drukt Over While Down Image: De link naar de knop die je zult zien als er met de muis op gedrukt is en je dus in dat gedeelte zit. When Clicked Go to URL: Hier vul je de link in naar de pagina waar je heen wilt gaan als je opde knop klikt. Vul # in als je de pagina nog niet weet. (geef eventueel ook je Frame aan!) Het is verstandig om de Preload Images funtie aan te vinken. Deze optie laadt alle plaatjes in als de pagina op wordt geroepen, zodat de rollover meteen te zien is als je met je muis eroverheen gaat (anders wordt hij pas geladen als je met de muis op je rollover staat) Vink Show "Down Image" Initially aan als je een van de elementen al meteen als aangeklikt wil laten zien (dat je dus in dat gedeelte van de site zit) Verder kun je nog aangeven of je je Navigation Bar Horizontaal of Verticaal wil invoegen en of er gebruik mag worden gemaakt van Tables om het geheel te positioneren. Insert Horizontal Rule Met dit knopje kun je een Horizontal Rule invoegen op de plaats waar je cursor staat. Een Rule is een horizontale lijn die je kunt gebruiken om ergens een scheidingslijn in te stellen. Andere mogelijkheden om een Horizontal Rule in te voegen: Insert -> Horizontal Rule. Insert Link Met dit knopje kun je een Link invoegen op de plaats waar je cursor staat. Een Link is een hyperlink die als je erop drukt je standaard programma opent en je dus een mail kunt versturen naar de persoon van het adres waar je op klikt. Andere mogelijkheden om een Link in te voegen: Insert -> Link. Allereerst krijg je een venster te zien waar je een aantal dingen in moet vullen: Text: De tekst die de link wordt waar je op kunt klikken Het -adres waar de mail heen moet worden gestuurd Insert Date Met dit knopje kun je de actuele datum of tijd invoegen op de plaats waar je cursor staat. Andere mogelijkheden om een datum of tijd in te voegen: Insert -> Date. Insert Server Side Include Pagina 3 van 16

4 Insert Server Side Include Met dit knopje kun je Server Side Include link invoegen op de plaats waar je cursor staat. Een Server Side Include bestand is een externe file die je weer wilt geven op je pagina (dat kan een html-file zijn, of een text-file). Het is wel belangrijk om te weten of je server dit wel ondersteund. Andere mogelijkheden om een Server Side Include in te voegen: Insert -> Server-Side Include. Insert Fireworks HTML Met dit knopje kun je Fireworks HTML invoegen op de plaats waar je cursor staat. HTML bestanden die je met Fireworks geëxporteerd hebt, kun je via deze optie omzetten naar (Dreamweaver) HTML Andere mogelijkheden om Fireworks HTML in te voegen: Insert -> Interactive Images -> Fireworks HTML. Insert Flash Met dit knopje kun je een flashfilm invoegen op de plaats waar je cursor staat. Flash kun je gebruiken voor animaties, intro's of zelfs gehele sites! Sneltoets: Ctrl + Alt + F Andere mogelijkheden om Flash in te voegen: Insert -> Media -> Flash. - open je Assets panel (F11) en sleep je flashfilm naar de plaats waar je wil, of klik erop en de flashfilm verschijnt op de plaats waar je cursor staat. Insert Flash Button Met dit knopje kun je een Flash Button invoegen op de plaats waar je cursor staat. Er zitten een aantal standaard buttons in Dreamweaver die je kunt aanpassen aan je eigen wensen. In het scherm wat je als eerste te zien krijgt kun je alles instellen (font, link, enz.) Andere mogelijkheden om een Flash Button in te voegen: Insert -> Interactive Images -> Flash Buttons. Insert Flash Text Met dit knopje kun je een Flash Text invoegen op de plaats waar je cursor staat. Als je een eenvoudig grafisch vormgegeven tekstje wil met je eigen lettertype in een flashfilmpje kun je deze optie goed gebruiken. In het scherm wat je als eerste te zien krijgt kun je alles instellen (font, grootte, kleur, link, enz.) Andere mogelijkheden om een Flash Text in te voegen: Insert -> Interactive Images -> Flash Text. Insert Shockwave Pagina 4 van 16

5 Insert Shockwave Met dit knopje kun je een Shockwave Movie invoegen op de plaats waar je cursor staat. Shockwave kun je gebruiken voor interactieve dingen (zoals spelletjes en kleine programmaatjes) Sneltoets: Ctrl + Alt + D Andere mogelijkheden om Shockwave in te voegen: Insert -> Media -> Shockwave. - open je Assets panel (F11) en sleep je Shockwave movie naar de plaats waar je wil, of klik erop en de flashfilm verschijnt op de plaats waar je cursor staat. Insert Generator Met dit knopje kun je een Macromedia Generator file invoegen op de plaats waar je cursor staat. Een Generator file is een flash-file met dynamische content die gestuurd wordt door een webserver met Generator software. Andere mogelijkheden om Generator in te voegen: Insert -> Media -> Generator. - open je Assets panel (F11) en sleep je Generator file naar de plaats waar je wil, of klik erop en de flashfilm verschijnt op de plaats waar je cursor staat. Deze tutorial is gemaakt door Pascal Vleugels Voor vragen kan je Pascal Vleugels mailen of een topic openen op het forum. Klik hier om te zoeken naar meer tutorials van Pascal Vleugels. Deze tutorial wordt mede mogelijk gemaakt door "Maus Software". Het Werkgebied Als je in een document in Dreamweaver aan het werken bent, heb je de beschikking over een groot aantal paletjes. Deze kun je allemaal aan-en uitschakelen bij Window. Allereerst heb je je documentvenster: Pagina 5 van 16

6 Je kunt dit venster op 3 verschillende manieren weergeven: Show Code View: Je pagina zal nu veranderen in een text-editor met color-coding! (je kunt ookop F10 drukken om een popupscherm met je code te krijgen) Show Code and Design View: Je pagina wordt nu in tweeën gesplitst, het bovenste gedeelte is nu je text-editor en het onderste gedeelte is je layoutview. Show Design View: Dit is de standaardinstelling van Dreamweaver. Je kunt nu alle grafische dingen zien die je op je pagina maakt. In de Toolbar van je Documentvenster vind je nog een aantal knopjes: File Management Hiermee kun je het up-en downloaden van bestanden rechtstreeks mee regelen. Preview/Debug in Browser Bekijk je site in je primaire of secundaire browser om te kijken hoe de site er in een bladeraar eruitziet. Refresh Ververs je pagina om eventuele veranderingen in je code zichtbaar te maken. Reference Dit opent een handleiding waar je meer informatie kan vinden over tags en codes in html, css of javascript. Code Navigation Deze optie is alleen beschikbaar als je in Code View werkt. Je kunt er snelle debug-opdrachten mee uitvoeren. View Options Je kunt verschillende visuele elementen van je Design View aan-en uitzetten zoals: Table Borders, Layer Border, Frame Borders, Image Maps en Invisible Elements. Verder zijn hier de linealen en het grid aan te zetten. Rechtsonderin je document venster vind je een kleine controlbalk (MiniLauncher). Hier staan een aantal knoppen waarmee je snel paletjes op kunt roepen: Show Site Deze knop opent het Site-Management venster waarin je je documentstructuur kunt bekijken. Hier kun je tevens nieuwe Folders aanmaken, nieuwe hml-documenten maken en evntueel verplaatsen en uploaden. Show Assets Het Assetwindow is een soort library ala Flash waarin al je images, flashfilms, films, scripts, Pagina 6 van 16

7 Het Assetwindow is een soort library ala Flash waarin al je images, flashfilms, films, scripts, templates en kleuren in kan zetten en snel kan aanroepen voor je site. Show HTML Styles In het HTML Syles window kun je stijlen aanmaken voor je texten. Je slaat ze op onder een bepaalde naam en kunt ze met één druk op de knop aanroepen. Show CSS Styles Creëer zelf CSS stylesheets in Dreamweaver. Show Behaviours Er zitten een aantal standaard Behaviours (handelingen) in Dreamweaver. Deze zijn afhankelijk van de browser aan te roepen met een Mousefunction. Show History Heb je een foutje gemaakt? Ga in de History om je fout ongedaan te maken. Show Code Inspector Deze knop opent een popupvenster waarin de code van je pagina weer wordt gegeven. Character In deze tutorial vind je een beschrijving van alle functies in je Character-palet. Klik op een tool om te kijken wat het inhoudt Insert Line Break Pagina 7 van 16

8 Plaatst een linebreak op de plaats waar je cursor staat. Deze functie is ook wel bekend als een "zachte" return. Shift + Enter geeft hetzelfde resultaat ( ) Insert Non-breaking space Plaats een Non-breaking space op de plaats waar je cursor staat. Een Non-breaking space is eigenlijk hetzelfde als een spatie, maar omdat meerdere spaties achter elkaar in html niet tellen, wordt deze weergegeven als Insert Copyright Plaatst een Copyright teken op de plaats waar je cursor staat. ( ) ( ) Insert Registered Trademark Plaatst een Registered Trademark teken op de plaats waar je cursor staat. ( ) ( ) Insert Trademark Plaatst een Trademark teken op de plaats waar je cursor staat. ( ) ( ) Insert Pound Plaatst een Engels Pond teken (valuta) op de plaats waar je cursor staat. ( ) ( ) Insert Yen Plaatst een Chinese Yen teken (valuta) op de plaats waar je cursor staat. ( ) ( ) Insert Euro Plaatst een Euro teken (valuta) op de plaats waar je cursor staat. ( ) ( ) Insert Left Quote Plaatst een aanhalingsteken openen op de plaats waar je cursor staat. ( ) ( ) Pagina 8 van 16

9 Insert Right Quote Plaatst een aanhalingsteken sluiten op de plaats waar je cursor staat. ( ) ( ) Insert Em-Dash Plaatst een lang horizontaal streepje op de plaats waar je cursor staat. ( ) ( ) Insert Other Character Als je op dit symbooltje klikt, dan verschijnt er een nieuw palet waar je meerdere symbole kan kiezen: In het Insert-veldje zal de HTML-code komen te staan en als je op OK drukt, zal het teken verschijnen op de plaats waar je cursor staat Tabellen Met dit knopje kun je een table invoegen op de plaats waar je cursor staat. Een table kun je gebruiken voor het positioneren van bijvoorbeelding plaatjes en/of tekst. Sneltoets: Ctrl + Alt + T Andere mogelijkheden om een table in te voegen: - Insert -> Table Allereerst krijg je een venster te zien waar je een aantal dingen in moet vullen: Rows: horizontale rijen Columns: verticale kolommen Pagina 9 van 16

10 Cell Padding: De marge in de cellen Cell Spacing: De marge tussen de cellen Width: De breedte van de table Border: De rand om de table Als je nu op OK klikt, dan zal je table op het beeld verschijnen. Je kunt hem nu nog verder gaan bewerken. Allereerst gaan we de verschillende manieren waarop we een table kunnen selecteren bekijken: 1) Gehele tabel selecteren: Klik in de meest linkerbovenhoek tot je een verplaatssymbool krijgt ([img] border="0" >) of klik op de rechter of onderrand tot je het volgende symbool krijgt ( ) [img width="200" height="38"] border="0" > 2) Selecteer Rijen of Kolommen Houd je muis aan de linkerkant of aan de bovenkant van je table, totdat je een zwarte pijl ziet verschijnen. 3) Selecteer Cellen Klik in een cel en sleep naar de cellen die je ook wil selecteren. Klik in een cel, druk Shift in en klik op een andere cel Druk eerst Ctrl in en klik dan op de cellen die je erbij wil selecteren De Properties van de gehele table: Table Name: Vul hier een unieke naam voor de Table in Align: Hoe wil je de tabel op de pagina laten lijnen? (links, gecentreerd of rechts) Border: De rand die om de Table zit (wordt meestal weergegeven als een 3d border) Bg Color: De achtergrondkleur van de gehele Table (kies de kleur door op het kleurvlakje te klikken) Brdr Color: De kleur van de rand om de gehele Table (kies de kleur door op het kleurvlakje te klikken) Bg Image: Stel een plaatje in dat je wilt gebruiken als achtergrond van de Table Clear Row Heights: Gebruik deze knop om alle waardes uit de rijen te halen Clear Column Heights: Gebruik deze knop om alle waardes uit de kolommen te halen Convert Table Widths to Pixels: Gebruik deze knop om de waarde in procenten om te zetten in pixelmaten Convert Table Widths to Percent: Gebruik deze knop om de waarde in pixels om te zetten in een percentage van het browserscherm Pagina 10 van 16

11 een percentage van het browserscherm De Properties van de cellen: Cell (properties die je aan een specifieke cell mee kan geven): Merges selected using spans: Selecteer 2 cells om ze samen te voegen tot 1 Splits cell into row or columns: Selecteer 1 cell om hem te splisten in Kolom(men) of Rij(en) Horz: Lijn de inhoud van de cel horziontaal uit Vert: Lijn de inhoud van de cel verticaal uit W: Bepaal de breedte van een cell H: Bepaal de hoogte van een cell No Wrap: Deze functie zorgt ervoor dat de tekst afgebroken wordt, zodat de maten van de table gehandhaafd blijven. Vink je deze functie aan, dan wordt de tekst dus NIET afgebroken. Header: De Header-functie zorgt ervoor dat de (tekst)inhoud van de cell wordt weergegeven als Header. De vormgeving is standaard Bold en gecentreerd. Bg: Stel een plaatje in dat je wilt gebruiken als achtergrond van de cell Bg: De achtergrondkleur van de cell (kies de kleur door op het kleurvlakje te klikken) Brdr: De kleur van de rand om de cell (kies de kleur door op het kleurvlakje te klikken) Imagemaps Stel je hebt een plaatje gemaakt, maar daar wil je een knop in hebben. Nu kun je moeilijk gaan doen en alles opknippen, zodat alles losse plaatjes worden, maar je kun ook een zogenaamde Imagemap maken. Je definiëerd dan een gedeelte van je plaatje als aanklikbaar gedeelte (Hotspot). In Dreamweaver kun je deze ImageMaps heel makkelijk maken. Open je Properties venster (Ctrl + F3) en klik op het plaatje waar je een Imagemap op wil maken, je krijgt dan het volgende venster te zien: Met de volgende knoppen kun je dan je Hotspots op je Imagemap gaan maken: Rectangular Hotspot Tool: Klik en sleep op je plaatje en er onstaat een blauwige rechthoek. Als je nu met de Pointer Hotspot Tool je Hotspot selecteerd kun je een aantal functies invoeren: Map: Hier kun je je Imagemap een unieke naam geven, voor als je meerdere Imagemaps in 1 Pagina 11 van 16

12 Map: Hier kun je je Imagemap een unieke naam geven, voor als je meerdere Imagemaps in 1 pagina gebruikt. (een plaatje kan maar 1 Imagemap hebben, maar deze kan wel weer meerdere Hotspots bevatten) Link: Vul hier de url in waar de knop (Hotspot) naartoe moet linken. Target: Kies hier het targetframe waar de link heen moet gaan Alt: geef hier een tekst die je te zien krijgt als je met de muis op de knop gaat staan (soort tooltip) Oval Hotspot Tool: Klik en sleep op je plaatje en er onstaat een blauwige cirkel. De verdere functies zijn dezelfde als bij de Rectangular Hotspot. Polygon Hotspot Tool Klik hier op je plaatje en maak meerhoekige Hotspots door verder te klikken binnen je plaatje. De verdere functies zijn dezelfde als bij de Rectangular Hotspot. Pointer Hotspot Tool Met deze pijl kun je een bepaalde Hotspot in je Imagemap selecteren om hem te verplaatsen of te verwijderen. Houd Shift ingedrukt om meerdere Hotspots te selecteren. Hieronder zie je een voorbeeld van een plaatje met een Imagemap met Hotspots. De code ziet er als volgt uit: Code: <img src="menu1.gif" width="350" height="30" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="179,4,228,26" href="#" alt="knop3" title="knop3"> <area shape="rect" coords="120,4,169,26" href="#" alt="knop2" title="knop2"> <area shape="rect" coords="64,4,113,26" href="#" alt="knop1" title="knop1"> </map> Open Browser Window Met deze behaviour kun je een popup-window maken in Dreamweaver. Het beste kun je als eerste je tekstje of een plaatje selecteren wat je wil gaan gebruiken als knop naar je popup-scherm. Vul dan in je Propertie-Inspector (Window -> Properties of Ctrl + F3) en vul bij Link het teken # in (dit zit bij de meeste toetsenborden boven de 3) Open daarna je Behaviours-Panel: Window -> Behaviours (of Shift + F3) Pagina 12 van 16

13 Als je nu op het Plusje linksbovenin het venster klik, komt er een lange lijst tevoorschijn met alle Behaviours in Dreamweaver. Kies nu Open Browser Window. Je kun nu een aantal dingen in gaan stellen: URL to Display: De link naar de pagina die in het popup-scherm te zien moet zijn Window Width: De Breedte van het scherm in pixels Window Height: De Hoogte van het scherm in pixels Attributes: Window Name: Een unieke naam voor je popup-scherm Vink je geen van de opties aan dan zul je een scherm krijgen met alleen de blauwe titelbalk en kun je het scherm niet resizen. Als je nu je pagina bekijkt in je Browser (F12) zul je zien dat je je eigen popup-scherm hebt gemaakt! de code in de -tag: Code: <script language="javascript"> > </script> Pagina 13 van 16

14 </script> De code van de link zelf in de <BODY>tag: Code: <a href="#" onclick="mm_openbrwindow<> ('popup.html','popupscherm','width=400,height=200')"> link </a> Form Objecten Insert Form Met dit knopje kun je een formulier invoegen op de plaats waar je cursor staat. Kies ook: Insert -> Form Insert Text Field Voeg een textfield in op de plaats van je cursor. Kies ook: Insert -> Form Objects -> Text Field Kies evt. voor hoeveel karakters het veld lang mag zijn, of hoeveel tekens het mag bevatten. Voorbeeld: Insert Button Pagina 14 van 16

15 Insert Button Plaats een button die standaard het formulier submit. Je kunt er hier ook voor kiezen om de Name en Value te veanderen of om het formulier te resetten. Kies ook: Insert -> Form Objects -> Button Voorbeeld: Submit Insert Checkbox Insert dmv. deze knop een checkbox in je formulier. Geef ook deze checkbox weer een Name en een Value mee. Je kunt er ook voor kiezen dat de checkbox al standaard is aangevinkt. Kies ook: Insert -> Form Objects -> Checkbox Voorbeeld: Insert Radio Button Voeg een Radio Button toe aan je formulier.geef ook deze Radio Button weer een Name en een Value mee. Je kunt er ook voor kiezen dat de Radio Button al standaard is ingevuld. Kies ook: Insert -> Form Objects -> Radio Button Voorbeeld: Insert List/Menu Plaats een List/Menu item in je formulier. De gebruiker kan dan uit verschillende opties om te kiezen. Kies ook: Insert -> Form Objects -> List/Menu Voorbeeld: item1 item2 item3 item4 item1 Insert File Field Met deze optie kun je een browse-field in je formulier invoegen, voor bijvoorbeeld een upload en/of mailattachment applicatie. Kies ook: Insert -> Form Objects -> File Field Voorbeeld: Kies bestand geen bestand geselecteerd Insert Image Field Maak je eigen grafische form-button met Insert Image Field. Voer bij ImageField de tekst Submit in, en dit wordt je button waarmee je je formulier kunt versturen. Kies ook: Insert -> Form Objects -> Insert Image Field Voorbeeld: Pagina 15 van 16

16 Insert Hidden Field Voer bepaalde waarden alvast in dmv van Hidden Fields. Je kunt deze waarden dan meesturen met het formulier. Geef de Hidden Field een unieke Name mee en een bepaalde Value. Kies ook: Insert -> Form Objects -> Insert Hidden Field Insert Jump Menu Maak een List/menu met een aantal opties waar een link aan vastzit. Als je de optie selecteerd, wordt automatisch de url geopend. Je kunt er ook voor kiezen om een GO-button erbij te zetten. Kies ook: Insert -> Form Objects -> Insert Jump Menu Voorbeeld: Frontpage Deze tutorial is gemaakt door Pascal Vleugels Pagina 16 van 16