Les 7: Dreamweaver 8

1

Webtechnologie 1 laboWebtechnologie 1 labo

Dieter RoobrouckDieter Roobrouck

Kristel BalcaenKristel Balcaen

Claudia EeckhoutClaudia Eeckhout

Koen De WeggheleireKoen De Weggheleire

Frederik DuchiFrederik Duchi

An DeraedtAn Deraedt

Les 7: Dreamweaver 8Les 7: Dreamweaver 8

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

2

Inhoudsoverzicht

1. Introductie2. De interface3. A-oefening 14. Site management 5. Multimedia toevoegen6. Templates

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

3

1. Introductie

Wat is er nieuw of verbeterd in DW8?

We bekijken enkel de nieuwigheden op vlak van:1.1 CSS1.2 Design1.3 Coding

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

4

1.1 Cascading Style Sheets

NIEUW: Style Rendering ToolbarAan/uit-zetten CSS rendering van het

huidige document.Deze toolbar laat toe de CSS-media

aan te passen: desktop browsershandheld devicesprint ...

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

5


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

6

1.1 Cascading Style SheetsNIEUW: 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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

7


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, …)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

8

1.2 Design

VERBETERD!: Paste specialEdit 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)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

9

1.2 Design

NIEUW!: Zoom toolGeïntegreerd in de Document window

status bar.Makkelijker om details te inspecteren

in afbeeldingen, pagina’s ontwerpen met kleine fontgrootte ,…

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

12

1.2 Design

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

15

1.3 Coding

TIP: Rechts klikken in code view ! Selection submenu

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

16

1.3 Coding

NIEUW: Code collapseLaat je toe om code snel en

tijdelijk bepaalde codete verbergen.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

17

Enkele interessante onderdelen van de workspace

2.1 De workspace layout2.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

2. De Interface

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

18

2.1 De workspace layout

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

19

2.2 Het Document window

Toont het huidige document. Je kan volgende views kiezen:Design view Code viewDesign & code view

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

20

2.3 De Document toolbar

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

21

2.4 De status bar

Downloadsnelheid kan ingesteld worden bij Preferences Status Bar Connection Speed (best 56k)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

22

2.5 De insert bar

Tabbed weergegeven:

Gewone weergave:

Dit kan je veranderen door rechts te klikken op de insert bar Show as …

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

23

2.6 De Coding toolbar

Zie vroeger.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

24

2.7 De Property inspector

Window > Properties

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

26

2.8 Panelen

Docked in

panelgrou

p

Undocked

CSS

panelgroup

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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 .

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

31

3. A-Oefening1

Doel: Eenvoudige website bouwen met DWPagina-eigenschappen aanpassen.Werken met tekst.Werken met images.Werken met hyperlinks.

Bronbestanden in de map bronmateriaal

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

32

A-Oefening1 op tijd: 15 minuten

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 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 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).

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

34


Page properties Appearance

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

35

Page properties Links


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

36

Page properties Title/encoding


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

37

STAP 2: Content invoegen

3 manieren:Kopiëren en plakken uit welcome.txtKopiëren en plakken speciaal uit

welcome.docTextbestand slepen in DW.

Test deze drie manieren en plaats de inhoud zonder opmaak in jouw document. (SHIFT+ENTER voor line break)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

38

STAP 2: Content invoegen

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

39

STAP 3: Text opmaken

Via property inspector maak je tekst op:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

40

STAP 3: Text opmaken

Je MOET de spelling nakijken via Text Check spelling.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

41

STAP 4: Image invoegen

Insert Image : ingevoegd op plaats van cursor.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

42


Alternate tekst invullen:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

43


Voeg de volgende images toe:subheader_about.gif,

subheader_companyevents.gif

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

44


Images opmaken via Property inspector:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

45


Maak de intranetsymbolism.gif image op zo dat het resultaat als volgt is:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

46


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

47

STAP 5: Hyperlinks invoegen

Typ “Visit our Parent Company” onder de header.

METHODE 1: Property inspector >Link : http://www.modulemedia.com

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

48


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

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

49


Mailto links toevoegen: In link text box van Property Inspector:

mailto:[email protected]?subject=Questionaboutthesite&[email protected].

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

50


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 !

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

51


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

52


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

53


2. Selecteer de nieuwe afbeelding en bekijk de hotspot mogelijkheden van de Property inspector.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

54


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

55


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

56


Selecteer de tekst en vul in het Link tekstvenster #Ada in.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

57


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

58

STAP 6: Valideer

VALIDEER DE PAGINA!Los alle fouten op.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

59

4. Site Management

4.1 Een nieuwe Site definiëren in DW4.2 Het Files Panel4.3 Link validation

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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 !

…

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

61

Manage sites dialoog vensterSite Manage sites

We kiezen NEW > Site


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 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:


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

63


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

64


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

65


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

66


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

67


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

68


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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

69


De advanced instellingen: Local Info

Remote Info

Testing Server

Cloaking

Design Notes

Site Map Layout

File View Columns

Contribute

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

70


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.)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

71


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

72

4.2 Het files panel Het Files panel bevat heel wat verschillende

onderdelen voor het werken met een gedefinieerde site:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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

…

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

74

4.2 Het files panel Meer opties beschikbaar in files panel wanneer er

gedrukt wordt op expand button.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

76

5. Multimedia toevoegen

5.1 Streaming versus Progressive Video

5.2 Media Players5.3 Video in je Web Pagina

toevoegen5.4 Audio in je webpagina

toevoegen

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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 !

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

78

5.1 Progressive vs streaming

Wanneer/wat gebruiken?

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

79

5.2 Media players

Media players:RealMedia:

RealPlayer (http://www.real.com. )Helix Producer (

http://www.realnetworks.com/products/producer. )Helix Server and Helix Proxy (

http://www.realnetworks.com/products/media_delivery.html. )

QuickTime:QuickTime Player (http://www.apple.com/quicktime

)QuickTime Player Pro (

http://www.apple.com/quicktime/buy )QuickTime Streaming Server (

http://www.apple.com/quicktime/products/qtss. )

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

80

5.2 Media players

Media players vervolg:Windows Media :

Windows Media Player: (http://www.windowsmedia.com)

Windows Media Server: (http://www.microsoft.com/windows/windowsmedia/9series/server.aspx)

Flash VideoFlash player (http://

www.macromedia.com/go/getflashplayer)

Macromedia Flash 8

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

81

5.3 Video toevoegen in webpagina

Consistente interface bij players:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

82


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:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

83


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 !

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

84


Invoegen FLASH video:

Insert Media Flash Video

Skin kiezenAuto detect

afmetingen…

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

85


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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 !

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

87

6. Werken met templates

6.1 Inleiding templates6.2 Editable regions6.3 Aanmaken van een template6.4 Editable Regions toevoegen6.5 Nieuwe pagina afleiden van

template6.6 Regions opvullen met data6.7 Editable Tag Attribute6.8 Editable attributes invullen6.9 Repeating Regions aanmaken

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

88

6.1 Inleiding Stel volgende situatie: alle pagina’s zelfde

opbouw maar wijzigingen moeten op alle pagina’s aangebracht worden (=veel werk !)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

90

6.2 Editable regions

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

92

6.3 Aanmaken van een template

Open template_start.htmSla het op als DW template:FILE >

save as template.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

93

6.3 Aanmaken van een template

Links worden geupdate en mapje templates wordt aangemaakt: *.dwt

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

96

6.5 Pagina afleiden van template

New > Templates

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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="@@(BgColorAttribute)@@">

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

100

6.8 Editable attributes invullen

Nu werken we met de afgeleide pagina van de template.(engineering.htm )

Modify > Template Properties

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

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 )

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

102

6.9 Repeating Regions aanmaken

Opslaan.Resultaat:

Editable regions

Eenvoudig rijen

bij te maken

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

103

Einde les 7

Les 7: Dreamweaver 8

Documents

Transcript of Les 7: Dreamweaver 8