Simple Layout tutorial - Coding - Part 3

Part 3

Right now the 'layout' is saved we'll get onto coding it. I won't be going through very basics like "How to add a table" I'll be giving you some settings and tips here and there, I'll assume you know the basics of Dreamweaver (I'm using MX 2004)

Open a new document and save it as index.htm in the directory as your 'images' folder is saved.
Choose 'Page Properties' at the bottom of the page.

Now set up your basic page info (Background colour, text colour and link colours) mine are below:



Now you're basic styling is done (there'll be a little more to do later). We'll attach the styling in a separate stylesheet. Create a new document (a CSS Document) and name and save it in the same directory as your index.htm file. Now go into your index.htm file and find the style code in between the <style> tags. Copy the style code (It's between <!-- and --> into the CSS document. Now delete the <style> tags and everything in between them. Below are screenhots of before, after and the CSS document.





Now go to: 'Text > CSS Styles > Manage Styles > Attach' and click browse. Find your stylesheet and click Ok. Now click okay again in the 'Attach External Style Sheet' window. Then click done.

Now lets move on to putting the tables and images into the layout.

Insert a new table with the following settings:



Now set the align to the left in the first cell and insert the first sliced image we made (the header image with the main text).

Set the width of the first cell to the width of the first image (in my example it's 266 pixels wide).



Now click in the 2nd cell, set the align to the right and insert the header image for the right hand side.



Now we'll edit some CSS to create the repeating background image for the header.

Go to: 'Text > CSS Styles > Manage Styles' again and double slick your stylesheet. Now click 'New' and name your class something like '.header_back'. Go to the 'Background' menu and choose the 1px wide image we sliced for repeating.

Now click in the cell with the right header image in. Set that cell's class to '.header_back' (you can do this manually in code view or select the style in the 'Style' drop down menu at the bottom of the screen.

We should now have a nice header that will expand to fit the page

Now to add a new table under the header table - this new table will contain the content boxes. Add new lines under the header table and add a new table with the same settings as the first one we added.

Set the left cell's width to 30%. Now click inside the left hand cell and set the align to left and the vertical alignment of the cell to 'Top' (Select 'Top' from the 'Vert' drop down box at the bottom of the page). Now insert a new table with the following settings:



Now you'll need to change the settings of the top corner cells - make each one as wide as the corner images you sliced. In this case it's 10 pixels wide.



Now insert the corner images into all 4 corner cells of the table.

http://www.trilightdesigns.co.uk/web.../3/image10.jpg

Now just set the background colours of the rest of the cells in that table to the colour that you had your content box set to.

That's your basic content box done! The middle cell is where the content will go. The main content box will be done in the same way except with the main content images and the align set to 'Right' instead of left. (Still with the valign set to top)

Add some content and you're done!

Last Image

I hope this tutorial helped people, It's lenghty but there's more than just slicing and coding covered, hopefully you've learned from this and will all soon be on your way to creating, slicing and coding some l33t layouts!

-Matt

Link to live version.
Download the files associated with this tutorial (Including the .psd file)