ＩＣＴメディア編集Ⅱ 2025年11月21日
【参考】ホームページ・ビルダーによるフレーム作成（自習室での練習用）：
・本年度、2053教室のPCには、ホームページ・ビルダーがインストールされておらず、皆さんは、自習室のみで使用できるようですので、講義中には行いません。参考にしてください。
・ Ｗｅｂページ作成用ソフトには様々なものがあり，Ｗｅｂページの表現もより高度なものまで対応したものがあります．次に市販の「ホームページ・ビルダー」というソフトウエアを用いて，Ｗｅｂページを作成してみましょう．
・ 「ホームページ・ビルダー」は様々な機能がありますが，基本的には，先ほど使用した，MS-Wordと同じように，ワープロ感覚（標準モード）で，出来上がりと同じ画面を見ながらの入力になります．また，プレゼンテーション用のパワーポイントなどと同じように，入力する文字などを自由に配置することが可能な，「どこでも配置モード」も用意されています．
・ ここでは，フレームというＷｅｂページ構造を用いた表現について，実際にページを作成してみましょう．
フレーム
Ｗｅｂページの表示は，通常，１ページごとですが，一度に複数のＷｅｂページを表示することが，フレームと呼ばれるＷｅｂページを表示するいくつか分割した区画を用いた，フレームレイアウトページ（ルートフレームセットとも呼ばれる）を作成することで可能となります．
以下の例では，２つのフレームを用いていますが，左側のフレームは，Ｗｅｂサイトの目次を常に表示するようにしたナビゲーション用フレームなどとしてページを作成しています．これにより，常に直接先へジャンプすることが可能となります．また，目次で選択したリンク先は，右側のフレームに表示したり，全体に表示させたり，新たなページに表示したりと指定することができます．フレームは，いくつでも，上下左右も，大きさを変えても分割できます．
注意：フレームはＨＴＭＬの新しい拡張機能であるため，Ｗｅｂブラウザの中には，フレーム表示に対応していないものがあることに注意して下さい．
作成練習（演習）
フレームはページを分割して表示するための枠にすぎません．まず，フレームの分割や大きさなどのフレームのレイアウトを決めて，各フレームの中に表示するＷｅｂページを作成し，また，リンク先やどのフレームに表示するかなどの設定をしていくことになります．
では，ホームページ・ビルダーを使用して，フレームを利用したWebページを作成していきましょう．スタートメニューの“プログラム”の中の“ホームページ・ビルダー22”のさらに，“ホームページ・ビルダー・クラシック”を選択して立ち上げます．
（現在，2053の教室には残念ながら、インストールされていないようです。自習室には、ホームページ・ビルダー22 （SPとクラシック）が導入されているようです．以下の説明は，一部で古いVersionの画面などがありますが、基本操作は、以下の説明で問題ないと思います。）
自習室では、ホームページ・ビルダー22クラシック）を使います。
１． 起動時に以下のようなウインドウが表示されましたら，編集スタイルは，「スタンダード」を選択し，OKをクリックします．ホームページ・ビルダー22では、ファイルメニューの「フレーム設定の新規作成」を選択して、４．で示すウィザードのウインドウにいきます。
設定によっては、このページはスキップされます。以下のスタートから表示されることもあります。
２． ボームページ・ビルダーの初期画面が表示されましたら，新規にページを作成していくことになるため，ツールバーの「スタート」をクリックし，スタートのウインドウから，「ページを作成する」を選択します．さらにページ作成方法の選択では「白紙ページ」を選択する．
以下から画面がスタートすることがあります．
設定によっては、このスタートから表示されます。
３． 白紙ページの作成のウインドウが表示されますので，下記の図のように「PCページ」，「フレームページ」，「標準モード」と選択してください．ここで，フレームを使用しない場合には，ページの種類を「通常ページ」にします．また，編集モードで，「どこでも配置モード」に設定すると，文字や図などの配置を自由におくことが可能です．
４． ページの作成ウイザードで，「フレームページ」を選択すると，以下のようなフレーム作成ウイザードのウインドウが表示されます．今回は，「２分割横－２」を選択し，次へをクリックし，フレームの選択は，そのままで，完了をクリックします．ホームページビルダー22では、最後のウィザードのウインドウでは、「標準モード」を選択します。
２１では標準モードをこのあと選択します．
上記のような編集スタイルになった場合には、「かんたん」の編集スタイルですので、メニューバーなど機能が制限されています。以下の手順で、「スタンダード」の編集スタイルで、以後、編集をしていきましょう。
メニューバーのファイルから「ようこそダイアログを開く」
編集スタイルをスタンダードに変更します．※２１ではする必要はありません．
５． 新規のフレーム構造のページが表示されましたら，目次となるフレームのページについて，フレーム幅の調整を行います．左のフレームをクリックし，マウスの右ボタンを押して，プルダウンのメニューから「フレームの属性」を選択します．属性のウインドウで，フレームサイズを調整します．ここでは，「200ピクセル」としています．
６． フレームの設定などが終了すると，いよいよ文字や画像などの入力となります．まず，目次となるフレーム側から入力していきましょう．ツールバーの「段落の挿入・変更」部分で，「見出し２」を選択し，文字を入力します．ここでは，「Webページ作成練習の目次」と入力します． 文字の配置は，ツールバーの「中央揃え」で変更します．入力した文字の属性は，ウインドウの左の属性部分で，確認できます．ホームページビルダー２２では、「表示」メニューの「属性ビュー」を選択して右のウインドウで見えるようにします。
中央揃え
７． 文字を入力しましたら，文字の色や形状などを変更してみましょう．変更したい文字を選択したあと，ツールバーの「フォントの変更」ボタンをクリックします．フォントの設定ウインドウで，色や文字装飾などを変更しましょう．
メニューバーの「書式」からも文字の設定が各種できます．
８． 目次のタイトルの下に「水平線」を入力してみましょう．水平線を入力したい位置に入力カーソルを移動させ，メニューバーの挿入から「水平線」を選択します．属性の表示の部分で，太さなどを変えることもできます．
９． 目次となる文字を入力していきます．「標準」の入力で，「トップページ」，「作成練習（２）」，「作成練習（３）」，「情報科学センターのページ」，「明治大学のページ」をそれぞれ，改行で続けずに，カーソルを移動させて入力してください．
１０． 目次の部分（左側）のそれぞれにリンクを張っていく前に，右側のトップページを作成しておきます．ここでは，ページの背景の色を変更してみましょう．右のフレーム内を選択し，属性から，背景を設定します．ここで，画像を用いることも可能です．
１１． 見出しの文字や水平線，標準の文字入力を行っていきます．ここでは，「トップページ」，水平線，「このページがトップページになります．」と入力しています．
１２． トップページと入力した文字をロゴ化してみましょう．ロゴ化したい文字を選択し，左の「ナビメニュー」の中の「ロゴ（飾り文字）の挿入」を選択します．メニューバーの「挿入」から「ロゴ」を選択してもできます．字体の設定や背景の設定を行います．
文字も詳細が設定できます．
１３． トップページに画像を挿入してみましょう．「このページがトップページになります．」の文字の下にカーソルを移動し，「ナビメニュー」から「画像ファイルの挿入」で，「素材集から」を選択します．当然ファイルからも入力できますし，ドラッグアンドドロップで，ファイルを画面上に直接入れ込むことも可能です．画像集の適当な画像を挿入してみましょう．ホームページビルダー２２では、「画像や画像の挿入」となっており、中身も異なります。「フレーム設定の新規作成」を選択して、４．で示すウィザードのウインドウにいきます。
１４． ここまでできましたら，とりあえず，一度すべてを保存しておきます．メニューバーの「ファイル」から「すべて保存」を選択します．今回，フレームを使用しているため，フレームの数に応じたWebページのファイルとフレームレイアウトのファイルができることになります．目次のページを「test10.html」，トップページを「test11.html」とします．また，ページ内に画像などのファイルがある場合には，「素材ファイルをコピーして保存」というウインドウが表示されます．今回は変更せずに保存しておきます．最後に，フレームレイアウトのファイル名を入力して保存が終了します．今回は，「frame1.html」としておきましょう．なお，保存する場所は，講義時間は，ディスクトップ上で作業しましょう．
１５． 次に，目次ページのそれぞれの項目にリンクを設定していきます．リンクを設定したい文字列を選択し，マウスの右ボタンで，プルダウンのメニューから「リンクの挿入」を選択します．属性のウインドウで，リンクしたい場所の設定を指定します．ファイルからの場合には，「ファイル」を選択して，参照先のファイルを開きます．URLの場合には，URLを選択し指定するURLを書き込みます．選択されたページを開きたい位置をターゲットとして指定します．今回の場合には，フレームの左右，全画面，新しいウインドウなどが設定できます．
トップページは，ディスクトップ上にあるファイル（test11.html）を探して指定します．
ターゲットは，トップページの場合には，右のフレーム（right）を指定します．
情報科学センターのページは，URLとして，http://www.kisc.meiji.ac.jpを指定します．ターゲットは「全画面」としてみましょう．
明治大学のページは，URLとして，http://www.meiji.ac.jpを指定します．ターゲットは「新しいウインドウ」としてみましょう．
１６． すべてのリンク設定が終了しましたら，再度，「すべて保存」を行っておきます．
１７． 完成したもののプレビューを見てみましょう．ページ編集の画面とさほど変わりませんが，リンク先へジャンプも可能です．
１８． 次に各ページのソースを見てみましょう．
１９． もしもフレームに対応していない場合の表示も変更できます．
２０． 出来上がったファイルがきちんと機能するかを確認してみましょう．フレームでは，フレームレイアウトのファイルが，全体表示のファイルとなりますので，「frame1.html」をWebブラウザで見てみましょう．リンク設定もきちんとできているか，ターゲットはちゃんと指定どおりとなるか確認してみましょう．
以上の説明で，例としてあげたＷｅｂページと同じものができたでしょうか．
これまでに説明してきたタグやWeb作成用ソフトの使い方以外にもたくさんの表示手法や機能があります．いろいろと実際にＷｅｂページを作成しながら，試してみて下さい．
加藤のページへ | ＩＣＴメディア編集Ⅱ | Ｗｅｂページ開設練習とファイル転送について（再掲＋実習課題） | 11月21日講義資料の先頭ページへ