ネット上のサイトから、よさそうなデザインのサイトを見ながら、ソースを見ずに、そっくり真似て見るという実習です。

で、とりあえずやってみたのですが、グローバルナビをイメージのみで作ってあり、マウスオーバーでイメージが変わるようになっていました。
これは、実習でやったことが無いので、ちょこっとソースを見つつやってみました。

• ナビ1
• ナビ2
• ナビ3

↑こんな感じです。↑

• CSSの例は下記のとおりです。
  #bloggnavi ul {
  width: 301px;
  height: 30px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size:0.1%;
  }
  #bloggnavi ul li a {
  float:left;
  display:block;
  height: 30px;
  background-repeat: no-repeat;
  }
  #bloggnavi ul li.bloggnavi1 a {
  width: 101px;
  background-image:url(images/gnavi_01.gif);
  }
  #bloggnavi ul li.bloggnavi1 a:hover {
  width: 101px;
  background-image:url(images/gnavi_h_01.gif);
  }
  #bloggnavi ul li.bloggnavi2 a {
  width: 101px;
  background-image:url(images/gnavi_02.gif);
  }
  #bloggnavi ul li.bloggnavi2 a:hover {
  width: 101px;
  background-image:url(images/gnavi_h_02.gif);
  }
  #bloggnavi ul li.bloggnavi3 a {
  width: 99px;
  background-image:url(images/gnavi_03.gif);
  }
  #bloggnavi ul li.bloggnavi3 a:hover {
  width: 99px;
  background-image:url(images/gnavi_h_03.gif);
  }
• HTMLの例は、下記のとおりです。
  <div id=”bloggnavi”>
  <ul>
  <li class=”bloggnavi1″><a href=”index.html”>
  ナビ1</a></li>
  <li class=”bloggnavi2″><a href=”index.html”>
  ナビ2</a></li>
  <li class=”bloggnavi3″><a href=”index.html”>
  ナビ3</a></li>
  </ul>
  </div>

※この方法以外に、マウスオーバー時と、そうでない時の画像を縦に並べて、ひとつの画像にして、background-positionで切り替える方法もあるようです。

• カテゴリー型（Yahoo)と、キーワード型（Google)がある。
• カテゴリー型は登録して初めてサイトに載る。
• 8割以上の人がキーワード型で検索している。

• キーワードマッチと被リンク数で決まる。
• 有名なサイトからのリンクのほうが得点が高い。

• 見出しを重要視する。（h1～h5のタグをつける。）
• 重要なキーワードは強調文字にする。(emやstrongのタグをつける。)
• ページの最初のほうに重要なキーワードを記述する。
• 外部CSSを使うなどして、HTMLソースをできるだけ簡潔にする。
• カテゴリー型サイトに登録する。
• リンクを張ってもらうようサイト運営者にお願いする。
• 画像ばかりのページで、代替テキストを書かないと、キーワードが検索ロボットにわからなくなる。

• キーワードをすべてh1タグで囲んだり、画面で見えないような文字を見出しにするなどしない。
• 裏技的なテクニックを使うと、検索エンジンのアルゴリズムの変更で、ある日突然、スパムと認定されてしまう可能性がある。

• CSSの例は下記のとおりです。
  h3 {
  border-left : solid #00ff00
  22px ;
  padding-left : 5px;
  }
• HTMLの例は、下記のとおりです。
  <h3>たとえばこんな感じ</h3>