Create an effective layout, then learn how to manually code it in Dreamweaver without the use of slicing! 100% Expandable.
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.
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).
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.
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!
Now we need to add the bottom border to the header. Find line 18 and add the background to the td tag.
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:
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.
We now need to create some cool border headers. Copy the below image into Photoshop.
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
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.
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.
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!
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.
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.
Here is what you should have (though different content).
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.
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.
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.
Add better link styles using CSS. Copy the below code into the <head></head>
tag of your document.
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.
Its very usefull tips and notes thanks a lot..By aneesh
Not very good for noobs.
oh this took me 3hours BECAUSE NONE OF THE LINKS TO LOOK WHAT SETTINGS GRADIENT AND MORE... NEEDS... And it was for nothing!, contentbox, contentboxheader dont agree with eachother... sry for my "Little" bad english -.- (Im from sweden) thanks for nothing... and please fix that image links!
wow very cool!!! this kick starts my ambitions nicely
kewl...buddy
View all user comments for this tutorial.