Building Web Sites All-in-One For Dummies® (28 page)

You can comment your code whether you're writing HTML, CSS, ActionScript, JavaScript, or any other code. Scripting, markup, and programming languages have their own format for how to create comments. HTML comments are contained between

tags. Everything between the comment tags will be visible only to people who are editing the HTML document and to those who view the source on your pages. CSS comments look like this:
/*
comment goes here
*/
.

•
Use version control.
Make sure you have something in place to prevent members of the team from overwriting each other's work. Even if you're working solo, accidentally overwriting a file is easy. Make sure you have backups so you can recover the work if something does happen. Explore your software for version-control options. For instance, Dreamweaver has some tools to help. Power users like tools such as Microsoft Visual SourceSafe 2005, which you can find here:

http://msdn.microsoft.com/en-us/vs2005/aa718670.aspx

In general, version-control tools warn or prevent other members of your team from opening and working on files that are already open and being edited. They all work a little differently, and some are more effective than others. That is, they prevent more than one person from opening and working on a file instead of just issuing a warning that someone else is working on the file but letting a second person work on it anyway.

Other version- and source-control features include warning a user when she is trying to post an older version of a file to the server when the file that is currently on the server is newer and presumably has been posted by someone else very recently. Another way to make sure files don't get overwritten is to limit the number of people who have the power to publish files to the site. The designated person acts as a gatekeeper, making sure that members of the team don't overwrite each other's work.

Also keep track of original versions of the photos associated with your site in case you need them later. Keep communication open. There cannot be enough communication between members of a Web team. The nature of the work makes it easy for members to run to their respective corners and hibernate until they're done with their piece. Typically, details of what each person is working on change because planned techniques don't always work when they're put into practice. Communication is especially important when this happens.

For example, if your team decides to use HTML to deliver a company tour and then later discovers that Flash would be a better method, tell all team members about the change of plans. If someone else is developing the content for an HTML page and doesn't realize that you changed direction, the time spent on content development has been wasted. In fact, the team needs extra time to develop the new content.

•
Organize your supporting files.
While you work on a site, you'll accumulate several files that aren't actual parts of the site. You almost immediately start generating Word documents, Photoshop or Fireworks files, Illustrator files, Flash files, and a host of other files. Make a folder named something like Production Files to keep track of all these files. You should keep this folder with the site folder, but don't post it to your live site. You need to use these files when and if you need to revise your graphics or multimedia elements or if you need to refer back to original content documents. When you launch your site, burn a backup CD or DVD with the site and production files on it. Periodically make new backups.

•
Make all source documents available to everyone who will need to edit site elements.
Ensure that everyone on the team can edit or create new graphics as needed without having to try to completely re-create the original source files.

Chapter 3: Creating a Web Page Layout with HTML and CSS

In This Chapter

Considering the benefits of using CSS

Learning some simple CSS

Using cool style tricks

In Book III, Chapter 2, you explore a basic HTML document and find some basics about creating an HTML page. This chapter shows you how to create the accompanying Cascading Style Sheet (CSS) file.
CSS
is a simple language that is a flexible and powerful way to control the layouts of your Web pages. As your site grows, you'll see huge benefits in ease of maintenance and the ability to repurpose or redesign sections of your site very quickly.

Before we jump into the mechanics of creating a Web page layout with HTML and CSS, we first want to show you some reasons why using CSS is a good thing. Next, we tell you how you can use the View Source feature of a Web browser to examine other developers' code. View Source provides a valuable way to see how things are done right (or wrong, as the case may be). We also quickly cover how easy it is to use CSS with other tools, such as Dreamweaver.

Understanding How CSS Can Help Your Site (And You)

We include many code examples in this chapter (as well as in the preceding chapter) that show the old-fashioned HTML way of doing things: that is, compared with the new-fashioned CSS way. In some cases (like with borders and padding), the benefits of using CSS are very clear. For example, you can apply borders to many different types of elements, such as paragraphs and bullets. You can also control the color, width, and style of borders with CSS. You can even specify that the borders appear only on some sides (say, bottom and left, but not on others). Stodgy old HTML allows for borders only on tables, and those borders are either all the way around or none at all. In other cases, it might not be as clear to you until after you start to work with your site. But know that when you design your site with CSS, you're making things much easier for yourself. When using CSS, you can

•
Easily make changes to the presentation of your content.
Imagine having to find all the font tags and change them all in an extensive Web site. Using a simple Find and Replace effort often doesn't work because of the inconsistent way tags are coded. It's possible to have hundreds of variations of the font tags — that all look the same on the Web page but are coded differently — which makes using Find and Replace utilities useless.

•
Easily discern the original meaning of your content.
When working with older, “anything that makes it look good” type techniques, you often can't tell what the different parts of the page content are just by looking at it. Old-style HTML allows for using tags improperly, like applying properties to a font tag that makes a paragraph tag display as though it were a heading. Not easy to fix. If you manage to strip out the old font tags, you also strip out the visual cues that can help you to recode the page properly.

For example, if you set up your page as a block of content with


tags to separate it visually into paragraphs and

tags to make headings look different, it's difficult to figure out what was what if the tags were disrupted or deleted. Another consideration is that users can create their own style sheets. Creating these style sheets is particularly important for some people, especially folks who are visually impaired and develop their custom style sheets with the assumption that your paragraphs will be marked up as paragraphs and that headings will be headings. If your site isn't coded properly, it can make your site much more difficult for these individuals to use because their style sheets won't work as they expect them to.

•
Make your site friendly to all who visit — no matter where they are or what their situation.
Another reason to use CSS and HTML properly is that of the increasing number of people using the Web, many aren't using a traditional computer. Instead, they're using handhelds, phones, and other mobile devices. In addition, some of your visitors don't have perfect vision and hearing, and many don't have a fancy computer with great speakers. The point is that the Web is more accessible than ever, and you have to be mindful of the wide variety of situations and visitors — and thus code your pages so that your visitors can easily use your site.

Again, some users will have customized style sheets so they can use the Internet. Perhaps a person needs to enlarge font sizes or to specify how a screen reader aurally signals different parts of a document to compensate for visual impairments. Information about aural style sheets can be found on the World Wide Web Consortium (W3C) site at
www.w3.org/TR/REC-CSS2/aural.html
.

We spend time in this chapter showing how true the preceding bullets are, but first, we want to give you some quick notes about the View Source technique and integrating CSS with other tools.

Checking the source

To get a look at the CSS of a page, use the View Source technique. To view the source code of a page in Internet Explorer (IE), for example, either right-click in your browser window and choose View Source, or choose View⇒Source from your browser menu bar. (You can also view source with other browsers. The location of the View Source option might be different, but it's found under a similar view-type menu.) Look for a line of code in the

section of the page that refers to the CSS file
or
look for the actual CSS in the head of the file. If you find a reference to the CSS file, you can use your browser to view the file (more about that in a minute). CSS can also be applied within the document itself, but that method defeats one of the main strengths of CSS: namely, the reusability of code that's kept in only one place.

Save the HTML code so you can play with it on your own. When you view the source, look for signs of CSS. Inline and embedded styles are easy to see. You can also get a look at external style sheets by looking for the path to the file in the head tag. Assuming the URL of the Web site is
http://www.examplesite.com
and the folder you want to keep your CSS in is located at
http://www.examplesite.com/css/
, the URL of the CSS would be
http://www.examplesite.com/css/sitestyles.css
. By typing the URL of the CSS into your browser window, you can view the CSS:

Save a copy of the CSS and HTML files so you can play with them and see how they interact. To see a lot of examples of the power of using CSS to control your visual display of a page, visit the CSS Zen Garden at
www.csszengarden.com
. This project, created by Dave Shea, encourages and supports the use of CSS design. There are a series of page designs that are all very different in appearance, but they all share the same HTML code; only the CSS changes from design to design.

For example, at Claudia's site,
http://claudiasnell.com/jcnewmedia/
, choose View⇒Source from the IE menu. A file with the HTML for her site appears. About 16 lines from the top, you see the path to her CSS file:

To access the CSS file, type this into your browser's address bar:

http://claudiasnell.com/jcnewmedia/css/sitemain2.css

The CSS file opens, and you can view it or save a copy for reference.

Using CSS with other tools

As you begin to work with HTML and CSS, you'll notice the many tools available to you. Dreamweaver has excellent HTML and CSS support and many tools to help you along the way. Figure 3-1 shows an example of a handy Dreamweaver tool — a Color Picker that pops up automatically when you need it. If you type
color:
into a CSS document in Dreamweaver, the Color Picker pops up to help you. That way, you don't have to memorize all the possible hexadecimal color values: Simply click the color that you like.

Ways of Working with CSS

The three ways that CSS can be implemented on your pages are

•
Inline:
Inline CSS
refers to styles that are directly in the content. This method is the least desirable type because it affects only the content that the styles are directly associated with.