HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 20—Be Uniform with Style Sheets |
279 |
</body>
</html>
Figure 20-1 shows the Web page produced by the classes in Listing 20-1. The quoted paragraph stands out from the rest of the text, and the second-to-last paragraph appears in red due to its important nature.
Figure 20-1
Distinguish similarly tagged paragraphs from each other with classes.
|
If you or your company use multiple style sheets, use the same |
|
class name for the same kind of style throughout your Web pages. |
Tip |
If you do not, the similar styles with different names will be con- |
fusing at best and make maintenance difficult when you must |
|
|
make a change to one of those styles. |
Specify background images and colors
Evening Saturday—IV Part
20 Session
Remember that you can specify just about anything inside style sheets that you otherwise would include in a formatting tag. You can add a background color or
280 |
Saturday Evening |
image to a style. One of the more interesting effects of adding color or a background is the appearance on the Web page. The rectangular text that appears inside the style is enclosed inside the color or graphic image, whereas the rest of the Web page is left in the default color.
A simple example will demonstrate how effectively you can use color and background images. Listing 20-2 sets up two heading classes. One specifies a color, and the other specifies an image for the h1 heading’s background.
Listing 20-2
Adding background colors or images with styles
<html>
<head>
<title>Classes</title>
<style>
h1{background: blue; color: white}
h2{background: url(“fire.gif”); color: white; font-weight: bold} p.normal{text-indent: 3%}
p.quoted{margin: 45pt; font-style: italic} p.vital{text-indent: 3%; color: red; font-weight: bold}
</style>
</head>
<body>
<h1>Investing Basics</h1>
<p class=normal>Personal investing basics begins with your bills. How much do you owe? To whom do you owe? How much interest do your debts require? Consider the case of Jeff G., a homeowner who recently wrote into MoneyFinancesAndMe.com:</p>
<p class=quoted> We want to look into investing. We have about $2,500 to invest. We own our home and have a mortgage. We also owe about $2,500 in credit card bills that require about 19% annual interest. Where do we begin investing? </p>
<p class=vital>Jeff G, we can tell you how to earn 19% on your money instantly and risk-free! Pay off the credit card. Don’t even consider putting your money in other investments until your card is handled. If you do not, you must make your investment earn 19% before you
are one penny ahead!</p> <h2>Saving Money!</h2>
<p class=normal>In many ways, a penny saved is worth <i>more</i> than a penny earned. When you earn money, you must pay taxes on that money. If, however, you save any amount, such as $10, you save that $10 after-tax. The IRS has not (yet) found a way to tax you on money
you save by not spending that money on goods or high-debt interest.</p>
</body>
</html>
Session 20—Be Uniform with Style Sheets |
281 |
Figure 20-2 shows the headings as they now appear.
Figure 20-2
Background colors and images can accent headings.
If the GIF image is not large enough to cover the paragraph’s rectangular area, the browser repeats the image.
Note
Specifying exact pixel placement
Beginning with CSS2, supported only by some of the most recent Web browsers, along with HTML 4.01, you are able to specify the exact pixel placement of text or images on the page. Unfortunately, the huge lack of support for the feature means that you should not attempt to use these new styles for a few years.
In the meantime, you can use a trick to place an image or text exactly where you want. Remember that the margin-top and margin-left style characteristics allow you to begin a new element at a specific pixel. Therefore, to place an image
Evening Saturday—IV Part
20 Session
282 |
Saturday Evening |
at exactly 45 pixels from the top of the screen and 30 pixels from the left of the screen, you code this:
p.pic1{margin-top: 30px; margin-left: 45px}
Later in the body, you can position an image like this:
<p class=pic1><img src=”myphoto.gif”></p>
Actually, this method works consistently, but it is crude. Besides, why would you want to place an image at an exact pixel location when so many monitors with so many different sizes and resolutions will be viewing your Web page? The answer is that you may need to exactly position an image or text, such as a small company’s logo, in the top-left corner of the screen. With exact image positioning, you can even produce a shadow effect by positioning two versions of the same text offset from each other.
As you progress through your HTML coding career, keep your eyes peeled for signs of more conformance to the CSS2 standard that allows for this kind of text and image positioning, which works better than the older margin characteristics. New features such as layers and spanning produce the effects that one would want, but the cost, at least for today, is lack of compliance among browsers.
Removing underlines from hyperlinks
One way that some HTML programmers distinguish their pages with styles is to remove the underlines from hyperlinks. The hyperlinks still appear in their usual colors, and the mouse cursor changes to the hyperlink shape, but the typical underline does not appear. Too many underlines throughout a page may make the page look busier than it should appear. Then again, by removing the underlines, you remove one standard way of specifying hyperlinks. The trade-off between style and standard must be yours to make.
To remove the underlining, you only need to define a style for the anchor tag using the text-decoration characteristic like this:
a {text-decoration: none;}
In addition to removing the underline, you can also specify colors for the anchor like this:
a:link {color:#0000ff } a:active {color: #cccccc } a:visited {color: #ff0000 }
Session 20—Be Uniform with Style Sheets |
283 |
REVIEW
Web page style sheets are similar to, but not the same as, word processor style sheets.
Style sheets provide a uniform formatting for Web pages but do not ensure the pages will look the same on every user’s screen.
You must define styles, either inside the Web page or in a linked, centralized text file, before you can use styles on your site.
Style characteristics define the styles.
Classes enable you to format similar kinds of text in different ways.
With styles, you can position text and graphics exactly where you want them as well as remove the underlines from hyperlink anchors.
QUIZ YOURSELF
1.Why don’t style sheets ensure that all your users’ Web pages look exactly the same? (See “Before You Continue . . .”)
2.What is the difference between the font-weight and font-style characteristics? (See “Useful Style Characteristics.”)
3.What advantage does a percentage indention offer over a fixed paragraph indention specified in pixels? (See “Useful Style Characteristics.”)
4.Why would you ever need to embed a single style in a Web page’s header section, while still maintaining a centralized, linked style sheet file? (See “Preparing One of Two Style Sheets.”)
5.What is the difference between a class and an unclassed style? (See “Specifying Style Classes.”)
Evening Saturday—IV Part
20 Session
S E S S I O N
21
Developing a Web Site
from Scratch
Session Checklist
Hire a team of developers to create a professional-looking Web site
Explore all potential Web sites and strategies
Consider the Web site’s general content and make-up
You now have learned all the HTML you need to know to create beginning and even fairly advanced Web pages. Not only do you understand the HTML behind the page, but also you’ve picked up many design tips along the way.
Now you are ready to follow the step-by-step creation of a Web site from design to implementation. In the next 9 sessions, you will review the concepts you’ve learned thus far and see most of them implemented in a building-block approach. Along the way, you’ll take detours to learn why one method or design was implemented over another.
The subsequent sessions are shorter than the previous ones to give you ample time in 30 minutes to try some of the techniques shown to you. Think of these next sessions as both a review and a hands-on guide, with extra tips and techniques thrown in when needed to give you a feel for the real world of site building.
290 |
Sunday Morning |
The Web Page Team
Implementing a Web site requires more than a single person in the majority of cases. When you run across a site that is conspicuously amateurish looking, that site is less than professional for one or two reasons:
1.The Web site author didn’t understand Web-based design issues such as ample whitespace, fast-loading pages, and less-is-more when it comes to frames.
2.The Web site author is simply too burdened with the creation and upkeep of the site itself and cannot spend the time and resources needed to make the site work well.
Except for extremely simple personal Web sites, a professional Web site almost always requires a team of people. That team might include:
Project Leader: Coordinates all the user interviews, the artwork (icons and other art), and the text, while maintaining constant contact with the users who want the Web site.
Art Director: Maintains consistency of the site’s artwork, plans much of the artwork, and directs the individual artists.
Copy Editor: Keeps the grammar and spelling of the site correct and has Web-based skills to help manage the proper use of headings and overall tone.
Programmers: Develop the JavaScript and CGI scripts, and write the HTML code.
Note
Some of these jobs will overlap. The Project Leader might very well help code the HTML tables, and the HTML programmers might design icons under the direction of the Art Director. Allow your team members to perform cross-duties to keep the activity fresh and enjoyable, because the excitement will show through to the final project if the team likes the work.
Obviously, the term user takes on different meanings at different times. Company A may hire a team to develop a professional Web site. To the site designers, Company A is the client and the initial user of the Web site during the testing and implementation. The company’s customers then take over the user role. You, the
Session 21—Developing a Web Site from Scratch |
291 |
designer, must listen to the people paying your salary, Company A, but design ultimately for end users, the typical customers who may be viewing the site. You must tread carefully between the client, your design team, and the ultimate end users. Systems analyst skills are often vital if you are to function as a go-between between your client, who may know nothing about Web page construction, and your team, who may know nothing about business.
Consider the expense for a company that devotes resources to funding a Web team. The start-up costs of a major Web site are staggering. When I first thought of designing Web sites, I figured it would take little more than a word processor with pictures to move around. Was I ever wrong! Even a simple personal Web site such as the one created in the next few sessions takes time and, if available, personnel to design, lay out, create, implement, and maintain it.
|
Sites don’t have to be elaborate to work well! As a matter of fact, |
|
most of the popular sites today have extremely simple formats. |
Note |
They load fast and offer elements the user can dig deeper for if |
desired. Consider the Yahoo! home page, one of the most popular |
|
|
home pages today. The Yahoo! home page contains virtually no |
|
graphics, text headings are nothing more than hyperlinks to the |
|
details behind them, and a search box enables users to look for |
|
topics. A couple of banner ads, unlike on many sites, do not dis- |
|
tract from the page; they even add some freshness to the sim- |
|
plicity. Yahoo! works because it is simple. A ton of information |
|
resides just under the surface if the user wants to explore a link |
|
or perform a search, but the information is never forced upon the |
|
user in great amounts until (and only if) the user requests |
|
the information. |
Suppose you don’t have time or a desire to throw together a Web team! Obviously, you’ll be following along, watching the sample site’s development, as a one-person operation. Great! You want to be Project Leader, and that means that you have all the skills necessary to understand your team’s needs when you lead a team. And if you are simply a sole Web designer and HTML coder who wants your own Web site for fun, kicks, family, friends, and possible profit, hang on and you’ll learn the skills.
For more information on Web page design, take a look at Web Design Studio Secrets, 2/E, by Deke McClelland, et al, (IDG Books
Worldwide, Inc.).
Cross-Ref
Morning Sunday—V Part
21 Session
292 |
Sunday Morning |
Exploring Possible Sites and Strategies
Given that you’re working alone for the rest of the weekend, without a team, the site chosen for this cross-session tutorial will be simple but will contain as many elements as can be squeezed in without making the site look cluttered. You should see as much HTML and as many HTML features and techniques implemented as possible. And yet, a major Web site cannot be described, let alone created in a step-by-step manner, in ten sessions of a tutorial such as this without keeping the site simple.
Therefore, you will consider a family Web site for a professional HTML programmer. Such a site may seem a little too watered-down for an old HTML pro such as yourself (after all, you’ve spent twenty 30-minute hardand fast-hitting sessions learning HTML). The site, however, will take on a fairly professional quality given the simplicity at which this tutorial must keep it, the time you have left in the weekend course, and the amount of HTML programming that you know.
Brainstorming with the team
So far, you’ve read about the goal and nature of the site, but you haven’t seen anything. That’s because you won’t see anything until the first page of the site is created. When you sit down to design a site, or when you and your Web team first sit down, you don’t have a copy of the Web page that you want to develop in front of you because the page isn’t yet developed!
The first thing you’ll do as a team is discuss the goals of the site. You will brainstorm about possible strategies such as an all-encompassing linked style sheet versus individual formatting tags. Who is the audience? Who wants the site built? If you are creating a Web site for your family, some of the answers are obvious. If, however, you work for a company, the customers of your Web site may be a division within your firm that needs a site for parts distribution, or it may be your sales staff, who need a sales analysis site. The customers may be individuals in the Web community who may order products from you. You may be a B2B (business-to-business) Web operation whose customers may be other companies that use your company’s services.
Note
As you can see, some customers pay for the site’s creation directly (another department that wants a Web page), and some customers pay for the site’s creation indirectly (as do end users in the community who might purchase a product from you or from one of your banner advertisers).
Session 21—Developing a Web Site from Scratch |
293 |
What resources are devoted to the site’s creation and maintenance? If no resources are devoted to maintenance, you know to go right back to the customer to explain that the site will be static and customers will never return a third time. Explain how much time and effort is required to keep the site fresh. Ask who will supply the material to be put on the site periodically if the customer wants regular updates.
For a family Web site, you are probably the entire Web design team. You are probably paying for the site, paying for your own time (your payment is the opportunity costs that you lose by spending time on the site instead of on another project), paying the site domain name registration, designing the site, creating the site, gathering the artwork, implementing the site, and maintaining the site when a family member wants something changed or added.
Such a multi-hat job sounds horrible when put that bluntly! Nevertheless, such a site is perhaps the best way to hone your HTML and Web page design skills. Starting with a personal Web page means that you can mess things up with no major consequences. You can learn what works and what doesn’t. If you spruce up the site and provide extras that only HTML coders would know, as opposed to the personal Web sites created on the fly in a Web-page creation program such as FrontPage Express, your site will stand apart in a crowd of personal Web sites and you’ll learn fast.
Getting specifics from the client
You must know where you’re headed before designing your site. You must interview the client, hold brainstorming Web team meetings, conduct more interviews, remain realistic about what works on the site, and hone the site’s design. Specifics now are crucial, and as the Web page develops, you or the client will surely change some details later. When you are building a house, adding a bathroom between two existing walls is difficult, so the complete house plans must be made before construction. Adding a new page between two existing Web pages is simple. Nevertheless, if the client changes the design once you’ve began the site, you’ll need to consider upping your charges. If you’re building the site for yourself, change is not an issue.
|
Sticklers who insist on designing every single page element before |
|
going to the keyboard are stuck in the 1960’s batch language |
Note |
world of mainframe computers. Today’s computers give instant |
feedback. Make a change to your HTML, and you instantly see the |
|
|
result of that change inside your browser. However, if you’re work- |
|
ing for a client who wants a change, request that your client sign a |
|
change-order request that states the change and the added cost. |
Morning Sunday—V Part
21 Session