Using Macromedia Dreamweaver MX8

1
Using Macromedia Dreamweaver MX/8

• Webpage Editing and Design Software
• Jeff Wood
• Computer Applications Training Specialist
• Colorado State University Extension

2
Basic Concepts
3
What is Dreamweaver?

• WYSIWYG (What You See Is What You Get) Web page
  editor
• Writes code for web pages
• You select images, text, colors
• Dreamweaver writes underlying code
• Code is called HTML
• Dreamweaver is a good way to learn HTML (split
  view between WYSIWYG and HTML)

4
What is HTML?

• Hyper Text Markup Language
• Common language understood by all browsers
• Translated differently by different browsers
• View, Page source (Firefox) or Source (Internet
  Explorer) to see HTML coding
• Dreamweaver has code view as well

5
HTML tags

• A tag is an attribute applied to text or an image
• Generally in pairs, opening and closing
• Attribute is applied between tags
• Some tags can take on more modifications
• SIZE2
• Font will be courier, red, 2 sizes larger than
  normal
• OReilly reference (Window, Reference) will tell
  you about any tag you highlight
• DW will highlight bad tags in yellow

6
Browsers

• DW allows quick preview of 2 browsers with F12
  and CtrlF12
• Preview work in 2 or more browsers
• IE (Internet Explorer) 7.x a MUST
• IE is 71 of market
• Mozilla Firefox 2.x a MUST
• Built by Netscape Navigator
• 13 of market
• Other browsers
• Netscape Navigator (4.7 in particular)
• Google Desktop
• Opera, Safari,
• Keep earlier versions of IE, Firefox
• Rename the folder before upgrade

Janco Assc., March 07
7
Browsers (cont)
8
What is a web site?

• Collection of files and folders on a server
  computer
• Files are written in HTML
• Server computer is the one people visit when they
  go to your site
• Two sites involved in building site
• Local site - on your computer
• Remote site - on a server
• Your computer talks to Remote server using FTP
  (File Transfer Protocol)
• Local site a mirror image of remote site

9
Opening Dreamweaver

• Multiple windows and panels upon start-up
• Not as scary as it looks
• Close what you dont need
• Arrange it how you like it
• Dreamweaver will remember last placement

10
Three main elements

• Document window
• What the page looks like (and/or underlying code)
• Insert panel above
• Used to insert objects and properties
• Property inspector below
• PI inspects and changes properties of selected
  objects
• The PI is your best friend!

11
Document window

• Main Control center
• WYSIWYG (What You See Is What You Get)
• Not truly WYSIWYG dependent on users browser
  and users settings
• Window size might not be maximized
• Monitor resolution varies
• 640 x 480 (1)
• 800 x 600 (29)
• 1024 x 768 and higher (68)
• Fonts will vary with user defaults
• Colors will vary with OS, browser, monitor, user
  defaults
• Graphics may be turned off, plug-ins may be
  missing
• Different browsers translate HTML differently

12
Document window (cont)

• The Document window
• Title bar - file name and web page name
• after filename doc not saved
• Menu bar - all commands for the document window
• Toolbar - buttons for common tasks
• Document viewing area - where you add content
  (text, images, tables, links)
• Status bar tags, magnification, window size,
  dial-up speed

13
Document window toolbar

• 3 important buttons
• Code view
• Split view (code/design)
• Design view
• Page title - lets you name or rename page
• Target browsers
• Settings allows you to check for unsupported
  tags in specific browsers
• Check browser support shows potential problems
• Validate code (DW8 only)
• Settings allows you to choose what type of doc

14
Document window toolbar

• File management - lets you give/take files from
  web (better to do it from site window)
• Preview - lets you see it in browser
• Set primary (F12) and secondary (Ctrl F12)
  browsers here
• Check your work often
• Refresh - updates page (F5)
• View options visual aids lets you set Document
  view options
• Word wrap, line numbers (code view)
• Grids, rulers (design view)

15
Bottom of Document window

• Tag selector - shows which tags are in play
• Can choose elements from here
• VERY useful when working with tables
• Hand tool, magnification tool (DW8 only)
• Magnification pulldown (DW8 only)
• Window size
• Download speed (25 second rule under 25 seconds
  at 28.8 kbps)
• Click the little pull-down arrow to the right of
  window size, then Edit Size to change either

16
Objects panel

• Turn on/off in window menu
• Use pulldown to change categories - common is
  most useful
• Common - most-used commands
• Forms - for creating forms
• Text - inserts special characters and applies
  headings and lists
• Layout Standard tables vs. layout tables
• Html horizontal rules, headings, frames, etc.

17
Common elements

• Link adds hyperlink (easier to use PI)
• Email link adds email link
• Mailtoemailaddress in PI another solution
• Named anchor for links within a page
• One long page strategy
• Tables - easy table layout tool
• Coding tables by hand is HARD
• Images pulldown
• Pulldown for Placeholders, Rollover images,
  Navigation bars, hotspot drawing tools

18
Common elements (cont)

• Media
• Flash buttons and Flash text easy way to create
  slick buttons and text with rollover and click
  behaviors
• Downside requires Flash
• Date Inserts date
• Option to automatically update date on save
  keeps you honest about last updated info
• Server side include (DW8 only)
• CSUCE Header and Footer good example
• In MX, SSI is in HTML category of insert panel
• Comments
• Comments in the code that dont show up on the
  page

19
Property Inspector

• Turn on/off in window menu
• The PI is your best friend!
• Will change, depending on what youre doing
• Default is for text properties
• Select text to format text
• Select an image to format image
• Select a link to format link
• Select a table to format table

20
Setting up a local site

• Set up pages on your computer the same way
  theyll be set up on the web server
• Remote site local site
• Figure out where to put your files
• All pictures in one place (images folder)
• All documents in one place (docs folder)
• Divide by year (docs_06) or subject (4h_docs) or
  both (4h_docs_06)
• Most pages needs own folder
• Logical flow to pages, logical flow to files and
  folders
• Pencil and paper is best way to start

21
Sample site structure
Hometown Security
Awareness
Community Mobilization
Skill Development
Eval
Documents and links
Documents and links
Documents and links
Eval form
Remember the 3 click rule all info within three
clicks of home page
22
Sample directory structure
Hometown Security root folder contains
index.(s)html (home page) and ALL OTHER FOLDERS
Awareness contains awa.html
Community contains com.html
Skill contains ski.html
Eval contains eva.html
Docs contains all documents
Images contains all .jpgs .gifs
23
Directory structure

• Folders in DWeaver site window

24
Setting local information

• Site menu, New Site, Advanced tab, Local info
• Site name (for your use only)
• Define root folder
• Root folder is the starting place
• EVERYTHING on your site must be inside this
  folder
• Your home page is a file in this folder (NOT in a
  folder inside this folder)
• Browse to it using folder icon (or create one)

25
Setting local information (cont)

• Default images folder
• Not available in DWeaver 4
• DWeaver does image file management for you
• Either browse to images folder or create one
• All .jpegs and .gifs are automatically copied
  into this folder
• Link checker useful to check on broken links or
  orphaned links within the site
• Use complete URL
• Enable cache yes

26
Setting remote information

• Remote info you will need
• Ftp host (e.g. - yuma.acns.colostate.edu)
• Host directory (WWW/)
• Login your unique login
• Password your unique login
• If you choose Save you will forget your
  password, so
• When you get email from ACNS save a paper copy,
  not just the email!

27
The home page

• Prefix index or default
• Extension htm, html
• Many exceptions
• .shtm or .shtml means interaction w/server needed
• .xhtml is stricter, cleaner version of html
• .asp, .cfm for dynamic pages
• File, New, Basic, then
• Save As
• Index.htm

28
The site window

• Site menu, Site files or F8
• Files and folders show up on right
• Use Expand icon to see local and remote
  simultaneously
• One side is local site, other side is remote
• Shows directory structure of both sites
• Do file management (adding, moving, renaming,
  deleting) here
• Dreamweaver will track most changes
• Always test to make sure

29
get files
put files
connect
refresh
Local site
Remote site
30
Creating content
31
User defaults

• Unlike print media, user sets own defaults
• Fonts and font sizes you specify may not be used
• Times New Roman, 12 point is default
• Resolution may differ
• 640 x 480 (1)
• 800 x 600 (29)
• 1024 x 768 and higher (68)
• Graphics, media may be turned off
• Colors vary with monitor, operating system,
  browser
• Design with these limitations in mind
• 800 x 600
• 56 kbps
• Common fonts (Verdana, Times New Roman)
• Web safe colors

32
Title, description, keywords

• Add title using doc window toolbar
• Add description and keywords using Head in Html
  category of Insert panel
• Be concise, accurate, inclusive
• Keep it under 50 words
• Use commas to separate keywords
• To add content after the fact, often easier to do
  it in the code

33
Text

• Just start typing, or cut and paste
• Enter paragraph break (2 lines)
• Enter shift line break (1 line)
• Property inspector default is text
• Drop downs to change format, fonts, sizes, colors
• Buttons for attributes, alignment, bulleting,
  indents
• Writing style for the web short words, short
  sentences, short paragraphs

34
Setting Page Properties

• Modify Page properties
• Appearance
• Set base font, size, color
• Background color or image
• For readability, light background, dark text
• Background images - be careful not to overwhelm
  text
• You can use a table with solid color for text on
  top of mage
• Repeat tells DWeaver how to tile background (DW8
  only)
• X is vertical, Y is horizontal
• Set margins in pixels

35
Setting Page Properties (cont)

• Links
• Visited, rollover, active colors
• Left blank, they will take on default colors
• You can sample colors of graphics on page to
  choose colors
• Underline behaviors
• Underline best way to imply link to end user
• Headings
• Set size and color of different headings
• Use the Headings pulldown in PI to apply

36
Images

• Images are punctuation, not content
• Insert, Image, or
• Insert Image on the objects panel
• Select image by browsing to it
• Give all images an alt tag for text-to-speech
  browsers or browsers with image loading turned
  off
• DWeaver automatically prompts you to do it
• Property inspector will change to allow image
  manipulation

37
Manipulating images

• Best done in outside image editor
• Photoshop is industry standard
• Powerful tool, fun to work with
• Expensive (170 at CSU Software Cellar)
• Steep learning curve
• I have LOTS of tutorials online and via CD
• Adobe Elements
• Basic, cheaper version of Photoshop (79)
• You have some image software with your computer
  (MS PhotoEditor, Kodak Imaging for Windows)
• Digital cameras come with basic imaging software

38
Image size

• If you have no image editing software
• Adjust size using Width/Height boxes in PI or
  Click-and-drag sizing boxes
• Hold shift during drag to avoid stretching
  image
• Numbers in Width and Height boxes will bold to
  indicate a changed value
• Use Reset size button if you dont like what
  you did

39
Image alignment

• Align pulldown menu
• Baseline is default (aligns bottom of image with
  baseline of text or nearest object)
• Baseline imaginary line under text or object
• Top, Bottom - aligns with top/bottom of nearest
  object
• Left, right - aligns with margin (and wraps
  text!)
• Middle - aligns with middle of text baseline
• Text top - aligns with tallest character in
  nearest text
• Absolute bottom aligns bottom of image with
  lowest point in text ( j, g)
• Absolute middle - aligns middle of image with
  middle of text

40
Image size and alignment (cont)

• Vspace, Hspace - of pixels between object and
  surroundings
• Alt tags - text in lieu of image - important to
  add
• Text-only browsers, image-off options, web phones
• Screen tip text
• Border size - set number in pixels
• Default color is black (must change color in HTML
  with hex code)
• If its a link, border color is link color

41
Image types

• JPEG -
• supports lots of colors, longer to download, best
  for complex imagery
• good for photos
• GIF -
• 256 colors (any 256, not predetermined)
• Easier to download, best for large areas of flat
  color
• Good for cartoon-ish images
• PNG -
• new, captures complex pictures without large file
  sizes, not supported by all browsers

42
Page loading tips for images

• Keep image files small
• Smallest physical size
• Lowest usable quality
• Use alt tags
• Not necessary for small details (borders,
  bullets, etc)
• Use low source image as transitional image for
  large file-size images
• Type file name in low src text box (or use
  browse, or drag)
• Reuse images (only need one logo for all pages)

43
Links
44
Hyperlinks

• Links are paths to
• Your own pages
• Pages on other websites
• Different parts of same page
• Email addresses
• Documents for download
• Can be text or images
• Linked text is usually underlined
• Linked images, or hotspots within images

45
Pathnames

• Relative pathnames are for in-site links
• Two types
• Document-relative pathnames
• Address of page or doc within your site
• Path from current page
• Site-root-relative path names
• Address of page or doc within your site
• Path from root directory
• Document-relative is safest bet

46
Pathnames (cont)

• Two more types of paths
• Absolute pathnames
• For pages not within your own site
• Full address of another website
  (http//www.ext.colostate.edu/)
• Named anchors
• Links to different spot on same page
• Can create website of one long page - links to
  different spots on same page from top

47
Creating Text Links

• Highlight text
• Pull up Property Inspector
• In link box, browse, type or paste new link
• Copy-and-paste from browser will insure you dont
  misspell it
• Link box will also pull down recently used links
• Click somewhere outside of link box

48
Creating image links

• Buttons, arrows, logos, or pictures
• Select the image
• Pull up Property Inspector
• In link box, browse, type or paste new link
• Link box will also pull down recently used links

49
Hotspots within an image

• For creating a link in section of image
• Select image
• Select drawing tool (rectangle, oval, irregular)
  in PI to draw hotspot
• Type in link
• Best for multiple links from one image
• Good way to design navbar
• Create hotspots within maps, group photos

50
Linking to an E-mail address

• Highlight text
• Use email icon, or
• Document, Insert, Email link
• Dialog box will appear
• Text - what site will say (highlighted text)
• Email - Actual email address
• If highlighed text is actual email address, just
  click OK
• Default email program of user computer will be
  used
• Alternate mailbox for these responses only may be
  helpful
• mailtoemail_at_address in link box another option

51
Adding CCs and Subject lines

• Needs to be done in the code
• Add within quotes, no space
• Find mailtoNancy.Banman_at_ColoState.edu
• For CC
• Add ?ccjeffrey.wood_at_colostate.edu
• For subject
• Add Subjectwebsite
• Result
• mailtoNancy.Banman_at_ColoState.edu?ccjeffrey.wood_at_
  colostate.eduSubjectwebsite

52
Linking to spots within same page

• The One long page strategy
• Table of contents or alphabet at top
• Links to rest of document
• FAQs are commonly done this way
• Alphabetical lists
• Top or bottom of document links also helpful
• Two parts
• Place where you want to go (Named anchor)
• Link to get there

53
Linking to spots within same page (cont)

• Put cursor in the place on page you want to go
• Click Anchor icon, or
• Insert, Named Anchor
• Name it one word, no spaces, easy to remember
• Anchor icon will appear
• Highlight or select the linked text or image
• In the link box, type , then the name of the
  anchor
• No space between and anchor name (top)

54
Linking to sections of a different page

• For page within website
• Link to Page nameanchor name (webguide.htmbandwi
  dth)
• Will jump to the page webguide.htm and the
  named anchor called bandwidth
• Page in different site
• Link to Web Addressanchor name
  (http//www.computer.com/webguide.htmbandwidth)
• Will jump to the page www.webguide.htm and the
  named anchor called bandwidth

55
Linking to documents

• Adobe (.pdf) is good universal format
• In wide use, Government standard
• Adobe Reader free and easy to download
• Doesnt suggest an endorsement of a specific
  product (e.g. - Word or Wordperfect)
• Always provide link to page to download Adobe
  Reader (www.adobe.com)
• Always provide size and type of file in text so
  they know what theyre downloading - Web Account
  Request Form (113 kb .pdf file)

56
Linking to documents (cont)

• Select linking text or image
• Have document in folder
• Like images, all documents should be stored
  together in common folder (docs, 06_docs,
  4h_06_docs)
• In link box, browse to document

57
Opening links in new windows

• Why?
• Useful for framed pages
• For an external link, you might want your page to
  stay up
• Links to a document that has no return link
• Set the link
• In Property Inspector, set target to blank
• Top is default, which replaces the content of
  current page

58
Links you need

• Email contact (preferably every page)
• CSU
• http//welcome.colostate.edu
• CSU CE
• http//www.ext.colostate.edu
• Disclaimer
• http//welcome.colostate.edu/index.asp?urlinfo_cs
  u-disclaimer
• EOE statement
• http//welcome.colostate.edu/index.asp?urlinfo_cs
  u-equalop
• Non-discrimination statement
• http//www.ext.colostate.edu/non-discr.html

59
Rollovers, Flash Objects, Navigation Bars
60
Image rollovers

• What is a rollover?
• Two images stacked on each other
• When an action (rollover, click) is performed,
  image changes
• Good for buttons 2 different states
• Different color, same text and size, for each
  state
• Photoshop makes this very easy
• Free buttons available on web

61
Rollovers (cont)

• Go to objects panel, choose rollover
• Images should be same size
• Second image will conform to first image size
• Browse to original image
• Browse to rollover image
• Add alt text
• Choose link
• Leave preload option checked - downloads when
  page downloads

62
Flash objects

• Warning Flash is a plug-in, not all browsers
  come with it
• Plug-in third party add-on software
• Macromedia Flash is plug-in for Flash media,
  integrates easily with Dreamweaver
• Pre-loaded on vast majority (98) of browsers
• Slick and easy buttons and text
• Objects have pre-programmed rollover behaviors
  and click behaviors
• Saves bandwidth because files are very small

63
Inserting Flash text

• Use Media pulldown in Objects panel, select Flash
  Text, or
• Insert, Media, Flash Text
• Dialog box appears
• Choose font, font size
• Font doesnt have to be loaded onto user computer
  (its a graphic, not text)
• B, I options (affects all text)
• Text alignment buttons (Left, center, right)
• Choose text color, rollover color, background
  color (may need to match page color)

64
Flash text (cont)

• Type text into text box (check show font box
  for preview)
• Browse or type address of link
• Leave object in current folder
• Exeption to the images folder rule
• Name it something memorable (NOT text1.swf)
• OK, click Play in PI to watch rollover effects
• Be sure and click Stop when done
• Or, F12 to Preview

65
Flash Accessibility Attributes (DW8 only)

• For screen reader browsers
• Alt tag
• Access key
• That key Ctrl will trigger the link
• Tab Index
• To relay what order the object will be selected
  when using the Tab button
• Needed only if there are several objects on page
  to navigate

66
Changes after the fact

• Can move or resize graphic
• 2-click to get dialogue box back
• Property inspector allows more
• Background color changes
• Dimensions
• Alignment
• Vspace, Hspace changes

67
Creating Flash buttons

• Use Media pulldown in Objects panel, select Flash
  Text, or
• Insert, Media, Flash Text
• Dialog box appears
• Browse through, lots to choose from
• Sample box previews behaviors (rollover, l-click)
• Get more styles connects to website with more
  stuff

68
Flash buttons (cont)

• Type in text in text box
• Choose font
• Font size often non-negotiable
• Background color - eyedropper is good option for
  page color match
• Link - browse to file or type in address
• Click Play button to see rollover effects
• Click Stop before continuing

69
Changes after the fact

• Can move or resize graphic
• 2-click to get text box back
• Property inspector allows more
• Background color changes
• Dimensions
• Alignment
• Vspace, Hspace changes

70
Navigation bars

• What is a navigation bar?
• Set of buttons stacked horizontally or vertically
  inside a table
• You need the images for buttons first
• Many sites to choose from
• Search engine - html buttons
• Good for standard buttons (forward, back, home,
  email)
• Photoshop is fast and easy button-maker

71
Inserting a navigation bar

• On objects panel, click Insert Nav bar button
• Up to four images to assign
• Up image initial image
• Over image when mouse moves over it (lit up)
• Down image when button is clicked (pushed in)
• Over while down when mouse is over after
  clicking (lit up, pushed in)

72
Nav bars (cont)

• Type in element name (home, links, etc.)
• When clicked, go to
• Type in URL (get spelling right!), or
• If in-site, browse to it and select
• Show Down image Initially checkbox
• For when user is already there, so you want the
  button down at outset
• Select button before checking box
• Asterisk will appear

73
Nav bars (cont)

• Create horizontally or vertically using pulldown
• To insert more buttons on nav bar
• Click the button
• Follow same steps
• Change order by selecting image, using up and
  down arrows

74
Inserting MS Office documents (Word, Excel,
PowerPoint)

• Strip them of transitions, animations,
  unnecessary graphics, sounds
• Start in native program, File, Publish to Web
• Choose Files of Type as Web Page (.html)
• Publish file and folders directly into website
  (create docs folder to put it in)
• Another option allow them to download it by
  linking to actual file (instead of web version)
• We did this already with .pdf
• Same technique with any document

75
Inserting MS Office documents (Word, Excel,
PowerPoint) (cont)

• Creates a file and a folder
• Point links to file folder will take care of
  itself
• CommandsClean Up Word HTML
• Word is very bad at writing code
• Cleans up redundant and MS-centric code
• Clean Up HTML another option
• Simple graphics and text can be added after the
  fact

76
Creating tables

• Good way to structure a web page
• Without tables, content is generally left,
  center, or right aligned (not a lot of design
  options
• Think of tables as building boxes to put content
  into

77
Tables (cont)

• InsertTable, or
• Use table icon in Objects panel
• Set options in dialogue box
• of rows columns
• Table width
• Border, padding, spacing
• Header