今回のねらい
いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。
第一回目は、「新規作成メニュー」と「PhotoShopとの連携」について見てみましょう。
新規作成 メニュー
CS3の新規作成メニューでは、様々な種類のひな型を選んで新規のファイルが作成できるようになりました。
ページのテーマ
新規作成画面の「サンプルからのページ」―「開始ページ(テーマ)」では、あらかじめ登録されているWebページから種類を選んで作成することができます。
例えば、「健康&栄養−カタログ」を選んで作成すると、健康食品販売のECサイトで、商品一覧ページを作成するためのレイアウトが作られます。
サンプルで使用されている画像ファイルや外部スタイルシートファイルは、ページ作成時に任意の場所に保存することができます。ひな型を基にしてできたページの画像や修飾を自分の好みのものに差し替えれば、簡単にWebページを作成することができます。
- 【備考】
- ホームページビルダーなど他のソフトにあった「選べるデザインのひな型」機能が追加された感じです。初心者の方が利用するためには便利な機能だと思います。ただし、デザインが「海外サイト風」で日本のサイトでそのまま使うにはちょっと難ありと感じました。また、種類もまだまだ少ないです。そして何より残念なのが、ひな型ページが「テーブルレイアウト」であるということです。ただ、[新規作成]画面の下に「コンテンツの追加」というリンクがあるようですので、もしかしたら、Adobeのサイトからひな型を追加することができるようになるかもしれません。今後に期待というところでしょうか。
空白ページのHTML
新規作成画面の「空白ページ」―「HTML」では、あらかじめ登録されているスタイルシートレイアウトから種類を選んで作成することができます。<div>とスタイルシートを利用して、レイアウトの枠組みだけを作成する機能です。
例えば、「2列を固定に左にサイドバー」を選ぶと、左側にリンクナビゲーション、右側にコンテンツ(本文記事)が配置されるレイアウトが、スタイルシートレイアウトで作成されます。
ひな型を基にしてできたページのスタイルシートを編集して「サイズ・色・背景画像・余白の調整」を自分の好みになるように変更した後、本文や写真を挿入すれば、比較的簡単にスタイルシートレイアウトのWebページを作成することができます。
- 【備考】
- ソースにコメントがつけられているのでスタイルシートレイアウトを勉強する場合に、とても役に立つでしょう。また、新規作成画面の「レイアウトCSS」オプションを使えば、ページ内部のヘッダー<head>に埋め込みのスタイルシートとして作成するか、外部スタイルシートファイルとして作成するかを選択することができる、というのもうれしい機能です。
PhotoShopとの連携作業
今まではFireworksとの連携のみでしたが、今回のバージョンからは、PhotoShopとの連携ができるようになりました。
PhotoShopデータ(PSD形式)のファイルを直接ページに挿入した場合(PhotoShopからのデータコピー&ペーストの場合も)、イメージプレビュー画面が表示されてWebページ挿入用の画像データの形式(JPEGにするかGIFにするか?)と品質(JPEG圧縮率やGIF最大カラー数)を調整した後に、画像データをファイル保存してからWebページに貼り付けることができます。
また、イメージプロパティの[編集]ボタンがPhotoShopアイコンとなり、DreamweaverからPhotoShopを起動し、編集することができるようになりました。
【注意】 [編集]ボタンがPhotoShopアイコンにするには、[環境設定]の[ファイルタイプ/エディタ]で、該当するファイル(JPEGやGIFなど)のプライマリエディタを「Photoshop」にしておく必要があります。
[サンプルページ文章] wikipedia「ひまわり」より抜粋
[サンプルページ写真] 2000ピクセル以上のフリー写真素材集
r360studioからのお知らせ
- 次回は、「DreamweaverCS3になってどう変わったか?- 其の二 -」をお届けする予定です。
- 「Webセミナー」受付中です。今後、秋日程が公開される予定です。
http://www.bizseminar.jp/index.html - Mixiやってます。マイミク募集中です!同じ趣味の方、志しの方、マイミク申請くださいませ。
http://mixi.jp/show_friend.pl?id=60060