Graphics Programs Reference
In-Depth Information
8. Highlight did you know: and bold the text.
9. Replace the Footer placeholder text with © copyright Cowboy Art Society, 2012 .
10. Delete the index.html page, save the new page as index.html in the local root folder,
and then connect the new page to the cowboy_styles.css style sheet.
11. In the style list, change the container style width to 46 em, and add a solid, thin,
border with the color #666666. (Don't worry if the navigation text appears to move
from the heading div; it will be appropriately placed when you view the page in a
browser.)
12. In the style list, change the #header style background color to #CABB8E.
13. Edit the #sidebar1 style so that the color in the Type category is #CABB8E, the back-
ground color in the Background category is #6A7029, the margins in the Box cat-
egory are 5 px for all borders, the padding is 10px for the Top and Bottom borders
and the width is 10 em.
14. Edit the #content style to have a width of 35em.
15. In the style list, change the #footer style background to #CABB8E.
16. Move the internal styles to the external style sheet, and then save the page and the
style sheet.
17. In the Document window, place the insertion point just below the navigation text,
click the pink box that appears to select it, press the right arrow key to move the
insertion point past the navigation text, and then press the Enter keys to add one line
in the heading div below the navigation text, (the page will look different when you
preview the page in a browser).
18. Edit the #nav style to include 10px of padding on the right side only.
19. Save the page and the style sheet, preview the page in a browser, and then resize the
browser window to confi rm that the size of the Web page does not change with the
size of the browser window.
20. Change the text size in the browser window to Larger to confi rm that the Web page
expands to accommodate the larger text, and then return the text size to its original
setting. The ability of the Web page to expand to display larger text is what makes
elastic pages accessible to people with vision impairments.
21. Duplicate the index.html page as needed to create the remaining pages in the site,
naming the pages to correspond to the fi lenames you used when you created the
navigation links. ( Hint : You can quickly duplicate a selected page by pressing the
Ctrl+D keys and you can quickly rename a selected page by pressing the F2 key and
typing the new fi lename. To see the fi lenames used in the links, click the navigation
text to display the link in the HTML pane of the Property inspector.)
22. In the home page, change the page title to Cowboy Charlie - Home , and then save
the page.
23. Using Word or another word-processing program, open the cc_content.docx docu-
ment located in the Tutorial.04\Case2 folder included with your Data Files, and then
enter the appropriate content in each of the pages you created for the site, including
the page title, the page heading, the main content area, and the sidebar1 div content
(replacing the current did you know facts). Save and close the pages.
24. Preview the site in a browser, click each link and read the text on each page, and
then close the browser.
25. Upload the pages and the stylesheets folder to your remote server, and then preview
the pages over the Internet.
26. Submit the fi nished fi les to your instructor.
Search WWH ::




Custom Search