7/27/2019 Backpackers Lessons
1/14
Dreamweaver CS5
1 ljsnay4/30/13
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
7/27/2019 Backpackers Lessons
2/14
Dreamweaver CS5
2 ljsnay4/30/13
ContentsGetting 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
7/27/2019 Backpackers Lessons
3/14
Dreamweaver CS5
3 ljsnay4/30/13
Getting Started
1. Place student exercise folder backpackers_stu on desktop2. Define the folder as your root folder (Site, new Site ) Backpackers3. In Dreamweaver (CLASSIC VIEW) Create a new blank HTML document4. 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
Style Sheet File As Dialog box
File name: backpackers.css
Save, OK
New CSS rule dialog box
Save Style Sheet As Dialog Box
7/27/2019 Backpackers Lessons
4/14
Dreamweaver CS5
4 ljsnay4/30/13
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: body
ID: wrapper
New CSS Rule, OK, OK, OK.
Wrapper div tag properties
background: #fff (white)
margin: 0
padding: 0
width: 800 px
Save
7/27/2019 Backpackers Lessons
5/14
Dreamweaver CS5
5 ljsnay4/30/13
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
7/27/2019 Backpackers Lessons
6/14
Dreamweaver CS5
6 ljsnay4/30/13
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: 0
padding: 0
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
7/27/2019 Backpackers Lessons
7/14
Dreamweaver CS5
7 ljsnay4/30/13
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
http://www.colorcombos.com/colorschemes/107/ColorCombo107.htmlhttp://www.colorcombos.com/colorschemes/107/ColorCombo107.htmlhttp://www.colorcombos.com/colorschemes/107/ColorCombo107.html7/27/2019 Backpackers Lessons
8/14
Dreamweaver CS5
8 ljsnay4/30/13
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 sidebarSelect 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 mainInsert Image: index-main
Main: Add Text above image Camp Site 1
Save, View in Browser.
7/27/2019 Backpackers Lessons
9/14
Dreamweaver CS5
9 ljsnay4/30/13
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: [email protected]
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
mailto:[email protected]:[email protected]:[email protected]7/27/2019 Backpackers Lessons
10/14
Dreamweaver CS5
10 ljsnay4/30/13
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
7/27/2019 Backpackers Lessons
11/14
Dreamweaver CS5
11 ljsnay4/30/13
Note: remove wrapper placeholder text
Content for id "header" Goes Here
Content for id "main-blank" Goes Here
Content for id "sidebar" Goes Here
Content for id "footer" Goes Here
Content for id "wrapper" Goes Here
7/27/2019 Backpackers Lessons
12/14
Dreamweaver CS5
12 ljsnay4/30/13
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
7/27/2019 Backpackers Lessons
13/14
Dreamweaver CS5
13 ljsnay4/30/13
Create about page from TemplateFile 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
7/27/2019 Backpackers Lessons
14/14
Dreamweaver CS5
14 ljsnay4/30/13
Create wildlife page from template
wildlife.html
Create supplies page from template
supplies.html
Create outings page from template
outings.html
Create join page from template
Join.html
Save all Test in Browser
Top Related