誰にでも簡単にHPを作成出来るのが、HP作成ソフトです。
その中で、ここではHPビルダーの基本操作について画像入りで詳しく
ご説明してまいります。
☆ ホームページ・ビルダーの基本操作 ☆
☆ どこでも配置モード・標準モード・テンプレートとは ☆
ホームページ・ビルダーを立ち上げると以下の画面が出てきます。
この「どこでも配置モード」「標準モード」「テンプレート」にはどのような違いがあるのでしょう。
（１）どこでも配置モード
どこでも配置モードとは、文字や画像がカーソルの指定位置に好きに配置できます。
ですが、WEB上で公開した場合画像などがずれることがありますし、ソースは配置した順に
表示されますので、画面上での位置とソース上での位置が合致していないことがあります。
（２）標準モード
これは一般的なモードです。Wordのような感覚で白紙の上に、自由に書き込めます。
私は、ここを使っています。
（３）テンプレート
ここは、あらかじめ、目的を決めてテンプレート（ひな形）が初期設定されています。
壁紙や文字の色、アイコンなどがあらかじめ決められていますので、どのテンプレートに
するのかを選択すれば、１つずつ文字の色などの設定をする必要がありません。
色々ありますがクリックしただけではパソコンは壊れません。
失敗したら又、最初からやってみましょう。
☆ ページ編集・HTMLソース・プレビュー画面 ☆
モードを決定し、新規作成画面が出ますと以下のように３つの編集領域が現れます。
この「ページ編集」「HTMLソース」「プレビュー」にはどのような違いがあるのでしょう。
（１）ページ編集
ここは文字通り、文字を書き込んだり、画像を貼り付けたりの作業をする画面です。
（２）
HTMLソース
ここはソースを確認する画面です。私は横文字がわかりませんが、編集画面で、「おはよう」と書けば
それに沿ったソースが出来ています。
（３）
プレビュー
ここはページ編集で出来た画面をWEB上にアップした時にこんなふうになりますよという
試作を確認できる画面です。もっと赤い色にしたいとか、文字を大きくしたいとか考えることが出来ます。
☆ 背景の色・文字の色の設定 ☆
基本となる背景の色、文字の色、リンクの色などを設定します。
「編集」から「ページのプロパティ」をクリックすると以下の画面が出ます。
※「背景／テキスト色」を選択してください。
「色指定」でそれぞれの項目の横にある、色のボタンをクリックすると、パレットが出てきますので
好きな色を選んでください。
「その他」をクリックするともっと細かく分けられた色が出てきますし、グラデーションのパレットから
好きな色を作ることもできます。
※ グラデーションのパレットから選んだ色は右側のバーに、さらに細かいグラデーションとなって
表示されます。そこで、濃淡を決定すると「色｜純色」という枠に表示されますので、その色で
よければ「色の追加」ボタンをクリックします。すると、左側の「作成した色」にその色が表示
されますので、それを選択して「ＯＫ」ボタンをクリックしてください。
「背景」「テキスト」「リンク」「既読リンク」「選択リンク」全ての項目の色を決定したら、「ＯＫ」ボタンを
クリックします。すると、決定した色が基本の色となります。
※ 「背景」とはそのままバックの色になります。
「テキスト」とは文章を書いたときの文字の色になります。
「リンク」とはテキストリンクを貼ってある部分の色になります。
「既読リンク」とは一度そのリンク先に行ったことがある場合にわかるよう、色が変わるように
したい場合に、「リンク」と異なる色を設定します。
「選択リンク」はリンクにカーソルを乗せたときに、「今このリンクを選択していますよ」とわかるよう
色が変わるようにしたい場合に、「リンク」「既読リンク」と異なる色を設定します。
☆ 壁紙の設定 ☆
背景を単色にするのではなく、壁紙にしたい場合は、ＰＣに保存してある画像ファイルもしくは
ホームページ・ビルダー内の素材集から選ぶことが出来ます。
「挿入」から「画像ファイル」を選択すると、「ファイルから」「素材集から」・・・と項目が出てきますので
使いたい画像があるほうをクリックしてください。
これはツールバーの 
ボタンの▼をクリックしても同じです。
また、左側に以下のような「サイト／素材ビュー」が表示されている場合は、「壁紙用素材」フォルダを
選択すると、画像ファイルの一覧が表示されます。
好きな画像を選択したら、
ボタンをクリックしてください。
ここで、選択した壁紙の画像もＦＴＰでアップロードすることを忘れないでください。
☆ 文章を書くには ☆
文章はページ編集画面でそのまま書くことが出来ます。また、
をクリックしますとロゴ文字も書けます。
何度失敗しても、閉じて、または、削除して、新規作成をすればOKですので、何度も挑戦して
使い方をマスターしましょう。
また、選択した文字を黒く反転させ（指定して）ツールバーの 
をクリックしてみましょう。
文字が大きくなります。小さくする場合は 
をクリックしてみましょう。
は色の変更などが出来ます。ここも練習してみましょう。
☆ 文章の修正の仕方 ☆
修正をしたいところを指定して、削除。または、カーソルで後ろからちょんちょんと消してゆきます。
失敗したら、「編集」から「元に戻す」をクリックすれば元に戻ります。
これはいつでも出来ます。「編集」から「元に戻す」を覚えておきましょう。
☆ 画像の挿入 ☆
HPに入れたい画像を、マイピクチャーなどに保存しておきます。
編集画面で画像を入れたいところにカーソルを置き、「挿入」「画像ファイル」「ファイルから」の順にクリックして
保存先を選択し、画像を選びます。
※ 壁紙の設定と同じ手順になります。
ホームページ・ビルダーの素材集にもたくさんの画像がありますので、いろいろ見てみましょう。
ここで、挿入した画像もＦＴＰでアップロードすることを忘れないでください。
☆ ＷＥＢ上で画像が表示されない場合 ☆
壁紙や画像を挿入したときに、それらの画像をアップロードしたにもかかわらず、WEB上で表示されない場合は
ソースを一部編集します。
「YAHOO！の画像を取り込む」を例にします。
「HTMLソース」画面を見ると画像のソースは
<IMG src="file:///C:/My
Documents/My Pictures/yahoo!.gif"
width="152" height="40" border="0">
このように表示されています。（画像は必ず <IMG src=・・・・・> と表示されます）
ここで
<IMG src="file:///C:/My Documents/My Pictures/yahoo!.gif" width="152"
height="40" border="0">
というソースの緑の部分「画像を保存した場所」を修正します。
ここを「ＰＣでの保存場所」ではなく「サーバーでの保存場所」に変更するのです。
ＦＴＰでアップロードするときに、大抵の場合は「html」フォルダの中の「image」フォルダに
画像をアップロードしています。
ですからソースを
<IMG src="image/yahoo!.gif"
width="152" height="40" border="0">
このように変更すればＯＫです。
ＨＰのファイルをアップロードしなおしてＷＥＢ上で確認してみましょう。
☆ 作成したHPの保存 ☆
作成したHPは、作成途中でもこまめに保存しましょう。消えちゃうと悲しいから。
「ファイル」から「名前をつけて保存」をクリックします。
保存場所は何処でも、マイドキュメントやデスクトップでもお好きなところに。
ファイル名は半角英数字となります。２度目からは、「上書き保存」でOKです。
☆ 保存したファイルを開くには ☆
ホームページ・ビルダーを立ち上げたら、「ファイル」から「開く」あるいは、「スタート」から「ページを開く」で
保存したファイルを選択します。
☆ タグについて ☆
http://www.mick-1.net/metatagu.html
メタタグとは <META で始まっているもので、HPの情報を記載するものです。
上記のサイトなどでお勉強しましょう。又、尊敬する先輩のHPに行って、「表示」から「ソース」を
クリックしてみましょう。メタタグ、キーワードの入れ方など良く解ります。
気に入ったらお断りして頂きましょう！
知っておきたいタグ
<
ロボット型検索エンジンに拾ってもらうために入れておきましょう。
<META name="description" content="・・・・・
">
検索結果で、タイトルの下に表示される紹介文をここに記入します。
content="・・・・・ " の「・・・・・」の部分に入れたい文章を記入します。
<META name="keywords" content="・・・・・
">
検索エンジン対策で重要なキーワードをここに記入します。
content="・・・・・ " の「・・・・・」の部分にキーワードを「,（半角カンマ）」で区切って記入します。
<TITLE>・・・・・</TITLE>
これはメタタグではなくタイトルタグになります。「・・・・・」の部分にＨＰのタイトルを入れます。
メタタグ、タイトルタグはソースの<HEAD>と</HEAD>の間に入れます。本文などは<BODY>と</BODY>の間に入れます。
つまり、ＨＰというのは「頭」と「体」だけの単純なつくりなのです。
しかも、ホームページ・ビルダーを使えばこういったソースが良くわからないという方でも、簡単にＨＰを
作ることが出来る、便利なソフトなのです。
☆ 参考サイト ☆
http://joyjoy.com/tomyhome/menu2.html
HP作成の逆引き・知りたいこと別の目次
http://hpb.cool.ne.jp/
ホームページ・ビルダー2000.2001.V6.V7.V8というソフトを紹介
http://www.wsb.jp/hpb/
ホームページ・ビルダー作成報告
