Dreamweaver MX

1
Dreamweaver MX
Liz Stacey
2
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• Dreamweaver
• Sources of help

3
Basic Webpage Design

• Keep it simple KISS (Keep it simple straight
• Uncluttered
• Appropriate animation

4
Basic Webpage Design

• Keep it simple
• Keep it Large and Legible (KILL)

5
Basic Webpage Design

• Keep it simple
• Keep it Large and Legible (KILL)
• Easy to Read
• Fonts
• Color/background
• Avoid green/red combinations.
• Avoid text over images.
• Left justified

6
Basic Webpage Design

• Keep it simple
• Easy to read
• Patience
• Mistakes are learning tools.
• Help is readily available.

7
Basic Webpage Design

• KISS it
• KILL it
• Read Easy
• Lots of Patience

8
Organizing Your Page

• Visit other websites
• What did you like?
• Was it easy to follow?
• Was it well organized?
• What didnt you like?

9
Organizing Your Page

• Visit other websites
• Map out a rough design
• Save time
• Prevent mistakes
• Assist with links

Heading or Banner using a table for ease in
alignments
logo
Menu with links
Display linked page
10
Organizing Your Page

• Visit other websites
• Map out a rough design
• Create one folder
• All webpages for your site
• All images, html files, etc.

11
Creating your Folders for WD1 in Explorer

• Create a folder for your site Under WD1
• Create folders for
• images
• assign1
• assign2
• .
• .
• assign10
• exercise1
• .
• .
• exercise10
• Copy your wd1.jpg and your two picture files to
  images under WD1

12
Dreamweaver
Insert Object Panel
Document Panel
Document Window
Site Panel
Property Panel
Help Panel
13
Setting up a New Site

• Open Dreamweaver
• In Site Panel
• Choose Define New Site, follow wizard
• Type WD1 to Name the Site
• Accept Default No for Server Technology
• Save Site as g\WD1
• Connect to Remote ServerChoose None
• Done

14
Different Views

• View Code and Design

15
Create a Four Frame Window

• Choose Frames from Insert Panel
• Choose Top Frame to get a top and bottom frame
• Grab and drag the dashed frame boarder line on
  the left to create a left frame
• You should end up with 4 frames as shown.
• Increase left frame to 150 pixels

16
Frame Saving

• With the Correct Frame Selected (click in the
  frame to select it)
• Save Frame
• logo.htm
• id.htm
• menu.htm
• main.htm

17
Frame Naming

• Alt click in a frame to select it and see the
  frame properties
• Change Name of each frame respectively to
• logo
• id
• menu
• main

18
Frameset Saving (FileSave Frameset/ All Frames)

• Click on a Border to Select Frameset
• Save As index
• Set the Document Title to WD1

19
Frameset Properties

• Select frameset by clicking on the Border
• Then set
• Borders yes
• Border Width 2

20
Preview in Browser (File Preview in
Browseriexplore or F12)
21
Images

• Use jpeg format for faster transfer.
• MUST be saved in Images folder and inserted from
  folder.
• Edit image size to fit layer. Image size does
  not change to fit in layer as a background.

22
Logo Frame WD1 Image

• Select Logo Frame
• Insert image via Insert menu or Common Toolbar

23
Id Frame

• Insert a Table

24
ID Frame Table Properties

• Top Row
• Merge Cells in Top row
• Insert your Name in a larger Font Center
• Bottom Row
• Enter your Section, Student Number and email link
  (object toolbar)
• Table properties
• Border 0
• Center the table (click upper left corner of id
  frame)

Preview your page often in the Browser
25
Menu Frame Table Properties

• Create a 22 row, 2 column table
• Adjust Column width
• Merge cells for Assignments Exercise titles
• Add 10 Assign 1 10
• Add 10 Exercise 1 10
• Properties Assign 110
• Link assign1/assign1.htm
• Target main

26
Main Frame Image

• Insert your Face Front Picture
• In picture properties
• Center Picture
• Name Picture photo

27
Events and Event handlers

• Events that cause javascript code to be executed
• onmouseover
• onmouseout
• Rollover example Events for an Image Object

lthtmlgt lt!-- code the event in the image tag
directly poor because not all browsers support
events in img tag --gt ltheadgt lt/headgt ltbodygt ltdiv
align"center"gt ltimg src"images/harrison_ford.jpg
" width"240" height"350" name
photo onmouseover "document.photo.src
'images/harrison_ford_rollover.jpg'" onMouseout"
document.photo.src'images/harrison_ford.jpg'" al
t "Harrison Picture"gt lt/divgtlt/bodygt lt/htmlgt
the event handler sends a single line of code to
the browser the code is enclosed within
quotes statement must end with a semicolon
28
Events and Event handlers

• Events that cause javascript code to be executed
• onmouseover
• onmouseout
• Rollover example Events coded for an anchor tag

lthtmlgt lt!-- code the event in an anchor tag
better because not all browsers support events in
img tag --gt ltheadgt lt\headgt ltbodygt ltdiv align
"center"gt lta href "" onMouseOver
"document.photo.src 'images/harrison_ford_rollov
er.jpg'" onMouseOut"document.photo.src'images/h
arrison_ford.jpg'"gt ltimg src"images/harrison_for
d.jpg" width"240" height"350" name photo alt
"Harrison Picture"gt lt/agt lt/divgt lt/bodygt lt/htmlgt