Dreamweaver 8 is the industryleading web development tool, enabling users to efficiently design, dev

1

• Dreamweaver 8 is the industry-leading web
  development tool, enabling users to efficiently
  design, develop and maintain standards-based
  websites and applications.

2
What you can do with Dreamweaver 8

• The visual editing features in Dreamweaver let
  you quickly create web pages without writing a
  line of code. You can view all your site elements
  or assets and drag them from an easy-to-use panel
  directly into a document.

3
What you can do with Dreamweaver 8

• In addition to drag-and-drop features that help
  you build web pages, Dreamweaver provides a
  full-featured coding environment that includes
  code-editing tools (such as code coloring, tag
  completion, a coding toolbar, and code collapse)
  and language reference material on Cascading
  Style Sheets (CSS), JavaScript, ColdFusion Markup
  Language (CFML), and other languages.

4
What you can do with Dreamweaver 8

• Dreamweaver also lets you build dynamic,
  database-driven web applications using server
  technologies such as CFML.
• Dreamweaver generates new XHTML code and cleans
  up existing XHTML code in a way that meets most
  of the XHTML requirements.

5
What you can do with Dreamweaver 8

• Dreamweaver is fully customizable. You can create
  your own objects and commands, modify keyboard
  shortcuts, and even write JavaScript code to
  extend Dreamweaver capabilities with new
  behaviors, Property inspectors, and site reports.

6
Features

• Search replace

7
Features

• Validation

8
Coldfusion Includes
Banner
search
Left Nav
highlights can be an include if used in multiple
pages
Bestviewed, webmaster
Footer
9
Coldfusion Includes Banner
10
Directory Structure

• /global (css and other common elements)
• /images (images used on every page)
• /network (unique files for your site)

11
Setting up your dreamweaver site

• Make a copy of the site from the server to your
  local C drive

12
Dreamweaver workspace
13
Managing a site in Dreamweaver
14
Benefits of using CSS

• fonts, font sizes, and font colors
• the HTML code becomes much simpler and more
  manageable
• using relative measurements you can style your
  documents to look good on any monitor at any
  resolution.
• you can define the look of a site in one place,
  and change the whole site by changing just the
  one file
• people with older browsers can still see your
  pages
• people with disabilities have better access to
  your pages

15
With CSS Stylesheets

• No longer need font tags
• Control the appearance of page through css

16
CSS
lth2gtlt/h2gt
ltbreadcrumbsgt
lth3gtlt/h3gt
ltpgtlt/pgt or can use ltbr /gt
Imagecontainterleft
17
h tags

• h1, h2, h3, h4, h5, h6

18
p and br tags
19
Image Container

• ltdiv class"imagecontainerleft" style"width
  300px"gtltdiv class"imagebox"gt ltimg
  src"/images/snowmobiles.jpg" alt"Photos"
  width"300" height"225" /gtlt/divgtltdiv
  class"captionbox"gtSnowmobiles in the National
  Parkslt/divgtlt/divgt

20
Areas / tasks for each page

• Title
• Metatags
• Left nav (if different)
• Breadcrumbs
• Content area
• Top of page
• Update date

21
title meta tags
lttitlegt
ltmeta tagsgt
22
Breadcrumbs

• Modify to reflect current path that user would
  take to get to page

23
Update Date in Footer

• Make sure to update the date to a current
  modifications date
• Not save as date
• Remove from dynamic pages

24
intercept scripts

• External links
• lta href"/cgibin/intercept.pl?http//www.us-parks.
  com/activities/fishing/fishing.shtml"gt

25
Tables

• Try to avoid layout tables
• If you must use a table be sure to have a summary
  tag
• ie summary

26
Data Tables
lttable border"1" align"center"gtltcaptiongtShelly'
s Daughterslt/captiongtlttrgt ltth
scope"col"gtNamelt/thgtltth scope"col"gtAgelt/thgtltth
scope"col"gtBirthdaylt/thgtlt/trgtlttrgt ltth
scope"row"gtJackielt/thgtlttdgt5lt/tdgtlttdgtApril
5lt/tdgtlt/trgtlttrgt ltth scope"row"gtBethlt/thgtlttdgt8
lt/tdgtlttdgtJanuary 14lt/tdgtlt/trgtlt/tablegt
27
Alt text

• Empty (if decorative or non essential)
• Example altphoto if there is a caption
  associated with it.
• Otherwise very descriptive for assistive
  technology

28
standards-based code

• Use ltemgt and ltstronggt, not ltigt and ltbgt
• Use CSS Styles, not HTML tags
• Use ltdiv aligncentergt, not ltcentergt
• Use lower-case tags and attributes
• Can make all new documents XHTML

29
Helpful Resources

• Macromedia Dreamweaver 8 Hands-On Training
• By Daniel Short, Garo Green
• Macromedia Dreamweaver MX 2004 Complete Course
• By Joyce J. Evans
• Dreamweaver8 The Missing Manual
• By David Sawyer McFarland
• HTML for the world wide web
• By Elizabeth Castro