Dreamweaver MX 2004 Tutorial

COMM/CISS 271

Advanced Web Design

Fall 2008 – Class Session #2

 

Instructor: C. M. Sturgeon
 P a g e  | 2 
 

Table of Contents 
Introduction .................................................................................................................................................. 2 
Dreamweaver Preferences ........................................................................................................................... 2 
Site Creation .................................................................................................................................................. 3 
Defining Your Site...................................................................................................................................... 3 
Managing Your Site ....................................................................................................................................... 4 
Creating New Folders / Files ..................................................................................................................... 4 
Moving Folders / Files ............................................................................................................................... 4 
Uploading to the Server ............................................................................................................................ 5 
HTML File Naming Conventions .................................................................................................................... 5 
 

Introduction 
 
Dreamweaver is a powerful web page creation and web site management tool.  
It contains numerous sophisticated functions that can be used to create professional quality 
web sites. Because of this, it is one of the most popular web authoring tools among web 
designers. 
 
This handout is designed to complement content that is presented in the Advanced Web 
Design class. The handout focuses on the basic and some intermediate information in order 
to assure that all in the class are up to the same speed in using this application. 
The handout is divided into several sections with a header dividing them. 
 

Dreamweaver Preferences 
 
One of the major changes that came about with version MX 2004 and up to CS3 is the 
intense use of Cascading Style Sheets (CSS) to format page elements and text. 
Cascading Styles can be extremely useful; however, beginning web designers may find the 
use of them confusing and or clumsy. 
 
If you prefer to not use CSS in Dreamweaver, you can follow the procedure below to “turn 
off” the option of CSS. 
 
Turn Off CSS Formatting: 
  Mac 
1.  Go to Dreamweaver > Preferences and choose General  
2. Uncheck “Use CSS instead of HTML tags” 
 
PC 
1.  Go to File > Preferences and choose General 
2. Uncheck “Use CSS instead of HTML tags” 
 P a g e  | 3 
 

Site Creation 
 
 
To create and manage a website in Dreamweaver, you must first “define” your site. 
Dreamweaver has built in tools for managing your site.  The beginning user might be 
tempted to ignore these tools and go straight to making a web page. However, after a little 
use, the power of these tools becomes apparent. To take advantage of this power, all pages 
should be created and accessed through the Dreamweaver Site Files Management Window. 
 

Defining Your Site 
 
1. From the menu items located at the top, choose Site > Manage Sites 
2. In the Manage Sites window, click on New and choose Site 
3. Fill in the dialog box(es) beginning with Local Info 
4. Enter a site name (this can be anything you would like just to recall the site) 
5. Click on the folder icon and Browse to and Select your local root folder 
 
 
 
 
You have now defined your site (local site) – within the same window,  you may now 
specify the web server where you will be uploading your web files. 
 
6. Select Remote Info  (on the left) 
7. Set Access to FTP 
8. At FTP Host, enter the address of your server (in this case leeu.edu) 
9. At the Host Directory, enter the name of the server directory (e.g. public_html) 
10. At Login, enter your account login name and password 
11. Click on the Test button – 
12. Click on OK in the site definition box 
13. Click Done in the Manage Sites dialog box 
 P a g e  | 4 
 

Manag
ging Your  Site 
 

 
Figure 1: Screen shot of Dreamweaver MX 2004 connected tto server 

Creatin
ng New Follders / File
es 
 

1. Select the follder at the ttop of the “L
Local Files” sside of the w
window (in the illustraation 
Figure 1) ; w
which would d be the pubblic_html follder not alwways visible,, yet root. 
2. Choose Site > Site Filess View > Ne ew Folder (  Mac) or Fille > New Fo older (Win)) 
3. Type the nam
T me of the folder and preess Return   or Enter 
 
 

Moving
g Folders /
 / Files 
 
You can easily movee files and fo olders within the “Site Files” wind dow 
 
1. Click, hold an nd drag you ur files and ffolders to an
ny new locaation withinn the “Local 
Files”  side of the “Site” w
window 
 
Draggingg and dropp ping your filles between n the local an nd server w
window is no ot difficult, bbut 
there is p
potential off misplacingg files when using this m method.  Thhe alternativ
ve method fo or 
attainingg files or uploading files is using th
he “Get” and d “Put” butto
ons.  These appear as aa 
green arrrow / blue arrow on th he toolbar aand on the riight side jusst above thee local files.
 
 P a g e  | 5 
 

 
Uploading to the Server 
 
With the proper settings, a correctly defined site and a connection to the internet, you can 
upload your files within Dreamweaver.  Dreamweaver has its own built‐in FTP function. 
There is no need to use a separate FTP application such as Fetch or WS_FTP. 
 
1. With your site window open, click on your connect button: 
This connects Dreamweaver to your web server. When successfully connected you 
should see content on both sides of your site window. 
2. Select your local root folder e.g. public_html 
3. Click the Put (up arrow) files button 
‐ You will be asked if you want to put (upload) the entire site 
4. Click OK 
 
 

HTML File Naming Conventions 
 
These are a few things to remember (rules of thumb) when naming html files: 
 
Rule / Suggestion  Explanation 
Avoid using upper case text  Unix and Linux servers are the most 
common for hosting sites.  This OS is case 
sensitive.  It is simpler for users to 
remember all in lower‐case than to try and 
recall what is upper and what is lower‐case. 
 
Don’t user spaces  Spaces within names are simply against 
standards of good file naming for the web. 
For example it is much better to have a 
name such as about_us.htm as opposed to 
using about us.htm.  A reason among many 
is because spaces are read by browsers and 
converted to %20 – just ask yourself if this is 
part of the name you want to give someone 
to “remember” as part your URL. 
 
Avoid using special characters  Special characters such as / & ; and periods 
will only cause trouble later.  Keep it simple.
 
Make sure your HTML file have the  You can use either .htm or .html ; however, 
appropriate extension  for your homepage (if on the LeeU server) 
name it with the complete .html (index.html)
 
 P a g e  | 6 
 

Keep filenames short  Users do not like to type out long URLs and 
the more letters, the better chance for a 
mistype, therefore not viewing your site. 
Keep the names of pages short such as 
programs.htm  
 
Create your own name formatting style  When naming files your folder can become 
confusing and the difficulties of finding html 
files emerges.  When naming files for specific 
purpose, it is good to have a style that helps 
you recall.  For example; pages on 
merchandise of some sort may be 
merch_toys.htm / merch_hats.htm / 
merch_cars.htm – note how they will all be 
alphabetically organized together making it 
simple to find the specific page sought after 
during the site building process.   
In addition, it is simple for those that may be 
viewing your site and detect the consistency.