The Visual QuickProject Guide that you hold in your hands offers a unique way to learn about new technologies. Instead of drowning you in theoretical possibilities and lengthy explanations, this Visual QuickProject Guide uses big, color illustrations coupled with clear, concise step-by-step instructions to show you how to complete one specific project in a matter of hours.
Our project in this book is to create a compelling, standards-compliant Web site using Cascading Style Sheets (CSS). We’ll use CSS in two main ways; first, we’ll use it for page layout, placing all of the text and images just where we want them on our pages. Then, we’ll use CSS to style the text, giving it the look we need for maximum impact. Along the way, you’ll also learn how to create CSS to wrap text around images; create menus and navigation bars; and how you can change the entire look of your site by changing just one file. By the time you’re finished with this book, you’ll have a good grounding in CSS that you can apply to your own projects and Web sites.
This book covers the basics of CSS, but it doesn’t presume to teach you all about Web development; no book of this size can fully cover such a large subject. Before you dive into CSS, you should already know how to create HTML markup and save it as a Web page and how to upload that page to a Web server so that it is accessible in a Web browser. You don’t need to be an expert XHTML jockey, but you should be familiar with the basic XHTML tags and the fundamental structure of an XHTML page.
We will build a Web site for a fictional business, Alpaca Repo. This business, if it really existed, would repossess these lovable, goofy-looking animals from owners that had fallen behind on their payments. We hasten to add that we personally would never tow away an alpaca, and no alpacas were harmed in the making of this book. Because the Web site we’ll create showcases all the basic techniques, you’ll be able to use what you learn to create or update your own Web site, whether it’s your personal Web site or an updated site for your company or organization.
In the past, it was common to lay out the elements on a Web page using XHTML tables. Text and images were placed in cells of the table. To style text on the page, you added XHTML style tags to each bit of text. These techniques are obsolete, and no modern site should use them. Instead, this book will cover how to create a modern looking site, using CSS to lay out the page elements and control the appearance of the elements on the page.
A modern Web page is made up of a number of files. These files are put together, or rendered, by the Web browser, which displays the page to the viewer. Several files make up a Web page:
The XHTML file contains the readable content of the page, i.e., the page’s text. An XHTML file is required. This file also contains some basic information about how you want the browser to understand the page.
The Cascading Style Sheet holds rules about the presentation of the content. These can be instructions for the layout of the content on the page, or instructions on how the text is to be styled. A CSS file is not, strictly speaking, required, but without one, your page will look awfully dull.
The JavaScript file has the scripts that add behaviors and user interaction to the page. This can be anything from a simple form validation that makes sure the user has filled in a form properly, to complex Web-based applications that rival desktop applications. Again, a JavaScript file isn’t required.
Most pages have one or more graphic images that add interest to the page.
The extra bits section at the end of each chapter contains additional tips and tricks that you might like to know—but that are not absolutely necessary.
You’ll need a few tools in order to write CSS and HTML. The most important program to have is a text editor. We like ones that are designed to be used by programmers, because they have the ability to color different parts of the code, which makes the code easier to read and work with. On the Macintosh, we recommend BBEdit or the free TextWrangler (shown). On Windows, Notepad is acceptable. You can also use a WYSIWYG (What You See Is What You Get) Web editor, such as Dreamweaver. Your choice of tool is actually not that important, as long as it can create plain text files. We don’t recommend the use of a word processor, such as Microsoft Word. A Word document is not a plain text file, and though you can make Word output plain text, it’s too easy to forget and accidentally save in Word format.
Of course, you’ll also need Web browsers to view your work, both locally and on the Web. Different browsers can render CSS-based pages differently, so if you’re going to get serious about CSS development, it’s a good idea to have all of the following browsers available for testing. There are only four browsers you need to worry about, because they cover the vast majority of Web users. On Windows, you need Internet Explorer 7 or later and Firefox. On the Mac, it’s Safari (this will also cover iPhone users) and Firefox.
Finally, if your site is on a hosted server (most are), you’ll need an FTP (File Transfer Protocol) program to upload the files you create from your computer to the Web server. Popular FTP programs on the Mac include Cyberduck, Transmit, and Fetch, and on Windows, CuteFTP, SmartFTP, and Filezilla. Dreamweaver and many other WYSIWYG programs have built-in FTP tools.
While this Visual QuickProject Guide will walk you through the steps required to lay out and style your Web pages using CSS, there’s much more to learn about XHTML and CSS. After you complete your QuickProject, consider picking up a couple of other books as an in-depth, handy reference.
To delve deeper into XHTML and CSS, check out HTML, XHTML & CSS: Visual QuickStart Guide, 6th Edition, by Elizabeth Castro. This book gives you a fine overview and reference.
For a closer look at just CSS, we recommend Stylin’ with CSS: A Designer’s Guide, Second Edition, by Charles Wyke-Smith.
Both books give you clear examples, concise, step-by-step instructions, and many tips that will help you improve your Web sites.