Editing Your Web Page in Dreamweaver

Let’s finish your page with some text. We’ll open your HTML file in Dreamweaver and add a title and content to your web page.

1. Fire up Dreamweaver. Open your Jackson_home.html page.
2. Select the navigation bar image and press the Delete key on your keyboard.
3. Press the background folder icon in Dreamweaver (it resides next to the first Bg text field located within the Properties inspector). An explorer window displays, allowing you to navigate to your files.
4. Navigate to the images folder. You’ll find this folder in the same location as the Jackson_home.html file. Photoshop automatically creates an images folder whenever you slice images and save them for the web.
5. Find the image for your navigation bar. Select the image and you’ll find it now fills in the Bg text field.
6. Repeat steps 2 through 5, deleting and then selecting the appropriate images for the contents window graphic and the About Jackson Steel graphic. Setting your images in the Bg text field allows you to type text over them, which is useful when adding content to your web pages.
   
   
   
7. 
   
   
   
   Select Insert ▶Table from the menu bar in Dreamweaver. The Table dialog box displays.
8. Define the following, as shown in figure below.
   
   • Rows: 1
   • Columns: 2
   • Border thickness: 0
   • Cell padding: 0
   • Cell spacing: 0
      
     
   Defining a table in this manner allows you to align your text in straight columns and rows. You won’t see the table at all with the thickness, padding, and spacing set to 0.
9. Create a similar table over the navigation bar. You can set the horizontal and vertical alignment at the bottom of the screen (where you set the background information). Use your mouse to click and drag the sizes of your table.
   After performing these tasks, your tables should look something like figure below.
   

Add various text within your page. You might want to delete the About Jackson Steel graphic and type in a title using Dream- weaver. I’ve done just that in figure above using a Bold Verdana font.

A text title will allow you to easily use this page over and over again to create new pages for this website. Say you want to add a Contacts page.

Just save this web page with a different file name in Dreamweaver (perhaps changing it to Jackson_contacts.html). Then, all you have to do is change the text title to Contacts and you’re ready to go. This beats having to create a new text graphic in Photoshop every time you need to create a new web page.

Figure below shows the final result of your web page. It’s ready now to save and launch on the World Wide Web.

In this tutorial:

1. Creating a Professional Web Page Style
2. The Navigation Bar/Title Bar Style
3. Creating a Metallic Navigation Bar
4. Creating a Logo 
5. Adding a Steel Plate Graphic to your Web 
6. Creating a Contents Area 
7. Creating Slices in Photoshop 
8. Editing your Web Page in Dreamweaver