Visual Web Design

Dreamweaver Level 2

Hospitality

• Restrooms• Food and Drink• Turn cell phones off or set to vibrate• Smoking• Comfort• Breaks• Class Hours

Introductions

• Name• Organization• What are your current web duties?• Upgrading or redesigning?

Course Outline1. Introduction

2. Code Editor

3. Meta Information

4. Tables

5. Forms

6. Cascading Style Sheets

Objectives

• Identify and select the HTML code editor• Manipulate HTML code using the various tools in

the code editor• Define the two major categories of META

information• Insert META information using the appropriate

tools• Define the structure of a table• Create, position and edit a table• Identify and manipulate table attributes

Given the Dreamweaver visual editor, and the book Macromedia Dreamweaver 8, participants will perform hands-on exercises and projects to:

Objectives (continued)

• Discuss the definition of a form• Identify major form elements• Create and test a form• Define Cascading Style Sheets• Identify the three major ways to insert a

style• Create an inline style• Create style classes • Link to an external style sheet

Code Editor (pg. 409-412)

• True HTML editor• Code completion• Tag hints• Invalid code checker• Line numbers• Collapse code blocks

Code Editor

Code EditorOpen Documents- Provides a list of open documents

Collapse Tag- Collapses selected tag

Collapse Selection- Collapses highlighted code

Collapse All

Select Tag

Select Balanced Braces- Selects everything between braces

Turn On Line Numbers

Highlight Invalid Code

Apply Comment

Remove Comment

Wrap Tag

Recent Snippets- Displays a list of recent code snippets

Indent Code

Outdent Code

Format Source Code- Controls the application of source code

Working With the Code Editor

• Exercise 1 in handout• Page 408

Meta (pg. 81-82)

• Information used to communicate with the browser or search engines

• Not visible to the user• Two types most commonly used

– Keywords– Descriptions

Meta Keywords

• Describe your site to search engines for easier indexing

• Retrieved from body text• OK to use plural forms and phrases• Using words not in your site causes lower

ranking for those words• Using too many words causes lower ranking

for your site• Each page should have it’s own unique set of

keywords

Meta Descriptions

• Also aid search engines in indexing your site

• Some search engines pull the description back and insert it below the link in their results pages

• Using too long a description causes lower ranking for your site

• Each page should have it’s own unique description

• Be sure to use proper spelling and grammar. Your users may see this description

Working with Meta information

• Exercise 2 in handout• Page 82• More on meta:

http://searchenginewatch.com/showPage.html?page=2167931

Tables (pg. 255-290)

• Divided into rows and columns • Help organize content• Allow more precise alignment of text

and images• Attributes applied to the entire table

or individual cells

Create Table

• Using Table button on Insert Bar

Tables

Table Column

Table Row

Basic 3 Column By 3 Row Table

Table Cell

Content Control

No Tables Tables

Table Attributes (p. 262)

Table Properties

Cell Properties

Merge/split cells

Cell alignment

Cell height/width Cell Type/Text wrap Cell BG/color info

Table BG/color infoTable Name

Column/RowAdjustment

Table SizeAdjustment

CellPaddingCellSpacing

Table Alignment(to page)

Table “Gotchas”

• Applying attributes to wrong part of table• Unexpected Default Values• Dreamweaver manipulating the table on

it’s own (design view)• Alignment issues• Browser display differences• User Agent displays• Re-sizing tables in design view• “Layout” tables

Working with Tables

• Exercises 3 through 5 in handout• Project 1 in handout• Page 259

Forms (pg. 291-307)

• Used to collect information• Require communication with server• May also be used as a form of

navigation or to upload files• Multiple sets of tags• Require much planning and

management

Form Objects

Text fields (<input type=“text”> tag)

Radio buttons (<input type =“radio”> tag)

Radio buttons (<input type =“checkbox”> tag)

Radio buttons (<input type =“submit”> tag)

List/menu (<Select> tag)

Text Area (<textarea> tag)

How Forms Work

Email

Basic Script

Database

Direct: User computer to your computer

User fills out form Results notification

Script processes and stores info in file

Data sent to database

.asp, coldfusion, php, SQL

Searchable Results

.asp, coldfusion, php, SQL

mailto:me@myweb.com

Form notifies you by email

Working With Forms

• Exercises 6 through 17 in handout• Page 291

Cascading Style Sheets (pg. 131-167)

• Used for styling page content• Higher level of control over text• Small, manageable files• One to many relationships• Replacing tables for content

organization• Browser support improving

Inserting Styles

• Redefining tags• Page styles

– Classes– IDs and Pseudo-classes

• External Style Sheets and linking

CSS Advantages and Disadvantages

• Fewer tags• “Lighter” pages• Centralized

control• More options

for design• Ease of

Updating

• Browser support

• Browser support

• Browser support!

Advantages Disadvantages

Working with CSS

• Exercises 18 through 20• Project 2• Exercise 21• Page 136

CSS vs. Tables (extra info)

• CSS-P uses CSS with <div> tags to position content like tables<div#container>

</div>

Acts like the <table> tag

<div#heading>Acts like a spanned table cell

</div>

<div#nav>

</div>

Acts like a spanned table cell

<div#content>

</div>

Acts like a spanned table cell