1. Intro
2. Three Pillars of Modern Web Design
2.1. HTML5
2.2. CSS3
2.3. JavaScript
3. Design Workflow
3.1. Creative Brief
3.1.1. see template file
3.2. Keyword research
3.2.1. Infogrpahic
3.2.2. Google Keywords Tool
3.3. Layout Sketch
3.3.1. Moqup wireframe tool
3.4. Design Spec
3.4.1. Color scheme
3.4.2. Fonts
3.4.3. Style consistent with industry
3.5. Create website layout in DW
3.6. Add content
3.6.1. Text
3.6.2. Images
3.7. Add Styles
3.7.1. CSS Stylesheet
3.8. Add interactivity
3.8.1. jQuery
4. HTML5 Basics
4.1. HTML Page Structure
4.1.1. <!doctype> declaration
4.1.1.1. html
4.1.2. <html> tag
4.1.2.1. <head> section
4.1.2.1.1. meta tags
4.1.2.1.2. Styles
4.1.2.1.3. Scripts
4.1.2.2. <body> section
4.1.2.2.1. HTML code
4.1.2.2.2. Scripts
4.2. Tags
4.2.1. Layout
4.2.1.1. <div>
4.2.1.1.1. CSS
4.2.2. Text
4.2.2.1. <h1>...<h6>
4.2.2.2. <p>
4.2.2.3. <ul>, <ol>
4.2.2.3.1. <li>
4.2.2.4. <strong>
4.2.2.5. <em>
4.2.3. Forms
4.2.3.1. <form>
4.2.3.2. <input>
4.2.3.2.1. type=
4.2.3.3. <label>
4.2.3.4. <button>
4.2.3.5. <fieldset>
4.2.3.5.1. <legend>
4.2.4. Tables
4.2.4.1. <table>
4.2.4.2. <tr>
4.2.4.3. <td>
4.2.4.4. <th>
4.2.5. Other
4.2.5.1. <a>
4.2.5.1.1. href=
4.2.5.1.2. id=
4.2.5.2. <img>
4.2.5.2.1. src=
4.2.5.3. <span>
4.2.5.4. <br>
4.2.5.5. <hr>
4.2.5.6. <!-- COMMENT -->
4.2.6. Attributes
4.2.6.1. id=
4.2.6.1.1. Once per page
4.2.6.2. class=
4.2.6.2.1. Many per page
5. CSS3 Basics
5.1. Style
5.1.1. Selector
5.1.1.1. What does the style apply to?
5.1.1.1.1. HTML tag
5.1.1.1.2. Anything with a specific Identifier
5.1.1.1.3. Anything with a specific Class
5.1.1.1.4. Compound
5.1.2. Property:
5.1.2.1. e.g. color
5.1.3. Value
5.1.3.1. e.g. red
5.2. CSS reset
5.3. Properties
5.3.1. Layout
5.3.1.1. float
5.3.1.2. clear
5.3.2. Text
5.3.2.1. font-family
5.3.2.2. font-size
5.3.2.3. font-weight
5.3.2.4. font-style
5.3.2.5. color
5.3.2.6. font-variant
5.3.2.7. line-height
5.3.2.8. text-transform
5.3.2.9. text-align
5.3.3. Box Model
5.3.3.1. width
5.3.3.2. height
5.3.3.3. padding
5.3.3.4. border
5.3.3.5. margin
5.3.4. /* comment */
6. What is an Integrated Design Environment?
6.1. IDE
6.1.1. WYSIWYG or Design View
6.1.1.1. Displays preview of page
6.1.2. Code Generator
6.1.2.1. HTML generator
6.1.2.2. CSS3 creation tool
6.1.3. Site Manager
6.1.3.1. Organize files
6.1.3.2. Rebuild links
6.1.4. FTP
6.1.4.1. Puts files on server
7. Web Page Layout
7.1. Short history
7.1.1. iFrames
7.1.2. Table-based
7.1.3. CSS-based
7.2. Who cares?
7.2.1. Google
7.2.1.1. Evaluation now downgrades pages using out-of-date web design
7.3. Layout flow
7.3.1. Top to bottom
7.3.2. Unless we modify it
7.3.2.1. CSS
7.4. Interaction design
7.4.1. Navigation
7.5. User testing
7.6. Examples
8. Interaction Basics
8.1. JavaScript
8.2. jQuery
8.3. jQuery Plugins
8.4. Forms
8.4.1. PHP
8.4.2. ZOHO
9. Course Objectives
9.1. Understand the basics of web design
9.2. Create web sites and pages in DreamWeaver
9.2.1. Understand and create HTML tags
9.2.2. Understand and apply CSS styles
9.3. Create interactive page elements using jQuery
9.4. Create and optimize images in FireWorks
9.5. Understand search engines and page optimaization
10. Images
10.1. Theory
10.1.1. Vector vs Bitmap
10.1.2. Colors
10.1.3. Aliasing
10.2. File types
10.2.1. GIF
10.2.2. JPG
10.2.3. PNG
10.3. Tools
10.3.1. FireWorks
10.3.2. PhotoScape
11. Types of sites
11.1. Brochure
11.1.1. Credibility
11.1.2. Information
11.2. eCommerce
11.2.1. Product catalog
11.2.2. Shopping cart
11.2.3. Payment gateway
11.3. Listings
11.3.1. Realty sales
11.3.2. Auto sales
11.3.3. Rentals
11.4. Directories
11.4.1. Products
11.4.2. Services
11.5. Community
11.5.1. User signup/login
11.5.2. User profiles
11.5.3. User communication