Dreamweaver CS5

In this exercise we will create a website using div tags, and style them using CSS.
Images and animations are in the student folder Backpackers-stu.
Build a Web Site with Dreamweaver CS5 using Div Tags, CSS styles pages, Flash
Animation with Music and Videos.

View of index page

ljsnay4/30/13

Dreamweaver CS5

Contents
Getting Started.............................................................................................................................................. 3
Create the body tag ...................................................................................................................................... 3
Style Sheet File As Dialog box ....................................................................................................................... 3
Apply properties Create body CSS Style ....................................................................................................... 4
Create header Div Tag................................................................................................................................... 5
Create main Div Tag ...................................................................................................................................... 6
Create sidebar Div Tag .................................................................................................................................. 5
Create footer Div Tag .................................................................................................................................... 6
Selecting a Color Group ................................................................................................................................ 7
Add content to header .................................................................................................................................. 8
Add content to sidebar ................................................................................................................................. 8
Add content to main ..................................................................................................................................... 8
Add content to Footer.................................................................................................................................. 9
Create a Template....................................................................................................................................... 12
Create 3 Editable Regions ........................................................................................................................... 12
Create about page from Template ............................................................................................................. 13
Fill Editable Region header ......................................................................................................................... 13
Fill editable region main ............................................................................................................................. 13
Fill editable region footer ........................................................................................................................... 13

ljsnay4/30/13

Dreamweaver CS5

Getting Started
1. Place student exercise folder backpackers_stu on desktop
2. Define the folder as your root folder (Site, new Site ) Backpackers
3. In Dreamweaver (CLASSIC VIEW) Create a new blank HTML document
4. Titles as: Backpackers Home Page, Save as: index.html (ensure saved in root)
5. Create a new CSS rule.

Create the body tag

Selector type: Tag
Selector name: body
Rule Definition: New File Sheet
New CSS rule dialog box

Style Sheet File As Dialog box

File name: backpackers.css
Save, OK

Save Style Sheet As Dialog Box

ljsnay4/30/13

Dreamweaver CS5

Apply properties Create body CSS Style

Choose body and apply the following properties:

background: #bbb (medium gray)

margin: 0
padding: 0
text-align:

center

Create wrapper Div Tag

After the start of tag:
ID:

body

wrapper

New CSS Rule, OK, OK, OK.

Wrapper div tag properties

background: #fff (white)
margin: 0
padding: 0
width: 800 px

Save
4

ljsnay4/30/13

Dreamweaver CS5

Create header Div Tag

INSERT > LAYOUT OBJECTS > Div Tag
After start of tag: wrapper
ID: header
New CSS Rule, OK, OK, OK

Add Properties header:

background:

#E0D67D (tan)

text-align:

center

height:

125 px

Create sidebar Div Tag

INSERT > LAYOUT OBJECTS > Div Tag
After tag:

header

ID: sidebar
New CSS Rule, OK, OK, OK
Add Properties to sidebar:
background: #601407 (brn red)
height:

400 px

float:

left

width:

225 px

ljsnay4/30/13

Dreamweaver CS5

Create main Div Tag

INSERT > LAYOUT OBJECTS > Div Tag
After tag

sidebar

ID: main
New CSS Rule, OK, OK, OK
Add Properties: main
background: #867F27 (olive)
margin:

padding:

height:

400 px

float:

right

width:

575 px

Create footer Div Tag

INSERT > LAYOUT OBJECTS > Div Tag
After TAG: main
ID: footer
New CSS Rule, OK, OK, OK
Add properties to footer:
background: #7E5B33 (brown)
height:

125px

clear:

both

Save, View in browser

ljsnay4/30/13

Dreamweaver CS5

Browser view of Four ID Named, Colorized, Sized, Floated, Div Tags

Selecting a Color Group

Looking for a color scheme?
Something like Earthy foresty
outdoorsy green rugged tough colors?

Go to Web site
http://www.colorcombos.com/colorschemes/107/ColorCombo107.html
Select link: Color Schemes and Color palettes
Page through the various pages
of color combinations,
Screen copy with hex codes showing
On page 18 screen copied
color scheme with hex codes

ljsnay4/30/13

Dreamweaver CS5

Add content to header

Select and delete placeholder text,
Insert Image: logo and then header image.
Add Property: padding-top: 20 px.
Select between logo and header image
and add five non breaking spaces.
CONTROL SHIFT SPACE (five times)

Add content to sidebar

Select and delete placeholder text, enter then Type:
HOME (enter), About Us (enter), Wild Life (enter),
Supplies (enter), Outings, (enter) Join
Link each. index.html, about.html,
wildlife.html, supplies.html, join.html
Page Properties> Links = Trebuchet 16 white

Add content to main

Insert Image: index-main
Main: Add Text above image Camp Site 1

Save, View in Browser.

ljsnay4/30/13

Dreamweaver CS5

Add content to Footer

Create two div tags inside of footer
After the start of the footer tag,
Insert Div Tags: Foot1, Foot2,
Add Properties: In foot1
height:

125

width:

225px

text-align: center
float:

left

Type: GET IN TOUCH , Call US (619)222-5822 Email: info@backpackers.com

Add Properties: In foot2
height:

125,

width:

575px,

text-align: center,
float:

right,

Type; SOCIAL MEDIA CONTACTS, then

Insert images: Facebook, Twitter, uTube icons. Change size to 63px 63px each

Add CSS Rule to the footer

Create a new CSS Style: foothead (for the headers of the footers)
Properties for foothead: Verdana 14, Bold, line height 18 Color #E0D67D,
(Sand Color) Apply foothead to GET IN TOUCH text in foot 1 and SOCIAL MEDIA
CONTACTS in foot 2

ljsnay4/30/13

Dreamweaver CS5

Create an additional Page

Create an additional page that follows the same general theme and design. Once
an additional page is created it can be used as a template for all other pages.
All of the div tags are available for reuse. Create a new HTML Page called blank.

Each of the Div tags that were made and styled for the index page can be used to
assemble another like page.
Create a new HTML Page
Save as: Blank.html Title: Blank Template
Link the new page to the web design.css style sheet.
Important Note: To reuse existing div tags make sure
to select OK rather than new CSS RULE, otherwise
duplicate tags will be made.
Insert Div Tag: Wrapper Within wrapper insert div tags:
header,
sidebar
main
footer

10

ljsnay4/30/13

Dreamweaver CS5

Note: remove wrapper placeholder text

<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="main-blank">Content for id "main-blank" Goes Here</div>
<div id="sidebar">Content for id "sidebar" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
Content for id "wrapper" Goes Here</div>
</body>
</html>

11

ljsnay4/30/13

Dreamweaver CS5

Create a Template
Create 3 Editable Regions
Select content of header and Insert > Template object >
editable region, named header
Select content of main and Insert > Template object >
editable region, named main
Select content of footer and Insert > Template object >
editable region, named footer
Save as Template: backpack-template, Close the template document.

logo picture, title and main body area will be editable all other cells not.

blank page with editable reasons header main and sidebar

12

ljsnay4/30/13

Dreamweaver CS5

Create about page from Template

File New from template
Select backpacker template
Notice the editable regions

Fill Editable Region header

Add logo-about image,
then logo-header
to the header editable region
Add properties to space and center the
two images across the page

Fill editable region main

Insert aboutUs-main image
Save as about.html

Fill editable region footer

Insert social media Images in footer
Hyperlink all Social Contacts
about.html created from template

13

ljsnay4/30/13

Dreamweaver CS5

Create wildlife page from template

Create supplies page from template

wildlife.html

supplies.html

Create outings page from template

Create join page from template

outings.html

Join.html

Save all Test in Browser

14

ljsnay4/30/13