Information

Chapter9Task

Pacific Trails Resort Case StudyIn this chapter’s case study you will use the Pacific Trails existing website (Chapter8) as a starting point and add an informational table to the Yurts page on the Pacific Trails website. Your new page will be similar toFigure9.15when you have completed this case study.Figure9.15 Yurts page with a table.You have three tasks in this case study: Create a new folder for this Pacific Trails case study. Modify the style sheet (pacific.css) to configure style rules for the new table. Modify the Yurts page to use a table to display information as shown inFigure9.15.Task 1:Create a folder called ch9pacific to contain your Pacific Trails Resort website files. Copy the files from theChapter8Case Study ch8pacific folder into the new ch9pacific folder.Task 2:Configure the CSS.You will add styles to configure the table on the Yurts page. Launch a text editor and open thepacific.cssexternal style sheet file. You will add new style rules above the media queries.Configure the table.Code a new style rule for the table element selector that configures a table with a 1 pixel solid blue border (#3399CC), 80% width, and no cellspacing (useborder-spacing: 0;).Configure the table cells.Code a new style rule for the td and th element selectors that configures 5 pixels of padding and a 1 pixel solid blue border (#3399CC).Center the td content.Code a new style rule for thetdelement selector that centers text.Configure the text class.Notice that the content in the table data cells that contain the text description is not centered. Code a new style rule for a class namedtextthat will override the td style rule and left-align the text.Configure alternate-row background color.The table looks more appealing if the rowshave alternate background colors but is still readable without them. Apply the:nth-of-typeCSS3 pseudo-class to configure the odd table rows with a light blue background color (#F5FAFC).Save thepacific.cssfile.Task 3:Update the Yurts Page.Open theyurts.htmlpage for the Pacific Trails Resort ­website in a text editor.Add a blank line above the closing main tag. Configure the text “Yurt Packages” within an h3 element.Below the new h3 element, configure a paragraph with the following text:A variety of luxury yurt packages are available. Choose a package below and contact us to begin your reservation. We’re happy to build a custom package just for you!You are ready to configure the table. Position your cursor on a blank line under the paragraph and code a table with four rows, four columns, and a visible border. Use the table, th, and td elements. Assign the td elements that contain the detailed descriptions to the class namedtext. The content for the table is as follows:Save youryurts.htmlfile. Launch a browser and test your new page. It should look similar toFigure9.15. If the page does not display as you intended, review your work, validate the CSS, validate the HTML, modify as needed, and test again.

Back To Top