Web Design - El Centro College
 
HTML More HTML JavaScript Design Dreamweaver Fireworks Flash Photoshop More Info Home
 

Creating The Site Map

Opening Dreamweaver - Site Window - Folders & Files

Site Definition (General) - Site Definition (Local) - Site Definition (Remote) -

Site Definition (Site Map Layout)

 

You now have an idea of how your page and site will look visually, now it's time to create the physical site layout.

Resist the temptation to click file. . . open. . . new. . . and type away!

The site "organizer" is called the site map. By defining a site you will be able to keep track of all the files in your site.

The site map is similar to a tree - we start at the roots and branch out from there. The start of it all is the root system - and we will start by setting up a root directory in Dreamweaver. We'll soon branch out from there!

Let's get started!

Starting with Dreamweaver. . .

  1. Click the START button…
  2. Move up to PROGRAMS…
  3. Highlight Dreamweaver and click…

Before coding, we will set up our site map:

  1. On Dreamweaver's menu bar, click on SITE or press F5…
  2. From the pull-down menu, select NEW SITE
  3. If you are modifying, adding to, or viewing a previously created site, select OPEN SITE.

You should have the Site Definition window on the screen.

OPTION: You can also open your site from the launcher in the lower right hand corner of the Dreamweaver document window.

Return to the Top

Site Definition Window

What do the Site Definition Window menu categories mean?

  • Local Info - location for files on the local computer or disk. More on this later…
  • Remote Info - location of files on the remote computer - your host. More on this later…
  • Design Notes - electronic "post-it" notes
  • Site Map Layout - diagram displaying your local site & icon labels… More on this later…
  • File View Columns - the look of the site files

Local Info

Site Name - descriptive title for your site, used by you internally in Dreamweaver

Local Root Folder -

  • click the yellow folder (at the end of the field)
  • browse to the location where your site will be stored ( "a" for your disk)
  • create and name a folder for your site
  • click the SELECT button (lower right corner)
  • select/highlight the location for your website folder/files. Create a new folder if needed.

Refresh Local File List Automatically - check this box

HTTP Address - If your website has a URL, type it in. You can leave this blank and fill it in later.

Enable Cache - check this box

Click OK.

An site cache alert box will appear. Click Create. . . OK. . . then Done on the next screen.

At the Define Sites window, click Done. You are now at the Site Window.

Return to the Top

Remote Info

The remote site screen provides information on how to transfer your files from your disk (or your local site as defined in Local Info) to the host providing space for your site.

Access Menu -

  • None - you dont't have a host
  • Local/Network - pages will be on the same network as you are currently on
  • SourceSafe and WebDAV - specialized servers
  • FTP (File Transfer Protocol)

If you select FTP:

FTP Host - fill in as instructed by your web host. Format is ftp.domain.com

Host Directory - fill in as instructed by your web host. If unsure, leave this blank.

Login - fill in as instructed by your web host.

Password - fill in your web host password

Enable File Check In and Check Out - used with teams

When finished, click OK.

An site cache alert box will appear. Click Create. . . OK. . . then Done on the next screen.

At the Define Sites window, click Done. You are now at the Site Window.

Return to the Top

Site Map Layout

The Site Map will display a diagram of your pages and how they are linked to each other.

Home Page - Leave blank

Number of Columns - how many WebPages/files can be displayed in a row in the site map.

Column Width - how many pixels wide a column should be.

Icon Labels -

  • File Names displays the file name (ex: index.htm)
  • Page Titles will display the page title (My Favorite Holiday)

Options -

  • Display Files Marked as Hidden - display or not display hidden files in the site map
  • Display Dependent Files - display or not display dependents in the site map. (ex: images)

When finished, click OK.

An site cache alert box will appear. Click Create. . . OK. . . then Done on the next screen.

At the Define Sites window, click Done. You are now at the Site Window.

Return to the Top

Site Window

The Site Window is your Dreamweaver manager - "command central". Whenever you rename, delete, or move a page/file - Dreamweaver will update the links to that page/file.

Once connected to the remote server, the left side of the Site Window lists the files located on the remote web server. The files listed on the right side of the Site Window are located on your local drive.

File

  • open, view or edit your files and folders
  • same menu options are available by right-clicking
  • rename - rename a file
  • new folder - create folders within the local site
  • read only or locked file & turn off read only
  • set as home page - reset the homepage

Edit

  • file and folder editing functions
  • establish site preferences

View

  • refresh site
  • showing dependent files - displays how pages are linked together

Site

  • define sites - chose new or edit to define a new site or open an existing one.
  • set as home page - when highlighting index.htm, this allows you to establish index.htm as your homepage
  • reports
  • check and change links sitewide
  • synchronize - to insure the local and remote site match

Window

  • open the Site or Map view

Help

File Icon - view file structure in left panel

Site Map Icon -

  • view site map in right panel
  • create links to new files via drag & point to file icon
  • remove and change links between files
  • locate broken links

    The Site Map can be opened further by clicking through the plus (+) and minus (-) signs to open and close linked files.

    Saving Your Site Map as an Image - select FILE/SAVE SITE MAP with the SITE MAP viewable. Locate the file you wish to save the image to and save as a .bmp.

Site Menu

  • Lists all the sites that you have set up.
  • Click the pulldown menu arrow to highlight the desired site
  • Click DEFINE SITES to open the DEFINE SITES window - where you can add, remove, and edit your site information

Connect/Disconnect

Click to connect and click again to disconnect to the remote server

Refresh

Get/Put Files

  • Put your local files on the remote server.
  • Get files from the remote server.

Check Files In/Out

Collapse/Expand Triangle

Located in the lower left corner, allows you to collapse or expand the site window to display one or two panes.

Return to the Top

Local Site Folders & Files

Let's set up your local site files. First we will create the index page.

  1. To make a new file, right-click on the Root Folder, select New File, and name it index.htm.
  2. You can add new folders to the Root Folder in the same manner.
  3. You should create all your folders and files at this point, even if they have no content.

Once the folders and files for your site have been created, click on the file and it will open in the Dreamweaver document window - this is the starting point to creating your page.

Definitions:

  • File - your web page
  • Folder/Directory - container that holds your files and objects (images)

Pressing ESC on your keyboard will stop whatever Dreamweaver is doing!

Return to the Top