Taking Your Talent to the Web- P15 pptx

For this reason, as you begin your career in web design, you will undoubtedly be using HTML tables and other deprecated presentational HTML attributes to control your web layouts and vis

Trang 1

The content area is enclosed within a black outline created with one line

of CSS Originally, the same effect was created by wrapping one HTML table inside another

CSS is used to create the typography and leading

Creating a layout like this in Photoshop, cutting its elements into pieces, and assembling those pieces via HTML, would have resulted in a large web page composed of many small files that would take a long time to down-load (And if the visitor had images turned off, the visual effect would be lost.)

Creating the layout in HTML and CSS means that the page loads almost instantly, no matter how slow the visitor’s connection may be And the lay-out is backward compatible with browsers dating back to Netscape 3 (a

1997 browser), although the CSS formatting will be lost in that browser

Actually, the site is viewable in any browser Older browsers will lose the design branding effects, but the content will still be readily accessible

Note that this is a transitional web design strategy It respects bandwidth

by using web technology (instead of image files) to create visual and branding effects—but at the cost of relying on deprecated presentational HTML attributes Most of these effects can be generated in CSS alone, with HTML serving simply as the structural container of content This is what the W3C recommends, and this is the way we will build all sites in the near future and forever after (We’re doing it at alistapart.com.)

However, as we mentioned in Chapter 2, old browsers that do a poor job at understanding CSS are still widely used in the market we serve And as you’ll see in Chapter 10, browsers that stumble over CSS don’t simply ren-der it incorrectly They can actually crash and burn For this reason, as you begin your career in web design, you will undoubtedly be using HTML tables and other deprecated presentational HTML attributes to control your web layouts and visual effects Thus there is value in learning how to do this in ways that minimize wasted bandwidth and comply with the letter (though not the spirit) of W3C standards The lessons you learn in building sites this way will apply equally well when you are free to control your site designs exclusively with CSS

Trang 2

Other sites that use HTML or XHTML as a creative design tool (abetted

by CSS):

■ www.glish.com(designed by Eric Costello)

■ www.harrumph.com(designed by Heather Champ)

■ www.assembler.org(designed by Brent Gustaffson)

■ www.kottke.org(designed by Jason Kottke)

■ www.blogger.com(designed by Derek Powazek)

■ a.jaundicedeye.com/weblog/(designed by Steven Champeon)

■ www.zeldman.com(designed by Zeldman)

■ www.alistapart.com(designed by Zeldman) Use View Source to see how these sites use HTML table cells and table cell colors, CSS fonts, leading, margins, and background images to create

full-192 HOW: HTML, the Building Blocks of Life Itself: HTML as a Design Tool

Figure 8.2

This site, though colorful,

contains few graphics

Big color sections are

created with CSS and

HTML <DIV> s The

tech-nique facilitates Liquid

Design, reduces

band-width, and makes the

site more accessible

( www.alistapart.com ).

Trang 3

fledged visual experiences using nothing more than code (and a few low-bandwidth images)

P LUG - INS AND T ABLES AND F RAMES ,

O H M Y !

In the transitional Web, designers use HTML tables to lay out pages, as just described (with additional commentary and how-to-do-it type verbiage to come in the next chapter) We also use <FRAMES>, a Netscape “extension”

to HTML which has temporarily made it into the HTML 4 Transitional stan-dard but which will eventually go the way of the Dodo bird

Frames are nothing more than pages within pages, for example:

<FRAME SRC=”nav.html” NAME=”nav” marginwidth=”0” marginheight=”0”

noresize scrolling=”auto”>

<FRAME SCROLLING=auto SRC=”content.html” NAME=”content” marginwidth=”0”

marginheight=”0”>

</FRAMESET>

In this markup, <FRAMESET> tells the browser that the page contains frames <COLS>(short for columns) specifies that the frameset contains three columns The first is 80 pixels wide; the second is 2 pixels wide; and the last fills the remaining width of the browser window

We also can tell the browser whether or not we want borders on our frames; whether or not each frame should permit the viewer to scroll con-tent; whether or not each frame is user-resizable; and what size margin we’d like on each frame Because we’re designers, we turn margins off entirely (marginwidth=”0” marginheight=”0”) and use CSS or tables to control the margins on each individual frame—each frame, of course, being nothing more than an HTML document (nav.html, black.html, content

html)

We also name each frame for targeting purposes After all, when visitors click in a menu area, we want the content they’ve chosen to show up in the content frame—not in the menu frame Assigning a target name to each

Trang 4

frame enables us to write links like <a href=”companypolicy.html” target

=”content”> Naming also enables us to perform JavaScript stunts, which are mainly useful for avoiding the maddening usability hazards associated with frames, such as the following

The Frames of Hazard Through a search engine such as Google.com, Aunt Moira finds one of our client’s content pages Unfortunately, that’s all she finds—the naked con-tent page, immodestly lacking its associated navigational menu frame Aunt Moira has no idea where she is, where she can go next, who created the site, or even how to find its home page

We always had it in for Aunt Moira, who never failed to point out when we had gained weight or burst out in pimples, but our client would like her to

be able to use the site Because we have named our frames and because the good Lord (well, actually, Netscape) gave us JavaScript, we can instruct the browser to load named frames if they are not already visible on the page

Thus when Aunt Moira (the old biddy) blunders her way into

companypolicy.html, the browser is instructed to load the missing frames Code like this would appear on each HTML document that made up the frame, though not on the frameset document itself:

<! This one makes sure the left nav is loaded >

<!

if (top == self) self.location.href = “frameset.html”;

// >

</script>

Such a script tells the browser to make sure that frameset.htmlhas loaded

If it has not loaded—if Aunt Moira’s browser is about to show a confusing single frame no more illuminating than a single puzzle piece—the browser gathers and assembles the missing pieces before the dear old thing has a chance to notice that anything is amiss We don’t want to get ahead of ourselves by discussing JavaScript in the HTML chapter Suffice to say, the

need to rely on such scripts points out some of the hazards of HTML

<FRAMES>, and helps explain why they are on their way out

194 HOW: HTML, the Building Blocks of Life Itself: Plug-ins and Tables and Frames, Oh My!

Trang 5

Everything we now do with frames (and more) we can do with CSS, which

is standards-compliant and avoids the usability and accessibility hazards

<FRAMES>engender But to switch from <FRAMES>to CSS, we must wait for some browsers to improve their CSS support and all users to upgrade

to these better browsers

Please Frame Safely Some old browsers do not understand frames Neither do text and audio browsers Nor do Palm Pilots and web-enabled telephones To accommo-date these devices and browsers, your frameset should include a

<NOFRAMES> tag Browsers that can’t read frames can read the plain HTML that you insert between opening <NOFRAMES> and closing

</NOFRAMES>tags Copy the content that appears in your frames, paste

it between the <NOFRAMES>tags, and you are on your way to creating a site everyone can access, regardless of their browser’s capabilities

Framing Your Art Despite these hazards and hassles, frames can be quite useful to web designers Frames allow you to present a menu bar that stays in place while content frames change They also enable you to create layouts where, for instance, your content will always appear in the center of the screen, regardless of the visitor’s monitor size View Marc Klein’s Creative Repub-lic (www.creative-republic.com) to see this in action, and then view the source to see how Marc crafted his framesets

One other maddening thing about frames is that though Netscape invented them, it never got them exactly right When you tell the browser to make your menu bar 25 pixels tall, you may get 25 pixels in Netscape 4, but you’re just as likely to get 32 or 16 If this suggests that you’re better off avoiding frames whenever possible, we won’t argue

In addition to tables and frames, web designers use applets and multime-dia files to create designs that are frankly unimaginable in print We will discuss those in Chapter 12, “Beyond Text/Pictures.” Don’t skip ahead, we’re watching

Trang 6

196 HOW: HTML, the Building Blocks of Life Itself: Plug-ins and Tables and Frames, Oh My!

Figure 8.3

Creatively used frames

keep design elements

fixed in the center of the

screen, whether the

visi-tor’s monitor is large…

Figure 8.4

…or small Designer:

Marc Klein

( www.creativerepublic.com )

Trang 7

<META> <META> H INEY H O !

Though <META>tags have many purposes, web designers and developers most often use them for one of two reasons:

■ Accommodating search engines

■ Reloading pages or forwarding visitors to an updated page Regardless of the application, <META>tags are placed in the <HEAD> sec-tion of HTML markup That is, all <META>elements show up between the

<HEAD>and the </HEAD>tags Now let’s wrap our own <HEADS>around them to see how this all works:

Search Me When Aunt Moira (the old battleaxe) enlists the help of a search engine to find a topic or subject, one way in which the search engine might sort data

is through <META>tags Some search engines compare search words with

<META>descriptions, and they return the web pages that provide the best matches, as in the following:

Most corporate and business-to-business sites will include only the

<DESCRIPTION>, <KEYWORD>, and <COPYRIGHT> tags After all, AT&T does not need its customers to know who designed the site, what tool they used to edit the HTML, or how old (and outdated) the page may be

Aside from <HTTP-EQUIV>(the widely accepted predecessor to <DOC-TYPE>), there is no reliable standard for <META> Most search engines rarely use them (Google, for instance, ignores them) Those such as Altavista and Hotbot, which once relied on them extensively, pay them less and less heed as time goes by Good <TITLE>tags and good, descriptive page copy are more effective at scoring with search engines and directories

Trang 8

In spite of everything we’ve said, some search engines and directories do pay attention to these tags, and it sometimes falls to the designer to write them So let’s look at some good and bad ones Here is a good one:

And here is a bad use of <META>tags:

The good <META>tags help search engines hone in on what the site actu-ally has to offer The bad <META>tags consign the site to the dung heap, where it will never be found by any living soul—unless they are searching for serve + kids + drugs

Raw-elbowed marketing idiots, who are legion on the Internet, used to try

to “upgrade” their search engine rankings by repeating certain keywords—

a practice referred to as keyword spamming.

<META NAME= “keywords” CONTENT= “widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets,

198 HOW: HTML, the Building Blocks of Life Itself: <META> <META> Hiney Ho!

Trang 9

widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets, widgets”>

Needless to say, this no longer works, and if anything, you and the widg-ets you rode in on will be dropped to the very bottom of any halfway rel-evant search—or kicked out of the database altogether Kids, don’t try this

at home (page)

As we say, most search engines ignore <META>tags, so if you want your site to be found, focus on developing relevant body text and <TITLE>tags

“Welcome to our home page on the World Wide Web” is not relevant text

“Widgets.com builds reliable widgets for the lubrication industry” is rele-vant, if unsavory, text <TITLE>tags and body text are weighted more heav-ily than <META> tags, even by search engines that consider all three (<META>tags, <TITLE>tags, and body text) This is because it is easy for liars to lard their <META>tags with exciting buzzwords that have little to

do with what the site actually offers Body text—text seen by visitors—is

therefore given precedence over the wishful thinking that goes on inside the <META>tag

Everything we’ve just told you is probably outdated and irrelevant by now

Visit www.searchenginewatch.comto get the latest specifics on search engine ranking

At a bad shop, <META>tags (and indeed, sometimes, body text) will be written at the last minute by a recent college graduate with no experience

in marketing, communications, or the Web When shopping for a job, don’t simply judge the company by its graphic design Peek under the hood for evidence of a caring, intelligent environment—or a sweatshop that bangs work out with little regard for its success or failure in the marketplace

Wow, we’ve just saved you from taking a really bad job This book is turn-ing out to be worth every penny you paid for it, isn’t it? You ought to buy copies for all your friends, and save them from taking bad jobs, too

Another type of <META>tag (the <META HTTP-EQUIV>) does another type

of job and is worth mentioning

Trang 10

Take a (Re)Load Off There are times where you want a page to hesitate and then reload Though this may sound like a tricky process, <META HTTP-EQUIV>tags make it barnyard-simple:

In this code example, <x>represents the number of seconds before the refresh or reload occurs, and the URL refers to the page currently being viewed (Obviously, you would replace <x>with <10>, <6>, or however many seconds you wish to have elapse before the page reloads itself There

is no limit, to our knowledge, on how many seconds that may be The browser tells time via the operating system Uncanny, is it not?) Given that the visitor is already at www.widgets.com, why spell out the full URL instead of a relative URL (such as index.html)? Trust us on this one (If you don’t trust us, using a relative URL will usually work, but can be problem-atic if the page you’re refreshing gets moved or renamed, which web pages often do Full URLs make for better, safer maintenance in this instance.) You also can use this technique to forward the visitor from an old, outdated page to a shiny new one:

<META HTTP-EQUIV= “REFRESH” CONTENT= “x;

URL=http://www.widgets.com/newindex.html”>

Many HTML experts, being spoilsports who live in Ivory Towers and proba-bly never laugh even at really funny jokes like the one about the traveling salesman, the farmer, the hippie, and the bus driver, disapprove of this entire procedure They recommend that you forward web users to new pages (if need be) by using JavaScript However, this <META>tag tech-nique does work, even with old, non-JavaScript-capable browsers

A C OMMENT A BOUT <COMMENTS>

In your career as a web designer, you will sometimes create entire sites by yourself from scratch Most of the time, though, you will be working with

a team Occasionally, you will inherit an existing site that needs to be

200 HOW: HTML, the Building Blocks of Life Itself: A Comment About <COMMENTS>

Tiêu đề	Taking Your Talent to the Web
Trường học	University of California, Berkeley
Chuyên ngành	Web Design
Thể loại	Essay
Năm xuất bản	2001
Thành phố	Berkeley

Định dạng
Số trang	15
Dung lượng	302,42 KB