Design insights & tutorials.

Create a Killer Band Site in Drupal – Part 3 – XHTML

Turquoise Flag-Tip

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

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.

Files

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.

** Edit: Zip file with all of the XHTML / CSS files here. **

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.

Files

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.

CSS Reset Styles

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.

Base HTML

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.

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.

Goband Content Background Gradient Issue

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

Goband Content Background Gradient Issue Fix

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.

Sliding Doors CSS Styles

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.

Absolute Relative CSS

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.

Top Positioning Problem

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

Top Positioning Problem Corrected

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.

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

About the Author, Jeff Finley

I'm a partner at Go Media, a Cleveland web design and development firm. We also specialize in print design and branding. I started Weapons of Mass Creation Fest and wrote the book Thread's Not Dead, teaching artists and designers how to start a clothing company. In my spare time, I write songs and play drums in Campfire Conspiracy. I'm a happy husband and an aspiring b-boy and lucid dreamer.
Discover More by Jeff Finley

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • http://benleivian.com Ben Leivian

    Fantastic! I can’t wait for Part 4.

  • http://www.thetenthofmay.com Ben Leivian

    Fantastic! I can’t wait for Part 4.

  • JoHn

    Awesome… patiently awaiting part 4. *sits and waits*

  • JoHn

    Awesome… patiently awaiting part 4. *sits and waits*

  • MattLikeALion

    Thanks so much Sean, Jeff and GoMedia! Even though a lot of this has been review, I find that I’m reminded of things and also learn important things in each tutorial.

    I am so impatient to get to the Drupal part. Sean, we’ll give you mad props if you put out the next update sooner than a week. Super mad props.

    I feel like this is one of those tv series that you get wrapped up in, but end unexpectedly every episode and you have to bite your fingers until the next week. I’m not patient, and that’s why I’m glad when I discover shows after they are available on DVD – no waiting for me!

  • MattLikeALion

    Thanks so much Sean, Jeff and GoMedia! Even though a lot of this has been review, I find that I’m reminded of things and also learn important things in each tutorial.

    I am so impatient to get to the Drupal part. Sean, we’ll give you mad props if you put out the next update sooner than a week. Super mad props.

    I feel like this is one of those tv series that you get wrapped up in, but end unexpectedly every episode and you have to bite your fingers until the next week. I’m not patient, and that’s why I’m glad when I discover shows after they are available on DVD – no waiting for me!

  • MattLikeALion

    Seriously though. We’ll give. you. MAD. props.

  • MattLikeALion

    Seriously though. We’ll give. you. MAD. props.

  • http://www.avangelistdesign.com Avangelist

    Really thorough. Seeing that now makes me realise how similar the skinning format for Wordpress and Drupal are.

    Not too sure that I would do some things in the same way, like the reset, has font-size: 100% But that is the default for browsers anyway? 16px=100% Obviously this could change depending on the browser local settings but you shouldn’t change that for accessibility reasons.

    Something I have noticed a hell of a lot recently in particular because of skinning Wordpress is that there are a lot of sites combining the ID and CLASS tags to single elements, which I was always told was a big fat no no because an ID is a unique item and a class is an item which appears multiple times?

    For example your searchbar, has a seperate named id and class. I am halfway through a wordpress skin for my site at http://www.avangelistphotography.com/WWW and these cropped up all over the place in the default files but I have ripped them all out where possible.

  • http://www.avangelistdesign.com Avangelist

    Really thorough. Seeing that now makes me realise how similar the skinning format for Wordpress and Drupal are.

    Not too sure that I would do some things in the same way, like the reset, has font-size: 100% But that is the default for browsers anyway? 16px=100% Obviously this could change depending on the browser local settings but you shouldn’t change that for accessibility reasons.

    Something I have noticed a hell of a lot recently in particular because of skinning Wordpress is that there are a lot of sites combining the ID and CLASS tags to single elements, which I was always told was a big fat no no because an ID is a unique item and a class is an item which appears multiple times?

    For example your searchbar, has a seperate named id and class. I am halfway through a wordpress skin for my site at http://www.avangelistphotography.com/WWW and these cropped up all over the place in the default files but I have ripped them all out where possible.

  • http://aiburn.com Sean Hodge

    Hey all,

    Thanks for your patience in the series. Its cool to see you so excited.

    Try checking out the Drupal Dojo before the next tutorial comes out. Its a great place to learn through screenscasts about Drupal. There are some theming sessions there as well. http://drupaldojo.com

    Thanks.

    @Avangelist
    I really want to skin a Wordpress theme to see how familiar they are. Let me know after the next theming tutorial if it is real similar. I’m curious about that.

    With the Reset I just differ to the expert Meyer. And I haven’t had any problems with it. But there is definitely more than one Reset out there to choose from.

    Actually, there is nothing wrong with combining ids and classes on the same element, or even multiple classes for that matter. It is important to understand the difference between a class and an Id though and really to use IDs appropriately. But applying classes to elements that already have IDs is a convenience. You may be right that its not good practice. I’m not sure. But as you pointed out as well it is common practice in content management systems to do this.

    It can be a lot of work to try to replace all the default classes and ids that a content management system outputs. Every Drupal release I hope it gets cleaner. I’m always looking for less default styling and more ways to configure it myself.

    I’m excited to start playing with Drupal 6. This tutorial series is covering Drupal 5 which is the current version of Drupal. The next version of Drupal will be released literally any day now. Drupal 6 is on its 4th Release Candidate and is being reviewed by the community. At this stage no new features are being added. Its code is just being tested and fixed before release. I expect it will be released before the end of the month. But its hard to give an exact day.

    Some good points you raised. Thanks.

  • http://aiburn.com Sean Hodge

    Hey all,

    Thanks for your patience in the series. Its cool to see you so excited.

    Try checking out the Drupal Dojo before the next tutorial comes out. Its a great place to learn through screenscasts about Drupal. There are some theming sessions there as well. http://drupaldojo.com

    Thanks.

    @Avangelist
    I really want to skin a Wordpress theme to see how familiar they are. Let me know after the next theming tutorial if it is real similar. I’m curious about that.

    With the Reset I just differ to the expert Meyer. And I haven’t had any problems with it. But there is definitely more than one Reset out there to choose from.

    Actually, there is nothing wrong with combining ids and classes on the same element, or even multiple classes for that matter. It is important to understand the difference between a class and an Id though and really to use IDs appropriately. But applying classes to elements that already have IDs is a convenience. You may be right that its not good practice. I’m not sure. But as you pointed out as well it is common practice in content management systems to do this.

    It can be a lot of work to try to replace all the default classes and ids that a content management system outputs. Every Drupal release I hope it gets cleaner. I’m always looking for less default styling and more ways to configure it myself.

    I’m excited to start playing with Drupal 6. This tutorial series is covering Drupal 5 which is the current version of Drupal. The next version of Drupal will be released literally any day now. Drupal 6 is on its 4th Release Candidate and is being reviewed by the community. At this stage no new features are being added. Its code is just being tested and fixed before release. I expect it will be released before the end of the month. But its hard to give an exact day.

    Some good points you raised. Thanks.

  • Brett Nimphius

    in regards to putting a link at the end where it would be similar to the first button, but on the back of the navigation: would it be the same as the front, just float right instead of left? If so I’m having major difficulty with this. Help would be much appreciated

    Either way insane tutorial sean go GoMedia!

  • Brett Nimphius

    in regards to putting a link at the end where it would be similar to the first button, but on the back of the navigation: would it be the same as the front, just float right instead of left? If so I’m having major difficulty with this. Help would be much appreciated

    Either way insane tutorial sean go GoMedia!

  • MattLikeALion

    Drupal seems pretty intimidating. The Drupal Dojo site – I don’t even know where to begin to take in the info. I’m glad we have this step-by-step, babying tutorial to ease us into it all.

  • MattLikeALion

    Drupal seems pretty intimidating. The Drupal Dojo site – I don’t even know where to begin to take in the info. I’m glad we have this step-by-step, babying tutorial to ease us into it all.

  • Pieter

    I just started doing webdesing again (I stopt awhile ago), and i was thinking of changing my work-flow. I was working a lot with fireworks so this tutorial wouldnt come in a better timing. And so far I like illustrator and the way you work, and I am learning alot. So thanX for this great tutorial and keep the good work going!

    ps. I just noticed one litle error in the article: the link ”Read Part 2 – Slicing it Illustrator” on top of the article opens the wrong page.

    And Sorry for my bAd english :(

  • Pieter

    I just started doing webdesing again (I stopt awhile ago), and i was thinking of changing my work-flow. I was working a lot with fireworks so this tutorial wouldnt come in a better timing. And so far I like illustrator and the way you work, and I am learning alot. So thanX for this great tutorial and keep the good work going!

    ps. I just noticed one litle error in the article: the link ”Read Part 2 – Slicing it Illustrator” on top of the article opens the wrong page.

    And Sorry for my bAd english :(

  • MikeTheVike

    This is an awesome set of tutorials. The first 3 I mostly skimmed, but I can’t wait for the Drupal integration.

    You guys have a great blog, keep up the good work!

  • MikeTheVike

    This is an awesome set of tutorials. The first 3 I mostly skimmed, but I can’t wait for the Drupal integration.

    You guys have a great blog, keep up the good work!

  • http://aiburn.com Sean Hodge

    @Brett Nimphius,

    I’m not sure about that. I haven’t worked out that exact situation before. Let us know if you get it resolved and any of the issues you overcame though. I’d love to hear about it.

    @MattLikeALion,

    I can relate to Drupal seaming intimidating. It was to me when I got started with it. Just take it one step at a time. On the Dojo you can review sessions that you find interesting first. There is one on themeing you might want to check out: http://drupaldojo.com/lesson/theming-like-a-pro

    But yah the baby step analogy is good. This tutorial series is really made get you started with Drupal themeing.

    @Pieter,

    I chose to showcase how Illustrator can be used for website design and how in some cases its quick. A site with detailed vector graphics being used to make its design makes sense to use Illustrator.

    That being said Fireworks is awesome for rapid website designing and you can export .eps files over to it from Illustrator. Photoshop is really good when you need exact pixel control and I’ve been reading about using smart objects and how that can speed up development time. I build most of my client sites in Fireworks actually.

    I look forward to the next Creative Suite. Adobe will have had enough time at that point to figure how these three programs will work together for web design. I’m hoping Fireworks will tie in better. It would be awesome to make a vector design in Illustrator and cut and paste into Fireworks and the results were good.

    I wrote about how to do things in Illustrator more to point out that it can be done. There are not many tutorials on how to use Illustrator that way. So, keep your options open and use the best tool for the project your working on.

    @MikeTheVike,

    The next one is coming soon. There is so much work that GoMediaZine publishes on a regular basis that the next installment has to fit into the publishing schedule. It will be out shortly though.

    Thanks for all the comments everybody.

  • http://aiburn.com Sean Hodge

    @Brett Nimphius,

    I’m not sure about that. I haven’t worked out that exact situation before. Let us know if you get it resolved and any of the issues you overcame though. I’d love to hear about it.

    @MattLikeALion,

    I can relate to Drupal seaming intimidating. It was to me when I got started with it. Just take it one step at a time. On the Dojo you can review sessions that you find interesting first. There is one on themeing you might want to check out: http://drupaldojo.com/lesson/theming-like-a-pro

    But yah the baby step analogy is good. This tutorial series is really made get you started with Drupal themeing.

    @Pieter,

    I chose to showcase how Illustrator can be used for website design and how in some cases its quick. A site with detailed vector graphics being used to make its design makes sense to use Illustrator.

    That being said Fireworks is awesome for rapid website designing and you can export .eps files over to it from Illustrator. Photoshop is really good when you need exact pixel control and I’ve been reading about using smart objects and how that can speed up development time. I build most of my client sites in Fireworks actually.

    I look forward to the next Creative Suite. Adobe will have had enough time at that point to figure how these three programs will work together for web design. I’m hoping Fireworks will tie in better. It would be awesome to make a vector design in Illustrator and cut and paste into Fireworks and the results were good.

    I wrote about how to do things in Illustrator more to point out that it can be done. There are not many tutorials on how to use Illustrator that way. So, keep your options open and use the best tool for the project your working on.

    @MikeTheVike,

    The next one is coming soon. There is so much work that GoMediaZine publishes on a regular basis that the next installment has to fit into the publishing schedule. It will be out shortly though.

    Thanks for all the comments everybody.

  • Scott

    This is best tutorial on web development I’ve ever seen. I am enjoying this series immensely and thank you for doing such an an amazing job putting this together!

  • Scott

    This is best tutorial on web development I’ve ever seen. I am enjoying this series immensely and thank you for doing such an an amazing job putting this together!

  • http://refreshingapathy.com Rick H.

    The tutorial is excellent, and I can’t wait for the Drupal part to begin! This is actually great timing since I volunteered to make a site for my buddy’s band, and they liked the layout of Ozzy’s (Drupal based!)

    In regards to the virtual machine, might Isuggest Parallels? I’ve run their software for a while, and their newest build has not had many (if any) problems… I run Windows XP on a gig of RAM and Gentoo on another gig, leaving 2 for OS X… works pretty darn well for me.

  • http://refreshingapathy.com Rick H.

    The tutorial is excellent, and I can’t wait for the Drupal part to begin! This is actually great timing since I volunteered to make a site for my buddy’s band, and they liked the layout of Ozzy’s (Drupal based!)

    In regards to the virtual machine, might Isuggest Parallels? I’ve run their software for a while, and their newest build has not had many (if any) problems… I run Windows XP on a gig of RAM and Gentoo on another gig, leaving 2 for OS X… works pretty darn well for me.

  • http://www.webhipster.com Vinnie

    Yeah Sean, you da’ man!

  • http://www.webhipster.com Vinnie

    Yeah Sean, you da’ man!

  • MattLikeALion

    So, it’s been forever. I’m sure you’re sick of our constant begging for more after each tutorial, but seriously, GoGang, we’re checking back constantly to see if we can get to the meat of this series. Any chance we can sneak a peak at the next installment?

  • MattLikeALion

    So, it’s been forever. I’m sure you’re sick of our constant begging for more after each tutorial, but seriously, GoGang, we’re checking back constantly to see if we can get to the meat of this series. Any chance we can sneak a peak at the next installment?

  • Tim

    Sean, is it possible to upload the source files of this tutorial?

    Thanx a lot!

  • Tim

    Sean, is it possible to upload the source files of this tutorial?

    Thanx a lot!

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site with Drupal - Introduction

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer band site in Drupal - Part 1 - Design

  • http://mahalie.com/notebook mahalie

    This is a stupendous effort and great tutorial. I can’t imagine trying to comprehend it all for a complete newbie but for those of us who are already web designers it’s so great to learn about other processes.

    So far nothing too new, but some good stuff on floats, standards, etc. that I needed to be reminded on to thoroughly understand your methods. Can’t thank you enough! Go Media should thank you too, this tutorial has prompted me to subscribe to this site!

  • http://mahalie.com/notebook mahalie

    This is a stupendous effort and great tutorial. I can’t imagine trying to comprehend it all for a complete newbie but for those of us who are already web designers it’s so great to learn about other processes.

    So far nothing too new, but some good stuff on floats, standards, etc. that I needed to be reminded on to thoroughly understand your methods. Can’t thank you enough! Go Media should thank you too, this tutorial has prompted me to subscribe to this site!

  • Mathew

    Dear Sir,

    I had gone through your tutorials and found it very interesting.
    I am a beginner in Drupal also.
    I have installed Wamp server in my system
    Operating System is Windows XP Professional.

    I went through the design part using Adobe Illustrator and I was able to follow that.

    You are on a Mac Machine and the program you use for coding is Coda.
    My question is can I use the same Coda software, since I am on a windows based machie (Windows XP Professional).
    Can I install this Coda software and use it in my windows based system?
    If so, can you explain in easy steps how to do that?
    Hope you would help me.

  • Mathew

    Dear Sir,

    I had gone through your tutorials and found it very interesting.
    I am a beginner in Drupal also.
    I have installed Wamp server in my system
    Operating System is Windows XP Professional.

    I went through the design part using Adobe Illustrator and I was able to follow that.

    You are on a Mac Machine and the program you use for coding is Coda.
    My question is can I use the same Coda software, since I am on a windows based machie (Windows XP Professional).
    Can I install this Coda software and use it in my windows based system?
    If so, can you explain in easy steps how to do that?
    Hope you would help me.

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 6 - Additional Functionality and Resources

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 4 - Theming Drupal

  • Pingback: Create a Killer Band Site in Drupal - Part 5 - Drupal Admin | GoMediaZine

  • wikipediaboy

    @Mathew:

    htp://en.wikipedia.org/wiki/Coda_(web_development_software)

  • wikipediaboy

    @Mathew:

    htp://en.wikipedia.org/wiki/Coda_(web_development_software)

  • http://traffiq.com ad placement

    This is a great advertising tool.

  • lucasowens

    For years I have struggled with lots of reading materials and I find that I can never finish something that I have started and I find myself getting really frustrated and overwhelmed with demands on my time. Until now…..Speed Reading changed my life and I think it can help almost anyone. Sites such as Spreeder.com and my coach Rob SCott have really transformed my mindsets and way of reading, my speed has doubled in the last year and now I breeze through 2-3 books A DAY!
    Check this stuff out, It will add hours to your days and years to your life!

    http://calmcoolproductive.com

  • raflec

    Another great article to read while coding web layouts:

    http://www.xhtml-css-code.com/html/things-to-re

    Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

  • hasan

    Perfect!

  • hasan2

    Nice!

  • hasan2

    wqerdas

  • Mathew

    Dear Sir,

    I had gone through your tutorials and found it very interesting.
    I am a beginner in Drupal also.
    I have installed Wamp server in my system
    Operating System is Windows XP Professional.

    I went through the design part using Adobe Illustrator and I was able to follow that.

    You are on a Mac Machine and the program you use for coding is Coda.
    My question is can I use the same Coda software, since I am on a windows based machie (Windows XP Professional).
    Can I install this Coda software and use it in my windows based system?
    If so, can you explain in easy steps how to do that?
    Hope you would help me.

  • Mathew
  • Mathew
  • Mathew

    asd

    sddddd

  • Mathew

    asd

  • Mathew

    dfsf

  • Matt

    Thanks for this nice work!
    dizi izle

  • Guest

    lots of broken links in the article to example code.

  • dizi izle

    ‘m starting to learn because of you

  • http://www.filminiizle.com filmini izle

    What is the difference between html and xhtml. I’m new friends in a bit

  • http://www.korusanguvenlik.com.tr güvenlik sistemelri

    güvenlik sistemelri ankara

  • michal rock

    Creating the your own website in Photoshop is really fun to do. I am able to create full web site with great design and look but I am not able to convert the PSD file into xHTML format to create a full functional site which is accessible from any device or browser.

    psd to xhtml

  • michal rock

    I think if you are developer of programmer than creating website is like fun for you. Drupal is really good content management system to use. I personally prefer to use joomla which is also good like drupal but it has some best features like you can find more extension in Joomla.

  • http://www.sitsols.com/ web design dubai

    clear step by step explanation, very useful every one

  • chinna samy

     Thanks for sharing