APPLY Data Files needed for this Case Problem: arlogo.png, historytxt.css, lincoln01.png-lincoln10.png, lincolntxt.htm, modernizr-1.5.js American Rhetoric Professor...

Transcribed Image Text:

APPLY Data Files needed for this Case Problem: arlogo.png, historytxt.css, lincoln01.png-lincoln10.png, lincolntxt.htm, modernizr-1.5.js American Rhetoric Professor Annie Chiu teaches rhetoric and history at White Sands College. She has asked for your help in designing a companion Web site for her course in American Rhetoric. She's given you the content and graphics for a sample page con- taining an excerpt from the second inaugural address by Abraham Lincoln. She wants you to create an elastic layout for the Web page so that it appears the same for different font sizes. Figure 4-78 shows a preview of the page you'll design for her. Lincoln page Give Me Liberty or Give Me Death Atle Woman A House Divided Abraham Lincoln The Gettysburg Address Abraham Lincoln The Second inaugural Abraham Lincoln Crow of Gold William Jennings Bryan The Man in the Arena Theodore Rooseve The Only Thing We ho Trond Roosevel A Date which w Uve Frana Roosevel Douglas MacArthur Inaugural Addres Ich Bin Ein Seher John Cannedy The Salot or the Bulet Malcom X I Have a Dream Martin Luther King, J. A Time for Choosing Ronald Reagan Tear Down this W Ronald Reagan American Rhetorie Lincoln's Second Inaugural offensest For it must needs be that offenses come; but woe to that man by whom the offense cometh. If we shall suppose that American slavery is one of those offenses which in the providence of God, must needs come, but which having continued through his appointed time, he now wills to remove, and that he gives to both North and South this terrible war, as the woe due to those by whom the offense came, shall we discem therein any departure from those divine attributes which the believers in a living God always ascribe to him? Fondly do we hope- fervently do we pray - that this mighty scourge of war may speedily pass away. Yet, st God wills that st continue until all the wealth piled by the bondsman's two hundred and fifty years of unrequited toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by another dranen with the stroed, as was said three thousand years ago, so still it must be said, "The judgments of the Lord are true and righteous altogether." With malice towand none; with charity for all with firmness in the right, as God gives us to see the right, let us strive on to finish the work we are in to bind up the nation's wounds; to care for him who shall have bore the battle, and for his widow, and his orphan-to do all which may achieve and cherisha just and lasting peace among ourselves, and with all WORLD BECAUSE OF Complete the following: 1. In your text editor, open the historytxt.css and lincolntxt.htm files from the tutorial.04\case1 folder. Enter your name and the date in the comment section of each file. Save the files as history.css and lincoln.htm, respectively. 2. Return to the lincoln.htm file in your text editor and take some time to review the content and structure of the file. Link the document to the history.css style sheet. Close the file, saving your changes. 3. Go to the history.css file in your text editor. Create a style rule to display the header, section, and nav elements as blocks. 4. Set the default padding and margin space for every element to 0 pixels. 5. Define a style rule for the header element to: a) set the background color to the value (51, 51, 51); b) center the contents of the header element; and c) set the width to 55 em. Set the height of the inline image within the header to 4 em. 6. Float the navigation list on the left page margin, setting the width to 15 em and the background color to the value (51, 51, 51). 7. For list items within the navigation list, create a style rule to: a) set the typeface to Century Gothic or sans-serif; b) set the font size to 0.7 em; c) remove the list mark- ers; d) set the line height to 1.4 em; and e) set the left and bottom margins to 1 em and 1.2 em, respectively. 8. For hypertext links within the navigation list, set the text color to the value (212, 212, 212) and remove the underlining. When the user hovers the mouse pointer over these links, change the text color to white. 9. For the speech section of the page, create a style rule to: a) set the background color to the value (212, 212, 212); b) set the width to 40 em and float the section on the left; and c) display the text in a Palatino Linotype, Book Antiqua, Palatino, or serif font. 10. For the h1 heading within the speech section, create a style rule to: a) set the back- ground color to the value (51, 51, 51); b) set the text color to the value (212, 212, 212) and the font size to 2 em; and c) center the text. 11. For the paragraphs within the speech section, set the font size to 0.9 em and the margin size to 1 em. 12. Annie wants to create a drop-cap effect for the first letter in the first line of the first paragraph in the speech section. Using the first-of-type pseudo-class and the first-letter pseudo-element in your style rule selector, create this drop cap by: a) floating the first letter on the left; b) setting the font size and line height to 4 em and 0.8 em, respectively; c) setting the right margin to 0.3 em; d) setting the right and bottom padding to 0.2 em; and e) adding a solid black border 0.02 em in width to the right and bottom edge of the letter. 13. Display the text of the first line of the first paragraph in the speech section in upper- case letters. 14. Next, you'll create the irregular line wrap shown in Figure 4-78. Stack the 10 slices of the Lincoln image by creating a style rule for the inline image elements within the speech section to: a) float each image on the right once the right margin is clear, and b) set the height of each image to 4 em. 15. Add appropriate style comments to your file to document your work and then save your changes. 16. Open the lincoln.htm file in your Web browser. Verify that the layout resembles that shown in Figure 4-78. (Note: Safari for the Macintosh does not at the time of this writing support the first-line pseudo-class with uppercase letters. Also, you might notice a slight difference in the layout with browsers running on the Macintosh, iPhone, or iPad.) 17. Using the Options or Preferences dialog box of your browser, increase and decrease the browser's default font size. Verify that as the font size changes, the layout and size of the inline images in the page change in proportion. APPLY Data Files needed for this Case Problem: arlogo.png, historytxt.css, lincoln01.png-lincoln10.png, lincolntxt.htm, modernizr-1.5.js American Rhetoric Professor Annie Chiu teaches rhetoric and history at White Sands College. She has asked for your help in designing a companion Web site for her course in American Rhetoric. She's given you the content and graphics for a sample page con- taining an excerpt from the second inaugural address by Abraham Lincoln. She wants you to create an elastic layout for the Web page so that it appears the same for different font sizes. Figure 4-78 shows a preview of the page you'll design for her. Lincoln page Give Me Liberty or Give Me Death Atle Woman A House Divided Abraham Lincoln The Gettysburg Address Abraham Lincoln The Second inaugural Abraham Lincoln Crow of Gold William Jennings Bryan The Man in the Arena Theodore Rooseve The Only Thing We ho Trond Roosevel A Date which w Uve Frana Roosevel Douglas MacArthur Inaugural Addres Ich Bin Ein Seher John Cannedy The Salot or the Bulet Malcom X I Have a Dream Martin Luther King, J. A Time for Choosing Ronald Reagan Tear Down this W Ronald Reagan American Rhetorie Lincoln's Second Inaugural offensest For it must needs be that offenses come; but woe to that man by whom the offense cometh. If we shall suppose that American slavery is one of those offenses which in the providence of God, must needs come, but which having continued through his appointed time, he now wills to remove, and that he gives to both North and South this terrible war, as the woe due to those by whom the offense came, shall we discem therein any departure from those divine attributes which the believers in a living God always ascribe to him? Fondly do we hope- fervently do we pray - that this mighty scourge of war may speedily pass away. Yet, st God wills that st continue until all the wealth piled by the bondsman's two hundred and fifty years of unrequited toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by another dranen with the stroed, as was said three thousand years ago, so still it must be said, "The judgments of the Lord are true and righteous altogether." With malice towand none; with charity for all with firmness in the right, as God gives us to see the right, let us strive on to finish the work we are in to bind up the nation's wounds; to care for him who shall have bore the battle, and for his widow, and his orphan-to do all which may achieve and cherisha just and lasting peace among ourselves, and with all WORLD BECAUSE OF Complete the following: 1. In your text editor, open the historytxt.css and lincolntxt.htm files from the tutorial.04\case1 folder. Enter your name and the date in the comment section of each file. Save the files as history.css and lincoln.htm, respectively. 2. Return to the lincoln.htm file in your text editor and take some time to review the content and structure of the file. Link the document to the history.css style sheet. Close the file, saving your changes. 3. Go to the history.css file in your text editor. Create a style rule to display the header, section, and nav elements as blocks. 4. Set the default padding and margin space for every element to 0 pixels. 5. Define a style rule for the header element to: a) set the background color to the value (51, 51, 51); b) center the contents of the header element; and c) set the width to 55 em. Set the height of the inline image within the header to 4 em. 6. Float the navigation list on the left page margin, setting the width to 15 em and the background color to the value (51, 51, 51). 7. For list items within the navigation list, create a style rule to: a) set the typeface to Century Gothic or sans-serif; b) set the font size to 0.7 em; c) remove the list mark- ers; d) set the line height to 1.4 em; and e) set the left and bottom margins to 1 em and 1.2 em, respectively. 8. For hypertext links within the navigation list, set the text color to the value (212, 212, 212) and remove the underlining. When the user hovers the mouse pointer over these links, change the text color to white. 9. For the speech section of the page, create a style rule to: a) set the background color to the value (212, 212, 212); b) set the width to 40 em and float the section on the left; and c) display the text in a Palatino Linotype, Book Antiqua, Palatino, or serif font. 10. For the h1 heading within the speech section, create a style rule to: a) set the back- ground color to the value (51, 51, 51); b) set the text color to the value (212, 212, 212) and the font size to 2 em; and c) center the text. 11. For the paragraphs within the speech section, set the font size to 0.9 em and the margin size to 1 em. 12. Annie wants to create a drop-cap effect for the first letter in the first line of the first paragraph in the speech section. Using the first-of-type pseudo-class and the first-letter pseudo-element in your style rule selector, create this drop cap by: a) floating the first letter on the left; b) setting the font size and line height to 4 em and 0.8 em, respectively; c) setting the right margin to 0.3 em; d) setting the right and bottom padding to 0.2 em; and e) adding a solid black border 0.02 em in width to the right and bottom edge of the letter. 13. Display the text of the first line of the first paragraph in the speech section in upper- case letters. 14. Next, you'll create the irregular line wrap shown in Figure 4-78. Stack the 10 slices of the Lincoln image by creating a style rule for the inline image elements within the speech section to: a) float each image on the right once the right margin is clear, and b) set the height of each image to 4 em. 15. Add appropriate style comments to your file to document your work and then save your changes. 16. Open the lincoln.htm file in your Web browser. Verify that the layout resembles that shown in Figure 4-78. (Note: Safari for the Macintosh does not at the time of this writing support the first-line pseudo-class with uppercase letters. Also, you might notice a slight difference in the layout with browsers running on the Macintosh, iPhone, or iPad.) 17. Using the Options or Preferences dialog box of your browser, increase and decrease the browser's default font size. Verify that as the font size changes, the layout and size of the inline images in the page change in proportion.

Answer rating: 100% (QA)

It seems like youve provided detailed instructions for creating and styling a web page for Professor Annie Chius course on American Rhetoric specifica... View the full answer