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 layout2two.php to display blue logo and banner
• We will see the change by clicking Layout Two from the dropdown menu
             of the Layout2 button from the Menubar of layout2.php
             that will link to layout2two.php

Changing the Green Banner and Logo to Blue using .php and .inc files

• There are six 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 layout2two.php file to use the blue logo
5. Making changes to the Template-blue.inc file to use the blue banner
6. Testing the changes

Making a copy of the files

1. Using My Computer, copy the temp03 folder inside of htdocs, as temp04 inside of htdocs, making temp04 a peer to multiflex3 and temp03 (to do this, right click temp03, select Copy from the submenu, you will get a folder named copy of temp03, right-click that folder and select Rename from the submenu, rename the folder temp04).
2. Open Dreamweaver
3. Using the File Panel, look inside of our temp04 folder, and open layout2two.php
4. Using the File Panel, look inside of the css folder that is inside of the temp04 folder, and open layout2_setup.css.
5. Remember, if you made too many mistakes, you can always copy the original files from temp03 to temp04.
6. Do the rest of the work inside your new temp04 folder.

1 - Adjusting the css file

• Now there are two files opened in Dreamweaver, layout2two.php and layout2_setup.css from the new temp04 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 layout2two.html file to use the blue logo.

1. Because we are using include files to have the header and the navigation column the same for all pages, we cannot make the change in layout2two.php, the change has to be made in the include file. But if we make a change in the include file, all pages referencing that include file will use the blue logo and banner. So that only the one page of layout2two.php use the blue banner and logo, and not disturb the other pages, layout2two.php must use it's own include file to do the trick. If any other page wants to use the blue logo and banner, they would need to use the include file we are about to create.
2. You need to open Template.inc from temp04. (Some versions of multiflex have an additional folder named template where you would find our files.)
3. Before making any changes to Template.inc first make the copy we need to edit. Click File from the menubar and select Save As from the submenu. Save the file as Template-blue.inc
4. Since we cannot click or select the graphic file from design mode, we need to do a search on sitelogo. We do not do a search on bg_head_top_logo.jpg because sitelogo uses the image as a background, you can say sitelogo referenses the graphic file indirectly. Line 19 uses the sitelogo class for the anchor tag. We have to change the class from sitelogo to sitelogo-blue, to reference the blue logo. So in between the double quotes, change the text sitelogo to sitelogo-blue.
5. Save Template-blue.inc
6. Open layout2two.php. Change the include file reference from Template.inc to Template-blue.inc.
7. Save the layout2blue.html in Dreamweaver. You can Preview the page by pressing F12. You might have to save the three documents again, layout2two.php, Template-blue.inc, layout2_setup.css. Some times I could not get it to work the first time.

• 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 Template-blue.inc file to use the blue banner.

1. In the Template-blue.inc file, search for header-middle, I found it on line 46. It is used to assign a class to a div.
2. Change header-middle to header-middle-blue.
3. Save the Template-blue.inc file in Dreamweaver.
4. Open layout2two.php
5. Preview the file using the F12 key.

6 - Testing the Changes

1. In layout2.php, hoover over Layout2 button
2. click the second item from its drop-down menu labeled Layout Two.
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.