Session 2: Dreamweaver Setup

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. 2. 3. 4. 5.

From the menu items located at the top, choose Site > Manage Sites  In the Manage Sites window, click on New and choose Site  Fill in the dialog box(es) beginning with Local Info  Enter a site name (this can be anything you would like just to recall the site)  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 pub blic_html follder not alw ways visible,, yet root.  ew Folder (   Mac) or Fille > New Fo older (Win))  2. Choose Site > Site Filess View > Ne T me of the folder and preess Return   or Enter  3. Type the nam  

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 within n 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, b but  there is p potential off misplacingg files when using this m method.  Th he 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 

Create your own name formatting style 

     

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     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.