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: [Link] (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: [Link]
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
[Link]
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. [Link], [Link],
[Link], [Link], [Link]
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@[Link]
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: [Link] Title: Blank Template
Link the new page to the web [Link] 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 [Link]
Fill editable region footer
Insert social media Images in footer
Hyperlink all Social Contacts
[Link] created from template
13
ljsnay4/30/13
Dreamweaver CS5
Create wildlife page from template
Create supplies page from template
[Link]
[Link]
Create outings page from template
Create join page from template
[Link]
[Link]
Save all Test in Browser
14
ljsnay4/30/13
