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 & Fireworksで 時間短縮テクニック [m-schoolセミナー]

4,813 views

Published on

m-school さんで行われた「reamweaver & Fireworksで時間短縮テクニック 無料セミナー」のスライドです。★後日、フォローアップページを公開予定

[ UST録画 ]
http://www.ustream.tv/recorded/33431533

Published in: Education
  • Be the first to comment

Dreamweaver & Fireworksで 時間短縮テクニック [m-schoolセミナー]

  1. 1. 時間短縮テクニックr360studio 森和恵
  2. 2. 日々のサイト更新の操作手順を見直しソフトを使って、作業を楽にするDreamweaverとFireworksの組み合わせがおススメLecture
  3. 3. 本日の講座内容• Dreamweaverの時短テクニック– サイト作成と 環境設定– コードビュー・ライブビュー– ライブラリ・テンプレート• Fireworksの時短テクニック– スゥオッチ・スタイル・シンボル– マスク– ページ冒頭挨拶
  4. 4. AdobeDreamweaverについて
  5. 5. Dreamweaverは、Webページをレイアウトしたりサイトデータを管理するソフト
  6. 6. Dreamweaverは、ページ作りとファイル・データの管理ができる各種パネルでデータ管理コード入力デザイン表示
  7. 7. Dreamweaverで時間短縮とは?「機能を把握して正しく使う」ことコーディングやプレビューで作業を手助け共通コードの一元管理やファイル管理もLecture
  8. 8. Lecture3Dreamweaverを使う前に…「サイト作成」ファイル管理のためにサイトを作る
  9. 9. Lecture3ローカルフォルダの指定データの保存先フォルダを指定する[サイト]-[新規サイト]メニュー
  10. 10. Lecture3Webサーバーの指定アップロード先のWebサーバーを指定する[サイト]-[新規サイト]メニュー
  11. 11. Lecture3ファイルパネルでファイル管理• ローカル・サーバーのファイル管理• ファイル間のリンク情報• アップロード・同期
  12. 12. Lecture3Dreamweaverを使う前に…「環境設定」使いやすいようカスタマイズ
  13. 13. Lecture3ブラウザでプレビュー[編集]-[環境設定]メニュー
  14. 14. Lecture3フォント[編集]-[環境設定]メニュー
  15. 15. Lecture3サイト[編集]-[環境設定]メニュー
  16. 16. Lecture3コードフォーマット・CSSスタイルシート[編集]-[環境設定]メニュー
  17. 17. Lecture3コード入力を助ける「コードヒント・クイックタグ編集」「ライブビュー・ライブコード」
  18. 18. Lecture3コードヒント [ctrl]+スペースコード入力を補助HTML(5)・CSS(3)・JQueryに対応
  19. 19. デザインビューのままでタグを入力クイックタグ編集 [ctrl]+[t]タグセレクタ
  20. 20. Lecture3ライブビューとライブコードドキュメントをブラウザ(Webkit)表示にJavascript実行時のコードを確認
  21. 21. Lecture3共通部分を一括管理「ページデザイン管理:テンプレート」「コンテンツ管理:ライブラリ」
  22. 22. テンプレートページのひな形を登録。テンプレートファイルを元に一括更新も可能
  23. 23. • テンプレートを作成[ファイル]-[テンプレートとして保存]• 編集可能領域を作成[挿入]-[テンプレートオブジェクト]- [編集可能領域]• テンプレートファイル(*.dwt)保存で、ファイルを一括更新
  24. 24. ライブラリページで共通のコンテンツを部分的に登録、管理
  25. 25. AdobeFireworksについて
  26. 26. Fireworksは、Webサイト制作で必要な画像を作るのに特化したソフト
  27. 27. Fireworksは、オブジェクトを選択し、直感的に操作ができるプロパティインスペクタ―オブジェクト単位で独立
  28. 28. ビットマップとベクター(パス)を操作できる
  29. 29. Web用グラフィック作成に特化している• JPEG/GIF• PNG4アッププレビューで見比べながら
  30. 30. ビットマップ(Photoshop)とパス(Illustrator)操作がよい具合に混在する軽快なソフト2?80,500 83,160 37,177※参考価格は本日のAmazon調べ
  31. 31. AdobeCreativeSuiteについてるDesign & Web Premiumなら、Fireworksもインストール済みPhotoshopやIllustratorとのコラボも!
  32. 32. AdobeCreativeCuloudにもついてる6月18日にリリースされるCC版にもFireworksCS6は継続提供されます
  33. 33. Fireworksで時間短縮とは?「データの再利用」をすること面倒でも、登録/管理するLecture
  34. 34. 使用色管理は…「スオッチ」パネル色を選択で表示されるパネルにオリジナル色を登録Lecture3
  35. 35. テーマカラーをスオッチに登録• スポイトツールで選択した色をスオッチパネルに登録• スオッチを保存し→追加読込でチームでカラー共有Lecture3
  36. 36. デザイン管理は…「スタイル」パネル前に作ったデザインをすぐ使いたい同じデザインを一気に変更Lecture5
  37. 37. 作ったパーツをスタイルで登録/管理• オブジェクトを選択し、新規スタイルで登録• オブジェクトを選択し、登録スタイルをクリックで適応• 登録後の変更を反映するには スタイルを再定義Lecture5
  38. 38. 素材管理は…「シンボル」パネルよく使うパーツを登録して使いまわす同じパーツを一気に変更Lecture5
  39. 39. 作ったパーツをシンボル登録し、管理• オブジェクトを選択し、[変更-シンボル-シンボルに変換]で登録• シンボルパネルからドラッグで追加• 登録したシンボルをダブルクリックで編集→一括更新Lecture5
  40. 40. 非破壊編集には…「マスク」としてグループ化写真などの切り抜き作業では、元を壊さずマスクするLecture4
  41. 41. 作ったパーツをシンボル登録し、管理• オブジェクトを選択し、[変更→マスク→マスクとしてグループ化]• 元に戻すには、[変更→グループ解除]• マスク用オブジェクトは、白色でグレーは半透明で切り抜きLecture4
  42. 42. ページ管理は…「ページ」パネルモックアップの作成は、ページパネルでLecture5
  43. 43. マスターを元にページ作成/管理Lecture5
  44. 44. ホットスポットでリンクを指定Lecture5書き出したPDFにリンクが設定される
  45. 45. 二つのソフトの連携Lecture5
  46. 46. Lecture5DreamweaverからFireworksを連携で呼び出す
  47. 47. 時短をするには最初が肝心!• DreamweaverやFireworksには、さまざまなデータ管理の機能がある• 機能を理解し、データを量産する前段階で使っておくことが大切• 準備したファイルを使うことで、他の人に作業を依頼しやすくなる!まとめ
  48. 48. r360studio 森和恵 活動予定メールマガジンに寄稿 セミナー情報は、r360studyで発信
  49. 49. Fireworksの教科書よくわかるhttps://www.facebook.com/FireworksBook/Fireworksの教科書情報発信中
  50. 50. ご清聴ありがとうございました本日のスライドは後日公開予定ですフォローアップメールでお知らせします

×