HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [31]
Figure 3-5 shows the Wiley home page with some of the Web Developer toolbar features active. The Edit CSS frame on the left allows you to modify the look of the page in real time, and the thick outlines help visualize the page organization. (I describe these ideas in detail in Books III and IV.)
When you activate the Web Developer toolbar (use the View⇒Toolbars menu command to hide or show it), you can use it to do the following:
♦ Edit your page on the fly. The Edit HTML Entry option on the Miscellaneous drop-down menu opens a small text editor on the left side of the screen. You can make changes to your HTML here and immediately see the results in the main screen. The changes aren’t permanent, but you can save them.
♦ Validate your pages. Choosing CSS⇒Edit CSS is the command to validate your page, but the Web Developer toolbar also adds some hotkeys to Firefox so you can instantly send your page to the W3C validator. Pressing Ctrl+Shift+A contacts the W3C validator and then sends your page to it. It’s much easier than memorizing the validator address. This feature alone is worth the short download time. You can also do other kinds of validation, check your CSS, or see how well your page conforms to various guidelines for people with disabilities.
♦ Manipulate CSS code. After you define your page with XHTML, use CSS to dress it up. The CSS menu has a number of great tools for seeing how CSS is set up and experimenting with it on the fly. I explain how to use the CSS tools in Books II and III, where I describe CSS.
♦ View your page in different sizes. Not everybody has a huge flat-panel display. It’s important to see how your page looks in a number of standard screen resolutions.
♦ Get a speed report. Your Web page may load great on your broadband connection, but how does it work on Aunt Judy’s dialup? Web Developer has a tool that analyzes all the components of the page, reports how long each component takes to download over various connections, and suggests ways to improve the speed of your page downloads.
♦ Check accessibility. You can run a number of automated tests to determine how accessible your page is. Use the accessibility tests to see how your page will work for people with various disabilities and whether you pass certain required standards (for example, requirements of government sites).
The Web Developer toolbar can do a lot more, but these are some of the highlights. The toolbar is a small and fast download, and it makes Web development a lot easier. There’s really no good reason not to use it.
Using Firebug
The Firebug extension is another vital tool for Web developers. Firebug concentrates more on JavaScript development rather than pure XHTML development, but it’s also useful for XHTML beginners. Figure 3-6 shows the Firebug extension opened as a panel in Firefox.
Firebug’s Inspect mode allows you to compare the HTML code to the output. When you move your mouse over a part of the rendered page, Firebug highlights the relevant part of the code in the other panel. Likewise, you can move the mouse over a code fragment and see the affected code segment, which can be extremely handy when things aren’t working out the way you expect.
You can view the HTML code as an outline, which helps you see the overall structure of the code. You can also edit the code in the panel and see the results immediately, as you can with the Web Developer toolbar, which I discuss in the previous section. Changes you make in Firebug aren’t permanent, but you can copy them to your text editor.
Firebug really shows off when you get to more sophisticated techniques, such as CSS, DOM Manipulation, JavaScript, and AJAX. Books IV and VII show you how Firebug can be used to aid in these processes.
Figure 3-6: Firebug gives a detailed view of your page.
Using a Full-Blown IDE
You might think I hate dedicated Web page editors, but I don’t. I use them all the time for other kinds of programming. The problem is that up until recently, there weren’t any real IDEs