Problem

Pacific Trails resort Case StudyIn this chapter's case study you will use the existing...

Pacific Trails resort Case Study

In this chapter's case study you will use the existing Pacific Trails (Chapter 5) website as a starting point to create a new version of the website. The new design is a centered page layout that takes up 80% of the browser viewport. You'll use CSS to configure the new page layout, a background image, and other styles, including font and padding. Figure displays a wireframe with the wrapper div, which contains the other web page elements.

You have six tasks in this case study:

1. Create a new folder for the Pacific Trails Resort website.

2. Edit the pacific.css external style sheet.

3. Update the Home page: index.html.

4. Update the Activities page: activities.html.

5. Update the Yurts page: yurts.html.

6. Configure shadow with CSS3.

Task 1: Create a folder called ch6pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 5 Case Study ch5pacific folder. Copy the ptrbackground.jpg file from the chapter6/starters folder in the student files into your ch6pacific folder.

Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file.

• The body element selector. Add a declaration to display a background image named ptrbackground.jpg. Add a style rule to use Arial, Helvetica, or sans-serif font typeface.

• The wrapper id Selector. Add a new selector for an id named wrapper. Configure the wrapper id to be centered (see Hands-On Practice) with a width of 80%, white background color (#FFFFFF), and a minimum width of 960 pixels.

• The nav element selector: Add a declaration to display 20 pixels of padding on the left side and 5 pixels of padding on the top, bottom, and right sides. Add a declaration to display bold text.

• The content id selector. Add a new selector for an id named content and configure this with 1 pixel of padding on the top and 20 pixels of padding the right, bottom, and left sides.

• The h1, h2, and h3 element selectors. Add a declaration to each of these selectors to display Georgia, Times New Roman, or serif font typeface.

• The resort class selector. Add a declaration to display bold text.

• Configure unordered lists in the content id. Replace the ul element selector with a descendant selector that specifies only ul elements within the content id: #content ul

Then, add the following style rule to configure ul elements within the content id to display list markers inside the element with

list-style-position: inside;

• The contact id selector. Add new selector for an id named contact with a declaration to configure text with 90% font size.

• The footer element selector. Add a new selector for the footer element. Configure 20 pixels of padding, 75% size font, and italic font in the Georgia, Times New Roman, Times, or serif font typeface.

Save the pacific.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. Remove the tags for the b element, the i element, and the small element-they are no longer needed since CSS is now used to configure the text. Save the file.

Task 4: Edit the Activities Page. Launch a text editor and open the activities.html file. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. Remove the tags for the b element, the i element, and the small element-they are no longer needed since CSS is now used to configure the text. Save the file.

Task 5: Edit the Yurts Page. Launch a text editor and open the yurts.html file. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. The Yurts page currently uses a description list. Rework the page content so that the web page uses h3 and paragraph elements instead of the description list. Remove the tags for the strong element, the b element, the i element, and the small element-they are no longer needed since CSS is now used to configure the text. Save the file.

Test your web pages in a browser. Your home page should be similar to the example in Figure.

Task 6: Configure Shadow with CSS. 3 Launch a text editor and open the pacific.css file. Apply a shadow effect to the wrapper id. Add the following styles to the #wrapper selector:

box-shadow: 5px 5px 5px #000033;

Apply a text shadow effect to the level 2 headings. Add the following declaration to the h2 selector:

text-shadow: 1px 1px 1px #ccc;

Save the file. Launch a modern browser such as Safari, Google Chrome, or Firefox and test the home page (index.html) shown in Figure.

Figure The wrapper div contains the other page elements.

Figure The new Pacific Trails home page with centered layout.

Figure The Pacific Trails home page with a shadow effect.

Hands-On Practice

You?ll center a web page in this Hands-On Practice. When complete, your web page will look similar to the one shown in Figure.

You should already have the index.html and trilliumlogo.gif files in your trilliumch6 folder. If not, obtain these files from the chapter6/trillium4 folder.

Launch a text editor and open the index.html file.

1. Edit the embedded CSS, and remove the width and min-width style declarations from the body selector.

2. Edit the embedded CSS, and configure a new selector, an id named container. Add style declarations for the width, min-width, margin-left, and margin-right properties as follows:

#container { margin-left: auto;             margin-right: auto;             width: 80%;             min-width: 700px; }

3. Edit the HTML. Configure a div element assigned to the id container that ?wraps? or contains the code within the body section. Code an opening div tag on a new line after the opening body tag. Assign the div to the id named container. Code the closing div tag on a new line before the closing body tag. Save the file. When you test your index.html file in a browser, it should look similar to the one shown in Figure. The student files contain a sample solution in the chapter6/ trillium5 folder.

Figure The web page is centered with CSS.