Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

コード嫌いのためのDreamweaver デザインビューの極意

1,887 views

Published on

セッション3  『コード嫌いのためのDreamweaver デザインビューの極意』

▼エディター ガチンコバトル勉強会 in 大阪
http://r360studio.com/gachinko/editorgachinko2/

Published in: Education
  • Be the first to comment

コード嫌いのためのDreamweaver デザインビューの極意

  1. 1. コード嫌いのための Dreamweaver デザインビューの極意 r360studio 森和恵
  2. 2. @r360studio 森和恵 • Web系のセミナー講師(iMedio) • 書籍執筆「よくわかるFireworksの教科書」など • 勉強会の主催「ガチンコバトル勉強会 in 大阪」
  3. 3. 会場のみなさんに質問です
  4. 4. Dreamweaver インストールされてますか?
  5. 5. Dreamweaver 使ったことありますか?
  6. 6. Dreamweaver デザインビュー派ですか?
  7. 7. コードビューはコレ
  8. 8. デザインビューはコレ
  9. 9. Dreamweaver デザインビュー 楽なのがイイ • 操作の時間はかかるけど、見ためわかりやすいで • サイズ計算とかビジュアルで確認できるし • よその人のコードも楽々調べられるで • プロっぽい操作に見えないけど…
  10. 10. デザインビュー派の使い方、お見せします
  11. 11. 本日の内容 • ファイル管理のためのサイト設定 • コンテンツをコピペする • CSSデザイナーパネルを使いこなす • コードを確認するツールたち • 仮であたりを取って、画像を作る • レスポンシブWebデザインの@media指定
  12. 12. ファイル管理のためのサイト設定 • 最初にかならず、サイト設定をする • ファイルパネルでファイル管理するため • ローカル(保存先)とサーバ(FTP)情報を設定
  13. 13. [サイト]→[サイト管理]
  14. 14. ファイルパネルでファイル管理
  15. 15. コンテンツをコピペする • ブラウザ経由でサイトから • Dwをエディターに(txt) • Word や Excel から(互換ソフトでもOK) • [編集]→[ペーストスペシャル]で 書式選択も
  16. 16. ローカル→etcフォルダ に素材や原稿を準備 ファイルパネルで開き コピーする 拡張子→エディター 指定は環境設定で
  17. 17. コードをクリーン化 • [コマンド]→[HTMLのクリーンアップ] • Office経由の不用コードは [コマンド]→[WordHTMLのクリーンアップ] • コードレイアウトは、 [コマンド]→[ソースフォーマットの適用] • [編集]→[検索/置換]
  18. 18. [編集]→[検索/置換] <td valign="top"><p align="left">18:30</p></td>
  19. 19. CSSデザイナーパネル CSSをパネルで、視覚的にCSSをコーデング • ソース • @madia • セレクター • プロパティ
  20. 20. CSSデザイナーパネル 1 2 3
  21. 21. ライブビュー+CSSデザイナーパネルは、CSS3に対応
  22. 22. コードを確認するツールたち • タグセレクター • ライブビュー&インスペクター • CSSデザイナーパネルの「計算済み」 • デザインビュー&ビジュアルエイド
  23. 23. ライブビュー & CSSデザイナーパネルで確認 ライブビューで調べたい箇所クリック 「計算済み」セレクターが優先順位で並ぶ
  24. 24. 複数のセレクターが適用する場合に優先順位や継承を確認
  25. 25. [編集]→[Div] で選択範囲をCSSレイアウト
  26. 26. Divをデザインビュー + ビジュアルエイドで確認
  27. 27. Divをライブビュー +インスペクトで確認
  28. 28. 仮画像であたりを取ってから作る • デザインビューは、外部ファイルを展開表示 • 仮の画像を「http://placehold.jp/」で指定 • Photoshop連携で、本番画像を作る
  29. 29. まず、インスペクトでサイズを調べる
  30. 30. 仮画像を配置(Placehold.jpで作成) ※クイックタグ編集 [Ctrl]+[T]
  31. 31. ダブルクリックで本番画像と差し替え PSDファイルを直接指定し、Photoshop連携に
  32. 32. レスポンシブWebデザインの@media指定 • 画面のサイズに応じてCSSスタイルを指定 (フルHD 1920×1080px ピクセル密度 3 で 360×640) • @media screen and ( 条件) { }内にセレクターを記述 (今回の条件は、max-width:360px) • スマホ対応するには、 viewport指定を忘れずに <meta name="viewport" content="width=device-width">
  33. 33. CSSデザイナーパネルの[@Media]に条件指定
  34. 34. @mediaの記述例
  35. 35. 本日のまとめ • ファイル管理のための、サイト設定 • コンテンツのコピペとクリーン化 • CSSデザイナーパネル • タグセレクター、ライブビュー、インスペクター • 仮画像であたりを取ってから作る • レスポンシブWebデザインの@media指定
  36. 36. r360studio 森和恵 ご清聴ありがとうございました

×