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!

Open Dreamweaver.
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.
- In the first screen you need to give a name to your site. Click Next.
- Select No, I do not want to use a server technology. Click Next.
- 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.
- In the next screen, “How do you connect to the remote server?” choose None from the drop-down menu. Click Next.
- You will be able to view your site summary. Click on Done.
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.
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
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:

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.