HCI: Laboratory Activity #8 - Lists, Text, and Navigation using CSS

HTML List Refresher

There are three basic types of HTML lists. Each presents content in a slightly different way based on its type and the context:

• The ordered list is an indented list that displays numbers or letters before each list item. The ordered list is surrounded by <ol> and </ol> tags and list items are enclosed in the <li></li> tag pair. This list type is often used to display numbered steps or levels of content.

• The unordered list is an indented list that displays a bullet or other symbol before each list item. The unordered list is surrounded by <ul> and </ul> tags, and list items are enclosed in the <li></li> tag pair. This list type is often used to provide a visual cue to show that brief, yet specific, bits of information will follow.

• A definition list is often used to display terms and their meanings, thereby providing information hierarchy within the context of the list itself—much like the ordered list but without the numbering. The definition list is surrounded by <dl> and </dl> tags with <dt> and </dt> tags enclosing the term, and <dd> and </dd> tags enclosing the definitions.

Part A

#1

<html>
  <head>
    <title>List Test</title>
    <style type="text/css">
      ul {
         background-color: #6666ff;
         border: 1px solid #000000;
         width:100px;
      }
      li {
         background-color: #cccccc;
         border: 1px solid #ffff00;
      }
    </style>
  </head>

  <body>
    <h1>List Test</h1>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
      <li>Item #3</li>
    </ul>
  </body>
</html>

<html>

  <head>
    <title>CSS Image Map Example</title>
    <style type="text/css">
    #theImg {
       width:500px;
       height:375px;
       background:url(tea_shipment.jpg) no-repeat;
       position:relative;
       border: 1px solid #000000;
    }
    #theImg ul {
       margin:0px;
       padding:0px;
       list-style:none;
    }
    #theImg a {
       position:absolute;
       text-indent: -1000em;
    }
    #theImg a:hover {
       border: 1px solid #ffffff;
    }
    #ss a {
       top:0px;
       left:5px;
       width:80px;
       height:225px;
    }
    #gn a {
       top:226px;
       left:15px;
       width:70px;
       height:110px;
    }
    #ib a {
       top:225px;
       left:85px;       width:60px;
       height:90px;
    }
    #iTEA1 a {
       top:100px;
       left:320px;
       width:178px;
       height:125px;
    }
    #iTEA2 a {
       top:225px;
       left:375px;
       width:123px;
       height:115px;
    }
    </style>
  </head>
  <body>
     <div id="theImg">
     <ul>
     <li id="ss"><a href="[some URL]"
         title="Sugarshots">Sugarshots</a></li>
     <li id="gn"><a href="[some URL]"
         title="Golden Needle">Golden Needle</a></li>
     <li id="ib"><a href="[some URL]"
         title="Irish Breakfast">Irish Breakfast</a></li>
     <li id="iTEA1"><a href="[some URL]"
         title="IngenuiTEA">IngenuiTEA</a></li>
     <li id="iTEA2"><a href="[some URL]"
         title="IngenuiTEA">IngenuiTEA</a></li>
     </ul>
   </div>
  </body>
</html>

Part B

<html>

  <head>
    <title>About Us</title>
    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #nav {
         width:150px;
         float:left;
         margin-top:12px;
         margin-right:18px;
      }
      #content {
         width:550px;
         float:left;
      }    </style>
  </head>

  <body>
    <div id="nav">
    <ul>
      <li><a href="#">Mission</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Executive Team</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content">
      <h1>About Us</h1>
      <p>On the introductory pages of main sections, it can be useful
      to repeat the secondary navigation and provide more context,
      such as:</p>
      <ul>
      <li><a href="#">Mission</a>: Learn more about our corporate
      mission and philanthropic efforts.</li>
      <li><a href="#">History</a>: Read about our corporate history
      and learn how we grew to become the largest widget maker
      in the country.</li>
      <li><a href="#">Executive Team</a>: Our team of executives makes
      the company run like a well-oiled machine (also useful for
      making widgets).</li>
      <li><a href="#">Contact Us</a>: Here you can find multiple
      methods for contacting us (and we really do care what you
      have to say).</li>
      </ul>
    </div>
  </body>
</html>

#4 Revise #3

Styling the Single-Level Vertical Navigation

#nav ul {
   list-style: none;
   margin: 12px 0px 0px 0px;;
   padding: 0px;
}

#nav li {
border-bottom: 1px solid #ffffff;
}

#nav li a:link, #nav li a:visited {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #628794;
   color: #ffffff;
}

#5 Revise #4

Mouse Hover

#nav li a:hover, #nav li a:active {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #6cac46;
   color: #000000;
}

#6 Multilevel Vertical Navigation

<ul>
  <li><a href="#">Mission</a></li>
  <li><a href="#">History</a></li>
  <li><a href="#">Executive Team</a>
     <ul>
     <li><a href="#">» CEO</a>
     <li><a href="#">» CFO</a>
     <li><a href="#">» COO</a>
     <li><a href="#">» Other Minions</a>
     </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

#7 Revise #6

<html>
  <head>
    <title>About Us</title>
    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #nav {
         width:150px;
         float:left;
         margin-top:12px;
         margin-right:18px;
      }
      #content {
         width:550px;
         float:left;
      }
      #nav a {         text-decoration: none;
      }
      #content a {
         text-decoration: none;
         font-weight: bold;
      }
      #nav ul {
         list-style: none;
         margin: 12px 0px 0px 0px;
         padding: 0px;
      }
      #nav ul li {
         border-bottom: 1px solid #ffffff;
      }
      #nav ul li a:link, #nav ul li a:visited {
         font-size: 10pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 3px;
         background-color: #628794;
         color: #ffffff;
      }
      #nav ul li a:hover, #nav ul li a:active {
         font-size: 10pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 3px;
         background-color: #c6a648;
         color: #000000;
      }
      #nav ul ul {
         margin: 0px;
         padding: 0px;
      }
      #nav ul ul li {
         border-bottom: none;
      }
      #nav ul ul li a:link, #nav ul ul li a:visited {
         font-size: 8pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 18px;
         background-color: #628794;
         color: #ffffff;
      }
      #nav ul ul li a:hover, #nav ul ul li a:active {
         font-size: 8pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 18px;
         background-color: #c6a648;         color: #000000;
      }
    </style>
  </head>

  <body>
    <div id="nav">
    <ul>
      <li><a href="#">Mission</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Executive Team</a>
         <ul>
         <li><a href="#">» CEO</a></li>
         <li><a href="#">» CFO</a></li>
         <li><a href="#">» COO</a></li>
         <li><a href="#">» Other Minions</a></li>
         </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content">
      <h1>About Us</h1>
      <p>On the introductory pages of main sections, it can be useful
      to repeat the secondary navigation and provide more context,
      such as:</p>
      <ul>
      <li><a href="#">Mission</a>: Learn more about our corporate
      mission and philanthropic efforts.</li>
      <li><a href="#">History</a>: Read about our corporate history
      and learn how we grew to become the largest widget maker
      in the country.</li>
      <li><a href="#">Executive Team</a>: Our team of executives makes
      the company run like a well-oiled machine (also useful for
      making widgets).</li>
      <li><a href="#">Contact Us</a>: Here you can find multiple
      methods for contacting us (and we really do care what you
      have to say.</li>
      </ul>
    </div>
  </body>
</html>

Part C

#8 Creating Horizontal Navigation with CSS

<html>
  <head>
    <title>ACME Widgets LLC</title>    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #header {
         width: auto;
      }
      #logo {
         float:left;
      }
      #nav {
         float:left;
      }
      #nav ul {
         list-style: none;
         display: inline;
      }
      #nav li {
         display: inline;
      }
      #content {
         width: auto;
         float: left;
         clear: left;
      }
      #content a {
         text-decoration: none;
         font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="header">
       <div id="logo">
          <img src="acmewidgets.jpg" alt="ACME Widgets LLC" />
       </div>
       <div id="nav">
          <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Press</a></li>
          </ul>
       </div>
    </div>
    <div id="content">
       <p><strong>ACME Widgets LLC</strong> is the greatest widget-maker
       in all the land.</p>
       <p>Don't believe us? Read on...</p>
       <ul>
       <li><a href="#">About Us</a>: We are pretty great.</li>       <li><a href="#">Products</a>: Our products are the best.</li>
       <li><a href="#">Support</a>: It is unlikely you will need support,
       but we provide it anyway.</li>
       <li><a href="#">Press</a>: Read what others are saying (about how
       great we are).</li>
       </ul>
    </div>
  </body>
</html>

#9 Revise #8

#nav {
   float:left;
   margin: 85px 0px 0px 0px;
   width: 400px;
   background-color: #628794;
   border: 1px solid black;
}

#nav ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   display: inline;
}

#nav li {
display: inline;
line-height: 1.8em;
}

#nav ul li a:link, #nav ul li a:visited {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: 7px 10px 7px 10px;
   background-color: #628794;
   color: #ffffff;
}
#nav ul li a:hover, #nav ul li a:active {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: px 10px 7px 10px;
   background-color: #c6a648;
   color: #000000;
}

HCI

Huwebes, Pebrero 7, 2019

Laboratory Activity #8 - Lists, Text, and Navigation using CSS

HTML List Refresher

Walang komento:

Mag-post ng isang Komento