Workspace and Tools

Dreamweaver provides a graphical working environment for creating web pages. The document window looks similar to the way the completed web page would look. The document window is the main editing window.

New Documents can be created by selecting File > New.

Opening documents for more editing: File > Open and select the file. Double clicking the document will not open Dreamweaver, because HTML files are readable by many different programs. (i.e. Netscape, Dreamweaver, Internet Explorer, etc.)

Formatting Text: Click in the document window and type your text. Use the Text menu or Properties Inspector (see below) to format text.

Save Documents Often in the Local Root Folder/Directory: Choose File > Save to save changes.

  • The location of saved files should always be the local root folder which should be set-up when you defined the site on your disk.
  • Save Often in the Local Root Folder/Directory or sub-directory inside the Root Folder: Choose File > Save to save changes.
  • Name your lead web page document index.htm and link all other site web pages to it.
  • Name all other connecting web pages with a short lower-case name, (no spaces or special characters) ending in the .htm extension, i.e. resume.htm, syllabus.htm, assign1.htm
Sample Document Window

Picture of document window

HTML Code: The tags (<body><blockquote><font> ) on the bottom left of the document window are the HTML tags created by Dreamweaver. The web page is really a series of text documents coded with tags called HTML (Hypertext Mark-up Language). Web browsers read the HTML code to display the page. You can create a page without knowing HTML in Dreamweaver, but you can also edit the HTML by clicking on the HTML Source button on the Launcher (right lower corner of document window.)

Screen Size: The recommended size for web pages is 600x300 (640x480 screen with the browser opened and maximized). Click the screen size at the bottom of the document window to see preset sizes for browser windows. Not everyone has a large monitor, so designing to the lowest common denominator of your audience will increase the number of people seeing your page correctly.

File Size and Download Time: 30K / 30 sec. is a reasonable size for a web page. The bigger the page gets the longer it takes to load in a web browser. In the illustration above, the Download Size/Time statistic is a running tab of how big the document is and how long it will take for the page to fully load in a web browser over the Internet. The calculation is based on the Dreamweaver setting in the Preferences found in the Edit menu. Clicking Edit > Preferences > Status Bar allows the web author to set the slowest common connection for their audience. (i.e. 28.8 modem)

Properties Inspector

Select Window > Properties to view the Properties Inspector if it is not visible. Highlight text in the window to see available properties to apply to it. Items such as lists, indent, font, font size, text color, bold, italic, link and heading options are available in the formatting properties inspector (pictured below)

Formatting property inspector Properties Inspector illustration

For other properties, highlight other items such as images, tables, or links and their properties appear as in the image properties inspector (pictured below).
Image property inspector Properties Inspector illustration

Launcher

 Launcher Toolbar

Select Window > Launcher to view the Launcher toolbar. The launcher is an optional set of short cuts to various functions of Dreamweaver. It is mirrored in the lower right corner of each Dreamweaver document.

Objects Palette:

Select Window > Objects to view this palette. The floating object palette parallels the Insert menu. Clicking the drop down arrow by Common at the top of the object palette will provide choices of:

  • characters (symbols not easily available on the keyboard)
  • common items (images, table,etc.)
  • form items (to create web forms for collecting information)
  • frames (to create multiple web pages set into one web page view)
  • head (metatags for searching by search engines)
  • invisible tags (comments, anchors, line breaks)

Learn the what the symbols mean by rolling over each with the cursor. A label will appear. If you prefer to use the Insert menu all the same options are available.

Object Palette Other Objects Available Insert Menu Equivalents
Objects toolbar






 

 

 

 

 

 

 

Back to Dreamweaver Tutorial