Dreamweaver CC 2015のアップデート

PhotoshopデータからExtractで情報を取り出す

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Extractパネルを使うと、Photoshopの中のデータやその情報をHTMLドキュメントに簡単に取り入れることができます。
講師:
06:17

字幕

このレッスンではExtractパネルを使った Photoshopからのデータの取り出しについて 説明します 今DreamweaverCC2015では 真っ白なドキュメントを開いています ここにPhotoshopからデータを取りだして 埋めて行きたいと思います まず画面のレイアウトですけど Extractパネルの使う場合には ワークスペースのレイアウトを Extractしておくと使いやすいでしょう Extractを選択します そうすると左にExtractパネルの領域が 開きました まず画像をCreative Cloudのほうに アップロードしなければいないのですが PSDアップロードというこの+のボタンを クリックします そうするとアップロードすべきファイルが どこにあるのかと訊いてきますので 私はこのimagesの中にPhotoshopのデータを 入れておきました これを選択して開きます そうするとアップロードが開始されて サムネイルが表示されます これを開いてみましょう 開く時にはこのサムネイルをクリックします 場合によってちょっと開くまで 時間がかかることもあります 今回は簡単に開きましたね ではこのタイトルを HTMLドキュメントの中に 持って行きたいと思うのですが 挿入をしましょう そして見出しなので 見出しのH1にしましょう まずはダミーのテキストが入ります これは消してしまいましょう ダブルクリックをして選択をして削除です そうしたらこの文字は 簡単に打ち直せばいいのですが テキストがコピーできますということを 示すために「テキストをコピー」を選択します そしてこの中ダブルクリックして ペーストをすれば まずは文字が持ってこられます 今度はスタイルを持ってきたいです 「CSSをコピー」というのがあります これをコピーしたいと思うのですが そのためにクラスを設定しましょう 「クラスIDを追加」というところで クラスはメインタイトルと 「ページで定義」で 「メディアクエリーを選択」 これはこのままでいいでしょう 外側をクリックするとセレクターが入りました ここにコピーすればいいわけです ですから「CSSをコピー」を選択し こちらのHTMLドキュメントの方に ペーストすればOKです 直ちに反映されました ではちょっとコードを閉じてしまって 出力も邪魔なのでダブルクリックで消します この画像を持ってきたいと思います 何種類か方法はあるのですが 一番簡単なのはドラッグして 持ってきてしまって結構です その前にライブビューにしておきましょう 見えるようにライブビューにして ドラッグして持って行きます 何処に持って行くんですかということで この緑の線が持って行く場所を示しています もしブルーのうっすらとアウトラインがかかる この場合にはH1要素の中に 入ってしまいますので 今回は適切ではありません この文字のH1要素の下に 持って行きたいと思います マウスボタンを放します そうするとコピーを作ってくれるのですが このコピーがこのような名前になっています Enterキーで確定しましょう 画セットを抽出しているということで 画像が入りました 後はこの画像をいろいろ構成 レイアウトしていけばいいです 画像の抽出について もう1つ説明を加えておきます 画像を選んだ時に下向きのボタン これは「アセットを中止」というボタンですが ダウンロードをクリックします そうすると画像のまず形式が得られます dmgでいいでしょう そして保存先なのですが これは適切な場所が 既に選ばれていると思います 大丈夫ですね このサイトの中に保存したいと思います そして複数保存 画像は1個ですが複数とは何でしょう? やってみれば分かりますので 複数保存を選択します そうすると抽出していますよという メッセージが出ましたけど うまく行けば成功しましたとー 出ましたね ダウンロードができました ではちょっとフォルダを見てみましょう こちらがフォルダの中身です 始めはこのサンプルのHTMLドキュメントと Photoshopのデータが入っているimagesしか 無かったのですが Photoというのが加わっていますね これはドラッグ&ドロップで Extractパネルから持ってきたデータです 同じ階層に入っています そしてフォルダが3つ増えています これ3つとも中身としては 同じ画像が入っています けれどもー こちらで見ましょうか 1xとあります サイズが512x341 次にこちらですね 2xがついている方ですが 1024x682 3xのついている方は これを見てみると 1536x1023 想像がつくかと思うのですが 通常のサイズの場合と リピータとか解像度の高いものを使いたい場合 それに備えて1つの画像を異なった解像度で 書き出しをしてくれるという機能です ですから先ほどのイメージの挿図の方に それぞれ対応したデータを指定してあげれば それぞれの解像度の画像が使えるということに なります このレッスンではExtractパネルを使って Photoshopの画像を開き そのテキストあるいはテキストの情報 画像 それを様々な解像度に変えて保存する そういった機能についてご説明をしました

Dreamweaver CC 2015のアップデート

2015年6月のアップデートでDremaweaverにも新しい機能やパネル、インターフェイスが加わりました。このコースではBootstrapフレームワークやビジュアルメディアクエリーの導入、新しくなったCSSデザイナパネルとDOMパネル、コード入力を効率化したり構文チェックを行うツールなど主な新機能を解説します。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月27日
アップデート日:2015年11月30日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。