Teletalk 3G

Teletalk 3G

Friday, March 15, 2013

Create a Sleek, High-End Web Design - Part 1

Tutorial Details
  • Program: Photoshop
  • Completion Time: 2 hours
  • Difficulty: Intermediate
Download Source Files





In this tutorial, we’ll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.

The End Design

It’s quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. It relies on having elegant typography, a structured layout, and a visually interesting background.
The real power of this design is to show you what can be accomplished by keeping it simple. At the end of this Photoshop part of the tutorial, I’ll show you how we can easily swap backgrounds and fonts and explain why this design works well.
It’s a simple structure: horizontal menu, main heading panel, and content area. Although this is a homepage design, you could imagine an interior page would simply have a different heading panel and new content area. For the purposes of simplicity, we’ll only be putting together the homepage design.

Step 1

First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.
Now our first task is to create a nice abstract background. To do this we’ll draw a linear gradient down using these two colors: #1b204c to #472373.

Step 2

Now we want a visually interesting background which is abstract enough that it doesn’t distract from the text. Fortunately, there is an awesome watercolor image available free via GoMedia’s Arsenal, click on the freebie section and you’ll find two watercolors; the one we want is the greenish one.
Now while it’s very pleasant as is, it’s much cooler if we press CTRL+I and invert it so it’s that nice pink/purple on black.

Step 3

Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). Additionally, we don’t want it too long vertically, either, so it’s best to erase a little of the excess. To do this grab a paint brush and paint in black to just remove the bottom parts.
Note that it’s best to get a brush that has some texture so it’s not obvious that we erased parts. If you scroll down your brush list, there is a brush that comes with Photoshop that looks like the one shown. It’s not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to use those.
When you’re done, fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer.

Step 4

Now decrease the opacity of the watercolor layer to about 70% and set its blend mode to Overlay. That way, some of the coloring passes through to create a nicer look.

Step 5

Now in a new layer above the watercolor layer, and drawing straight up, make a Linear Gradient going from black to transparency so that afterwards your canvas basically fades to black down the bottom.

Step 6

Next in two new layers, draw a couple of Radial Gradients from white to transparency, one larger than the other. Set these to Overlay and 40% and 100% Opacities for the larger and smaller ones respectively.
Basically, you should be making a highlight on our image to give it a bit more texture.

Step 7

So here’s the finished background. It’s dark, abstract, and quite elegant with the coloring. Of course, pink might not be your particular choice of color usually, and if that’s the case, feel free to add a color adjustment layer on top and use it to adjust the coloring. I kinda like the pink/purple, so am going to run with it!

Step 8

Now we create a new layer and add a "logo". I don’t really have a purpose with this design, so I decided just to put some text in and pretend that’s my logo. Because this tutorial is half Psdtuts+ and then half NETTUTS, I wrote out a neat little "psd vs net".
The fonts I’m using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of the font is what I’ve used for the ‘vs’).
To make the ‘vs’ bit raise up a little you can use the baseline control in the Character Palette (shown in the second image below).
Finally, I also added a little layer style to the text with a faint Gradient Overlay as shown and a 1px Inner Glow with white.

Step 9

Now at this point, I switched on my Rulers (Ctrl+R) and drew a couple of guides. I divided my page into three columns with lines at 50px, 320px, 610px, 900px. At least those are the numbers I should have used. Looking at my screenshot I just realized my third line is off … d’oh!
Anyways, the point is that I’m defining the space I’ll be placing all me elements in, and if I were to make multiple pages I could use this grid in different ways. As it is, with only the homepage being designed, I’m just going to use those three columns once—a little later on.

Step 10

OK, so now we draw in our first black box. With your rulers and guides still on, create a new layer and draw a Rectangular Marquee (M) going from one side to the other. Fill it with black, then set this layer to 80% Opacity, right-click the layer, and choose Blending Options. Then click on Stroke and add a 1px white stroke on the Outside and set to Overlay. This will give us a really cool border that will make the box look much sharper.

Step 11

Now duplicate the box layer, and using Ctrl+T, transform the box so that it’s the same width but much shorter (as shown below). This will be our navigation box.
Change the Opacity to 40% and the Fill to 50%. This will make our box much fainter and give some depth to the two boxes, making one seem more important and imposing than the other.
This sort of contrast between the two boxes is a great way of setting visual precedence between elements. When the user comes to the page, we want them to see our big message first, and then the navigation bar. By having it faded out we tell the user that the less prominent one is to be looked at second.

Step 12

OK, now we add some text. Again I’ve used Egyptian Light here for the big headline copy (that will be an image in the final HTML) and Arial for the menu items (that will be HTML text links).
Now a word on typography. This design relies heavily on the fact that we’ve used a simple, clean typeface. Having the text nice and large makes it appear very bold, but at the same time because it’s a very thin typeface, it comes out looking elegant.
If you’re looking for a high-end design look, thin, classic typefaces are hard to beat. When I first discovered Helvetica Ultralight, I remember I went crazy designing all these designs that looked really minimal and up-market.
Additionally, this particular font—Egyptian—has a very sharp, slab serif, combined with a sort of squarishness that makes it look quite cool (I think).
There are plenty of other awesome fonts you could use. As a general rule though, you want something more classic looking. Or in other words, unless you know what you’re doing, you’d want to stay away from really weird looking fonts—e.g. something that looks very futuristic. Actually as a good, general rule, unless you’re super confident, it tends to be better to veer towards more ordinary fonts.
Another kind of typeface that would work really well here is something that is a a bit technology-looking like this font that Chris Garrett Media uses. I have no idea what font that is, or what that type of font is called, but it’s pretty neat. Maybe a kind typophile might illuminate us in the comments :-)

Step 13

Anyhow, after seeing Chris Garrett Media‘s site, I decided it would be pretty cool to add a gradient overlay to my type and give it a bit of a shine. So as you can see below, here we’re adding a Gradient Overlay from black to white, faded out a bit and on Overlay mode.

Step 14

Now we can draw an additional big black box for the content area. Actually, you can just duplicate the earlier layer and transform it again.
And that gets us to the point shown in the image below. Looking pretty cool!!

Step 15

Now we add a bit of dummy content in the content box. Here I’ve again used Arial for most of the text, but for the headings rather than use Egyptian, I’ve gone with Georgia. Georgia is not quite as elegant, but is a standard font which means I can make these headings in plain old HTML instead of relying on images (or Flash).
Actually, with Windows Vista’s release there is also another semi-standard font that would work well here called Cambria. But Cambria has some weird rendering problems in Firefox on Macs at certain sizes, so we’ll stick with good ol’ Georgia for the moment.

Step 16

Finally, I created a new layer at the bottom, filled it with a dark purplish color, added a 1px border to the top, and voila we have a footer.

Ready for Building

Putting it all together, the site is ready to build.

Alternate Background 1

Now one of the cool things about this design is we can easily swap the background and the design still looks awesome. Here’s I’ve swapped it for an image from iStockPhoto called Passion, with a similar color scheme. It’s a very cool 3D rendering of light, and like our current background, it is also abstract and visually beautiful.

Alternate Background / Colours 2

Here I’ve used another abstract image from iStockPhoto called Blue Energy. Because the color has changed, I’ve also gone through and amended the colors in a few places—particularly the text—and also added a big glow to the main copy.

Why it Works

Now it’s unlikely you’re ever going to have need of this exact design—now that I’ve written a whole tutorial on it. So let’s talk a little about why it works well, because that will help you use the principles to create your own unique look.
There are several things that come together to make a design that works here:
  1. First, I’ve picked really stunning backgrounds. The ones from iStock and the one from GoMedia would make nice images all by themselves. They are interesting to look at but they don’t fight for dominance. They also all fade out really easily. Photos that fade out easily are always easier to work with.
  2. Great images are the perfect partner for simple and clean typography. Because the images are so lovely, you don’t need to do overdo it with the typography. It can just be clean, clear, and organized.
  3. Another factor that goes into making this work is that there is plenty of space. With a complicated background, it would be easy to wind up looking cluttered. So it’s important to make sure there is plenty of space between things, and inside the boxes, and so on. Space also is a great way of making a design look more high-end. Nothing screams low-end like clutter.
Of course, there are plenty more things we could talk about like color and precedence, but I think the main design things you should be looking at here are the typography in conjunction with the background. As a final statement to that end, here is a little image that says it all :-)

Now the HTML/CSS

Posted by at No comments:
Labels:

Create a Sleek, High-End Web Design from Scratch - Part 2

Now the HTML/CSS
Tutorial Details
  • Programs: HTML Editor, Photoshop
  • Difficulty: Beginner-Intermediate
  • Completion Time: 2-4 hours
  •  Like us in Facebook
There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.

Demo and Source Code


Step 1

So here’s the design we’re going to be building. As mentioned you can follow the tutorial over at PSDTUTS to build this design from scratch. In this tutorial we’re only going to build this homepage, however using that as a base you would be able to build interior pages following the same layout.

Step 2

The first thing to do is decide how we are going to structure our build. This process gets easier over time as you learn how CSS layouts can work. For this design I think we can get away with a very simple build which uses quite a bit of absolute positioning and a large background image.
What is Absolute Positioning?
When you place an HTML element on a page (e.g. a <div>, <p> and so on) it has a natural position which is determined by what came before it. So for example if you put a <p></p> down with some text in it, and then you place another <p></p> it will naturally appear just below the first <p>. It will just flow on relative to the last element.
Absolute positioning is different in that you are specifying an exact placement for an object and taking it out of the regular flow of elements. So if you had your first <p></p> just as before, but for your next <p></p> you gave it an absolute position of left:500px; top:500px; Then it would appear precisely in that location regardless of the previous <p>.
You set the absolute position of something like this:
view plaincopy to clipboardprint?
  1. .className {  
  2.   
  3.     position:absolute;  
  4.     top:0px;  
  5.     left:0px;  
  6.   
  7. }  
Drawbacks to Absolute Positioning

The main problem with using absolute positioning is that your elements don’t really relate to one another. So for example if you have one block of text near the top of your page, and another block of text a bit further down, it might look great when each block of text is short. But if the top block were to have a big essay in it, then instead of pushing the next block of text down, it will just go over the top. This is because you are taking the elements out of the natural flow of the page.
So Absolute Positioning is only really useful for objects that you know will always be a certain size, and which don’t really need to interact with other elements.
Why it’s useful to us todayThe good thing about Absolute Positioning, is that it’s really, really easy! You tell the browser where to put something and that’s where it appears! To top it off, there are far fewer browser compatibility issues when you position things absolutely. After all 100px is 100px whether you’re in Firefox, Internet Explorer, or Safari.
SOOO our layoutSo the way we are going to make our website is:
  • Have a large background image
  • Absolutely position the logo, menus, and heading panel precisely where they are meant to appear
  • Have all our content appear in a regular <div> tag, but give it so much padding-top that the content is pushed all the way down to where it’s meant to be
  • Have our footer sitting underneath
If that doesn’t make a whole lot of sense yet, don’t worry it will as you see the site take shape!

Step 3

Now in terms of background images, we need two. One is going to be gigantic, and in fact after I saved it as a JPG it is about 56kb in size. There used to be a time where that would have been a bit too big, but these days it’s not a big deal.
So that’s the main area, then we need a second background image which will be a thin slice. This slice will repeat over and over off to the right so that when the browser window is dragged open it tiles out.
(Note the logo shouldn’t be showing below in the background image, that was just some bad screenshotting, sorry!)
You can see the two images I’ve created here and here.

Step 4

OK so now let’s start our HTML. First we lay out some basics:
view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  4. <head>  
  5.     <title>PSD vs NET</title>  
  6.     <link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" />  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="outside_container">  
  11.     <div id="container">  
  12.       
  13.   
  14.         <!-- The Main Area -->  
  15.     </div>  
  16. </div>  
  17. <div id="footer">  
  18.   
  19.     <img src="images/footer_logo.jpg" />  
  20.       
  21.     <span id="footer_text">  
  22.         Made for a PSDTUTS and NETTUTS tutorial by Collis!    
  23.         See the <a href="http://psdtuts.com">Photoshop Tutorial</a>,   
  24.         see the <a href="http://nettuts.com">Web Tutorial</a>  
  25.     </span>  
  26.       
  27. </div>      
  28. </body>  
  29. </html>  
As always it’s best to work from the outside in with our layout. So what I’ve done here is place three major <div>’s. The first two are the outside_container / container and the other is the footer. This requires a little explaining:
  1. I’ve created the outside_container and container because I need a double background image. That is I need a tiling background image, and then on top of that I need that large background image. So in theoutside_container I’ll place the tiling background, then on the container <div> which will appear on top of the outside container, I’ll have that big main background.
  2. The footer needs to be outside the containers because if the browser window were stretched lengthwise, the footer should go on and on. Since it has its own background, it can’t be in the containers – if it were and you stretched at some point you’d see the container background and not the footer!
Also you’ll see I’ve added some content inside the footer, that’s just the mini logo, and the text. I’ve wrapped the text in a <span> tag so that I can manipulate it. There’s no reason to give the <img> tag an id or a class, because we can just say #footer img and since it’s the only image in there, we can call it that way. This keeps our HTML a little simpler.

Step 5

Now the CSS for our code so far:
view plaincopy to clipboardprint?
  1. body {  
  2.     margin:0px; padding:0px;  
  3.     background-color:#11090a;  
  4.     font-family:Arial, Helvetica, sans-serif;  
  5. }  
  6. #outside_container {  
  7.     background:url(images/background_slice.jpg) repeat-x #000000;  
  8. }  
  9. #container {  
  10.     background:url(images/background_main.jpg) no-repeat;  
  11.     min-height:800px;  
  12. }  
  13. #footer {  
  14.     border-top:1px solid #3f2324;  
  15.     padding:30px 50px 80px 50px;  
  16. }  
So going through one at a time:
  1. First we are redefining the body tag. This is almost always the first thing I do. We get rid of any default margin and padding, set a background color and a font-family for the page. Notice that the background colour is in fact the footer background colour. As I mentioned previously this is so that if you stretch the browser window vertically you’ll keep seeing footer.
  2. Next we have the outside_container tag. I’ve given it that slice background, it’s going to repeat only along the x axis (i.e. from left to right) and wherever there’s no background image we’ll see straight black (#000000). So basically as the page gets longer the tiles won’t keep going because we said to only repeat left-right, instead we’ll get the black background. This is perfect because our tiling image fades to black!
  3. Next we have the container. Here we have the gigantic background image set to not repeat – so it only appears once. Notice we didn’t specify a background colour, if we had it would have covered our outside_container over. That’s because this <div> tag is inside the previous one, and will automatically be stretching out to fill it up completely. So our background image appears on top and then outside that area you can see the outside_container background showing through.
  4. I’ve also given the container a minimum height, this is just so that when we look at the HTML page at this point you can see roughly how it’s going to look when there is content. Later on our content will produce the minimum height anyway.
  5. The footer is basically just a single line border and some padding. There’s no need to give it a background colour, because we set that in the <body> earlier. Remember with the padding definitions it goes like this:padding: top right bottom left (clockwise!)
Here’s where we are up to now…

View The Site So Far

Step 6

Next we’ll finish off that footer by adding a few extra styles like this:
view plaincopy to clipboardprint?
  1. /* 
  2.     Footer 
  3. */  
  4. #footer {  
  5.     border-top:1px solid #3f2324;  
  6.     padding:30px 50px 80px 50px;  
  7.     color:#674f5d;  
  8.     font-size:9px;  
  9.     line-height:14px;  
  10. }  
  11. #footer img {  
  12.     float:left;  
  13.     margin-right:10px;  
  14. }  
  15. #footer span {  
  16.     display:block;  
  17.     float:left;  
  18.     width:250px;  
  19. }  
  20. #footer a {  
  21.     color:#9e8292;  
  22.     text-decoration:none;  
  23. }  
  24. #footer a:hover { color:#ffffff; }  
So here I’ve added a few bits to our #footer class and created a few more classes. Let’s go through it one piece at a time:
  1. First of all the bits between /* and */ are CSS comments. It’s nice to have comments in your CSS file as it really breaks it up and helps keep things intelligible. Actually on larger projects I find CSS files can get pretty out of control if you’re not careful. So it’s really good to try to get into good habits early: name your selectors well, add comments, keep like things together, break into multiple CSS files for larger projects and so on.
  2. In #footer I’ve added a font color, font size and line-height to our previous definition. Line-height is a really useful text attribute as it helps you space out your text. Without good line-height text can look bunched up and harder to read. Too much line-height and the text will be so spaced out it looks weird. So you might want to experiment to find the right heights for different fonts and sizes. Here 14px seemed like a good fit.
  3. Next I’ve set the #footer img and #footer span to both float:left. Because they are both set to float left, they end up in columns next to each other. I’ll talk more about floating and columns later in this tutorial.
  4. Finally we tell the browser what to do with <a> tags (i.e. links) that appear in the footer. Namely that they shouldn’t be underlined, and should change color when you hover over with a mouse.
So with the addition of the footer here’s where up to:

View The Site So Far

Step 7

Now with the footer out of the way, let’s add some more content to the page inside the main container areas. First we need two new images that we make out of our PSD file:

Notice that I’ve used an image for the big text block. In general it’s best to use text for these things as it makes the page much more searchable and is good practice. But it would have been much harder to do as we’d need to use a bit of Flash and SIFr to achieve that effect. So since this is a fairly straightforward tutorial I’ve opted to just use a big image :-)
Here’s a snippet of our HTML code – just the containers bit:
view plaincopy to clipboardprint?
  1. <div id="outside_container">  
  2.     <div id="container">  
  3.       
  4.         <a href="#"><img src="images/logo.jpg" id="logo" /></a>  
  5.           
  6.         <ul id="menu">  
  7.             <li><a href="#">Retouching</a></li>  
  8.             <li><a href="#">Digital Effects</a></li>  
  9.             <li><a href="#">Web Work</a></li>                      
  10.         </ul>  
  11.           
  12.         <ul id="right_menu">  
  13.             <li><a href="#">About</a></li>  
  14.             <li><a href="#">Contact</a></li>  
  15.         </ul>  
  16.           
  17.         <img src="images/panel_home.jpg" id="panel" />  
  18.   
  19.         <div id="content">  
  20.           
  21.             <!-- THE CONTENT GOES IN HERE -->  
  22.           
  23.         </div>  
  24.   
  25.     </div>  
  26. </div>  
So inside the container area we’ve added five things:
  1. Our logo: It’s linked, so clicking it should take you to the homepage, and has id="logo"
  2. Main menu: This is simply an unordered list with id="menu"
  3. The right hand side menu: This is the same as the other menu, just different id="right_menu"
  4. Big text panel image: This is our main heading text saved as an image, id="panel"
  5. Content Div: And this is where we are going to place all our page content later on. I’ve left it empty right now except for an HTML comment.
So before we start styling it up, it’s worth having a look to see how the page looks with just everything dumped on like this:
As you can see we’re going to have to do some serious shifting around to get everything into place. As you’ll recall we’re going to use Absolute Positioning to do this quickly and easily.

Step 8

Here’s the CSS we add to make our elements start to fit into place:
view plaincopy to clipboardprint?
  1. #container {  
  2.     background:url(images/background_main.jpg) no-repeat;  
  3.     min-height:800px;  
  4.     width:1000px;  
  5.     position:relative;  
  6. }  
  7. /* 
  8.     Logo / Menu / Panel Positioning 
  9. */  
  10.   
  11. #logo { position:absolute; top:58px; left:51px; }  
  12.   
  13. #panel { position:absolute; top:165px; left:51px; }  
  14.   
  15. ul#menu {   
  16.     margin:0px; padding:0px;  
  17.     position:absolute; top:145px; left:75px;  
  18. }  
  19. ul#right_menu {   
  20.     margin:0px; padding:0px;  
  21.     position:absolute; top:145px; rightright:75px;     
  22. }  
So again let’s go through each bit piece by piece:
  1. First of all, you’ll see an old bit of our code – the container. I’ve shown this as I’ve added two more lines to it now. It now has a width:1000px and position:relative. This is important because when you set position to be relative, anything absolutely positioned inside, is done so relative to that container tag. So this means I can position things inside this box, using the fact that I know it’s 1000px wide. Namely I’ll be using that for the right_menu.
  2. Next because this is a new set of CSS, I’ve sectioned it off with a comment
  3. With the logo and panel I’ve given both an absolute position on the page. How do I know what numbers to use? Simple go back to the original Photoshop document and measure out where they are meant to be! You can see it’s a really simple class definition, which is why absolute positioning is so easy.
  4. Next with the two menus, these are also absolutely positioned, but here I’ve also given them margin:0px; padding:0px; definitions to make sure we clear away any default margins and padding which unordered lists have.
  5. Next notice that on the right_menu when I have specified the absolute position to be right:75px. This means that it will appear 75px away from the right hand side of its container. Ordinarily that would be the browser window, but because remember earlier I set the container to have position:relative that means it will be 75px away form the right hand side of <div id="container"></div>.
    Now you might be thinking, well what’s the point, can’t I just position things using left only? Well you can, but with our menu, if you were to add extra menu items you would need to reposition it again and again so that it was still 75px away from the right hand side. Whereas by using right the extra menu items flow left when you add them. Try it and see!
So here’s where we are at:

Step 9

As you can see in the previous image, the logo and heading element are now looking like they are in the right position. But the menus are looking kinda weird. Before we style those, a quick word on the logo / image panel. You might be wondering, if they are both images, why not make them part of the background image?
The answer is that the logo we want to make linkable, so that clicking it will take you back to the homepage (makes the site more usable), and the main text panel, well that would probably change from page to page. So by having it a single image, we can have lots of HTML pages using the same CSS stylesheet but simply positioning a different image there with different text.
Now let’s style the two menus and make our page really start to take shape. To do that we need the following CSS:
view plaincopy to clipboardprint?
  1. ul#menu {   
  2.     margin:0px; padding:0px;  
  3.     position:absolute; top:138px; left:75px;  
  4. }  
  5. ul#right_menu {   
  6.     margin:0px; padding:0px;  
  7.     position:absolute; top:138px; rightright:110px;    
  8. }  
  9. ul#menu li, ul#right_menu li {  
  10.     margin:0px; padding:0px;  
  11.     list-style:none;  
  12.     margin-right:10px;  
  13.     font-size:9px;  
  14.     text-transform:uppercase;  
  15.     display:inline;  
  16. }  
  17. ul#menu li a, ul#right_menu li a {  
  18.     text-decoration:none;  
  19.     color:#bd92b2;  
  20. }  
  21. ul#menu li a:hover, ul#right_menu li a:hover {  
  22.     text-decoration:none;  
  23.     color:#ffffff;  
  24. }  
The first two bits of this code are the same as before (although I adjusted the positions a little to make them look right after styling). Notice that these two definitions are separate as they have different positions, but after that we’ve combined the two into the same class definitions as the menu items themselves should look the same. The format for defining two classes together is:
.myClass, .myClass2 { … }
This is very different from this definition:
.myClass .myClass2 { … }
Because the second definition says, all elements with class="myClass2" inside an element with class="myClass".
Anyhow so back to our styles, let’s go through some important points:
  1. We’ve set the <ul> elements themselves to 0 margin and padding, and absolute positioning, as we discussed previously
  2. Then we’ve said for all <li> elements inside those <ul>’s we want them to have no list-style (i.e. no bullet points), we want them to 9px, all upper case, and importantly they should display:inline. Inline display means instead of being blocks that appear one below the next, these will appear next to each other!
  3. The next definition says that for <a> link tags that appear inside an <li> tag that are inside <ul id="menu"> or <ul id="right_menu">, they should be a certain colour and have no underline.
And with that, our page is now looking pretty good!

View The Site So Far

Step 10

Next it’s time to add some content! First let’s add some dummy text, set up so that we can make columns. Here’s the HTML:
view plaincopy to clipboardprint?
  1. <div id="outside_container">  
  2.     <div id="container">  
  3.       
  4.         <a href="#"><img src="images/logo.jpg" id="logo" /></a>  
  5.           
  6.         <ul id="menu">  
  7.             <li><a href="#">Retouching</a></li>  
  8.             <li><a href="#">Digital Effects</a></li>  
  9.             <li><a href="#">Web Work</a></li>                      
  10.         </ul>  
  11.           
  12.         <ul id="right_menu">  
  13.             <li><a href="#">About</a></li>  
  14.             <li><a href="#">Contact</a></li>  
  15.         </ul>  
  16.           
  17.         <img src="images/panel_home.jpg" id="panel" />  
  18.   
  19.         <div id="content">  
  20.           
  21.             <div class="column1">  
  22.               
  23.                 <h2>a sleek design</h2>  
  24.                   
  25.                 <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  26.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  27.                 <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  28.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  29.   
  30.             </div>  
  31.             <div class="column2">  
  32.                   
  33.                 <h2>tutorials</h2>  
  34.               
  35.                 <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  36.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  37.                 <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  38.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  39.             </div>  
  40.             <div class="column3">  
  41.               
  42.                 <h2>recent work</h2>  
  43.   
  44.                 <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  45.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  46.                 <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  47.                 <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  48.   
  49.               
  50.             </div>  
  51.   
  52.               
  53.         </div>  
  54.   
  55.     </div>  
  56. </div>  
OK so in this snippet, you can see I’ve added 3 new <div>’s inside the content area. Each one has a <h2> title element and them some text. They have class names column1, column2 and column3. The reason I’ve added all the extra text is to show you something about making columns.
First let’s add some CSS to make them appear like columns:
view plaincopy to clipboardprint?
  1. /* 
  2.     Content 
  3. */  
  4.   
  5. #content {  
  6.     padding-top:435px;  
  7.     padding-left:85px;  
  8.     width:815px;  
  9.     color:#674f5d;  
  10.     font-size:13px;  
  11.     line-height:20px;  
  12. }  
  13. .column1 { float:left; width:230px; margin-right:30px; }  
  14. .column2 { float:left; width:230px; margin-right:30px; }  
  15. .column3 { float:left; width:270px; }  
As usual I’ve sectioned off our new bit of CSS with a comment. Then I’ve set some styles for #content. Notice how much padding-top there is … 435px! This is to make space for all those absolutely positioned elements earlier. Unlike those elements this content area is in the normal flow of the page.
It needs to be in the regular flow because as you add more content to it, it should push the footer down. If this was absolutely positioned it would just go over the top of the footer.
Now the three column classes, notice they are each set with a width and with float:left. This tells them that they should drift to the left of the page aligned next to any other left floating elements. I’ve given the first two a right margin so they aren’t stuck to each other.
Floating an element makes it drift to the left or right, and tells everything else to wrap around it. When the other elements are also floated, they form into columns. Generally any time you see a column layout, it’s using floats.
Unfortunately there is one weird problem with floats. Namely that they have a problem with their containers. Instead of pushing the next elements down, they just drift over the top. The way to solve this problem is to have an element that comes after them which has the property clear:both.
The Clear property says to stop wrapping stuff around the floating <div>’s. It’s a bit hard to explain, so let’s look at what happens with and without the clearing.
Without ClearingHere is how the layout looks as is:
See how the columns have drifted over the top of the footer, and the footer itself has started wrapping around them. That’s not right!!
With ClearingThe solution is reasonably simple, we need to add a <div> after the three columns like this:
view plaincopy to clipboardprint?
  1. <div id="content">  
  2.           
  3.     <div class="column1">  
  4.       
  5.         <h2>a sleek design</h2>  
  6.           
  7.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  8.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  9.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  10.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  11.   
  12.     </div>  
  13.     <div class="column2">  
  14.           
  15.         <h2>tutorials</h2>  
  16.       
  17.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  18.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  19.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  20.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  21.     </div>  
  22.     <div class="column3">  
  23.       
  24.         <h2>recent work</h2>  
  25.   
  26.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  27.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  28.         <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  29.         <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  30.   
  31.       
  32.     </div>  
  33.       
  34.     <div style="clear:both"></div>  
  35.       
  36. </div>  
See the <div style="clear:both"></div> down the bottom? It’s just an empty <div> that says to clear out the three columns. And it fixes our problem,

View the Site Here.

A Few Last Words on Floats & Clearing Them
You might be wondering why I didn’t place the "clear:both" into the <div id="footer"> definition, but unfortunately that doesn’t work out because of the background we’re using … here’s a screenshot:
Apparently there is a solution that doesn’t involve inserting a useless <div> tag, and you can read about it atQuirksMode. Personally I’ve been using this method for a while, and it works well and consistently so I keep doing it.

Step 11

OK, almost there now!! The main layout is all sorted, all we have to do is add and style our content. Here’s the HTML for it:
view plaincopy to clipboardprint?
  1. <div id="content">  
  2.          
  3.         <div class="column1">  
  4.              
  5.             <h2>a sleek design</h2>  
  6.                  
  7.                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
  8.             <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  9.   
  10.            </div>  
  11.            <div class="column2">  
  12.               
  13.                <h2>tutorials</h2>  
  14.                  
  15.                <p>Psdtuts and nettuts provide tutorials on the following topics (sorta):</p>  
  16.                   
  17.                <img src="images/adobe.jpg" />  
  18.   
  19.            </div>  
  20.            <div class="column3">  
  21.              
  22.             <h2>recent work</h2>  
  23.              
  24.             <ul class="work">  
  25.                 <li>  
  26.                     <a href="">  
  27.                         <img src="images/work_1.jpg" />  
  28.                            <h4>Working Within Limitations to Achieve Great Designs</h4>  
  29.                         Sean Hodge  
  30.                        </a>  
  31.                    </li>  
  32.                    <li>  
  33.                     <a href="">  
  34.                         <img src="images/work_2.jpg" />  
  35.                            <h4>Create a Slick Tabbed Content Area using jQuery</h4>  
  36.                         Collis Ta’eed  
  37.                        </a>  
  38.                    </li>  
  39.                    <li>  
  40.                     <a href="">  
  41.                         <img src="images/work_3.jpg" />  
  42.                            <h4>Creating a PayPal Payment Form</h4>  
  43.                         Collis Ta’eed  
  44.                        </a>  
  45.                    </li>  
  46.                </ul>  
  47.               
  48.            </div>  
  49.              
  50.            <div style="clear:both"></div>  
  51.              
  52.        </div>  
  53.          
It’s basically the same structure as previously except in the third column I’ve created an <ul> element to contain the recent work. Notice that in this <ul> element I’ve set it up so that there is a link <a> tag wrapping up the image, the heading and the text. So the whole thing will become a block link. That means if you roll over the image, the text associated with it will still change colour.
So here’s the CSS for our content:
view plaincopy to clipboardprint?
  1. #content h2 {  
  2.     font-family:Georgia, "Times New Roman", Times, serif;  
  3.     color:#dbaa70;  
  4.     margin:0px 0px 20px 0px;  
  5.     font-weight:normal;  
  6. }  
  7.   
  8. ul.work {  
  9.     margin:0px; padding:0px;  
  10. }  
  11. ul.work li {  
  12.     list-style:none;  
  13.     margin:0px; padding:0px;  
  14.     clear:both;  
  15. }  
  16. ul.work li a {  
  17.     color:#e0b882;  
  18.     display:block;  
  19.     padding:5px 10px 5px 10px;  
  20.     text-decoration:none;  
  21.     font-size:10px;  
  22. }  
  23. ul.work li a img {  
  24.     float:left;  
  25.     margin-right:20px;  
  26.     margin-bottom:20px;   
  27. }  
  28. ul.work li a h4 {  
  29.     color:#674f5d;  
  30.     margin:0px;  
  31.     font-weight:normal;  
  32.     font-size:13px;  
  33. }  
  34. ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }  
Lets go through the classes one by one:
  1. First we are redefining what <h2>’s that appear inside <div id="content"> look like. We could have just redefined all <h2>’s, but you never know when we might have a <h2> that appears somewhere else, so it’s good practice to be reasonably specific. All I’ve done here is change the colour, font, weight and margins to make it look the way I need.
  2. Then we have the <ul class="work"> definitions. The first <ul> definition just gets rid of the margin and padding.
  3. Then the <li> definition says there should be no list-style (i.e. no bullet point). It also says clear:both. As you recall from the last step this is to clear floating elements. And if you scan down a little you will notice that the img definition later on has a float. So here we’re saying each new list element <li> should be clear and not wrapping around parts of the last one.
  4. Next in the <a> part, we’re saying that the <a> tag should display as a block. That is to say we want our links to be a big block that encloses the image and text. We give it some padding to flesh out the block and set some styles for how text should appear.
  5. Next we say that the <img>’s inside our <a>’s should float over to the left with a bit of a margin.
  6. Finally we define the colour of the text in the <h4> bits.
And that’s it! We’re done!

Finished!

And with that the site’s homepage is complete. You can download a ZIP of the site files to look through – it contains the HTML for different stages of this tutorial. And of course you can see the final HTML document:

View the Final Page Here



Internet Explorer

Now you should always be doing cross-browser testing. Alas I have just switched from Windows to a nice new Mac and haven’t got a Parallels/Win install yet, so I can’t! I did a quick check via BrowserShots.org and can see it’s mostly working fine in IE6/7, however there is a problem with the three columns forcing the footer much further down than they should. Anyhow should be an easy fix, but until next week when I’ve installed Windows, IE users you’re on your own :-)
I will update here once I’ve had a chance to iron out the crinkle but I didn’t want to hold off publishing until then!
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)