ホームページ・ビルダーでWEBサイトを作ろう

●水平線（区切り線）の挿入

ページの中で区切りをつけたい時に水平線を挿入。

1. 水平線を入れたい場所にカーソルを移動
2. メニューバーの「挿入」→「水平線（Ｚ）」をクリック
3. 挿入した水平線の位置・太さ・幅・色を変えたい時は、水平線の上で右クリック→属性の変更→ここで変更する。

↓水平線　＜hr width="90%" size="5" color="#3399FF"＞

●箇条書き

上の文章で１．２．３．〜〜と続いているような箇条書きを挿入したい場合。

箇条書きを挿入したい場所にカーソルを移動

メニューバーの「挿入」→「リスト」→４種類のリストから選択

もしくは、文章を書いた後に箇条書きの部分を選択し挿入からリスト→リストの種類を選択でも、こちらの方が使いやすい。

リストを挿入した後も、その箇条書きの上で右クリック→属性の変更を選ぶと他のリスト表示に変更できる。

●フリー素材の活用

背景画像やアイコン、イラスト等も多くの種類がホームページビルダーの中に素材として用意されています。

ほかに、フリー素材屋さんから素材をお借りしてページを作成することも変化があっていいです。

フリー素材、ｗｅｂ素材等で検索するとたくさんの素材屋さんにヒットします。

「牛飼いとアイコンの部屋」「１キロバイトの素材屋さん」「Field's Color」「Retroglass Graphics」

その中からお気に入りの素材を借りてきます。
素材屋さんには、必ず利用上のお願いがありますのでよく読んで大切に使わせて頂きます。
画像の加工、サイズの変更等の注意書きもよく読みましょう。
リンクウェアと書いてある素材屋さんの場合は、リンクのページ等にその素材屋さんをリンクします。

フリー素材のダウンロード方法

1. 素材屋さんの配布されているフリー素材の上で右クリック。
2. 右クリックのメニューの中から「名前をつけて画像を保存」
3. 保存する場所ホームページの「images」フォルダを指定。ファイル名を確認して保存。

フリー素材の画像を挿入して使う場合。
【メニューバー】→【挿入】→【画像ファイル】→【ファイルから】→「images」フォルダから挿入したい画像を選んで開きます・

壁紙素材の場合、【メニューバー】→【編集】→【ページの属性】→【背景/文字色】タブをクリックし背景画像の【参照】ボタンをクリックして、背景にしたい画像を選び開き→「ＯＫ」ボタンをクリックします。

背景画像の位置を固定したい等の時は、スタイルシートを使います。

参考「とほほのスタイルシート入門」背景編　「ＣＳＳリファレンス」背景編

▲↑へ

●画像を挿入

・事前にソフト「 ウェーブアートデザイナー 」やフリーソフト「縮小専用」「 JTrim 」や「 Photoshop Elemets」等でサイズを変更し、 「images」フォルダ内に保存する。

・ページ作成時に、挿入したい場所（カーソルが点滅している所）でメニューバー→【挿入】→【画像ファイル】→【ファイルから】 →ファイルの場所→「images」フォルダ→挿入したいファイルを選択→開く（O）でページに画像が挿入されます。

・画像に 代替テキストを指定する。

挿入した画像の上で右クリック→属性の変更を選択。画像を説明する文を「代替テキスト」欄に書きます。

ページ閲覧時に画像の上にマウスを乗せると表示される文字になります。

・画像の横に文章を回り込ませる

画像の横に文字を回り込ませる設定も「回り込み」からできます。

画像のまわりに余白を持たせたい場合は、「余白」から左右・上下に数字をいれます。８と入れると８ピクセル画像の周りに余白ができます。

画像に枠を指定したい場合は、「枠表示にチェックを入れる。

●ホームページビルダーでページ作成中に画像を簡単に加工

・画像を切り抜く→「切り抜き」をクリックすると四角の線が表示されるので希望の大きさにドラッグ、または位置の移動をして決め、再度「切り抜き」ボタンをクリックして決定する。間違った時は「元に戻す」ボタンをクリックすると元に戻る。
・画像の回転→回転ボタンをクリックすると９０度ずつ回転する
・画像の背景を透明化（gifファイルの場合）→gif画像の場合背景と旨くマッチしない場合「透明化ボタン」をクリック。→マウスがスポイトの形になるので透明化したい場所をスポイトでクリックするとその部分が透明化される。

JPEG画像の場合は、写真にセピア・モザイク・風等の効果を加えることが出来る。透明化は出来ない。

写真をいろいろな効果で試してみてね。

●フォトフレーム装飾

素材屋さんから借りてきた素材の場合は、加工自由と書いてない限り、このフォトフレームの挿入は、止めましょう。

ご自分で撮影したお写真の画像で装飾してね。

●ロールオーバー　（JavaScriptの使用）
ページのアクセント効果にホームページ上で画像の上にマウスを乗せると別の画像の表示になり、マウスを別の場所に持っていくと画像も元の表示になることをロールオーバーと言います。

• 画像を 1 つ用意し、その画像にロールオーバー効果をかけた 2 つ目の画像を作成する方法
• 画像を 2 つ用意し、ロールオーバー効果を作成する方法

この２つの方法があります。はじめに画像を一つ用意した方法でやってみましょう。

Ａ，ロールオーバー効果の挿入方法

選択した画像の上で右クリック。メニューの中から「画像のロールオーバー効果の挿入（G）」を選択

１，画像のロールオーバー効果のウィザード

（通常時の画像の指定）

２．（マウスポインタが上にきた時の画像の指定）　効果の選択

	・通常時の画像に効果を加えたものを使用したい場合は、効果の選択を選ぶ。効果の選択の中から好きなのを選ぶ。　←効果に「白黒」を選択
	または。別のファイル名（この場合は猫の顔ファイル）を指定してもおもしろい。 画像を 2 つ用意しロールオーバー効果を作成する方法 です。

３．（その他の設定）

ここでリンクを挿入なども設定できます。トップページに戻るリンクを貼ってもいいですね。

また、 画像を入れ替えたりもできます。「次へ」進み完了。

その他の離れた場所の設定もできます。（他の場所の画像の交換）で追加ボタンをクリックし、指定する。
あまり離れた場所を指定するとPCの画面からはみ出して効果がありませんので注意しましょう。

	←猫さんの画像にマウスを乗せると →招き猫さんが、、、 ここでは、画像が４つのファイルになります。

Ｂ．ロールオーバー効果が挿入されるとページ編集の画面で画像の左上にアイコンが表示される。

ページを保存し、ＩＥを起動して動作の確認をしてみましょう。

上の三つの猫さん画像の上にマウスを乗せてみてね。 どうでしょう（笑）

ページを保存する時、ロールオーバー効果の画像も一緒に保存します。

このときも画像を保存するフォルダをしっかり確認してね。「images」フォルダは開いていますか？

時々、imagesフォルダを選択だけして保存し、うまくいかない方を見かけます。

imagesフォルダを選択したらＷクリックでフォルダを開きます。

 

 

 

Ｃ．ロールオーバー効果を解除したい場合。

・ロールオーバー効果を設定した画像の上で右クリック。 「画像のロールオーバー効果の解除」を選択 。
元の画像のみになります。

・または、メニューバーから「編集」→「かんたん編集」→「画像のロールオーバー効果の解除」を選択

●マーキー　文字が画像がスクロール

ホームページ作成って面白いでしょう！更新情報などを載せてもいいですね。

＜marquee align="middle" bgcolor="#FFFFCC" width="80%" height="30"＞ホームページ作成って面白いでしょう！更新情報などを載せてもいいですね。＜/marquee＞　この＜marquee＞タグで表示されます。

挿入方法は、マーキーを入れたい場所にカーソルを表示し、メニューバー→【挿入】→【その他】→【マーキー】を選択

表示文字列に文字を挿入。

マーキーのサイズを幅・高さとも指定。

背景色を指定。

これで一度保存して動作をIEで確認してみます。

マーキーを指定した場所で右クリック。メニューの中から属性の変更を選択。
←のウィンドウが出てきたら文字を変えたり、繰り返し、表示速度も指定すればいろいろ変化ができます。

表示速度は、あまり早くしないほうがいいでしょう。

マーキーを多用するとページが落ち着きませんのでほどほどにね。

ホームページ作成がんばれ〜〜

上をタグ表示すると　＜marquee behavior=alternate width=50% scrollamount=1 ＞
＜img src="../../img/pengin.gif" alt="ペンギンさんも応援中" width="40" height="40"＞ホームページ作成がんばれ〜〜＜/marquee＞

次へ（ウェブアートデザイナーでロゴ作成）

▲↑へ