CUSTOMIZING YOUR DREAMWEAVER TEMPLATE - PART TWO

Continuing from my earlier posts, I am going to customize my index.html web page for my texartisancakes.com website. (See earlier post for lessons 1-6)

So far, I have created a file structure for my website on my computer, created a logo, a custom background image, and some content for my site. Now I am ready to put the pieces of the puzzle together for my first page.

Overview: I am going to insert my logo, background image, text, and change the color scheme of my Dreamweaver Template to match my site.

(Double-click images to make them bigger.)

Lesson 7
How to insert your background image:

1. Open the index.html that you have already created. (see lessons 1-3)
2. From the CSS Styles navigation bar, double-click on body to open the CSS Rule definition for body. (see figure 7.0)
3. In the CSS Rule definition for body, under category, click background. In background image, path to your background image within your images file. Click apply, then OK (see figure 7.1)

figure 7.0

figure 7.1

Lesson 8
How to insert and center your logo and change the background color of the header:

1. Next, we are going to change the color of the header from the template-provided green to a purple from our background image.  From the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header. Under category, click background. In background color, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 8.0)
2. Next, I am going to insert my logo. Since I want my logo to be centered and not anchored to the left side of the header, I am going to delete the the logo placeholder. Click on the logo placeholder and hit delete on your keyboard. Leave your cursor in the header. From the insert toolbar, click on images and path to your logo. Click OK. (see figure 8.1)
3. To center the logo, go to the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header. Under the block category, click text-align, center. Click apply, then OK. (see figure 8.2)

 figure 8.0

 

figure 8.1

   

figure 8.2

 

Lesson 9
How to rename the links and change the background and hover colors:

1. I am going to change the names of the links and the background color next. Simply place your cursor within the link and type in the desired text. (see figure 9.0)
2. Next I am going to change the background color of the links from the template-provided green to a color from my custom wallpaper. Go to the CSS Styles navigation bar, double-click on .ul.nav a, ul.nav a:visited to open the CSS Rule definition for .ul.nav a, ul.nav a:visited. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. In the type category, change the font color and font weight to suit your scheme. I picked white and bold. Click apply, then OK. (see figure 9.1)
3. Now I am going to change the hover background color of the links. Go to the CSS Styles navigation bar, double-click on ul.nav a:hover, ul.nav a:active, ul.nav a:focus to open the CSS Rule definition for ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 9.2)
4. I want to change the sidebar color to match my links. Go to the CSS Styles navigation bar, double-click on .sidebar1 to open the CSS Rule definition for .sidebar1. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 9.3)
5. I deleted the text in the sidebar and simply hit the return key a few times to extend the sidebar color down.
6. To check your progress, go to live view and hover over your links. (see figure 9.4)

figure 9.0

 

figure 9.1

 

figure 9.2

 

figure 9.3

 

figure 9.4

 

 

Lesson 10
How to change the body text and color and the footer text and color:

1. You can simply type in your text using the cursor. Or if you want to have it specially formatted, you can create your text in a word document and copy and paste. (see figure 10.0)
2. To change the properties of the footer, go to the CSS Styles navigation bar, double-click on .footer to open the CSS Rule definition for .footer. Under the type category, change the color and weight of the font. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it.Under the block category, click text-align, center. Click apply, then OK.  (see figure 10.1-10.3) 
3. To check your progress, go to live view and see your creation! (see figure 10.4)

figure 10.0

 

figure 10.1

 

figure 10.2

 

figure 10.3

figure 10.4