ドリル式ホームページの作り方

div#a4内の編集

ドリル式ホームページの作り方TOP  >>  Lesson9〜画像ビュアーの作成〜  >>  div#a4内の編集

div#a4内の編集

div#a4内には、画像とパンくずリスト、そしてコンテンツを配置します。

画像は、サイトが緑ベースなので、緑が入ったシンプルな写真がいいと思います。

<div id="a4">
<p id="b2"><img src="gif/32.gif" alt="境界線" /></p>
<p id="b3">>>ホームページ作成講座TOP</p>
<h2>画像を並べただけの例</h2>
<p class="b5">略</p>
<h2>画像ビュアーの形にした例</h2>
<p class="b5">略</p>
<h2>z-indexを使った例</h2>
<p class="b5">略</p>
</div>

スタイルは特に難しいところはないので、解説はしません。

h2 {
font-size:15px;
color:#494;
margin:20px 0 10px 20px;
border-left:solid 10px #272;
border-bottom:dotted 1px #272;
width:450px;
padding-left:5px;
}
#a4 p#b2 img {
border-bottom:solid 3px #494;
}
#a4 p#b3 {
height:20px;
background:#8c8;
font-size:13px;
line-height:20px;
padding-left:20px;
}
#a4 p.b5 {
font-size:13px;
margin:5px 0 5px 30px;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson9〜画像ビュアーの作成〜

  1. XHTMLの骨格を記述する
  2. divとfloatで骨格を作る
  3. div#a1内の編集
  4. div#a2内の編集
  5. div#a3内の編集
  6. div#a4内の編集
  7. div#a5内の編集・最終調整
  8. 画像viewerを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.