| home / programming / web / 1 |    [previous][next] |
|
|
|
Figure 1-1 shows the three parts of building a page in Dreamweaver. As you build your page visually in Dreamweaver (A), it supplies the correct HTML tags on your behalf (B). When you’re done and you save your work, it is written to the filesystem as an HTML document (B), which, when viewed in a web browser, is displayed as a graphic design again (C).
If an HTML document identifies the structure of a web page, a CSS file tells the browser how to display the structural elements that the web page contains. CSS stands for Cascading Style Sheets. CSS code, like HTML, is text-based. Instead of tags, though, CSS contains style rules or presentation instructions for the web browser.
Take the paragraph from the previous example:
When the browser runs across this bit of structure, it normally displays the text in its default paragraph style, as Figure 1-2 shows.
With CSS, you replace the browser’s built-in paragraph style with one of your own:
The p at the top of this style rule is called a style --- it's the element to which the style rule applies, which in this case happens to be the paragraph tag, <p>. The lines between the curly braces are the style definitions that the browser applies whenever it comes across a paragraph in your HTML file. Attach this stylesheet to your HTML file, and you get something that looks like Figure 1-3 in a browser.
Again, in Dreamweaver, you don’t have to write out the CSS code for your style rules manually unless you really want to. You simply choose the style definitions that you want to apply to any given structural element, and Dreamweaver writes the corresponding CSS code.
JavaScript is a language for writing short computer programs called scripts that run in the visitor’s web browser. In this sense, JavaScript is a different type of beast than markup languages like HTML and CSS. Markup languages are for telling the browser what’s what—this is a paragraph, for instance, and it needs to look like this—but you’ll never use a markup language to write useful functions, such as, “When the visitor clicks this button, I want you to check the order form for missing or incomplete fields.” This is where scripting languages like JavaScript come in.
Scripts add a degree of interactivity to your pages that wouldn’t ordinarily exist with HTML and CSS alone. They’re perfect for clever features like order forms that tell you when you’ve forgotten to supply your email address or images that appear to change when you roll over them with the mouse pointer.
JavaScripts may be clever, but they can also be difficult and confusing to code. Thankfully, Dreamweaver takes away all the coding and subsequently all the hassle. Want button rollovers on your site? Done! No need wasting precious time making sure your detailed code is picture perfect. Dreamweaver comes with dozens of pre-built and completely customizable scripts called JavaScript behaviors that you may attach to your pages at will. You choose the behavior that you want, and Dreamweaver adds the necessary JavaScript to make the behavior work.
The visual representation of your web page in Dreamweaver is useful as a guide, but it isn’t exact. It’s an approximation of how your page actually looks in a web browser. And because different browsers tend to display the same web page differently, the only way to be sure about your pages is to test them --- often --- in a variety of browsers.
It isn’t hard to assemble an arsenal of browsers for testing purposes, and you’ll definitely like the price: it’s free. Table 1-1 shows you which browsers to get and where to find a free download.
Microsoft Internet Explorer (MSIE or IE for short) is by far the most popular web browser on the market today, mainly because it comes preinstalled on all Windows computers. Even if you don’t personally use IE for your excursions on the web, most of your visitors do, so dust off your existing copy if you’re a Windows user, or download your free copy if you’re designing on a Mac.
The last couple of Mac OS X operating systems have come with a built-in browser called Safari. There isn’t currently a version of Safari for Windows, but you don’t need to run out and buy a Mac just so that you have Safari at your disposal. The percentage of Safari users is a very small fraction of all traffic on the Web, so if potentially alienating visitors who come to your site using Safari doesn’t bother you, then you could just skip testing in this browser. However, if you would like to get a basic idea of how it looks on Safari, you could use Daniel Vine’s excellent, free service at http://www.danvine.com/ icapture/ to see a screen capture of pages you’ve designed as they would be displayed in Safari.
Mac heads should also note that the Netscape Browser beginning with Version 8.0 is only available on Windows systems. However, the Netscape Browser is based on Mozilla Firefox, so testing in Firefox is fine if you can’t have both browsers. Windows users should get and test in both, however, because Netscape Browser and Firefox are just different enough to cause mischief.
| home / programming / web / 1 | [previous][next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 6, 2006
URL: http://webreference.com/programming/web/1
