Core Dreamweaver Skills and Solutions, Made Easy
Dreamweaver MX 2004 Solutions was created for results-oriented Dreamweaver users who seek practical instruction on everyday techniques and speedy resolutions to persistent problems. Author/instructor Ethan Watrall applies his effective, no-nonsense teaching style to each of this book's dozens of step-by-step solutions, demystifying the most vital and potentially troublesome topics.
Beginners can walk through the full gamut of tasks, while seasoned users can dip in and quickly find answers to specific questions. Whether you're a web designer or developer, a graphic designer or project manager, this book will get you to the heart of the discrete skills you need to construct impressive web pages with Dreamweaver.
Learn the ins and outs of Dreamweaver MX 2004, including how to:
- Build good-looking, sensible tables and frames
- Save time with templates, library items, and digital assets
- Handcraft HTML and XHTML code
- Make full use of the Tag Inspector, Tag Chooser, and Tag Library
- Design sophisticated forms for collecting user information
- Effectively manage your site with Site Window and Site Reports
- Extend Dreamweaver with extensions, custom shortcuts, and commands
- Establish database connections for ColdFusion, ASP, ASP.NET, JSP, and PHP
- And much more...
Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.
|Product dimensions:||7.40(w) x 8.85(h) x 0.91(d)|
About the Author
Ethan Watrall is a visiting faculty member in the Department of Telecommunications at Indiana University, where he teaches several web design classes. He is also a trained archaeologist and he author of Dreamweaver MX Design & Technique and Flash MX Savvy.
Read an Excerpt
Dreamweaver MX 2004 Solutions
By Ethan Watrall
John Wiley & SonsISBN: 0-7821-4299-0
Chapter OneThe Path to Harmonious Web Usability and Design
Preparing Your Site Designing Effective Web Pages Getting from Here to There: Developing Intuitive Navigation
The fundamental issues you need to address when you're designing your website are relatively universal (at least when it comes to interactive design): you need to create something that fulfills the needs of your audience. Even the most insignificant of interactive creations is usually intended for a wider audience than just the designer. As such, there are some extremely important issues you should consider during the creative process.
Preparing Your Site
When creating a website, you should spend as much time and effort in the predigital production process as you spend in the actual production process. The predigital process includes everything that must be done before you create a single line of HTML-from choosing your look and style to developing textual content. When you're creating a website of any complexity, there are a lot of things to keep track of. The best sites out there are an artful mix of technology, design, and usability that haven't been slapped together over a weekend. Instead, they've been created with a great deal of thoughtful predigital planning and preparation.
In the following sections, you are going explore several topics that fit into the predigital production process: information design and architecture, developing a visual metaphor, and creating storyboards and concept art.
Note: Before diving into this chapter, it's important to remember that the information that will help you become a master of interactive design can hardly fit into one chapter. Heck, it can't even fit into a single book (or a stack of books for that matter). The whole point of this chapter is to provide you with tools, guidelines, and advice that will empower you to start thinking about the necessity of efficient and elegant interactive design. In addition, the chapter should act as the foundation upon which to further your own exploration of the topic. So, if you are already versed in the principles of interactive design and are looking right away for specific solutions in Dreamweaver, you may want to skip this chapter.
Creating Your Site's Information Design and Architecture
Information architecture is the organization of a website's content into easily accessible components that support a wide variety of user access techniques (casual browsing, direct searching, and so on). As one would expect, information architecture is intimately related to the navigational system of a site. You'd have a difficult time designing one without the other.
Note: This section of the chapter is designed to be a simple introduction to information architecture. Extra resources are a must. You might want to seek out Louis Rosenfeld and Peter Morville's Information Architecture for the World Wide Web (O'Reilly, 1998). If you are interested in extending your search to the Web, check out the Argus Center for Information Architecture at argus-acia.com.
At its most basic, the process by which you develop a site's information architecture is usually a two-step affair. The first step involves organizing your site's information into a variety of categories. You need to decide how many sections, subsections, and categories you need; how your site's content will fit into those categories; and how the units of information (individual web pages) will relate to units of information within the same category and to units in other categories. This is arguably one of the most difficult things about designing a site. The way we human beings organize information is largely determined by our cultural context. As a result, what constitutes well-organized information is subjective. One must contend with all manner of problems, such as linguistic ambiguity (a word or term may mean different things to different people) or different perspectives of how information should be organized.
As with many other issues in web design, the way you organize information will depend largely on your audience. You must put yourself in their shoes and predict the best way to develop an information architecture so that your users' needs are met. Developing a way to organize your content can often be a fairly painful process, but it is absolutely necessary in developing a functional and usable information architecture.
Once you've decided how to organize your information, the second step requires you to formalize the structure you created with something called an information architecture diagram (IA diagram). Designed to provide a visual representation of the information architecture of your site, an IA diagram can take many different forms (see Figure 1.1). Ultimately, the specific style is up to you.
An IA diagram isn't supposed to show the links between various pages within your site. Instead, it represents the hierarchical relationship between sections/subsections and individual pages.
So, what is the big deal about creating an information architecture diagram? Well, there are a couple of things to consider. First, if you are working in a design group or making a proposal to a client or a boss, an IA diagram allows you to communicate the structure and information flow of the site to other people. Second, a well-designed IA diagram provides you with a blueprint of the site's structure that you can refer back to during the production process.
Note: Am IA diagram is also very useful for developing the structure of your site on the server (folders, subfolders, and so on).
Developing a Visual Metaphor
A visual metaphor is often a pretty slippery concept to put into words, but it can be easy to unconsciously interpret when it's used properly. A visual metaphor, which is universally applied to an entire website, leverages familiar visual elements (such as images, interface elements, icons, colors, or fonts) to unconsciously reinforce the site's subject matter. The visual metaphor for a major Hollywood movie's promotional website will be completely different from that of an interactive design firm or an online merchant.
For example, in the screen shot depicted in Figure 1.2, the goal was to create a website for the Arizona State Institute of Human Origins for an online exhibit that would explore human evolution from our earliest ancestors to the emergence of Homo sapiens. Because of the archaeological theme, the website used an earthy palette of colors consisting of shades of brown, gray, rust, dark green, and tan combined with archaeologically oriented design elements to visually reinforce its content.
Creating an effective visual metaphor requires some serious brainstorming and inspired free association. You need to sit down and think about what kinds of colors, fonts, images, icons, and interface/layout elements unconsciously reinforce the site's content.
Note: Before you even begin brainstorming for your visual metaphor, be rock-solid sure of your audience. You can't effectively design a visual metaphor if you aren't exactly positive of the demographic profile of those who'll be using the site.
Say, for example, you are creating a children's online community site geared toward ages 7 to 10. You might think about using bold primary colors with cartoony interface elements and fonts. On the other hand, the website for a movie would draw its visual metaphor from the film's look and feel (check out the Planet of the Apes website at planetoftheapes.com for a great example).
There are no hard and fast rules for creating a visual metaphor. The only real guideline is that they should be used wisely: be subtle and don't overdo it. Always have your ideas vetted by individuals not associated with the project; they will often have suggestions or comments you never thought of. Don't get too attached to a visual metaphor because it's quite possible that, given an outside opinion (perhaps one of a prospective user), you'll decide that it doesn't work for your site.
Conceptualizing a Site's Layout and Design with Storyboards
One of the most important steps in the paper and brain predigital production process is creating storyboards or concept art, an idea swiped from the film industry. Generally one of the last steps before you go digital with your grand creation, storyboards are used to visualize your design as a complete entity. With them, you get a chance, among other things, to see how colors interact with one another, how interface elements play off one another, how your navigational system is realized, how your visual metaphor plays out, and whether content is represented in the best way possible. Storyboards provide you with a painless way of catching any potential design problems before you get to the stage where you build your design in HTML and they become major obstacles. Storyboards are also a great way to play with design ideas and visually brainstorm.
As illustrated in Figure 1.3, there is no hard-and-fast rule as to how they should look. If you are brainstorming ideas, the back of a cocktail napkin is as good a medium as any. However, if you are preparing a pitch to a potential client, it's a good idea to come up with something more polished and formal. The bottom line is that storyboards, in whatever form they appear, should efficiently communicate your design ideas without too much ambiguity.
You may even want to create your storyboards in a photocopy of an empty browser window. This is a great way to give your client the necessary context. A browser template for the purpose of storyboarding has been included in the Chapter 1 folder of this book's companion CD.
Designing Effective Web Pages
The whole point of a website is that it's composed of a series of individual pages that are linked together. While designing the website as a whole is the ultimate goal of good web design, you need to give special attention to the pages within your website, and, more specifically, how those pages fit into your site as a whole. Today's browser technology allows users to view only one page at a time, so the pages within your site are the way the user interfaces with your site. The user doesn't really browse a site; they browse pages that make up a site.
Let's explore some of the key characteristics of creating a well-designed and usable web page-minimizing response times, writing for the Web, and creating usable links. It's very important to remember that what's covered in this section of the chapter is just the tip of the iceberg. You can use the information as a set of guidelines upon which to base your own design process.
Minimizing Response Times
One of the other fundamental issues for page design is response time, also known as download time, which is the amount of time it takes for a page to totally download after a user has clicked the link or typed in the URL.
Although you will need to balance visual design with response time, the guideline is "the faster the better." Unfortunately, even with Internet connections getting faster and more and more people getting access to high-speed connections, we won't be getting sub-second response time anytime in the near future. Even with the fastest Internet connections, it still takes time to download a web page. As a result, the current goal for response time should range from 5 to 8 seconds. Anything more than that and the user will generally become bored and leave the site.
Note: When you start working with Dreamweaver MX 2004, you'll discover that the Document window's Document Size/Download Time indicator is a great way to get an idea as to the size (in kilobytes) of your page and how long it will take to download over a specified connection. However, for reasons that will be covered shortly, knowing the size of your page is hardly a guarantee as to the length of time it will take to download.
Beyond a fast response time, you also have to strive for low variability in your response time. The satisfaction of a user is partially based on their expectations as well as the actual response time performance.
When it comes to response time, if the same action sometimes happens fast and sometime slow, the user won't know what to expect and, therefore, won't be able to adjust their behavior to optimize their use of the system. If people assume that a page will download quickly, they'll be disappointed when it doesn't. In extreme cases, the variability in response time might prompt the user to think there is something wrong with the web page, their browser, or even their computer. Say, for example, a user visits a website and for the first five or six pages they visit, the response time is a respectable 6 seconds. However, when they visit the seventh page, it doesn't download in 6 or so seconds. In fact, after 25 seconds it hasn't downloaded. Now, it's entirely possible that the page itself is very large and it needs a long time to download. However, the user doesn't know this. They are forced to sit there, twiddling their thumbs, wondering whether their browser has had a nervous breakdown. They might even get so frustrated that they point their browser elsewhere. It's for all of these reasons, and more, that you should do your absolute best to keep response time variability to a minimum.
There is, however, a factor that contributes to response time that is completely out of your control. Response time (as well as the predictability in the response time itself) is determined by the weakest link in the chain from server to browser. So, the time it takes for a page to download is determined not only by the size of the page itself, but also by the throughput to the server, the server's connection to the Internet, the Internet itself, the user's connection to the Internet, and the rendering speed of the user's browser and computer.
So, given these issues, what can you do to minimize response time (and variability in response time)? Here are some suggestions:
When you create your web pages, always try to keep their size as small as possible (given your design needs and the page's contents). It's important that you realize that there isn't an "ideal" file size that you need to hit. Instead, the size of your page should be based on your audience. For example, if the site you are creating is targeted toward an audience that you know will have fast Internet connections, you can employ media that uses more bandwidth. However, if your audience is accessing the Web with slower connections, you need to optimize your site so that it can be easily accessed.
If you have a page whose contents make its file size much larger than many of the other pages within your site, use strategies to provide the user with feedback about the loading process. For instance, if you are working with Flash, you can use a preloader to indicate the amount of the file left to load. In HTML, when you are working with particularly large images, you can use Low Source images (for more information on Low Source images, see Chapter 4 "Working with Images").
It's always important to constantly test your web pages. By doing this, you can get an idea of any cross-browser or cross-platform compatibility issues, but you can also get a "realistic" idea of response time by uploading your site to a server and then testing it on different connections.
Excerpted from Dreamweaver MX 2004 Solutions by Ethan Watrall Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
Table of Contents
Chapter 1 The Path to Harmonious Web Usability and Design.
Chapter 2 Laying the Groundwork.
Chapter 3 Communicating Effectively with Text.
Chapter 4 Working with Images.
Chapter 5 Creation and Care of Hyperlinks.
Chapter 6 Laying Out Tables and Frames.
Chapter 7 Using Templates, Library Items, and Digital Assets.
Chapter 8 Adding Multimedia.
Chapter 10 Formatting with CSS and Layers.
Chapter 11 Managing and Publishing Your Site.
Chapter 12 Handcrafting Code in Dreamweaver.
Chapter 13 Extending Dreamweaver.
Chapter 14 Collecting User Information with Forms.
Bonus Chapter 1:Working with Dynamic Databases.
Bonus Chapter 2: Using Dynamic Data and Applications.