1

1. Start a New Site

The first step is to create a new site. For that, go to Site > New Site. It will get you to this screen:

The first step is to give your site a name. Then, you need to choose where to save it. This is up to
you, but it usually makes sense to keep all projects in one place for the simplicity.

You also have the possibility to associate your new project with a Git repository. This can be a
good idea since it gives you version control but you can skip it for now.

We will deal with everything under Servers on the left side later. Same with CSS Preprocessors,
which is only important when you use that kind of thing.

What is important to us is Local Info under Advanced Settings.

 2

Be sure to click on the folder icon on the right where it says Default Images folder. Then, go to
your newly created site directory, open it, create a new folder called images and select that as
your default folder. That way, Dreamweaver will save images associated with your site
automatically there.

That’s it for now, click Save to go back to your workspace.

 3

Lesson: A Quick Overview of Web

Development
Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on
Webucator's Introduction to Dreamweaver CS6 course.

Web development involves a combination of client-side programming and server-side

programming.

Lesson Goals

 Learn about client-side web development languages.

 Learn about server-side web development languages.

Client-side Programming
Client-side programming involves writing code that is interpreted by a browser such as Internet
Explorer or Mozilla Firefox or by any other web client such as a cell phone. The most common
languages and technologies used in client-side programming are HTML, JavaScript, Cascading
Style Sheets (CSS), and Adobe Flash.

HTML
HyperText Markup Language (HTML) is the language behind most web pages. The language is
made up of elements that describe the structure and format of the content on a web page.

Cascading Style Sheets

Cascading Style Sheets (CSS) is used in HTML pages to separate formatting and layout from
content. Rules defining color, size, positioning and other display aspects of elements are defined
in the HTML page or in linked CSS pages.

JavaScript
 4

JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate
forms, pop up new windows, and create dynamic effects such as dropdown menus and image
rollovers.

Dynamic HTML
Dynamic HTML is not a language in and of itself, but rather refers to code that uses JavaScript
to manipulate CSS properties on the fly.

Ajax
The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript And XML," but
is now used much more broadly to cover all methods of communicating with a server using
JavaScript.

The main purpose of Ajax is to provide a simple and standard means for a web page to
communicate with the server without a complete page refresh.

Adobe Flash
At the time of this writing, according to Adobe's website, more than 97% of computers
connected to the internet have Flash Player installed. The Flash Player is a plug-in to Internet
Explorer and other web browsers. It enables browsers to display dynamic graphical web pages
that can be visually more fluid than pages that are built with Dynamic HTML. Flash pages are
called movies and they are created using special software (also called Flash). ActionScript, a
language similar to JavaScript, is used to manipulate Flash objects to make movies more
interactive.

At the time of this writing, designers are either moving to JavaScript or converting existing Flash
videos to HTML5. However, converting is a challenge because not all features of Flash can be
converted. Tools to solve this issue are currently being introduced by Adobe (with Wallaby) and
Google (with Swiffy) and others.

Server-side Programming
 5

Server-side programming involves writing code that connects web pages with databases, XML
pages, email servers, file systems and other systems and software accessible from the web server.
The most common server-side languages and programming frameworks are Perl, ColdFusion,
Active Server Pages, Java (in many flavors), ASP.NET and PHP.

Perl
Perl was the first server-side language to become popular in web development. Originally
derived from C, its relative simplicity and strengths in file and text manipulation and the fact that
it is open source made it a good choice for writing CGI scripts. Although Perl is still widely
used, it is not as popular a choice for new web projects as some of the other server-side
languages discussed below.

ColdFusion
ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side
languages. It is tag-based, which makes it look a lot like HTML and easier for client-side
programmers to understand than some of the other choices. Because of the relative ease with
which it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion
code is compiled to Java bytecode, which means the pages run quickly. Web developers can
accomplish virtually any required task using the ColdFusion Markup Language (CFML).
However, as ColdFusion can easily be integrated with Java applications, developers have the
choice of using Java to extend ColdFusion applications.

Active Server Pages

Microsoft Active Server Pages (ASP) is a framework that allows developers to write server-side
pages in many scripting languages; however, VBScript and JScript are the only commonly used
choices. ASP became popular quickly and sites with pages ending in .asp are now all over the
web. It is not as simple as ColdFusion, but it has the huge advantage of being built in to
Microsoft Internet Information Server (IIS). Although still commonly used, ASP has been
replaced by Microsoft with ASP.NET, an architecture that is much more similar to Java's than to
traditional ASP's.
 6

Java EE
Java EE is used in large web projects. With its power and robustness comes a steep learning
curve. Java EE is defined by its specification and API. A Java Application Server (Java AS)
manages servlets, JavaServer Pages (JSP), Web Services, and Enterprise JavaBeans (EJB). Java
EE also includes a number of other APIs commonly linked to enterprise application
development. JDBC, JPA, e-mail, JMS, and XML are some examples. But that's only part of the
picture. There are a number of frameworks built on some of these technologies that streamlines
the development process further. Hibernate offers most of the object/relational mapping (ORM)
without an EJB Container. For this reason it's called a lightweight ORM technology. JavaServer
Faces, Struts, and Spring-MVC build on JSP to do away with scriptlets completely, relying on
HTML style tags and associated JavaBeans.

ASP.NET
Microsoft's ASP.NET is not a language, but a framework for writing websites and software. Like
ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run
faster than traditional ASP pages do. ASP.NET pages can be written in many languages, but the
most popular are C# (pronounced C-sharp) and Visual Basic .NET (VB.NET).

PHP
Like Perl, PHP is open source. It has rapidly become a popular alternative to the proprietary
languages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn and
runs on almost all commonly used web servers. A nice feature is that it can be integrated with
both Java and COM.

Ruby on Rails
Wikipedia describes Ruby on Rails as "a web application framework that aims to increase the
speed and ease with which database-driven websites can be created and offers skeleton code
frameworks (scaffolding) from the outset. Often shortened to Rails, or RoR, Ruby On Rails is an
open source project written in the Ruby programming language and applications using the Rails
framework are developed using the Model-View-Controller design pattern."
 7

Lesson: Getting Started with

Dreamweaver
Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's
Introduction to Dreamweaver CS6 course.

Dreamweaver is an integrated development environment (IDE) for creating web pages and websites.
It was first introduced in 1997 by Macromedia, which was taken over by Adobe in 2005. Adobe has
since released several versions. In this lesson, we'll introduce you to the Dreamweaver interface and
get you started with your first website. Throughout the course you will see images and video
presentations of both the CS6 and the Creative Cloud (CC) environment. The interfaces are very
similar and any differences are pointed out.

Lesson Goals

 Learn about the role of Dreamweaver in web development.

 Learn about the Dreamweaver interface.
 Create a simple web page.
 Preview your web page in the browser.
 Set up a website in Dreamweaver.

The Role of Dreamweaver

Experienced web developers need to know many different languages. For example, a really good
client-side programmer needs to know HTML, CSS and JavaScript - three very different languages.
Dreamweaver makes it possible to develop websites without knowing these languages; however, as
you'll see in this course, it helps to have some understanding of how the different languages work.

Dreamweaver also can be used for writing server-side code, either using tools that hide the code or
working within the code itself.

Welcome Screen
 8

When you first open Dreamweaver, it presents you with a Welcome Screen with some quick links
for opening recent items, creating new documents, and viewing video tutorials:

If you find the Welcome Screen annoying, you can prevent it from opening every time
Dreamweaver starts by checking the Don't show again check box on the bottom left of the
screen.

Dreamweaver Workspaces
Dreamweaver CS6 comes with several predesigned Workspace Layout options, listed below:

 App Developer
 App Developer Plus
 Business Catalyst
 Classic
 Coder
 Coder Plus
 Designer
 9

 Designer Compact
 Dual Screen
 Fluid Layout
 Mobile Applications

You can switch between workspace layouts using the drop-down on the upper right of the application

bar:

Dreamweaver CC comes with several predesigned Workspace Layout options, listed below:

 Compact
 Expanded

In this course, we will be using the Designer or Compact layout, which you can reset at any time by
selecting Reset Designer.
 10

Creating HTML Pages

There are several ways to create new HTML pages in Dreamweaver:

1. Click on HTML under Create New on the Welcome Screen.

2. Select New... from the File menu.
3. Press CTRL+N on the keyboard.

The Welcome Screen option will create an HTML document using your default settings, which
you can change (we will see how later in the course). The other two options will pop up the
following dialog:

To create an HTML page using the default settings, simply click the Create button. We will look
more into the other options later in the course.

Please note that Dreamweaver CC has fewer layout options and also the DocType is set to HTML5
by default. Even if you are using Dreamweaver CS6, you should also set your DocType to HTML5
and use compliant code.
 11

Code View vs. Design View

There are three main views for editing documents:

1. Code View - you work directly in the HTML code.

2. Design View - you work in the WYSIWYG (What You See Is What You Get) interface
that feels like a word processor.
3. Split View - you easily toggle back and forth between working in Code and Design
View and see your changes in both places.

Use the buttons in the upper-left of the Document toolbar to switch views: .

In this course, we will generally be working in Design view. You might, however, want to switch to
Split view from time to time if you are interested in seeing the code that Dreamweaver is creating
as you work.

Creating a Web Page

Duration: 10 to 15 minutes.

In this exercise, you will create and view a simple web page.

1. Create a new HTML page using any of the methods described above.
2. Place the cursor on the page and type "Hello world!".
3. Save the page (File > Save) as hello-world.html in your
ClassFiles/Dreamweaver/Exercises folder.
 12

4. When you are done, your page should look something like this:

Solution:
1. Select New... from the File menu.
2. In the New Document dialog that pops up, click Create.
3. Type "Hello world!" in the document.
4. Save the document as hello-world.html in your ClassFiles/Dreamweaver/Exercises folder.

The Dreamweaver Interface

Panels

All of Dreamweaver's tools are contained in various windows and panels. Panels are divided and
organized into a series of Panel Groups based on the functions they contain. You can control which
of these panel groups is visible by selecting and deselecting them in the Window menu. The checked
items are currently showing Dreamweaver CS6
 13

:
 14

Dreamweaver CC

See Installing Database Panel for CC to read about the way you may add the Database,
Bindings, and Server Behaviors panels to your menu.

Insert Panel

The Insert panel (shown below) allows you to insert various "objects" (such as tables, forms, and
images) into your page. You can format or set attributes for these objects as you insert them.

The Dreamweaver CS6 Insert panel has several groupings of related objects:

 Common (shown above) - for most commonly used objects.

 Layout - for divs, Spry objects, and table elements.
 Forms - for form elements.
 Data - for Spry data objects and other dynamic elements, such as recordsets.
 Spry - for building Spry pages.
 jQuery Mobile - for building jQuery Mobile pages.
 InContext Editing - for creating InContext editable regions within pages.
 Text - for text-centric tags (e.g., headings, lists, inline tags, etc).
 Favorites - can be customized to display just the options that you use most often.

The Dreamweaver CC Insert panel has several groupings of related objects:

 15

 Common (shown above) - for most commonly used objects.

 Structure - for divs, and lists.
 Media - for media elements.
 Form - for form components.
 jQuery Mobile - for building jQuery Mobile pages.
 jQuery UI- for building jQuery User Interface.
 Templates - for creating template regions within pages.
 Favorites - can be customized to display just the options that you use most often.

You can switch between these groups using the drop-down at the top-left of the Insert panel:

The group options are shown below Dreamweaver CS6

:
 16

Dreamweaver CC

You can also drag the Insert panel below the Application Bar to give it a tabbed horizontal layout:

Many of the elements available in the Insert panel will be discussed in detail throughout the
course.

Collapse All Panels

To collapse all the panels in the right column, click the arrow icon shown in the image below (in red

square):

Click the arrow again to re-open the panels.

 17

You can also open and close panels individually by clicking on the panel name: once to open and
twice to close.

To completely hide all panels, press F4. Press F4 again to reshow them.

Properties Inspector

The Properties Inspector (shown below), which appears at the bottom of Dreamweaver in the
Designer workspace, is context-based, meaning it will change depending on what type of object is
selected. For example, if text is selected, text properties will be visible; if an image is selected, image
properties will be visible, and so on:

Every page element can be customized via the Properties Inspector. For example, text can
have a specified font, size, and style. Images can have a specified height, width, and source. To
customize an element, select it within the Document Window (the main editing area) and make
alterations via the Properties Inspector.

The Properties Inspector is split into two sections: HTML and CSS. Click on the HTML or CSS
icons on the left side of the inspector to switch between the two.

Note CS6: When the CSS icon is selected and you attempt to change properties of text,
Dreamweaver will automatically open the New CSS Rule dialog prompting you to create a new
CSS rule. These rules will all be covered later in the course.

Note CC: When the CSS icon is selected and you attempt to change properties of text, Dreamweaver
will automatically create a new Inline CSS rule. These rules will all be covered later in the course.

CSS Styles Panel (CS6)

 18

The CSS Styles panel shows up by default in the Designer workspace. We will cover CSS later in
the course. For now, you can close it by double-clicking on the panel name.

Files Panel

The Files panel (shown below) keeps track of all of the files and folders within your site. It can also
be used to browse the files on a computer or network just as Windows Explorer can be used to

browse files.

Previewing Your Page in the Browser

 19

While you are editing a page in Design View, Dreamweaver attempts to give you a good reflection
of how the page will appear in a browser, but that's not always possible (or even desirable).
Dreamweaver does make it easy to view your page as it will appear in the browser either from within
Dreamweaver itself or directly in one or more browsers.

Preview in Browser

Before previewing a page in a browser, you must first set up you Preview in Browser
preferences in Dreamweaver:

1. Select Preferences... from the Edit menu.

2. From the Category list, click on Preview in Browser:

You may
already see one or more browsers in the Browsers list.
3. To add a new browser to the list:
1. Click the icon.
 20

2. Fill out the resulting dialog. For example:

4. Repeat for every browser you want to be able to test. You can add as many as you like. Your
primary and secondary browsers can be accessed with shortcut keys:
o Preview in Primary Browser: F12 (Win) / Option+F12 (Mac)
o Preview in Secondary Browser: CTRL+F12 (Win) / Command+F12 (Mac)
5. To edit an existing browser in the list, select it and click the Edit... button.
6. When you are done, your list might look something like this:

o Notice that you can change your primary and secondary browsers by checking or
unchecking the Defaults.
o You can also check Preview using temporary file if you want to be able to
preview files without saving them. We recommend that you leave this unchecked
 21

and instead use Live View (see below) if you ever want to see how a change will
affect a page before saving.

Now you can easily preview your page in one or more web browsers either using the F12 shortcut
key combinations listed above or by selecting Preview in Browser from the File menu:

Live

Live view makes it possible to view your page as it will appear in a browser from within
Dreamweaver itself. Simply click on the Live button. For simple pages, you will not see much
difference between Design view and Live view. In Live view, however, you will not be able to edit
the page.

The Live View button in CS5 is now the Live button in CS6 and CC.

Previewing a Web Page

 22

Duration: 5 to 10 minutes.

In this exercise, you will modify your Preview in Browser settings (if you wish) and preview a
page in different browsers.

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. Preview the page in Live View.
3. Preview the page in one or more browsers.
4. Make some small modification to the page and preview again.

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Setting Up a Website
Follow these steps to set up your website for this course:
 23

1. From the Site menu, select New Site... to open the Site Setup dialog:

2. Enter "dw-class" for the Site Name and browse to the dreamweaver folder within the course
class files for the Local Site Folder:

3. Click Save.
 24

Your Files panel should now look like this:

Open up the Exercises folder and you should see the hello-world.html file you created in the last
exercise.

Pointing to Websites

When you point your browser to a website (e.g., www.google.com), the browser fetches a page from
a web server somewhere on the internet. That web server is simply a computer with some special
software on it for serving web pages and associated files (e.g., images). The server can deliver pages
to many different clients (browsers) at the same time as shown below:
 25

As a web developer, you may be responsible for putting your pages onto the web server. Different
organizations handle this in different ways, but one common way is via File Transfer Protocol (FTP).
We will show you how to set this up in Dreamweaver; however, in this course, we will simply view
the files locally.

1. To reopen the Manage Sites dialog, select Manage Sites... from the Site menu.
2. Select "dw-class" from the site list and click the pencil icon.

3. Click Servers on the left, and then click the plus symbol as shown below.
 26

4. The options will change depending on how you connect to your website (e.g., FTP,

Local/Network, WebDAV, RDS).

5. For our purposes, you can cancel out of these dialogs as we will not need to connect to a web
server for this course.

Edit Preferences
As we saw when setting our preview browsers, you can edit preferences in Dreamweaver through
Edit > Preferences...

As you become more familiar with Dreamweaver, you will want to come back to these options to see
if you want to make changes to your preferences.
 27

Lesson: Creating HTML Pages

Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's
Introduction to Dreamweaver CS6 course.

In this lesson, you will begin adding simple content to an HTML page.

Lesson Goals

 Learn about the different HTML Doctypes.

 Add a title to a page.
 Add headings, paragraphs, and blockquotes to a page.
 Add breaks and horizontal rules to a page.
 Insert special characters.

Understanding HTML Doctypes

When you choose to create a new HTML document via CTRL+N or File > New..., you get the
following New Document dialog:

To start with a basic

blank HTML page, you should select HTML for the Page Type and "<none>" for the Layout. But
 28

what about the DocType? The DOCTYPE is used to specify the "flavor" of HTML you want to use.

It used to be pretty important to understand the different DOCTYPEs, but with the introduction of
HTML5, there is an easy way out, which we highly recommend as it is both simpler and backward-
compatible. DOCTYPEs differ, so just go with the new HTML5 DOCTYPE as it's easier to
remember.

It is possible that you are working on a development team or project that has standardized around one
of the other DOCTYPEs. If so, you may want to stick with that one. However, unless otherwise
instructed by a manager or site administrator, you should choose the HTML5 DOCTYPE.

Adding a Title to Your Page

The title of an HTML page does not show up on the page itself, but it is important to include for a
couple of reasons:
 29

1. The title shows up on the browser tab as shown below making it easy for users to navigate

between tabs:
2. Search engines present the page title as the heading of a search result:

3. The title plays a significant factor in the search results themselves. The page title gives
Google and other search engines a good idea of what the page is about.

In Dreamweaver, you enter the page title in the Title field on the Document toolbar:

To illustrate let's add a title to ClassFiles/Dreamweaver/Exercises/hello-world.html:

 30

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. Place your cursor in the Title field on the Document toolbar and type "Hello world!"

3. Save your page.

4. Preview the page in your browser (File > Preview in Browser). You should see the
title on the tab heading:

Paragraphs, Headings and Blockquotes

Paragraphs

The paragraph is the default format for a block of text. Just like in a word processor, when you press
Enter at the end of one paragraph, Dreamweaver begins a new paragraph.

To illustrate let's add a paragraph to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. Place your cursor at the end of the first line of text and press Enter (Return on a Mac).
3. Type the following:
o The text 'Hello world!' is very often used in the first exercise of programming classes.
 31

4. Save your page.

5. Preview the page in your browser (File > Preview in Browser). It should appear as
follows:

Headings

HTML supports six levels of headings. Heading 1 is the most important and Heading 6 is the least
important. Like paragraphs, headings are block-level elements, meaning that they affect the whole
line of text (or multiple lines if the heading is long enough to wrap). Later in the course, we'll see
 32

how you can control the look of headings, but by default, they are bold and the size of the text

changes based on the heading level:

There are several ways to add headings in Dreamweaver, but the most common is to use the
Properties Inspector. To illustrate:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. Place your cursor anywhere in the first paragraph (i.e, the "Hello world!" paragraph).
3. Select "Heading 1" for the Format in the Properties Inspector:
 33

4. Save your page.

5. Preview the page in your browser (File > Preview in Browser). It should appear as
follows:

You can also add headings from the Format menu or using shortcut keys:

To add a new paragraph after a heading, place the cursor at the end of the heading text and press
Enter.

Blockquotes
 34

Blockquotes are used to designate quoted blocks of text. In Dreamweaver, blockquotes are added by
clicking on the Blockquote icon in the Properties Inspector:

To remove the blockquote, click the Remove Blockquote icon ( ) to the left of the
Blockquote icon.

To illustrate let's add a blockquote to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. At the end of the first paragraph under the heading, type "According to wikipedia:"
3. Press Enter to add a new paragraph.
4. Open ClassFiles/Dreamweaver/Exercises/hello-world-blockquote.txt and copy all the text.
5. Switch back to hello-world.html and paste the text into the new paragraph you added.
6. In the Properties Inspector click on the Blockquote icon ( ).
7. Save your page.
 35

8. Preview the page in your browser (File > Preview in Browser). It should appear as

follows:

Dreamweaver users often use blockquotes incorrectly as a quick and dirty way of indenting
paragraphs. You should not do this. Blockquotes should only be used to indicate that the content is
taken from another source. The proper way to indent paragraphs for formatting purposes is to use
CSS.

Adding Content to Your Page

Duration: 15 to 25 minutes.

In this exercise, you will add content to your web page.

1. Create a new HTML page and save it as index.html in your Exercises folder.
 36

2. Add content so that your web page will look like this in the browser:

3. Save your page and open it in the browser. Does it look like the screen shot above? If not, go
back to Dreamweaver and fix it.

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Breaks and Horizontal Rules

As we have discussed, when you press Enter in Dreamweaver, a new paragraph gets added.
Sometimes it is desirable to have a hard return appear within a paragraph. In HTML, this is called a
break. In Dreamweaver, you can add a break by pressing Shift+Enter.

Horizontal rules are used for visually separating content. For example, you might use them to section
off blocks of related content in an article or to provide a separator above the footer or below the
header.

To add a horizontal rule, do one of the following:

 37

 In Dreamweaver CS6 Select Insert > HTML > Horizontal Rule:

 In Dreamweaver CC Select Insert > Horizontal Rule:

 38

 Make sure the Insert panel is open (Window > Insert):

And select Horizontal Rule

from the Common Insert panel:

Breaks and horizontal rules should be used sparingly. They are very often mistakenly used for
formatting purposes only:

 Breaks are often used to add spacing between paragraphs. This is better accomplished with
CSS.
 Horizontal rules are used to provide a separation between sections of content. If this is purely
for design purposes, then it's often better to use CSS borders to accomplish the same thing.

Special Characters
 39

Special characters (i.e, characters that do not show up on your keyboard) can be added to your pages
via in Dreamweaver CS6 Insert > HTML > Special Characters:

Dreamweaver CC Insert > Character . If you do not see the character you are looking for -
Insert > Character > other will allow you to choose more symbols.

Adding Breaks and Horizontal Rules

Duration: 10 to 15 minutes.

In this exercise, you will make some modifications to /index.html.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.

 40

2. Modify the page so it will look like this in the browser:

3. Save your page and open it in the browser. Does it look like the screen shot above? If not, go
back to Dreamweaver and fix it.

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.
 41

Lesson: Links
Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's
Introduction to Dreamweaver CS6 course.

The "HT" in HTML stands for HyperText. HyperText is text that, when clicked, can take the user to
other content. So, what makes HTML HTML is the fact that the pages can contain links. In this
lesson, you will learn how to create them.

Lesson Goals

 Create text links.

 Learn the difference between absolute and relative paths.
 Target new windows with your links.
 Create email links.
 Add anchors to your page.

Adding Links
Dreamweaver makes adding links easy. Simply highlight the text that you want to turn into a link and
enter the link URL into the Link field in the Properties Inspector.

To illustrate let's add a link to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already

open.
2. Higlight the text "wikipedia".
3. In the Link field in the Properties Inspector, enter
"http://en.wikipedia.org/wiki/Hello_world_program":

4. Save your page.

 42

5. Preview the page in your browser (File > Preview in Browser). The page should look

like this:
6. Notice that when you hover over the link, the cursor turns to a pointer and Firefox shows the
URL to which the link points.
7. Click the "wikipedia" link. It should take you to Wikipedia's page entitled "Hello world
program."

Absolute vs. Relative Paths

Absolute Paths

An absolute path shows the complete path to a file starting from the web root. To illustrate this, see

the following directory tree:

Assume that the wwwroot folder is the web root. This means that when a user types
http://www.servername.com/index.html, the index.html page within the wwwroot folder will be
downloaded to the browser. The absolute path to the web root from a page on the same domain is
simply a forward slash (/).
 43

The same link could be placed on any page in any folder below the wwwroot folder or on any page in
the wwwroot folder itself.

Using an absolute path, a link to Company.html would include the about directory, like this:
/about/Company.html

External Links

When linking to a page on a different website you must identify the location of the domain using the
domain name (or IP address) of the site. To illustrate, assume that the directory structure shown
above is found at http://www.beatles.com. The path of a link to Company.html from another site
would be written like this: http://www.beatles.com/about/Company.html

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative path
indicates where a file is relative to the file that contains the link. The folder (or directory) that
contains the file being worked on is called the current directory. The relative path to another file that
is also in the current directory is just the name of that file. For example, since Company.html and
Contact.html are found in the same directory, they can link to each other simply by specifying the file
name.

The relative path to a file in a subdirectory of the current directory must include the name of the
subdirectory. For example, to link to Company.html from index.html you must first point to the about
directory, like so: about/Company.html.

The relative path to a file in a directory above the current directory should begin with ../ For example,
the following shows the path of a link to index.html from Company.html: ../index.html

Default Pages

The web server administrator can set up default page names to look for when a path ends with a
directory name without specifying a file. Often these files are named index.html or Default.htm. In
this case, the following two URLs would be identical, both loading index.html.

 http://www.beatles.com/
 http://www.beatles.com/index.html
 44

Adding Links to Your Page

Duration: 15 to 25 minutes.

In this exercise, you will add links to your page.

1. Create the following new pages and save them in ClassFiles/Dreamweaver/Exercises. Add
titles and level-one headings to each page:
1. Races as Races.html
2. Calculator as Calculator.html
3. Running Log as RunningLog.html
4. My Account as MyAccount.html
5. Log out as Logout.html
2. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.
3. Add the following links:
o Home: index.html
o Races: Races.html
o Resources: Resources.html
o Calculator: Calculator.html
o Running Log: RunningLog.html
o My Account: MyAccount.html
o Log out: Logout.html
o the most up-to-date information on running races: Races.html
o the best resources for runners: Resources.html
4. Save your page and open it in the browser.
5. Test your links. Do they work?

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Targeting New Windows

Sometimes it is desirable for a link to open in a new tab or window, so that the page with the link
does not get replaced. Dreamweaver provides a Target field in the Properties Inspector for
this purpose. This Target field remains inactive until the Link field is filled in, at which point it
 45

gives you the options shown in the screen shot below:

The _parent, _self, and _top values apply to framesets and should not be used (unless you are
designing with framesets, which you probably shouldn't be).

The _blank and new values will both direct the linked page to open in a new window. The difference
is that all links that target _blank will spawn new windows, whereas a link targeting new will open a
new window and name it "new". As long as that window remains open, all future links targeting new
will open in that same window. In fact, new is an arbitrary target name. You will get the same
behavior with any target name other than the four reserved names: _blank, _parent, _self, and _top.

Be careful not to overuse targetting new windows. A best practice in web design is to give users what
they expect and users generally expect links to replace the current page. They also know that they
can get back to the original page using the browser's Back button. However, when creating a link
that opens in a new window, the user will not be able to use the Back button in that new window to
get back to your page. Reserve the open a new window for links that take the user away from your
site, so any links to other sites work well in a new window as your site will still be available when
they close that window.

Email Links
Email links are used to open an email client to start a new email message. The value you enter in the
Link field must begin with mailto: and ends with an email address. For example:
mailto:paul@beatles.com
 46

You can also add an email link by selecting Insert > Email Link, and then filling out the

resulting dialog:

If you select the text you want to turn into an email link before selecting Insert > Email Link
then that text will show up in the Email Link dialog. Otherwise, you must type in the text in the
dialog box and Dreamweaver will add it to the page at the point where the cursor is.

More on Links
Duration: 10 to 15 minutes.

In this exercise, you will add an email link and change a link to open in a new window.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.

2. Change the link to Calculator.html so that page opens in a new window.
3. Add text to the footer that reads "Contact us at info@runnershome.com." Make
info@runnershome.com an email link.
4. Save your page and open it in the browser.
5. Test your links. Do they work?

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Anchors
Anchors are named locations to which a link can point. Anchors make it possible to link to a specific
location on a page.

Follow these steps to add an anchor in Dreamweaver CS6 using the pre HTML5 way:
 47

1. Place the cursor where you want to add the anchor.

2. Select Named Anchor from the Insert menu or the Common Insert panel.
3. In the resulting dialog, enter a name for your anchor (no spaces allowed):

To illustrate let's add an anchor to the top of ClassFiles/Dreamweaver/Exercises/Anchors.html so that

we can add a "Back to Top" link at the bottom of the page:

1. Open ClassFiles/Dreamweaver/Exercises/Anchors.html in Dreamweaver.

2. With the cursor at the very beginning of the page (before the "Anchors" heading), select
Insert > Named Anchor:
 48

3. In the Named Anchor dialog, enter "Top":

4. You should now see an anchor icon ( ) in front of the "Anchors" heading. If you do not,
you may need to change your preferences by selecting Edit > Preferences and then
selecting the "Invisible Elements" category and checking Named anchors:

You are now ready to create a link to your new anchor. To do so:

1. Scroll down to the bottom of your Anchors.html page and highlight "Back to top."
2. In the Properties Inspector, enter "#top" in the Link field. The pound sign or hash
mark (#) at the beginning of the link value is important. It tells the browser to search for an
anchor on the page.
3. Save your page and open it in the browser.
4. Scroll to the bottom of the page and test the link. Does it bring you back to the top?
 49

To link to anchors on remote sites, simply include the whole URL followed by a pound sign and the
anchor. For example: http://www.example com/index.html#anchorname. Or in the case of a default
page: http://www.example com/#anchorname.

Please note that HTML5 no longer uses the above technique. Instead, simply use the id= attribute to
give a location a name, and then link to that name using a # at the beginning. Much easier and more
direct.

To add an anchor in Dreamweaver CC using the proper HTML5 way:

1. Place the cursor where you want to add the anchor.

2. Use the ID field to name the area.

3. Create the link to the new named area (#name).

Adding Anchors
Duration: 15 to 25 minutes.

In this exercise, you will add more anchors to Anchors.html.

1. Before starting, open ClassFiles/Dreamweaver/Solutions/Anchors.html in your browser and

test the links to see how the page should work.
2. Now open ClassFiles/Dreamweaver/Exercises/Anchors.html in Dreamweaver if it's not
already open.
3. Add anchors before each story title heading:
o POOH GOES VISITING
o A MAD TEA-PARTY
o THE NAUGHTY BOY
 50

4. Make the story names at the top of the page link to your new anchors:

5. At the bottom of the page, you'll see the following text: "W3C anchors | Dreamweaver Class
Schedule."
1. Make "W3C anchors" a link to the "h-12.2.3" anchor on
http://www.w3.org/TR/html401/struct/links.html.
2. Make "Dreamweaver Class Schedule" a link to the "dreamweaver" anchor on
http://www.webucator.com/ilo/schedule/adobe/.
6. Save your page and open it in the browser.
7. Test your links. Do they work?

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Quick Tricks for Adding Links in Dreamweaver

Dreamweaver provides some neat tools for quickly adding links described below.

Point to File

1. Highlight the text that will become a link.

2. Click down on the Point to File icon in the Properties Inspector.
3. Drag the mouse over to the Files panel and point to the file.
 51

Browse for File

1. Highlight the text that will become a link.

2. Click on the folder icon (if you hover over the folder icon, it will shown Browse for
files) in the Properties Inspector:
 52

3. In the Select File dialog that appears, click on the Site Root button to quickly navigate
to your website root:

1. Alternatively, you can type the URL into the URL field.
4. Navigate to the file and click OK.

Drag File from Files Panel

1. Highlight the text that will become a link.

2. In the Files panel click down on the file to which you want to link.
3. Click down on the Point to File icon in the Properties Inspector.
4. Drag the mouse over to the Properties Inspector and point to the Link field. Although
the "no-drop" cursor might show up, Dreamweaver allows you to drop the file path into the
field.
 53

Lesson: Images
Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's
Introduction to Dreamweaver CS6 course.

Modern browsers generally support three types of images: GIFs, JPEGs, and PNGs. The PNG and
GIF are generally used for simple images such as drawings; whereas the JPEG format is used for
more complicated images such as photographs. Dreamweaver makes it simple to add images to your
page.

Lesson Goals

 Add images to your pages.

 Make your images link to other pages.
 Add accessibility attributes to your images.
 Create image rollovers with Dreamweaver.
 Create image maps with Dreamweaver.
 Add PSD images to pages from within Dreamweaver.

Inserting Images
To add an image place the cursor where you want the image to appear and do one of the following:

 Select Insert > Image:

 54

 Select Images > Image from the Common Insert panel:

You will then be presented with the Select Image Source dialog, which allows you to navigate

to your image:

As with links, this dialog gives you the option of jumping right to your website root by clicking on
the Site Root button.
 55

Rather than browsing to the image in the Select Image Source dialog, you can drag it from the
Files panel to the location on your page where you want the image to appear.

Accessibility Attributes

After selecting the image, the Image Tag Accessibility Attributes dialog will appear:

Alternate Text

Screen readers will use the Alternate text value when announcing the presence of the image.
You should either write descriptive text or select "<empty>" from the dropdown. Here are some
guidelines:

1. If the only purpose of the image is to provide a design impact, you should select "<empty>".
2. If the image contains instructive text (e.g, "Enter Store" or "Go"), you should write that text
as the value.

Long Description

The long description is used with images that tell a story (e.g, graphs and charts). The value for the
Long description, if included, should be a URL pointing to a page that provides text telling the
same story as the image.

Watch as your instructor adds the world.gif image from the Images folder to
ClassFiles/Dreamweaver/Solutions/hello-world.html and makes it a link to the Hello World
Wikipedia page.

Image Properties
 56

You can use the Properties Inspector to modify the properties of the image:

1. You can change the source, link URL, and alternate text using the Src, Link and Alt fields.
2. W and H stand for width and height.
3. When you insert an image, Dreamweaver automatically sets the width and height to the
actual dimensions of the image (in pixels). In most cases, you should not change this setting.
If one of the values is different from the actual dimension, the value becomes bold and a

Reset icon appears: Click that icon to reset the image dimensions.
4. We will discuss ID and Class when we discuss CSS later in the course.
5. (e.g, Photoshop).

Editing Images Directly in Dreamweaver

The Edit Image Settings button allows for a small amount of image editing to be done without
use of an external graphics program such as Adobe Photoshop.

Images can be cropped and brightness and contrast may be edited. Be aware, however, that if you
change an image using Dreamweaver, you are changing the actual image file. If the image is used on
any other pages, your changes will affect those pages.

In general, if you need to make changes to images, it is better to do so by going back to the original
image in your graphics program.

Image Links
Turning an image into a link is simple:

1. Select the image.

2. Add the link in the same way you would with text selected.
 57

Some browsers will place a blue border around a linked image to indicate that the image is a link. We
will show how you can remove this border later in the course.

Adding Images to Your Page

Duration: 15 to 25 minutes.

In this exercise, you will add images to your page.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.

2. Add ClassFiles/Dreamweaver/Images/RunnersHome.gif to the home page after the level-one
heading.
3. Replace "Contact us at info@runnershome.com." in the footer with the
ClassFiles/Dreamweaver/Images/Email.gif image. Make the image an email link to
info@runnershome.com.
4. Save your page and open it in the browser.

Solution:
 58

When you are done, your page should look like this:

You should have set the alternate text of the Runners Home image to "<empty>" and of the Email
image to something like "Contact us at info@runnershome.com."

Make sure your email link works.

Rollover Images
A rollover image is a linked image that changes when the user mouses over it and changes back
when the user mouses off of it. Rollover images are commonly used in navigation menus. If you
were hand-coding them, you would have to use JavaScript or CSS, but Dreamweaver does that magic
for you.

To illustrate, let's change our menu on index.html to use rollover images:

 59

In your ClassFiles/Dreamweaver/Images folder you will see a Menu folder that looks like this:

For each menu item (navigation link) there are two images: a normal image and an "on" image. We
will show the normal images in the menu by default and show the "on" images when the user hovers
over them.

Watch as your instructor adds a rollover image by following the steps below. You can follow along
in ClassFiles/Dreamweaver/Exercises/index.html or you can wait until the next exercise in which you
will add additional rollover images.

1. Open ClassFiles/Dreamweaver/Demos/index-rollovers.html in Dreamweaver.

2. Delete all the links in the navigation menu.
3. With the cursor at the beginning of the page, in Dreamweaver CS6 select Insert > Image
Objects > Rollover Image, in Dreamweaver CC select Insert > Image >
Rollover Image:
 60

(You could also use the Common Insert panel.

4. In the Insert Rollover Image dialog enter the following:
o Image name: Home (Image names cannot contain spaces).
o Original image: Browse to ClassFiles/Dreamweaver/Images/home.gif
o Rollover image: Browser to ClassFiles/Dreamweaver/Images/home-on.gif
o Preload rollover image: checked. This forces the browser to preload the "on"
images so that there is no delay in the rollover effect.
o Alternate text: Home. This should be the same as the text on the image itself.
o When clicked, Go to URL: Browse to index.html (or index-rollovers.html for
this demo).

You can test the rollover effect in Live View:

1. Click on Live View in the Document toolbar.

2. Point your mouse at the Home image. You should see it change:

Adding Rollover Images

 61

Duration: 10 to 15 minutes.

In this exercise, you will change your menu in index.html to use all rollover images.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.

2. Using the technique you just learned, change all the menu items to rollover images.
3. Save your page and open it in the browser.
4. Test your links. Do they still work? Do you get the rollover effect?

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Image Maps
You can turn sections of an image into links. These linked sections are called hotspots and an image
with hotspots is called an image map.

When you select an image on a page in Dreamweaver, you will see the following image map tools in
the Properties Inspector:

To create an image map, you need to name the map and then draw your hotspots (rectangles, circles,
or polygons) on the image.

Watch as your instructor adds an image map by following the steps below. You can follow along in
ClassFiles/Dreamweaver/Exercises/index.html or you can wait until the next exercise in which you
will complete the image map.

1. Open ClassFiles/Dreamweaver/Demos/index-image-map.html in Dreamweaver.

2. Replace the RunnersHome.gif image with image-map.gif.

3. Click on the image and name the image map "navigation":

 62

4. In the Properties Inspector, click the Rectangle Hotspot Tool and draw a

rectangle around the word "Home":

5. The Properties Inspector will now show hotspot properties:

o Notice that the Pointer Hotspot Tool is active. This allows you to resize and
move your hotspot.
o Make sure to include appropriate alternate text in the Alt field.
6. In the Properties Inspector, click the Polygon Hotspot Tool and draw a polygon
by clicking point by point around the words "Running Log." If you don't get it exactly right,

you can use the Pointer Hotspot Tool to fix your points after:
7. Again, make sure to add the alternate text.
8. Save the page and open it in the browser.
9. Test your hotspots. Do they work?

Completing the Image Map

Duration: 10 to 15 minutes.

In this exercise, you will finish the image map.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.

 63

2. If you haven't already, replace the RunnersHome.gif image with image-map.gif and name the
map "navigation".
3. Add hotspots around each would-be link. Don't forget your alternate text.
4. Save the page and open it in the browser.
5. Test your hotspots. Do they work?

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Inserting Photoshop .psd documents directly - Photoshop

Smart Objects
Dreamweaver allows you to insert Photoshop PSD files directly into a page. Dreamweaver will
watch the original document for changes. To illustrate:

1. Open ClassFiles/Dreamweaver/Exercises/hello-word-with-psd.html in Dreamweaver.

2. Insert ClassFiles/Dreamweaver/Images/world.psd beneath the "Hello world!" heading. The
Image Optimization dialog will come up:
 64

3. Make any modifications you like and save the image as a JPEG in the Images folder. The

image will show up like this:

The Image Optimizaton dialog box replaces the Image Preview dialog box in CS5.

If the original PSD file is changed, the top portion of the arrow (circled in the image above) will
change from green to red. Right-click on the image and select Update from Original to have the
changes applied to the JPEG as well.
 65

Lesson: Tables
Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on
Webucator's Introduction to Dreamweaver CS6 course.

HTML Tables are quite cumbersome to hand code, but Dreamweaver makes it easy to
add and modify them. In this lesson, you will learn how.

Lesson Goals

 Create and modify tables.

 Merge cells horizontally and vertically.
 Sort tables.
 Import data into tables from spreadsheets.

Adding a Table to Your Page

To add a table to your page, place the cursor where you want the table to appear and do one of
the following:

 Select Insert > Table:

 66

 Select Table from the Common Insert panel:

You will then be presented with the Table dialog:

In the Table dialog, you enter:

 67

 Rows and Columns. The number of rows and columns you want for your initial table.
Rows and columns can be added to and removed from the table later.
 Table width: The width of the table in pixels or percent. Percent applies to the containing
area. For example, if you nest a table with a width set at 50% within a table cell of another
table, the nested table will take up 50% of the cell.
 Border thickness: The border width in pixels. The border will be applied to all cells of
the table in a grid format. Enter "0" if you don't want a border.
 Cell padding: The amount of space in pixels that will separate the cell content from the
cell border.
 Cell spacing: The amount of space in pixels that will separate each cell from each other
cell.
 Header: Whether you want a header row, header column, or both.
 Caption: The caption you want to appear above the table. This is unformatted by default,
but can be formatted with CSS.
 Summary: The text used by screenreaders to describe the table.

To illustrate, let's add a table to a page:

1. Open ClassFiles/Dreamweaver/Exercises/table.html in Dreamweaver.

2. Place the cursor in the empty paragraph after the "Employees" heading.
3. Select Insert > Table.
 68

4. Fill out the Table dialog as shown below:

5. Click OK. Your page should look like this:

In Design View, when the table is selected, Dreamweaver provides table menus (the
green lines, arrows, and text above the table) to help you understand and modify the table.
These will not appear on the page when viewed in the browser.
 69

6. Click the Live button to see what the page will look like in the browser:

7. Now fill out the table as shown below. You can use Tab, Shift+Tab, and the arrow keys to
navigate between cells.

8. Save the page and leave it open.

Notice that the data in the first row is bold and centered. That's because it is a heading row. You
can change any cell to or from a heading row in the Properties Inspector by checking or
unchecking the Header field:

Note that new to CS6 the header row check box is no longer checked by default.

Do NOT use this for formatting purposes. Only actual headers should be marked as headers.

Sorting Tables
Dreamweaver allows you to sort tables as long as they do not have merged cells. To sort a table:

1. Place the cursor anywhere within the table to be sorted.

 70

2. Select Commands > Sort Table:

3. The following dialog will pop up:

1. Select the first column you want to sort by, the sort method (Alphabetically or
Numerically), and the sort direction (Ascending or Descending).
2. If you want a secondary sort, fill out the Then by fields as well.
3. Check the appropriate Options.
 71

4. Click OK.

Table Sorting
Duration: 5 to 10 minutes.
In this exercise, you will practice sorting a table.

1. Open or go to ClassFiles/Dreamweaver/Exercises/table.html in Dreamweaver.

2. Sort the table by Name.
3. Now sort the table by Phone to get it back to the way it was.

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Modifying Tables
After inserting the table, it is likely that you will want to make changes. Dreamweaver makes it
easy to do so.

Inserting Rows
There are several methods of inserting rows into a table.

Method 1: Right-click
1. Right-click in any cell in the row below which you want to insert a new row.
 72

2. Select Table > Insert Row:

Method 2: Insert Menu

1. Place the cursor in any cell in any row in the table.
2. From the Insert menu, select Table Objects > Insert Row Above or Insert

Row Below:

Method 3: Keyboard Shortcut

1. Place the cursor in any cell in the row above which you want to insert a new row.
2. Press CTRL+M.

Method 4: Tab
To insert a row at the very bottom of the table:
 73

1. Place the cursor in the last cell of the bottom row.

2. Press Tab.

Inserting Columns
There are several methods of inserting columns into a table.

Method 1: Right-click
1. Right-click in any cell in the column after which you want to insert a new column.
2. Select Table > Insert Column:

Method 2: Insert Menu

1. Place the cursor in any cell in any column in the table.
 74

2. From the Insert menu, select Table Objects > Insert Column to The
Left or Insert Column to The Right:

Method 3: The Column Header Menus

1. Click on the Table Column menu above any column.
2. Select Insert Column Left or Insert Column Right:

Method 4: Keyboard Shortcut

1. Place the cursor in any cell in the column before which you want to insert a new column.
2. Press CTRL+SHIFT+A.

Inserting Multiple Rows or Columns at One Time

1. Right-click in any cell in the table before or after which you want to insert columns or rows.
 75

2. Select Table > Insert Rows or Columns...:

3. Fill out the Insert Rows or Columns dialog and click OK:

Merging Cells
There are several methods of merging cells in Dreamweaver. Each method begins by selecting
the cells you would like to merge by clicking on one cell and dragging the mouse over additional

cells:

Method 1: Right-click
 76

1. After selecting the cells to merge, right-click and select Table > Merge Cells:

2. Note that the content of the merged cells also merges, so in this case, we would delete the

repetitive content:

Method 2: Properties Inspector

1. Make sure that the Properties Inspector is expanded. The arrow in the bottom-right
of the Properties Inspector should be pointing up ( ). If is pointing down, click it.
2. After selecting the cells to merge, click the Merge Cells icon in the Properties

Inspector:

Method 3: Keyboard Shortcut

1. After selecting the cells to merge, press CTRL+ALT+M.

Splitting Cells
 77

There are several methods of splitting a cell in Dreamweaver. Note that the last step for each
method is to fill out the Split Cell dialog and click OK.

Method 1: Right-click
1. Place the cursor in the cell to split, right-click and select Table > Split Cell...:

Method 2: Properties Inspector

1. Make sure that the Properties Inspector is expanded. The arrow in the bottom-right
of the Properties Inspector should be pointing up ( ). If is pointing down, click it.
2. Place the cursor in the cell to split, click the Split Cells icon in the Properties

Inspector:

Method 3: Keyboard Shortcut

1. Place the cursor in the cell to split and press CTRL+ALT+S.
 78

Converting a List to a Table

Duration: 15 to 25 minutes.
In this exercise, you will change the list on Resources.html to a table that looks like this:

1. Open ClassFiles/Dreamweaver/Exercises/Resources.html in Dreamweaver.

2. Modify the page so that it appears as shown in the screen shot above. Note that the first cell
under the Date Added heading is merged across two rows.
3. Save your work and open your new page in a browser to test it.

Solution:
The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Importing Data into Tables

Dreamweaver makes it possible to import data from external files saved as CSVs (Comman-
separated values). Such data most often comes from spreadsheets. To illustrate in Dreamweaver
CS6:

1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver.

 79

2. Place the cursor in the empty paragraph after the "Sales Report" heading.
3. Select Insert > Table Objects > Import Tabular Data...:

4. Fill in the Import Tabular Data dialog as shown below:

 80

o Data file: Browse to the Sales_Report.csv file, which is in the same directory as
the sales-report.html file you are working on.
o Delimiter: Leave as Comma.
o Table width: Fit to data.
o Cell padding: 2
o Cell spacing: 2
o Format top row: [No Formatting]
o Border: 1
5. Select the top row of the table by hovering over its leftmost border until the cursor changes
to a solid right arrow and then clicking:

6. Click the Header check box in the Properties Inspector:

7. Your table should look like this:

To illustrate in Dreamweaver CC:

 81

1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver.

2. Place the cursor in the empty paragraph after the "Sales Report" heading.
3. Select File > Import >Tabular Data:

4. Fill in the Import Tabular Data dialog as shown below:

o Data file: Browse to the Sales_Report.csv file, which is in the same directory as
the sales-report.html file you are working on.
o Delimiter: Leave as Comma.
o Table width: Fit to data.
o Cell padding: 2
o Cell spacing: 2
o Format top row: [No Formatting]
o Border: 1
 82

5. Select the top row of the table by hovering over its leftmost border until the cursor changes
to a solid right arrow and then clicking:

6. Click the Header check box in the Properties Inspector:

7. Your table should look like this:

Dreamweaver and Styling Tables

Dreamweaver makes it easy to format tables. Using the Properties Inspector (shown
below), you can:

1. Set background colors for the table rows and cells.

2. Set the width and height of columns and rows.
3. Change the horizontal and vertical alignment of cells.
 83

However, behind the scenes, Dreamweaver uses deprecated attributes to do all these things,
which is really too bad. Browsers still support the deprecated attributes, so you can use the
Properties Inspector to format tables in this way, but your HTML5 pages will not be valid. We
will show you how to format tables with CSS later in the course.