Posts Tagged ‘xhtml’

We’ve created our table, our table image an we’ve begun to style it. The next step is to enter our content. Let’s remember the whole reason for doing things this way, we ant to make sure most of the table can be indexed by search engines like Google. At the end of this lesson I’ll let you download the code, related images and PSDs to help your understanding.

1. 1. In part three we began styling our table but we didn’t get around to styling the contents. Let’s do that now.

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repeat;
color:#a24235;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
}
</style>

2. 2. Next we need to create and style bullets that will be used to cross-reference services to options or items in our table. We’ll do this by styling the table rows to our liking (td). Take a look at the following snippet from the stylesheet:

td {
padding:0 0 0 20px;
}

3. 3. Now we can insert characters into our cells. I chose to use “x” as my bullet.
4. 4. Wow, not that many steps and we’re already done! Here is another visual to help demonstrate what’s going on.



Now all that was a lot of work for something that could have been completely done in PHotoshop. What’s the big deal? Why do we even want a XHTML table?

Why XHTML?

Here’s my reasoning. Anything in our first column is machine readable text which means that search engines can index it. Having those extra keywords will improve your ranking as well. Second, we can get creative with our “bullets” if we wanted to have fly-out effects with javascript or roll-over effects with ajax hidden within the table we can easily do that by adding a few lines of code. Using an image prevents most of this. Lastly, because our bullets are actual XHTML objects, if we want we can mark them up with contextual keywords and hyperlinks.



This concludes the lesson. Click here to download the files used and see if you can reconstruct what I did. Of course if you’d like to see and example in the wild visit this site.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
0 Comments

Now that you’ve designed your table it’s time to learn how to make it function as valid XHTML. The easiest way is create a hidden table on top of the image.

1. 1. Create a table with the same number of rows and tables. My image had 8 rows and 9 columns.
2. 2. So we’ve got our table, now we want to style it with CSS. Give it a div id=”". For the sake of this tutorial of ‘grunge-table’.
3. 3. In your stylesheet reference the new id and call the image. Don’t forget to include the width and height of your image like so:

<style>
#grunge_table {
width:600px;
height:250px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

4. 4. Now, your table isn’t exactly going to match the cells of your image just yet. The best way to make it do this is to figure out the measurements of the columns and rows of your table image in photoshop. If you look at the images below, you’ll see what my table looked like before and after i fixed the columns and rows to match the image.

Before:


After:


The Code:

<table id="grunge_table">
  <tr>
    <td width="192" height="72"> </td>
    <td width="44"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="45"> </td>
    <td width="46"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

5. 5. I used Dreamweaver to give you a visual representation of what’s going on. The green numbers at the bottom of the lower picture show the widths that the columns have been adjusted to. In the lower pic you’ll see that the table now matches the image perfectly.
6. 6. Now that the dimensions are correct, we need to hide the table setting the border to 0px. Here’s what your stylesheet code should look like:

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

We’ve got our hidden table, in part four we’ll fill it with data.

PART 1 | 2 | 3 | 4

Grunge Tables with Photoshop and XHTML (Part 2)

We’re learning to make grunge tables. In Part 1 we made a simple table, in this lesson we’ll add some grunge and text to make it look unique, and in the final lesson we’ll mark it up with XHTML.

Make It Grungy

1. 1. Import two of the textures you’ve downloaded from Bittbox.com. I chose a grainy one and one that looked a bit like crumpled paper. Feel free to use one, two or several, the more you use the more grungy things will look.
2. 2. Set the topmost grunge layer to Overlay and set the opacity to 75%.
3. 3. Set the lower grunge layers to Soft Light. This serves to preserve your original colors.
4. 4. Play with the other Opacity levels as you see fit.

Dirty Words

A grunge design deserves matching text. Start by downloading some grunge fonts from dafont.com (1, 2) and installing them on your system. Once you’ve installed your new fonts, relaunch Photoshop so that you have access to them. Once you’ve found the font that works best for your design, start working on adding a title or company logo.

If you do decide to add an existing logo you may want to alter the colors to help it match your design. Set the Layer Blend Option to Overlay. Use the grunge brushes you downloaded in part one to make what was your normal logo look even more grungy.

Because you can’t write diagonal text in HTML, we’re going to add the titles for our columns in Photoshop. Don’t worry everything in the rows will be HTML which will allow it to be indexed by search engines. I chose to use a more traditional font, Helvetica, which will match the styled text I plan on using later in the XHTML markup.

PART 1 | 2 | 3 | 4

If you offer web design or graphic design services at some point you’re going to need a price chart or service list so that potential clients can see what you’re all about. In this multi-part tutorial I’ll show you how to make one in Photoshop and then mark it up for XHTML. Then I’ll let you download the files to double check your work. You should download some grunge brushes and textures before hand, I used textures from Bittbox.com and these brushes from photoshopbrushes.com.

(more…)

In “Designing and Coding a Wordpress Theme From Scratch” I gave an overview, start-to-finish, on how to turn a Photoshop design into a fully functioning Wordpress theme. There are many methods for getting from Photoshop to XHTML, however. Here are some of the ones I used in that tutorial and a few new ones that you may not be aware of.

(more…)

Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”
Part 8 - “Putting the Press in Wordpress with PHP”
Part 9 - “Marking Up Header.php, Footer.php and Sidebar.php”

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

(more…)

Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

One way to do this is with javascript, the other way is with CSS.

(more…)

We’ve just started our first Wordpress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

(more…)