Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or...
-
Upload
miranda-quinn -
Category
Documents
-
view
219 -
download
1
Transcript of Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or...
![Page 1: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/1.jpg)
Visual Web Design
Dreamweaver Level 2
![Page 2: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/2.jpg)
Hospitality
• Restrooms• Food and Drink• Turn cell phones off or set to vibrate• Smoking• Comfort• Breaks• Class Hours
![Page 3: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/3.jpg)
Introductions
• Name• Organization• What are your current web duties?• Upgrading or redesigning?
![Page 4: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/4.jpg)
Course Outline1. Introduction
2. Code Editor
3. Meta Information
4. Tables
5. Forms
6. Cascading Style Sheets
![Page 5: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/5.jpg)
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:
![Page 6: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/6.jpg)
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
![Page 7: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/7.jpg)
Code Editor (pg. 409-412)
• True HTML editor• Code completion• Tag hints• Invalid code checker• Line numbers• Collapse code blocks
![Page 8: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/8.jpg)
Code Editor
![Page 9: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/9.jpg)
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
![Page 10: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/10.jpg)
Working With the Code Editor
• Exercise 1 in handout• Page 408
![Page 11: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/11.jpg)
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
![Page 12: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/12.jpg)
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
![Page 13: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/13.jpg)
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
![Page 14: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/14.jpg)
Working with Meta information
• Exercise 2 in handout• Page 82• More on meta:
http://searchenginewatch.com/showPage.html?page=2167931
![Page 15: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/15.jpg)
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
![Page 16: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/16.jpg)
Create Table
• Using Table button on Insert Bar
![Page 17: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/17.jpg)
Tables
Table Column
Table Row
Basic 3 Column By 3 Row Table
Table Cell
![Page 18: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/18.jpg)
Content Control
No Tables Tables
![Page 19: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/19.jpg)
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)
![Page 20: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/20.jpg)
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
![Page 21: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/21.jpg)
Working with Tables
• Exercises 3 through 5 in handout• Project 1 in handout• Page 259
![Page 22: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/22.jpg)
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
![Page 23: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/23.jpg)
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)
![Page 24: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/24.jpg)
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
![Page 25: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/25.jpg)
Working With Forms
• Exercises 6 through 17 in handout• Page 291
![Page 26: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/26.jpg)
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
![Page 27: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/27.jpg)
Inserting Styles
• Redefining tags• Page styles
– Classes– IDs and Pseudo-classes
• External Style Sheets and linking
![Page 28: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/28.jpg)
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
![Page 29: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/29.jpg)
Working with CSS
• Exercises 18 through 20• Project 2• Exercise 21• Page 136
![Page 30: Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.](https://reader035.fdocuments.net/reader035/viewer/2022062802/56649e905503460f94b95a2d/html5/thumbnails/30.jpg)
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