速攻HTMLの進め方

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 進め方について


速攻HTML

第5章速攻HTMの進め方について

|→ ウェブページの土台を作る


◆ 1週間でマスターすることを目標として進めます


第5章速攻HTMLへようこそ。 今までとは趣を変え、HTMLを速攻できる章にしました。


必要なものは、テキストファイルを作成するメモ帳と画像編集ツールです。メモ帳はシステム標準で
インストールされていますので、問題無いと思います。


画像編集ツールは画像を切ったり貼ったりする為に使用します。多分、お持ちではないかと思います。


● 進め方


 @ HTMLとスタイルシートを並行して進めます。また、後々の為、スタイルシートは外出ファイルとします。


 A サンプルサイトを順番に少しずつ作成して、最後には完成したものが残る様な進め方です。


 B 必要な画像ファイルもサンプルで用意してあります。


 C サンプルサイトは 「 富士河口湖の四季 」 で、 内容は架空のもので、ページ間の内容も
   整合していません。


   トップページから個別の2個のページへリンクする構成です。トップメニューから遷移させます。
   トップメニューの1個は、閲覧者からサイト管理者宛てのメール送信に使っています。


  


● ファイル名や拡張子


 ・index.html : トップページのhtmlソースです。


 ・about.html : 湖畔工房についてのページhtmlソースです。:工房や周辺案内です。


 ・event.html : イベント案内ページhtmlソースです。  :季節のイベントの案内です。


 ・title.gif  : トップページ最上部の画像
 ・top.gif  : トップページ中央部の画像
 ・pic1.gif  : 湖畔工房ページの最初の画像
 ・pic2.gif  : 湖畔工房ページの2番目の画像
 ・pic3.gif  : 湖畔工房ページの最後の画像
 ・mark.gif : 湖畔工房ページの見出しもマーク
 ・back.gif : 見易さ考慮して背景に模様をつける為に使用


 ・style-css.css : スタイルシートです。



● 出来上がりのイメージは下図の通りです。


 また、この章の最終ページにはサンプル内容の一括ダウンロードがりますので、
 自由に使用して下さい。


 細かい事は大幅に割愛しましたので、適宜、他サイトや本で補完して下さい。



ホームページサンプル