Candyce Mairs

Candyce Mairs

Absolute Positioning

Slide Duration:

Table of Contents

Section 1: Course Introduction
What is Dreamweaver?

3m 15s

Intro
0:00
Dreamweaver Introduction
0:07
Dreamweaver Interface
0:32
Code View
0:48
Design View
1:04
Preview in Browser
1:08
Adobe Products
1:29
Panels and Menus
1:47
Summary
2:31
How to Use the Project Files for this Course

3m 42s

Intro
0:00
Course File Instructions
0:08
Extras Folder
1:46
Summary
2:44
Section 2: Introduction to the Web
URL Basics

5m 53s

Intro
0:00
Domain Name
0:22
Protocol
1:34
Folders and Website Files
2:54
Web page file extension
4:33
Client Server Environment

6m 39s

Intro
0:00
Web Server Example
0:21
Port Number
2:17
Browser Environment
3:45
Other Browsers
4:31
Summary
5:07
Static vs. Dynamic Pages

4m 56s

Intro
0:00
Static Page Request Process
0:30
Dynamic Page Request Process
1:32
Application Server
2:24
Server Side Languages
3:01
Summary of Differences between Static and Dynamic
3:44
Separation of Content & Presentation

6m 35s

Intro
0:00
Three Parts of a Browser
1:15
HTML - Page Structure
1:25
CSS - Styling
2:16
JS - User Interactivity
4:29
Interpreters
5:24
Summary of the Three Parts of a Browser
6:03
Planning the Website Development Process

5m 8s

Intro
0:00
Design Development process
1:24
Initiate Project Process
1:55
Site Development Process
2:08
Project Planning Documents

5m 8s

Intro
0:00
Project Plan
1:16
Design Document Questionnaire
1:45
Design Document Items
2:25
Homepage Wireframe
2:42
Website Wireframe
3:12
Login Process Flowchart
3:35
HTML Naming Conventions

6m 46s

Intro
0:00
Examples of Different Naming Conventions
0:49
Headless Camel Casing
2:34
File Extension Options
4:22
Summary of Naming Conventions
5:25
Creating the Page Designs

5m 44s

Intro
0:00
Examples of Page Designs and Programs
0:40
Photoshop Example
1:27
FireWorks Example
2:11
JPEG Format Example
4:25
Copyright on the Web

3m 30s

Intro
0:00
Copyright Law Links
0:50
Copyrighted Page
1:26
Website Accessibility & the 508 Standard

6m 4s

Intro
0:00
Accessibility Definition
1:53
Accessibility Features
2:30
Four Principles of Accessibility
3:30
Section 3: Working in the Browser
HTML Versions & DOCTYPE

8m 25s

Intro
0:00
XHTML Document Type
0:37
Set Default Document Type
2:31
HTML 5 Document Type and Comparison
4:21
Browser Differences

8m 28s

Intro
0:00
Testing Different Browsers
1:10
Google Analytics
3:36
Browser Developer Tools

6m 11s

Intro
0:00
Google Chrome Developer Tools
0:15
Firefox Web Console
1:32
Internet Explorer Developer Tools
2:34
Change Browser Mode
2:49
Quirks Mode
4:31
CSS Viewer
5:16
Additional Browser Tools

7m 36s

Intro
0:00
Web Developer Toolbar
0:53
View Document Size
1:34
Populate Form Fields
2:24
ColorZilla
2:54
Firefox Extensions
3:53
Install Extension
4:46
Customize Toolbar
5:41
Using Firebug for CSS/JS

5m 50s

Intro
0:00
Installing Firebug
0:28
Firebug Tabs
2:30
JavaScript Console
2:36
HTML Tab
2:47
CSS Tab
3:35
Inspect Elements
3:58
Link to Firebug
5:21
Section 4: The Dreamweaver Interface
The Workspace Switcher

5m 31s

Intro
0:00
Workspace Templates
0:28
Reset Workspace
1:47
Classic Workspace
2:25
Workspace Switcher
3:06
Manage Workspaces
3:35
New Workspace
3:43
Dreamweaver Interface Overview

6m 29s

Intro
0:00
Menus
0:43
Create New HTML
1:33
Design View
1:49
Insert Bar and Tabs
2:21
Document Window
3:24
Properties Tab
4:11
Panels
5:05
Overview and Summary
5:21
Navigating the Interface

8m 14s

Intro
0:00
Modify/Customize Panels
0:44
Move Panels
3:53
Rearrange Panels
4:42
Open and Close Properties Tab
7:13
Dreamweaver Preferences

4m 10s

Intro
0:00
General Preferences
0:23
Allow Multiple Consecutive Spaces
0:44
Fonts
1:09
New Document
1:43
Preview in Browser
2:43
Insert Bar & Insert Menu

4m 26s

Intro
0:00
Create New HTML
0:16
Insert Bar
0:46
Forms Tab
1:03
Common Tab
1:18
Insert Menu
1:39
Insert Bar within Designer Workspace
3:36
Working in Code View

7m

Intro
0:00
Example Page
0:26
Coding Toolbar
1:13
Apply HTML Comment
3:57
Remove Comment
4:39
Properties Area
4:56
Line Numbers
5:58
Summary
6:08
Installing Additional Browsers in Dreamweaver

5m 50s

Intro
0:00
Edit Browser List
0:56
Add a browser
1:49
Set Secondary Browser
3:58
Select Preview in Browser
4:42
Section 5: Getting Started
Defining a Site in Dreamweaver

11m 18s

Intro
0:00
Manage Sites
1:38
Create a New Site
2:57
Files Panel
6:16
Rearranging Site Files
7:10
Local View
9:40
Summary
10:14
The Importance of the Files Panel

7m 2s

Intro
0:00
Blank Example Site in Files Panel
0:13
Files Panel Options
0:59
Edit Menu
2:06
View Menu
2:22
Site Menu
2:30
Delete Files
2:51
Rename File
3:54
Files Refresh
5:31
Section 6: Creating a Page Using a Pre-Defined Layout
Pre-Defined CSS Layout Options

8m 21s

Intro
0:00
Course Files
0:21
Files in Files Panels
1:37
New Document
2:38
Page Type
3:14
Layout Options
3:21
Creating a Pre-Defined CSS Layout Page

7m 18s

Intro
0:00
New HTML5 Layout Page
0:49
Preview in Browser
2:28
Save Page
2:43
Browser Preview
4:35
Page in Files Panel
5:12
Building the Header Area

15m 39s

Intro
0:00
Code View and Comments
0:40
Customizing the Header
1:22
Removing Image Placeholder
2:36
Select Regions
3:38
Adding Text
3:55
Set Page Title
4:24
CSS Styles Panel
7:31
Edit Header Color
8:39
Edit Header Text
9:58
Add CSS Style Rule
11:15
Rule Definition
12:35
Summary
14:36
Modifying the Navigation Column, Part 1

9m 1s

Intro
0:00
Modifying the Side Bar
0:23
Tag Selection
1:07
Changing Position and Background Color
2:04
Changing Text Color
4:59
Changing Hover Text and Background Color
6:49
Summary
8:17
Modifying the Navigation Column, Part 2

10m 36s

Intro
0:00
Modifying the Side Bar
0:30
Editing Link Text
0:34
Correcting Mistakes
1:20
Inserting an Image
3:52
Fixing Format Errors
5:08
Modifying the Header
7:28
Add new Margin Property
8:03
Summary
9:52
Adding Content to the Page

9m 42s

Intro
0:00
Modifying the Main Content Area
0:23
Removing Content
1:15
Inserting Code and Content
2:35
Page and Text Formatting
4:30
Summary
9:21
Modifying the Footer Area

7m 38s

Intro
0:00
Modifying the Footer
0:22
Footer Tag
0:31
Changing the Background Color
1:36
Customizing Text
2:22
Customize Address Tag
3:42
Preview in Safari
5:46
Format Troubleshooting
6:09
Changing the Page Background Color

4m 41s

Intro
0:00
Modify Background Color
1:01
CSS Short Hand
1:39
Save Command Shortcut
2:53
Browser Preview
3:10
Summary
4:03
Section 7: Building a Web Page from Scratch
HTML Page Code

5m 58s

Intro
0:00
HTML5 Page
0:41
Change Default Doctype to HTML5
1:16
HTML5 Code
2:39
Head Section Code
3:01
Title Tag Code
3:41
Importance of Code View
4:16
Summary
5:12
Creating a New Page

4m 34s

Intro
0:00
Keyboard Shortcut to Create New Page
0:49
Saving a New Page
1:21
Create New Page with New Document
3:27
The Importance of a Title

4m 43s

Intro
0:00
Importance of a Title on a Page
0:10
New Document
0:17
Save Document
0:35
Preview in Chrome
0:52
Default Bookmark Title
1:13
Search Engine Optimization
1:35
Preview in Firefox
3:35
Section 8: Adding Text Content
Discovering Paste Special

11m 1s

Intro
0:00
Paste Special Command from Word
1:05
Create New and Save
1:22
Paste Special with Full Formatting
2:44
Clean Up Source Code
4:42
Paste Special with Basic Formatting
5:34
Paste Special with Structure Only
6:30
Paste Special with Text Only
7:29
Change Paste Preferences
8:06
Importing a Word Document

3m 52s

Intro
0:00
Create New and Save
0:42
Add Title
1:11
Import Word Document
1:32
Summary
2:38
Setting Headings

6m 17s

Intro
0:00
Create New and Save
0:17
Add Title
0:40
Add Text
0:47
Insert Heading Tags into Text
1:55
Importance of a Heading Tag
2:43
Paragraphs & Line Breaks

8m 25s

Intro
0:00
Paragraph Tags
1:11
Selecting Text
3:14
Insert Line Break Tag
4:05
Creating a Bulleted List

10m 31s

Intro
0:00
Formatting Content
0:42
Add Title
1:07
Insert Heading Tag
1:39
Creating a List
2:13
Creating an Unordered List
3:07
Example of Incorrect List Formatting
3:23
Creating Nested Lists
5:16
Indent List
5:59
Changing List Type
7:50
Change to Numbered List
8:37
Change Bullet Type
9:04
Creating a Numbered List

4m 21s

Intro
0:00
Formatting Content
0:20
Merging Multiple Lines into Paragraph
1:03
Inserting Header Tag
1:34
Create Numbered List
2:36
Create Ordered List
3:08
A Definition List

4m 27s

Intro
0:00
Creating a Definition List
0:30
Select Text
1:11
Create Definition List from Format Menu
1:29
Definition List Tags
3:21
Setting Bold & Italics

6m 12s

Intro
0:00
Add Bold and Italics to Definition List
0:12
The Destinations Page
0:23
Making Terms Bold
1:12
Bold Tag Information
1:42
Making Definition Italic
4:02
Summary
5:41
Inserting Special Characters

7m 23s

Intro
0:00
ASCII Characters
0:12
Create Copyright Message
2:10
Insert Copyright Symbol
3:23
Section 9: CSS Basics
What is CSS?

6m 3s

Intro
0:00
Cascading Style Sheets
0:05
Example CSS Layouts
0:59
Turning CSS Off Examples
3:27
The Syntax for a CSS Rule

9m 24s

Intro
0:00
Create New and Save
0:27
Add Title
1:05
Adding CSS Styles to a Page
1:18
Dragging Tags
2:24
Placing Content
2:48
Adding a Selector
3:28
Creating Style Rules
4:16
Properties and Values
7:19
CSS Syntax Examples
7:53
CSS Rule Locations

9m 3s

Intro
0:00
Three Locations for Placing Style Rules
0:31
Inline Rule
0:58
Internal or Embedded Rule
1:22
External Rule
1:41
Inline Style Rule
2:08
Internal or Embedded Style Rule
3:35
Examples of Internal/Embedded Style Rule
5:09
External Style Rule
5:59
Example of Linking a Style Sheet
7:13
Summary
8:40
Types of CSS Selectors

9m 51s

Intro
0:00
Three Main Selector Types
0:16
HTML Tag Selector Type
0:35
Class Selector Type
2:40
ID Selector Type
4:35
Selector Rules and Examples
7:17
HTML Tag Selector Example
7:46
Class Selector Example
8:09
ID Selector Example
8:28
Section 10: Formatting with Text Using CSS
Creating an Inline Style Rule

9m 54s

Intro
0:00
Code View for Creating an Inline Header Style
2:02
Creating a Font Type Style
3:14
Creating a Color Style
4:26
Creating a Font Size Style
5:16
Split Horizontally
6:06
Creating Paragraph Styles
7:00
Summary
9:17
Creating an Internal or Embedded Rule

10m 32s

Intro
0:00
Create New and Save
0:35
Add Title
0:45
Adding Text Content
1:26
Add New CSS Style Rule
5:44
Assigning Style Properties
6:56
Duplicate Style Rule
8:12
Modify Style Rule
8:46
Summary
10:17
Working with an External CSS File

9m 27s

Intro
0:00
Move CSS Rules to External Style Sheet
0:32
CSS File in Styles Panel
2:00
Remove Style Tag
2:35
External Style Sheet
2:46
Related Files Toolbar
3:13
Adding Additional Styles
4:53
Summary
8:56
Attaching a Style Sheet

6m 34s

Intro
0:00
Apply External Style Sheet to Another Page
0:56
Attach External Style Sheet
1:09
Apply Same Style Rules to Multiple Tags
2:39
Troubleshooting Style Problems
4:30
Summary
5:44
Creating a Class Selector

12m 29s

Intro
0:00
Create New and Save
0:16
Add Title
0:48
Adding Text Content
0:59
Attaching a Style Sheet
2:05
Adding and Formatting Headers
3:18
Creating a Class
4:27
New CSS Rule
5:24
Setting Class Definition
5:55
Applying a Class to Text
7:30
Troubleshooting Class Errors
7:55
Editing Class Properties
8:53
Edit Rule Definition
8:59
Other Methods for Applying Classes
9:42
Preview in Safari
11:10
Summary
11:53
Dreamweaver Style Tools

11m 14s

Intro
0:00
Code Navigator
0:30
Enable/Disable Styles Option
3:50
Comments Out Style Rule
5:02
Enable/Disable All
6:05
Live View
6:37
Live Code
7:56
Inspect
8:24
Summary
10:10
Section 11: Working with Fonts on the Web
Creating a Custom Font Stack

8m 58s

Intro
0:00
Create New Page
0:13
Properties Area
0:28
Edit Font List
1:36
Adding Style Rules to Content
5:17
Preview in Browser
6:55
Summary
8:35
Working with Web Fonts

5m 36s

Intro
0:00
Fonts Overview
0:07
Adobe Type Service
1:52
Google Fonts
2:40
Font Squirrel
3:26
Font Licensing
3:34
Summary
4:49
Using Google Fonts

13m 32s

Intro
0:00
Google Fonts
0:05
Access and Preview Fonts
0:29
Font Collection Area
2:50
Review Font
4:05
'Use Font' Feature
4:23
Adding Google Fonts
6:21
Adding New Style with Google Font
9:31
Preview in Browser
11:29
Summary
13:10
Adding Fonts from Fontsquirrel

18m 2s

Intro
0:00
Font Squirrel Fonts
0:08
Font Squirrel Website
1:23
Download Font Zip File
2:28
Extract Font File
3:04
Web Font Generator
4:23
Download Web Font Kit
6:38
Extract Web Font Kit
7:44
Working with Font Squirrel Fonts
8:20
HTML Font File Preview
9:29
CSS Font File
9:54
Copying over Font Styles
10:26
Adding Styles
11:56
Preview in Browser
12:40
Troubleshooting Errors
13:25
Adding more Styles
15:13
Preview in Browser
16:13
Summary
16:58
Section 12: Inserting Images
Web Image File Formats

16m 44s

Intro
0:00
Two Different Image Formats
0:43
Vector Graphics
0:52
Raster Images
2:05
Raster Image Formats
2:49
Three Types of Raster Image Formats
2:52
Optimization Process
3:48
GIF Image Format
6:27
JPG Image Format
8:49
PNG Image Format
9:39
Vector Graphics
11:40
Scalable Vector Graphics
12:35
Web Page Image Creation Tips
14:18
Summary
16:20
The Assets Panel

7m 32s

Intro
0:00
Assets Panel
0:35
Colors Used
1:54
URLs Outside the Website
2:21
Flash Files
2:38
Shockwave Files
2:56
Movie Files
3:13
Scripts, Templates, Library
3:29
Images Category
3:41
Inserting an Image & Alternate Text

9m 7s

Intro
0:00
Inserting an Image
0:40
Insert Image using Image Name
1:17
Inserting Alternate Text
1:27
Insert Image using Image Icon
3:09
Insert Image using Insert Button
5:23
Preview in Browser
7:11
Summary
8:31
The Difference between Alternate Text & Title

6m 22s

Intro
0:00
Image Alternate Text Explanation
0:10
Image Title Explanation
0:51
Add an Image Title
1:39
Preview in Browser
2:46
Editing Image Titles
3:06
Setting the Default Editors for Dreamweaver

6m 9s

Intro
0:00
Setting Default Image Editors
1:07
Set Preferences
1:16
Adding Image Editors
2:08
Set Primary Editor
3:39
Removing Editors
4:38
Editor Icon Shortcut
5:09
Summary
5:39
Incorporating Photoshop Smart Objects

6m 44s

Intro
0:00
Photoshop Smart Object Explanation
0:09
Inserting Image from Files Panel
0:27
Image Optimization
1:43
Editing with Photoshop
3:36
Update from Original
5:20
Summary
5:53
Section 13: Adding Video to Web Pages
Inserting Flash Files

8m 57s

Intro
0:00
Create New HTML Page
0:10
Inserting SWF File
0:37
Preview SWF File
3:00
Add SWF File
3:32
Autoplay and Loop Options
5:05
SWF File Flash Player Error Message
6:12
Copy Dependent Files
6:52
Summary
8:22
Inserting Flash Video

10m 19s

Intro
0:00
Add Flash Video using Insert Menu
1:51
Insert FLV
2:33
Browse File Location
3:10
Setting Controls Skin
3:32
Set Auto Rewind
6:28
Preview in Browser
7:29
Add a Title
8:22
FLV File Flash Player Error Message
8:44
Summary
9:04
Inserting HTML5 Video

14m 43s

Intro
0:00
Setting up an HTML5 Video
0:44
History of Videos on the Web
1:43
Video Coding
3:26
Video Tag
5:14
Controls
5:48
Poster for Video
6:00
Width and Height
6:24
Preview In Browser
6:40
Troubleshooting Video and Browser Issues
8:59
Insert FLV
11:36
Preview In Browser
12:02
Video Formats
13:15
Section 14: Creating Hyperlinks
Linking to Website Files

13m 46s

Intro
0:00
Creating Hyperlinks between Web Pages
0:30
Create New File
3:14
Assigning a Hyperlink using Point to File
5:01
Assigning a Hyperlink using Browse for File
7:21
Preview in Browser
7:48
Creating Hyperlinks to other Files
10:02
Features of Point to File
10:39
Preview in Browser
11:59
Linking Image to Web Page
12:47
Linking to Files Outside Your Website

7m 37s

Intro
0:00
Linking to a Website
0:45
Link Area
1:14
Open Link in New Tab
4:15
Another Link Example
5:39
Summary
6:25
Email Links

10m 20s

Intro
0:00
Creating an Email Link
0:21
Insert Email Link
1:02
Adding Subject Line Information
6:12
Adding CC Recipients
8:40
Summary
9:54
Named Anchors

10m 6s

Intro
0:00
Adding Links to Page Content
0:26
Insert Image
1:00
Creating Navigation Bar with Links
2:41
Insert Named Anchor
3:46
Linking to Anchor
5:10
Preview in Browser
6:31
Add Link to Top of Page
7:11
Image Maps/Hotspots

11m 45s

Intro
0:00
Creating an Image Map
0:47
Select Image
1:35
Image Map/Hotspot Tools
1:43
Link Hotspot
3:06
More Hotspot Tools
3:55
Preview in Browser
8:37
Troubleshooting Image Hotspots
9:34
Summary
10:53
Creating the Navigation Bar

5m 47s

Intro
0:00
Create New Contact Us Page
0:11
Add Title
0:37
Add Header
0:48
Add Text Content
1:19
Bulleted List
2:56
Create Hyperlinks to Pages
3:17
Assigning Links
4:22
Summary
5:38
Adding Styles for Hyperlinks

13m 20s

Intro
0:00
Basic Hyperlink Styles
0:36
Create New CSS Style
1:18
Selector Type
1:32
Selector Name
2:09
Set Font Family
3:14
Set Font Size
3:47
Text-transform
4:20
Set Color
4:31
Text Decoration
4:39
Set Line Height
4:55
Set Font Weight
5:29
Preview in Browser
5:47
Add Visited Link Style
6:38
Add Hover Link Style
8:40
Change Background Color
10:00
Add Active Link Style
11:26
Summary
12:37
Section 15: Positioning Content Using CSS
How to Use CSS for Page Layout

7m 51s

Intro
0:00
Page Layout Example
0:10
HTML Tasks
1:16
CSS Tasks
2:34
Code Examples
3:50
HTML Code Example
4:01
CSS Code Example
5:47
Understanding the Box Model

8m 33s

Intro
0:00
The Box Model Explanation
0:19
Add Padding
2:01
Add Border
3:43
Add Margin
4:01
Disabling Styles
6:15
Summary
8:17
Creating Boxes on the Page

11m 56s

Intro
0:00
Create New Page
0:07
Insert Div Tag Box
0:41
New ID CSS Rule
1:36
Assign Properties
2:50
Modify Box Properties
4:26
Insert Div Tag Box on Left
4:53
Set Insert Location
5:48
Assign Properties
6:25
Insert Div Tag Box on Right
7:13
New ID CSS Rule
8:16
Assign Properties
8:33
Code View of Boxes
9:14
Preview In Browser
10:00
Summary
10:43
Controlling Content Boxes Using CSS

14m 53s

Intro
0:00
Create New Page
0:18
Creating Divs with Matching IDs
0:32
Insert Div Tag
0:41
New ID CSS Rule
1:14
Assign Properties
1:47
Insert Header Div Tag
3:42
Assign Properties
4:56
Add Text
6:11
Building Navigation Bar
6:50
Insert Div Tag
6:57
Set Insert Location
7:00
Assign Properties
7:33
Add Text
8:31
Create Content Area
9:07
Insert Div Tag
9:15
Assign Properties
9:46
Modify Header Style
11:01
Add Float Property
11:39
Add Padding Property
12:20
Add Margin-Left Property
13:11
Summary
13:47
Section 16: Types of Positioning
Absolute Positioning

14m 51s

Intro
0:00
Absolute Positioning Introduction
1:15
Modifying Div Color
1:33
Code View of Elements
3:11
Delete Styles
3:52
Using Absolute Positioning
4:34
Add Position Property
5:42
Add Left Property
8:08
Adjusting Position and Width
10:04
Insert Right Div Tag
10:39
Assign Properties
11:07
Adjusting Position and Height
12:10
Summary
14:19
Exploring Floats

10m 50s

Intro
0:00
Float Property
0:05
Preview in Browser
1:14
Display Boxes
1:31
Float Left Property
4:32
Float Right Property
8:00
Summary
10:18
What is a Clear?

10m 34s

Intro
0:00
Div Float and Dimension Properties
0:44
Adding a Clear Property
6:50
Preview in Browser
8:32
Height Discussion
8:49
Summary
9:58
Fixed Positioning

10m 48s

Intro
0:00
Fixed Positioning Examples
0:11
Fixed Positioning with an Image
2:18
Current CSS Styles
2:38
CSS Text File
4:17
Preview in Browser
5:30
CSS Properties for Fixed Positioning
6:17
Preview in Browser
7:48
Z-Index
9:19
Summary
10:17
Section 17: Working With Tables
Creating a Table

9m 48s

Intro
0:00
Page Table Example
0:19
Correcting Tags
1:17
Creating a Table
3:11
Insert Table
3:46
Header Option
5:01
Non-Breaking Space
5:50
Add Content to Table
6:31
Summary
9:08
Customizing & Modifying Table Properties

13m 9s

Intro
0:00
Save Page
0:33
Modifying the Table
3:05
Table Widths
3:59
Select Table
5:17
Borders
6:01
Cell Padding
6:49
Select Column of Content
7:40
Remove Column
8:42
Add and Remove Rows
9:19
Merge Columns
11:10
Summary
12:45
Using CSS for Formatting Tables

11m 13s

Intro
0:00
Table Styling
0:33
Table Header Tag
1:16
Removing a Class
4:16
Content Styles
5:15
Preview in Browser
7:59
Fixing Table Size
8:39
Summary
10:53
Importing Spreadsheet Data onto a Page

12m 4s

Intro
0:00
Create and Save New Page
0:49
Locating Saved Files
1:14
Importing Spreadsheet Data
3:45
Import Excel Document
4:25
Delete/Merge Cells
5:57
Customizing Table Content
6:23
Importing Delimited Data
7:59
Import Tabular Data
8:34
Choosing a Delimiter
9:07
Table Formatting Options
9:31
Table Content Styles
10:24
Summary
11:16
Merging & Splitting Table Cells

10m 5s

Intro
0:00
Create and Save New Page
0:10
Insert Table
0:54
Table Options
1:05
Moving Cursor in Front of Table
4:04
Adding an Image
5:35
Moving a Table
6:29
Merging and Splitting Table Cells
7:41
Merging Cells
7:53
Splitting a Cell
8:42
Summary
9:12
Modifying Rows & Columns

5m 12s

Intro
0:00
Save Page
0:19
Hiding Table Widths
0:23
Modifying Rows and Columns
1:15
Insert Column
1:33
Moving through Cells
2:28
Tabbing into New Row
3:08
Deleting Rows
3:36
Summary
4:31
Aligning Table Content

4m 46s

Intro
0:00
Modifying Table Content
0:38
Table Tag Properties
0:46
Cell Alignment
2:11
Center Content in a Row
2:44
Align Content in a Column
3:21
Summary
4:01
Section 18: Creating Forms
Creating an HTML Form

9m 22s

Intro
0:00
Creating a Contact Us Form
0:52
Adding Content
1:20
Insert Form
2:24
Insert Text Field with Form Tag
3:54
Form Tag Properties
4:47
Summary
8:29
Text Field Elements

8m 37s

Intro
0:00
Adding a Field Set
0:26
Insert Field Set
0:51
Adding Name Text Field
1:35
Text Field Attributes
2:05
Text Field Tag Properties
3:46
Adding Email Text Field
4:58
Text Field Tag Properties
5:24
Preview in Browser
5:58
Summary
8:02
Radio Buttons & Select Lists

12m 23s

Intro
0:00
Adding more to the Field Set
0:26
Create another Field Set
1:29
Adding a Radio Button
2:25
Insert Radio Button Group
3:42
Radio Button Group Options
4:09
Set Initial State of Radio Button Group
6:52
Adding a Drop Down Menu
8:07
Insert Select (List/Menu)
8:29
Set Drop Down Menu Attributes
8:59
Edit List Values
9:38
Preview in Browser
10:46
Add Choose Prompt
11:11
Summary
12:07
Checkboxes & Submit Button

8m 9s

Intro
0:00
Adding a Field Set
0:36
Adding a Checkbox Group
1:33
Checkbox Group Attributes
2:14
Arrange Checkboxes
4:38
Adding a Submit Button
4:56
Submit Button Attributes
5:25
Submit Button Tag Properties
6:00
Preview in Browser
6:25
Summary
7:28
Validating Form Data

20m 58s

Intro
0:00
Form Field Validation Example
0:32
Client Side and Web Server Validation
2:54
Adding a Comment Section
6:14
Comment Text Field Attributes
7:04
Comment Text Field Tag Properties
7:34
Add Form Field Validation
8:47
Tag Inspector Area
8:54
Add Validate Form Behavior
10:00
Validate Form Behavior Attributes
10:17
Preview in Browser
11:56
HTML5 Form Field Features
14:56
Required and Autofocus Attributes
16:40
Preview HTML5 Form Validation in Browser
18:08
Summary
20:41
Server-Side Validation Languages

4m 10s

Intro
0:00
Five Server Side Languages
0:40
ASP
0:56
ASP.NET
1:47
ColdFusion
2:08
JSP and PHP
2:42
Summary
3:44
Section 19: Library Items & Templates
Template & Library Overview

6m 22s

Intro
0:00
Dreamweaver Templates and Library Items
0:12
Dreamweaver Template Explanation
0:44
Library Item Explanation
2:33
Overview of Templates and Library Items
4:50
Summary
6:07
Creating a Library Item

8m 30s

Intro
0:00
Creating a Library Item
0:13
Delete a Library Item
0:34
New Library Item
2:10
Library Folder
3:31
How to Use a Library Item
4:17
Library Item Tag
5:12
Adding a Library Item
5:46
Summary
7:42
Modify a Library Item

5m 33s

Intro
0:00
Changing a Library Item
1:07
Edit Library Item
1:42
Save and Update Library Items
2:35
Summary
4:17
Converting a Page into a Template

11m 23s

Intro
0:00
How to Work with a Template
0:27
Create Blank Template File
0:34
Example Template File
2:00
Preview in Browser
2:22
Create Template from File
3:56
Save as Template
4:11
Template Description
4:18
Save and Update Links
5:15
Create New Pages from Template
6:26
Editable and Non-Editable Regions
8:07
Summary
10:33
Creating Editable Regions

9m 21s

Intro
0:00
Create Editable Region for Content
1:53
Insert Editable Region
2:22
Set Name for Editable Region
2:59
Save and Update Template
3:59
Create Editable Region for Nav Bar
4:48
Select and Insert Editable Region
5:30
Save and Update Template
5:53
Update Current Page
7:16
Summary
7:49
Applying a Template

8m 48s

Intro
0:00
Applying a Template
0:40
Apply Template to About Us Page
1:03
Move Content to New Region
1:43
Delete Library Item
4:51
Apply Template to Contact Us Page
5:27
Summary
7:34
Centering a Page in the Browser

14m 9s

Intro
0:00
Centering a Page with Templates
0:11
Edit Template
0:36
Preview in Browser
1:13
Edit External Styles
1:54
Add Wrapper ID
3:30
Insert Div Tag
4:21
New CSS ID Rule
4:52
Save and Update Files
7:54
Preview in Browser
8:57
Delete Wrapper ID
11:15
Save and Preview in Browser
11:59
Summary
13:04
Section 20: CSS3 Properties Enhance Your Pages
Using CSS3

7m 7s

Intro
0:00
Preview CSS3 Element in Browser
0:48
Proprietary CSS3 Properties
2:51
Summary
6:00
Creating Drop Shadows

8m 12s

Intro
0:00
Add Box Shadow Property
0:30
Preview in Browser
2:49
Proprietary Options
6:29
Summary
7:55
Working With Gradients

10m 17s

Intro
0:00
Gradient Property
0:18
Gradient Code
1:45
Apply Comment
5:08
Remove Comment
5:56
Save and Preview in Browser
6:16
Enable Drop Shadow
7:56
Summary
8:28
Rounded Corners

7m 34s

Intro
0:00
Curve Corners with CSS
0:14
Add Border Radius Property
1:32
Preview in Browser
2:39
Enable Gradient and Drop Shadow
4:11
Edit Drop Shadow Color
5:44
Preview in Browser
5:48
Summary
6:56
Section 21: Going Beyond HTML & CSS
Adding a Swap Image Behavior

12m 8s

Intro
0:00
Behaviors in Dreamweaver
0:40
Insert an Image
2:03
Swapping an Image
3:40
Tag Inspector Panel
3:56
Behaviors Panel
4:30
Adding a Swap Image Behavior
4:49
Preview in Browser
8:58
Swap Behavior Code
9:31
Summary
10:38
Fade and Appear Effects

9m 44s

Intro
0:00
Fading and Appearing in CSS3
0:15
Add Page Title and Header
0:45
Insert Image
1:34
Set Image Tag Properties
2:26
Insert Another Image
2:36
Add Appear/Fade Behavior Effect
3:30
Preview in Browser
5:25
Add Appear/Fade Behavior Effect
7:16
Preview in Browser
8:02
Summary
9:07
Opening a New Window Behavior

9m 37s

Intro
0:00
Creating a New Browser Window Behavior
0:24
Insert Thumbnail Image
1:53
Image Tag Properties
2:35
Add Open Browser Window Behavior
3:02
Save and Preview in Browser
5:40
Modify Open Browser Window Behavior
6:46
Save and Preview in Browser
7:11
Summary
9:09
Dreamweaver Extensions

7m 13s

Intro
0:00
Manage Extensions
0:50
Dreamweaver Extensions
1:41
Exchange Panel
2:18
Summary
6:43
Installing an Extension

15m 35s

Intro
0:00
Installing an Extension: Method 1
0:12
Get More Commands
0:31
Manage Extensions
0:37
Dreamweaver Exchange Classic
1:08
Adobe Extension Manager CS6
5:32
Working with the Extension
7:25
Finding the Extension within Dreamweaver
7:26
Using the Lorem Ipsum Extension
9:02
Installing an Extension: Method 2
10:46
Downloading the Adobe Exchange Panel
10:47
Adobe Exchange Panel
13:21
Opening Adobe Exchange
13:22
Searing for Extensions in Adobe Exchange
14:10
Installing the Widget Browser

8m 46s

Intro
0:00
Widget Browser
0:05
Download Widget Browser
1:26
Widget Browser Overview
3:47
Preview Widget
4:55
Summary
7:47
Adding a Widget to My Widget

6m 41s

Intro
0:00
Download Widget through Widget Browser
0:05
Installing the FlexSlider Widget
1:19
My Widgets Area
3:45
Save Widget Files
4:17
Preview Widget in Browser
5:19
Summary
6:17
Obtaining the FlexSlider Widget Files

7m 23s

Intro
0:00
Working with a Widget
0:25
Configure a Widget
1:42
Save Widget Modifications as Presets
2:46
Import/Export Widget Presets
3:30
Widget Files in Files Panel
4:51
Summary
6:10
Customizing the FlexSlider Widget

14m 5s

Intro
0:00
Preview in Browser
0:53
FlexSlider Widget Files
1:24
Code View
2:47
Insert Own Images into Widget
4:15
Preview in Browser
6:38
Comment Out Code
7:47
Understanding Widget Code
9:10
Comment Out Hyperlink
9:47
Add Text Content to Widget
10:34
Preview in Browser
11:06
Summary
12:29
Section 22: Responsive Design
What is Responsive Design?

7m 6s

Intro
0:00
Responsive Web Design
0:13
Website Examples
2:10
Wanderlust Travel Website
4:21
Summary
6:30
CSS Media Types

10m 9s

Intro
0:00
Preview in Browser
0:15
Print Preview
2:11
CSS Screen Style Sheet
2:58
Attach CSS Print Style Sheet
4:34
Preview in Browser
7:35
Print Preview
7:47
Delete CSS Print Style Sheet
9:07
Summary
9:58
Planning for Multiple Screen Sizes

7m 16s

Intro
0:00
Multiple Screen Size Feature in Properties Panel
0:50
Manual Screen Size Adjustment
2:28
CSS Phone and Tablet Style Sheets
3:06
Preview in Browser
4:37
Summary
7:05
Creating Media Queries

10m 2s

Intro
0:00
Creating Media Queries
0:58
Media Queries Dialog Box
2:02
Default Presets
3:38
Select CSS File
4:38
Preview in Browser
7:14
Summary
9:47
Modifying Styles within Media Queries

17m 53s

Intro
0:00
Troubleshooting CSS Issues
1:17
Enable CSS Properties
4:29
Preview in Browser
5:41
Tablet Version Style Errors
6:36
Modify Tablet Styles
7:38
Preview in Browser
8:43
Firebug
10:33
Modify Media Query Styles
12:42
Preview in Browser
14:00
Copy and Paste Styles
14:45
Preview in Browser
15:40
Summary
17:32
Section 23: Site Maintenance & Publishing
Find & Replace

7m 11s

Intro
0:00
Modifying Text Content
0:15
Find and Replace Feature
0:52
Summary
6:44
Site Reports

6m 2s

Intro
0:00
Results Section
0:32
Settings Option for Target Browsers
1:36
Site Reports
2:18
Select Reports
2:27
Run Reports
3:20
Fix Warnings
3:45
Summary
5:19
Entering Web Server Information

3m 31s

Intro
0:00
Manage Sites
0:20
Edit Site Information
0:31
Adding a Web Server
0:49
Summary
3:20
Uploading Files to the Web Server

3m 43s

Intro
0:00
Put Files to Remote Server Function
0:08
Dependent Files
1:10
Preview in Browser
1:31
Use Files Panel to Upload Files
2:21
Summary
3:13
Downloading from the Web Server

3m 15s

Intro
0:00
How to Download Files from a Web Server
0:06
Get Files from Remote Server Function
0:46
Show Local and Remote Sites
2:02
Summary
2:33
Section 24: Creating a Mobile Website Using jQuery mobile
What is jQuery Mobile?

6m 45s

Intro
0:00
jQuery Examples
0:51
Photo Gallery
4:49
Slideshow
5:04
Summary
5:29
Building a jQuery Mobile Page

8m 48s

Intro
0:00
jQuery Website Page
0:10
New jQuery Page Options
1:06
jQuery Mobile CDN
1:35
jQuery Mobile Local
3:05
jQuery Mobile with Theme Local
3:20
Save jQuery Mobile Page in own Folder
4:15
Copy Dependent Files
5:15
Summary
7:34
jQuery Mobile Pages

8m 6s

Intro
0:00
jQuery Files
0:09
Preview Page in Browser
1:26
Page Structure
2:42
Add Content to Footer Area
3:37
Preview in Browser
4:59
Edit Content in Footer Area
5:33
Summary
7:17
Working with jQuery Mobile Themes

6m 20s

Intro
0:00
Overview of Themes
0:06
Live View of jQuery Page
2:47
Example Page
3:43
Preview In Browser
3:57
Summary
4:51
Section 25: Summary
What We Accomplished in the Course

4m 27s

Intro
0:00
CSS 3 Properties
0:42
Images and Slideshows
1:35
Using Web Fonts
2:14
HTML 5 Video
2:42
Web Forms
3:08
FlexSlider Widget
3:31
Dreamweaver Interface
3:56
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Absolute Positioning

  • We will be looking at CSS absolute positioning
  • This type of page layout offers fixed sizes for your elements
  • This is not a method that is used much anymore, but I think it is important to be able to understand this positioning method
  • Open div-id.html (from a previous lesson) & save it as absolute-positioning.html
  • This page was created using the float property
  • We will remove the float & clear properties from our css rules by choosing the ID, and then clicking the disable CSS property in front of the float & clear properties for the various boxes
  • Look over the page layout once we do that, note the divs fall on their own line directly below one another on the page
  • We will add absolute positioning and position content where we want it
  • Start by selecting the header ID & add position: absolute;
  • Once we do that we can use the top & left properties to position based on where we want that specific box located from the top & left corner of the browser window
  • Browsers provide an 8-11 px offset which we will address later
  • Add top & left properties to each of our boxes
  • Then play with the top & left properties to get the layout we want
    • header: top-10px & left-10px
    • nav: top-75px & left- 10px
    • content: top-75px & left-220px
    • footer: top-800px & left 10px
  • Notice how the content does not have a height
  • Play around with these divs, if we do not have content in the boxes, they collapse
  • We will add heights for the sake of this exercise since we have no content within the boxes on the page
  • That is how you can work with absolute positioning

Absolute Positioning

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Absolute Positioning Introduction 1:15
  • Modifying Div Color 1:33
  • Code View of Elements 3:11
  • Delete Styles 3:52
  • Using Absolute Positioning 4:34
    • Add Position Property
    • Add Left Property
    • Adjusting Position and Width
  • Insert Right Div Tag 10:39
    • Assign Properties
    • Adjusting Position and Height
  • Summary 14:19

Transcription: Absolute Positioning

Welcome back to Educator.com.0000

We are now going to take a look at a unique type of positioning in CSS; it is not used quite as much as it used to be when it first came out, but I think it's important to get a handle on understanding what it means.0004

What I am going to do is show you, and we are actually going to convert a page from basic default positioning; we are going to set it up so that we control the positioning using absolute positioning.0019

This will give you an idea of working with boxes a little bit more in CSS.0035

What I'm going to do is take the div-id page that I created earlier; so if you do not have this page available, go out to the Course Files, and you want div-id.html.0041

I'm going to re-save this page, because I am really going to change it around; and I'm going to re-save it as absolute-positioning...and that is exactly what we are going to change it to.0058

Now, when you are working in absolute positioning, it is a type of positioning in CSS.0075

I'll go ahead and open up my Styles; what I am going to do is modify this page as we have it now and control it just a little bit differently.0082

Right now, I have a property on this page that is controlling the column layout just a little bit.0093

I'm going to modify that; but I am first going to change the colors of the pages.0103

I will select the outer wrapper, and you can see that that is blue: I am going to make this a little calmer color...and sometimes it is harder to find a calmer color; that one ended up almost the same color.0109

What I'll do is go out choose a light yellow instead.0124

And then, I am going to select my header and change that color also; it is pretty much the same color; I'm going to adjust that one to an orange.0128

The next one...I'm just going to go down the list and modify these colors to make it look very different from what it looks like now.0140

Here is a greenish color for that one: wow, that is kind of bright--I think I'll tone that down just a little bit; there we go.0149

And I'll choose my content area, and I think I'm going to make my content area just plain old white, so we can read the text if we need to.0159

You can see how easy it is to modify these things when you're working in CSS; I love that feature.0170

I might actually make this a light grey, so it's a little more obvious; I'll just go right above the white here, and there is my grey.0178

We have a new page set up; let's continue to modify this.0187

Now, if we look at our code here, you can see there is an outer wrapper, and that is my outer div; and then, inside that, I have all of these pieces.0192

Up at the top, I have all of my CSS rules; and these are the rules that we are actually changing when we use the CSS Styles panel.0203

So, instead of coming into the code here to make my changes, I can just do it up in this nice CSS Styles panel and be able to view it in Design View at the same time.0215

That is one of the benefits of working with Dreamweaver.0228

Now, what I want to do is...my navigation bar has a type of positioning that we haven't really talked about yet.0232

I'm going to select the Float property (I'll be referencing that in another lesson), and I'm going to click the trash can to get rid of that.0240

And notice what happened to my box here for my content; notice, also, that it has popped out of its outer wrapper layer.0251

These are the strange things that can happen to you.0261

Now, my content is moved in from the left just a little bit, and I did that by using this Margin Left.0265

I'm going to select that and click the trash can, also.0274

You can see that I have a box here, and I have a box here; this one is not quite to the top, and the grey one is ending up underneath.0278

How do I get these boxes positioned right next to one another using absolute positioning?--and that is what we are going to look at.0290

I'm going to make both of these a little bit narrower, because what I want to do is actually pull in a third column piece.0300

I'll make this nav a little bit narrower; I'll make it 200 pixels wide; I am going to go down to my content, and my width here is 750; I'm going to make it 550.0308

It is quite a bit narrower...actually, I'll make it 500 here.0324

Now, what I want to do is: using absolute positioning, I want to place this green nav bar area and my grey content area side-by-side.0330

Well, the first step in setting up absolute positioning is to add position absolute to your content.0342

Now, my outer wrapper I don't really have to worry about; I'm just going to keep that where it is; and my header is fine; what I want to do is modify these two boxes.0351

I click and select the box I want and modify the properties, just like we have been doing in playing around with a few of these properties in this lesson.0363

But there is a property called position; and I'll scroll down to that one--here is my position.0374

And if I use the dropdown, you can see there are a few different types of positioning.0383

Those are the pieces we are going to explore within this chapter.0389

I'm going to choose absolute positioning; look at what happened to my content--the two are right on top of one another.0393

Now, I am also going to take this margin and delete it; I don't want that interfering in any way; and my content...I will do the same: I'll select margin and delete it.0403

Now, notice: I have two absolute positioned boxes, and they are right on top of one another.0417

So, what is the deal with that?0425

Well, what has happened is: when you absolute-position content, you are dealing with a 00 start point for the content--and the 00 start point for both of these boxes is the same.0428

We have it inside our wrapper layer (the outer yellow box), and we have it underneath our header (which is the orange box).0444

Because of that, both of them are sitting on top of one another; so what I am going to do is take my content layer, and I'm going to add...my nav has absolute positioning; I'm going to add absolute positioning here, as well.0453

So, let me go down to position; and I'll choose absolute here; now look what happened.0470

Where did my nav go?--so you can see, some really strange things start happening here.0482

So, what I am going to do is fix this so that they end up side-by-side; but how do I go about doing that?0488

Well, both of these boxes have the same top left corner as the start point; so what I need to do is take my grey box and position it from the left-hand side; I need to move it to the right however many pixels.0497

Well, my navigation bar is 200 pixels wide, so how about I take this one and move it 200 pixels to the right.0514

The way I do that is: I just say Add a New Property, and the new property is Left; and what I want to say is, "How many pixels from the left do I want this to start?"0522

Instead of starting at the 00 start point, I am going to move it over from that; so how many pixels over?--well, let's start with the width of the navigation bar.0536

This is going to be 200 pixels over from the left of where it would normally start; and there it is.0548

Now, it looks like 200 isn't quite wide enough; why is that?--well, that comes down to our box model.0557

I have 15 pixels on the left and on the right; so my navigation bar isn't just 200 pixels from the left--it is more than that.0565

So, let's look at that again: it is 200 pixels as a width, but then I have 30 pixels (15 on the left and 15 on the right) being added, so what I need to do is: I need to add 30; that 30 pixels of padding, I need to add here.0578

I'm going to say 230 pixels from the left; and there is my box, perfectly lined up.0596

Now, let me adjust this a little bit: this left box is still pretty wide, so let me go back and set this to 150.0604

There we go; now, I subtracted 50 from this, so if I want my content box to be right up against it, I need to subtract 50 from my left.0615

I'll set this one to 180, and it's nice and lined up once again.0628

That allows me to add another box over here on the right-hand side; so I'm going to insert another div over there.0634

I'll go ahead and create or insert a div tag; this time, I'm going to say at insertion point; I'll say after tag; the tag it is going to be after is my content.0643

I'll create a new rule, and this is where I can add all of those positioning pieces.0657

This is going to be called right, and I am going to assign some properties to this.0663

So, what I want is to make it absolute positioned first; so I'll go down to Positioning here, and in this position, I'll say Absolute.0671

What I am going to do is assign the properties here, instead of waiting until later.0681

I want it absolute positioned; let me set the width to 100 pixels wide; and when I go to do this, I need to place it, from the left...how far?0687

Well, it needs to be wide enough to adjust to this and wide enough to adjust to that; so let me start with 600 pixels, and let's see where it ends up.0702

I'll make it a color; so choose a color, whatever you want--I have a rather unusual color scheme going on here, anyway.0714

I'll make this one purple; there is my ID called right; and there it is.0722

Now, you can see, this is overlapping my content area; and what I need to do is move this over; so let me figure that out.0730

Now, I also didn't add a height, so you can see this does not end up very tall.0740

But let's figure out where this needs to go from the left.0746

My content area is 180 from the left; so I know I have that 180; plus I have my navigation bar, which is 150.0749

Let's see...let me go back to content: I have 180, and I have a width of 500, and I have some padding; so, if I add those three together, 180, plus 30 for the padding, is 210; plus 500--that would be 710 (is what my right should be instead of 600).0765

There it is; now, let's see if we can add a height in here.0789

I'll add a height, just to make it a little bit taller, so it doesn't look quite so funny.0796

I'll add 600 pixels in height, and now it's a matter of width.0802

So, my width is only 100; it looks like I can do 175 if I want; I can even do, I think, 200.0808

I haven't done the math, but let's see...not too bad: it looks just a little bit too wide, but I can fix that a little bit later.0818

But that is known as absolute positioning; and you will know it's absolute positioning when it has position:absolute listed.0829

What you do is: you start from the top or the left; we didn't have to worry about the top, because our header was already up there, so all we focused on was from the left.0839

Our top of 0 worked out fine, because we want all of these columns to line up exactly under our header.0851

That is absolute positioning using CSS.0860

It is not quite as commonly used as it used to be, but I think it is important for you to understand what absolute positioning is, just in case you see that on any web pages that you are taking over or looking at.0865

And, since we are covering the CSS positioning concepts, I think it's an important one to at least have been exposed to.0880

That is absolute positioning using CSS.0888

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.