Adobe Dreamweaver Basics CS4

Learn the basics of Adobe Dreamweaver by creating a new page and inserting and formatting common
HTML items such as links, images and lists.

Objectives

o Learn the Adobe Dreamweaver CS4 Interface

o Create a Site Definition
o Add Basic Text Formatting (bold, italic, headings)
o Create Lists
o Insert Images
o Insert Links
o Validate the HTML pages

Downloading Tutorial Files

In this lesson we will be creating a new file called berlin_wall.htm which we will then link back to our
index page. You can download the finished index.htm page at http://myweb.stedwards.edu/s_classfiles/.

There are two files needed:

1. index.htm
2. berlin_wall.jpg

The final page after completing this tutorial should look similar to: berlin_wall.htm

What is Adobe Dreamweaver?

Adobe Dreamweaver CS4:

o is the latest professional web editing application for building and managing websites.
o creates professional and personal web pages that are compatible with a variety of platforms such as
Macintosh and PCs, as well as web browsers such as Internet Explorer, Netscape, Firefox, and Safari.
o is often referred to as a What You See Is What You Get (WYSIWYG) software application. This is a
term used to describe web-developing software that writes HyperText Mark-Up Language (HTML)
code based on the text, images and layout produced in a document.

Adobe Dreamweaver Basics CS4 - 1

Setting Up A Site in Dreamweaver with an FTP Connection

Setting up a site in Dreamweaver is one of the first things that should be done when working in Adobe
Dreamwaver. In order to create a new web site in Dreamweaver you will have to set up the site
definition for the site. The site definition contains two sections: Local Info and Remote Info.

After locating the icon on the desktop (PC) or the icon in the dock (Mac) you will see a screen that looks
similar to the window pictured above.
1. Choose the option of Dreamweaver Site.

Adobe Dreamweaver Basics CS4 - 2

Site Definition - Editing Files

2. The Dreamweaver Site Definition Wizard gives a generic title of "Unnamed Site 1." However, when
working with multiple sites, such as a personal site and a work site, if each name is named "Unnamed
Site 1", "Unnamed Site 2", etc, it soon becomes hard to determine which site is which. Choose a name
that is unique and descriptive for the site that you will be working on.

For example, we can name our site for this lesson, Berlin Wall Site.
3. In the next box type the address (or URL) of your page if you know it. For St. Edward's the URL will
be http://myweb.stedwards.edu/seuloginname
4. Click Next.

Adobe Dreamweaver Basics CS4 - 3

5. On the next screen, select "No, I do not want to use a server technology" then click Next.

The only time that you would use server technology would be if you were creating a web application or
a site connected to a database. If so select Yes and follow the instructions.

6. Select "Edit directly on the server using local network".

The option of Edit directly on the server using local network is quite the opposite. When this option
is selected, each time you hit save the changes are immediately put into place. If there are users on
your webpage before you make a change, they will need to refresh their browser to get to thecurrent
one.
NOTE: This option is not available off campus (from lab computers).

Edit local copies on my machine, then upload to server when ready means each time you save
your webpage, the viewer will not see the "work in progress" changes as you work. This also prevents
the user from moving to another page and then going back to the previous page, and find that things
have been moved around.

Adobe Dreamweaver Basics CS4 - 4

NOTE: This is the only option available off campus (personal computer).
Please see the section "Uploading your Site" for instructions on how to upload your files.

7. Click on the browse button, the folder icon circled above.

8. After clicking on the browse button, choose your Edshare drive.

9. Select a folder on your computer where you would like to save all your files. For this lesson you can
create a new folder in your EdShare home folder named BerlinWall.

10. Click on the Select button and then you are taken to the previous window with your Edshare
information in the little box located below the text of Where on your computer do you want to store
your files?"

11. Click on the Next button.

Adobe Dreamweaver Basics CS4 - 5

If you chose "Edit local copies..."

12. In the box below the words "How do you want connect to your remove server?" choose FTP.

13. Enter in the host name or the FTP Address of your website.
NOTE: Since we are working on Edshare, the host name is edshare.stedwards.edu. If you buy a
domain name, most times the company will give you the host name. Since each company is different,
you will need to consult the FAQ's for more details.

14. In the next field box, type in the words public_html.

15. In the box that is asking for "FTP Login", enter in your St. Edward's login name and password.
NOTE: For a domain you've purchased, the company will give you this information.

16. Make sure the check box for "Use Secure FTP (SFTP)" is checked for the St. Edward's Network. If
you bought your a domain, it might or might not be required to have this checked. The only way to know

Adobe Dreamweaver Basics CS4 - 6

is to click on the test connection button.

17. Click on the Test Connection Button.

If your settings are done correctly, it will tell you that you have connected successfully.

18. After your settings are correct, click Next.

If by chance that you forget to check the box and attempt to test your connection, it will appear with a
larger box with some possible reasons why the connection failed.

19. After you have successfully tested your connection, click Next and then choose the option of "No,
do not enable check in and check out."
The option of Check in and Check out refers to when you are working in a large group. If the option is
enabled, it allows one user full editing access and shows as "read-only" when opening the same file to
other users. If the option is disabled, it will allow each person in the group to open and edit the same
file. If one person changes and uploads the file, while a second person changes and uploads the same
file, the first person's changes are not visible, but the second person's changes are to the user.

20. Click on Done.

Creating and Saving a New File

Creating new documents is simple in Dreamweaver; before you continue, it is very important that you
save your file first! You don't want to unexpectedly lose your work. In this lesson save the file as
berlin_wall.htm.

Adobe Dreamweaver Basics CS4 - 7

Create/Save a New File: From the Welcome Screen, click HTML from under the "Create New" heading.

For more options:

1. Select File > New. This will open the New Document dialog box, which lets you choose a template
for your new document.
2. Make sure the Basic page category is selected and then choose HTML under the Blank Page
section. This tells Dreamweaver that you want to create an HTML page. Click Create.

Exploring Dreamweaver

Dreamweaver's workspace consists of four basic elements. These elements are the Document Window
, Insert Panel, Properties Panel, and Panel Groups. Let us take a look at each of these elements
more in depth.

The Document Window is the browser-approximate main workspace where web pages are created
and edited using the panels and toolbars.
Embedded within is the document toolbar that includes three main viewing options: Code, Split, and
Design. These three viewing options help you view and manipulate your web pages.

Adobe Dreamweaver Basics CS4 - 8

Changing Views in the Document Window

o Code View - This option allows you to view your web page's entire HTML coding as it is generated by
Dreamweaver. Many designers use this option in order to enter or edit the HTML code.

o Split View - This viewing option divides both the Design and Code view to allow you to see the
HTML coding as you lay out your website. The upper pane displays your HTML code while the lower
pane shows you the page as it will appear in the web browser. This view allows a designer excellent
mobility between the coding and the layout. It is also best used when you want to debug or
troubleshoot a web page.

o Design View - This option is the primary view that allows you to view your web page the way it will
appear in your web browser. Take note that when you are viewing your web page in this view, all of
your HTML coding is hidden. The finished product should look the way it does in this viewing option.

Document Toolbar

1. Live View - Sometimes there are discrepancies between whe you see in Design view and what your
webpage looks like live on the Web. To preview what your page will look like live on the Web, click the
Live View button to toggle these views.
2. Title - Create a Title for your page. This is visible to visitors in the Browser and in search engine
results. Your title should be no longer than 65 characters.
3. Preview in Browser - Choose what browser you preview your page in.
4. View Options - Toggle grids, guides, etc. to help you work in Design view.
5. Visual Aids - Display or hide element borders in Design view.
6. Validate Markup - Check your page to make sure your markup validates according to W3C standards.

Adobe Dreamweaver Basics CS4 - 9

Working with Code

1. Collapse Full Tag - Collapses a chosen element.

2. Collapse Section - Collapses any highlighted portion of code.
3. Expand All - Expands all collapsed elements and sections.
4. Select Parent Tag - highlights the element where the cursor is.
5. Line Numbers - Toggle the display of line numbers (shown by default).
6. Highlight Invalid Code - checks for code that won't validate by W3C standards.
7. Move CSS Rules - Relocated highlighted CSS rules on a page.

Adobe Dreamweaver Basics CS4 - 10

Insert Panel

This toolbar is called the Insert Panel, which allows you to create new objects (anything that is
manually inserted onto your Document Window). The buttons found in this toolbar are organized into
categories. Select catagories using the dropdown menu. The different categories appear above the
icons.

Properties Panel

The Properties Panel is a toolbar located beneath your Document Window. This toolbar contains a
series of buttons for examining and editing attributes of any page element that is currently selected on
your web page. Take note that your Properties Panel buttons and options may change to reflect any
attributes of any selected element.

Adobe Dreamweaver Basics CS4 - 11

Status Bar

The Status bar is small panel located at the bottom of your Document Window. The Status bar in
Dreamweaver consists of three things: the Tag Selector, Window Size menu, and Document
Size/Estimated Download Time.

o Tag Selector - Shows your entire HTML tags as located and selected in your Document Window.
You can also quickly select any HTML tag by simply clicking on any of the tag symbols. This is best
when web pages become more dynamic and elaborate, you can keep track of all of your HTML tags.
o Window Size menu - This allows you to view your Document Window's current dimensions in pixels (
i.e. 1058 x 700). These numbers can change when you resize your Document Window or you can set a
specific dimension by manually resizing the window or by selecting a dimension from its drop down
menu.
o Document Size/Estimated Download Time - Shows your web page's current size in kilobytes (K)
and the approximate amount of time in seconds it would take to download the page over a 28-Kbps
modem. (i.e. 4K/1sec).

Panel Group

Panels in Dreamweaver are grouped together into panel groups. Each panel group can be dragged out
to become its own floating window by clicking on tab and dragging/dropping the tab, as done with the
Files panel group in the above screenshot.

Adobe Dreamweaver Basics CS4 - 12

CSS Styles Panel

The CSS Styles Panel lets you track the cascading style sheet rules and properties that affect a
current page element (Current Mode), or the entire document (All Mode). A toggle button at the top of
the panel allows you to switch between the two modes. You can also modify the CSS properties in both
All and Current mode.

Adobe Dreamweaver Basics CS4 - 13

Files Panel

You use the Files Panel to view and manage the files in your Dreamweaver site. When you view sites,
files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or
collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the
remote site, or the testing server as a list of files. When expanded, it displays the local site and either
the remote site or testing server. The Files panel can also display a visual site map of the local site. For
Dreamweaver sites, you can also customize the Files panel by changing the view-either your local or
remote site--that appears by default in the collapsed panel.

Adobe Dreamweaver Basics CS4 - 14

Workspace Layouts

Dreamweaver CS4 provides 8 preset workspace layouts designed to suit different types of developers
or projects. To switch workspace layouts, select a layout from the workspace switcher, in the top-right
corner of the application window, as shown in the screenshot. "Classic" refers to the layout of
Dreamweaver CS3.

Creating a Custom Workspace Layout:

In addition to using the default workspace layouts, you can also arrange the workspace to your specific
needs and save that layout for later use.
1. Arrange the panels and toolbars in the workspace as desired.
2. From the workspace switcher menu, choose "New Workspace". The "New Workspace" dialog box
opens.
3. Enter a descriptive name for the workspace and click OK. The new workspace name appears at the
top of the application window.
You can rename or delete custom workspaces by choosing "Manage Workspaces" from the workspace
switcher menu.

Saving a New File

3. Click the Code button in the Document toolbar to change to Code. (If your Document toolbar isn't
visible, select View > Toolbars > Document to make it visible.)
4. Click the Design button in the Document toolbar to return to the default Design view of your page.
5. In the Document toolbar's Title text field, type [name of your website]. Press Enter (Windows) or

Adobe Dreamweaver Basics CS4 - 15

Return (Mac). This will define the page title for this page. The page title appears at the top of the
browser when the page is being viewed and is the name used by browsers when this page is
bookmarked.
Note: Before you continue, it is very important that you save your file first! You don't want to
unexpectedly lose your work. In this lesson save the file as berlin_wall.htm.

Saving the New File:

6. Browse to File on the menu bar and down to Save.
7. In the Save As Dialog Box type a desired file name; in this lesson berlin_wall.htm would be
appropriate.

Adding and Formatting Text

Formatting text in Dreamweaver is the same as using a standard word processor, such as Microsoft
Word. You can:

o set formatting styles (such as Paragraphs, Heading 1, Heading 2, Heading 3) for a block of text,
o apply text styles such as bold, and italic.

NOTE: Other formatting options such as changing the font, size, color, and alignment of a selected text
should be done in cascading style sheets , instead of the Properties Panel in Adobe Dreamweaver.

Text is entered into Dreamweaver by either typing directly onto the Document Window or inserting the
text directly into the code using the Code view. Once this text is in the Document Window you can
format it very similar to most word processors. Pressing Enter (Windows) or Return (Macintosh) create
a new paragraph. You can start a new paragraph by inserting a line break. The following are some of
the most important formatting tools found in Dreamweaver.

Text Format in the Property Inspector

Dreamweaver contains three basic paragraph styles: paragraph, heading, and preformatting. They
are applied using the Format drop-down list in the Property Inspector panel.

o Paragraph - This format ignores white space, so extra spaces within the paragraph appear as only
one space when viewed in a browser. Paragraph format uses the HTML code <p>…</p>, which
indicates the text will automatically wrap.

o Heading - Headings are used to identify different sections of content on a page. They range from
largest and boldest <h1> to smallest <h6>. Headings are applied to the entire paragraph, so you can't
mix heading styles within the same line of text.

Adobe Dreamweaver Basics CS4 - 16

o Preformatted - The preformatted format enables you to space text exactly as you want, including
using white space and line breaks. Text doesn't automatically word wrap, so you must press Enter to
end a line.

Adding a Heading with the Property Inspector

1. Place your cursor in the Document Window in the desired location.

2. Select from the Property Inspector under Format, Heading 1

3. Type the desired text for your Heading 1. In this lesson type a informative heading like "The Berlin
Wall".

Adding Paragraphs

1. Press Enter (Windows) or Return (Macintosh) after the Heading 1 or previous text.

2. Pressing enter idesignates any following text as a plain paragraph until formatted differently. Type
any desired text, for this lesson you can type an introductory paragraph about Berlin like the one above.

Note: Dreamweaver always assumes that any inserted text is one complete paragraph. Unless you
apply a proper format, then the text found within the <p> …</p> tag pair will appear as one complete
paragraph.

Adding Line Breaks

The use of white space is important in the design and readability of any website. In Dreamweaver,
when you press Return (Enter) key, a new <p> is inserted.

Follow any of these simple steps in order to insert a line break. In the Code view, the screenshot above

Adobe Dreamweaver Basics CS4 - 17

is what the line break will look like.

o Press Shift + Enter (Windows) or Shift + Return (Macintosh).

o In the Text category of the Insert bar, select Character and click the Line Break icon.
o Select Insert > HTML > Special Characters > Line Break.
Note: Dreamweaver will also assign a new HTML paragraph for non-breaking space "&n bsp;"
between the opening and end tags. If you type on this new line, the non-breaking space is replaced
with your content. However, if you leave it blank, that non-breaking space will remain there. Because
the tag is not empty, web browsers automatically interpret this paragraph as a blank line.

Spell Check

Use the Check Spelling command to check the spelling in the current document. The Check Spelling
command ignores HTML tags and attribute values.

By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary,
select Edit > Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh),
then in the Spelling Dictionary pop‑up menu select the dictionary you want to use. Dictionaries for
additional languages can be downloaded from the Dreamweaver Support Center at
www.adobe.com/go/dreamweaver_support.

1. Select Commands > Check Spelling or press Shift+F7. When Dreamweaver encounters an
unrecognized word, the Check Spelling dialog box appears.

2. Select the appropriate option based on how you want the discrepancy handled:
Add To Personal - Adds the unrecognized word to your personal dictionary.
Ignore - Ignores this instance of the unrecognized word.
Ignore All - Ignores all instances of the unrecognized word.
Change - Replaces this instance of the unrecognized word with text that you type in the Change To
text box or with the selection in the Suggestions list.
Change All - Replaces all instances of the unrecognized word in the same manner.

Adobe Dreamweaver Basics CS4 - 18

Bolding Text with "Strong" Tag

1. In the Document Window select the text that you would like to bold.
2. In the Property toolbar, click on the bold icon. Inside the Document Window in Design View, you
will notice that the highlighted text is now bolded.

Italics with the "Emphasis" Tag

Similar to bolding text, it's simple to format text as italics.

1. Select the text that you would like to italicize.
2. In the Property toolbar, click on the Italics icon. Inside the Document Window in Design View,
you will notice that the highlighted text has been italicized. The screenshot above shows the emphasis
tags that were inserted when the Italics icon was clicked.

Adding a Second Heading and an Unordered List

Before you can add a list, you will need a title, something to describe your list. Type the title for your list
and highlight the text, and select Heading 2 or an appropriate heading level from the Properties Panel.

Adobe Dreamweaver Basics CS4 - 19

Click on the unordered list icon (circled above) or bulleted list icon in the Properties Panel.
Type in the first item in your list. After doing so, click enter, and there is a second bullet created below
the first.
Finish the list with as many items as you like. To change from a list to a plain paragraph press enter
twice.

Changing from Unordered List to Numbered List

With the unordered list already typed out, highlight the completed unordered list.
In the property pane, click on the ordered list icon. This icon is next to the unordered list icon in the
Properties Panel.
The numbered list button will convert the unordered list to an ordered list. Click away from the list to
see the final result.

Adding a Third Heading

Before our next step where you'll add an image, you might want to add a title - something to describe
your image.

Type the title for your text, select the text and, select Heading 3 or an appropriate heading level from
the Properties Panel.

Adobe Dreamweaver Basics CS4 - 20

Adding an Image

1. In the Insert Panel, choose Common from the drop-down menu (if not already open).

2. Under the Common menu, choose the icon with a little tree - it should say Images next to it. After
clicking on the icon, an open dialog box will appear.

3. Navigate to where the image is located.

In the instance where the picture is located on your hard drive but not in the site folder, then a pop-up
dialog box will appear. If you are prompted with this box, you will want to click on yes. After doing so,
Dreamweaver will create a copy of the file, and place it into your root directory (the place where your
images will be saved).

Adobe Dreamweaver Basics CS4 - 21

Alternative ("Alt") Text

After clicking on "yes" to the "files outside of the root folder " (if you happen to get this screen) or
after hitting OK, you will be brought to this page.

An alternative text is helpful for those using an external device such as a screen reader, or those who
have images disabled. If images are disabled, then it will display the alternative text.

When testing your page and you happen to see that you have misspelled something in the alternative
text, you can easily correct it by clicking on the image and using the Property Toolbar. You can
change the alternative text in the alt field of the toolbar.

Image File Formats

Adobe Dreamweaver Basics CS4 - 22

Creating a Relative (Internal) Link using Text

The capability to link to pages and sites is what makes the Web dynamic. You can create text or image
hyperlinks using the Properties Panel to associate the text with a specific file or web page. The
following are steps on how to create hyperlinks using text or images.

1. Type the text you would like to become the link text, such as "Back to my Homepage."

2. Select this text.

3. Click the Browse for File icon, next to the Link option, in the Properties Panel. Select an HTML
page from your web site, for example your index or home page. Click OK. This text is now linked to an
HTML page within your Web Site.

4. Hit enter to make the selected text a link.

This link is called a Relative Link. It is relative simply because its linked to a document within this site,
not to an external Web site.

Creating an Absolute (External) Link

An absolute link is defined in XHTML because it begins with an "http://" header and includes a full
address.

The process is almost identical to creating a relative link:

1. Select the text that you want to become a hyperlink.
2. Type the entire the URL, such as http://www.stedwards.edu into the Link option in the Properties
Panel and press Enter (Windows) or Return (Mac).
Alternately, for long URLs you may choose to copy the entire URL from the address bar of an open
browser then paste the URL into Dreamweaver.
3. Click OK. This text is now linked to an HTML page within your Web Site.

Adobe Dreamweaver Basics CS4 - 23

Creating an Image Link

1. Select an image that you want to become a hyperlink.

2. You can create an Absolute Link to an external website by typing the URL, such as
http://www.stedwards.edu or in our example http://www.berlinwallart.com/ into the Link option in the
Properties toolbar and press Enter (Windows) or Return (Mac). This link is an Absolute Link,
because it begins with an http header and includes the full address.

Creating an E-mail Link

Aside from creating links to pages, you can create email links that send you correspondence directly to
any email account. Creating an email link is easy; first type the text that you want to appear as a
hyperlink. When users click on this text, the user's default email application (Eudora, Outlook, etc) will
automatically launch a new email message with your email already addressed in the To: field.

The following steps are ways to create an email link:

1. Drag-select the text Email YourName. This will highlight the text.
2. In the Properties Panel, type in the command "mailto:" then an email address. Watch your spelling!
3. Hit the Enter key.

Adobe Dreamweaver Basics CS4 - 24

Adding Special Characters

There are times when your text may contain special characters and diacritical marks. Dreamweaver
provides most of these special characters such as the copyright symbol(©), trademark(™), registered(®
), or an em dash(-).

To add special characters to your text:

1. Position your cursor where you want these special characters on your Document Window.
2. From the Insert Panel, choose Text from the drop-down menu and click on the Characters icon
(circled above). By default, the Copyright symbol is chosen. Clicking the downward-pointing triangle will
give more options.

Adobe Dreamweaver Basics CS4 - 25

Inserting Date & Time Stamps

Most Web pages include date/time stamps, and Dreamweaver can you help you include both of these
objects.

Here are a few steps on how to insert these onto your Web pages:
1. Place your cursor into the area where you would like to have your date stamp shown. Usually this is
located at the bottom of your Web site.
2. Type “Updated on:” or “Created on:”
3. In the Common tab of the Insert Panel, click the Date button.
4. An Insert Date dialog box will appear. In this dialog box, choose the format Dreamweaver will use to
display the date and time. Check the option for "Update automatically on save". This means that
each time you edit this file and save, Dreamweaver will automatically update this date and time.
5. Click OK.

Adobe Dreamweaver Basics CS4 - 26

Quick Tag Editor in the Tag Selector

Tag Selector:
On the left side of the status bar, there is a listing of HTML tags. The Tag Selector keeps continuous
track of where you are in a document by displaying the tags surrounding your current cursor position.

Quick Tag Editor:

To edit code while in Design view, highlight the content you'd like to edit and right-click (Control-click on
a Mac) on the correct tag in the Tag Selector (#1 in the screenshot). Choose "Quick Tag Editor" from
the menu to get a small dialog box that says "Edit tag". From here, you can modify the code.

Alternately, if the tag you'd like to edit is the last one listed in the status bar (the inner-most nested tag),
like in the screenshot, use the keyboard shortcut Ctrl + T to bring up the Quick Tag Editor dialog box.

If you click anywhere in Design view and use Ctrl + T, an "Insert HTML" dialog box will pop up, allowing
you to insert any code as if you were writing it in Code view.

Previewing in Browser from the Design Window

In the Design view there are multiple ways to access the Preview in Browser function.

1. Select a shortcut key for your primary and secondary browsers. This can be set in the Preferences
(see previous step) but most likely will be F12 for the primary browser and CTRL + F12 (Windows) or
Command + F12 (Mac) for the secondary browser (if set).
2. At the top of the Design Window on the Document Toolbar there is also a Preview in Browser icon.
By clicking the drop down menu any of the browsers set up previously can be chosen. (pictured above)
3. Navigate to File > Preview in Browser and choose a browser.

Adobe Dreamweaver Basics CS4 - 27

* Always test your webpages in multiple browsers as there are many differences on how each browser
might interpret the HTML code.

Validating your Page

After building a page we can make sure it is up to standards by validating it with an HTML validator.
Web pages can be validated by many different validators available online.

A common validator can be found at: http://validator.w3.org.

1. Click on the Validate by File Upload tab and then click on the browse button.
2. Navigate to your Edshare folder, or where ever the file is located and select the index.htm or other
HTML file you want to check.
3. Click on the Check button to continue the validation. The validator will return information on whether
the page is valid or the errors that prevent it from validating correctly with descriptions.

Adobe Dreamweaver Basics CS4 - 28