1. Visual Web Design Dreamweaver Level 2

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

3. Introductions Name Organization What are your current web duties? Upgrading or redesigning?

4. Course Outline 1.Introduction 2.Code Editor 3.Meta Information 4.Tables 5.Forms 6.Cascading Style Sheets

5. 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:

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

7. Code Editor (pg. 409-412) True HTML editor Code completion Tag hints Invalid code checker Line numbers Collapse code blocks

8. Code Editor

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

10. Working With the Code Editor Exercise 1 in handout Page 408

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

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

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

14. Working with Meta information Exercise 2 in handout Page 82 More on meta: http://searchenginewatch.com/show Page.html?page=2167931

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

16. Create Table Using Table button on Insert Bar

17. Tables Table Column Table Row Basic 3 Column By 3 Row Table Table Cell

18. Content Control No TablesTables

19. 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)

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

21. Working with Tables Exercises 3 through 5 in handout Project 1 in handout Page 259

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

23. Form Objects Text fields ( tag) Radio buttons ( tag) List/menu ( tag) Text Area ( tag)

24. How Forms Work Email 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 mailto:me@myweb.com Form notifies you by email

25. Working With Forms Exercises 6 through 17 in handout Page 291

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

27. Inserting Styles Redefining tags Page styles –Classes –IDs and Pseudo-classes External Style Sheets and linking

28. CSS Advantages and Disadvantages Fewer tags “Lighter” pages Centralized control More options for design Ease of Updating Browser support Browser support! AdvantagesDisadvantages

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

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