Email:
Name:
 
learn web design
Free Tutorials Send by Email
 Free Web Design Newsletter
 Opportunities to Win Free Prizes
 Subscription to our RSS Feed
Learn How to Create a Website in Adobe Dreamweaver

Learn How to Create a Website in Adobe Dreamweaver

Posted on 15. Apr, 2008 by Michael in Dreamweaver

The Ultimate Adobe Dreamweaver Website Tutorial

Create a new Dreamweaver HTML document, go Insert > Table and choose these options.

Center the Table at the bottom (Align > Center)

Split the first, third and Sixth Row im to 2 Columns by right clicking in the row and going Table > Split Cell …

In the first Row and Column put the company logo, by going Insert > Image.

In the second column we are going to put four conservatory images.

There next to each other, to get a space between them, click on each image and go to the bottom Properties and choosing a H Space(horizontal space) : 2 Pixels like bellow:

in our third row we are going to use a background colour of Purple, you do this by clicking inside the row or highlighting it and go to the bottom properties and choose Bg colour, you can type in the hex code or choose from a selection of colours. We will also choose the colour, font and size of the text for “www.conservatoriesonline.com” and type in the left column “www.conservatoriesonline.com”. In the right column we will be typing Brochure Request.

You Should Now Have This:

In the Second row we will put our data/time script. in the Fourth row we will put some text discription. In the 5th row we will choose a bg colour and type in our text in a blue colour. We are going to make the Cell Vert: 25 pixels so that its not squashed down.

You should now have this:

In the sixth row, left column we are going to put in our navigation, go Insert > Table and choose these options:

We are going to choose a pink background to our table, you should now have this:

For the first row in the table we are going to choose a darker pink and our text, font and size options. These are the options im using:

in the next rows we are going to put our links, highlight each text links, to link them go to the bottom properties and choose the Link url, ive chosen index.html as my link is to the homepage.

To change the colour of a link we have to go to our Page Properties, you can find the link to Page Properties by going to the bottom Properties and clicking on the button. We are going to choose to not underline our links, change the colour and size. Ive chosen these options:

You Should Now Have This:

After finishing your buttons we are going to click inside the right side column to start on the content, we are going to align the cell, Horz: Left Vert: Top, it sets the page in the middle by default.

We are going to put in another table with these options (Insert > Table)

In the left column will go our text and in our right will be a image of a conservatory (Insert > Image to insert a image).

If you look to the top of your dreamweaver page you will see a Title option with the default title as Title: Untitled Document, we can change this to what ever you want, ive chosen to change it to: Conservatories and Sunrooms Online, UK, USA

This title will be previewed at the top of your browser as you can see bellow:

Bellow our first part of content we are going to put another table using these options:

Inside the first 2 columns we are going to put another table with these options:

In each row in the columns put content and link it to your subpages, before each discription we have used a garden Icon.

You Should Now Have This:

In the far right Column you are going to put in a table with these Options:

We are going to give the table these options:

For the 1st, 3rd, 5th and 7th row we are going to choose a link background. Enter in your text.

You Should Now Have This:

Bellow that we are going to add another table with these options:

We are going to give the table a pink background and a dark yellow border as seen bellow:

We put in our title, bellow this we are going to add another table with these options:

In the left column we are going to put another conservatory image and align it to the right. In the right column will go our content and link to read more, align this also to the right.

You should now have this:

After this if you hold down Shift Enter, it will only make a one line gap instead of the default two lines. In the bottom row put a pink background and your text. Under this we are going to put our sponsers.

Well done, your now a Dreamweaver Pro.

20 Responses to “Learn How to Create a Website in Adobe Dreamweaver”

  1. Learn to Create a Full Website Using Dreamweaver - WebStockBox

    16. Apr, 2008

    [...] : Learn to Create a Full Website Using Dreamweaver addthis_pub = ‘webstockbox’; addthis_options = ‘favorites, email, delicious, digg, facebook, [...]

    Reply to this comment

  2. Arik

    18. Jun, 2008

    it’s kind a big size page. my browser load it pretty slow. but i love it.

    can you compress the size of images in your next tutor, so I can load it quickly? I just don’t have much time for online. Thnx….!!!

    Reply to this comment

  3. Monetizing Different Wordpress Categories

    25. Jul, 2008

    [...] If I was to post this code in my Single.php file then it will show the text "New! Dreamweaver Interactive Video Tutorials – Discover Everything You Need To Know To Build Your Website Step By Step From Start To Finish With This Dreamweaver Tutorial." above the content of the post. You can see a example of this here… [...]

    Reply to this comment

  4. moh'd arif

    08. Oct, 2008

    excellent……..

    Reply to this comment

  5. Nagaraju

    19. Oct, 2008

    It GOOD.

    Reply to this comment

  6. Amanda

    09. Feb, 2009

    Great tutorial, thanks!

    Reply to this comment

  7. Leah Hicks

    10. Feb, 2009

    Once again another misleading article preaching newbies to create their first websites with tables. Please revise this to use CSS styles instead!

    Reply to this comment

  8. Mark

    20. Feb, 2009

    One i create the main table. im fine, but when i start on the split the columns that all constrain to the table. What im trying to say is my menu table has the correct size but the column spans stays in the middle and i can not reduce the size.

    Reply to this comment

  9. debonah

    11. Mar, 2009

    may i know whats the different between the the table width that is in pixel and percent? please help! I must find out whats the different

    Reply to this comment

  10. Apec Eswar

    17. Mar, 2009

    This is Good , upload one more using divs

    Reply to this comment

  11. HudHud

    28. Mar, 2009

    This is very good opportuniy to learn web designing. Usually you need to pay thousands for learning this. If you are interested to make money online then it is preferable to learn the at least the basic of web designing and web development.

    At the last I must appreciate that your post is unique and I find it very useful for the people who like to take it that way. Congratulation on your success and hard work.
    With Blessing,
    Money Maker.

    HudHud’s last blog post..How to Build Content Rich Website For Profit

    Reply to this comment

  12. Ron Kong

    30. Mar, 2009

    Great post!

    Ron Kong’s last blog post..Charging for your blog

    Reply to this comment

  13. sonu

    06. May, 2009

    very interasting web site i learn more from this

    Reply to this comment

  14. website design

    22. May, 2009

    Good tutorial! step by step creation is helpful for new leaner.

    Reply to this comment

  15. James

    15. Jun, 2009

    I might give this a go sometime, not a bad way to keep things lined up.

    Reply to this comment

  16. Rob

    18. Jun, 2009

    Well…This is a good starting tutorial for beginning web designers who are just starting to build websites.

    I NEVER use tables anymore, nor do I recommend them, but it’s important that people do now know to use tables.

    Let’s face it…there are acceptable times to use tables. For data and spreadsheets, it’s perfectly fine. This gives beginners an idea of how to use tables.

    But if you’re going to become a serious web designer, you’ll have to learn CSS. There’s no way around it! :-)

    Reply to this comment

  17. Webguy

    18. Jun, 2009

    lol, tables are lame, CSS owns all!

    Reply to this comment

  18. Rifat

    29. Jun, 2009

    I am very new in web designing. I want to know is it a static site? If so, how can this site be turned into a dynamic site? Can anyone tell me?

    Reply to this comment

  19. John

    29. Jun, 2009

    This tutorial was very helpful. I know CSS is the way to go so those experts out there who replied would really help others if they showed the basics of converting this tutorial to css.
    Help others to go from lame to awesome. Be part of the solutuion.

    Reply to this comment

Leave a Reply