2011-09-12 62 views
2

VS 2003では、Webフォームをフォームと同様にデザインすることに慣れていました。テキストボックス、Labes、Buttonなどはdivの絶対座標(インラインCSS)をms_positioning = "GridLayout"で指定します。ASP.Net - 絶対座標、インラインCSS、およびms_positioning = "GridLayout"を使用することから遠ざかります

VS 2010では、このようなWebフォームを設計する方法がなくなっているようです(少なくとも、設計をすばやく完了させるために使用することはできません)。絶対座標とインラインCSSの使用は廃止されていると考えられます。

サンプルスクリーンショットのようなWebフォームを「正しい」方法で設計する方法についていくつかのヒントを得たいと思います。

私は、次の重要な事柄を維持したいと思います:

  • 一つは、迅速/簡単に追加、削除またはフォームの全体的なルックアンドフィールを維持しながら、フォームのコントロールを移動することができるはず - 私たちのウェブフォームが傾向顧客の要求が変化するにつれて時間の経過とともに変化し、成長する。
  • ユーザーがブラウザウィンドウの幅を狭くしても、フォームが崩れることはありません。フォームの幅は、最小限の値で下がるべきではありません。

私はhtmlテーブルを使用することを検討していますが、サンプルスクリーンショットのアドレスブロックについては、9列(各垂直境界ごとに1つ)のテーブルを用意し、多数のcolspansを使用する必要があります将来の変化を考慮してフォームを設計する最速の方法です。そして、私は1999年に、あるいは、htmlテーブルが廃止されたと聞いた。

私はdivsとcssをほとんどすべて使用するべきですが絶対的な位置とサイズを何らかの方法で提供することなくサンプルスクリーンショットのようなWebフォームを作成する方法は不明です。

ご迷惑をおかけしますが、何卒ご了承ください。事前 敬具で

おかげ エーリッヒHorak

Sample Web Form Screenshot

+1

テーブル/テーブル形式のデータではないもののレイアウトのための適切なメカニズムではない(それは決してそうではありません) – Murph

+0

絶対的な位置付けも正しい方法ではありません。今サンプルフォームを考えてみましょう - どのような正しい方法でしょうか? –

+0

@IrishChieftain:私の他の質問に答える際に示唆したように、私はいくつかの良いフォームサンプルをWebで検索しましたが、私が見つけたすべての例は単純なSignup/LoginまたはType-Your-Address-Hereフォームです。 「大」のものは、label-textbox-newline-repeatブロックのいくつかのシーケンスで構成されています。私のサンプルWebフォームのようなものがクリーンなデザインのアプローチには複雑すぎますか? –

答えて

1

私は、div要素にあなたの3つの主要セクションを分割でしょうその後、個別に各セクションに取り組みます。私の主なツールは、Web Dev Toolbarです。ビューのCSSとCSS> - - >表示スタイル情報(ホバーマウス)が役に立つドロップされ

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

(CSS:私はの外観を好むオンラインを見つけて任意の形式のマークアップとCSSを表示するためにそれを使用しますオプションダウン)

フォームは、主にラベルと入力クラスを使用してCSSを使用して作成されています http://speckyboy.com/2011/05/24/css-form-templates-tools-services/

フォームは一見難しいように見えますが、あなたはそれを打破するとき、それは本当に難しいのではありません行う。上記のリンクにはサンプルがあります - あなたの言ったような単純ですが、シンプルでもなくても、CSSは同じです。

+0

あなたの答えをありがとう、あなたは投資したいと思っています。しかし、あなたが投稿した最初のサンプルリンク(http://jeffhowden.com/code/css/forms/)には、width:354pxまたはmargin:0 0 0 144pxのようなものが満載のcssがあり、現在のspeckyboy.comのリンクは実質的に同じです。たぶん私はちょうどあまりにも錆びているまたは平凡なばかだが、私にとってこの固定ピクセル値は、絶対座標を使用するのと同じ原則です: "margin 144px"または "left 144px" - 私は大きな違いを見ることができません。 –

+0

固定幅は絶対配置と同じではありません。私は、画面の解像度の多様性を事前に知っているので、主に内部のアプリケーション用に固定幅を使用していますが、私は流体設計のファンではありません。小さなサブセットから始めて、試してみてください。それ以上の質問があれば、ここに投稿してください:) – IrishChieftain

関連する問題