はじめにやっておくこと | |||||
1 作成したページを保存する場所をつくる。 | |||||
「マイドキュメント」などの保存したいドライブやフォルダに、自分の作ったページの入れ物を作ります。学校では、どこにしまうかを先生から聞きましょう。 | |||||
「ファイル」→「新規作成」→「フォルダ」とクリックします。 | |||||
これが新しくできたフォルダです。フォルダの名前の入力できる状態になっています。「Delete」(デリート)キーを押します。 | |||||
学校で、作ったホームページを利用する場合は、名前をアルファベットで入力するといいでしょう。ひらがな、カタカナ、漢字は使ってはいけません。最後にEnterキーを押しましょう。これでフォルダーができました。 | |||||
2 作ったフォルダの中に、もう一つフォルダを作ります。 | |||||
作ったフォルダをダブルクリックしましょう。作ったばかりのフォルダの中が表示されます。といっても、何もありませんけどね。ここに、「image」または「images」という名前のフォルダを作ります。この入れ物は、絵・写真などのデータを整理して入れておくところです。本当は、作らなくてもいいものですが、後で修正したり、更新したりするとき便利なのです。 | |||||
先ほどと同じやり方で、フォルダを作りましょう。 | |||||
トップページを作りましょう | |||||
|
|||||
3 ホームページビルダーを起動します。 | |||||
デスクトップの「ホームページ・ビルダー」のアイコンをダブルクリックします。デスクトップにアイコンがない場合は、プログラム→IBMホームページ・ビルダーV6→ホームページ・ビルダーを選択して起動します。 | |||||
表示されたオープニング画面では、「どこでも配置モードで白紙ページを作成する」を選択します。 をクリックします。 |
|||||
4 ページタイトル・背景の設定をします。 | |||||
タスクメニューの「ページの設定」→「ページの基本設定を行う」をクリックします。 | |||||
ページのタイトルを入力します。ひらがな・漢字、何でもいいです。 | |||||
ここでは、「ぼくの趣味の紹介」と入力します。 「次へ」をクリックします。次もまた設定画面が出てきますが、すべて何もしないで「次へ」をクリックし、さいごのBGMの設定で「完了」をクリックしてください。これで、ページの設定は終わりです。 |
|||||
5 背景を入れます。 | |||||
左のようなアイコンをさがしてください。その中のをクリックします。 | |||||
すると、「素材ビュー」というものが表示されます。 | |||||
「壁紙用素材」をクリックすると、下に壁紙の見本が表示されます。今回は、「b014bcg.gif」を選択し、をクリックします。すると、真っ白だった画面が、選択した壁紙になります。 | |||||
6 バーナーを挿入します。 | |||||
「素材ビュー」より、「バーナー」を選択します。すると、下にバーナーの見本が表示されます。今回は「b020ban.gif」を選びます。 をクリックします。(「開く」と表示される場合もありますが、同じことです。) |
|||||
7 タイトルロゴを作成します。 | |||||
のアイコンのどれか1つをクリックします。文字を入力し、好みのロゴを選び「完了」をクリックします。ここでは、「logo080」を選びます。文字の大きさは、22か36ぐらいがいいでしょう。 | |||||
バーナーとロゴの大きさが合っていませんね。文字がはみ出してしまいます。 | |||||
バーナー、ロゴの上でクリックすると白い印が出てきます。マウスポインタがになったとき、位置を変更できます。になったとき、サイズを変更できます。バーナーの枠の中にロゴがうまく入るように調整してください。 | |||||
バーナーとロゴを囲むようにマウスで範囲を指定します。Ctrlキーを押しながらバーナーとロゴをマウスでそれぞれ選択してもできます。 |
|||||
(複数の部品を左右中央にそろえる)をクリックします。続けて、(複数の部品を上下中央にそろえる)をクリックします。 指定したままの状態で(グループ化)をクリックします。すると、バーナーとロゴが1つの画像になります。一度1つになったものは、分けられませんので注意してください。 |
|||||
これでタイトルロゴができました。 | |||||
8 水平線を入れる。 | |||||
をクリックします。水平線を入れる開始位置でクリックし、マウスを押さえたまま終点までドラッグします。水平線の上でクリックすれば、位置・長さの調整はいつでもできます。 | |||||
9 文章を入力します。 | |||||
テキストボックスを作成します。どこでも配置パレットのをクリックします。 | |||||
文字入力の枠を作ります。マウスでドラッグして作ります。 | |||||
入力枠ができました。この枠は、移動したり、大きさを変えることができます。 | |||||
作成した枠内に、文章を入力します。ここでは、「ようこそ、ぼくの趣味のホームページへ!」と入力します。 | |||||
10 文字の色を変えます。 | |||||
(カラーパレットの表示/非表示)をクリックします。 | |||||
色を変える文字を指定します。 | |||||
色を指定し、「適用」をクリックします。ここでは、#0066ff を指定します。カラーパレットは、もう一度をクリックすれば消えます。 | |||||
文字の色が変わりました。 | |||||
こんどは、文字の位置を、枠の真ん中にしてみましょう。このとき、のアイコンのを使います。文字入力枠を表示させておいて、このスイッチをクリックしましょう。 | |||||
文字が真ん中に移動しました。 | |||||
11 文字の太さ・大きさを変えます。 | |||||
文字をドラッグして、範囲指定します。 | |||||
をクリックします。続けてをクリックすれば、文字の大きさを変えることができます。 | |||||
12 表を作成します。 | |||||
(表の挿入)をクリックします。 | |||||
行数を3、列数を2にして「OK」をクリックします。 | |||||
枠がこの状態であるとき、マウスポインタがになれば、位置が変更できます。先ほどの文字の下に動かしましょう。 | |||||
13 表内に文字を入力します。 | |||||
登山 北アルプスに登ってきました。 切手 蝶の切手を集めています。 化石 いろいろな化石を収集しています。 と入力してください。時間がなければ、この文をコピーして、そのまま貼り付けてください。。 |
|||||
このようになります。この表は、後で次のページへリンクさせるスイッチになります。 | |||||
参考 表の行・列を増やしたいときの やり方 | 表を作りましたが、項目を増やしたいことがありますね。ここでは、その方法を教えておきましょう。 | ||||
ここでは、3行の表の下に、2行増やして、5行の表にしてみましょう。 一番下のますのところでクリックします。この表では2列ありますが、左右どちらでもかまいません。 |
|||||
右クリックすると、左のようなウィンドウが出てきます。「表のセルを追加」をクリックします。 * 「行の削除」をクリックすれば、その行を削除することもできます。 * 「表の枠を非表示」をクリックすれば、表の枠が透明になります。 |
|||||
「行(R)」のラジオボタンをクリックして、「数(N)」を「2」にします。 「OK」をクリックします。 * ここで「列(C)」をクリックすれば、列を増やすこともできます。 |
|||||
下に2行追加できました。 | |||||
14 文字の大きさ・太さを変えます。 | |||||
文字が太く、大きくなった。 |
文字を範囲指定し、 をクリックします。続けてをクリックすれば、文字の大きさを変えることができます。 | ||||
15 表の色を変えます。 | |||||
表の中の色を変えるところをクリックします。 | |||||
カラーパレットの表示が「セル背景色」になっていることを確認します。「文字色」になっていると、文字の色が変わってしまいます。色を決めて「適用」をクリックします。 | |||||
参考 もし、文字の色を変えてしまった場合、「編集」→「元に戻す」をクリックすると、やり直せます。 |
|||||
こんな感じに仕上げましょう。字がはっきりわかるように、色は薄い方がよいでしょう。 | |||||
完成しました。 |
|||||
16 仕上がりを確認しましょう。 | |||||
「プレビュー」をクリックすると、インターネットでは実際にはどう見えるのか確認できます。 | |||||
17 保存します。 | |||||
タスクメニューの「ページの保存」をクリックします。 | |||||
「編集中のページを保存する」をクリックします。 | |||||
保存場所(始めに作っておいたフォルダ)を指定します。 ファイル名(アルファベットかローマ字)を入力します。ここでは「top」と入力します。 「保存」をクリックします。 |
|||||
バーナーや絵・写真などのファイルをどこに保存するのか 聞いてきます。 次のようにしてください。 |
|||||
ファイル一覧の一番上にあるファイルをクリックします。すると、青く反転します。 次に、Shiftキーを押したまま、ファイル一覧の一番下にあるファイルをクリックします。すると、すべてのファイルが青く反転します。 |
|||||
をクリックしましょう。 | |||||
ここでは、「IBM」となっていますが、自分が最初に作成したファイルの名前が青く反転していると思います。 | |||||
保存ファイルはすべて、はじめに作成した「images」または「image」に入れますので、「images」または「image」をダブルクリックしてください。 * 「フォルダ(F)」に「\images」が追加されたことを必ず確認してください。 「OK」をクリックしてください。 |
|||||
の四角の枠の中をクリックして、チェックを入れてください。 最後に、「OK」をクリックしてください。 |
|||||
これで トップページの完成です。つぎは、2ページ目を作り、トップページとリンクで結んでみましょう。 | |||||
18 2ページ目の設定をします。 | |||||
の下向きの矢印をクリックして、新しいページを作ります。 | |||||
トップページと同じように、「どこでも配置モードで新規作成」をクリックします。 新しいページができました。 |
|||||
「ページの設定」をクリックします。 | |||||
「ページの基本設定を行う」をクリックします。 | |||||
「2002年 夏山登山」と入力します。 をクリックします。2・3回「次へ」をクリックすると、「完了」となりますので、「完了」をクリックしてください。 |
|||||
19 タイトルを入力します。 | |||||
どこでも配置パレットのをクリックします。 | |||||
文字入力の枠が出てきます。 | |||||
「2002年 夏山登山」と入力します。 | |||||
20 文字を大きくします。 | |||||
文字をマウスでドラッグするか、枠の中でダブルクリックして、文字を反転します。 | |||||
で、文字を大きくします。 | |||||
文字が大きくなって、タイトルらしくなりました。 | |||||
白いところでクリックすると、反転が解除されます。 | |||||
21 絵を貼り付けます。 | |||||
「挿入」をクリックして、その下に表示される「画像ファイル」→「素材集から」をクリックします。 | |||||
「イラスト」をクリックします。 | |||||
「p010.mif」を選択し、「開く」をクリックします。 | |||||
絵が貼り付けられました。位置や大きさを変えてみてください。 | |||||
22 写真をアルバムのように貼り付けます。 | |||||
写真は、50KBぐらいまでにしたほうがよいです。画質を落とさずに容量を小さくするソフトを使ってください。 | |||||
「挿入」→「デジカメ写真」→「アルバム」をクリックします。 | |||||
のラジオボタンをクリックして、チェックを入れます。 をクリックします。 |
|||||
のやを使って、写真が保存してあるドライブ・フォルダを見つけてください。写真は、容量が縮小されていることが前提です。 ※ 最近のデジカメで撮られた写真は、200、300KBもあって、ホームページにそのまま使うと、表示速度が極端に遅くなってしまいます。 本校のホームページの「先生のへや」の「学校で使えるオンラインソフト」から、「縮専」をダウンロードして使うといいでしょう。 |
|||||
写真が、サムネイル画像で表示されます。その中から、必要なものをクリックし、「追加」をクリックします。写真がたくさんの場合は、その操作を繰り返します。 | |||||
必要な写真を登録したら、をクリックします。 | |||||
設定はこのままでいいです。 をクリックします。 |
|||||
写真が貼り付けられました。絵も、切り取り・貼り付けで左のように取り込むこともできます。 「マウスでダブルクリックして・・・」とあるところは、文字を入れます。文字を入れないときは消しておきましょう。一番簡単な消し方は、消す文字をマウスをドラッグして反転させ、Deleteキーを押す方法です。 |
|||||
23 保存します。 | |||||
やり方は、トップページと同じです。 | |||||
保存する場所は、トップページと変えてもいいのですが、ここでは同じ場所にします。 | |||||
ファイル名を「2002natuyama」と打ちます。をクリックします。 | |||||
トップページと同じように操作して、保存ファイルはすべて、はじめに作成した「images」または「image」に入れますので、「images」または「image」をダブルクリックしてください。 の四角の枠の中をクリックして、チェックを入れるのを忘れないでください。 最後に、「OK」をクリックしてください。 |
|||||
これで、2ページ目が保存されました。 | |||||
トップページに2ページ目をリンクさせましょう | |||||
24 トップページを開きます。 | |||||
もし、トップページを保存して、終了させていたら、次の操作をします。 | |||||
をクリックします。 | |||||
「top」をクリックして選択します。 「開く」をクリックします。 |
|||||
「登山」の文字にリンクをはります。 | |||||
「登山」をダブルクリックして、反転させます。 | |||||
反転させた「登山」の文字にマウスポインタを持っていき、右クリックします。 | |||||
をクリックします。 | |||||
をクリックします。 | |||||
リンクするページ(ここでは2002natuyama)をクリックします。 | |||||
「開く」をクリックします。 | |||||
をクリックします。 | |||||
文字の色が変わり、下線がつきました。これで、リンクがはられました。 | |||||
25 トップページを保存します。 | |||||
トップページの内容が変わったので、トップページを保存します。「ページの保存」をクリックします。 | |||||
26 できあがりを確かめる。 | |||||
「プレビュー」をクリックして、リンクが動作しているか、表示に問題はないか確かめます。 | |||||
27 2ページ目に「前のページに戻る」ように、リンクをはる。 | |||||
リンクをたどって2ページ目にいくと、戻るスイッチがないため困ってしまいます。2ページ目に、「戻る」を入力し、「登山」と同じように、トップページにリンクを張っておきましょう。 | |||||
これで完成です。お疲れ様でした。 | |||||