The Goals

• It is a prerequisite that you completed the Properly Commenting the end of Div's
          before doing this assignment.
• Reorganizing the Navigation Column on the left using just HTML and CSS
• The organization of divs and dl classes used within "main-navigation"
• An understanding of the div class names and dl class names used within "main-navigation"
• Stripping out the div classes and dl classes used in div class="main-navigation" that are not used
• A more detailed explanation of some of the classes used in "main-navigation"
• Section 6 below has the details about the classes used in the Navigation Column and the work you will do to complete this exercise.

Notes about the sections below

• section 1 - Goals, Notes, and Instructions to Copy Files
• section 2 - Summary of the Classes used for the entire Page
• section 3 - Organization of the page-container Div • to display that there are three parts
• section 4 - Organization of the header, main, and footer Div's
                                                                                • a high-level break down of the div's
• section 5 - Organization of the main, navigation, and content Div's
                                                                                • a detailed break down of "main"
• section 6 - div class="main-navigation" • and it's associated classes
                                                                • (restricted to navigation column)

Creating the files

• Locate the original multiflex3 folder and copy it as a peer folder named temp011
• 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 will make a copy of to make the changes to.
• Open layout2.html and save it as layout2navbar.html This will be the page that you will use to make chages to in the navigation column.
• Do the rest of the work inside your new temp011 folder.

The organization of Div's for Multiflex Pages on layout2.html

• The layout of the page

1. div class="page-container"
2. div class="header"
3.      div class="header-top"
4.           div class="sitename"
5.           div class="nav0"
6.           div class="nav1"
7.      div class="header-middle"
8.           div class="sitemessage"
9.      div class="header-bottom"
10.           div class="nav2"
11.      div class="header-breadcrumbs"
12.           div class="searchform"
13. div class="main"
14.      div class="main-navigation"
15.           div class="round-border-topright"
16.                dl class="nav3-grid" (not a div)
17.                dl class="nav3-bullet" (not a div)
18.                dl class="nav3-nobullet" (not a div)
19.                p class="center" (not a div)
20.                p class="right" (not a div)
21.           div class="loginform"
22.           div class="searchform"
23.      div class="main-content"
24.           div class="column1-unit"
25.           div class="column1-unit"
26.           div class="column1-unit"
27.           div class="column1-unit"
28.           div class="column1-unit"
29.                div class="contactform"
30. div class="footer"

div class="page-container"

• div class="header"
• div class="main"
• div class="footer"

div class="header"

• div class="header-top"
• div class="header-middle"
• div class="header-bottom"
• div class="header-breadcrumbs"

div class="main"

• div class="main-navigation"
• div class="main-content"

div class="footer"

div class="main"

• div class="main-navigation"
• div class="main-content"

div class="main-navigation"

• div class="round-border-topright"
•   dl class="nav3-grid" (not a div)
•   dl class="nav3-bullet" (not a div)
•   dl class="nav3-nobullet" (not a div)
• div class="loginform"
• div class="searchform"
• p class = "center"
• p class = "right"

div class="main-content"

• div class="column1-unit"
• div class="column2-unit-left"
• div class="column2-unit-right"
• div class="column3-unit-left"
• div class="column3-unit-middle"
• div class="column3-unit-right"
• div class="column1-unit"
•      div class="contactform"

6.1 - Below is the breakdown of the classes used in the navigation bar displayed on the left side of the page for layout2.html (you are using layout2navbar.html).

• "main-navigation" is the div that contains the navigation column on the left side of the page.
• "main-navigation" utilizes several other div's to give it its look.
• div class="round-border-topright" is the class that gives the round corner that is displayed on the top-right corner of the navigation column.
• the following list displays the classes involved in giving the column it's look.

6.2 - div class="main-navigation"

• div class="round-border-topright"
•      dl class="nav3-grid" (not a div)
•      dl class="nav3-bullet" (not a div)
•      dl class="nav3-nobullet" (not a div)
• div class="loginform"
• div class="searchform"

6.3 - div class="round-border-topright"

• div class="round-border-topright"
• again: this class gives us the top-right hand ROUNDED corner of the column on the left.

6.4 - dl class="nav3-grid"

• dl class="nav3-grid"
• This is the preferred look I gave my pages when using this template. If you look at the navigation of this page, you will notice that the look displays a border between each item you can select from the column. If you look at the original layout2.html page, it has a mixed look of grid, bullets, non-bullets, and two forms, the login and search forms that can make up the look of the column. You will notice the group of links under the first "title" has the grid look. The second group of links under title, subtitle, has the bulleted look, and the third group of links under the next subtitle has the non-bulleted look. Take another look at the first group of links in the navigation column of the layout2.html page. Navlink 11, 12, 13, 14, and 15 has the first level look with its own borders in between links. However Navlink 121, 122, 123 is a second level look and does not display a border between the items in the column. I prefer to stay away from that look because it destroys the look of the first level grid with its borders.
• This first exercise will be to delete the the three nav links, Navlink 121, 122, 123, to get a "sleeker" grid look on the navigation column. Use the layout2navbar.html file you created earlier.
• Notice that in Dreamweaver the navigation column looks like there is a border between Navlink 121, 122, 123, however, if you look at those same links in a browser, those borders are not displayed. We will delete those three links by doing the following.

6.5 - Now some work with the html file for "nav3-grid.

• We are not working in the css file, instead we are going to do our work inside the layout2navbar.html. This directly impacts the look of the page. Later you should look up the class nav3-grid in the css file.

1. In Dreamweaver, inside the layout2navbar.html file, highlight or select the first link labeled Navlink 121. Than click the Code Button.
2. First of all, look how the title and the links are organized. The text labeled "Title" above the Navlinks is inside an <h1> tag using the class "first", is what gives "Title" the grey background and the white colored font. The links Navlink 11, 12, 13, 14, and 15 are used inside <dt> tags. Above those links is the dl tag that uses the class "nav3-grid", this gives us the grid look where the background to the Navlinks is grey, and when you hoover over those links with the mouse cursor inside a browser, you get a slightly darker grey.
3. Also notice two more things, one, that the three Navlinks are indented, and two, they are using dd tags.
4. Delete those three tags. Select the three lines and press either the Delete key or the Backspace key from the keyboard.
5. Save the file and press the F12 key to preview the page.

6.6 - dl class="nav3-bullet"

• dl class="nav3-bullet"
• As discussed above, I favor the grid look when compared to the bullet look. However, the bullet look should be examined in case you want to use it later. When you hoover over a link using the class "nav3-bullet", notice that the bullet first displayed as grey becomes blue. The css file takes care of that. To use the nav3-bullet, you refer to that class inside the html file. The nav3-bullet class is described inside of the layout2_text.css. The normal bullet is from a graphic file named bg_bullet_half_1.gif. When you hoover over the link, another graphic file is used named bg_bullet_half_2.gif. If you look at the layout2_text.css file you will notice that the (blue) bullet bg_bullet_half_2.gif is used during the hoover event described in the following rule: .nav3-bullet dt a:hover.
• The grey bullet is described in the following rule: .nav3-bullet dt a, .nav3-bullet dt a:visited and
  .nav3-bullet dd a, .nav3-bullet dd a:visited which uses the graphic file bg_bullet_half_1.gif.
• Either way, using a dt or dd link, this is controled just be using the nav3-bullet class in the html file. It's a very clever trick.
• In redesigning the navigation column we will do all our work inside of layout2navbar.html. First lets take a careful look at the code in the html file. The author of the template was kind enough to give us the comment of <!-- Navigation with bullets -->.
• If you look at the code, the dl calls the rules with the following line: <dl class="nav3-bullet">
• Again, the text for the links are Navlink 11, 12, 13, 14, and 15. Links Navlink 121, 122, and 123 are indented and uses the dd tag. Also if you view the page with a browser, notice the graphic files used, Navlink 11, 12, 13, 14, and 15 uses a square bullet graphic file, and Navlink 121, 122, and 123 uses a half triangle graphic file. When you hoover over those links with the mouse cusor they turn blue by using another graphic file. You can find all those graphic files being used inside of layout2_text.css.

6.7 - Now some work with the html file for "nav3-grid" and "nav3-bullet".

• Since I like the sleeker look of the grid, we will delete three of the links, Navlink 121, 122, and 123, and change the class from nav3-bullet to nav3-grid.

1. From the Code side, inside of the layout2navbar.html file look for the first comment of <!-- Navigation with bullets -->. First delete the three links Navlink 121, 122, and 123.
2. Next change the class from nav3-bullet to nav3-grid.
3. Next delete the line the comment <!-- Subtitle --> and the line under it <h2>Subtitle</h2>.
4. Save the file and press the F12 key to preview the page.

• Notice how the navigation column is changing, and pretend you are putting in text that is meaningful, instead of "Title" and Navlink 11 or 12.

6.8 - One more thing to fix before we leave this section.

1. In the browser, you may have noticed the "grey" space above the below the header "Title". If not, look at it again.
2. To solve this issue, add the "first" class to the <h1> tag so it changes from <h1>Title</h1>
   to <h1 class="first">Title</h1>.
3. Save the file and press the F12 key to preview the page.

• Now when you look at the page in the browser, the "grey" space is no longer there.
• If you look back on the code side of the program layout2navbar.html, where the (#) hash sign is, would have been replaced with a real link.

6.9 - dl class="nav3-nobullet"

• dl class="nav3-nobullet"
• The nav3-nobullet class again uses the dl, dt, and dd tags in the html document.
• The rules for nav3-nobullet are kept in the layout2_text.css file.
• The magic for the nav3-nobullet for the html document when displayed in a browser, is the fact that when you hoover over the links with the mouse cursor, the underline characteristic is displayed. However, again it lacks the sleekness of the grid look. So again we will delete the three dd tags, change the class from nav3-nobullet to nav3-grid, add the "first" class to the h1 tag.
• However this time copy the <h1 class="first">Title</h1> statement over the <h2>Subtitle</h2> line.
• Here goes...

1. From the Code side, inside of the layout2navbar.html file look for the first comment of <!-- Navigation without bullets -->. First delete the three links Navlink 121, 122, and 123.
2. Next change the class from nav3-nobullet to nav3-grid.
3. Next copy the <h1 class="first">Title</h1> statement over the <h2>Subtitle</h2> line. We are doing this because there is not a Title line for this code, just the Subtitle line.
4. Save the file and press the F12 key to preview the page.

• Notice how the Navigation Column is looking more like the Navigation I use for this page.

6.10 - div class="loginform"

• div class="loginform"
• I have to admit that the login really looks good in this column, however since most of your sites will not need it, we will learn how to delete it from the column.
• Look at the code side of the page layout2navbar.html. Notice that the html logic for the Login form starts with the comment <!-- Login --> and ends with the </div> statement just before the <!-- Search form --> comment statement. Look at the logic for the Login form and notice the beginning and ending div statement for it. Now to get rid of it.

1. Select the lines from the comment <!-- Login --> to the correct ending div tag. Do not use the ending div tag for the search form.
2. Press the Delete key or the Backspace key from the keyboard.
3. Save the file and press the F12 key to preview the page.

6.11 - div class="searchform"

• div class="searchform"

1. Since you are learning how to redesign the Navigation Column, deleting the Search form is just as easy as deleting the Login form. Select the lines starting with the comment <!-- Search form --> to the first ending div statements approximately 10 line down.
2. Press the Delete key or the Backspace key from the keyboard.
3. Save the file and press the F12 key to preview the page.

6.12 - Heading h1

• There are three lines that I want you to look at, Heading h1, Heading h2, and Heading h3.
• Notice that Heading h1 will create the grey background, white font header used in the column, and Heading h2 and Heading h3 does not do that.
• Either through a browser or with the Design button choosen in Dreamweaver, look at what is left to delete: the 3 headings, two lists, paragraph and regular text, more text and images that use the class "center" and "right". Before deleting the code, you should look at it before it goes away so you are aware of these options in case you need them.
• From the Design side of the page, select the last image in the navigation column.
• Switch to the code, and look for the ending div tag just below the code that was selected. This closing div tag is the closing div tag for the class "main-navigation" ending all the logic for the column. All the HTML code after the closing div statement is for the main body of the page, the column on the right of the navigation column.

6.13 - Time to get rid of the rest of the column.

1. All that is needed is to select the the lines starting with the comment <!-- Text formats --> until you reach the closing div for "main-navigation".
2. This is the closing div just above the commented line <!-- B.1 MAIN CONTENT -->.
3. After selecting the lines, press either the Delete key or the Backspace key to get rid of the logic.
4. Save the file and press the F12 key to preview the page.
5. If every thing looks and works OK, we are done with this exercise.