Les 7: Dreamweaver 8

1. Les 7: Dreamweaver 8

2. Inhoudsoverzicht • Introductie • De interface • A-oefening 1 • Site management • Multimedia toevoegen • Templates

3. 1. Introductie • Wat is er nieuw of verbeterd in DW8? • We bekijken enkel de nieuwigheden op vlak van: 1.1 CSS 1.2 Design 1.3 Coding

4. 1.1 Cascading Style Sheets • NIEUW:Style Rendering Toolbar • Aan/uit-zetten CSS rendering van het huidige document. • Deze toolbar laat toe de CSS-media aan te passen: • desktop browsers • handheld devices • print • ...

5. 1.1 Cascading Style Sheets • NIEUW:Unified CSS Styles panel De All-mode: • Alle CSS gerelateerde functionaliteit in 1 panel !! • Het panel geeft de classes, ID’s, … van een specifieke style sheet weer. • Properties kunnen intuïtief worden toegevoegd door te klikken op de Add Property link.

6. 1.1 Cascading Style Sheets • NIEUW:Unified CSS Styles panel De Current-mode: • Toon de properties die momenteel door een specifiek element gebruikt worden. • Je hebt de mogelijkheid omwijzigingen aan te brengenaan de properties zolang jein de current selection mode bent.

7. 1.1 Cascading Style Sheets • VERBETERD: CSS/DIV visualisatie  Table-less web page design ! • DIV tags zijn krijgen een blauwe omkadering makkelijker te onderscheiden • Bij mouse-over:overzicht van de CSS properties die op de DIV blok zijn toegepast (positie, width, height, …)

8. 1.2 Design • VERBETERD!: Paste special • Edit menu > de Paste Special optie opent het Paste Special dialoog venster. • Gebruik de Paste Special optie om text te plakken als ”text only”, “text with structure”, “basic structure”, of “full formatting”. Paragraph spacing “opruimen” (handig bij plakken vanuit MS Word)

9. 1.2 Design • NIEUW!: Zoom tool • Geïntegreerd in de Document window status bar. • Makkelijker om details te inspecteren in afbeeldingen, pagina’s ontwerpen met kleine fontgrootte ,…

10. 1.2 Design • NIEUW: Guides (TIP: handig bij tableless design !!) • Sleep guides in het Document window door te klikken op een ruler, muisknop ingedrukt houden en verplaatsen naar gewenste positie. Exact positioneren dmv toolttip text of door dubbelklikken op de guide…  Move Guide dialog box

11. 1.2 Design • Flash Video en FlashPaper ondersteuning: • VROEGER: $99 voor extensie die webontwikkelaar toeliet Flash Video te embedden in Dreamweaver. • NU :GRATIS !!! • Hoe? • Insert  Media  Flash Video

12. 1.2 Design

13. 1.2 Design • Aanpasbaar: • Type van video: progressive versus streaming • URL van het FLV (Flash video) bestand • Het type skin die zal gebruikt worden bij de video. • … • Wanneer video file is toegevoegd: • Property inspector geeft een unieke set aan opties weer om de Flash video file te manipuleren ! • Idem: FlashPaper files • Insert  Media  FlashPaper • Laat toe om Flashpaper document te openen en toe te voegen aan de webpagina. (cfr: Adobe PDF formaat)

14. 1.3 Coding • NIEUW: Coding Toolbar: • Een bestaand document openen • Uitklappen en samenklappen van code (zie verder) • Selecteren van de parent tag • Selecteren van code binnen haken (handig bij scripten) • Lijnnummers weergeven, invalid xHTML aanduiden • Commentaar toevoegen of verwijderen

15. 1.3 Coding TIP: Rechts klikken in code view !  Selection submenu

16. 1.3 Coding • NIEUW: Code collapse • Laat je toe om code snel en tijdelijk bepaalde codete verbergen.

17. 2. De Interface • Enkele interessante onderdelen van de workspace 2.1 De workspace layout 2.2 Het Document window 2.3 De Document toolbar 2.4 De Statusbar 2.5 De Insertbar 2.6 De Coding toolbar 2.7 De Property inspector 2.8 Panelen

18. 2.1 De workspace layout

19. 2.2 Het Document window • Toont het huidige document. Je kan volgende views kiezen: • Design view • Code view • Design & code view

20. 2.3 De Document toolbar

21. 2.4 De status bar • Downloadsnelheid kan ingesteld worden bij Preferences  Status Bar  Connection Speed (best 56k)

22. 2.5 De insert bar • Tabbed weergegeven: • Gewone weergave: • Dit kan je veranderen door rechts te klikken op de insert bar  Show as …

23. 2.6 De Coding toolbar • Zie vroeger.

24. 2.7 De Property inspector • Window > Properties

25. 2.7 De property inspector • 4 elementen zijn meestal aanwezig in de Property Inspector : • Element Icon: Elk aanpasbaar xHTML element heeft zijn eigen icoon. • Quick Help: De DW help opent met het huidige element als indexpagina. • Quick Tag Editor: idem als rechtsklikken op een tag in de tag selector  Edit tag. • Collapsible Arrow: Je kan de basis en of advanced properties samenklappen door op dit icoon te klikken

26. 2.8 Panelen Docked in panelgroup Undocked CSS panelgroup

27. 2.8 Panelen • Panel groups = verzameling panelsDe panels verschijnen als een tabs. • Een panelgroup kan uitgeklapt of samengeklapt zijn en kan docked of undocked worden weergegeven • Je kan panels undocken door het panel te slepen uit de panel groep. Klik op het icoontje links van de tekst in de blauwe menubar, houd de muis ingedrukt en sleep naar nieuwe locatie.

28. 2.8 Panelen • Elk panel bevat een panel options menu die alle advanced features bevat die gerelateerd zijn aan het specifiek paneel. Klik op .

29. 2.8 Panelen • Help: Opent de DW help met het huidige panel als indexpagina. • Group <Panel Name> with: Een panel associeren met een panel groep. • Close <Panel Name> • Rename Panel Group • Maximize Panel Group: vergroot de panelgroup zodat het de volledige verticale ruimte gebruikt. De andere panels worden automatisch geminimaliseerd. (shortcut:dubbelklik op titelbar) • Close Panel Group

30. 2.8 Panelen • Eigen workspace layout opslaan: • Organiseer en plaats de panels in DW zoals jij graag werkt. • Window > Workspace Layout >Save Current • De nieuwe layout verschijnt in het Workspace Layout submenu.

31. 3. A-Oefening1 • Doel: • Eenvoudige website bouwen met DW • Pagina-eigenschappen aanpassen. • Werken met tekst. • Werken met images. • Werken met hyperlinks. • Bronbestanden in de map bronmateriaal

32. A-Oefening1 op tijd: 15 minuten

33. STAP 1: Nieuw document aanmaken • Maak nieuw document aan en bewaar het in je folder als index.htm • WAAROM ? De meeste web hosting providers accepteren default bestanden met de naam index.htm. Als je uw startpagina zo noemt dan ben ze zeker dat je niet www.jouwdomein.com/mijnpagina.htm moet typen maar dat je de URL kan limiteren tot www.jouwdomein.com • Pagina eigenschappen aanpassen: Property inspector  page properties.(TIP: CTRL+J).

34. STAP 1: Nieuw document aanmaken • Page properties  Appearance

35. STAP 1: Nieuw document aanmaken • Page properties  Links

36. STAP 1: Nieuw document aanmaken • Page properties Title/encoding

37. STAP 2: Content invoegen • 3 manieren: • Kopiëren en plakken uit welcome.txt • Kopiëren en plakken speciaal uit welcome.doc • Textbestand slepen in DW. • Test deze drie manieren en plaats de inhoud zonder opmaak in jouw document. (SHIFT+ENTER voor line break)

38. STAP 2: Content invoegen

39. STAP 3: Text opmaken • Via property inspector maak je tekst op:

40. STAP 3: Text opmaken • Je MOET de spelling nakijken via Text  Check spelling.

41. STAP 4: Image invoegen • Insert  Image : ingevoegd op plaats van cursor.

42. STAP 4: Image invoegen • Alternate tekst invullen:

43. STAP 4: Image invoegen • Voeg de volgende images toe: • subheader_about.gif, subheader_companyevents.gif

44. STAP 4: Image invoegen • Images opmaken via Property inspector:

45. STAP 4: Image invoegen • Maak de intranetsymbolism.gif image op zo dat het resultaat als volgt is:

46. STAP 4: Image invoegen

47. STAP 5: Hyperlinks invoegen • Typ “Visit our Parent Company” onder de header. • METHODE 1: Property inspector >Link : http://www.modulemedia.com

48. STAP 5: Hyperlinks invoegen • Target kan aangepast worden naar _blank om de link in een nieuw browser venster te openen. Hiervoor MOET je de transitional DTD gebruiken • BETERE METHODE:Insert > Hyperlink

49. STAP 5: Hyperlinks invoegen • Mailto links toevoegen: • In link text box van Property Inspector:mailto:test@provider.ext?subject=Questionaboutthesite&CC=ideas@modulemedia.com.

50. STAP 5: Hyperlinks invoegen • Ook images kunnen een link meekrijgen. • Methode is idem als text-links. Je kan in de Property inspector van de image de text-box LINK gewoon invullen !