Position Assignment Explained

Listed below are the steps you need to follow to complete the position lesson assignments. You have 2 weeks to complete these assignments.

1. Read Chapter 4 "Positioning Elements" pages in your textbook. The author discusses the box model and explains how to calculate the size of the box. The concept of float and clear is discussed. Finally the position property is explained. This property will come in very handy during the navigation lessons when we learn how to make pop down menus.
   
   I would like to mention that the Aslett clearing method is discussed in this chapter on page 119, but is not discussed on the DVD or in class assignments until the layout lessons. I did not pick up on this change until after the class had begun. When we reach that portion of the class, I will ask you to return to this page and read it.
   
   For some of you this will be an easy read, for others you may want to try it in 2 or 3 stages.
   
2. I recommend you tackle the DVD in 2 stages also. Open the DVD > css-part1 > start-here.html > Position [1] lesson. Here is a list of what you need to watch in week 1.
   # box model
   # border sampler
   # how big is the box
   # shorthand box prop.
   # float image
   # float - clear image
   # position property
3. The " box model" and "how big is the box" lessons will help you complete one of the first homework assignments - a Box Properties Sampler. You need to create a page which contains 4 paragraphs:
   
   paragraph 1- will have a paragraph of text with a background color behind it.
   
   paragraph 2- ,will be a copy of paragraph 1 with padding added
   
   paragraph 3 - will be a copy of paragraph 2 with a border added
   
   paragraph 4 - will be a copy of paragraph 3 with margin added
   
   finally make a copy of paragraph 4 and add a width to the paragraph, then calculate how big the box is. List the size of the box on the bottom of the page. Name the file "box.html", save it in the "samples" folder.
4. The next homework assignment is the creation of the Position Properties Sampler, review the DVD page titled "position sampler" to prepare for this assignment. Your goal is to create 4 pages, each page has 4 paragraphs of text. Assign a unique positioning value to the third paragraph. For example the "position-static.html" page will have a value of "static" as the position value, while the "position-relative.html" page has a position value of "relative".
   
   I recommend you name the files:
   "position-static.html"
   "position-relative.html"
   "position-absolute.html"
   "position-fixed.html"
   
   Save them in the "samples" folder.
5. Now it is time to make the float and clear sampler. You need to display 3 images on the left side of the page, and 3 paragraphs of text to the right of these images. Use the float and clear properties to make sure that the image displays on the left and the text on the right. the clear prperty will alow the second and third image to line up on the left side of the screen, regradless of the amount of text used. Review the DVD pages titled float image" and
   "float - clear image" to prepare for this assignment.
   
   Save the file as "float-clear-img.html" - place it in the "samples" folder.
   
   Place the images used for this page in an images folder within the "samples" folder.
   
6. I recommend that students do the required homework first and then try to make all the examples on the DVD work. After completing the required homework you may want to make a border sampler or make a page where the image is in a column on the left and has blank space below it.
   
7. Try and accomplish these goals by the end of week 1. I hope you can occasionally come up for air and enjoy the sunshine. :->
   
8. During the second week you need to apply the concepts of positioning to the "live" site. Access the DVD > position [2] and review these lessons:
   # clean up code [live]
   # colorize div tag [live]
   # style heading [live]
   # style navigation [live]
   # padding navigation [live]
   # leftside hover [live]
   # misc. styles [live]
9. The first lesson asks you to take a look at your CSS code and see if there are areas that could be combined and cleaned up. Creating your .css file is a process where new code is added each week. Taking the time to look back on what you have created may allow you to write cleaner code that is easier for you to work with.
10. In an earlier lesson you were asked to add div tags to your "live-site.html" page. Now you will be asked to colorize those div tags. View the lesson colorize div tag and make a copy of the page "live-site.html" named "live-color-div.html", place this file in the "live" folder. Within each div tag add an inline CSS style that will colorize the background of the div tag. This is an easy way to identify each section of content.
    
    Right now there is no layout to your live page and you will see one div tag stacked on top of the other. You may be wondering why bother to colorize the page when is has such a primitive layout. Well as the class proceeds your layout will become more complex, as long as this page is still linked to your "live.css" file you will see these colorized areas move around the page as you add layout code. You may find referring to this page later in class helps you see how you went wrong in the layout of the page.
    
    Also, I wanted you to practice this concept so that when in the final exam, I ask you to colorize a site from the csszengarden, you are familiar with the concept.
    
    
11. The remainder of the week is spent applying position properties to the "live" site. Review the lessons on the DVD and send me questions if you are confused. Remember that there is quite a bit of flexibility regarding what the final color, width, border, margin, and padding for each div tag is set to.
    
    I have tried to make my page look like the original, you may decide to take the design in an entirely different direction. That is great as long as you have set a value for color, margin, padding, border (if needed) and width to the styles which control each div tag.
    
    One final note, in your design, margin and padding may need to be set to zero, that is fine. In other cases border may not be used, that is also fine. I am not requiring that you assign lots of margin, padding or border to every div tag. I just need you to think about the width, color, and box property values you want to apply to each div tag.
    
    To complete this phase of the homework you will need to modify the "live.css" file. In most cases you will not need to modify the "live-site.html" page unless you decide to change where to place your div tags.
    
12. Now open the "homework.html" page and activate the links for the position lesson. This will require you to create a link to theses files:
    
    Box Properties Sampler - a file named "box.html"
    
    Position Properties Sampler which consists of 4 files:
    "position-static.html"
    "position-relative.html"
    "position-absolute.html"
    "position-fixed.html"
    
    Float and Clear Sampler - named "float-clear-img.html"
    
    Live Site Colorized - a file named "live-color-div.html"
    
    Live Site with Position Properties - these 2 files are simply modified versions of the "live-site.html" page and the "live.css" file.
    
13. Please upload the files (including your modified homework page) onto "student"
    Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
14. I will use the "student work" page to grade your work.