KompoZerを起動すると空白ページが現れます。改めて新しくWebページを作成するには、メニューバーから[ファイル][新規作成]を選びます。
空白ページに下図のようにテキストを入力してみましょう。
次に、メニューバーから[書式][ページのタイトルとプロパティ]を選び、タイトルの欄を「練習」とします。この文字はWebブラウザでページを表示した時にタイトルバーに表示される他、ブックマーク(お気に入り)の見出しにも用いられるので、空欄にせずに適切なタイトル文字を入力するようにしてください。また、「言語」と「文字エンコード」の欄も下図のように設定してください。
ページを作成したらツールバーの
)を選び、Wドライブに適当な名前で保存してください。ファイル名は英数字でわかりやすい名前にし、拡張子は「.htm(または.html)」とします。ここでは「mypage.htm」という名前で保存するものとします。ファイル名に日本語を使ったり名前の途中に空白を入れると、自分のパソコンで見ることができても、Webサーバを経由して他の人が見る時にうまく表示できないことがあるので注意してください。
ファイルアイコンをダブルクリックし、ブラウザで開いてみましょう。
画面の左側にKompoZerのウィンドウ、右側にブラウザ(InternetExplorer)のウィンドウを表示させ、KompoZerで作ったページがブラウザではどう見えるかを確認しながらページ作りを進めます。ここで、KompoZerの作成ウィンドウとブラウザのウィンドウのサイズは必ずしも同じとは限らないということに注意してください。「ブラウザのウィンドウサイズは閲覧する人それぞれ」です。ホームページを作成するにはこのことを念頭に置くと良いでしょう。
以下、ページ作りは次の手順を繰り返します。
|
→ |
|
→ |
|
「カット＆ペースト」や「コピー＆ペースト」などの切り貼り操作は、ワープロなどと同様です。カットしたい箇所をマウスで範囲指定し、マウスの右ボタンを押して「切り取り」を選ぶと(またはCtrl+X)、その箇所が切り取られてクリップボードにコピーされます。そして、任意の箇所にマウスポインタを移動して、マウスの右ボタンを押して「貼り付け」を選ぶと(またはCtrl+V)、クリップボードの内容が貼り付けられます。上記の「切り取り」の代わりに「コピー」を選べば(またはCtrl+C)、削除されずにクリップボードにコピーされます。
範囲指定した部分の移動は、マウスのドラッグ操作で行うこともできます。
Webの最大の特徴はリンクにあります。他のページへのリンクを設定する場合は、まずその箇所をマウスで範囲指定します。ここでは、「私のページへ」の箇所を範囲指定してください。次に、ツールバーの
で、リンク先のファイル名を「index.htm」と入力して各自のホームページにリンクしてみます。
うまくリンクが設定されたかどうか、ブラウザで確認してください。
一般には「http://www......」のようにリンク先のURLを入力するわけですが、これをいちいちキーボードから入力しなければならないというわけではありません。「弘前大学のページへ」のリンクを設定してみましょう。まず、ブラウザで「弘前大学」のページを表示します。そして、画面に表示されているアドレス(URL)の内容をマウスで範囲指定して右ボタンを押し、「コピー」を選びます。するとこの内容(URL)がクリップボードにコピーされます。
次に、「弘前大学のページへ」の箇所を範囲指定し、ツールバーので、リンク先の入力欄に貼り付けます。
友達が作ったページへのリンクは次のようにします(重要)。友達の h11p5555 さんがWドライブに mypage.htm というhtmlファイルを作ったとすると、このページのURLは
文書を作る場合は、まずはテキストをどんどん入力し、全部入力し終えてから、必要箇所を指定して文字の大きさや色を変えたり、リンクを設定するとよいでしょう。
(見出し) ... 「見出し」にしたい箇所をマウスで範囲指定します。ここでは、「ホームページ作りの練習」の箇所を範囲指定してください。次に、ツールバーの
の箇所を[見出し 2]に変更します。「見出し 1」が最も大きな見出しで、「見出し 6」が最も小さな見出しとなります。
このようなKompoZerの操作で作られるHTMLファイルの中身がどのようなものかを、(付録1)で解説しましたので参考にしてください。
(文字と背景の色) ... 文字に色を付けたい箇所をマウスで範囲指定します。ここでは、「赤い文字」の箇所を範囲指定してください。次に、[書式] [文字色]を選び、希望する色(ここでは赤)にします。同様に、「黄色の文字」の箇所を黄色にしてください。黄色にした箇所の背景色を青にするには、ツールバーの
で指定します。下図のようになります。
背景全体の色や画像の設定は、[書式][ページの配色と背景]で、あらかじめ用意した画像ファイルを「背景画像」として指定するか、「次の配色にする」を選択して「背景」の色を指定します。
(文字のサイズ) ... 文字のサイズを変えたい箇所をマウスで範囲指定し、
で大きく、あるいは
で小さくします。ここでは、「大きな文字」を大きく、「小さな文字」を小さくしてみましょう。
「箇条書き(リスト)」にしたい箇所、ここでは「文字の色」〜「声でご挨拶」までを範囲指定します。そして、ツールバーの
(順番なし)、または
(順序付き)を選びます。
表を作りたい場所、ここでは名前の下の位置にカーソルを移動します。ツールバーの
を選ぶとウィンドウが現れるので、「詳細設定」タブにして行数を「3」列数を「2」とし、「テーブルの横幅」を空欄にします。
[テーブル][テーブルのプロパティ]で[枠線]を「0」とすると枠線は表示されません。編集画面では枠線が赤の点線で表示されて見えますが、ブラウザで確認すると枠線が表示されていません。
(画像ファイルの作成) ... ペイントソフトやドローソフトで描き、HTMLファイルと同じ場所(Wドライブ)に画像ファイル(GIFまたはJPG形式)を作成します。デジカメで撮影した写真画像の場合、必要以上に高解像度(例えば2560×1920ピクセル)の画像となり、このまま利用すると「重い」ページになってしまいます。PictBearなどのソフトを使い、予め320×240〜640×480程度に縮小しておきます。また、画像ファイルのファイル名は、内容を表す適切な名前(英数字)にするよう心掛けます。
(画像ファイルへのリンク) ... リンクを設定したい箇所、ここでは「画像の表示」の箇所を範囲指定してください。そして、ツールバーのでリンク先のファイル名(例えば「photo.jpg」)を指定します。ブラウザで「画像の表示」の箇所をクリックしてみてください。
(画像の貼り付け) ... 作成中のページに画像を貼り付けるには、画像ファイルのアイコンを貼り付けたい位置にドラッグ操作を行うのが簡単な方法です。画像を入れたい場所にカーソルを置き、[挿入][画像]で画像ファイルを指定することもできます。
貼り付けた画像をダブルクリックし、[大きさ]タブで画像サイズを、[表示]タブで文字の回り込みを指定することができます。画像のサイズはマウスのドラッグ操作で変更することもできますが、この方法では見掛け上の大きさが変わるだけで、画像ファイルが変わるわけではありません。上掲のように予めサイズを縮小しておくのが賢明です。
(Webアクセシビリティ) ... 画像を見ることができない利用者を考慮し、「代替テキスト」の箇所に説明文字を書いておきます。この説明文字は、ブラウザで表示画像の上にマウスポインタを置くと一時的に表示されます。視覚障害者は画像を見ることができないので、この説明文字を合成音声で読み上げて、これを手掛かりに情報を得ています。従って、ここに記載する説明文字は的確な表現となるように吟味することが重要です。このようなWebアクセシビリティに関して2004年にはJIS規格が制定されています。
動画ファイル(例えばMPG形式)をWeb文書ファイル(HTMLファイル)と同じ場所に用意します。ここでは、「hello.mpg」という名前のファイルとします。
(動画ファイルへのリンク) ... リンクを設定したい箇所、ここでは「画像の表示」の箇所を範囲指定してください。そして、ツールバーのでリンク先のファイル名(例えば「hello.mpg」)を指定します。ブラウザで「画像の表示」の箇所をクリックしてみてください。動画再生ソフト(Plugin)のウィンドウが現れ、動画が再生されます。なお、パソコンによってはPluginソフトが無いために再生できないことがあります。
(動画の貼り付け) ... 作成中のページに動画を貼り付けるには、KompoZerのページ作成画面の適当な箇所にカーソルを置き、メニューバーの[挿入][HTML]を選びます。ウィンドウが現れるので、下図のようにHTMLタグを入力してください。
(WAVEファイルの作成) ... 音声を録音するには、Audacityなどのソフトを使います。ここではモノラルマイクで録音しますから、画面右上の「2(Stereo)Input」を「1(Mono)Input」に変更しておきます。上手に録音するコツは、「波形がクリップしない程度になるべく録音レベルを上げる」ことです。
録音した波形を見ると、録音開始と終了の箇所に、雑音や無音区間があると思います。この不要な部分は、マウスのドラッグ操作で範囲指定し、[編集][切り取り](またはCtrl+X)で削除できます。次に、[エフェクト][正規化]の操作で、適切な音量に加工します。
このまま保存すると「CD並みの品質」となり、ファイルサイズが大きくなってしまうので、画面左下の「プロジェクトのサンプリング周波数(Hz)」の箇所を[44100]から[8000]に変更した後、[ファイル] [書き出し]を選び、「ファイルの種類」を「WAV(Microsoft)16bit PCM 符号あり」にして「hello.wav」の名前で保存します。
(MIDIファイルの作成) ... BGMなどの音楽ファイルを作成する場合は、「サクラ」を起動し、「ドドソソララソー」のように楽譜を入力し、[ファイル] [MIDI形式で保存]で「bgm.mid」などのファイル名で保存します。
(音声ファイルへのリンク) ... リンクを設定したい箇所、ここでは「声でご挨拶」の箇所を範囲指定してください。そして、メニューバーの[挿入][リンク](またはツールバーの)でリンク先のファイル名を指定します。ここでは、先ほど作った「hello.wav」としてください。ブラウザで「声でご挨拶」の箇所をクリックしてみてください。音声再生ソフト(Plugin)のウィンドウが現れ、音声が再生されます。
(音声の貼り付け) ... 作成中のページに音声や音楽を貼り付けるには、画面の適当な箇所にカーソルを置き、メニューバーの[挿入][HTML]を選びます。ウィンドウが現れるので、下図のようにHTMLタグを入力してください。
(BGM音楽の貼り付け) ... あまり好ましいとは思いませんが、作成中のページにBGMファイル(例えば「bgm.mid」)を貼り付ける場合は、上記のHTMLタグを次のようにします。
KompoZerでWebページを作るとどのようなファイルが作られるのでしょうか。メモ帳でファイル(mypage.htm)を開いてみてください。
これが「ホームページ」の実体です。KompoZerでさまざまな操作をしながら出来上がったのが、この文字ファイルで、ホームページの内容がこのように記述されているということです。InternetExplorerなどのWebブラウザは、これを解読してそこに記載されている指示に従ってページのレイアウトや色を作り上げて表示しているというわけです。ここでは、次の箇所に注目してみましょう。
以上のように、<title></title>などはブラウザに対して特別な指示を与える記号で、タグと呼ばれます。KompoZerなどのホームページ作成ソフトを使うと、WISYWIG操作でこの必要な指示をタグとして埋め込んだ文字ファイル(HTMLファイル)を作ることができます。タグの使い方を知っていれば、メモ帳などのテキストエディタを使ってHTMLファイルを作ることもできます。
そして、WebブラウザはHTMLファイルに記載されたタグを解釈して、その指示に従って表示画面を作る仕組みになっているのです。