Home » Software Training » Adobe Dreamweaver CC » Adding a Swap Image Behavior

Candyce Mairs

Candyce Mairs

Adding a Swap Image Behavior

Slide Duration:

Table of Contents

Section 1: 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
Section 2: 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
Section 3: 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
Section 4: 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
Section 5: 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
Section 6: 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
Section 7: 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
Section 8: 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
Section 9: 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
Section 10: 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
Section 11: 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
Section 12: 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
Section 13: 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
Section 14: 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
Section 15: 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
Section 16: 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
Section 17: 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
Section 18: 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
Section 19: 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
Section 20: 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
Section 21: 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
Section 22: 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
Section 23: 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
Section 24: 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
Section 25: 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
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 CC
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

  • Related Books

Please login to ask a question and view discussion.

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!

Adding a Swap Image Behavior

  • We are going to take a look at adding interactivity to our web page by adding a swap image behavior
  • We will let Dreamweaver write the JavaScript code for us
  • When we hover over an image, the image will change to a different image and then return to the original image when we mouse off the image
  • Dreamweaver will create the code for this to happen which makes it very easy for us
    • Create a new page and save it as swap-image.html
    • Add an image to the page from the images folder, we want to use 2 images that are the same size for this behavior, the assets panel is a great place to double check the width and height of the images
    • Add an ID to the image on the page and call it swapping
    • Go to the Tag Inspector panel and select the behaviors button
    • Click the + sign and choose Swap Image
    • In the Set source to: choose another image, this will be the image that shows when you place your cursor on the image, be sure preload images and restore images onMouseOut are checked
    • Save the page and preview it in the browser hovering over the image
    • You will see the image change as you move over the image with your cursor

Adding a Swap Image Behavior

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
  • Image Swap 0:36
    • Behavior
    • Insert Image to Transition
    • Alt Text
  • Behaviors Panel 2:36
    • JavaScript
    • Swap Image
  • Adding Name to Image 3:17
    • Adding ID
  • Select Image Source 4:29
    • Preloading Image
    • Restore Images on Mouse Out

Related Books

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
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.