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

質問

次のページのようなデザインは何のソフトを使って作成しているかわかりますか。また軸はどのようなソフトで作成したと思われますか。
http://noion.cool.ne.jp/

完成した軸の上から写真を自由に直接ドラッグ＆ドロップでレイアウトしたような(上記のような)サイトを作りたいです。

▼今までのホームページ制作の過程
まず、fireworksやphotoshopでロゴ、グラフィック、基本レイアウト(軸など)を作っています。ネット上に公開する時は、dreamweaver MXも持っていますがホームページビルダー10のほうが慣れていて使いやすいため結局そちらを使っています。

よろしくお願いします。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

> また軸はどのようなソフトで作成したと思われますか。
PhotoshopとImageReady、またはFireworks。曰くPhotoshopとのことですが。

全体の画像を作成し、スライスで切り出します。
ソースコードでtableタグを削除、trタグをdivに、tdタグをpに全文置換
divに背景画像とwidth、heightを指定し、
pに必要に応じてfloat:leftを指定

スライスは２種類必要です。
上メニュー、中央、下メニューの画像を切り出すスライスと、
上メニュー、下メニュー部分のHTMLを切り出すためのスライスです。
メニューをクリックできるように透明gif画像を用意してください。

上メニュー部分は１つずつ<p style="float:left"><img></p>とせずに、
<p><img><img><img></p>としても出来ると思います。
通常は、画像の読み込みを省略できるように１ピクセルのスペーサーを何度も使い回しし、widthとheightを指定するだけでいいです。

HTMLの最初の３行は手書きで編集する必要がありますが、本文はテーブルレイアウトとほとんど変わりません。
ですので、ImageReadyやFireworksで作成したHTMLをそのまま使用したような感じになっています。
デザインを参考にするにはいいと思いますが、
失礼ながら、XHTMLを使うならなおさら、HTMLの構成を参考にするには不適切と思います。
FirefoxやOperaなどで、スタイルシートを使わない設定で見てみると、どんな構成になっているかよくわかると思います。

人のことが言えるほど綺麗なHTMLは作れないんですが、、、
適切な構成のHTMLをDreamweaverなどで作る場合は、上記の方法とは全く違うアプローチになります。

お礼

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

回答No.3

MAN_MA_RUI

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

こういうのを作るには作成ソフトを使わず直接ソース編集が行えるように勉強するしかないです。
作成ソフトにはやはり限界と言うものが存在します。

お礼

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

これからもっと勉強していきたいと思います。

回答No.2

Joka

「軸」って私は良くわかりませんが・・・

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

お礼

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

回答No.1

izayoimizuki

ん・・・とりあえずComposerとかホームページビルダーのような
ソースドを汚してしまうWebページエディタが使われていないことは確実ですね。

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

お礼

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

勉強して出直してきます。