Michael

Finished Design: Click Here


Start by opening up a new document in dreamweaver and name it "index.html".

Go to your toolbar and go Insert > Table.





Put the following details in and click ok.

Now you have to center your table for your template. Simply go to the properties at the bottom of your page and click Align Center.






Click inside the first of the 8 tables and then go down to the properties again and click "bg" and choose the colour you want. I chose green.





Now go to the 5th row and right click and go Tables > Split Cells > Split it into 2 Columns and click ok.

You can change the width of either column by clicking inside the box and going down to the bottom to properties and entering how many pixels wide next to horz.





Your Template should now look like this:




Now click inside the left column, you want to have 10 links so we are going to enter another table, you can do this by going to Toolbar > Insert > Table.

Put in these details.





Now if you click inside the top table and type in your title (I have typed 'webdesigndev') you can enlarge the size by going to the bottom properties size and scroll down. Next we are going to indent the text, highlight it and go to properties and to the left of the target button there is an image with a ->. Click it once to 'Text indent'.




Next click in the table to the right of your buttons, you will see that the text cursor is in the middle, to get this to the top you can go to the properties and change it from default, to these settings. You can now put in your content.





Your template should now look like this:




Next we are going to put in a image in our content area. We do this by clicking there we want the image and then going Toolbar > Insert > Image and then choose your image.





Now we are going to finish our buttons, in the top row type Home and highlight it, now go to the bottom properties and next to Link type in what page you want the button to go to. I have typed in index.html because that is usualy what you name your homepage and will be our homepage url.




Your template should now look like this:




As you would of noticed your text link is a dark blue and doesn't show up as well as other colours. We are now going to change the properties to do this. Go to your bottom properties and this time click ' Page Properties' and click the side link ' Links' and you can click the colour charge next to 'Link Colour' and change it to the colour your choice; I chose white because it stands out best. I also chose to not underline it with the 'underline style'.





Now we are going to add a 'Jump Menu' to the bottom of our site for quick navigation. You can do this by going Toolbar > Insert > Form > Jump Menu. You will have to enter 'Text' and ' When selected, go to URL'. then you click the far left "+" to add enough link to jump to.





Your Template should now look like this:

RYANNNNNN

Thats a great tutorial and all, but I think that can be easily accomplished in CSS. I don't know anyone who would rather use tables than css.

Mr Global

indeed, coding awebsite this way is cool if you want it for own use, but you'll neverbe able to sell your services when coding this way ...
but it's a nice tut, we all started @ tables i think ...

Michael

When i do freelance i do sell my services alot this way.... i can build a site like bbc in dreamweaver .

Mr Global

then you are so lucky to find clients that don't know much about websites,
sites coded that way take few ages to load, for example check the gamescript.net cms the most ugly template system in the world ...

Michael

lol i agree but tbh you can make some realy nice sites in dreamweaver now, they have quite a few great features now! I wish there was more features like for navigation and content areas. Maby table less.

Mr Global

i use drreaweamver too, but almost only because it gives you a nice structured code. It isn't helpfull at all if you wnat to make decent css/xhtml sites tho ...

mopikos

I was wondering..i always design my whole template in photoshop..and when implementing into dreamweaver i've always just used the slicer and slice the whole thing up.the thing is..when you edit the template in dreamweaver..everything seems to be not in place..i mean when you'r going to put the data..everything just sucks..any other ways?

Michael

mopikos get me a screen shot of it it with errors and il help you out

Gaz

and this is why any tom, dick and harry is selling them selfs as "Web Designers" when all they know how to do, is press the table button in dreamweaver. as a developer you should be teaching ur clients what the internet is about, not giving them half knocked websites.