おじさんたちの雑談室 - ホームページ製作講座

☆ おやじの挑戦 ☆
デザインを変更しました。 (05/07/14)

〜 おじさんのためのホームページ製作講座 〜




 注意 : ここに書いてある事例は記載がない場合は「Windows XP」上での話です。
■ 最低限必要なもの 〜 No.1 〜 ■
まず、最低限必要なもの 〜 No.1 〜 

1. ホームページ製作には何が必要か → インターネットに接続できるパソコンがあれば良い

 ホームページ製作ソフトは使わない( HomepageBuilder、AdobeGoLive、FrontPage、Ninja 等)更に、基本的に金はかけない。
最低限必要なもの
  1. パソコン
  2. インターネット回線
  3. サーバ
  4. HTMLエディタ
     専用のホームページ製作ソフトは使わない。(ある方は、構文チェック、画像製作、FTPソフ ト代わりにお使いください)
  5. FTPソフト
  6. 画像製作ソフト 
以上6点ですが、パソコン、インターネット回線(ISDN,ADSL,ダイアルアップのアナログ回線、PHSの携帯端末等のインターネット接続環境)は当然あるはずです。(このページを見ているから)     
  •  さて、サーバですがインターネット接続契約をしているISP(プロバイダ)の多くは無料のホームペー ジが使えるようになっているはずです。    
    私の場合はDIONで、5MB(写真などを大量に使わなければ十分です。)ありましたが、ホームページ提供サービスの無いISP契約の方は ”Yahoo!”等の無料ホームページを利用することも出来ますが、ページに広告が入るサービスが 多いようです。(本当に無料では貸してくれません)
    更に、有料のレンタルサーバを借りる手がありますが、それについては後で書きます。(料金は 50MBで1万円/年間くらいから、上はウン十万まで)      
  •  HTMLエディタは ”Windows ”付属のメモ帳でも最初は構わないはずですが、フリーソフトで使えるものが有りますのでそれを使いましょう。
    私は、WebEditor Free http://www2.wbs.ne.jp/~kaz/we/index.htmlを使っていますが、検索サイトで”フリー” ”HTMLエディタ”で検索すると色々ありますし、Vector (無料で使える、試して買える。ソフトウェア・ライブラリ&ショップ)http://www.vector.co.jp/も覗いてみてください。
    ワープロソフト(Word、一太郎等)を使う手もありますがメモ帳でいきましょう。        
  •  FTPソフトについては、ほとんどのサーバは”Internet Explorer”からもアップロード出来る仕様になっているはずですが、確認が必要です。
    FTPソフトがあれば楽なことは間違いありません。これもHTMLエディタと同じ方法で探してみてください。因みに私は NextFTP http://www.toxsoft.com/ を使っています。
  • 像製作ソフトは Adobe PhotoShop がベストと思いますが、最初は ”メモ帳 ” と同じ ”Windows ”付属の ” ペイント ” を使います。

以上でホームページが出来ます。・・・・・・ウン ? 金をかけなくても出来る!

 そうです !!  本当に出来ます    無料でホームページできます。

http://www.audio-iwasaki.com/ver_1/残骸です。

次項は、私が実践した無料でホームページを製作した話です。


(平成14年11月19日)>
No.1
 ページトップ
■ まず、試してみましょう 〜 No.2 〜 ■
おじさんたちにも出来るホームページ製作(2)

2. 「HTML」とは → メモ帳で試してみよう

HTML」とは
情報・通信事典 e-Words から
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込むこともできる。 HTMLで記述された文書を閲覧するには通常Webブラウザを使用する。 しかし、HTML文書はテキスト文書の一種であるため、テキストエディタでHTML文書を開き、タグごとテキスト文書として読み書きすることも可能である。

要点のみです。詳細は→ http://e-words.jp/w/HTML.html情報・通信事典 e-Words

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 よくわからない方のほうが多いと思いますが、気にしなくても良いです。
殆どの、ホームページは「HTML]で記述されていて、「HTML」では「タグ」が使用されていますという事です

 さて、「HTML]の「ソース」で「タグ」を観てみましょう。
インターネット・エクスプローラでこのページをご覧のかた(以後「IE」と記述します)画面を「右クリック」→「ソースを表示」をクリックしてください。「メモ帳」が起動して「ソース」が表示されるはずです。
( 注:画像の上で「右クリック」しますと、違う表示になります。)

<BR> <FONT></FONT> <TABLE></TABLE> <TR></TR> <TD></TD>  これらが「タグ」です。 <BR>
は改行で、カキ方によっては多く使います
<FONT> 等の「タグ」は必ず </FONT> のように「/」をつけた「終了タグ」必要です。

それではいきなり本番です!

 まずは、「メモ帳」を開きますが、「メモ帳」は[スタート]→[すべてのプログラム]→[アクセサリー]に「ペイント」と共にあるはずです。(別のエディタ使用の場合はそのエディタを開いてください。)
  1. [ファイル]→[新規]をクリックしてください。
  2. テキスト入力画面に下の[タグ]を入力してください。(コピーして貼り付けても構いません。今後「コピー&ペースト」が生きてきます)
  3. ここから


    <HTML>
      <P>
       <FONT COLOR="#0000FF" size="4">
    私のホームページです !
       </FONT>
      </P>
    </HTML>



  4.  <FONT COLOR="#0000FF" size="4"> の”_”の数値を変えると文字の色とサイズが変わります。
    "#0000FF"の代わりに"red","blue","black"でも良いです。
  5. 書き終えたら、[ファイル]→[名前をつけて保存]をクリックし、まずここで、ホームページ製作用の新しいフォルダを作りましょう。
    「保存する場所」に「マイドキュメント」が表示されているのを確認して、「フォルダ」が表示されている所で「マウスを右クリック」して、「新規作成」→「新しいフォルダ」をクリックします。
    「新しいフォルダ」が表示されたら新しいフォルダ名が青いうちに新しい名前を入力してください。(例:ホームページ)
     「ファイルの種類」で「すべてのファイル」を選択して、「ファイルの名」に「index-1.html」とでも入力して「ホームページ用のフォルダ」を[ダブルクリック]してから「保存」をクリックして保存してください。
    (次に何かファイルを作った場合には「index-2.html」でもしてください。)

     注:「タグ」は半角の英数字で大文字、小文字どちらでも構いません。「ファイル名」は半角小文字にしましょう。
    「.html」が決めてです。「.html」(「.htm」でも可)で、このファイルはHTMLファイルとして認識されます。
  6. それでは、「マイドキュメント」を開いて先ほどの「ホームページ」のフォルダを更に開きます。「index-1.html」はありますか?無い場合は「5.」の操作を確認ください。
  7. 「index-1.html」がありましたらファイルを「ダブルクリック」してください。「IE]が起動して


    私のホームページです !

と表示されれば今回の作業はOKです。色、サイズ、文章を入れ替えて色々試してみてください。

随分と細かく書きましたが、ご不明の点は掲示板にでも書き込んでください。

「右クリック」での「ソース」の見方を前に書きましたが、この方法で色々なサイトの「ソース」をみてお勉強しましょう。

http://www.tohoho-web.com/html/index.htm 「とほほのWWW入門」の「HTMLリファレンス」です。
(平成14年11月21日)
No.2
 ページトップ
■ HTMLのアレンジ 〜 No.3 〜  ■
おじさんたちにも出来るホームページ製作(3)

3. 「HTML]ソースのアレンジ方法 → コピー&ペースト

No.2 は確認できましたでしょうか?


ソース 例-1 ------------------------------------------------------[実行]


 <html>
  <head>
   <title>サンプル_1</title>
  </head>
  <body>
サンプル_1
 <br>
色は黒、文字サイズはデフォルトサイズ
  </body>
 </html>


表示 例-1 ------------------------------------------------------


サンプル_1
色は黒、文字サイズはデフォルトサイズ


ソース 例-2 ------------------------------------------------------[実行]


サンプル_2
<br>
</font>
<font color="#0000ff" size="6">
色は青、サイズ"4"
</font>

</body>
</html>



表示 例-2 ------------------------------------------------------


サンプル_2

色は青、サイズ"4"


ソース 例-3 ------------------------------------------------------[実行]


 更に文字を強調するために<strong> タグを使うと


<html>
 <head>
  <title>サンプル_3</title>
 </head>
 <body>
  <font color="#ff0000" size="2">
   <br> サンプル_3
  </font>
  <font color="#0000ff" size="6">
   <strong> 色は青、サイズ"4" </strong>
  </font>
 </body>
</html>



表示 例-3 ------------------------------------------------------


サンプル_3

色は青、サイズ"4"


ソース 例-4 ------------------------------------------------------[実行]



<html>
 <head>
  <title>サンプル_4</title>
 </head>
 <body>
サンプル_4
  <p ALIGN="center">
   <font color="#00FF3F" size="5">
   *ホームページ*
   </font>
   <br>
   <font color="#0000ff" size="6">
    <strong> Welcome to my HOME PAGE ! </strong>
   </font>
  </p>
  <p ALIGN="right">
   <font color="#ff0000" size="4"> 2002/11/25  </font>
  </p>
 </body>
</html>



表示 例-4 ------------------------------------------------------


サンプル_4

*ホームページ*

Welcome to my HOME PAGE !

2002/11/25

------------------------------------------------------


<html>から</html>までをコピーしてメモ帳に貼り付けて名前を付けて「index_4.html」にでもして保存してください。


 資料:「とほほのWWW入門」の「HTMLリファレンス」から

 以下、少々お待ちください。 次回はサーバにアップロードしてみましょう。


 * 各プロバイダーの無料ホームページを調べています。*   
(平成14年11月25日)
No.3
 ページトップ
■ 画像を表示しましょう 〜 No.4 〜 ■
おじさんたちにも出来るホームページ製作(4)

4. 画像(写真など)の表示仕方。

まず、写真を表示してみましょう。

sakana ← 写真は私がADSLを申し込んで頂いた安物のデジタルカメラで撮影した酒の肴です。
デジタルカメラ画像のファイル化はカメラ付属ソフトにより行いますが、私の場合は「TWAIN]です。
まず、写真を表示してみましょう。


- - - - - - - - - - - - - - - - - - - - - - - -


最初に、サンプルとしてこのいい加減な写真を使ってみましょう。
写真の上にマウスのカーソルを持ってきて、「右クリック」→「名前を付けて画像を保存(S)」→「マイドキュメント」の「ホームページ」に「新規フォルダー」を作り名前を「image]とでもして、そこに「保存」をクリックして保存してください。
ファイル名は「pho-02.jpeg]となっていますので気に入らなければファイルの名前のところで「右クリック」するとファイル名は変更できます。

 この方法で他のサイトの写真等は簡単に取り込めますが、著作権の問題がありますので十分注意してください。

 タグは<img src="image/pho-02.jpeg" width="240" height="140" alt="sakana"> です。
<img src="image/pho-02.jpeg"> と省略しても「IE}では表示しますが、サイズ指定できません。
alt="sakana" は無くても表示に影響はありませんが書く癖を付けましょう。

 【フォルダの階層問題】

フォルダhttp://e-words.jp/w/E38395E382A9E383ABE38380.html 「情報通信辞典 e-Word」
アーカイブhttp://e-words.jp/w/E382A2E383BCE382ABE382A4E38396.html 「情報通信辞典 e-Word」

 さて、ここで、「image/pho-02.jpeg」は「相対パス」と言います。「絶対パス」は「http://www.abcd.com/image/pho-02.jpeg」となり、どちらでも良いのですが普通は「相対パス」で書きます。
現在のファイルから見て同じ階層ににある「1234フォルダー」の「456.html」は「1234/456.html」です。(「./1234/456.html」とかく場合も有ります)
それでは、一つ上「a123」のフォルダーの「789.html」というファイルは「../a123/789.html」のようになります。「../」がポイントです。更に上なら「../../」と書きます。

「image」というフォルダの下にアイコン用「icon」,写真用「photo」等のフォルダを作り後々わかりやすくしたりします。

私は、「ディレクトリー」と普段は言っていますが、「Windows」ではフォルダというそうです。「ディレクトリー」は「UNIX」、「MS-DOS」の話だそうです。(サーバが「UNIX」なら良いのか? 詳しい方教えてください。とりあえず階層と言えば問題ないはずです。)

これで、階層問題は解決です。


ソース 例-5 ------------------------------------------------------[実行]


<html>
<head>
<title>サンプル_5</title>
</head>
<body>
サンプル_5
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240"
HEIGHT="140">
<br>
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/11
</font>
</p>
</body>
</html>



表示 例-5 ------------------------------------------------------


以後、表示例は省略します。 [実行]で確認してください。

------------------------------------------------------
 注:写真は「.jpeg」又は「.jpg」で取り込みましょう。タイトル、アイコン等はGIF画像「.gif」になります。(ファイルサイズが小さくなります)
GIF画像は特許の問題がありますが、後で書きます。

<img src="___">  alt="___"、width="___"、height="___"も記載があります。

http://tohoho.wakusei.ne.jp/html/index.htm 「とほほのWWW入門」の「HTMLリファレンス」です。


サーバの件はもう少しお待ちください。
(平成14年12月11日)
No.4
 ページトップ
■ 画像の製作 〜 No.5 〜  ■
おじさんたちにも出来るホームページ製作(5)

5. GIF画像の製作 ------------------------------------------------------
 他にPNG、BMPなどの画像形式がありますが、とりあえず写真はJPEG、タイトル、アイコンはGIF形式と思っても間違いないはずですが、たまに写真をGIFでというのも見かけます。
更に、GIF画像を動画のように動かすアニメーションGIFがあります。
panda←左のパンダの動画がアニメーションGIFです。
他に動画には「FLASH]、「JAVA アプレット]を使ったりします。
アニメーションGIFは動画の画面を多くするとファイルが大きくなり重いサイトになりますので、複雑な動きをしたい場合は「FLASH]を使うのが良いと思います。
たまにアニメーションGIFが多用されているサイトを見かけますが、開くまで時間がかかりパスされる事態になりかねません。
画像のサイズ調整、減色、コマを落とすなどの裏業もありますが、軽さ、動きの滑らかさは「FLASH]には敵いません。このページのトップ部分が「FLASH」です。(下手ですいません)


ソース 例-6 ------------------------------------------------------[実行]


ソース 例-5に      
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
を追加してみましょう。

その前に、パンダのGIF画像を「image」のフォルダーに取り込むことをお忘れなく!


<html>
<head>
<title>サンプル_5</title>
</head>
<body>
サンプル_5
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240" HEIGHT="140">
<br>
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/16
</font>
</p>
</body>
</html>



ソース 例-7------------------------------------------------------[実行]


更に、バックに色を付けてみましょう。
<body>

<body bgcolor="#ffffc0">にしてみましょう。


<html>
<head>
<title>サンプル_7</title>
</head>
<body bgcolor="#ffffc0">
サンプル_7
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240" HEIGHT="140">
<br>
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/16
</font>
</p>
</body>
</html>


------------------------------------------------------

bg_01 ついでに、壁紙も試してみましょう。

<body bgcolor="#ffffc0">

<body BACKGROUND="image/bg_01.gif">
にするだけです。

「ペイント」で作成した壁紙です。


ソース 例-8------------------------------------------------------[実行]


<html>
<head>
<title>サンプル_8</title>
</head>
<body BACKGROUND="image/bg_01.gif">
サンプル_8
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240" HEIGHT="140">
<br>
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/16
</font>
</p>
</body>
</html>



------------------------------------------------------


 ここで、よく「直リン」などと言う言葉を聴きますが、これは他人のサイトに直接リンクしてしまうことです。
<img SRC="image/panda.gig" ALT="panda" WIDTH="80" HEIGHT="80">

<img SRC="http://tohoho.wakusei.ne.jp/paint/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">

等と、してしまうことです。バナーアイコンによく見られますが、あまり薦められません。(そんなこと言いながらこのサイトのLINKページは「直リン」です。早急に変更します)


------------------------------------------------------


 さて、詳しい「ペイント」でのGIF画像製作、アニメーションGIFの制作方法は 「とほほママ」のペイントブラシテクニックをお読みください。私の文章よりもわかりやすいと思います。

パンダのアニメーションGIFは 「とほほママ」のペイントブラシテクニックからお借りしました。

とほほママ」のペイントブラシテクニック → http://www.tohoho-web.com/paint/paint.htm


(平成14年12月15日)
No.5
 ページトップ
■ リンクの仕方 〜 No.6 〜  ■
おじさんたちにも出来るホームページ製作(6)

6. リンクの仕方

マウスでクリックすると別のページに移動する方法は
<a href="URL"> * * * </a>
"URL"に「"main.html"」等の別のページのアドレスを書き込みます。(絶対パスで"http://www.* * * * *.com/"でも可)
* * * の部分にテキスト(文章)例:ここ をクリックしてください。

bana_01 (bana._01.gif)
又は、画像のURLを書きます。


例:<img src="image/bana_01.gif">

記入例:画像
<a href="main.html">
<img src="image/bana_01.gif">
</a>



記入例:テキスト
<a href="main.html">
ここ </a>
をクリックしてください。

ここ の部分がクリックする部分です。


ソース(画像)例-9-----------------------------------------------[実行]


<html>
<head>
<title>サンプル_9</title>
</head>
<body BACKGROUND="image/bg_01.gif">
サンプル_9
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240" HEIGHT="140">
<br>
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
<br>
<a HREF="main.html">
<img SRC="image/bana_01.gif" WIDTH="150" HEIGHT="40" alt="bana">
</a>
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/27
</font>
</p>
</body>
</html>



ソース(画像)例-10-----------------------------------------------[実行]


<img SRC="image/bana_01.gif" WIDTH="150" HEIGHT="40" alt="bana" border="0">
にすると画像の周りの線が消えます。


ソース(画像)例-11----------------------------------------------- [実行]


<html>
<head>
<title>サンプル_9</title>
</head>
<body BACKGROUND="image/bg_01.gif">
サンプル_9
<p ALIGN="center">
<font color="#00FF3F" size="5">
*ホームページ*
</font>
<br>
<font color="#0000ff" size="6">
<strong>
Welcome to my HOME PAGE !
</strong>
</font>
<br>
<img SRC="image/pho-02.jpeg" ALT="sakana" WIDTH="240" HEIGHT="140">
<br>
<img SRC="image/panda.gif" ALT="panda" WIDTH="80" HEIGHT="80">
<br>
<a HREF="main.html">
ここ</a>をクリックしてください。
</p>
<p ALIGN="right">
<font color="#ff0000" size="4">
2002/12/27
</font>
</p>
</body>
</html>



------------------------------------------------------

</a>

の位置に注目してください。

ご理解いただけましたでしょうか?

http://www.tohoho-web.com/html/a.htm 「とほほのWWW入門」の「HTMLリファレンス」
(平成14年12月27日)
No.6
 ページトップ
■ サーバへアップ・ロード 〜 No.7 〜 ■
おじさんたちにも出来るホームページ製作(7)

7. サーバへのアップロード仕方

「アップロード」とは
情報・通信事典 e-Words から
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 ネットワークを通じて、クライアントコンピュータに保存されているデータをサーバコンピュータに転送すること。逆をダウンロードという。

詳細は→ http://e-words.jp/w/E382A2E38383E38397E383ADE383BCE38389.html 情報・通信事典 e-Words
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 製作した「HTML」ファイルをWebサーバに転送する方法です。          
        
ファイル転送にはFTPとHTTPの二つのプロトコルが使われます。
 FTP  HTTP   プロトコル   Web サーバ  情報・通信事典 e-Words

 さて、サーバですがISP(プロバイダ)の無料サーバを使うことをお奨めします。
他に無料のサーバが有りますが見ていて不愉快になるような広告が入ってしまいます。私の知る限りISPのサーバは広告が入りませんが、殆どが自前のCGIは使えませんが回線は安定しています。
掲示板、アクセスカウンタのCGIくらいは何とかなります。(指定の物を使うか、外部リンクでなんとかなります)
 更に、サーバの仕様で更新が確認しずらいです。理由は”heder”に最終更新日が無いため確認が難しいです。ISP系のサーバは”heder”で更新が確認できます。

 リピーターは大切にしなければ・・・・・・

 それでは私の「DION」無料ホームページ・サーバを例に挙げて話を進めます。
「DION」は現在無料で20MBを提供しています。

 FTPは別途ソフトが必要です。FTPソフトは「NextFTP」で話を進めます。


FTP


「htdocs」のフォルダをダブルクリックと下のように展開されます。


FTP


ただ今、画像製作中です。(03/08/02)

 注: 「画像のプロパティ」は、テーマ「Windows クラシック」、配色「アースグリン」で使っていますので、少々感じが違っています。

http://www.tohoho-web.com/html/index.htm 「とほほのWWW入門」の「HTMLリファレンス」です。
(平成14年11月21日)
No.7
 ページトップ
■ Web Siteの予備知識 〜 No.8 〜 ■
おじさんたちにも出来るホームページ製作(8)

8. Web Siteの予備知識
  1. 忘れている人もいます。      
     一般的なWebサーバは http://www. △△△.co.jp/ とURLを入力すると http://www. △△△.co.jp/index.html  http://www. △△△.co.jp/index.htm のファイル指定したことになります。更に、「index.html」 「index.htm」 と言うファイルが無い場合はディレクトリ内のファイルがすべて表示されてしまいます。

     例 1: http://www.audio-iwasaki.com/make/rei/ 

     例 2: http://www.audio-iwasaki.com/make/ 

     上の”例 1”は無防備な例で、”例 2”は保護用の「index.html」をおいた場合です。
              
     各ホルダには何らかの「index.html」、「index.htm」をセキュリティ上必ず置いておきましょう。
    空のファイルでも名前だけ「index.html」、「index.htm」でもOKなはずです。
              
     丸見えのフォルダがあると間が抜けたサイトと思われますし、危険です。        

    企業のサイトでも結構あります。(その会社がホームページ製作承りますですと・・・・・危ない! そんな会社には発注しないほうが・・・・・・)

     サーバによってはサーバ側でエラーメッセージを出してくれますの確認してください。
    因みに、DIONの無料ホームページはサーバー側で処理してくれます。
     (多くのプロバイダ無料ホームページ・スペースはサーバ側でメッセージを出してくれるようです。)
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
              
  2. 確認してみましょう。        
     サイトのページサイズ、特にトップ画面の大きさ問題
    苦労して製作したホームページが重く、完全に開く前にパスされていませんか? 

    原因は
    1. 「index.html」又は「index.html」のファイルサイズが大きすぎる。  
    2. 貼り付けてある画像ファイル等が大きすぎる
    3. 「CGI」及び「JAVA Script」等の反応時間の問題
    4. バックボーンを含むサーバ側の問題
    5. クライアント(サイトを見る側の人)の機材(回線を含む)の問題

    1. 「index.html」又は「index.html」のファイルサイズが大きすぎる。
       理想的なファイルサイズはちょっと前までは50KB程度と言われていましたが、これはアナログ回線の話だと思います。
      ご存知「Yahoo!」のトップページは50KB(画像を含む)程度で極めて軽く「ISDN」でストレス無く閲覧できますが、「Yahoo! オークション」で画像表示にしますと話は違います。
       「index.html」又は「index.html」ファイルはテキストですので大きくても知れています。悪評高い当サイトでも43KB程度で、問題は画像ファイルで「FLASH」「GIF」を含めます300KB超になってしまいます。
      「ADSL」回線でのみ確認していますと「ISDN」、「アナログ」、「モバイル」環境では悲惨な結果になります。 
       「ADSL」回線も最近は時間帯によっては悲惨なスループット数値が出てきます。IP電話、ストリーミング、利用者増加のためか、私の「Flets ADSL」では 22:00 前後では100Kbなんてこともあります。   
      当然、その時間帯は各サーバの負荷も大きくなり全体にレスポンスが落ちてきます。

    2. 貼り付けてある画像ファイル等が大きすぎる
       画像を含むトップページは100KB程度がサクサク動く理想のサイズかと思います。壁紙に巨大な「JPEG」写真画像は使うなら減色するなりしてファイルサイズを小さくしたいものですし、ページに貼り付ける写真も「アニメーションGIF」も同じです。
      • 「アニメーションGIF」はコマ数を減らすか「FLASH」にでも切り替える。
      • 「JPEG」はファイルサイズの変更が出来ないならリンクで別ページで開く。
      • フリーのサムネール製作ソフトで写真サイズ加工、減色加工が出来ます。
        スプラシュ・ページは製作の労力の割には見ていただけないはずです。
        (スキップ出来るようしているサイトが多いようですが、多くはスキップされています。見てくれませんので結局は自己満足で終わってしまいます。)
         トップページは「軽い」が原則です。 

         軽さとは関係ないですが、フレームを使ってメニュー画面からコンテンツ画面を切り替える場合は「TARGET」指定間違いをしないようにしましょう。特に戻る時の間違いが多く見苦しいです。
        更に、LINKページで他人のページを自分のコンテンツ画面に表示することは著作権上問題ですし、大変失礼です。

        自分のサイトを時間帯別に確認しておく必要があります。

        画像、リンクページのリンク切れは有りませんか? 見苦しいので定期的に確認しましょう。(大手企業のサイトでも結構有りますが・・・・・)

    3. 「CGI」及び「JAVA Script」等の反応関係
       多くは「JAVA Script」の先に「CGI」が有り、「CGI」を他のサーバに置くと、更に問題がある場多いようです。(自前の「CGI」が使用できない場合よく使われる方法です)
       色々な時間帯、環境で動作確認をしてみる必要が有りそうです。

    4. バックボーンを含むサーバ側の問題
       ISPの無料、又はレンタル・ホームページスペースは変な使い方をしない限りストレス無く使えるはずです。 
      問題は広告発信目的の無料レンタルサーバと、格安のレンタルサーバですが、サーバ・スペース紹介のサイトを見て、遅いサイトは当然のようにレンタルスペースも遅いようです。

    5. クライアント(サイトを見る側の人)の機材(回線を含む)の問題
       機材、特にブラウザによっては「FLASH」、「JAVA Apret」等のプラグインソフト、更に「スタイルシート」、「HTML」のサポート状況の問題で、表示が意図しない事になっている事があります。
       ディスプレイは800×640表示の人もマダマダいます。1024×768又はそれ以上の画面サイズで製作するとPCの性格上、大幅な横スクロールが必要になってしまいます。(結構疲れますし、嫌われます。)
  3. 更に確認してみましょう。

    クライアント(サイトを見る側の人)のブラウザの問題

     インターネットの閲覧ソフトの問題です。
    インターネットの利用者全員がWindowsに無料で付いてくるMicrosoft Internet Explorerを使っているわけではありません。
    「Mozilla」、「Netscape」、「Opera」、「Safari」

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 休 憩
(平成15年10月11日)
No.8

 ページトップ
■ エディタ情報 〜 No.9 〜 ■
おじさんたちにも出来るホームページ製作(9)

9. エディタ・ソフト情報

各種HTMLエディタソフトの情報です。
 HTMLエディタ、テキストエディタ、こんな説明があるくらいで製作者のサイトは閉鎖状態なところもあります。 → テキストエディタ

 試してみたソフトを報告します。 
  1. WebEditor Free
     現在、製作者のサイトは閉鎖中で入手不可能ですが、  http://www.aitaii.com/wef.html からダウンロードできます。 (私はしっかりファイルを保存してあります。「wef200bt.lzh」と「wef2b3up.exe」)        
  2. 秀丸エディタ
     http://hide.maruo.co.jp/  
  3. HTML Canvas ver1.2
      http://miharajun.tripod.co.jp/
  4. HTML Project2
      http://www1.ttcn.ne.jp/~kaneto/
  5. MKEditor for Windows Version 3
      http://www.mk-square.com/
(平成16年03月07日)
No.9

 ページトップ
■ レイアウト・テクニック 〜 No.10 〜 ■
おじさんたちにも出来るホームページ製作(10)


10. レイアウト・テクニックです。
  •  基本的なサイトのレイアウト考えましょう。 このページ基本レイアウト → サンプル 12
  •  基本の色 
  •  文字の大きさ
  •  リンクの表示方法 画像をクリック、テキスト(文字)の色
(平成16年03月07日)
No.9

 ページトップ

おじさんたちの雑談室_ホームページ製作講座

 ■ おじさんたちの雑談室 ■
 □ おじさんたちのアナログ的サイト
 □ 室長 北海道滝川市 岩崎正和 
 Since 10th Nov 2001               
 Ver.7.00