Goals

• Redesigning the many parts of the Header for Multiflex Template Pages

Notes

• section 0 - Goals, Notes, Instructions to Copy Files
• section 1 - Summary - Changing the top left part of the Header
• section 2 - Summary - Changing the top right part of the Header
• section 3 - Summary - Changing the text in the Green Banner
• section 4 - Summary - Menu Bar
• section 5 - Summary - Breadcrumbs
• section 1 - Details - Changing the top left part of the Header
• section 2 - Details - Changing the top right part of the Header
• section 3 - Details - Changing the text in the Green Banner
• section 4 - Details - Menu Bar
• section 5 - Details - Breadcrumbs

Making a copy of the files

• Locate the original multiflex3 folder and copy it as a peer folder named temp01.
• This gives you a copy of the css folder where the two css files are stored ( layout2_setup.css, and layout2_text.css), and a copy of layout2.html that you can make the changes to.
• This will also allow you to copy the original files from multiflex3 if you make a mistake.
• Do the rest of the work inside your new temp01 folder.

Changing MULTIFLEX • 3.12 to Family Tree Home Page

• There are three steps to this exercise

1. remove the graphic file
2. change the text MULTIFLEX • 3.12 to Family Tree Home Page
3. change the text Open Source Template to Prupis - Prupas - Propas - Proops - Proopis

Replacing the three flags with text and changing the text below it

• There are three steps to this exercise

1. Remove the three flags.
2. Where the text (Home About Contact Sitemap) exists, copy and create a second line.
3. Change some of the text.

Replace the text and resize the div inside

• There are three steps to this exercise

1. changing the large text
2. changing the small text
3. removing the third line

Replace the text inside the <!-- Navigation item -->

• The <!-- Navigation item --> will help you find the text

1. <!-- Navigation item --> is a comment, do a search on it to find Overview
2. The text to control the menu bar is inside the unordered list and list item tags
3. You will change the toolbar from 3 buttons to 4 buttons, some of which has dropdown menus.

Last part of the Header

• We need to remove the Home, Webdesign, Templates, and Multiflex-3 from under the Menu bar and we need to remove the Search button to their right, under the Menu bar.
• Than we did all the maintenace for the Header.

Removing the Graphic file

• Start Dreamweaver.
• Open layout2.html and layout2_setup.css from the new temp01 folder in Dreamweaver.
• The Graphic file's name that we are going to delete is: bg_head_top_logo.jpg

To delete the graphic file.
1. In layout2.html, with the Design button selected, click the graphic file (the image with six squares).
2. 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.
3. Press the Delete key from the keyboard.
4. The graphic file is removed from the page.

Changing the text from MULTIFLEX • 3.12 to Family Tree Home Page and repositioning the text.

1. While in Design mode, overtype MULTIFLEX • 3.12 with Family Tree Home Page
2. In the second line overtype Open Source Template with Prupis - Prupas - Propas - Proops - Proopis
3. Highlight or select the first Prupis word and switch to the code side. Note that you are on line number 42 and you are inside of an h2 tag.
4. From the code side, Just before the word Prupis, insert or type &nbsp; three times to create three spaces.

• The next step is to move this div roughly a half an inch to the left.
• The text is located in a div tag named sitename.
• The position of the div named sitename, is located in the layout2_setup.css file on or around line 39.
• The position is controlled by the margin property and the value 90px. This needs to be reduced to 35px so we can move the text to the left.
• The following instructions will have you accomplish this.

1. In the layout2_setup.css file, look for line 39. It should start with .sitename
2. Next look for the margin property and the value of 90px.
3. Overtype 90 with 35
4. Save the layout2_setup.css file
5. You can check your work by looking at layout2.html in Design view.
6. If the work looks good, save layout2.html

• Congratulations, the work on the left side of the top of the header is complete.

Changing the three flags to text and changing the text below it

• Remove the three flags.
• Where the text [Home About Contact Sitemap] exists, copy and create a second line.
• Change some of the text.

1. In layout2.html, from the design side, hoover over the div with the flags, when the borders are showing, press the delete key on the keyboard.
2. The text (Home About Contact Sitemap) exists inside of a div named nav1, select it and press CTL C for copy.
3. Place the mouse cusor just above the div, and pres CTL V for paste. You will not notice another div entering the page.
4. In layout2_setup.css, look for the nav1 code and copy it over the nav0 code.
5. Rename the copied code nav0 by overtyping the 1 with a 0.
6. Look for the Margin property of nav0. There are four values, the first one is 45px. change it to 25px.
7. Go to the code side of layout2.html. Notice that there are two divs named nav1. Change the top one to nav0.
8. In the code for nav0, change Contact to Help, and change Sitemap to Contact.
9. In the code for nav1, delete the line for Home.
10. Change the text About to Disclaimer, and change the text Contact to Abbreviations.
11. Cut and paste the comment <!-- Navigation Level 1 --> above the nav1 logic, which would be the line displaying <div class="nav1">.
12. Save layout2.html and layout2_setup.css
13. Preview the pages by pressing the F12 key on the keyboard.
14. The two new lines should be right justified on the page. If they are, this part of the work is complete.

Replace the text and resize the div inside

• There are three steps to this exercise
• changing the large text
• changing the small text
• removing the third line

1. Before changing the line that displays Easy • Flexible • Robust
   to Prupis • Prupas/Propas • Proops • Proopis/Propis • Proopis • Prupis
   we have to allow the div to fit the text.
   In layout2_setup.css, look for the selector .sitemessage and change the value for the property width from 400px to 850px.
2. For the same selector, look for the margin property. Note that it has four values. Change the fourth value from 480px to 30px.
3. For the .sitemessage h1 selector just beneath the .sitemessage selector, change the value for the width property from 400px to 850px.
4. Save the layout2_setup.css document.
5. In layout2.html, search for the word EASY. Make sure you search for all caps.
   Note that Easy • Flexible • Robust is inside of an h1 tag. Change the text to
   PRUPIS • PRUPAS/PROPAS • PROOPS • PROOPIS/PROPIS • PROOPIS • PRUPIS
6. The next line is inside of the h2 tag. Change that text to
   The second generation
   of the family tree site
   is being rebuilt !
   Note the use of the break tag <br />.
7. Delete the line with the h3 tag: <h3><a href="#">&rsaquo;&rsaquo;&nbsp;More details</a></h3>
8. Save the layout2.html page and preview it by pressing the F12 key.
   

Replace the text inside the <!-- Navigation item -->

• The <!-- Navigation item --> will help you find the text

1. <!-- Navigation item --> is a comment, do a search on it to find Overview
2. The text to control the menu bar is inside the unordered list and list item tags
3. You will change the toolbar from 3 buttons to 4 buttons, some of which has dropdown menus.

This is easier than it looks

1. The first button displays the word Overview. To find it, you can either look for the comment above or do a search on the word Overview. Once you find the code, replace the word Overview with Home.
2. Change the link from index.html to http://www.prupis.info This will take you to the index.html page for Blake's site.
3. There is no dropdown menu for this button.
4. The next button displays Page Layouts. Replace this text with Prupis. Replace the link which contains a number sign (#) with http://www.prupis.info/prupis/ftPrupis.php
5. This button does have a dropdown menu. The dropdown menu for this button has 5 items. We will delete the original three of them and only use two items for the menu. Delete the last three item containing layout3.html, layout4.html, and layout5.html.
6. For the two remaining dropdown items, replace Layout-1 (1-col) with Abraham Prupis
7. Replace the link of layout1.html with http://home.comcast.net/~bprupis/Prupis/ftPrupisAbraham.htm
8. Replace Layout-2 (2-col) with Pauline Yochel.
9. Replace the link of layout2.html with http://home.comcast.net/~bprupis/Prupis/FTPaul.htm
10. Replace the button text of Header Layouts with Prupas/Propas
11. Replace the link which contains a number sign (#) with http://www.prupis.info/prupas/ftPrupas.php
12. This has a drop-down menu of seven items. We will delete 5 of them and use only two. If you look at the code you will see header1.html. Keep this and header2.html, delete the lines displaying header3.html thru header7.html.
13. Replace Header-1 (T+M+B) with Prupas - Lost Families.
14. Replace the link header1.html with http://home.comcast.net/~bprupis/Prupas/PrupasLost01.htm
15. Replace Header-2 (T+M) with Morris and Fannia Prupas
16. Replace the link header2.html with http://home.comcast.net/~bprupis/Prupas/PrupasLost01.htm. Yes it has the same link as above.
17. To add in the fourth button for the Menubar, do the following, notice there are two closing div sttms following this code. Click in front of the first one and press the Enter button on the keyboard twice. Notice that the above code has a comment for each button that displays <!-- Navigation item --> and the logic for the button ends with the closing ul tag. Copy the above logic from the comment to the closing ul tag and paste it just above the two closing div sttms.
18. Notice that the logic or HTML code for Prupas/Propas is repeated since you just made a copy of it. use the second one (Prupas/Propas) and replace the text with Proops.
19. Replace the link from http://www.prupis.info/prupas/ftPrupas.php to http://www.prupis.info/proops/ftProops.php
20. Replace its first list item from Prupas - Lost Families to Proops Family History.
21. Replace its link from http://home.comcast.net/~bprupis/Prupas/PrupasLost01.htm to http://home.comcast.net/~bprupis/Proops/ProopsFamilyHist.htm
22. Replace the second list item of Morris and Fannia Prupas to Printer Remarks.
23. Replace it's link from http://home.comcast.net/~bprupis/Prupas/PrupasLost01.htm to http://home.comcast.net/~bprupis/Proops/ProopsFamilyHistPrtRmks.htm
24. As you can see, it is not that much work to add to or take away an item from the Menubar. Save your work and preview it by pressing the F12 button on the keyboard.

Last part of the Header

• We need to remove the Home, Webdesign, Templates, and Multiflex-3 from under the Menu bar and we need to remove the Search button to their right, under the Menu bar.
• Than we did all the maintenace for the Header.

1. For the left side of the screen we can select the links Home, Webdesign, Templates, and Multiflex-3 from the Design side of layout2.html
2. Go to the code side and look at the code that got selected. It's an unordered list with 4 list items (li tags).
3. You can delete that, but do not delete the div tag above it.
4. To get rid of the Search box and it's button, look at the code and notice how it's orange and blue in Dreamweaver.
5. You can delete the opening and closing div tag around the form, but do not delete the other closing div tags.
6. You can now click the Design button to admire your work. Save the layout2.html file and press F12 to test the page.
7. If every thing looks and works OK, we are done with this exercise.