Rock Creek Schools



Course Length: 1 semester

Grade Level: 11

Prerequisite: None

Textbooks: Adobe Dreamweaver CS3—Comprehensive Concepts & Techniques; Shelly, Cashman, Wells, & Freund; Thomson Course Technology Publisher; Copyright 2009

Course Description: Web Page Design will introduce students to web page programming languages such as HTML, XHTML, Java, Javascript, etc., and web authoring software packages. Students will learn how to design a web page and incorporate text, graphics, links, tables, and animation. Ethics involving the World Wide Web will be presented and discussed.

Methods of Teaching: A variety of teaching methods are used for this class including demonstrations, guided practice, and hands-on activities.

Pre-test & Post-test: A pre-test is not used in this class.

The post-test is a final project used as a CRT. The final project involves each student creating a web page for a company or organization utilizing techniques and concepts of web page design.

Grading Method: Grades are determined using daily hands-on assignments, unit projects, and a final project applying their knowledge to a real-life situation.

Course Outline:

Web Site Development and Adobe Dreamweaver CS3

I. The Internet

II. The World Wide Web and Web Browsers

a. Accessing the Web

b. Web Browsers

III. Types of Web Sites

IV. Planning a Web Site

a. Planning Basics—Purpose

b. Planning Basics—Content

V. Web Site Navigation

a. Design Basics—Navigation Map

VI. Developing a Web Site

a. Development Basics—Typography, Images, Page Layout, and Color

VII. Reviewing and Testing a Web Site Publishing a Web Site

a. Publishing Basics—Domain Name, Server Space, and Uploading

VIII. Maintaining a Web Site

IX. Methods and Tools Used to Create Web Pages

X. Web Site Languages

XI. Web Page Authoring Programs

XII. Creating a Dreamweaver Web Page and Local Site

What Is Adobe Dreamweaver CS3?

I. Starting Dreamweaver

II. The Dreamweaver Workspace

a. Title Bar

b. Document Window

c. Panels and Panel Groups

d. Status Bar

e. Vertical Bar

f. Menu Bar

g. Toolbars

h. Opening and Closing Panels

III. Defining a Local Site

a. Creating the Local Root Folder and Subfolders

b. Using Site Definition to Create a Local Site

c. Copying Data Files to the Colorado Parks Folder

d. Removing or Editing a Web Site

IV. Saving a Web Page and Preparing Your Workspace

a. Rulers

b. The Index Page

V. Web Page Backgrounds

a. Adding a Background Image

VI. Adding Text to a Web Page

a. Organizing Your Workspace

b. Adding Text

VII. Formatting Text

a. Property Inspector Features

b. Collapsing/Hiding the Property Inspector

c. Applying Property Inspector Text-Related Features

d. Text Headings

e. Centering Text

f. Specifying Font Types

g. Types of Lists

h. Bold Formatting

i. Understanding Line Breaks

j. Web-Safe Colors

k. Changing Text Color

VIII. Web Page Titles

a. Changing a Web Page Title

IX. Other Web Page Enhancements

a. Special Characters

X. Check Spelling

XI. Previewing a Web Page in a Browser

a. Selecting a Browser

b. Previewing a Web Page

XII. Printing a Web Page

XIII. Dreamweaver Help System

Adding Web Pages, Links, and Images

I. Managing a Web Site

a. Copying Data Files to the Local Web Site

b. Starting Dreamweaver and Opening a Web Site

c. Opening a Web Page

II. The Files Panel

a. The Home Page and the Site Map

b. Setting a Home Page

III. Adding Pages to a Web Site

a. Opening a New Document Window

b. Creating the National Parks Web Page

c. Creating the National Monuments Web Page

IV. Images

a. Image File Formats

b. Background Colors and Background Images

c. Assets Panel

d. Accessibility

e. Invisible Elements

f. Inserting an Image into a Web Page

g. Property Inspector Image Features

h. Aligning an Image

i. Adjusting Space around Images

j. Image Editing Tools

V. Understanding Different Types of Links

a. Named Anchor

b. Relative Links

c. Adding Text for the Relative Links

d. Creating a Relative Link Using Drag-and-Drop

e. Creating a Relative Link Using the Context Menu

f. Creating a Relative Link to the Home Page

g. Creating an Absolute Link

h. E-Mail Links

i. Creating an E-Mail Link

j. Changing the Color of Links

k. Editing and Deleting Links

VI. The Site Map

a. Viewing the Site Map

b. Displaying the Site Map and Local Files

VII. Source Code View

a. Using Code View and Design View

b. Modifying Source Code

c. Formatting Titles for Consistency

Tables and Page Layout

I. Understanding and Planning Page Layout

a. Standard Mode and Layout Mode

b. Copying Data Files to the Local Web Site

c. Starting Dreamweaver and Opening a Web Site

II. Adding Pages to a Web Site

a. Opening a New Document Window

b. Creating the Rocky Mountain National Park Web Page

III. Understanding Tables

a. Inserting a Table into the Rocky Mountain National Park Page

b. The Insert Bar

c. Category Types

d. Layout Category

e. Table Defaults and Accessibility

IV. Standard Mode

a. Property Inspector Table Features

b. Cell, Row, and Column Properties

c. Table Formatting Conflicts

d. Understanding HTML Structure within a Table

e. Selecting the Table and Selecting Cells

f. Centering a Table

g. Changing the Default Cell Alignment

h. Specifying Column Width

i. Table ID and Accessibility

j. Adding Text to a Web Page

k. Adding a Second Table

l. Adjusting the Table Width

m. Editing and Modifying Table Structure

n. Merging Cells and Adding Images

o. Splitting and Merging Cells

p. Adding a Table Border and a Table Border Color

V. Layout Mode

a. Using Visual Guides

b. Creating a Layout Table

c. Layout Table and Layout Cell Properties

d. Adding Content and Images to the Cells

e. Centering the Table in Standard Mode

VI. Head Content

a. Head Content Elements

Creating and Using Interactive Forms

I. Understanding How Forms Work

a. Form Processing

b. Copying Data Files to the Local Web Site

c. Starting Dreamweaver and Opening a Web Site

II. Form Design

a. Horizontal Rules

b. Inserting a Horizontal Rule

III. Forms and Web Pages

a. Inserting a Form

b. Property Inspector Form Properties

c. Setting Form Properties

d. Inserting a Table into a Form

e. Formatting the Table within the Form

IV. Form Objects

a. Text Fields

b. Inserting Text in a Form

c. Single-Line Text Fields

d. Check Boxes

e. List/Menu

f. Pop-Up Menus

g. Jump Menus

h. Textarea Text Fields

i. Form Buttons

j. Radio Buttons and Radio Button Groups

k. Form Objects, the Label Button, and Accessibility

l. Adding a Form to the Volunteer.htm Web Page

m. Inserting an E-Mail Address Text Box

n. Radio Groups

o. Adding Links

V. Behaviors

a. Using Behaviors with Forms

b. Viewing and Testing the Forms

Templates and Style Sheets

I. Understanding Templates

a. Creating a Template

b. Saving a Template

c. The Dreamweaver Template

d. Editable and Noneditable Regions

e. Designing the Template

f. Adding Tables for Images and Links

g. Adding Editable Regions

h. Displaying the Insert Bar Templates Commands

i. Marking Existing Content as an Editable Region

II. Introduction to Style Sheets

a. HTML Styles

b. Cascading Style Sheets

c. Conflicting Styles

d. The CSS Styles Panel

e. Defining Style Attributes

f. Adding a Style and Saving the Style Sheet

g. Style Sheets and Links

h. Style Sheet Maintenance

i. Creating the Web Page for the Dinosaur National Monument

j. Expanded Tables Mode

III. CSS Style Definition Category Descriptions

Absolute Positioning, Image Maps, and Navigation Bars

I. Understanding AP Elements

a. AP Divs and DHTML

b. AP Div Property Inspector

c. Using the Rulers as a Visual Guide

d. The AP Element-Code Marker

e. The AP Elements Panel

f. Adding Objects to AP Elements

g. Nesting, Overlapping, and Stacking Elements

h. Selecting Stacked AP Elements

i. Image Maps

j. Creating a Client-Side Image Map

II. Behaviors

a. Adding Behaviors

b. Positioning AP Elements

c. Selecting, Aligning, and Resizing Multiple AP Elements

d. The Netscape Resize Fix

e. The Navigation Bar and Date Object

f. Preparing the Index Page and Adding the Date Object

g. Creating a Navigation Bar

Page Layout with Frames

I. Advantages and Disadvantages of Frames

II. Frameset and Frame Basics

a. Frameset Layout

b. Creating the Frameset

c. Frameset Properties

III. Selecting and Naming Frames and the Frameset

a. Displaying the Frames Panel

b. Frames and Framesets

c. Selecting a Frame

d. Frames Properties

e. Naming and Saving the Frames

f. Deleting a Frame

g. Naming and Saving the Frameset

IV. Formatting the Frames

a. The Title_Frame

b. Adding an Image to the Title_Frame.htm File

c. The Navigate_Frame

V. Flash Buttons

a. Inserting Flash Buttons into the Navigate_Frame

b. Inserting the Remaining Buttons

c. Adjusting Column Width

d. The Content_Frame

e. Linking and Targeting

f. Adding a Border and Border Color to the Framesets

g. Applying the Border and Border Color to the Nested Frameset

h. Adding a No-Frames Link to the Information Page

i. Adding a Link to the Colorado Parks Web Site Index Page

Animation and Behaviors

I. Introduction to Timelines

a. Timeline Features

b. The Timelines Panel

c. Nonlinear Animations

d. Editing a Timeline

e. Adding Behaviors to the Timeline

f. Controlling the Timeline

g. Linear, or Straight-Line, Path Animations

h. Adding AP Elements to a Timeline

i. Adjusting the Number of Frames

j. Adding Keyframes to Show and Hide AP Elements

k. Using Behaviors to Pause the Slides

l. Previewing a Timeline in the Timelines Panel

m. Adding a Start Button

n. Linking to the Tour and Slide Show Pages

Designing with Interactive Media

I. Media Objects

II. Adobe Flash

a. Flash Objects

b. Adding Flash Text

c. Editing Flash Text

d. Flash Movies

e. Adding a Flash Movie

f. Adding a Link to Go to the Index Page

III. Audio on the Web Page

a. ActiveX versus Plug-ins

b. Adding Sound to the Splash Page

c. Embedding an Audio File

d. To Embed an Audio File

e. Adding Video to a Web Page

f. The Results Panel

g. Using the Link Checker

IV. Checking for Plug-ins

V. Shockwave

VI. Java Applets

Rock Creek High School

U.S.D. 323

|COURSE TITLE: Web Page Design |

|Hardware Configuration |

|Item |Lab Configuration: |

|Operating System |Windows XP Professional |

|Processor |Pentium 4 – 930 3.0 Ghz |

|Memory |1 GB (2x512 MB) RAM |

|Hard Drive Size |80 GB |

|CD-ROM or DVD |16x8x16x4 DVD ±RW |

|Monitor |17" |

|Video Ram |256 MB VIVO/TVO/SVID |

|Internet Access |Internet Explorer 7.0 |

|Network |Windows Server 2003 |

Rock Creek High School

U.S.D. 323

|COURSE TITLE: Web Page Design |

|Peripheral Devices and Other Technology |

|Item |Comments |

|Printer |Dell 5100cn |

|Scanner |HP Scanjet 8250 |

|Multimedia Projector |Epson PowerLight 83+ |

|Digital Camera |Kodak EasyShare DX6340 |

| |Canon EOS Digital Rebel xTi |

Rock Creek High School

U.S.D. 323

|COURSE TITLE: Web Page Design |

|Software Configuration |

|Software Package |Software Brand Name and Version # |

|Operating System |Microsoft Windows XP Professional |

|Word Processor |Microsoft Office 2007-Word |

|Graphics |Adobe PhotoShop CS3 |

| |Adobe Fireworks CS3 |

| |Microsoft Photo Editor |

|Spreadsheet |Microsoft Office 2007-Excel |

|Telecommunications |Microsoft Internet Explorer 7.0 |

|Web Page Authoring |Adobe Dreamweaver CS3 |

| |Adobe Flash CS3 |

| |Microsoft Office 2007-FrontPage |

|Graphic Animation |Adobe Dreamweaver CS3 |

| |Adobe Flash CS3 |

|XHTML Programming |Adobe Dreamweaver CS3 |

-----------------------

Web Page Design

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download