企業系サイトレイアウト実践課題 - 初心者がWEBサイト制作をはじめました！

企業系サイト実践課題（学習開始から１ヶ月）

条件

レイアウトはお手本を参考にする。
文言は与えられるので、それを使う。
WEB素材はなるべく自前で作成する。
HTML＋CSSコーディングは自力で。

結果

素材作成　4時間
ビルボード、ナビゲーション画像はどうにか作成。ただし授業で習った通りにはできていない。ロゴ、マーカー、見出し画像は作成できず。
コーディング　5時間
未完成。レイアウト通りに作れず。一つでもリンクがvisitedになると全てのリンクがvisitedになってしまう。

優先すべき課題とその対策

コーディングはぼんやりとしか分かっておらず、基本が定着していない。そのため応用は全くできない。
→部分部分の学習よりもページを作る演習をすべき。その過程で基本を定着させる。
→過去の授業の演習問題を自力で毎日1題コーディングする。時間が作れない時は模範ソースを読むことで良しとする。
レイアウトする際にボックスやボタンの大きさの検討がつかない。
→validatorを用いて情報収集する。
→教科書に情報あり
photoshopの基本概念がわかっていない。
→授業に沿っておさらい。加えてネットで極初心者向きのページを参考にひとつひとつの概念を理解する。広げても消化できないので授業に沿う内容で。

お手本
赤丸領域は全くできなかった箇所。

f:id:fujiwarashinichi:20140316014312p:plain

作製品
画像にリンクを貼ってあります

ｈｔｍｌ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="uｔf-8">
    <title>企業サイト</title>
    <link href="csｓ/style.csｓ" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <p>
        <em>logo</em>
      </p>
      <div id="header"></div>
      <!--/header-->
      <div id="nav-1">
        <ul>
          <li id="top">
            <a href="#">
              <em>top</em>
            </a>
          </li>
          <li id="sol">
            <a href="#">
              <em>sol</em>
            </a>
          </li>
          <li id="athieve">
            <a href="#">
              <em>athive</em>
            </a>
          </li>
          <li id="partner">
            <a href="#">
              <em>partner</em>
            </a>
          </li>
          <li id="customer">
            <a href="#">
              <em>customer</em>
            </a>
          </li>
          <li id="company">
            <a href="#">
              <em>company</em>
            </a>
          </li>
          <li id="contact">
            <a href="#">
              <em>contact</em>
            </a>
          </li>
        </ul>
      </div>
      <!--/nav-1-->
      <div id="billbord">
        <p>
          <em>billbord</em>
        </p>
      </div>
      <div id="wrapper">
        <div id="content">
          <p class="heading">
            <img src="img/title_about.jpg" alt="弊社について" width="107"height="42" title="">
          </p>
          <div class="section">
            <h3>スタイルｼートによるレイアウトで、
              <br>表現力と機能性が共存したサイトを構築。
            </h3>
            <p>サンプルスタイルｼートカンパニーでは、ウェブサイトの構築に スタイルｼートによるレイアウトを採用しています。そのため、 視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性 とを合わせ持ったウェブサイトを提供することができます。 </p>
            <p class="arrow">
              <a href="#">実績紹介へ</a>
            </p>
          </div>
          <!--/section-->
          <div class="section">
            <h3>ウェブサイトを成功に導く、
              <br>構造設計とインターフェース構築を武器に。
            </h3>
            <p>100件あまりのウェブサイト構築経験から培った企画・開発力を バックボーンにもつ、サンプルスタイルｼートカンパニー。競争に 勝ち抜くための構造設計と、インターフェース構築を武器に、お客様の ウェブサイトを成功に導くお手伝いをします。 </p>
            <p class="arrow">
              <a href="#">実績紹介へ</a>
            </p>
          </div>
          <!--/section-->
        </div>
        <!--/content-->
        <div id="sｉdebar">
          <p class="heading">
            <img src="img/title_news.jpg" alt="ニュース リリース" width="119"height="42" title="">
          </p>
          <dl>
            <dt>2012年4月1日</dt>
            <dd>
              <a href="#">サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</a>
            </dd>
            <dt>2012年4月1日</dt>
            <dd>
              <a href="#">サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</a>
            </dd>
            <dt>2012年4月1日</dt>
            <dd>
              <a href="#">サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</a>
            </dd>
            <dt>2012年4月1日</dt>
            <dd>
              <a href="#">サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</a>
            </dd>
            <dt>2012年4月1日</dt>
            <dd>
              <a href="#">サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</a>
            </dd>
          </dl>
        </div>
        <!--/sｉdebar-->
      </div>
      <!--/wrapper-->
    </div>
    <!--/container-->
    <div id="footer">
      <p>
        <small>Copyright c Sample Stylesheet Company All Rights Reserved.</small>
      </p>
      <div id="nav-2">
        <ul>
          <li >
            <a href="#">トップページ</a>
          </li>
          <li >
            <a href="#">ソリューション</a>
          </li>
          <li >
            <a href="#">実績紹介</a>
          </li>
          <li >
            <a href="#">パートナー</a>
          </li>
          <li >
            <a href="#">カスタマー</a>
          </li>
          <li >
            <a href="#">会社概要</a>
          </li>
          <li class="last">
            <a href="#">お問い合わせ</a>
          </li>
        </ul>
      </div>
      <!--/nav-2-->
    </div>
    <!--/footer-->
  </body>
</html>

ｃｓｓ

@charset "uｔf-8";
html,
body,
div,
ul,
li a {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul { list-style: none }
a { text-decoration: none }
body { background: #F4F4F4 }
#container {
    background: #FFFFFF;
    width: 960px;
    margin: 0 auto;
}
#header {
    width: 960px;
    height: 60px;
    background: #FFFFFF;
    background: url(../img/logo.jpg) no-repeat  10px top;
}
#container p em { visibility: hidden }
#wrapper { overflow: hidden padding:1px 0 }
#billbord {
    margin: 0 0 20px 0;
    width: 960px;
    height: 300px;
    background: url(../img/temp-2.jpg);
}
#billbord em { visibility: hidden }
#content {
    float: left;
    width: 600px;
    padding-left: 8px;
}
.heading { background: #3E7001 }
.section {
    width: 590px;
    padding: 0 0 25px 1em;
    border-bottom: solid 1px #A0A0A4;
}
.section p { line-height: 1.6 }
.section .arrow {
    background: url(../img/arrow.giｆ) no-repeat center left;
    padding-left: 1.5em;
    font-size: 16px;
}
.section a:link { color: #2275FF }
.section a:hover {
    color: #0060FF;
    font-weight: bold;
}
#sｉdebar {
    float: right;
    width: 320px;
    padding-right: 5px;
}
dt {
    text-indent: 1em;
    line-height: 1.7;
    font-weight: bold;
}
dt a { color: #110D0A }
dd {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 3px;
}
dd a:link { color: #333333 }
dd a:visiteｄ { color: #0000FF }
dd a:hover { text-decoration: underline }
#nav-1 {
    width: 960px;
    height: 40px;
}
#nav-1 em { visibility: hidden }
#nav-1 ul { width: 960px }
#nav-1 li {
    float: left;
    width: 137px;
    height: 40px;
}
#nav-1 li a {
    width: 137px;
    height: 40px;
    display: block;
    background-image: url(../img/temp-nav.jpg);
}
li#top a { background-position: left top }
li#top a:hover { background-position: left -50px }
li#sol a { background-position: -137px top }
li#sol a:hover { background-position: -137px -50px }
li#athieve a { background-position: -274px top }
li#athieve a:hover { background-position: -274px -50px }
li#partner a { background-position: -411px top }
li#partner a:hover { background-position: -411px -50px }
li#customer a { background-position: -548px top }
li#customer a:hover { background-position: -548px -50px }
li#company a { background-position: -685px top }
li#company a:hover { background-position: -685px -50px }
li#contact a { background-position: right top }
li#contact a:hover { background-position: right -50px }
#footer {
    height: 170px;
    background: #110D0A;
    color: #FFF;
    clear: both;
}
#footer p {
    text-align: center;
    padding-top: 25px;
}
#nav-2 {
    width: 960px;
    height: 13px;
    margin: 0 auto;
}
#nav-2 ul { overflow: hidden }
#nav-2 li {
    float: left;
    width: 115px;
    height: 20px;
}
#nav-2 li a {
    border-right: solid 1px #fff;
    text-align: center;
    display: block;
    font-size: 14px;
}
#nav-2 li.last a { border-right: none }
#nav-2 li a:link { color: #FFF }
#nav-2 li a:hover { color: #0060FF }

模範ｈｔｍｌ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utｆ-8">
    <title>企業系サイトトップページ</title>
    <link rel="stylesheet" href="csｓ/style.csｓ">
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h1 id="logo">
          <img src="img/logo.jpg" alt="サンプルスタイルｼートカンパニー" width="290" height="38">
        </h1>
        <ul id="nav">
          <li id="top">
            <a href="#">トップページ</a>
          </li>
          <li id="sol">
            <a href="#">ソリューション</a>
          </li>
          <li id="ach">
            <a href="#">実績紹介</a>
          </li>
          <li id="par">
            <a href="#">パートナー</a>
          </li>
          <li id="cus">
            <a href="#">カスタマー</a>
          </li>
          <li id="com">
            <a href="#">会社概要</a>
          </li>
          <li id="con">
            <a href="#">お問い合わせ</a>
          </li>
        </ul>
      </div>
      <!-- /#header -->
      <div id="content">
        <h2 id="billbord">あなたにとっての最高のパートナーである ために</h2>
        <div id="wrapper">
          <div id="about">
            <h3>
              <img src="img/title_about.jpg" alt="弊社について" width="107"height="42">
            </h3>
            <div class="section">
              <h4>
                <img src="img/section_01.jpg" alt="スタイルｼートによるレイア ウトで、表現力と機能性がきょうぞんしたサイトを構築。" width="292" height="38">
              </h4>
              <p>サンプルスタイルｼートカンパニーでは、ウェブサイトの構築にスタイﾙシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力 だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを 提供することができます。</p>
              <p class="link">
                <a href="#">ソリューションへ</a>
              </p>
            </div>
            <!-- /.section -->
            <div class="section">
              <h4>
                <img src="img/section_02.jpg" alt="ウェブサイトを成功に導く、 構造設計とインターフェース構築を武器に。" width="297" height="38">
              </h4>
              <p>100件あまりのウェブサイト構築経験から培った企画・開発力を バックボーンにもつ、サンプルスタイルｼートカンパニー。競争に勝ち抜くための 構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導く お手伝いをします。</p>
              <p class="link">
                <a href="#">実績紹介へ</a>
              </p>
            </div>
            <!-- /.section -->
          </div>
          <!-- /#about -->
          <div id="sｉdebar">
            <h3>
              <img src="img/title_news.jpg" alt="ニューｽリリーｽ" width="119" height="42">
            </h3>
            <dl>
              <dt>
                <a href="#">2012年4月1日</a>
              </dt>
              <dd>サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</dd>
              <dt>
                <a href="#">2012年4月1日</a>
              </dt>
              <dd>サンプルスタイﾙシートカンパニーのウェブサイトが リニューアルしました。</dd>
              <dt>
                <a href="#">2012年4月1日</a>
              </dt>
              <dd>サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</dd>
              <dt>
                <a href="#">2012年4月1日</a>
              </dt>
              <dd>サンプルスタイﾙシートカンパニーのウェブサイトが リニューアルしました。</dd>
              <dt>
                <a href="#">2012年4月1日</a>
              </dt>
              <dd>サンプルスタイルｼートカンパニーのウェブサイトが リニューアルしました。</dd>
            </dl>
          </div>
          <!-- /#sｉdebar -->
        </div>
        <!-- /#wrapper -->
      </div>
      <!-- /#content -->
    </div>
    <!-- /#container -->
    <div id="footer">
      <p>
        <small>Copyright c Sample Stylesheet Company All Rights Reserved.</small>
      </p>
      <ul class="nav">
        <li>
          <a href="#">トップページ</a>
        </li>
        <li>
          <a href="#">ソリューション</a>
        </li>
        <li>
          <a href="#">実績紹介</a>
        </li>
        <li>
          <a href="#">パートナー</a>
        </li>
        <li>
          <a href="#">カスタマー</a>
        </li>
        <li>
          <a href="#">会社概要</a>
        </li>
        <li class="last">
          <a href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
    <!-- /#footer -->
  </body>
</html>

模範ＣＳＳ

@charset "utｆ-8";
/* reset 
---------------------------------------------*/
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギﾉ角ゴ Pro W3", Meiryo, "メイリｵ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
ul { list-style: none }
img {
    border: none;
    vertical-align: top;
}
a {
    color: #039;
    text-decoration: none;
}
a:visiteｄ { color: #333 }
a:hover { color: #06C }
/* layout 
---------------------------------------------*/
body {
    font-size: 16px;
    color: #333;
    background: #F4F4F4 url(../img/body_bg.jpg) left top repeat-x;
}
#container {
    width: 960px;
    margin: 0 auto;
    background: #FFF;
    overflow: hidden;
}
#content { overflow: auto !important }
#wrapper {
    position: relative;
    overflow: hidden;
}
#about {
    width: 590px;
    float: left;
}
#sidebaｒ {
    width: 290px;
    float: right;
    padding-left: 20px;
    border-left: 1px dotted #999;
}
#footer {
    clear: both;
    height: 120px;
    color: #FFF;
    padding: 20px;
    background: #333;
}
/* #logo & #nav
---------------------------------------------*/
#logo {
    margin: 17px 0 0 18px;
    margin-bottom: 18px;
}
#nav {
    width: 960px;
    height: 43px;
    background: #000 url(../img/btn.jpg) left top no-repeat;
}
#nav li {
    float: left;
    display: inline; /* IE6対策 */
}
#nav li a {
    width: 137px;
    height: 43px;
    display: block;
    text-indent: -999em;
}
#nav li#top a:hover { background: url(../img/btn.jpg) left -43px }
#nav li#sol a:hover { background: url(../img/btn.jpg) -137px -43px }
#nav li#ach a:hover { background: url(../img/btn.jpg) -274px -43px }
#nav li#par a:hover { background: url(../img/btn.jpg) -411px -43px }
#nav li#cus a:hover { background: url(../img/btn.jpg) -548px -43px }
#nav li#com a:hover { background: url(../img/btn.jpg) -685px -43px }
#nav li#con a:hover { background: url(../img/btn.jpg) -822px -43px }
/* #content
---------------------------------------------*/
#content h2#billbord {
    width: 920px;
    height: 300px;
    margin: 10px auto 0 auto;
    background: url(../img/bill.jpg) no-repeat left -260px;
    text-indent: -999em;
}
#about h3,
#sidebaｒ h3 {
    margin-bottom: 1px;
    color: #FFF;
    background: #3E7001 url(../img/title_bg.jpg) left top repeat-x;
}
#about .section {
    margin: 16px 16px  0 18px;
    border-bottom: 1px solid #ccc;
}
#about .section p {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 10px 0;
}
#about .section p.link {
    background: url(../img/arrow.giｆ) left center no-repeat;
    padding-left: 20px;
}
#about .section .link a:link,
#about .section 
.link a:visiteｄ { color: #0060ff }
/* #sidebaｒ
---------------------------------------------*/
#sidebaｒ dl { margin: 16px 18px 0 18px }
#sidebaｒ dt {
    font-size: 14px;
    font-weight: bold;
    margin: 14px 0 6px 0;
    color: #8E1E1A;
}
#sidebaｒ dd {
    font-size: 13px;
    line-height: 1.5;
    margin-left: 1em;
}
#sidebaｒ dt a:link { color: #B42907 }
#sidebaｒ dt a:visiteｄ { color: #C97B36 }
#sidebaｒ dt a:hover { color: #4675B4 }
/* #footer
---------------------------------------------*/
#footer p {
    color: #CCC;
    font-size: 12px;
    text-align: center;
}
#footer ul.nav {
    width: 960px;
    margin: 20px auto;
    font-size: 13px;
    text-align: center;
}
#footer li {
    display: inline; /* テキストリンクの横並び */
}
#footer li a:link,
#footerli a:visiteｄ {
    color: #FFF;
    padding: 0 8px;
    border-right: 1px solid #FFF;
}
#footer li.last a { border-right: none }
#footer li a:hover { color: #FC0 }