How To Slice Up Graphics for XHTML and CSS

1. If you followed the last tutorial, open our Gimp file "gimp-weblayout.xcf". What we want to do here, before we get started is put information in the form of labels on top of our layout, specifying colors, widths, margins, etc. This will help us when plugging information into our stylesheet
a. Create a New Layer above all of the layers and name it labels
b. Select the Background layer and use the Color Picker Tool to select the blue green color. Click the Foreground Color swatch, note the color code next to the HTML notation section; click Cancel
c. Use the Text tool to create text above the Header; type #00BBBB in black
d. Duplicate this layer twice and place the #00BBBB text within the Sidebar and Footer. Make sure to move each layer to the top of the layer stack
e. You can Merge these three layers down to the Labels layer
f. For the purposes of saving time, I created the rest of the labels and saved the resulting file as a png, shown below. Feel free to right click and download this to refer to later



2. Now, we will get into the good part, the slicing, starting with the Header/Footer
a. Hide the Labels layer, if you created it
b. The first file we will save is the header and footer background. Since these two sections have identical backgrounds, we can use the same file. These will be "faux columns" that will repeat vertically behind our header and footer
c. Click the Header layer. Create a Rectangle Selection and make sure the Position is 0. The Size box in the Toolbar should have the values 760 and 1
d. Go to the Edit menu and choose Copy Visible- this copies everything visible within our selection
e. Create a New file. The width should be 760; height: 1 px
f. Anchor the Layer (under Layer > Anchor Layer)
g. Save As header-footer_bg.png. This is saved in the "images" folder where our "gimp-weblayout.xcf" file is

3. The next slice is the Content area
a. Select the Content layer. Create another Rectangle Selection Position 0, 400 and Size 760 and 1. Copy Visible
b. Paste into a New file 760 by 1 px, as before. Save As "content_bg.png"
c. For those who are interested in getting up to speed quickly, the two files are below. Right click these (you may have to Zoom in on your browser) and Save the first image as "header-footer_bg.png" and the second as "content_bg.png"





4. The next thing we will slice n' save is our button design behind the "Pages" heading
a. We don't want the actual text to show here as this will be provided by Wordpress's XHTML, so we must hide the Pages text layer by clicking the eye next to it
b. Now, click the Sidebar layer. Zoom In a little and select the area as shown below. Make the Position's first box 471, Size 160 by 40 and make sure to select Lock Alpha Channel in the Layers dock. This time, choose Copy



c. Create a New file, but make sure to choose Fill With: Transparency under the Advanced Options section- this step is important. The information is shown in the screenshot below. Make sure the width and height are 160 and 40, respectively



d. Paste and then Save As "button.png"

5. Now we must slice the small icons to be used as bullets
a. Zoom in to 1600
b. We will pretty much follow the same instructions as above- Selecting the area around each shape (clicking it's layer first), Locking the Alpha Channel, Copying, noting the Rectangle's size, creating a New file at the same size with a transparent background, Pasting and Saving. The three screenshots below show the selections:



c. Save the files as "redpixelbullet.png", "arrowbullet_red.png" and "arrowbullet_gray.png" in the images folder
d. On "arrowbullet_red.png" and "arrowbullet_gray.png", we have to redo the opacity, as Gimp's Paste method didn't preserve it. Lower the opacity to 75 and 50 respectively
e. Below are these files for you to right-click and download. Rename them if they have different names

6. For now, you can close Gimp, as we will be putting together an XHTML page and CSS stylesheet. We will also place dummy content to test some basic tags. We will not work with the unordered lists until we convert our static XHTML page into a Wordpress theme, as this information is generated by wordpress

7. Open a text editor. Windows Notepad or Macintosh's TextEdit will work just fine, but I prefer to use a real text editor with options. I recommend HTML Kit
a. In HTML-Kit, I opened a New Blank HTML Page. The html generated is posted below. You can Copy and Paste this into a New file. Right now it is not an XHTML page, but that will be handled by Wordpress later

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<&/head>
<body>

<&/body>
<&/html>

b. Save As "index.html" in the folder where the Gimp layout file is stored
c. Now we are going to add the same dummy text we had in our layout
d. Just under the <body> tag, type: <h1>My Blog</h1>
e. By this point, we can open our file in a browser. Im on Windows, so I'm choosing Firefox 3 and Internet Explorer 7, which I have installed. If your on another OS, it's a good idea to open two browsers to see the inconsistencies. Internet Explorer on Windows usually needs special treatment, however, I will give you the CSS hacks, if any, in this tutorial
f. Next, just below the h1 tags, type or Copy and Paste the following:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce metus magna, lobortis non vehicula vel, fringilla consectetur enim. Nulla pellentesque ligula consequat risus adipiscing condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus iaculis pretium nisl sit amet cursus. Sed est massa, dictum in euismod id, consequat ut diam. Phasellus accumsan, tortor in accumsan convallis, purus libero blandit mi, vel gravida eros mi eget lacus. Aenean ac mi tortor. Nulla facilisi. Suspendisse laoreet orci non velit varius elementum. Curabitur eu blandit mauris.</p>

g. Below the paragraph, simply type <h2>Pages</h2>
f. Finally, below there, type the footer information: <p>&copy; My Blog</p>

8. Now we are at the point when we divide our layout into Header, Footer, Content and Sidebar with a Wrapper placed around the whole layout. In this part of the tutorial, we will also set the background colors and basic tag colors
a. Wrap div tags with id titles around the different sections as shown in the code below:

<!-- opens wrapper div -->
<div id="wrapper">

<!-- opens header div -->
<div id="header">
<h1>My Blog</h1>
<p>Just Another Wordpress Blog</p>
</div>
<!-- closes header div -->

<!-- opens content div -->
<div id="content">
<h2>Post 1</h2>
<p>Lorem ipsum...
</div>
<!-- closes content div -->

<!-- opens sidebar div -->
<div id="sidebar">
<h2>Pages</h2>
</div>
<!-- closes sidebar div -->

<!-- opens footer div -->
<div id="footer">
<p>&copy; 2010 My Blog</p>
</div>
<!-- closes footer div -->

</div>
<!-- closes wrapper div -->

b. The items that begin with <!-- and end with --> are HTML comments; use these liberally in your code, so others who view your code can understand it. Here, the page code is fairly short, but imagine a page with divs embedded in 1000 lines of code

9. In addition to this, we will add two divs within the header div. The first will house our blog title (or logo), and the second will house our second widget ready sidebar
a. Create the two divs below with ids "left" and "sidebar-2":

<!-- opens header div -->
<div id="header">
<div id="left">
<h1>My Blog</h1>
<p>Just Another Wordpress Blog</p>
</div>
<div id="sidebar-2">
</div>
</div>
<!-- closes header div -->

11. Create a stylesheet and link to it in our HTML page
a. For this we first need to create a stylesheet. Create an empty file, name it "style.css" and place it in the same directory as the "index.html" page
b. Now we link to our external style sheet in index.html's <head> tag, just below the title closing tag:

<title>Page title</title>
<link rel=stylesheet type="text/css" href="style.css" media=screen>
</head>

10. Now we can set some baseline information in our style sheet, including resetting some browser defaults
a. In our style sheet, type in body tag style rules:

body {
margin: 0;
padding: 0;
color: #A64B00; /* sets foreground color; usually applies to fonts */
background-color: #00BBBB;
font-family: Arial, Helvetica, "Nimbus Sans L"/*Linux*/, sans-serif;
/* I included one Linux friendly font. See http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/ */
}

b. Go ahead and refresh your browsers. As you can see already, our page looks significantly different
c. Type the following to reset the margins of the heading and paragraph tags and change the font family:

p {
margin: 0 0 1em 0;
font-size: 0.9em;
line-height: 1.3em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0; /* reset margins */
padding: 0.2em 0 0.2em 0;
font-family: Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
font-weight: bold;
}

/* custom heading sizes */
h1 {
font-size: 24px;
}

h2 {
font-size: 18px;
}

h3 {
font-size: 14px;
}

h4 {
font-size: 12px;
}

h5 {
font-size: 10px;
}

h6 {
font-size: 8px;
}

11. Next begins the fun part, placing our background images behind our sections
a. We will create style rules for our backgrounds, based on their ids. To target an id tag, you type a # followed by the id name, opening curly brace { property: value; }. CSS comments are different from HTML comments. They are formatted /* information */
b. Type the following just below our previous style rules (what we're doing will be commented):

/* Div styles */

/* wrapper */
#wrapper {
width: 780px; /* we will be adding a 10px border around everything; */
/* according to the CSS box model this must be included in our width */
border: 10px solid #63DDDD;
background: url(images/content_bg.png) repeat-y; /* faux columns behind everything */
}

c. Create the header style rule. Type:

/* header */
#header {
width: 100%; /* header is as wide as our containing element, the wrapper */
height: 120px; /* height from our layout */
margin: 0 auto; /* centers the layout in standards based browsers */
background: url(images/header-footer_bg.png) repeat-y;
}

#header h1 {
padding-top: 60px; /* set a large padding up top to push the heading down */
}

e. Set widths on our "left" and "sidebar-2" divs. Type below previous:

#left {
width: 449px; /* width is set minus the 20px left padding, according to the CSS box model */
height: 120px; /* height repeated here */
padding: 0 0 0 20px; /* add padding to the left side */
float: left; /* float left */
}

#sidebar-2 {
width: 271px;
padding: 0 0 0 20px; /* add padding to the left side */
float: right;
height: 120px;
}

I had to repeat the heights on each sub div after testing the background boxes. To test, just temporarily place a bright background color, such as red behind the blog-title box and place another background color like blue behind the sidebar-2 box.

f. Now, time to do the Content section. Type the following:

/* content */
#content {
width: 429px; /* width is set minus the 20px padding, according to the CSS box model */
padding: 20px; /* add padding */
}

g. For the Sidebar, type:

/* sidebar */
#sidebar {
width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
padding: 20px; /* add padding */
}

h. And for the footer:

/* footer */
#footer {
clear: both; /* clears everything above, placing the footer below everything in our wrapper */
background: url(images/header-footer_bg.png) repeat-y;
width: 720px;
padding: 10px 20px 10px 20px; /* sets the padding 10px top, 20px right, 10px bottom, 20px right */
}

You may notice, things look very different in each browser if you are viewing this in Firefox and Internet Explorer on Windows. Basically, everything is rendered correctly in Firefox and incorrectly in IE. Currently, I'm using IE7. We will address those issues below, using a source I found.

12. While browsing Tutorialized.com, I found the just in time article, 9 Most Common IE Bugs and How to Fix Them. Following the suggestions here will allow us to fix the IE7 issues. Instead of putting these CSS hacks into valid code, we will put them in conditional comments
a. Setup our conditional comment structure in index.html's <head> tag. Make sure NOT to leave any spaces within the conditional opening and closing comments. I did at first and IE7 did not recognize my external stylesheet. Type exactly as below:

<!--[if lte IE 7]>
<link rel=stylesheet type="text/css" href="ie_fixes.css" media=screen>
<![endif]-->

just below the </title> closing tag

*Note: A reader below mentioned that the web page after the Internet Explorer fixes did not render correctly in IE 8. I finally found out why. A quick Google search on IE 8 and standards reveals that Internet Explorer 8 is now standards compliant by default, thus our new conditional comment above targets IE 7 and below, the non standards browsers.

b. Now, create a new stylesheet "ie_fixes.css" and Save in the same folder with index.html
c. The information from here on is gleaned from the 9 Most Common IE bugs article. Needless to say, if you are working in Windows, you will want to preview in Internet Explorer. First, we will target the centering (or non-centering) issue in IE7. Type the following in "ie_fixes.css":

body {
text-align: center; /* centers layout in IE */
}

#wrapper {
text-align: left; /* aligns text left in the wrapper div- everything else */
}

d. Now, we can fix the inner header divs and the content and sidebar divs. Type the following:

#left {
width: 469px; /* IE excludes padding from the total width, instead placing it outside the width */
}

#sidebar-2 {
/* leave this width as is */
}

#content {
width: 469px;
}

#sidebar {
width: 271px;
}

e. Finally, handle the footer in IE:

#footer {
width: 740px;
}

And finally, we are finished with this section (with two screenshots below- our web page in Firefox 3 and IE7). But wait! You may be asking, "What about our sidebar lists and embellishments, Our post and blog title colors and time and date information?" These details and their CSS counterparts will be discussed in the next tutorial.





Next tutorial in this series: Converting a Static HTML Site into a Wordpress Theme- Part 1.

Want to know more about GIMP, HTML and CSS? Check out JGPWS Tutorials.

www.squidoo.com/jgs-gimplayout-tut
Creating a Fancy Web Layout in Gimp 2.6- The first tutorial in this series.

www.chami.com/htmlkit/
HTML-Kit- A great text editor with plugin support.

www.tutorialized.com
Tutorialized.com- A vast collection of tutorials.

net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
9 Most Common IE Bugs and How to Fix Them- pretty self explanatory.

msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Information directly from the Microsoft Developer Network on how to use conditional comments in your HTML pages.