Home arrow Graphic Design arrow Page 7 - 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 Site-Wide Find/Replace
(Page 7 of 7 )

Dreamweaver is a Web application development tool. When you use Dreamweaver, you will be working on one document at a time, but the whole site should be your focus. One feature that you may find very handy is the Find/Replace dialog box.

Find/Replace has become a standard feature in most computer programs, and one of the most often used features, as well. One thing you might not be aware of, however, is that in Dreamweaver you can do the searches on a site-wide basis. This makes it especially handy for changing something that is on every page in the site, such as a color.

The Find/Replace dialog box has several unique features that bear mentioning.

Find In

This drop-down list gives you several options for finding text and code within your site:

  • Current Document This is a standard search in the currently open document.

  • Entire Current Local Site This option allows you to do a site-wide search and replace.

  • Selected Files In Site This option allows you to select multiple files in the Site window and restricts your search to certain files.

  • Folder This option allows you to do searches on any folder on your hard drive. In effect, it turns Dreamweaver into a powerful search-and-replace tool that you can use outside of Dreamweaver.

Search For

This is a drop-down list that gives you four options for items you may want to search:

  • Source Code This option allows you to search throughout the source code of your page—scripting, server-side code, tags, and actual text all fall under this category. In short, if it’s in the document in any form, you can find it with this option.

  • Text This option narrows the search to the actual text that is viewable on the page. For instance, if you want to search for the word “color,” but you don’t want to match the instances of the word in the HTML, you could use the Text option.

  • Text (Advanced) This option allows you to refine your search to text that is contained within certain tags or outside of certain tags. Further refinements and several other options can be accessed by clicking the plus (+) button.

  • Specific Tag This option not only allows you to search for specific tags but also to search for attributes within those tags and even set the attributes for a tag site-wide. For example, if you want all <td> tags to have a mouseover attribute set to a certain function, you can do it here. Or, if you want all <font> tags with a size of 2 to have their size attribute changed to 3, you could do it with this feature.

Options 

The options for the Find/Replace dialog box are shown as check boxes and are as follows:

  • Match Case This allows you to match only those words that match the case exactly, so “font” wouldn’t match “Font.”

  • Match Whole Word This allows you to match only the entire word, so that a search for “rich” would not find “Richmond.”

  • Ignore Whitespace This allows you to do searches where spaces, line feeds, and tabs have no effect on the outcome of the search.

  • Use Regular Expression If you know how to use regular expressions, you can take advantage of the powerful RegExp features of the Search/ Replace dialog box. For example, to search for all instances of items contained within quotes, you could use the following RegExp, which searches for a quote and then finds all characters up to and including the next quote character that it finds:

"[^"]*"

If you were to search the source code of your document, and the document contained the tag

<table width"100%" border"1">

your search using the preceding regular expression would find two matches:

"100%"
"1"

What to Take Away from This Module

You should now know a few things about creating navigation schemes. You learned some of the generally accepted principles of site design. The Site Map was used in a project to show you a method of developing a graphical representation of your site, while at the same time creating the links for the site navigation. Some of the collaboration techniques available in Dreamweaver were outlined, including the use of design notes. Finally, the Find/Replace dialog box was explained.

Module 6 Mastery Check

  1. Will the Site Map feature of Dreamweaver work without a home page?

  2. How are design notes stored in Dreamweaver?

  3. Does Dreamweaver’s Find/Replace feature work outside the site you are currently working on?

  4. Do all the files in your Site window show up in the Site Map?

  5. What is a regular expression?

  6. Name two site design no-nos.

  7. What are some questions you need answered about your target audience?

  8. What collaboration features help make sure that team members do not overwrite each other’s work?

  9. Page load times should be limited to about ______________ on a 56K modem.

  10. What is a translator?

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.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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