In order to get started in the next chapter, you'll need the following tools to help you out:
You'll need a good HTML editor. Dreamweaver is also a good option (http://www.adobe.com/products/dreamweaver/), although I prefer to use Coda for Mac (http://www.panic.com/coda/). When I was on a PC, I loved the free text/code editor HTML-kit (http://www.htmlkit.com/). Any HTML or text editor that lets you enable the following features will work just great. (I recommend you enable all of the following):
View line numbers: This comes in very handy during the validation and debugging process. It can help you find specific lines in a theme file, for which a validation tool has returned a fix. This is also helpful for other theme or plugin instructions given by the author, which refer to a specific line of code that needs editing.
View syntax colors: Any worthwhile HTML editor has this feature usually set as a default. The good editors let you choose your own colors. It displays code and other markup in a variety of colors, making it easier to distinguish various types of syntax. Many editors also help you identify broken XHTML markup, CSS styles, or PHP code.
View non-printing characters: You might not want this feature turned on all the time. It makes it possible to see hard returns, spaces, tabs, and other special characters that you may or may not want in your markup and code.
Text wrapping: This of course lets you wrap text within the window, so you won't have to scroll horizontally to edit a long line of code. It's best to learn what the key-command shortcut is for this feature in your editor, and/or set up a key-command shortcut for it. You'll find it easier to scroll through unwrapped, nicely-indented, markup and PHP code to quickly get a general overview or find your last stopping point; however, you will still want to turn it on quickly so that you can see and focus your attention on one long line of code.
Tip
Open source HTML editors: I've also used Nvu (http://www.net2.com/nvu/) and Kompozer (http://kompozer.net/). They're both free, open source, and available for Mac, PC, and Linux platforms. Kompozer was made from the same source as Nvu and, apparently, fixes some issues that Nvu has. (I haven't run into any major issue with Nvu myself; both editors are a bit limited for my regular use, but I do like being able to format XHTML text quickly and drag-and-drop form objects onto a page.) Both editors have a Source view, but you must be careful while switching between the Normal and the Source view tabs! Nvu and Kompozer are a little too helpful, and will try to rewrite your handcoded markup if you haven't set your preferences properly!
Linux users of Ubuntu and Debian (and Mac users with Fink) might also be interested in checking out Bluefish editor (http://bluefish.openoffice.nl). I haven't used it myself, but the site's writeup looks great.
The next piece of software you'll need is a graphic editor. While you can find plenty of CSS-only WordPress themes out there, chances are that you'll want to expand on your design a little more and add nice visual enhancements. These are best achieved by using a graphic editor such as GIMP, Photoshop, or Fireworks. Adobe owns both Photoshop and Fireworks and also offers a light and less-expensive version of Photoshop, called Photoshop Elements that will allow you to do everything I discuss in this book (http://www.adobe.com/products/).
While I'm an advocate of open source software and enjoy working with GIMP, in my line of work, the industry standard is Photoshop or Fireworks. I'll be using Adobe Photoshop in this title and assume that you have some familiarity with it or GIMP and working with layers. Any graphic editor you prefer is fine. One that allows you to work with layers is very helpful, especially with the design comping (or mockup) techniques I suggest in Chapter 2.
Note
If you need a graphic editor, then you can try GIMP. If you're on a budget and in need of a good image editor, I'd recommend it. It's available for PC, Mac, and Linux. You can get it from http://gimp.org/.
On the other hand, if you prefer vector art, then try Inkscape, which is also available for PC, Mac, and Linux. Bitmap graphic editors are great in that they also let you enhance and edit photographs. But if you just want to create buttons or other interface elements and vector-based illustrations, Inkscape is worth trying out (http://inkscape.org).
Finally, you'll need a web browser. Here, I'm not so flexible. I strongly suggest that you use the latest stable version of the Firefox browser, available at http://mozilla.com/firefox/.
Now one may ask why use Firefox? I view this browser as a great tool for web developers. It's as essential as my HTML editor, graphics, and FTP programs. Firefox has great features that we'll be taking advantage of to help us streamline the design creation and theme development process. In addition to those built-in features such as the DOM Source Selection Viewer and adhering to CSS2 standards as specified by the W3C, Firefox also has a host of extremely useful extensions such as the Web Developer's Toolbar and Firebug, which I recommend to further enhance your workflow.
Tip
Get the extensions:
You can get the Web Developer's Toolbar from https://addons.mozilla.org/en-US/firefox/addon/60 and Firebug from https://addons.mozilla.org/en-US/firefox/addon/1843. Be sure to visit the developers' sites to learn more about each of these extensions.
Don't worry, we won't forget about all those other browsers! However, in addition to Firefox having all the helpful features and extensions, IE has a thing called quirks mode, which we will learn all about in Chapter 4. While Microsoft has attempted a lot of improvements and tried to become more W3C compliant with IE7 and now IE8, there are still some CSS rendering issues between these IE browsers and others.
Your best bet will be to design for Firefox first and then, if you notice that things don't look so great in IE6, IE7, or IE8, there are plenty of "standardized" fixes and workarounds for these three browsers because their "quirks" are just that—wonks and well documented.
As we'll learn in Chapter 4, if you design looking at only one version of IE, then find it a mess in Firefox, Opera, or Safari, or the new Google Chrome you're going to have a much harder time fixing the CSS you made for IE in a more "standards-compliant" browser.
Firefox doesn't have to become your only browser. You can keep using IE or any other browser you prefer. I myself prefer Opera for light and speedy web surfing, but it doesn't handle all pages perfectly. As a designer on Mac who works with and for other creative Mac-based professionals, I regularly check my work in Safari. Firefox is one of my key web development tools.