html5 plz

128 (147 of 713) B- 100% acific Trails Resort See Chapter 2 for an introduction to the Pacific Trails Resort Case Study. Figure 2.38 shows a site map for the Pacific Trails Resort website. The Home page and Yurts page were created in Chapter 2. You will develop a new version of this website that uses an extenal style sheet to configure text and color. Figure 2.39 depicts the wireframe page layout You have the following tasks: 1. Create a new folder for this Pacific Trails case study 2. Create an external style sheet named pacific.css that configures the color and text for the Pacific Trails website. 3. Modify the Home page to utilize an external style sheet to configure solors and fonts. The new Home page and color swatches are shown in Figure 3.33. 4. Modify the Yurts page to be consistent with the new Home page. 5. Configure centered page layout. Hands-On Practice Case Study Task 1: Create a folder on your hard drive or portable storage device called pacificcss. Copy all the files from your Chapter 2 pacific folder into the pacificcss folder #000033 Pacific Trails Resort #3399CC Enjoy Nature in Lauxury Pacific Trails Resort offers a special lodging experience on the Callfornia North Coast. Relax in serenity with panoramic views of the Pacific Ocean #90C7E3 . Private yurts with decks overlooking the ocean . Activities lodge with fireplace and gift shop . Nightly fine dining at the Overlook Cafe . Heated outdoor pool and whirlpool . Guided hiking tours of the redwoods #507FA3 Pacific Trails Resort 12010 Pacific Trails Road Zephy, CA 95555 888-555-5555 #666666 copy 129 (148 of 713) 100% Website Case Stu Task 2: The External Style Sheet. You will use a text editor to create an external style sheet named pacific.css. Code the CSS to configure the following 1. Global styles for the document (use the body element selector) with background color #FFFFFF, text color #666666, and Verdana, Arial, or any sans-serif font. 2. Styles for the header element selector that configure background color #000033, text color +FFFFFF, and Georgia or any serif font. 3. Styles for the h1 element selector that configure 200% line height. 4. Styles for the nav element selector that display text in bold and has a sky-blue back- ground color (#90c7 E3). 5. Styles for the h2 element selector that configure medium-blue text color (#3399cc) 6. Styles for the dt element selector that configure dark-blue text color (#000033) and 7. Styles for a class named resort that configure dark-blue text color (#000033) and 8. Styles for the footer element selector with a small font size (. 70em) and italic, and Georgia or any serif font. bold font. 1.2em font size. centered text. Save the file as pacific.css in the pacificcss folder. Check your syntax with the CSs validator (htp//jgsaw.w3.org/css-validator). Correct and retest if necessary Task 3: The Home Page. Launch a text editor, and open the index.html file. You will modify this file to apply styles from the pacific.css external style sheet as follows: 1. Add a clink> element to associate the web page with the pacific.css external style sheet file 2. Configure the navigation area. Remove the cb> element from the navigation area, because the CSS will configure the bold font weight. ind the company name ("Pacific Trails Resort") in the first paragraph below the h2 4. Look for the company name ("Pacific Trails Resort") directly above the street address 5. Configure the page footer area. Remove the and i> elements-they ar Save the index.htmi file, and test in a browser. Your page should look similar to the one Configure a span that contains this text. Assign the span element to the resort class. Configure a span that contains this text. Assign the span element to the no longer needed since CSS is now used to configure the text. resort class. shown in Figure 3.33 7. Styles for a class named resort that configure dark-blue text color (#000033) 1. 2em font size. 8. Styles for the footer element selector with a small font size (.70em) and italic, centered text. Save the file as pacific.css in the pacificcss folder. Check your syntax with the CSs validator (http://jgsaw.w3.org/css-validator) Correct and retest if necessary Task 3: The Home Page. Launch a text editor, and open the index.html file. You will moo 1. Add a and elements they are no longer needed since CSS is now used to configure the text. Save the index.html file, and test in a browser. Your page should look similar to the one shown in Figure 3.33 except that your page content will be left-aligned instead of indented from the margins. Don't worry you'll configure your page layout in Task 5 of this case study. Task 4: The Yurts Page. Launch a text editor, and open the yurts.html file. You will modify this file in a similar manner: Add the element, configure the navigation area, and config- ure the page footer area. Delete the strong tags contained within each dt element. Save and test your new yurts.html page. It should look similar to the one shown in Figure 3.34 except for the alignment. Task 5: Center Page Layout with CSS. Modify pacific.css, index.html, and yurts.html to configure page content that is centered with 80% width. Refer to Hands-On Practice 3.9 if DOLL Chapter 3 Configuring Color and Text with CSS 1. Launch a text editor, and open the pacific.css file. Add a style rule for an id named wrapper with width set to 80%, margin-right set to auto, and margin-left set to auto. 2. Launch a text editor, and open the index.html file. Add the HTML code to configure a div element assigned to the id wrapper that "wraps," or contains, the code within the body section. Save and test your index html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 3.33. 3. Launch a text editor and open the yurts.html file. Add the HTML code to configure a div element assigned to the id wrapper that "wraps," or contains, the code within the body section. Save and test your yurts.html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 3.34 Experiment with modifying the pacific.css file. Change the page background color, the font family, and so on. Test your pages in a browser. Isn't it amazing how a change in a single file can affect multiple files when external style sheets are used? Pacific 'Trails Resort The Yurts at Pacific Trails What is yurt? Our luxury yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor, and a roof dome that can be opened How are the yurts furnished? Each yurt is funished with a queen-size bed with down quilt and gas-fired stove. The luxury camping experience also includes electricity and a sink with hot and cold nnig water. Shower and restroom facilities are located n the lodge bring o sense of adventure and some time to relax! Most diess for dhonaine weather with lovers of clothin What should I bring? s aiso pack comfortable waiking shoes and plan to Figure 3.34 New yurts.himl page