風のまにまに号
Dreamweaver MX 2004を使えばCSSのデザインはしやすいのですが、ゼロから作るとなるとやはりそれなりの熟練が必要です。そこで、MX 2004の新機能である「サンプルから作成」というお手軽メニューを使って、Macromedia風デザインのMovable Typeテンプレートを作ってみたいと思います。うまく行ったらそのままこのサイトのデザインとして採用するつもりで、実況中継スタイルでプロセスを公開していきます。途中で失敗して頓挫する可能性もあるので、その場合はご了承ください。あくまでも参考程度に・・。
※この機能はトライアル版でも問題なく利用できるので、購入していない方もお試しになれます。
・Dreamweaver MX 2004を起動すると最初に出てくる「スタートページ」に「サンプルから作成」というメニューがあるのですが、この中から「ページデザイン（CSS）」を選択してください。
・すると色々なデザインサンプルが表示されるのですが、この中から「Halo ナビゲーション右」というのを選択して「作成」を実行します。
・保存先のフォルダとファイル名を聞かれるので、ここでは以前紹介したMTのテンプレート構成に合わせて、
/MT_Templates/Main Index.html
というファイル名で保存します。
・するとDreamweaverのデザインビュー内でCSS適用後のデザインが再現されて上の画像のような感じになります。このHTML内にMovable Type用のタグを当て込んでいけば一応MTのテンプレートは作れるのですが、そのままではMacromediaのサイトそのままのデザインになってしまってつまらないので、まずはデザインのテイストを自分好みにアレンジしてみたいと思います。
先ほどHTMLと一緒にフォルダ内に生成されたファイルの一覧と、その内訳は下記のようになります。
- emx_nav_right.css
- 外部CSSファイル
- bg_grad.jpg
- ページ全体の背景画像
- gblnav_left.gif
- ナビゲーションバーの左端
- glbnav_right.gif
- ナビゲーションバーの右端
- glbnav_background.gif
- ナビゲーションバーの背景画像
- glblnav_selected.gif
- ナビゲーションバーが選択された時の背景画像
- tl_curve_white.gif
- コンテンツ部分の角丸（左）
- tr_curve_white.gif
- コンテンツ部分の角丸（右）
- bg_nav.jpg
- 右サイドメニューにリンクが貼られた時の背景画像
次回はFireworks上にパーツを配置してデザイン変更用の「ひな型」を作ってみたいと思います。
えっと、ＤＷ ＭＸ２００４の扱い方を検索していたら、たまたま このＨＰに出会いました。
そして、丁度、僕もあなたと同じ事を考えていたのでした。それは サンプルをベースに勉強して行こうと言う事でした。そして 選んでいたサンプルが同じだったので嬉しくなりました。
僕はまだ ＤＷの扱い方を殆ど分かりません。これから勉強をして行こうと思っています。
なので、出来ましたら、ＤＷで選んだサンプルを 順番に今の様な感じで やり方の説明と共にサンプルがオリジナルの様になる過程を 順番に見やすくしていただけたら とてもあり難いのですが、宜しくお願い致します。僕は まだ最近スタジオＭＸ２００４を買ったばかりのもので、まだ 進められないと言うのが現状です。。。 勉強させてください。。。
コメントありがとうございます。
なかなか続編が書けずにいるこのシリーズですが、近日中に第２回を公開するつもりでいるので、もうしばらくお待ちください。ただ私の場合、割と自分勝手にカスタマイズしてしまうと思うので、あまり当てにならないかもしれません。それで参考になれば良いのですが・・。