Question
Pacific Trails Resort See Chapter 2 for an introduction to the Pacific Trails Resort case study. Figure 2.38 shows a site map for Pacific Trails.
Pacific Trails Resort
See Chapter 2 for an introduction to the Pacific Trails Resort case study. Figure 2.38 shows a site map for Pacific Trails. The pages were created in earlier chapters. In this case study, you will implement a new two-column CSS page layout. Figure 6.55 displays a wireframe for a two-column page layout with wrapper, header, nav, main content, hero image, and footer areas.
Figure 6.55
Wireframe for a two-column page layout for the Pacific Trails website
Description
You will modify the external style sheet and the Home, Yurts, and Activities pages. Use the Chapter 4 Pacific Trails website as a starting point for this case study. You have five tasks in this case study:
Create a new folder for the Pacific Trails case study.
Modify the style rules in the pacific.css file to configure a two-column page layout, as shown in Figure6.55.
Modify the Home page to implement the two-column page layout, as shown in Figure 6.56.
Modify the Yurts page to be consistent with the Home page.
Modify the Activities page to be consistent with the Home page.
Hands-On Practice Case
Task 1: Create a Folder.Create a folder called pacific6. Copy all of the files from your Chapter 4 pacific4 folder into the pacific6 folder. You will modify the pacific.css file and each web page file (index.html, yurts.html, and activities.html) to implement the two-column page layout, as shown in Figure 6.55. See the new Pacific Trails home page, as shown in Figure 6.56.
Figure 6.56
The new Pacific Trails two-column home page (index.html)
Description
Task 2: Configure the CSS.Open pacific.css in a text editor. Edit the style rules as follows:
Configure the universal selector with a box-sizing: border-box style declaration.
* { box-sizing: border-box; } Modify the wrapper id. Change the background color to blue (#90C7E3), which will be the background behind the navigation area.
Configure the left-column navigation area. Modify the styles for the nav element selector. Keep the style declaration that configures bold text. Remove the background color declaration. The nav area will inherit the background color of the wrapper id. Add style declarations to configure this area to float to the left with a width of 160 pixels. Also configure 20 pixels top padding, 5 pixels right padding, no bottom padding, and 20 pixels left padding.
Configure the :link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #000033 (unvisited hyperlinks), #344873 (visited hyperlinks), and #FFFFFF (hyperlinks with :hover). For example,
nav a:link { color: #000033; } You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure6.56 does not show list markers. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list markers. Also configure the unordered list to have no margin and no left padding.
Configure the right-column main content area. Modify the styles for the main element selector. Add style declarations to configure a white (#FFFFFF) background, 170 pixels of left margin, 1 pixel of top padding, and 1 pixel of bottom padding.
Configure each hero image area (#homehero, #yurthero, and #trailhero) with a 170 pixel left margin.
Configure the footer area. Add style declarations to set a white (#FFFFFF) background color and a 170px left margin.
Add the following CSS to be compatible with most older browsers:
header, nav, main, footer { display: block; } Save the pacific.css file.
Task 3: Modify the Home Page.Open index.html in a text editor and modify the code as follows:
Add the following HTML5 shim code in the head section of the web page after the link element (to assist Internet Explorer 8 and earlier versions):
Configure the left-column navigation area, which is contained within the nav element. Remove any characters that may be present. Code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within
Save the index.html file. It should look similar to the web page shown in Figure 6.56. Remember that validating your HTML and CSS can help you find syntax errors. Test and correct this page before you continue.
Task 4: Modify the Yurts Page.Open yurts.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save your new yurts.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors.
Task 5: Modify the Activities Page.Open activities.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save your new activities.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors.
In this case study, you changed the page layout of the Pacific Trails Resort website. Notice that with just a few changes in the CSS and HTML code, you configured a two-column page layout.
CSS provided:
body { background-color: #FFFFFF;
background-image: url(background.jpg);
color: #666666;
font-family: Verdana, Arial, sans-serif;
}
header { background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0; }
nav { font-weight: bold;
background-color: #90C7E3;
padding: 5px;
}
nav a { text-decoration: none; }
h2 { color: #3399CC;
font-family: Georgia, serif;
}
h3 { color: #000033; }
dt { color: #000033;
font-weight: bold;
}
.resort { color: #000033;
font-size: 1.2em;
}
footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
}
main { padding-left: 20px;
padding-right: 20px;
display: block; }
#homehero { height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#yurthero { height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#trailhero { height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#wrapper { width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
min-width: 700px;
max-width: 1024px;
box-shadow: 3px 3px 3px #333;
}
Index.html
Pacific Trails Resort
Activities.html
Pacific Trails Resort
yurts.html
Pacific Trails Resort
WHAT IS A YURT?!
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started
Web Database Development Step By Step
Authors: Jim Buyens
1st Edition
0735609667, 978-0735609662
