0.ホームページ製作マニュアル（ren1）
|
|
| 今回は自医院のホームページを作ってみます。
まず、ホームページを作成する場合、その内容と構成を考えなければなりません。 練習として、 １．「表紙のページ」 ２．「医院紹介のページ」 ３．「趣味のページ」の３ページを作ります。 それぞれのページに工夫を懲らして見やすいページにします。 その次に、ハイパーリンクと呼ばれる機能を利用して、次のページに移動するように設定します。 最後にメールを出してもらうように設定します。 |
| １．ホームページを作成用ソフトFrontPage Express（ＦＰＥ）を利用 |
| Internet Explorerに付属しているFrontPage Express（ＦＰＥ）のソフトはウィンドウズ98の「スタート」→「プログラム」→「アクセサリー」→「インターネットツール」→「FrontPage
Express」にあります。
あるいは、「スタート」→「プログラム」→「Internet Explorer」→「FrontPage Express」から起動できます。 |
| ２．ＦＰＥを起動してホームページを作成 |
| ＦＰＥを起動して、画面上のメニューから「ファイル」→「名前を付けて保存」を実行します。そして「ページタイトル」の欄を入力します。
今回は「山田歯科医院」と入力します。 そうすると、タイトルバーにタイトルが出ます。内容がわかるようなタイトルにすれば良いでしょう。 さらに、「ファイルとして保存」ボタンを押します。そこでは、ファイル名を半角で入力します。 また、ホームページを保存する専用のフォルダーを作成して、その中に保存するようにしましょう。 |
| ３．「表紙のページ」を作成してみましょう |
| ＦＰＥを開いて考えていた文章を入力します。基本的にはワープロと同じ感覚でいいのです。
まず、「ｙ１」のように「ようこそ山田歯科医院････」等を入力してから、色々な構成を考えていきます。 最初は「ようこそ山田歯科医院」の見出しです。 上記の文字をドラッグして画面を反転して下さい。 まず、ツールバーの左側に「標準」と書かれているプルダウンメニューから「目出し1〜６」の中から１つを選んで下さい。 すると、文字が大きくなります。さらに、「中央に配置ボタン」をおすと画面の中央に配置されます。自分のこのみにあわせて下さい。 「インデント」「右寄せ」なども練習すると良いでしょう。 また、「テキストサイズの拡大」「太字」「斜体」「下線」などのボタンも利用してみましょう。 さらに、文章と文章の間に区切り（水平線）をつけると、見やすくなります。「水平線」を入れるには、「挿入」→「水平線」で作成します。また、「編集」→「水平線のプロパティ」で内容を細かく設定します。 以上のページ（「ｙ１２」）を作成、修正したものを名前をつけて保存します。 |
| ４．注意事項 |
| 表紙ページのファイル名は、自分のページを作る時は、通常「index.htm」と言う名前でファイルを作ります。
これは、特別な意味を持っています。（私のホームページの「山田歯科医院」の練習コーナーでは、都合上、別のファイル名になっています。） たとえば、「http://www.ahmic21.ne.jp」のURLはホームページがどこかにあるのかを示す住所を表しています。 その中で、特定のページを見るためには上記URLに続いて「/yamada/」などのページに進みます。 ところが、そのままでは、今回作る３ページの名前し見えないのです。これでは大変、体裁の悪いホームページになってしまいます。 そこで、実際はホームページの表示にはある約束事ができています。 「index.htm」と言うファイルがある場合には、まずそのファイルを自動的に読み込んで表示してくれます。 そのため、最初のページはまず、「index.htm」と言う名前にするのが普通です。（「index.html」も同じ役目をします） |
| ５．「自医院紹介」を作ってみましょう |
| 最初、前記の通り、文字を入力（「ｙ２」）します。
今回は、表を使ってレイアウトをしてさらに、イラストを入れてみます。 表の中に必要な（項目×列）を考えて（４×２）のマス目をつくりましょう。 ＦＰＥ上で表を挿入したい位置にカーソルを合わせツールバーの「表の挿入」のアイコンをクリックして、４×２になるようにドラッグします。 次に、この表にカーソルをあわせ、メニューから「表」→「表のプロパティ」を表示させてクリックします。 「表のプロパティ」が表示されたら、「レイアウト」の項目の「配置」を「中央」に、その他の項目は自分で自由に設定して下さい。 さらに「幅の指定」にチェックを入れ、表の大きさを「６０」と入力し「パーセント」にチェックすると、画面上では中央に幅が全体の６０％の大きさに表示されます。 また、「背景の色」を好きな色に設定して、「ＯＫ」ボタンを押します。色々とためしてみると良いでしょう。 表はそれぞれのセルでできているので個々の設定はここでやります。 セルにカーソルを合わせ「表」→「セルのプロパティ」で色々と工夫をしてみて下さい。 この中に、必要な文字を入れて下さい。（もちろん文字も好きな色に設定できます） 次にイラストを入れてみましょう。 今回はワープロソフト”ワード”のファイル中に、初めから入っていたイラストをそのまま使ってみました。 イラストのファイルの保存してある所をさがすのは大変でしたが，なんとか、たどりつけました。 ちなみに今回のイラストは「（Windows98c:）」から（c:\ProgramFiles\MicrosoftOffice\clipart\Popular）の所にAgree.wmf、HNDSHAK2.wmfと言うファイルを使用しました。 まず、メニューから「挿入」→「画像」を表示してから「ほかの場所」から「参照」ボタンを押して下さい。 ファイルの場所になんとかたどりついて下さい。そして、「開く」を押すとそのイラストが出てきます。 また、デジカメの画像も同様にやってみて下さい。 画面で表面する時はやや大きく写ると思いますが、イラストをクリックして適当なサイズににするため、イラストの角をドラッグします。 また、位置関係のボタンもあるので、色々ためしてみましょう。 ファイルはxxx.wmfになっていますが、ホームページの「ファイル」→「保存」を押すとxxx.gif（ＧＩＦ形式）かxxx.jpg（ＪＰＥＧ形式）を選んで保存することになります。 ＦＰＥでは自動的にどちらかの形式に変換されます。ＧＩＦもＪＰＥＧも圧縮用ファイルです。 でも、イラストの場合、圧縮してもファイルサイズ差はあまり変わりません。 画像の事は次の項でお話します。 （完成ページは「ｙ２２」です） |
| ６．「趣味」のページの作成 |
| 前述にならって、文字と表を作ります（「ｙ３」へ）。
今回は表の中にデジカメの写真を入れてみます。表を作ったあとに写真を入れると見栄えが良くなります。 また、表の枠の幅を０にすると表そのものが見えなくなり、レイアウトが良く見えることもあります。 まずは、メニューから「挿入」→「画像」。その中から「ほかの場所」、タブから「参照」ボタン。 ファイルの場所から、必要な写真ファイルを指定して「開く」ボタンを押して下さい。 うまく行ったら、画面を見て下さい。たぶん画面からはみ出すぐらい大きく表示されていると思います。 ここで、画像を適当な大きさする必要があるのですが、その前に画像のサイズの修正が必要です。 最近のデジタルカメラは200万画素以上までも写せる能力があります。そのため、データーの容量が大変大きくなっています。 ところが、ディスプレー上で見える大きさを考えてみると、そんなに大きい必要がありません。 また、ファイルの容量が大きいとインターネット上で表示されるのに大変時間がかかります。 そのため、画像の大きさ（サイズ）の変更とデーターの圧縮が必要となります。 また、ホームページであつかえる画像形式はＧＩＦとＪＰＥＧです。デジタルカメラでは、ＪＰＥＧが普通です。 ＪＰＥＧはフルカラー表示ができます。これに対してＧＩＦは256色表示なのでイラストなどの利用が多いようです。 イラストをＧＩＦ形式とＪＰＥＧ形式で圧縮した所、通常ではどちらもほとんどファイルの容量差はかわりませんでした。 しかし、ＪＰＥＧでは、さらに「画質」を下げるとだいぶ容量は小さくなりました。 まず、さきほどの画像を選択して「編集」→「画像のプロパティ」を表示して「全般」のタブの「種類」の項目から「ＪＰＥＧ」にチェックして下さい。 ファイルの容量を小さくするため「画質」を調整して50位まで下げてみて下さい。 次に、「外観」タブへ行き、写真の縦横サイズを変更します。 「サイズ」の項目のうち「サイズの指定」にチェックを入れ、「幅」と「高さ」をピクセル単位で修正して下さい。300×200ドットぐらいが良いかも知れません（注：縦Ｘ横の比率を変えないように）。色々ためしてみて下さい。 さらに、変更が終了したら「ＯＫ」ボタンを押します。 変更の次はホームページ用に新しい画像ファイルを保存します。 画質を変更後に「表示」「最新の情報に更新」をすると、ページの変更を保存するかを聞いてきます。その時の「はい」を押し、上書き保存をします。 次に「画像をファイルに保存」が表示されて、変更した画質でどこに保存するかを聞いてきます。 そこで、「参照」ボタンを押して今回はhtmlファイルのあるフォルダーに保存します。 あとは、任意の位置、大きさを調整します。ここでも、お約束事は、ファイル名は半角で入れることです。（フォルダーは日本語でも良い。） （完成ページは「ｙ３３」です） |
| ７．最後にハイパーリンクを |
| 上記で、３つのページのhtmlファイルが出来ました。
ここでは、次の3つのことをします。 １）３つのページにリンクを設定（リンクとは他ページへ移るための窓口です） ２）電子メールにリンクに設定 ３）他のホームページにリンクを設定 1)まず、自分のホームページhtmlファイル（index.htmと書かれたファイル：私のホームページではy12.htmファイル）を開いて下さい。
2)次に、電子メールアドレスにリンクを設定します。
3)自分のホームページ以外に他のホームページにリンクをはることができます。
以上練習してみて下さい。 わからない時はＡＨＭＩＣ（旭川保健医療情報センター）か山田までご連絡下さい。yamada12@ahmic21.ne.jp
|
| ホームページで練習の目次（start） ０．ホームページ製作マニュアル (ren1) １．ホームページ講演のタイトル（y0 y01 y02） ２．自分のホームページ（y1 y12） ３．自医院の紹介（y2 y22） ４．趣味の紹介（y3 y33） ５．必要なもの (ren2) ６．FTP（ファイル転送ソフトFFFTP） (FTP) ７．FＦＦTPでファイル転送 |