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.
   • 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.
     
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.

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!