dreamweaver(cs4)とphotoshop(cs)で企業HPを作る時の、効率の良い作りかた(流れ)を教えて下さい。
(環境:mac os x10.5、上記ソフトウェア)
これまで、ホームページビルダー12でHPを作っていました。
どこでも配置モードという、パワポのような操作イメージで作れるものでしたが、どうしても素人っぽいHPになってしまうため、このたびdreamweaver(cs4)を使いHPを作ろうとしています。
HPを作る際に、私が単純にイメージしているのは、
1、HPのテーマ、全体イメージを決める(他社サイトを参考に)
2、HP専用フォルダを作る
3、photoshopで、アイコンや画像を作る
4、HPのテキストを作る(書く)
5、3と4を配置する(各ページも同じく)
6、リンクを貼る
7、出来上がり
このような形なのですが、お手本にするサイトがすでにある場合、どのようにすると効率よくHPが作れますでしょうか?
また上記のやり方は、間違えている(また時間が掛かりすぎている)でしょうか?
参考にしようとしているサイトは、http://www.apple.com/jp/retail/onetoone/
http://www.apple.com/jp/macosx/refinements/
です。
1.(xxxxxx)2.(iiiiiiiii) 3.(xxxx) 4.出来上がり
のような形でご回答いただけますと、嬉しいです。
どうか、みなさんのお知恵をお貸しください。
お願い致します。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
>これらについては、各画像に対して、上記の数値等を変えたタグを入れていけば、問題なくなるので、それを先に考えておくべきだ、ということでしょうか?
だいたいそういうニュアンスで合っていると思います。
タグやスタイルを追加指定して修正できるレベルならいいのですが、場合によっては別の場所のcssでの指定方法を変えなければならなくなったりすることもあります。
なのでそういう点を少なくすることが一番効率化につながると思います。
ただ、あくまでこれから何回か作ることを前提としている部分もあるので最初のうちは実現方法を考えるのに時間を割くより修正の方に時間をかける方が効率的だと思います。
この回答への補足
ビルダーを過去に使っており、IE以外ではデザインが大きく崩れていた事もあって、各ブラウザでのレイアウト崩れが、懸念材料となっております。
試行錯誤しながら、イメージに少しでも近づくHPを作っていこうと思います。
ありがとうございました。
No.4
- 回答日時:
1. サイトに載せる情報を分類し、必要なコンテンツを決めます
2. 見た目を決めます
3. 2で決定した見た目の実現方法を考えます(場合によっては2に戻る)
4. HTMLを書きます
5. CSSを書きます
6. 画像を作ります(2をphotoshopでpx単位で作りながら考えている場合はこの手間を省けます)
7. ブラウザでチェック
8. 修正します(場合によっては7に戻る)
9. 完成です
HTMLとCSSのみである程度のサイトを作る時のプロセスです。
多少ハードルが高いので最初からは難しいかもしれませんが、多くの場合に重要なのは2と3です。
例えばcssの実装の差でwidthでauto以外の値を指定した要素にpaddingを指定するとブラウザによって表示が変わるという例があります。
この場合は <div style="width:800px;"><p style="padding:10px;">あああ</p></div> のようにすることでこの問題を回避することができますがhtmlとcssの記述に多少変更が出てきます。
また、時と場合によっては実現できないorしないほうがいい見た目というものもあります。(これは広義でのデザインの問題が入るので細かい説明は省略します)
これらは限られた狭い範囲ならすぐ対応できるのですが、数が多くなってくると対処に時間がかかるためできるだけ先に考えておくと良いと思います。
ちなみにどのソフトを使うにしてもある程度のサイトを作ろうと思うとHTMLとCSSの知識は必須です。
私はここで覚えました。
http://www.tohoho-web.com/www.htm
それとブラウザの実装の差やバグを覚えていくことが重要です。これに関しては問題を見つけるたび検索してみると良いと思います。
この回答への補足
とても解りやすく大変勉強になります!
ありがとうございます。
また、少し質問があります。
お時間ございましたら、ご回答いただけると大変嬉しいです。
各ブラウザ対応についての質問です。
>これらは限られた狭い範囲ならすぐ対応できるのですが、数が多くなってくると対処に時間がかかるためできるだけ先に考えておくと良いと思います。
>この場合は <div style="width:800px;"><p style="padding:10px;">あああ</p></div> のようにすることでこの問題を回避することができますがhtmlとcssの記述に多少変更が出てきます。
これらについては、各画像に対して、上記の数値等を変えたタグを入れていけば、問題なくなるので、それを先に考えておくべきだ、ということでしょうか?
No.3
- 回答日時:
上から順で行えばできます。
とても難しいですよ。■画像処理ソフトでデザインカンプの作成(photpshopやillustratorやfireworksなど)
(1)全体イメージの作成 ヘッダー・ナビの作成
(3)バナー画像・写真修正・テキストの作成
※この段階でぺージの出来上がりを確認しておく。
■FLASHなどの作成
■コーディング
DREM WEAVERでサイトを構成しておく(保存フォルダーの決定)html,css,imageのサーバー上のdirectoryを決める
この辺はHPBと同じです。
--
画像のスライス(切り出し)この処理は、ADOBEのforeworksが便利。
画像は、切り出し時に形式を選択できます。(JPG,PNG,GIF)
---
DREMWEAVERで、
デザインカンプを基にコーディングする
HTMLとCSSの作成
★HTMLとCSSのバリデートチェックは必須です。
■動作確認
複数のブラウザで動作確認(特にCSSはブラウザにより解釈が違うことがありますので複数のブラウザで確認)、CGIなどサーバーでなければ動作しない部分はにUPLOADして動作確認
■SEOを施す。
SEOを施す。
google,yahoo,msnにサイト登録。
携帯サイトは、必ず登録しなければならない。
No.2
- 回答日時:
一部だけの回答ですが・・・
<1に関して>
私の場合は要素の配置をまず考えますね。
アイコン等のデザインはそのあとでいいです。
position:absoluteで座標配置するならいいのですが、通常はブロックの配置でレイアウトしますので、どんなブロック配置にするかを考えます。そのあたりがわかってくると、サイトのブロック構造をぱぱっと考えて配置していけます。
2-4,6の画像作成や文章の推敲ではあまり時間稼ぎができないので、自分のレイアウトテンプレートを持つのが早く作るコツ だと思ってます。
<5に関して>
HTMLやCSSを直接いじったほうが早い場合も多いです。
要素配置の修正とか、ピクセル単位で調節したいなら私はソースいじっちゃいます。
Dreamweaver自体HTML/CSSはできることが前提のソフトなので、一通りいじれるようになるとそれだけで速くなると思います。
この回答への補足
早速のご返答ありがとうございます。
配置に関しては、リンク先HP(特に最初のもの)で、大枠は決まっている状態です。
>HTMLやCSSを直接いじったほうが早い場合も多いです。
こちらは具体的にはどのようなことをするのでしょうか?
(一概に言えないと思いますが。。)
HTML、CSSについて、オススメの教えサイトなど、ありましたら、ご教示いただきたいです。
No.1
- 回答日時:
2~6は、はっきり言ってどうでもいいこと。
どうでもいい。というと語弊はありますが、
例えば、料理で言えば、
食材の購入方法、包丁の使い方、コンロの火のつけ方。
といった基礎的なレベルのお話。
一番重要なのは
1
です。
いきなりPCで作業するのではなく、紙に絵を書いて大体の構造やデザインや写真イメージなどを盛り込んで「レイアウト」を作ることです。
いくら、2番以降をサクサクと出来る技術をもっていたとしても、1番の行程がうまくなければ、だぁれも見向きもしてくれない汚いサイトが出来てしまいますよ。
この回答への補足
確かにHPのコンセプトが決まらないで、良いHPが作れなければ、本末転倒ですよね。
最初は紙等でのレイアウトですね。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- その他(プログラミング・Web制作) Windowsのマクロプログラムで、こんなことできますか? 3 2022/06/28 14:30
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- ノートパソコン HPの保証について 1 2023/08/26 10:17
- その他(IT・Webサービス) 無料ドメイン無料サーバでHP作りたい。 知り合いの飲食店のHPを作ってあげたいのですが、その店主には 3 2022/06/05 01:22
- SEO Wordpressで地図上のポイントをクリックしたらタグも連動して変わるやり方 1 2023/05/16 01:12
- XML ホームページ作成ーこういうのを作りたいんです 6 2022/05/23 18:37
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
background-repeat CSS で切れ...
-
IEでのbackground-size使用につ...
-
ワードプレスで事前定義されたc...
-
背景画像を前面に表示させる方法
-
HP作成 作成した画像を動画の上...
-
背景画像の上に透過GIF背景...
-
画像上に文字を表示するとiPhon...
-
背景画像にロゴを重ねる方法を...
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
Safariでのひどいレイアウト崩れ
-
疑似要素で背景画像に指定したS...
-
サイドバーの背景色を項目のな...
-
HTMLで使う「見出し」は英文で...
-
LightBoxの矢印の出し方
-
ページごとに背景画像を変更し...
-
Chat GTPで、12月のカレンダー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報