dreamweaver mx course. vision individual learning objectives: what do you want to learn? mission...
TRANSCRIPT
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> - - multiple spaces walkthrough 8: insert <hr> -
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: 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