26.07.2009 -
Awesome tutorial, fantastic job
Adobe Photoshop
Free Tutorials » Adobe Photoshop » Total Layout Tutorial
Create an effective layout, then learn how to manually code it in Dreamweaver without the use of slicing! 100% Expandable.
Step 21
With the selection still running, press "Shift + Ctrl + C" to copy it. Make a new document, keep the default size and paste in your image. Now save the image as headerbar.gif "File > Save As" into your images folder.
Step 22
Now we will move onto coding the header and rest of the layout using your favorite
HTML editor. I will be using Macromedia Dreamweaver MX, however if you don't
have this i'd advise you to download a free trial - click
here.
Once dreamweaver had opened, paste the below code into the code view (delete
all default Dreamweaver code first).
You should now have a boring looking table structure to work with, do not edit any tag sizes unless when I state to do so.
Step 23
We now need to give the header it's main green background. Find the below lines of code and adjust it to below - highlighted in green. Once done you will now notice the header has I cool background.
Step 24
Now we need to insert the logo image into the top left column. Click inside
it and click the insert image icon, find the image in the images folder and
press OK.
We should now have something similar to below!
Step 25
Now we need to add the bottom border to the header. Find line 18 and add the background to the td tag.
Step 26
We should now have basically completed the header! Now what we need to do is work on the main content structure. Here is what you should have so far:
Step 27
Now find the last row in the table, line 23. Enlarge the screen shot and use the below settings. Once done you will have 3 columns for your main content. This will mean you will have a 3 column layout, on the left room for content boxes, in the middle room for main content and on the right some more content boxes. Change the column number to 2 if you just want a 2 column layout.
Step 28
We now need to create some cool border headers. Copy the below image into Photoshop.
Step 29
Zoom in on the image and make a selection like below, then copy the selection, paste it in a new document and save it as lborder.gif in the image folder
Step 30
Zoom in on the image and make a selection like below, then copy the selection, paste it in a new document and save it as bgborder.gif in the image folder.
Step 31
Zoom in on the image and make a selection like below, then copy the selection, paste it in a new document and save it as rborder.gif in the image folder.
Step 32
Now back in dreamweaver copy the below code and paste it in the left column
- remember to paste it in the code view. This will create a table for us in
which we can add a navigation. Simple delete the "text etc here" text
and replace with a navigation table, simple!
Once you have added your navigation, press F12 to preview in your browser. Also before I get to say, SAVE THE DOCUMENT! Simply save as index.html - saving as index will mean it's the first page visitors will see once typing in your main domain name.
Step 33
Don't worry that it's in the middle or that the link styles look pretty ugly
just yet, I will explain how to change that later.
Alternately you can copy my code for the navigation instead of creating your
own tables.
Step 34
Now simply add <br> tag underneath the navigation box, copy the content
box code and create some more content boxes down the left hand side of the layout.
After you think you have finished adding content boxes, find the below code,
edit the code height lighted in green to the same as below. Valign will make
everything stay at the top and the width will make the left column aligned to
the left.
Step 35
Here is what you should have (though different content).
Step 36
Now we need to add to the right column, find the below code (towards the end of the main code) and adjust it to the image below it.
Step 37
Where you typed right column, copy the content box code from a few steps above and start to begin adding content boxes to your right column.
Step 38
Hey.. watch out for the storm coming your way..! The least you want is a power
cut and no saved recent work! Save it!
Now we need to add the main content box in the middle, this will hold all of
your sites main content. Click where you typed "main content text"
and delete it. Copy the below code into the main content column in code view.
Tadaa! Looks pretty finished though my example would look better if I added realistic fake content which I have done on the last step.
Step 39
Add better link styles using CSS. Copy the below code into the <head></head>
tag of your document.
You will also notice there is another td column next to the logo, this is for what ever you want to put there.. for instance you could put advertising rotations there etc. I'm talking roughly around line 13.
Step 40
I then simply added some fake content just to show you the possibilities of
the layout. I spent many hours writing this tutorial and I sure hope it really
helped you. When creating layouts I prefer not to slice because slicing will
give you too many images and a lot of code which is hard to edit. If you have
made a layout from using the help of this tutorial i'd love to see it so please
feel free to contact me as i'd be glad to see your result.
Click Above to see live working version.
You can look at the web code fit the whole web page to help you out if you get stuck but remember my image sizes may vary. I will not provide the PSD file for the layout either, this is a tutorial.. you have to make it your self.. isn't that the idea? ;)
Tutorial comments
03.11.2009 -
Great tutorial, thank you..I just starting on learning an slicing image and convert into css/html.. thank you for the post..
Horse Racing PC
29.10.2009 -
link not working at the end
25.07.2009 -
Woah! Awesome tut thanks.
15.04.2009 -
kol
View all user comments for this tutorial.
Tutorial statistics
- Date added:
- 15.01.2005
- Author:
- Zymic
- User rating:
- 4/5
- Total views:
- 41157
- Total comments:
- 21