このチュートリアルでは DreamweaverのCCスターターテンプレートを確認していきます まず「デザイン」ワークスペースに切り替えます スターターテンプレートから新規ファイルを作成する方法は 他のファイルを新しく作成する方法と同じです ファイル／新規作成…を選択し、 「新規ドキュメント」ダイアログボックスの左側の 「スターターテンプレート」オプションを選択します 「レスポンシブなスターター」フォルダーがありますね 中には5つのテンプレートがあります 「ページについて」「ブログ投稿」「eコマース」「電子メール」「ポートフォリオ」です フォルダー名が示すように それぞれに、セマンティック HTMLで作成された レスポンシブデザインが含まれます テンプレートをクリックすると、右側に プレビューと説明が表示されます 「バージョン情報ページ」テンプレートを選択します 「作成」をクリックしてページを作成します 保存場所の指定を求めるダイアログが表示されます 「Project」フォルダーに保存することにします 名前は「about.html」にしましょう 依存ファイルの保存が求められたら「コピー」をクリックします 「ファイル」パネルを見てみましょう このとおり、あらかじめサイトを設定しておきました このサイトは「Project」フォルダーを指していて 「about.html」ページとサポートファイルがあります このバージョン情報ページは「分割」ビューにも表示されます 「コード」ビューでテンプレートのコードを確認しましょう スクロールするとおわかりのように 標準的なHTML5によって構造が定義されています 「ライブ」ビューで「デザイン要素」を選択すると 「コード」ビューでも該当するコードが選択されます 要素を追加、削除、複製することによって テンプレートのHTMLブロックを簡単に編集できます 最後に.cssファイルを選択して ページのスタイルとメディアクエリーを表示します 一番上のスタイルはレイアウトの基礎を定義し 下のメディアクエリーセクションは 画面サイズに応じて変化するスタイルを定義します 「ファイル」から「ブラウザーでプレビュー」を選択して、結果を確認しましょう テンプレートのレスポンシブデザインが 画面の幅に適応します スターターテンプレートは、Dreamweaver's CCの コーディングツールとビジュアルツールで簡単にカスタマイズできます CSS デザイナーの「ソース」領域でaboutPageStyle.cssを選択します 「セレクター」領域でbodyタグを選択し 「プロパティ」領域で「背景」ショートカットをクリックします 背景色を黒に変更しましょう タイル画像を追加します 背景を「fixed」に設定します 「ライブ」ビューでテキストの要素を選択します CSSデザイナーで色を白に変更します テキストの属性はどれも同じ方法で変更できます ここからの処理は簡単です CSSデザイナーで視覚的にスタイルを設定でき 「コード」ビューで直接コードを編集することもできます 次は画像を置き換えましょう。「
ライブ」ビューで選択し HTML属性のポップアップを使用して 新しい画像を参照します 「My Project」フォルダーに画像があるので feature_259x259.pngファイルを選択しましょう 新しいデザインが形になってきましたね テキストを編集するときは コンテンツをコピーして「ライブ」ビューや「コード」ビューに 貼り付けるか、直接入力します 要素の追加や削除も自由にできます テンプレートは、HTMLブロックを操作するための 出発点として使用するものです テンプレートをたたき台にして、デザインを完成させます 出来上がったデザインを見てください テンプレートにあったHTMLブロックの多くが 削除されているのがわかるでしょうか 使いたい要素だけを残しています 「ブラウザーでプレビュー」を選択してもう一度確認してみましょう 完成したデザインが画面サイズに合わせて変化します スターターテンプレートを使うと、Webページがこんなに簡単に作成できます 是非スターターテンプレートを試してみてください 目的に合わせて自由に使えます デザインの作成をすぐ始められるので、是非お試しください
