Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Use Chrome browser to play professor video
Candyce Mairs

Candyce Mairs

Creating a Library Item

Slide Duration:

Table of Contents

I. Course Introduction
What is Dreamweaver?

1m 56s

Intro
0:00
What is Dreamweaver?
0:03
Dreamweaver Creative Cloud Overview
0:04
Creative Cloud Versioning

2m 58s

Intro
0:00
Dreamweaver Creative Cloud Version
0:09
Checking & Updating Version
0:10
Using the Course Files

2m 40s

Intro
0:00
Using the Course Files
0:07
Locating the Course Files
0:08
Course Files: Begin and End Version
0:41
Shortcut Sheet & Extra Folder
1:45
II. Introduction to the Web
The Web Server Environment

6m 12s

Intro
0:00
The Client Environment
0:05
Three Browsers
0:21
The Client Environment
1:22
View Page Source
1:36
Browsers Can Read Differently..
2:24
The Web Server
2:59
inetpub
3:16
Web Servers are Software
3:25
wwwroot
3:47
ColdFusion9
4:16
ColdFusion 10
4:50
What is a Client?
5:17
Behind the Scenes

6m 46s

Intro
0:00
CMairsCreate
0:15
Find This Under Resources
0:25
Static Web Page Request Process
0:35
Browser Reads Webpages
0:39
Web Server
1:09
So What Happens?
1:31
A Static Page
1:55
Dynamic Web Page Process
2:24
Server-Side Language
2:37
Client Requests A Page Not HTML
2:48
Application Server
2:56
Five Languages
3:18
Why Do We Need a Server-Side Language?
3:58
This Course Will Focus on Static Page Requests
5:06
What is a Browser

7m

Intro
0:00
A Browser is a Software That Reads a Web Page
0:10
3 Parts of a Browser
0:12
How is a Page Read by the Browser?
0:36
HTML
0:59
Parser
1:04
Page Structure
1:12
Header Tags
1:39
Paragraph Tags
1:59
Other HTML Tags
2:07
Content
2:21
Static Content
2:29
Dynamic Content
2:38
CSS
3:07
Formatting
3:13
Positioning
3:24
Example of Page Layout
3:39
Styling Can Include Images
4:13
JavaScript
4:28
User Interactivity
4:29
CSS and JavaScript are Interpreters
5:36
In Terms of Cross Browser Compatibility
5:53
HTML File Naming

8m 23s

Intro
0:00
Looking at Site Structure
0:05
Using Dreamweaver to View Site Structure
0:10
Focusing on the Names
0:25
Index is Homepage
0:33
The Other Files
0:57
Lowercase Letter Preference
1:33
About Using Folders
1:52
HTML Page Names
3:36
Headless Camel Casing
4:09
Naming Format
4:33
Establish a File Naming Convention
5:05
How Can I Create Web Designs?

5m 33s

Intro
0:00
Web Page Designs
0:07
No Limits to Programs
0:22
Tranquil Travel
0:53
Pre-Dreamweaver Planning
1:16
Fireworks
1:38
Homepage
1:56
Mobile
2:13
InnerPages
2:40
Photoshop CC
3:04
Work With Whatever is Most Comfortable
3:46
Remember: Mobile and innerPages, Too
4:29
Copyright in the Online Environment

8m 49s

Intro
0:00
Copyright Laws
0:12
Copyright ©
0:30
Copyright.Gov
1:45
Basically Copyright Means..
1:56
In Other Words, No Plagiarism
2:18
Cannot Take Their Code Either
2:53
Automatically Copyrighted
3:27
Images are Copyright
3:48
Ask for Permission
4:10
Other Resources for Copyright Info
5:00
Copyright Basics
5:15
If It's on the Web, It's Not Yours
5:23
Stanford Copyright FAQs
5:42
Copyrights Differ in Countries
6:16
Websites: Five Ways to Stay Out of Trouble
6:41
The Importance of Accessibility

9m 48s

Intro
0:00
Accessibility
0:15
What is Accessibility?
0:16
W3C
0:51
Recommended Standards Including Accessibility
1:07
Don't Forget
1:30
Accessibility = More User-Friendly
1:53
Accessibility in Planning Stages
2:14
Web Accessibility Initiative
2:33
Global Issue
2:39
Web Content Accessibility Guidelines
3:28
Info Meant for Web Developers, Authors, etc.
3:53
What is in WCAG 2.0
4:04
Getting Started with Web Accessibility
4:47
Things to Think About When Planning
5:04
How the Components Relate
6:09
Concepts of Accessibility
6:20
Perceivable
6:54
Operable
8:04
Understandable
8:40
Robust
8:52
For More Information
9:21
III. Dealing with Browsers
How are Browsers Different?

6m 40s

Intro
0:00
Audience Overview
0:15
Analytics
0:27
User Information
1:23
Browser Statistics
2:10
Mobile Devices Statistics
4:04
Traffic Sources
4:20
Map Overlay
4:32
Analytics Available
5:30
Web Tools Within the Browser

9m 23s

Intro
0:00
Looking at Different Browsers
0:09
Internet Explorer
0:43
Use the Same Version as the Company
0:52
IE Developer Tools
1:04
F12
1:11
Pin It
1:37
Understanding Developer Tools
2:07
The Arrow
2:40
Crossed Out Styles
3:14
Select Parts to Observe
3:35
Google Chrome Tools
4:07
F12
4:13
Elements
4:25
Understanding Developer Tools
4:39
Magnifying Glass
4:49
Safari Tools
5:26
F12
5:33
Shortcuts Are a Little Different
5:41
Safari Extension
5:51
Firefox Tools
6:33
F12
6:39
Firefox Menu
6:46
Web Developer
6:51
Understanding Web Developer
7:00
Add-Ons
7:18
Inspector
7:31
Tools For You
7:49
Box Model
8:22
Helpful Browser Extensions

6m 46s

Intro
0:00
Browser Resources at CMairsCreate
0:06
Helpful Extension: Text Generator
0:07
Browser Resources
0:27
Lorem Ipsum Generator
0:44
Creates Random Dummy Text
0:47
Install It
1:13
Using This Extension
2:17
Copy to Clipboard
3:00
Using the Text
3:13
Other Extensions
3:47
Helpful Extension: Ruul
3:51
Install It
3:57
Installing in Firefox
4:14
Checking Website Alignment
4:43
Type Height and Width
5:20
Using This Extension
5:38
IV. The Dreamweaver Interface
Dreamweaver Interface Overview

9m 11s

Intro
0:00
Dreamweaver Welcome
0:14
Communicate with Dreamweaver
0:21
Adobe Messages & Updates
0:27
Welcome Screen is Conditionally Available
0:39
Recently Opened Items
0:55
Create New
1:34
Dreamweaver Offers Numerous Options
1:46
Panels & Menus at Startup Menu
2:10
Create New HTML
2:47
Menus Are Now Available
2:55
Panels
3:31
Modify Your Panels
4:07
Properties Panel
4:40
Document Window
5:10
Code View
5:25
Split View
5:33
Design View
5:36
Using These Views
5:47
Live View
6:57
The Globe: Preview in Browsers
7:11
Recap
7:42
Customizing the Interface

10m 4s

Intro
0:00
Dreamweaver CC Default View
0:22
Identifying Default Panels
0:57
Activating Panels
1:08
Create New HTML 
1:10
Example: Insert Tab
1:35
How to Move Panels
1:58
Moving Insert Panel
2:04
Dreamweaver Beginners Preferred Setup
3:04
Icons and Tabs Within Insert Panel
3:17
Selecting Icons
3:33
Opening/Closing Panels
4:14
Opening Panel
4:21
Closing Panel
4:30
Window Menu Checked Panels
4:58
Right Click to Open/Close
5:16
Close Tab Group Versus Close Option
5:22
Right Hand Double Arrow
8:00
Collapsing Panels Into Icons
8:10
Opening Hidden Panels
8:20
Expand and Contract Panels
8:35
Setting Dreamweaver Preferences

6m 52s

Intro
0:00
Getting Started
0:14
Activate Page and Panels
0:22
Locating Preferences Menu
0:31
Mac Users
0:34
PC Users
0:41
Preferences
0:50
General Category
0:54
Editing Options
1:23
New Document Category
2:19
Default Document
2:29
Default Extension
2:33
Default Document Type
3:15
Preview in Browser
3:54
Fonts
4:53
Code View Default Font
5:15
Default Font Size
5:33
CSS Designer Panel

5m 48s

Intro
0:00
Locating CSS Designer Panel
0:38
Open Files and Panels
0:44
Create New HTML
0:57
Activate CSS Designer Tab
1:10
CSS Designer’s “Four Panels-in-One”
1:20
Sources, @Media, Selectors and Properties Panels
1:32
Expanding Panel
1:50
Listing of Options for Closing Tabs
2:23
Overview of Source Panel
3:22
Sources Panel Option
3:34
Creating New CSS Page
4:05
Code View Tools

7m 15s

Intro
0:00
Web Page Viewing
1:01
Design View
1:03
Code View
1:13
Left-Hand Tool Bar
1:15
Expand Tool Bar and Document Window
1:37
Coding Tool Bar
2:16
Icon Function
2:23
Line Numbers
3:00
Line Numbers
3:02
Select Line of Code
3:19
Collapsing Lines
3:24
Show Hidden Area
4:30
Split View Shows Both Code and Design Views
5:46
Vertically or Horizontally Split View
6:03
Installing Additional Browsers

9m 13s

Intro
0:00
New Document Window
0:14
Design View
0:33
Globe Icon
0:44
Browser Preview(s)
0:46
Available Browsers and Shortcuts
0:58
Modifying Browsers Within Preferences: Preview in Browser
1:14
Removing a Browser
2:20
Adding a Browser
2:36
Application Field
3:38
Selecting Primary and Secondary Browsers
4:47
Creating Menu Shortcuts
6:14
Previewing Page
6:36
Opening in Browser
7:00
Opening With File Menu
8:11
V. Creating a Page Using a Pre-Defined Layout
Creating a Pre-defined CSS Layout Page

8m 44s

Intro
0:00
Using a Pre-Defined Layout Page
0:31
Opening From File Menu
0:36
New Document Window
0:47
Selecting Page Type
1:09
Blank Page Features
1:57
Pre-Built Features
2:05
Header Area
2:27
Footer Area
2:32
Text
2:34
Saving Documents
3:39
Naming Document
4:19
Assigning Title
5:51
File Save
7:00
Save All
7:09
Asterisk on Tab
7:40
Building the Header Area

11m 12s

Intro
0:00
Setting Up Interface
0:28
Properties
0:33
Tag Selector
0:45
Expanding Files Tab
0:56
Collapsing Files Tab
1:35
Tag Selector
1:53
Example: Insert Logo
2:06
Body Tag
3:01
Placeholder
3:40
Header Tag
4:29
Changing Background Color
5:26
CSS Designer Panel
5:27
Determining Header CSS Rule
5:51
Header Properties
6:18
Properties Icons
6:45
Background Color
7:03
Inserting Image
8:07
Modifying the Navigation Column

8m 6s

Intro
0:00
Navigation Bar
0:12
Identifying Codes With Tag Selector
1:20
Modifying With CSS Designer
2:09
Show Set Box
3:02
Changing Width
3:25
Background Color
4:22
Eye Dropper Tool
4:37
Moving Navigation Bar
5:14
Float Feature
6:00
Preview
6:27
Customizing the Hyperlinks

15m 54s

Intro
0:00
Modifying Background Color of Side Bar
0:30
Selecting Column
0:50
CSS Designer Panel
1:05
Show Set
1:10
Selecting Color
1:38
Changing Color Format
2:00
Changing RGB Values
2:40
Re-naming Links
3:47
Adding Pages
5:00
Changing Link Appearance
6:22
Locating Properties
6:26
<a> Tag
8:40
Background Color
9:23
Disable
9:41
Eye Dropper Tool
10:33
Preview Page
11:09
Modifying Hyperlink Colors
11:40
Selecting Color (Focus)
11:59
Visited Link Text Color
12:31
Basic Link Appearance
13:38
Customizing the Navigation Area

7m 25s

Intro
0:00
Adjusting Excess Space
0:41
<aside>
1:07
Inspect Tool
2:40
Adjusting Header Size
3:25
<img>
3:49
Setting Header Width and Height
4:05
Width
4:10
Height
4:49
Live View
5:40
Lesson Summary
6:20
Adding Content to the Page

9m 25s

Intro
0:00
Inserting Content
1:10
Locating Content
1:18
Tag Selector
1:38
<article> versus <section>
1:48
Removing Content
2:02
<section>
2:16
Highlighting on Document
2:24
Inserting Text
2:52
Opening Text File
3:11
Predefined Index .txt File
3:14
Copy/Paste
4:01
Split View
5:08
Inserting in Code View
5:54
Removing Excess Space
6:20
Delete Key
6:24
Properties
6:29
Remove Tag Feature
7:02
Modifying the Footer Area

8m 19s

Intro
0:00
Copyrights
0:10
Copyright.gov PDF
0:17
Notice of Copyright
0:42
Example
1:20
Insert Copyright Information
2:00
Edit Footer Properties
3:29
Change Background Color
3:50
Add Padding
4:14
Preview
5:30
Editing in Live View
6:39
Changing the Page Background Color

10m 27s

Intro
0:00
Modifying Footer
1:24
Matching Color With Header Background
1:40
Matching Content and Header Width
3:07
Identifying Content Tags
3:26
Resizing Content Area
4:08
Resizing .container Properties
5:44
Body Background Color
6:06
Adding a Border
7:18
Locating Tag Selectors
7:37
Show Set
8:06
Selecting Border
8:22
Color
8:26
Width
8:32
Style
8:38
VI. Getting Started
Defining a Site in Dreamweaver

5m 33s

Intro
0:00
Defining Websites Within Dreamweaver
0:30
Site Menu Setup
0:49
Locating Local Site Folder
1:16
Setting Local Site Folder Path
2:13
Files Local View
2:57
Window Versus Mac
3:09
Root Folder
4:14
The Importance of the Files Panel

9m 19s

Intro
0:00
Files Panel Options
0:53
Right Click Open Area in Files Panel
1:47
Icons for Uploading/Downloading Files
2:15
Creating New Page
3:02
Moving Into New Area
3:35
Renaming a File
5:17
Removing File From a Folder
6:27
Deleting a File
7:08
Creating New Folder
7:55
HTML Doctypes

7m 50s

Intro
0:00
Create New HTML
0:23
File Menu
0:46
Choose Doctype
0:56
HTML 5 Versus XHTML 1.0 Transitional
1:10
Horizontal/Vertical Tile
2:08
HTML 5 Versus XHTML 1.0 Transitional in Code View
3:32
Importance of Doctype
4:22
HTML 5
5:50
XHTML 1.0 Transitional in Code View
6:11
Page Titles are Important

5m 42s

Intro
0:00
Saving New Page
1:16
Saving as Untitled
1:19
Importance of Page Titles
1:38
Tab Area
1:46
Bookmarks
2:02
Search Engines
3:11
Adding Title
4:14
Title Tags
5:03
Working With New Pages

5m 16s

Intro
0:00
Creating New Files in Files Panel
0:27
File Menu Options
0:31
Root Folder
1:00
Creating Files in Welcome Screen
1:42
File Menu
2:13
Blank Page Options
2:18
Control+N/Command+N
2:58
Edit Preferences
3:30
VII. Adding Text Content
Adding Text to a Web Page

19m 22s

Intro
0:00
Manage Sites
0:36
Defined Sites
0:42
Removing Sites
1:06
Modifying Site
1:15
New Site
2:16
Locating File Folder
2:36
Files Panel
3:28
New Dreamweaver Page
4:09
Document Title
4:28
Saving and Naming Page
5:28
Paste Special
6:44
Text Folder
6:48
Command.docx Versus Command.html
6:59
Command.docx
7:14
Microsoft Word Copy/Paste
7:43
Command.HTML
7:54
Edit Menu Paste Special
8:40
Options
8:55
Basic Paste Versus Paste Special
10:35
Updated Properties Features
11:33
Preview in Firefox
12:00
Firefox Developer Tools
12:06
Web Developer
12:16
Inspector
12:45
Microsoft Word Code
13:30
Text With Structure Paste Special Option
14:17
Text Only
15:53
Forward Delete Versus Backward Delete
16:40
Copy/Paste Preferences
18:04
Importing a Word Document

3m 21s

Intro
0:00
Create New Page
0:39
Name Document
0:58
File Menu Import
1:08
Word Document
1:29
Locating Text File
1:35
Formatting
1:58
Title Document
2:35
HTML Headings

8m 24s

Intro
0:00
Setting Heading Tags
1:36
Numbering Heading Tags
2:08
Control/Command
2:49
Importance of Heading Tags
4:00
XHTML Versus HTML5
4:33
Split View
5:05
Headings in Code View
5:56
Adding Paragraphs & Line Breaks

9m 42s

Intro
0:00
Creating Line Space
1:09
PC Versus Mac Delete
1:10
Split View
2:57
Highlighting Text
3:44
<p> Tag
4:24
Properties
5:39
Format
5:49
Changing Headings
6:18
Tag Selector
6:38
Line Breaks
7:10
Shift-Enter or Shift-Return
7:44
<br> Tag
8:02
Creating Lists

9m 4s

Intro
0:00
Title Document
1:12
Page Header
1:23
Creating Bulleted List
2:11
Select Content
2:19
Properties
3:26
Unordered List
3:29
Creating a Secondary List
5:32
Indent
6:16
Changing Bullets
7:35
List Item
7:56
Styles
7:59
What is a Definition List?

3m 13s

Intro
0:00
Creating Definition Lists
0:34
<p>
0:45
Definition Term Versus Definition
1:03
Format Menu
1:28
List Option
1:30
Definition List
1:48
Organization of Definitions
1:58
Bold & Italics

7m 17s

Intro
0:00
Evolution of <b> and <i>
0:17
Dreamweaver Default
1:38
XHTML Format
1:42
Setting Preferences
2:00
Applying Bold
3:05
Applying Italics
3:40
Applying Both Italics and Bold
3:53
Turning Off Bold/Italics
4:19
Numbered List
5:26
Modifying List
5:55
The Importance of Entity Names

9m 36s

Intro
0:00
Entity Overview
0:06
ASCII
0:32
Entity Numbers Versus Names
1:15
Creating Symbols
2:00
Copyright Symbol
3:10
Common Tab
3:44
Down Arrow
4:02
Entity Name in Split View
5:10
Insert Other Characters
5:37
Browser Preview
6:40
Example: Trouble-Shooting
7:22
VIII. CSS Basics
What Does CSS Do?

7m 17s

Intro
0:00
Example of CSS
0:37
Firefox Developer Tools
1:01
Inspector
1:08
Style Editor
1:23
Adobe Website Example
2:47
CSSZenGarden.com Example
3:47
Opening HTML Page
4:09
What is CSS?
5:41
The Syntax for a CSS Rule

10m 3s

Intro
0:00
Code View
0:56
<style>
1:35
Closing Tags
2:14
Creating Rule for Heading 1
2:51
Brackets
3:08
Selector
3:48
Adding a CSS Comment
4:13
Coding Tool Bar Apply Comment
4:33
Fonts
5:25
Color
5:44
Design View
6:23
CSS Rule Syntax Overview
6:40
Pre-Assigned Properties
7:57
CSS Designer
8:33
Selectors
8:40
Properties
9:05
CSS Style Rule Locations

10m 31s

Intro
0:00
Importance of CSS Rule Location
0:08
Page Coding
0:33
Cascading Style Sheets
1:16
CSS Style Rule Locations
1:37
Inline
1:55
Internal or Embedded
2:15
External
2:36
Inline Style Rules
2:59
Example of Inline Style Rule
4:16
Internal/Embedded Style Rules
5:36
<style> Tag Block
5:43
One Page Style Rule
6:19
Example
6:56
External Style Rules
7:43
Multiple Rules
8:13
Multiple Files
8:27
Example of Style Sheet Link
8:52
CSS Selector Options

9m 17s

Intro
0:00
CSS Selector Types
0:04
HTML Tags
0:53
Classes
2:13
Naming Classes
2:32
Creating Class Rule
2:50
Two-Step Process
2:52
IDs
3:19
Naming Function
3:32
Example of Rules in CSS
4:53
Locating Properties
6:16
Locating Value
6:24
Font Stack
7:33
IX. Formatting Text Using CSS
Using Inline Styles

8m 23s

Intro
0:00
Creating an Inline CSS Rule
0:48
Identifying Tags
1:23
Properties
2:07
Select CSS
2:21
Targeted Rule
2:31
<New Inline Style>
3:27
Setting Font
3:40
Bold
4:30
Size
5:13
Color
5:30
Matching Colors
7:13
Code View
7:28
Working with Rules on the Page

13m 38s

Intro
0:00
.txt Versus .rtf File
0:56
Copy/Paste
2:04
Header 1
2:36
Undoing Header 1 Style
2:53
Adding <p>
3:27
<p> Shortcut
3:35
Adding Styles
4:50
CSS Designer
4:55
Sources Panel
5:43
Define in Page
6:16
Adding Selector
6:43
Properties
7:52
Modifying Text
8:10
Color
8:26
Font Family
8:49
Font Size
9:28
Em Unit
9:32
Font Size
9:53
Body Font Size
12:08
The Benefits of Using an External CSS File

10m 49s

Intro
0:00
Selecting Styles in Code View
1:27
Format Menu
2:10
CSS Styles
2:13
Move CSS Rules
2:17
Style Sheet Versus A New Style Sheet.. Option
2:30
Saving CSS File
3:45
Sources Area
5:38
External CSS Sheet
6:32
Locating CSS Style Sheet
7:55
Saving in New Location
8:28
Attaching a Style Sheet

11m 15s

Intro
0:00
Related Files Toolbar
0:43
Basic HTML Versus Related Files Toolbar
1:15
CSS Designer
2:18
Sources
2:23
Adding Existing CSS Style
2:48
Locating File
3:12
Conditional Usage
3:28
Attach as Screen CSS
3:43
Creating a Style for <li>
5:40
Select External Style Sheet
5:49
P, li
6:13
Preview in Browser
6:32
p,li,dt,dd
7:35
Changing Bullet Appearance
8:20
Demonstration Summary
10:27
Creating & Using a Class Selector

12m 46s

Intro
0:00
Refresh
0:46
Basic Paste From .txt to .html
1:27
Title
2:14
Header 1 and Header 2
2:30
CSS Designer
3:00
Adding External Style Sheet
3:10
Conditional Usage
3:30
Adding h1 to External Style Sheet
4:03
Modifying to Create h2
4:10
Duplicate Tag
4:33
Rename Tag
4:39
Re-size
4:46
Highlighting Partial Area of <p>
5:40
Class Selector
6:06
Create New Class Selector
6:14
Naming Class Selector
6:33
Assigning Properties
6:56
Defining Class
8:46
Select Content
9:03
Properties
9:07
Class Section
9:09
Adjusting Class Properties
9:19
Bold
10:03
Applying Class
10:26
Dreamweaver Style Tools

6m 24s

Intro
0:00
Code Navigator
0:25
Properties and Values
2:24
Inspect in Live View
3:20
Inspect
3:24
Properties
4:14
Tag Selector Area
4:24
Importance of Inspect and Code Navigator
5:20
X. Working with Fonts on the Web
Using Fonts on the Web

5m 52s

Intro
0:00
Google Fonts
1:40
Open Source Fonts
1:55
FontsSquirrel.com
2:15
Example
2:33
Adobe.com
2:54
Edge Web Fonts
3:04
TypeKit.com
3:22
Free Trial
3:57
Downloading Fonts
4:45
Using Google Fonts

16m 48s

Intro
0:00
New to Google Fonts? Link
0:25
Google Developers
0:58
Font Effects
1:33
Browser Compatibility
2:22
Preview Text
4:06
Sizing
4:29
Sort By Available Font
4:41
Filtering
5:32
Font Name, Creator
6:08
Collecting Fonts
6:48
Review
7:17
Use
7:37
Load Time
7:45
Google Font in Dreamweaver
8:30
Code View
9:34
Link Tag
9:42
Pasting Google Code
9:48
Integrating Fonts
11:17
Setting Up New CSS Source Code
12:19
New Selector
12:42
Adding Google Font
13:30
Preview
14:34
Definition List
15:39
Adding Fonts from Fontsquirrel

14m 51s

Intro
0:00
Font Squirrel Categories
1:20
Examples
1:30
Font Search
1:40
Font Information
2:50
Test Drive
3:13
Licensing Information
3:40
Web Font Kit Tab
4:07
Format Options
4:21
Saving Font Kit
5:20
Font Squirrel in Dreamweaver
6:39
How to Use
7:00
Locating Font
8:49
Linking to Style Sheet
9:50
Replacing Font Family
11:34
Setting Default Font
12:40
Creating a Custom Font Stack

7m 11s

Intro
0:00
Customizing Fonts
0:29
Manage Fonts
0:31
Custom Font Stacks
0:55
Available Fonts
1:51
Choosing Fonts
2:17
Adding Fonts
3:49
Font Families
4:49
Updating Font Family
5:45
Working with Adobe Edge Fonts

11m 55s

Intro
0:00
Inner Page
0:44
Logo Class
1:54
Text Area
2:49
Adding Adobe Edge
3:08
Manage Fonts
3:20
Adobe Edge Web Fonts Tab
3:25
Filtering
4:45
Applying Text
6:02
Preview in Live View
6:47
Preview in Code View
8:02
Source Code
8:24
Java Script
9:29
XI. Inserting Images
Web Image File Formats

13m 54s

Intro
0:00
Vector Images Versus Raster Images
0:52
Raster Image Formats
2:27
PNG
2:51
Optimization
3:41
Control Removal
5:27
Photoshop
6:09
GIF Image Format
6:26
Drawbacks
6:41
Lossless Format
8:12
JPG Image Format
9:19
Lossy Format
9:49
PNG Image Format
10:16
Vector Graphics
11:10
Scalable Vector Graphics
11:43
Tips for Web Image Creation

4m 10s

Intro
0:00
Optimization
0:22
Importance of Optimizing
1:08
File Size
1:37
Saving Images
2:26
Original Image
3:14
The Assets Panel

7m 47s

Intro
0:00
Assets Panel
0:39
Windows Menu
0:49
Images
1:49
Colors
4:08
Hyperlinks
4:38
Flash Files
4:57
Adding Images to Assets Panel
6:06
Inserting Images & Adding Alternate Text

8m 51s

Intro
0:00
Adding Images
1:08
Dragging Images onto Page
2:21
Alt Text
3:42
Adding Image With Icon
5:02
Adding With Insert Button
6:58
Removing Image
7:48
Modifying Code Using the Quick Tag Editor

8m 26s

Intro
0:00
Control T/Command T
1:17
Selected Image
1:26
Edit Tag
1:38
Selecting Content
3:00
Wrap Tag
3:23
Insert HTML
3:52
Adding Class
4:15
Edit
5:34
Properties
5:44
Removing Tag
6:29
Quick Tag Editor in Properties
6:52
The Difference Between Alternate Text & Title

5m 8s

Intro
0:00
Title Area in Properties
0:43
Preview in Browser
0:57
Title in Browser View
1:29
Preview
2:29
Quick Tag Editor
3:23
Title Versus Alternate Text
4:24
Image Scaling Using the Properties Panel

7m 39s

Intro
0:00
Image Dimensions
1:11
Lock
1:24
Reset to Original Size
2:14
Commit Image Size
2:24
Changing Width and Height in Properties
3:04
Resized Image in Assets Panel
3:54
Commit Image Size Pop Up Window
4:15
Caution for Overriding Images
5:14
Setting the Default Editors for Dreamweaver

7m 51s

Intro
0:00
Select Image
0:24
Edit Area
0:32
Changing Preferences
0:56
Preferences
1:00
File Types and Editors
1:15
External Applications to Associate with Dreamweaver
1:27
Exploring Image Formats
1:35
Incorrect Editor
2:05
Make Primary
2:28
Adding Editor
3:18
Locating Program
4:39
Updating Preferences
5:18
Missing File Editor
7:08
Incorporating Photoshop Smart Objects

9m 1s

Intro
0:00
PSD
0:24
Inserting PSD
0:50
Linking to Different Image Page
1:02
New File
1:45
Dragging Image
2:38
Optimizing Image Within Dreamweaver
3:24
File Size
3:42
Image Sync Icon
4:55
Modifying Image in Photoshop
5:21
Locating Modified Image
6:11
Original Asset Modified
6:36
Update From Original
6:49
XII. Adding Video to Web Pages
Inserting Flash Files

10m 2s

Intro
0:00
Saving Flash File
0:56
Flash .swf File
1:44
Slide Show
2:04
Insert
2:14
Media
2:17
Inserting Slide Show Description
3:17
Properties
4:10
Flash Plugin
4:20
Play
4:32
Edit
5:29
Loop and Autoplay
5:39
Stop Autoplay
5:44
Additional Files
6:24
Scripts Folder
7:13
Eye Ball Icon
7:24
Default Text
7:30
Preview
8:30
Playing Flash File
9:00
Inserting Flash Video

9m 31s

Intro
0:00
Assets Panel
0:19
Built-in Flash Player
0:55
Flash Video File (flv)
1:30
Inserting flv. Into Web Page
2:26
Insert Bar
2:42
Inserting Flash Video
3:00
Locating FLV
3:39
Skin
4:13
Types of Skins
4:38
Detect Size
4:53
Controls
5:11
Preview
6:49
JavaScript
8:10
Inserting a HTML5 Video

12m 18s

Intro
0:00
HTML 5 Videos
0:07
Different Formats
1:19
HTML 5 Video Option
2:15
Video Tags With Controls
2:39
Alternative Method
2:50
Controls
3:09
Poster Option
3:20
Hyperlink
4:15
MP4 Format
4:45
.webm
5:08
Flash Video Fallback
5:49
Insert Using Dreamweaver
6:49
Right Click Save As
7:40
Insert Flash Video in Dreamweaver
9:00
Poster PNG
11:13
XIII. Creating Hyperlinks
Linking to Website Files

13m 6s

Intro
0:00
Identifying Photoshop Smart Objects
0:51
Avoiding Extra Spaces in Hyperlinks
2:20
Double Click to Select
2:43
Point to File
3:20
Drag to a File
3:46
Adding New File
5:14
Deleting File
6:06
Triple Clicking
6:34
Adding by Browsing
7:54
Linking to a PDF (or Word, Excel, etc)
8:53
Point to File Feature
10:40
Testing Link
12:11
Linking to Files Outside Your Website

8m 37s

Intro
0:00
Split View
0:58
Select Text
1:48
Paste Link in Properties
2:24
Test Link
3:04
Target
4:29
Adding Link Manually
6:13
Email Links

10m 42s

Intro
0:00
Shift-Home to Highlight
1:15
Common Tab
3:03
Email Link
3:32
Mailto:
4:15
Adding Subject Line
6:45
Insert %20
7:45
Preview
8:30
&cc=
9:01
Image Maps or Hotspots

16m 13s

Intro
0:00
Hot Spot
0:09
Assets Panel
1:19
Tile Vertical
3:29
Properties
4:05
Map
4:11
Editing Versus Drawing Tools
4:33
Draw Area
5:03
Alt Text
7:04
Insert Link
7:22
New
7:43
Circle Hotspot Tool
9:11
Polygon Hotspot Tool
11:30
Preview
14:17
Creating the Navigation Bar

9m 18s

Intro
0:00
Insert Menu
1:23
Structure
1:34
Navigation
1:57
Building Navigation Bar
2:56
Creating List
3:26
Linking Pages
5:06
Deleting Linked File
7:52
Horizontal Navigation Bar

10m 5s

Intro
0:00
CSS Designer
0:49
Define in Page
1:10
<ul> Versus <li>
1:51
Set Margin and Padding
3:14
Assigning Values
3:26
List Style Type
5:08
Layout
6:32
Display
6:44
Inline
6:47
Adjusting Padding
7:20
Text Transform
7:57
Overview
8:38
Adding Styles for Unvisited & Visited Links

13m 8s

Intro
0:00
Style Links
1:26
<a>
1:42
Select Color
2:48
Font Family
2:55
Text Decoration
3:30
Preview
4:14
a:link Selector
5:39
Preview
6:29
a:visited
8:25
Remove CSS Property
10:04
Disable CSS Property
10:12
Adding Styles for Hovering on a Link

6m 8s

Intro
0:00
a:hover
1:24
Show Set
1:39
Color
1:48
Font Weight
1:58
Text Decoration
2:08
Preview
2:35
Bold Hyperlinks
3:29
Hyperlink States
4:45
XIV. Positioning Content Using CSS
How to Use CSS for Page Layout

11m 8s

Intro
0:00
HTML Functions
1:02
Assigning Names
2:11
CSS
2:44
Formatting and Positioning
2:50
Content Area
3:59
Adding ID
4:23
Selectors
4:46
Properties and Values
5:06
Coding
6:12
Div id= content
6:57
Wrapper
7:49
CSS Code Styles
8:46
Understanding the Box Model

9m 16s

Intro
0:00
Outer Wrapper
0:43
Adding Margin
2:09
Width
3:43
Adding a Guide
4:43
View
4:47
Rulers
4:49
Dragging Ruler
5:14
Scrubbing
5:36
Total Width
6:51
Creating the Header and Navigation Areas

7m 53s

Intro
0:00
Insert Area
1:30
Insert Bar
1:44
Insert Header
2:15
Sources
3:44
Define in Page
3:52
Adding Navigation Bar
4:12
Properties
4:35
Separating From Header
4:43
Removing <p>
5:40
Insert Navigation
6:18
Adding Styles to the Header & Navigation Area

9m 57s

Intro
0:00
CSS Designer
0:41
Adding Styles
1:04
Assign Properties
1:12
Add Selector
1:21
Deleting Selectors
1:41
Header
1:56
Properties
2:19
Layout Type Features
2:20
Adjusting Header Width
2:44
100% of the Width
3:07
Background
3:54
Color
4:08
Adding Margin Top
4:53
Text Color
5:24
Navigation
6:59
Assign Color
7:02
Adding Margin
8:08
Creating the Content & Footer Areas

12m 26s

Intro
0:00
Content Area
0:34
Locating Margin/Padding
1:00
Select
1:46
Insert <div>
1:52
New CSS Rule
2:23
Naming ID
2:59
Define in Page
3:12
RBD Colors
3:43
Modifying Margin/Padding
4:41
CSS Designer
5:55
Content ID
6:09
Max/Min Height
6:18
Auto Margin
6:47
Footer
7:27
Add Selector
7:39
Footer Width
8:39
Background Color
8:53
Color Format
9:38
Insert
10:03
Footer Tag
10:07
Preview
11:19
Centering Page Content

9m 1s

Intro
0:00
Properties
0:44
<body>
1:01
Insert Div
1:20
New CSS
1:40
Selector Type
1:44
Wrapper
1:47
Box
2:02
Set Width
2:07
Auto Margins
2:42
Background Color
3:03
Background Color for the Page
6:33
Body
6:47
Properties
7:02
Fine Tuning the Page Layout

14m 23s

Intro
0:00
Background
0:38
Wrapper ID
0:47
Header Tag
1:33
Nav
2:15
Content ID
2:24
Insert Image
3:00
Replacing Text With Image
3:39
Matching Wrapper Width With Image
4:26
Nav Area
5:05
Live View
5:41
Modify Content Within CSS Designer
5:44
Padding
6:43
Modifying Background Color
7:23
Preview
8:10
Footer
9:08
Width
9:50
Color
9:59
IE Browser Mode
11:27
HTML5 in IE
11:55
XV. Additional CSS Properties for Positioning
Absolute Positioning

15m 14s

Intro
0:00
Insert Div Tag
1:50
New CSS Rule
2:18
Selector Name
2:34
CSS Designer
3:24
Properties
3:44
Layout
3:54
Background Color
4:24
Code View
4:49
Copy/Paste
5:24
Left, Middle, Right Div IDs
5:41
Background Color
6:46
Absolute Positioning
7:19
Layout
8:08
Setting Position to Absolute
8:26
Setting Margins for Middle
8:56
Positioning Left
9:08
Live View
9:49
Browser Offset
10:19
Summary
12:55
Code View
13:42
Exploring Floats

10m 1s

Intro
0:00
Adding Float to Header
2:16
Select Header
2:24
Layout Icon
2:26
Resetting Float
2:38
Preview
4:18
Code View
5:02
Moving Divs in Between Right, Left
5:05
Left Float
7:43
Right Float
7:49
What is a Clear?

12m 18s

Intro
0:00
Previewing Within Dreamweaver
1:27
Modifying Header Width, Height
2:14
Modify Footer Width, Height
2:55
Modifying Left Div Width
3:22
Right Div Width
4:13
Float None
4:48
Removing Float
6:06
Clear
8:48
Left
8:57
Preview
9:10
Clearing Right Versus Left
11:10
Aligning Images Using Floats

10m 2s

Intro
0:00
Image Tag in Tag Selector
1:34
alignRight Class
1:39
Unused Class, IDs
1:43
Creating Class
2:58
.alignLeft
3:12
Add Float Left
3:55
Add Padding
4:07
Adding Class to Image
4:58
Code View
6:39
Duplicate
8:03
.alignRight
8:06
Testing Alignment
8:55
Linking to an ID Selector

11m 41s

Intro
0:00
Page Length
1:00
Creating a Hyperlink to an ID on the Page
2:06
Create a Nav Bar
2:28
Linking to Different Parts of the Page
3:13
ID
3:53
Insert Div
4:20
Select and Link
4:57
Preview
5:45
<body>
7:09
Define in Page
7:38
#top
7:49
Create Link to Top
8:12
Preview
10:18
Fixed Positioning

7m 3s

Intro
0:00
Add Image
1:05
Matching to Wrapper
1:24
Set Fixed Positioning on Div
2:03
Copy/Paste ID Rule
2:16
Preview
3:45
Design View
4:42
CSS Designer
4:51
Show Set
4:56
Deleting Fixed Image
5:08
Assigning Background Image
5:23
Preview
6:04
XVI. Working with Tables
Creating a Table

7m 16s

Intro
0:00
Tables
0:19
Insert Menu
1:00
Common Tab
1:16
Rows
1:34
Columns
1:39
Split View
2:23
NBSP
3:18
Clicking and Dragging Into Table
3:32
Widths
4:00
Modifying HTML Table Properties

11m 5s

Intro
0:00
Double Border
0:22
Deleting Double Border
1:16
Select Table Tag
1:30
Properties
1:37
Rows and Columns
1:43
Cell Spacing
1:49
Cell Padding
1:59
Preview
2:32
Deleting Rows
3:08
<tr>
3:45
Header Row
5:07
<th>
6:00
CSS Designer
6:24
External Style Sheet
6:43
Properties
6:49
Text Align
7:17
Setting Font Family
7:35
Modifying Line Height
8:09
Delete Column
9:49
Table Widths
10:23
Formatting Content Within a Table

10m 46s

Intro
0:00
Table Header
0:10
Styling the Table
0:34
Alignment
1:03
Modifying a Cell
2:17
Setting Vertical Alignment
2:19
Modifying Font
3:14
CSS Designer
3:36
Span Tag
3:52
Adding Styles to <td>
4:22
Text Area
5:39
Enable/Disable
6:14
Font Size
6:42
Widths
7:32
Select Table
7:56
Adjust Widths
8:14
Pixel Width
8:25
Dragging Cells
8:34
Locking Columns in Place
8:44
Clear All Widths
8:59
Visual Aids
9:19
Centering Table
9:42
Importing Spreadsheet Data

7m 36s

Intro
0:00
Importing Data
0:21
File Menu
0:51
Import
0:54
Importing Data From Excel
1:28
Locating Document
1:32
Delimited File
3:24
Importing Tabular Data
4:09
Modifying Delimiter
4:59
Cell Padding and Spacing
5:37
Table Widths
6:36
Merging and Splitting Table Cells

9m 23s

Intro
0:00
Moving Files
0:50
Insert Table
1:26
Caption
1:54
Adding Content to Table
2:46
Using the Tab Key
3:35
Adding a New Row
3:57
Merge/Split Cells
4:47
Right-Click
4:59
Merging Cells
5:06
Splitting Cells
5:52
Setting Width
8:43
Adding Column and Moving Tables

4m 32s

Intro
0:00
Adding a Column
0:13
Column Table Width
0:27
Adding Column
0:43
Deleting Column
1:18
Moving Table
1:24
Dragging Text
2:37
XVII. Creating a Form Using HTML 5
Creating an HTML Form

10m 19s

Intro
0:00
Insert Bar
1:59
Forms
2:04
Adding ID
3:31
Method
4:08
Form Tags
4:38
POST Versus GET Method
4:54
Assigning ID
5:29
Naming
5:49
Fieldset
7:30
Legend
7:40
Action Attribute
8:29
Text Field Elements

8m 54s

Intro
0:00
Text Field
0:04
<fieldset>
0:23
Form Tab Text Icon
0:54
Renaming Text Field
1:15
<label>
1:28
Labeling Box
1:58
Text Box Re-sizing
2:14
Default Size
2:17
Title Area
2:52
Inserting Text Field
4:53
Code View
5:13
Label Tag
6:25
Adjusting Form Field Name
7:17
Adding Radio Buttons

9m 55s

Intro
0:00
New Fieldset
0:42
Radio Button
1:48
Radio Button Versus Radio Group
2:55
Name Radio Button
3:15
Adding Label
3:31
Adding Value
3:38
Label Icon
5:39
Radio Button Label
6:57
Checked Value
8:37
Select Lists

9m 5s

Intro
0:00
Drop-down Menu
1:02
Rename Label
2:41
Name Drop-down
3:07
List Values
3:16
Modify List Values
4:17
Using Up Arrow
5:04
Preview in Browser
5:35
# as a List Value
6:18
Selected Menu
7:15
Checkboxes & Submit Button

9m 28s

Intro
0:00
Checkbox Group
1:11
Adding Checkbox Labels and Values
1:33
Checkbox Group Quark
2:32
Alphabetize Checkboxes
3:21
Deleting Checkbox
3:37
Modify List
4:24
Preview
4:52
Radio Buttons Versus Checkboxes
4:53
Adding Submit Button
5:53
Reset Button
7:04
Value
7:43
Adding a Multi Line Text Area

5m 24s

Intro
0:00
Comments Area
0:30
Insert Text Area
0:55
Rename Text Area
1:16
Rows and Columns
1:38
Value
2:47
Preview
3:04
XVIII. HTML5 Form Elements & Form Validation
Required Fields in HTML5

12m 24s

Intro
0:00
Preview Contact Form
0:54
Hovering Over Fields
0:59
Google Chrome Feature
1:11
Test Send Form
1:29
HTML5 Email Field
2:15
Split View
2:24
Creating Required Fields
2:47
Auto Focus
3:01
Creating Required Email Field
4:49
Required Checkbox
6:08
Preview
6:21
Form Validation
6:46
HTML5 Forms in Internet Explorer
7:28
Firefox
7:49
Client Side Validation
9:31
Server Side Validation
9:53
Setting Email Box Size
10:34
Validating Email & Phone Fields

6m 26s

Intro
0:00
HTML5 Phone Field
0:41
Tel Field
0:47
Naming
1:14
Sizing
1:23
Coding
3:19
Apply HTML Comment
3:26
Un-Comment
5:21
Adding an HTML Date Picker

6m 22s

Intro
0:00
Date
1:23
Preview in Firefox
1:49
Chrome Compatibility
2:04
Date Picker
2:11
Safari Compatibility
2:53
Internet Explore Compatibility
3:25
Related Form Fields
5:15
Styling Valid, Invalid & Required Fields

12m 34s

Intro
0:00
Text Area
2:10
CSS Rules
2:12
Code View
2:34
Required Fields
3:14
Colors
3:58
Form Validation
4:30
Testing Form Validation
4:40
Firefox
5:19
Colored Borders
5:32
Commenting Out Background Color
7:39
Valid Versus Invalid
8:08
Preview in Firefox
9:08
Invalid Overrides Required
9:40
Preview in Safari
10:34
XIX. Reusable Content
Saving Code Content Using the Snippets Panel

7m 59s

Intro
0:00
Snippets
0:35
Copy Fieldset
1:18
Window
1:37
Snippets Panel
1:42
Creating New Folder
2:10
Dragging Folder
3:06
New Snippet Icon
3:54
Snippet Type
4:42
Preview Type
4:55
Dragging Into New Page
5:09
Recent Snippets
6:56
Template & Library Overview

6m 26s

Intro
0:00
Dreamweaver Templates
1:17
.dwt Extension
1:36
Templates Folder
1:40
Applies to Entire Page
2:20
Library Item
2:33
.lbi Extension
3:02
Dreamweaver Folder
3:10
Repeatable Page Element
3:44
Size
4:09
Maintaining Folders
4:50
Creating a Library Item

7m 51s

Intro
0:00
Creating Template and Library Folders
0:59
Select Library Item Content
1:30
Assets
1:56
Images
2:09
Library Area
2:42
Properties
3:49
Open Library Item
4:19
Insert
5:24
Adding Library Item Under Form Field
5:45
Dragging From Panel
6:14
Saving to Web Server
7:24
Modify a Library Item

4m 26s

Intro
0:00
Open Library Item
0:20
Pencil Icon
0:22
File
1:06
Update Library Items
1:09
Show Log
1:59
Using Library Items
3:44
Converting A Page into a Template

6m 11s

Intro
0:00
Save as Template
1:05
Naming Template
1:31
Adding Description
1:42
Update Links
1:54
Preview
2:36
Safari Compatibility
4:50
Locating Templates in Assets Panel
5:28
Creating Editable Regions

8m 6s

Intro
0:00
Editable Regions
0:47
Naming Region
1:03
Preview
3:19
Removing Tag
4:24
New Page Based on Template
5:41
Saving Multiple Copies of a Template
7:27
Applying a Template

8m 33s

Intro
0:00
Modify Menu
0:34
Templates
0:38
Apply Template to Page
0:46
Select Template
0:50
Inconsistent Region Names
1:05
Move Content to New Region
1:52
Nowhere Region
2:06
Preview
2:34
Bulleted List in Template
4:10
Modifying Templates
5:07
Page Header
8:16
Correcting CSS Issues on Pages Based on the Template

13m 25s

Intro
0:00
Bulleted List in Template
0:33
CSS Designer
1:28
Selectors Causing Issue
1:44
Deleting Tags
2:04
Chevron Selector
4:14
Hyperlinks
5:51
Update Template Files
6:24
Updates Pages Status
6:40
Modifying Logo Class
7:54
Left Div Margin/Padding
10:01
Float
10:28
Available Modifying Tools
12:30
Completing the Template Corrections

8m 32s

Intro
0:00
Nav>ul>li
1:05
Adding New Selector
2:19
Modifying Layout
2:50
Modifying Margin
2:54
Nav a
3:56
Preview
4:55
Modifying Width
5:29
Previewing Other Pages With Same Template
6:14
Why Templates Corrections?
8:12
XX. Adding CSS3 Properties
Using CSS3 & Proprietary Prefixes

7m 25s

Intro
0:00
Live View
0:57
Preview in Google Chrome
1:40
Gradient
1:45
Firefox
1:55
Safari
2:01
Internet Explorer 8
2:06
Code View
2:29
CSS 3 Properties
2:39
Prefixes
2:55
Testing Prefixes
4:21
MS Filter
5:00
Box Shadow Property
5:09
Firefox
5:19
Google Chrome
5:24
Proprietary Prefixes
6:29
Creating Drop Shadows

8m 16s

Intro
0:00
CSS3 Properties in Live View
0:57
CSS3 Properties in Browser
1:03
Styles
1:19
Drop Shadow ID
1:22
Background Color
1:50
Background Image
1:54
Box Shadow Property
2:04
Adjust in Live Button
2:16
h-Shadow, v-shadow, blur
2:29
Preview in Browsers
4:39
Applying MS Filter
5:45
Copy/ Paste
6:00
Modifying Offsets
7:00
Working with Gradients

10m 8s

Intro
0:00
Live View
0:45
Gradient ID
1:26
Background Properties
1:53
Background Gradient
2:11
Gradient Warning Prompt
2:23
Rgba
2:46
Applying Gradient
3:45
Preview in Live View
4:11
Modifying Gradient
4:19
Code View
5:00
Webkit Prefix
5:17
Preview in Browsers
5:31
Older Browsers
6:10
Rgba in Background Color
6:57
Converting rgba to rgb
7:24
Rounded Corners

8m 31s

Intro
0:00
CSS Designer
1:04
Styles
1:11
Rounded Corners ID
1:17
Properties
1:21
Changing Color Format
2:05
Background
2:55
Changing Properties of Border
3:10
Linking Border Radius
5:10
Unlinking Border Radius
5:26
Preview in Browsers
7:26
Working with Multiple Background Images

8m 32s

Intro
0:00
Wrapper Box
0:58
Remove Comment
1:43
Background Images
2:20
Background Repeat
2:36
Background Position
2:42
Adjusting Wrapper Height
4:29
Applying Comment
5:46
Overlapping Images
7:22
Working with CSS Transitions Panel

12m 37s

Intro
0:00
CSS 3 Transitions
0:34
Opening in Window Menu
0:59
Remove Transition
1:24
Options
1:27
Transition Functions
2:44
Setting Target Rule
3:54
Transition On
4:15
Setting Transition Duration, Delay
4:37
Timing Function
5:11
Adding Properties
5:41
Create Transition
7:08
Preview/Test in Browser
7:28
Hover State
9:08
Transition Coding
9:42
Proprietary Prefixes
10:15
Edit Transitions
11:52
Methods for Expanding Transition Code

9m 46s

Intro
0:00
Edit Transition
0:35
Use Different Transitions
0:47
Code View
1:24
Select Present Transition Code
1:41
Comment Out
1:55
Copy/Paste New Code
2:33
No Repeat
5:19
Preview in Browsers
6:53
Animation Alternative
9:27
XXI. Going Beyond HTML & CSS
Adding a Swap Image Behavior

7m 30s

Intro
0:00
Image Swap
0:36
Behavior
0:50
Insert Image to Transition
1:47
Alt Text
2:12
Behaviors Panel
2:36
JavaScript
2:52
Swap Image
3:12
Adding Name to Image
3:17
Adding ID
3:49
Select Image Source
4:29
Preloading Image
4:59
Restore Images on Mouse Out
5:24
Adding a Larger Image Pop Up Window

8m 21s

Intro
0:00
Thumbnail
1:19
Properties
1:48
Behaviors
2:17
Add Open Browser Menu
2:25
2:42
Open Browser Window
3:39
onClick
3:51
Set Window Width and Height
4:48
Firefox Preview
6:07
Resize Handles
7:36
Extending Dreamweaver Using the Adobe Exchange Panel

7m 57s

Intro
0:00
Extensions
0:25
Manage Extensions
0:43
Adobe Exchange Panel
0:51
Sort
2:46
My Stuff
2:54
Searching
3:53
Manage Extensions from Window Menu
5:04
Preview Extension
6:00
Notes
6:18
Installing the Easy Rotator Extension

7m 8s

Intro
0:00
Dreamweaver Exchange Classic
0:18
Easy Rotator
0:47
Checking Compatibility
1:00
Downloading Extension
1:20
Adobe Extension Manager
2:44
Instructions for Opening
3:34
Adding EasyRotator
4:47
Insert Menu
5:53
Creating a jQuery Image Gallery Using EasyRotator

7m 13s

Intro
0:00
Windows Wizard
0:17
Insert
0:32
Rotator Name
1:04
Add Photos
1:25
Titling Photos
1:56
Layout and Presentation
2:30
Preview Feature
3:19
General Settings
3:50
Preview
4:53
Internet Explorer Compatibility
5:22
Dreamweaver Web Widgets

3m 46s

Intro
0:00
Dreamweaver Web Widgets
0:19
Free and Paid Extensions
0:34
Free Responsive HTML Template
1:30
Checking Compatibility
1:53
XXII. Building Responsive Designs
What is Responsive Design?

7m 5s

Intro
0:00
Responsive Website
1:17
Responsive Image Example
2:08
Fireworks File
4:01
Mobile Version
4:13
Planning for Mobile
5:14
Responsive Web Design
6:29
Setting Separate Styles for Screen & Print

8m 42s

Intro
0:00
Screen and Print Style Sheets
0:22
Deleting Style Sheet
0:53
Attach Existing Style File
1:09
Conditional Usage
1:37
Preview in Firefox
2:07
Hiding Navigation in Print
4:07
Select Styles Print
4:23
Main Links
4:42
Display None
4:50
Visibility Hidden
5:37
Site Templates
7:14
Blank Page
7:18
CSS Layout
7:22
Planning for Multiple Screen Sizes

7m 55s

Intro
0:00
Viewing in Different Screen Widths
2:14
Mobile Device Navigation
3:52
Mobile Size Icon
5:25
Tablet Size Icon
5:53
Desktop Size Icon
6:04
Resolution Switcher
6:30
Full Size View
6:47
Adjusting Screen Sizes Using Media Queries

14m 48s

Intro
0:00
Main Links
1:20
@Media Panel
1:34
Define Media Query
1:56
Max-Width
2:36
Coding
2:49
Main Links Selector
3:14
Modify Font Size
3:59
Adding Min-Width Condition
4:25
Preview in Browser
5:47
Adjusting Min-Width
6:20
Modifying Padding
7:18
Block Display
10:24
Set Background Color
11:41
Media Query
14:09
Modifying Media Queries within the Media Panel

16m 17s

Intro
0:00
Modifying Nav Selector
2:09
Padding Inner Link
3:08
Modify li
3:57
Modify Logo
4:46
Adjust Line Height
4:59
Gradients in Live View
6:07
Properties
7:43
Modifying Main Links Class
8:08
Multiple Main Links Selectors
8:57
Modifying in Code View
11:13
Red @Media Code
11:31
Defined in Global
13:37
Modifying the Navigation Area to Accommodate Mobile Devices

11m 56s

Intro
0:00
Hovering Over Selector
0:47
Text Transform
2:06
Create New Main Links Selector for Wider Size
3:57
Display Inline
4:20
Add li Selector
5:15
Nav for Larger Width
6:47
Adding Proprietary Prefixes
9:32
Media Queries for Responsive Design

8m 41s

Intro
0:00
Modify 450px Screen View
1:10
Add li Selector
1:26
Block Display
2:06
Adjust Line Height
2:38
Set Border Properties
3:07
Remove Media Query
5:32
Double-Clicking Media Query
6:54
What is a Responsive Image?

4m 23s

Intro
0:00
Preview in Browser
0:45
What is a Responsive Image?
1:10
Eliminating Media Queries
1:49
Images on Larger Screen
3:43
Creating a Responsive Image

14m 28s

Intro
0:00
Steps to Creating a Responsive Image
1:23
Removing Image From p Tag
2:26
Split View
2:55
Create Div and ID
4:10
New CSS Rule
4:55
Name Selector
5:16
Drag & Drop Image
7:29
Create a Compound Rule
7:58
Creating Responsive Img ID
8:58
Setting 100% Max-Width
9:44
Delete Original Width and Height
10:14
Apply Class
11:12
Test in Browser
11:26
Class Versus ID
13:21
XXIII. Adobe Edge Product
Adobe Edge Products Available in Creative Cloud

7m 52s

Intro
0:00
Edge Tools for CC
0:53
Edge Animate
1:07
Edge Reflow
2:00
Edge Code
2:16
Edge Inspect
2:45
Edge Web Fonts
4:18
Typekit
4:52
PhoneGap Build
5:10
Adding to Your Creative Cloud
6:26
Working with Edge Web Fonts & Typekit

4m 27s

Intro
0:00
Typekit
0:23
Option Available
1:18
Trial Offer
1:36
Creative Cloud Membership
2:09
Apps Available and Installed
2:13
Manage Fonts
3:27
Adobe Edge Web Fonts
3:31
Inserting Edge Animate Compositions into Web Pages

11m 56s

Intro
0:00
Create New
0:26
Settings
1:01
Animate Deployment Package
1:34
Preview in Browser
4:02
Split View
5:08
Animation Goes Here Tag
5:16
Insert Media
6:01
Selecting Edge Animate Package
6:25
Preview in Browser
7:06
Edge Animate Assets Folder
7:21
Preview in Live View
8:52
Split View
10:07
Adding Styles to the Composition

5m 45s

Intro
0:00
Animate ID
0:52
Select Composition
1:30
Insert Div
2:00
Wrap Around Selection
2:22
Select ID
2:38
Modifying Width
3:19
Positioning Composition
4:40
Setting Up Edge Inspect to Preview in Multiple Devices

6m 32s

Intro
0:00
Why Edge Inspect?
0:36
Sign into Creative Cloud
1:24
Instructions on Creative.Adobe.com
1:44
Google Chrome
2:15
Download Browser Extension
2:27
Install Mobile Client
4:26
Using Edge Inspect to Preview Pages on Other Devices

8m 11s

Intro
0:00
Incorporating Additional Devices
0:56
Edge Inspect Instructions
1:51
Edge Inspect Icon
2:34
Locating Connected Device
2:39
Refresh
2:52
Show Full Screen
2:59
Screen Shots on Devices
3:09
Screen Shot Folder
3:19
Connecting Mobile Device
4:49
Example: Delta.com
5:36
XXIV. Site Maintenance & Publishing
Find & Replace for Text or Coding

12m 56s

Intro
0:00
Find and Replace
1:17
Control-F, Command-F
1:20
Edit
1:29
Find In Drop Down Menu
1:45
Searching Entire Website
2:59
Search Source Code, Text, Text (Advanced)
3:58
Search Specific Tag
4:53
Replace Prompt
6:27
Find and Replace Icon
8:18
Finding Selectors
9:21
Search Source Code
9:41
Match Case Option
9:57
Use Regular Expressions Option
11:54
Close Tab Group
12:29
Creating Untitled Documents & Alt Text

6m 25s

Intro
0:00
Site Report
0:32
Clear Results
0:51
Running a Report on Entire Current Local Site
1:20
Opening the Page
3:33
Empty Document Title Versus Untitled Document
4:39
When to Run Site Reports
5:42
Entering Web Server Information

7m 17s

Intro
0:00
Site Menu
0:37
Manage Sites
0:40
Pencil Icon
0:48
Site Setup
0:53
Servers Category
1:26
What is an FTP?
1:49
FTP Address, Username and Password
2:10
Test FTP Server
3:03
Trouble Connecting
4:36
Remote and Testing
6:07
Uploading Files to the Web Server

8m 13s

Intro
0:00
Manage Sites
0:14
Successful Web Server Connection
1:10
Site, Put
1:44
Dependent File Prompt
1:56
Preview in Browser
3:19
Uploading Multiple Files
4:43
Details of Upload
5:39
Preview in Browser
5:56
Error Message
6:23
Downloading from the Web Server

4m 31s

Intro
0:00
Site, Get
0:23
Exploring Local and Remote Sites
1:03
Connect
1:30
Downloading Files
1:56
Expand Icon
3:03
Collapse Interface
3:44
XXV. Creating Mobile Websites with jQuery Mobile
What is jQuery Mobile?

8m 21s

Intro
0:00
jQuery.com
0:47
jQuery Mobile
1:44
Compatible Mobile Devices, Operation Systems
3:02
Theming
3:33
ThemeRoller
3:42
Examples of jQuery Websites
4:00
jQuery Mobile Plugin
6:15
Dreamweaver & Building jQuery Mobile Sites
7:27
jQuery Mobile Versions

2m 51s

Intro
0:00
Updating jQuery Mobile
0:01
Determining if You Need to Upgrade
0:41
Legacy Versions
1:25
Upgrading
1:33
Dreamweaver and jQuery
2:39
Building a jQuery Mobile Page

8m 35s

Intro
0:00
Site Templates
0:52
Starter Templates
1:09
JQuery Mobile Versions
1:13
CDN
1:22
Local Versions
2:06
jQuery Mobile CSS Pages
3:58
Saving jQuery Mobile File
4:50
Downloading Dependent Files
5:25
Preview in Browser
6:48
jQuery Mobile Base Page
6:52
jQuery Mobile Pages

8m 5s

Intro
0:00
Renaming Pages, Sections
0:30
Footer
1:51
Preview in Browser
3:15
Navigating Through the Mobile Website
3:28
Dreamweaver Tabs in jQuery Mobile
4:48
Code View
5:33
CSS Files
5:44
JavaScript Files
5:51
Internet Explore Compatibility
7:18
Working with jQuery Mobile Themes

5m 47s

Intro
0:00
jQuery Mobile Built-in Themes
1:11
Black and Grey Theme
2:10
Blue Theme
2:21
Shades of Grey
2:47
Yellow Theme
2:59
How to Apply Themes
3:35
Adding Themes
3:59
Compatibility
5:00