Dreamweaver

Faculty Multimedia Development Lab

Hours: Monday-Friday, 9:00am-4:00pm
Location: 67 MacNider Hall
Phone: 6-3519 

Outline

• Introduction
• Open an Existing File or Create a New File
• Dreamweaver Workspace Overview
• Page Properties (page title, background, text/link colors, and margins)
• Typography (formatting text size, colors, fonts, etc.)
• Hyperlinks
• Inserting and Editing Images
• Inserting and Editing Tables
• Saving and Previewing Your Work
• Other Functions
• HTML Resources on the Web

Introduction

Several versions of Dreamweaver were available until Adobe upgraded its suite with the CS4 layout. It offers the same features offered in previous versions, with the addition of more-so advanced editing and previewing tools. Dreamweaver assumes that you know at least a little about what goes into making a basic web page, even if you don’t know or write any source code by hand. For purposes of this guide, let’s explain two key concepts:

HTML

HTML (Hypertext Markup Language) is the most basic building block of a web page. Dreamweaver writes this source code for you, behind the scenes, as you build pages using it’s graphical interface. HTML describes your basic content, the “what”, in the simplest of terms that all browsers and devices can make sense of: headings, paragraphs, lists, images, tables, etc.

CSS

CSS (Cascading Style Sheets) specifies how that content should look. Dreamweaver writes this for you as well, embedded, or inline, with the HTML code. Colors, fonts, decorative touches such as borders, and the positioning of all of your HTML elements are controlled with CSS.

Why two different languages? Why not just one? Separating content from design allows the greatest accessibility for the end user. A blind user, for instance, can use software to audibly “read” a page (logically structured HTML content) while ignoring the graphic layout (colors, fonts, fancy positioning), which might otherwise make deciphering content difficult for such a user.  Understanding this much will help make sense of options presented to you within Dreamweaver.

[top]

Open an Existing File or Create a New File

Open Dreamweaver by double-clicking on the desktop icon OR going to Start > All Programs > Adobe CS4 > Dreamweaver. Once you open Dreamweaver, you will see a window that displays three major options: Open a Recent Item, Create New, and Top Features (videos).

Open a Recent Item

Dreamweaver maintains a history of previously edited pages. Select an HTML file from this list, or choose 'Open' and browse for the file that you would like to begin editing.

Create New

For the purposes of this guide, choose 'HTML' to open a new HTML document. As you become more advanced you may use other file types in this list.

Top Features (videos)

Adobe provides free tutorial videos for your use! This is a great way to learn more about new features and advanced techniques.

[top]

Dreamweaver Workspace Overview

Depending on your version of Dreamweaver, what you see may differ from Dreamweaver CS4, but most basic features and tasks are available in version CS3 as well.

Document Toolbar

For HTML pages, toolbar options include various preview options, page title specification, and file management commands for using Dreamweaver itself to publish files. The Document Toolbar also enables you to choose between several open files, via tabs, if more than one file is open.

Document Window

The Document Window contains the current document as you create and edit it.

Properties Inspector

The Properties Inspector is one of Dreamweaver’s most commonly used tools. Docked at the bottom of the workspace, the Inspector provides shortcuts for formatting text, links, images, and tables. This tool changes appearance, depending on which object is currently selected. If no object is selected, the Property Inspector will display text attributes. To modify an object, select the object, then make desired edits in the Properties Inspector.

New in version CS4, is the separation of HTML (content) editing from inline CSS (design). Clicking on either button will give you those specific options.

Insert Panel/Bar

The Insert Panel (or Bar), located at either the top or right of the Dreamweaver workspace, displays buttons that allow you to quickly insert various objects into an HTML page, versus using the same commands through the drop-down menus. By default, the Insert panel in Dreamweaver displays shortcuts to common elements (images, links, etc). Press on the down-facing arrow beside "Common" to view other object categories.

Files Panel

The Files Panel enables you to manage your files and folders. Find out more about the Files Panel by going to Help > Dreamweaver Help > search for "Files Panel."

[top]

Page Properties (page title, background, text/link colors, and margins)

Page Properties enable you to specify formatting properties for each page in your website. Choose Modify > Page Properties to bring up the Page Properties dialog box or click the Page Properties button found on the Properties Inspector.

Appearance (CSS/HTML)

You can set common properties for your entire web page under either Appearance category. For greatest end-user accessibility, it’s ideal that you use the Appearance (CSS) panel.

BACKGROUND IMAGE

Click the "Browse" button and navigate to the location of the background image for the page. If the image is small, the browser will automatically tile the image to fill the entire browser window. Be careful—your users need to easily read the information that will appear over it!

BACKGROUND, TEXT, AND LINK COLORS

To select a color, do one of the following:

• Enter the Hexadecimal (Hex) Value
  Hex values are 6-digit combinations of letters and numbers recognized by browsers to specify colors. If you have a color hex value, simply type or paste the value into the space provided.
• Click on the Square Swatch Beside the Element
  You will notice that the mouse arrow turns into an eyedropper. You can select colors using the eyedropper tool using either of these methods:
  • Select a Swatch from the Palette: Use the eyedropper to select a swatch from the color palette.
  • Select a Color from Anywhere on Your Page: Use the eyedropper to select a color from anywhere on your screen!
  • Select a Color from the Color Wheel: For an immense selection of colors, select from the Color Wheel. Click on the color wheel and select your own unique color.

Links (CSS)

You’d specify text link colors here—again, presuming the choice of CSS over HTML for decoration.

Title/Encoding

Every web page that you create should have a Page Title. The Page Title not only shows up in the title bar of the user's browser window, but it's also used for bookmarks and in some search engines. If you do not specify a title, Dreamweaver's default title is "Untitled Document." Imagine having 20 bookmarks that say "Untitled Document"!

Tracing Images

Dreamweaver enables you to trace an image as a layout guide for your page. For more information about Tracing Images, see Dreamweaver's help topic on "Tracing Images."

[top]

Typography (formatting text size, colors, fonts, etc.)

To customize text in Dreamweaver, first highlight the text you would like to format, then apply any of the following elements or attributes:

Format

Format is an option on the Properties Inspector that allows you to designate any text you select as a specific HTML element (the basic building block of a web page). This should be your first method of text formatting, as it encodes your content behind the scenes to make your pages accessible to users of varying browser abilities. Headings (H1, H2, H3, etc.) are very important in web page design. There are different size headings (1-6), which will help organize your web page. Heading 1 is very large and Heading 6 is very small. If you choose a heading format, a line space will automatically be added before and after the text. Same with normal paragraph text. (Tip: to break a line without starting a new paragraph, hold down the Shift key while pressing Enter or Return.) Once that's done...

Font

The font list, in the CSS area of the Properties Inspector, provides commonly available fonts (or font families). This is important because fonts are not embedded into the HTML document. This means that if an end user's computer does not have the specified font, the HTML browser will display it’s default font instead; usually Times New Roman. It's best practice to use common fonts such as Arial, Times New Roman, Courier, Georgia, Verdana, or Tahoma.

Size

Change the font size by clicking on the down arrow and selecting the desired size. Do not use the "Size" option to create headings (without selecting H1, H2, H3, etc. from the "Format" drop-down first). While your text may look fine on screen, sight-impaired users with audio web-browsers won't recognize the text as a designated heading.

Bold and Italicize

Dreamweaver enables you to bold and/or italicize. This guide recommends doing this on the CSS part of the Properties Inspector.

Alignment

Align your text left, center, or right by selecting an alignment button.

Creating a List

There are two ways to create a bulleted or numbered list in HTML:

1. Select the appropriate button and begin typing your list. After you have finished the line, press your keyboard "Enter" key and a new bullet or number will be created.
2. Or, if you have already created your text, highlight the text that you would like to list and select the appropriate list button. In this case, each paragraph is treated as a list item.

[top]

Hyperlinks

You can set text or images to link to other websites (absolute links), other pages in your own site (relative links), or to specific sections of a particular page (anchor links). For all links, select the text or image that you would like to link and enter the URL in the Property Inspector Link text box.

Absolute Links

Absolute links are links to external websites. Therefore, you absolutely must specify the entire URL (i.e., "http://www.unc.edu"). Usually, it's easier for users when external links open up in new browser window (this way, your site will still be available even if they browse around an external site). To set an external link to open in a new browser window, set the Target to "_blank".

Relative Links

Relative links are links to other pages within your own site. In this case, you do not need to specify the entire address. If the page you want to link to is within the same folder as your document, just enter the name of the file (e.g., "faculty.htm") you are linking to in the Link text box. If the page is in a different folder on your website, then the link should include the folder name, a slash, and the name of the page you want to open (e.g., "images/faculty.htm"). Even so, the safest thing to do is to click on the folder icon, browse to your file, and press "OK." Dreamweaver will then write the correct path for you.

Anchors

Anchors allow you to link to specific sections of a particular page. Instead of having to scroll down the page to find information, you can give your users a link that will jump down to the section of interest.

• Set the Anchor

  Click the document at the point in which you want your users to jump down. Choose Insert > Named Anchor and specify and anchor name.

• Link to the Anchor

  Highlight the text that you would like to link. Enter a "#" and the anchor name in the link text box (i.e. "#anchor_name"). There should be no spaces, but underscores and dashes are OK.

If you would like to link to a specific section in another page, set the anchor in the appropriate spot and link to that anchor by entering the name of the page plus the anchor link (i.e., "page.htm#anchor name").

Email Links

Set an email link in an HTML document by choosing Insert > Email Link. Enter the text that you would like to link and the email address, then press "OK."

[top]

Inserting and Editing Images

Insert photographs or graphics into a web page by inserting the cursor where you would like to insert the image, and choose Insert > Image. Choose the appropriate file and press "OK".

Tip: In order to meet the needs of users with slower internet connections, do not insert images that are of a very large resolution (500kb or greater).

Dreamweaver will enable you to alter some aspects of the image, but it's ideal to edit the photo in a photo editor like Photoshop or Fireworks first before bringing it into your web page.

[top]

Inserting and Editing Tables

While designed primarily for organizing data, you can also use HTML tables to visually lay out basic web pages. Just a reminder: for greatest end-user accessibility, it’s ideal that CSS be used for graphical layout. That requires hand-coding CSS, though, which is beyond the scope of this guide.

Insert Tables

Click on Insert > Table. Format your table from the beginning by specifying table properties in the window that appears. Don't worry if you are not sure about the settings in the beginning, the Property Inspector will enable you to change the properties after the table has been inserted.

Edit Tables

Table Size 

• Rows and Columns
  Insert the number of rows and columns in the text boxes provided. 
• Table Width
  Table width can be set as a pixel or percentage width. Pixel widths are fixed measurements that don't change, whereas percentage widths expand and collapse with the browser window.
• Border Thickness
  Set a border pixel width by entering the pixel specification in the text box.
• Cell Padding and Cell Spacing
  Cell padding applies space between the cell border and cell text. Cell spacing applies space between individual cells.
  • Header
    Automatically bold and center selected cells using the header options.
  • Accessibility
    For accessibility purposes, Dreamweaver enables you to enter table information useful to audio-based and other alternative web readers.

[top]

Saving and Previewing Your Work

Save Your File

Choose File > Save. Use the following guidelines when saving HTML files:

• For School of Medicine purposes, the homepage should be saved as "welcome.htm" or “index.htm” (“.html” file extension is OK)
• Do not use space in file names. Underscores “_” and dashes ”-“ are OK.
• Use a maximum of 8 characters to name directories and files. Again, files can have a 3 character extension (“.htm”)

Preview Your Work

Although you have not yet published your web page to a server, Dreamweaver enables you to realistically preview your page.

Live View

Click “Live View” on the document toolbar to toggle a fairly accurate preview on or off.

Preview in Browser

To preview in the actual web browser of your choice, choose File > Preview in Browser. Such a browser must be installed on your computer. If any browser preferences for Dreamweaver are set, they will appear to the right of "Preview in Browser."
To add browsers to the preview list, click on "Edit Browser List" then proceed with the following steps:

1. Click the "Edit" button. Click "Browse" and find the browser on your computer. Once you have chosen the browser, check the default browser as your primary or secondary browser.
2. Click "Ok".

[top]

Other Functions

Spell Checking

Choose Commands > Check Spelling

Clean Up HTML

If hand-writing or pasting in HTML code, you can use the Clean Up HTML command to remove empty tags, combine nested FONT tags, and otherwise improve messy or unreadable HTML code. Choose Commands > Clean Up HTML

Clean Up Word HTML

Use the Clean Up Word HTML command to remove Microsoft tags that may interfere with the tags created by Dreamweaver. Choose Commands > Clean Up Word HTML

Find and Replace

This is very useful if you want to search for (and possibly replace) text, code, and attributes within your website. Let's say you mistakenly misspelled your director's name (i.e., McKenly instead of McKenley) throughout your entire website. Instead of looking through each page of your site for the error, you can use the Find and Replace tool to find all "McKenly" text and replace it with "McKenley" in one step.

Choose Edit > Find and Replace 

1. Find In: Choose the document or folder that you would like to search.
2. Search: Specify the type of element that you are interested in searching.
3. Find: Enter the text or code that you would like to search
4. Replace: Enter the text or code that you would like to replace the current text or code.
5. To find elements without replacing, choose "Find". To replace elements, choose "Replace".

[top]

HTML Resources on the Web

Web Page Report Generator

Keep track of who and how many have visited your web site. You must have a SOM id to use this. http://www.med.unc.edu/cgi-bin/prbin/websum.pl

Other Recommended Links

http://help.med.unc.edu/training/external-links

[top]