ホームページ・ビルダーでWEBサイトを作ろう

ホームページ・ビルダーには、htmlファイルを作成するのにいくつかの方法があります。
あとで手のかかる編集スタイル「かんたんスタイル」はやめましょう。
編集モードも「どこでも配置モード」はやめましょう。 簡単なようですがきっと後で後悔すると思います。

編集スタイルは「スタンダード」

編集モードは「標準モード」

ホームページビルダーの設定

ホームページ・ビルダーを使いやすくするために最初に設定しておきましょう。

設定をするには、まずメニューの「ツール（Ｔ）」から「オプション（Ｏ）」を選択します。

１．「一般」の設定

　 オプションの一般タグをクリック
■「ＨＴＭＬ構文エラーを自動修正する」のチェックをはずします。

「重大なエラーのみ、修正ダイアログを開く」に

HTMLソースを直接編集するようになってくると、勝手に修正される時があって困るのです。

■「ページ作成モードの選択」は、「標準モード」にチェックを入れます。

「適用」をクリック。

２．「フォント」の設定

　「フォント」タブをクリック

■フォントサイズを１１から「１２」に変更

ホームページ・ビルダーの編集画面で文字のサイズが InternetExplorer のサイズ「１２」と一緒にしておくと違和感がないです。

３．「ファイル」の設定

「ファイル」タブをクリックします。
■「ＨＴＭＬファイル拡張子」は、プロバイダーによって異なるので、確認して「htm」と「html」のどちらかを選択。

■「ＨＴＭＬソースにＧＥＮＥＲＡＴＯＲを組み込む（G）」のチェックを外す。

チェックを入れておくとメタタグ↓が挿入されます。入れたくない場合チェックを外します。
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows">


■「バックアップファイルを作成する」のチェックをはずす。

ここにチェックが入っていると、自動的にバックアップファイル（拡張子は.bak」）が作成されます。バックアップファイルなくても不便を感じないと思います。

４．「ソースの編集」の設定

「ソース編集」のタブをクリックします。
■「出力文字」を「小文字」に設定します。

■文字下げのインデントを「０」に設定

　 ＨＴＭＬソースが左側にそろえられる。

■ライン数表示にチェックをいれる

HTMLソースを直接編集するとき、 ソースの左側に行番号が表示してあると、編集作業がしやすいです。

終了する場合は「ＯＫ」をクリックします。

「ようこそ」ダイアログについて

ホームページビルダーを起動したときに開く「ようこそ」ダイアログは、どの編集スタイルを使うかを選択するものですが、編集スタイルは、いつも「スタンダードの編集」を選ぶので毎回表示されるのが煩わしいときは、下図の左端にある「次回から起動時にこのダイアログを表示しない」にチェックをつけると、次回起動するときから「ようこそ」ダイアログは表示されません。

ローカルサイトフォルダの準備

パソコンでこのホームページのファイルを保存するためのフォルダ（ローカルサイト）を準備します。

場所は、「マイドキュメント」の中に「homepage」とか「web」などご自分のわかりやすい名前のフォルダを作ります。

マイドキュメントを開いてメニューバーの『ファイル』→『新規作成』→『フォルダ』。

新しいフォルダを作成します。

そして、そのフォルダの中に、タイトルや背景やアイコンやボタン等を入れる「images」フォルダも準備します。簡単に「img」でも「gazou」でも、ご自分で解りやすいフォルダ名でもOK。
フリー素材配布サイト様よりお気に入りの素材を見つけた場合は、この「images」フォルダの中に保存しておきましょう。

ご自分の写真等を挿入する場合は、事前にフリーソフト「JTrim」「縮小専用」等で写真のサイズをあらかじめリサイズしておくことを勧めます。

ページに横１枚載せる時は幅６４０ピクセル。横に２枚並べるときは幅３２０ピクセル以下
横に３枚並べるときは、幅２３０ピクセル以下ぐらいが参考になるでしょうか。 もちろんこれよりも大きくても小さくてもＯＫです。

一度決めたフォルダやファイル名は、変えないようにしましょう。リンク切れ発生の元になります。

もしも変更するときは、手順を踏んで。ビュジュアルサイトビューを使って変更します。

ホームページ・ビルダーで新規ローカルサイト作成

１．ホームページ・ビルダーを起動し、【メニューバー】→【サイト】→【新規サイト作成】

２．サイト新規作成→サイト名　（日本語または英数字）　次へをクリック

３．新規にトップページを作成するをクリック　次へをクリック

４．トップページのファイル名を　index.html　または　index.htm　（プロバイダーから指定されたファイルの拡張子を） 選択

５．トップページの作成フォルダを指定　
参照ボタンをクリック　ローカルサイトを保存するフォルダを指定する。
（この場合、マイドキュメントの「homepage」フォルダを選択）
作成したフォルダが選択されていることを確認（フォルダのアイコンが開いている状態）して「ＯＫ」をクリック→完了をクリック

６．ページ作成ウィザードが表示されるので、下記を選択します。

表示環境　　ＰＣ（通常）
ページの種類　通常ページ
作りかた　白紙から
編集モード　標準モード

転送設定は、 ＦＴＰツールを使用する方法でのちほど設定します。

ローカルサイトの新規作成で間違ったり、不要なローカルサイトを設定してしまった場合は、【サイト】→【サイト一覧/設定（L）】をクリック

不要なローカルサイトは、サイト名をクリックして選択し、１の削除ボタンで削除します。

またトップページが見つかりません等のエラーが出ているローカルサイトは、１の編集ボタンをクリックし、「サイト設定」見直しましょう。

トップページが見つかりませんと↑で表示されていたらこの画面でトップページの横の参照ボタンをクリックして再度設定し直してみましょう。

ビジュアルサイトビューについて

ホームページビルダーを起動しサイトを開くと、はじめにビジュアルサイトビューが開かれます。

ページの更新をしたい時などには、そのページをｗクリックするだけでページ編集画面に変わります。

ページのタイトルが付いているか、リンクは？ページの構造は？どうかなど視覚的で便利な面も多い。

ページのファイルが少ない間は、いいのですが、ファイル数が多くなるともてあます時があります。

設定でビジュアルサイトビューからサイトを開かない設定もできます。

メニューバー→【ツール】→【オプション】

ビジュアルサイトビュータブでサイトを開いた時の動作のチェックを外す。

ページ作成中にビジュアルサイトビューを見たい時は、メニューバー→【サイト】→【ビジュアルサイトビューを開く】

いつでも後から表示することが出来るのでこれを必要な時だけ見る設定もいいでしょう。

メニューバーについて（メニューバーの項目が少ない場合）

メニューバーは、「標準モード」と「どこでも配置モード」と「ページを開いていないとき」と3パターンあります。

ホームページ・ビルダー 10 で【挿入】や一部の項目が表示されない場合。
編集スタイルをスタンダードモードで使用しているのに、メニューバーのいくつかの項目が表示されない場合。

ホームページビルダーを起動、 任意のページを開く。

メニューバーから【表示】→【ツールバー】→【ユーザー定義の設定】を選択。

【メニューバーのリセット】　タブをクリック。

【メニューバー一覧】の「標準モード」で編集時のメニューバーを選択する。

【リセット】をクリックし、閉じる。

メニューバーは、【表示】→【ユーザー定義の設定】で新しくコマンドを追加して自分このみにすることも可能です。

ユーザー定義ツールバーもできます。

次へ（トップページの作成）

▲↑へ