How To Create A Submit Button In Dreamweaver

Candyce Mairs

Checkboxes & Submit Button

Slide Duration:

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

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

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

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

8m 49s

Intro

0:00

0:12

0:30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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