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

1,647 views

Published on

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

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

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,647
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

コード嫌いのための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 森和恵 ご清聴ありがとうございました

×