ホームページの作り方
０．はじめに
１．ホームページとは
４．あとがき
| ホームページの作り方に関する本はたくさん出版されていて、どれにしたらよいか選択に迷ってしまいます。またホームページを作成するソフトもいっぱいあって、どれが良いのかわかりません。身近にそのあたりの達人がいて、聞くことが出来ればよいのですが、周りを見回して一番先を歩いているのは自分だったりして、結局独学の苦労を余儀なくされたりするものです。 |
そんなシチュエーションにいた私も、たまたま雑誌で推薦記事を読んでＡｄｏｂｅＰａｇｅ−Ｍｉｌｌにしたのでした。（ま、他にも理由はあるのですが） そんなわけで、ここではホームページ作成ソフトをＰａｇｅ−Ｍｉｌｌということで話を進めます。 |
お試し版はここ。 http://www.adobe.co.jp/ 
| インターネットすると（変な言葉）、電話線を介して自分のパソコンの向こう側にコンピュータがつながっていて、そのコンピュータがホームページと呼ばれるものを送ってよこしているようだ、というのが何となくわかります。 |
| この向こう側のコンピュータのことをサーバーと呼びます。向こう側のコンピュータから見たあなたのパソコンはクライアントと呼ばれます。 |
 |
 |
 |
| 貴方のパソコン | どこかのコンピュータ |
| インターネットとは、サーバーとクライアントが連動して、あなたの見たいものをあなたのパソコンの画面に表示する仕組みの全体をさします。 |
| ホームページと呼ばれるデータが電話線を伝って送られてくるわけですが、テレビやＦＡＸと違ってそのデータは画像イメージで送られてくるわけではありません。（画像イメージで送られてくる場合も有りますが） |
| 一般に電話線を流れるものは、音声信号の乗った電気です。音声信号以外の電気を電話線に流すと、電話の仕組み自体を壊す可能性が有るのでＮＴＴから叱られます。 ですからコンピュータもデータを他のコンピュータに送るとき、一旦音声信号に変えて電話線に送り出します。受ける方のコンピュータは音声信号をデータに変換してから利用する事になります。因みにデータを音声信号に変換したり、逆に音声信号をデータに復元したりする機械（装置）をモデムといいます。このモデムはパソコンに内蔵されている場合や、外置きになっている場合が有ります。 |
| 音声信号を使ってデータを送らなければならないことが、実は伝送効率を落とす原因になっているのです（あんまり速くは送れない）。こういう環境のもと、画面をす早く表示させるにはどうすればよいかというと、データ自体をちっちゃくして時間を稼ぐ工夫をするしか有りません。 |
| 遠く離れた異国に自分の家をたてるには、一旦こちら日本で建てた家を船で運ぶ方法と、設計図だけ送って材料と大工を現地調達（採用）して建てるやり方があると思いませんか。インターネットでも、画像イメージをやりとりする方法と画面表示の設計図をやりとりする方法があります。 |
| このちっちゃくして送るようにして作られた画面表示の設計図データのことをホームページとかページとかといいます。 |
| じゃあ、材料と大工は？。というと、材料はあなたのパソコンと電気で、大工に相当するものはブラウザ（拾い読み屋？）と呼ばれるソフトです。 |
| なんと、インターネットでは「ホームページ」という設計図を「ブラウザ」と呼ばれる大工が見て、家を建て（画像を表示し）ているのでありました。 |
| 「ブラウザ」というのは「大工」という言葉と同様、固有名詞ではありません。大工に「熊さん」とか「八つぁん」とかがいるように、ブラウザにも「ネットスケープナビゲータ」とか「インターネットイクスプローラ」とかが有ります。 |
| わたくしごとですが、私は「ネットスケープナビゲータ」を購入しました。プロバイダに加入して、さあ使うぞと思っていた矢先、より高機能の「インターネットイクスプローラ」が只で配布されたのでした。結局「ネットスケープ」は買っただけで使わずじまいです。(^^) |
| さて、貴方がホームページを開設されるおつもりなら、作ったホームページはどこかのサーバーに登録しておかなければならないということを理解していて下さい。 通常はプロバイダと呼ばれるインターネット接続業者が自社のサーバーに登録エリアを持っていて、希望するユーザーに少しずつそこを利用させているようです。 詳しくは、加入され得ているプロバイダにお問い合わせ下さい。 |
| 前節で述べたようにホームページはブラウザに渡す画面表示のための設計図ですからブラウザが理解できる形式で作成されていなければなりません。 |
| 以下のリストをご覧下さい。青地の画面の真ん中あたりに赤字で「こんにちは！」と表示させるページの内容です。口で言えば簡単なことなのですが、これを実現するには、ざっとこんな感じなのです。 |
| --------------------------------------------------------------------------- <HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Nanjara-hoi"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <TITLE>Untitled Document</TITLE> </HEAD> BODY BGCOLOR="#0000ff"> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P><CENTER><FONT COLOR="#ff0000">こんにちは！ </FONT></CENTER></P> </BODY> </HTML> --------------------------------------------------------------------------- |
| ホームページは、テキストデータですから、エディタソフトやワープロソフト を使って、作成・変更を行うことができます。 |
ちょっと眺めてもらうとわかると思うのですが、なにか対の関係がありそうですね。 1) <HTML> と </HTML> |
ホームページは、 <なにか> 〜 </なにか>
の形式の項目のネストで出来上がっているようです。 |
| エディタやワープロソフトを使って、作成・変更するばあいは<HTML>、<HEAD>、 <BODY>、<P>などがなにを意味するかということに精通しておく必要があります。 しかし、ホームページ作成ソフトを利用するので有れば、なにを意味するのかを知らなくても作成できます。実際、上のリストはＰａｇｅ−Ｍｉｌｌを使用して作成したホームページで、私自身は<HTML>、<HEAD>、<BODY>、<P>などを入力した 覚えは有りません。 |
お試し版はここ。 http://www.adobe.co.jp/
| 私はＰａｇｅ−Ｍｉｌｌを起動して、画面上部のメニューバーやボタンをクリックしてホームページの背景色や文字色を指定し、画面中央あたりに「こんにちは！」といれただけでした。（正確にいうと、改行のために各行の左端に漢字スペースを１個づつ入れました。＜−−うそついてました） |
| Ｐａｇｅ−Ｍｉｌｌが私の操作に対して、先ほどの<HTML>、<HEAD>、<BODY>、<P> などを必要な箇所にはめ込んでくれたのです。 |
| 文字の修飾(太くしたり、斜めにしたり)などは普通のワープロ感覚でできます。 |
＜小目次＞
3.1 Page Millを起動する
3.2 新しくページを作成する
3.3 タイトルを付ける
3.4 背景の色を設定する
3.5 ファイルを保存する
3.6 文字や画像を中央に合わせる
3.7 文字を大きくする
3.8 画像を入れる
3.9 画像の大きさを調節する
3.A 透過GIF画像にする
3.B 背景画像を設定する
3.C ハイパーリンクの設定
Page Millを起動すると以下のような画面になり、起動が完了すると通常のPage
Mill
画面に変わります。
新しくページを作成するにはメニューバーの”ファイ(F)”をクリックし、表示され
たファイルメニューから「新規ページ」を選択します。
すると以下のような画面が表示されます。これで準備完了です。
作成するホームページにタイトルをつけます。タイトルを付けるにはウィンドウ上部
の”タイトル”という文字の右側にあるテキストエリアを一度クリックします。クリ
ックすると文字が入力できる状態になるので、ここでタイトルを指定します。これは
ブラウザの画面に表示されるわけではないので、自分で管理しやすいものにしましょ
う。漢字を使うことも可能です。
まず、ページの背景色を設定してみましよう。最初何の設定もしない場合は「灰色」
になっています。これを「水色」に変更してみましよう。メニューバーの”表示(V)”
をクリックし、現れたメニューの中から「属性パレットを表示」という項目を選択し
ます。（すでに属性情報ダイヤログが表示されているときはこの操作は不要です）
すると以下のような”属性情報ダイヤログ”が表示されます。この中の「背景」とい
うポップアップメニューから「カスタム」を選択します。
すると次のような”色の設定ダイアログ”が表示されます。この中から水色をクリッ
クしてOKを押すと元の画面に戻ります。これで背景色が水色になりました。
しばらく、ワープロ感覚で文字を自由に入力してみて下さい。
いろいろ
いろいろ
いろいろ
いろいろ
ページ作成の過程で、ちょくちょく「保存」するようにしましょう。マシントラブル
に見舞われたら、せっかく作ったページがパーになる可能性があるからです。ファイ
ルを保存するにはメニューバーの「ファイル」をクリックし、現れたメニューの中か
ら「ページを保存」を選択します。
すると以下のような”名前を付けて保存ダイアログボックス”が表示されますので、
ここで名前を付けて保存します。名前は漢字や特殊記号（#!@など）及びカタカナ
などは使用しないでください。 （ホームページとしてアクセスできません）
ブラウザ画面に表示されるタイトルなどは中央においておく方が見映えがいいので
ここでは、タイトル文字を中央にあわせてみましょう。
まず中央よせしたい文字（または画像）の行を一度クリックします。
（複数行に渡って中央によせたい場合は、その集団をドラッグしておきます。）
次にウィンドウの上部にある”中央寄せテキスト”アイコンをクリックします。
クリックすると即座にさきほどの行が中央にそろいます。
まず、大きくしたい文字列をドラッグして選択します。
次にウィンドウの上部にある”相対フォントサイズを大きく”アイコンをクリックし
ます。クリックすると即座にさきほどの行が大きくなります。
あと、
小さくしたいときは”相対フォントサイズを小さく”アイコンをクリック。
太らせたいときは”ボールド”アイコンをクリック。
斜体にしたいときは”イタリック”アイコンをクリック。
してください。
ページが文字ばかりでは面白くないので、画像を入れてみましょう。画像を入れる
には、まず入れたい場所をクリックします。次に画面上部にある”オブジェクト配
置”アイコンをクリックします。
すると以下のような”オブジェクトを配置”ダイアログが表示されますので、入れたい
画像を選択します。
選択すると、画像が入ります。
変更する画像をクリックします。すると枠が表示されますので、その枠の■の部分を
ドラッグすると点線が表示されます。このくらいでいいかなと思った所でボタンを離
すと、画像のサイズが変わります。
Page Millでは簡単に透過GIF（１色だけ透明色にする）画像を作成する事ができます。
まず透過させたい画像をクリックし、
続いてメニューバーの”ファイル(F)”をクリックし”選択対象を開く”を選択
します。すると、以下のようなウィンドウが表示されます。
ツールの下にある杖を選択します。透明にしたい色の部分でクリックします。すると
クリックした色が抜けて透明になります。元に戻すには、再度クリックします。
ホームページの背景の色を設定しただけでは、物足りない場合は背景画像を指定
する方法があります。まず”属性情報ダイヤログ”のファイルボタンをクリック
します。すると”ファイルを開く”ダイアログが表示されますので、ここで画像
を選択します。
”属性情報ダイヤログ”の消去ボタンを押すと、背景画像は消去されます。
背景画像は、フリーでいろんな種類のものが出回っています。著作権を放棄した
画像集がＣＤ−ＲＯＭで市販もされています。よく使われているのを、以下に
並べておきます。ご利用下さい。
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
ページはいろいろな所にリンクできます。まずリンクを張りたい所をドラッグし
ます。別途エクスプローラを起動し、このエクスプローラに表示されるファイル
の中から、リンクされる対象（他のページファイル）をマウスでつかんで先ほど
のドラッグした所に落とします。これでリンクは完了です。
ここで一旦作成中のページをファイル保存し、ＰａｇｅＭｉｌｌを終わらせまし
ょう。そしてブラウザを起動し、作ったページを表示してみましょう。表示でき
たらリンク張ったところをクリックして下さい。ほらリンクされた方のページが
表示されたはずです。簡単でしょ。
最も頻繁に使う機能について説明しました。これだけでも十分ホームページは
作れます。ＰａｇｅＭｉｌｌにはこのほかにも出来る機能がたくさんあります。
おいおい勉強されるとよいでしょう。
アクセスされる度に、表示内容が変わるホームページもあります。魅力あるペー
ジにするための工夫の１つなのですが、これにはＰｅｒｌという名のプログラム
をサーバー側で、ページアクセスの都度、動かしています。ページ作成になれた
ら、こちらも勉強されるとよいでしょう。
なお、Ａｄｏｂｅ（アドビ）社のＰａｇｅ−ｍｉｌｌの説明をし、画像を載せ、
リンクまで張っておりますが、もちろん同社と当方は何ら関係はありません。(^^)
ジーイーネットワークス 種子田