ホームページビルダーでホームページを作成する(入門編) |
- 最低限ホームページビルダーの設定を行っておきたいこと。
- ・作成するファイルの拡張子がhtmlになるようにする。
- ・ヘッダ部分にGENERATERとしてホームページビルダーが表示されないようにしておく。
- [ツール] メニューの [オプション] をクリックします。

- [ファイルのオプション] グループの [HTML ソースに GENERATOR を組み込む] チェック ボックス をオフにします。

- [ファイルのオプション] グループの [HTML ファイルの拡張子(S)] テキストボックス を「html」(書き込む)にします。

- これで設定完了です。[OK] ボタン をクリックします。

- これからホームページを作成します。
[ファイル] メニューの [標準モードで新規作成] をクリックします。
[どこでも配置モードで新規作成]は絶対使ってはいけない。 インターネットエクスプローラ(IE)以外のブラウザで表示が崩れる場合が多い

- 適当にページの中に文字を書いてみましょう。Word等と同じ感覚ですね。書いた文章を選択して(青く選択される)
[文字サイズ拡大] ボタン をクリックします。すると文字が大きくなります。段階的に拡大することができます。
これで文字の拡大が出来ます。

- もう一回[文字サイズ拡大] ボタン をクリックすると大きくなりますね。

- 次は文字の縮小です。縮小したい文章を選択して[文字サイズ縮小] ボタン をクリックします。
すると文字が縮小されます。これも拡大と同じように段階的に縮小されます。

- 次に文字の色を変更します。変更したい文章を選択します。そして[フォントの変更] チェック ボックス をクリックします。
フォントを変更するダイアログが表示されます。

- つけたい色を選択します[例 ピンク色] のボタン をクリックします。

- ピンク色に変更出来ました。

- 次に全体の背景色を変更してみましょう
[編集] メニューの [背景/文字色の設定] をクリックします。

- 下記のようなダイアログが現れますので[色指定] グループの [背景(C)] ボタン をクリックします。
背景に色をつける。

- 色を設定するパレットが現れますので、そのパレットの色を使う場合はその色をクリックする、
それ以外の色の場合は[その他] ボタン をクリックします。

- [色の設定] ダイアログが表示されます。 背景色にしたい色を選びます。
OKを押します。

- すると下記のダイアログが現れますのでOK をクリックします。

- これで背景色が変わりました。

- 次に背景を壁紙で表すことにしましょう。
[挿入] メニューの「画像ファイル」 [素材集から壁紙として] をクリックします。

- ホームページビルダーに用意しているサンプル壁紙が現れますので、適切な壁紙を選択します。
[SampleImagePane] をクリックします。

- そして[開く] ボタン をクリックします。

- すると選択した壁紙が現れます。これで背景を壁紙で表したことになります。

- ページのタイトルを入力してみよう
[編集] メニューの [ページの属性] をクリックします。

- ページタイトルにタイトルを挿入します。例「ホームページ作成講座」
[OK] ボタン をクリックします。

- これでページタイトルが挿入されました。次にファイルを保存します。
[ファイル] メニューの [名前を付けて保存] をクリックします。

- 下記のダイアログが現れますので、[新しいフォルダの作成] ボタン をクリックします。

- フォルダ名を「例:homepage」としましょう。

- homepageフォルダの中に保存します。ファイル名を「index.html」とします。
1つのフォルダの中に必ずindex.htmlのファイルを入れておきましょう。

- [保存] ボタン をクリックします。

- 下記のようなダイアログが現れますので、壁紙gifをhtmlと同じフォルダに入れることにして
[保存] ボタン をクリックします。
(他のフォルダに保存するときは参照をクリックして保存することができます)

これで1ページが完了です。
- 次にタイトルロゴの作り方です。
タイトルロゴとして表示したい文字を入れます。例:タイトルロゴを作ろう
この文字を選択します。

- 次に[挿入] メニューの [ロゴ] をクリックします。

- 下記のようなダイアログが現れますのでタイトルロゴにふさわしいサンプルロゴタイプを選択します。

- 例:002番、文字の大きさ34にしました。
文字の大きさを変えるにはインジケータ をマウスでドラッグしてスライスします。
- [完了] ボタン をクリックします。

- これでタイトルロゴが出来ました。

|