Les 7: Dreamweaver 8.

Presentatie over: "Les 7: Dreamweaver 8."— Transcript van de presentatie:

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 om wijzigingen aan te brengen aan de properties zolang je in 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 Paragraph spacing “opruimen” (handig bij plakken vanuit MS Word)
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: Wanneer video file is toegevoegd:
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 code te verbergen.

17 2. De Interface 2.1 De workspace layout 2.2 Het Document window
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 Undocked CSS panelgroup
2.8 Panelen Docked in panelgroup Undocked CSS panelgroup

27 2.8 Panelen Panel groups = verzameling panels De 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: Bronbestanden in de map bronmateriaal
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 moet typen maar dat je de URL kan limiteren tot 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 :

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:

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 !

51 STAP 5: Hyperlinks invoegen
Image maps aanmaken: 1. Vervangen van de header.gif met header_withnav.gif. Selecteer de image header.gif. Sleep vanuit het icoontje (rechts van de src text box in PI) naar de file header_withnav.gif in het site Files panel.

52 STAP 5: Hyperlinks invoegen

53 STAP 5: Hyperlinks invoegen
2. Selecteer de nieuwe afbeelding en bekijk de hotspot mogelijkheden van de Property inspector.

54 STAP 5: Hyperlinks invoegen
3. Teken een hotspot over de HOME tekst in de afbeelding:  Je kan nu opnieuw via het point to file mechanisme de link laten verwijzen naar index.htm. Ook de alt tekst en target kan je specificeren.

55 STAP 5: Hyperlinks invoegen
Named anchors : Open het bestand companydirectory_start.htm. We zullen anchors toevoegen in dit bestand. Plaats cursor naast de eerste naam:ADA en open INSERT > Named anchor.

56 STAP 5: Hyperlinks invoegen
Selecteer de tekst en vul in het Link tekstvenster #Ada in.

57 STAP 5: Hyperlinks invoegen
Nu willen we nog een link naar boven toevoegen per medewerke. Typ de tekst “back to top”naast elke naam: Selecteer de tekst en in de link text box plaatsen we het symbool “#”. Hierdoor zal de link naar de begin van de pagina verwijzen.

58 STAP 6: Valideer VALIDEER DE PAGINA! Los alle fouten op.

59 4. Site Management 4.1 Een nieuwe Site definiëren in DW
4.2 Het Files Panel 4.3 Link validation

60 4.1 Een nieuwe Site definiëren in DW
Zeer belangrijk: Een nette manier om content en assets te organiseren. Je site wordt gecached door DW ( integriteit van de links blijft bewaart !) Er is een built-in FTP client. Getting & putting van files ! …

61 4.1 Een nieuwe Site definiëren in DW
Manage sites dialoog venster Site  Manage sites We kiezen NEW > Site

62 4.1 Een nieuwe Site definiëren in DW
Het Site Definition window verschijnt en biedt een wizard aan die je door het process leidt om een nieuwe site aan te maken. We zetten de verschillende stappen even op een rijtje:

63 4.1 Een nieuwe Site definiëren in DW

64 4.1 Een nieuwe Site definiëren in DW

65 4.1 Een nieuwe Site definiëren in DW

66 4.1 Een nieuwe Site definiëren in DW

67 4.1 Een nieuwe Site definiëren in DW

68 4.1 Een nieuwe Site definiëren in DW
De nieuwe site is nu aangemaakt: Klik op de DONE knop om het dialoogvenster af te sluiten en te starten met werken binnen de nieuw aangemaakte site.

69 4.1 Een nieuwe Site definiëren in DW
De advanced instellingen: Local Info Remote Info Testing Server Cloaking Design Notes Site Map Layout File View Columns Contribute

70 4.1 Een nieuwe Site definiëren in DW
Local en remote info: default images folder, automatische refresh, FTP eigenschappen,… De Cloaking Category: laat je toe om mappen en bestanden uit te sluiten van specifieke DW operaties zoals bvb site synchronisatie, get en put, find and replace, … Deze category voorziet ook in cloaking die enkel van toepassing is op bestanden met specifieke extensies. (Voorbeeld: bestanden met extensie .psd moeten niet op de server belanden maar enkel op de lokale machine, enkel de geoptimaliseerde JPG moet op de webserver.)

71 4.1 Een nieuwe Site definiëren in DW

72 4.2 Het files panel Het Files panel bevat heel wat verschillende onderdelen voor het werken met een gedefinieerde site:

73 4.2 Het files panel File menu: toont een lijst van schijven, mappen, bestanden en gedefinieerde sites. View menu: gebruik het View menu om te kiezen tussen Local, Remote, testing server en sit map views. Connect: connecteren naar de remote of test-server. Refresh Get/Put: Laat toe om snel bestanden te uploaden en downloaden van en naar de remote of test-server …

74 4.2 Het files panel Meer opties beschikbaar in files panel wanneer er gedrukt wordt op expand button.

75 4.3 Link validation Dreamweaver detecteert dat een bestand is verplaatst naar een nieuwe map en vraagt onmiddellijk of alle referenties (links) naar en van dit bestand moeten aangepast worden.

76 5. Multimedia toevoegen 5.1 Streaming versus Progressive Video
5.2 Media Players 5.3 Video in je Web Pagina toevoegen 5.4 Audio in je webpagina toevoegen

77 5.1 Streaming versus Progressive Video
Direct download: Via link aanbieden van video die men volledig kan opslaan op de harde schijf (download). Weinig bescherming tegen ongeoorloofde verspreiding van de videofile. Progressive download: Progressive download video files laten de gebruiker toe te beginnen kijken naar de video alvorens het volledig is gedownloaded. Pseudo streaming.(geen streaming server nodig) Streaming: Er wordt een deel gebuffered alvorens de gebruiker kan beginnen kijken naar de video. Er kunnen heel wat opties worden ingesteld (buffertijden, opslaan mogelijk of niet,…) + heel snel bekijkbaar ! Bewegen in tijdslijn van de movie (terugspoelen…) niet mogelijk !

78 5.1 Progressive vs streaming
Wanneer/wat gebruiken?

79 5.2 Media players Media players: RealMedia: QuickTime:
RealPlayer ( ) Helix Producer ( ) Helix Server and Helix Proxy ( ) QuickTime: QuickTime Player ( ) QuickTime Player Pro ( ) QuickTime Streaming Server ( )

80 5.2 Media players Media players vervolg: Windows Media : Flash Video
Windows Media Player: ( Windows Media Server: ( Flash Video Flash player ( Macromedia Flash 8

81 5.3 Video toevoegen in webpagina
Consistente interface bij players:

82 5.3 Video toevoegen in webpagina
Video linken: Maak een kopie van de indexpagina uit A- Oefening1. Hernoem het bestand naar A-Oefening2.htm Voeg de tekst uit linkingVideo.txt toe en maak op als volgt:

83 5.3 Video toevoegen in webpagina
Insert > Media > Plug-in Browse naar de surfing.mov videofile. selecteer het plug-in icoontje en stel W=320 en H=240 in de Properties Inspector. TEST DIT VOOR VERSCHILLENDE TYPES MEDIA !

84 5.3 Video toevoegen in webpagina
Invoegen FLASH video: Insert  Media  Flash Video Skin kiezen Auto detect afmetingen …

85 5.3 Video toevoegen in webpagina

86 5.4 Audio toevoegen in webpagina
Idem als video: Insert  Media  Plug-in. Voeg onder de video ook een audio fragment in. (ambient.mp3 of spitalfield.mp3) Beter: Audio afspelen via Flash Movie !

87 6. Werken met templates 6.1 Inleiding templates 6.2 Editable regions
6.3 Aanmaken van een template 6.4 Editable Regions toevoegen 6.5 Nieuwe pagina afleiden van template 6.6 Regions opvullen met data 6.7 Editable Tag Attribute 6.8 Editable attributes invullen 6.9 Repeating Regions aanmaken

88 6.1 Inleiding Stel volgende situatie: alle pagina’s zelfde opbouw maar wijzigingen moeten op alle pagina’s aangebracht worden (=veel werk !)

89 6.2 Editable regions Bedoeling is om “editable regions” te creeëren in de template. Wanneer nieuwe pagina’s worden geinstantieerd van de MASTER template kunnen enkel de bewerkbare gebieden effectief bewerkt/aangepast worden. Op deze manier ben je zeker dat er niemand je ontwerp of structuur van de site verkeerd gebruikt. Er zijn 3 soorten “regions” binnen DW 8.

90 6.2 Editable regions

91 6.2 Editable regions Optional region:
Het is niet verplicht om content in deze regio aan te brengen Editable region: Wijzigingen kunnen overal worden aangebracht in dit gebied, inclusief wijzigingen aan de tags of attributen van de tags binnen deze region. Repeating region: bijvoorbeeld, toevoegen van tables in de region. De gebruiker kan dan een variabele-lengte region aanmaken.

92 6.3 Aanmaken van een template
Open template_start.htm Sla het op als DW template:FILE > save as template.

93 6.3 Aanmaken van een template
Links worden geupdate en mapje templates wordt aangemaakt: *.dwt

94 6.4 Editable Regions toevoegen
Plaats de cursor in de eerste cel van de content tabel en kies Insert > Template Objects > Editable Region ( Ctrl+Alt+V). Neem “Main Subheading” bvb als naam. DW zet automatisch reeds text in de region, die je ook kan aanpassen. (VB beschrijf wat er moet geplaatst te worden in de region ). We willen hier telkens een image gebruiken als Main Subheading. Daarom zullen we een image placeholder invoegen. Om een image placeholder te plaatsen: Insert > Image Objects > Image placeholder. (breedte: 229; hoogte:27 en default kleur naar keuze.)

95 6.4 Editable Regions toevoegen
Voeg de volgende regions toe in de template: Een voor de “main content” die zich bevindt twee rijen onder de region die we net hebben aangemaakt. Een met een “image placeholder”, twee rijen boven de current events tabel.

96 6.5 Pagina afleiden van template
New > Templates

97 6.6 Regions opvullen met data
3 manieren mogelijk: Selecteer de editable region (content in de ER is HIGHLITEd). Je kan dan gewoon de content typen of image aanpassen. Plaats de cursor in the editable regions en selecteer de <mmtinstance:editable> tab in de Tag Selector. Kies de regio uit de lijst onderaan in het Modify > Templates submenu.

98 6.6 Regions opvullen met data
Verander de source van de image placeholders respectievelijk in header_engineering.gif en subheader_events.gif. (point to file techniek toepassen) Sleep ook het tekst engineeringcontent.txt file vanuit de Assets folder naar de Main content editable region. Het Insert Document dialoog venstertje verschijnt;Kies de “Insert the Contents and the Text Only “ opties. Bevestig met OK. Sla op als engineering.htm.

99 6.7 Editable Tag Attribute
Doel: gebruiker bepaalde attributen laten aanpassen (vb: bgColor van body). Hoe? We werken hiervoor met de *.DWT file!! Selecteer de juiste tag in de Tag Selector. Modify > Templates > Make Attribute Editable attribute: add BGCOLOR Label: BgColorAttribute Type: Color Default: #FFFFFF <body bgcolor=

100 6.8 Editable attributes invullen
Nu werken we met de afgeleide pagina van de template.(engineering.htm ) Modify > Template Properties

101 6.9 Repeating Regions aanmaken
Selecteer de eerste rij in de Events tabel; plaats de cursor in 1 van de cellen van de desbetreffende rij en klik de <tr> tag in de Tag Selector. Insert > Template Objects >Repeating Region Gebruik als naam “EventItems.” Insert > Template Objects> Editable Region voor elke cel in de rij (resp. namen: UpcomingEvent, TimeDate, en Location )

102 6.9 Repeating Regions aanmaken
Opslaan. Resultaat: Eenvoudig rijen bij te maken Editable regions

103 Einde les 7