Getting Started with Dreamweaver

Professionals use It

Because Dreamweaver is a powerful editor program, you will want to learn it a little bit at a time. This page will give you a brief introduction to Dreamweaver and give you a few guidelines for using it. As you get experience with Dreamweaver, you'll develop additional skills, and soon you'll be a Dreamweaver guru.

IMPORTANT: When you create a new page, save it to your project folder before you add text or graphics to it. This will allow Dreamweaver to correctly set up relative links to pages and objects in your project.

	The Menu Bar
	The Tool Bar
	The Status Bar
	Panels
	Defining Your Site
	Creating a New Page
	Entering Text & Images into Your Page
	Views of Your Page
	Layout Tables & Cells
	Alignment Tables

The Menu Bar

The Menu Bar contains the commands that Dreamweaver gives you for control of the program. Take a moment to briefly look at the menus to get an overview of the program.

The Tool Bar

The Tool Bar contains icons that allow you to switch between the design and HTML code views, specify the Title of your page, preview your page in your browser, obtain tutorial reference information about HTML (even though Dreamweaver is a WYSIWYG editor, it allows you to powerfully work with HTML), and control certain aspects of your view of the page.

The Status Bar

At the bottom of the window is the Status Bar. The bar has a Window Size field that allows you to reformat your view of your page for common browser resolutions. Next to that are download statistics so you can predict how long your page will take to download. At the right of the Status Bar is a mini-launcher for running certain functions provided by Dreamweaver.

Panels

Rather than having additional tool bars below the main tool bar, as most Windows programs have, Dreamweaver has "floatable panels" that can be moved to any desired position on your monitor screen.

Notice that the Properties panel is visible on your screen (if it isn't visible, click on Window and then on Selection Properties). This panel contains the properties of the object that is selected on your screen. For example, it might be showing the properties of your XHTML page. If you were to click on a picture that has been inserted into your page, the panel would change and show the properties of the jpg file. This panel is a very useful feature of Dreamweaver. In the lower right corner of the panel is a small icon that looks like a triangle. That icon allows you to control how much information is displayed in the panel.

Another useful panel is the Object Panel. This panel allows you to insert common objects, such as images and tables, into your page. If this panel isn't visible, click on Window and then on Objects.

Defining Your Site

In using Dreamweaver to complete your web project, the first thing you should do is define your site so Dreamweaver will know how to access it. Click on Site in the menu bar and then on Define Sites... and then on New. The Local Info tab should be selected; if not click on it to select it. Give your site a name of your choice and then put the hard-drive path to your project folder in the Local Root Folder field; do not use a http web address as the path.

If you are using a Westminster College computer for your development, you will publish your pages on your W: drive by using Windows Explorer to drag your files from your project folder to your W: drive. You will not need to put any information in the Remote Info tab. However, if you will be using an off-campus web server, you will probably be using ftp to publish, and you will need to click on the Remote Info tab, select ftp and enter information about your server and your login account.

Creating a New Page

When you start Dreamweaver, it will come up with a blank page that you can use for one of your site pages. If you want to create another page, click on File and then on New. The Properties Panel will display the properties of the page. Do the following to prepare your new page for use in your web site.

Right-click anywhere in the white space and select Page Properties... Enter a title for your page in the Title field. This title will be visible in the Title Bar of your page. Change, if you wish, the following page properties to give it the appearance that you desire.

	Background graphical image and/or color. If you use a background image, you should also use a background color that approximates the overall shade of the image. The image may take a few seconds to download, while the color will be seen almost instantaneously and will improve the appearance of your page until the image is displayed.
	Default text color.
	Link colors (three colors).
	Top and left margins. Set both Left/Top margins (used by Internet Explorer) and margin Width/Height (used by Netscape). The values are in pixels.

If you want the default font properties to be different, change the font and size properties in the Properties Panel.

Save the page in your project folder. It is important that you save the page before you put text or images in the page so Dreamweaver will set up correct relative links from the page to other pages or images.

Entering Text & Images Into Your Page

Think of your new page as a blank sheet of paper. You can enter text into the page, and you can set the properties (such as a particular font) of particular words or phrases by highlighting that text and changing the properties in the Properties Panel. Similarly, you can insert images into the page and set the properties of the pictures and icons.

Views of Your Page

Dreamweaver allows you to view a web page in two ways, Standard and Layout. The Standard View allows you to view a page from the perspective of a word processing program, while the Layout View lets you view a page from a desktop publishing viewpoint. The Standard View is easier to use than the Layout View, but it gives you less control over the positioning or layout of text and images. The two Views are selected via the icons at the bottom of the Objects panel.

Standard View

In the Standard View, you begin with an empty page. You enter text and images into the page, but they are entered from the top to the bottom of the page. If, for example, you want to place an image in the middle of the page, you will have to enter enough text (either readable text or empty lines via the Enter key) to move the keyboard cursor down to the middle of the page. That is, you can not insert the graphic and then drag it to a desired position (use the Layout View to do that). The Standard View is convenient to use when your page has lots of text. You can enter the text without having to create "cells" to hold the text.

Layout View

The Layout View allows you to enter text and images anywhere on the page. You can easily drag the text and images to new positions. When you select the Layout View, the two Layout icons that are immediately above the View icons are enable. These icons let you draw layout tables and layout cells. Layout tables consist of rows and columns, and the intersection of a row and a column is a layout cell. Layout cells contain the text and graphics that are in the page. In the Layout View, your page becomes a grid of cells. You can change the position and size of the cells, thus controlling the position and size of the images and blocks of text that you can place in your page.

Layout Tables

By clicking on the Layout Table icon, you can draw or place layout tables in your page, either in empty portions of the page or inside other layout tables. Then you can place layout cells inside the tables.

A common practice is to create one layout table that will be used as your page. All text and graphics that go into the page are placed in layout cells inside the layout table. Because you can control the width of the table, you can control the width of your page, thus eliminating the "stretching" and "contraction" of pages that occurs when browsers of different resolutions are used.

The XHTML for a layout table that is being used as the page looks like the following.

<html>
<head>
<title>A Page consisting of a layout table</title>
< /head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="765">
<tr>
<td>Text inside the page</td>
</tr>
</table>
</body>
</html>

The visible part of that page is all text and XHTML elements that are between the <body> and the </body> tags. Notice that only one object is in the visible part, a table that is delimited by the <table> and the </table> (the tr tag defines a row and the td tag defines a cell). Thus, as long as all text and graphics are placed in the table, the table will be the page because it contains everything. As shown in the XHTML, the width of the table (page) can be set to a desired value, in this case 765 pixels for use on a 800 x 600 resolution monitor.

Layout Cells

The Layout Cells icon allows you to place layout cells inside layout tables. You can, in fact, skip the creation of layout tables and just draw the layout cells, and Dreamweaver will create a layout table for you. To place several cells in your page, hold the CTRL key down when you click on the icon and while you draw the cells. If you don't do this, you will have to click the icon before the next cell can be drawn.

When you draw the first layout cell you will notice that the layout table is automatically divided into a network of rows and columns that intersect to create a network of cells. One of the cells will have the same position and size as your cell. You can change the size of your cell by clicking on an edge of the cell and dragging one of the handles; the network is automatically changed to create a cell having the new size and position of your cell. Similarly, you can drag your cell to a different position, and the network is changed to create a cell of the same position and size as your cell. Thus, you have quick and easy control over the layout of your page.

Alignment Tables

Besides being used as the structure for page layout, tables can be used to align groups of images and/or text. For example, a table consisting of one row of two cells could be used to align an icon in the right cell with text in the left cell. The table forces the two cells to be in a straight row. In the following example, the Border field is 1 so you can see the cell-structure of the table. CellPad (see below) is 10 to insure a small space between the text and the image.

Utah is famous for world-class skiing!

Alignment Tables in Standard View

To insert a table in a page being viewed in Standard View, do the following.

	Position the keyboard cursor at the point where you want the table
	Click on Insert in the Menu bar and then on Table
	Specify the # rows and # columns to be in the table. Also specify the width of the table. If you don't want a border around the table, change Border field from 1 to 0. The default of 1 gives a thin border. If you want a wider border, change Border to have a larger number.

To get the Table Properties right-click on either an empty cell or a cell containing text. Do not right-click on an image that is in a cell because you will get the image properties. You can align the table to be at a desired part of the screen, add color to the table, and add space between the cells and the edges of the table. To add the space, you can change the CellPad and CellSpace values. CellPad adds space between the cell and the border of the table. CellSpace adds a white-space border around the cells. If you have Border set to 0, the visual effect of CellPad and CellSpace is the same.

To be continued ...

	The Menu Bar
	The Tool Bar
	The Status Bar
	Panels
	Defining Your Site
	Creating a New Page
	Entering Text & Images into Your Page
	Views of Your Page
	Layout Tables & Cells
	Alignment Tables

[ Home ] [ Up ] [ Dreamweaver ] [ FrontPage ] [ Composer ] [ Word Processors ] [ Presentation Programs ]