ホームページビルダーを使う － 基本操作
ホームページビルダーの基本操作
ホームページ・ビルダーの基本操作をマスターしよう
基本操作
ホームページ・ビルダーでの基本操作を紹介します。
編集モードを選んでページを新規作成する
ページを新規作成する場合の編集モードには、［標準モード］ と ［どこでも配置モード］ があります。ここでは ［標準モード］ を使用します。
① メニューの ［ファイル］ → ［標準モードでの新規作成］ を選択します。
- あるいは、ツールバー上の
（HTMLの新規作成）アイコンをクリックしても同じです。 - 新規ページがスタンダードモードあるいはエディターズモードで表示されます。下図はエディターズモード例で、一行目でカーソルが点滅します。
- 一方、下図はV18でのスタンダードモードの例です。タイトルバーに編集モード＜標準モード＞が表示されるようになりました。
文字列を挿入する
「標準モード」 ではカーソルが点滅する位置に文字列を入力します。
① 文字を挿入する位置にカーソルを持っていきクリックします。カーソルが点滅します。
- 新規ページ作成の場合は、一行目でカーソルが点滅します。
② 「挿入」 → 「段落」 → 「標準」 をクリックします。
- ツールバーの ［標準］ の文字をクリックし、表示されるプルダウンリストから ［標準］ をクリックしても同じ。
- ナビメニューを使う場合は ［文字の挿入］ をクリックします。
③ カーソルが表示されるので文字列を入力して ［Enter］ キーを押します。
- 段落を挿入した場所には、HTML ソース上では <p></p> タグが挿入されます。改行した場合には <br> タグが挿入されます。
④ ［Shift］ + ［Enter］ キーを押すと、段落が変わり、カーソルが移動し、文字を入力します。
- 新しい <p></p> の段落が挿入されます。
挿入する文字のスタイルなどについては、「文字のスタイル」 を参照します。
段落の挿入 vs. 改行の挿入
［Shift］ + [Enter] キーでは段落が変わり、新しい段落にカーソルが移動します。HTMLソースでは <p> ～ </p> の段落が挿入されます。
［Enter］ キーの場合は、改行されますが、同じ段落内のままです。HTMLソースでは <br> の改行タグが挿入されます。
画像を挿入する
画像やイラストの挿入方法です。
① ［フォルダビュー］ で素材が保存されているフォルダーをクリックします。
② 一覧にフォルダー内のファイルが表示されます。挿入したい画像ファイルをページ編集領域にドラッグ＆ドロップします。
- ソースを見ると、以下のタグが追加されている：
- <p><img src="file:///C:/Users/kumagaisan/Documents/Hpbuilder/マイ素材集/icons/1291776503_USB.png" width="128" height="128" BORDER="0"></p>
- <p><img src="images/1291776503_USB.png" width="128" height="128" BORDER="0"></p>
フォルダーにブックマークを付ける
［フォルダービュー］から画像を挿入する場合、頻繁に使用するフォルダーはブックマークを付けましょう。
フォルダーを指定したら 「ブックマーク」 をクリックして ［ブックマークに追加］ を選択します。次回から ［履歴］ にある一覧から登録したフォルダーを選択すると素早くアクセスできます。
画像の挿入の詳細については、「画像を入れてみる」 を参照します。
リンクを作成する
他のページへ移動するためのリンクを作成します。
① リンクを設定する文字列 （または画像） を選択します。
② ［挿入］ → ［リンク］ をクリックします。
③ ［属性］ ダイアログが表示されるので、［ファイル］ タブをクリックします。
④ ［参照］ をクリックして、目的のリンクを参照して、指定します。
- ［ファイルから...］
- ローカルフォルダーに保存されているHTMLファイルへのリンク
- ［最近編集したファイルから...］
- 最近編集したファイルへのリンク
- ［お気に入りから...］
- Internet Explorer の「お気に入り」に登録しているページへのリンク
- ［ブログ記事から...］
- ブログ記事へのリンク。ただしブログの登録と記事取得が必要。
- ［URL別名から...］
- ［属性］ダイアログの［URL別名］に登録しているURLへのリンク
- ［トップページへ（サイト使用時のみ）］
- 開いているサイトのトップページへのリンク
- ［URL をブラウザーより取得］
- 現在ブラウザーに表示しているページへのリンク
なお、リンク設定の詳細については、［リンクを設定する］ を参照します。
ページを保存する
ページが完成したら保存します。ページに貼り付けられた素材ファイルなど同一フォルダーにない場合は、保存時にコピーされます。
① メニューの 「ファイル」 → 「名前を付けて保存」 を選択します。
- 「名前を付けて保存」 ダイアログが表示されます。
② ［保存する場所］ から保存先を指定します。
③ ［ファイル名］ に半角英数字でファイル名を入力します。
④ 「保存」 をクリックします。
- 「素材ファイルをコピーして保存」 ダイアログが表示される。ファイル名や保存場所が一覧で表示される
- HTML ファイルを保存する際、その中で指定されている画像ファイルやサウンド ファイルなどが、保存するフォルダーとは別の場所にある場合に、このダイアログボックスが表示されます。
⑤ 一覧から、ファイル名を変更したいファイルをクリックして選択します。
- 選択した項目のファイル名と保存場所が、［選択項目の変更］ の ［ファイル名］ と ［保存場所］ に表示されます。
⑥ ファイル名と保存場所を変更します。
- [保存場所にファイルをコピーする] をオンにすると、ページ内に貼り付けたオブジェクト（画像など）が HTML ファイルと同じフォルダーにコピーされます。
- コピー場所を変更する場合は一覧からファイルを選んで ［参照］ をクリックし、フォルダーを指定します。コピーしない場合はオフにします。
-
保存場所にファイルをコピーしない
素材ファイルをページに新しく追加した場合は、［保存場所にファイルをコピーする］ をオンにしてください。素材ファイルがページの保存場所あるいは指定変更した保存場所にコピーされていないと、次にページを表示したときに使用している素材が表示されない場合があります。
-
重複ファイル名の上書き設定
「上書き時に自動的にファイル名を変更する」 をオンにすると、素材ファイルが保存先のファイル名と重複する場合に、ファイル名を変えて保存します。ファイル名を変えないで上書き保存をする場合はオフにします。編集者自身でファイル名を変更したい場合も、同じくオフにし、一覧から変更したいファイルを選択して ［ファイル名］ にファイル名を入力します。
-
素材ファイル挿入時の禁止事項
HTML ファイルとは、違うフォルダーに保存されている素材ファイルを挿入しても、挿入した時点ではコピーされません。これらの素材ファイルは、ページを保存する際にまとめてコピーされます。そのため素材ファイルを挿入後、編集中のページを保存するまでは、HTML ソースや ［属性］ ダイアログボックスでは、素材ファイルの URL（src 属性） は下記の例のように、元の素材ファイルのパスで表示されます。保存すると、HTML ファイルの保存場所と同じフォルダーに素材ファイルがコピーされ、URL もそれに合わせて自動的に変更されます。
- ［例］素材ファイル "C:\My Images\Picture\Picture1.jpg"を挿入
- 保存前のURL："file:///C:/My Images/Picture/Picture1.jpg"
- 保存後のURL："Picture1.jpg"
ページの保存前に、上記の例のような「"file:///"」で始まる素材ファイルのURLを、HTML ソースや［属性］ダイアログボックスで変更すると、元の画像が正しくコピーされなくなります。注意しましょう。
⑦ すべての変更が終わったら、［保存］ボタンをクリックします。
ページをプレビューする
ホームページ・ビルダーでプレビューする
ブラウザでの見え方をプレビュー画面で随時確認することができます。
① ［プレビュー］ タブをクリックするとページがプレビューされます。
①' ビルダー１７では、プレビュー画面は、「Internet Explorer」 で表示するか 「WebKit」 で表示するかを切り替えることができます。
- WebKitは、CSS3に対応しているため、CSS3での角丸やドロップシャドウ、透過、変型などの表現を確認できます。
- ※ページのターゲットブラウザーが 「標準」 の場合だけ、これらの表示を切り替えることができます。
② ［ページ編集］ あるいは ［ページ/ソース］ タブをクリックすると、元の編集画面に戻ります。
- 編集できる状態になります。
ブラウザでプレビューする
① ページを保存します。
② 「Internet Explorerの起動」 ボタンをクリックして、Internet Explorer でプレビューします。
セキュリティ保護のメッセージ
JavaScript や Flash コンテンツを含むページを Internet Explorer でプレビューしたときに、セキュリティ保護のメッセージが表示されます。これを回避するには、次のステップをとります。
- メッセージをクリック
- 「ブロックされているコンテンツを許可」 を選択
なお、このメッセージはパソコンで作業をしている場合にのみ表示されます。サーバーへ転送してインターネット上で閲覧する場合は表示されません。
他のブラウザでプレビューする
その他のブラウザでプレビューするには、「Internet Explorer の起動」 ボタンの右隣りにある ▼ をクリックしてブラウザを選択します。
ブラウザはパソコンにインストールされている必要があります。
プレビューの制限事項
- ページ編集画面からプレビュー画面に切り替えたとき、プレビュー画面でキーボードが動作しなくなる場合があります。その場合には、プレビュー画面内を一度クリックします。
- 文書ルートを用いたページ内の画像は表示されません。
- Internet Explorer 9 の場合、プレビューが表示されない場合があります。
- Internet Explorer 9 の場合、プレビューでスライドショーを確認できません。
- プレビュー画面では、Google+1 ボタンを確認することはできません。転送すると表示されます。
- Webkit 版のプレビューでは、Firefox・Chrome などの Internet Explorer 以外のブラウザー用の Flash Player がインストールされていない場合、Flash が表示されません。