|
３．ホームページ作成 |
3-1-1.ホームページの真の姿（HTML文書のソース）を見る方法
1)Netscape Navigator でどこかのホームページを開く。
2)メニューの[表示]→[文書のソース]で、現在表示しているページの元の内容を表示。
・これがホームページの真の姿（HTML形式のテキストファイル）
・ブラウザはこれを解釈して画面に表示
3)[表示]→[文書情報]で、表示しているページのファイル構成を表示。
・通常、１つのページは複数のファイルから構成される
- 表示しているHTMLファイル
- ボタン、飾り罫、背景などページで用いている画像ファイル
など
(1) HTML文書
タグと呼ばれる「<」と「>」 で囲まれた命令で文書の表現方法が指示されているテキストファイル
テキストファイルというのは、どのコンピュータでも取り扱える形式のファイル
ファイル名は「xxxxxx.html」（Windows95では「xxxxxx.htm」）
ファイル名の「.」の後の部分を拡張子と呼びファイルの形式を区別するのに用いる
ファイル名やタグは世界中のコンピュータで利用可能な文字（直接入力（半角英数））を用いる
本文も、半角カナ文字、丸囲み数字など特定のコンピュータだけで利用可能な文字は不適
<HTML> HTML文書の始まり
<HEAD> ヘッダの始まり
ヘッダ
</HEAD> ヘッダの終わり
<BODY> 本文の始まり
本文
</BODY> 本文の終わり
</HTML> HTML文書の終わり
(3) ヘッダ
<TITLE>ページのタイトル</TITLE>
タイトルはウィンドウのタイトルバーに表示される
その他、コメントやファイルの特徴など
(4) 本文
主なタグ
<BR> 改行
<HR> 横罫線
<P>段落</P>
<CENTER>センタリング</CENTER>
<B>太字</B>
<I>斜体</I>
<IMG SRC="xxxxxx.JPG"></IMG> 画像ファイルの表示
<FONT>フォントやサイズや色</FONT>
<FONT FACE="ＭＳ Ｐゴシック">ＭＳ Ｐゴシック</FONT>
<FONT SIZE=7>フォントサイズ7</FONT>
<FONT COLOR=red>赤色</FONT>
<A>リンク</A>
<A HREF="http://www.iwate-u.ac.jp/index-j.html">岩手大学</A>
<A NAME="Target">ターゲット</A> 文書内の場所に名前をつける
<A HREF="#Target">ターゲット</A> 名前の場所にリンク
など
本文の内容がウィンドウ内に表示される
3-2-1．作成するホームページの構成の立案
すべての情報を１つのページにすると、いろいろと不便なので、あらかじめ、いくつかのページに分けることを考え、各ページの内容、これらのページ間のリンクの設定を考える。
（実習例）
|
[参加者ページ] |
[表紙ページ] |
[詳細ページ] |
3-2-2.ＨＴＭＬ文書や画像ファイルのファイル名、保存場所などを決める
今回は同一のフォルダ内にすべてのファイルを保存することとする。
リンク先にはファイル名だけを正しく入力すればよい。
ファイル名は「myouji」(「myouji」は各自の名字の意味）で始める。
表 紙：myouji.htm
詳 細：myouji1.htm
画像１：myouji1.jpg
画像２：myouji2.jpg など
(1) Netscape Navigator Gold V3.0
HTML文書は普通のテキストファイルであるので、タグの使い方がわかれば、テキストファイルを編集できるソフト（「メモ帳」やワープロなど）でホームページを作成可能である。
しかし、タグの書き方を覚えるのは面倒だし、画面に表示される状態が想像しにくいので、ワープロを操作するような感覚でホームページを作成できるソフトがいろいろとある。
今回は、複雑な機能は備わっていないものの、ブラウザと一体化していて手軽に使えるNetscape Navigator Gold V3.0を用いる。
(2) 作業開始
新規にページを作成する方法と、ブラウザで表示中のページをひな型に編集する方法とがある。
Ａ新規文書の作成
ブラウザのメニューから[ファイル]→[新規文書]→[空の文書]を選択
Ｂ表示中の文書の編集
1)ツールバー真ん中やや左の[編集]ボタン（メニューの[ファイル]→[文書を編集]）を選択
2)ローカルに保存するかというウィンドウが開くので、各自のフロッピーディスクに保存する。すると編集画面になる。
練習のため、見本のページを元に編集画面にしよう。
(3) 基本操作を試す
見本のページを元に、いろいろな機能を順に説明するので、試してみる。
各ツールボタンにマウスカーソルを合わせるとそのボタンの役割がチップ（ふきだし）やステータスバー（画面の最下段）に表示されるので、これを参考に操作する。
主な機能 文字の装飾、配置、段落の設定
罫線や表、画像の挿入
リンクやターゲットの設定
[Enter]は<P></P>タグ（改段落）、<BR>タグ（改行）は[Shift]+[Enter]
(4) 作成したホームページの内容確認
作成中の文書を保存して、ブラウザで表示させてみると、いろいろと盛り込んだ効果や、各ページ間のリンクがちゃんとなっているか、などが確認できる。
ツールバー中断左寄りの[ブラウザで表示]（メニューの[ファイル]→[ブラウザで...]）を選択するとブラウザのウィンドウが新たに開く。
(5) 画像ファイルの入手
写真、イラスト、背景やボタンや飾り罫なども画像ファイルである。
画像ファイルにはいろいろなファイル形式があるが、ホームページで使えるのはファイル名の最後が「.jpg」か「.gif」のもの。
あまり大きな画像は、通信時間がかかり、ホームページを見る人に迷惑なので避けた方が無難。
Ａ自前の写真
デジタルカメラを用意するので、自分の顔や学内の風景などをその場で撮影してもよい。
写真を準備してある場合はスキャナで取り込む。
作成した画像ファイルは各自のフロッピディスクに保存する。
以上については、折りを見て藤崎と相談すること。
Ｂ．インターネットで入手
ホームページ素材集というのが、いくつかのWebサイトや市販の雑誌にある。
検索ページで「ホームページ素材集」をキーワードに検索すると、無料で自由に使える画像ファイルが入手できる。
著作権があるので、くれぐれも「無料で自由に使っていい」と明記してあるもの以外は使わないこと。
(6) いよいよ作成
公開講座で皆さんが作成したページは１年間、当学科のホームページで公開します。短い実習時間なので、あまり欲張らずに仕上げてください。
見本をひな型に始めても、新規文書から始めても、構いません。皆さんがやりやすいと思う方法でチャレンジしてください。
(7) 作成したホームページをWebサーバにアップロード
作成したホームページを公開するには、24時間稼働しているWebサーバと呼ばれるコンピュータにファイルを転送（アップロード）する必要がある。
これには、こうしたWebサーバのユーザである必要があるので、この部分の実習は行なえない。
作業は、FTPソフトを使ってファイル転送する。
藤崎が完成した人の分から、逐次作業するので、完成したら、藤崎までフロッピーディスクを持参する。
今日は一時的に地域システム学研究室の場所に転送する。
(8) 作成したホームページを閲覧
お互いの作成したページをブラウザで確認し、本日の成果を反芻しよう。