Dreamweaver CS3

[Printer-friendly version] Several versions of Dreamweaver were available until Adobe upgraded its suite with the CS3 layout. Dreamweaver CS3 offers the same basic features offered in previous Dreamweaver versions, but with more advanced layout tools and further integration with other Adobe products.

Faculty Multimedia Development Lab

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

Outline

• 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

Open an Existing File or Create a New File

Open Dreamweaver by double-clicking on the desktop icon OR going to Start > Programs > Adobe CS3 > Dreamweaver. Once you open Dreamweaver, you will see a window that displays three major options: Open a Recent Item, Create New, and Create from Samples.

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'll use other file types in this list.

Create from Samples

This enables you to create pages/sites from templates.

[top]

Dreamweaver Workspace Overview

Depending on your version of Dreamweaver, what you see may differ from Dreamweaver CS3. Don't panic—everything in the following section can also be found in the main menu at the top of your version!

Insert Bar

The Insert Bar displays buttons to insert various objects into an HTML page. By default, the Insert bar in Dreamweaver displays shortcuts to "Common" elements. Press on the down-facing arrow beside "Common" to view other object categories. To find out what each button represents, scroll over the image with your mouse and a descriptive tag will appear.

Document Toolbar

The Document Toolbar contains buttons that enable you to select different views of the Document window.

The Document bar also enables you to choose between several open files through tabs, instead of through the Window menu. Other Document bar options include Page Title specification, as well as buttons for browser compatibility checks, file management, browser previews, document refreshing, and other document window options.

Document Window

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

Property Inspector

The Property Inspector is one of the most commonly used Dreamweaver tools. Docked at the bottom of the workspace, the Inspector provides shortcuts for formatting text, links, images, and tables. This tool changes appearances 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.

Tip: A down-facing arrow in the lower right corner of the Property Inspector indicates that there are further properties associated with the selected element. To expand the Property Inspector, click on the arrow.

Panel Groups

Panel Groups are sets of related functions grouped together under one heading. The Panel Groups docked to the right of your Document Window can be rearranged to suit your needs.

• Use the panel gripper to dock or undock the panel by clicking and dragging.
• Collapse or expand the panel by clicking on the panel name.
• Rearrange the Panel Group order by dragging the panel gripper to the area below the panel group name.
• Hide or show panels by going to Window menu and choosing the function.
• Click the options menu to list a range of choices specific to the active panel or panel group.

File Panel

The File Panel enables you to manage your files and folders. Find out more about the File Panel by going to Help > Using Dreamweaver > search for "File 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.

Appearance

You can set common properties for your entire web page under the Appearance category.

• 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 when using a background image! Whether you are using an image, or background colors, be aware that 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. Once you have the color hex value, simply type the value into the space provided.
    

    About Browser-Safe Colors: The hype about browser-safe colors isn't as important as it was in the days of the 8-bit computers. Today, most computers are 16-32 bits and display thousands or millions of colors. However, you should not completely discard all thoughts of browser-safe colors. Browser-safe colors come into play when designing for alternative online publishing devices, such as cell phones and PDAs. For more information about browser-safe colors, read "The Web-Safe Color Dilemma," located on Lynda.com

  • Click on the Square 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. All colors in this palette are considered browser-safe, meaning that they have been checked and found to be consistent across multiple browsers. (You can also expand the color safe palette by clicking on the arrow in the top right corner of the palette window; select "Continuous Tone".)
  • Select a Color from Anywhere on Your Page: Use the eyedroper 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.

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 200 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 apply elements to fonts in Dreamweaver, first highlight the text you would like to format, then apply any of the following elements:

Format

Format options display pre-formatted heading sizes and text elements. This should be your first method of text formatting, as it encodes your content behind the scenes with proper, logical HTML, making your pages accessible to users of varying browser abilities.  Heading (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. Once that's done...

Font

The font list provides a list of commonly used fonts (or font families) used in web pages. To select a font, click on the down arrow next to "Default Font" to choose a font style. If you would like to choose a font not listed on the font list, scroll to "Edit Font List." Choose from the "Available Fonts" list (these fonts are available on your computer) by clicking on the font. Use the arrow pointing to the left to transfer the font to the chosen font list and press "Ok." The Chosen Font should now be in the Property Inspector font list.

Accessibility Tip: Fonts are not embedded into the HTML document. This means that if a user's computer does not have the specified font, the HTML browser will display the font as the browser's default font; usually Times New Roman. It's best practice to use common fonts such as Arial, Times New Roman, Courier, Georgia, Verdana, or Tahoma.

Styles

Styles refer to Cascading Style Sheets. For more information, choose Help > Using Dreamweaver > search for "Cascading Style Sheets."

Size

Change the font size by clicking on the down arrow and selecting the desired size. 1 is the smallest font size, while 7 is the largest.

Tip: 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.

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:

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 (i.e., "services.htm") that 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 (i.e., "images/faculty.htm"). The safest thing to do is to click on the folder icon, browse to your file, and press "OK."

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").

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 clicking on the area 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 more than 50K to 75K into your page (and do not include more than a total of 75K to 100K on a page). It's recommended that all photograph images are saved as .jpg and other images are saved as .gif.

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.

[top]

Inserting and Editing Tables

The most common way to layout a web page is to use an HTML table.

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 expand with the browser window, 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 files:

• Use the .htm file extension, not .html
• The homepage should be saved as "welcome.htm"
• Do not leave spaces or strange characters (alphanumeric only)
• Use a maximum of 8 characters to name directories and files. Files can have a 3 character extension (.htm)

Preview Your Work

Although you have not yet published your web page on a server, Dreamweaver enables you to preview your page in a browser. Choose File > Preview in Browser. If any browser preferences 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. This file should have an .exe extension.
2. Once you have chosen the browser, check the default browser as your primary or secondary browser.
3. Click "Ok".

[top]

Other Functions

Spell Checking

Choose Text > Check Spelling

Clean Up HTML

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.

1. Choose Edit > Find and Replace
2. Find In: Choose the document or folder that you would like to search.
3. Search: Specify the type of element that you are interested in searching.
4. Find: Enter the text or code that you would like to search
5. Replace: Enter the text or code that you would like to replace the current text or code.
6. 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]