Web作成前の作業について

質問

今回初めてDWでWebサイトを作ることになりました。
そしてphotoshop&illustrator&Dreamweaverの勉強をしていますが、本当にまだ基礎の部分しか理解していない状況です＞＜

そしてWebサイトを作る時にphotoshopやillustratorで１枚の絵として作成したほうがいいというようなことを知りました。

その時の作成の仕方なんですが、ボタンなどのパーツを先にphotoshopで作成してからWebサイトのサイズにあてはめて作ったほうがいいのか、それともいきなりWebサイト用にサイズを指定して作成したほうがいいのか、どちらのほうが効率よく作業できるのかわからず悩んでいます。photoshopで作成後、スライスしてDWで作成しようと思ってます。何かいい方法はありますか？

ソフトの勉強はしているものの一連の作業の仕方がさっぱりわかりません。説明の意図が分かりにくいかもしれませんが、何か良いアドバイスお願いします（；；）

回答No.2

papuatama · ベストアンサー

基本的にwebteraさんが投稿なさった通りの流れになるのですが、初心者がいきなりCSSでレイアウトできますかねぇ…。1ピクセルでも計算間違いすると、レイアウトが崩れてしまいますよ。clover111さんがどこまで把握なさっているかによりますが、Webデザインはおおむね以下のように制作します。
●全体のデザインを画像で作る
閲覧者の画面サイズに合わせて、HPの左右サイズを決定します。800ピクセルを上限にすると、14インチTFTでも全体表示できますので、これ以下のサイズに収まるように作りましょう。
左右幅を決めたら、Photoshop上で全体を作っていきます。最初に左右800ピクセル×天地適当なサイズで新規書類を作成。この中に写真やボタン、テキストなどをデザインして配置します。
●スライス
HPは大きく分けて、画像とテキストの2つの要素になります。本文は後でDreamweaver上で入力することにして、Photoshop上ではダミーテキストを置いておきます。タイトル、見出し、ボタンなどは画像として切り出します。この時に使うのがスライス機能。なるべく変な端数（119ピクセルなど）にならないよう整数値で、各要素をスライスで切っていきます。
それぞれの画像に適宜名前を付けて保存します。使える文字は英文小文字と「_」（下線）くらいです。（※や●、$や#などは使用できません）
画像の保存先フォルダを作ります。一般的に「image」ないし「img」などが多いです。その中にさらにページ別保存フォルダを作ります。「top」「aboutus」「askme」など分かりやすく。ここに用途別に画像を保存していきます。
※ワークフローからいうと、本当は１つずつ別の元画像にした方が、後々の修正作業が楽になるんです。修正が必要になったらDreamweaver上から元画像を呼び出せますから。まとめて１つの画像にすると、その点後手間がかかります。
●レイアウト
以上で画像処理ソフトでの作業は完了です。Dreamweaverでレイアウトしていきます。DTPと違ってレイヤー機能がないので、1枚で作ります。レイアウトの方法は大きく分けて２つあります。
・テーブルレイアウト
本来は表組に使うtableタグですが、これを入れ物にして、中に画像やテキストを入れこんでいきます。テーブルの中にさらにテーブルを入れる、という手法で、必要なものを指定した位置に配置していきます。
・CSSレイアウト
本文となるHTML部分と、装飾要素になるCSSを分けて作る方法です。難易度はかなり高いです。初心者にはまず無理じゃないかと…。その代わり、かなり自由に色々なことができます。
●サーバにUP
DreamweaverにはFTP機能が内蔵されていますから、設定さえしておけば、完成したページをそのままUPできます。ターゲットブラウザ（どのブラウザで見られるかの仕様）で、きちんと見えるかどうか確認します。

補足

回答ありがとうございます。
全体のデザイン画像の作り方は理解できたと思います。

＞※ワークフローからいうと、本当は１つずつ別の元画像にした方が、後々の修正作業が楽になるんです。修正が必要になったらDreamweaver上から元画像を呼び出せますから。まとめて１つの画像にすると、その点後手間がかかります。

というのはボタンなどはパーツごとにスライス作成したほうが良いということですか？まとめて１つの画像にする・・・とはどういうことでしょうか？
理解出来なくてすみません（汗）

それとDreamweaverでレイアウトしていく部分ですが、cssレイアウトのほうが後々便利と聞いてます。でも今の私の知識ではやはり初歩的なことしかわかってないです。Dreamweaverに元々cssテンプレートが標準にありますが、それもよくわかってません。なので今はテーブルレイアウトで作るほうがいいかと思ってます。

テーブルレイアウトで作成した場合、１枚１枚作成するごとにレイアウトしていかなければならないんでしょうか？

回答No.4

papuatama

なるほど、そういうご事情でしたか。
Dreamweaverの基本操作がお出来になるなら、テーブルでレイアウトできますよね。新規に制作するのには、また１つ壁がありますが、出来ない相談ではないはずです。

お客様にまずアイディアをお見せする段階では、Photoshopで画面全体を作ればいいと思います。後で画像にする文字はなめらかに、テキスト入力する文字はアンチエイリアスを外してあえてギザギザに見せてあげれば雰囲気が出ます。

市販書籍は何冊か必要でしょうね。私も最初の頃はその手の本にずいぶん助けてもらいました。CGIの設置・設定は、必要になった時にまたご質問ください。

制作期間にはなるべくゆとりを持って。出来れば1か月ほどいただければ何とかなると思います。技術的な壁にぶつかり、見せ方でぶつかり。そうやって覚えた知識こそ身につくし、本物だと思います。
頑張ってください。

お礼

返事が遅くなってしまってすみません（＞人＜）

とりあえずPhotoshopでアイディアを作るとこまで出来ました！！
これから修正、制作と段階を踏んでいくと思います。
そしてまだまだ躓くところがたくさんあると思います。

今はまだ制作期間など細かいところがはっきりしていないんですが、すぐにとりかかれるよう書籍も何冊か購入し、Dreamweaverの勉強をしています。

初心者の私にやさしく教えてくださってpapuatamaさんには感謝しています。
また、こちらのサイトで質問することがあると思います。
良かったらまた初心者の私にアドバイスいただけると嬉しいです。（厚かましくて申し訳ありません）

今回の件は本当に助かりました（＾＾）
ありがとうございました。

回答No.3

papuatama

うーん…。Webデザインって、覚えるまでけっこう大変なんですよ。
ソフトの操作、タグの知識、サーバやWebそのものへの理解、ブラウザごとの差異など。ソフトさえ使えれば、知らなくても大丈夫というわけにはいきません。
> ボタンなどはパーツごとにスライス作成したほうが良いということですか？
> まとめて１つの画像にする…とはどういうことでしょうか？
パーツごとに作る方が後の修正が楽です。Dreamweaver側からオリジナル（pngファイル）を呼び出す機能がありますから。「まとめて1つの画像」とは、ページ全体を一度画像処理ソフトで作ってしまう事を指します。
> 今はテーブルレイアウトで作るほうがいいかと思ってます。
CSSは初心者には無理だと思います。テーブルレイアウトだってけっこう大変ですよ。テーブルの中にさらにテーブルを入れ子にして、各要素を配分していくのですから。
> テーブルレイアウトで作成した場合、１枚１枚作成するごとに
> レイアウトしていかなければならないんでしょうか？
いえ、共通部分を登録して一括して修正可能です。Dreamweaverは、むしろCSSの方が苦手なソフトだと思います。

納期はどのくらいあるのでしょう？何ページ作るのですか？Form送信やアクセス解析CGIなどは必要にないのですか？
どうも質問内容をお読みしていると、独力で進めるのは難しいかなと感じてしまいます。ブログをHPとして使う方法ではだめなんでしょうか？

お礼

回答ありがとうございます＾＾

正直なところ私も最初は無理なんじゃないかと思っていました。
私が勉強しているから。。。といって仕事をもってきてくれるのはとてもありがたいことですが、勉強している＝できる　と思っているみたいなのでちょっと困ってしまいます。
でもやっていかないと技術が積み重なっていかないのも事実なので、
できないのは当然なんですが、前向きに頑張っていこうって思いなおしました。

納期はまだ未定なんです、なのでページ数もはっきりしていません。今のところイメージを作ってほしいと言われたので、Dreamweverにとりかかるのもいつになるかわかりません。Ｆｏｒｍ送信、アクセス解析ＣＧＩに関しても必要になると思いますが、まだそこまで考えがいかないのでこれから躓くんじゃないかと思います。。。

今までDreamweverでメンテナンス程度しかやったことがないので、とても不安ですが、１つずつ解決しながらやっていくしかないと思ってます。なのでまたこのサイトで質問すると思います。

貴重な回答・アドバイス本当にありがとうございましたｖ（＾∀＾）

回答No.1

webtera

作業の進め方としましては、初めからＷＥＢ表示（８００×６００ピクセルなど）サイズで作業したほうがいいでしょう。
PhotoshopやIllustratorのお好みのソフトでレイアウト案を作られて、正確にスライス（この意味が分からない場合は調べて下さい）し、背景や見出し、ボタンなどご自信が理解しやすい名前で保存します。

正確なサイズを必要としない場合は、別に作っても問題ありません。

ドリームウィーバーでの新規作成は、タイトル、見出し、内容文、メニュー項目など、レイアウト案を見ながらテキストでまず入力し、その後、ロゴ画像やタイトル画像、メニュー位置、コンテンツ等の表示方法を、ＣＳＳ（これも分からない場合は調べて下さい）を使用しながら設定して下さい。
簡単に書くと上記の内容になります。

お礼

回答ありがとうございます!!!!!!!
正直いきなりつまずいていて・・・でも今月末までになんとかレイアウトを作らなければいけなかったので本当に助かりました。

教えていただいた通りに実行してみたいと思います（＾＾）