Create your website in Dreamweaver

Part 4 on How to Create a Web site with Photoshop and Dreamweaver

Learn how to create a website in Dreamweaver. Your layout design is in Photoshop. Click here to
view the finished website.

This tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop. Please
make sure you have completed the first 3 tutorials.

Tutorial 1 : Creating a unique website header

Tutorial 2 : Designing your website layout in Photoshop
Tutorial 3 : Slicing your layout in Photoshop
Tutorial 4 : Creating your web site in Dreamweaver

Let's get started with creating your website in Dreamweaver. The final and most important step!

1. Open Dreamweaver.
2. Go to File>Site>New site. A big screen named Site definition will open where you have to
give all the instructions for your site.

Site Definition Screen.

o In the first screen you need to give a name to your site. Click Next.
o Select No, I do not want to use a server technology. Click Next.
o In the third screen, Editing Files Part 3, select your website folder using the folder
icon. Click Next. This is the folder that contains your site images and .psd file.
o In the next screen, "How do you connect to the remote server?" choose None
from the drop-down menu. Click Next.
o You will be able to view your site summary. Click on Done.
3. Now you are ready to work on your site. Create a file called my-layout.html in
Dreamweaver by clicking on File/New.

Important : You need to visualize and organize your layout in such a way that you should
be able to put them into rows and columns in a table in Dreamweaver.
4. Open my-layout.html. Click on Insert/Table to insert a table in your web page. Enter The
following :
Rows : 7
Columns : 1
Table Width : 750 pixels
Border Thickness : 0
Cell Padding : 0
 Cell Spacing : 0

5. Now follow these steps :

 Select the table and give 750 px and background as black in the Properties panel.

 Keep your cursor in the first row and set the height as 21 pixels and choose Right from
the Horz drop-down menu in the properties instructor. Enter the text Home | Sitemap |
News | Downloads. Select the text and choose font Verdana size 10 pixels and color
white in the Properties panel. Dreamweaver will automatically create a style called style 1.
We will use this style for the rest of the links also.
We have entered 5 spaces between the links and the vertical bar. Tip: You can enter
spaces by clicking on shift+Ctrl+Space.

 For the thin line effect in Dreamweaver, keep your cursor in the second row and set the
height 1 pixel and insert a spacer by choosing it from your images folder (Insert/Image).
If you don't have a spacer image, you can get one here. Save it in your images folder.
Give a gray background color #808080.
 Bring your cursor to the third row and enter a height of 78 pixels in the properties panel.
Now we will insert another table (Insert/Table) with 1 row and 3 columns so that the logo
is inserted in the left and the navigation links are inserted on the right.
Column 1: Give a width of 12 pixels. This is so that the logo does not stick to the edge of
the page.
Column 2: Insert the logo image by clicking on Insert/Image and selecting logo.jpg from
the images folder.
Column 3: Enter About Us | Services | Products | Clientele | Contact Us. Select the text
and choose style 1 from the style drop-down menu. You should get the same style as the
top navigation links - Verdana size 11 pixels and color white.
 Bring your cursor to row 4 and give a height of 103px. Select Insert/Image and choose
banner.jpg from the images folder and click on ok. Your banner will be inserted here.
 Bring your cursor to row 5 and insert a table with 1 Row and 2 Columns.
Column 1: Insert a table with cell padding of 20 pixels. Your content will be inserted here.
 Give a font style for the content - Font: Verdana Size : 12 pixels Color : white.
Column 2: Give a width of 167 px and insert the graphics on the right by clicking on
Insert/Image and choosing pic_right.jpg from the images folder.
 Row 6: Repeat steps of row 2 to get the thin gray line.
 Last and final row : Give the background color as #303030 and height as 21 pixels. Enter
your copyright text and choose style 1 from the style drop-down menu in the Properties
instructor.

To preview your website in the browser, press F12.

Congratulations! You have successfully created your website!

Click here to download the completed website along with the source .psd file.

More related useful tutorials in Dreamweaver:

1. Creating CSS based text rollovers

2. Creating a Dreamweaver Template
3. Designing for all screen resolutions
4. How to FTP/Publish your website

Recommended Resources

 Learn how to design websites, T-shirts, banners, flyers, ecovers and more using
Photoshop!
 More Great Learning Resources