|
|
|
|
||||
© 2000 by Rick Altman. All Rights Reserved.
|
|
|
|
He stood up in the lecture hall and said to me, with just a touch of boast, “I like for my pages to have variety to them.” After the seminar, he showed me his version of variety, with three different background colors across eight pages, top-level headings ranging from 14px serif to 22px san serif, and subheads that were anywhere from light-condensed to bold-italic. Some of his pages had backgrounds, others didn’t, and there was no telling what a link was going to look like—blue, red, or tangerine.
It is anyone’s prerogative to design the pages of a Web site at random, and it’s even within your right to insist that you meant to do it that way. Fortunately, it is also our privilege not to visit it. If you feel that conforming to a style inhibits your Web design creativity, you haven’t yet discovered cascading style sheets (CSS) and their big brother, the linked CSS file. With them, you can ensure that your site has a consistent look, while you go about the business of adding the flair.
A cascading style sheet is like a global format that you define for a page or a group of pages. If you know HTML, you can create a style sheet by hand, and if you don’t, then you can rely on any good HTML or Web page editor to do it for you. (Examples here will be of the actual HTML code that a page needs.) Styles sheets are version-friendly: Older browsers will simply disregard the CSS code and use default formats for HTML elements, as if you had done nothing at all.
With a style sheet, you can format a headline once instead of every time it occurs. You can designate a typeface for all of your second-level subheads, ask for more space below each paragraph, indent a block of copy, and create a hover for your links. In each of these cases, you create the format once for all of them, instead of coding each paragraph. Without all of that redundant code, a Web page will download faster, you can change it more quickly, and it will display the refinement of a consistent design, even if you’re tendency is to the contrary.
With an externally linked CSS file, you can ensure that your entire site uses these formats. Then simple edits to one text file affect global change across as many pages as are in your site. This can be as dangerous as it is powerful, so you should ease into global implementation.
Figure 1 (40K) shows a simple example of a style sheet in action, with Macromedia Dreamweaver showing the page’s appearance on the left and the HTML driving it on the right. The subheads have all been assigned the H2 heading, and without any style information, they would appear according to the defaults of the browser—most likely large, serif, with extra space above and below, and generally unattractive. Lines 6–8 of the HTML code show the simple instructions that add a more refined format to the subheads. The command syntax is similar to what you would use next to individual paragraphs in the body of the page, but used this way, they act globally. There could be 100 H2 heads on this page, and they all would format according to the simple instructions in Lines 6–8.
Line 4 indicates the beginning of the <Style> section in the page header. The comment tags in Lines 5 and 10 insure against old browsers displaying the code as part of the body, and Line 11 indicates the end of the definitions. Line 9 establishes the format for all normal paragraphs (designated by the <p> tag), in this case just removing extra space from atop.
A style sheet can preside over typeface, size, color, background, margins, indents, and dozens of other more ornate attributes. Many HTML tags have parent-child relationships, and style sheet instructions honor that. If you set regular text to be navy blue and then applied the <i> or <b> tag to selected text within, the italicized or emboldened text would be navy also. Of course, you could always define italic text to be yellow or blinking or both, but you wouldn’t do that, right?
The CSS specification has a depth and a hierarchy that could make grown men and women cry. I won’t take you there in this article, but going just one level below the surface, you will find classes of a tag, allowing you to create a sub-format. Figure 2 (41K) shows how the creation of a class can be used to change a given paragraph (we highlighted the relevant parts in the HTML window). The class called .red (classes always begin with a period) simply changes the font color, and the third paragraph finds itself infected by it. This paragraph gets all of its other attributes from the <p> tag, so if you were to change <p> to 18 pixels, you would change the .red paragraph also.
Style sheets not only bring you more control, they also let you do more. In fact, standard HTML formatting is a small subset of the breadth of formatting you can achieve with style sheets. Backgrounds that don’t tile…images placed behind paragraphs…complete leading control…paragraph indents—you will gain a whole new treasure chest of toys.
Observant users will scoff at Figures 1 and 2 and their utopian view of the cyber-universe. The problem? Just how many users who visit your page will have Eras Ultra installed? Those who don’t will see a basic serif default. Thanks to an under-publicized trick, you can maximize the chances that your visitors will see your pages with a typeface that you deem acceptable: You list several of them at once. At altman.com, we identify six typefaces that will display our pages appropriately, after which we settle for "any sans-serif face." If applied directly to a paragraph, the code would look like this:
<font face="Verdana, Futura Md BT, Eras Book, Zurich BT, Tahoma, CastleT, sans-serif">Text goes here… </font>
With this command, we can instruct the browser to start with the first face and keep going down the list until one of those typefaces is found on the visitor’s system. If none of them is, our visitors will see generic sans serif, probably Arial. This is one of the most valuable strategies a Web master can employ, but the problem is that every single paragraph must be coded this way, and that would constitute a felony-level of code-bloat.
The answer, of course, is to use a style sheet, whereby you would only have to code it once. The syntax changes slightly:
p {font-family: Verdana, "Futura Md BT", "Eras Book", "Zurich BT", Tahoma, CastleT; sans-serif}
Now every paragraph of body copy on your page will benefit from this clever strategy, with none of the dreaded code-bloat.
If you think that the world is passing you by because every site except yours offers rollovers, CSS can assuage your bruised ego. You can define how a text link will look before and after it has been visited, and how it will act when you hover over it or click on it. For instance, the following definition will cause a link to display in yellow against a blue background as you pass your mouse over it.
a:hover { font-weight: bold; color: yellow; background-color: blue}
You can also define a.link, a.visited, and a.active tags, the latter determining what the link looks like as you click on it. These only work for text links, not images, but once you begin using them, you might find yourself using fewer graphics on your pages. Good-looking pages…fewer graphics…that’s a good thing.
Most Web masters who discover the hidden treasures of style sheets go the extra mile and use linked style sheet files. It’s one thing to control the format of elements on a page; it is quite another to control them across an entire site.
To link your page to an external style sheet, you create the definitions in a plain text file, instead of in the header of the Web page. Syntax is identical; you could use cut-and-paste to create your first one. Then you place the following command on each page that is to use the styles:
<link rel="stylesheet" href="styles.css">
You decide what you want to call the file. From this point forward, any change you make to styles.css will cascade through all of the files on your site (and you were wondering where the C in CSS came from…).
Linked style sheets will take you to an entirely new playing field, offering you unprecedented control over the critical elements of your site. You can experiment with new formats with breathtaking ease, and effect those changes simply by publishing a new .css file. You can also create multiple .css files and rotate them into use. You could even create a simple script that activates one on Mondays, another on Fridays, and a third one on weekends.
While older browsers do not support styles at all, the more pressing issue is that current browsers do not support them evenly. Elements will look different in Netscape browsers than they will in Internet Explorer, and sometimes the differences are not so subtle. This is particularly so with the more exotic formatting that CSS offers, such as positioning, layering, clipping, and background effects, which suffer various levels of non-support from both browser flavors.
As always, you will need to design to a common denominator and preview early and often. If you have elements that must be designed with precision, you might have to format them locally, rather than by a style tag. (Of course, if you really need precision formatting, don’t use HTML at all, but that’s for another column.)
By any measure, the rewards of using style sheets far exceed the risks. Using global styles helps keep separate the form and the function of a Web site. Designing in HTML is nobody’s idea of fun, and the specification has a long way to go before you feel as if you are working within DRAW or PAINT. But style sheets help by bringing definition to both the design component and authoring component of Web mastering.
When using style sheets, I am reminded of a quote that singer/actress Julie Andrews made almost three decades ago: “Discipline is a kind of constraint that sets me free.” When you know that your formats are all taken care of, you can focus your creative energy on making your Web site communicate your message as effectively as possible. To a Web master, you simply can’t put a price on that.
»«
Copyright 2000, All rights reserved. Have an opinion? Share it with the Corel community at the CorelWORLD Forum. There is already quite a bit of discussion about this story. Join in...
May 2007: As simple as possible, but not simpler... · April 2007: Killer Keystrokes · March 2007: Resolution Confusion · January 2007: Fearless Forecasts for 2007 · November 2006: Epiphanies at PowerPoint Live 2006 · August 2006: Escaping Death by PowerPoint · July 2006: Notes from the Floor of InfoComm · June 2006: Beyond PowerPoint--Making Movies for Business and Pleasure, Part II · May 2006: Beyond PowerPoint--From Photos to DVDs · April 2006: It’s Your Music!--Overcoming the oppressive restrictions of iTunes · March 2006: CorelDraw X3—A few must-haves and a few missed opportunities, all in all, a credible upgrade · February 2006: Making Windows Inhabitable · January 2006: Fearless Forecasts for 2006 · September 2005: Just What is a Background Anyway? · August 2005: Meet David Dobson, Corel's New CEO · July 2005: Community, Blind Dates. and Albert Einstein: An Interview with the PowerPoint Live Conference Host · June 2005: CorelWorld 2005: Image Editors, Executive Appearances, and Krispy Kremes · May 2005: As Adobe's Shadow Grows, Is Corel Better off or Worse? · March 2005: Delivering Your Presentation: How Close to the Source Can You Get? · February 2005: Digital Photography: The Killer App of this Generation Part II · January 2005: Digital Photography: The Killer App of this Generation · November 2004: A Killer Deal for Corel Or Another Distraction? · September 2004: The Scourge that is Kazaa and AOL Instant Messenger · August 2004: The Golden Triangle: Presenter, Audience, and Slides · July 2004: A Blast from the Past: How Fast is Fast Enough? · June 2004: Guilty Pleasures · May 2004: A Personal Wish List for PowerPoint 12 · April 2004: Eyedropping: Version 12 makes a good tool even better... · March 2004: Deadly Sins Of Modern PowerPoint Usage · February 2004: Is the even-numbered curse finally over? · January 2004: Another take on Achieving Absence of Ugliness · November 2003: What can we do it again??--Debut of PowerPoint Live Leaves Unquenchable Thirst with the Host · September 2003: Corel Corp. Has a New Custodian · July 2003: Candor and Contrition at CorelWORLD · June 2003: What a Long, Great Trip It’s Been! · May 2003: The Boat that Corel is Missing · April 2003: No Fooling...Is Corel Breaking Up? · March 2003: The Annual Design-a-Brochure Contest · February 2003: Symbolism is Everything · January 2003: Mania, Our Semi-Annual Pilgrimage to Holland · October 2002: On Creativity, Problem-Solving, and Paper Bags · July 2002: CorelDRAW 11: Surprise, Surprise... · May 2002: The Sound of Silence: What does it mean when a company plays its cards so close to its chest? · April 2002: The Art and Science of Presentation Graphics--Creating for the Screen Has its own Challenges · March 2002: CorelDRAW 11: What kind of personality and attitude should a software program have today? · February 2002: Oy, my aching fingers... · December 2001: Digital Photography · November 2001: Can we say goodbye to the Rolls Royce Mentality? · October 2001: An Unforgettable Week: The drama that unfolded around CorelWORLD · August-September 2001: The Art of Paragraphics: New-age ingredients for success with Corel VENTURA · July 2001: Your Very Own Interface: How to make Corel applications read your mind · June 2001: Fighting the Font Wars: How to stay sane with your sans · May 2001--Turning the Key at Nicholas-Applegate · April 2001--A Modest Proposal for Reviving VENTURA Publisher
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
Mastering CorelDRAW 9
