Web作成研修①（ホームページビルダー）[PDFﾌｧｲﾙ]

BODY{
color: #000099;
background-color: #6699FF;
background-image: url(images/sky2.gif);
background-attachment : fixed;
}
H1{
color: #FFFFFF;
background-color: #3366FF;
background-image: url(images/sky1.gif);
text-align: center;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
H2{
color: #FFFFFF;
background-color: #3366FF;
background-image: url(images/sky1.gif);
text-align: center;
padding-top: 7px;
padding-right: 0px;
平成 20 年 8 月
[目次]
１．ホームページの基礎知識 .................................................................................................................... 2
(1) ホームページの構成 ....................................................................................................................... 2
(2)
Ｗｅｂページの正体 ....................................................................................................................... 2
(3)
ホームページ・ビルダーの特徴 ..................................................................................................... 2
(4) インターネット上で正常に表示される画像とは............................................................................ 2
２．Web ページの作成............................................................................................................................... 3
(1) ホームページビルダー７の起動 ..................................................................................................... 3
(2)
編集スタイルを選ぼう.................................................................................................................... 3
(3)
画部分の名称と役割 ....................................................................................................................... 3
(4)
新しいページの作成 ....................................................................................................................... 4
(5)
「どこでも配置モード」と「標準モード」の違い........................................................................ 4
(6)
文字入力と文字飾り ....................................................................................................................... 5
ア、文字入力....................................................................................................................................... 5
イ、文字サイズの変更 ........................................................................................................................ 5
ウ、文字の色の変更............................................................................................................................ 5
(7)
素材集からイラストの挿入 ............................................................................................................ 5
(8)
写真の挿入...................................................................................................................................... 5
(9)
イラストや写真の配置を調整......................................................................................................... 6
(10)
背景の設定.................................................................................................................................... 6
ア、背景に色を設定する .................................................................................................................... 6
イ、画像ファイルを壁紙に設定する .................................................................................................. 7
(11)
リンクの設定 ................................................................................................................................ 7
ア、リンクの設定 ............................................................................................................................... 7
(12) プレビュー.................................................................................................................................... 8
(13) 作成したページを保存しよう....................................................................................................... 8
３．ロゴの作成や写真のリサイズ、トリミング ....................................................................................... 9
(1) ウェブアートデザイナー ................................................................................................................ 9
(2)
ロゴの作成...................................................................................................................................... 9
ア、バナーの挿入 ............................................................................................................................... 9
イ、文字を入れよう............................................................................................................................ 9
ウ、文字のサイズを調整しよう.......................................................................................................... 9
エ、文字の色や縁取り、効果を設定しよう ..................................................................................... 10
オ、作成したロゴや画像を保存するには......................................................................................... 10
(3)
簡単な写真の加工..........................................................................................................................11
ア、写真の読み込みや貼り付け.........................................................................................................11
イ、サイズの調整 ............................................................................................................................. 12
ウ、トリミング ................................................................................................................................. 12
1
１．ホームページの基礎知識
(1) ホームページの構成
ほとんどのホームページは、複数のページから構成されて
います。例えば表紙にあたる「トップページ」や「自己紹介」
ﾄｯﾌﾟﾍﾟｰｼﾞ
Web ﾍﾟｰｼﾞのうち、入り口にあた
るﾍﾟｰｼﾞをﾎｰﾑﾍﾟｰｼﾞという
「趣味」
「リンク」などの個々のページが１つのまとまりにな
っていて、それぞれのページがつながり（リンクという）自
由に行き来できるようになっています。これらのページのま
とまりを「Ｗｅｂサイト（またはサイト）
」といいます。なお、
ﾌﾟﾛﾌｨｰﾙ
趣味
リンク
Ｗｅｂサイト内の個々のページを「Ｗｅｂページ」といい、
Ｗｅｂサイトの入り口にあたるページを「ホームページ」と
Web ページ
呼びます。
Web ｻｲﾄ（ﾍﾟｰｼﾞのまとまり）
(2) Ｗｅｂページの正体
それぞれのＷｅｂページは、基本となるＨＴＭＬというページ記述言語からなる「ＨＴＭＬファイル」
「画像ファイル」「音声ファイル」など、複数のファイルから成り立っています。そして、この「ＨＴ
ＭＬファイル」が「画像ファイル」をどこに配置するか、どんな大きさで表示するか、などを指定して
いろんなファイルのまとめ役の働きをしています。
(3) ホームページ・ビルダーの特徴
ホームページ・ビルダーには、以下のような特徴があります。

ＨＴＭＬファイルをワープロ感覚で簡単に作りことができる。

ホームページ作りに便利な素材が豊富に用意されている。

好みのデザインの掲示板が手軽に作れる。

プロバイダへーのサーバーへの転送が簡単にできる。

好きな場所に画像や文字を入れられる。

簡単な画像編集用ソフトが付属している。
(4) インターネット上で正常に表示される画像とは
インターネット上でどんな「ブラウザ」でも正常に表示される一般的な画像ファイルの形式は、[ＧＩ
Ｆ形式]と、[ＪＰＥＧ形式]の２つです。ホームページ・ビルダーでは、デジタルカメラ（以下、デジカ
メ）で撮影した写真や、ほかのアプリケーションで作成したイラストなど、様々な画像ファイルを編集
画面に挿入でき、自動的に[ＧＩＦ形式]と、[ＪＰＥＧ形式]にしてくれる機能があります。
2
２．Web ページの作成
(1) ホームページビルダー７の起動
① [スタート]ボタンをクリックします。
② [すべてのプログラム］→［IBM ホームページ・ビルダー 7］→［ホームページ・ビルダー］を
選択します。
(2) 編集スタイルを選ぼう
ホームページ・ビルダー７では、好みに合わせて「か
んたん」
「スタンダード」
「エディターズ」の３つの編集
スタイルが選べます。ホームページ・ビルダー７を起動
すると３つの編集スタイルを選択する画面が表示され
ます。今回の研修では、「スタンダード」スタイルを選
択して進めます。
(3) 画部分の名称と役割
「スタンダード」スタイル画面の場合の画面構成は、次のようになります。
あ
い
え
う
あ、「かんたんナビバー」：ページ作成から公開までの基本的な操作が、流れに
沿ってまとめられています。
い、「ナビメニュー」：よく使う操作をわかりやすく大きくまとめたメニューで
す。[素材集]と切り替えて使います。
う、「素材集（サイト/素材ビュー）」：サイト内のファイル管理や、リンク状況
を確認するための[サイトビュー]と、ホームページ・ビルダー７に収録さ
れている画像やアイコンなどを挿入する時に使う[素材ビュー]を切り替え
て使うことができます。
え、
「ホームページ編集画面」
：ホームページを作成・編集する画面です。[ペー
ジ編集]、[ＨＴＭＬソース]、[ページ／ソース]、[プレビュー]の４つのモ
ードがあり、タブをクリックして切り替えます。
3
(4) 新しいページの作成
ホームページ・ビルダー７には、色々なページのテンプレートが用意されています。また、指示され
たことに答えていくだけで、色々なページを簡単に作成できるウィザード画面も用意されています。
ここでは、最も一般的な方法で新しいページを作成します。
① [スタート]アイコンをクリックします。
② 「スタート」ダイアログボックスで、[ページを作成す
る]ボタンをクリックします。
③
「ページ作成ウィザード」ダイアログボックスで、
右図のように選択します。
(5) 「どこでも配置モード」と「標準モード」の違い
どこでも配置モードと標準モードの違いは、主に次の通りです。
どこでも配置モード：
文字や画像を自由な位置にレイアウトすることができるモードです。どこでも配置モードを利
用すると、Web ページの作成自体は簡単になりますが、さまざまなユーザ環境（ブラウザの違
いや、文字の大きさの違い）にうまく対応できない場合があります。
標準モード：
一般的なモードです。ワープロソフトのような感覚で文字の大きさや色などを変更できますが、
細かなレイアウトを行うのは難しいです。
「１．ホームページの基礎知識」にあるように、Web ページの中身は HTML と呼ばれる言語を用い
て記述されます。HTML では、文字の大きさや色、画像の配置などをタグと呼ばれる識別子を用いて記
述します。しかし、同じタグを用いても、ブラウザの違いにより微妙に表示のされ方が異なる場合があ
ります。また、ブラウザの文字の大きさを大きくしている人、あるいは小さくしている人など、Web ペ
ージを閲覧するユーザの環境はさまざまです。
学校 Web ページを作成する場合は、こうした環境の違いに配慮する必要があり、ユニバーサルデザ
インを達成するためにも、標準モードで作成することを強くお勧めします。
4
(6) 文字入力と文字飾り
ホームページビルダーでは、ワープロソフトと同じ感覚でテキスト（文字）入力でき、字の大きさや
色なども変えることができます。文字を入力するには、次のように操作します。
ア、文字入力
①
白紙の状態の場合は、そのまま文章を入
力します。加筆・訂正する場合は、処理
したい部分をクリックします。
入力中の「段落」は、ピンク色の線で
囲まれます。
イ、文字サイズの変更
①
大きさを変えたい文字列の範囲を選択して反転表示させます。
②
文字を大きくしたい場合は画面上段ツールバーの[文字サイズ
拡大]をクリックします。
③
文字を小さくしたい場合は[文字サイズ縮小]Ａをクリックします。
ウ、文字の色の変更
ツールバーの[カラーパレットの表示／非表示]をクリックして、[カラ
ーパレット]を表示します。
①
色を変えたい文字列の範囲を選択して反転表示させます。
②
[カラーパレット]から好みの色を選んで[適用]をクリックすると、文字の色が変わります。
(7) 素材集からイラストの挿入
①
「素材」タブをクリックし、任意のフォルダを開きま
す。
②
挿入したいイラストをダブルクリックするか、任意の
位置へドラッグアンドドロップします。
(8) 写真の挿入
① 「素材」タブをクリックし、「フォルダ」ボタ
ンを押します。
② 任意のフォルダを選択します。
③ 挿入したい写真をダブルクリックするか、任意
の位置へドラッグアンドドロップします。
挿入する写真は、あらかじめリサイズやトリミングを行っておきましょう！！
5
(9) イラストや写真の配置を調整
①
メニューバーから「表示」→「属性／ドキュメントアウ
トライナ／ページ一覧」を選択します。
②
目的のイラストや写真を選択し、位置
揃えを変更します。
＜位置揃えの詳細＞
(10)
自動
下揃え
上揃え
左寄せ
中央揃え
右寄せ
背景の設定
背景は色で指定する場合と画像を使う場合があります。ここでは、ホームページ・ビルダー７の素材
集から、壁紙用素材を使ってみます。選んだ背景によっては、文字が見にくくなることがあります。そ
の場合は、文字の色も変更します。
ア、背景に色を設定する
①
ページ編集画面内で右クリックして、メニュー画面が開いたらメニューの中から［属性の変更］を
クリックします。
②
[属性]画面が表示されたら、[背景／文字色]タブをクリックします。
③
[色指定]欄の[背景]項目で[▼]をクリック。
④
[カラーパレット]から背景に使いたい色をクリックし、[OK]をクリックします。
6
イ、画像ファイルを壁紙に設定する
①
画面左側の素材集タブをクリックします。
②
[サイト／素材ビュー]の[素材タブ]をクリック
し、[壁紙用素材]をクリックします。
③
任意の素材を選択し、[挿入]ボタンをクリック
します。
[素材]タブの下にある[設定]をクリック→メ
ニュー画面から[壁紙テストモード]を選びチ
ェックを入れる→[素材ビュー]で選んだ壁紙
をページ編集画面でプレビューできます。
(11) リンクの設定
Ｗｅｂサイトを構成するそれぞれのＷｅｂページが全て完成したら、Ｗｅｂページ間で移動できるよ
うにリンクを設定します。リンクを設定すると、文字や画像をクリックするだけで、別のＷｅｂページ
に移動できるようになります。移動する起点を「リンク元」、移動する先を「リンク先」といいます。
ア、リンクの設定
トップページに用意した文字やアイコンをクリックすると指定したページが表示されるようにリン
クを設定してみましょう。
①
リンクを設定したい文字をドラッグして選択、反転します。
②
反転文字の上で、右クリックするとメニューが表示されます。
③
メニューの中から→[リンクの挿入(I)] をクリック。
④
「属性」ダイアログボックスで、[ファイルへ]タブをク
リックし、[参照]ボタンをクリックします。
⑤
「開く」ダイアログボックスで、ファイルを選択し、
[開く]ボタンをクリックします。
7
(12)
プレビュー
リンクなどを設定したら、プレビュー画面で確認して
みます。
(13)
①
作成したページを保存しよう
作成したファイルを保存するために、かんたんナビバ
ーの［ページの保存］をクリックします。
②
［ページの保存］画面の［名前を付けて保存］をクリ
ックします。
③
[名前を付けて保存］ダイアログボックスが表示された
ら、
「保存する場所」を選び、ファイル名を入力して[保
存]ボタンをクリックします。
④
ページ内に画像がある場合は、
［素材ファイルをコピーして
保存］ダイアログボックスが表示されます。次のように設
定し、[保存]ボタンをクリックします。
「□保存場所にファイルをコピーする」を ON
「□上書き時に自動的にファイル名を変更する」を ON
◆
ファイル名の付け方に注意！！
Web ページやページ内で用いられる画像、写真などのファイル名は、必ず半角英数文字でつけまし
ょう。また、大文字は使用しないようにしましょう。
8
３．ロゴの作成や写真のリサイズ、トリミング
(1) ウェブアートデザイナー
ウェブアートデザイナーは、ホームページビルダーに付属する画像編集用ソフトで、簡単な画像の加
工に便利に利用することができます。ウェブアートデザイナーの画面構成は、次のようになります。
丸や四角、文字などを描く場合は、この
ツールバーを利用します
ダブルクリックして挿入できます。
(2) ロゴの作成
それでは、ウェブアートデザイナーを用いて、簡単なロ
ゴを作成してみましょう。
ア、バナーの挿入
文字の背景になる画像をバナーといいます。バナーを挿入するには、
次のように操作します。
①
素材タブをクリックし、バナーフォルダを選択します。
②
表示されるバナーのうち、任意のものをダブルクリックします。
イ、文字を入れよう
次に、文字をいれます。次のように操作します。
①
操作ツールバーの、[文字]ボタンをクリックします。
②
挿入済みのバナー上をクリックし、文字を入力します。
ウ、文字のサイズを調整しよう
文字のサイズを調整するには、文字の周りの□をドラッ
グします。
9
エ、文字の色や縁取り、効果を設定しよう
文字の色や縁取り、効果などを設定するには、挿入した文字をダブルクリックし、表示される「ロゴ
の編集」ダイアログボックスでそれぞれの項目を設定します。
＜色の設定＞
＜縁取りの設定＞
＜効果の設定＞
オ、作成したロゴや画像を保存するには
作成したロゴや画像は、次の操作を行い、JPEG 形式や GIF 形式で保存します。
①
作成したロゴを囲むようにドラッグします。
②
選択された領域上で右クリックし、表示されるメニューの「Web
囲むようにドラッグ
用保存ウィザード」を選択します。
③
表示されるダイアログボックスで、[次へ]ボタンをクリックし
ます。
10
④
保存形式を選択し、[次へ]ボタンをクリックします。
■ ワンポイント
写真を保存する場合は JPEG 形式で、現在作成中のロ
ゴやイラストなどを保存する場合は GIF 形式で保存
するのが一般的です。
続いて、保存時のオプションを設定します。設定できるオプションは、GIF 形式と JPEG 形式で異
⑤
なります。それぞれの形式に関する主なオプションを次に示します。
GIF 形式
[プロパティ]
□透明化
右のスポイトボタンをクリックし、背景を透過させる色
を指定します。
JPEG 形式
[画質]
画像の圧縮率を増減します。
[プロパティ]
□プログレッシブ
チェックすると、ブラウザで徐々に表示されるようなります。ファ
イルサイズが大きく、ダウンロードに時間がかかる場合などに、利
用します。
⑥
次に、「○ファイルに保存」を選択し、[完了]ボタンをクリックします。
⑦
「名前をつけて保存」ダイアログボックスが表示されたら、フォルダとファイル名を設定し、保存
を行います。
(3) 簡単な写真の加工
ウェブアートデザイナーを使うと、簡単な写真の加工を行うことができます。本格的な写真のレタッ
チなどには向きませんが、Web ページ用に加工する際に便利に使えます。
ア、写真の読み込みや貼り付け
ウェブアートデザイナーに写真のファイルを読み込むには、いくつかの方法があります。ここでは、
２つの方法を紹介します。
11
＊「ファイルから貼りつけ」機能を用いる場合
① メニューバーの「編集」→「ファイルから貼りつけ」
を選択します。
② 表示されるダイアログボックスで、目的のファイル
を選択し、[開く]ボタンをクリックします。
＊マイコンピュータやエクスプローラからコピー・ペーストを行う場合
① 「マイコンピュータ」や「エクスプローラ」から、貼
り付けたい画像を選び、右クリックして表示されるメ
ニューから「コピー」を選択します。
② ウェブアートデザイナーを選び、右クリックして表示
されるメニューから「貼りつけ」を選択します。
右クリックして、「コピー」を選択
イ、サイズの調整
縦横比を保ったまま、貼りつけた写真のサイズを調整するには、次
のように操作します。
①
貼りつけた写真をダブルクリックします。
②
「幅」または「高さ」を数値で指定します。
縦横比を保ったまま、マウスの操作でサイズを変更するには、[Shift]キーを押しながら、画像の四
隅の「■」をドラッグします。
ウ、トリミング
写真のうち、一部を利用したい場合はトリミングを行います。次のように操作します。
①
操作ツールバーの[切り抜き]ボタンを押し、
切り抜く形を選択します。
②
切り抜く時の輪郭のぼかし量を選択します。
③
[切り抜き]ボタンをクリックします。
④
切り抜いた画像を JPEG 形式で保存します。
12