Week 06

Week 06 – Topics

Create site map
Set naming conventions,
Two & Three Column CSS Layouts
HTML 5
CSS 3

Deliverable: Site map

Discuss Reading:
Chapter 4: “Phase 2: Develop Site Structure” (pg 96-105)
Stylin’ with CSS – Chapter 5: “Basic Page Layout”


Assignments

1) Work by yourself and create a Site Map for the Design Technology Website Design project based on your content outline.

  • The challenge will be creating a site map that depicts the entire structure of the site. It may be difficult to create the map in one page. You may need to break the sections of your site into separate site maps.
  • To give you an idea of the challenge of creating a site map for a large site, here’s a good example:
    Breast Cancer Research Foundation website
  • You may refer to this  site map for a smaller company also:  Monday May Design site map. This example has the numeric numbering.
  • Although the example site map doesn’t include a numbering system, I’d like you to add the organizational/numeric naming for all your pages based on your content outline, and HTML naming for the first level and second level pages.

Take in consideration the following:
With the information now visually represented, start considering organizational options. Should any of your main pages be combined? Should any secondary pages move up to the main level? Would the pages make more sense to the user if grouped differently? Keep thinking like your audience.

Please post the site map as a PDF to a “Week 6″ folder in their “lastname_firstname” folder on the class server. Be sure to have your name on the file. Bring the document with you to our next class.

Deliverable: Site Map

2) Continue work on Apple iPod web page. Using the asset below, complete the technical production for the Apple iPod page. Upload your files to a “Week 6″ folder in their “lastname_firstname” folder. Bring the files with you to our next class.

Images for Apple iPod page

Resource for creating navigation using list tag: Listamatic

3) Assigned Reading
Chapter 4: “Phase 2: Develop Site Structure” (pg 106-116)
Stylin’ with CSS – Chapter 6: “Designing Interface Components”

Before our next class, post answers to the following questions on your class blog.

What are wireframes?
When do you not need to define key user paths?


Discussion

What is a “site map?”
What are the two types of naming conventions that are addressed in the book?


Site maps

A sitemap shows a visual representation of the site’s structure, organization, flow, and grouping of content and information. It communicates, it defines, and it structures. It is a representation of the entire project, from a broad vantage point to many of the most minute of details. It is a chance to view the site structure and organization as a whole.

A sitemap should show as much detail about the relationship between pages as possible. Keep it readable; include only what is necessary. For instance, jumplinks (links within body copy to other parts of the site or another site altogether) are not often shown on a sitemap. The level of detail you show depends on site complexity.

A good rule of thumb is this: If all pages in a section have similar content, require no unique interface or navigation, and have no functionality beyond content, then go for simplicity and represent them as a single icon representing stacked pages on a sitemap. Like pages like these will require only one wireframe and one graphic template for the lot of them.

With the information now visually represented, start considering organizational options. Should any of your main pages be combined? Should any secondary pages move up to the main level? Would the pages make more sense to the user if grouped differently? Keep thinking like your audience.

Why Sitemap?

Many teams balk at the notion of creating a large, potentially unwieldy sitemap and often ask, “Why bother?”

The answer is this: Developing a sitemap allows the creator(s) to develop a conceptual model, providing a mental picture of the site as a whole. It is always helpful for any team to be able to wrap their heads around the structure and organization of the site.

However, it is true that some larger sites may need to stay in an outlined format for ease of modification and efficiency. Also, if your site has fewer than a dozen pages, a sitemap may be superfluous (provided your content outline is very detailed).

Naming Convention

There are two types of naming conventions that should be addressed: organizational/numeric naming and HTML naming. Sitemaps should contain them both, but if they only contain one, be sure to include a key that makes it easy to discern the other naming convention.

Naming Conventions and SEO (Search Engine Optimization)

Naming your website files properly can increase your SEO – Search Engine Optimization and therefore your website ranking. A page’s file name will be the first thing that web search spiders will see when they index your website. Thus, you have to make sure that your file names are highly related to the content of your website. You should have keywords in your file names when possible.

Column CSS Layout with HTML 5 (Apple iPod)

Basic HTML: Three Column Layout
<html>
<head>
<title></title>
</head>

<body>

  <div id="wrapper">

       <div id="header">
            <div id="nav"></div>
       </div>

       <div id="left_side"></div>

       <div id="content"></div>

       <div id="right_side"></div>

       <div id="footer"></div>

  </div>
</body>

</html>
Basic HTML 5: Three Column Layout
<!DOCTYPE html>
<head>
   <title></title>
</head>

<body>

 <div id="wrapper">

        <header>
          <nav></nav>
        </header>

        <aside id="left_side"></aside>

        <div id="content"></div>

        <aside id="right_side"></aside>

      <footer></footer>

  </div>
</body>

</html>
Basic CSS3: Three Column Layout
/* ----- [ HTML 5 Element Display ] ----- */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

/* ----- [ General Elements ] ----- */

* { margin:0;
   padding:0:
}

body {
    font-size: 62.5%;
}

img {
    border: none;
}

#wrapper {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f5f6f7;
}

header {
    width:980px;

}

#left_side {
    width:175px;
    float:left;
    margin-left: 5px;
}

#content  {
    width:596px;
    float:left;
    margin-bottom: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

#right_side{
    width:175px;
    float:right;    
    margin-right: 5px;
}

footer {
    clear:both;
    width: 980px;
    background-color: #666;
}

/* ----- [ Navigational menu ] ----- */

nav {
 width: 980px;
 height: 35px;
}
CSS: Add below code to CSS to make it compatible across browsers
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
Script: Add below script inside HTML head tag to make page compatible with Internet Explorer
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
Rounded corners are created adding the following code in your CSS
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #d8d9da;
HTML 5: Three Column Layout
<!DOCTYPE html>
<head>
<title>Apple iPod</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
</head>

<body>
<div id="wrapper">

<header>
  <div id="top_nav">

  <nav>
      <ul>
         <li><a href="store.html">Store</a></li>
        <li><a href="mac.html">Mac</a></li>
        <li id="on"><a href="mac.html">iPod</a></li>
        <li><a href="iphone.html">iPhone</a></li>
        <li><a href="ipad.html">iPad</a></li>
        <li><a href="itunes.html">iTunes</a></li>
        <li><a href="support.html">Support</a></li>
      </ul>
    </nav>

    <div id="slider"><img src="images/ipod_slider.jpg" width="981" height="182" /></div>
  </div>
</header>

               <aside id="left_side">
                 <div id="left_photo1"><img src="images/photo_left1.jpg" width="159" height="106" />
                   <p><strong>Compare iPod models</strong><br />
                   Four distinct iPod models. Find the one that’s perfect for you. <a href="#">Compare now</a></p>
                <hr />

                <img src="images/photo_left2.jpg" width="159" height="95" />
                <p><strong>iPod Everywhere </strong><br />
                At home. At work. And anyplace in bpetween.<br />
                <a href="#" target="_blank">Learn more</a></p>
                <br />

                 </div>          
               </aside>

               <div id="content">
                 <div id="main_photo"><img src="images/main_photo.jpg" width="596" height="300" /></div>

                 <div id="bottom1"><img src="images/photo_bottom1.jpg" width="171" height="109" border="0" /></div>
                 <div id="bottom2"><img src="images/photo_bottom2.jpg" width="164" height="111" border="0" /></div>
                 <div id="bottom3"><img src="images/photo_bottom3.jpg" width="190" height="115" /></div>
               </div>

         <aside id="right_side">
           <div id="right_photo1"><img src="images/photo_right1.jpg" width="168" height="120" />

           <p>The best way to organize, browse, and play your digital media. <a href="#">Learn more</a></p>

           <hr />

          <p> <strong>iOS 4 Update for iPod touch</strong> <br />
            Download the free update with 100+ new features. <a href="#">Learn more</a></p>

           <hr />
          <p><strong>Games + Apps for iPod touch</strong><br />
          Shop and download games and apps right from your iPod touch. <a href="#">Learn more</a></p></div>
         </aside>

    <footer><img src="images/navigation_bottom.jpg" width="980" height="34" border="0" />
    </footer>

</div>
</body>
</html>
CSS3: Three Column Layout
/* ----- [ HTML 5 Element Display ] ----- */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

/* ----- [ General Elements ] ----- */

* { margin:0;
   padding:0:
}

body {
    font-size: 62.5%;
}

img {
    border: none;
}

#wrapper {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f5f6f7;
}

header {
    width:980px;

}

#left_side {
    width:175px;
    float:left;
    margin-left: 5px;
}

#content  {
    width:596px;
    float:left;
    margin-bottom: 15px;
    margin-right: 10px;
    margin-left: 10px;
}
#content img {
    margin-right: auto;
    margin-left: auto;    
    display: block;
}

#right_side{
    width:175px;
    float:right;    
    margin-right: 5px;
}

footer {
    clear:both;
    width: 980px;
    background-color: #666;
}

/* ----- [ Divs inserted into header ] ----- */

#top_nav {
    width: 980px;
}

#slider {
    margin-top: 20px;
    margin-bottom: 15px;
}

/* ----- [ Divs inserted into content ] ----- */

#main_photo {
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 596px;
    margin-bottom:7px;
}

#bottom1 {
    width: 188px;
    float: left;
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-top: 3px;
    background-color: #FFF;
    margin-right: 12px;
}
#bottom2 {
    width: 188px;
    float: left;
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-top: 3px;
    background-color: #FFF;
    margin-right: 12px;
}

#bottom3 {
    width: 190px;
    float: left;
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* ----- [ Divs inserted into left-side ] ----- */

#left_photo1 {
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-top: 5px;
    padding-right: 3px;
    padding-left: 3px;
    background-color: #FFF;
    height: 415px;
}

#left_photo1 img {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#left_side p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #000;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 10px;
    line-height: 15px;
}

/* ----- [ Divs placed into right-side ] ----- */

#right_photo1 {
    border: 1px solid #d8d9da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #FFF;
    padding-top: 5px;
    padding-right: 3px;
    padding-left: 3px;
    height: 415px;
}

#right_photo1 img {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#right_side p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 15px;
    color: #000;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 10px;
}
#right_side p a{
    color: #28A4D9;
    font-weight: bold;
    text-decoration: none;
}
#right_side p a:hover{
    text-decoration: underline;
}
#left_side p a{
    color: #28A4D9;
    font-weight: bold;
    text-decoration: none;
}
#left_side p a:hover{
    text-decoration: underline;
}

hr {
    width: 150px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: #CCC;
    height: 1px;
    margin-left: 10px;
}

/* ----- [ Vavigational menu ] ----- */

nav {
 padding: 0;
 width: 980px;
 height: 35px;
 border: 1px solid #aaaaaa;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: #aaaaaa;
 margin: 10px 0 0 0;
}

nav ul {
    border: 0;
    list-style-type: none;
    text-align: center;
    width: 980px;
    margin: 0;
}
nav ul li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* ----- [ Properties below add most of the styling and precise positioning for the menu  ] ----- */
nav ul li a {
    background: #aaaaaa;
    width: 98px;
    border-left: 1px solid #ccc;
    border-right: none;
    padding: .7em 1.2em;
    color: #333;
    display: block;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    line-height: 18px;
    text-decoration: none;
}

/* ----- [ Properties below add the hover and the color for the active(on) state  ] ----- */

nav ul li a:hover {
    color: #fff;
    background: #666666;

}
nav a:active {
    background: #333;
    color: #fff;
}
nav li#on a {
    background: #333;
    color: #fff;
}

/* ----- [ This property adds the vertical line at the end of the navigational menu  ] ----- */
.end {
    border-right: 1px solid #ccc;
    height: 35px;
}
Demo page

http://www.everythingaboutweb.com/classes/examples/ipod_final/html5/



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow

Powered by WP Hashcash




About Author

jamie

Instructor for Graphic Design 67