CHAPTER 10: The Box Model "Getting Intimate with Elements"
To do advanced Web construction you really need to know your building materials. This chapter we will take a look at XHTML elements, aka our building materials.
We have a typical web site BEFORE and by the end of this chapter, our ultimate goal AFTER
- First things first, lets download our CH10 file... make sure you put this file in your WEB folder
ch10_lounge_classexample.zip | |
File Size: | 99 kb |
File Type: | zip |
FRIDAY 10/4/13
Because we haven't applied any styles to <h3> it inherits the font-family property from <body>
5. next, the content in the body should also be adjusted. THIS IS A NEW PROPERTY, but it helps keep things looking stylish:) We will be adjusting the line height of our sentences. To do this we need to add in body of our css:
line-height: ;
we can designate line-height:1.6em; which changes the space between the lines to be 1.6 times the font size.
200%, .5em, and 20px
to see the effect. To show me that you have tried each one, you will take a screen shot (command+shift+4) of your page for each height. and submit all three pictures in Edmodo as well as answer the following questions... which effect looks
better, why? Which is the worst, and why? Which is most readable? When you are done, make sure you
change the line-height back to 1.6em.
5. FINALLY, when you have returned the line-height back to 1.6em, compress CH10_Lounge_ClassExample and submit your work in Edmodo - Look for FRIDAY - ASSIGNMENT 1 - CH10
MONDAY 10/7/13 - BOX
- next you will create your own lounge.css file.
- In you lounge.css, you will
- create a default font size and font in the body by coding in, font-size: small; and font-family: Verdana, Helvetica, Arial, sans-serif;
- Make h1 and h2 the color: #007e7e; which is aquamarine
- make h1 font-size: 150%
- make h2 font-size: 130%
Because we haven't applied any styles to <h3> it inherits the font-family property from <body>
5. next, the content in the body should also be adjusted. THIS IS A NEW PROPERTY, but it helps keep things looking stylish:) We will be adjusting the line height of our sentences. To do this we need to add in body of our css:
line-height: ;
we can designate line-height:1.6em; which changes the space between the lines to be 1.6 times the font size.
- ONCE you have completed the above tasks, you will now do the additional requirements for this in-class assignment:
- Add color to your page's background.
- In the paragraph that starts with "Our guarantee: at the lounge..." you will make that paragraph a different color from the rest of the font colors.
- You will also put a solid, black line, aka border-bottom underneath h1 and h2
- Then you will try a few different values for the line-height, like:
200%, .5em, and 20px
to see the effect. To show me that you have tried each one, you will take a screen shot (command+shift+4) of your page for each height. and submit all three pictures in Edmodo as well as answer the following questions... which effect looks
better, why? Which is the worst, and why? Which is most readable? When you are done, make sure you
change the line-height back to 1.6em.
5. FINALLY, when you have returned the line-height back to 1.6em, compress CH10_Lounge_ClassExample and submit your work in Edmodo - Look for FRIDAY - ASSIGNMENT 1 - CH10
MONDAY 10/7/13 - BOX
- Continuing with Chapter 10, but this time we are boxing it up. SEE NOTES for more info. on what the assignment is and what you need to do. You will be using your CH10 work that you worked on last week.
- Submit compressed assignment folder and 2 screen shots in Edmodo - LOOK FOR BOX 10/7 - ASSIGNMENT 1
Chapter 10 & 11 - DIV
Now we are going to use div's to help use separate our block elements. Let's look at lounge.
Let's take a look at the area with Weekly Elixirs.
We are going to create an area called, which is in your HTML file
<div id="elixirs">
</div>
<div> is just a block element, so we can then apply any style.
In your CSS, let's add the style:
#elixirs{
border-width: thin;
border-style: solid;
border-color: #007e7e;
}
SO... the <div id> is an element or tag in your html just like <p class> or an <h1>, it is specifically naming the area called "elixirs"
in your CSS, you will call upon or reference that section called "elixirs" by using the #. This means anything in your HTML that is between the <div id> </<div> will have that "style" that you created in the CSS.
Save and run...
Your assignment is to add the following:
width: 200px;
padding to right, left and bottom of 20px
margin to the eft 20 px;
text-align: center;
background-image of cocktail.gif
and have it repeat horizontally at the top
IN ORDER to get the right column you will need to think about a top down approach. The div area will need to be first in your HTML
When you are don it should look like AFTER
SAVE and compress file and submit in EDMODO as CH10&11 - DIV
WHEN YOU ARE DONE, work on your final project. Add boxes and background pictures to your boxes. Be sure to use margins and padding and borders.
Let's take a look at the area with Weekly Elixirs.
We are going to create an area called, which is in your HTML file
<div id="elixirs">
</div>
<div> is just a block element, so we can then apply any style.
In your CSS, let's add the style:
#elixirs{
border-width: thin;
border-style: solid;
border-color: #007e7e;
}
SO... the <div id> is an element or tag in your html just like <p class> or an <h1>, it is specifically naming the area called "elixirs"
in your CSS, you will call upon or reference that section called "elixirs" by using the #. This means anything in your HTML that is between the <div id> </<div> will have that "style" that you created in the CSS.
Save and run...
Your assignment is to add the following:
width: 200px;
padding to right, left and bottom of 20px
margin to the eft 20 px;
text-align: center;
background-image of cocktail.gif
and have it repeat horizontally at the top
IN ORDER to get the right column you will need to think about a top down approach. The div area will need to be first in your HTML
When you are don it should look like AFTER
SAVE and compress file and submit in EDMODO as CH10&11 - DIV
WHEN YOU ARE DONE, work on your final project. Add boxes and background pictures to your boxes. Be sure to use margins and padding and borders.