De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 7: Dreamweaver 8.

Verwante presentaties


Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 7: Dreamweaver 8."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 7: Dreamweaver 8

2 Webtechnologie Labo 1 2 Inhoudsoverzicht 1. Introductie Introductie 2. De interface De interface 3. A-oefening 1 A-oefening 1 4. Site management Site management 5. Multimedia toevoegen Multimedia toevoegen 6. Templates Templates

3 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Design

13 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Coding TIP: Rechts klikken in code view !  Selection submenu

16 Webtechnologie Labo Coding NIEUW: Code collapse Laat je toe om code snel en tijdelijk bepaalde code te verbergen.

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

18 Webtechnologie Labo De workspace layout

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

20 Webtechnologie Labo De Document toolbar

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

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

23 Webtechnologie Labo De Coding toolbar Zie vroeger.

24 Webtechnologie Labo De Property inspector Window > Properties

25 Webtechnologie Labo 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 Webtechnologie Labo Panelen Docked in panelgrou p Undocked CSS panelgroup

27 Webtechnologie Labo 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 Webtechnologie Labo Panelen Elk panel bevat een panel options menu die alle advanced features bevat die gerelateerd zijn aan het specifiek paneel. Klik op.

29 Webtechnologie Labo Panelen Help: Opent de DW help met het huidige panel als indexpagina. Group with: Een panel associeren met een panel groep. Close 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 1 32 A-Oefening1 op tijd: 15 minuten

33 Webtechnologie Labo 1 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 Webtechnologie Labo 1 34 STAP 1: Nieuw document aanmaken Page properties  Appearance

35 Webtechnologie Labo 1 35 Page properties  Links STAP 1: Nieuw document aanmaken

36 Webtechnologie Labo 1 36 Page properties  Title/encoding STAP 1: Nieuw document aanmaken

37 Webtechnologie Labo 1 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 Webtechnologie Labo 1 38 STAP 2: Content invoegen

39 Webtechnologie Labo 1 39 STAP 3: Text opmaken Via property inspector maak je tekst op:

40 Webtechnologie Labo 1 40 STAP 3: Text opmaken Je MOET de spelling nakijken via Text  Check spelling.

41 Webtechnologie Labo 1 41 STAP 4: Image invoegen Insert  Image : ingevoegd op plaats van cursor.

42 Webtechnologie Labo 1 42 STAP 4: Image invoegen Alternate tekst invullen:

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

44 Webtechnologie Labo 1 44 STAP 4: Image invoegen Images opmaken via Property inspector:

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

46 Webtechnologie Labo 1 46 STAP 4: Image invoegen

47 Webtechnologie Labo 1 47 STAP 5: Hyperlinks invoegen Typ “Visit our Parent Company” onder de header. METHODE 1: Property inspector >Link :

48 Webtechnologie Labo 1 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 Webtechnologie Labo 1 49 STAP 5: Hyperlinks invoegen Mailto links toevoegen: In link text box van Property Inspector: om.

50 Webtechnologie Labo 1 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 Webtechnologie Labo 1 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 Webtechnologie Labo 1 52 STAP 5: Hyperlinks invoegen

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

54 Webtechnologie Labo 1 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 Webtechnologie Labo 1 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 Webtechnologie Labo 1 56 STAP 5: Hyperlinks invoegen Selecteer de tekst en vul in het Link tekstvenster #Ada in.

57 Webtechnologie Labo 1 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 Webtechnologie Labo 1 58 STAP 6: Valideer VALIDEER DE PAGINA! Los alle fouten op.

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

60 Webtechnologie Labo 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 Webtechnologie Labo 1 61 Manage sites dialoog venster Site  Manage sites We kiezen NEW > Site 4.1 Een nieuwe Site definiëren in DW

62 Webtechnologie Labo 1 62 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: 4.1 Een nieuwe Site definiëren in DW

63 Webtechnologie Labo Een nieuwe Site definiëren in DW

64 Webtechnologie Labo Een nieuwe Site definiëren in DW

65 Webtechnologie Labo Een nieuwe Site definiëren in DW

66 Webtechnologie Labo Een nieuwe Site definiëren in DW

67 Webtechnologie Labo Een nieuwe Site definiëren in DW

68 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Een nieuwe Site definiëren in DW

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

73 Webtechnologie Labo 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 Webtechnologie Labo Het files panel Meer opties beschikbaar in files panel wanneer er gedrukt wordt op expand button.

75 Webtechnologie Labo 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 Webtechnologie Labo Multimedia toevoegen 5.1Streaming versus Progressive Video 5.2Media Players 5.3Video in je Web Pagina toevoegen 5.4Audio in je webpagina toevoegen

77 Webtechnologie Labo 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 Webtechnologie Labo Progressive vs streaming Wanneer/wat gebruiken?

79 Webtechnologie Labo Media players Media players: RealMedia: RealPlayer (http://www.real.com. )http://www.real.com Helix Producer (http://www.realnetworks.com/products/producer. )http://www.realnetworks.com/products/producer Helix Server and Helix Proxy (http://www.realnetworks.com/products/media_delivery.html. )http://www.realnetworks.com/products/media_delivery.html QuickTime: QuickTime Player (http://www.apple.com/quicktime )http://www.apple.com/quicktime QuickTime Player Pro (http://www.apple.com/quicktime/buy )http://www.apple.com/quicktime/buy QuickTime Streaming Server (http://www.apple.com/quicktime/products/qtss. )http://www.apple.com/quicktime/products/qtss

80 Webtechnologie Labo Media players Media players vervolg: Windows Media : Windows Media Player: (http://www.windowsmedia.com)http://www.windowsmedia.com Windows Media Server: (http://www.microsoft.com/windows/windowsmedia/9series/serv er.aspx)http://www.microsoft.com/windows/windowsmedia/9series/serv er.aspx Flash Video Flash player (http://www.macromedia.com/go/getflashplayer)http://www.macromedia.com/go/getflashplayer Macromedia Flash 8

81 Webtechnologie Labo Video toevoegen in webpagina Consistente interface bij players:

82 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Video toevoegen in webpagina Invoegen FLASH video: Insert  Media  Flash Video Skin kiezen Auto detect afmetingen …

85 Webtechnologie Labo Video toevoegen in webpagina

86 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Inleiding Stel volgende situatie: alle pagina’s zelfde opbouw maar wijzigingen moeten op alle pagina’s aangebracht worden (=veel werk !)

89 Webtechnologie Labo 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 Webtechnologie Labo Editable regions

91 Webtechnologie Labo 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 Webtechnologie Labo Aanmaken van een template Open template_start.htm Sla het op als DW template:FILE > save as template.

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

94 Webtechnologie Labo 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 Webtechnologie Labo 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 Webtechnologie Labo Pagina afleiden van template New > Templates

97 Webtechnologie Labo 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 tab in de Tag Selector. Kies de regio uit de lijst onderaan in het Modify > Templates submenu.

98 Webtechnologie Labo 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 Webtechnologie Labo 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

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

101 Webtechnologie Labo 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 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 Webtechnologie Labo Repeating Regions aanmaken Opslaan. Resultaat: Editable regions Eenvoudig rijen bij te maken

103 Webtechnologie Labo Einde les 7


Download ppt "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 7: Dreamweaver 8."

Verwante presentaties


Ads door Google