• ベストアンサー
  • 困ってます

ホームページのデザイン (オブジェクトの自由な配置)

次のページのようなデザインは何のソフトを使って作成しているかわかりますか。また軸はどのようなソフトで作成したと思われますか。 http://noion.cool.ne.jp/ 完成した軸の上から写真を自由に直接ドラッグ&ドロップでレイアウトしたような(上記のような)サイトを作りたいです。 ▼今までのホームページ制作の過程 まず、fireworksやphotoshopでロゴ、グラフィック、基本レイアウト(軸など)を作っています。ネット上に公開する時は、dreamweaver MXも持っていますがホームページビルダー10のほうが慣れていて使いやすいため結局そちらを使っています。 よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数188
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.4
  • taloo
  • ベストアンサー率44% (1016/2281)

> また軸はどのようなソフトで作成したと思われますか。 PhotoshopとImageReady、またはFireworks。曰くPhotoshopとのことですが。 全体の画像を作成し、スライスで切り出します。 ソースコードでtableタグを削除、trタグをdivに、tdタグをpに全文置換 divに背景画像とwidth、heightを指定し、 pに必要に応じてfloat:leftを指定 スライスは2種類必要です。 上メニュー、中央、下メニューの画像を切り出すスライスと、 上メニュー、下メニュー部分のHTMLを切り出すためのスライスです。 メニューをクリックできるように透明gif画像を用意してください。 上メニュー部分は1つずつ<p style="float:left"><img></p>とせずに、 <p><img><img><img></p>としても出来ると思います。 通常は、画像の読み込みを省略できるように1ピクセルのスペーサーを何度も使い回しし、widthとheightを指定するだけでいいです。 HTMLの最初の3行は手書きで編集する必要がありますが、本文はテーブルレイアウトとほとんど変わりません。 ですので、ImageReadyやFireworksで作成したHTMLをそのまま使用したような感じになっています。 デザインを参考にするにはいいと思いますが、 失礼ながら、XHTMLを使うならなおさら、HTMLの構成を参考にするには不適切と思います。 FirefoxやOperaなどで、スタイルシートを使わない設定で見てみると、どんな構成になっているかよくわかると思います。 人のことが言えるほど綺麗なHTMLは作れないんですが、、、 適切な構成のHTMLをDreamweaverなどで作る場合は、上記の方法とは全く違うアプローチになります。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

非常に丁寧に返答していただきありがとうございます。 勉強不足でした。出直してきます。

関連するQ&A

  • ホームページや素材のデザイン

    私は、デザイン能力が全くありません。 最近ホームページを作ろうと頑張っていますが、いつもデザインから先へ進むことができないのです。 ページのレイアウトデザインも素材のデザインも全くだめなので・・・ 知人からは「デザインは考えるものじゃない、閃くものだ」とか言われました。それはそうかもしれませんが・・ そこで質問なのですが、こんな私でもWEBデザインが身につく良質な書籍はありませんか? レイアウトならこの書籍、ロゴ作成ならこの書籍などなんでもかまいません(両方のっているなら最高です)。 一応、ソフトはドリームウィーバー、ファイヤーワークス、イラストレータ、フォトショップは持っています。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ホームページ全体のデザイン・レイアウトをFireworks CS3でや

    ホームページ全体のデザイン・レイアウトをFireworks CS3でやろうと思っています。 別にDreamweaver CS3との連携は必要ありません。デザインしたページの欲しい部分の 画像だけ切り出すために、デザインしようと思います。 そこで、例えばWEBページ幅を800pxとしようとするWEBページのデザイン(デザインは どんなものでもよいとして)をFireworksで新規作成から行い、実際に必要となる画像をスライスして切り出すまで、一連の流れが載っている参考になるサイトは ありませんか?要するにFireworksにて1つのWEBページのデザイン(ここはにロゴ、ここはメニューボタン ここはコンテンツ)などのサイト全体の枠取り(線や画像が配置された 状態)の製作過程みたいなのが載っている参考になるサイトってないですかね? 最後にスライスして画像を切り出す際には、画像だけ切り出せればよく、htmlは別途自分で XHTML+CSSレイアウトにより作成しますので、htmlの吐き出しは不要です。 Firereworkでページ全体をデザインしたものの、一部の画像をパーツとして欲しいだけです。 よろしくお願いします!

  • fireworksを使ったwebサイトのデザインについて教えてください。

    はじめまして。ホームページ作成は初心者ですが、dreamweaverとfireworksを使っています。webサイトのデザインをするとき、fireworksで全体のレイアウトをしていらっしゃる方に質問したいのですが、まず、レイアウトを決めたあとのdreamweaverへの書き出し方など、とにかく、ベテランの方の作業の流れを教えていただくことってできますでしょうか?特に、スライスを使った書き出しの仕方を詳しくおしえていただきたいのですが。おねがいします!

    • 締切済み
    • CSS

その他の回答 (3)

  • 回答No.3

XHTMLの記述が国際規格準拠ですから作成環境が書いてなくても確実にソースの直接編集であると断定できます。 作成ソフトを使ってこういう結果をたたき出すのは難しいと思いますよ。 http://validator.w3.org/check?uri=http%3A%2F%2Fnoion.cool.ne.jp%2F こういうのを作るには作成ソフトを使わず直接ソース編集が行えるように勉強するしかないです。 作成ソフトにはやはり限界と言うものが存在します。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

やはり最終的には自分で構成するのが一番なのですね。 やはりレイアウト的なことを考えてみるとソフトを使うのが 楽なのでずっと使ってました。 これからもっと勉強していきたいと思います。

  • 回答No.2
  • Joka
  • ベストアンサー率28% (12/42)

「軸」って私は良くわかりませんが・・・ あのサイトはメモ帳で作ったそうです。FAQに書かれていました。 つまりタグ手打ちですね。 画像はPhotoshop、Illustrator をお使いとのこと。 >完成した軸の上から写真を自由に直接ドラッグ&ドロップでレイアウトしたような・・・ 失礼ながら、そんな乱暴な方法ではなく、あのサイトはCSSできちんと表示設定されています。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

いまいちCSSというものをまだ理解していません。 勉強しなおしてきます。ありがとうございました。

  • 回答No.1

ん・・・とりあえずComposerとかホームページビルダーのような ソースドを汚してしまうWebページエディタが使われていないことは確実ですね。 Webページとしてはコメントが確り打たれていますし 疑似フレームはDreamweaver等のプロ向けのツールでも作るのは困難ですから HTML+CSSの部分はテキストエディタかWebページエディタのソースコード編集モードで手書きで書かれているような気がします。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ソースド汚すという意味がよくわからなかったのですが、 調べてわかったのですが、市販のソフトを使うとどうしてもでてしまうみたいですね。 テキストであのようなレイアウトが作れるとは正直驚きました。 勉強して出直してきます。

関連するQ&A

  • ホームページのデザインについて

    ホームページを作成したいと思い、いろいろ調べていますが、よく理解できていないので、詳しい方がいらっしゃいましたらご教授ください。 私はASP.NETにてWEBアプリケーションの開発を行ったことがありますが、デザインについては、作業的な画面ばかりでした。 今回作成したいのは、WWWに公開する画面を作成したいと思っています。 そこで、まずデザインなのですが、ソフトを購入してデザインを考えようと思っています。 その後も、ソフトを使い作成しようと考えているのですが、ロゴの作成や、バナーの作成などを考慮して、どのソフトを使用しようかと悩んでいます。 候補は 1)Dreamweaver CS3 2)IBM ホームページビルダー12 以上の二つで悩んでいます。 値段も全然違いますが、DreamweaverCS3は5万円弱のやつです。 両者の説明を読んでみたのですが、正直よくわかりませんでした。 この2つのソフトの大きな違いを教えていただけないでしょうか? また、両者どちらの方がおすすめなのかも教えていただければ幸いです。

  • DREAMWEAVERについて

    ホームページ作成ソフトの、DREAMWEAVER MX2004と、DREAMWEAVER4 FIREWORKS4 との違いについてお教えいただけますか。 大きな違いは何かと言う事なのですが。 ごくごく簡単なページ作成と修正位でしか使わないのですが、その場合、たいした違いはありませんか?(DREAMWEAVER4 FIREWORKS4 で十分でしょうか) お教え下さい。よろしくお願いします。

  • ホームページ

    ホームページ制作のの勉強を独学でしています。 現在「webデザインの本」になぞって、Fireworks、 イラストレーター、フォトショップ、dreamweaver,を30日間無料体験版を使って勉強しているのですが、なかなか難しくて進みません。。。。 もっと使い勝手の簡単な雄めのソフトなどはありますでしょうか??

    • ベストアンサー
    • Mac
  • FWとDWの連携/レイアウトをやり直すのが、手間

    fireworks,dreamweaver 共にCS5です。 fireworksでサイトのラフ案を作って、 画像を切り出します。 そのあと、dreamweaverで一から組み立てていくのですが、 細かな寸法をラフ案と簡単に合わせる方法はありませんでしょうか? ============================================= 現在のやり方は、 例えばタイトルロゴの場所が、 fireworkで X座標:50 Y座標:50 の所にあって、 それをdreamweaverで、 同じ場所に持っていくのですが、 そのときに、 座標の位置を確認のために、fireworksのラフ案を開いて確認するという流れです。 画像が少ないと、この流れでいいですが これだと、 dreamweaverでコーディング中に、 画像のレイアウト位置確認の都度、 何度もfireworksを開いて、段取りが悪すぎます。 結局、面倒になって しまいには、適当にコーディングして、 fireworksでレイアウトにこだわって作った意味がなくなってしまいます。 ================================= dreamweaver上で、 fireworksでつくったラフ案をうっすら表示させて、 その完成品に向かって、画像の位置を調整していくとか出来れば一番いいのですが 何かうまい使い方はありませんか?

  • ホームページを作成するソフトの購入について

    ホームページを作成しようと思っています 初心者なものでなるべく簡単に作れるソフトを探しています ■ホームページ制作王 ■Microsoft FrontPage ■macromedia Dreamweaver ■ホームページninja ■ホームページビルダー あたりがいいと思っています 知り合いがmacromedia Dreamweaverを持っていますが、なかなか素人には難しそうな雰囲気でした 文字や絵を貼り付けていくような感覚で、手直しもしやすいソフトを探していますが、上記のソフトを使っている方、ソフトのよさなどよかったら教えてください

  • ホームページを作成するソフトの購入について

    ホームページを作成しようと思っています 初心者なものでなるべく簡単に作れるソフトを探しています ■ホームページ制作王 ■Microsoft FrontPage ■macromedia Dreamweaver ■ホームページninja ■ホームページビルダー あたりがいいと思っています 知り合いがmacromedia Dreamweaverを持っていますが、なかなか素人には難しそうな雰囲気でした 文字や絵を貼り付けていくような感覚で、手直しもしやすいソフトを探していますが、上記のソフトを使っている方、ソフトのよさなどよかったら教えてください

    • ベストアンサー
    • CSS
  • ホームページ作成する時のCSS,HTMLデザイン作業(Indesign Fireworks Illustratorなど)

    皆様いつも回答ありがとうございます。 早速ご質問ですが(素人ながら稚拙なご質問申し訳ないです) 1.IndesignとFireworks、どちらがDreamweaverで応用が利くか(HTMLやCSSを作成する点で) 2.プロはDreamweaverのみでHP(HTMLやCSS)を全部作成しますか? Indesign(cs3)やFireworksなど?のソフトウェアを使ってデザインしたついでにHTMLやCSSもそのまま出来上がり、それをDreamweaver(cs3)に埋め込めないかと思ったのですが、可能というか実践向けなのでしょうか? 実際のWEB現場ではどのように一連の作業していますか、やはりdreamweaverだけでHTMLやCSSを最初から作っていく、みたいな感じでしょうか?またもしIndesignやFireworksなどでCSSやHTMLも可能であるならばどちらがHPを製作・デザインする上でいいでしょうか? 私としてillustratorでロゴや画像などはすべて処理しようかと考えています。つまり画像やロゴを配置したイメージがそのままHTMLやCSSが出来上がり、それをDreamweaverで使えるかどうかお聞きしたいのです。。両方とも無料体験したのですが、イマイチ使えるのかどうかって感じなのです・・。 m(__)m回答いただければ大変助かります、よろしく尾根がいたします。

  • ホームページを工事中にしたい。

    こんにちは、皆様にお尋ねいたします。 私は寺院ホームページの作成管理をしております。(副住職) この度、私的な事情により「ホームページの大改造!」を計画しております・・・・・・・ホームぺージを「工事中」にしたいのですが??どの様にすればいいのかが分かりません。(ホームページ作成初心者です。)皆さんのご意見を伺えたらと思っております。 宜しくお願い致します。 参考までに、作成ソフト Macromedia Dreamweaver MX 2004 画像編集ソフト  Macromedia Fireworks MX 2004 接続ソフト FFFTP です。

  • Fireworksなどのスライスで、CSSレイアウトで書き出せるの?

    テーブルレイアウトで慣れてるためか、CSSレイアウトがどうしても馴染めません。 Dreamweaverで作ってますが、数倍も難しく感じます。 もしかして、やり方を間違ってるのかも知れません。 私は、Dreamweaverで一つずつ組んでいくため、Fireworksなどの「スライス」機能を使わないのですが、 ●質問1 もしかして、Fireworksでレイアウトしたら、 Fireworksのスライスで、CSSレイアウトで簡単に書き出せるのでしょうか? 多分、テーブルレイアウトでの書き出しだけだと思ったのですが・・・。 私の知識は古いので。 ●質問2 また、HP作成は、Dreamweaverで作るとして、 レイアウト作成や画像作成は、現在の主流は、 Fireworksでしょうか?Photoshopでしょうか? プロは普通どっちを使ってますか? 私はPhotoshopしか使った事ありません。 Fireworksに乗り換えるべきか、考えてます。 よろしくお願いします。

  • Adobeでのホームページ作成

    お世話になります。  Adobe(Macromedia)のFireworksとDreamweaverを組み合わせてホームページを作成するという話を聞いたのですが、この2つのソフトを組み合わせて使う理由は具体的なメリットは何でしょうか?  またFireworksのスライスという機能と組み合わせて使う視点でお教えいただけるとありがたいです。 ホームページビルダーでもそれなり?ソースや素材をうまく取り込めばよいサイトができるのではと思いますが、やはりビルダーの方が圧倒的に簡単だとそれほど知識のない私にもわかります。 どうかよろしくお願いします。