Web Services

Setting Up Your Site in Dreamweaver

Introduction

Dreamweaver is the industry standard for designing and maintaining Web pages. There are many useful features of Dreamweaver that can make maintaining your Web page easy. We understand that learning to use Dreamweaver is a process that can be frustrating so we have developed this tutorial to help you through setting up a site and creating new pages using Dreamweaver.

Please Note: This tutorial applies to the latest version of Dreamweaver 8. Previous versions may vary slightly.  Examples are from Dreamweaver for Windows.  Mac Version may vary.

Gaining Access to the Campus Web Server

In order to work on a campus Web site and upload files to the Web server you must get permission to the directory in which you plan to access. You can do this by filling out the WWW Account Application form. Keep in mind that it may take a few days to get permission to the desired directory. Once permission is granted, you will have full access to edit and upload files.

Top

Creating a New Site

  1. Create New Site
  2. Site Definitions
  3. Defining Local Info
  4. Defining Remote Info
  5. View Files in Local & Remote View

Create New Site

The first step in working on a new Web site in Dreamweaver is to create a "New Site." To do this, open Dreamweaver and select Site > New Site... from the top menu:

New Site

Site Definitions

This will open up a "Site Definitions" dialog box where you will define all of the specifics of the new site:

Site Definitions

There are only two categories in which you are required to fill out when defining a new site: Local Info and Remote Info. The Local Info refers to the information about the computer on which you are working. The Remote Info refers to information and files on the Web server to which you will upload. It is important to recognize the difference between the two.

Local Remote Info

Defining Local Info

First, you will enter the Local Info for your new site. In the "Site Name" box  type "Website."  

Naming the site

Next, you will need to define the Local root folder. The Local root folder is a folder on your computer where your local copy of the files of the Web site will be stored and saved to while you are working on the site. Choose a location on your computer that is easy to remember and to where you feel comfortable navigating . A good place to have a Local root folder is in the "My Documents" folder on your computer. (Mac Users: A good folder to use is the "Sites" folder or the "Documents" folder.) To change the Local root folder click on the folder icon.

Selecting the root folder

This will bring up a dialog box. Click on the "My Documents" folder icon on the left side of the dialog box. You will need to create a new folder that will be used as the Local root folder inside of the "My Documents" folder. Click on the folder icon on the top of the dialog box to create this new folder. Name this new folder "Website":

Folder Named Website inside of MyDocuments

Double-click on the folder you just created and click the select button to select this folder as the Local root folder:

Selecting Website folder as local root folder

You have now selected your local root folder for your Web site.

There are six other sections of the Local info definitions for your new site. They should be defined as follows:

  • Refresh local file list automatically - Leave this checked
  • Default images folder - Leave this blank
  • Links Relative to - Site Root 
  • HTTP address http://www.csuchico.edu
  • Case sensitive links - Checked
  • Cache checkbox - Checked

The complete Local info definition dialog box should look similar to the following example once it is complete:

 Local info box

Defining Remote Info

Next, you need to set the Remote info site definitions. Click on the Remote Info category in the Site Definition dialog box. You have an option of how you will access the remote info in the form of a drop-down menu. Click on the drop-down menu and select FTP. FTP stands for File Transfer Protocol and is the way in which we send and receive files to/from the remote server.

Selecting FTP Under Remote Info

Selecting FTP will bring up a few new sections where you must fill out some required information. Enter the required information as follows:

  • FTP Host - www.csuchico.edu
  • Host Directory - /m3/webdocs/
  • Login - Your CSU, Chico login (This should be the same as your e-mail/exchange/portal login. For example if your e-mail/portal login is johndoe@csuchico.edu your Web server login should be johndoe. However, CSU, Chico faculty and staff who have been employed since 2004 may already have a separate Web server login name that is different than their e-mail/portal login name. If you are unsure whether you already have a Web server login name, contact User Services at 898-6000 or by e-mail.)
  • Password - The password associated with your login.

You have the option to save your Password so you do not have to enter that information each time you connect to the Web server. Only save your password if you are the sole user of the computer you are setting up. To do so, check the "Save" check box next to the Password field. You may also click the "Test" button to check if your information is correct. If the information is correct, Dreamweaver will connect successfully. Leave the other check boxes as they are. The Remote Info dialog box should now look as follows:

Remote Info Complete

Click the "OK" button. You should now see the Files window on the right side of the screen. By default, the Files window will show the Local View (the folder on your computer where Web site files are stored). This should look as follows:

Files Window

View Files in Local & Remote Views

You can choose to view the remote files (files on the campus Web server) by selecting Remote view in the Files window.

Switching to Remote View

Remote view shows all the directories (folders) on the campus Web server (You are able to view all directories on the campus Web server because there are certain files, such as style sheets or images, in directories other than the one you are working with that you may need to access). Selecting Remote view will change the Files window to look like the following:

Remote View

You can view local files and remote files at the same time by clicking on the expand button in the Dreamweaver "Files" window : expandButton

 Expanding the file window

Clicking the Expand button  button will expand the window so you can view the remote files and the local files side by side:

The expanded view in the files window

Top

Downloading/Uploading

Scroll down to the directory with which you wish to work. For example, if you were working on the English Department Web site you would scroll down to your directory to access it. You can access the contents of the directory you are working with by expanding the folder in the Remote view window. Click on the "+" to the left of the folder to expand the folder and view the contents inside. To download files and/or folders from the remote server simply select the folder/file and click the Download Button button.

The root folder of the Web site should now show up in the Local files window. All files/folders that you have downloaded will be inside of that root folder. Expand the root folder to view the sub folders and files which you downloaded. If you wish to download the entire Web site, select the root folder from the Remote Site window and click the Download Button  button.

Downloading a folder

To upload a file or folder from your computer to the Web server simply click on the file/folder in the Local files window and click the Upload Button button.

Uploading a file

You can also upload a file that you are editing simply by clicking the Upload Button button at the top of the page which you are editing and selecting "Put."

Put

Top

Getting More Help

If you would like more help, User Services offers training courses to CSU, Chico faculty and staff for Web site creation. If you are interested in signing up for one of these courses or for general questions visit the User Services Web site or call 898-6000.

Top