31,19 €
Themes are among the most powerful features that can be used to customize a web site, especially in WordPress. Using custom themes you can brand your site for a particular corporate image, ensure standards compliance, and create easily navigable layouts. But most WordPress users still continue to use default themes as developing and deploying themes that are flexible and easily maintainable is not always straightforward.
It's easy to create powerful and professional themes for your WordPress web site when you've got this book to hand. It provides clear, step-by-step instructions to create a robust and flexible WordPress theme, along with best practices for theme development. It will take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. It reviews the best practices from development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live. The last three chapters are dedicated to additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins.
Whether you're working with a pre-existing theme or creating a new one from the ground up, WordPress Theme Design will give you the know-how to understand how themes work within the WordPress blog system, enabling you to take full control over your site's design and branding.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 368
Veröffentlichungsjahr: 2009
Copyright © 2009 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2009
Production Reference: 1201109
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849510-08-0
www.packtpub.com
Cover Image by Vinayak Chittar (<[email protected]> )
Author
Tessa Blakeley Silver
Reviewer
Grigore Ioachim Alexandru
Acquisition Editor
David Barnes
Development Editor
Ved Prakash Jha
Technical Editors
Gaurav Datar
Conrad Sardinha
Indexer
Rekha Nair
Editorial Team Leader
Gagandeep Singh
Project Team Leader
Lata Basantani
Project Coordinator
Poorvi Nair
Proofreader
Sandra Hopper
Graphics
Nilesh R. Mohite
Production Coordinator
Shantanu Zagade
Cover Work
Shantanu Zagade
Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multimedia development, where she focuses on usability and interface design.
Tessa owns a consulting and development company hyper3media (also pronounced as hyper-cube media): http://hyper3media.com. Prior to starting her company, Tessa was the VP of Interactive Technologies at eHigherEducation an online learning and technology company developing compelling multimedia simulations, interactions, and games, which met online educational requirements such as 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department.
Tessa has authored a few books for Packt Publishing, including Joomla! 1.5 Template Design (ISBN: 7160).
I send a huge "thank you" to the Packt team who has made this title possible and whose help in getting it out into the world has been invaluable. Special thanks to Ved, Grigore, Gaurav, and Conrad for their editing work. Additional thanks goes to Poorvi for her very hard work and diligence in keeping me to a schedule. I'd also like to thank the exemplary WordPress community and all who participate and power the open source world and strive to improve the accessibility of the Web for all. Additional thanks goes out to my very patient family who spent quite a few evenings without me while I worked on this title.
Grigore Ioachim Alexandru is a web developer and an SEO engineer currently working at SITECONSTRUCT Romania, a web design company in Romania. He is studying at the FEAA college in the A.I.Cuza University in Iasi, learning economical sciences.
Alex sustained about 50 Romanian projects and an SEO book within the company he works at. Currently, Alex is actively developing his own blog as well as writing quality WordPress content and articles for various online resources.
You can follow Alex on Twitter at http://twitter.com/Designstrike.
I would like to say "thank you" to the team from Packt Publishing for giving me this opportunity to be a part of this project.
This book will take you through the ins and outs of creating sophisticated, professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. This book reviews best practices in development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live. The last three chapters are dedicated to additional tips and tricks for adding popular site enhancements to your WordPress theme designs using third-party plugins.
The WordPress publishing platform has excellent online documentation, which can be found at http://codex.wordpress.org. This title does not try to replace or duplicate that documentation, but is intended as a companion to it.
My hope is to save you some time finding relevant information on how to create and modify themes in the extensive WordPress codex, help you understand how WordPress themes work, and show you how to design and build rich, in-depth WordPress themes yourself. Throughout the book, wherever applicable, I'll point you to the relevant WordPress codex documentation along with many other useful book references, online articles, and sites.
I've attempted to create a realistic WordPress theme example that anyone can take the basic concepts from and apply to a standard blog, while at the same time, show how flexible WordPress and its theme capabilities are. I hope this book's theme example shows that WordPress can be used to create unique websites that one wouldn't think of as "just another blog".
Whether you're working with a preexisting theme or creating a new one from the ground up, this title will give you the know-how to understand how themes work within the WordPress blog system, enabling you to take full control over your site's design and branding.
I'd like to thank those of you in the WordPress community who took the time to read the first edition of this book and e-mailed me your comments along with posting your book reviews. This is your book.
Chapter 1: Getting Started as a WordPress Theme Designer introduces you to the WordPress blog system and lets you know what you need to be aware of regarding the WordPress theme project you're ready to embark on. The chapter also covers the development tools that are recommended and web skills that you'll need to begin developing a WordPress theme.
Chapter 2: Theme Design and Approach looks at the essential elements you need to consider when planning your WordPress theme design. It discusses the best tools and processes for making your theme design a reality. The chapter explains some "rapid design comping" techniques and gives some tips and tricks for developing color schemes and graphic styles for your WordPress theme. By the end of the chapter, you'll have a working XHTML and CSS-based "comp" or mockup of your theme design, ready to be coded up and assembled into a fully functional WordPress theme.
Chapter 3: Coding It Up uses the final XHTML and CSS mockup from Chapter 2 and shows you how to add WordPress PHP template tag code to it and break it down into the template pages a theme requires. Along the way, this chapter covers the essentials of what makes a WordPress theme work and how to enable your theme to take advantage of new WordPress 2.8 features such as sticky posts and threaded comments. At the end of the chapter, you'll have a basic, working WordPress theme.
Chapter 4: Debugging and Validation discusses the basic techniques of debugging and validation that you should employ throughout your theme's development. It covers the W3C's XHTML and CSS validation services, along with how to use the Firefox browser and some of its extensions as a development tool, and not as just another browser. This chapter also covers troubleshooting some of the most common reasons "good code goes bad", especially in IE, along with best practices for fixing those problems, giving you a great-looking theme across all browsers and platforms.
Chapter 5: Putting Your Theme into Action discusses how to properly set up your WordPress theme's CSS stylesheet so that it loads into WordPress installations correctly. It also discusses compressing your theme files into the ZIP file format to share with the world and running some test installations of your theme in WordPress' Administration panel so that you can share your WordPress theme with the world.
Chapter 6: WordPress Template Tag, Function, and CSS Reference covers key information under easy-to-look-up headers that will help you with your WordPress theme development—from the CSS class styles that WordPress itself outputs, to WordPress' PHP template tags and plugin hooks, to a breakdown of "The Loop" along with additional WordPress functions and features such as shortcodes that you can take advantage of in your theme development. Information in this chapter is listed along with key links to bookmark, in order to make your theme development as easy as possible.
Chapter 7: Ajax/Dynamic content and Interactive Forms continues showing you how to enhance your WordPress theme by looking at the most popular methods for leveraging AJAX techniques in WordPress using plugins and widgets. It also gives you a complete background on AJAX and when it's best to use those techniques or skip them. The chapter also reviews some cool JavaScript toolkits, libraries, and scripts you can use to simply make your WordPress theme appear "Ajaxy".
Chapter 8: Dynamic Menus and Interactive Elements dives into taking your working, debugged, validated, and properly packaged WordPress theme from the earlier chapters, and enhancing it with dynamic menus using the SuckerFish CSS-based method and Adobe Flash media.
Chapter 9: Design Tips for Working with WordPress reviews the main tips from the previous chapters and covers some key tips for easily implementing today's coolest CSS tricks into your theme, as well as a few final SEO tips that you'll probably run into once you really start putting content into your WordPress site.
Essentially, you'll need a code editor, the latest Firefox browser, and any other web browser you would like your theme to be displayed in. Most importantly, you'll need an installation of the latest, stable version of WordPress.
WordPress 2.7+ and 2.8+ require the following to be installed:
For more information on WordPress 2.8's requirements, browse to http://wordpress.org/about/requirements/.
You'll also need a code editor and an image editor such as GIMP, Photoshop, Fireworks, or Corel Paint (or any graphic editor you prefer really). This book covers samples using Photoshop and some samples in GIMP.
This book can be used by WordPress users or visual designers (with no server-side scripting or programming experience) who are used to working with the common industry-standard tools such as Photoshop and Dreamweaver, or other popular graphic, HTML, and text editors.
Regardless of your web development skill set or level, you'll be walked through the clear, step-by-step instructions, but familiarity with a broad range of web development skills and WordPress know-how will allow you to gain maximum benefit from this book.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "You have to add it to your theme's header.php or files that contain the header tags "
A block of code is set as follows (Code and markup preceded and ended with ellipses "..." are extracted from the full context of code and/or a larger body of code and markup. Please reference the downloadable code packet to see the entire work.):
When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be shown in bold:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "The best way to proceed with the Error Console is to first hit Clear and then reload your page to be sure that you're looking only at current bugs and issues for that specific page ".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, and mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/0080_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books— maybe a mistake in text or code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Welcome to WordPress theme design! This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. WordPress was originally, and is foremost, a blog system. Throughout the majority of this book's chapters—for simplicity's sake—I'll be referring to it as a blog or blog system. But don't be fooled! Since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plugins and widgets, which make it comparable to a full CMS ( Content Management System ).
In these upcoming chapters, we'll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process. From design tips and suggestions, to packaging up the final theme, we'll review the best practices for a range of topics—designing a great theme, rapid theme development, coding markup, testing, debugging, and taking it live.
The last three chapters are dedicated to additional tips, tricks, and various "how to" recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins, as well as creating your own custom plugins.
As you're interested in generating custom themes for WordPress, you'll be very happy to know (especially all you web standards evangelists) that WordPress really does separate content from design.
You may already know from painful experience that many content management and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout markup (sometimes using table markup), peppered with all sorts of predetermined selector id and class names.
You usually have to do a fair amount of sleuthing to figure out what these id and classes are so that you can create custom CSS rules for them. This is very time consuming.
The good news is, WordPress publishes only two things:
That's it! The list tags don't even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.
The culmination of all those styling and display decisions, along with special WordPress template tags that pull your site's content into you design, are what your WordPress theme consists of.
The answer to this question is—no. Even before the release of themes in WordPress 2.x, WordPress has been capable of managing static pages and subpages since version 1.5. Static pages are different from blog posts in that they aren't constrained by the chronology of posts. This means you can manage a wide variety of content with pages and their subpages.
WordPress also has a great community of developers supporting it with an ever-growing library of plugins. Using plugins, you can expand the capabilities of your server-installed WordPress site to include infinite possibilities such as event calendars, image galleries, sidebar widgets, and even shopping carts. For just about anything you can think of, you can probably find a WordPress plugin to help you out.
By considering how you want to manage content via WordPress, what kind of additional plugins you might employ, and how your theme displays all that content, you can easily create a site that is completely unique and original in concept as well as design.
Again, WordPress was built to be a blog system, and it has some great blog post and category tools. But if you want to use it to manage a brochure-style site, have a particular third-party plugin to be the main feature of your site, and downplay or even remove the blog, that's fine too! You'll just tweak your theme's template files to display your content the way you prefer (which is something you'll be very good at after reading this book).
I approach theme design from two angles.
There are many benefits to using or tweaking already built themes. First, you save a lot of time getting your site up with a nice theme design. Second, you don't need to know as much about CSS, XHTML, or PHP. This means that with a little web surfing, you can have your WordPress site up and running with a stylish look in no time at all.
The drawback to using an already built theme is that it may not save you as much time as you would hope for. You may realize, even with the new header text and graphic, several other sites may have downloaded and/or purchased it for themselves and you don't stand apart enough.
Perhaps your site needs a special third-party plugin for a specific type of content; it might not look quite right without a lot of tweaking. And while we're discussing tweaking, I find that every CSS designer is different and sets up their theme's template files and stylesheets accordingly. While it makes perfect sense to them, it can be confusing and time consuming to work through.
Your approach may have started out as simplicity, but then, for one reason or another, you find yourself having to dig deeper and deeper through the theme and pretty soon it doesn't feel like quick tweaking anymore. Sometimes you realize for simplicity's sake (no pun intended)—it would have been a whole lot quicker to start from scratch.
Before trying to cut corners with a preexisting theme, make sure your project really is as simple as it claims to be. Once you find a theme, check that you are allowed to tweak and customize it (such as an open source or Creative Commons license or royalty free purchase from a template site), and that you have a look at the stylesheet and template files. Make sure the theme's assets seem logical and make sense to you.
Theme frameworks are wonderful in that they provide the core functionality of a theme, already started for you. The idea is they let you create child themes off the main theme, which you can then easily style to your liking.
They're particularly useful to designers who are short on time, very good with CSS, and don't want to deal with the learning curve of having to understand WordPress' template tags, hooks, and template page hierarchy.
The whole point of this book is to introduce you to the above concepts and introduce you to the basics of WordPress theme features so that you can create elegant comprehensive themes from scratch. You can then see how getting a little creative will enable you to develop any kind of site you can imagine with WordPress. You'll also be able to better take advantage of a theme framework, as you'll understand what the framework is accomplishing for you "under the hood" , and you would also be able to better customize the framework if you'd like to.
For many frameworks, there is still some amount of learning curve to getting up and running with them. But less of it will deal directly with futzing with PHP code to get WordPress to do what you want.
I'd encourage you to take a look at development with a framework and compare it to development from scratch. Having the skills this book provides you with under your belt will only help, even if you choose to go with a framework to save time.
Popular theme frameworks to choose from:
More and more frameworks show up every day, and each framework tries to address and handle slightly different focuses, features, and types of developers. As a bonus, some frameworks add options into the WordPress administration panel that allow the end user to add and remove features to/from the child theme they've selected.
You'll want to look at frameworks in terms of the options they offer that suit your development style, needs, and the overall community the framework caters to, to see if the framework is a good fit for your site's requirements.
WPFramework is a good general framework to start with (http://wpframework.com/). Its aim is to stay straightforward and simple, while cutting down theme development time.
If you're interested in a framework that offers a lot of child themes that can be easily tweaked with just CSS and will also add a lot of bells and whistles for the end user in the administration panel, you'll want to look at more robust frameworks such as Carrington (http://carringtontheme.com), Thematic (http://themeshaper.com/thematic/), and Hybrid (http://themehybrid.com/).
These frameworks may appear a bit more complex at first, but offer a range of rich features for developing themes and, especially if you understand the essentials of creating WordPress themes (as you will after reading this book), can really aid you in speeding up your theme development.
Again, there are many theme frameworks available. A quick Google search for "WordPress Theme Frameworks" will turn up quite a plethora to choose from.
The approach of this book is going to take you through the unique and beautiful route (or unique and awesome, whatever your design aesthetics call for) with the idea that once you know how to create a theme from scratch, you'll be more apt at understanding what to look for in other WordPress themes. You'll then be able to assess when it really is better or easier to use an already built theme versus building up something of your own from scratch.
This book is geared toward visual designers (with no server-side scripting or programming experience) who are used to working with the common industry standard tools such as Photoshop and Dreamweaver or other popular graphic, HTML, and text editors.
Regardless of your web development skillset or level, you'll be walked through clear, step-by-step instructions. But there are many web development skills and WordPress know-how that you'll need to be familiar with to gain maximum benefit from this book.
Most importantly, you should already be familiar with the most current stable version of WordPress. You should understand how to add content to the WordPress blog system and how its posts, categories, static pages, and subpages work. Understanding the basics of installing and using plugins will also be helpful (though we will cover that to some extent in the later chapters of the book as well).
Even if you'll be working with a more technical WordPress administrator, you should have an overview of what the WordPress site that you're designing entails, and what (if any) additional plugins or widgets will be needed for the project. If your site does require additional plugins and widgets, you'll want to have them handy and/or installed in your WordPress development installation (or sandbox—a place to test and play without messing up a live site). This will ensure that your design will cover all the various types of content that the site intends to provide.
What version of WordPress 2.x does this book use? This book focuses on WordPress 2.7 and 2.8. Everything covered in this book has been tested and checked in WordPress 2.8.5. You may occasionally note screenshots from version 2.7 being used, but rest assured, any key differences between 2.8, 2.7, and even 2.5 are clearly noted when applicable. While this book's case study is developed using version 2.7 and 2.8, any newer version should have the same core capabilities, enabling you to develop themes for it using these techniques. Bug fixes and new features for each new version of WordPress are documented at http://WordPress.org.
If you are new to WordPress, then I recommend you read WordPress Complete by April Hodge Silver.
I'll be giving detailed explanations of the CSS rules and properties used in this book, and the "how and why" behind those decisions. You should know a bit about what CSS is, and the basics of setting up a cascading stylesheet and including it within an XHTML page. You'll find that the more comfortable you are with CSS markup and how to use it effectively with XHTML, the better will be your WordPress theme-creating experience.
You don't need to have every markup tag in the XHTML standard memorized. (If you really want, you can still switch to the Design view in your HTML editor to drop in those markup tags that you keep forgetting—I won't tell). However, the more XHTML basics you understand, the more comfortable you'll be working in the Code view of your HTML editor or with a plain text editor. The more you work directly with the markup, the quicker you'll be able to create well-built themes that are quick loading, semantic, expand easily to accommodate new features, and are search engine friendly.
You definitely don't have to be a PHP programmer to get through this book, but be aware that WordPress uses liberal doses of PHP to work its magic! A lot of this PHP code will be directly visible in your theme's various template files. PHP code is needed to make your theme work with your WordPress installation, as well as make individual template files work with your theme.
If you at least understand how basic PHP syntax is structured, you'll be much less likely to make mistakes while retyping or copying and pasting code snippets of PHP and WordPress template tags into your theme's template files. You'll be able to more easily recognize the difference between your template files, XHTML, and PHP snippets so that you don't accidentally delete or overwrite anything crucial.
If you get more comfortable with PHP, you'll have the ability to change out variables and call new functions or even create new functions on your own, again infinitely expanding the possibilities of your WordPress site.
Beef up those web skills!
I'm a big fan of the W3Schools site. If you'd like to build up your XHTML, CSS, and PHP understanding, you can use this site to walk you through everything from basic introductions to robust uses of top web languages and technologies. All the lessons are easy, comprehensive, and free at http://w3schools.com.
If your project will be incorporating any other special technologies such as JavaScript, AJAX, or Flash content, the more you know and understand how those scripting languages and technologies work, the better it is for your theme-making experience (again W3Schools.com is a great place to start).
The more web technologies you have a general understanding of, the more likely you'll be able to intuitively make a more flexible theme that will be able to handle anything you may need to incorporate into your site in the future.
More of a visual "see it to do it" learner?
Lynda.comhas a remarkable course selection from the top CSS, XHTML/XML, JavaScript, PHP, and Flash/ActionScript people in the world. You can subscribe and take the courses online or purchase DVD-ROMs for offline viewing. The courses might seem pricey at first, but if you're a visual learner (as most designers are), it's worth spending money and time on them. You can refer to the official site http://lynda.com.
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):
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.
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.
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
