Section 1.1. Choosing Software
1.1. Choosing SoftwareA web site is a patchwork of computer files of various types. Some are HTML documents. Others are image files. Yet others are multimedia files like Flash movies and Acrobat documents. To create and edit these files and organize them into a coherent, consistent wholeto turn them into a web siteyou need several pieces of software. Unfortunately, no single software packagenot even Dreamweavergives you the tools to do everything from designing your pages to creating images and multimedia to previewing your site and sampling the user experience. With that in mind, here is a checklist for the well-rounded web designer's software library:
1.1.1. Choosing a Code EditorA code editor is software that enables you to build web pages. Dreamweaver's got you covered here, so you can check the code editor off your list. In fact, Dreamweaver does you two better. It includes tools for organizing your pages into a site and then publishing your site on the World Wide Web. As your code editor, Dreamweaver is the most essential piece of software in your studio, because it's the center of production from the beginning of your project to the very end. You use Dreamweaver to create the HTML files that become the foundation of your site. You build the layout of the pages, add the text, connect the links, and position the images and multimedia files. The site-management features help you to craft the flow of your site from page to page and section to section, and the publishing features help you to launch your site and keep it up to date with your latest changes and additions. But the Dreamweaver feature that appeals the most to visually-oriented people like designers and graphic artists is that the code editing happens behind the scenes. You build your site in a WYSIWYG environmentthat's What You See Is What You Get, meaning that you don't code your layouts into existence but draw them on the screen, much like you would on a piece of paper. Dreamweaver translates your design into code that's usable in any web browser.
As you build your site, you'll use Dreamweaver to create three types of code: HTML, CSS, and JavaScript.
1.1.1.1. About HTMLHTMLHyperText Markup Languageis the language of the Web, and HTML files are its lifeblood. When you go to your favorite web site and choose a page, what you're actually seeing on screen is an HTML document that the browser has interpreted and displayed visually, in the form of a graphic design. An HTML document is essentially a text file that has been marked up to indicate its structure, or the page elements that make it up. Take a web page that contains, among other things, the following paragraph:
To indicate that this piece of text is a paragraph and not some other structural element, like a heading, for instance, or an item in a list, you drop special markers called tags around it. Most tags come in opening/closing pairs. The opening tag goes immediately before the element in the HTML code, while the closing tag comes immediately after it. The correct pair of tags for a paragraph is <p>…</p>, so:
You have now identified this piece of text as a paragraph. When a web browser comes to this line of code in the HTML file, it understands that this text is supposed to be a paragraph, which in turn determines how the browser displays the text on the screen.
Now say you have a list of items to present:
To mark these up as list items, you place the <li> (list item) tag around each one: <li>Chemical</li> <li>Biological</li> <li>Nuclear</li> As you'll see a bit later in this book, there are two kinds of lists in HTML: unordered (bulleted) and ordered (numbered). To display your items in the bulleted format, you mark up the entire list with the <ul> (unordered list) tag: <ul> <li>Chemical</li> <li>Biological</li> <li>Nuclear</li> </ul>
If you want a numbered list:
you go with the <ol> (ordered list) tag: <ol> <li>Chemical</li> <li>Biological</li> <li>Nuclear</li> </ol> Now, if you're starting to get that old clutch in your chest like the one from trigonometry class, worry not. When you work in Dreamweaver, it's more important to understand the concept of tagging, not the exact process behind it. 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). Figure 1-1. From design (A), to HTML (B), to graphic display (C) 1.1.1.2. About CSSIf 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.
Figure 1-2. The default paragraph style in the browser lacks a certain gravity With CSS, you replace the browser's built-in paragraph style with one of your own: p { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; } The p at the top of this style rule is called a style selectorit'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. Figure 1-3. With CSS, you can give this paragraph the attention that it deserves 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. 1.1.1.3. About JavaScriptJavaScript 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 whatthis is a paragraph, for instance, and it needs to look like thisbut 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.
1.1.2. Stocking Up on Web BrowsersThe 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 themoftenin 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. 1.1.3. Choosing an Image EditorAn image editor is software for creating and editing computer graphics. Dreamweaver does not fall into this category. While you can use Dreamweaver to place image files on your web pages and make simple edits to the size and dimensions of these images, you can't actually edit the pictures themselves or generate image files from scratch.
When you add an image to a web page, it's important to note that the image remains as a separate file. You don't embed the image into the HTML document the way that you might add a picture to a word processor file. Instead, you add a pointer to the image in the HTML code. The pointer tells the browser where to find the image file online. The browser sees the pointer, follows it, grabs the image, and incorporates it into the page. This happens every time that the visitor requests the page. (Incidentally, when you load a web page that shows broken graphics, what's happening is that the browser can't find the image in the specified location.) When you publish your HTML documents on the Web, then, you must also be sure to publish all the image files for your site. Image editors fall into two basic types: paint programs and draw programs. A paint program deals in bitmap or raster graphics, which are computer images made up of small colored boxes called pixels. Adobe Photoshop and Macromedia Fireworks are excellent paint programs.
A draw program is for vector graphics, which are computer images made up of paths, or outlines. Adobe Illustrator and Macromedia FreeHand are fine examples of draw programs.
For the Web, bitmap graphics are by far the most common, so you want to choose a paint program, not a draw program. Ideally, you should get yourself a copy of Photoshop or Fireworks for your image-editing needs. Fireworks in particular was made with the Web in mind, and it's well integrated with Dreamweaver. It comes with Macromedia Studio 8, so if you have Studio, you already have Fireworks. You can also buy it separately.
1.1.4. Choosing Multimedia SoftwareMultimedia (or simply media) refer to a wide variety of digital data, including animations, audio, and video. To create multimedia for your site, you need dedicated authoring tools. You probably have a few of these already. Microsoft Windows Media Player springs to mindyou can use this application to capture audio from music CDs. To create different kinds of media formats, or for more robust editing capabilities, you'll need to invest in additional software.
Multimedia, like images, exist as separate computer files. You place them on your web pages in Dreamweaver. Dreamweaver adds the corresponding pointers to the HTML code, and, when you publish your pages, you upload the multimedia files so that the browser can find them. However, unlike images, your visitors require additional pieces of software called plug-ins to open your multimedia files. Every multimedia format has its own browser plug-in. For Flash movies, it's the Flash Player. For QuickTime video, it's the QuickTime Plug-in. If your visitors don't have the necessary plug-ins installed on their computers, then your multimedia files won't work. It doesn't matter if you, the designer, have the correct plug-ins on your computer. Your visitors need to have the same plug-ins on their computers.
On the upside, the plug-ins for all the popular multimedia formats are free. Your visitors can download them, install them, and enjoy. On the downside, visitors generally dislike having to leave your site to download special software. Once they're gone, they might not come back. Plus, the vast majority of web users have no interest in knowing about plug-ins. When they go to a web site, they expect it to work. They don't want to understand why it doesn't work. For this reason, it's the wise web designer who uses multimedia very judiciously. Your site doesn't need to be an extravaganza of animation, audio, and video. A few choice selections go a long way. Also, it behooves you to pick multimedia formats whose plug-ins the visitor is already likely to have. Table 1-2 lists many of these.
Virtually every computer on the Web today has the Flash Player plug-in, so if you want to include multimedia on your site, the Flash format is a very safe choice. Macromedia Flash Professional 8the Flash authoring environmentcomes with Studio 8, and it's available as a standalone product. Don't confuse the authoring tool with the free plug-in, though. The Flash Player plug-in allows you to view Flash movies, not create them. Some multimedia formats, particularly for audio and video, open in a variety of plug-ins and applications. Table 1-3 shows the most common formats. The chances are good that your visitor has some means of viewing or hearing these types of files.
|
EAN: 2147483647
Pages: 154