Dreamweaver Pointers

Tips on Organization Before Building a Web Page

• File and folder names
• Use lowercase for file and folder names.
• Avoid beginning a file name with a number.
• Don’t use spaces in your file and folder names, as they are not recognized by web browsers.  If you use a space in a file or folder name in Dreamweaver, it will replace the space with the characters “%20” instead.
• One word titles will make it easier to find and navigate your files and folders. 
• Use easily recognizable names that describe the file or folder well (bad examples are: "doc1.html", "picture.gif", etc.).
• Always back up your files, both before and after you create your site.  You never know when you may need them.
• File management and organization:
• Categorize your files and place them into folders (example: if you have many pictures, separate them by type.  Place all pictures of roses into a roses folder, etc.  Alternately, you can organize your images according to the site page they’ll be used in.  The most important thing to remember is to organize them in such a way as to make them easy to find and link to.)
• Keep your folders organized. The more organized you are in the beginning, the more efficiently you’ll be able to work.  Having a desktop cluttered with your folders and images will slow you down and make finding important files more difficult.

How to Organize Your Web Page
We’ll begin by creating a root directory.  Your root directory is a folder that will eventually contain every file needed for your web site.

1. Creating a root directory

• First, you’ll likely need to create a new folder which you will make your root directory.  To do this, right click (or hold the “Ctrl” button and click for Mac users) on your desktop or inside a folder and select “New>Folder” on PC…
  

…and for Mac, select “New Folder”.

• Name your folder, and remember its name and location.  This is your new root directory. 
• Inside your root directory, create a folder for all your images and multimedia content (video and audio files, etc) clips, and folders for individual pages within your site.  Later, when you set this folder as your root directory in Dreamweaver, the file browser on the right hand side of the Dreamweaver window will display your root directory and the folders it contains as a sort of file tree, or hierarchy, of your site and its pages.
• Now copy any images, documents, and media files into their appropriate folders within your root directory. 

2. Creating a home page

• Open a new document in Dreamweaver by clicking File in the upper left corner of the menu bar, and then “New Document” (or use the keyboard shortcut Ctrl+N). 
• Under FILE in the menu bar (in the upper left corner of the Dreamweaver window), select the SAVE AS option.  Navigate to the file you created as your root directory, and save the blank document as "index".
• Next, click on the SITE section of the menu bar, and select MANAGE SITES.  Click “New Site”.  You may either use the Basic Site Definition option, which will guide you through the process of setting up your site step by step, or you may select the advanced tab to set up your site manually.  


• Under the “Local Info” category, you can name your site (in the field entitled “Site Name”). Then under the local root folder category, you can either manually type in the location of your root folder, or you may click on the folder icon to browse for its location.
  


• Next, go to the SITE MAP LAYOUT category and enter the location of your home page. This should be where you just saved "index.html”.
• You can now edit and save your web page normally.

Resources

Dreamweaver Tips

1. Creating links
1. Don’t change the names of the files in your root directory or move them to different folders, as your links are dependent on file name and file location. 

• Make sure you include a link back to your main page on each section of your site.
• When adding a link outside your web site (which would be any file or page not in your root directory), include the entire URL (such as "http://www.google.com").

2. How to Construct Your Web Page
1. The Basic Web site

• Type text as if it were a word document
• To modify your text (ie, change the font or size) use the TEXT menu.

2. To insert images, click “Insert>Insert Image” on the menu bar along the top of the Dreamweaver window.

• To insert any special graphics, such as a rollover image or menu created in a program like Fireworks, or a flash movie, click on “Insert” on the menu bar, and select the appropriate choice.

3. When modifying an element on your web page (such as a block of text, a flash file, a table, an image, etc…), click on the element and its properties will be displayed in the properties window along the bottom of the Dreamweaver window. If the properties window isn’t displayed, click on “Window>Properties" on the menu bar along the top of the Dreamweaver window.

3. Helpful Things to Know
1. Use tables to organize elements on your web site

• When you insert a table, reduce its border width to zero to make it invisible.

2. The "Objects” window has many useful shortcuts, including "insert an image" or "flash text".

• If you can’t see the "objects” window, click on “Window>objects" on the menu bar along the top of the Dreamweaver window to make it appear.

3. To change the colors of your links, text, background and title of your web site, click on “Modify>Page Properties”.
4. Make sure you title your web site; this is the default name when your site is added to bookmarks or favorites.
5. Sometimes it’s difficult to know exactly what you have selected in the Dreamweaver window; the best way to find out is to look at the properties window, which will display the name and properties of your current selection.

4. Making the Web Page Public: Putting up the final web site on the server
1. Before you upload your files on the server, create a new folder outside your root directory. In this folder, move your independent files from your root folder to this new folder. (Example: any word documents you used as sources that are not a part of your web site or any images you didn’t use should be moved out of your root folder)
2. Click on “SITE>MANAGE SITES” on the menu bar. Select “EDIT”.
3. Click on the “REMOTE INFORMATION” category and select "ftp access" Enter your server info (provided to you by your department).
4. Once you’ve defined your site, click DONE
5. A window will open with your local information on your right. Click “REFRESH”

• “REFRESH” should connect; if it doesn't, click “CONNECT”. If you cannot, then the “Remote” information you entered may not be correct.  Double check the information you entered and try again.  If this doesn’t solve the problem, contact your department Technical Support person for assistance.

6. Highlight all of your files and select “PUT”.

5. Maintaining and Managing a Public Web Site
1. Updating your web site

• Any files that you change, such as html pages you have added or altered, should be updated.
• To update your pages, go to WINDOW and select FILES. Your site information will show up. Click REFRESH or CONNECT.