ホームページビルダーの 「レイアウト枠」と
「どこでも配置モード」
 安倍 08/5/17改

 「どこでも配置モード」とは
 「レイアウト枠」+「どこでも配置モード」による試作

「レイアウト枠」+
「どこでも配置モード」
で背景の上に各
部品画像や表を
ドラグして乗せる。
位置は自由に移動
できるのでレイア
ウトは極めて簡単。

拡大完成図 は → ここ

この試作ページは Homepage Builder Ver.11で作成。
・ページサイズは 940×1200ピクセル標準に設定。
・背景は、1024×768ピクセル画像をそのまま使用。 その上にタイトル画像や、リンクボタン、そしてテキストメニューを乗せて合成したものである。
・これらの画像は、ただ配置するだけなので簡単に挿入できる。
・枠色指定ができないので標準モードで指定しこれを「どこでもモード」にコピ−したがそれでも黒枠が残存した。(上の拡大完成図参照)
・スライス法では画像のスライス分解が必要で、再結合の際にズレが生じることがあるが、本法ではそのような問題はない。
 

 使用に当たっての注意事項 → 必ず、レイアウト枠と組合せる
 ネットで指摘されている「どこでも配置モード」の問題

http://hpbuilder.net/dokodemo-mode.htm
http://hpb.cool.ne.jp/business/design_chuui3.html

http://1go2go.or.tv/dokodemo.html
http://q.hatena.ne.jp/1128372904

ここで指摘されている問題は解決しているようだ。
・画面幅が狭くなると文字列が重なってしまう。 その場合リンクが効かなくなる。
  →( レイアウト枠を指定することで解決
・Netscape ではレイアウトが崩れる。
  → (Netscape Ver.5 以降では問題ない)

 「レイアウト枠」「どこでも配置モード」ソースコード

1)「どこでも配置モード」では、コードに下記のように、冒頭でページサイズを指定した後、「DIV」タグが挿入される。

<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<DIV
style="top : 110px;left : 50px;
position : absolute;
z-index : 1;
" id="Layer1">
<P>本日は晴天なり</P>
</DIV>

上の場合、
DIVタグで囲んだ中を、絶対座標指定で原点(左上0,0)を基準に
上から 110ピクセル、左から 50ピクセル の位置に下から一番目の重なりにLayer1という名で表示する。
という意味になる。
編集モードの状態ではグリッド表示、ページサイズ表示となる。

2)レイアウト枠(幅200ピクセル、高さ60px)の中に記入した場合は下記のようになる。

<DIV style="width : 200px;height : 60px ;top :110px;left : 50px;
position : absolute;
z-index : 1;
visibility : visible;
" id="Layer1">
本日は晴天なり
</DIV>

3)「レイアウト枠」の中に「どこでも配置モード」記入した場合は下記のようになる。

<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<DIV
style="width : 200px;height : 60px ;top :110px;left : 50px;
position : absolute;
z-index : 1;
visibility : visible;
" id="Layer1">
本日は晴天なり
</DIV>

編集モードの状態では、レイアウト枠編集に、グリッド表示とページサイズ表示が加わる。


※1) 「レイアウト枠」編集に、 「 グリッド表示編集」+「指定ページサイズ表示編集」が加わる。
※2)レイアウト枠設定(タグ:div): 挿入→ レイアウト枠  または 文章枠を右クリック → 属性の変更 
 「レイアウト枠」内に「どこでも配置モード」を使うと 「レイアウト枠」 +「 グリッド表示編集」+「指定ページサイズ表示編集」になる。
※3)スタイルシート設定: 文字を範囲指定 → 右クリック → スタイル設定 (ただし文字大きさが固定されるのは Internet Explorer のみ。Netscape,Opera,Firefox など他のブラウザでは固定されない)。

上記試験環境: WindowsXP、Internet Explorer7、HomepageBuilder 11
|  CSSレイアウト枠  |  スタイリッシュイフェクト  | CSS  |  ホームページ作成体験メニュー  |
inserted by FC2 system