Adobe Dreamweaver CC

新しいライブビュー機能を使用してWebページをデザイン、編集、プレビューする方法

Dreamweaverの新しいライブビュー機能を使用して、直接ライブビューでページをデザイン、編集、プレビュー (所要時間60分)

提供元Tommi West

新しいライブビュー機能を使用してWebページをデザイン、編集、プレビューする方法

60分

ライブビューがアップグレードされ、Webコンテンツを視覚的に作成できるようになりました。HTML要素およびアセットを直接ライブビュー画面にドラッグ&ドロップし、ライブビュー画面内でアイテムをドラッグして、マークアップやアセットをすばやく移動させることができます。エレメントクイックビューで要素をドラッグすれば、ページ構造の管理と変更が可能です。

準備するもの

ダウンロード 練習用のサンプルファイル(ZIP、2 MB)

ダウンロード Dreamweaverクイック操作ガイド

ライブビューは、HTML5プロジェクトを正確にレンダリングし、リアルタイムで更新して変更箇所を即座に表示する、インタラクティブなプレビューです。

ライブガイドが新たに搭載され、要素を挿入する際のきめ細かな制御が実現しました。ライブビューの新しいコンテキストメニューを使用すれば、Webコンテンツを効率よく編集できます。また、強化されたエレメントディスプレイ機能を使用すれば、セレクターの追加や削除、作成をおこなえます。インターフェイス全体で選択内容が同期されるので、CSSスタイルを探して更新するプロセスが効率化します。

ここでは、既存のサンプルプロジェクトを編集しながら、新しいライブビュー機能について紹介します。

サンプルプロジェクトには、イメージやテキストコンテンツが入ったdivコンテナのグリッドが表示される、単一ページが含まれています。これは、Playという地域の架空の音楽ホールを宣伝するためのものです(図1を参照)。

Chromeブラウザーで表示したサンプルプロジェクトのレビュー
図1. Chromeブラウザーで表示したサンプルプロジェクトのレビュー

HTML要素をライブビューにドラッグする

まずZIPファイルを解凍してデスクトップに保存します。サンプルファイルフォルダーには、HTMLページと関連サイトファイルが含まれます。

  1. Dreamweaver CC 2014を起動します。

  2. スタートアップスクリーンでサイト設定アイコンをクリックし、サイト設定ダイアログボックスを開きます。サイトの名前「Live Design」を入力します。フォルダーアイコンをクリックし、デスクトップにあるlive_designフォルダーを選択します(図2を参照)。

ローカルルートフォルダーのパスをサンプルファイルフォルダーに設定
図2. ローカルルートフォルダーのパスをサンプルファイルフォルダーに設定

  1. 「保存」をクリックします。

  2. ファイルパネルで、dw_example.htmlファイルをダブルクリックして開きます。

  3. ヒント:既存のサンプルプロジェクトで、このチュートリアルの手順に従って作業します。ただし、ファイル/新規を選択して、新しいスターターテンプレートの1つを選び、新規のHTML5ページを一から作成することもできます。

    ドキュメントツールバーを見ればわかるように、ライブビューは有効化され、エクストラクトワークスペースが表示されています。

  4. エクストラクトパネルのオプションメニューで「タブグループを閉じる」を選択します(図3を参照)。
エクストラクトパネルを閉じる
図3. エクストラクトパネルを閉じる

エクストラクトパネルを使用すると、Photoshopで作成されたPSDファイルからWebグラフィックスを簡単に取り込むことができます。このプロジェクトではサンプルファイルアセットが既に提供されているので、エクストラクトパネルを閉じて画面を広く使えるようにします。ページデザインをもっと見やすくするために、コードビューの上端を少し下にドラッグしてもかまいません。この機能に関する詳しいチュートリアルについては、Dreamweaverでエクストラクトを使用するをご覧ください。

ライブビューがすぐに変更されます。以前のバージョンのDreamweaverでは、編集中にデザインを正確にプレビューすることはできませんでした。Dreamweaver CC 2014の最新リリースでは、更新のたびにレンダリングされるHTML5ページをプレビューでき、ライブビューが変更を自動的に反映するので、ブラウザーでページを編集するように作業できます。

挿入パネルからHTML要素をドラッグ

  1. 挿入パネルの「構造」セクションで、div要素を選択し、ページにドラッグします。

  2. 新しいdivをレイアウトのあちこちにドラッグすると、要素が挿入される場所を示す緑色のライブガイドが表示されます。HTML要素はレイアウト内の任意の場所にドラッグすることができます。

    注意:ブロック要素を挿入すると、上下のライブガイドが表示されます。インライン要素の場合は、左右のライブガイドが表示されます。

  3. 緑色のライブガイドが中央のhero textより下にあるときに、マウスボタンを離します(図4を参照)。
hero textの下の#tile3 divタグ内に新しいdivを挿入
図4. hero textの下の#tile3 divタグ内に新しいdivを挿入

挿入パネルから任意のHTML要素をドラッグし、ページに追加できます。

新しいセレクターの追加、既存のセレクターの適用、スタイルの編集

ライブビューのエレメントディスプレイで新しいセレクターを作成してページをすばやく更新し、CSSデザイナーでページ要素のスタイルを設定します。新しいクラスの名前またはIDを入力してHTMLページに追加し、CSSソースの場所を選択して新しいルールを保存します。選択したスタイルはCSSデザイナーでハイライトされるので、セレクター名を探さなくてもプロパティを追加して値を更新することができます。

  1. 新しいdivを選択した状態で、エレメントディスプレイのプラス(+)ボタンをクリックし、「A」の文字を入力します。下向き矢印を2回押してからEnterキーまたはReturnキーを押して、既存の.action-titleクラスを適用し、テキストのスタイルを設定します(図5を参照)。
入力した文字にマッチする既存のクラスがメニューに表示される
図5. 入力した文字にマッチする既存のクラスがメニューに表示される

  1. .action-titleを選択した状態で、もう一度プラス(+)記号をクリックするかTabキーを押して、新しいdivに名前を付けます。div IDの名前「#contact」を入力して、EnterキーまたはReturnキーを押します。

  2. 「#contact」というIDはまだCSSコードで定義されていないので、ソースの場所を選択して新しいセレクターを追加するためのウィンドウが表示されます。

  3. リンクされているファイルのdw_example.cssを選択します(図6を参照)。
ソースを選択メニューでdw_example.cssを選択
図6. ソースを選択メニューでdw_example.cssを選択

現在のHTMLページでスタイルを定義し、メディアクエリを選択するか、このウィンドウで新しいCSSファイルまたはメディアクエリを作成することもできます。

  1. 新しい#contactセレクターは、CSSデザイナーでハイライトされます。「レイアウト」セクションで左マージンを40pxに設定し、divが所定の位置に移動するのを確認します(図7を参照)。

左マージンプロパティを40pxに更新
図7. 左マージンプロパティを40pxに更新

エレメントディスプレイで複数のセレクターを持つ要素を選択する場合は、Tabキーを押せばセレクターを切り替えることができます。また、Ctrl(またはCmd)+ Cキーを押して、選択したページ要素をコピーすることもできます。

ヒント:エレメントディスプレイのセレクターを右クリックし、「コードビューに移動」を選択すると、コードビューにCSSスタイルが表示されます(図8を参照)。

CSSデザイナーを使用して適用したコードの変更を確認
図8. CSSデザイナーを使用して適用したコードの変更を確認

ライブビューでページを編集すると、他の人が作成したプロジェクトで作業している場合でも、特定のセレクターを分離して、選択した要素のプロパティを簡単に更新できます。

ライブビューでテキストコンテンツを追加

テキストの編集、テキストブロックの書式設定、スタイルの適用がかつてないほど簡単になりました。ライブビューでは変更に合わせてページがレンダリングされるため、テキストコンテンツの折り返しや表示をチェックするためにブラウザーでページを繰り返しプレビューする必要がありません。

  1. #contact div内のコンテンツをダブルクリックすると、オレンジ色の境界線が表示されます。

  2. オレンジ色の境界線は、テキストが編集可能であることを示します。

    ヒント:ダブルクリックすると単語が選択され、トリプルクリックすると段落全体が選択されます。EnterキーまたはReturnキーを押すと新しい段落が作成され、Shiftキーを押しながらEnterキーまたはReturnキーを押すと<br>タグが追加されます。

  3. プレースホルダーの内容をトリプルクリックして、すべての単語を選択します。「To learn more, contact play@adobe.com」と入力します。

  4. エレメントディスプレイでメールアドレスを選択し、リンクボタンをクリックします。リンクフィールドに「mailto:play@adobe.com」と入力します(図9を参照)。
リンクを入力するかフォルダーアイコンをクリックし、サイトファイルを選択
図9. リンクを入力するかフォルダーアイコンをクリックし、サイトファイルを選択

  1. オレンジ色の境界線の外側をクリックするか、Ctrl(またはCmd)+ EnterキーまたはReturnキーを押すと、変更が確定されテキストの選択が解除されます。

  2. ヒント:変更を確定する前に気が変わった場合は、Escキーを押せば編集を取り消すことができます。

  3. メールアドレスをクリックし、Tabキーを押します。エレメントディスプレイで、新しいクラスの名前「.email」を入力し、新しいセレクター用のソースとしてdw_example.cssを選択します。CSSデザイナーの「テキスト」セクションで、「カラー」プロパティをクリックし、スポイトツールを使用してキーボードの画像から紫色を選択します(図10を参照)。
新しいスタイルを作成し、リンクされているテキストのカラーを紫に設定
図10. 新しいスタイルを作成し、リンクされているテキストのカラーを紫に設定

  1. 中央のhero textをクリックします。.heroスタイルは、CSSデザイナーでハイライトされます。

  2. margin-topプロパティを50pxに更新します(図11を参照)。
heroクラスの上マージンを編集
図11. heroクラスの上マージンを編集

テキストの編集、テキストブロックレイアウトの書式設定、スタイルの適用がかつてないほど簡単になりました。ライブビューでは変更に合わせてページがレンダリングされるため、CSSスタイルおよびEdge Web Fontsを使用してレンダリングするときに、テキストコンテンツの折り返しや表示をチェックするためにブラウザーでページを繰り返しプレビューする必要がありません。

挿入パネルでHTML要素をクリックする

要素をドラッグする方法に加え、挿入パネルで任意のHTML要素をクリックしてページに追加することもできます。要素の挿入方法はダイアログボックスで選択できます。新しいライブビューのインターフェイスには、好みの方法でページを更新できる柔軟性が備わっています。

  1. 中央のhero textをクリックします。挿入パネルの「構造」セクションで、ヘッダー要素をクリックします。

  2. ダイアログボックスには、現在の選択に基づいて4つの挿入位置が表示されます。「前」、「後」、「折り返し」、「ネスト」から選択して、新しい要素を挿入します。

  3. 「前」オプションをクリックします(図12を参照)。
「前」をクリックし、選択したhero textの前に新しいヘッダー要素を挿入
図12. 「前」をクリックし、選択したhero textの前に新しいヘッダー要素を挿入

  1. 新しい要素を選択した状態で、プラス(+)記号をクリックし、「H」と入力します。下向き矢印を押して、.heroクラスを選択します。EnterキーまたはReturnキーを押して、適用します。

  2. プレースホルダーのテキストが更新され、.heroスタイルの書式設定が表示されます。

  3. Tabキーを押して新しいスタイル「#header」を作成します。ソースをdw_example.cssに設定します。

  4. CSSデザイナーの「テキスト」セクションで、「カラー」プロパティをクリックし、スポイトツールを使用してヘッドフォンの画像からターコイズ色を選択します。

  5. プレースホルダーのテキストをダブルクリックして編集可能にし、テキストをトリプルクリックして行全体を選択します。「Welcome to PLAY!」と入力します(図13を参照)。
テキストコンテンツを更新し、ヘッダーメッセージを追加
図13. テキストコンテンツを更新し、ヘッダーメッセージを追加

ページの任意の場所をクリックして、テキストの変更を確定します。

新しいライブビューのコンテキストメニューで要素を複製する

ライブビューで右クリックし、新しいメニューオプションを使用してコンテンツを変更後、ライブビュー画面でページのコンテンツをドラッグして移動させます。

  1. スクロールダウンして、「Call to Action!」サブヘッダーの下のpタグ要素を選択します。

  2. 段落を右クリックしてコンテキストメニューを開き、「複製」を選択します(図14を参照)。
選択した要素をライブビューで複製
図14. 選択した要素をライブビューで複製

  1. 複製した段落を「Call to Action!」サブヘッダーの上に緑色のライブガイドが表示されるまで上方向にドラッグします。

  2. 複製した段落を右クリックし、「削除」を選択してそれを削除します(図15を参照)。
コンテキストメニューを使用してアイテムをすばやく削除
図15. コンテキストメニューを使用してアイテムをすばやく削除

コンテキストメニューを使用すると、親タグまたは子タグの選択、ページのインスペクト、およびコードナビゲーターの起動も簡単になります。ライブビューでは、ページのあちこちに要素をドラッグして再配置することで、プロジェクトを直感的に編集できます。

エレメントクイックビューを使用してページ構造を制御する

エレメントクイックビューにより、ドキュメントのHTML構造を表示するインタラクティブなリストを使用してページレイアウトを確認できます。クリック、ドラッグ、およびアイテムの右クリックで、HTML要素の選択、再配置、削除、コピー&ペースト、複製をおこないます。ページ構造に高度な変更を加え、コンテキストメニューを使用して作業しながらページ要素を操作できます。

インタラクティブなリストにより、要素を容易に選択しながら、ページを正確に把握できます。エレメントクイックビューを使用してページの要素を構成するには、次の手順を実行します。

  1. H2 .action-title要素「Call to Action!」を選択します。

  2. ドキュメントウィンドウの左下で</>アイコンをクリックし、エレメントクイックビューを開きます(図16を参照)。

  3. ヒント:Ctrl(またはCmd)+ /キーを押して、エレメントクイックビューを開くこともできます。

ドキュメントのHTML構造のサブ要素を選択
図16. ドキュメントのHTML構造のサブ要素を選択

ワークスペースを見てみると、ライブビューのエレメントディスプレイ、コードビュー、タグセレクター、およびエレメントクイックビューに、同じ要素が表示されているのがわかります。CSSデザイナーを開くと、同じクラスが選択されています。

どのような作業方法でも、要素の選択方法でも、Dreamweaverインターフェイスの他のすべての部分に、選択内容が表示されます。

  1. ライブビューで、H2要素を目的の場所にドラッグし、</>ツールヒントが表示されるまで保って、それをポイントします。

  2. エレメントクイックビューが開き、サイト要素の一覧が表示されます。緑色のライブガイドがPタグの下に表示されるまで、H2要素を下にドラッグします。マウスボタンを離します(図17を参照)。

緑色のライブガイドは、サイトの階層における要素の位置を示す
図17. 緑色のライブガイドは、サイトの階層における要素の位置を示す

  1. エレメントクイックビューで要素の名前を右クリックし、コンテキストメニューの「複製」を選択します(図18を参照)。
選択した要素を複製してコピーを作成
図18. 選択した要素を複製してコピーを作成

  1. 複製のH2をPタグの上にドラッグし、マウスボタンを離します。

  2. 下のH2テキストをダブルクリックして「Sign Up Now!」に変更します(図19を参照)。

     

テキスト要素を複製して内容を編集し、CSSスタイルを追加または編集
図19. テキスト要素を複製して内容を編集し、CSSスタイルを追加または編集

  1. エレメントクイックビューでdiv #tile7をもう一度クリックして、ページ構造のセクションを折りたたみます。

  2. Dreamweaver CC 2014の最新リリースでは、ライブビューのパフォーマンスが向上しました。要素をドラッグしてライブビュー画面を移動させると、ライブビューがスピーディで応答性に優れていることがわかります。また、エレメントクイックビュー内のアイテムをドラッグして、ページ構造の別の部分に移動することもできます。

  3. グリッドの左上にあるロゴの画像を選択します。</>をポイントしてエレメントクイックビューを開き、div #tile8をポイントしてからマウスボタンを離します。PLAYロゴの画像がページの左上から右下へ移動し、既存の背景画像を隠します(図20を参照)。
サブ要素をページの別のセクションに移動する
図20. サブ要素をページの別のセクションに移動する

以前のバージョンのDreamweaverでは、コードのブロックの再配置と移動は面倒な作業でしたが、今は違います。ライブガイドを使用して、HTML要素をエレメントクイックビューにドラッグ&ドロップしても、終了タグを見失ったりコンテンツを誤ってネストしたりする心配はいりません。エレメントクイックビューでは、アイテムがサイトの階層のどこに挿入されるかが正確にわかるので、推測に頼らずに要素を再配置できます。

新しいアセットをアセットパネルからページにドラッグする

デザイン要素をアセットパネルから直接ドラッグして、レイアウトに新しいアートワークを追加します。

  1. ウィンドウ/アセットを選択してアセットパネルを開きます。

  2. logo-new.jpgファイルを選択します。

  3. 画像のプレビューまたはlogo-new.jpgファイルの名前をライブビューの#tile1 divにドラッグします(図21を参照)。クイックエレメントビューには、画像がネストされていることが示されています。
ロゴ画像をページにドラッグ
図21. ロゴ画像をページにドラッグ

同じワークフローを使用して、アセットパネルの「メディア」セクションからメディア要素をドラッグできます。

注意:または、アセットパネル最下部の「挿入」ボタンをクリックして、選択したアセットを挿入します。この手法を使うと、前のセクションでご覧になったように、アセットをどこに挿入するかを「前」、「後」、「折り返し」、「ネスト」から選択できます(図22を参照)。

アセットパネル(または挿入パネル)の「挿入」ボタンをクリックし、目的の挿入オプションを選択
図22. アセットパネル(または挿入パネル)の「挿入」ボタンをクリックし、目的の挿入オプションを選択

画像属性のアップデート

Live PIでは、プロパティインスペクターを使用したり、コードビューでコードを編集したりせずに、挿入された画像の属性を変更できます。画像のソースの編集、タイトルやAltテキストの追加、リンクの追加をおこない、即座に変更を加えることで、SEOを向上させることができます。

  1. 左上のロゴのタイルをクリックします。属性ライブ表示に、画像ファイルが選択されていることが示されます。

  2. サンドイッチのアイコンをクリックして、Live PIを表示します(図23を参照)。
画像の属性にワンクリックでアクセス
図23. 画像の属性にワンクリックでアクセス

ヒント:画像のソースを更新するには、SRC属性の隣のフォルダーアイコンをクリックし、ファイルを選択します。 または、ソースパスを直接入力します。

  1. Title属性とAlt属性に「PLAY Logo」と入力します(図24を参照)。

選択した画像要素の属性を更新
図24. 選択した画像要素の属性を更新

ヒント:必要な場合、URLを入力してリンクを追加するか、フォルダーアイコンをクリックしてサイトの別のページを選択できます。「ターゲット」オプションを使用して、リンクされたドキュメントをどこに開くかを指定します。

  1. 更新されたロゴ画像をクリックし、Live PIを閉じます。

  2. Live PIでは、画像の幅と高さの値もリセットできます。この機能をCSSデザイナーおよびインスペクトモードと組み合わせると、デザインを調整しながら画像の寸法を容易に操作できます。

アセットパネルからカラーをコピー&ペーストする

  1. アセットパネルの「カラー」ボタンをクリックして、サイトのカラーの一覧を確認します。

  2. 一覧から白を選択します。右クリックして「カラー値をコピー」を選択します(図25を参照)。
アセットパネルからカラー値をコピー
図25. アセットパネルからカラー値をコピー


    

  1. タグセレクターで.gridクラスを選択します。

  2. CSSデザイナーの「背景」セクションで、background-colorのカラー値フィールドを右クリックして、「ペースト」を選択し、EnterキーまたはReturnキーを押して変更を適用します(図26を参照)。
白をペーストして背景色プロパティをリセット
図26. 白をペーストして背景色プロパティをリセット

ライブビューで.gridが更新され、白い背景色が表示されます(図27を参照)。

コピーしたカラー値をペーストし、要素の背景色を編集
図27. コピーしたカラー値をペーストし、要素の背景色を編集

  1. アセットパネルを閉じ、ファイル/すべて保存を選択します。

エレメントディスプレイを使用してページコンテンツを編集する

ライブビューでページ要素をクリックすると、選択項目に適用されるクラスとIDがエレメントディスプレイの「ヘッドアップ」ダイアログボックスに表示されます。エレメントディスプレイ機能を使用したレイアウト設定の変更は、ページを視覚的に更新するもう1つの方法です。

  1. 右上のヘッドフォンの画像をクリックします。divタグに、.tileというクラスと、#tile4という名前のIDが適用されていることがエレメントライブ表示に示されます。

  2. 下向き矢印を1回押して、(ヘッドフォンの下の)キーボードを含むタイルをクリックします。タイルにはすべて、.tileクラスが適用されています。

  3. ID #tile5をポイントし、「クラス/IDを削除」ボタンをクリックして削除します(図28を参照)。
セレクターをポイントし、Xアイコンのある「クラス/IDを削除」ボタンをクリック
図28. セレクターをポイントし、Xアイコンのある「クラス/IDを削除」ボタンをクリック

IDが削除され、キーボードの画像がレイアウトに表示されなくなります。

ヒント:または、要素を右クリックしてライブビューのコンテキストメニューを開き、「カット」を選択することもできます(図29を参照)。

「カット」を選択してページからdiv要素を削除
図29. 「カット」を選択してページからdiv要素を削除

  1. ページの任意の場所を右クリックして、コンテキストメニューの「インスペクト」を選択します。ヘッドフォンをポイントし、ツールチップに#tile4 divタグの寸法(270px x 270px)が表示されるのを確認します。ヘッドフォンをクリックして、インスペクトモードを終了します。

  2. CSSデザイナーの「レイアウト」セクションで、Heightの値を560pxに更新して、#tile4 divの高さを2倍にし、余白を20ピクセル追加します(図30を参照)。
#tile4の高さが増え、背景画像がタイル状に並べられる
図30. #tile4の高さが増え、背景画像がタイル状に並べられる

  1. プロパティパネルの「背景」セクションで、URLを1回クリックして選択し、右側のフォルダーアイコンをクリックします。サンプルファイルのimagesフォルダーでtile4-new.jpgという名前のファイルを参照して選択するか、直接フィールドに「type tile4-new.jpg」と入力します(図31を参照)。
新しい画像にリンクするよう背景画像のURLを更新
図31. 新しい画像にリンクするよう背景画像のURLを更新

クイックタグエディターを使用してライブビューでコードを更新する

クイックタグエディターを使用すると、ライブビューを離れることなく、ソースコードにアクセスできます。3種類の編集モードでHTMLタグを更新します。

  1. ページ右下にある#tile8のロゴ画像をクリックします。

  2. Ctrl(またはCmd)+Tキーを押してクイックタグエディターを開くと、「タグの編集」モードが表示されます。img srcタグで、logo.jpgという画像を選択し、更新します。「tile8.jpg」と入力し、EnterキーまたはReturnキーを押すと、新しい画像が表示されます(図32を参照)。
ライブビューで作業をしながらHTMLタグの属性を更新
図32. ライブビューで作業をしながらHTMLタグの属性を更新

既存のHTML要素の周りで新しいタグを折り返す

  1. 左上にある#tile1のロゴ画像を選択します。

  2. Ctrl(またはCmd)+ Tキーを1回押してクイックタグエディターを開きます。Ctrl(またはCmd)+ Tキーをもう1回押すと、「折り返しタグ」モードに切り替わります。

  3. ヒント:Ctrl(またはCmd)+ Tキーを繰り返し押すことで、3種類の編集モードが順番に切り替わります。

  4. 「hr」と入力してEnterキーまたはReturnキーを押し、リストからhrefを選択します。コードに<a href="">タグが自動入力されます(図33を参照)。
クイックタグエディターでHTMLコードを追加・編集
図33. クイックタグエディターでHTMLコードを追加・編集

  1. 引用符の間に「http://www.adobe.com」と入力してリンクを追加し、EnterキーまたはReturnキーを押します。

  2. ページの任意の場所をクリックして、ファイル/すべて保存を選択します。

  3. クイックタグエディターは、コードビューに切り替えずにHTMLコードを変更したい場合に便利です。「タグを編集」、「折り返しタグ」、「HTMLの挿入」という3種類の編集モードがあるので、更新や折り返し、新しいHTMLコンテンツのページへの追加を簡単におこなえます。

  4. ライブビューで完成したページデザインを確認します(図34を参照)。
Dreamweaverでレンダリングした完成版のサンプルプロジェクトを確認
図34. Dreamweaverでレンダリングした完成版のサンプルプロジェクトを確認

Chromeでレンダリングしたページとライブビューを比較して、レイアウトが正確に一致していることを確認します(図35を参照)。

ブラウザーでページをプレビューして、完成したレイアウトを確認
図35. ブラウザーでページをプレビューして、完成したレイアウトを確認

Dreamweaverに戻ったら、コードビューに切り替えます。Dreamweaverにより、最新のWeb標準に従ったクリーンなHTMLコードとCSSスタイルが生成されたことがわかります。

次のステップ

新しいライブビューのワークフローを調べて、新しいツールが制作プロセスをスピーディにしていることを確認します。要素やアセットをページにドラッグしたり、エレメントクイックビューでページ要素を再構築したり、エレメントライブ表示で新しいセレクターを追加したり、CSSデザイナーで新しいプロパティを定義してみてください。

このサンプルプロジェクトが開発された方法については、HTML5とCSSをすばやくコーディングを参照してください。

また、「Dreamweaver CSSデザイナーでWebページのスタイルを設定を参照すると、CSSデザイナーとライブビューを操作する新しい方法を発見できます。

また、Dreamweaverラーニングページには、Dreamweaver CCの新機能を使用して作業をすぐに開始できるように、各種記事、ビデオチュートリアル、サンプルプロジェクトが用意されています。

tommi-west_83x83

Tommi West

Tommi Westは、フリーランスのWebデザイナーとして活動するかたわら、tommiland.comでクリエイティブディレクターを務めています。2004年に起業する前は、6年間にわたりテクニカルライター兼エディター兼WebプロデューサーとしてMacromediaで働いていました。アドビコミュニティプロフェッショナルの認定を受けています。