Lectures for Web Design

• Understanding Web Site Design
• Understanding the Internet and web sites (2:28)
• Planning and designing a web site (4:33)
• Creating graphics for web sites (7:00)

• Creating a Web Page
• Creating your first web page (5:06)
• Adding content (6:55)
• Adding and stylizing links (7:02)
• Positioning elements (6:47)

• Stylizing Content
• Creating an HTML5 layout (6:50)
• Customizing the style (9:20)
• Adding rich typography (6:25)

• Creating a Flexible Layout
• Creating a layout that fits all browsers (6:10)
• Making CSS more flexible (5:37)
• Creating a mobile layout (12:28)

• Adding Navigation and Pages
• Adding a menu bar (4:08) - uses Spry Menu Bar
• Customizing the menu bar (7:29)
• Creating and linking multiple pages (8:52)

• Adding a Portfolio
• Adding a gallery widget (4:28)
• Changing the content (7:23)
• Customizing the style (5:27)

• Using Content from Other Sources
• Adding a Twitter feed (4:10)
• Adding video content (2:37)

• Creating a Contact Form
• Adding input fields 6:39)
• Sending contact form content (5:56)

• Testing and Uploading
• Testing the web site (8:17)
• Uploading the web site (8:29)
• Refining the site for search engines (4:11)

• Wikipedia: HTML | XHTML

• Resources to Learn (X)HTML
• HTML 101
• W3Schools
• HTML Goodies
• HTML Code Tutorial
  

• Basics
• Hierarchy of Tags
• HTML Element
• Block Elements: <div>
• Inline Elements: <span>
• HTML Attributes
• id used to specify unique id for element
• class mostly used to point to CSS class
• Hyperlink
• Hyperlink tag: <a>
• Relative vs. Absolute links
• Table
• Table tags: <table> | <tr> | <td>
• Image
• Image tag: <img />

• Reference
• HTML Tags Reference
• HTML Special Characters Cheat Sheet

• Doctype
• W3C
• W3Schools

• Encoding
• Unicode
• UFT-8: dominant character encoding for files, e-mail, web pages and software that manipulate textual data.

• XHTML Validation
• validator.w3.org
• More info at W3schools

• How to View Source Code in Browser
• IE: Page > View Source
• Firefox: Tools > Web Developer > Page Source
• Safari: View > View Source
• Chrome: Page > Developer > View Souce

• Simple Code Editor for HTML, CSS, JavaScript & PHP coding
• NotePad++ (Windows)
• TextWrangler (Mac)
• Info about Text / HTML Editors

Videos Demos:

• Intro to Dreamweaver CS4 (please use the index on the left of video to navigate to specific parts of the video).
• Part1 (12:20) Topics covered:
  - Intro to DW
  - Workspace & Panels
  - New HTML file
  - Setting Page Properties
  - Insert & Edit Table
  
• Part2 (11:08) Topics covered:
  - Define New Site (in CS5 site definition dialog has changed)
  - Upload Files to Server and Set Permissions.
• Site Definition in Dreamweaver CS5 (5:08)

Dreamweaver CS6

• Adobe TV Learn Dreamweaver CS6 Videos
• Using Fluid Grid Layouts
• Using CSS Transitions Panel

Dreamweaver CS5.5

• Tutorials
• HTML5 and CSS3 in Dreamweaver CS5.5
• Related Videos
• DW Enhanced HTML5 Capabilities (7:29)
• DW Updated Support for CSS3 (16:16)

Dreamweaver CS5

• Tutorials
• Build First Website

• Related Videos
• DW Learn Dreamweaver CS5
• DW GS:1 Defining New Site (4:42)
• DW GS:2 Creating New Documents (5:23)
• DW GS:3 Adding Structure to Text (8:36)
• DW GS:4 Managing Assets (13:13)
• DW GS:5 Placing Image (7:44)
• DW GS:6 Creating Links (11:10)
• DW GS:7 Understanding Style Sheets (2:23)
• DW GS:8 Control CSS from Property Inspector (5:21)
• DW GS:9 Using LiveView and CSS Inspect (7:58)

• Understanding Web Site Design
• Understanding the Internet and web sites (2:28)
• Planning and designing a web site (4:33)
• Creating graphics for web sites (7:00)

• Creating a Web Page
• Creating your first web page (5:06)
• Adding content (6:55)
• Adding and stylizing links (7:02)
• Positioning elements (6:47)

• Stylizing Content
• Creating an HTML5 layout (6:50)
• Customizing the style (9:20)
• Adding rich typography (6:25)

• Creating a Flexible Layout
• Creating a layout that fits all browsers (6:10)
• Making CSS more flexible (5:37)
• Creating a mobile layout (12:28)

• Adding Navigation and Pages
• Adding a menu bar (4:08) - uses Spry Menu Bar
• Customizing the menu bar (7:29)
• Creating and linking multiple pages (8:52)

• Adding a Portfolio
• Adding a gallery widget (4:28)
• Changing the content (7:23)
• Customizing the style (5:27)

• Using Content from Other Sources
• Adding a Twitter feed (4:10)
• Adding video content (2:37)

• Creating a Contact Form
• Adding input fields 6:39)
• Sending contact form content (5:56)

• Testing and Uploading
• Testing the web site (8:17)
• Uploading the web site (8:29)
• Refining the site for search engines (4:11)

• Dreamweaver Interface
• Looking at Welcome screen (5:09)
• Exploring Windows and Mac interface differences (5:06)
• Arranging Panels (8:44)
• Managing Workspaces (10:14)
• Exploring Application toolbar (6:21)
• Exploring Document toolbar (8:47)
• Working with Property Inspector (9:30)
• Using Insert panel (6:30)

• Site Control
• Understanding basic site structure (3:46)
• Exploring file naming conventions (2:10)
• Defining new site (5:23)
• Managing files and folders (7:57)
• Adding remote servers (7:04)
• Uploading files (12:46)
• Previewing in browsers (9:11)
  
• Managing multiple sites (4:46)

• Creating New Documents
• Creating new documents (6:49)
  Uses html5 as default doctype.
• Setting up new document preferences (5:30)
  Uses .htm (.html just as good :); doctype: XHTML 1.0 Transitional or HTML5.
• Setting accessibility preferences (6:49)
• Working with starter pages (4:32)
• Managing starter pages (13:01)

• Adding and Structuring Text
• Getting text into Dreamweaver (8:43)
• Importing Word documents (4:06)
• Adding structure to text (7:35)
• Creating lists (4:35)
• Using the Quick Tag Editor (8:24)

• Working with Tables
• Reviewing table structure (5:20)
• Importing tabular data (6:46)
• Creating accessible tables (6:11)
• Exploring basic table styling (9:42)
• Styling alternate rows (8:57)
• Creating custom table borders (7:34)

• Free FTP Software
• Filezilla (Windows / Mac)
• Screenshots
• Documentation
• WinSCP (Windows)
• Fugu (Mac)
• CyberDuck (Mac)
• SSH (Windows)

• Permissions
• Types of Permissions
• Read : for being able to read the file/directory
• Write : for being able to write in the file/directory
• Execute : for being able to access the file/directory
• Who are Permissions set for?
• Owner : you
• Group : group you belong to
• Others : the rest of the world
  

• Understanding Web Site Design
• Understanding the Internet and web sites (2:28)
• Planning and designing a web site (4:33)
• Creating graphics for web sites (7:00)

• Creating a Web Page
• Creating your first web page (5:06)
• Adding content (6:55)
• Adding and stylizing links (7:02)
• Positioning elements (6:47)

• Stylizing Content
• Creating an HTML5 layout (6:50)
• Customizing the style (9:20)
• Adding rich typography (6:25)

• Creating a Flexible Layout
• Creating a layout that fits all browsers (6:10)
• Making CSS more flexible (5:37)
• Creating a mobile layout (12:28)

• Adding Navigation and Pages
• Adding a menu bar (4:08) - uses Spry Menu Bar
• Customizing the menu bar (7:29)
• Creating and linking multiple pages (8:52)

• Adding a Portfolio
• Adding a gallery widget (4:28)
• Changing the content (7:23)
• Customizing the style (5:27)

• Using Content from Other Sources
• Adding a Twitter feed (4:10)
• Adding video content (2:37)

• Creating a Contact Form
• Adding input fields 6:39)
• Sending contact form content (5:56)

• Testing and Uploading
• Testing the web site (8:17)
• Uploading the web site (8:29)
• Refining the site for search engines (4:11)

• Creating Links
• Link basics (3:17)
• Setting site linking preferences (2:19)
• Creating links in Dreamweaver (9:17)
• Using absolute links (3:43)
• Using named anchors (6:41)
• Creating an email link (5:25)
• Creating CSS-based rollovers (5:41)

• Working with Images

• Managing assets in Dreamweaver (7:30)
• Setting external image editing preferences (4:26)
• Placing images on the page (10:12)
• Exploring Photoshop integration (7:17)
• Modifying Smart Objects (9:42)
• Modifying image properties (8:04)
• Styling images with CSS (6:45)
• Using background graphics (7:28)
• Positioning background graphics (10:10)

• Shaping Page Using Typography
• Understanding Classic and Modernist typographic pages (7:03) 
• Understanding how to create Rhythm and Tension (6:00)
• Applying typography skills when making design decisions (4:54)

• Visually Chunking Text
• Understanding how we "chunk" visual elements (3:59)
• Developing a system of hierarchy (2:17)

• Maximizing Readability
• Understanding how we read (4:34)
• Understanding ems (6:17)
• Understanding how color affects readability (3:58)

• Using Fonts to Communicate Meaning
  of Word or Headline
• Understanding how good typography promotes reading (2:09)
• Understanding legibility (4:41)
• Understanding how fonts convey meaning (5:19)
• Choosing web-safe fonts to convey meaning (6:13)
• Using font size, case, style, letter spacing, weight, and color to convey meaning (6:22)
• Choosing web fonts to convey meaning (6:23)
• Downloading web fonts (4:09)
• Applying web fonts in CSS with @font-face (5:47)

Illustrator for Web Design with Justin Seeley (LyndaCampus)

• Working with Text
• Exploring Rules of Typography (4:01)

• Graphic Design
• Swiss Graphic Design
• The Grid System
• 960.gs is one of the most popular CSS grid-focused frameworks for grid layouts based on 960 pixels.
• designbygrid.com

• Typography
• webtypography.net
• Typographic Style Applied to Web

• Web Design
• 10 Principles Of Effective Web Design
• Common Sense Web Design with Steve Krug
• Yahoo Style Guide for Writing for the Web
• Resources for Building Better Sites and Apps
• Time-Saving and Educational Resources for Web Designers

• Color Design
• Color Picker
• Kuler for creating color schemes (see Week 3 - Related for LyndaCampus resources).
• Color Scheme Designer

• Debug: Easy Things to Check First
• Be careful about typos.
  
• Upload file in the correct location.
  
• Make sure spelling of URL = spelling of filename.
  
• XHTML is case-sensitive.
  
• CSS
• Use colon (:) to separate your properties from value (color: red;).
• Complete each property-value pair with semicolon (;)
  
• No spaces between number and their units (16px).
  
• Still Stuck, then check for typos and easy stuff first :)
  

• Understanding Web Site Design
• Understanding the Internet and web sites (2:28)
• Planning and designing a web site (4:33)
• Creating graphics for web sites (7:00)

• Creating a Web Page
• Creating your first web page (5:06)
• Adding content (6:55)
• Adding and stylizing links (7:02)
• Positioning elements (6:47)

• Stylizing Content
• Creating an HTML5 layout (6:50)
• Customizing the style (9:20)
• Adding rich typography (6:25)

• Creating a Flexible Layout
• Creating a layout that fits all browsers (6:10)
• Making CSS more flexible (5:37)
• Creating a mobile layout (12:28)

• Adding Navigation and Pages
• Adding a menu bar (4:08) - uses Spry Menu Bar
• Customizing the menu bar (7:29)
• Creating and linking multiple pages (8:52)

• Adding a Portfolio
• Adding a gallery widget (4:28)
• Changing the content (7:23)
• Customizing the style (5:27)

• Using Content from Other Sources
• Adding a Twitter feed (4:10)
• Adding video content (2:37)

• Creating a Contact Form
• Adding input fields 6:39)
• Sending contact form content (5:56)

• Testing and Uploading
• Testing the web site (8:17)
• Uploading the web site (8:29)
• Refining the site for search engines (4:11)

• Managing CSS
• Setting CSS preferences (9:32)
• An overview of the CSS Styles panel (9:23)
• Creating a new CSS rule (6:42)
• Using the CSS Rule Definition dialog (7:25)
• Organizing styles (7:22)
• Modifying style properties (6:17)
• Controlling CSS through the Property inspector (6:37)
• Attaching external style sheets (5:54)
  
• Using CSS visual aids (7:03)
• Using CSS Inspect (6:48)
• Using the Code Navigator (6:39) to explore cascade to troubleshoot styling and edit CSS rule directly.

• Coding in Dreamweaver
• Exploring the Code toolbar (5:41)
• Setting code preferences (7:19)
• Using code hints (8:08)
• Wrapping tags (5:07) speed up and reduce errors
• Adding comments (6:29)
• Using snippets (7:32)
• Formatting source code (4:25)

• Introducing HTML5
• A brief overview of HTML5 (3:57)
• What's in the HTML5 specification? (8:17)
• Why do we need new structural elements? (6:53)

• HTML5 Basics
• Defining HTML5 documents (5:05)
• HTML5 syntax (9:14)
• Elements: header (5:22) | nav (4:55) | section (4:51) | article (4:48) | aside (4:13) | footer (4:17)
• Content model overview (7:48)

• HTML5 Document Structure
• Understanding the outline algorithm (3:17)
• Creating document sections (8:25)
• Using headings properly (9:01)
• Using hgroup to override sectioning (4:17)
• Properly nesting structure (7:17)
• Sectioning roots (3:11)

• Coding an HTML5 Site: Initial Page Structure
• Organizing content (4:41)
• Planning document structure (5:47)
• Choosing the right structural element (4:43)
• Checking document outlines (5:27)
• Coding initial page structure (5:28)
• Using class and ID attributes (5:31)
• Structuring headers (13:13)
• Building navigation (7:01)
• Structuring footers (6:39)

• Coding an HTML5 Site: Grouping Content

• Working with figure and figcaption (7:12)
• Grouping content with asides (3:46)
• Using divs in HTML5 (5:00)
• Working with lists in HTML5 (7:10)
• The return of bold and italic (5:52)
• Citing works semantically (6:32)
• Using the address element (5:24)
• Using the small element (4:24)
• Using the mark element (5:16)
• Working with date and time (11:55)
• Creating block-level links (8:53)
• Understanding link relationships (9:28)
• Defining link relationships (6:23)

• Structuring Semantic HTML5 for the Real World
• Current browser support (7:38)
• Ensuring block-level display (4:03)
• Adding support for elements in older browsers (5:41)
• Additional Resources (3:46)

• CSS: Wikipedia | Why | What | Where to Store
• Resources to Learn CSS
• CSS 101
• W3Schools
• Interactive Examples
  
• Setting up Background Color of Page
• Set Image as Background of Page
  
• Fixed background image (image will not scroll with rest of the page)
• Complex Background Example
  
• Text Elements Properties
  
• Setting Border around paragraphs
  
• Setting Margins
  
• Floating Image
  
• Design Webpage
  
• CSS Zen Garden
• Dynamic Drive CSS Library
• Maxdesign
  

• Other Resources
• CSS Reference | CSS Alphabetical Reference
• Cascading Style Sheet Videos

• CSS Validation
• W3C CSS Validator

SlideShare presentation by Russ Weakley

• CSS Cascade
• Inheritance (html hierarchy matters; many properties inherited by descendants of elements) example
• Specificity (the more specific the selector, the stronger the rule) example
• Location (rule that appears later wins) example

• Key Concepts
• Constructing Complex Selectors
• Box Model
• Floating Element
• Absolutely Positioned Element
• CSS Properties
• position | Learn CSS Positioning in 10 Steps
• z-index
• Resources - CSS Navigation
• XHTML Tags | CSS Properties
• unordered list <ul> | list item <li>
• CSS display property and demo
• CSS overflow property and demo
• Hyperlink <a> tag and CSS Selectors: :link | :visited |:focus | :hover | :active
  

• HTML5
• HTML5 Specifications
• W3School
• HTML5 Intro | HTML5 Reference
• HTML5rocks
• Tutorials | Demos | Resources
• 9_Websites_to_Learn_HTML5_Basics
• HTML5 Readiness

• CSS3
• W3School
• CSS3 Intro | CSS3 Reference
• Dynamic Drive CSS3 Demos

Videos Demos:

• Step1: Resize Image & Export; Image Preview Dialog; Crop Image & Export (8:27)
• Step2: Trace Outline with Polygon Lasso Tool; Hard / Feathered Edge; Layers Panel (7:58)
• Step3: Create Text and Attach to Path (3:38)
• Step4: Create Animated GIF (5:25)

• Tutorials

• Working with Images
• Fireworks CS5 Intro
• New Vector Tools

• Related Videos for CS6
• Learn Fireworks CS6 Videos

• Image Resources
• Search Creative Commons
• Flickr
• Free Stock Photography

• Understanding the Interface
• Learning Fireworks menus and shortcuts (1:24)
• Getting around document and the Application bar (4:06)
• Working with panels (2:14)
• Using the Tools panel (2:34)
• Working with the Properties panel (2:57)

• Working with Files
• Opening documents and setting up the workspace (3:28)
• Organizing documents (3:06)
• Importing graphics (4:23)
• Saving and exporting files (4:18)
• Optimizing and previewing graphics (6:15)

• Organizing Documents
• Working with layers (9:30)
• Working with pages (9:39)
• Working with Web Layers (8:37)

• Drawing with Fireworks
• Setting up rulers, guides, and grids (7:16)
• Drawing lines and shapes (7:30)
• Selecting and grouping objects (5:25)
• Applying fills (9:40)
• Styling strokes (4:59)
• Applying opacity, blending modes, and Live Filters (6:23)
• Using styles (5:20)
• Styling with patterns and textures (1:47)
• Drawing vector shapes (7:28)
• Working with freeform tools and reshaping vector objects (2:26)

• Working with Objects
• Working with bitmaps (10:55)
• Working with text (9:38)
• Aligning and distributing elements (7:09)
• Transforming objects (3:22)
• Moving, cloning, and duplicating (6:05)
• Reshaping with the Path panel (12:15)
• Masking objects (9:10)
• Animating objects with states (6:33) Animated GIFs.
• Using the 9-Slice Scaling tool (5:26)

• Key Concepts
• Box Model
• Floating Element
• Absolutely Positioned Element
• Learn CSS Positioning in 10 Steps

• CSS Cascade
• Inheritance (html hierarchy matters; many properties inherited by descendants of elements) example
• Specificity (the more specific the selector, the stronger the rule) example
• Location (rule that appears later wins) example

• Debug: Easy Things to Check First
• Be careful about typos.
  
• Upload file in the correct location.
  
• Make sure spelling of URL = spelling of filename.
  
• XHTML is case-sensitive.
  
• CSS
• Use colon (:) to separate your properties from value (color: red;).
• Complete each property-value pair with semicolon (;)
  
• No spaces between number and their units (16px).
  
• Still Stuck, then check for typos and easy stuff first :)
  

• Slideshow Tutorials
• 25 Best jQuery Slideshow Plugins
• 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials
• Top 20+ jQuery Slideshow and Image Gallery Tutorials
• Find Further Resources
• Google Search
• Delicious Bookmarks

• CSS Properties
• position | Learn CSS Positioning in 10 Steps
• z-index

• jQuery
• Site | Tutorials | Documentation

Videos Demos:

• Step1: Using Tracing Image to Place AP Elements (12:04)
• Step2a: Create Nested AP Elements and Insert Images (6:51)
• Step2b: Use Copy, Deselect and Paste to create AP Elements
  with text (4:54)
• Step2c: Create Disjointed Rollover by Attaching "Show-Hide Elements" Behavior to Images (7:17)
• Step3: How to Incorporate AP Element in "Elastic" (Liquid) Layout (6:24)

• Tutorials
• Best CSS Practices
• Resources
• Smashing Magazine CSS
• Get Your Design to Browser (pdf)

Videos Demos:

• Three Columns Templates
• Three Columns Overview (3:45) Briefly discuss key aspects of the Fixed or Liquid Three Columns templates not already mentioned in Web Design Templates lecture.
• Sample Web Template
• Sample Template Tutorial provided by Knight Digital Media Center for the Sample Template that uses image rollovers in the navigation structure and images as backgrounds.
• Sample Template Overview (12:22) Briefly discuss key aspects of the template and how the image rollovers are created and can be customized.

Resources

• Web Design Templates
• Smashing Magazine: 100 Free High-Quality XHTML/CSS Templates
• Smashing Magazine: Free Design Templates
• Open Source Web Design
• Styleshout: Free CSS Website Templates
• OpenSourceTemplates.org
• Find Further Resources
• Google Search
• Delicious Bookmarks

• Understanding Web Site Design
• Understanding the Internet and web sites (2:28)
• Planning and designing a web site (4:33)
• Creating graphics for web sites (7:00)

• Creating a Web Page
• Creating your first web page (5:06)
• Adding content (6:55)
• Adding and stylizing links (7:02)
• Positioning elements (6:47)

• Stylizing Content
• Creating an HTML5 layout (6:50)
• Customizing the style (9:20)
• Adding rich typography (6:25)

• Creating a Flexible Layout
• Creating a layout that fits all browsers (6:10)
• Making CSS more flexible (5:37)
• Creating a mobile layout (12:28)

• Adding Navigation and Pages
• Adding a menu bar (4:08) - uses Spry Menu Bar
• Customizing the menu bar (7:29)
• Creating and linking multiple pages (8:52)

• Adding a Portfolio
• Adding a gallery widget (4:28)
• Changing the content (7:23)
• Customizing the style (5:27)

• Using Content from Other Sources
• Adding a Twitter feed (4:10)
• Adding video content (2:37)

• Creating a Contact Form
• Adding input fields 6:39)
• Sending contact form content (5:56)

• Testing and Uploading
• Testing the web site (8:17)
• Uploading the web site (8:29)
• Refining the site for search engines (4:11)

• Design Considerations
• Page design workflow (3:06)
• Determining page structure (7:18)
• Creating image assets (8:58)
• Creating initial page structure (7:03)
• Adding meaning with classes and IDs (5:23)
• Structuring content with HTML5 (6:06)
• Building internal structure (10:25)

• Layout Basics - some of it already covered in 550
• Box model review (8:47)
• Calculating element dimensions (11:11)
• Understanding margin collapse (7:59)
• Calculating em values (7:41)
• Calculating percentage values (7:51)
• Normal document flow (13:03) CSS code to use to make HTML5 tags understandable to older browsers.
• Controlling element display (8:53)
  
• Using CSS Resets (7:11)
• Fixed, fluid, and responsive layouts (9:09)
  

• Working with Floats - some of it already covered in 550
• Floating elements (7:50)
• Clearing floats (7:28)
• Containing floats (7:50)
• Clearfix technique (10:38)
• Floating inline elements (14:34)
• Two-column floated layouts (8:17)
• Three-column floated layouts (11:30)
• Column height considerations (7:03)
• Creating equal-height columns (10:42)
• Floats: Lab (5:25)
• Floats: Solution (5:21)

• Positioning Elements
• Relative positioning (7:59)
• Absolute positioning (8:59)
• Fixed positioning (4:23)
• Controlling stacking order (8:31)
• Clipping content (8:21)
• Controlling content overflow (5:38)
• Positioning elements: Lab (3:59) 
• Positioning elements: Solution (3:52)

• Building Fixed Layouts
• Design considerations for Fixed Layouts (3:28)
• Establishing the layout grid (7:57)
• Defining column spacing (9:30)
• Applying the grid through CSS (8:56)
• Creating grid-based assets (8:26)
• Grid design resources (6:22)
• Building fixed layouts: Lab (4:07)

• Building Flexible Layouts
• Building Flexible Layouts (2:30)
• Calculating percentage values (8:45)
• Setting flexible width values (6:06)
• Making images flexible (8:10)
• Setting minimum and maximum widths (7:24)
• Building flexible layouts: Lab (4:53)
• Building flexible layouts: Solution (6:47)
  

• Building Responsive Layouts (optional)
• Responsive layout overview (3:49)
• Using media queries (7:16)
• more videos avaibale on LyndaCampus site.

• Key Concepts
• Box Model
• Floating Element
• Absolutely Positioned Element
• Learn CSS Positioning in 10 Steps

• CSS Cascade
• Inheritance (html hierarchy matters; many properties inherited by descendants of elements) example
• Specificity (the more specific the selector, the stronger the rule) example
• Location (rule that appears later wins) example

• Debug: Easy Things to Check First
• Be careful about typos.
  
• Upload file in the correct location.
  
• Make sure spelling of URL = spelling of filename.
  
• XHTML is case-sensitive.
  
• CSS
• Use colon (:) to separate your properties from value (color: red;).
• Complete each property-value pair with semicolon (;)
  
• No spaces between number and their units (16px).
  
• Still Stuck, then check for typos and easy stuff first :)
  

Videos Demos:

• Step0: Insert Image and Set Transparency; Text Mask Effect in Fireworks (2:24)
• Step1: Create Layout and Nested AP Elements; Insert Table in AP Element; Insert & Name Images (7:58)
• Step2: Create Simple and Disjointed Rollovers (14:25)
• Step3: Create Imagemap and Behavior triggered by Mouse Click (7:05)

• Related Videos for CS4
• FW Understand Styles & Symbols (9:24)
• FW In-place Symbol Editing (7:01)
• Optional FW Scale objects with 9-slice scaling

• Adding Interactivity
• Adding CSS3 transitions (8:29)
• Spry overview (2:44)
• Using Spry widgets (3:57)
• Adding Spry effects (8:01)
• Using the Widget Browser (7:04)

• Using Symbols
• Creating graphic symbols (5:41)
• Creating 9-slice scaling symbols (4:00)
• Creating button symbols (7:06)
• Creating animation symbols (7:45)
• Using the Common Library (5:07)

• Using Sprites
• Understanding sprites (4:31)
• Creating symbols for sprites (11:12)
• Exporting sprite CSS (8:35)

• CSS Integration
• Using CSS tools in the Object panel (7:18)
• Working with the CSS Properties panel (6:27)

• jQuery Mobile
• What is jQuery Mobile? (8:46)
• Creating a jQuery Mobile template in Fireworks (12:31)
• Working with a jQuery Mobile template (8:47)

• Enhancing Fireworks
• Creating component symbols (5:31)
• Working with the Commands menu (3:24)
• Adding extensions (7:23)
• Creating commands with the History panel (4:20)
• Using batch commands (7:01)

Videos Demos - CSS Navigation Using Lists:

• Demo (using NotePad++): CSS Navigation (7:54) Use unordered list <u>, list items <li> and CSS rules to create interactive navigation bar with "you are here" indicator.

Videos Demos:

• Step1: Create Primary Navigation using Image Rollovers and Customize to create "you are here" indicator in Dreamweaver CS5 (7:50)
• Step2: Create and Modify Image Rollover in Navigation Structure in Dreamweaver CS4 / CS5 (5:27)
• Step3a: Create Images for Different States of Navigation Categories in Fireworks (14:56)
• Step3b: Export Image for "UP", "Over", "DOWN" and "Over DOWN"; Set Export Area to Have Uniform Margins in Fireworks (8:28)

• Resources
• Navigation Design Trends

• Related Videos for CS4
• FW Understand Styles & Symbols (9:24)
• FW In-place Symbol Editing (7:01)
• Optional FW Scale objects with 9-slice scaling
• Advanced FW Creating CSS/XHTML Layouts: create web pages and export CSS-based layouts (14:58)
• Advanced FW Rapid Prototyping: using disjoint rollovers, symbols, and exporting as HTML and images (9:42)
• Advanced FW Creating Interactive Prototypes: add interactivity to wireframes by creating a navigation bar and using slices and hotspots (10:43)
• Advanced FW Information and Interaction Design: create wireframes and rich symbols (11:14)

• Trends in Navigation Design
• Using icons in navigation (2:14)
• Understanding 3D nav bars (2:25)
• Understanding explanatory navigation (1:51)
• Creating animated navigation (2:56)

• Navigation Techniques
• Converting lists to menus (7:56)
• Working with background images (5:47)
• Implementing sprites (5:53)
• Setting up adjustable backgrounds (9:04)
• Designing accessible navigation (7:05)

• Horizontal Navigation
• Looking at the project (1:04)
• Building up the basic HTML (2:09)
• Displaying top-level links horizontally (8:12)
• Customizing the link states (4:29)
• Adding drop-down menus (HTML) (3:48)
• Working with submenus (CSS) (4:08)
• Achieving interactive submenus (2:21)
• Marking the current page (4:23)

• Vertical Navigation
• Looking at the project (0:57)
• Understanding vertical menus (2:15)
• Defining width for link elements (4:43)
• Using background graphics with navigation (5:45)
• Creating pop-out vertical navigation (6:29)
• Setting link states (3:04)

• Internal and External Navigation

• Identifying anchor tags (7:04)
• Identifying external links (3:09)

• Spry Navigation
• Inserting Spry horizontal menus (7:04)
• Styling Spry menus (6:29)
• Adding Spry vertical menus (5:07)
• Styling Spry vertical menus (10:53)
• Using Spry tabbed navigation (9:33)
• Styling Spry tabbed menus (9:55)
• Including Spry accordion panel menus (5:32)
• Styling Spry accordion menus (11:10)
• Advanced Spry menu techniques (8:32)

• Cutting-Edge Navigation
• Creating jQuery animated image menus (7:45) example
• Using the HTML5 nav tag (3:24)
• Exploring CSS3 enhancements (7:05)

• Resources - CSS Navigation

• XHTML Tags | CSS Properties
• unordered list <ul> | list item <li>
• CSS display property and demo
• CSS overflow property and demo
• Hyperlink <a> tag and CSS Selectors: :link | :visited |:focus | :hover | :active

• Tutorials
• W3Schools - CSS Navigation Bar
• Turning List into Navigation Bar
• CSS Tabbed Navigation
• 30 CSS Navigation Techniques
• 22 CSS / jQuery Navigation Techniques
  

• Dynamic Web
• JavaScript (client-side scripting language)
• PHP (server-side scripting language): PHP software
• MySQL (relational database management system): MySQL software
• Apache (server software): Apache Software Foundation
• Related Content
• AJAX Programming (Asynchronous JavaScript and XML)
• Web 2.0
  

• Programming
• Data Types: such as numbers, text, boolean (true, false)
• Integer | Boolean | Character | String | Floating-Point
• Array: use FOR loop to examine each array item
• Variable: is way to symbolically to refer to data content
• Operators: can be used to perform built-in operations, such as addition (5 + 5, where + is addition operator)
• Statement: combination of variables, operators and data
• Function: collection of statements to perform specific task
• Control Flow of operations (statements, functions) being performed
• Conditional Programming used so that operations are performed only if certain condition is met:
• IF test (only do something if certain condition is true)
• FOR loop (keep doing something only if certain condition is true)
• WHILE loop (keep doing something until certain condition not true anymore)
• Debugging code is essential part of programming ... chasing typos, missing parentheses :)
• Food for Thought
• Poetics of Coding
• Language and Metaphor
  

• Relational Database
• Terminology
• Record = a collection of related fields
• Table = a collection of related records
• Each record is one row in the table
• Each field is one column in the table
• Database = a collection of tables
• Primary Key = field that uniquely identifies a record
• Database Normalization

• SQL = Structured Query Language
• MySQL: Site | Wikipedia | Why | Documentation
• W3Schools Intro
• Specific Chapters in Documentation
• Data Types
• Functions
• SQL Statement Syntax
• Specify Database to Use: USE
• Create Table: CREATE TABLE
• Describe Table: DESCRIBE
• Add Data to Table: INSERT
• Add Column to Table: ALTER TABLE
• Query Database: SELECT
• Replace Row: REPLACE
• Delete Table: DROP TABLE
• MySQL Workbench: Site | Wikipedia | Documentation
• Tutorials
• MySQL Workbench 5.2 Quick-Start Tutorial
• MySQL Workbench 5.2 Querying Quick-Tour

• PHP: Site | Wikipedia | Documentation
• Resources to Learn PHP
• W3Schools
• php.net Tutorial

• PHP Language Reference
• Predefined Variables:
• $_POST
• Data Types
• Strings: single quoted | double quoted (variable will be evaluated and its value included in string)
• Array
• Variables
• Basics ($variable_name)
• Operators
• Arithmetic | ++/-- | Logical | String | Array
• Control Structures:
• Intro
• IF test: if | else | elseif
• FOR loop: for | foreach (easy way to iterate over arrays)
• MySQL functions in PHP
• Connect to Database: mysql_connect
• Select Database: mysql_select_db
• Formulate SQL query string (= $query)
• Send Query: mysql_query to return results (=$result)
• Number of Rows in results: mysql_num_rows
• Contents of One Cell from results: mysql_result (slow way to access data in results)
• Fetch Next Row in results: mysql_fetch_row (more efficient way to access data in results)

• PHP: Site | Wikipedia | Documentation
• Resources to Learn PHP
• W3Schools
• php.net Tutorial

• PHP Language Reference
• Predefined Variables:
• $_POST
• Data Types
• Strings: single quoted | double quoted (variable will be evaluated and its value included in string)
• Array
• Variables
• Basics ($variable_name)
• Operators
• Arithmetic | ++/-- | Logical | String | Array
• Control Structures:
• Intro
• IF test: if | else | elseif
• FOR loop: for | foreach (easy way to iterate over arrays)
• MySQL functions in PHP
• Connect to Database: mysql_connect
• Select Database: mysql_select_db
• Formulate SQL query string (= $query)
• Send Query: mysql_query to return results (=$result)
• Number of Rows in results: mysql_num_rows
• Contents of One Cell from results: mysql_result (slow way to access data in results)
• Fetch Next Row in results: mysql_fetch_row (more efficient way to access data in results)

• Process of using MySQL with PHP:
• Step 1: Connect to MySQL
  mysql_connect
• Step 2: Select database to use
  mysql_select_db
• Step 3: Create query string
  $query = "SELECT * FROM tablename";
• Step 4: Perform query
  $result = mysql_query($query);
• Step 5: Retrieve results and output it to a web page
• $rows = mysql_num_rows($result);
• $row = mysql_fetch_row($result);
• Repeat Steps 3 to 5 until all desired data retrieved.

• CSS with PHP
• Define CSS class in style tag inside of head tag (or external CSS file)
• Need to escape \ the quotation marks used to refer to id or class names inside of PHP
  echo '<div class=\'resultStyle\'>';
• Remember to have closing tag </div>

• Troubleshooting Tips - watch out for:
• Spelling Errors
• Filename Errors
• Missing Closing " or ) or }
• Missing ;
• Missing Permissions
• Saved in Wrong Location on Server
• Check Easy Things First

• Process of using MySQL with PHP:
• Step 1: Connect to MySQL
  mysql_connect
• Step 2: Select database to use
  mysql_select_db
• Step 3: Create query string
  $query = "SELECT * FROM tablename";
• Step 4: Perform query
  $result = mysql_query($query);
• Step 5: Retrieve results and output it to a web page
• $rows = mysql_num_rows($result);
• $row = mysql_fetch_row($result);
• Repeat Steps 3 to 5 until all desired data retrieved.

• CSS with PHP
• Define CSS class in style tag inside of head tag (or external CSS file)
• Need to escape \ the quotation marks used to refer to id or class names inside of PHP
  echo '<div class=\'resultStyle\'>';
• Remember to have closing tag </div>

• Troubleshooting Tips - watch out for:
• Spelling Errors
• Filename Errors
• Missing Closing " or ) or }
• Missing ;
• Missing Permissions
• Saved in Wrong Location on Server
• Check Easy Things First

• Understanding Responsive Web Design
• The foundation of responsive web design (6:02)
• Structuring fluid grids (3:38)
• Understanding media queries (4:26)

• Fluid Grid Layouts in Dreamweaver
• Exploring the default Fluid Grid Layout (8:34)
• Adding building block div tags (7:52)
• Inserting content (8:11)
• Targeting a phone design (5:28)
• Balancing tablet layouts (9:35)

• Expanding on a Fluid Grid Structure
• Modifying the number of grid columns (6:35)
• Adjusting column widths and margins (6:09)
• Including advanced page elements (6:22)

• Enhanced Media Queries
• Building media queries from the ground up (9:28)
• Working with additional media queries (3:35)
• Handling orientation changes (2:23)
• Working with high-resolution displays (11:31)

• Flexible Images and Media
• Core CSS manipulation (6:59)
• Applying JavaScript techniques (9:19)
• Setting up server-side solutions (8:07)