General comments about Dreamweaver

Dreamweaver is a WYSIWYG web editor (What You See Is What You Get). That means that as you create your web documents using this program, you see (more or less) what the page will look like on the web. Dreamweaver is created by a company called Macromedia, which has also produced other products, noteably Fireworks (for creating web graphics), Flash (for creating animated graphics) and Director (for creating interactive CDs and websites).

All web editors let you create web documents, in which you enter text, do formatting of the text, and add graphics. However, underneath the editor's main menus, it is creating HTML coding, the coding used on most web documents since the web creation in the early 1990s. HyperText Markup Language consists of various tags which tell browsers (such as Internet Explorer, Netscape or Opera) how to display the information on the web page. If you want to look at the HTML coding produced by Dreamweaver, you can, but when you first start to create web documents, it is not necessary.

Dreamweaver is not the only web editor in existence. It is the most common one used by University of Arizona webmasters. It is popular with beginning website creators and with more advanced users. Site managers who have worked with other editors often move to Dreamweaver, since it is able to read existing HTML documents. But importantly for people who have created other web documents, this program does not change HTML coding (the coding that tells browsers how to display information).

Getting started

Dreamweaver is a product designed to help you create a website, even if this site is a couple of documents. Therefore, the first step you need to do is to create a folder on your local computer where your website files will be kept. My recommendation is that you put your site (where your site files will go) on some drive with sufficient space, and don't try to put the site files where the actual Dreamweaver program is installed. The examples that I will reference in this class assume I have created a folder called school-gardens off of the root of my C: drive, but you can use other drives on your local computer.

Once you have created a folder (or directory) on your hard drive to save your web documents (and graphics), you can load/open the Dreamweaver program.

It is hard to predict exactly what your screen will show the first time you load Dreamweaver MX 2004. On a newly installed program, the first window that appears asks you to select your preference for the workspace arrangement. The screen captures in this class assume you have selected the Designer mode, which is the default.

The next screen that appears provides options for opening recent documents, creating a new document, and defining sites. An example of a screen display is shown below. The list of documents recently opened, on the left part of the boxed area below, will vary, since it depends if any Dreamweaver documents have been opened on the local computer.

On a new installation, no website has been defined for Dreamweaver MX 2004 to work with, and the "files panel" on the right will not be referencing any site, which is what is showing in the above screen capture.

If you have worked with Dreamweaver MX 2004 on creating a site, or someone else has done so on the same machine you are working on, then files associated with a site may be showing in the "files panel" area. In the next section of this lesson, you will learn how to define a website for Dreamweaver MX 2004, which is the first thing you should do.

Defining a website area

The specific examples here have to do with the structure of one of the College of Agriculture's servers. If you are working on another server, you need to check with the system manager about the actual folder structure used on that server (if there even is one). The organization of servers is not the same.

There are two parts for defining a website. The first part tells Dreamweaver where your files will be kept on your local computer. The second part tells Dreamweaver where your files will go on the remote server.

	There are various ways to define a new site. One way is to select Site from the main menu in the Document window, then New Site. Another way is to click on the link Manage Sites, shown in the screen capture to the left.
	The window shown to the left appears next. This lists sites which have been defined on the local copy of Dreamweaver. This display here shows no sites. Click on the button New and select Site to start the definition process.
	Dreamweaver brings up this display to the left with tabs for Basic and Advanced. The tab Advanced presents several questions at once, and is shown in this written document. The video Defining a Site in Dreamweaver illustrates the screen questions for both Basic and Advanced tabs. You can use either option you prefer.

At a minimum, before you begin to create your first page, you need to fill out the Local Info options. You can only fill out the second part (Remote Info) if you know where your files will be on the server you will put the site on.

• For the site name enter a descriptive name. This name should mean something to you and others working on the site. It does not have to be the folder (or directory) name on the server where the site will end up, but the names could be the same.
• For the local root folder enter the specific folder on your hard drive where the first level of your site will be placed. You can use the browse icon to navigate to the folder on your local computer. In the above screen capture, the local folder is c:\school-gardens. The name you use for the site name and the folder name can be the same or they can be different. Just remember that folder names for Unix systems using the Apache operating system (like the CALS server) can be long, but cannot contain spaces. Nor should they have any punctuation other than an underscore or a dash.
• Leave the box checked for Refresh Local File List Automatically. This means that as files are added to your folder, the display of the files will appear in the "site listing."
• There is a box for the default images folder. We will not be addressing images until Lesson 4. If you just plan on a few images on your site, you can keep all your images and the web pages in the same folder. However, if you plan to have a lot of images on your site, it could be useful to have images in a separate folder. In this example, I have created a folder called images which is underneath the school-gardens folder. The folder with images, if you use one, should be within (or underneath) the main folder area.
• The window for the HTTP address indicates what will be the URL for the initial web page when the site is put on a server. This information is used primarily for link management, and it is not necessary to enter it right now, if you do not know the URL. However, later, once you decide where your site will reside, you need to edit and update this information.
• Leave the box checked for Enable Cache

If you do not know where your files will be stored right now, on what server or where on the server, skip this next section for now.

The Remote Info part of the Site Definition display tells Dreamweaver where specifically the files will reside on the remote system, i.e., the server you will be working with. The examples here relate to working with the CALS server. For other servers, you would need to contact the system manager.

• Change the Access to FTP by selecting this option from the drop down listing. FTP stands for File Transfer 
  Protocol. You will be using this protocol to put files on the (remote) server. Note: not all servers support FTP access. This is something you will need to find out from your system manager on the server you are using.
• The FTP Host is cals.arizona.edu (for the College of Agriculture server).
• The Host Directory is the part where you need to know exactly where the folder/directory is located on the particular server. In this case it is /usr4/school-gardens/. This is not necessarily the URL. It needs to be the exact path and folder (directory) for your website. For example, for some people with files on the CALS server, this can include a folder of /html/. The folder name you show here must be the actual folder area where the site is found (which in most cases would be lower case letters on the CALS server). This folder area must either be set up by the webmaster or by the owner of the folder area, if your folder will be a subset in an existing folder.
  If you use the temporary area set up for class members, on the CALS server, the folder would be /usr4/dreamweaver_projects/your-last-name
• The Login is your username for the server.
• The Password is the particular password for that username. Notice it does not display here in the window. Be sure to check the Save box. This will speed up posting of files from your local computer to the server site.
• There is a button labeled Test. After entering all the information for the remote site, including username and password, if you have an Internet connection on your computer, you can use this button to test your connection (to make sure your username and password are okay for the indicated folder).

Click on the OK button to save the site definition information. You should see a display of your local site on the right side of the general display. If your local folder has files in it, then these files will display on the right side of the window.

The list of files on the main display

Once you have defined two parts of your site (the Local Info and the Remote Info), you need to pay attention to what view is displaying in the list of files. Either the Local view or the Remote view can be selected from the drop down listing. If you have multiple sites defined on your local copy of Dreamweaver, you can also select which site you are working with. Although you can have multiple sites defined, you would only work with one site at a time.

Creating a simple document

There are various ways to start a new document. You can select the option of Create New HTML on the Start Page, as shown below. You can also click on File on the menu bar, then Basic Page from the left category list, and then HTML for the type of page.

A blank document area will appear, as shown below (and in the video Typing Text).

You may find it useful to turn off the display of the files to the right (the site file listing) as well as the Property inspector area at the bottom. Go to Window on the top navigation bar and click on Hide Panels to get a full document screen to work with. You can turn on the panels again by going back to Window, and clicking on Show Panels.

As this class progresses, you will be spending a lot of time working on the document panel area, because that is where you do the work of creating your web document(s). For now, create a simple document describing yourself, your project, or your class. Type a single line header for your page, then a couple of paragraphs. For now work with this page as you would a simple word processor. We will cover changing traits of the text (font styles, color, spacing, etc.) in Lesson 2.

Notice that, when you are in the document area, when you press the Enter (or Return) key, you get a blank line between the items. Dreamweaver is creating paragraphs for you, with the appropriate HTML coding. One habit you may need to break as you work with Dreamweaver is pressing the Enter key automatically, since you do not always want to create paragraphs (which by default have a blank line between them). For example, you may want to create a simple list, as in showing contact information (name, address, phone, fax, email). Also in Lesson 3, we will cover different types of special lists. For now, however, if you do not want a paragraph but simply want to go to the next line, click on Insert from the main menu and select Special characters, and then Line Break (or hold down the Shift key while you also press the Enter or Return key). The Line Break option puts a different HTML code that eliminates the space if you create a "paragraph." The use of the line break command is shown in the video Typing Text.

Other Dreamweaver windows

When you are working with your documents, you can choose to display other windows. (They may already be showing on your machine.) For example, select Window from the main menu and there are two popular choices at the top: Insert and Properties. If the option has a checkmark in front, it is displaying on your screen. Try turning these on and off, to see how it affects your workspace display.

In these lessons, we will use the Properties panel extensively, and the Insert panel some. (Note: the Properties panel/window can also be called the Property inspector in Dreamweaver documentation.) You can choose to display these two panels of information, by turning them off and on as needed.

Saving and opening existing documents

After you have the start of a web document in the document area, you can click on File, Save to save the current document. You can also use File, Save as to save it under a different name, if it has a name already.

My general advice when making filenames (as well as folder names) is to use single word names, even though the word can be quite long. Filenames should also not contain any punctuation marks other than an underscore or a dash. Use of single words for folders and filenames is a protocol followed by most servers, particularly servers using the Apache operating system. Just stop and think about web addresses you have seen advertised on TV or in magazines. They are always single words (although parts of the server name are separated by dots). For the filename itself, you can use either an extension of .htm or .html. Just be consistent in what extension you use for your files. For more information and examples of filenames and folder names, see this supplemental document.

Use File, Close to exit the current document but not exit Dreamweaver. Once a file has been closed, you can open it from the list of files display (on the right side of the document window) by double-clicking on the file name in the Local View display. Or you can use from the main navigation menu, File, Open as you would in other programs.

Adding a title to your document

As mentioned earlier in this lesson, Dreamweaver is creating for you the HTML coding needed to make this document a web page. There are two parts to a web document:

the head of the document contains special coding to identify the document for browsers. This information is also used by search engines. An important item in the HEAD area is the TITLE or TITLE TAG; there are also metatags in the HEAD area. We will talk about metatags in Lesson 6, but for now at least you need to give a TITLE for your document.
 

the body is the larger part of the document, normally. It contains the text and images that people see when they look at your web page.

The title tag is not the same thing as the filename. The filename is restricted to one word (on many servers, certainly Unix computers such as the CALS server). The title is very important because it is a short description of the content of the web page or its main purpose. If your document is found in search engine inquiries, the information in the title tag is displayed (rather than the filename). The title is also what becomes the text on the bookmark, if someone bookmarks your web page in their browser. The title should be short but concise, and it should be unique (that is, you do not want multiple documents in your site to have the same title information). The most important words should be first.

These are example titles from web documents in University of Arizona web space. Some are good titles for the document and others could be improved.

• Arizona AgNIC: Range Management
• Development and Alumni       my comment: whose development? whose alumni? at least at the University of Arizona there are many different college and department alumni and development offices.
• Home Page       my comment: whose? (I found several variations of this on University of Arizona websites) Such a title would not make a meaningful bookmark, would it?
• Arizona Student Unions | Commuter Student Affairs
• Residence Life at the University of Arizona
• The University of Arizona Press: Fall 2002 Books
• Ways you can learn about HTML

There are a couple of ways to add a title to your document. In the top of the document area of the main display, there is a line showing the title of the active web document.

In the above display, no title has been given to the document. You can highlight what is currently in this "title area" and type in a title.

Another way to add a title to your web document is to click on Modify on the main menu, then select under the Category Title/Encoding to see this display showing below. Type in a short title in the appropriate window. (We will talk about other options for Page properties later in the class.)

Adding title tags is demonstrated in the video Adding Title Tags. The title (tag) is a particular code in your web document. The information in the title tag may be the same as the "main heading" that you can see on a web page, or it could be different.

Seeing your HTML code

A web document is made up of content (largely text and graphics) and coding that tells the browser how to display the content. The code is called HTML. With Dreamweaver MX 2004 there are three icons at the top of the document area for changing how your document displays.

The icon labeled Code on the left, if selected, shows the HTML code being used to create your page.

 

The icon labeled Split in the middle splits the screen, so you see the HTML code at the top and the display of the document on the bottom.

 

The icon labeled Design on the right shows the display of the document, as it more or less would appear on the web. This is the option you will probably use most of the time, at least when you start using Dreamweaver as a new user.

Viewing your page

Although the Document panel window shows the display of your active document, in some cases you will not actually see exactly how the page looks in a browser. Click on File from the main menu and select Preview in browser. Dreamweaver will open your browser (probably either Netscape or Internet Explorer) and show you the file as it would look in that browser. You can also quickly do this by pressing the F12 function key, on a Windows machine.

Posting files from within Dreamweaver

If you have completed both parts of the Site Definition--the Local Info and the Remote Info--you can use Dreamweaver to put files on the remote system. It is NOT necessary to use this feature. You may be creating web pages and then giving those pages to someone else to put on the server you are using. Or you can use other programs such as WS_FTP (for Windows and NT machines) or Fetch (for Macs). There are also some servers which don't support FTP, but have another program built into the server used for placing files on that server.

If you want to use Dreamweaver to post files on a server, be sure that you have selected the correct site (if you have more than one site) and that you are looking at the Local view.

In the files listing in the right part of the display, click on the Connect button/icon to connect to the server you are using. If you are using a modem connection, you would need to turn the modem on. Once you have connection to the remote site, you can look at files by selecting Remote view or Local view. You cannot actually see the files on the remote server or post files to the server if you do not establish connection to the server. Some servers may leave you connected for a long time; others may disconnect you after several minutes of inactivity.

Select a file in the Local view by clicking once on the filename. Multiple files can be selected by holding down the ctrl key on a Windows machine (or the Command key on a Macintosh) as you click on multiple filenames. If you have connected to the server, using the connect icon, click on the Put icon to put the selected files on the server. You are actually putting copies on the remote server.

Posting of files through Dreamweaver is demonstrated in the video Uploading Files to Your Server using Dreamweaver.

During the Site Defintion process, for the Remote Info, you already entered into the Site Definition your username and password, so the remote server will check to make sure you are authorized to put files in the indicated folder or directory on the server. Some of the directory areas on the CALS server (or any other Unix computer) are set up so only one person can update or change files. Other directory areas are set up for multiple people. This will not be an issue for the class exercises and projects, since you will be the only owner and poster to the folder area. But later if you work on a site with others, you will need to make sure permissions are set up to allow multiple people to edit and change files.

Posting through Dreamweaver on an XP machine with the Service Pack 2 upgrade

In August 2004, Microsoft released an upgrade to the XP operating system called Service Pack 2. Among the features in this upgrade is a firewall installed on the local computer, to help protect it from "attacks" from outside programs you don't want on your computer. However, this firewall also blocks connection to and from other computers, such as an FTP server.

If this firewall from Service Pack 2 has been installed on your computer, and you try to connect to your server to use Dreamweaver for posting (and getting) files, you will see probably this type of message appear. If you want to use Dreamweaver to post and get files from your server area, you need to pick the option of Unblock. On future sessions this warning will not appear, if you select Unblock.

Online help

These lessons are aimed at beginning users of Dreamweaver. There are many items in the menus and windows not covered here. However, there are a variety of tutorials created by Macromedia that you can use, if you wish. Under Help on the main menu is a link for Getting started and Tutorials that have been installed on your computer. Check these out if you wish.

There is also various online help under Help, Using Dreamweaver which provides links by broad topics, an alphabetical index of help messages, and the ability to search by terms. Feel free to explore some of these options if you are curious about menu items we are not covering.

This document was part of a series of lessons on Dreamweaver Basics for the 2004 release, given by Linda Ffolliott, College of Agriculture and Life Sciences at the University of Arizona.