ホームページビルダー11のフォーカス枠について教えて下さい。

質問

ビルダー11を使用しています。
フォーカス枠にまだ慣れず、至急のご回答をお願いいたします。

ウェブアートデザイナーで画像を作成し、ビルダーに送って
ページを作ろうとしています。
ヘッダーを810×160ピクセルで作成したので、ビルダーに送ると
実際の作業画面には全部が表示されませんが、一応正常に送れた
ようなので作業を続けようとしました。

ところが、ヘッダーの下に表示されるピンク色のフォーカス枠が、
作業画面の幅しかなく、ヘッダーと同等の幅が取れず困っています。

具体的には、ヘッダーの下に一列でメニューバーを入れようとしています。
6つのメニューをウェブアートデザイナーで作り、ひとつひとつ
ビルダーに送ったのですが、途中で改行されてしまいます。

ウェブアートでメニューバーを1枚の画像にしてビルダーに送ると、
今度はメニューそれぞれにリンクがかけられなくなるので困っています。

このフォーカス枠は、作成したヘッダーに合わせて縮小拡大ができないものなのでしょうか?
また、上記の作業（ヘッダーのサイズと同等のメニューバーを入れたい）を進める手順がありましたら、どなたかご回答をお願いいたします。

回答No.1

panto-maim · ベストアンサー

全体のレイアウト設定を見たわけではないのですが、
”メニューバー”の幅の設定はどのようになっていますでしょうか？
CSSでレイアウトしている場合、ヘッダーとメニューバーの幅は同じになっていますか？

ビルダーのフォーカス枠は、要素に含まれている内容や設定されている幅・高さによって変動します。
メニュー用画像を横に並べるのでしたら、画像を横に並べた合計幅が設定した幅よりもオーバーしてしまっていないかどうか確認してみてください。
（注意：幅を設定していない場合でも、ページ編集画面の幅を最大に、次の画像が下に表示されることがあります。）

ブラウザのプレビューで、思ったように表示されていれば、
フォーカス枠については気にする必要はありません。
そうでない場合は、設定を見直すなど調整する必要があります。

メニューバーを１枚の画像にして各メニューにリンクを貼りたい場合は、
ビルダーでいう「イメージマップ」の設定をするとよいと思います。
http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1191

お礼

さっそくのご回答、ありがとうございます。

メニュー画像を横に並べた合計幅は、ヘッダーと同じでした。
ウェブアートデザイナーで一度、ヘッダーとメニューバーを合わせて
作ってみて確認しました。

＞（注意：幅を設定していない場合でも、ページ編集画面の幅を最大に、次の画像が下に表示されることがあります。）

なるほど、まさにそのような状況ですね。

教えていただいたURLを参考にして、メニューバーを1枚の画像にして
複数のリンクをはるという方法でやってみようと思います。

＞CSSでレイアウトしている場合、ヘッダーとメニューバーの幅は同じになっていますか？

すみません、この「CSSでレイアウトする」という意味がよくわかりませんでした。
補足いただけますと大変助かります。

ご回答、本当にありがとうございました。

回答No.2

panto-maim

>すみません、この「CSSでレイアウトする」という意味がよくわかりませんでした。
>補足いただけますと大変助かります。

簡潔に言うと、
<div class="header">
ヘッダーの内容
</div>
のように、CSS（スタイルシート）を駆使してレイアウトしている、という意味です。
google等で、CSSレイアウト　をキーワードに検索してみると、
どういった意味なのかわかるのではないかと思います。

ビルダーだと、スタイリッシュエフェクトを使うことがあると思うのですが、
それにはCSS（スタイルシート）という技術を使われていまして、
それによってページデザインやレイアウト（ヘッダー・フッターなどのレイアウト）を替える事ができます。
スタイリッシュエフェクトを使わなくても、
CSSについての知識があれば、スタイルシートマネジャを使う・HTMLソースを編集するなどして、
ご自分の手でデザインやレイアウトを調整することも可能です。

※ビルダーに全てお任せだと、ちょっと分かりづらい事かもしれません。
CSSの知識を持って、ビルダーを使いながらでも応用を利かしていけば、思ったように作成できるのではないかと思います。

お礼

重ねてのご回答、ありがとうございます。
スタイルシートは時々耳にしますが、それを駆使しての編集は、
まだまだ遠くなりそうです。
HTMLはまだ初心者なので、地道に行きたいと思います。

またの機会がありましたら、助けていただけるとうれしいです。
このたびは本当にありがとうございました。