２−１　ホームページ・ビルダーの概要　（テキストの第２章Step１）

しかしこのコースでは、既にＷｏｒｄやＥｘｃｅｌに慣れている受講生を念頭において、「スタンダード」編集方式に集中して講義を進めて行きます。初心者にこの非常に大きなパッケージに習熟してもらうためには、先ず基本機能の全容を出来るだけ短期間に学習してもらうことが大切だと考えるからです。

　このソフトウェア・パッケージは使用者の対象をWORDも使ったこともない超初心者から、WORD・EXCELは一応操作できる一般的なレベルの方、更にHTMLのソース・コードを操ってウェブ・サイトを作成できる上級者までも視野にいれて構成されています。

　このことはこのソフトウェアのマーケティングにはある程度成功しているように思われますが、上に述べた一般的なレベルの方にとっては不必要な機能や原理抜きの操作手順が可也多く含まれているため、このパッケージ全体の仕組みを一早く理解し、慣れるのを妨げている“キライ”が大いにあります。

　この小文はこのパッケージのこうしたジレンマを明らかにすることによって、早くこのソフトの仕組みに慣れるにはどうしたら良いかを説明するよう試みたものです。

２−２　ホームページ・ビルダーの起動　（テキストの第２章Ｓｔｅｐ２）

ホームページ・ビルダーを起動する
「スタート」ボタン　→　「すべてのプログラム」　→　「ホームページ・ビルダー１０又は１１」　→
「ホームページ・ビルダーへようこそ」のダイアログ表示　→　編集スタイル「スタンダード」選択　→　ＯＫ

開くには「ウェブ・ページを開く」と「ウェブ・サイトを開く」の２通りがある。

２−３　ホームページ・ビルダーの画面　（テキストの第２章Ｓｔｅｐ３）

ページ編集領域の上部にはなどのタブがあり、編集中のウェブ・ページの表示スタイルを切り替えることが出来ます。上のタブは「スタンダード」モードのものです。

「ページ編集」タブ：ワープロ感覚で文字を入力したり、画像を挿入することが出来ます。
　　　　　　　　　　　ここでの入力・挿入の後には、自動的にＨＴＭＬソース・コードが生成されます。

「ＨＴＭＬソース」タブ：現在編集中のウェブ・ページのＨＴＭＬソース・コードが表示され、微妙な変更は
　　　　　　　　　　　　ソース・コードで直接編集することが出来ます。

「ページ/ソース」タブ：現在編集中のウェブ・ページが上下２段に分かれて「ページ編集」の表示と
　　　　　　　　　　　　「ＨＴＭＬソース」の表示が同時になされる。　微妙な変更は「ページ編集」表示
　　　　　　　　　　　　を見ながら、ＨＴＭＬソース・コードで直接編集することが出来ます。

「プレビュー」タブ：編集中のウェブ・ページを、ブラウザーではどう表示されるか確認できます。
　　　　　　　　　　この場合、ブラウザーは立ち上げる必要はありません。

（１）かんたんナビ・メニューの表示・非表示
　　かんたんナビ・メニューにのように、「>>」のある箇所はメニュー・ボタンが
　　隠されて、非表示になっていることを示します。その右側の縦棒を右にドラッグすると、隠れている
　　メニュー・ボタンが表示されます。

　　メニューの「表示」　→　「かんたんナビ」をクリックすることによって、「かんたんナビ・バー」の全体を
　　表示にしたり非表示にしたり切り替えることが出来ます。

　　メニューの「表示」　→　「ツールバー」　→　「初期値に戻す」を選択することによって、「ツールバー」
　　の設定を色々変えた後、簡単に元の設定に戻すことが出来ます。

（２）編集境域の表示サイズはで変更することが出来ます。
　　　（＋）を１回クリックする毎に１０％拡大し、（−）を１回クリックする毎に１０％縮小します。
　　　（■）をクリックすると拡大・縮小をリセットして１００％に戻します。

２−４　ホームページ・ビルダーの終了とファイルの保存

ウェブ・ページ・ウィンドウの（Ｘ）をクリックする。　この（Ｘ）は画面に２つある（Ｘ）のうち下の（Ｘ）です。
ウェブ・ページを編集して、保存しないで閉じると、保存確認のダイアログが出る。

サイトの外部から画像ファイル等を取り込んでウェブ・ページを編集した場合は、取り込んだファイルのサイト内保存も必要です。

ホームページ・ビルダー・ウィンドウの（Ｘ）をクリックする。この（Ｘ）は画面に２つある（Ｘ）のうち上の（Ｘ）です。

２−５　コマンドの実行とヘルプ

作業を進める為の指示或いは命令をコマンドといいます。
コマンドを実行する方法には次の４通りがあります。
（１）「メニュー・−バー」からコマンドを選ぶ
（２）「ツール・バーのボタン」をクリックする
（３）「ショートカット・メニュー」からコマンドを選ぶ
（４）ショートカット・キー

メニュー・−バーには全てのコマンドが階層構造のメニューとなって登録されています。
メニュー・−バーの一つのメニューをクリックすると、「ドロップ・ダウン・メニュー」が表示されます。
「ドロップ・ダウン・メニュー」の各コマンドの：
　　　　　　　　　　　　　　　　　左端にはそのコマンドに登録されているツール・ボタンが表示され、
　　　　　　　　　　　　　　　　　その右にはコマンド名が表示され、
　　　　　　　　　　　　　　　　　右端にはショートカット・キー、省略記号（.....）、（）等が表示される。
　　　　　　　　　　　　　　　　　省略記号（.....）はダイアログが表示されるコマンドを意味し、
　　　　　　　　　　　　　　　　　（）印はサブ・メニューが表示されるコマンドを意味します。

ツール・バーにはよく使われるコマンドがボタンとして登録されています。
ボタンをポイントすると、マウス・ポインターの近くにコマンド名が表示されますので、それで認識されます。

任意の場所、例えば画像などを右クリックすると、ポイントされたものに関係する「ショートカット・メニュー」がプルダウンで表示されます。これは非常に便利なので、このコースで頻繁に利用されます。

よく使うコマンドには「ショートカット・キー」が割り当てられています。
マウスを使わないで、キー操作で色々な作業をする人には便利です。

判らない用語や機能の説明、操作の手順を確認するには、この「ヘルプ 」を利用するのが、このソフト習熟のコツです。ヘルプには、「ガイド・マップ」、「トピックスの検索」、「ホームページ」、「パーソナル・ソフトウェア・オンライン・サポート」があります。

２−６　ウェブ・サイトとトップ頁の作成　（テキストの第３章Ｓｔｅｐ１〜Ｓｔｅｐ９）

（１）ウェブ・サイトの作成
　　ここで言うウェブ・サイトとはホームページ作成者のパソコンの中に作成される仮想ウェブ・サイトの
　　ことで、ローカル・サイトとも呼ばれます。このローカル・サイトのお陰でサイトの中のページや画像など
　　の素材が管理されるのです。
（２）トップ・ページの作成
　　トップ・ページはウェブ・サイトの表紙にあたり、通常新規にウェブ・サイトを作成する時に、
　　自動的に空白の「index.html」というファイルが作成されます。その後で、トップ・ページの編集をします。
（３）その他のウェブ・ページを作成しましす。
（４）リンクの設定
　　ウェブ・サイト内のウェブ・ページの間のリンク（繋がり）を張ります。
（５）ローカル・ウェブ・サイトのウェブ・サーバーへの転送（アップロード）

（１）ホームページ・ビルダーを、（編集スタイルにスタンダードを選択して）、起動する。

（２）メニューの「サイト」　→　「サイトの新規作成」　→　「サイト新規作成ダイアログ」表示　→　
　　サイト名に「京都物語」と入力　→　「次へ」ボタン　→　「新規にトップ・ページを作成する」を選択
　　→　「次へ」ボタン　→　「トップ・ページのファイル名」で「index.html」を選択　→
　　「トップ・ページの作成フォルダ指定」の「参照」ボタンをクリック　→　「フォルダの選択ダイアログ」表示
　　「My Documents」を選択　→　「新規ファルダ作成」ボタン　→　「新規フォルダ作成ダイアログ」　→
　　「kyoto」と入力　→　ＯＫボタン　→　「フォルダ選択ダイアログ」表示　→　
　　「kyoto」が選択されているのを確認　→　ＯＫボタン　→　「サイト新規作成ダイアログ」表示　→　
　　「トップ・ページ名」と「保存フォルダ場所」を確認　→　「詳細設定」ボタンをクリック　→
　　「サイト設定ダイアログ」表示　→　「フォルダ詳細設定」タブを選択　→　「トップフォルダの設定」が
　　トップ・ページの作成先と同じフォルダになっているのを確認　→　「画像ファイル」の「参照」ボタン
　　→　「フォルダの選択ダイアログ」表示　→　「フォルダ」が「kyoto」になっていることを確認　→
　　「新規フォルダ作成ダイアログ」表示　→　「image」と入力　→　ＯＫボタン　→　
　　「フォルダの選択ダイアログ」表示　→　「フォルダ」が「image」になっていることを確認　→　ＯＫボタン
　　「サイトの設定ダイアログ」に戻る　→　「image」が「kyoto」の中にあることを確認　→　ＯＫボタン
　　「サイト新規作成ダイアログ」に戻る　→　「完了」ボタンをクリック　→　
　　「ページ作成方法選択ダイアログ」表示　→　「白紙ページ」選択　→　「白紙ページ作成ダイアログ」
　　が表示　→　表示環境＝「ＰＣページ」、ページ種類＝「通常ページ」、編集モード＝「標準モード」
　　を選択　→　ＯＫボタン　→　「転送設定を今するか？」に「いいえ」　→　
　　「kyotoというサイトと白紙のトップ・ページ」が作成された。

（３）正しくサイトとトップ・ページが作成されたことを確認
　　＊　画面左側の「ビュー一覧」の「サイト・ボタン」をクリックして、「リンク」タグを選択して、
　　　　「ウェブ・サイト京都」とトップ・ページ「index.html」が作成されていることを確認
　　＊　画面左側の「ビュー一覧」の「フォルダ・ボタン」をクリックして、
　　　　　トップ・フォルダに「image」フォルダが作成されていることを確認。

（１）これから設定することを確認する
　　テキスト・ブックの５２頁で何をするか確認する。
（２）ページ編集領域に表示されている白紙の部分を右クリック　→　「ショートカット・メニュー」プルダウン
　　→　「属性の変更」を選択　→　「属性ダイアログ」が表示される　→　「ページ　タイトル」に
　　「京都物語　トップ」と入力する　→　ＯＫボタン　→　タイトル・バーに
　　「ホームページ・ビルダーーindex.htmlー京都物語　トップ〈標準モード）」と入ったのを確認。
（３）上と同様にして、「属性ダイアログ」が表示し　→　「背景/文字色」タブを選択　→
　　「ギャラリー」ボタンをクリック　→　左側で「黄色カレゴリー」、右側で「２行・３列のセット」を選択
　　→　背景、文字リンク色が所期の色になっているのを確認　→　「更新」　→　「ＯＫ」ボタン
（４）言語指定
　　「ＨＴＭＬソース」タブをクリック　→　「ＨＴＭＬソース・コード」を表示　→　２行目の<HTML>を
　　<HTML lan="ja">に変更する　→　「ページ編集」モードに戻しておく。

フォーカス枠：　文字、表、画像などのウェブ・ページ内の各要素は「フォーカス枠」と称するピンクの枠の中に入力します。　この枠に囲まれた部分が謂わば段落（パラグラフ）で、コマンドはこの段落単位で実行されます。

改行と改段：改行は同じ「フォーカス枠」（段落）の中での改行で、「ＥｎｔｅｒＫｅｙ」で行われます。
　　　　　　　　改段は新しい段落を作ることで、「Ｓｈｉｆｔ＋ＥｎｔｅｒＫｅｙ」で行われます。

京都物語、Ｗｈａｔ’Ｎｅｗ，味紀行、歳時記、都あるき　を入力して下さい。

プレビュー：入力や編集が終わったら、ページ編集領域の上段にある「プレビュー」タブをクリックして、
　　　　　　　ブラウザーではどう表示されるか確認して見ましう。　
　　　　　　　この場合、ブラウザーを立ち上げる必要はありません。

文字の書式には：

☆見出し：ツール・バー下段の最左端に窓で、「フォーカス枠」全体を少々大きく太い字体を設定できる。
　　　　　　見出し１が一番大きく２、３、・・・と小さくなる。指定する場合、範囲指定は不要で、
　　　　　　フォーカス枠の何処かをポイントすればよい。

☆文字サイズ：拡大・縮小する文字の範囲を指定する必要あり。
　　　　　　　　　メニューの「書式」　→　「サイズ」　→　プルダウン・メニューから選択する

	：１ランク拡大	：ツール・バーのボタンをクリックしても良い
	：１ランク縮小	：ツール・バーのボタンをクリックしても良い
	：４ランク拡大
	：３ランク拡大
	：２ランク拡大
	：１ランク拡大
	：変更なし
	：１ランク縮小
	：２ランク縮小

見出し１（京都物語）、文字のサイズ（Ｗｈａｔ’Nｅｗ）、書体（ご意見ご感想・・・　→　ＭＳ明朝）、
文字色（ご意見ご感想・・・　→　青色）

段落内の一箇所ポイントして指定すると、ツール・バーにWordでもお馴染みの「左揃え」、「中央揃え」、「右揃え」のツール・ボタンが現れるので、所期のボタンをクリックする。

京都物語のトップ・ページの書式設定：

（Ｗｈａｔ’Nｅｗ　以下を　中央揃え）

２−７　ウェブ・サイトとトップ頁の保存

　　　トップ・ページは最初にウェブ・サイトを作成し時に、「index.html」として保存されているので、
　　　メニューの「ファイル」　→　「上書き保存」　で上書き保存をする。

　　　トップ頁の編集が終わったら、ウェブ・サイトを閉じる前に、ブライザーで編集の出来具合を確認してみる。
　　　編集済みのトップ・ページを開いた侭の状態で、ツール・バーのInternet Explorerのボタンをクリックする
　　　とInternet Explorerが立ちあがって、Internet Explorerではどのように表示されるかが確認出来ます。

２−８　ウェブ・サイトとトップ頁を閉じる

　　ウェブ・ページ・ウィンドウの「閉じる」の（X）をクリックすると、トップ・ページ（index.html）が閉じら
　　れます。
　　この状態ではまだウェブ・サイトは開いていますので、「ビジュアル・サイト・ビュー」が開かれた侭です。

　　メニューの「サイト」　→　「サイトを閉じる」をクリックすると　→　「ビジュアル・サイト・ビュー」が閉じ
　　られ、ウェブ・サイトが閉じたことが確認出来ます。

　　その上で、ホームページ・ビルダーの「閉じる」の（X）をクリックすると、ホームページ・ビルダーが閉じ
　　られます。