Dreamweaver MX

1
Dreamweaver MX

• For a 30-day trial
• http//www.macromedia.com/software/dreamweaver/dow
  nload/

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, simple straight)
• (KILL, large legible)
• Easy to Read
• Fonts
• Color/background
• Avoid green/red combinations.
• Avoid text over images.
• Left justified
• Patience
• Mistakes are learning tools.
• Help is readily available.

4
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
5
Organizing Your Page

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

6
Creating your Folders for WF in Explorer

• Create a folder for your site Under aweb
• Create folders for
• images
• assign1
• assign2
• .
• .
• assign10
• exercise1
• .
• .
• exercise10
• Copy your college.jpg

7
Dreamweaver
Site Panel
8
Setting up a New Site

• In Site Panel
• Choose manage Sites
• In the manage Sites Click on NEW Site
• aweb to Name the Site
• HTTP address blank
• Select No for server technology
• Save Site as g\\aweb\
• ServerChoose None
• Done

9
Dreamweaver
10
Dreamweaver

• To create a NEW html webpage
• Choose Frameset under Create New

11
Dreamweaver

• Select OK

12
To add another frame

• Choose the ruler grid (on the left) and drag a
  line until it reaches the existing line
• Drag the old line back into the ruler bar

12
13
Frame Saving

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

14
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

15
Dreamweaver

• To Save the whole webpage
• Click on a frame line
• Save Frameset as index

16
Frameset Saving (FileSave Frameset/ All Frames)

• Make sure that you click on a Frame line, to
  select the whole web page
• Save As index
• Set the Document Title to aweb

17
Different Views

• View Code and Design

18
Frameset Properties

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

19
Preview in Browser (File Preview in Browser
or F12)
20
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.

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 College Image

• Get image from website www.conestogac.on.ca/lstac
  ey
• E3
• College
• Select Logo Frame
• Insert image via Insert menu or Common Toolbar

23
Id Frame

• Insert a Table

24
ID Frame Table Properties

• Top Row
• Select cells to merge Cells in Top row
• Insert your Name and Center
• Middle Row
• Phone Number

24
Preview your page often in the Browser
25
ID Frame Table Properties

• Bottom Row
• Enter your Office Room Number, enter your email
  link (insert email)
• Table properties
• Border 0
• Center the table (click upper left corner of id
  frame)

Preview your page often in the Browser
26
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

27
Menu Frame Table Properties

• Enter Assignment 1 etc in each cell
• Select text and pretend to link to index of each
  assignment
• Properties Assign 110
• Link assign1/assign1.htm exercises
• Target main

27
28
Main Frame Word Document

• Import your timetable
• File import word document
• (you could also create a table in dreamweaver)
• I just changed some of the background