DREAMWEAVER MX COURSE

Vision

Individual learning objectives:what do you want to learn?

Mission of bridging ‘Being at service’ attitude

Macromedia Courses

Sessions Goals Presentation of new material Model use Feedback Guided practice Independent practice Closing the session

Format Concept – intro Demo if appropriate Walkthrough being on the same train Practice Recapitulation & closing the session

Introduction on web design

Internet / Extranet / Intranet Html / Xml / XHtml – standards Script languages Browser compatibility Protocols Evolution of web design tools and

wysiwyg editors

Web Site planning

Items to consider in a ad random order: Graphics Content structure Navigation Technology Browsers Language Meta Communication aspects Templates Internal communication

Web Site planning

Take inspiration from internet / intranet sites / colleagues / … Plan on paper

Target browsers Design Target public Aims Structure

Prepare Structure File structure Content structure Graphical structure

Configure DreamWeaver / Environment Create first set of pages (# versions)

home page sub home pages template stylesheets

Feedback & Decision Production process

fine tune tools double check on Browser / HTML / XML / platform roll out of first version of site

Upload for & feedback from test user group Correction phase & final uploads

About the Course Course Format Course Objectives 1-4 Course Prerequisites Course Outline : 10 units Static Page Architecture

HTMLHTML Code EditorsVisual Editors

Viewing Spinning Wheels site

Unit 1 : introduction

Unit 2 : getting started

Introduction to Dreamweaver MX 2004 Dreamweaver Interface Basics

startpage & preferences workspace: panels, properties, insert bar, views, new document walkthrough 1: DW interface

Defining a Local Site Root folder - Basic / Advanced - Cache File Panel walkthrough 2: Define a site

Creating a Website New page and New doc preferences Title and save - Home page Preview & browser settings walkthrough 3: Create your first page – XHTML compliant – Spinning Wheel

Biking Tours – biking.html - preview Setting Document Properties

Background color & background Default text walkthrough 4: properties Verdana, text #099, bgcolor #fc6, bgimage

wheel_bkgd.gif – testpage.html

Environment

Layout design versus standard design Code view / design view Panels system & panel groups

Insert panel (common – layout – text – tables – frames – forms – templates – characters – head …)

Design panel (css – html styles – behaviours) Code panel (tag inspector – reference) Assets panel Advanced layout (layers – frames) Site panel Creating a new panel

Property inspector Launcher Tag selector Visual Aids Ruler and Grids Other status bar components

Environment (2)

Environment (3)

Dreamweaver fine tuning with Edit Preferences Choose icons and text initially <Strong> & <em> Accessibility for Tables and Images Wrapping setup for code view External editors Manage Launcher panel Define browsers

Basic Site / Page setup

Site definition Wizard / advanced ftp versus local network Home page definition Testing connection

Page properties settings Head properties Doc Type Settings

html basics

Tags Attributes Basic & sample html page Tag Library Editor Quick tag editor

Design methodology

Working with tables Lay-out design Working with layers Frames

Unit 3: Adding Content to the site

Adding Content Import Text Files/Word/Excel files Cleaning Word HTML walkthrough 5: biking.html / *.txt – bikadv_word.html – check nr of

code lines Controlling Document Structure

<h1> - <p> - <br> - Aligning walkthrough 6: biking.html apply headings – par – copyright <li> - types – nest - use bikingadvword.html walkthrough 7: biking.html format lists <hr> - &nbsp; - multiple spaces walkthrough 8: insert <hr> - &nbsp;

Adding Special Characters quick tag editor insert date and time walkthrough 9: insert © - <sup> - insert date

Working with text

Input Typing in Pasting / Pasting Html Importing text from Word

Text issues <P> & <BR> ; <B> & <I> ; <H> Indentation <PRE>

Lists Ordered - Not ordered List settings (recount, bullet…)

Working with text (2)

Input Typing in Pasting / Pasting Html Importing text from Word

Text issues <P> & <BR> ; <B> & <I> ; <H> Indentation <PRE>

Lists Ordered - Not ordered List settings (recount, bullet…)

Working with text (3)

Fonts Font tag editor Specific fonts like Verdana, Georgia Font Properties

Simple text styles css styles html styles

Search and Replace Specific text

Comments Special characters

Unit 4 : Formatting Text

Formatting Text Web / Mac / Block versus Character <font face, size, color> - bold/italic – alignment walkthrough 10: calendar.htm – h1,verdana,18pt,#f60 – align,

emphasize Introducing Cascading Style Sheets

settings – terms – benefits font changes create classes rename & apply styles walkthrough 11: create/apply main/sub heading styles

Creating Styles types / procedure / overview 4-18 walkthrough 12: calendarText – Arial, 10pt, 10px indent

Creating Tag Selectors procedure + File/Replace to remove attribute class walkthrough 13: duplicate .dateHeading/ h3-h2-h1/ remove

Unit 4 : Formatting Text (2)

Creating Advanced Styles Pseudo-element / Combination / Pseudo-class / ID selectors vb p 4-26 walkthrough 14: calendar.htm – p,li – p,strong

Exporting CSS Style Definitions Attaching External Style Sheets

export, link, import walkthrough 15: export to biking.css, attach to 2 pages, del

Creating a New Style Sheet walkthrough 16: styletest.htm – test.css – #styles 4.36

Editing Style Sheets Tag inspector / edit style / edit style sheet / manually edit walkthrough 17: styletest.htm – edit p,li – add strong

Cascading Order and Inheritance of Styles ex 4-42/43 walkthrough 18: styletest.htm - <p> in this doc - #0f0 - <em> in

test.css, 12pt, see inheritance

White space

Images Indentation Paragraph versus line break Tables – cell padding transparent images and placeholders

Unit 5: Working with graphics

Graphics on Web Pages : formats Placing Graphics on the Page

image path accessibility methods: insert bar / assets / file panel walkthrough 19: itineraries.htm – stylesheet – add bannertours &

map to fav – set accessibility – add graphics Modifying Image Properties

resize / align / wrapping / spacing / border / alt / walkthrough 20: center – wrap around map – adjust styles, p 10pt,

ul indent 20, h3 clear left Editing Images

walkthrough 21: ride2done.gif to day1 – crop - modify Roundtrip Editing with Fireworks

walkthrough 22: optimize banner in Fireworks (compr 80) Adding Flash Movies

walkthrough 23: delete banner – insert flash.swf

Working with images

gif / jpg / png Inserting images Inserting an image map Background images Roll-over images Navigation bar

About colours

web safe colour palette Set colour scheme

Unit 6: Navigation

Understanding Site Navigation hypertext links / link types

Linking to Files in Your Site paths – p. 6-5 methods: point to file / browse / modify link update links / link colors / states / pseudo class selectors walkthrough 24: trainingtips.htm – biking.css – Spinning

wheel link – see tips – pseudo classes Linking to Sites

absolute links and targets walkthrough 25: link to macromedia + re-use

Linking to Named Anchors creating anchors / conditions / invisibles methods: point to file / use of # walkthrough 26: tips.htm - <p> tag selector 400px width

– add anchors – internal links – add to top

Unit 6: Navigation (2)

Adding E-mail Links walkthrough 27: tips.htm – add email link

Linking from Images image map creation & types of hotspot walkthrough 28: map.htm – use # link type to illustrate – link

to trips.htm/hawaii

Creating a Navigation Bar insert functionality & accessibility walkthrough 29: biking.htm – add navigation bar w/o table –

home/destinations/Itineraries/trainingtips – copy to pages

Creating a Jump Menu walkthrough 30: biking.htm – jump menu idem as wt 29

Links

Different ways to make links Pointer & Shft Pointer Via property inspector Modify, Make link Right mouse button, make link

Types Internal Relative Absolute Email links

Links (2)

Creating links Text / Images / Objects dummy links #

Link targets Changing links

Unit 7: Designing page layout

Understanding Page Layout Visitors / browsers / 400 px column rule Containers / Layout

Structuring Page Layout with Tables Creation / selection / expanded mode Properties / Row editing / Merge / Split / Sorting walkthrough 31: california.htm – transform into table – sort – table, th, td, caption tag

style – cellspacing: 0 Importing Tabular Data

walkthrough 32: bikeparts.htm – import – format – remove depreciated tags Using Table Layout View

Use / use of grid Layout cells & tables / modifications / nesting walkthrough 33: new doc – layout.htm – drag in content

Using Layers for Layout Browser support Creating layers / properties / layer panel / NS fix walkthrough 34: Itineraries.htm – text in layer – image in layer

Hiding and Showing Layers Behaviors / Show-hide behavior walkthrough 35: Itineraries.htm – 3 maps – show/hide behaviors

Converting Tables to Layers walkthrough 36: convert tables into layers in layout.htm

Converting Layers to Tables walkthrough 37: new doc – convert into layers2table.htm

Basic Table layout

Inserting tables Inserting tables in layout view Specifics

Splitting Merging Span Selecting Inserting/deleting rows and columns

Command Format table Sort table

Unit 8 : Using libraries and templates

Site Library Items Creation / viewing / using library items Updating & deferred update Modifying / detaching / recreation when deleted walkthrough 38: Itineraries.htm / add flash object to library / insert in tips.htm /

modify by adding table & title in cell / update Creating Site Templates

Intro & Regions Creation & use walkthrough 39: trips.htm – create template with nav bar & banner – save

wheelwalk.dwt Defining Editable Regions

Different methods (insert template / insert panel / right clic) Removing make-up walkthrough 40: create body region

Using Templates File New / Assets / Insert panel walkthrough 41: save calender.htm as *.old – create new calendar.htm – insert

content Modifying Templates

walkthrough 42: center heading and updates Applying a Template to an Existing Page

walkthrough 43: trainingtips.htm - clean after apply (delete nav bar)

Templates

Creating a template Editable and non-editable regions Applying templates

Unit 9: Creating Forms

Understanding Forms Creation and form properties Form objects and properties Tips 9-6 and 9-8 walkthrough 44: create request form 9-14

Form Processing Action settings form data walkthrough 45: send by email Optional walkthrough 46: search.htm by google

Setting Focus in a Form walkthrough 47: add to body –

onload=“window.document.RequestInfo.name.focus()”

Forms

Basic forms features Post and Get

Unit 10: Testing, maintenance & uploading

Testing Your Site Checking accessibility Checking links Checking browser compatibility Reports Check spelling walkthrough 48: test lab/index.htm on # criteria

Maintaining Files rename / move / integrated file browser walkthrough 49: rename file - folder

Connecting to a Remote Site adding remote site ftp / cloaking uploading, check in finding newer files walkthrough 50: edit site – set cloaking – change and put newer files

Synchronizing Files walkthrough 51: stagesol/unit10/itinlink.htm – insert date - synchronize

Site management

Uploading / Downloading / Synchronisation

Site map structure File names / Page titles Hidden files Dependent files Determine new home page to reduce files

temporary

Site management (2)

File management Changing locations / names for files Selecting files File New Cloaking

Site Preferences Site import

Check and change

Preview in browsers Check target browsers Validate Mark-up Check links Check spelling Window sizes

Short cuts

F4: hide panels F8: site window F12: Preview F10: Code inspector window F11: Assets F2: Layers Ctrl-Tab switch between

documents Ctrl-´: switch between code

and design view (or Shft-Arrow up/dn)

Ctrl-T: quick tag editor Shft-Enter: <BR> Ctrl-L: make a link Ctrl-Shft-Space: &nbsp; Shft-click to select multiple

layers

Ctrl-T: Quick Tageditor in design view

Ctrl-space: Code hints Shft-F1 : Go to code

reference Ctrl-U: Edit preferences F5: refresh design view, site

panel etc. Alt-F8 : site map Ctrl-F5 : Tageditor Shft-arrow up/dn : switch

design/code view window

Often used windows shortcuts (Ctrl-N,Ctrl-A,Ctrl-S…)

Resources

Web sites http://www.dwfaq.com http://www.dreamweavermx-templates.com/ http://www.projectseven.com http://www.wdvl.com/Authoring/DreamweaverMX/ http://www.dmxzone.com http://www.communitymx.com http://www.macromedia.com/devnet/ http://www.macromedia.com/support/dreamweaver/ http://www.dwteam.com/

Resources

Newsgroups forums.macromedia.com/macromedia.dreamweaver macromedia.dreamweaver

Books Dreamweaver MXMagic, New Riders, ISBN: 0735711798 :

http://www.dwmagic.com Dreamweaver MX Bible, John Wiley & Sons, ISBN: 0764549316 :

http://www.idest.com/dreamweaver/

E-zines / List servers / other links SiteProNews - http://www.sitepoint.com Lockergnome webdevelopers - http://www.lockergnome.com/ http://www.blueworld.com/blueworld/lists/dreamweaver.html http://www.opera.com http://www.webshots.com http://www.crazybrowser.com http://www.myIE2.com MX 2004 Feature tour at http://www.macromedia.com/dreamweaver/

Resources

Graphic resources http://www.elated.com/ http://www.artist4hire.net/ http://www.clipart.com/ http://www.syruss.com/ http://reallybig.com

Html http://wiskunde.hacom.nl/html/start.html http://blindsurfer.be http://www.htmldog.be http://www.handleidinghtml.nl http://www.htmlhelp.com http://w3schools.com http://www.goodies.com http://www.xs4all.nl/~werksman/webmees/ http://www.webles.nl http://www.hwg.org/ http://html.op-het.net/

Quizz

1. De default instelling voor het Valign attribuut in een <td> tag is: left center middle

2. Ik wens een stijlblad te linken aan een template document: dit is geen enkel probleem ik dien dit te doen vooraleer ik pagina’s begin op te maken op basis van deze template stijlbladen kunnen niet gelinkt worden aan een template

3. Ik ben op reis en krijg een dringende opdracht een aantal webpagina’s van mijn dienst aan te passen – ik ben echter niet in het bezit van de bestanden: ik vraag mijn dienst de bestanden per express op te sturen opdat ik de locale structuur van de site kan opmaken en

vervolgens de gewijzigde bestanden kan uploaden ik definieer de site structuur in Dreamweaver en synchroniseer eerst de locale en remote struktuur; vervolgens kan ik

de gewijzigde bestanden uploaden ik download de betreffende bestanden via Internet Explorer die hiervoor een speciale functie heeft – save as complete

webpage; vervolgens upload ik de gewijzigde bestanden 4. Een html stijl is:

een html tag die het begin van een stijltoepassing aanduidt een functie in Dreamweaver om efficiënt html tags aan tekst toe te kennen een alternatief voor het werken met stijlbladen

5. Een mousover javascript toepassen: kan alleen maar in code view worden uitgevoerd kan makkelijkst via een server behavior worden uitgevoerd kan makkelijkst via een client behavior worden uitgevoerd

6. De alt tag in een afbeelding: biedt de mogelijkheid een alternatieve omschrijving in te brengen, die wordt weergeven door de browser als men een

mousover beweging uitvoert of als de surfer ‘afbeeldingen weergeven’ heeft afgezet. maakt het mogelijk een lage resolutie afbeelding in te laden vooraleer de zwaardere en definitieve afbeelding op het

scherm verschijnt is het html attribuut dat slechtzienden toelaat informatie te bekomen over de afbeelding

7. Bij de aanmaak van lagen/layers gebruikt Dreamweaver volgende tag: <span> <layer> <div>

DREAMWEAVER ADVANCED COURSE

Deeper analysis of basic features

Tag library editor Use of built-in templates & exchange of

templates Making an advanced menu with DW External style sheets and style sheet

functionalities Panels (assets, new panels …) Editing Code in code view Creating own table formats and color formats

Extra functionalities

Behaviours & Dreamweaver Extensions Timeline Create web photo album Edit Command Code snippets Design notes & collaboration issues Sort & format tables Coding help

Validation and checking

Browser compatibility issue (preview, debug, validate)

Check browser scripts and referral Checking

Advanced layout issues

Frames Nested tables & other table issues Nested layers & other table issues page layout Tracing image Layers to tables and vice versa

Multimedia aspects

Embedding Music Embedding Video Flash objects Applets

Script integration

Linking html pages with a MySql database through use of php scripting

Linking Form results with a php script to fulfil post operation

Import, export, convert issues

Tabular data Xml, Xhtml, Doc type settings Word Fireworks

Search engine aspects

Meta tags Preparing web pages for search engine detection Search engine declaration