Note Carefully before answering : This is from the 10th edition of Web Development and Design Foundations with HTML5 (Subscription), 10th Edition

The answers that I'm seeing is from the 9th edition and other previous editions.

Chapter 6 requires two column page layout for Path of Light studio.

See Chapter 2 for an introduction to the Path of Light Yoga Studio case study. Figure 2.44 shows a site map for the Path of Light Yoga Studio. In this case study, you will implement a new two-column CSS page layout for the Path of Light Yoga Studio. Figure 6.66 displays a wireframe for a two-column page layout with a wrapper, header, navigation, main content, and footer area.

Figure6.66 Wireframe for a two-column page layout for the Path of Light Yoga Studio website

You will modify the external style sheet and the Home, Classes, and Schedule pages. Use the Chapter 4 Path of Light Yoga Studio website as a starting point for this case study. You have five tasks in this case study:

1. Create a new folder for the Path of Light Yoga Studio case study.

2. Modify the style rules in the yoga.css file to configure a two-column page layout, as shown in Figure 6.66.

3. Modify the Home page (Figure 6.67) to implement the two-column page layout.

   Figure 6.67 The new Path of Light Yoga Studio two-column home page (index.html)

   Figure 6.67 Full Alternative Text

4. Modify the Classes page (Figure 6.69) to implement the two-column content page layout, as shown in Figure 6.68.

   Figure 6.68 Path of Light Yoga Studio content page layout

   Figure 6.68 Full Alternative Text

   Figure 6.69 The new Path of Light Yoga Studio two-column Classes page

   Figure 6.69 Full Alternative Text

5. Modify the Schedule page (Figure 6.70) to be consistent with the Classes page.

   Figure 6.70 The new Path of Light Yoga Studio Schedule page.

   Figure 6.70 Full Alternative Text

Hands-On Practice Case

• TASK 1: THE WEBSITE FOLDER. Create a folder called yoga6. Copy all of the files from your Chapter 4 yoga4 folder into the yoga6 folder. Copy the yogadoor2.jpg file from the chapter6/starters/yoga folder into your yoga6 folder. You will modify the yoga.css file and each web page file (index.html, classes.html, and schedule.html) to implement the two-column page layout shown in Figure 6.66. See the new Path of Light Yoga Studio home page in Figure 6.67.

• TASK 2: CONFIGURE THE CSS. Open yoga.css in a text editor. Edit the style rules as follows:

  1. Configure the universal selector with a box-sizing: border-box style declaration.

     * { box-sizing: border-box; }

  2. Edit the styles for the wrapper id. Change min-width to 1200px. Change max-width to 1480px.

  3. Configure the left-column navigation area. Modify the styles for the nav element selector. Remove the text-align 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.

  4. Configure the navigation hyperlinks to look like buttons. Well set up the CSS in this step.

     1. Edit the styles for the nav a selector. Configure new styles to use block display, centered text, a 3 pixel gray (#CCCCCC) outset border, 1em padding, and a 1em bottom margin.

     2. Configure the :link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #3F2860 (unvisited hyperlinks), #497777 (visited hyperlinks), and #A26100 (hover). Also configure a 3 pixel inset #333333 border for hyperlinks in the hover state.

        nav a:link { color: #3F2860; } nav a:visited { color: #497777; } nav a:hover { color: #A26100; border: 3px inset #333333; }

  5. You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure 6.65 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 left padding.

  6. Edit the styles for the main element selector. Add new style declarations to configure a 170 pixel left margin and 1em top padding.

  7. Remove the img element selector and style declarations.

  8. Configure a new class named floatleft that floats to the left with right margin set to 4em and bottom margin set to 1em.

  9. Edit the styles for the #hero selector. Remove the text-align style declaration. Configure 1em top and bottom padding.

  10. Configure styles for a new class named clear with a clear: both; style declaration.

  11. Configure a style rule for a class named onehalf. Set left float, 50% width, 2em left padding, and 2em right padding.

  12. Configure a style rule for a class named onethird. Set left float, 33% width, 2em left padding, and 2em right padding.

  13. Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, purple (#40407A) text color for the :link and :visited pseudo-classes, and white (#FFFFFF) text color for the :hover pseudo-class.

  Save the yoga.css file.

• TASK 3: MODIFY THE HOME PAGE. Open index.html in a text editor and modify the code as follows:

  1. Configure the Path of Light Yoga Studio text in the header area to be a hyperlink to the Home page (index.html).

  2. Rework the navigation area. Remove any characters that may be present. Configure an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within

  3. tags.

  4. Edit the img tag. Remove the align=right attribute. Assign the img tag to the class named floatleft. Change the value of the src attribute to yogadoor2.jpg.

  5. Edit the div element that contains the address information. Assign the div to the class named clear.

  Save the index.html file. It should look similar to the web page shown in Figure 6.67. 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 CLASSES PAGE. Open classes.html in a text editor and modify the code as follows.

  1. Configure the header area and navigation hyperlinks in the same manner as the home page.

  2. Move the div assigned to the id="hero" below the description list; just above the closing tag for the main element.

  3. Examine the wireframe in Figure 6.68 and notice that there are three sections within the main element. Remove the tags that configure the description list from the page. Also remove the strong tags. Notice the text content is a series of yoga class titles and yoga class descriptions. Configure each yoga class title within an h3 element. Configure each yoga class description within a paragraph element. Code a section element to contain each yoga class title and yoga class description pair. Assign each section to the CSS class named onethird.

  Save your new classes.html page and test it in a browser. It should look similar to Figure 6.69. Use the CSS and HTML validators to help you find syntax errors.

• TASK 5: MODIFY THE SCHEDULE PAGE. Open schedule.html in a text editor and modify the code as follows.

  1. Configure the header area and navigation hyperlinks in the same manner as the home page.

  2. Move the div assigned to the id="hero" below the second unordered list; just above the closing tag for the main element.

  3. View the wireframe in Figure 6.68 and notice that there are three sections within the main element. This web page is a little different, It will have only two sections. Use Figure 6.69 as a guide. Code a section element to contain each pair of h3 and ul elements. Assign each section element to the CSS class named onehalf.

  Save your new schedule.html page and test it in a browser. It should be similar to Figure 6.70. Use the CSS and HTML validators to help you find syntax errors.

  In this case study, you changed the page layout of the Path of Light Yoga Studio website. Notice that with just a few changes in the CSS and HTML code, you configured a two-column page layout.