基礎編 １．ページのイメージを作成 １−１まずデザイン画を描いてみよう ホームページの制作に当たり、もっとも重要なのはどんなページがつくりたいのか、これから制作するホームページのイメージをしっかりと作ることです。実際にこれから作るホームページの具体的なイメージが描ければ全体の５０％の作業が終了したと入っても過言ではないと思います。

トップページイメージ ２ページ目 作者プロフィールの 紹介ページ ３ページ目 商品ギャラリーの ページ ４ページ目 リンク集

イメージ画像はトップページ、サブページなど制作しようと思っているすべてのものを書いてみましょう。 その際、入力する紹介文や説明などの文章は大まかなものでかまいませんが、ページのタイトルやサブページに飛ぶボタンの文字列、ボタンの配置などはなるべくこの時点で決めておくと今後の作業がスムーズに進みます。

次にそれぞれのページの構成を図に書いてみます。 上のページ以外にクリックでメールソフトを起動するボタンを設置すると下のような構成になります。

トップページ（ｉｎｄｅｘ．ｈｔｍｌファイル） 　│ 　├プロフィールページ（profile.htm） 　│ 　├ギャラリーページ（gallery.htm） 　│ 　├リンク集（link.htm） 　│ 　└メール

１−２どこでも配置モードと標準モードの違いについて

つぎにホームページビルダーを使ってイメージしたホームページを実際に制作して行きますが、ホームページビルダーにはページ制作に当たり２つのモードが用意されています。 一つは「どこでも配置モード」そしてもう一つが「標準モード」です。 まず、実際にページを制作する前に、この「どこでも配置モード」そしてもう一つが「標準モード」の違いについて解説します。

「どこでも配置モード」 「どこでも配置モード」とは呼んで字のごとく文字や写真といったものを白い紙の上に自由に配置してゆける編集モードです。この「どこでも配置モード」を使うとホームページ制作の知識があまりない方でもすぐに凝ったページレイアウトを制作することが可能です。 どこでも配置モードのメリット 初心者でも簡単に凝ったレイアウトのホームページの制作が可能 特別なソフトを使わなくても文字や写真を重ねることが出来る。 （クリックで実際の見本ページを表示します。） 上の図のように文字や写真を重ねたり思った位地に好きなものを配置することが可能です。 しかしこの「どこでも配置モード」ですが、初心者の方にはあまりおすすめ出来ません、それは次にあげるようなデメリットがあるためです。 どこでも配置モードのデメリット ブラウザの環境（文字の大きさ）の設定によって意図したデザインから大きく崩れてしまう。注１※） ＨＴＭＬのソースが複雑になってしまい、ＨＴＭＬの習得が困難（今後掲示板やショッピングカートなどのＣＧＩやページを動的に彩るjavascriptなどをページ内に盛り込む場合、少なからずＨＴＭＬの知識が必要となってきます。ＨＴＭＬは決して難しいものではないのでこの機会に是非覚えましょう。） 「ブラウザの環境（文字の大きさ）の設定によって意図したデザインから大きく崩れてしまう」 を具体的に説明すると下のような感じです。 サンプルページ 上のサンプルを見て頂くとよくわかりますが、ブラウザの文字の設定を＜中＞で見たときは文字は写真上にきれいにレイアウトされていますが設定を＜最大＞にすると文字が写真にかぶってしまいます。 また、ホームページビルダーの編集画面とプレビュー画面を比べてもデザインが崩れています。 プレビュー画面 編集画面 注１※この現象はスタイルシートというテクニックを使えば回避できますが、初心者の方にはすぐには少々難しいためデメリットとしました、またホームページビルダーのバージョン７以降で制作した場合上のような現象は起きません。

「標準モード」 「標準モード」とはワープロソフトと同じような感覚でページを制作して行くモードです。「どこでも配置モード」のような特殊な概念がないため、ワープロソフトを使ったことのある方であればすぐにホームページの制作が可能となります。また出力されるＨＴＭＬのソースが比較的簡単なのでＨＴＭＬの習得に役立ちます。