Dreamweaver MX2004 Guide

Dreamweaver MX 2004 guide

Introduction
Web Design Basics
Putting Your Site on the Web
Getting Started with Dreamweaver

Creating a New Page
Toolbars and Palettes
Reference and Assets

Entering and Formatting Text
Creating Tables
Using Lists
Images
Links & Anchors
Site Accessibility
Further Assistance

Introduction

Dreamweaver is a versatile program that allows you to create and design your own web pages without having to know HTML (Hyper Text Markup Language). Dreamweaver allows you to create a web page almost as easily as you could write a paper using a word processor.

This helpsheet offers a basic introduction to some of Dreamweaver's most commonly used features. For more comprehensive guidance, feel free to stop by the Digital Media Center and consult one of the Dreamweaver guides in our reference collection.

Web Design Basics

Although web designers take a range of approaches to their sites, a few basic principles of good design have emerged:

Include the date that you last updated (i.e., made substantial changes) to the site, and provide an email address so that people can contact you easily. This information often occurs at the end of the web page.
Make sure that you provide a way for people to return to your home page.
Strive to have a consistent look and feel for your web pages.
Have a purpose for everything you include: avoid blinking text, pointless animation, etc.
For some examples of what not to do, see http://www.webpagesthatsuck.com/suckframe.htm

For more on these topics, consult a web style guide or usability guide, such as:

The Yale C/AIM Web Style Manual: http://info.med.yale.edu/caim/manual/contents.html
Jakob Nielsen's Useit.com (on usability issues): http://www.useit.com/
Rice Web Style Guide: http://www.rice.edu/web/style.html

Putting Your Site on the Web

The Site Concept

A site is a storage place for web pages. In Dreamweaver you will work with two sites: the site on your computer (local folder), and the site in your Owlnet or RUF account (remote site). You can manage and exchange information between the two sites using the Dreamweaver Site menu.

Dreamweaver provides some useful tools for managing your web site. Once you have defined your web site, Dreamweaver will automically update any changes, preventing the dreaded occurrence of broken links.

To create a local site:

Create a folder for your web site on your local machine.
Choose Site > Manage Site from the menu bar, then click the New button.
In the dialog box, choose a Site Name and click the Next button. Make sure the site is saved in the Local Root Folder on your computer for your site by clicking on the folder icon . Remember to save all subsequent documents you create for this site under this folder.
After clicking Next and inputting information, you will be able to define a remote site.

You will need to move your HTML files and images from your local machine to a web server (such as Owlnet or RUF) for them to be viewable.

To set up the remote site (if you have already defined it without remote site):

Go to Site > Manage Sites.
Choose the site name you are working with and click on Edit.
Click Next three times.
From the pull down menu chose FTP
Select the following options to use RUF or Owlnet servers:
1. Host Address : gg.owlnet.rice.edu for Owlnet; kennel.ruf.rice.edu for RUF
2. Folder to save files : public_html/
3. Login: your user id
4. Password: your password
  - If you don't want your password saved, uncheck the Save option and you will be prompted for your password when you connect to the remote host.
Click Next twice.
Click Done.

To upload your Web page(s) to the remote site:

Save your page by selecting File > Save.
On the assets palette make sure the Files tab is selected.
Click the Connect to Remote Host button to connect to your RUF or Owlnet account. The remote site contents will become visible on the left.
To upload site content to the web, select the items you wish to upload from the local folder. Then click on Put on top of the Files window. Click Yes if prompted to include dependent files.
To download items on the remote site to your local folder, click on Get
When you have finished managing your site, click on Disconnect and the button will look like this again: .

An alternative way of transferring files to a web server is to use FTP or SSH Secure File Transfer Client.

Synchronizing Files

Once your site gets more complex in both navigation and number of elements, use File Synchronization to ensure the latest versions of files are on your site. For more information on using File Synchronization or other site management tools in Dreamweaver, consult the Dreamweaver User's Manual, available in the Digital Media Center.

Getting Started with Dreamweaver

To create a new web page:

Go to the File menu and choose New. In the window that pops up, choose Basic Page in the category column, and Html in the center column.
Enter a title for your document in the title box on the top of the document window. Make sure that it is meaningful and descriptive, since this is what will appear in the bar at the top of the web browser and as the title used by most search engines. (If the title box is missing, on the menu choose View > Toolbars > Document.)
Go to the Modify menu and choose Page Properties.
Select a color for the background of your webpage by using the color box . If you wish to use a Background Image instead, choose the file name and location by browsing for your image. The image will be tiled in the background of your web page.
By clicking other categories on the left, you can change different features. Choose your text colors. In general, the default text colors for most web pages are black for text , blue for links , purple for visited links , and red for active links . Some web usability gurus caution against deviating from this basic color scheme, since it is what web users are accustomed to.
Save your file immediately by selecting File > Save. Choose a location and name for your document. You are now ready to begin creating your page.

Dreamweaver Tools: Toolbars and Palettes.

The Document Window is the main window that displays your page as you create and edit it. You can make changes to your web page directly from the menus at the top of the window, or you can use the inspectors and palettes (described below). The document window is home to the Upper Toolbar and the Lower Toolbar.

Upper Toolbar

Here you can change your View, edit the title of your HTML document, or preview the file in a browser .

Lower Toolbar

On the left is a list of all the HTML tags that surround the cursor. The middle boxes show the Dreamweaver window's current dimensions in pixels, the size of your code in kilobytes, and the estimated download time.

The Document Window is the main window that displays your page as you create and edit it. You can make changes to your web page directly from the menus at the top of the window, or you can use the inspectors and palettes (described below).

Inspectors and Palettes allow you access to specific editing commands quickly and easily. These are floating boxes that you can move around the document window. The following three are used most often:

Objects Palette

Allows you to insert a range of common web elements, such as images, tables, horizontal rules, multimedia files (e.g. Shockwave) java applets, and more.

Property Inspector

Displays properties for the selected object or text in the document window and allows you to change them. For instance, you can make a chunk of text bold, or insert a link.

The Window menu on the top also provides a list of all the windows, inspectors, and palletes for use in Dreamweaver. A check mark next to the item indicates that it is currently open.

Different Views Within Dreamweaver

The Code View option allows you to view and edit the HTML code that is behind your web page, allowing greater control to those familiar with HTML. You can also edit your page manually outside of Dreamweaver. When you close the external editor and return to Dreamweaver, remember to save your page.
The Split allows you to work simultaneously with both the HTML code and visual design of your page. This mode is excellent for troubleshooting and fixing bugs within your page.
The Design View option gives you a WYSIWYG (What You See Is What You Get) editing environment in which what you see on the screen is almost exaclty what will appear in a web browser.
After editing HTML in Code View, click the Refresh button to apply your changes.

Reference and Assets

Reference Window
	Dreamweaver MX 2004 comes with the O'Reilly HTML Reference built in. You can use it to look up the proper usage of every HTML tag. Choose Window > Reference if the palette is not already open.

Assets Window
	The Assets tool lets you access every element contained within your Site. You can browse files by type, such as images, colors, Shockwave animations, and URL's. Elements in a category are listed alphabetically, regardless of their place within the site's file structure. Choose Window > Assets.

For information on publishing your pages, see Putting Your Site on the Web.

Entering and Formatting Text

Entering and formatting text in Dreamweaver is similar to using text in a word processor. However, the following points may be useful:

Paragraph and Line Breaks

If you wish to end a paragraph and start a new one, simply press Return or Enter. There will be a blank line between paragraphs.
If you wish to simply go to the next line, hold down the Shift key while you press Enter. The cursor will move to the beginning of the next line. Alternatively, you can enter a line break (available from the insert menu and from the objects palette.)

Fonts, Styles, and Formats

From the Property Inspector or the Text menu, you can choose specific fonts, styles and formats for your text.
You can apply styles and formats before you enter text, or highlight the text after and select the style you wish to use.
Selecting Default Font means that the text displayed will be the default text set on browsers displaying your web page. Times New Roman, Arial, and Courier are the standard fonts for all browsers. Please note: if you choose an odd font, such as Old English Text, it is not likely to be displayed on all browsers.
To change the font style, click Bold or Italic on the Property Inspector or choose a font style from the Text menu. Underlined text is not recommended for web pages because people will mistake underlined text for a link.

Size

To increase or decrease the size of your text, choose a size from the Property Inspector or the Text menu. 3 is the size for default display on all browsers.

Color

Changing the color of the text overrides the default colors set under Page Properties (see Getting Started).
To change the color of the text, highlight the text and either click on the color box on the Property Inspector or choose Color from the Text menu.

Alignment

To align text, select the text you wish to align and click on the appropriate button in the Property Inspector (Left, Center, or Right).
To align text in columns or rows, see Creating Tables.

Indent and Outdent

To indent or outdent text, click on the indent or outdent button on the Property Inspector.

Horizontal Rules

Horizontal Rules are used to partition one section of text from another.
To insert a horizontal rule, position the cursor where you want the bar to be placed. Then select Horizontal Rule from the Insert menu or click on the Horizontal Rule button on the Object Palette.
You can specify the height and alignment of the horizontal rule using the Property Inspector.

HTML and CSS Style Sheets

You can also control the presentation of text using HTML Styles and CSS Style Sheets. A style is defined as a collection of display attributes that a web designer defines. The style is given a name and then can be applied to any text in the document.
HTML styles allow you to apply a defined style to any text in the document, using the HTML Styles pallete.
A CSS style sheet, or "Cascading Style Sheet" is used to define styles for an entire web document, allowing for document consistency. When the styles defined for the style sheet are changed, all instances of that style are updated for all web documents using that CSS style sheet.
For more information on using HTML styles and CSS style sheets, consult the reference materials available at the Digital Media Center.

Creating Tables

Tables are a powerful tool used in web design to display data in an organized manner. There are three basic components to a table: rows, columns, and cells (the intersection of a row and column.)

To insert a table:

Place the cursor where you want the table to appear in your document.
Click on the Table button on the Object Palette or choose Insert > Table. A dialog box will appear.
Set your desired table settings in the dialog box.
1. Specify the number of rows and columns for your table.
2. For cell padding, specify the amount of space (in pixels) between the cell content and the edge of the cell.
3. For cell spacing, specify the amount of space (in pixels) between each table cell.
4. Specify the width of the table in pixels or in a percentage of the browser window.
5. Specify the border size. Enter 0 if you don't want a border.

To add elements to a table:

To add text, images, or other elements to a table, simply click inside the cell in which you wish to add something and begin typing, paste text that you've copied from another location, or insert the image. For more information on inserting images, see Images.
Use the Tab key to move forward cell by cell in the table, and Shift-Tab to move backward.

To change table properties:

Select the entire table by moving the cursor over the table until it becomes a quad-arrow and click the mouse. Then use the Property Inspector to change settings for the entire table.
You can play with additional table settings, such as table and border colors, by clicking on the bottom right arrow on the Property Inspector.

To change cell, column, or row properties:

Use the mouse to select a row, column or cell. Rows and columns are selected by moving the mouse over the top of a column or left margin of a row and clicking when the selection arrow appears. Cells are selected by clicking inside them.
Use the Property Inspector to change settings. Horizontal and vertical alignment chooses the alignment of the cell contents. If the No Wrap box is checked, data will not wrap within a cell.

To resize table elements:

To resize the entire table, select the table and drag one of the selection handles. This will change the size of all the table cells.
To resize individual cells, rows, or columns, select the element and drag the selection handles.
You can also manually set column width and row height in the Property Inspector. (Which is worth doing if you want consistency, or if you want to be able to more systematically change the width and height settings.)

Using Lists

Lists are used in web layout to organize textual information. There are two kinds of lists in web pages: Bulleted (Unordered) and Numbered (Ordered.)

To use bulleted lists:

Click on the Unordered List button on the Property Inspector. A bullet will appear on your page from which you can begin typing.
Enter your text, then press Return or Enter to go to the next bullet.
When you've come to the end of your list, press Return twice or deselect the bullet button on the Property Inspector to return to normal text format.
You can also create a bulleted list by highlighting the text you wish to be bulleted, then clicking on the bullet button.

To use numbered lists:

Numbered lists work the same way as bulleted lists, but are generated using the Ordered List button from the Property Inspector.

To create a List-within-a-List (Nesting):

To nest lists, first create the main list.
When you wish to start the secondary list, click the Indent button on the Property Inspector. When you are done with the internal list, outdent by clicking the Outdent button .

Images

To insert an image:

Place the cursor where you would like the image to be inserted
Select Image from the Insert menu or click on the Image button on the Objects Palette.
A dialog box will appear. Find the image you wish to insert, then click Open.
You can alter the shape and size of the image by clicking on it and manipulating the handles, or entering values for W and H in the Property Inspector. However, to prevent blurring and minimize file size, it is much safer to edit and resize your image in an image editor such as Photoshop. For more information on working with images in Photoshop, see our Photoshop Guide.

To use alternative text (Alt):

The Alt attribute for images (in the Property Inspector) specifies alternative text for the image incase of text-only display in the browser or if the image does not display.
It is a good habit to designate alternative text for all of your images to make your website more accessible. For example, automatic readers for the blind will use the alternative text; some people choose to turn images off, so the alternative text will tell them what they are missing.
Alternative text need only be a simple textual description of an image. For example, enter "tree" for an image of a tree.

To change image properties:

You can play with various image properties in the Property Inspector while the image is selected.
Align changes the image alignment in relation to text.
Border sets a border around your image.
Link makes the image into a link. For more on links, see Links & Anchors.

Links & Anchors

There are four types of links you can create in Dreamweaver:

Internal Links link to other pages in the same Web site. For more information on sites, see Putting your Site on the Web.
External Links link to documents outside of a local website.
Email links (or mail-to links) open an email form.
Named Anchor Links jump to specific places within one document.

To create an internal or external link:

First type out the text or insert the image you wish to have linked and select it.
For an external link, type in the URL in the Link window on the Property Inspector. You can also copy and paste the URL from another location.
To create an internal link, click on the folder icon next to the Link window and browse to find your desired page or file from your web page folder.

To create an email link:

An email link opens a new message window with the linked email address using the web program set with the user's browser.
To create an email link, select the text you wish to link.
Choose Insert > E-Mail Link, or click on the E-Mail Link button on the Object Palette.
In the dialog box, type in the email address.
Click OK.

To create a named anchor link:

Named anchor links jump to "anchored" places within one document. They are especially useful for creating a Table of Contents for a long web page.
Creating anchor links is a two-step process: creating an anchor and then linking to it.
1. Creating an Anchor
  - To create an anchor, place the cursor at the location in your document you wish to link to.
  - Choose Insert > Named Anchor.
  - Insert the anchor name and click OK. You have now created the anchor.
2. Linking to an Anchor
  - Select the text you wish to link to a named anchor.
  - In the Link field of the Property Inspector, type a number sign (#), then the name of the anchor . For example: enter "#top" if you wish to link to an anchor named "top."

Site Accessibility

Previewing in a Browser

Before you put your site up on the web, it is a good idea to "test" your site in several different browsers to make sure your pages function as expected. To do this:

Go to File > Preview in Browser and select the browser you wish to preview your pages in.
Be sure that your pages look and work as expected. You may want to check for differences in layout, color, font sizes.

Size and Download Time

It is useful to keep in mind that large pages and pages with heavy image content can take a long time to download, especially with slower internet connections. Long download times cause frustration and discourage users from viewing your site. To check size and download time:

Look on the bottom bar of the document window. The size and estimated download time of the page appears.
Download time is based on the connection speed entered in the Status Bar panel of the Preferences dialog box. To set connection speed, go to Edit > Preferences > Status Bar. Keep in mind the target audience for your site when choosing a connection speed. In general, use 56 for modem connections. For network connections, choose a higher connection speed.
If the download time is more than twenty seconds for your targeted connection speed, you may want to consider reducing the size or image content on your page.

Link Check

When you preview your page in a browser, you should also check to see that all of your links are working correctly. Do this in the browser by clicking on the links, then using the browser's "back" button to go back. You can then fix the faulty links back in Dreamweaver. Dreamweaver also allows you to check and fix broken links in an entire site using the Site > Check Links Sitewide option. This checks for orphaned files (files not linked to any page) in your site as well.

Validate Your HTML

To make sure that your HTML conforms to standards, use a HTML validator such as the W3C's validation service: http://validator.w3.org/

Further Assistance

Since this helpsheet aims only to give a basic introduction to Dreamweaver, it does not cover some of the more advanced appliactions of the program, such as setting up templates, controlling the graphical presentation of the page through layers, integrating java-script elements such as mouseovers, and so forth. If you are interested in further applications of Dreamweaver, other webdesign software, or need help putting up your site, ask the Digital Media Center staff for assistance or browse our reference collection of web-related guides. For more on graphics, HTML, and other topics, please see the Digital Media Center's Online Guides.

Fondren Library

Sections