Learn How to Create a Website in Adobe Dreamweaver
The Ultimate Adobe Dreamweaver Website Tutorial
Before I begin, if you want a very easy way out of this adobe Dreamweaver website tutorial, you can make a free Flash website with Wix that will look like a very professional website. Now for those of you who want to continue, I will continue.
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.
Did you get lost in this tutorial? If you weren’t able to complete it, I suggest you check out Wix’s free website builder.
READY TO TAKE WEB DESIGN SERIOUSLY?
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.
Learn to Create a Full Website Using Dreamweaver - WebStockBox (4 years ago)
[...] : Learn to Create a Full Website Using Dreamweaver addthis_pub = ‘webstockbox’; addthis_options = ‘favorites, email, delicious, digg, facebook, [...]
Arik (3 years ago)
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….!!!
Monetizing Different Wordpress Categories (3 years ago)
[...] 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… [...]
moh'd arif (3 years ago)
excellent……..
Nagaraju (3 years ago)
It GOOD.
Amanda (3 years ago)
Great tutorial, thanks!
Leah Hicks (3 years ago)
Once again another misleading article preaching newbies to create their first websites with tables. Please revise this to use CSS styles instead!
Mark (3 years ago)
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.
debonah (3 years ago)
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
Apec Eswar (3 years ago)
This is Good , upload one more using divs
sonu (3 years ago)
very interasting web site i learn more from this
website design (2 years ago)
Good tutorial! step by step creation is helpful for new leaner.
James (2 years ago)
I might give this a go sometime, not a bad way to keep things lined up.
Rob (2 years ago)
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!
Andy (2 years ago)
Totally agree, CSS is awesome!
Webguy (2 years ago)
lol, tables are lame, CSS owns all!
Rifat (2 years ago)
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?
John (2 years ago)
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.
Bryan (2 years ago)
I have been looking all over (including Adobe’s tutorial) and this is the first time I have seen anything close to a good tutorial on make a starting page. Yes, it’s not CSS but we have to start somewhere right? This will help me get a page up so that I can take the extra time to learn CSS. Thank you so much.
Bryan (2 years ago)
After reading more of your site I found this to be interesting: In http://www.webdesigndev.com/web-development/20-ways-to-make-your-website-crap
you say:
“Build Your Website Out Of Tables
Building your website out of tables is a very bad move these days. XHTML and CSS is what you should be using. I have nothing against tables, and you should still use them within your site if needs be, just don’t have your whole site based around tables.”
So, perhaps a new tutorial is in order?
A Nanny Moose (2 years ago)
After reading this tutorial, I found your “top 20 things not to do on a website” and found this particular one interesting:
Build Your Website Out Of Tables
Building your website out of tables is a very bad move these days. XHTML and CSS is what you should be using. I have nothing against tables, and you should still use them within your site if needs be, just don’t have your whole site based around tables.
Aquariums Bowls (2 years ago)
So when is this CSS tutorial coming?
Looking forward to it.
This is one of the best tutorials for tables that I have found.
Thanks
Peter
Web Development Company New York (2 years ago)
Good tutorial….. Thanks for sharing this info post.
stephen (2 years ago)
woow yu guys are great so now how do i link pages ??
Help me ! (2 years ago)
Help me please how do i move the column divider without moving the other column?? PLEASE HELP ME!
Xaby Web Design (2 years ago)
Nice step by step guide. And by the way i like your website’s colour scheme of grey and lime grey. Very nice contrast!
prisca (2 years ago)
is very nice to see all of this work. and me I want to know well how to do it. if you can help me?
John (2 years ago)
I m beginner in learning dreamweaver , can anyone help me, how to link pages that open in right side cell in table .In this tutorial linking not mentioned.
Laeeq (2 years ago)
Hi, this was nice, I have just started with Dream Weaver. This page was great acc to knowledge but would have been better if it was split into two pages. as it takes a long time to open it.
ganesh (2 years ago)
Hi
This tutorial was great and useful for beginner , thanks!
Pete (2 years ago)
Thanks again for this nice post. Has the website changed the colours?
new_york_night (2 years ago)
I am having the following problems:
1) I cannot decrease the width of the left column which holds the menu. I can only decrease the width somewhat, and it affects the entire table, not just that cell. Another user has pointed out this problem too. CAN SOMEBODY PLEASE ANSWER THIS ONE!!
2) Where is the script for the date and time?
3) I am having trouble making the links attach to the link style. Do I have to go in and select the actual text and not just the box? Then what do I do?
4) Why aren’t the Page Properties including specs for link defined first?
5) How do you set up the folder for this job?
ivomynttinen (2 years ago)
Is that a joke?
Really, dont show anyone how to build a website with tables. Tables are the worst way to get a design online.
René Maas (2 years ago)
@Leah Hicks
yes you are right. why we should use tables?
use html & css
Top 11 Misconceptions About Making Money With Google Adsense | CheatAd ! (2 years ago)
[...] emphasis if you are thinking it’s better to “create website from scratch” with Dreamweaver, you seriously don’t know yet how frustrating it is when you need to do some update sitewide, [...]
DonPanton (2 years ago)
hi folks, i found that tutorial very helpful. And as a starter-tutorial to get into webdesign I think it is worth to read it. Next step shall be then CSS.
Thanks a lot for your effort.
samet (2 years ago)
i must say that
)))))
i think this way is wrong anymore cos almost any Web Masters are using Div tag
gratis webseite erstellen (2 years ago)
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.
Jon (2 years ago)
tables? WTF???…. that’s the complicated wrong way
vicky (2 years ago)
Great tutorial, thanks! it’s Good!
sanaullah kakar (2 years ago)
This is good tutorial for all but for one condition will be taken you will const rate in this tutorial.
naveed (1 year ago)
this is very good tutorial i like your work
Dino (1 year ago)
I am stuck while formatting the table.
Please have a look at the following url where I have saved the screenshot.
http://www.4shared.com/photo/927PRq9f/_2__table_problem.html
Please help
sharayu pradhan (1 year ago)
this is very good i like your method but not use a java scripting
Sonic Bass (1 year ago)
This is really good, Thanks!
hadi (1 year ago)
Best way to learn in easy steps .
its nice and easy
tnx so much
Name (required) (1 year ago)
This is really good. Thanks
Fidel (1 year ago)
Here’s a useful link on CSS tutorial, and converting tables to CSS layout.
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Hope this helps. Good luck in your design carreers.
__Fidel
g.naskar (1 year ago)
your site is very suit for beginner those who learn web page creation.I think your tutorial site most user friendly of other tutorial site.
I wish to your site may long live.
thanking you
g.naskar.
Leads and Feeds (1 year ago)
Thanks, i found this very interesting!
Niru (1 year ago)
this site is very useful to beginners…i like create a website for media can u pls give some ideas to make a website….