Home arrow Graphic Design arrow Page 4 - Planning the Site
GRAPHIC DESIGN

Planning the Site


This article features a step-by-step guide to working with the Site Map to create the basic outline of the site so you can visually framework your site and the relationships between the pages. Also learn how Dreamweaver makes it simple to ease into server-side work. (This is from the book Dreamweaver MX 2004: A Beginner's Guide, McGraw-Hill, ISBN: 0-07-222996-9, by Tom Muck and Ray West.)

Author Info:
By: McGraw-Hill/Osborne
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
July 13, 2004
TABLE OF CONTENTS:
  1. · Planning the Site
  2. · Establish the Purpose of the Site
  3. · Make Basic Site Construction Decisions
  4. · Add Pages to the Site with the Site Map
  5. · Understand Basic Design Concepts
  6. · Use Collaborative Development
  7. · Use Site-Wide Find/Replace

print this article
SEARCH DEVARTICLES

Planning the Site - Add Pages to the Site with the Site Map
(Page 4 of 7 )

The design of your navigation scheme goes hand in hand with the site design you consider using. But as you begin to consider your site’s navigation, it is appropriate to start sketching out the pages you will need to create for the site. Start with the home page and begin adding pages in your drawing and indicating links. Tools such as Microsoft’s Visio and Rational Rose can assist in this process. You will be amazed how much more quickly your site will come together when you have planned the pages that make it up and how they connect to one another.

Site Map Layout

After creating the general navigation concepts for your site, you can use Dreamweaver’s Site Map to help in the process of building the pages and links. The Site Map can even be saved as a PNG or BMP file so you can open it up in your image editor.


Answers to Progress Check

  1. Navigation links across the top and navigation links along the left side of the page
  2. No, there is no built-in conversion capability. This should be taken into consideration before site construction begins.
  3. Five


The Site Map is a visual representation of the linking in your site. For instance, if you have a home page with links to six pages, the Site Map will show the home page with six arrows pointing to the six files that the home page links to. Each link in those six pages will have a corresponding arrow pointing to pages that the link points to. The Site Map Layout dialog box contains these following attributes to help define the Site Map:

  • Home Page This is your site’s home page. You can either fill in the complete path or browse to it by clicking the folder icon. The Site Map won’t work without having a home page defined.

  • Number Of Columns This is the number of columns in the top level of the Site Map. For instance, if you have a home page that links to five pages under it, you might set Number Of Columns to 5.

  • Column Width This is a number between 70 and 1,000 to define the width of each column in the Site Map. If you make your columns wider, you will be able to fit more items in each group, but you may have to scroll left and right to see the whole map.

  • Icon Labels These two radio buttons are labeled File Names and Page Titles. You can choose one or the other for the label of the page on the Site Map.
  • Options These two check boxes allow the following:

      • Display Files Marked As Hidden Allows you to display pages such as template files, which are generally hidden from view.

      • Display Dependent Files These are files that may not be linked to a page but are dependent on the page via a form action or some other means. This box allows these pages to be shown as well.

The Site Map

Module 4 allowed you to create the site definition for the eFlea site. In this project, you’ll add some blank pages to the site by using the Site Map. The Site Map is a good place to create your files and links. Module 4 listed several ways to add pages to a site, but this project will allow you to work with the Site Map to create the basic outline of the site. The Site Map allows you not only to add pages but to create the navigation scheme as well.

Step by Step
  1. Open Dreamweaver and make sure the current site is the eFlea site set up in Module 4. The site should be blank at this point, or it may contain a few files that you have been practicing with.

  2. Open the Site Definition dialog box again. You can do this by clicking Site | Edit Sites and then clicking Edit on the resulting dialog box to edit the eFlea site definitions.

  3. In the Category box, select the Site Map Layout option. This will bring you to the following page:

  4. Set the Number Of Columns option to 1. This will be the width (in pages) of your Site Map. As you become more familiar with the program, you’ll find that there are settings that work well depending on how your navigation is set up.

  5. If the home page hasn’t been defined yet, type index.asp (or index.jsp, index.cfm, index.aspx, or index.php, depending on your server model). If the page doesn’t exist yet, Dreamweaver will ask if you want to create it. You can click OK to do this.

  6. After a few seconds, the Site Map will open with the new index.asp page displayed in the center.

  7. Right-click (CONTROL-click on a Macintosh) the index.asp page in the Site Map. This should bring up a list of options, as shown here:

  8. Click Link To New File, and another dialog box will pop up asking for three things, which you should fill in as follows:

    • File Name search.htm

    • Title Search eFlea

    • Text Of Link Search page

  9. Do the same thing (from the index.asp page for each one) for register.asp, login.asp, buy.asp, and sell.asp.

  10. Open the index.asp file now and take a look at it. It should have the five links at the top of the page for the new pages you’ve set up. More importantly, the five pages have been created with titles, and the navigation scheme has been roughed out. It may change later, but now you can open the index page and be able to browse any of your other pages from there by clicking a link.

  11. Now look in the Site window (not the Site Map) and create a new file there by right-clicking and selecting New File. Call it test.htm. You’ll notice that it doesn’t show up in the Site Map.

  12. Go back to the Site Map and select the index page again. You’ll notice a small globe-shaped icon next to it. Click this globe and—holding the mouse button down—drag the line it creates right to the test.htm file and drop it on the file. This will create a link on the index page to the new test.htm file. You’ll also notice that the test.htm file now shows up in the Site Map.

Project Summary

The Site Map provides a good way to visually framework your site and the relationships between its pages. You may find it useful to describe the pages you plan to include in your site and how they will link together by using the Site Map early in the site-creation process.

This chapter is from Dreamweaver MX 2004: A Beginner's Guide, by Muck and West (McGraw-Hill/Osborne, 2004, ISBN: 0-07-222996-9). Check it out at your favorite bookstore today. Buy this book now.


blog comments powered by Disqus
GRAPHIC DESIGN ARTICLES

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials