| 基本構想 | ||||||||
2. テーマが決まったら、次に目次を決めるのことがホームページ完成への早道です。(これは、文章を書くときのコツです)
構成は、大項目・中項目・小項目くらいが適当でしょう。(あまり項目を細分化すると、見たいところに到達するのに時間がかかり、見難いものになります)
以上をまとめると次のようになります。
{目次}−−−{大項目1}−−−{中項目1−1}−−−{小項目1−1−1}上の例は、大項目1つに対して、中項目が4つ、中項目1つに対して小項目8つ、となります。この様にして各々の 項目に実際の名称を入れると分かりやすくなり、HTMLを作る上で役に立ちます。{中項目1−2} {小項目1−1−2}
{中項目1−3} {小項目1−1−3}
{中項目1−4} {小項目1−1−4}
{小項目1−1−5}
{小項目1−1−6}
{小項目1−1−7}
{小項目1−1−8}
3. ここまでがしっかりまとまれば、ホームページ制作は50%完成したと言って良いでしょう。次は、いいいよHTMLファイルの作成ですが、ここで重要なのは、最初から凝ったホームページを狙わないことです。先ずは単純な書式で完成させることです。
4. HTMLについては、ある程度知識が無いと書けませんから、前項に記載の書籍を購入して一通り読んでおく と良いでしょう。(決して覚えなくても良いです。使っていくうちに自然と覚えますし、頻繁に使う書式はせいぜい 10〜15アイテム位です)
5. 本を買うお金が惜しい人は、URLからHTMLについて書かれているホームページを探して、見ると良いでしょう。
6. HTMLのさわりが少しでも判ったと感じたら、いよいよ自分のホームページをHTML言語で書いてみます。自信のない人は、他の人のホームページを参考にするのが早道です。気に入ったホームページを探して そのホームページのソースファイルをダウンロードしましょう。(Netscapeであれば、表示項目の文書ソース選択でソースが見れます)この様にすれば、内容は違ってもHTMLの順序や使い方はそのままでも利用できます。
7. 次にあらかじめ用意した、GIFファイルやJPEGファイルをTEXTと共にHTMLにはめ込んで、他の人の HTMLファイルを徐々に書き換えていきます。この時重要なことは、いっぺんに書き換えないで少しづつ行うのがコツです。少し入れ替えては、ブラウザで確認すれば、自然と書式文法が理解できてしまうからです。この時に使うエディターは、HTMLエディターより、普通のテキストエディター(たとえば秀丸エディター)が良いでしょう。
8. HTMLファイルは、一番始めに決めた項目に準じて(或いは準じた数だけ)、つくるのが一般的で、初心者 には、その方が分かりやすいです。ですから、最初に出来るのは目次に当たるindex.htmlファイルです。このファイルは、大項目にリンク出来るようになっているはずですから、今度は大項目の数だけ同じようにして HTMLファイルを作ればよいことになります。今度は、他の人のソースファイルでなく、自分のソースファイルを 元に大項目用に書き換えればよいので、だんだん楽になって行きます。
9. ここまできましたら、後は精力的に作ればよい訳ですが、ホームページを作る上で注意しなくてはならないことがいくつか有りますので、私の経験を通して得たことを書いてみます。 まず、ホームページの顔であるフロントページの構成ですが、作成に当たっては次のことを留意すると良いでしょう。
(1)フロントページは、作者の意図するところが一見して判るようにタイトルを決めること。
(2)アクセスした際、一番はじめに目にするページですので、興味を引くデザインにすることが大切ですが、 写真など大きなファイルサイズのものを多用すると、アクセスに時間がかかり、見る人に精神的負担をかけることになりますので、程々のファイルサイズになるようにすること。
(3)フロントページは、出来るだけビジュアル化をはかり興味をそそるページにするようにしますが、 欲張ってなにもかもフロントページに盛り込むことはさける。
(4)写真は、JPEGやGIFなどにデジタル変換するのが通例ですが、ファイルサイズとにらみ合わせて 選択する。特に見た感じの良いインターレースGIFは、ファイルサイズが大きくなるので、画像サイズを 小さくするよう心がける。
10. 次に写真画像の取り込みについてふれておきます。写真をデジタル化する方法としては、次の方法が一般的です。
11. 次にホームページ作りの落とし穴的なことについて、紹介しておきます。
(1)まず、ホームページは基本的に不特定多数の方に見ていただく訳ですから、使用環境が異なると言うことを 念頭に入れておくことが重要です。
たとえば、使用するブラウザー(ホームページ閲覧ソフト)が自分のものと同じもので有れば問題ないのですが、 当然自分のものと違うブラウザーで見る人がいることです。
私の場合は通常、Netscape 2.02Jを使ってホームページを作っておりますので、JAVAやJavaScriptあるいは フレーム機能やgifアニメーションを使っても問題なく閲覧できますが、これらに対応していないブラウザー では、「全く見ることができない」なんてことが起こります。
従って、HTMLを作る際、このようなことが生じないような工夫が必要です。
フレーム機能について言えば、ネットスケープ2.01以降で使えるようになったものですから、同じネットスケープ
でもそれ以前のバージョンでは、全くホームページが表示されません。
他のブラウザーでも同じことですので、例えば次のような工夫をHTMLに施して、どのブラウザーでも見て
もらえるようにします。
<HTML>
<TITLE>Nature Photo Gallery</TITLE>
<FRAMESET COLS="23%,*">
<FRAME SRC="menu.html" name="menu">
<FRAME NORESIZE SRC="right.html" name="right">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#D0E68C" TEXT="#000000" LINK="#0000ff" ALINK="#FF0000" VLINK="#FF7F50">
<!--#include file="./right.html"-->
</BODY>
</NOFRAMES>
</HTML>
(2)同じ様なことが使用しているハードウエア環境にも言えます。
デスクトップを使っている人もいますしラップトップを使っている人もいます。また、表示できる解像度もパソコンが持っているVRAMによっても違います。
これらの環境にすべて満足したホームページを作り上げることは、非常に困難ですが極力近づけることはできます。 例えば、写真画像の場合フルカラーで1024×768のもののほうが説得力があって良い場合でも 640×480程度の解像度にしておけば、たいていのパソコンで見ることが出来ますので、こうした心配りが必要です。
特にラップトップパソコンの場合、表示面積が小さいため、スクロールする頻度が多くなりますので、一ページ あたりの表示を少なくするようページを分けるとか、スクロールしなくても次のステップに進めるような工夫も 必要です。その例を紹介しておきます。
12. そのほかホームページを作る上で気をつけなくてはならないことをあげておきます。
(1)ローカルリンクのディレクトリー表記
ホームページ内を行き来することを、ローカルリンクと言いますが、このリンク先を正確に記載しないと
いけません。
オフラインで試して上手くいってもオンラインでは必ずしも上手くいくとは限りませんので、決まりをきちんと
守ることが大切です。初心者のかたは、この辺を良く理解しておかないと折角作っても表示できないことになり
ます。見えない落とし穴と言ったところでしょうか。
・同じディレクトリー内のファイルへ移動する場合は、ファイル名だけで良い。 <A HREF="ファイル名.html">テキスト</A>
・下層ディレクトリー内のファイルへ移動する場合は、サブディレクトリー名をはじめに記載し、次にファイル名を 書きます。
<A HREF="サブディレクトリー名/ファイル名.html">テキスト</A>
・上層ディレクトリーのファイルへ移動する場合は、上層階を表す ../ を付けます。
<A HREF="../ファイル名.html">テキスト</A>
<A HREF="../../ファイル名.html">テキスト</A>
・同層ディレクトリー内のファイルへ移動する場合は、下層移動と上層移動の式をあわせて使います。
<A HREF="../ディレクトリー名/ファイル名.html">テキスト</A>
(2)リモートとローカルのファイル
この場合のリモートはプロバイダーの記憶装置であり、ローカルは自分のパソコンの記憶装置のことですが、
ホームページを持つとFTPによるファイル転送が必要になりますが、転送時に混乱を避ける意味で、
リモートとローカルのファイル構成は同じものにしておくことが必要です。
例えば、ローカルでimagesというディレクトリにイメージファイルを納めているなら、リモートも同じように imagesと言うディレクトリを作り、ファイルをそこに転送すると言うことです。
つまり、プロバイダーの記憶装置内に納めるデータと全く同じ形態で、自分のパソコン上にもファイルを 納めておくと言うことです。
(3)文字色の設定
文字色は、バックグラウンドの色に見合った見やすい色に設定することは勿論ですが、リンク文字はクリック
すると色が変わりますので変わった場合も見やすい色にしておくことが必要です。
当たり前のようですが、フルカラーを想定して複雑な色に設定すると、256色では違った色合いになりますので、注意が必要です。
(4)画像の並べ方
画像を同じ画面内に複数使う場合にも、一寸した工夫で表示速度が違ってきます。一般に横に並べるより縦に並べたほうが、表示が早いようです。
