Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming Drupal
Read Part 5 - Drupal Admin

Introduction

In our last tutorial we covered the setup of our band website. We now have a brochure style site in place that could be used to promote GoBand or add community building functionality to. We’ll wrap up this series by looking at the resources Drupal has to offer to build on this foundation and extend what we have setup.

Recommended Modules

There are a handful of Drupal Modules that will help any website. Here is a list with some explanation of what these modules do.

• Views - Extends the functionality of Drupal by allowing you to reformat content based on a plethora of criteria and then present it on a page or within a block. For example you could show all work that an author created with a view. Views has a handy interface to help you out. This is one of the best modules out there and will likely be in the core of Drupal in the future.
• Content Construction Kit (CCK) - Allows you to add form fields to content. Some of the core functionality of CCK was already moved into Drupal 5. The ability to add custom content types starting as part of CCK before migrating into Drupal Core. If you ever need to define custom fields for new content for your clients this is the set of modules to use.
• Path Auto - Takes the Drupal default URL paths and allows you to make them readable automatically. There are options you can choose between that will change the path based on what you select. For example, if you want your blog posts to have URLs based on categories and page titles then no problem. This module can be set to do that.
• Panels - Allows you to create pages that are divided into areas of the page. Very useful for creating columns within your layout that are added on top of your theme.
• SimpleMenu - Adds a drop down navigation to the tip top of the page that works great for administering Drupal.

Adding a Blog to the GoBand Site

First of all don’t turn on the Blog Module that ships with Drupal unless you want multiple blogs that tie together. It activates more than one blog and allows the mixing of authors posts on the front page of your site. This is overkill for 99 percent of blogs and will likely confuse you. It works great if that’s what you want to set up. But if you want a common Wordpress style blog then you don’t need to turn that module on.

If you want a standard kind of blog then just use Drupal Stories. Stories are another content item, other than page, that comes with Drupal. Or create your own content item for your blog. You can turn on the ability to leave comments on any content item in Drupal and viola you have a blog. Sure there is more to it than that in order to add some common blog functionality, but that gets you started.

Here are some links to resources for blogging with Drupal:

• Akismet Module - Is a great way to catch spam.
• Feedburner Module - Allows you to organize your output RSS Feed and track subscribers.
• Digg This Module - Adds the common Digg button to your blog that allows users to easily Digg the post.
• Gravatars allows the ability for user Gravatars to be enabled on your site.
• Service Links Module - Adds quick linking social tags that allow users to submit the post to popular social networks.
• Single user blog - basic - Is a post on Drupal about creating a single user blog.
• No Nonsense Guide to Blogging with Drupal - A good introduction on choosing to blog with Drupal and some module setup choices.
• My Drupal Blog - Is a blog about blogging and design with Drupal.

Adding Other Community Features

There are many more community features in Drupal. The ability to run Polls and Forums are built in. There is a lot you can do with creating User Accounts and Permissions that is built into Drupal as well. There are some modules I haven’t used that are made for building communities in Drupal that you might want to research, for example Organic Groups. Its also possible to add Photo Galleries to your Drupal Website.

Its not possible to cover everything that Drupal can do and point to all its awesome resources. There is just to much. Drupal 5 has over 2000 modules. Drupal 6 is still freshly launched though in a few months it will likely have a staggering amount of resources. Below is a screenshot of the number of Modules available for different categories in Drupal 5.

When looking to add functionality to your Drupal site. Research modules well. Do this by searching the Drupal Forums and see what others recommend. You can also research the modules support requests. This will give you an idea on how well the module is maintained. Most Important! Test! Test! Test! Install them on your test site first to make sure they don’t break your site. Test to prove they solve your needs and are easy to work with.

More Drupal Resources

There are some great Drupal resources across the web and on Drupal’s website.

• Drupal Handbooks - Are documentation on Drupal. There is a lot of information here to absorb and many topics. Take it one topic at a time.
• Drupal Groups - This is an area to get involved with Drupal, meet Drupal people in your region, or follow topic based conversations.
• Drupal 5 Themes - This is a new book on Drupal theming. I haven’t had a chance to open it up yet. Though I will. There are a number of books coming down the pipeline for Drupal this year. Its going to be a big publishing year for Drupal. I look forward to the book Selling Online with Drupal e-Commerce that will be out soon.
• Pro Drupal Development - A comprehensive book on developing with Drupal. The Theme Chapter is freely available and an excellent resource.
• Theme developer’s guide v5 and earlier - This is a good guide for working with Drupal 5 themes. Also, download some freely available themes to review from the Drupal Themes directory.
• Drupal API - This will become a valuable resource after you start tinkering with Drupal code.

Lullabot

Lullabot is a development company that uses Drupal. They also teach Drupal. So, there are lots of quality resources on their site.

• Lullabot Articles - The articles tend to be more advanced. They are a good resource for learning how Drupal functions.
• Lullabot Podcast - The audio podcast is fun. The crew from Lullabot have a long running podcast here. They review different Drupal functionality, modules, interviews, and more.
• Lullabot Videos - You can get the videos via a Video Podcast. They are targeted at beginning Drupal users. They have Videos on different Modules, Installing Drupal, and more.
• Lullabot DVD’s (Coming Soon) - The trailer for this video series captures the feeling of struggling to understand Drupal well. The image below is from the video, and its funny, partly because its so true. Though keep in mind the space between “I suck” and “I kick ass” at Drupal is a big space and likely where most Drupal Designers will reside. Hopefully, you will get up to “I kick ass” with Drupal theming qickly and with less frustration than I went through.

The Drupal Dojo

The Drupal Dojo is a training ground for learning Drupal. If your a coder there are lots of lessons here for you. Drupal Ninja coders, individuals with extensive experience with an aspect of Drupal, or Drupal site administrators donate their time to the Dojo. There are prerecorded and live screencasts. You can sign up and participate in the live screencasts. The Sensei running the screencast for that week gives a presentation and those participating ask questions and follow along.

Most of the lessons are geared toward learning to become a proficient Drupal Coder. Not all are aimed solely at this group of programmers though. There are sessions dedicated to theming and community building as well. Below is a list of some of these lessons.

• Drupal Dojo Lesson 41: Theme Template Files for Drupal 6 - This Dojo lesson will get you up to speed with template files in Drupal 6 theming.
• Lesson 32: New stuff in Drupal 6 theming - Find out about all the changes to the theme system in Drupal 6.
• Lesson 28: Theming like a pro - This is a great study companion to the freely available Theming Chapter from Pro Drupal Development.
• Lesson 16: Drupaldojo.com Design - This lesson reviews the creation of the Dojo theme for the site.
• Lesson null: Lightning Lesson: Dmitrig01 turns a PSD into a Drupal Theme (part 1 of 2) - Learn to go from a Photoshop document to a Drupal Theme quickly.
• Lesson 06: Theming & the Themer Pack - This lesson reviews the aims of the themer pack project, covers drupal theme concepts in general, and gets down and dirty with some template files.

When to Jump to Drupal 6

This tutorial series covered Drupal 5. In the middle of the publishing cycel of this tutorial series Drupal 6 was released. This is a good thing. You haven’t lost anything by learning about Drupal 5. Sure there will be some differences in the new version, but its still Drupal.

If your making a website today should you make it in Drupal 5 or Drupal 6? This is an important question. Until Drupal 6 has been out for about 6 months it will be unlikely that it will fulfill our your sites needs. It takes time for the contributed modules to be available for the newest release of Drupal. Of course it feels great to play with a new toy. I can’t wait to start playing with Drupal 6. But realistically you should write down your sites goals and see if what you need is available.

Also, documentation for Drupal 6 will take time. Existing resources for Drupal 5 are vast. This includes tutorials, books, modules, code, and lots of forum discussions. I recommend downloading Drupal 6, installing it locally, and playing with it. Get a feel for it. Then when a project comes along that is the right fit go for it. Otherwise, keep using Drupal 5.

In the new release the core system has been improved. I can’t wait to install a copy of Drupal 6 to play with. I’m curious how much jQuery has been integrated into the interface. The jQuery library comes with Drupal by default and each release more javascript and ajax goodness gets into Drupal.

The Drupal 6 release announcement has some great information about what new features are available in the new Drupal. Some of the resources about learning Drupal 6 are available on that page. Do check to see what the most recent release candidate is when you Download Drupal 6 though. New minor releases come out regularly to fix critical bugs and security issues that are found. You want to make sure you always have the most recent Drupal release version. There is always a link to the most recent Drupal version on the homepage of Drupal. Below is a an image of a screencast from Lullabot about Installing Drupal 6.

Some Drupal 6 Resources to Get You Started

• Drupal 6 Theme Guide - Is still under construction though its already a helpful resource for Drupal 6 theming.
• Drupal Dojo Lesson 41: Theme Template Files for Drupal 6 - This Dojo lesson will get you up to speed with template files in Drupal 6 theming.
• What’s New in Drupal 6 - Find out about all the changes to the theme system in Drupal 6.
• New i18n and l10n features in Drupal 6 - There is a lot you can do with Drupal out of the box with regard to languages. This video showcases these features.
• Theme developer module for Drupal 6 - Screencast- After watching this screencast I have to say this module looks awesome. Its fairly new. I haven’t tried it yet, but it should help with theming a lot. Especially once you get deeper into theming.

Final Bits of Advice

• Always use test sites.
• If you’re tempted to start hacking Drupal’s core code don’t. Instead, step back and do some research on how Drupal’s system of overrides works.
• Get involved in the Drupal community. Respectfully interact with other Drupalers. When posting to the forums you’re likely to get great advice, but remember the advice is from someone donating their time to help you.
• Have some fun with Drupal!

Tutorial Series Review

Below is a summary of the ground covered in this tutorial series:

• Create a Killer Band Site with Drupal - Introduction - We introduced this series and gave some examples of Drupal being used to power rock bands and whole record labels. Two prominent examples are Ozzy Ozborne and Sony BMG Records MusicBox.
• Create a Killer band site in Drupal - Part 1 - Design - We reviewed the process of designing the "Go Band" band site. We used the vector graphics program Illustrator for this development phase. Though Photoshop is a more popular choice for website design and could be used with Drupal development as well.
• Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator - We show you how to slice the design and prep the images for the web in Illustrator.
• Create a Killer Band Site in Drupal - Part 3 - XHTML - We covered the process of converting our design to standards based XHTML and Cascading Stylesheets.
• Create a Killer Band Site in Drupal - Part 4 - Theming Drupal - We converted our XHTML/CSS into a working Drupal theme. We reviewed how to find and use code from freely available themes. We discussed how to build a collection of reusable code.
• Create a Killer Band Site in Drupal - Part 5 - Drupal Admin - We learned how to install modules, work with blocks, turn on themes, and got to know the backend of Drupal.
• Create a Killer Band Site with Drupal - Part 6 - Resources - In this tutorial your currently reading we review the extendibility and resources of Drupal and conclude this series below.

Conclusion

In this 6 part series on Creating a Killer Band Site in Drupal we covered a lot of ground. We followed the process from design, XTHML/CSS coding, Drupal theming, installation in Drupal, and finally Drupal extendibility. The goal of this series was to get you on your feet with Drupal so you can hit the ground running and start creating Killer sites.

Remember each site you build in Drupal, each conversation you participate in on the Drupal forums, and each line of code you write will build your knowledge just a little more about how Drupal works. Try not to get intimidated, but rather look at one piece of the puzzle until you understand that. Then connect it to another piece. And then another piece. And Before you know it you’ll be seeing the big picture and making Killer sites.

Drupal is a powerful set of tools. It can be used to build great community sites. Whether the communities you’ll be building will be for rock bands or for something else is up to you. Good luck.

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming Drupal
Read Part 5 - Drupal Admin

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

Introduction

In our last tutorial we created our Drupal Theme Files. Now we are going to get familiar with the Administration of Drupal and set up our GoBand website.

Review

For review Lullabot has a good video on Installing Drupal 5. The video has you setup your first user account and change the password. This is really important in Drupal. The first user account is the super administrator. So don’t loose that login as its real important. Also, we should have our theme files installed from our last tutorial. If you need to, then download a copy of the final Goband Theme files. Place them in the sites > all > themes directory in Drupal.

Garland Default

Below is the default Administration screen in Drupal. Notice the warning message in the red box. This is nothing to be alarmed about. Let’s take care of that. Click on the status report link within that box.

We covered this in a previous tutorial, but lets make sure you have the Files folder installed. Make sure your move the files folder we created into the root Drupal install directory.

Once you make a choice for Cron and have your Files folder installed in your root directory you’ll get a good green status report.

Turn on Our Unique GoBand Theme

In the default theme Garland you have a few ways to get around the Administration area. On the left is one option. You’ll also notice the breadcrumbs at the top of the main column. If you go to the administration page you’ll also see that you can view all your administration options by task or module.

Before we turn on our GoBand theme we need to make sure our navigation is set up correctly for the theme. There are no breadcrumbs set up in the GoBand theme and there is only a right sidebar and not a left. So, if we don’t turn set our navigation for the GoBand theme to the right sidebar we’ll be a little lost when we turn the theme on.

Go to Administer > Site Building > Blocks. Click on goband settings. You’ll get a preview of the Administration area of our GoBand Theme. Under the regions column set the Navigation to right sidebar and click Save blocks at the bottom. This makes it so that our theme will have a navigation when we turn it on.

Notice how the right side has the Winged Chick Icons. This is not needed for the administration area. So, lets add the code circled below to our theme. After adding this code to your style.css file your results will look like the sidebar in the image above.

In the navigation, that just got moved to the right, click on Themes. Now as long as you have your theme files for GoBand installed it will be pretty hard to miss the green chicks with wings image, and the bright green GoBand Text. The other themes come with Drupal 5 by default. In the image below we can see that we are still have Garland as our default theme.

Now lets turn on our GoBand theme. Select Enabled and Default radio buttons next to the GoBand Theme. Then at the bottom of the page hit Save configuration. Afterwards, your results should look like the image below.

Let’s change another settings in the Theme before we move on. Click Configure top left below the page title. Uncheck Logo in the Toggle Display column. This is because we don’t have a logo setup. The logo is part of the header image. Then at the bottom of the page hit Save configuration.

Let’s Turn On a Couple of Modules

Go to Administer > Site Building > Modules. Anything set to Enabled already go ahead and leave it that way. Do check Enabled for Path and Search and click Save configuration. We’ll be using both of these modules shortly.

Enable Our Search Form

Go to Administer > Site Building > Themes > Configure. This will configure the global settings for our themes. Check off Search in the Toggle display column and hit Save configuration. That’s it. We already have the search set up in our theme. So, all you had to do was enable the module and then turn it on in the theme.

Create Our Home Page

In our Administration Navigation on the right click Create Content. Then click Page, as that is what we are making. Start out by entering our Title and then place the content of our Body. You’ll recognize the content from our Main content section in our HTML from the third part of this series. I set my Input Format to PHP code as this means none of the HTML will get automatically converted. Though if you like the auto conversion certainly try a different setting.

Next we insert our Menu Title as Home and set our Description. We want this to be a part of our Primary links. It will be the first one so give it to a Weight of 1. Set our URL path settings to home. Under Publishing Options check off Published. Then click Submit. Congrats, you’ve just made your first page in Drupal. Next we want this page to show up on our home page.

Go to Administer > Site Configuration > Site Information. Then set the Default front page to Home. While we are here drop in the HTML for our footer under Footer message and hit Save configuration.

Now check that the home page is correct and that the footer message is showing up. Your Home Page should look like the image below so far.

Now Let’s Create Our Other Pages

Go to Create Content > Page. For the Title use About GoBAND and drop some Lorem Ipsum in for the Body content. For the Menu Settings Title enter About. Give it a Description of About GoBAND. Set the Parent Item to Primary Links. Set the Weight to 2. And the URL path settings to about. Check off Published and hit Submit. Then go ahead and follow a similar process for the Blog, Booking, and Tour Schedule Pages.

Create Some Sample Sidebar Content

Go to Administer > Site Building > Blocks. Then click on Add Block in the top left hand corner of the main content area. Give it a Block description of Sidebar. Then drop in our sidebar content from our HTML file. Select an Input format and hit Save block.

Now we are back in our blocks area. Give the Sidebar a Region of Right Sidebar and a Weight of 1. Give our Navigation a Weight of 9 to push it down. The hit Save block.

Create Links Up Top

Go to Administer > Site Building > Menus. Then click Add menu in top left of the main content area. Give it a title of Top Nav and hit Submit. Under our newly constructed Top Nav menu click Add item. Fill in the Menu item to point to the front page and hit Submit. See image below.

Repeat this process for another sample Link for the Top Nav.

Next we need to go to Administer > Site Building > Blocks. In the Region column set Top nav to top nav and click Save blocks.

Now click on configure for Top nav. For the Block title put <none>. Then click Save blocks. This will get rid of the Top Nav title that we don’t want to show up top.

Set Access Control

Go to Administer > User Management > Access Control. This is an important and useful screen to review. If you were to log out you would notice that Search doesn’t show up. That’s because by default it won’t show up for Anonymous Users. Check off the boxes in the image below and then hit Save permissions. Spend some time reviewing the different options on this page. If you want to create new roles for different users its easy to do that and then set permissions for them here. Though that’s beyond the scope of this tutorial.

After allowing access to the Search we are almost done with this setup. Below is how the site now looks to an Anonymous User to the site.

Setting Up One Columns

Go to Administer > Site Building > Blocks. In the Sidebar row click configure. At the bottom of the page insert the user page instructions into the Pages window as shown below. Then hit Save block. This tells Drupal not to display the sidebar on those pages. So we end up with one column and not two for those pages.

We have already set up the our theme to recognize when there is only one column so it displays correctly automatically, see sample below.

Enable Clean URLs

Enabling Clean URLs will remove some unsightly characters from the URL: “?q=”. Go to Administer > Site Configuration > Clean URLs. First click on Run the clean URL test. If you were successful you’ll see the message below. Then select Enabled and click Save configuration. Now the ugly “?q=” characters have been cleaned from your pristine URLs.

Conclusion

We’ve set up the GoBand website, which is awesome. Bask in the spotlight of your first Drupal success. This site is a solid foundation that could be used to promote the band and build a community with. We’ll conclude this series in the final edition by giving you lots of excellent Drupal resources. So stay tuned as it will be out shortly. In it we’ll give you further advice on growing your Druapl based site that will keep it Rockin’.

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 5 -Drupal Admin

Introduction

In our last tutorial we coded our XHTML and Cascading Style Sheets. Now we are going to turn that code into a Druapl Theme.

Setup Drupal

First download a copy of the final Goband Theme files. That way you’ll have it to refer to as you work through this tutorial.

Next you want to download the most recent version of Drupal 5. Go to Drupal.org and look for the link on the right of the screen. Then make sure you get Drupal installed. Lullabot has a good video on Installing Drupal 5. You will need either a local test environment setup or a host that is Drupal compatible. I’m on a Mac and I use MAMP for local testing. Lullabot has a good video for setting up a Local Mamp Test Server on your Mac. You could certainly develop with Drupal and have a different setup. Lullabot has more resources for setting up a local test site on other computer types. Check out their Videos section. I keep mentioning Lullabot. They are well known in the Drupal community for producing really good websites for big companies, offering seminars, and running a Drupal podcast. They have some great Drupal resources.

Once you have Drupal installed rename your Drupal install folder to your project name. In this case its named goband. The image below has invisible files shown, as there are important files like the .htaccess file to be aware of. For the rest of this tutorial I’ll have invisible files turned off though.

Create Your Theme Directory

There are a multitude of template languages that Drupal can work with. The most common is PHPTemplate that uses Drupal’s own theme engine. There are two places to put your Drupal theme. The most obvious is in the themes folder. That works fine and will make your theme accessible to your website. Now if you want to have this theme power multiple sites then you can put it in sites > all > themes. You may need to create the themes folder inside the all directory. I’ve grown accustomed to using the second multi-site option.

So take your folder from last week that has your XHTML, CSS, and image files and copy it over to sites > all > themes. Pick a name for this theme folder. I chose goband.

Next move the files folder into the root Drupal install directory. When you install Drupal it will prompt you to create this folder. If you did that then just replace it.

At this beginning stage our theme folder should look like the image below. The only change so far is we have moved out the files folder

Set Up Our Basic Theme Files

Rename our index.html file to page.tpl.php. Then create a new file called template.php. Just leave it blank for now. There are more theme files we could create to customize Drupal, but we’ll keep it relatively simple. I will show you an example of how to do more advanced theming though with the Search area later in this tutorial.

Next we have a couple of images. In the backend of Drupal there is a page where you choose your site’s theme. A visual example of the site is needed there. I used a selection from a screenshot of the site. Its width is 150px and its height is 100px. The image needs to be named screenshot.png for Drupal to recognize it. Its shown below bottom left. Then I made a favicon thats taken from ico_sexy_angel.jpg. I use Dynamic Drive’s FavIcon Generator. You can see the favicon in use bottom right. Drop the favicon right into your theme folder and name it favicon.ico.

Our basic theme files are now in place. Your theme folder should now look like the image below.

Some Resources for Theming

Now that we have our files setup we can work with some code on our main theme page page.tpl.php. We will transform our html code into a working Drupal php file. Its not as scary as it sounds.

The easiest way to do this is to copy and paste code from existing themes. I tend to reuse code from other projects I’ve worked on. You can also take a look at any of the Drupal.org freely available Themes. Being able to look at other’s source code is the beauty of Open Source projects. There is also a good theming overview on Drupal: Theme Developer’s Guide. A truly awesome resource is a freely available chapter from the Pro Drupal Development book: Chapter 8 - The Theme System

A good theme to take a look at when your getting started is called Zen. It was built for the purpose of learning how to create Drupal themes. Go ahead and download the Zen Theme. We’ll be opening it up and looking at its source code.

Drupalizing Our Head Section

Currently our head section is plain HTML and looks like the image below.

To see how this section looks in the Zen theme view the image below.

Now copy and paste from Zen. Where our theme differs just copy what I have below. Our head section looks almost identical to the Zen theme. All we are doing here is replacing some links with Drupal variables and some minor php. This way drupal can create everything dynamically. Each page title can be made on the fly for example. Here is a link to the variables available for page.tpl.php: Available Variables.

The cool thing is that for most sites this section will look identical. Zen differs a little here as it has some additional features with sub themes that makes its head section a little special. Modify the code until you get the results shown below.

Keep in mind that we are linking to our existing stylesheets in our Head section. When we turn on this theme in our next tutorial it will read our existing stylesheets. Drupal does have some default styles that can effect your stylesheets. So, you might have to make a few changes when you go into Drupal from the CSS of our previous tutorial. But overall the path from XHML/CSS to a Drupal theme is smooth.

Theming Our Body Section

First of all you can erase all the content from your file. We have a copy of our HTML file saved. We’ll use that in our next tutorial when we set up Drupal. So, we are only concerned with the structure of the HTML. We don’t need any of the paragraph content for example.

Let’s Start with Our Page and Content Wrappers

Any dynamic Drupal theme will have some way of detecting how many columns are present and a way to target them through the CSS. Zen uses a more complicated way of doing this. It does give it the benefit of being highly configurable. But we are going to keep things simple in this tutorial. I found some simple php code that can be used for this from another theme. Below is our current HTML for our page wrappers.

Replace that with the code below. What it does is tell Drupal that if the right sidebar is present to display a class of two_column onto our page div.

Here is what the opening of our Content Wrappers looks like. They are located inside of the Page Wrappers.

With this code in place we can target items on the page separately based on wether one or two columns are present. So we can serve up a different background to our Content Wrappers. Below is the related CSS. When targeting the two column view we get the class next to the Page id from the code we inserted above.

Theming Our Top Section

For the Top section of our HTML file we used some default outputted Drupal code for the Search area. We are going to replace that. So, the code will shrink significantly here when replacing our HTML with PHP and Drupal Variables. Below is our HTML.

Lets review the code we are replacing it with. The Top Nav gets replaced with a php if statement. This kind of statement is commonly used for regions. It checks to see if that region is being used and if so it will display that region. We’ll review declaring regions when we discuss our template.php file a little later in this tutorial. The Search HTML is being replaced with a Drupal Variable. When Search is turned on in Drupal it will automatically show up there.

Theming Our Header Section

There isn’t much to the Header section. We are not changing the HTML code much. We just place some theme code in here in case we want to assign a logo to it later on. As its built right now you can’t click on the logo to go Home. Having a logo variable declared here allows us the option to add that later if we want to. The Zen theme’s logo code is almost the same as what we are using for our theme shown below.

Theming Our Primary Navigation Section

Our HTML code for the Primary Navigation is below.

We replace our HTML links with another if statement. There is more than one variable option to use to display your Primary Navigation. The one we are using below outputs some classes that we’ve used in our stylesheet. The First class is the unique one we need to get our home button to look right. And the code below will output that. Also, notice I changed the ul for the primary_nav id below to a div. Its a necessary update to the code after I did some testing.

Theming Our Main Content Section

We replace our Main div with the code below. You’ll see there is a real similarity to what we’ve done in previous sections. We are replacing our content with template variables and in some cases if statements.

The placement of these variables will dictate the order in which items will appear within our Main content. The Mission statement is something I rarely use on a site, but its here in case you want to have a site mission statement. Content Top is one of the regions we’ll be setting up when we discuss the template.php file. The Title is the Content’s Title. That’s straight forward. Tabs are part of our backend interface. Messages and Help print out based on user actions. And then lastly our Content will be output below all these elements. When we make some content in the next tutorial this is where it will output.

Theming Our Right Sidebar

Where going to replace the content in our sidebar with some more template variables and wrap the whole thing in a simple if statement. The cool thing about if statements is that you don’t have to be a programmer to understand how they work. Its really straight forward. It just means if this is true then keep reading the rest of this code inside the statement. When the if clause is not met it will not read anything inside of it, but rather pass it by.

Once it gets to a print command then that means output that code. It will only read that command though if the surrounding if clause is met. When you have either Secondary Navigation or content assigned to the sidebar right region then the first if statement will be met. The Secondary Navigation is wrapped in an if statement of its own own. On pages that don’t have Secondary Navigation the code inclosed in that statement won’t show up at all.

Below is our Right Sidebar code.

Theming Our Footer

Below is our Footer html. In our next tutorial we will input this into a field in the administration area of Drupal.

The Footer Message variable will output this field in the Drupal admin panel.

Closure

This is what Drupal has to say about the Closure variable: “Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.” I’m not going to argue with that. I just make sure to remember to put it in my themes. You can see it below as well as our closing HTML tags. That wraps up our page.tpl.php file. Lets move on.

The Drupal Ninja’s Weapon of Choice

Template.php is where the magic happens. This is where you put your dynamic code. We’ll start off by reviewing our regions code. This is really simple to do and needed on just about any theme your going to make. Below is the region code for this template within the Template.php file. We open up the file with an opening php tag. We don’t want to close it though at the end of our file. That’s just how Drupal works. You use the same code as below to add any regions to your theme. This same code can be copied and placed into any theme you make. You can then add more regions using the same style of formatting. The left side is the assigned name (example: top_nav) and the right side is the human readable name (example: top nav). Drupal will need to read the left side for region placement. The right side is just for the user to see an easy to read name in the admin interface.

After declaring your regions you can then target them in page.tpl.php. For example we did this in our Top Section. See the code in the image below: <?php print $top_nav; ?>. Use this convention to tell Drupal where to place a region in your theme. In our next tutorial we’ll review how to target these regions in the Blocks area of Drupal’s administration interface.

Theming the Search Form

First we want to finish up our template.php file. We’re going to add some dynamic code that will allow us to create a separate file to theme the Search Form. This is needed for our theme its also an advanced example of Drupal theming. I found the solution on this page: Customizing the search forms. It explains how to use it and you can copy and paste the code. The code is shown below.

Next we create a new file named search-theme-form.tpl.php and place the code below. This code allows us to add our own image as the submit button of the search form. I copied most of the code below from somewhere and then just tweaked it. You can see its mostly HTML.

Theming Drupal’s Administration Interface

Walking you through how to theme the Drupal administration interface is beyond the scope of this tutorial. Though there is some code that does that included in the theme files. You’ll see it in the last section of our updated style.css file. Below is a preview of what we’ll be working with next week.

Also, keep in mind that with client projects and even your own you’ll have to account for the time it will take to theme the administration interface versus using a separate theme for the administration area.

I often use one of the theme’s Garland that is included with Drupal’s download for the administration area on client sites. For most clients it helps them to know when they are in the administration area and when they are in the site by using this strategy. Garland also has a cool color switcher that you can use. This means you don’t have to write any code for the administration theme if you use Garland. Just change the color and your done. Its great that Drupal gives you the option to use the same theme or a separate theme for your Administration area.

Building Up Your Library of Drupal Theme Snippets

After you’ve looked at more Free Drupal Themes and as you make more of your own Drupal themes you’ll start to build up a library of php. Its great to have a snippet you can grab when your project requires a specific functionality. Drupal has a directory where can look up Theme Snippets or search across Drupal for code as well. Sometimes code resides off of Drupal on blogs for example. So don’t rule out a good google search.

Keep in mind Eighty percent of theming in Drupal can be done by anyone with a knowledge of HTML and CSS. Depending on the project usually another fifteen percent of what you need can be found easily by searching Drupal or looking at other themes. The last five percent will require help. That may mean hiring someone. If your not a php programmer and you can’t find code to do what you need in your theme you can always Hire a Drupal Programmer for those specific occasions. Or you can try posting a request for help to the Drupal Forums. You may also find that some existing Drupal Modules can fulfill your needs rather than trying to hard code something into your theme.

Conclusion

We covered a lot of ground in this tutorial as well. You’ll learn after getting some more experience with Drupal theming that this theme was kept basic to keep the scope narrow enough to cover in a tutorial. There is so much more you can do with Drupal themes. In the next part of this series we’ll be looking at the Drupal administration interface, importing our content, and getting our Goband site setup. Let me know if you have any theming questions. Also, start exploring the resources I mentioned in this tutorial. They have been really helpful to me.

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 3 - XHTML
Read Part 5 -Drupal Admin

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin

Introduction

In our last tutorial we sliced up our graphics. Now we are going to take those graphics and move on to coding the XHTML and Cascading Style Sheets.

File Setup

I’m on a Mac. The programs I use for coding are firstly Coda. Its a great program that you can use for coding and ftp. You can see a screenshot below. When I need a more specific tool to a need at hand I use CSSEdit, TextMate, or Transmit.

First off, below is a screenshot of the file directory. You’ll want yours to match this structure for this tutorial. You’ll need the exported photos from the last tutorial as shown below as well.

Standards Based XHTML

Standards based design is a common part of web design today. Here are a few links if you need to beef up your skills in this area: A List Apart, 465 Berea Street, and SimpleBits. Standards based design is a movement away from table structured layout. There is also a focus on semantics, which basically means naming your classes and id’s on what they do and not what they look like. Overall, you want to create html code that is simple and structured around the data. Of course in practice you often end up with a handful of extra divs that are there just to support the appearance of the site. Its still a huge step forward from the bad old days of Font tags, ouch.

This tutorial will hand you the XHTML code. We will cover the more interesting parts with some detail as we work our way through the Cascading Style Sheets. We’ll skip the basics of inserting paragraph tags and things like the doctype setup. Refer to the XHTML download below for that. This tutorial will focus on the process of creating a Standards Based site and on the most important CSS elements. It will present some of the XHTML as it relates to the CSS as well.

Here is a link to the XHTML Code. We will also give you the final CSS as a resource as well, CSS Code. You may want to reconstruct the CSS as we go along for practice though, or at least to review it carefully. Here are links to our IE specifc stylesheets ie_6.css and ie_7.css. We’re concerning ourselves with coding and testing back to IE6 in this tutorial, not further. Refer to this Working Example as you follow along as well.

CSS Reset

After a section that names the document and tracks the dates of updates my stylesheets almost always start with a CSS Reset. A CSS Reset is used to balance out browsers default behavior. Every browser has there own default styles for elements. So, there are differences in the way Firefox and Internet Explorer will display the hr tag for example. By using a reset they will both display the hr tag the way you specify it without discrepancies. So the goal of a CSS Reset is to create a clean slate to start your CSS coding from. Here is a link to the Reset I use: Reset Styles at MeyerWeb. After naming your stylesheet go ahead and place the reset next.

Note: This CSS Reset though does not reset the default stylesheets that are set up in Drupal. There are numerous stylesheets that will need to be accounted for when we move over to Drupal. We will discuss this further when we get to the next tutorial in this series.

Base HTML

This is the name I give to the group of styles that make up our basic HTML elements. Its a good starting point for any style sheet after the Reset. The elements styled in this section are not exhaustive, but are a good start. Refer to the stylesheet download for the list.

Our Layout

In the next section of our stylesheet we account for our page layout and design. Its important to plan our entire page at this point. We’ll start out with defining our outer most layers and then work our way in. First off all, we will have page wrappers to use to define our content width and to assign our background to. We assign our page background to the page_wrapper id. I set the background to this wrapper rather than the body because there is a module I almost always use in Drupal that would have a small conflict if assigning the background to the body. I’ll cover that in the coming tutorials.

Page Wrappers

The page_wrapper is floated:left, given a width of 100 percent, and the background image is set to repeat-x so it will stretch the length of the browser screen. We also make sure to set a position of relative to the page id so if we use absolute positioning later on it will be placed within the wrapper. We will review this technique in the Top Navigation and Search section.

Page Wrapper Html

<div id="page_wrapper">
 <div id="page" class="two_column">

 </div><!-- /page -->
</div><!-- /page_wrapper -->

Page Wrappers CSS

#page_wrapper {
 background: #28201d url(images/bg/bg_page.jpg)
repeat-x 0 0;
 float: left;
 width: 100%;
}
#page {
 width: 960px;
 margin: 0 auto;
 position: relative;
}

Overall Page Layout

Next we define the layout for our major sections. We have the Top that will hold our Top Navigation and Search Area. The Header that will hold our header design. Our Primary Navigation Bar is a part of the basic page layout though we’ll cover it in our navigation section. Then we have our Content section that will hold our content backgrounds: our Main content column and our Sidebar_Right column. The Footer will hold our legalese and some links.

Layout Sections Html

<div id="top">

</div><!-- /top -->

<div id="header">

</div><!-- /header -->

<div id="primary_nav_bar">

</div><!-- /primary_nav_bar -->

<div id="content">

</div><!-- /content -->

<div id="footer">

</div><!-- /footer -->

Layout Sections CSS

Most of our sections will utilize floating layouts. Here is a link to read up on using floats for layouts if your not familiar with it: Floatutorial.

The top is an exception. We’ll discuss the top shortly. The primary navigation will be discussed shortly as well. The footer is simple enough that it doesn’t require a style to define its dimensions, although it is its own section in regards to the HTML layout.

The header defines its exact dimensions because we have an image to put in there that has a specific width and height. The content section will begin after the primary navigation bar and then end before the footer. Like most of the layout, the header and content are floated.

#header {
 background: url(images/bg/bg_header.jpg)
repeat-x 0 0;
 float: left;
 width: 960px;
 height: 204px;
}
#content {
 margin-top:15px;
 width: 960px;
 padding: 0;
 display: block;
 float:left;
}

Content Section

Our Content section is made up of three outer divs. content, content_top, and content_bottom. We target these divs by first targeting a class of two_column that we applied to our page div. This is done so that we can have a one column layout as also. We will cover that in our next tutorial.

Content Section HTML

<div id="content">
 <div id="content_top">
  <div id="content_bottom">

  </div><!-- /content_bottom -->
 </div><!-- /content_top -->
</div><!-- /content -->

Content Section CSS

All of the three ids below are floated and they fit within each other. To take advantage of the document flow, the middle background is applied to the first content div. Then the top and bottom backgrounds are applied to the subsequent divs and therefore will rest on top of the middle background. This is how we get the pieces to fit together. They overlap.

.two_column #content {
 width: 960px;
 padding: 0;
 display: block;
 background: url(images/bg/bg_content_two_col_mid.jpg)
repeat-y 0 0;
 float:left;
}
.two_column #content_top {
 width: 960px;
 padding: 0;
 display: block;
 background: url(images/bg/bg_content_two_col_top.jpg)
no-repeat 0 0;
 float:left;
}
.two_column #content_bottom {
 width: 960px;
 padding: 0;
 display: block;
 background: url(images/bg/bg_content_two_col_bottom.jpg)
no-repeat left bottom;
 float:left;
}

These boxes are special. They are rounded and the top background image has a gradient applied to it. As long as the top background is cut after a point where its gradient becomes solid then it will work out fine to put these together. The middle section needs to be a solid repeating color that connects to the top background image after the gradient has fully broke to a solid color. I’ll also mention that you don’t want the top background to be longer than your sites content or else the gradient will get cut before it connects to the middle part.

If our content was ever as short as the image below then our gradient would not look right. This is because the top background image has to be as long as the gradient. Fortunately, our content will never be this short.

You can see in the image below that if the content is just a little longer there are no gradient display issues.

Inner Content Sections: Main and Sidebar_Right

Inner Content HTML

The basic setup of the Inner Content is two columns. We have already taken care of the presentation of our background boxes. We do need to get our columns to float correctly though. Below is the basic setup of the two columns. Refer to the download for the rest of the HTML inside.

Inner Content HTML

<div id="main">

</div><!-- /main -->

<div id="sidebar_right">

</div><!-- /sidebar_right -->

Inner Content CSS

First of all we float the main column to the left. Then we float our right_sidebar to the right. We set our width with the padding subtracted for both columns. We have a standard two column float layout for our inner content.

/* @group main */
#main {
 width: 600px;
 display: block;
 float: left;
 margin-left: 0;
 padding: 0 20px 30px;
}
/* @end main */

/* @group sidebar_right */
#sidebar_right {
 float: right;
 width: 260px;
 display: block;
 padding: 0 20px 30px;
}
/* @end sidebar_right */

Later in the stylesheet we list all the aesthetic style for the main and right_sidebar columns. Refer to the stylesheet download for that. Of special interest is the promotional area. We establish an area for the photos in our main column that uses the same techniques as above to float the layout. So these promotional areas are floated within the floated main column. View the CSS below.

#promo_one_front {
 float: left;
 width: 408px;
 display: block;
}
#promo_two_front {
 float: right;
 width: 178px;
 display: block;
}

Primary Navigation

Horizontal Navigation is a popular choice on the web and its not that difficult to achieve.

Primary Navigation XTHML

We create our XHTML first. We are making some unique ids. We are also placing classes that we will be able to tap into once we get over to Drupal.

Note: the HTML below is not exactly what the Drupal default output will look like, but what we are taping into will be there. Drupal will output more classes as well. But what is listed below is what we will be concerned with for our style sheet. It will work in our next tutorial were we theme in Drupal.

<div id="primary_nav_bar">

<ul id="primary_nav">
<li class="first"><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>

<li><a href="#">Booking</a></li>
<li><a href="#">Tour Schedule</a></li>
</ul><!-- /primary_nav -->

</div><!-- /primary_nav_bar -->

Primary Navigation CSS

First we set the background for for the primary_nav_bar. We continue to use floats in this layout. The primary_nav_bar creates another section for our theme. We set a height to work with for the primary_nav_bar. So it is not vertically flexible. Its easier to work with for our design at an exact size.

Then we attach our divider image to the primary_nav_li on the right to give some added detail of shading and highlight in between each nav button.

Next we start coding our button links. Notice that using padding means you need to shorten the height to correspond to the added padding. Our images for the primary_nav a, primary nav a: hover, and primary_nav a.active are actually the same sliced image. We are just telling the image to move to show either the normal or active images. This technique is called Sliding Doors. Here is a link to the original article on A List Apart Sliding Doors. If your not familiar with that technique than its a good place to get started reading up on it.

To show our unique home button we will take advantage of the first class. We are using the same technique here and virtually the same code, but we use a unique image that has the left side rounded.

#primary_nav_bar {
 background: url(images/bg/bg_primary_nav.jpg)
repeat-x;
 float: left;
 color: #fff;
 text-transform: uppercase;
 width: 960px;
 height: 30px;
 margin-top: 8px;
}
#primary_nav li {
 float:left;
 display:inline;
 height: 30px;
 margin: 0;
 background: url(images/bg/bg_divider.jpg)
no-repeat top right;
 padding: 0 2px 0 0;
}
#primary_nav a {
 background: url(images/bg/bg_btn_primary_nav.jpg)
no-repeat top left;
 color: #698f24;
 float:left;
 display:block;
 position:relative;
 height: 22px;
 padding: 8px 14px 0;
 text-decoration:none;
 font-weight:bold;
 vertical-align: middle;
 font-size: 12px;
}
#primary_nav a:hover {
 color: #b7d62d;
 background: url(images/bg/bg_btn_primary_nav.jpg)
no-repeat 0 -30px;
 cursor: pointer;
}
#primary_nav a.active {
 color: #b7d62d;
 background: url(images/bg/bg_btn_primary_nav.jpg)
no-repeat 0 -30px;
}
#primary_nav .first a {
 background: url(images/bg/bg_btn_primary_nav_home.jpg)
no-repeat top left;
 color: #698f24;
 float:left;
 display:block;
 position:relative;
 height: 22px;
 padding: 8px 14px 0;
 text-decoration:none;
 font-weight:bold;
 vertical-align: middle;
 font-size: 12px;
}
#primary_nav .first a:hover {
 color: #b7d62d;
 background: url(images/bg/bg_btn_primary_nav_home.jpg)
no-repeat 0 -30px;
 cursor: pointer;
}
#primary_nav li.first a.active {
 color: #b7d62d;
 background: url(images/bg/bg_btn_primary_nav_home.jpg)
no-repeat 0 -30px;
}

Top Section: Top Navigation and Search

Now lets get into the details of absolute positioning inside relative containers. I’ve always liked this technique. It works really well. Here is a good link that explains this technique in detail: Making the Absolute, Relative.

For our purposes the top has been given a position of relative and it is already centered because its inside the bounds of the centered page_wrapper. It also has a width of 960px. When we position our elements within the top absolutely they will be placed according to this relative wrapper.

Without absolute positioning the top section would be in the document flow. It would push our header content down and make it not match up with our background image. Not what we want. See the image below.

Below is the orrected version after absolute positioning has been applied.

Top Section HTML

<div id="top">
 <div id="top_nav">
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </div><!-- /top_nav -->

 <form action="/search/node" method="post" id="search-theme-form">

  <div id="search" class="container-inline">
   <div class="form-item">
    <input type="text" maxlength="128" name="search_theme_form_keys"
id="edit-search-theme-form-keys"  size="15" value=""
title="Enter the terms you wish to search for." class="form-text" />
   </div><!-- /form-item -->

   <input type="image" src="files/icons/ico_search.jpg"
name="op" value="Search" id="search_icon"  />
   <input type="hidden" name="form_token"
id="edit-search-theme-form-form-token"
value="26c6ef5d24a9b8af03b19f05131a19bc"  />
   <input type="hidden" name="form_id"
id="edit-search-theme-form" value="search_theme_form"  />

 </div><!-- /search -->
 </form>	

</div><!-- /top -->

Top Navigation CSS

There are a few way you could do this I decided to target the top ul. This will effectively pull the top navigation out of the document flow. We give it a position of absolute and then place it down a bit from the top and over from the right far enough to leave room for our search area. That covers our major placement for this. The rest is aesthetics.

Note: I tend to copy code from previous projects I made. This saves time. But it has the disadvantage of having to remove unnecessary styles. You might see a few styles that are unnecessary here and there. Feel free to point them out in the comment section for some *kudos*.

#top {
 position: relative;
 display: block;
 width: 960px;
}
#top ul {
 position: absolute;
 top: 8px;
 right: 210px;
 margin-top: 2px;
 float: right;
}
#top ul li {
 color:#120900;
 display:inline;
 font-size: 12px;
}
#top_nav a {
 color:#120900;
 margin: 0 6px 0 0;
 padding: 0;
 font-size: 12px;
 text-align: right;
}
#top_nav a:hover {
 text-decoration: underline;
}

Search CSS

We place our Search with a position of absolute, which removes it from the document flow as well. We give it a specific width so our search button shows up correctly. And we continue to use floats to get our elements to align correctly. Again, some aesthetics in the code below as well.

#search {
 background: url(../images/bg/bg_search.png)
no-repeat 0 0;
 position: absolute;
 top: 8px;
 right: 0;
 width: 202px;
 display: inline;
 clear: none;
 z-index: 100;
}
#search .form-item input {
  background-color:#f2f6f9;
  border:1px solid #003e57;
  float:left;
  height:16px;
  margin:2px 5px 0 0;
  width:170px;
}
#edit-search-theme-form-keys {
 height: 14px;
 display: block;
 float: left;
}

Targeting Internet Explorer and Testing in Internet Explorer

Internet Explorer will almost always need some special styling to get your standards based design to look right. Conditional comments is one method of targeting styles for Internet Explorer browsers. Here is a good link about conditional comments on Quirksmode: Conditional Comments.

Place the following code just before the end of the head of your index.html file:

<!--[if IE 7]>
<link href="ie/ie_7.css" rel="stylesheet" type="text/css" />

<![endif]-->

<!--[if IE 6]>
<link href="ie/ie_6.css" rel="stylesheet" type="text/css" />
<![endif]-->

You can see that this will link to a separate style sheet for IE7 and another one for IE6. Often you’ll need some additional special care for IE6 as IE7 does have a lot of standards based improvements.

The ie_7.css file only needs a small fix for the top unordered list placement:

#top ul {
 margin-top: 6px;
}

The ie_6.css file needs that same fix as well as some adjustment to the width of the search:

#search {
 width: 206px;
}
#top ul {
 margin-top: 6px;
}

With testing for Internet Explorer I use a Virtual Machine on my Mac. I haven’t found a Virtual Machine I’m happy with. I may break down and buy a PC at some point. I always start on the Mac and Test in Firefox predominately (and Safari also) and then jump over to Windows to test Firefox and IE on the PC towards the end of the coding process. I only test for Opera and other browsers when the client specifically requests it.

Conclusion

We covered a lot of ground in this tutorial. For those of you just getting started with standards based design check out the classic links provided in this tutorial and utilize the comments below to ask any questions you have. I’ll be happy to help and I know there are some experienced web designers following along with this series that can help out as well. Stay tuned for the next tutorial were we will be learning to build a Drupal theme.

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin

Read the introduction - What’s Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 3 - XHTML
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin

Introduction

We started this Series in Adobe Illustrator. Its a great tool for web design. Certainly Photoshop is more common, but Illustrator has some flexible advantages. Everything is kept vector and therefore if a client makes some changes its quick to fix. So, I’m going to cover slicing in Illustrator in this tutorial. If you built the last design in Photoshop or if you would like to open up this document in Photoshop then the process for slicing there is virtually the same. There are only subtle differences.

Set Up Our Prep File

In our last tutorial we created our layout as a mockup that is fit for client presentation. Open up that file and save it as goband_layout_prep.ai. In this tutorial we will remove any parts of the layout that don’t need to be sliced for the coding of the website. See the image below for what our file will look like for slicing.

Most of the text is removed. And I repositioned elements for optimal setup for slicing. The search icon is moved over to the right. The photos and single icon in the sidebar are moved down to make room for slicing the column backgrounds. The main column and sidebar column are shortened to 458px high. A 960px wide by 150px high rounded rectangle is added at the bottom. No, this is not for a footer (though you could use it for that also). It is for theming a one column view in Drupal. There are some login and password screens for example that are one column. It also gives our client a one column option for some of their content.

For slicing purposes I created three primary navigation bars. The are all the same size but have different pieces that will fit together to make our coded navigation bar. The top one is the full background. The middle one is for our normal non-active button states. And the bottom one is for our rollover and active button states. All four of the button images are 30px tall by 300px wide. Notice in the image below that there are two different button shapes. This is because our home button has a unique rounded left side. We need to account for that in our slicing preparation. The image below is at one hundred percent. The 2px wide by 30px tall divider area is not shown below. We will see a close up of the divider once we get to slicing that section.

Before we move on I want to make sure you have all your strokes set up correctly for accurate slicing. In the image below I have the upper primary navigation bar selected. In the Strokes Palette I clicked on Align Stroke to Inside. Its the middle button next to Align Stroke. The top navigation in the image below has this set. The bottom one is still set to the default, which is Align Stroke to Center. There are guides placed to make this clearer. The bottom stroke on the bar is shown as still overlapping the guides. This needs to be fixed for our slices to look right. We want all the boxes to look like the top one. Go ahead and apply this technique to all the boxes that have strokes set in your layout.

Slicing the Top of Our Layout

We are going to slice this layout working from top to bottom and left to right. The Slice Tool is pictured in the image below. Create a slice that starts at the top left of our document that is 50px wide by 104px high. This will be our background image.

We’ll slice our header next. If you place guides at 100px and 1060px it will make it easier to draw the slice. I drew the slice from the top of our document down a little past the bottom of the header.

Utilize the settings at the top of Illustrator (see image below). Make sure you got your width at exactly 960px. Also, zoom in and make sure your right on the guides.

Now we draw another slice around our search button. Pictured below the Slice Select Tool is highlighted. This is used to move around slices that you’ve drawn. You can also manipulate corners similar to any box in Illustrator.

Slicing Our Primary Navigation

First we slice the top primary navigation bar to get our background. We create a slice 960px wide by 30px high.

Then we create two slices over our middle and bottom primary navigation buttons. The normal and active states will make up one image. Below is a close up image of the two slices that will make up our primary navigation buttons. There is one slice for the unique home button on the left and one slice for the rest of the buttons on the right. The dimensions are 300px wide by 60px high.

We will be using the sliding doors technique for our buttons. So, there are no image flickers on the buttons. There are a lot of posts on this technique, but get started with the original article at A List Apart. And then research further on the web from there if you would like to learn more. We will be touching on this topic again in our next tutorial though.

Let’s not forget about slicing our primary navigation button divider. Below is a close up of the slice at 2px wide by 30px high. We only need one slice, but we’ll be using this image multiple times next to our buttons.

Slicing Our Content Area Columns

We are going to cut our columns into three pieces horizontal pieces. We will be coding these boxes to accommodate infinite length, irregardless of how much content we fill them with.

Next measure where your gradient becomes a solid color. Also, make sure the break of your gradient is the same for your main content area and your sidebar. I use a tool called xScope for the Mac to measure where the gradient breaks onscreen. I find this tool helps a lot for measuring colors and sizes no matter what program or browser I have open. Place a guide where the solid color begins. Slicing it this way means that you can have a gradient at the top, but it will blend into a solid color well. Consider using guides for your column cuts. As, this will give you more accurate results.

Now create your top content column slice. My top slice is 960px wide by 68px high. This slices across both our columns. You could choose to slice them separately. Its a stylistic design decision to make here. Slicing across both columns together means that we can code it so that our columns will always be the same length, irregardless of which one has more content.

Then I create a solid center piece that is 960px by 50px high. I usually stick with a length of 50px for solid repeatable areas. This may be more conservative than necessary, but I’ve had good results with this. The last slice of the two column boxes is the bottom part. It is much shorter than the top because there is no gradient to be concerned about here. The bottom is 640px wide by 15px high.

We also want to create slices of our photos. The size of the slice for the large photo on the left is 408px wide by 265px high. The size of the photo of the drummer on the right is 178px wide by 265px high.

Let’s finish the two column content area by slicing up our sexy winged chick icon, as we’ll be needing that.

The final slices of our document are for our one column content box. We will carve this up at the same dimensions as we did in our two column slices above. Start by drawing a slice from the top left 960px wide and 69px high. Then we will slice our middle part. Draw another slice 960px wide by 50px high. Our last slice will be 960px wide by 15px high to make up our one column content box bottom image. The image below shows how all our final slices look for the entire document.

Naming Our Images

I wanted to make this a separate section for the purposes of this tutorial. But you may find it a better workflow to name your images as you slice them. Also note, if you don’t name your slices you can still save them. The default names will be the document title, followed by the underscore, followed by the unique slice number, followed by the extension. It will save you time though to name all your images in Illustrator. If you name your slices in Illustrator they will be ready to use, as is, after exporting. Also, if you go back in and make edits you want the simplest process possible for saving those updates. Having the images your changing already named makes it that much quicker and easier.

I’ve found a couple of peculiarities in naming images in Illustrator when comparing it to doing the same thing in Photoshop. In Photoshop all you have to do is grab the Slice Select Tool, double click on a slice, and you’ll get a window that allows you to name the slice.

In Illustrator you select the slice with the Slice Select Tool then go to Object > Slice > Slice Options and Name the Slice in the Window. Then hit OK. I leave all the other fields blank. Ultimately we will only be exporting images and not any code. We’ll be writing the code ourselves. Below is an image of the page background image being named.

We will need to repeat this process for all the images that we are slicing. My naming strategy involves deciding what the image will be used as. Then I assign a uniform set of initial letters to images followed by the underscore followed by its unique name. So for all images that make up backgrounds I use a a format similar to the above screenshot. “bg” is the use followed by the “underscore” and its unique name of “page”. It will make up the page designs background.

Its good to bring a universal system to all approaches you do in web design. The overhead of one small project is minimal, but multiply that by all the projects you work on and you’ll find that doing things the same way on each project will save you lots of time. I’ll show a screenshot of the images after export that will give you some more ideas for naming your images.

Optimizing and Exporting Our Images

Once you have all your slices named go to File > Save for Web & Devices and you’ll get a Dialogue Window shown below. A note on Slicing: In regards to naming your slices it is possible to name your slices in this window. You can grab the Select Slice Tool and double click on sliced images and then name them. Though, unlike in Photoshop, it does not have the advantage of saving those names in the Illustrator file once you leave this dialogue window. Because of this, the technique outlined in the section above is the best one to use for naming slices in Illustrator. Hopefully, Adobe fixes this in the future, as this is a convenient window to use for naming.

Now we will choose our image settings. First grab the Select Slice Tool in the Save Dialogue Window and drag it across all the slices or hit (Command/Ctrl + A). Then choose JPEG High (which is a Quality of 60 Percent and is Optimized). For most projects I keep it simple and save all images at this setting. Though if you notice low quality output for any images at this setting then go back and bump it up. Likely we will need to do this for a few images.

For clients that have the budget and desire to have you optimize the images carefully, you can go back and tweak each image separately. Bump the quality down and test results. Continue doing this bump quality down, export, retest in browsers until you find the lowest image size that still gives quality results. Its a tedious and time consuming process that you have to account for in the budget of a web design project. It allows you to optimize web images to their fullest. This process is often used for high traffic websites to speed up the loading of the site and decrease the amount of data consumed on each page load.

Now Lets hit Save. We get another window. In this Save Optimized As Window Choose Forma