les 7: dreamweaver 8
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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
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.
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
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, …)
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
STAP 1: Nieuw document aanmaken
Page properties Appearance
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
35
Page properties Links
STAP 1: Nieuw document aanmaken
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
36
Page properties Title/encoding
STAP 1: Nieuw document aanmaken
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
STAP 4: Image invoegen
Alternate tekst invullen:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
43
STAP 4: Image invoegen
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
STAP 4: Image invoegen
Images opmaken via Property inspector:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
45
STAP 4: Image invoegen
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
STAP 4: Image invoegen
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
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
49
STAP 5: Hyperlinks invoegen
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
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 !
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
52
STAP 5: Hyperlinks invoegen
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
53
STAP 5: Hyperlinks invoegen
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
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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
56
STAP 5: Hyperlinks invoegen
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
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.
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
4.1 Een nieuwe Site definiëren in DW
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:
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
63
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
64
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
65
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
66
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
67
4.1 Een nieuwe Site definiëren in DW
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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.)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
71
4.1 Een nieuwe Site definiëren in DW
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
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:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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 !
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
84
5.3 Video toevoegen in webpagina
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
5.3 Video toevoegen in webpagina
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