モジュール３０
Ｍ30
簡単なホームページ制作
第１章 Web コンテンツの作成
１ Web ページの作成演習（自己紹介）
●Web ページ作成演習
Web ページのコンテンツを作成する HTML エディタは，Microsoft Internet Explorer4.01 に付属 する FrontPage Express を使用する。このエディタの特徴は，HTML タグを知らなくても Web ペー ジが容易に作成できる点である。
（１） FrontPage Express の起動
「スタート」→「プログラム」 →「Internet Tools」 →「FrontPage Express」 の手順で起動する。 FrontPage Expressが起動する と画面下に 3 種のタグが表示さ れるが，「標準」で編集する。 その結果は「プレビュー」で確 認することができる。 （２） Web ページ作成 例として，次のような自己紹介の Web ページを作成することにより HTML エディタの使用法を説 明する。ア 文字の入力と書式 文字の入力は，ワープロと同様に入力できるが，文字サイズの変更はワープロほどの自由度はない。 また，改行の取り扱いが異なるので注意が必要である。 文字の書式変更には次のツールバーを利用する。 図のような文字列を入力し，書式を変更することによりページの見出しとする。 ●範囲指定 範囲の指定は，マウスで変更したい範囲をドラッグする。一行すべて範囲を指定する場合は，行の 先頭付近をクリックすればよい。 ●改行 行の終わりで，Enter キーを押した場合は，１行余分に行が送られる。１行のみ改行したい場合は， Shift＋Enter キーで行う。 HTML タグで説明すれば，Enter キーの場合は<P>タグ，Shift＋Enter キーの場合は<BR>タグと いうことである。 フォントの変更 フォントサイズの変更 強調，斜体，下線 文字色 ①文字の入力 ②範囲の指定 サイズの変更 フォントの変更 斜体 強調 文字色の変更
イ 文字配置の設定 文字配置の変更は，左詰め配置，中央に配置，右詰め配置の３種類がある。 文字の配置は，行単位で指定するので，指定したい行にカーソルを移動し，目的のツールバーアイ コンをクリックすればよい。 ウ 水平線の挿入 見出しの区切りなどに利用される水平線を挿入する。挿入したい場所にカーソルを移動し，メニュ ーバーから，「挿入（I）」→「水平線（L）」を選択する。 ●水平線のプロパティ 水平線の長さや太さ，色，配置などの変更は，「水平線のプロパティ」によって行う。 水平線の上で，右クリック する。
エ 表組みによるレイアウトの作成 複雑なレイアウトをする場合は，表組みを利用する。 自己紹介のページでは，写真と文字を左右に配置するために，２つのセルの表組みを使用している。 ①表作成 (1) 表の挿入場所を指定する。 (2) 表挿入のアイコンをクリックする。 (3) 挿入したいセル状態をドラッグし反転色にする。 ●表の初期状態 表挿入の初期状態では，罫線は表示されない。表およびセルのプロパティで各種の設定を行うこと により，罫線の太さや色，セルの背景色や表示位置などが指定できる。 初期値の状態をHTMLタグで説明すると，<table border="0">となっている。 写真用のセル 文字用のセル 2 セル選択 セルが作成された 挿入場所指定
図 の 挿 入 位 置を指定 画像の挿入をクリック ②画像の貼り付け イメージスキャナや素材集などによりあらかじめ準備した，画像データをページに貼り付ける。 (1)図の挿入位置の指定。 (2)画像挿入アイコン をクリック。 (3)フロッピーディスクから 呼び出すために，「参照」 ボタンをクリック。 (4)3.5 インチ FD(A：)をリス トから選択。 (5)挿入する画像ファイルを 選択。 ●表組みセルと画像サイズ 表組みセルは，貼り付けた画像のサイズにより自 動的に拡縮が行われる。 画像サイズは，画像をクリックし，画像の周囲に あらわれる８つ■をドラッグすることにより，大き さを調整することができる。 ただし，表示上拡大縮小が行われるだけで，ファ イル自体が変更されるわけではない。
③プロフィールの入力 画像を挿入した右のセルに，プロフィールを入力する。 オ 表組みとリンクの作成 トップページ（実習メニュー）へのリンクや，これから作成するオリジナルページへのリンクを表 組みを使いレイアウトする。 ①表組の作成 挿入位置を指定し，「表の挿入」ツールバ ーにより，表組を作成する。 プロフィール入力 研修メニューへのリンク オリジナルページへのリンク 表の挿入位置
リンクする文字列を入力 右クリックする ②リンクテキストの記入 それぞれのセルに，リンクする文字列を入力する ③表プロパティの変更 表のプロパティにより，表の位置，表の罫線の太さ，色，背景色など変更が行える。 表の中で右クリックし，「表のプ ロパティ」を選択する。 ●設定個所 配置： 中央 外枠のサイズ： ４ 罫線サイズ： ２ 背景の色： 銀色
④リンクの設定 作成した，表組のリンクテキストにリンクを設定する。 リンクする文字列をドラッグし範囲の設定を行い，「ハイパーリンクの作成または編集」ア イコンをクリックし，ハイパーリンクの作成を行う。 この際，トップページのリンク先は，
http://ntsv2/j/index□.htm
とする。 ※□の中には，研修室の番号が入る。（第 4 研修室…index4.htm 第 5 研修室…index5.htm） また，それぞれが作成するオリジナルのページのリンク先は，次のような URL とする。 http://ntsv2/j/aXX/original1.htmとし，aXX の aXX は，それぞれの台番号となり，original1.htm の original1 は作成したページにつ けたファイル名である。 ⑤メールアドレスリンクの設定 リンクの設定と同様に，電子 メールアドレスのリンクを設 定する。 ただし，「ハイパーリンクの種類」は，「mailto:」を選択する。 また，それぞれのメールアドレスは，次のとおりである
[email protected]
（aXX は各台の番号） リンクする文字列を指定 ハイパーリンクの作成または編集 リンク先を指定するカ ページ全般の設定 ページのタイトルや，背景色，背景画像，BGM などを設定する。 背景に画像を使用したり，BGM を鳴らす場合は，あらかじめ画像ファイルや WAV ファイルをディス クに保存しておく必要がある。 背景画像の設定 背景色の設定 BGM の設定 ページのタイトルを入力 何も無いところで，右ク リックし， 「ページのプロパティ」を 選択する。
キ 各ページのリンクについて 複数のページを作成する場合は，必ず相互に行き来できるリンクを張る必要がある。行き止まりの ページを作るべきではない。 なお，このようにして制作した Web ページはプロバイダのサーバーへ発行することで Web 上で閲 覧できるようになる。そのためには通常 FTP ソフトなどを用いるが，ここでは扱わない。各ソフト の説明書と，プロバイダの設定条件などを確認して，説明書の通りに行えば発行できる。 実際に Web 上で情報発信を行うときは，著作権に関する十分な配慮を払って行わねばならない。 例えば生徒の顔を判別できるような写真などでは本人や保護者の許諾を得る必要がある。著作権に 関しては M19 や Web 上の著作権に関するページを参考にしていただきたい。
オリジナルページ１
オリジナルページ２
■ Microsoft,Windows,Windows NT,Office,Microsoft Outlook,Internet Explorer,MSN, は 米 国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。
■ Netscape, Netscape Navigator, Netscape ONE, Netscape の N ロゴおよび操舵輪のロゴは、 米 国およびその他の諸国の Netscape Communications Corporation 社の登録商標です。
■ その他、本書に掲載したプログラム名、システム名、CPU などは一般に各社の登録商標です。本 文中では、TM などのマークは明記していません。
■ 本文中では「Microsoft Internet Explorer」のことを「Internet Explorer 5.0」または「IE5.0」、 「Internet Explorer」と記述しています。 平成１３年１月２９日 初版発行 平成１３年５月１日 改定
