ホームページ・ビルダー各種設定

ホームページ・ビルダーは、使う人に合わせて、いろいろな選択が出来ます。
編集モード、編集スタイル、オプション設定など初めから設定しておくと便利です。

編集モード

編集モードには、「どこでも配置モード」と「標準モード」があります。
この2つのモードでは、標準モードを使うのがお勧めです。
「どこでも配置モード」は使わない方が良いです。
ですが、一応この2つのモードを比較します。

編集スタイル

使う人の好みに合わせて3つの編集スタイルがあります。
編集スタイルは、ホームページ・ビルダー起動時に「ようこそ」ダイアログで選択しますが、ページ編集中にいつでも切り替えることができます。
お勧めは、「スタンダードスタイル」、「エディターズスタイル」の2つです。

かんたんスタイル

文字通り、簡単にホームページを作成したい人向けです。
ワープロ、エクセル感覚で作れますが、自由度は低いです。
「かんたんナビ」と大きめのツールバー ボタンを使って、操作を行います。
「ナビメニュー」は、ホームページ・ビルダーが提供する素材を挿入するための素材集に切り替えることができます。
このスタイルではHTMLソースの編集はできません。

スタンダードスタイル

スタンダードスタイルでは、「かんたんナビ」、メニューバーのどちらを使っても機能を実行することができます。初回起動時、画面左側には「ナビメニュー」のアイコンのみが表示されます。
HTML編集は可能となります。

エディターズスタイル

こちらは、上級者向けという位置づけですが、後々ホームページ作成を行っていくと、どうしてもHTMLの編集が必要になってくると思います。そういう時の為に、このスタイルで作っていくのが望ましいと思われます。
ホームページ・ビルダーのツールを使って作成した後に、HTMLを編集したり自由度が高いスタイルで、ページ編集領域が広く確保されています。
「ページ/ ソース」タブを使えば、HTML ソースとページ編集の両方を同時に編集することが可能です。
操作はメニューバーを使って行います。
「タグ一覧」「ページ一覧」などは画面右側に折りたたまれており、必要に応じて広げて使うことができます。

オプション設定

ホームページ・ビルダーの細かい設定をします。
この設定は、お勧め設定として紹介します。（決してやらなくてはいけないものではありません）
設定例は、画像で紹介しています。
「ツール」→「オプション」をクリックすると、各オプションが表示されます。

一般

文字通り、一般的な設定を行います。
各自のスキルによって、これらの設定はこの限りではありません。

• HTML ソースを自動整形する・・・チェックしない
  • ソース（タグ）などを自動整形します。
  • チェックした場合は、「ソース編集」 タブでインデント（字下げ）を有効にしている場合、字下げしてないソースを自動整形（字下げを行う）します。
• 「HTML 構文エラーを自動修正する」・・・チェックする
  • 開いたファイルに構文的なエラーがあった場合、自動的に修正します。
  • 主にタグの閉じ忘れ（</p>など）などでは、重宝します。
  • 致命的なエラーがある場合、ページ編集画面で編集することが出来なくなるので、チェックします。
  • 自分でエラーを回避出来るスキルのお持ちの方は、チェックしない方が良いでしょう。
• 「HTML 構文エラー時の動作」・・・「メッセージ ボックスで警告する」を選択
  • もし、致命的なエラーがあった場合に、詳細を知らせてくれます。使い始めて間もない方は、原因追求の為にも警告を知っておいた方が良いです。
  • 「何も警告しない」を選択すると、自動で構文エラーを修正しますが、何も警告は出しません。
  • 「HTML 構文エラーを自動修正する」にチェックしないと無効です。
  • 慣れてくると、このエラー表示が面倒になるので、「何も警告しない」でも構いません。
• 「背景色の既定値」・・・標準
  • この値を設定しておくと、ページを新規作成した際に、背景色が指定した色で作成されます。
  • 背景色を特に指定したくない場合には、「(標準)」にする。（白でもOK)
  • 背景色は、色を設定しておきたいという方は、設定しても構いません。
• 「通常使うイメージマップの形式」・・・CSIM
  • イメージマップは、クリッカブルマップとも呼ばれ、画像内に複数のリンクを設定できるものです。
  • 「イメージマップ エディタ」使用時のイメージマップ形式の初期値を指定します。
  • 分からない方は、「CSIM」として下さい。画像で詳細を説明しています。
  • 「NCSA」は、サーバーサイド イメージマップ。
  • 「CERN」は、サーバーサイド イメージマップ。
  • 「CSIM」は、クライアントサイド イメージマップ (Client-Side Image Map) 。
• 「ページ作成モードの選択」・・・標準モード
  • ページを新規作成する場合の、編集モードの選択方法を指定します。
  • 当サイトは、「どこでも配置モード」を非推奨としているので「標準モード」を選択します。
• 「起動時に前回使用したサイトを開く」・・・チェックする
  • チェックすると起動時に、前回使用していたサイトを読み込みますので、すぐに作業が再開出来ます。
  • 複数のサイトを切り替えて使用している場合でなければ、チェックして下さい。

編集

編集は、項目が多いので必要なものをピックアップしていきます。

• 属性ダイアログの自動表示
  • 「フォームの入力部品を作成した時に開く」・・・チェックする
    • アンケートなどで使用するフォームの部品を作成するときにその部品の「属性」ダイアログが表示されます。
    • フォームの部品は、ほとんど何らかの属性を設定する必要があるため、チェックします。
• 表の属性
  • 「表の挿入時に、最初の行を見出しセルにする」・・・チェックする
    • 見出しセルは、タグでいうと「<TH>」になります。
    • 表の最初の一行は、見出しが多いと思いますので、チェックします。
  • 「空白セルに空白コードを自動挿入する」・・・チェックする
    • 表のセルに何も文字が入っていない（空白）場合は、罫線が表示されません。（ブラウザにより表示される場合も有）
    • 空白にしない為に、このチェックをすると空白セルに「&nbsp」と空白コードが入り、罫線が表示される様になります。
    • 「表の挿入」ダイアログの [空白セルに空白コードを自動挿入する] チェック ボックスの初期値を設定します。
  • 「省略可能なTBODYを表示する」・・・チェックする
    • TBODY タグは、表の挿入時に省略可能ですので、チェックしないでも構いません
    • チェックすると、表の行をグループ化する事が出来て、表の読み込みも若干早くなります。
    • テーブルタグ（表）編集時に、構造化できて編集しやすくなります。

• 再編集
  • 「再編集用データを生成する」・・・チェックする
    • ロゴ、ボタン、フォトフレームなどの再編集に必要な元データ (MIF ファイルなど) を、画像ファイルの保存先に「再編集用フォルダ (__HPB_Recycled フォルダ)」を作成して保存します。
    • チェックしないと、再編集時に必要な元データが作成されなくなり、再編集ができないので注意して下さい。
    • なお、ロゴ、ボタン、吹き出し、フォトフレームなどの再編集を行う必要がなくなったら、ファイルは削除しても問題ありません。

表示

ページ編集画面の表示に関する設定を行います。
ここで指定するフォントの種類やサイズは、ホームページ・ビルダーのページ編集画面の為のもので、Web ブラウザでの表示には影響を与えません。
Web ブラウザには Web ブラウザのフォント設定があります。
編集記号の表示、非表示はページ編集画面に反映されます。プレビュー画面や印刷時には表示されません。
尚、「標準モード」が対象の設定をしていきます。

• 編集記号
  • 「改行記号」・・・チェックする
    • チェックすると、エンター（Enter）で改行を行った位置に改行マーク「」 が表示されます。
    • チェックしないと編集時、視覚的に改行が分からなくなりますので、チェックします。
  • 「コメント、スクリプト記号」・・・チェックする
    
    • 
      の存在を示す記号を表示します。
    • こちらも視覚的に分かりやすくする為、チェックします。
• 部品の枠
  • 「フォーム枠、表枠、レイアウト枠を表示」・・・チェックする
    • フォームの枠、枠を非表示にした表、表題およびレイアウト枠を点線「------」で表示します。
• グリッド、ルーラー
  グリッド、ルーラー、レイアウト枠、グリッドの間隔、グリッドの色は、どちらでも構いません。
  画像で、どういうものなのか表示します。
  • グリッド・・・図の赤枠部分で色や間隔を指定できます。
  • ルーラー・・・図の赤枠部分
  • レイアウト枠をグリッドに吸着・・・レイアウト枠の使用時に、グリッドに枠の左上の位置を合わせる場合は、チェックして下さい。
• フォント
  • 「プロポーショナル フォント」・・・MS Pゴシックなど
    • 普通のテキストや見出しなどのフォントを指定します。
  • 「固定幅フォント」・・・MS ゴシックなど
    • ベタ書きなどの固定幅のフォントを使って表示するテキストのためのフォントを指定します。
  • 「フォント サイズ」・・・12（px）
    • フォントのサイズ（ピクセル）を指定します。通常サイズとして広く利用されている「12」を選んでおいた方が無難でしょう。

ネットワーク

• プロキシ サーバー
  • この設定は、特に変更しないで、そのままで良いと思います。
  • プロキシ サーバーの設定をすれば、URLを読み込んでホームページ・ビルダーに取り込めますが、ブラウザで右クリック→ソースの表示で対応すれば、十分だと思います。
  • 読み込む方法は、メニューバーから「ファイル」→「URL から読み込み」を選択すると、外部ネットワーク（http 経由）からファイルを読み込みます。
  • 外部のネットワークと接続する為には、プロキシ サーバーを指定する必要があります。
  • 尚、このタブは「かんたん」スタイルでは表示されません。

ファイル

• ファイルのオプション
  ここで改行コードや漢字コードの設定を行います。
  この設定は、お使いのサーバーやサイトの運営方針によって変わってきます。
  一応、初めて使用する事を前提に掲載していきます。

• • 改行コード・・・Windows系は「CR+LF」、UNIX系は「LF」
    • 設定は特に変えなくでも、ほぼ支障が無いと思います。（支障があったらすいません）
    • ページを保存するときの改行コードをここで指定します。
    • ほとんどのプラウザが漢字コードの自動判別機能を持っているので、自動で変換されます。
    • Windows系のパソコンをお持ちの方で、UNIX系サーバーに「アスキーモード」でサーバーに転送すると、自動で改行が変換されます。
  • 「HTML ファイルの拡張子」・・・「html」、「htm」
    • お使いのサーバーによって、ファイルの拡張子「〇〇〇.html」を変えます。
    • ホームページのファイル作成前に必ず、設定して下さい。
  • 「出力漢字コード」・・・無変換
    • 無変換にしておくと、ページを開いたときの漢字コードで保存します。
    • ページを保存するときに使う漢字コードを指定します。
    • iモード端末で文字が正しく表示されない場合には、出力漢字コードとして SJIS を選択して下さい。
  • 「入力漢字コード」・・・自動判別
    • ページを開く時に漢字コードを自動判別する事ができます。
    • もし自動判別がうまくいかない場合は、入力漢字コードを指定することができます。
      • JIS－JIS 漢字コード
      • SJIS－シフト JIS 漢字コード
      • EUC－EUC 漢字コード
      • Unicode (UTF-8) －UTF-8 漢字コード
    • iモード端末で文字が正しく表示されない場合には、出力漢字コードとして SJIS を選択して下さい。
  • 「新規ファイルを作成する場合のフォーマット」・・・HTML4.0
    • 通常は、「HTML4.0」（HTML 形式のページ）で問題ありません。
    • 新規ページを作成するときに使う DOCTYPE タイプを指定します。
    • 「XHTML 1.0」を選択した場合には「DOCTYPE を出力する」の設定はできなくなります。
    • XHTML 1.0に関して（参考：XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語）
  • 「DOCTYPE を出力する」・・・チェックする
    • DOCTYPE を出力します。（参考：<!DOCTYPE>－HTMLタグリファレンス）
    • DOCTYPE を特別に変更する必要がない場合は、変更しないでおいた方が後でトラブルになりにくいと思います。
  • 「HTML ソースに GENERATOR を組み込む」・・・チェックしない
    • 「このホームページは、ホームページ・ビルダーで作りましたよ」と、head内で宣言するもので、特に必要ありません。
    • GENERATOR はページの作成ソフトは何を使っているかを知らせる為のものです。
    • ホームページ・ビルダーで作っている事を知らせたい場合は、チェックしても構いません。
    • チェックした時のGENERATOR の出力は、
      <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.3.0 for Windows">
      などとなります。

• 保存オプション
  ファイルの保存時に行う処理の指定を行います。
  • 「バックアップ ファイルを作成する」・・・チェックしない
    • チェックすると、ページを上書き保存する度にバックアップ ファイル（ファイル名.bak）を作成します。
    • バックアップファイルを作成してしまうと、サーバー転送時に一緒に転送してしまい、サーバー容量の無駄になるので、チェックしないにします。
  • 「自動保存を行う」・・・3～5（回の編集操作ごと）
    • 一定回数の編集操作ごとに自動保存ファイルを作成します。
    • ホームページ・ビルダー起動中に予期せぬ強制終了などの場合に、自動保存していてくれるので、チェックして下さい。
    • 回数は、3～5回くらいが妥当かもしれません。1回にしてしまうと、操作する度に保存するので、パフォーマンスの低下につながります。
  • 「文字エンコードを META タグで指定する」・・・自動
    • 自動にしておくと、出力漢字コードに合わせてエンコードを指定するので、文字化けが起こりにくくなります。
    • 文字エンコードとしては、以下のものを指定できます。
      • iso-2022-jp － [JIS]
      • Shift_JIS － [SJIS]
      • EUC-JP － [EUC]
      • x-sjis － [SJIS]
      • x-euc-jp － [EUC]
      • iso-8859-1 － 英語のみのページの場合に選択。
      • UTF-8 － [Unicode (UTF-8)]
  • 「基準スタイルシート言語を META タグで指定する」・・・チェックする
    • ページ内で使用するスタイルシート（CSS）のデフォルトの言語を指定する META タグを出力します。
    • 今は、CSSを使わないという方でも、将来必要になった場合に、この記述が必要になりますので、チェックしておいた方が後々楽です。
    • 出力すると
      <meta http-equiv="Content-Style-Type" content="text/css">
      となります。

アプリケーション

• 外部起動アプリケーションの登録
  ホームページ・ビルダーから起動する外部アプリケーションの指定を行います。
  外部アプリケーションとは、主にWEB ブラウザの事を指します。
  作成したHTMLファイルをブラウザで確認する時に使います。
  ブラウザ毎に表示が若干変わるので、HTMLファイル作成後に確認したい場合は、登録しておくと、ホームページ・ビルダーからブラウザが起動して、すぐに確認が出来るようになります。
  
  
• 外部起動アプリケーションの確認
  メニューバーから「ツール」→「ブラウザ」を選択すると登録されているブラウザのリストが表示されます。
  複数のブラウザをインストールしていて、ここに登録したい場合は、外部起動アプリケーションの登録をします。
  • 「追加」ボタン
    • 新規に Web ブラウザを登録することができます。
    • 「ブラウザ登録」ダイアログが表示されます。（画像参照）
    • 登録できる Web ブラウザの数は 10個までです。
  • 「登録名称」 テキスト ボックス
    • 登録する Web ブラウザの名称を指定します。（自分が分かれば何でも構いません）
    • 登録する Web ブラウザには必ず名称を付けて下さい。
  • 「パス」 テキスト ボックス
    • 起動する Web ブラウザのパスを指定します。
    • Web ブラウザのパスは、大抵「Cドライブのプログラムファイル内」にあると思います。
    • こちらは、ショートカットを指定しても構いません。
  • 「その他のアプリケーション」ボタン
    • アプレット ビューワ、イメージ エディタ、テキスト エディタを登録する事ができます。

ソース編集

HTML ソース画面やホームページ・ビルダーで出力される HTML ソースの設定をします。
このタブは「かんたん」スタイルでは表示されません。

• 色設定
  HTML ソース画面に表示される HTML ソースの色の設定を行います。
  • 「色をつける」・・・チェックしない
    • 色を付けると、タグの区別が付きやすくなりますが、パフォーマンスの低下になりますので、色を付けないようにします。
    • 色を付けたい場合は、HTML ソースを指定された色で色付けを行います。
• 表示設定
  HTML ソース画面の表示設定を行います。こちらは、特に変更はなしで良いでしょう。
  • 「フォント」
    • HTML ソース画面で使用するフォントを指定します。
  • 「サイズ」
    
    • HTML ソース画面で使用するフォント サイズを指定します。
  • 「ソースの自動改行」・・・チェックしない
    
    • HTML ソース画面でウィンドウにあわせて自動改行するかを設定します。
    • 自動改行を設定すると、スクロール バーが表示されなくなり、ソースを見渡せるようになりますが、実際のソースと行などがずれて見えてしまいます。
  • 「行数表示」・・・チェックしない
    
    • HTML ソース画面の左端に行数を表示するかを設定します。
  • 「ページ/ソース ビューでの表示位置」・・・下
    
    • ページ/ソース画面で、HTML ソース画面をページ編集画面のどの方向に表示するかを指定します。
    • 上、下、左、右 の4方向から選択することができます。上または下を選択した場合は上下に、左または右を選択した場合は左右に編集ビューが分割されます。
    • ページ/ソース画面が表示されている場合、この変更はすぐに反映されません。次に、「ページ/ソース」タブをクリックした場合に有効になります。
      フレーム設定ページの場合は、「ページ/ソース」 タブは使用できません。
• 出力文字
  HTML ソース画面に表示される HTML ソースを大文字で表示するか小文字で表示するかを設定します。
  XHTMLでは、小文字で書かなければならない事になっているので、これから書くなら、HTML ソースは小文字に統一しましょう。
  • 「タグ」・・・小文字
    • タグの文字を大文字するか小文字にするかを指定します。
  • 「属性」・・・小文字
    • タグの属性を大文字するか小文字にするかを指定します。
    • 属性とは、例えば <TABLE border="1"> の場合、border= のことを指します。
  • 「文字下げ」・・・インデント「0」
    • インデントは、ファイル容量の増加になりますので、「0」を指定します。
    • 文字下げ（インデント）は通常、左端位置に揃ってHTML ソースを表示していますが、これを設定するとその文字の位置を指定する事が出来ます。
    • インデントとルーラーを使って、編集しやすくしたいという方は、この限りではありません。
• コードアシスト
  • 「終了タグ自動挿入」・・・チェックする
    • チェック マークを付けると自動的に終了タグが挿入されます。
    • 意外と、タグの閉じ忘れなどがあるので、チェックしておいた方が良いでしょう。
• [出力文字]、[文字下げ] の設定は、 [一般] タブの [HTML ソースを自動整形する] にチェック マークが付いている場合に、有効です。
  HTML ソース画面で右クリックし、表示されるメニューから「ソースの整形」を選択して整形した場合にも、この設定内容で整形されます。
  

サイト・素材・フォルダビュー

このオプションは、ホームページ作成には特に関係ありません。お好みで設定して良いと思います。
ホームページ・ビルダーのサイト管理、素材などの表示に関する設定が主なものです。
「スタンダード」スタイル、「エディターズ」スタイルの時のみ表示されます。

ターゲットプラウザ

編集領域の設定、タグ チェックの設定を行います。
携帯サイトを作りたいという方以外は、特に設定を変更しないで良いでしょう。

• 「初期ターゲットの設定」・・・標準
  • 新規ファイルを作成するときには、標準のブラウザ設定で開かれるようにします。
  • 携帯サイトを作っている方は、以下の携帯用画面サイズなどに合わせて編集領域のサイズを固定できます。
    • EZweb
    • iモード
    • iモード(502iシリーズ)
    • iモード(503iシリーズ)
    • iモード(FOMA 2001/2002/2101V)
    • iモード(504iシリーズ)
    • iモード(FOMA 2051/2102V/2701)
    • iモード(505i/506iシリーズ)
    • iモード(FOMA 900i/901iシリーズ)
    • iモード(FOMA 902iシリーズ)
    • Yahoo!ケータイ
    • MobileWeb
    • MobileWeb (幅のみ固定)
    • 1/4 VGA
    • TV モード (640x480)
    • VGA
    • WorkPad

ページサイズ

ページサイズの設定を行います。
この設定は「どこでも配置モード」でのみ有効なので、設定の必要はありません。

ビジュアルサイトビュー

ビジュアルサイトビューの表示に関する設定を行います。
設定は、そのままで構いません。
こちらは、サイト管理で詳しく説明します。

その他

スペル チェックの設定、ユーザー辞書などを行います。
こちらは、そのままの設定で構いません。