The Goals

• It is a prerequisite that you completed the Properly Commenting the end of Div's
          and Redesigning Nav Column before doing this assignment.
• Reorganizing the "main-content" on the Right using just HTML and CSS
• The organization of divs used within "main-content"
• An understanding of the div class names used within "main-content"
• Stripping out the div classes used in div class="main-content" that are not used
• A more detailed explanation of some of the classes used in "main-content"
• Section 6 below has the details about the classes used in the div class named "main-content"
• Section 7 will have 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-content" • and it's associated classes • (restricted to the right side of the page) This section has a detailed explanation of what the "column1-unit", "column2-unit-left" and "column2-unit-right", "column3-unit-left" and "column3-unit-middle" and "column3-unit-right" classes do inside of "main-content".
• section 7 - Is the actual exercise that removes some of the content from "main-content".

Creating the files

• You have your choice of copying from the the multiflex3 folder or copying from the temp011 folder to create a temp012 folder.
• Copy from the multiflex3 folder if you have not completed the Redesigning Nav Column before doing this assignment, or you want to work with the main-content side independently.
• If you have completed the Redesigning Nav Column before doing this assignment, copy from the temp011 folder to create a temp012 folder.
• Either way, create temp012 as a peer to the folder you copied it from.
• 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.
• If you copied from the multiflex3 folder: Open layout2.html and save it as layout2maincontent.html
• If you copied from the temp011 folder: Open layout2navbar.html and save it as layout2maincontent.html
• Either way, you created the layoutmaincontent.html file. This will be the page that you will use to make changes to the main-content side of the page.
• Do the rest of the work inside your new temp012 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 main-content displayed on the right side of the page for layout2.html (you are using layout2maincontent.html).

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

6.2 - 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.3 - div class="main-content"

• div class="main-content"
• the rules for this class is defined inside the layout2_setup.css document and the layout2_text.css document.

6.4 - div class="column1-unit"

• div class="column1-unit"
• the rules for this class is defined only inside the layout2_setup.css document. What makes this class different from the column2-unit-left or right and different from the column3-unit-left, middle, or right, is the fact that column1-unit is designed to fit inside of "main-content" using as much space as possible.

6.5 - div class="column2-unit-left" and "column2-unit-right"

• div class="column2-unit-left" and "column2-unit-right"
• the rules for this class is defined only inside the layout2_setup.css document. What makes this class different from the column1-unit and different from the column3-unit-left, middle, or right, is the fact that column2-unit-left and right is designed to fit inside of "main-content" using as much space as possible, and to look like its two columns side by side, with the left side and the right side having their own definitions described in the css file, but designed to act the same.

6.6 - div class="column3-unit-left" and "column3-unit-middle" and "column3-unit-right"

• div class="column3-unit-left" and "column3-unit-middle" and "column3-unit-right"
• the rules for this class is defined only inside the layout2_setup.css document. What makes this class different from the column1-unit and different from the column2-unit-left or right, is the fact that column3-unit-left, middle and right is designed to fit inside of "main-content" using as much space as possible, and to look like its three columns side by side, with the left, middle and right side having their own definitions described in the css file, but designed to act the same.

7.1 - Redesigning "main-content"

• div class="main" contains the two main classes of "main-navigation" and "main-content".
• "main-navigation" is the div that contains the navigation column on the left side of the page.
• "main-content" and its enclosed div's are used to display what could be the body of all the content you see inside of layout2maincontent.html. We are going to delete some of the content, so you have a stripped down version of main-content without the rest of the content that is displayed on the page. what we will have left is one sectyion using "column1-unit", another section using "column2-unit-left" and "column2-unit-right", and one last section using "column3-unit-left" and "column3-unit-middle" and "column3-unit-right".

7.2 - Look at layout2maincontent.html before you delete

• Using the browser or the Design button to look inside the page layout2maincontent.html, you see six sections titled:
• 1 - Column types
• 2 - Text and images
• 3 - Tables
• 4 - Paragraph text
• 5 - Links
• 6 - Contact form
• Note that the first section has the one, two, and three column display. You will eliminate the last 5 sections, and change the first section so that each column type, one, two and three, will be in their own section.

7.3 - Removing the Contact Form at the bottom of the page.

• First, lets get rid of the section for the Contact form. From the Design side of Dreamweaver, highlight or select 6 - Contact form, then click the Code button.
• Notice that the HTML code starts with the comment <!-- Content unit - One column --> than has a line for the h1 tag, a line for the div class of "column1-unit", the next line defines another div class of "contactform", and the next line starts the form tag. Scroll through the code until you see the end form tag, and notice there are 4 ending div tags.
• The last few tags look like the following.
•             </form>
           </div>
        </div>
     </div>
  </div>
• After doing the first assignment of identifying the ending divs, that same code would look like this:
•             </form> <!-- end form tag for the contact form -->
           </div> <!-- end contactform -->
        </div> <!-- end column1-unit -->
     </div> <!-- end main-content -->
  </div> <!-- end main -->

1. To get rid of the contact form properly, highlight or select the lines starting with <!-- Content unit - One column --> and ending with </div> <!-- end column1-unit -->. If your page does not have the ending comment, notice that you are selecting lines up to the second ending div statement.
2. Delete those lines.
3. Save the layout2maincontent.html document, and preview it. The contact form at the bottom of the page should be gone.

7.4 Removing the new last section of the page: 5 - Links

• Lets take a careful look at section 5 through the Design and Code side.

1. From the Design side highlight or select 5 - Links
2. Click the Code button
3. look at the code, there are only 11 lines of code producing this section,
   starting with the comment <!-- Content unit - One column -->
   and ending with the horizontal rule code of <hr class="clear-contentunit" />
4. Select the commented line and all the rest of the lines including the horizontal rule code
5. Delete them.
6. Save the layout2maincontent.html document, and preview it. The fifth section at the bottom of the page should be gone.

7.5 - Removing the new last section of the page: 4 - Paragraph text

• Lets take a careful look at section 4 through the Design and Code side.

1. From the Design side highlight or select 4 - Paragraph text
2. Click the Code button
3. look at the code, there are many lines of code producing this section,
   starting with the comment <!-- Content unit - One column -->,
   the next line you see code for the h1 heading tag, the next line you see the div tag, the next few lines are all header lines h1 through h6, then you see two full paragraphs, then a Bullet list and Ordered list, then an h5 header with the text Text orientation, some more paragraph tags,
   and ending with the horizontal rule code of <hr class="clear-contentunit" />
4. Select the commented line <!-- Content unit - One column --> and all the rest of the lines including the horizontal rule code <hr class="clear-contentunit" />
5. Delete them.
6. Save the layout2maincontent.html document, and preview it. The fourth section at the bottom of the page should be gone.

7.6 - Removing the new last section of the page: 3 - Tables

• Lets take a careful look at section 3 through the Design and Code side.

1. From the Design side highlight or select 3 - Tables
2. Click the Code button to look at the code. There is not many lines to display this particular table.
3. Highlight or select the commented code: <!-- Content unit - One column -->
4. Continue selecting lines until you reach the horizontal line code
                                                                         of <hr class="clear-contentunit" />
5. Note, before you delete the code, the div statements surrounding the "table" tags.
6. Delete the selected lines.
7. Save the layout2maincontent.html document, and preview it. The third section at the bottom of the page should be gone.

7.7 - Removing the new last section of the page: 2 - Text and images

• Lets take a careful look at section 2 through the Design and Code side.

1. From the Design side highlight or select 2 - Text and images
2. Click the Code button to look at the code.
3. Highlight or select the commented code above by one line: <!-- Content unit - One column -->
4. Continue selecting lines until you reach the horizontal line code
                                                                         of <hr class="clear-contentunit" />
5. Before you delete the code, look at the image statements. Some of them uses the center or right class to get the images looking as they do. You might want to look at the design side again and look carefully at this code in case you need to do this in the future.
6. If you need to select the lines again and delete the selected lines.
7. Save the layout2maincontent.html document, and preview it. The second section at the bottom of the page should be gone.

7.8 - We have the first section as the only section for this page.

• One of the goals of this exercise was to redeign this page so that if you are using one column, that will be displayed in a section by itself.
• We will place the two column text in another section and the three column text in another section.

1. From the Design side look at (1 - Column types).
2. Notice that there looks like there are two subtitles, Here comes the title, and Heading h1 with link. Under that is a paragraph and under that is the text Posting details ..., under that is a horizontal line.
3. Under the text Posting details ... we want to create another grey block with white letters, which would make our second section. Select Posting details ... the click the Code button.
4. Notice the ending div and the hr tag. Select the code <h1 class="block">1 - Column types</h1>
5. You need to copy and paste that code under the comment <!-- Content unit - Two columns -->
6. Then change the number "1" to a "2" so the text says: 2 - Column types
7. To make this easier to read on the code side, make sure there is a blank line above the text
   2 - Column types
8. Save the layout2maincontent.html document, and preview it.

7.9 - Creating the third section.

• Now we will make the third section.

1. Click the Design button, or make sure you are on the Design side of the page in Dreamweaver
2. Click or Select the Horizontal Bar that is in between the 2 and 3 column format.
3. Click the Code button.
4. Look at the code. Just below the hr tag is the comment <!-- Content unit - Three columns -->
5. You want to copy and paste the line <h1 class="block">2 - Column types</h1>
   below the comment <!-- Content unit - Three columns -->. Take your time to do this particular step, there are many lines of code between the two, and you want to make sure you place the h1 tag code in the correct place.
6. The next step is to change the text from 2 - Column types to 3 - Column types, which replaces the "2" with the "3".
7. Save the layout2maincontent.html document, and preview it.

• Look at the document carefully in the Browser. If it looks correct, you have completed this exercise.

7.10 - About this exercise...

• This exercise was an exercise in just deleting sections from the bottom of this page up.
• Please look at the original layout2.html, and realize that any section could have been used, and the rest of this document would have been deleted. This is true whether its the main-content, main-naviagation, or the header classes.
• Most of your changes were done in the html document, not the css document. This will be true for most of the time you are customizing this page to fit your needs, except for the header, which requires more work on the css side.
• Congratulations for completing all four exercises dealing with the multiflex template.
• Comment the end of the div's
• Redesigning the Header
• Redesigning the Navigation Bar
• Redesigning the Main Content