ソースを教えてください

質問

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

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

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

回答No.5

x415f484f · ベストアンサー

※ 本題とはかなりかけはなれてしまうアドバイスです。
　 お礼などは不要です。

> 私はhtmlとcssの本は読み理解していて、現在はhtmlと
> cssの辞書のような本で取り組んでいるのですが、

何度も数をこなしているうちに勘が身に着くものではないの
でしょうか?

> 中々タグ構成のイメージがパッとひらめかないんですよね。

気になるデザインのサイトを見つけたら片っ端からソースを
眺めてみたりしてはどうでしょう?
CSS はブラウザのキャッシュを覗いてテキストエディタなどで
開いてみればわかります。(HTML なども可能です)
そのままコピーしては駄目ですよ、ソースによる動作と画面の
表示などをしっかり噛み砕いて理解してテクニックを学ぶのです。

> やはり、経験がまだたりないようですね。

最初から何でも出来てしまうような方は殆んどいないのではないの
でしょうか?
ご自身でもこんなことはご承知かとは思いますが、最初は先輩から
怒鳴られたり、独学であれば失敗で自信を無くしたりそんなことの
繰り返しで成長していくものではないでしょうか?
新しい技術が次から次へと出てくるものです、専門家の方々も日々の
勉強が強いられるような分野です。
「誰かできませんか?」ではなく「私が作ります!」ぐらいの気構えで
挑んでみては如何でしょうか?
ご自身である程度の作ってみて壁に当たってしまったらまたご質問を
されてみてはどうでしょうか?

# 駄文にて数々の無礼を失礼いたしまた。

回答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の辞書のような本で取り組んでいるのですが、中々タグ構成のイメージがパッとひらめかないんですよね。やはり、経験がまだたりないようですね。

回答No.3

x415f484f

> 下記URLの様なページはどのようなソース

実際のソースは例に出されたものを使ってみるか、それを作った人
じゃないとわからないでしょうね。

憶測でしか答えられませんが、デザインの技術的にはフレームや
インラインフレームやテーブルを使っていて、あとはスタイル
シートに頼ったものかと思われます。(画像イメージとかも)
おそらく JavaScript なども使われていると思われます。

> この位のページを作れるようになるにはどの位のスキルが
> 必要でしょうか。

見た目のデザイン専門の人と表示や動作などの実装する人が分担される
こともあるので、スキルというとどうなんでしょう?
見た目のデザインだけということであれば、各タグの動作や、スタイル
シートの動作などをしっかり身に着ければ何をどうしたら良いかがわかる
ようになるのではないでしょうか?

お礼

ご回答ありがとうございました。やはり、難しい画面ということですね
だれかできる人いらっしゃいませんでしょうか。

回答No.2

okweb-goo

あなたのスキルがどのくらいか不明ですが。
このようなページはよくある「グループウェア」の一場面で、ユーザからのフォーム入力によってサーバのデーターベースへ書き込みをしているものと思います。
このページ単体として、デザイン自体は、「ｈｔｍｌ　フォーム入力」などと検索すれば作り方はたくさん見つかりますが、この画面を参考に同じようなものができたとしても、上記の通り、バックヤードで動いているサーバとのやり取りがあるのですから、その仕組み全体まで実現したいのであればとてもここで説明できるような内容量ではありません。

お礼

ご回答ありがとうございました。バックヤードで動いているのは関係なく、単純に画面だけのhtmlでいいです。できるかたいらっしゃいましたらお願いします。

回答No.1

noname#77845

お使いのブラウザに、「ソース」を表示する機能があるはずです。
それを使用して確認しましょう。

たいしたことはやっていませんよ。

お礼

ご回答ありがとうございます。提示したページは画像のためソース表示ができないので質問しました。