Candyce Mairs

Importing Spreadsheet Data onto a Page

Slide Duration:

Table of Contents

Section 1: Course Introduction

What is Dreamweaver?

3m 15s

Intro

0:00

Dreamweaver Introduction

0:07

Dreamweaver Interface

0:32

Code View

0:48

Design View

1:04

Preview in Browser

1:08

Adobe Products

1:29

Panels and Menus

1:47

Summary

2:31

How to Use the Project Files for this Course

3m 42s

Intro

0:00

Course File Instructions

0:08

Extras Folder

1:46

Summary

2:44

Section 2: Introduction to the Web

URL Basics

5m 53s

Intro

0:00

Domain Name

0:22

Protocol

1:34

Folders and Website Files

2:54

Web page file extension

4:33

Client Server Environment

6m 39s

Intro

0:00

Web Server Example

0:21

Port Number

2:17

Browser Environment

3:45

Other Browsers

4:31

Summary

5:07

Static vs. Dynamic Pages

4m 56s

Intro

0:00

Static Page Request Process

0:30

Dynamic Page Request Process

1:32

Application Server

2:24

Server Side Languages

3:01

Summary of Differences between Static and Dynamic

3:44

Separation of Content & Presentation

6m 35s

Intro

0:00

Three Parts of a Browser

1:15

HTML - Page Structure

1:25

CSS - Styling

2:16

JS - User Interactivity

4:29

Interpreters

5:24

Summary of the Three Parts of a Browser

6:03

Planning the Website Development Process

5m 8s

Intro

0:00

Design Development process

1:24

Initiate Project Process

1:55

Site Development Process

2:08

Project Planning Documents

5m 8s

Intro

0:00

Project Plan

1:16

Design Document Questionnaire

1:45

Design Document Items

2:25

Homepage Wireframe

2:42

Website Wireframe

3:12

3:35

HTML Naming Conventions

6m 46s

Intro

0:00

Examples of Different Naming Conventions

0:49

Headless Camel Casing

2:34

File Extension Options

4:22

Summary of Naming Conventions

5:25

Creating the Page Designs

5m 44s

Intro

0:00

Examples of Page Designs and Programs

0:40

Photoshop Example

1:27

FireWorks Example

2:11

JPEG Format Example

4:25

3m 30s

Intro

0:00

0:50

Copyrighted Page

1:26

Website Accessibility & the 508 Standard

6m 4s

Intro

0:00

Accessibility Definition

1:53

Accessibility Features

2:30

Four Principles of Accessibility

3:30

Section 3: Working in the Browser

HTML Versions & DOCTYPE

8m 25s

Intro

0:00

XHTML Document Type

0:37

Set Default Document Type

2:31

HTML 5 Document Type and Comparison

4:21

Browser Differences

8m 28s

Intro

0:00

Testing Different Browsers

1:10

Google Analytics

3:36

Browser Developer Tools

6m 11s

Intro

0:00

Google Chrome Developer Tools

0:15

Firefox Web Console

1:32

Internet Explorer Developer Tools

2:34

Change Browser Mode

2:49

Quirks Mode

4:31

CSS Viewer

5:16

Additional Browser Tools

7m 36s

Intro

0:00

Web Developer Toolbar

0:53

View Document Size

1:34

Populate Form Fields

2:24

ColorZilla

2:54

Firefox Extensions

3:53

Install Extension

4:46

Customize Toolbar

5:41

Using Firebug for CSS/JS

5m 50s

Intro

0:00

Installing Firebug

0:28

Firebug Tabs

2:30

JavaScript Console

2:36

HTML Tab

2:47

CSS Tab

3:35

Inspect Elements

3:58

Link to Firebug

5:21

Section 4: The Dreamweaver Interface

The Workspace Switcher

5m 31s

Intro

0:00

Workspace Templates

0:28

Reset Workspace

1:47

Classic Workspace

2:25

Workspace Switcher

3:06

Manage Workspaces

3:35

New Workspace

3:43

Dreamweaver Interface Overview

6m 29s

Intro

0:00

Menus

0:43

Create New HTML

1:33

Design View

1:49

Insert Bar and Tabs

2:21

Document Window

3:24

Properties Tab

4:11

Panels

5:05

Overview and Summary

5:21

Navigating the Interface

8m 14s

Intro

0:00

Modify/Customize Panels

0:44

Move Panels

3:53

Rearrange Panels

4:42

Open and Close Properties Tab

7:13

Dreamweaver Preferences

4m 10s

Intro

0:00

General Preferences

0:23

Allow Multiple Consecutive Spaces

0:44

Fonts

1:09

New Document

1:43

Preview in Browser

2:43

Insert Bar & Insert Menu

4m 26s

Intro

0:00

Create New HTML

0:16

Insert Bar

0:46

Forms Tab

1:03

Common Tab

1:18

Insert Menu

1:39

Insert Bar within Designer Workspace

3:36

Working in Code View

Intro

0:00

Example Page

0:26

Coding Toolbar

1:13

Apply HTML Comment

3:57

Remove Comment

4:39

Properties Area

4:56

Line Numbers

5:58

Summary

6:08

Installing Additional Browsers in Dreamweaver

5m 50s

Intro

0:00

Edit Browser List

0:56

Add a browser

1:49

Set Secondary Browser

3:58

Select Preview in Browser

4:42

Section 5: Getting Started

Defining a Site in Dreamweaver

11m 18s

Intro

0:00

Manage Sites

1:38

Create a New Site

2:57

Files Panel

6:16

Rearranging Site Files

7:10

Local View

9:40

Summary

10:14

The Importance of the Files Panel

7m 2s

Intro

0:00

Blank Example Site in Files Panel

0:13

Files Panel Options

0:59

Edit Menu

2:06

View Menu

2:22

Site Menu

2:30

Delete Files

2:51

Rename File

3:54

Files Refresh

5:31

Section 6: Creating a Page Using a Pre-Defined Layout

Pre-Defined CSS Layout Options

8m 21s

Intro

0:00

Course Files

0:21

Files in Files Panels

1:37

New Document

2:38

Page Type

3:14

Layout Options

3:21

Creating a Pre-Defined CSS Layout Page

7m 18s

Intro

0:00

New HTML5 Layout Page

0:49

Preview in Browser

2:28

Save Page

2:43

Browser Preview

4:35

Page in Files Panel

5:12

Building the Header Area

15m 39s

Intro

0:00

Code View and Comments

0:40

Customizing the Header

1:22

Removing Image Placeholder

2:36

Select Regions

3:38

Adding Text

3:55

Set Page Title

4:24

CSS Styles Panel

7:31

Edit Header Color

8:39

Edit Header Text

9:58

Add CSS Style Rule

11:15

Rule Definition

12:35

Summary

14:36

Modifying the Navigation Column, Part 1

9m 1s

Intro

0:00

Modifying the Side Bar

0:23

Tag Selection

1:07

Changing Position and Background Color

2:04

Changing Text Color

4:59

Changing Hover Text and Background Color

6:49

Summary

8:17

Modifying the Navigation Column, Part 2

10m 36s

Intro

0:00

Modifying the Side Bar

0:30

Editing Link Text

0:34

Correcting Mistakes

1:20

Inserting an Image

3:52

Fixing Format Errors

5:08

Modifying the Header

7:28

Add new Margin Property

8:03

Summary

9:52

Adding Content to the Page

9m 42s

Intro

0:00

Modifying the Main Content Area

0:23

Removing Content

1:15

Inserting Code and Content

2:35

Page and Text Formatting

4:30

Summary

9:21

Modifying the Footer Area

7m 38s

Intro

0:00

Modifying the Footer

0:22

Footer Tag

0:31

Changing the Background Color

1:36

Customizing Text

2:22

Customize Address Tag

3:42

Preview in Safari

5:46

Format Troubleshooting

6:09

Changing the Page Background Color

4m 41s

Intro

0:00

Modify Background Color

1:01

CSS Short Hand

1:39

Save Command Shortcut

2:53

Browser Preview

3:10

Summary

4:03

Section 7: Building a Web Page from Scratch

HTML Page Code

5m 58s

Intro

0:00

HTML5 Page

0:41

Change Default Doctype to HTML5

1:16

HTML5 Code

2:39

Head Section Code

3:01

Title Tag Code

3:41

Importance of Code View

4:16

Summary

5:12

Creating a New Page

4m 34s

Intro

0:00

Keyboard Shortcut to Create New Page

0:49

Saving a New Page

1:21

Create New Page with New Document

3:27

The Importance of a Title

4m 43s

Intro

0:00

Importance of a Title on a Page

0:10

New Document

0:17

Save Document

0:35

Preview in Chrome

0:52

Default Bookmark Title

1:13

Search Engine Optimization

1:35

Preview in Firefox

3:35

Section 8: Adding Text Content

Discovering Paste Special

11m 1s

Intro

0:00

Paste Special Command from Word

1:05

Create New and Save

1:22

Paste Special with Full Formatting

2:44

Clean Up Source Code

4:42

Paste Special with Basic Formatting

5:34

Paste Special with Structure Only

6:30

Paste Special with Text Only

7:29

Change Paste Preferences

8:06

Importing a Word Document

3m 52s

Intro

0:00

Create New and Save

0:42

Add Title

1:11

Import Word Document

1:32

Summary

2:38

Setting Headings

6m 17s

Intro

0:00

Create New and Save

0:17

Add Title

0:40

Add Text

0:47

Insert Heading Tags into Text

1:55

Importance of a Heading Tag

2:43

Paragraphs & Line Breaks

8m 25s

Intro

0:00

Paragraph Tags

1:11

Selecting Text

3:14

Insert Line Break Tag

4:05

Creating a Bulleted List

10m 31s

Intro

0:00

Formatting Content

0:42

Add Title

1:07

Insert Heading Tag

1:39

Creating a List

2:13

Creating an Unordered List

3:07

Example of Incorrect List Formatting

3:23

Creating Nested Lists

5:16

Indent List

5:59

Changing List Type

7:50

Change to Numbered List

8:37

Change Bullet Type

9:04

Creating a Numbered List

4m 21s

Intro

0:00

Formatting Content

0:20

Merging Multiple Lines into Paragraph

1:03

Inserting Header Tag

1:34

Create Numbered List

2:36

Create Ordered List

3:08

A Definition List

4m 27s

Intro

0:00

Creating a Definition List

0:30

Select Text

1:11

Create Definition List from Format Menu

1:29

Definition List Tags

3:21

Setting Bold & Italics

6m 12s

Intro

0:00

Add Bold and Italics to Definition List

0:12

The Destinations Page

0:23

Making Terms Bold

1:12

Bold Tag Information

1:42

Making Definition Italic

4:02

Summary

5:41

Inserting Special Characters

7m 23s

Intro

0:00

ASCII Characters

0:12

Create Copyright Message

2:10

Insert Copyright Symbol

3:23

Section 9: CSS Basics

What is CSS?

6m 3s

Intro

0:00

Cascading Style Sheets

0:05

Example CSS Layouts

0:59

Turning CSS Off Examples

3:27

The Syntax for a CSS Rule

9m 24s

Intro

0:00

Create New and Save

0:27

Add Title

1:05

Adding CSS Styles to a Page

1:18

Dragging Tags

2:24

Placing Content

2:48

Adding a Selector

3:28

Creating Style Rules

4:16

Properties and Values

7:19

CSS Syntax Examples

7:53

CSS Rule Locations

9m 3s

Intro

0:00

Three Locations for Placing Style Rules

0:31

Inline Rule

0:58

Internal or Embedded Rule

1:22

External Rule

1:41

Inline Style Rule

2:08

Internal or Embedded Style Rule

3:35

Examples of Internal/Embedded Style Rule

5:09

External Style Rule

5:59

Example of Linking a Style Sheet

7:13

Summary

8:40

Types of CSS Selectors

9m 51s

Intro

0:00

Three Main Selector Types

0:16

HTML Tag Selector Type

0:35

Class Selector Type

2:40

ID Selector Type

4:35

Selector Rules and Examples

7:17

HTML Tag Selector Example

7:46

Class Selector Example

8:09

ID Selector Example

8:28

Section 10: Formatting with Text Using CSS

Creating an Inline Style Rule

9m 54s

Intro

0:00

Code View for Creating an Inline Header Style

2:02

Creating a Font Type Style

3:14

Creating a Color Style

4:26

Creating a Font Size Style

5:16

Split Horizontally

6:06

Creating Paragraph Styles

7:00

Summary

9:17

Creating an Internal or Embedded Rule

10m 32s

Intro

0:00

Create New and Save

0:35

Add Title

0:45

Adding Text Content

1:26

Add New CSS Style Rule

5:44

Assigning Style Properties

6:56

Duplicate Style Rule

8:12

Modify Style Rule

8:46

Summary

10:17

Working with an External CSS File

9m 27s

Intro

0:00

Move CSS Rules to External Style Sheet

0:32

CSS File in Styles Panel

2:00

Remove Style Tag

2:35

External Style Sheet

2:46

Related Files Toolbar

3:13

Adding Additional Styles

4:53

Summary

8:56

Attaching a Style Sheet

6m 34s

Intro

0:00

Apply External Style Sheet to Another Page

0:56

Attach External Style Sheet

1:09

Apply Same Style Rules to Multiple Tags

2:39

Troubleshooting Style Problems

4:30

Summary

5:44

Creating a Class Selector

12m 29s

Intro

0:00

Create New and Save

0:16

Add Title

0:48

Adding Text Content

0:59

Attaching a Style Sheet

2:05

Adding and Formatting Headers

3:18

Creating a Class

4:27

New CSS Rule

5:24

Setting Class Definition

5:55

Applying a Class to Text

7:30

Troubleshooting Class Errors

7:55

Editing Class Properties

8:53

Edit Rule Definition

8:59

Other Methods for Applying Classes

9:42

Preview in Safari

11:10

Summary

11:53

Dreamweaver Style Tools

11m 14s

Intro

0:00

Code Navigator

0:30

Enable/Disable Styles Option

3:50

Comments Out Style Rule

5:02

Enable/Disable All

6:05

Live View

6:37

Live Code

7:56

Inspect

8:24

Summary

10:10

Section 11: Working with Fonts on the Web

Creating a Custom Font Stack

8m 58s

Intro

0:00

Create New Page

0:13

Properties Area

0:28

Edit Font List

1:36

Adding Style Rules to Content

5:17

Preview in Browser

6:55

Summary

8:35

Working with Web Fonts

5m 36s

Intro

0:00

Fonts Overview

0:07

Adobe Type Service

1:52

Google Fonts

2:40

Font Squirrel

3:26

Font Licensing

3:34

Summary

4:49

Using Google Fonts

13m 32s

Intro

0:00

Google Fonts

0:05

Access and Preview Fonts

0:29

Font Collection Area

2:50

Review Font

4:05

'Use Font' Feature

4:23

Adding Google Fonts

6:21

Adding New Style with Google Font

9:31

Preview in Browser

11:29

Summary

13:10

Adding Fonts from Fontsquirrel

18m 2s

Intro

0:00

Font Squirrel Fonts

0:08

Font Squirrel Website

1:23

Download Font Zip File

2:28

Extract Font File

3:04

Web Font Generator

4:23

Download Web Font Kit

6:38

Extract Web Font Kit

7:44

Working with Font Squirrel Fonts

8:20

HTML Font File Preview

9:29

CSS Font File

9:54

Copying over Font Styles

10:26

Adding Styles

11:56

Preview in Browser

12:40

Troubleshooting Errors

13:25

Adding more Styles

15:13

Preview in Browser

16:13

Summary

16:58

Section 12: Inserting Images

Web Image File Formats

16m 44s

Intro

0:00

Two Different Image Formats

0:43

Vector Graphics

0:52

Raster Images

2:05

Raster Image Formats

2:49

Three Types of Raster Image Formats

2:52

Optimization Process

3:48

GIF Image Format

6:27

JPG Image Format

8:49

PNG Image Format

9:39

Vector Graphics

11:40

Scalable Vector Graphics

12:35

Web Page Image Creation Tips

14:18

Summary

16:20

The Assets Panel

7m 32s

Intro

0:00

Assets Panel

0:35

Colors Used

1:54

URLs Outside the Website

2:21

Flash Files

2:38

Shockwave Files

2:56

Movie Files

3:13

Scripts, Templates, Library

3:29

Images Category

3:41

Inserting an Image & Alternate Text

9m 7s

Intro

0:00

Inserting an Image

0:40

Insert Image using Image Name

1:17

Inserting Alternate Text

1:27

Insert Image using Image Icon

3:09

Insert Image using Insert Button

5:23

Preview in Browser

7:11

Summary

8:31

The Difference between Alternate Text & Title

6m 22s

Intro

0:00

Image Alternate Text Explanation

0:10

Image Title Explanation

0:51

Add an Image Title

1:39

Preview in Browser

2:46

Editing Image Titles

3:06

Setting the Default Editors for Dreamweaver

6m 9s

Intro

0:00

Setting Default Image Editors

1:07

Set Preferences

1:16

Adding Image Editors

2:08

Set Primary Editor

3:39

Removing Editors

4:38

Editor Icon Shortcut

5:09

Summary

5:39

Incorporating Photoshop Smart Objects

6m 44s

Intro

0:00

Photoshop Smart Object Explanation

0:09

Inserting Image from Files Panel

0:27

Image Optimization

1:43

Editing with Photoshop

3:36

Update from Original

5:20

Summary

5:53

Section 13: Adding Video to Web Pages

Inserting Flash Files

8m 57s

Intro

0:00

Create New HTML Page

0:10

Inserting SWF File

0:37

Preview SWF File

3:00

Add SWF File

3:32

Autoplay and Loop Options

5:05

SWF File Flash Player Error Message

6:12

Copy Dependent Files

6:52

Summary

8:22

Inserting Flash Video

10m 19s

Intro

0:00

Add Flash Video using Insert Menu

1:51

Insert FLV

2:33

Browse File Location

3:10

Setting Controls Skin

3:32

Set Auto Rewind

6:28

Preview in Browser

7:29

Add a Title

8:22

FLV File Flash Player Error Message

8:44

Summary

9:04

Inserting HTML5 Video

14m 43s

Intro

0:00

Setting up an HTML5 Video

0:44

History of Videos on the Web

1:43

Video Coding

3:26

Video Tag

5:14

Controls

5:48

Poster for Video

6:00

Width and Height

6:24

Preview In Browser

6:40

Troubleshooting Video and Browser Issues

8:59

Insert FLV

11:36

Preview In Browser

12:02

Video Formats

13:15

Section 14: Creating Hyperlinks

Linking to Website Files

13m 46s

Intro

0:00

Creating Hyperlinks between Web Pages

0:30

Create New File

3:14

Assigning a Hyperlink using Point to File

5:01

Assigning a Hyperlink using Browse for File

7:21

Preview in Browser

7:48

Creating Hyperlinks to other Files

10:02

Features of Point to File

10:39

Preview in Browser

11:59

Linking Image to Web Page

12:47

Linking to Files Outside Your Website

7m 37s

Intro

0:00

Linking to a Website

0:45

Link Area

1:14

Open Link in New Tab

4:15

Another Link Example

5:39

Summary

6:25

Email Links

10m 20s

Intro

0:00

Creating an Email Link

0:21

Insert Email Link

1:02

Adding Subject Line Information

6:12

Adding CC Recipients

8:40

Summary

9:54

Named Anchors

10m 6s

Intro

0:00

Adding Links to Page Content

0:26

Insert Image

1:00

Creating Navigation Bar with Links

2:41

Insert Named Anchor

3:46

Linking to Anchor

5:10

Preview in Browser

6:31

Add Link to Top of Page

7:11

Image Maps/Hotspots

11m 45s

Intro

0:00

Creating an Image Map

0:47

Select Image

1:35

Image Map/Hotspot Tools

1:43

Link Hotspot

3:06

More Hotspot Tools

3:55

Preview in Browser

8:37

Troubleshooting Image Hotspots

9:34

Summary

10:53

Creating the Navigation Bar

5m 47s

Intro

0:00

Create New Contact Us Page

0:11

Add Title

0:37

Add Header

0:48

Add Text Content

1:19

Bulleted List

2:56

Create Hyperlinks to Pages

3:17

Assigning Links

4:22

Summary

5:38

Adding Styles for Hyperlinks

13m 20s

Intro

0:00

Basic Hyperlink Styles

0:36

Create New CSS Style

1:18

Selector Type

1:32

Selector Name

2:09

Set Font Family

3:14

Set Font Size

3:47

Text-transform

4:20

Set Color

4:31

Text Decoration

4:39

Set Line Height

4:55

Set Font Weight

5:29

Preview in Browser

5:47

Add Visited Link Style

6:38

Add Hover Link Style

8:40

Change Background Color

10:00

Add Active Link Style

11:26

Summary

12:37

Section 15: Positioning Content Using CSS

How to Use CSS for Page Layout

7m 51s

Intro

0:00

Page Layout Example

0:10

HTML Tasks

1:16

CSS Tasks

2:34

Code Examples

3:50

HTML Code Example

4:01

CSS Code Example

5:47

Understanding the Box Model

8m 33s

Intro

0:00

The Box Model Explanation

0:19

Add Padding

2:01

Add Border

3:43

Add Margin

4:01

Disabling Styles

6:15

Summary

8:17

Creating Boxes on the Page

11m 56s

Intro

0:00

Create New Page

0:07

Insert Div Tag Box

0:41

New ID CSS Rule

1:36

Assign Properties

2:50

Modify Box Properties

4:26

Insert Div Tag Box on Left

4:53

Set Insert Location

5:48

Assign Properties

6:25

Insert Div Tag Box on Right

7:13

New ID CSS Rule

8:16

Assign Properties

8:33

Code View of Boxes

9:14

Preview In Browser

10:00

Summary

10:43

Controlling Content Boxes Using CSS

14m 53s

Intro

0:00

Create New Page

0:18

Creating Divs with Matching IDs

0:32

Insert Div Tag

0:41

New ID CSS Rule

1:14

Assign Properties

1:47

Insert Header Div Tag

3:42

Assign Properties

4:56

Add Text

6:11

Building Navigation Bar

6:50

Insert Div Tag

6:57

Set Insert Location

7:00

Assign Properties

7:33

Add Text

8:31

Create Content Area

9:07

Insert Div Tag

9:15

Assign Properties

9:46

Modify Header Style

11:01

Add Float Property

11:39

Add Padding Property

12:20

Add Margin-Left Property

13:11

Summary

13:47

Section 16: Types of Positioning

Absolute Positioning

14m 51s

Intro

0:00

Absolute Positioning Introduction

1:15

Modifying Div Color

1:33

Code View of Elements

3:11

Delete Styles

3:52

Using Absolute Positioning

4:34

Add Position Property

5:42

Add Left Property

8:08

Adjusting Position and Width

10:04

Insert Right Div Tag

10:39

Assign Properties

11:07

Adjusting Position and Height

12:10

Summary

14:19

Exploring Floats

10m 50s

Intro

0:00

Float Property

0:05

Preview in Browser

1:14

Display Boxes

1:31

Float Left Property

4:32

Float Right Property

8:00

Summary

10:18

What is a Clear?

10m 34s

Intro

0:00

Div Float and Dimension Properties

0:44

Adding a Clear Property

6:50

Preview in Browser

8:32

Height Discussion

8:49

Summary

9:58

Fixed Positioning

10m 48s

Intro

0:00

Fixed Positioning Examples

0:11

Fixed Positioning with an Image

2:18

Current CSS Styles

2:38

CSS Text File

4:17

Preview in Browser

5:30

CSS Properties for Fixed Positioning

6:17

Preview in Browser

7:48

Z-Index

9:19

Summary

10:17

Section 17: Working With Tables

Creating a Table

9m 48s

Intro

0:00

Page Table Example

0:19

Correcting Tags

1:17

Creating a Table

3:11

Insert Table

3:46

Header Option

5:01

Non-Breaking Space

5:50

Add Content to Table

6:31

Summary

9:08

Customizing & Modifying Table Properties

13m 9s

Intro

0:00

Save Page

0:33

Modifying the Table

3:05

Table Widths

3:59

Select Table

5:17

Borders

6:01

Cell Padding

6:49

Select Column of Content

7:40

Remove Column

8:42

Add and Remove Rows

9:19

Merge Columns

11:10

Summary

12:45

Using CSS for Formatting Tables

11m 13s

Intro

0:00

Table Styling

0:33

Table Header Tag

1:16

Removing a Class

4:16

Content Styles

5:15

Preview in Browser

7:59

Fixing Table Size

8:39

Summary

10:53

Importing Spreadsheet Data onto a Page

12m 4s

Intro

0:00

Create and Save New Page

0:49

Locating Saved Files

1:14

Importing Spreadsheet Data

3:45

Import Excel Document

4:25

Delete/Merge Cells

5:57

Customizing Table Content

6:23

Importing Delimited Data

7:59

Import Tabular Data

8:34

Choosing a Delimiter

9:07

Table Formatting Options

9:31

Table Content Styles

10:24

Summary

11:16

Merging & Splitting Table Cells

10m 5s

Intro

0:00

Create and Save New Page

0:10

Insert Table

0:54

Table Options

1:05

Moving Cursor in Front of Table

4:04

Adding an Image

5:35

Moving a Table

6:29

Merging and Splitting Table Cells

7:41

Merging Cells

7:53

Splitting a Cell

8:42

Summary

9:12

Modifying Rows & Columns

5m 12s

Intro

0:00

Save Page

0:19

Hiding Table Widths

0:23

Modifying Rows and Columns

1:15

Insert Column

1:33

Moving through Cells

2:28

Tabbing into New Row

3:08

Deleting Rows

3:36

Summary

4:31

Aligning Table Content

4m 46s

Intro

0:00

Modifying Table Content

0:38

Table Tag Properties

0:46

Cell Alignment

2:11

Center Content in a Row

2:44

Align Content in a Column

3:21

Summary

4:01

Section 18: Creating Forms

Creating an HTML Form

9m 22s

Intro

0:00

Creating a Contact Us Form

0:52

Adding Content

1:20

Insert Form

2:24

Insert Text Field with Form Tag

3:54

Form Tag Properties

4:47

Summary

8:29

Text Field Elements

8m 37s

Intro

0:00

Adding a Field Set

0:26

Insert Field Set

0:51

Adding Name Text Field

1:35

Text Field Attributes

2:05

Text Field Tag Properties

3:46

Adding Email Text Field

4:58

Text Field Tag Properties

5:24

Preview in Browser

5:58

Summary

8:02

Radio Buttons & Select Lists

12m 23s

Intro

0:00

Adding more to the Field Set

0:26

Create another Field Set

1:29

Adding a Radio Button

2:25

Insert Radio Button Group

3:42

Radio Button Group Options

4:09

Set Initial State of Radio Button Group

6:52

Adding a Drop Down Menu

8:07

Insert Select (List/Menu)

8:29

Set Drop Down Menu Attributes

8:59

Edit List Values

9:38

Preview in Browser

10:46

Add Choose Prompt

11:11

Summary

12:07

Checkboxes & Submit Button

8m 9s

Intro

0:00

Adding a Field Set

0:36

Adding a Checkbox Group

1:33

Checkbox Group Attributes

2:14

Arrange Checkboxes

4:38

Adding a Submit Button

4:56

Submit Button Attributes

5:25

Submit Button Tag Properties

6:00

Preview in Browser

6:25

Summary

7:28

Validating Form Data

20m 58s

Intro

0:00

Form Field Validation Example

0:32

Client Side and Web Server Validation

2:54

Adding a Comment Section

6:14

Comment Text Field Attributes

7:04

Comment Text Field Tag Properties

7:34

Add Form Field Validation

8:47

Tag Inspector Area

8:54

Add Validate Form Behavior

10:00

Validate Form Behavior Attributes

10:17

Preview in Browser

11:56

HTML5 Form Field Features

14:56

Required and Autofocus Attributes

16:40

Preview HTML5 Form Validation in Browser

18:08

Summary

20:41

Server-Side Validation Languages

4m 10s

Intro

0:00

Five Server Side Languages

0:40

ASP

0:56

ASP.NET

1:47

ColdFusion

2:08

JSP and PHP

2:42

Summary

3:44

Section 19: Library Items & Templates

Template & Library Overview

6m 22s

Intro

0:00

Dreamweaver Templates and Library Items

0:12

Dreamweaver Template Explanation

0:44

Library Item Explanation

2:33

Overview of Templates and Library Items

4:50

Summary

6:07

Creating a Library Item

8m 30s

Intro

0:00

Creating a Library Item

0:13

Delete a Library Item

0:34

New Library Item

2:10

Library Folder

3:31

How to Use a Library Item

4:17

Library Item Tag

5:12

Adding a Library Item

5:46

Summary

7:42

Modify a Library Item

5m 33s

Intro

0:00

Changing a Library Item

1:07

Edit Library Item

1:42

Save and Update Library Items

2:35

Summary

4:17

Converting a Page into a Template

11m 23s

Intro

0:00

How to Work with a Template

0:27

Create Blank Template File

0:34

Example Template File

2:00

Preview in Browser

2:22

Create Template from File

3:56

Save as Template

4:11

Template Description

4:18

Save and Update Links

5:15

Create New Pages from Template

6:26

Editable and Non-Editable Regions

8:07

Summary

10:33

Creating Editable Regions

9m 21s

Intro

0:00

Create Editable Region for Content

1:53

Insert Editable Region

2:22

Set Name for Editable Region

2:59

Save and Update Template

3:59

Create Editable Region for Nav Bar

4:48

Select and Insert Editable Region

5:30

Save and Update Template

5:53

Update Current Page

7:16

Summary

7:49

Applying a Template

8m 48s

Intro

0:00

Applying a Template

0:40

Apply Template to About Us Page

1:03

Move Content to New Region

1:43

Delete Library Item

4:51

Apply Template to Contact Us Page

5:27

Summary

7:34

Centering a Page in the Browser

14m 9s

Intro

0:00

Centering a Page with Templates

0:11

Edit Template

0:36

Preview in Browser

1:13

Edit External Styles

1:54

Add Wrapper ID

3:30

Insert Div Tag

4:21

New CSS ID Rule

4:52

Save and Update Files

7:54

Preview in Browser

8:57

Delete Wrapper ID

11:15

Save and Preview in Browser

11:59

Summary

13:04

Section 20: CSS3 Properties Enhance Your Pages

Using CSS3

7m 7s

Intro

0:00

Preview CSS3 Element in Browser

0:48

Proprietary CSS3 Properties

2:51

Summary

6:00

Creating Drop Shadows

8m 12s

Intro

0:00

Add Box Shadow Property

0:30

Preview in Browser

2:49

Proprietary Options

6:29

Summary

7:55

Working With Gradients

10m 17s

Intro

0:00

Gradient Property

0:18

Gradient Code

1:45

Apply Comment

5:08

Remove Comment

5:56

Save and Preview in Browser

6:16

Enable Drop Shadow

7:56

Summary

8:28

Rounded Corners

7m 34s

Intro

0:00

Curve Corners with CSS

0:14

Add Border Radius Property

1:32

Preview in Browser

2:39

Enable Gradient and Drop Shadow

4:11

Edit Drop Shadow Color

5:44

Preview in Browser

5:48

Summary

6:56

Section 21: Going Beyond HTML & CSS

Adding a Swap Image Behavior

12m 8s

Intro

0:00

Behaviors in Dreamweaver

0:40

Insert an Image

2:03

Swapping an Image

3:40

Tag Inspector Panel

3:56

Behaviors Panel

4:30

Adding a Swap Image Behavior

4:49

Preview in Browser

8:58

Swap Behavior Code

9:31

Summary

10:38

Fade and Appear Effects

9m 44s

Intro

0:00

Fading and Appearing in CSS3

0:15

Add Page Title and Header

0:45

Insert Image

1:34

Set Image Tag Properties

2:26

Insert Another Image

2:36

Add Appear/Fade Behavior Effect

3:30

Preview in Browser

5:25

Add Appear/Fade Behavior Effect

7:16

Preview in Browser

8:02

Summary

9:07

Opening a New Window Behavior

9m 37s

Intro

0:00

Creating a New Browser Window Behavior

0:24

Insert Thumbnail Image

1:53

Image Tag Properties

2:35

Add Open Browser Window Behavior

3:02

Save and Preview in Browser

5:40

Modify Open Browser Window Behavior

6:46

Save and Preview in Browser

7:11

Summary

9:09

Dreamweaver Extensions

7m 13s

Intro

0:00

Manage Extensions

0:50

Dreamweaver Extensions

1:41

Exchange Panel

2:18

Summary

6:43

Installing an Extension

15m 35s

Intro

0:00

Installing an Extension: Method 1

0:12

Get More Commands

0:31

Manage Extensions

0:37

Dreamweaver Exchange Classic

1:08

Adobe Extension Manager CS6

5:32

Working with the Extension

7:25

Finding the Extension within Dreamweaver

7:26

Using the Lorem Ipsum Extension

9:02

Installing an Extension: Method 2

10:46

Downloading the Adobe Exchange Panel

10:47

Adobe Exchange Panel

13:21

Opening Adobe Exchange

13:22

Searing for Extensions in Adobe Exchange

14:10

Installing the Widget Browser

8m 46s

Intro

0:00

Widget Browser

0:05

Download Widget Browser

1:26

Widget Browser Overview

3:47

Preview Widget

4:55

Summary

7:47

Adding a Widget to My Widget

6m 41s

Intro

0:00

Download Widget through Widget Browser

0:05

Installing the FlexSlider Widget

1:19

My Widgets Area

3:45

Save Widget Files

4:17

Preview Widget in Browser

5:19

Summary

6:17

Obtaining the FlexSlider Widget Files

7m 23s

Intro

0:00

Working with a Widget

0:25

Configure a Widget

1:42

Save Widget Modifications as Presets

2:46

Import/Export Widget Presets

3:30

Widget Files in Files Panel

4:51

Summary

6:10

Customizing the FlexSlider Widget

14m 5s

Intro

0:00

Preview in Browser

0:53

FlexSlider Widget Files

1:24

Code View

2:47

Insert Own Images into Widget

4:15

Preview in Browser

6:38

Comment Out Code

7:47

Understanding Widget Code

9:10

Comment Out Hyperlink

9:47

Add Text Content to Widget

10:34

Preview in Browser

11:06

Summary

12:29

Section 22: Responsive Design

What is Responsive Design?

7m 6s

Intro

0:00

Responsive Web Design

0:13

Website Examples

2:10

Wanderlust Travel Website

4:21

Summary

6:30

CSS Media Types

10m 9s

Intro

0:00

Preview in Browser

0:15

Print Preview

2:11

CSS Screen Style Sheet

2:58

Attach CSS Print Style Sheet

4:34

Preview in Browser

7:35

Print Preview

7:47

Delete CSS Print Style Sheet

9:07

Summary

9:58

Planning for Multiple Screen Sizes

7m 16s

Intro

0:00

Multiple Screen Size Feature in Properties Panel

0:50

Manual Screen Size Adjustment

2:28

CSS Phone and Tablet Style Sheets

3:06

Preview in Browser

4:37

Summary

7:05

Creating Media Queries

10m 2s

Intro

0:00

Creating Media Queries

0:58

Media Queries Dialog Box

2:02

Default Presets

3:38

Select CSS File

4:38

Preview in Browser

7:14

Summary

9:47

Modifying Styles within Media Queries

17m 53s

Intro

0:00

Troubleshooting CSS Issues

1:17

Enable CSS Properties

4:29

Preview in Browser

5:41

Tablet Version Style Errors

6:36

Modify Tablet Styles

7:38

Preview in Browser

8:43

Firebug

10:33

Modify Media Query Styles

12:42

Preview in Browser

14:00

Copy and Paste Styles

14:45

Preview in Browser

15:40

Summary

17:32

Section 23: Site Maintenance & Publishing

Find & Replace

7m 11s

Intro

0:00

Modifying Text Content

0:15

Find and Replace Feature

0:52

Summary

6:44

Site Reports

6m 2s

Intro

0:00

Results Section

0:32

Settings Option for Target Browsers

1:36

Site Reports

2:18

Select Reports

2:27

Run Reports

3:20

Fix Warnings

3:45

Summary

5:19

Entering Web Server Information

3m 31s

Intro

0:00

Manage Sites

0:20

Edit Site Information

0:31

Adding a Web Server

0:49

Summary

3:20

Uploading Files to the Web Server

3m 43s

Intro

0:00

Put Files to Remote Server Function

0:08

Dependent Files

1:10

Preview in Browser

1:31

Use Files Panel to Upload Files

2:21

Summary

3:13

Downloading from the Web Server

3m 15s

Intro

0:00

How to Download Files from a Web Server

0:06

Get Files from Remote Server Function

0:46

Show Local and Remote Sites

2:02

Summary

2:33

Section 24: Creating a Mobile Website Using jQuery mobile

What is jQuery Mobile?

6m 45s

Intro

0:00

jQuery Examples

0:51

Photo Gallery

4:49

Slideshow

5:04

Summary

5:29

Building a jQuery Mobile Page

8m 48s

Intro

0:00

jQuery Website Page

0:10

New jQuery Page Options

1:06

jQuery Mobile CDN

1:35

jQuery Mobile Local

3:05

jQuery Mobile with Theme Local

3:20

Save jQuery Mobile Page in own Folder

4:15

Copy Dependent Files

5:15

Summary

7:34

jQuery Mobile Pages

8m 6s

Intro

0:00

jQuery Files

0:09

Preview Page in Browser

1:26

Page Structure

2:42

Add Content to Footer Area

3:37

Preview in Browser

4:59

Edit Content in Footer Area

5:33

Summary

7:17

Working with jQuery Mobile Themes

6m 20s

Intro

0:00

Overview of Themes

0:06

Live View of jQuery Page

2:47

Example Page

3:43

Preview In Browser

3:57

Summary

4:51

Section 25: Summary

What We Accomplished in the Course

4m 27s

Intro

0:00

CSS 3 Properties

0:42

Images and Slideshows

1:35

Using Web Fonts

2:14

HTML 5 Video

2:42

Web Forms

3:08

FlexSlider Widget

3:31

Dreamweaver Interface

3:56

This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 Importing Spreadsheet Data onto a Page

Name: Adobe Dreamweaver CS6: Importing Spreadsheet Data onto a Page
Brand: Educator.com
Price: 35 USD
Availability: InStock

Section 17: Working With Tables: Lecture 4 | 12:04 min

Lecture Description

Next Lecture

Previous Lecture

Discussion
Study Guides
Download Lecture Slides
Table of Contents
Transcription
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.

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!

Importing Spreadsheet Data onto a Page

You can import spreadsheet data onto a web page and use a cool feature in DW for to let Dreamweaver build our table for us
Open specials.html
I have 2 different files we will use to show importing spreadsheet data
If you are on a PC with Excel installed you can import an Excel spreadsheet directly using File-Import->Excel
If you are not on a PC with Excel, you can accomplish this same task by using a delimited text version of the spreadsheet
We will walk through File-Import->Excel first which is a very quick process

Choose that command and select specials-import.xlsx from the text folder
Dreamweaver will create the table for you
Ctrl/cmd-z back & remove that table

If you are not on a PC with Excel, it is very easy to create the same content
I have a tab-delimited text version of the Excel spreadsheet
Any delimited text file can be used for this feature

Choose File->Import->tab delimited text & click the browse button
Select specials-import.txt which is a tab delimited text file
Choose whatever options you want for the table
Click OK and you will see your table on the page

Those are 2 different ways to import spreadsheet data onto a web page and let Dreamweaver create the table code for you

Importing Spreadsheet Data onto a Page

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

Create and Save New Page

Locating Saved Files

Importing Spreadsheet Data

Importing Delimited Data

Summary

Intro 0:00
Create and Save New Page 0:49
Locating Saved Files 1:14
Importing Spreadsheet Data 3:45

Import Excel Document
Delete/Merge Cells
Customizing Table Content

Importing Delimited Data 7:59

Import Tabular Data
Choosing a Delimiter
Table Formatting Options
Table Content Styles

Summary 11:16

Software Training: Adobe Dreamweaver CS6

Section 1: Course Introduction
	What is Dreamweaver?	3:15
	How to Use the Project Files for this Course	3:42
Section 2: Introduction to the Web
	URL Basics	5:53
	Client Server Environment	6:39
	Static vs. Dynamic Pages	4:56
	Separation of Content & Presentation	6:35
	Planning the Website Development Process	5:08
	Project Planning Documents	5:08
	HTML Naming Conventions	6:46
	Creating the Page Designs	5:44
	Copyright on the Web	3:30
	Website Accessibility & the 508 Standard	6:04
Section 3: Working in the Browser
	HTML Versions & DOCTYPE	8:25
	Browser Differences	8:28
	Browser Developer Tools	6:11
	Additional Browser Tools	7:36
	Using Firebug for CSS/JS	5:50
Section 4: The Dreamweaver Interface
	The Workspace Switcher	5:31
	Dreamweaver Interface Overview	6:29
	Navigating the Interface	8:14
	Dreamweaver Preferences	4:10
	Insert Bar & Insert Menu	4:26
	Working in Code View	7:00
	Installing Additional Browsers in Dreamweaver	5:50
Section 5: Getting Started
	Defining a Site in Dreamweaver	11:18
	The Importance of the Files Panel	7:02
Section 6: Creating a Page Using a Pre-Defined Layout
	Pre-Defined CSS Layout Options	8:21
	Creating a Pre-Defined CSS Layout Page	7:18
	Building the Header Area	15:39
	Modifying the Navigation Column, Part 1	9:01
	Modifying the Navigation Column, Part 2	10:36
	Adding Content to the Page	9:42
	Modifying the Footer Area	7:38
	Changing the Page Background Color	4:41
Section 7: Building a Web Page from Scratch
	HTML Page Code	5:58
	Creating a New Page	4:34
	The Importance of a Title	4:43
Section 8: Adding Text Content
	Discovering Paste Special	11:01
	Importing a Word Document	3:52
	Setting Headings	6:17
	Paragraphs & Line Breaks	8:25
	Creating a Bulleted List	10:31
	Creating a Numbered List	4:21
	A Definition List	4:27
	Setting Bold & Italics	6:12
	Inserting Special Characters	7:23
Section 9: CSS Basics
	What is CSS?	6:03
	The Syntax for a CSS Rule	9:24
	CSS Rule Locations	9:03
	Types of CSS Selectors	9:51
Section 10: Formatting with Text Using CSS
	Creating an Inline Style Rule	9:54
	Creating an Internal or Embedded Rule	10:32
	Working with an External CSS File	9:27
	Attaching a Style Sheet	6:34
	Creating a Class Selector	12:29
	Dreamweaver Style Tools	11:14
Section 11: Working with Fonts on the Web
	Creating a Custom Font Stack	8:58
	Working with Web Fonts	5:36
	Using Google Fonts	13:32
	Adding Fonts from Fontsquirrel	18:02
Section 12: Inserting Images
	Web Image File Formats	16:44
	The Assets Panel	7:32
	Inserting an Image & Alternate Text	9:07
	The Difference between Alternate Text & Title	6:22
	Setting the Default Editors for Dreamweaver	6:09
	Incorporating Photoshop Smart Objects	6:44
Section 13: Adding Video to Web Pages
	Inserting Flash Files	8:57
	Inserting Flash Video	10:19
	Inserting HTML5 Video	14:43
Section 14: Creating Hyperlinks
	Linking to Website Files	13:46
	Linking to Files Outside Your Website	7:37
	Email Links	10:20
	Named Anchors	10:06
	Image Maps/Hotspots	11:45
	Creating the Navigation Bar	5:47
	Adding Styles for Hyperlinks	13:20
Section 15: Positioning Content Using CSS
	How to Use CSS for Page Layout	7:51
	Understanding the Box Model	8:33
	Creating Boxes on the Page	11:56
	Controlling Content Boxes Using CSS	14:53
Section 16: Types of Positioning
	Absolute Positioning	14:51
	Exploring Floats	10:50
	What is a Clear?	10:34
	Fixed Positioning	10:48
Section 17: Working With Tables
	Creating a Table	9:48
	Customizing & Modifying Table Properties	13:09
	Using CSS for Formatting Tables	11:13
	Importing Spreadsheet Data onto a Page	12:04
	Merging & Splitting Table Cells	10:05
	Modifying Rows & Columns	5:12
	Aligning Table Content	4:46
Section 18: Creating Forms
	Creating an HTML Form	9:22
	Text Field Elements	8:37
	Radio Buttons & Select Lists	12:23
	Checkboxes & Submit Button	8:09
	Validating Form Data	20:58
	Server-Side Validation Languages	4:10
Section 19: Library Items & Templates
	Template & Library Overview	6:22
	Creating a Library Item	8:30
	Modify a Library Item	5:33
	Converting a Page into a Template	11:23
	Creating Editable Regions	9:21
	Applying a Template	8:48
	Centering a Page in the Browser	14:09
Section 20: CSS3 Properties Enhance Your Pages
	Using CSS3	7:07
	Creating Drop Shadows	8:12
	Working With Gradients	10:17
	Rounded Corners	7:34
Section 21: Going Beyond HTML & CSS
	Adding a Swap Image Behavior	12:08
	Fade and Appear Effects	9:44
	Opening a New Window Behavior	9:37
	Dreamweaver Extensions	7:13
	Installing an Extension	15:35
	Installing the Widget Browser	8:46
	Adding a Widget to My Widget	6:41
	Obtaining the FlexSlider Widget Files	7:23
	Customizing the FlexSlider Widget	14:05
Section 22: Responsive Design
	What is Responsive Design?	7:06
	CSS Media Types	10:09
	Planning for Multiple Screen Sizes	7:16
	Creating Media Queries	10:02
	Modifying Styles within Media Queries	17:53
Section 23: Site Maintenance & Publishing
	Find & Replace	7:11
	Site Reports	6:02
	Entering Web Server Information	3:31
	Uploading Files to the Web Server	3:43
	Downloading from the Web Server	3:15
Section 24: Creating a Mobile Website Using jQuery mobile
	What is jQuery Mobile?	6:45
	Building a jQuery Mobile Page	8:48
	jQuery Mobile Pages	8:06
	Working with jQuery Mobile Themes	6:20
Section 25: Summary
	What We Accomplished in the Course	4:27

Transcription: Importing Spreadsheet Data onto a Page

We are now going to take a look at how to get spreadsheet data into a web page using Dreamweaver.0000

Dreamweaver has a couple of different methods for pulling content in from a spreadsheet; so we will look at both of them.0008

Right now, here is my Files panel, and I have the specials-table open; and this is my table of information.0017

What if this table of content was on a spreadsheet, instead of residing on my page to start, and I just moved it into a table?0027

Quite often, there is data that can be put into spreadsheet format, or some kind of delimited text format; and that is what we are going to hook into now, using Dreamweaver.0038

I'm going to create a new page using Ctrl or Command, N; I'm going to save this page, and this one is going to be specials-...let's do specials-spreadsheet, just so we can differentiate it from within our files.0050

I should have an HTML page, if all was well, inside my files.0074

It is always good to double-check that it made it inside the correct folder.0081

Now, there are a couple of different ways, once your page is open, to figure out where that page is being stored by Dreamweaver--because right now, I have a situation where I created a new page; it's open in Dreamweaver; but it's not showing up in my Files panel.0086

And if I click the Refresh button and try it again, it is still not showing up.0103

Once in a while, the Files panel takes a minute to refresh; but if you have clicked that and still can't find your file, how do you figure out where it was placed?0109

This is a very common error when you first start working on the Web.0118

What I can do is hover over the tab in Dreamweaver, and it will give me the path to where that file is located.0123

And if I hover over, you can see this is located inside the Text folder; so, if I go up to the Text folder, that must be where my HTML page ended up, and there it is.0132

How can we correct this issue?--what I want to do is get this file out of the Text folder and into my main root folder; and to do that, I can use the Files panel.0148

I'll select this page, click, and drag it up on top of the very top folder; when I let go, Dreamweaver is going to prompt me to update links.0161

Now, I don't have any links in this file, so I am going to say Don't Update--don't bother updating, because there is nothing in it anyway.0174

Now, I am going to close this version, because this version was located inside of my Text folder; and that is the important piece.0183

I see a lot of people move things here (so it ends up in the correct area, and now I have my specials-spreadsheet showing); but they forget to close this one; they do all their work on this one, and they are not actually working on the correct version.0193

Just be careful of that; if it's in the wrong spot and you move it in the Files panel, make sure you close up that page and re-open the one that is in the correct location.0213

Now, we are going to hook into pulling in spreadsheet data; and I want to explain what this is all about.0225

Right now, I have a text file, and my text file is an Excel spreadsheet, and it is located up inside this area called Specials Import.0232

And I actually have two versions of this same thing: one is an xls, which is an Excel spreadsheet (as in Microsoft Excel); the other one is a txt version.0245

I am going to use the Excel version first.0259

I'm going to put my cursor on the page exactly where I want to place this spreadsheet data, and I'm going to go up to File and go down to Import.0262

Now, provided you are on a PC and that PC has Excel attached to it, or installed on the system, I have this option available to me.0276

So, I can take a spreadsheet and directly import it into my web page from Excel.0289

I'll go ahead and do that; if you are on a Mac system, feel free to watch this--I do have another piece coming up right after this that I will show you how to deal with it if you don't have Word or you are on the Mac side.0295

Now, here is my Excel spreadsheet; this is a folder that I really don't need, so let me go ahead and delete that folder.0312

As you see little things like that in your files, try and keep them cleaned up as you go.0320

What happens is: you say, "Oh, I'll just take care of that later," and it doesn't happen.0326

So, I am going to choose this one and click Open, and Dreamweaver is going to do all of the work for me.0331

You can see, there is my table of Excel data.0338

Now, what happened here is: I got three extra cells of data, because this text was so wide, it captured the cells right above it from my Excel spreadsheet.0343

So, what I am going to do is: I can either select these and delete, or I can click in this first one, drag to the right, and click the Merge button down here.0357

I can go ahead and clean this up this way, or I could have deleted them; since there are just three, it's just as easy to use the Merge; and our table is all set.0370

Now, it's a matter of customizing this; I'll select the first two, and I'm going to go down and make those a header row.0383

The other thing I am going to do is: that header row has centered the content; and I may or may not want that.0391

I think it looks fine in the Travel Special side; but in the Discount side, it doesn't look quite so fine--that is a pretty solid alignment here, so I want my discount to be lined up on the left.0399

I'll simply put my cursor in there; I'll come down to the horizontal, click on that, and say left: I will left align that specific cell.0414

That is an Excel spreadsheet--one way to work with it.0427

And I could pull it in directly from Excel, provided I am on a PC and that PC has Office installed.0431

What if you don't have that available as an option?0439

What you can do instead is: you can ask for whoever has the spreadsheet--ask them for a text-delimited file; and basically, you save it as tab-delimited or comma-delimited.0443

Any type of spreadsheet program will allow you to do that--it doesn't have to be Excel per se.0458

Whatever your spreadsheet is, just go to Export that Data, or Save As tab-delimited or comma-delimited--any type of delimited text; and I'll show you what that looks like.0465

What I am going to do is simply Ctrl+Z back a couple of times and get rid of that spreadsheet table coming in from Excel.0479

What I am going to do instead is pull in some delimited data; and that is this Specials Import right here.0488

Now, if I open this up, you can see, it doesn't really look that different as a text file; but wrapped in as characters within this file are some extra characters, and that is what Dreamweaver is going to hook into.0496

I am going to go over to File, Import Tabular Data; you don't have to have any other program than Dreamweaver in order to use this one.0514

I'll choose tabular data; now, it says "tabular data," but you can actually use any delimiter you want.0526

The data file I want I will browse out to; and it's located in the text folder, and this is that specials-import.txt.0534

I'll add that in there; now, the delimiter here is a tab by default, and what I have is tab-delimited as a text file.0545

But in case you have some other delimiters, you can use a comma, semicolon, colon, or you can even choose Other and type in some kind of a character here.0556

I am going to go back to tab-delimited, because I know mine is; I'm going to set the table width to fit to the data--I always start there.0567

I am going to add a border to my table; and if I do that, I am going to add 0 as cell spacing, so that I don't end up with a double-border look to my table.0577

And since I am here, I will add some additional cell padding; normally tables need that; so I'll set the cell padding to 3.0591

Now, don't feel like you can't modify this once you get the data on your page; I'm just going to set it up this way and see how it looks.0600

I'll go ahead and click OK and take a look.0609

There is my table of tab-delimited data.0613

It goes very nicely into the table, and the table properties are for the most part set up for me.0617

Now, if I want this upper row to be a header, I just click and drag to the right; I'll choose the header row here.0624

You can see, it does make that discount centered, because that is what a table header code does.0632

But I can come down here in the Horizontal and say Horizontal Left, and that takes care of it.0639

These are our Travel Specials; I'll go ahead and copy this, and I should give this a proper title; and I will add an s, since there is more than one.0647

I will also add an s down in this area.0660

And there is our page; I'll go ahead and save it; and we have a nice, neat table--the table is the perfect size for our data, because I said "fit to data."0664

Whether you have an Excel spreadsheet (an actual Microsoft Office Excel spreadsheet), or you just have some delimited text of some kind, you have the capability to let Dreamweaver create all that table code for you.0676

It pulls in very nicely onto your web pages, and it makes adding that type of text very easy to get into a table.0694

That is working with an Excel spreadsheet type of data or delimited text file data and using the File, Import feature within Dreamweaver to take that data and create a table and all the table code for us from within Dreamweaver.0704

Related Books

Adobe Dreamweaver CS6

Author: Adobe

ISBN: B007R0RKDG

Publisher: Adobe

Year: 2012

Educator.com recommends Adobe Dreamweaver CS6 for use with the Educator Dreamweaver course. Adobe Dreamweaver CS6 software enables you to make cutting-edge web designs and mobile apps while generating HTML5 and CSS3 code. Use the fluid grid layout system and HTML editor to design projects for smartphones, tablets, and desktop screens. Support for CSS3, jQuery Mobile, and Adobe PhoneGap Build frameworks streamlines the mobile app development process. Check your designs with Live View and Multiscreen Preview. Add rich typography and CSS3 transitions to create compelling projects.

Adobe Dreamweaver CS6 Digital Classroom

Authors: Jeremy Osborn, AGI Creative Team

ISBN: 111812409X

Publisher: Wiley

Year: 2012

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.

Adobe Dreamweaver CS6 Importing Spreadsheet Data onto a Page

Share this knowledge with your friends!

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

Discussion

Study Guides

Download Lecture Slides

Table of Contents

Transcription