HTML 4_01 Weekend Crash Course - G. Perry

294	Sunday Morning

Assume that you’ve already interviewed the family. Therefore, you are ready to move on to deciding what content your family Web site will have.

The Site’s General Content and Make-Up

Much more time could be spent describing the design process that Web teams go through and that Web masters perform when creating Web pages on a consulting basis. Nevertheless, you need to get started on the hands-on experience. Assume the kinks have been worked out of the design and that you have interviewed all the family members and know that they are happy. You have the general content just as you would at this point if you or your team were designing the site for a company. You know that someone’s going to want things changed, and you don’t have all the details but you have enough of a target to go to work.

Therefore, the rest of this session will describe the overall site contents of the family Web Site. In the sessions that follow, you will design the site described here.

General content characteristics

Being that the site is a noncommercial, family site, you’ll expect to see all the usual: a familiar tone, lots of pictures, and family news. The parents want a forum to discuss issues that are important to them, the kids want a page to show off to friends, and even the three-year-old has to have something to show for her efforts. Your audience will be far-away family members who view the site every month to catch up on family news, coworkers who view the site because the parents tell them to read their take on a current event, and Web surfing strangers who happen onto your site because the site made it into a Web search engine eventually. Make the family members happiest. Give the coworkers something to talk about (don’t they wish they knew HTML!), and as a bonus to yourself, attempt to keep that one-in-a-million (literally) surfer who stumbles onto your site reading your site for more than three seconds before jumping to another page.

A multipage site is required because a single Web page is only good for short, informational kinds of sites such as a relocation map that a company might put on the Web for a few months while customers learn the new location. As you develop a multipage site, establish page-by-page goals, as described in the section that follows.

Session 21—Developing a Web Site from Scratch

295

Page-by-page goals

Although the home page is your starting point, you should consider your audience and site goals when you first design your Web site. One way is to lay out a detailed home page contents listing and then describe various pages that will link from that home page. The home page sets the stage for the others. The following sections show how you can go from the home page to the other pages, early in the design stages, without getting too wrapped up in specifics.

The Home Page

The details of the home page are:

Introduction: Welcome the viewers to the family home page

E-mail contact: Give others a chance to write to you for feedback and suggestions

Family Logo: A simple eye-catching logo in the upper-left corner

A navigation menu for the site

Recent news (gossip)

The date of the most recent update to the site

The friends and family who love you most will bookmark this page. Correction, a few of the friends and family who love you most will bookmark this page. The home page is the focal point of your site, the central location, the page you’ll update most often.

After some discussion, the family members agreed on the following navigation bar items:

Mom’s Corner

Dad’s Corner

Kids’ Playground

Family Pictures

Favorite Movies

Special Bulletins

Family Travels

Each of these items will link to another page or set of pages.

Morning Sunday—V Part

21 Session

296	Sunday Morning

Mom’s and Dad’s Corners

In Mom’s Corner and Dad’s Corner, the parents can say whatever they want announced to friends and family. Probably, each will discuss current events and their reactions, job news, and family gossip that pertains more to their individual interests than the family’s interests as a whole.

Kids’ Playground

The kids also have their page on which they, within reason guided by the parents, can put whatever they want. You may be surprised how many fairly young schoolchildren now boast having their own Web pages.

Family Pictures

The Family Pictures will hold more photos than text. This might be a great place for the three-year-old’s drawings. In the old days, parents would post their kids’ drawings on the refrigerator door. Today, they post them on the Internet, a door for the whole world. By archiving such pictures, you can keep such memories alive, and as your children get older, they can see their earlier attempts at artistic fame.

Favorite Movies

The family loves movies, both at the cinema and as video rentals. As members of a heavy movie-watching family, everybody wants to talk about their likes and dislikes in this section.

Special Bulletins

The Special Bulletins section can contain just about anything. Depending on the topic, the Special Bulletins section may grow to include its own submenu on the navigation bar. The Special Bulletins will be more in-depth news that pertains to the family, perhaps hinted at on the Home page’s central section.

Family Travels

The Family Travels section tells either about upcoming trips or recent travels, or both. All have agreed not to list exact travel dates for security concerns at the home!

Session 21—Developing a Web Site from Scratch

297

REVIEW

Web teams often develop and implement professional Web sites.

By interviewing clients and users, and by brainstorming, a Web team decides what should and should not appear on a site.

Users are not always the clients.

When developing a Web site’s content, it helps to outline page-by-page goals.

The next eight sessions will design the family Web site with the entire family included.

QUIZ YOURSELF

1.Why do professional Web sites require such large teams? (See “The Web Page Team.”)

2.Why do you not see a picture of the Web site that’s going to be developed in the next several sessions? (See “Brainstorming with the Team.”)

3.What’s the first step in creating a brand new Web site (after the client hires you, that is!)? (See “Brainstorming with the Team.”)

4.What does the term B2B mean? (See “Brainstorming with the Team.”)

5.True or False: You should never change the site’s design once you and the client agree to a design. (See “Getting Specifics from the Client.”)

Morning Sunday—V Part

21 Session

S E S S I O N

22

Making the Web Site

Home Page Look Good

Session Checklist

Create a logo for the Barkley home page

Prototype the Barkley home page

Decide whether to use tables, frames, or both

Sketch the Barkley home page’s table cells from the prototype

Select a color scheme for the Barkley home page

This session focuses on designing the Barkley family’s (the family whose Web site you are seeing being developed here) Web site’s personal home page. When designing Web sites, you should always work on the home page

first. The home page determines the look and tone of the remaining pages on the Web site. Table design forms the skeleton of the Web page. This session ends by showing you some tricks to move quickly to HTML-based tables from your page’s initial design.

300	Sunday Morning

Creating the Logo

Every site needs a logo. The logo is placed on a Web site’s home page. Some may debate this, but as you drive around town, look at the signs for all the businesses you pass. Each business has a primary logo. Logos quickly generate brand recognition, letting you and others know at a glance what you’re looking at. No names please, but suppose you were traveling in a foreign country, didn’t know the language, and saw a sign advertising the largest soft drink maker in the world. You’d know instantly what that sign was selling, wouldn’t you? You cannot

read the sign’s language, but you know the logo.

Your site deserves no less. Create brand recognition. Who knows, your site might be the next Yahoo! Before working on the overall page, work on the logo. Although you may end up honing the logo somewhat over time, improving it as you go, spend some time planning your site’s logo now so that you can provide that logo to other sites that might want to link to yours.

	Place your site’s logo in the upper-left corner of the home page.
	You can put the logo anywhere on the page, but by putting the
Tip	most important element where the user sees it first, no matter
	what the user’s resolution and screen size values are, you ensure
	that your logo is seen.

A family Web site, such as the site the rest of these sessions develop, may not seem to require a logo. Some family sites grow to become more important sites, even developing into commercial ventures. Even if you have no desire for commercialism on your site, spend time on the logo so that your family and friends quickly recognize your site when it loads.

As you develop the logo, consider the following:

Logos don’t have to be fancy.

Keep your logo simple.

Keep your logo small enough to load quickly.

Use Web-safe colors.

Use a GIF file to speed the logo’s loading time.

Don’t use an animated GIF; your logo should look the same on paper as it looks on the screen.

For extremely simple logos, logos that work just fine on family sites, consider converting your name to a logo. One of the easiest ways to create such a logo is to

Session 22—Making the Web Site Home Page Look Good

301

use an art program to create your logo from text. These applications often let you wrap text around a half-moon or grow the text from left to right and adjust the colors and the shape.

The Barkleys, the family whose Web site you are seeing developed here, created the image shown in Figure 22-1 from their name. This is the logo they will place at the top of their site.

Figure 22-1

Converting text to art is a simple way to generate a logo.

Never lose site of your goal: to make a Web site that people visit, return to, and enjoy looking at. What does creating a logo have to do with HTML? Directly, nothing, but your HTML is only a structure Never that defines the shape of your site. The site’s content is your goal,

and HTML is the tool you use to achieve that goal. These last few sessions that show you how to develop a Web site focus on

non-HTML elements so that as you do HTML programming, you can work with these other elements that are not straight HTML code.

Morning Sunday—V Part

22 Session

302	Sunday Morning

Creating the Prototype

By now, you’ve seen the importance of using one or more graphics and design programs as you code with HTML. These programs are a must-have for you as you do HTML programming! No single graphics program does everything well, so you may add several to your HTML programming toolkit as you progress in your work.

Perhaps the single worst mistake you can make when first creating a Web site is to start with the HTML code. You cannot start with the HTML code anymore than a house builder can start with a hammer, nails, and wood. Begin by creating a prototype — a model — of your home page using the graphics program you feel most comfortable using. If you need to, lay out your site’s home page on paper first and then move to the graphics program.

The graphics program enables you to place your logo; add mock article titles; draw placeholders for icons you’ll fill in later; draw lines to separate sections; play with color schemes that collide, contrast, and complement each other; and add a navigation bar and other elements you’ll want to place on your Web page. If the graphics program is fairly recent, you’ll almost surely be able to request a Web-safe color palette so that you only choose from colors for the background and fills that come from the 216 Web-safe colors.

By sketching your site in the graphics program before coding any HTML, you can see more quickly what works well and what does not. Don’t spend a lot of time on the prototype, but the more final your prototype is, the faster you’ll turn HTML into a Web home page that looks like your prototype. Once you have that Web page, you won’t need the prototype again.

Depending on how Web-aware your graphics program is, here are some things you can hope to do with its Web page prototyping tools:

Create a background size to match the screen and resolution you want to target.

Adjust the resolution to fit different monitors of the users who will visit your site to see the effect on your site.

Determine the approximate load time for your general home page.

Note the exact pixel location of the Web page elements to know how to place them with HTML.

Size boxes that act as placeholders for graphics so that you can more accurately size the graphics from the placeholder pixel sizes when you code the HTML.

Session 22—Making the Web Site Home Page Look Good

303

By designing the prototype, you are not locking in the design. Your prototype acts to save you time. You can drag elements around the prototype screen, but with HTML, you must change code every time you determine that a graphic image is better located elsewhere on the Web page.

	Only after you complete the home page should you worry
	about any remaining pages on your site. Your home page sets
Note	the theme and the tone of the other pages. Often, subsequent
	pages will have the same header information, perhaps with your
	logo appearing on all the pages, as well as a navigation bar that
	keeps appearing throughout so that your users can navigate your
	site with ease.

Figure 22-2 shows the home page prototype that the Barkleys developed. Notice that the Barkleys left room at the top for the user’s Web browser tools. Don’t forget that your Web page has, at most, about 75 percent of the user’s screen because the browser consumes the rest. Plan for the reduced screen real estate.

If you want to follow along on your own, consider starting your graphics program and designing such a page. Even if you use one of the generic drawing programs that comes with your operating system, such as Paint, you will more quickly achieve a good-looking HTML-based home page.

The design is fairly stable as you see it in Figure 22-2. Users with small screens or low resolution will still see most of the page because the page contents are skewed toward the upper-left corner of the screen. The green bars will span far enough to the right to extend across however wide a screen the user has.

As you develop your prototype, display the prototype in several screen resolutions to ensure that the design works under different conditions. You can often change your monitor’s resolution settings, but many Web-aware graphics programs these days offer you the ability to view your creation in different resolutions.

Never allow your graphics program to generate a Web page

from your prototype. Many more recent versions can convert your

prototype into a Web page. Without exception, graphics programs Never seem to take your prototype and create a monster page, with too

many table cells, too much overhead, and almost indecipherable HTML code. As with Web page development systems such as Dreamweaver and FrontPage, the generated HTML code is tricky to follow. Until these programs get better — and they will — stick with creating your page in HTML. At this point in your HTML career, the practice pays dividends.

Morning Sunday—V Part

22 Session