Dreamweaver CS5

Build a Web Site with Dreamweaver CS5 using Div Tags, CSS styles pages, Flash Animation with Music and Videos

View of index page

Dreamweaver CS5

Contents
Getting Started.............................................................................................................................................. 3 Create the body tag ...................................................................................................................................... 4 Apply properties Create body CSS Style ....................................................................................................... 4 Create wrapper Div Tag ................................................................................................................................ 5 Create header Div Tag................................................................................................................................... 5 Create main Div Tag ...................................................................................................................................... 6 Create sidebar Div Tag .................................................................................................................................. 6 Create footer Div Tag .................................................................................................................................... 7 Selecting a Color Group ................................................................................................................................ 8 Add content to header .................................................................................................................................. 9 Add content to sidebar ............................................................................................................................... 10 Add content to main ................................................................................................................................... 10 Add content to Footer ................................................................................................................................ 11 Add CSS Rule to the footer.......................................................................................................................... 11 Add another CSS rule to style to the footer................................................................................................ 11 Create an additional Page ........................................................................................................................... 12 Create 3 Editable Regions ........................................................................................................................... 14 Create a Template....................................................................................................................................... 15 Create new pages from Template............................................................................................................... 16

Dreamweaver CS5

Getting Started
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 Root Folder. 1. Place student exercise folder 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: BackpackersHome Page, Save as: index.html (ensure saved in root) 5. Create a new CSS rule.

Dreamweaver CS5

Create the body tag

Contextual Selector type Tag

Selector name, type body

Rule Definition

New File Sheet

New CSS rule dialog box

Note: Clicking OK on the New CSS Rule dialog box automatically opens the Save Style Sheet File As Dialog box.

Type in: backpackers.css

SAVE. Note this automatically open the CSS Rule Definition Dialog box, OK
Save Style Sheet File As Backpacker

Apply properties Create body CSS Style

body div tag properties Choose body and apply the following properties: background #bbb margin 0 padding 0 align-text center (tabbing after each entry to accept or create new property)
4

Dreamweaver CS5

Create wrapper Div Tag

This div tag is to be placed after the start of the body tag INSERT > LAYOUT OBJECTS > Div Tag After the start of the body tag Type wrapper as ID Select New CSS Rule Button, OK, OK, OK.

wrapper div tag properties background #fff margin 0 padding 0 width 800

Create header Div Tag

This div tag is to be placed after the start of the wrapper tag (within the wrapper) INSERT > LAYOUT OBJECTS > Div Tag After the start of the wrapper tag Type header as ID Select New CSS Rule Button OK, OK, OK header div tag background #E0D67D text-align - center height 125

Dreamweaver CS5

Create main Div Tag

This div tag is to be placed after the header tag (within the wrapper) INSERT > LAYOUT OBJECTS > Div Tag After the header tag Type main as ID Select New CSS Rule Button OK, OK, OK

main div tags properties: background #867F27 margin 0 padding 0 height 400 float - right

Create sidebar Div Tag

This div tag is to be placed after the main tag (within the wrapper) INSERT > LAYOUT OBJECTS > Div Tag After the main div tag Type sidebar as ID Select New CSS Rule Button OK, OK, OK sidebar div tag properties: background #601407 height 400 px float left width 225 px

Dreamweaver CS5

Create footer Div Tag

This div tag is to be placed after the sidebar tag (within the wrapper) INSERT > LAYOUT OBJECTS > Div Tag After the sidebar tag Type footer as ID Select New CSS Rule Button, OK, OK, OK

footer div tag properties: background #7E5B33 height 125px clear - both
Save, View in browser

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

Dreamweaver CS5

Selecting a Color Group

color combo http://www.colorcombos.com/color-schemes/107/ColorCombo107.html then 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

Dreamweaver CS5

Add content to header

Select and delete placeholder text, Select header tag and insert properties: background image: logo and header image. To header tag add property: Padding top 20 px. Select between logo and header images and add five non breaking spaces. CONTROL SHIFT SPACE (five times)

Dreamweaver CS5

Add content to sidebar

Select and delete placeholder text, enter then Type: HOME (enter), About Us (enter), Wild Life (enter), Supplies (enter), Group Outings (enter) Page Properties> Links = Trebuchet 16 white

Add content to main

Insert Image: camp2 Save, View in Browser.

Browser view with sidebar text links created, and camp2 image inserted 10

Dreamweaver CS5

Add content to Footer

After the start of the footer tag, Insert Div Tags: Foot1, Foot2, and Foot3. 1. In foot1 add properties: height 125, width 250px, align-text center, float left Type: HAVE A LOOK AROUND Home | About Us | Contact Us| Join Our Mailing List 2. In foot 2 add properties height 125, width 250px, align-text center, float left, type: GET IN TOUCH Tel - (619)222-5822 Email: [email protected] 3. In Foot 3 height 125, width 250px, align-text center, float left, Insert images: Facebook, Twitter, YouTube with image icons. Change size to 75px x 60px each

Add CSS Rule to the footer

Create a new CSS Style for the headers in the three footers. Named foothead Properties for foothead: Color #E0D67D, Verdana 14, Bold, line height 18 Add padding top 15 to foot1, foot2 and foot3

Add another CSS rule to style to the footer

Create a new CSS Rule: Footdata; Arial 13 bold (color = top header #601407)

Browser view of footers with CSS Rules Foothead and Footdata

11

Dreamweaver CS5 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.

Create an additional Page

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 main sidebar footer

12

Dreamweaver CS5

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

13

Dreamweaver CS5

Create 3 Editable Regions

Select content of header and Insert > Template object > editasble region, named header Select content of header and Insert > Template object > editasble region, named sidebar Select content of header and Insert > Template object > editasble region, named main Save as Template: backpack-template, Close the templte document.

blank page with editable reasons header main and sidebar

14

Dreamweaver CS5

Create a Template

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

15

Dreamweaver CS5

Create new pages from Template

When the new page from template opens only the three editable regions can be edited. 1. 2. 3. 4. Add a title to the header editable region Add any navigations links in the sidebar editable region Add content to the main editable Save as about.html

From the template follow the four step process to create: Lake.html Wildlife.html Seasons.html Remember to save often and links the index page as well as the links in the individual pages Before testing in browser.

16

Dreamweaver CS5
ljsnay8/12

17