SOLUTION FILES FOR THIS ASSIGNMENT Exercise 5-1 Enhance the Town Hall home page In this exercise, you’ 11 enhance the formatting of the Town Hall…

SOLUTION FILES FOR THIS ASSIGNMENT

Exercise 5-1 Enhance the Town Hall home page

In this exercise, you’ 11 enhance the formatting of the Town Hall home page that you formatted in exercise 4-1. When you ‘re through, the page should look like this: 

San Joaquin Valley Town Hall Celebrating our 1$ Year 

Our Mission San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned1 thought-provoking speakers who inform1 educate1 and entertain our audience! As one or our members told us: 

“Each year I give a ticket package to each of Ollr fatnily rnembers. I think of it as the gift of knowledge … and that is priceless.”‘ 

Our Ticket Packages • Season Package: $95 • Patron Package: $.200 • Single Speaker: S25 

This season’s guest speakers 

October Jeffrey Toobin 

November Andrew Ross Sorkin 

198 Section 1 A crash course in HTML and CSS 

Open the HTML and CSS files and start enhancing the CSS 1. Use your text editor to open the HTML and CSS files that you created for exercise 4-1: c:html5_css3_2exercisestown_hall_lindex.html 

c:html5_css3_2exercisestown_hall_lstylesmain.css 

2. Enhance the rule set for the body, by setting the width to 600 pixels, setting the top and bottom margins to 0 and the right and left margins to auto, and adding a 3-pixel, solid border with #931420 as its color. Then, test this change in Chrome. If the page isn’t centered with a border, make the required corrections. 

3. Add one more rule to the body that sets the background color to #fffded. Then, test this change, and note that the entire window is set to the background color, not just the body. 

4. To fix this, code a rule set for the html element that sets the background color to white. Then, test to make sure that worked. 

Add the other borders and another background color From this point on, test each change right after you make it. If you have any problems, use the developer tools as shown in figure 8-11 to help you debug them. 

5. Add a bottom border to the header that’s the same as the border around the body. 

6. Add top and bottom borders to the h 1 heading in the main element. Both borders should be the same as the borders for the header and footer. 

7. Set the background color of the footer to the same color as the borders, and then set the font color for the paragraph in the footer to white so it’s easier to read. 

Get the padding right for the header, section, and footer At this point, you have all of the borders and colors the way they should be, so you just need to set the margins and padding. In the steps that follow, you’ll start by adding a reset selector to the CSS file. Then, with one exception, you’ll use padding to get the spacing right. 

8. Add a reset selector like the one in figure 5-8 to the CSS file. When you test this change, the page won’t look good at all because the default margins and padding for all of the elements have been removed. 

9. For the header, add 1.5 ems of padding at the top and 2 ems of padding at the bottom. Then, delete the text-indent rules for the h2 and h3 elements in the header, and add 30 pixels of padding to the right and left of the image in the header. When you test these changes, you’ll see that the heading looks much better. 

10. For the main element, add 30 pixels of padding to the right and left. 

Chapter 5 How to use the CSS box model.for spacing, borders, and backgrounds 199 

Get the padding right for the headings and text 11. In the main element, set the padding for the headings and text as follows: Element Padding hl .3em top and bottom h2 .5em top, .25em bottom h3 .25em bottom img lem bottom p .5em bottom blockquote 2em right and left ul .25em bottom, l.25em left li .35em bottom 

12. Set the padding for the top and bottom of the paragraph in the footer to 1 em. 

13. Test these changes. At this point, all of the spacing should look right. 

Add the finishing touches and test in IE 14. Italicize the blockquote element to make it stand out. 

15. Add a linear gradient as the background for the header. The one that’s shown uses #f6bb73 at 0%, #f6bb73 at 30%, white at 50%, #f6bb73 at 80%, and #f6bb73 at 100% as its five colors at a 30 degree angle. But experiment with this until you get it the way you want it. 

16. Do one final test to make sure that the page looks like the one at the start of this exercise. Then, experiment on your own to see if you can improve the formatting. For instance, you may want to add some space between the author names and their images. 

17. When you ‘re through experimenting, test the page in IE. If you see any problems, fix them and test again in both Chrome and IE