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 Outline 1.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 ) True HTML editor Code completion Tag hints Invalid code checker Line numbers Collapse code blocks

Code Editor

Open 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 ) 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: Page.html?page=

Tables (pg ) 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 TablesTables

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 info Table Name Column/Row Adjustment Table Size Adjustment CellPadding CellSpacing 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 ) 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 ( tag) Radio buttons ( tag) List/menu ( tag) Text Area ( tag)

How Forms Work Basic Script Database Direct: User computer to your computer User fills out formResults notification Script processes and stores info in file Data sent to database. asp, coldfusion, php, SQL Searchable Results. asp, coldfusion, php, SQL Form notifies you by

Working With Forms Exercises 6 through 17 in handout Page 291

Cascading Style Sheets (pg ) 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! AdvantagesDisadvantages

Working with CSS Exercises 18 through 20 Project 2 Exercise 21 Page 136

CSS vs. Tables (extra info) CSS-P uses CSS with tags to position content like tables Acts like the tag Acts like a spanned table cell Acts like a spanned table cell Acts like a spanned table cell