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.html

7/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: 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

mailto:info@backpackers.commailto:info@backpackers.commailto:info@backpackers.com

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