Backpackers Lessons

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


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


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


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


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


After tag: header

ID: sidebar


Add Properties to sidebar:

background: #601407 (brn red)

height: 400 px

float: left

width: 225 px


6/14

Dreamweaver CS5

6 ljsnay4/30/13

Create main Div Tag


After tag sidebar

ID: main


Add Properties: main

background: #867F27 (olive)

margin: 0

padding: 0

height: 400 px

float: right

width: 575 px

Create footer Div Tag


After TAG: main

ID: footer


Add properties to footer:

background: #7E5B33 (brown)

height: 125px

clear: both

Save, View in browser


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


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.


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]


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


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


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


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


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

Documents

Backpackers Lessons