Dreamweaver CS5.5でワークフローはどう変わるのか?
-
Upload
swwwitch-inc -
Category
Design
-
view
2.582 -
download
0
description
Transcript of Dreamweaver CS5.5でワークフローはどう変わるのか?
![Page 1: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/1.jpg)
鷹野雅弘(スイッチ)
Dreamweaver CS5.5でワークフローはどう変わるのか?
![Page 2: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/2.jpg)
4 8 CS4CS3 CS5MX CS5.5
![Page 3: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/3.jpg)
CS5 CS5.5
えっ?お金取るの?
![Page 4: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/4.jpg)
![Page 5: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/5.jpg)
![Page 6: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/6.jpg)
Web Premium(retail)
Web Premium(upgrade)
$1,799150,181円
$39933,309円
1ドル=83.48円
![Page 7: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/7.jpg)
Web Premium(retail)
Web Premium(upgrade)
$1,799150,181円
$39933,309円
236,250円157%
58,800円177%
![Page 8: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/8.jpg)
お金を払うアップグレードに値するのか?
![Page 9: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/9.jpg)
トレンド HTML5 CSS3 マルチデバイス対応(スマホ、タブレット)
![Page 10: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/10.jpg)
HTML5
![Page 11: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/11.jpg)
HTML5 Packβ → 11.0.3
![Page 12: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/12.jpg)
HTML5 PackHTML5タグのサポートCSS3コードヒント
![Page 13: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/13.jpg)
HTML5 Pack
CSS3ドラえもん(精度向上)video/audio対応
画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html
ライブビューの強化
![Page 14: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/14.jpg)
HTML5 PackHTML5タグのサポートCSS3コードヒントライブビューの強化
CSS3ドラえもん(精度向上)video/audio対応
ビューポートの設定メディアクエリーのコード挿入!
マルチスクリーン対応
![Page 15: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/15.jpg)
バリデート
![Page 16: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/16.jpg)
DWCS4まで Dreamweaverのバリデート機能 Firefoxでブラウザプレビューして、 Web Developer経由で W3Cバリデーター DWCS5 なし 拡張機能 (Validator for Dreamweaver CS5)
DWCS5.5 W3Cバリデート
![Page 17: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/17.jpg)
CSS入力・編集
![Page 18: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/18.jpg)
CSS入力 編集(修正)
![Page 19: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/19.jpg)
入力
コードビュー[CSSルール定義]ダイアログボックス[CSSスタイル]パネル
![Page 20: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/20.jpg)
![Page 21: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/21.jpg)
![Page 22: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/22.jpg)
編集(修正)
コードビュー[CSSルール定義]ダイアログボックス[CSSスタイル]パネルコードナビゲーターCSSインスペクト
![Page 23: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/23.jpg)
確認作業
![Page 24: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/24.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
![Page 25: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/25.jpg)
![Page 26: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/26.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
!
![Page 27: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/27.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
![Page 28: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/28.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
o!⁄CS4
![Page 29: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/29.jpg)
![Page 30: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/30.jpg)
![Page 31: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/31.jpg)
Dreamweaverのライブビューのアップデートにより、border-radius、text-shadowにはベンダープリフィックスは不要(ただし、Firefox 3.6のサポートをはずせば/IE9のtext-shadowを除く)。
Safari 5対応のため、box-shadowにはベンダープリフィックスが必要。
![Page 32: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/32.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
CS5
![Page 33: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/33.jpg)
DwCS5βローカルコンテンツのプレビューに対応
![Page 34: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/34.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
a+s+
![Page 35: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/35.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
![Page 36: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/36.jpg)
![Page 37: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/37.jpg)
![Page 38: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/38.jpg)
主要ブラウザMac/Windows各バージョン
![Page 39: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/39.jpg)
![Page 40: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/40.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー
![Page 41: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/41.jpg)
![Page 42: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/42.jpg)
タブレット
デスクトップ
スマートフォン
![Page 43: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/43.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー{デザインビュー/ライブビュー}+ウィンドウサイズの固定
![Page 44: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/44.jpg)
![Page 45: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/45.jpg)
![Page 46: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/46.jpg)
![Page 47: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/47.jpg)
![Page 48: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/48.jpg)
デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー{デザインビュー/ライブビュー}+ウィンドウサイズの固定
![Page 49: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/49.jpg)
[A]デザインビューで作業し、 ブラウザプレビューで確認
[B]デザインビューで作業し、ライブビューで確認 (たまにブラウザプレビューで確認)
[C]ライブビューを開きながら、コードビューで作業 (たまにブラウザプレビューで確認)
cf. デザインタイムスタイルシート
![Page 50: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/50.jpg)
[A]デザインビューで作業し、 ブラウザプレビューで確認
[B]デザインビューで作業し、ライブビューで確認 (たまにブラウザプレビューで確認)
[C]ライブビューを開きながら、コードビューで作業 (たまにブラウザプレビューで確認)
関連ファイル
![Page 51: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/51.jpg)
マルチデバイス対応
![Page 52: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/52.jpg)
![Page 53: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/53.jpg)
ウィンドウサイズを変更すると、レイアウト(デザイン)も変更
![Page 54: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/54.jpg)
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
メディア・クエリー
![Page 55: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/55.jpg)
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
メディア・クエリー
![Page 56: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/56.jpg)
320 910
iphone.css tablet.css desktop.css
レスポンシブ・デザイン
![Page 57: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/57.jpg)
![Page 58: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/58.jpg)
![Page 59: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/59.jpg)
![Page 60: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/60.jpg)
Dreamweaver CS5.5での強化ポイント
![Page 61: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/61.jpg)
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
iphone.css tablet.css desktop.css
![Page 62: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/62.jpg)
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
iphone.css tablet.css desktop.css
![Page 63: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/63.jpg)
iphone.css tablet.css desktop.css
![Page 64: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/64.jpg)
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
@import url("phone.css") only screen and (max-width:480px);@import url("tablet.css") only screen and (min-width:481px) and (max-width:768px);@import url("desktop.css") only screen and (min-width:769px);
![Page 65: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/65.jpg)
![Page 66: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/66.jpg)
![Page 67: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/67.jpg)
![Page 68: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/68.jpg)
![Page 69: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/69.jpg)
![Page 70: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/70.jpg)
![Page 71: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/71.jpg)
<meta name="viewport" content="width=device-width">
![Page 72: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/72.jpg)
まとめ
![Page 73: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/73.jpg)
スマートフォン対応 HTML5+CSS3 {デザインビュー/ライブビュー} +ウィンドウサイズの固定 メディアクエリー挿入機能
(5.5からサイト対応) jQuery Mobile PhoneGap
![Page 74: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/74.jpg)
![Page 75: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/75.jpg)
2011年8月
![Page 76: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/76.jpg)
http://www.facebook.com/DreamweaverCS5.5Book
![Page 77: Dreamweaver CS5.5でワークフローはどう変わるのか?](https://reader034.fdocument.pub/reader034/viewer/2022051015/554a7108b4c90573288b4e4e/html5/thumbnails/77.jpg)
twitter: @[email protected]