レイアウトの概念が掴めません（GoLive6.0)

質問

質問済みを参照しましたがもうひとつ理解出来ませんのでお詳しい方にアドバイス頂きたいです。
　MacOS9.2、GoLive6.0を使ってHP作成をしています。（初心者レベルです）
アドビ公認のレクチャー本と市販の本、合計2冊を一応学習したのですが、理解出来ないところがありまして質問させていただきます。
1,ドキュメントウィンドウの右下にあるメニューより「580」を選ぶと＝14インチモニタの幅に相当とありましたので選びまだ製作課程でしたがアップして確認してみましたがレイアウトしたものがフルスクリーン（14モニタ）で表示するとレイアウトそのもの自体は崩れませんが変な余白が出来るというか余白も意識してのデザインなのでどうしたものかと頭もたげてます。（以前の質問に”センターの指定”の記述がありましたがデザインの大きさは変わらず単にブラウザ中央という結果になるのでしょうか）
　余白の間隔をどのモニタでも（IE前提）同じにしようと思うとテンプレートで左右上下を作りそのまん中にページを入れるというやり方が適当なのでしょうか？（一回作ったんですがオフラインIEプレビューで
意図通りにならなかったもので、やはりアップしての確認が必要なのでしょうか？）
　2,上記にも関連しますが広告関連の仕事をしているので例えば印刷物なら用紙の設定を行って印字される範囲とか平面空間の認識が出来るのですが、HP製作と
なると抽象的な言い方ですがどこまでが範囲なのか下隅（スクロールを要しない設定）などがもうひとつよく理解できません。基礎的な話なのですがそういう事が理解出来るサイト等がございましたら教えて下さい。

　上手く困っている内容を伝えられないですが、よろしければアドバイスの方お願いします。

回答No.3

hiro-izm · ベストアンサー

>フルスクリーン（14モニタ）で表示するとレイアウトそのもの
>自体は崩れませんが変な余白が出来るというか余白も意識しての
>デザインなのでどうしたものか

Webページは主に横幅を決めて縦はコンテンツの内容（文章など）
で自動的に長くなります。

文字サイズを大きくして見ている人もいますしその逆もあるからです。
文字が大きくなれば縦方向にページ伸びるので
縦サイズをキッチリと決めるのは難しいです。

あくまでも1例としてですが、tableでレイアウトを組みます。
cssを使わずtableレイアウトと仮定します。

まず大枠を決めます。
横幅580px1行1列のtableを配置。

これがページの全体の大きさです。縦は内容により長くも短くもなります。

背景に色を付けると
範囲が分かりますので慣れるまで付けながら行うと良いかもしれません。
（追加した場合色を分ける。アップロード直前にでも色指定を消せば良い）

大枠の中に中央寄せでtableを作り、思い描く要素を入れていきます。

例：

大枠table　580px

コンテンツ1　table　560px
コンテンツ1　/table

コンテンツ2　table　560px
コンテンツ2　/table

/大枠table

tableやcell（テーブルのマス目）の
マージン（余白）指定には　1px*1px　の透明gifを配置して
画像の縦や横サイズで広げたり固定して行きます。

横幅をpixel指定では無く%で指定すると
ブラウザのウインドウサイズの何%という感じで表示されます。

>どこまでが範囲なのか下隅などが
>もうひとつよく理解できません。

上記の通りtableやcellに色を付けるなどして
範囲を理解するのも良いかも知れません。
（範囲確認の為の一時的なもの）

---

多くの人が見ている環境を想定してページの大きさを
決めた方が良いと思います。

より多くの環境でチェックすることにより
多くの人が同じような見え方をするページを作成出来ると良いですね。

お礼

非常に分かりやすいご説明に感謝いたします。
テーブル愉愉というのは他ページでも拝見したのですが、段落表のような感覚（レクチャー本はそういう使用例でしたので）で受け止めていたのでなるほどそういうことかと合点が行きました。
　お手間をお掛けしました、ありがとうございます。

回答No.2

nacam

マッキントッシュは持っていませんので、回答がおかしいかもしれませんが、古いマッキントッシュの特性を引いてしまっているのではないかと思います。

だいぶ前のマッキントッシュは、画面の解像度が固定されており、モニターが大きいほと大きな画面が、小さいほど狭い画面が表示されました。

１４インチモニターの場合、横が640になるはずです。
それに、余裕をみて、580という数字になっているのだと思います。

そのため、貴方が作ったページは、幅580ドットになり、余分な余白ができてしまっているのだと思います。

幅を指定できるのであれば、640、またはフリーにして製作すれば問題は解決すると思います。

WIN用のGoLive CS　しか持っていませんので、適切な回答ができませんが、がんばってください。

お礼

なるほどですね。前にドリームウェーバーを触ったことがあるのでＧｏＬｉｖｅがとても難しく感じられます。
細かい設定（プロ向け）には良いんだろうなあとおぼろげながら思うのですが、端的なことにつまづいてしまって。
　お手間頂きましてありがとうございます。

回答No.1

renton

>ドキュメントウィンドウの右下にあるメニューより「580」を選ぶと

ウィンドウの横の幅をピクセル数で示しているのでは？
14インチ相当という置き換え方はちょっとおかしいと思います。
一般の人がどういう画面サイズで見ているかというのを想定して、HPの表示サイズを決定します。
モニタの解像度が1027*768前後で見ている人が多いと思われるので、800*600～1027*768前後までの画面解像度に収まるデザインにしておくのが無難だと思います。

HPは紙の上のそれとは違い、OSやブラウザの種類などの見る環境によって見え方が違ってきます。フォントのサイズやHTMLの実行内容など・・・（対応していなかったり、見え方がかなり違ったり）
複数のブラウザをインストールしておいて、制作途中で実際にブラウザで表示して確認しながら作っていくのがいいかと思います。GoLiveのプレビュー機能よりも、画面の上の方に「ブラウザで確認」というのがあるので、ブラウザを登録しておいて、そちらで確認します。
あるブラウザで見て、ピッタリに見えるように作るよりも、複数のブラウザで見て無難に見えるように作っていくのがいいと思います。
どの環境で見ても同じように、きっちりとしたレイアウトを出したいのなら、Photohopなどでフォントなどを画像として用意してレイアウトするってのもあります。

お礼

解像度とピクセルの違いですね。
懇切丁寧なアドバイス勉強になります。
ありがとうございます。