2006 年度「情報処理基礎」 2006-07-14

§7.1 口上

(7.1.1) 今回は、 ホームページ・ビルダーを使って(いわゆる)ホームページの作成をします。 私自身よくわかっていないソフトなので、 各自でいろいろ試して“遊んで”ください。

§7.2 ホームページ・ビルダーを用いたホームページの作り方

起動・終了など

(7.2.1) デスクトップにある「ホームページ・ビルダー」 と書かれたアイコンをダブルクリックして起動する。 「ホームページ・ビルダーへようこそ」という画面が出るので、 (とりあえずは)そのまま「OK」。

(7.2.2) 書き始める前に、 「ファイル」「名前を付けて保存...」をしておこう。 「保存する場所」は web である。 ファイル名は newpage1.htm となっているが、 拡張子 .html が使える場合は .htm よりも .html のほうが望ましいので、 .html で終わる適当な名前をつけ、「保存」。

(7.2.3) 以下では、少し書き足すごとに「ファイル」「上書き保存」とする。 その際、「保存ファイル一覧」画面が出ることがある。 画像などは別ファイルに保存されるためである。 ここでは単に「OK」を押せばよい。 (それから Explorer でファイルの一覧を見ると、 自分が保存したファイル以外にいくつかのファイルができていることがある。)

(7.2.4) 保存しないで終了するときはほかのソフトと同じである。

(7.2.5) ホームページ・ビルダーで作った既存の .html ファイルを編集するには、 Explorer (cf. §2.4) でそのファイルのアイコンを右クリックし、 「ホームページ・ビルダー V6.5で編集」。

(7.2.6) (.html ファイルは、 Explorer の中でアイコンを見ているだけではメモ帳で書いたのかホームページ・ビルダーで作ったのか見分けがつかないが、 メモ帳で中身を見れば、先頭から数行目に

<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version ...
とあるので区別がつく。 メモ帳で書いたファイルはホームページ・ビルダーで編集しないほうがよいだろう。 しようとすると「エラーが検出されたので、修正しました」と出て、 終了するときに保存するかどうか聞かれる。 保存するとどうなるか試したい人は、コピーしてからにすること。)

編集作業

(7.2.7) 右下の枠の中に部品を置いてゆく感じでホームページが作れる。 この枠には「ページ編集」「HTML ソース」「プレビュー」の三つのモードがある。 部品を置くのは「ページ編集」。 どう見えるかを見るのが「プレビュー」。 「HTML ソース」では、 前回メモ帳で書いたものにあたるファイルの内容を見ることができる。 (保存すると、その内容がテキストファイルとして保存される。)

(7.2.8) たとえば「挿入」「段落」「標準」とクリックしてから どこかにマウスカーソルをあてて左ボタンを押し、 押したまま少し右にマウスカーソルを動かして左ボタンを押すのをやめると、 水色の枠が表示される。 この中には文章が書ける。 少し書いてから「プレビュー」してみよ。 書いたあとでも、位置を変えることができる。 それには、 そのあたりをクリックすることで水色の枠が出ていたときに出ていた周上の八個の点を出しておいて、 その八個の点をドラッグすればよい。 削除するには、八個の点を出しておいて Delete キーを押すか 「編集」「削除」。

(7.2.9) 文字の大きさを変えるのは「A」「A」と書かれたボタン。 そのすぐ右のボタンで、「フォントの属性」(「サイズ」、「色指定」、「書体」)が変えられる。 その左の「B」「I」「U」で字体などが変えられる。

(7.2.10) 「挿入」「段落」「見出し1」で前回の <h1> に当たる見出し。 「挿入」「リスト」で箇条書き。 (これらを「HTML ソース」で見てみると、 先週習ったとおりにソースファイルに書き込まれていることがわかるだろう。)

(7.2.11) 左下に出ている画像ファイルはドラッグ & ドロップすれば貼りつけられる。 そのあとで大きさの変更が可能。 (左下にはほかにもいろいろおもしろそうなものがあるので、 いろいろ試すこと。 おかしなことになったら「編集」「元に戻す」でなんとかなる(かも)。)

(7.2.12) 「表」「表の挿入...」で表。

(7.2.13) リンクをはるには 「挿入」「簡単リンク挿入...」。 「通常リンクの挿入」がすでに選ばれているので「次へ」。 二箇所書き込むところがあるが、 前回リンクのはり方を理解していればたぶん書き方はわかると思う。 記入したら「完了」。 プレビューして、クリックして確かめる。 (戻るには青い「←」をクリックする。)

(7.2.14) 複数の画像ファイルからアニメーションを作るには 「ツール」「ウェブアニメータの起動」。 「アニメーションウィザード」を選び、あとは自分で考えて。 ペイントで絵を書くのが得意な人にはおすすめ(かも)。

§7.3 課題6

(7.3.1) ホームページ・ビルダーを使い、フォルダ web 内に ファイル index2.html をつくりなさい。 (「index2.html」というのは内容を表していないのであまりよくない名前であるが、 ここでは統一のためこうする。)

(7.3.2) (index.html に戻るリンクをはるには、 URL は「./」でよい。 作成中はこのリンクをたどるとファイル一覧画面にいってしまうが、 保存してから http://wwwedu.ipc.kanazawa-u.ac.jp/%7Ej18aa??/ として見れば正しくリンクがはられていることがわかる。)


岩瀬順一