C.2 Site Construction Tasks
Constructing a successful web site requires a series of
steps to ensure both its visibility and
its effectiveness (often in regard to sales).
Define your graphics. Sketch them out so that you're not the
only one who can see what they look like. Be sure to get client
approval of the basic design before producing all your graphics.
Define your navigational system using navigation bars, frames, jump
menus, or something fancier such as Flash.
Design your directory structure and create a standard file naming
system. See Chapter 6 for more site-planning tips.
Define your site using Site  Define so you have easy access to
all your site's assets. (See Chapter 6 for
more details.)
Focus the development of your site on its primary goal (making money,
building community, or disseminating information) and not on dynamic
effects for their own sake.
Design templates for your site's pages (see Chapter 8).
Convert repetitive images, HTML, and links into Library items that
can be reused and updated across the site quickly (see Chapter 9).
Define CSS stylesheets for your site (see Chapter 10).
Use HTML styles to speed the application of text styles. (See Chapter 11).
C.2.1 Deployment Guidelines
You'll ordinarily preview individual
pages and your entire site in a browser using File Preview in
Browser (F12), not in Dreamweaver itself.
 |
Preview your pages as you develop them so that problems are spotted
early. Test early,
test often, test on all
target platforms in all target browsers (TETOTOATPIATB).
|
|
Hire a testing company or ask colleagues and friends to perform an
informal site check (ask them to report any glaring problems along
with their browser and OS versions). The Dreamweaver 4 CD-ROM
includes installers for the NN4.7 and IE5.5 browsers. You can
download others browser versions from the vendors' sites.
Test your site thoroughly by taking the following steps:
Check your pages in all targeted web browsers on all target
platforms. Test Versions 4.x, 5.x, and 6.x of Internet Explorer and
Netscape Navigator, plus less popular browsers such as the AOL
browser, Opera, and iCab.
Test on all supported platforms, including different versions of the
Mac OS (7.x, 8.x, 9.x, and OS X) and Windows (95, 98, 98SE, Me, NT,
2000, and XP). Test on Linux and Unix browsers, if appropriate.
Always support (and test) the browser used by the site owner. If the
site doesn't work when decision makers use it, they will
rapidly lose confidence. Saying "It looks great on my
machine" will not suffice.
Test whether users behind a firewall can access your site. Test all passwords and their corresponding privileges for
password-protected sites (and don't leave sensitive information
unprotected).
Test whether your site deals gracefully with unsupported browsers. If
applicable, test pages that use frames, layers, and CSS in browsers
that don't support these features. Use the File Check
Target Browsers option to detect possible unsupported features.
Verify that the no-frames version of your site appears as intended or
that users with older browsers can see an appropriate error message.
Use the Check Browser behavior to redirect users with older browsers
accordingly.
Test whether your page deals gracefully with users who don't
have a necessary plugin or who have an outdated version of a plugin.
Be sure that the server MIME types are set for all files that require
plugins. Verify that plugins can be downloaded or upgraded as needed
(either automatically or manually). Plugin detection differs markedly
on Netscape and Internet Explorer on Macintosh and Windows, so test
them each separately. Some plugins suffer incompatibilities when used
with the AOL browser, so test versions of AOL on both Macintosh and
Windows if you are supporting that browser. See Chapter 5, Chapter 12, and Chapter 16 for details on plugins and MIME types.
Check the spelling on every page of your site using
Dreamweaver's spellchecker (Text Check Spelling).
Check all links on all pages of your site using Site Check
Links Sitewide. Check external links using the External Link Checker
extension (see Chapter 22) or other external link
checking program.
Run Dreamweaver's site reports regularly to ensure that there
are no missing files or hidden errors.
Check web accessibility (See Chapter 22) for
text-only browsers (such as Lynx) or speech-based browsers (those
that read web pages to the blind).
C.2.2 Web Address and Email Address Tips
The following tips help
maximize the utility of your site and convey an air of
professionalism to your visitors. Contact your webmaster or ISP for
assistance with these items.
Ensure that your site is accessible both with and without the www server name, such as with the
URLs http://www.mydomain.com and
http://mydomain.com.
Ensure that the email addresses webmaster@mydomain.com and postmaster@mydomain.com are forwarded to
appropriate administrators. Mail directed to incorrect email
addresses, such as nobody@mydomain.com, should be redirected to
an administrator rather than ignored or bounced back to the user.
Configure your server to display a custom page if a
link is broken. A custom error
page can give the user more information than the default 404 (file
not found) error. Include a search feature on the page (see Chapter 22).
Check your server logs periodically for reports of broken links.
(Most servers can log attempts to reach nonexistent URLs.)
Ensure that every folder, including the site root, has a
default file, such as
index.htm, to prevent visitors from viewing
your directory structure or receiving an error message. The filename
of your site's home page
depends on your server. Some servers assume index.htm or index.html as the default home page. Other
servers assume home.htm,
home.html, default.htm, or default.html as the default home page.
Consult your webmaster for details.
C.2.3 Navigation Methods
Pay attention to how your users navigate your site. If the
interface isn't simple, visitors will leave or fail to find the
information they need to make a purchase decision.
Just as graphical user interfaces offer a consistent user experience,
your entire site should share a common navigation system. Don't
ask a visitor to select from a drop-down menu at the top of one page
and then from a series of images at the bottom of the next page.
Every web page should include the answer to your visitors' two
main questions: "Where am I?" and "Where am I
going?" Include a navigation bar or navigation panel that
indicates the visitor's current location and gives easy access
to other portions of the site. Such an approach keeps the user
oriented and motivated to explore your site further.
Navigational elements should be easily discernable. Buttons should
have a raised appearance and text links should be separated with
pipes (|) or other characters to delimit user
choice visually.
Use rollover text or graphics with your buttons to provide more
information to the visitor while maintaining an uncluttered page
design. Use the Set Text of Status Bar behavior to provide help on
the status bar of the user's browser. Both techniques help to
engage the user through interactivity.
Make a search mechanism readily available, as described in Chapter 22.
Test your site on real users, then refine your design.
C.2.4 Content
You have heard the phrase, "Content is king," and it
remains true for the Web. Despite cost pressures, superior design and
content can make your site stand out.
Your clients know their business and their customers. Encourage your
client or marketing staff to participate fully in the high-level
design of the site. That said, you should provide guidance as to what
works and doesn't work on the Web. In other words, ask clients
what they want to get across to their customers, and then help them
achieve that goal.
Employ a professional copywriter with knowledge of the client's
industry and a flair for writing copy that sells and inspires.
Check grammar, spelling, and punctuation carefully. Keep articles
under 1,000 words, if possible. Break longer articles onto multiple
pages.
Check the page layout in various browsers and different resolutions.
Look for potentially misaligned images.
Performance, performance, performance! Don't overload your page
with so much content that it slows down performance. Potential
visitors will leave before ever seeing your beautiful design. Try to
keep page load times under 10 seconds, and certainly no more than 30
seconds (an eternity for a user).
C.2.5 Colors
Color can communicate very
effectively when used properly, but can be a real eyesore when used
improperly. The following tips will help you to use color
effectively.
Use the Commands Set Color Scheme option to select a color
scheme for your site.
Pick a combination of foreground and background colors that has
adequate contrast and improves legibility. Telephone books use yellow
pages because black text on a light yellow background offers the
highest contrast on printed paper. Experiment with different colors,
as monitor brightness and contrast settings differ markedly. Also
pick a san serif font and an adequate point size to make the text
easy to read on screen.
Avoid inverse text (light text on a dark background) especially if
you expect the page to be printed.
Avoid color schemes that make text illegible to colorblind visitors.
Remember that there are different types of color-blindness, including
an inability to distinguish red from green and an inability to
discern shades of gray.
Avoid color schemes that seem so retro or modern that they obscure
your message.
Avoid oversaturated and cliché colors, such as pure red
(#FF0000), green (#00FF00), and blue (#0000FF). Tone down pure white
(#FFFFFF) to a shade of gray if nearby colors appear to bleed into
the white area.
Be aware of the emotions that colors can evoke and how they reflect
on your message. Colors such as pale pinks and blues tend toward a
softer appearance, while browns and reds have a stronger, rustic
appearance. Don't use colors that provoke anxiety if you want
to put your audience at ease. See Table C-1 for
details.
Table C-1 summarizes the emotions loosely
associated with different colors.
Table C-1. The meaning of colors
|
Black
|
Dark or heavy; balance it with other colors to look chic instead of
morbid.
|
|
White
|
Avoid pure white, as it can be too brash. Use it for accents or tone
it down by combining it with other colors.
|
|
Dark blue
|
Distant, authoritative, or reserved. Avoid pure blue (#0000FF), which
may be too intense. Use navy blue instead.
|
|
Aqua blue
|
Peacefulness and relaxation. Nature and water.
|
|
Green
|
Encourages interest and exploration; engaging. Combine with subtle
yellows for contrast. Avoid drab green unless selling camouflage gear
or alligator bait.
|
|
Yellow
|
Fiery and emotional with raised expectations.
|
|
Light brown
|
Rustic strength and history (sienna photographs).
|
|
Brown
|
Cultivation and distinction (brick and wood).
|
|
Red
|
Alertness and intensity. Avoid pure red, which conveys emergency
rather than urgency.
|
|
Magenta
|
Cool and artificial.
|
Any color can be specified as a hexadecimal RGB triplet (#RRGGBB).
Some colors can also be specified by name, such as <body
bgcolor="red">, but support varies by browser. The most
widely supported named colors are listed in Table C-2.
Table C-2. Color names defined in the HTML 3.2 standard
|
aqua
|
#00FFFF
|
|
black
|
#000000
|
|
blue
|
#0000FF
|
|
fuchsia
|
#FF00FF
|
|
gray
|
#808080
|
|
green
|
#008000
|
|
lime
|
#00FF00
|
|
maroon
|
#800000
|
|
navy
|
#000080
|
|
olive
|
#808000
|
|
purple
|
#800080
|
|
red
|
#FF0000
|
|
silver
|
#C0C0C0
|
|
teal
|
#008080
|
|
yellow
|
#FFFF00
|
|
white
|
#FFFFFF
|
C.2.6 XHTML Compliance
XHTML represents the evolution of HTML
4.01 into an XML-compliant standard. XHTML is the next step in the
development of HTML and will be slowly adopted as the default
language of most browsers. For a full discussion of
XHTML, see
HTML & XHTML: The Definitive Guide by Chuck
Musciano and Bill Kennedy (O'Reilly). This appendix covers the
steps to ensure that your HTML complies with the XHTML standard. When
converting from HTML to XHTML you must follow more rigid rules:
All element and attribute names must be in lowercase. You can set
them to lowercase by using the Case for Tags and Case for Attributes
preferences under Edit Preferences Code Format.
All attribute values must be enclosed in quotation marks. Dreamweaver
encloses attributes in quotes by default, and you should use quotes
when hand-editing HTML in Code view or the Quick Tag Editor.
The root element of the document must be
<html>. Dreamweaver uses the
<html> element as the root element of all
newly created documents (unless you change the default.html file on which all new documents
are based).
The <!DOCTYPE> declaration must precede the
root element in the document, as in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Dreamweaver does not include the
<!DOCTYPE> element in its documents. You can
add this element by modifying the default document template,
default.html (see Chapter 21).
|
|
|
Dreamweaver does not include any reference to a default namespace in
the default document
template. You can add this
reference by modifying the default.html file.
|
|
|
Dreamweaver does not include the closing slash with empty elements.
This deficiency can be remedied by editing the appropriate object
insertion files located in the /Configuration/Objects
folder.
|
|
If an element is not normally empty, use a closing tag, even if a
particular instance is empty. For example, use
<p></p> instead of <p
/>.
The use of external stylesheets is suggested if the stylesheet uses
any of the following characters: <, &, ], ], >, or -.
The use of external scripts is suggested if your script uses any of
the following characters: <, &, ], ], >, or -.
|
Because XHTML parsers can remove comments from content, enclosing
scripts and stylesheets within comment delimiters may not hide the
stylesheet or script from browsers that don't support those
features.
|
|
Line breaks and extra whitespace found within attribute values are
handled inconsistently and should therefore be avoided.
When creating transitional documents, use both the
lang and xml:lang attributes
when specifying the language of an element. The
lang attribute allows older browsers to view the
document properly. When used together, the value of the
xml:lang attribute will take precedence.
Use the id attribute, not the
name attribute, to identify elements. The name
attribute isn't supported in XHTML documents because it is not
defined as an attribute of type ID. The id
attribute isn't supported in all browsers, so provide redundant
id and name attributes to
support older browsers.
|
Dreamweaver uses the name attribute, rather than the
id attribute, in all instances. Add the
id attribute manually by using the Quick Tag
Editor.
|
|
Use both the XML declaration <?xml version="1.0"
encoding="EUC-JP"?> and a matching meta
http-equiv element, such as <meta
http-equiv="Content-type" content="text/html; charset="EUC-JP"'
/>to specify the character encoding used in your XHTML
document. When these attributes are used together,
XML-compliant applications use the XML declaration.
|
Dreamweaver uses the <meta http-equiv>
element/attribute combination. You can modify the
default.html file to include the
<?xml?> declaration.
|
|
Boolean attributes that are not assigned a value, such as
checked, nowrap,
compact, and resize, are not
supported in XHTML browsers, although they will continue to be used
for HTML browsers. To comply with XHTML standards (and still support
HTML browsers) set Boolean values to themselves, such as
checked="checked".
|
Dreamweaver follows the old HTML standard in which a Boolean
attribute without a value implies an assignment to
true. You can change the default by modifying HTML
files in the /Configuration/Objects directory.
|
|
When an ampersand (&)
appears in an attribute value, it must be displayed as the character
entity &. This requirement creates
problems when working with addresses containing ampersands within
href attributes, since they would need to be
expressed as
http://website.com/cgi-bin/sendmail.pl?id=guest&name=user
rather than as http://website.dom/cgi-bin/sendmail.pl?id=guest&name=user.
|
Dreamweaver displays ampersands found within URLs as the ampersand
rather than the & entity.
|
|
|
