The Goals

• Changing the Green Banner (named bg_head_middle.jpg)
             to the blue one (named bg_head_middle_blue.jpg)
• Changing the Green Logo (named bg_head_top_logo.jpg)
             to the blue one (named bg_head_top_logo_blue.jpg)
• Making the appropriate changes to layout2blue.html to display blue logo and banner
• We will see the change by adding an item to the dropdown menu
             of the Page Layouts button from the Menubar of layout2.html
             that will link to layout2blue.html

There are seven steps to this exercise

1. Making a copy of the files
2. To locate and change the logo graphic in the css file
3. To locate and change the banner graphic in the css file
4. Making changes to the layout2blue.html file to use the blue logo
5. Making changes to the layout2blue.html file to use the blue banner
6. Creating a link to layout2blue.html from layout2.html's Menu bar
7. Testing the changes

1 - Making a copy of the files

1. Using MyComputer, copy the multiflex3 folder inside of htdocs, as temp02 inside of htdocs, making temp02 a peer to multiflex3
2. Open Dreamweaver
3. Using the File Panel, look inside of our temp02 folder, and open layout2.html
4. Save layout2.html as layout2blue.html
5. Using the file panel, look inside of the css folder that is inside of the temp02 folder, and open layout2_setup.css.
6. Remember, if you made too many mistakes, you can always copy the original files from multiflex3 to temp02.
7. Do the rest of the work inside your new temp02 folder.

Adjusting the css file

• Now there are two files opened in Dreamweaver, layout2blue.html and layout2_setup.css from the new temp02 folder that we just created.
• We will do some work inside the layout2_setup.css file.

2 - To locate and change the logo graphic in the css file.

1. In layout2_setup.css, search for bg_head_top_logo.jpg, I found it on line 38. It is inside of a selector named .sitelogo. We want to make a copy of sitelogo so we do not change other pages appearances that want to use the green logo. Use Copy to copy the line with the sitelogo selector and use Paste to create another sitelogo just beneath it, line 39.
2. Change the name sitelogo to sitelogo-blue on line 39.
3. In line 39, change the value of the background url from ../img/bg_head_top_logo.jpg
   to ../img/blue/bg_head_top_logo_blue.jpg (Note how the phrase was changed with the two blue's added to it). CSS will look into the img folder, find the blue folder and use the bg_head_top_logo_blue.jpg image to display the proper blue logo. This will only happen if the page uses the sitelogo-blue instead of the sitelogo selector.

3 - To locate and change the banner graphic in the css file.

1. In layout2_setup.css, search for bg_head_middle.jpg, I found it on line 31. It is inside of a selector named .header-middle. We want to make a copy of .header-middle so we do not change other pages appearances that want to use the green banner. Use Copy to copy the line with the header-middle selector and use paste to create another header-middle just beneath it, line 32.
2. Change the name.header-middle to .header-middle-blue on line 32.
3. In line 32, change the value of the background url from ../img/bg_head_middle.jpg
   to ../img/blue/bg_head_middle_blue.jpg (Note how the phrase was changed with the two blue's added to it). CSS will look into the img folder, find the blue folder and use the bg_header_middle_blue.jpg image. This will only happen if the page uses the header-middle-blue instead of the header-middle selector.
4. Save the layout2_setup.css file

4 - Making changes to the layout2blue.html file to use the blue logo.

1. Open layout2blue.html in Dreamweaver.
2. In layout2blue.html, with the Design button selected, click the graphic file (the image with six squares).
3. Then hoover the mouse cursor over the border till you see the 4-headed cross, click again and the handles of the border should be displayed.
4. Click the Code button. The proper line of code is highlighted or selected. It shows that sitelogo is the class that the anchor tag is using.
5. Change sitelogo to sitelogo-blue for the class.
6. Save the layout2blue.html in Dreamweaver. You can Preview the page by pressing F12.

• This takes care of the blue logo being displayed on the page.
• Next we will do some work to display the blue banner.

5 - Making changes to the layout2blue.html file to use the blue banner.

1. In the layout2blue.html file, search for header-middle, I found it on line 72. It is used to assign a class to a div.
2. Change header-middle to header-middle-blue.
3. Save the layout2blue.html file in Dreamweaver. Preview the file using the F12 key.

6 - Creating a link to layout2blue.html from layout2.html's Menu bar to see the blue banner and logo.

1. From Dreamweaver, open the layout2.html file.
2. From the Design side, select or highlight the middle button, Page Layouts.
3. Click the Code button. On the code side, you will see Page Layouts is still selected. There are 5 list items under Page Layouts. We will create a 6th drop-down menu item.
4. Select the entire line for the last menu item, (for Layout-5), and copy and paste that line under the 5th item to create the sixth item.
5. Change the text Layout-5 (3-col) to Layout-Blue.
6. Change the link from layout5.html to layout2blue.html
7. Save layout2.html, and Preview that page using the F12 key.

7 - Testing the Changes

1. In layout2.html, hoover over Page Layouts button
2. click the sixth item from its drop-down menu labeled Layout-Blue.
3. That should take you to our page displaying the Blue logo and Banner.

• Congratulations, the work on the HTML and CSS side of the pages is complete.