Web Site Design by David Rutstein from A to Z

Creating your own website can be useful for a number of purposes. Whether it’s to share your expertise on a particular topic, start an online business, foster a community, or just maintain an online journal of your activities, having a website will allow you to make your content accessible from any connected computer. It can also theoretically allow you to have a larger audience for your ideas than you would ever have otherwise. If you have useful ideas or observations to share, you may be able to share them with as many as a few dozen people throughout the day, if you are lucky. With a website, you can share them with hundreds or even thousands.

Possibly the easiest way to create your own website is to use an online site creation tool. These services often provide intuitive interfaces for adding text, images, links, and other bits of content to a webpage. Many of these tools have a WYSIWYG web design platform, which means “What You See is What You Get” — what you create in the design interface is what your visitors will see.

If you want more options and functionality on your website, as well as your own dedicated web address, you’ll need to create pages in HTML, register a web domain, and get a hosting server to upload your pages to. Web domains can be registered at any number of registrars — Godaddy.com is a popular one. Search for “hosting” or “cheap hosting” to find many thousands of available hosting companies. As a general rule of thumb, if you’re paying more than about $10 US dollars (USD) per month for hosting for a low-traffic website, you’re paying way too much. Many companies offer space for even less.

To create HTML, you can write it from scratch in notepad, or use a WYSIWYG software program. HTML is not a programming language per se, and as such is much easier to use than true programming languages. You can learn basic HTML in less than an hour and start using it to create your very own web pages.

After you create your pages, they must be uploaded to your server. You will receive a username and password from your host once you register with them. You can use these in an application called an FTP program to connect your computer with the server, then send your completed pages from computer to server. Once uploaded, your website will be visible on the World Wide Web for all to enjoy. Within a few days, pages with inbound links will be indexed by major search engines and begin to appear in search results.

Here we go again with the inconsistencies and exceptions. The last rule in any declaration need not end in a semicolon, and some designers leave out the final semicolon in a series of declarations. (That’s because, as in the English language, the semicolon functions as a separator, not a terminator.)

But most experienced CSS authors add the semicolon to the end of every declaration anyway. They do this partly for consistency’s sake, but mainly to avoid headaches when adding and subtracting declarations to and from existing rules. If every property/value pair ends in a semicolon, you don’t have to worry when you move declarations from one place to another.

Whitespace and Case Insensitivity

body  {

     color: #000;

     background: #fff;

     margin: 0;

     padding: 0;

     font-family: Georgia, Palatino, serif;

   }

p     {

font-size: small;

   }

Alternative and Generic Values

A web designer might specify fonts for an entire site as follows:

body  {

      font-family: "Lucida Grande", Verdana, Lucida, Arial,

      Helvetica, sans-serif;

   }

Using Order to Accommodate Multiple Platforms

Not a Perfect Science

No one pretends that Lucida, Verdana, Arial, and Helvetica are equivalent in their beauty, elegance, x-height, or fitness for screen service (or even that all pressings of Helvetica are equally good). Our goal is not to create identical visual experiences for all users; platform, browser, monitor size, monitor resolution, monitor quality, gamma, and OS anti-aliasing settings make that quite impossible. We simply try to ensure that all visitors have the best experience their conditions permit, and that those experiences are fairly similar from one user to the next.

Grouped Selectors

p, td, ul, ol, ul, li, dl, dt, dd {

     font-size: small;

   }

CSS has been used to style links for as long as CSS has been available. In fact, along with text styles, link styles are by far the most common use of CSS to date. Of course, as we learn more about CSS and how to use it as a means of managing most, if not all, of our visual presentation, that truth becomes somewhat diluted. At this point, though, styling links with CSS remains one of the most widespread applications of the technology.

With CSS, you can create beautiful effects for links, including hover effects that, before CSS, had to be managed with JavaScript and numerous images or with a Java applet. Using color and images, you can reproduce the effects that demanded so many resources with much greater efficiency and control, and no reliance on anything but clean markup and savvy styling, resulting in beautiful designs that degrade well in older browsers and are completely accessible to those with disabilities.

Lists help you organize your content, and with CSS, you can do a great deal with lists. Along with styling the way list text is managed, you can use CSS to change the way the numbers or bullets are displayed, replace them with an image, or remove the list markers completely.

A very exciting opportunity comes about when you merge lists and links. You end up with a means of navigation. For, after all, what is navigation other than a list of links? Whether managed vertically in a side column or horizontally along the top of the page, using CSS, lists and links can be manipulated to create very richly featured navigation with a minimum of fuss.

In this chapter, you begin by creating simple styles for links and then progress to multiple link styles. You’ll then learn to manage lists with CSS. Finally, you’ll work with lists and links for both vertical and horizontal navigation. Along the way, you’ll be introduced to new CSS properties, as well as a number of selector types you’ve not worked with just yet.

The basic principles for how text is styled in CSS come from traditional typography, although limitations based on both CSS and browser support have prevented certain growth in the area of web-based type.

A warning from the start, though: Working with fonts can be complicated. First, you must understand that, in terms of available fonts for text-based type on the Web, there’s dependence upon a person’s operating system and installed font base. If a specific font is not installed on someone’s machine, that person will not be able to view the font. The same limitation existed for presentational HTML, too, and not much has changed since then. Then there is a major browser flaw in font sizing that makes using font sizes a real pain. Over these concerns you are essentially powerless, except in what you can learn in terms of how to manage them. So bear with me through the details, okay?

The good news is that you do have some choice over fonts, and CSS expands the way you use the fonts by being able to add color, weight, height, spacingall kinds of features that add visual interest to the fonts you do choose. As you become more adept with CSS in general, you’ll learn to combine graphics and text-based type to come up with increasingly sophisticated type designs.

Within the CSS specification, properties for managing typography are found in two primary places. The first is in font-related properties, which are all specific to the way a font is chosen and then displayed. The second is text-related properties, in which text is further managed, usually without some manipulation to the actual font. Some font features come from the more general visual category of styles and can be used with (but are not limited to) text.