m-school さんで行われた「reamweaver & Fireworksで時間短縮テクニック 無料セミナー」のスライドです。★後日、フォローアップページを公開予定 [ UST録画 ] http://www.ustream.tv/recorded/33431533

1. 時間短縮テクニック
r360studio 森和恵

3. 日々のサイト更新の操作手順を見直し
ソフトを使って、作業を楽にする
DreamweaverとFireworksの組み合わせがおススメ
Lecture

4. 本日の講座内容
• Dreamweaverの時短テクニック
– サイト作成と 環境設定
– コードビュー・ライブビュー
– ライブラリ・テンプレート
• Fireworksの時短テクニック
– スゥオッチ・スタイル・シンボル
– マスク
– ページ
冒頭
挨拶

5. AdobeDreamweaverについて

6. Dreamweaverは、
Webページをレイアウトしたり
サイトデータを管理するソフト

7. Dreamweaverは、ページ作りと
ファイル・データの管理ができる
各種パネルでデータ管理
コード入力
デザイン表示

8. Dreamweaverで時間短縮とは？
「機能を把握して正しく使う」こと
コーディングやプレビューで作業を手助け
共通コードの一元管理やファイル管理も
Lecture

9. Lecture3
Dreamweaverを使う前に…
「サイト作成」
ファイル管理のためにサイトを作る

10. Lecture3
ローカルフォルダの指定
データの保存先フォルダを指定する
[サイト]-[新規サイト]メニュー

11. Lecture3
Webサーバーの指定
アップロード先のWebサーバーを指定する
[サイト]-[新規サイト]メニュー

12. Lecture3
ファイルパネルでファイル管理
• ローカル・サーバーのファイル管理
• ファイル間のリンク情報
• アップロード・同期

13. Lecture3
Dreamweaverを使う前に…
「環境設定」
使いやすいようカスタマイズ

14. Lecture3
ブラウザでプレビュー
[編集]-[環境設定]メニュー

15. Lecture3
フォント
[編集]-[環境設定]メニュー

16. Lecture3
サイト
[編集]-[環境設定]メニュー

17. Lecture3
コードフォーマット・CSSスタイルシート
[編集]-[環境設定]メニュー

18. Lecture3
コード入力を助ける
「コードヒント・クイックタグ編集」
「ライブビュー・ライブコード」

19. Lecture3
コードヒント [ctrl]＋スペース
コード入力を補助
HTML(5)・CSS(3)・JQueryに対応

20. デザインビューのままでタグを入力
クイックタグ編集 [ctrl]＋[t]
タグセレクタ

21. Lecture3
ライブビューとライブコード
ドキュメントをブラウザ(Webkit)表示に
Javascript実行時のコードを確認

22. Lecture3
共通部分を一括管理
「ページデザイン管理：テンプレート」
「コンテンツ管理：ライブラリ」

23. テンプレート
ページのひな形を登録。テンプレートファ
イルを元に一括更新も可能

24. • テンプレートを作成
[ファイル]-[テンプレートとして保存]
• 編集可能領域を作成
[挿入]-[テンプレートオブジェクト]- [編集
可能領域]
• テンプレートファイル(*.dwt)保存で、
ファイルを一括更新

25. ライブラリ
ページで共通のコンテンツを
部分的に登録、管理

26. AdobeFireworksについて

27. Fireworksは、
Webサイト制作で必要な画像
を作るのに特化したソフト

28. Fireworksは、
オブジェクトを選択し、
直感的に操作ができる
プロパティインスペクタ―
オブジェクト単位で独立

29. ビットマップとベクター（パス）を操作できる

30. Web用グラフィック
作成に特化している
• JPEG／GIF
• PNG
4アッププレビューで見比べながら

31. ビットマップ(Photoshop)とパス(Illustrator)
操作がよい具合に混在する軽快なソフト
2?
80,500 83,160 37,177
※参考価格は本日のAmazon調べ

32. AdobeCreativeSuiteについてる
Design & Web Premiumなら、
Fireworksもインストール済み
PhotoshopやIllustratorとのコラボも！

33. AdobeCreativeCuloudにもついてる
6月18日にリリースされるCC版にも
FireworksCS6は継続提供されます

34. Fireworksで時間短縮とは？
「データの再利用」をすること
面倒でも、登録／管理する
Lecture

35. 使用色管理は…
「スオッチ」パネル
色を選択で表示されるパネルに
オリジナル色を登録
Lecture3

36. テーマカラーをスオッチに登録
• スポイトツールで選択した色を
スオッチパネルに登録
• スオッチを保存し
→追加読込で
チームでカラー共有
Lecture3

37. デザイン管理は…
「スタイル」パネル
前に作ったデザインをすぐ使いたい
同じデザインを一気に変更
Lecture5

38. 作ったパーツをスタイルで登録/管理
• オブジェクトを選択し、
新規スタイルで登録
• オブジェクトを選択し、
登録スタイルを
クリックで適応
• 登録後の変更を
反映するには スタイルを再定義
Lecture5

39. 素材管理は…
「シンボル」パネル
よく使うパーツを登録して使いまわす
同じパーツを一気に変更
Lecture5

40. 作ったパーツをシンボル登録し、管理
• オブジェクトを選択し、
［変更-シンボル-シンボルに変換］で登録
• シンボルパネルからドラッグで追加
• 登録したシンボルをダブルクリックで
編集→一括更新
Lecture5

41. 非破壊編集には…
「マスク」としてグループ化
写真などの切り抜き作業では、
元を壊さずマスクする
Lecture4

42. 作ったパーツをシンボル登録し、管理
• オブジェクトを選択し、
［変更→マスク→マスクとしてグループ化］
• 元に戻すには、［変更→グループ解除］
• マスク用オブジェクトは、白色で
グレーは半透明で切り抜き
Lecture4

43. ページ管理は…
「ページ」パネル
モックアップの作成は、
ページパネルで
Lecture5

44. マスターを元にページ作成/管理
Lecture5

45. ホットスポットでリンクを指定
Lecture5
書き出したPDFに
リンクが設定される

46. 二つのソフトの連携
Lecture5

47. Lecture5
Dreamweaverから
Fireworksを
連携で呼び出す

48. 時短をするには最初が肝心！
• DreamweaverやFireworksには、
さまざまなデータ管理の機能がある
• 機能を理解し、データを量産する
前段階で使っておくことが大切
• 準備したファイルを使うことで、
他の人に作業を依頼しやすくなる！
まとめ

49. r360studio 森和恵 活動予定
メールマガジンに寄稿 セミナー
情報は、r360studyで発信

50. Fireworksの教科書
よくわかる
https://www.facebook.com/
FireworksBook/
Fireworksの教科書
情報発信中

51. ご清聴ありがとうございました
本日のスライドは後日公開予定です
フォローアップメールでお知らせします