visual web design dreamweaver level 2. hospitality restrooms food and drink turn cell phones off or...
TRANSCRIPT
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
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:[email protected]
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