今回は、 ホームページ・ビルダーを使って（いわゆる）ホームページの作成をします。 私自身よくわかっていないソフトなので、 各自でいろいろ試して“遊んで”ください。
(7.1.1) デスクトップにある「ホームページ・ビルダー」 と書かれたアイコンをダブルクリックして起動する。 起動したら、左上の「スタート」をクリックし、「ページを作成する」「白紙ページ」とクリックし、 「OK」をクリックする。
(7.1.2) 書き始める前に、 「ファイル」「名前を付けて保存...」をしておこう。 「保存する場所」が「マイ ドキュメント」になっているが、 そのあたりをクリックし、「'fs02\home\z07ja\z07ja0??' の .win...」に変更する。 するとフォルダ tmp, web などのアイコンが見えるから、 web をダブルクリック。 ファイル名は newpage1.html となっているが、 これを .html で終わる適当な名前 --- ただし、すでに存在するファイルと重複してはいけない --- に変更し、「保存」。
(7.1.3) 以下では、少し書き足すごとに「ファイル」「上書き保存」とする。 保存しないで終了するときはほかのソフトと同じである。
(7.1.4) 既存の .html ファイルをホームページ・ビルダーで編集するときは、 アイコンを右クリックして「ホームページ・ビルダー 10で編集」とすればよい。
(7.1.5) ※ メモ帳で書いた .html ファイルはホームページ・ビルダーで編集しないほうがよい。 Explorer の中でアイコンを見ているだけではメモ帳で書いたのかホームページ・ビルダーで作ったのか見分けがつかないが、 メモ帳で中身を見て先頭から数行目に
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version ...とあるのが後者である。 前回作った index.html をホームページ・ビルダーで編集しようとすると 「エラーが検出されたので、修正しました」と出て、 終了するときに保存するかどうか聞かれる。 保存するとどうなるか試したい人は、コピーを作ってそちらで試すように。
(7.1.6) 紙の上に部品を置いてゆく感じでホームページが作れる。 メインの枠のすぐ上には「ページ編集」「HTML ソース」「ページ/ソース」「プレビュー」と書かれており、 これらを切り替えながら作業を進める。 部品を置くのは「ページ編集」。 どう見えるかを確かめるのが「プレビュー」。 「HTML ソース」では、 前回メモ帳で書いたものにあたるファイルの内容を見ることができる。 （「ページ/ソース」の説明は略。）
(7.1.7) 「挿入」「段落」「標準」とクリックしてから どこかにマウスカーソルをあてて左ボタンを押し、 押したまま少し右にマウスカーソルを動かして左ボタンを押すのをやめると、 水色の枠が表示される。 この中には文章が書ける。 少し書いてから「プレビュー」してみよ。 書いたあとでも、位置や枠の大きさを変えることができる。 それには、 そのあたりをクリックすることで先ほど出ていた周上の八個の点を出し、 それらをドラッグする。 削除するには、それらの点を出しておいて Delete キーを押すか 「編集」「削除」。
(7.1.8)
文字の大きさを変えるのは「A▲」「A▼」と書かれたボタン。
そのすぐ右のボタンが「文字色の変更」「フォントの変更」。
その左の「B」「I」「S」で字体などが変えられる。
さらにその左に、「左揃え」「中央揃え」などがある。
(7.1.9) 「挿入」「段落」「見出し１」で前回の <h1>...</h1> に当たる見出し。 「挿入」「リスト」で箇条書き。 （これらを「HTML ソース」で見てみると、 先週習ったとおりに書き込まれていることがわかる。）
(7.1.10) 「表」「表の挿入...」で表。
(7.1.11) リンクをはるには 「挿入」「リンク...」。 「URL へ」をクリック。 URL を打ち込み、「OK」をクリック。 ページ上に表示される文字列は URL そのものになってしまうが、 あとから変えることができる。 プレビュー画面でリンクをたどれば、正しくリンクできたかどうかわかる。 戻るには青い「←」。
(7.1.12) 左端にあるいろいろなものは、適当に試すこと。 （おかしなことになったら「編集」「元に戻す」でなんとかなる（かも）。）
(7.1.13) <title>...</title> は 「編集」「ページの属性...」「ページ タイトル」で設定する。
(7.1.14) 自作の絵などを入れるには、 そのファイルのアイコンをドラッグ & ドロップしてくればよい。
(7.1.15) 複数の画像ファイルからアニメーション（.gif ファイル）を作るには 「ツール」「ウェブ アニメータの起動」。 「アニメーション ウィザード」を選び、あとは自分で考えて。 ペイントで絵を書くのが得意な人にはおすすめ（かも）。
(7.2.1) ホームページ・ビルダーを使い、フォルダ web 内に ファイル index2.html を作りなさい。 （この名前は内容を表していないのであまりよくないが、 統一のため、こうする。）
(7.2.2) （index.html に戻るリンクは、 ブラウザの「戻る」ボタンで戻ってもらえばよいから不要である。 はる場合は <a href="./">...</a> とする。 作成中はこのリンクをたどるとファイル一覧画面にいってしまうが、 保存してから http://wwwedu.ipe.kanazawa-u.ac.jp/%7Ez07ja0??/ として見れば正しくリンクがはられている。）