Problem

Pacific Trails Resort Case StudyIn this chapter’s case study you will use the Pacific Trai...

Pacific Trails Resort Case Study

In this chapter’s case study you will use the Pacific Trails existing website (Chapter 6) as a starting point to create a new version of the website that uses a two-column page layout. Figure displays a wireframe with the new layout.

You have three 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. Edit the Home page (index.html), Yurts page (yurts.html), and Activities page (activities.html) to configure the navigation hyperlinks within an unordered list.

Task 1: Create a folder called ch7pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 6 Case Study ch6pacific folder.

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

• The wrapper id selector. Change the background color from white (#FFFFFF) to blue (#90C7E3).

• The nav element selector. This is the area that will float on the page. Remove the background-color property—the nav area will pick up the background color of the wrapper id. Change the top padding to 20 pixels. Configure left float and a width of 160 pixels.

• The content id selector. Modify the style declarations to configure a white (#FFFFFF) background, 190 pixels of left margin, and change the left padding to 30px.

• Configure the content. Create a new style rule that causes the images in the content id (#content img) to float to the left and display with 20 pixels of right padding.

• The footer element selector. Modify the styles to configure a 190 pixel left margin and white (#FFFFFF) background color.

• Configure the navigation area. Use descendant selectors to configure the unordered list and anchor elements within the nav element.

• Style the unordered list. Configure the ul element selector with no list markers, zero margin, zero left padding, and 1.2 em font size.

• Remove the underline from navigation anchor tags. Configure the a element selector to display text without an underline.

• Style unvisited navigation hyperlinks. Configure the :link pseudo-class with navy blue text color (#000033).

• Style visited navigation hyperlinks. Configure the :visited pseudo-class with dark blue text color (#344873).

• Style interactive hyperlinks. Configure the :hover pseudo-class with white text color (#FFFFFF).

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

Task 3: Edit the Web Pages. Launch a text editor and open the index.html file. Configure the navigation hyperlinks using an unordered list. Remove the special characters. Save the file. Modify the yurts.html and activities.html files in a similar manner.

Test your web pages in a browser. Your home page should be similar to the example in Figure with a two-column page layout!

Figure Pacific Trails two-column page layout