Home arrow Graphic Design arrow Page 6 - 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 - Use Collaborative Development
(Page 6 of 7 )

In addition to the physical specifications of the Web site, such as server type, database type, and server language, there are other decisions as well. If more than one person is involved with the site design and implementation, you will need to decide on the workflow and who handles the different aspects of the site. A carefully thought-out plan designed in advance is going to eliminate confusion between the collaborators. If everyone’s task is spelled out—including the completion dates for each aspect—the process will be much smoother.

Design and Development

Dreamweaver is typically the development tool of choice for designing Web pages. If different people are doing the design and server-side programming, Dreamweaver makes it easy to work side by side and not interfere with each other’s workflow. Dreamweaver allows designers and developers to communicate well with each other, allowing for a collaborative development process.

Tip: Dreamweaver offers the capability to have more than one designer or programmer working on a site by using check-in and check-out features, as shown in Module 4, and including design notes in the site. By checking Enable File Check In And Check Out in the Site Definition dialog box, you enable this feature in your site. When a page is “checked out” by a user, it is marked as such in the site window, and it will be locked from editing by another user.

In addition to the collaboration features, Dreamweaver makes it easier for programmers and designers to work together because they can both work from the same program. The server-side code will be unobtrusive to the designer because most of the code will have translators that make the design environment easy to work with.

NOTE: A translator is a Dreamweaver extension that is able to take a section of code and translate it into something that’s meaningful to the developer. For instance, a translator for a recordset column translates the code into the readable format “{Recordsetname.columnname},” which shows up in the design environment.

Design Notes

One way to communicate with others on your team is by using “sticky notes.” These notes are typically pasted to the desktop or monitor of the person the note is intended for. Dreamweaver has its own version of the sticky note, called a design note. Design notes can be attached to any page in the site by using the Site window or Site Map.

The design notes for the site are stored in the _notes folder under your site root. The actual note file is an XML file with an .mno file extension that Dreamweaver will read internally. Each page that has a note attached to it will cause a file to be generated in the _notes folder on the remote site (and the local site). Here is a typical note:

Tip: Design notes are a great way to log changes to a page so that other people working on the site can follow what is going on. If everyone is religious about adding notes every time they make a change, the design process can be a lot smoother.

Design notes can be set to open automatically when you open a file. This is especially handy when working in a collaborative environment. If your teammate has made a change to the file, he or she can leave a design note attached to the page. You will be able to see the note the next time you open the page. This way, it is less likely that any changes in the page will be overwritten by another person.

File View Columns

Another way to use design notes is to create your own file view columns in the Site window. Clicking File View Columns in the Site Definition window allows you to configure the look of the Site window by enabling you to pick and choose the columns you are going to show, and even to define your own columns. For instance, you could have a Programmer column to show the name of the person responsible for a given page, or you could have a Date Due column listing specific due dates for pages. An Important Message column could allow you to place a short message that will be seen by everyone on your team when he or she opens the site. You can use your imagination and create columns that pertain to your own situation and add the appropriate design notes to each page.

This is done by defining your column with a column name and then associating it with a design note. When you create a design note, you can give the note a name/value pair that will cause it to show up in the column.

Tip: You can be creative with your file view columns. If there is anything you want to keep track of for each page, a file view column is a good place to put it.

You can add a new column by clicking the plus (+) button above the column list, or you can delete a column by clicking the minus (–) button. The up-arrow and down-arrow buttons allow you to arrange the columns in a particular order. The attributes associated with the File View Columns window are as follows:

  • Enable Column Sharing This check box enables the columns to be shared among users. In other words, the columns you see are the same columns the rest of your design team will see.

  • Column Name This is a unique name that will be the column heading in the Site window.

  • Associate With Design Note This is the name of the design note that the column will get its information from. For instance, if you have a design note named Important Message, whenever the Site window is opened, every page that has an Important Message note attached to it will show the actual contents of the message in the column.

  • Align This can be Left, Right, or Center and is the alignment of the data in the column.

  • Options There are two options:

    • Show Allows you to turn off certain columns if you don’t want them to show in the Site window.

    • Share With All Users Of This Site This check box determines whether the column is something that will be stored on the server for all users to see, or if it’s only to be seen on your particular computer.

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