Design Project - Chapter 10

Description of Design Project

EPA FormGwen Gresham has recently been asked to redesign a website for a small business. She has decided to use CSS divs for her page layout. Becuase she has never developed a website with these features before, she decides to look at some other websites for ideas and inspiration.


  1. Connect to the Internet, then goto the weather Channel website as shown in figure 31. (The page in figure 31 can be reached if you Click Here).

  2. View the source code for the page and use the Edit, Find feature to locate div tags used in this site. (Hint: Use "div id" as the search string - "div id" combination is colored blue, below):
    <div class="l-page">
    <div class="l-main l-content" role="main">
    <div id="wx-wrapper">
    <div class="panel-display vegas clearfix " id="front-page">
    <div class="page-header-inner container-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="df195b98-5f4f-41b3-95e7-d2ff2cb63df1" data-module-name="esi_var_in_settings" class="esi_var_in_settings"><script>
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="495444a2-759e-4fe3-94b3-5b4573b9e5f8" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_Hidden" class="wx-adWrapper no_ad_style_defined">
    <div id="WX_Hidden" style="line-height:0;display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="f065e2c9-cc01-4b8d-aa87-c1615c1670ae" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_WindowShade" class="wx-adWrapper no_ad_style_defined" data-in-view-beacon data-beacon-name="WX_WindowShade">
    <div id="WX_WindowShade" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="mayberry clearfix" id="mini-panel-breaking_now_and_cobrand_header_">
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init cobrand_headers" data-twc-controller="twc_cobrand_headers_controller" data-module-name="cobrand_headers" instance="b22b5a16-53f3-493d-a0b2-052633a022ae"><div data-ng-non-bindable="true">
    <div data-wx-co-brand-header>
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init breaking_now" data-twc-controller="twc_breaking_now_controller" data-module-name="breaking_now" instance="e396e991-1175-4ad3-8c74-9e3a18fbec7b"><div data-ng-non-bindable="true"><div data-tb-region="breaking" data-tb-region-item>
    <div data-breaking-now>
    <div id="wx-local-wrap" class="clearfix">
    <div id="bg-gradient">
    <div id="wx-local-bg">
    <div class="header-inner container-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="panel-display panel-1col clearfix" id="mini-panel-main_menu_v0_1">
    <div class="panel-panel panel-col">
    <div><div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="header_main_menu" data-twc-controller="twc_header_main_menu_controller" data-module-name="header_main_menu" instance="fce541cb-00da-45d8-811b-3fc90db36cd5"><nav class="wx-nav-main center-col">
    <div class="wx-subnav-wrap wx-subNav1"
    <div class="wx-subnav-wrap wx-subNav2"
    <div class="wx-subnav-wrap wx-subNav3"
    <div class="wx-subnav-wrap wx-subNav4"
    <div class="wx-subnav-wrap wx-subNav5"
    <div class="wx-subnav-wrap wx-subNav6"
    <div class="wx-subnav-wrap wx-subNav7"
    <div data-from-str="hdr_signin">
    <div data-twc-modal
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init page_notifications" data-twc-controller="twc_page_notifications_controller" data-module-name="page_notifications" instance="3d531e8a-a46b-46d9-aac0-08f91b5752c9"><div data-ng-non-bindable="true"><div data-ng-if="pageNotificationSettings.showNotification" data-page-notification data-alert-class="{{pageNotificationSettings.className}}" data-ng-cloak><div data-ng-bind-html="pageNotificationSettings.message">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div id="wx-header" class="mini-panel-display header-container wx-masthead center-col">
    <div class="header-container-inner container-inner clearfix">
    <div class="header-content-wrap">
    <div class="branding">
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="wx-nav-utility column-content-region header-row-1 clearfix panel-panel">
    <div class="column-content-region-inner panel-panel-inner">
    <div class="panel-pane content width-75 float-left column"
    <div class="pane-content ">
    <div class="header_savedlocations" data-twc-controller="twc_header_savedlocations_controller" data-module-name="header_savedlocations" instance="0e7cb267-efce-43f5-992d-ff2fc462cc9e"><div data-ng-non-bindable="true"><div class="wx-user-locs">
    <div data-user-locations="visibleLocationsBlock.items"
    <div data-other-locations-dropdown class="wx-additional-user-locs"
    <div data-user-locations="otherLocationsBlock.items"
    <div class="panel-pane content width-25 float-left column"
    <div class="pane-content ">
    <div class="search" data-twc-controller="twc_search_controller" data-module-name="search" instance="cc8941bf-7c89-467a-84fe-22422798b491"><div data-ng-non-bindable="true"><section class="unified-search">
    <div data-ng-show="hasResults()">
    <div class="menu" data-ng-cloak>
    <div data-ng-switch="resultType()">
    <div class="animate-switch" data-ng-switch-when="Recent">
    <div class="animate-switch" data-ng-switch-when="Search">
    <div class="animate-switch" data-ng-switch-when="NoResult">
    <div class="animate-switch" data-ng-switch-when="Suppressed">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init social_sharing" data-twc-controller="twc_social_sharing_controller" data-module-name="social_sharing" instance="caaf2dc0-14ff-4681-a7fe-d27c092550a8"><div data-ng-non-bindable="true"><aside class="social-wrapper"
    <div data-twc-social-bar
    <div class="local-wrap-inner center-col">
    <div class="content-row-1 panel-panel clearfix">
    <div class="content-row-1-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="hpdl-container mini-panel-display mini-panel container" data-eq-pts="pane-tablet: 400, pane-desktop: 820">
    <div class="hpdl-container-inner container-inner">
    <div class="column-content-region primary left left-row-1 panel-panel">
    <div class="column-content-region-inner panel-panel-inner">
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div class="current_conditions_hp" data-twc-controller="twc_current_conditions_hp_controller" data-module-name="current_conditions_hp" instance="49852723-fd7b-4b3d-a86e-16179d51ffec"><div data-ng-non-bindable="true"><article data-ng-switch data-on="cchp.status" data-ng-cloak>
    <div data-ng-switch-when="loading" data-preload>
    <div data-ng-switch-when="noLocation">
    <div data-ng-switch-when="error">
    <div data-error-handler="cchp.status" data-error-handler-theme="dark" class="local-suite">
    <div data-ng-switch-when="default" class="wx-weather local-suite">
    <div class="obs-overview" data-ng-click="cchp.goToForecast()">
    <div class="condition-icon" data-wxicon data-sky-code="cchp.obs.getSkyCode()">
    <div class="temperature" aria-label="{{'current_conditions_hp.TEMP' | translate}}">
    <div class="temp-hi-lo">
    <div class="column-content-region secondary middle middle-row-1 panel-panel">
    <div class="column-content-region-inner panel-panel-inner">
    <div class="panel-pane content width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="b308cd59-bc84-4509-8f79-babe5708aaa1" data-module-name="hp_dl_content" class="hp_dl_content"><style type="text/css">#wx-wrapper .panel-display #wx-local-wrap { background-image: url('http://i.imwx.com/images/maps/truvu/map_specnewsdct-116_ltst_4namus_enus_1280x720.jpg');}</style><section class="dl-wrapper">
    <div class="dl-main-wrap wx-default" data-tb-region="home_DL ">
    <div class="dl-content-wrap">
    <div class="dl-hotspot">
    <div class="story-actions no-share">
    <div class="read-more-btn">
    <div id="wx-mid-wrap" class="clearfix center-col">
    <div id="wx-main" class="content-grid-12 panel-panel clearfix">
    <div class="content-container-inner">
    <div class="content-row-4 grid-12 panel-panel clearfix">
    <div class="content-row-4-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="8933dba6-51fc-4d0c-8330-1587eaaa89ae"><div data-ng-non-bindable="true"><div data-remove-pane-padding class="wx-module wx-corsican-small-module" data-tb-region="{{content_media.pageName}}_{{content_media.moduleId}}">
    <div class="wx-list-container">
    <div class="wx-inner" style="" data-vr-contentbox="">
    <div class="wx-image-wrapper">
    <div class="wx-inner wx-ad-container wx-fade-out" data-ng-if="content_media.settings.include_ad && $index==content_media.settings.ad_index" style="" data-vr-contentbox="">
    <div class="wx-image-wrapper">
    <div class="wx-title-wrapper">
    <div class="ng-hide wx-links-sponsored" data-ng-if="content_media.settings.include_ad && $index==content_media.settings.ad_index" id="{{content_media.settings.selectedadpos}}">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="831a20cd-1207-4a0e-ae3f-74ce07c0d76b"><div data-ng-non-bindable="true"><div data-remove-pane-padding class="wx-module wx-corsican-small-module" data-tb-region="{{content_media.pageName}}_{{content_media.moduleId}}">
    <div class="wx-list-container">
    <div class="wx-inner" style="" data-vr-contentbox="">
    <div class="wx-image-wrapper">
    <div class="wx-title-wrapper">
    <div class="wx-inner wx-ad-container wx-fade-out" data-ng-if="content_media.settings.include_ad && $index==content_media.settings.ad_index" style="" data-vr-contentbox="">
    <div class="wx-image-wrapper">
    <div class="ng-hide wx-links-sponsored" data-ng-if="content_media.settings.include_ad && $index==content_media.settings.ad_index" id="{{content_media.settings.selectedadpos}}">
    <div class="content-row-5 grid-12 panel-panel clearfix">
    <div class="content-row-5-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init hc_storm_data" data-twc-controller="twc_hc_storm_data_controller" data-module-name="hc_storm_data" instance="b8f84f2e-0e5b-4026-98d6-28b724d652a3" data-template-file="/sites/all/modules/custom/angularmods/modules/hc_storm_data/templates/hc_storm_data.html">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="9bd61c3e-83d8-4886-b1a5-9d4322e17ecf" data-template-file="/sites/all/modules/custom/angularmods/modules/content_media/templates/media_extended_news_content.html">
    <div class="content-row-6 grid-12 panel-panel clearfix">
    <div class="content-row-6-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="d41fa6fe-9bd9-41c1-ae05-98c3cc61f8e6" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_DriverUnit" class="wx-adWrapper dark-ad" data-in-view-beacon data-beacon-name="WX_DriverUnit">
    <div id="WX_DriverUnit" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="e8f9b0dc-45a8-4e1e-8ad2-9c8503ecd23d" data-template-file="/sites/all/modules/custom/angularmods/modules/content_media/templates/media_news_content.html">
    <div class="content-row-7 grid-12 panel-panel clearfix">
    <div class="content-row-7-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init delivery_units" data-twc-controller="twc_delivery_units_controller" data-module-name="delivery_units" instance="e37c02b3-4953-419c-870a-8ffd8c9c6da8" data-template-file="/sites/all/modules/custom/angularmods/modules/delivery_units/templates/global_delivery_units_template.html">
    <div class="content-row-8-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="ba893337-ff06-4436-a74a-e67bd0cbc10e" data-template-file="/sites/all/modules/custom/angularmods/modules/content_media/templates/media_extended_news_content.html">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init seo_links" data-twc-controller="twc_seo_links_controller" data-module-name="seo_links" instance="9f2cd51a-a2aa-4dba-a330-d9b357101a25"><div data-ng-non-bindable="true"><div class="topic-links-wrapper fifty-fifty">
    <div class="topic-links-container">
    <div class="topic-links-list ">
    <div class="topic-links-container hr-style-override padding-override"><h3 class="topic-links-title">ADDITIONAL COVERAGE</h3><hr><div class="topic-links-list"><h4 class="topic-link"><a href="https://profile.weather.com/#/" data-from-str="section2-1" target="_self" >Activate Weather Alerts</a></h4><h4 class="topic-link"><a href="/weather/radar/interactive/l/l" data-from-str="section2-2" target="_self" >Weather Radar & Maps</a></h4><h4 class="topic-link"><a href="/travel" data-from-str="section2-3" target="_self" >Travel</a></h4><h4 class="topic-link"><a href="/health" data-from-str="section2-4" target="_self" >Health</a></h4><h4 class="topic-link"><a href="/science" data-from-str="section2-5" target="_self" >Science</a></h4><h4 class="topic-link"><a href="/home-garden" data-from-str="section2-6" target="_self" >Home & Garden</a></h4><h4 class="topic-link"
    <div id="wx-rail" class="right-rail sidebar panel-panel grid-12 clearfix">
    <div class="right-rail-inner container-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="6cabf944-45fc-4c41-9f75-a38de647e5e4" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_Top300Variable" class="wx-adWrapper no_ad_style_defined" data-in-view-beacon data-beacon-name="WX_Top300Variable">
    <div id="WX_Top300Variable" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="22703dea-eae5-4711-919f-b397bee56d2f" data-template-file="/sites/all/modules/custom/angularmods/modules/content_media/templates/media_marketing_content.html">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="ad24bd7f-97c1-4e1d-94e6-0646552fcc4a" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_Mid300" class="wx-adWrapper no_ad_style_defined" data-in-view-beacon data-beacon-name="WX_Mid300">
    <div id="WX_Mid300" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init most_popular" data-twc-controller="twc_most_popular_controller" data-module-name="most_popular" instance="ba17376a-1600-493f-a061-6a6839ebe69c" data-template-file="/sites/all/modules/custom/angularmods/modules/most_popular/templates/most_popular.html">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="5e0b519a-3cdd-40ed-902a-f6aa46b3a471" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_PaidSearch" class="wx-adWrapper dark-ad" data-in-view-beacon data-beacon-name="WX_PaidSearch">
    <div id="WX_PaidSearch" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init content_media" data-twc-controller="twc_content_media_controller" data-module-name="content_media" instance="275fd351-79ac-40a6-9eac-eec9b99f71f1" data-template-file="/sites/all/modules/custom/angularmods/modules/content_media/templates/media_marketing_content.html">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="50d9312c-04eb-46db-a97c-abe81838eac6" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_Bot300" class="wx-adWrapper dark-ad" data-in-view-beacon data-beacon-name="WX_Bot300">
    <div id="WX_Bot300" class="wx-module wx-gptADS" style="display:none;">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div data-instance="12bbb5f7-1552-4f0f-ae6b-ec035e9bf8af" data-module-name="admodule" class="admodule">
    <div id="wrapper_WX_Bot3x1" class="wx-adWrapper dark-ad">
    <div id="WX_Bot3x1" class="wx-module wx-gptADS" style="display:none;">
    <div class="footer-inner container-inner panel-panel-inner">
    <div class="panel-pane content module-padding width-100 float-left column"
    <div class="pane-content ">
    <div class="twc-init footer" data-twc-controller="twc_footer_controller" data-module-name="footer" instance="d4613549-5600-427a-9e03-6e8085ff116d"><div data-ng-non-bindable="true">
    <div class="footer-wrapper">
    <div class="footer-social-container center-col">
    <div class="footer-linklist-container center-col">
    <div class="footer-copyright center-col">
    <div class="footer-copyright-text">    .
  3. View the source code for the page and locate the HTML tags that control the CSS page elements.:
    The stylesheets at the top of the last question contain the classes that are used in the <div> sections that have a class="..." in their tag body. These classes define the formatting used in these different <div> sections.
    • <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
    • <link type="text/css" rel="stylesheet" href="http://www.weather.com/sites/acquia-prod/files/css/css_fjJ0g1FWg2aeFuxAaGvHYEbwfOHiUeZXXPaBZhq3XYQ.css" media="all" />
    • <link type="text/css" rel="stylesheet" href="http://www.weather.com/sites/acquia-prod/files/css/css_hVuqgQio--1Ehv8BcDYQGxXIQGhg7GFdviunVjouTZM.css" media="all" />
    • <link type="text/css" rel="stylesheet" href="http://www.weather.com/sites/acquia-prod/files/css/css_Zfl-CUAw3PkPscrg1w1v8Ukrw1atU4Dlpnp-dP5_PJM.css" media="all" />
    • <link type="text/css" rel="stylesheet" href="http://www.weather.com/sites/acquia-prod/files/css/css_xa_zW2abt9xS7F5KS6NWFpVB2Le8PkhaLGKUeEcdqis.css" media="all" />
    • <div id="WX_Hidden" style="line-height:0;display:none;">
    • <div id="WX_WindowShade" class="wx-module wx-gptADS" style="display:none;">
    • <div class="wx-subnav-wrap wx-subNav1" data-ng-mouseover="showMegaMenu('0')" data-ng-mouseout="hideMegaMenu('0')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('1')" data-ng-mouseout="hideMegaMenu('1')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('2')" data-ng-mouseout="hideMegaMenu('2')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('3')" data-ng-mouseout="hideMegaMenu('3')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('4')" data-ng-mouseout="hideMegaMenu('4')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('5')" data-ng-mouseout="hideMegaMenu('5')" style="left: auto; display: none;">
    • <div class="wx-subnav-wrap wx-subNav2" data-ng-mouseover="showMegaMenu('6')" data-ng-mouseout="hideMegaMenu('6')" style="left: auto; display: none;">
    • <style type="text/css">#wx-wrapper .panel-display #wx-local-wrap { background-image: url('http://i.imwx.com/images/maps/truvu/map_specnewsdct-116_ltst_4namus_enus_1280x720.jpg');}</style>
    • <div id="WX_DriverUnit" class="wx-module wx-gptADS" style="display:none;">
      • <div id="WX_Top300Variable" class="wx-module wx-gptADS" style="display:none;">
    • <div id="WX_Mid300" class="wx-module wx-gptADS" style="display:none;">
    • <div id="WX_PaidSearch" class="wx-module wx-gptADS" style="display:none;">
    • <div id="WX_Bot300" class="wx-module wx-gptADS" style="display:none;">
    • <div id="WX_Bot3x1" class="wx-module wx-gptADS" style="display:none;">

  4. Do you see some div tags with either the dimensions or positions specified?:
    • <link rel="alternate" media="only screen and (max-width: 600px)" href="http://m.weather.com/" />
      <!-- The use of dimensions in the tag above is to restrict the media query to screens that are at most 600px wide -->
    • <div class="panel-pane content module-padding width-100 float-left column" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
      <!-- The use of dimensions in the tag above is to create a string (that contains these dimensions). The string can be parsed by a JavaScript routine, and used in the placement of elements on the page, or for some other reason. Embedding JavaScript routines into classes is a feature of frameworks like Bootstrap (which is used in the page), or the web developer can create his/her custom code.-->
    • <div class="panel-pane content module-padding width-100 float-left column" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
      <!-- The above <div> is used repeatedly after this point -->