DreamweaverとFireworksを使ってWebページを まず見本から作成する
Web画像編集ソフト Fireworks は 「Webページの完成見本(プロトタイプ、カンプ) を作ることができる」というのが 製品の特徴として挙げられています。(参考. CS3 Web PremiumおよびStandardワークフローガイド)
そしてそのカンプを元に、Webページ編集ソフト Dreamweaver でWebページを完成させていく手順を体験したい。
でも具体的にWebページをまるごとデザインしていく過程を見せてくれる 教材がなかなか ないです。 e解説も、解説本も、写真のレタッチとかロゴの作り方ばかりページを割いて。
しかしAdobeのサイトにありました。
Taking a Fireworks comp to a CSS-based layout in Dreamweaver (英語)
こちらの記事では、Dreamweaver 8, Fireworks 8 を使ってフルCSSのWebページを作る手順を、 なんにもないところから HTML/CSSの完成まで、手とり足とり教えてくれます。
私の使ってる Dreamweaver と Fireworks は バージョンMX (Version6) ですけど、 上記の記事のやりかただとほぼ同じようにできました。
Fireworks
Fireworksでまずカンプ(完成見本)を作ります。
最初に以下のWebページ背景(図1)を作るのですが、私はPhotoshop脳だったんで、青いグラデーション部分は「選択範囲で四角(矩形)作って、グラデ塗りして、レイヤ分けだな」と考えました。
しかしFireworksだと、ビットマップではなくてベクターオブジェクトを使うんですね。 四角(矩形)のオブジェクトを作成して、そのオブジェクトの「塗り」にグラデーションを適用しています。
確かに、一度ビットマップで作ってしまうと画像品質の劣化を避けるため拡大・縮小できないですが、 ベクターオブジェクトなら拡大・縮小も色替えも 後からいくらでも可能です。
結局こんなカンプ(図3)を作成するのですが、写真以外のすべてのパーツをベクターオブジェクトで作っています。 雲のように ぼかし の入ったものも「エッジをぼかす」とかライブエフェクト(Photoshopレイヤー効果と同様なもの)を使っていて、ベクターのままです。ビットマップには していません。
ベクターオブジェクトのまま保持するのは、以前のPhotoshopではできないですね (CS2以降のPhotoshopは「スマートオブジェクト」機能でベクターのままでも扱えるようになったらしいけど詳しくないです)。
手順を日本語で簡単に説明すると、以下のようになります。
背景作成
ヘッダ作成
ロゴ作成
コンテンツを囲む角丸矩形を作成・サイドバーとメインを分割
図4 背景作成→ヘッダ作成メインコンテンツに写真やWELCOME文字を用意
プレースホルダ(とりあえずの場所取り)として、適当なダミーテキストを入れる
ダミーテキストは Lorem ipsum - Wikipediaからコピーペーストしました。
フッタ作成
図5 メインコンテンツ作成→テキスト入れ
このカンプを作成していて困ったことは、「角丸矩形」が Fireworks MX ではうまく作れないことです。 Fireworks 8 では図6のように角をうまく丸められるようですが、MX ではなぜか下のようにおかしな丸めかたをしてしまうんですよ。
しかしgoogle検索すればあっさり解決しました。
Fireworks FAQ:角丸矩形をリサイズ
プラグイン fixroundedrectcornersを導入して [コマンド > johndunning> fixroundedrectcorners] を実行すると よい角丸になりました。
スライス
次は、先ほど作ったカンプを画像素材に切り分けます。
以下の本によると、2004年くらいまでは tableレイアウトでよかったので、Fireworksでスライス(切り分け)した画像とHTMLをそのままDreamweaverで読み込めばレイアウトOK！だったそうです。その頃まではFwとDwの連携で大いにラクができたと。
2004年頃以降はCSS対応のため、Fireworksでは必要な画像部分だけスライスで取り出して、DreamweaverでCSSパーツとして画像ごとに新たに読み込むという工程に変化したので、FwとDwの連携も簡単ではなくなったとのことです。
 | Dreamweaver プロフェッショナル・スタイル [CS3対応] 作者：鷹野 雅弘 出版社／メーカー：毎日コミュニケーションズ 発売日：2007-09-20 メディア：単行本（ソフトカバー） |
おすすめ度の平均:   総合的かつ実用的な情報が満載で勉強になりました。 |
今回扱っている Adobeの記事では フルCSS対応ページを作るので、Webページカンプから、必要な画像のみスライス (切り出して画像ファイルとして出力) します。 Fireworksからは HTMLを出力しません。文字部分は画像にはせず、あとで Dreamweaverで文字として表示します。
Dreamweaver
次は、Dreamweaverで公開用 HTML/CSS ページを作ります。
[ファイル - 新規 - 基本ページ - HTML] で新規ページを作成して、一から HTML を作成します。
Dreamweaver のほうは、MX と 8 のバージョンの差をひしひし感じました。 HTMLタグ編集やレイアウトで Dreamweaver MX に用意された機能には問題がありました。 レイアウト機能として、テーブルレイアウトしか用意されていないんです。CSSを使ったレイアウトという選択肢がない。
しかし、この元記事では Dreamweaverのレイアウト機能に頼らず、 HTMLコードはdivで領域を分けて、CSSをいちいちセレクタごとに内容を指定していく、というやり方だったため 旧バージョンでも何とか対応できました。
Webページ作成手順は大きく以下のようになります。
まずHTMLタグを入力してロゴ画像も入れて、Webサイトで伝えるべき内容をすべて用意する。
CSSを編集して画面デザインを整える。
1の段階で気づいたこと
Dw8には「divタグを挿入」というボタンがあるのですが、
MXにはそのボタンは ないので、コードビューで手動で <div id="... って入力するしかないです。
でも元記事でも「コードビューを見て、正確な位置に div を挿入しよう」と説明しているし、コードビュー使えばHTMLタグ入力は問題ないです。
リストを作るときに [リスト]ボタンを押すのは MX では問題がありました。MXでそのボタンを押すととんでもない HTMLになる (リスト要素の <li></li> を <div><div>…</div></div> で囲む わけのわからないHTMLタグになるし、<div id="nav">がなくなるし……) ので、手動で <ul><li></li>…</ul> と入力するしかないです。
画像を挿入するとき、画像ボタンを押すのは問題なしでした。[アクセシビリティ - イメージ] にチェックしておくと、「代替テキスト」ダイアログが出てきます。
ダミーテキストを挿入するには、Dreamweaverの場合 Lorem Ipsum Generatorという拡張機能があると紹介されていたので、それを使いました。
2の段階で気づいたこと
CSSの編集に関していえば、 セレクタごとにマウスでいちいちクリック選択して数値を変えていくのは操作性や一覧性が低くて不便だろうと先入観をもっていましたが、 やってみると手で入力するよりわかりやすいかも……意外だ……と考えを改めました。
DreamweaverのデザインビューはCSSもレンダリングして表示してくれますが、 ブラウザで実際に表示させるのと表示が異なります。 CSSを書き換えた後は、ホンモノのWebブラウザで確認しなくてはならないですね。
Webブラウザでプレビューするときメニューから [ファイル - ブラウザでプレビュー - iexplore] を選べばいいんですが、この奥のほうにあるメニュー選ぶのはすこし手間がかかります。ショートカットキーとして割り当てられている [F12]キーというキーは WindowsXPではなぜか効かなかったので、[編集 - キーボードショートカット] で [F9]キーに割り当てました。これでこまめに表示を確認しました。
結論
やってみていろいろ気がついたことがありました。
Fireworksでベクターやビットマップを並べて画面を作っていくやり方は、Photoshop よりIllustrator に近い。しかし Fw はビットマップもPhotoshopのように扱えるし、使いやすいツールだと感じた。
Dreamweaver は CSS入力補助ツールとして意外に使える。デザインビューでクリックすると、そのクリックした位置のHTMLコードをコードビューに表示するのも効率を上げてくれる。
CSSでWebページを飾る方法として、画像を divタグの背景
background-imageとして使う。複数のdivタグの領域どちらにもまたがる画像を表示するために、複数のdivタグをどちらも含む wrapper div を使う。これは手でCSSを書いてるとあんましやりたくならない方法だったけど、Dreamweaver使うならそれほど手間じゃないのでやれるかな。背景画像デザインについては、Webページにおとしこむ技術はわかったけど、それ以前の Good Lookingなデザインにするという点が難しいですね。これはアートの領域だから、技術とは別の学習が必要だ……。
