Create a Website Using Adobe Dreamweaver
Posted on 10. Apr, 2008 by Web Design in Dreamweaver
Creating Websites In Adobe Dreamweaver
In this dreamweaver tutorial we will be creating this:
Website Url: http://www.local-bathrooms.co.uk/
To build our website we will be using tables, to create tables we will go Insert > Table
You should now see this, here we will insert the options for our table.
Once we have created the table, we will go to the bottom of our Dreamweaver and look at the table properties. We are going to center the table on the page, to do this we will click Align > Center.
Now if you click of the table you will see a button at the bottom of Dreamweaver named Page Properties, here we can see the page font, size, colour and background colour.
We have set these options, instead of choosing and page background colour we have chosen to have a image as our background.
In the top row of the table, we are going to type in our keywords which will help the search engines know what our website is about, we are going to center the text and bold it.
In the second row we are going to insert out website logo, to insert a image go to Insert > Image
Find your image and click ok. Now click on the image and we are going to make a horizontal space of 20 pixels so it indented from the size of the table. We are also going to link the logo to our homepage so it will be easier for our visitors to navigate there way back to the home, do this by typing in your home page url in the link form. You use Index.html (.htm or .php can also be used) so the browser will see this page first if they type in our domain.
We are now going to click inside the second row and give a height of 70 pixels, seen bellow:
You should now have this:
Now in the third row right click and go Table > Split Cell…
Split the cell into 2 columns and click OK.
Click inside the left column and give it a grey background and a width of 170 pixels.
Now insert a table inside the left column (Insert>Table) using these options:
Click in the top row of the new table and drag down to the bottom table so it highlights all of the tables. We will now give the tables a height of 21 pixels and a background colour of green.
You should now be left with this:
For our first 7 links we are just going to put text with a small image.
For the next links we are going to, bullet point, resize to 11 pixels, and give a colour of yellow.
You should now have this:
Now once we have completed our links we are going to preper our news letter sign up, something every site should have. For my website’s i use a News Letter Software offered by Aweber.com but for the sake of this tutorial we will design the news letter.
Go and click on the Text Field image in the Forms panel or go Insert>Forms>Text Field.
You should now have a text field:
We are going to do this twice the followed by a submit button, Insert>Forms>Button or through the Forms Panel by clicking Button.
You should now of created a form like this:
Name:
Email:
Now in the right column in the third row we are going to insert another table (Insert>Table)
In our left column of our new table, we are going to add a List Menu, this allows visitors to scrole through a list of pages to find the link there looking for.
The item label is what you want your visitors to see in the list and value is where you want the item to take them. Click ok when finished.
I then added content to the other 2 columns using a couple simple images and text, you should now have this:
Now we are going to make our Links, highlight the text you want to link to a page and go to the bottom to properties and just like when we linked the logo we are going to link to the page we want.
You will noticed the text changed the blue and underlined
To change the appearance of our links, go to Page Properties and click Links.
I have chosen to have the link as white but on link over to be yellow. We have also chosen never to underline our links.
Adding adsense to our layout is simple, right click where you want to insert adsense (next to our logo in the header for us) and click Insert HTML…
Paste your adsense code and your done.
Finally we are going to go give our web page its page title which helps search engines to find out what out website is about.
After inserting our page content you should be left with this:
26 Responses to “Create a Website Using Adobe Dreamweaver”
Leave a Reply
Loading ...
Erin Valencia
16. Jun, 2008
unaggressive resurrectioning unreplaced upthrust nonsaline objectionability terrigenous fairness
TSIG Consulting, Inc.
http://www.californiasolar.com/
Jon
20. Jun, 2008
Hm, not that good teaching people how to create websites with TABLES…
YAHYA OMARI MNTAMBO
06. Jul, 2008
thanks for your help!!!!!
corgz27
14. Jul, 2008
i’ll this at home hope this will help,,,,
send more tutorial please hehehehehe
thanks a lot
Yahya Omari Mntambo
27. Aug, 2008
Thanks very much for tour kindness!!!!
moh'd arif
08. Oct, 2008
excellent…….and thanks 4 ur help…
Temitope Debowale
06. Dec, 2008
This your article is pretty cool and very easy to understand, thanks its nice I found it useful… YES, OH YES!
But, please help me out on this… How do I screen saved my work too anytime I want to give tutorial online like the one you have done in this website of yours. (I mean all the screen show example you have use as the examples on the this tutorial how can do it too. Is there any software i need to insert before doing this or what. Thanks
But I have use front page to design my web-site. Thanks
Temitope Debowale
06. Dec, 2008
Thanks
Yusak
03. Jan, 2009
thanks alot boss..these really help me alot
Leah Hicks
10. Feb, 2009
This is an interesting tutorial, however, tables are now deprecated and you should use CSS styles instead… Perhaps consider revising this tutorial?
Critique 2 Company Websites - Young Entrepreneur Forums
12. Feb, 2009
[...] second website I would suggest you do something more like this – Create a Website Using Adobe Dreamweaver | Web Design Tutorials | Creating a Website | Learn Adobe F… – Very good for SEO that design is. Also I wouldn’t put the website name in the page title because [...]
Vereen
22. Mar, 2009
This advice is really going to help, thanks.
vijaykumar
18. Apr, 2009
thanks alot
Tun Aeindra Kyaw
23. Apr, 2009
hi, thanks a lots, i am just a web design student, this tutorial will useful for me so much.
Radule
30. Apr, 2009
HI..
This is nice tutorial…BUT i dont like to make websites with TABELS..i think that the best way to make it using DIV TAG’s and CSS styles …
Bimo
05. May, 2009
Tutorial always a Help.Thanks for sharing your knowledge.
I found it really help.
Tony
05. May, 2009
hey I got a question, where can I find the workfiles to fallow this tutorial?
Jatin
03. Jun, 2009
How we can create tableless website could u send me the tutorials
saifudeen
31. Jul, 2009
this is good tutorials..but how can use div and css?
itsallinthewrist
19. Sep, 2009
Very good tutorial, thank you. Much easier than Adobe’s help files.
jestrade
28. Sep, 2009
i used to create websites like this about … 7 years ago … hehe
jai
31. Oct, 2009
very nice this work
Pete
21. Dec, 2009
Thanks for this post it really helped me! Keep up the good work,
cheers!
Omega
03. Feb, 2010
I am new to adobe dreamwearver and just confused of how to start building a basic website. How to get template. Also the view.I want to view as if it were in a browser.Thanks all
Fidel
06. Aug, 2010
Will the peeps criticising this tutorials post a CSS styles tutorial or shut their pie holes. I’m good with flash action scripting, and html, but for crying outloud…don’t discourage a tutorial that’s good for something without offering some kind of way forward for people who are were U used to be at…the beginning!
Fidel
06. Aug, 2010
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