５−１　ウェブ・ページのレイアウト　（テキストの第６章Step１〜Ｓｔｅｐ４）

　「ホームページ・ビルダー１１基礎」フォルダ　→　「完成版」　→　「kyoto」 →　「aji.hml」を
　ダブル・クリックして　→　完成版のトップ頁を表示してみる

　段落にインデントの挿入、箇条書きの設定、及び表を使ったレイアウトに写真とテキストの挿入を
　確認する。

　☆　先ず、ウェブ・サイトを開く：

　　メニューの「サイト」　→　「サイトを開く」　→　「サイトを開くダイアログ」　→　「京都物語を選択」　
　　→　「開くボタン」　→　「ビジュアル・サイト・ビュー」が表示される。
　　「ビジュアル・サイト・ビュー」には既成の「index.html」と「new.hml」が表示される。

　☆　この状態で、これから新しい「ウェブ・ページ（aji.hml）」を追加することにする：

　　「aji.hm」は既に材料の段階で、「ページ設定」と基本データは入力されている。

　　メニューの「ファイル」　→　「開く」　→　「開くダイアログ」表示　→　「ファイルの場所」に
　　「マイドキュメント」選択　→　「ファイル一覧」から「ホームページ・ビルダー１１基礎」選択
　　「開く」　→　「ファイルの種類」に「ＨＴＭＬファイル」になっているのを確認　→　「ファイル一覧」から
　　「aji.hm」選択　→　「開く」ボタン。

　☆　次に、「ページ編集領域」に読み込まれたページを「京都物語のサイト」の中に保存する：

　　メニューの「ファイル」　→　「名前を付けて保存」　→　「保存場所」が「kyoto」であることを確認
　　→　「ファイル名」が「aji.hm」であることを確認　→　「保存」ボタン　　

　☆　最後に、「aji.hm」の中で使われている画像ファイルなどを「サイト」の中にコピー・保存する：

　　「素材ファイルをコピーして保存」表示　→　一覧に保存する画像ファイル名が表示されている
　　のを確認　→　「上書き時に自動的にファイル名を変更する」のを外す　→　「保存」ボタン

　☆　「aji.hm」が「京都物語のサイト」の中に保存されたことを確認：

　　画面右側の「ビュー一覧」の中の「サイト」ボタン選択　→　ボタンが「サイト・タブ」に変わり　→
　　「フォルダ」タブで「トップ・フォルダ」をクリック　→　下のファイル一覧の「aji.hm」が入ったのを確認。

インデントの設定

ページ・タイトルの下の文字段落にインデントを設定すると、段落全体が中央揃えになる。

　対象の段落の中の一点をクリック　→　メニューの「書式」　→　「インデント」　→　「インデント設定」
　→　これを繰り返すと、更に中央揃えになる。　中央寄せが行き過ぎたら　→　「インデント解除」

箇条書きを設定すると、項目や文章が箇条書きでリスト形式で表示されるので読みやすくなります。
リストには：「番号なしリスト」、「番号付きリスト」、及び「説明付きリスト」がある。

　箇条書きにする範囲を指定する　→　メニューの「挿入」　→　「リスト」　→　「番号なしリスト」

　「番号なしリスト」の記号は　→　右クリック　→　「属性の変更」で○や■に変更できます。

５−２　表を使ったウェブ・ペイジのレイアウト　（テキストの第６章Step４）

本来、表はダータを整理して表示するために使いますが、画像や文字を好き場所に配置してウェブ・ページのレイアウトを凝ったものにするのに、大変便利です。表の罫線を非表示にすると、ブラウザーで表示したときには、表であることが意識されません。

表の属性を設定するには：

　表の中の一点を右クリック　→　「属性ダイアログ」を表示　→　色々な属性を設定出来ます。

テキスト・ファイルの挿入

予めＷｏｒｄやワード・パッドで作成しておいたテキスト・ファイルをウェブ・ページに挿入出来ます。

　テキスト・ファイルヲ挿入したい場所をクリック　→　メニューの「挿入」　→　「ファイル」　→　
　「その他のファイル」　→　「開くダイアログ」表示　→　「ファイルの場所」に「マイドキュメント」指定
　→　「開く」　→　「ホームページ・ビルダー１１基礎」選択　→　「開く」　→　「湯豆腐.txt」選択
　→　「ファイルの挿入ダイアログ」表示　→　「改行位置を保持」を選択　→　ＯＫボタン

同様にして、「おばんざい.txt」、「京懐石.txt」、「京漬物.txt」も表のセルの中に挿入出来ます。

上では、テキスト・ファイル全体をウェブ・ページに挿入しましたが、ファイル単位でなくてもＷｏｒｄテキストやワード・パッド・テキスト或いはＨＴＭＬファイルのテキスト部分などは、「コピー」＆「貼り付け」で簡単にウェブ・ページに挿入することが出こます。

５−３　リンクの設定　（テキストの第７章Step１〜Ｓｔｅｐ６）

下線が引かれた文字や画像をクリックすると別のウェブ・ページやファイルが表示される仕組みを「リンク」といいます。

リンクの種類には：
　　☆　別のウェブ・ページへのリンク
　　☆　同一ウェブ・ページ内の別の場所へのリンク
　　☆　別のウェブ・サイトへのリンク
　　☆　ＨＴＭＬファイル以外のファイルへのリンク
　　☆　電子メール・ソフトの起動

完成版サイトでこれからリンク設定する頁を確認する：
　　「ホームページ・ビルダー１１基礎」フォルダ　→　「完成版」　→　「kyoto」 →　「indexi.hml」を
　　ダブル・クリックして　→　完成版のトップ頁を表示してみる 。

　　　　Ｗｈａｔ’ｓ Ｎｅｗ　　―ーーー→　「new.html」
　　　　味紀行　　　　　　　―ーーー→　「aji.html」
　　　　歳時記　　　　　　　―ーーー→　「saijiki.html」
　　　　都あるき　　　　　　―ーーー→　「miyako.html」

京都物語のサイトの中で未だ挿入されていないウェブ・ページを挿入しておく：

　メニューの「ファイル」　→　「開く」　→　「ホームページ・ビルダー１１基礎」フォルダから　→
　「saijiki.html」, 「miyako.html」,「・・・・」を一つずづ開いて、京都物語のサイトに保存していく。
　この場合の保存は同じ名前の保存でも保存場所が異なるので、「名前を付けて保存」
　でなければいけません。

　リンク元のページを開き　→　「index.html」「Ｗｈａｔ’ｓ Ｎｅｗ」をドラッグしてハイライトさせる　→
　メニューの「挿入」　→　「リンク」　→　「属性ダイアログ」の「ファイル・タブ」を選択　→　「ファイル名」
　の「参照」ボタンをクリック　→　リンク先の「new.html」を選択　→　「開く」ボタン　→　ＯＫボタン

　同様に、味紀行　　　　　　　―ーーー→　「aji.html」
　　　　　　歳時記　　　　　　　―ーーー→　「saijiki.html」
　　　　　　都あるき　　　　　　―ーーー→　「miyako.html」
　のリンクを設定する。

　一旦設定したリンクを解除するには：
　　　解除すべきリンクの文字をドラッグ　→　右クリック　→　「リンクの解除」

（１）「プリビュー・モード」で「リンク」元の文字や画像をポイントする　→　マウス・ポインタが手形に変わる
　　　→　クリック　→　所期のページが表示されればＯＫ　→　戻るボタンをｸﾘｯｸ　→　
　　　元のページに戻る

（２）ウェブ・サイトを開いた状態で　→　画面右側の「サイト」ボタンをクリック　→　「サイト一覧」
　　の「リンク・タブ」選択　→　「リンク」元のページ名の左端の（＋）ボタンをクリック　→　（ー）
　　ボタンに変わり　→　その下に「リンク先」のファイル名が表示される

（３）「ビジュアル・サイト・ビュー」でもリンクの関係が同様に確認出来ます。
　　（＋）ボタンをクリック　→　（ー）ボタンに変わり　→　その下に「リンク先」のファイル図が表示される。

文字や画像をクリックすると、電子メール・ソフトを起動し、「メッセージ作成」ウィンドウを表示させます。
ウェブ・ページを見た人に、このリンクを付けておいて、電子メールを送信してもらえます。

　　リンク元の文字又は画像（メールのイラスト等）をクリック　→　メニューの「挿入」　→　「リンク」
　　→　「属性ダイアログ」の「メール・タグ」を選択　→　「宛先」に「受信メール・アドレス」を入力
　　→　「ＯＫ」ボタンをクリック

電子メール・リンクの確認は：

　　リンクが張られているページを表示した状態で　→　「プリビュー・モード」にする　→　「リンク」元
　　の文字や画像をポイントする　→　マウス・ポインタが手形に変わる　→　クリック　→
　　指定した電子メール・アドレスが記入された「メッセージ作成ウィンドウ」が表示される　→　
　　「メッセージ作成ウィンドウ」の「閉じる（Ｘ）」をクリック。

例えば、非常に長いページで、スクロールしないとページの下の方を見ることが出来ない場合、ページの先頭に目次を第一章、第二章、第三章、・・・というように作成しておいて、その目次にリンクを設定しておけば、スクロールしないで直接各ページにジャンプすることが出来ます。

　☆　ページ内のリンクには、先ずリンク先の場所に「ラベル」（アンカーということもあります）を付します。
　　　リンク先の場所なり画像なりをクリック　→　メニューの「挿入」　→　「リンク」　→　「属性ダイアログ」
　　　表示　→　「ラベルを付ける」タグ選択　→　「ラベル」欄に「yudofu」と入力　→　ＯＫボタン

　☆　次に、リンク元からリンク先の「ラベル」へリンクを設定します。
　　　リンク元の「湯豆腐」の文字をドラッグしてハイライトさせます　→　メニューの「挿入」　→　「リンク」
　　　→　「属性ダイアログ」表示　→　「ラベルへ」タグ選択　→　「ラベル」欄に（▼）で「yudofu」を選択
　　　→　ＯＫボタン

　☆　同様に、　「おばんざい」　→　ラベルの「obanzai」,
　　　　　　　　　　「京懐石」　→　ラベルの「kaiseki」,
　　　　　　　　　　「京漬物」　→　ラベルの「tsukemono」,
　　　　　　　　　　とページ内のリンクを設定する。

画像内（例えば地図画像）の特定の領域（例えば特定の字や模様）をクリックすると、指定されたリンク先を表示する画像を「イメージ・マップ」或いは「クリッカブル・マップ」といいます。

「イメージ・マップ」の画像には通常複数のリンク先が指定され、その画像の局部の詳細を説明するような場合に便利に利用されます。

☆　「都あるき」のページ（miyako.html）にある地図画像を「イメージ・マップ」にしてみます。

　　　「地図画像」を右クリック　→　「ショートカット・メニュー」の「画像の編集」　→　
　　　「イメージ・マップの編集」　→　「イメージ・マップ・エディタ」ダイアログが表示される　→
　　　「リンクを設定する領域」のパターンの中から」（□）をクリック　→　「きぬかけの路」の部分を
　　　四角にドラッグして四角の範囲指定をする　→　「属性ダイアログ」表示　→　「ファイル・タブ」選択
　　　→　「ファイル名」欄に「参照」ボタンをクリック　→　「ファイルの場所＝Ｋｙｏｔｏ」を確認し　→
　　　「ファイル名＝”kinukake.html”」を選択　→　「開く」　→　「属性ダイアログ」表示に戻り　→
　　　「ファイル名」が”・・・/My Documents/kyoto/kinukake.html”になっているのを確認し　→　ＯＫ
　　　→　「イメージ・マップ・エディタ」ダイアログが表示に戻る　→マップ・リスト表示/非表示ボタンを
　　　クリック　→　「図形一覧」から「長方形」を選択　→　「代替テキスト」欄に”きぬかけの路を歩く”
　　　と入力　→　「図形一覧」から「領域外」を選択　→　「代替テキスト」欄に”京都も地図”
　　　と入力　→　「イメージ」欄のをクリックして、イメージ・マップの種類一覧から「CSIM」を選択→
　　　ＯＫボタン　　　（注）　「CSIM」　＝　”client side image map”

☆　同様にして、「洛中周辺」の部分　→　「rakuchu.html」、
　　　　　　　　　　「東山周辺」の部分　→　「higashi.html」　と設定する。

☆　イメージ・マップの確認

　　　「プリビュー・モード」で「リンク」元の文字や模様をポイントする　→　マウス・ポインタが手形に変わる
　　　→　クリック　→　所期のページが表示されればＯＫ　→　戻るボタンをｸﾘｯｸ　→　
　　　元のページに戻る　

ウェブ・ページの画像をポイントした時に、画像が変形したり、別の画像に置き換わったりする効果を「ロール・オーバー効果」といい、これもリンクの一種です。

この機能は古いバージョンのブラウザーではサポートされていません。

「ロール・オーバー効果」は「画像のロール・オーバー効果ウィザ−ド」を使って、対話形式で設定出来ます。

☆　歳時記のページ（saijiki.html）の画像「桜の名所」に効果を設定する：

　　　画像”桜の名所”をクリック　→　メニューの「挿入」　→　「画像の効果」　→　「ロールオバー効果」
　　　→　「画像のロールオーバー効果ウィザード（通常時の画像指定）」ダイアログ表示　→
　　　ここで「ポイントしていない通常時の画像」が「image/sakura.gif」になっていることを確認　→
　　　「次へ」ボタン　→　「画像のロールオーバー効果ウィザード（ポイント時の画像指定）」ダイアログ
　　　表示　→　画像の指定を「通常時の画像に効果を加えたものを使用」を選択　→　
　　　「効果の選択」ボタンをクリック　→　「効果の選択」ダイアログ表示　→　「効果の一覧」から　→
　　　「明るく」を選択　→　「プリビュー」で変化を確認　→　ＯＫボタン　→　「画像のロールオーバー
　　　効果ウィザード（ポイント時の画像指定）」ダイアログ表示に戻る　→　「プリビュー」で効果を確認
　　　→　「次へ」ボタン　→　「画像のロールオーバー効果ウィザード（その他の設定）」ダイアログ表示　
　　　→　「リンクの指定」の「参照」ボタンをクリック　→　「ファイルの場所」が「kyoto」であるのを確認
　　　→　「ファイル一覧」から「sakura.html」を選択　→　リンクの指定が正しいこと確認　→　「次へ」
　　　→　「画像のロールオーバー効果ウィザード（他の場所の画像の交換）」ダイアログ表示　
　　　→　「完了」ボタン

☆　同様に、歳時記のページの画像「紅葉の名所」に効果を設定する：

　　　画像”紅葉名所”をクリック　→　メニューの「挿入」　→　「画像の効果」　→　「ロールオバー効果」
　　　→　「画像のロールオーバー効果ウィザード（通常時の画像指定）」ダイアログ表示　→　・・・・・

☆　ウェブ・ページ（歳時記のページ）の保存：

　　　メニュー「ファイル」　→　「上書き保存」　→　「素材をコピーして保存」ダイアログ　→　「保存」

リンクを指定する時、特に指定しなければ（言換えれば、ターゲットを指定しなければ）、リンク先のページはリンク元と同じウィンドウに表示さレます。

リンクを指定する「属性」ダイアログで「ファイル名」欄で「ファイル名」を選択した後、その「属性」ダイアログの最下端にある「ターゲット」欄で「新しいウィンドウ」を選択すると、リンク先のページはリンク元のページと独立した新しいウィンドウに表示されます。

この基本コースの範囲外でありますが、応用コースでは「フレーム」に就いて勉強します。
「フレーム」とは一つのウィンドウを幾つかのウィンドウに区切った場合の一つで、リンク先のページがどの「フレーム」に表示させるかを指定できますが、これが一般にいう「ターゲット」です。

第三者の作成したウェブ・サイトにリンクを張ることがよくあります。
この場合は、リンクを指定する「属性」ダイアログで「ＵＲＬへ」タブを指定し　→　「ＵＲＬ」欄に「http://」で始まる第三者のＵＲＬをコピーして貼り付けます。

特別に、「リンク・フリー」と明示しているサイト以外にリンクを張る場合には、そのサイトの責任者の許可をとるのがエチケットです。そして、その場合は、「ターゲット」にも「新しいウィンドウ」を選択するのがエチケットです。「ターゲット」を指定しないで第三者のサイトにリンクすることは、あたかも他人のサイトから内容をコピーして自分のサイトに埋め込む行為と同じようなことと見做されます。