Reference no: EM131433783
Assignment
Scenario/Summary
This iLab assumes you have already read this week's lecture material, as well as the assigned reading from the textbook.
This week, you will use CSS to apply a layout to your pages, based upon the wireframe below. All pages will use a single external style sheet so the styles will be consistent across the site. This will also make maintenance easier for the site, as any changes will only need to be applied in one place.
It is recommended that you save frequently during the iLab. You might want to save after each change and then view your web pages to see the results. This will help you to see how each change affects the page and will also help you to identify and correct errors as they occur.
You will submit your revised template.html file, as well as index.html, about.html and main.css. Be sure to also include any dependent folders.
In addition, you will upload the new content to CWP and provide a working link to the site.
Lab Steps
STEP 1: Add an Aside
Modify ccc_template.html
1. We are going to start by making some changes to our template from last week. Ordinarily, you would create a finished template before you generated any of the pages for your site. However, since you are learning new techniques as you progress through each week, it is necessary to make some adjustments to the template.
2. 1.1 Save a backup of your Week 2 content in a new location. You might simply create an additional folder named "wgd232_backups" and save your weekly zip files there. That way, if you ever need to go back to a previous version of your site, you can easily do so.
3. 1.2 Open ccc_template.html.
4. 1.3 Just above the <section> element, add a <div> with two classes, container and clearfix. Add the </div> just below the </section>.
5. 1.4 Add a set of <aside> elements (both an open and close element) between the open div and open section tags. Add a class to the <aside> named "col-1-3."
6. 1.5 Add another class to the <section> named class="col-2-3."
7. 1.6 Save changes.
Modify HTML pages
1. 1.7 Open index.html. Follow the steps above to add a <div>, an <aside>, and the appropriate classes to the <div>, <aside>, and <section>.
2. 1.8 Add content to the <aside> from the WGD232_iLab_Content.docx.
1. 1.8.1 Use an <h2> for "Upcoming events:."
2. 1.8.2 Use paragraphs for the list of dates and plays. Each line should use a different set of paragraph tags.
NOTE
You might already know how to use list elements and be tempted to do so here. For the purpose of this exercise where you will be learning how to apply CSS, follow the instructions given and use paragraph tags. In a later lesson, we will cover lists and will see the effect of changes when using lists.
1. 1.9 Wrap the dates in the paragraphs with a <span> and a class named "emphasis." This will enable us to apply any style to the dates that we wish, by using CSS. This way, we can apply the same style in multiple places on our site. If we decide to change the look, we only have to update it one place, the CSS.
2. 1.10 Replace the hyphen between the dates with the HTML character encoding for a dash that is the width of an upper-case "N" (–). To ensure the space before and after the dash is not lost due to truncating by the browser, add non-breaking spaces before and after the dash ( ).
3. 1.11 Add another non-breaking space after the </span>. Repeat this for all of the plays listed in the <aside>.
Below is an example of one line from the <aside> after making the above changes.
1. 1.12 Save all changes.
2. 1.13 Open contact.html. Make the same changes that were made to index.html and save.
3. 1.14 Open the pages in a browser window and view the changes. Make corrections as needed.
STEP 2: CSS
CSS Resets
Let's start by adding a CSS reset to the top of our CSS document. There are various resets available for public use, or which can be modified to suit your needs. You also have the ability to create your own set of resets. For this exercise, use Eric Myer's reset.
1. 2.1 Open main.css.
2. 2.2 Copy Eric Myer's reset and paste above the body selector that is already in the CSS.
3. 2.3 Save your changes.
4. 2.4 Refresh your web page in the browser, or open index.html if you already closed your browser. Notice the difference in the size and spacing of the page contents.
Size and position content
We will start by adding a fairly generic font family for the time being. Next week, we will cover typography and will work on our fonts. We will also use "auto" for the value of our margins to center the body on the page. You might also want to add a comment between your body selector and the end of Eric Myer's reset so you know where your styles begin.
1. 2.5 Add properties for the font-family, font-size, background-color, width, and margins as identified below.
1. 2.6 Add a .5em padding to the header, section, footer, and aside.
2. 2.7 Set the height of the header to 330px, margin to 0 and background color to light blue.
To move the navigation bar to the bottom of the header, we need to use a combination of relative and absolute positioning.
1. 2.8 Add a relative position value to the header.
2. 2.9 Set the position of the navigation bar to absolute, and the bottom and left to zero.
3. 2.10 Add a 1em margin to the bottom of the navigation bar.
4. 2.11 Add top and bottom padding values of .25em and right and left values of 5 em to the anchors in the navigation bar. This will space the elements across the width of the body.
5. 2.8 Set the background color of the aside to light gray.
6. 2.9 Set the background color of the footer to light blue and center the text.
7. 2.10 Add a 1em padding to the bottom of the h1, h2, and h3 headings.
8. 2.11 Set the font size for the h1 to 250%, the font size of the h2 to 150%, and the font size of small to 80%.
2.12 Set the the text-decoration property for the h1 a to none. This will remove CSS for two columns
1. 2.13 Set the width of the col-1-3 class to 32% and the width of the col-2-3 class 65%.
2. 2.14 Float both classes to the left.
3. 2.15 Add styles to the clearfix class to prevent the footer from flowing around the aside and section. The example below is a fairly common clearfix solution and similar to the one presented in your textbook.
9. the underline from the heading, due to it being a hyperlink.
1. 2.15 Save all changes and open index.html in a browser.
Look at the aside and the section on both the Home page and the Contact Us page. Notice how the background of the aside does not match the height of the section on the left. To fix this, we will add an extremely large padding to the bottom of our aside and an equivalent negative margin.
1. 2.16 Add a bottom padding of 99999px and a bottom margin of -99999px to the col-1-3 class.
2. 2.17 Add an overflow property for the container class set to hidden. This ensures that any content that flows outside of the div, which is the parent container for the aside and the section, will be hidden.
Attachment:- Scenario.zip