４−１　トップ・ページを既製の素材を利用して編集する　（テキストの第４章Step１〜Ｓｔｅｐ６）

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

　水平線の挿入や、素材集からタイトル・バナーやボタンの素材を挿入することを確認する。

　メニューの「サイト」　→　「サイトを開く」　→　「サイトを開くダイアログ」　→　「京都物語を選択」　
　→　「開くボタン」　→　「ビジュアル・サイト・ビュー」が表示される。

　　「ビジュアル・サイト・ビュー」のトップ頁「index.html」をダブル・クリック

　画面右側の「素材ボタン」　→　「素材ビュー・タグ」表示　→　「画像一覧」から「画像のイラスト」を選択
　→　一覧から「その他」選択　→　一覧から「other25.gif」選択　→　
　「ページ編集領域」の望みの位置にドラッグ

　挿入した画像と文字の配置関係を望み通りに変える（下揃え　→　中央揃え）。

　「対象の画像を右クリック」　→　「プルダウン・メニュー」　→　「属性の変更」を選択　→　
　「属性ダイアログ」表示　→　「画像タグの位置揃え」で「中央揃え」を選択　→ＯＫボタン

　デジカメで撮ったり、スキャナーで取り込んだり、自分で作成した画像をウェブ・ページに取り込みます。

　画面右側の「素材フォルダ・ボタン」　→　「フォルダ・タグ」表示　→　「フォルダ一覧」から
　「オリジナル画像の入っているフォルダ」を選択　→　ファイル一覧から「10sensu.gif」選択　→　
　「ページ編集領域」の望みの位置にドラッグ

　挿入した画像と文字の配置関係を望み通りに変える（画像の右側に文字を回り込ませる）。

　「対象の画像（10sensu.gif）を右クリック」　→　「プルダウン・メニュー」　→　「属性の変更」を選択　→　
　「属性ダイアログ」表示　→　「レイアウトの回り込み」で「左寄せ」の選択チェックを入れ　→ＯＫボタン

　

　所期の回り込みが出来ていない場合は：
　文字列の画像回り込みが終了させたい場所にカーソルを移動　→　メニューの「挿入」　→　「改行」
　→　改行ダイアログ表示　→　「左寄せが終了する位置まで改行」を選択　→　ＯＫボタン

　挿入画像の左右に余白を入れたい場合は：
　対象の画像（10sensu.gif）を右クリック」　→　「プルダウン・メニュー」　→　「属性の変更」を選択　→　
　「属性ダイアログ」表示　→　「余白」で「左右に３５ピクセル」を入れ　→ＯＫボタン

　代替テキストは、画像が表示出来ない場合に代替テキストとして表示させたり、音声ブラウザーが
　画像の代わりに読み上げたりするテキストです。古いバージョンのブラウザーを使っている訪問者に、
　画像の代わりにこの代替テキストを表示します。

　代替テキストは、今まで何回も出てきました「属性ダイアログ」の上から３行目の「代替テキスト」欄で
　入力出来ます。

　水平線を挿入すると、内容の区切りが明確になり、メリハリのあるウェブ頁になります。
　項目と紹介文の間に水平線を挿入します。

　水平線を挿入する位置にカーソルを移動　→　メニューの「挿入」　→　「水平線」を選択

　水平線の「位置揃え」、「長さ」、「太さ」等は：
　「対象の水平線を右クリック」　→　「プルダウン・メニュー」　→　「属性の変更」を選択　→　
　「属性ダイアログ」表示　→　「位置揃え」、「長さ」、「太さ」等を指定　→ＯＫボタン

　オリジナルの「飾りの付いた区分水平線」を挿入するには、画像として保存してあるフォルダーから
　オリジナル画像を挿入すると同じ方法で挿入し、属性を調整します。

　サイトのトップ頁はサイト作成時に自動的に「index.html」として保存されていますので、編集を
加えた後に保存する折には、「上書き保存」を行います。それ以外の頁を最初に保存する場合は
勿論「名前を付けて保存」を行います。

　「上書き保存」なり「名前を付けて保存」なりで重要なことは、保存の際に編集を施したウェブ・
ページそのものの保存と同時に、素材集やオリジナル画像のフォルダから取り込んだ画像など
の材料を、作業中のウェブ・サイトと同じフォルダーの中のどこかのフォルダに保存する必要が
あります。
これを怠ったり、正しく行わないと、ウェブ・ページに表示されるべき画像が表示されないだけで
なく、取り込んだ元のファイルも壊れてしまう可能性もあります。

　保存するウェブ・ページが表示されている状態で　→　「上書き保存」ボタンをクリック　→
「素材ファイルをコピーして保存」のダイアログが表示される。　→　「取り込んだファイル毎に」
ファイル名を必要なら変更し、サイトと同じフォルダーの中の何処かの保存場所を「参照」ボタン
をクリックして指定し　→　「保存」ボタンをクリック

取り込み元のファイル名を変更して、サイト内に保存する場合は：
「上書き時に自動的にファイル名を変更する」のチェック・ボックスにチェックを入れておく。（初期設定）

《保存するファイルに関する注意事項》

（１）ウェブ・ページのファイル名、画像のファイル名、音楽のファイル名を含めてウェブ・サイトの
　　中のファイル名は全て半角英数字で書かなければなりません。
　　漢字など日本語のファイル名は自分のパソコン内では通用しますが、インターネット内では
　　原則的に通用しません。
（２）大文字と小文字は区別されますので、拡張子を含めてファイル名は小文字で統一して書く
　　習慣を付けることが大事です。
（３）素材集などから取り込むファイルのファイル名は素材集などの中での組織的にネーミングに
　　してありますので、必ずしもウェブ・サイト内で適当であるとは限りません。
　　ウェブ・サイト内に保存の際にウェブ・サイト内の組織的なネーミングに変更しておくと、
　　後のウェブ・サイトの保守管理が易しくなります。
（４）画像などをサイト内で保存する際には、予め「image」などというフォルダーを作成しておく
　　と作業が易しくなります。
（５）サイト内に取り込むオリジナルの画像ファイルは予め適正解像度（６００Ｘ４５０ｐｘｌ位）に
　　しておくと、作業がし易しくなります。　
　　必要以上に重いファイルは色々な点でウェブ・サイトに向きません。

４−２　表を利用してウェブ・ペイジを読み易くする　（テキストの第５章Step１〜Ｓｔｅｐ７）

完成版サイトでこれから編集する頁を確認する

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

　表（Ｔａｂｌｅ）を利用することによって、掲載される情報がよく整理され、読みやすくなることを確認する

ウェブ・ページの新規作成　（京都物語サイトの中に”What's New”の頁を作成する）

（１）「京都物語」のウェブ・サイトを開く
　　　「サイトを開く」ボタン　→　「サイトを開くダイアログ」表示　→　サイトのリストから「京都物語」を選択
　　　　→　「ビジュアル・サイト・ビュー」が表示される
（２）ウェブ・ページ（What's New）を新規に「京都物語」サイトの中に作成する
　　　メニューの「ファイル」　→　「標準モードで新規作成」　→　編集領域に「空白ページ」が表示される

（１）ウェブ・ページのタイトルを入力
　　「空白ページ」の何処かを右クリック　→　「属性の変更」選択　→　「属性ダイアログ」表示　→　
　　「ページ・タイトル欄」に”京都物語What' New”と入力　→　ＯＫボタン

（２）トップ・ページと同じ基本色を設定
　　「空白ページ」の何処かを右クリック　→　「属性の変更」選択　→　「属性ダイアログ」表示　→　
　　「背景・文字タグ」選択　→　「ギャラリー」ボタンをクリック　→　トップ・ページの「背景/文字タグ」と
　　同じ設定の色カテゴリーで「黄色」選択　→　「組み合わせの２行・３列」選択　→　ＯＫボタン　→
　　ＯＫボタン

（３）ウェブ頁を日本語の提示に設定する
　　編集領域上部にある「ＨＴＭＬソース」タブ選択　→　<ｈｔｍｌ>を<ｈｔｍｌ　lang="ja">に変える。
　　→　「ページ編集」タブに戻しておく。

（４）頁のタイトル・バナー画像を挿入する
　　画面右側の「フォルダ」ボタン　→　「フォルダー・ビュー」表示　→　「フォルダー・ビュー一覧」より
　　「ホームページ・ビルダー１１」　→　「20title.gif」選択　→　編集領域に「空白ページ」にドラッグ
　　→　中央揃え　→　画像を右クリック　→　「属性の変更」選択　→　代替テキスト”What' New”
　　を入力する。

（５）タイトル・バナーの下に”柔らかな春の日差しの下、華やかな桜を眺めながら、京都の町を散策し
　　ませんか？”の文言を入力して、中央揃えをする。
　　

（６）「Ｔｏｐ」ボタンを、上の（４）と同じように「top.gif」から選択して、頁最下端に挿入。
　　（４）と同様にして、代替テキスト”ＴＯＰへ”も入力する。

表（Ｔａｂｌｅ）の挿入

（１）表の挿入と設定
　　表を挿入する位置にカーソルを移動　→　表挿入ボタンをクリック　→　「表の挿入ダイアログ」表示
　　→　表の行数５と列数３を指定し、「表の枠を表示する」のチェックを入れる　→　ＯＫボタン
（２）表の各セルに文字を入力する
　　1行１列目のセルに「フォーカス枠」と「ハンドル」が表示されていることを確認　→　
　　セル内にカーソルが表示されていることを確認　→　”催し”と入力　→　ＴＡＢキー　
　　→次々に各セル文字を入力して行く
（３）難しい漢字にルビを振る
　　”豊太閤”をドラッグしてハイライトさせる　→　メニューの書式　→　「文字飾り」　→　「ルビ」
　　→「属性ダイアログ」表示　→　ルビ欄に”ほうたいこう”と入力　→　ＯＫボタン　→　
　　文字列の右に”ほうたいこう”が表示　→　「プレビュー・タブ」で上付きでルビが表示されるのを確認
　　→　「ページ編集タブ」に戻しておくのを忘れないように

（１）行の追加
　　追加したいセルをクリック　→　メニューの「表」　→　「行の追加」　→　「下へ１行追加」或いは
　　「上へ１行追加」　→　”京おどり　8日（日）〜22日（日）”の文字入力
（２）行の削除
　　削除したい行の一つのセルをクリック　→　メニューの「表」　→　「行の削除」
（３）セルの結合・分割
　　複数のセルを纏めて一つのセルにしたり、一つのセルを分割して複数のセルにすることによって、
　　より複雑な表を作成出来ます。

　　《セルの結合》：　統合したいセルの一つを選択　→　メニューの「表」　→　「セルの縦に結合」或いは
　　　　　「セルの横に結合」　→　「上の或いは下のセルと結合」或いは「右の或いは左のセルと結合」
　　《セルの分割》：　分割したいセルを選択　→　メニューの「表」　→　「セルの縦に分割」或いは　→
　　　　　「セルの横に分割」
　　《複数セルの結合》：　統合したい複数セルを選択　→　「選択セルの結合」

　表全体の属性（全体のサイズ、色、配置、セル内の余白など）を変えることによって、
　表全体の体裁を改善することが出来ます。

（1）表全体のサイズ、位置揃え、セル内の余白、背景の色を一度に変更する
　　表内の一つのセルを選択　→　右クリック　→　→　「プルダウン・メニュー」　→　
　　「属性の変更」を選択　→　「属性ダイアログ」表示　→　「表タブ」を選択　→
　　「位置揃え」、「表の幅」、「セル内の余白」、「背景色」等を指定　→　ＯＫボタン
（２）表題を付ける
　　表内の一つのセルを選択　→　右クリック　→　→　「プルダウン・メニュー」　→　
　　「属性の変更」を選択　→　「属性ダイアログ」表示　→　「表タブ」を選択　→
　　「表題」の「表の上」或いは「表の下」を指定　→　ＯＫボタン　→　表題の文字を入力する

セル内の文字の配置や、列幅、行の高さ等を指定するにはセルの属性で行えます。複数のセルを選択
して設定を行いますと、セルの属性を一度に変更できます。このことは表の統一性を高める為にも役立ちます。

セルの属性を指定するには：
　　表全体の属性を指定する時と同じように右クリックから　→　「属性の変更」　→　
　　「属性ダイアログを表示」　→　「セル・タブ」を選択　→　各種指定　→　ＯＫボタン　で行えます。

新規に作成し、編集したウェブ・ページは勿論、メニューの「ファイル」　→　「名前を付けて保存」しなければ
なりません。

重要なことは：

（１）「名前を付けて保存ダイアログ」では、「保存する場所」が必ずウェブ・サイトのフォルダ
　　　である「kyoto」になっていなければなりません。
　　　場合によっては、整理上ウェブ・サイトのフォルダ内の特別なフォルダのこともあります。
　　　いずれにしても、「保存する場所」は当該ウェブ・サイトのフォルダの中でなくてはなりません。

（２）ファイル名は半角英数字で、小文字で入力しましょう。

（３）ファイルの種類は「html」です。

（４）画像ファイルなどウェブ・サイト外から読み込んだファイルは忘れないようにウェブ・サイト内
　　の適当なフォルダに保存しておきましょう。　
　　その際、ウェブ・サイト内の一貫性のある名前にＲｅ-ｎａｍｅしておくと、
　　後々のサイト管理に便利です。

ウェブ・ページの背景に貼りつけた画像ファイルを「壁紙」といいます。

☆　壁紙の選定テスト：

　　実際に壁紙画像をウェブ・ページに貼りつけることなく、色々感覚的にテストして見ることが出来ます。

　　壁紙を貼りつけたいページを開く　→　画面右端の「素材ボタン」クリック　→　
　　ボタンが「素材タブ」に変化し　→　「素材一覧」から「壁紙用素材」選択　→　下の窓に
　　「壁紙用ファイル一覧」が表示　→　「設定」ボタンをクリック　→　メニューから「壁紙テスト・モード」
　　を選択　→　「壁紙用ファイル一覧」から「任意のファイル」を選択　→　「編集中のページ」に表示
　　→　この「任意のファイル」を選択を繰り返しテスト　→　「ページ編集領域」内をクリック　→
　　「壁紙テスト・モード」が解除される

☆　壁紙の設定：

　　「壁紙テスト・モード」が解除された　→　「壁紙用ファイル一覧」から最適のファイルを選択　→
　　「挿入」ボタンをクリック　→　実際に壁紙が設定される。

☆　壁紙の解除：

　　メニューの「編集」　→　「ページの属性」　→　「属性」ダイアログ表示　→　「背景/文字色」タブ
　　→「背景画」の「画像ファイル名」をＤｅｌｅｔｅＫｅｙで削除　→　「更新」ボタン　→　「ＯＫ」ボタン