ソースを教えてください

質問

webデザインを勉強しているのですが中々思った通りの
デザインができません
下記URLの様なページはどのようなソースになるのでしょうか

http://scaw.net/products/fr_gamen_sample2.htm

ドリームウェーバーを使っているのですが答えがわかりません
また、この位のページを作れるようになるにはどの位のスキルが
必要でしょうか。

回答No.4

abril

> やはり、難しい画面ということですね

もう一度よくお読みになって下さい。ANo.3の回答者様は別にそういう事は言っておられないと思いますが。
「バックヤードで動いているのは関係なく、単純に画面だけのhtml」を似た様なイメージで作成するだけでよいのなら、HTMLとCSSの正しい知識を持ち、ある程度使いこなせるスキルがあれば、別に難しくはないですよ。

> ドリームウェーバーを使っているのですが答えがわかりません

そりゃそうでしょうね。オーサリング・ツールはテンプレートは用意してくれるでしょうが、それ以上の事（そこから先のカスタマイズ）は勝手にやってくれるわけではないので。ツールの問題ではなく、「画面を見た時に、どういう構造のHTML（＋CSS）になっているかぐらいはほぼ見当が付くぐらい」の”スキル”は必要です。通常、コーダーはデザイナーの作成したデザイン・ファイルからHTMLを起こしていくわけですが、それが出来るスキルがあれば、上記の製品画面イメージを見ながら、必要な素材（タブ・ロゴ・ボタンの画像など）を作成した上でHTML＋CSSで組み上げて行く、というほとんど同じ課程を辿るだけですよ。そういう意味であれば、プロのコーダーなら出来て当たり前ですし、プロでなくても知識と経験をそれなりに積んでいれば全く難しいことはないでしょう。

> だれかできる人いらっしゃいませんでしょうか。

どの回答者様も「できない」とは仰ってないので、勘違いされません様に。質問者様が回答者にどこまでを期待されていらっしゃるのかがわからないのですよ。まさか、あの画面イメージに近いものを丸ごと作成したソースを提供してくれ、と仰っているわけではないですよね…？
”推測される（他の回答者様も指摘されている通り、ソースが見れない以上は推測しかできませんので）”ごく大雑把な構成についてなら以下のヒント程度は提供できますが。

・画面が上・左・右（中で更に上下）と4分割されているので、全体の構成はフレームを使用しているか、あるいはCSSによる疑似フレーム的な4ブロックの構成かと思われる。
・右上のメイン画面のフォーム周りは<table>レイアウトでも<div>等によるレイアウトでも可能。下部の表部分は<table>タグ使用。
・右上のメイン画面の内容はタブで切り替え。遷移はこのアプリケーションを作成しているプログラムで自動生成されるものだろうが、切り替えるという構成自体は、同フレーム内のHTMLファイルにリンクして移動するだけでも、JavaScriptによるレイヤーの切り替えでも、可能。
・左のメニュー画面のツリー構造はJavaScriptもしくは例によってこのアプリケーションを作成しているプログラムによって制御。ただし、「この見た目だけ」を再現するならHTML＋CSSだけでも可能（リストタグ使用、など）。

あとは、フォームの各部品（<input><select>等）の使い方がわかっていれば、大枠は辿り付ける筈ですよ。そこから先はCSSとマークアップの微調整を繰り返してひたすらイメージに近づけて行くだけです。

お礼

ご回答ありがとうございました。私はhtmlとcssの本は読み理解していて、現在はhtmlとcssの辞書のような本で取り組んでいるのですが、中々タグ構成のイメージがパッとひらめかないんですよね。やはり、経験がまだたりないようですね。