Posts Tagged ‘css’

Extensible Hypertext Markup (XML) has changed the web as we knew it and helped to make websites rich, well designed and fast loading. It’s become an integral part of Web 2.0 that won’t be going away any time soon. So what’s next for CSS? Mozilla and the Opera Software company give us some clues as to what features from the new CSS3 markup that may be incorporated into the next generation of web browsers. Here are some highlights…

(more…)

Bookmark It

Hide Sites

I’m going to give you some advice that will rock your world. If you’re a web designer, you should design your resume. *GASP*

All kidding aside, the importance of impressing people with your resume’s visual appeal, especially online, is important. Here are some tips on styling a resume so it conveys your skills and is pleasing to the eye.

Keep in mind, when I say design, I don’t necessarily mean having flying planets, sparkles and grunge effects all over it. That would be annoying and if that’s what your resume looks like right now, I strongly encourage that you remain employed until you get a chance to fix it.

What I mean is paying attention to three critical things: typography, layout and accessibility.

(more…)

Bookmark It

Hide Sites

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

Bookmark It

Hide Sites

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…)

Bookmark It

Hide Sites

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…)

Bookmark It

Hide Sites

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…)

Bookmark It

Hide Sites

This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

(more…)

Bookmark It

Hide Sites

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…)

Bookmark It

Hide Sites

You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

(more…)

Bookmark It

Hide Sites

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…)

Bookmark It

Hide Sites