1 / 103

Les 7: Dreamweaver 8

Les 7: Dreamweaver 8. Inhoudsoverzicht. Introductie De interface A-oefening 1 Site management Multimedia toevoegen Templates. 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.

abram
Télécharger la présentation

Les 7: Dreamweaver 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 !

More Related