カテゴリー別アーカイブ: テクニック(Dreamweaver)

[Dreamweaver]プロパティがない?!

皆様、中秋の名月は楽しめましたでしょうか?

私は一日遅れで昨夜の月を楽しみました。気温もよくて、ゆっくり眺めることができました。

すごく綺麗でしたね。スタッフ「ほ」です。

さて、前回に続き、2回連続でのDreamweaverネタになります。

DreamweaverがCC2015になってからのネタをぜんぜん投稿していないことに気がつきました…

というわけで…CC2015ネタでいこうと思います。

掲題の「プロパティがない?!」ですが、Dreamweaver使いの方なら
おなじみすぎる画面下部のプロパティインスペクタ。

これが、cc2015を起動した時点で見当たりません……!?!

CCになってから、いろいろとチャレンジしているDreamweaver。

今回も思い切ったことをしましたね……

ただ、ビギナーの方が戸惑ってしまう原因になるかもしれません。

Dreamweaverを起動して、プロパティインスペクタが見当たらない場合、2つの方法で対処できます。

◇ 対処その1

「ウインドウ」メニューから「プロパティ」をクリックすることで表示することができます。

クリックすると、画面上部にパネルが開きますので…

ドラッグで画面下部まで持っていき、下のスクリーンショットでわかるでしょうか?
画面下部に水色のラインが出たところでマウスを放すと…

プロパティインスペクタが画面下部に固定されます。

◇ 対処その2

もうひとつの方法は、ワークスペースを変更する方法です。

「ウインドウメニュー」→「ワークスペースのレイアウト」をポイントすると、最初は「デフォルト」という項目が選択されているはずです。

この項目を「初心者」に切り替えます。

この指定で、いつもの見慣れた状態になると思います。

今回から、ファイルパネルとCSSデザイナーパネルが同じグループになっています。

これはこれで、個人的には使いやすくなったという印象ですが、これをバラしたい場合は、「CSSデザイナー」のタブをドラッグ&ドロップすると、パネルを切り離すことができます。

切り離したタブを挿入したい位置にドラッグ&ドロップすることで、別パネルとしてパネルグループに追加できます。

CC2015の導入で、戸惑った方は今回の記事が参考になれば幸いです。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]タブを切り替えるショートカット

むむむ…いつの間にか秋になっておりました……

1か月以上も更新サボっておりました。すみません…

スタッフ「ほ」です。

今日は授業でいただいたご質問を皆様にもシェア。

Dreamweaverで複数のファイルを開いている場合、ファイル間の切り替えはタブで行います。

複数のページを行ったり来たりしながら作成をする際には、この切り替えをショートカットキーで行えるとスムーズです。

Windowsの場合は

次のタブ Ctrl + Tab

前のタブ Ctrl + Shift + Tab

Macintoshの場合は

次のタブ Command + 

前のタブ Command + Shift + 

Macのショートカットキーが左手で操作しづらいのが残念なところですが、キーボードショートカットは自分の好みに変更することができます。

Macの場合は、「Dreamweaver」メニューの「キーボードショートカット」をクリックした際に開くウインドウで指定ができます。

タブ切り替えのショートカットキーは慣れると本当に重宝しますので、ぜひぜひ試してみてください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]Extractパネル

土曜日に息子の七五三のお参りに成田山に行ってきました。

無事にご祈祷も終えて、食事をしてから帰ってきたのですが、帰宅してから傘を忘れたことに気がつき、2日連続で成田山に行くはめになったスタッフ「ほ」です。

皆様も傘のお忘れ物には気をつけましょう。

さて、今回もDreamweaverの10月アップデート分のネタからです。

今回、Dreamweaverをアップデートして起動すると、最初にこんな画面構成になります。

いつも画面右側に出ているパネル群は折りたたまれた状態になっており、画面左側に「Extract」というパネルが開いています。

「ウインドウ」メニューから「ワークスペース」→「デザイン」をクリックすることで、これまでのおなじみの画面構成にできますが、今回はこの「Extract」パネルに焦点を当ててみたいと思います。

実は私自身もよくわかっていなかったので、今回いろいろ実験しながら、このエントリーを書いております。

そもそもExtractパネルって何?

ひとことで言ってしまえば、「Photoshop形式(PSD)ファイルが開けるパネル」です。

Webページを作る際には、事前にデザインの完成見本図を作成します。この完成見本図のことを「カンプ」と呼び、Photoshopなどのグラフィックソフトで作成されます。

これまでは、Photoshopでカンプを作成したら、その中のロゴマークだったり、ボタンだったり、バナーだったりをWebページに入れるために「スライスツール」などを利用して切り出してからWebページに挿入していました。

今回、Dreamweaverに実装された、このExtractパネルを使えば、Photoshopを起動しなくても、Photoshopであらかじめ画像を切り出しておかなくても、Dreamweaver内で、各データを切り出して、そのままダイレクトにWebページに入れていくことができる、ってのが売りのパネルなんです。

……たぶん

1.まずはPSDをアップロードする

さて、使い方です。

パネルを確認してみると、パネル上部に「開始」というボタンが見えます。

これをクリックしてみましょう。

パネル内がこんな感じに切り替わります。ここで作成したPSDファイルをアップロードします。

画面中央にある「PSDをアップロード」ボタンをクリックします。

ファイルを選択すると、アップロードが開始されます。ちなみに、このファイルはCreative Cloudのサーバーのアセットフォルダにアップロードされるため、うっかりPC側のカンプを削除してしまっても、いつでもここで呼び出すことができます。

アップロードが完了したところです。

アップロードが完了したら、アイコンをクリックすることで、Extractパネル内にカンプが開きます。

……と、あれれ?なぜか一部のレイヤー表示が飛んでしまっています。

むぅ、PhotoshopでPSDファイルを確認しましたが、何が基準で表示されてないのかがわかりませんでした。

が、パネル上部にある「レイヤー」をクリックすると、Photoshopの各レイヤーを確認・操作することができます(すごい!)が、ここでは、ちゃんとすべてのレイヤーが存在しておりました。

まぁ、大丈夫だろう、と勝手に思い込み先に進んでみます。

2.CSSをカンプから抽出する

さて、次に画像を挿入したいファイルを用意します。

DIVボックスは、あらかじめ作成する必要があるので、DIVボックスを作成し、サイズを整えておきます。

この際、DIVボックスのサイズを指定するのにExtractパネルが利用できます。

カンプ内で各ボックスに当たる部分のフチをクリックすると、ポップアップで該当オブジェクトのサイズが表示されます。

上記はヘッダーのサイズを調べたところです。この中で利用したい項目(今回はwidth欄とheight欄の両方)にチェックを入れた上で、「CSSをコピー」をクリックします。

続いて、「CSSデザイナー」パネルに移り、セレクター欄に「#header」を追加して右クリックします。

コンテキストメニューの「スタイルをペースト」を実行すると、カンプからコピーしたwidthとheightがCSS内に反映します。

3.一部の画像を書き出す

今、サイズを指定したヘッダーに背景画像を設置したいと思います。

そのためには、カンプから背景画像を書き出すわけですが、困ったことにカンプ内で背景画像が表示されておりません。

ですが、ダメ元で次の手順で行ってみました。

Extractパネルで、レイヤーを開き、headerのレイヤーグループをクリックして展開します。

今回、ヘッダーの背景として利用したいのが「メイン画像」レイヤーと「画像下部のかげり」レイヤーなので、その2つをShift+クリックで複数選択します。

選択ができたら、横にあるこのマークをクリックします。

すると、「保存先」「ファイル名」「ファイル形式」を指定するウインドウが開きます。

そこで、ここでは次のように指定をしました。

保存先→imagesフォルダに保存をしたかったので、保存先をimagesに変更
ファイル名→header_bgに変更
保存形式→JPGに変更

ファイル形式は、JPGを指定すると画質の設定が行えるようになります。ここでは変更せずに80のままとしました。

保存ボタンをクリックすると、指定した場所にファイルが書き出されます。

4.画像を直接挿入する

Extractパネルを使うと、カンプから画像を直接ページに挿入することもできます。

先ほどのヘッダーにロゴマークを挿入してみます。

なお、この作業はライブビューでないとできないため、「ライブ」ボタンを押してライブビュー状態にしておきます。

カンプ内からロゴマークをドキュメントウインドウにドラッグ&ドロップします。

この際、ドキュメントウインドウ内には画像挿入される位置にグリーンのラインが表示されますので、それを目安に位置を決めます。

すると、ファイル名指定のダイアログが表示されます。

ここでファイル名を決定するわけですが、今回のように画像をimagesフォルダに保存する場合は、相対パスで「images/」をつけることで、imagesフォルダに保存されます。

Enterキーで確定すると、「アセットを抽出しています」というメッセージの後、一度、このような画像が破損したアイコンが表示されてドキッとしますが、

そのまま待っていると、無事にロゴマークが挿入されました。

このように、Photoshopとアプリケーションを行ったりきたりせずに、Dreamweaverの中だけでデータの切り出しと挿入ができるのは、かなり便利ですね。

これまで、Photoshopでカンプを作っていた人には朗報ですので、ぜひお試しください。これまでイラレでカンプを作っていた方は、この機会にPhotoshopでのカンプ作成にチャレンジしてみてはいかがでしょう?

「いや、そもそもPhotoshopの操作がわからない!」という方は、ぜひバンフートレーニングスクールのPhotoshop講座へ!

Dreamweaver講座とあわせてお待ちしております。

バンフートレーニングスクールでは、DreamweaverやPhotoshopがそれぞれ最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
スクールの雰囲気を感じていただける無料体験も行っておりますので、ぜひお気軽にご参加ください。

Dreamweaver講座詳細http://www.vanfu-vts.jp/landing/dw.html
Photoshop講座詳細http://www.vanfu-vts.jp/landing/ps.html
無料体験http://www.vanfu-vts.jp/lesson_e/index.html
資料請求https://www.vanfu-vts.jp/cgi-bin/contact/request.php

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]CC2014 10月アップデート分での変更

みなさんこんばんは

カップヌードルは断然シーフード派のスタッフ「ほ」です。

10月にAdobe CC2014のアップデートがありました。

CC2014の名称のままなので、大した変化はないだろうと高をくくっていたら、まぁ、いろいろ変わっておりました。

ということで、とりあえず気になった変化をアップしていきたいと思います。

起動画面。絵が変わりました。何の絵なのかはわかりません。

起動して、まず気が付くのが、パネルがいろいろグルーピングされました。

以前は別々だったCSSデザイナーパネルとファイルパネルが一緒になっています。

CSSデザイナーパネルは、なるべく大きく広げた方が使いやすいので、私はいちいちファイルパネルをたたんでいましたが、今回のように統合してくれた方が使いやすいですね。

また、これまでは別々に存在していた「デザイン」ボタンと「ライブ」ボタンがグルーピングされました。

これでうっかり「ライブ」を押してしまうって心配が減りそうですね

そして、これまでは画面上部にあったドキュメントのタイトル欄が、画面下部のプロパティインスペクタ内に移動しました。

これまでは上にあるのが当たり前のものでしたので、かなり新鮮です。

とりあえず起動してざっと目を走らせたところでは、このあたりが違いです。

この後、もう少し使ってみて、また違いがたまってきたら次回のエントリーでアップしたいと思います。

 

バンフートレーニングスクールでは、ドリームウィーバーが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

ドリームウィーバー講座詳細  http://www.vanfu-vts.jp/landing/dw.html
無料体験  http://www.vanfu-vts.jp/lesson_e/index.html
資料請求  https://www.vanfu-vts.jp/cgi-bin/contact/request.php

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]CC 2014の新機能

先週、Creative Cloudのアップデートが行われましたね。
私スタッフ「ほ」も、スタッフ「の」と一緒に新しいCC 2014を試してみました。

今回は、Dreamwever CC 2014の新機能について触れていきたいと思います。

起動時の画面はこんなのになりました。

「四角い大きなキービジュアルの下にアプリ名」という形が、CSシリーズになる前のAdobeソフトを彷彿とさせますね。かっこいい

起動直後の画面も少し変わりました。
新規作成欄がアイコン化され、クリックしやすくなりました。

ファイルを開いてみると、タグセレクターのデザインが変わっています。

▼これまではこんな感じでした

▼CC2014では、こうなりました

使い方は、基本的に変わらないと思っていただいていいのですが、気になるのが一番左についた、このマーク。

この新しく搭載されたアイコンは「エレメントクイックビュー」という機能のアイコンです。

ちょっと触ってみたら、なかなか便利な機能でした。

ちょっとわかりやすい例でいきましょう。

例えば、以下のようなリストを作成したとします。

いずれかの果物の中にカーソルを立てて、エレメントクイックビューアイコンをクリックすると、こんな表示が出てきます。

現在選択している(カーソルを立てている)場所の構造をツリー状で表示してくれています。

で、例えば、この果物の順序を入れ替えたい場合…

これが今まで微妙に面倒だったんですよ。

リストの入れ替えはカット&ペーストでできますが、<li>のタグごと入れ替えなければならないので、タグセレクターを細かくクリックして、入れ替えてました。

それでもうまくやらないと、ソースコードが汚くなるので、もうコードビューで直接ソースを編集しちゃえ!って方が早かったり…

が、今回のエレメントクイックビューを使えば…

この「ぶどう」を「バナナ」の上に持ってこようと思ったら、

ビュー内で3番目の<li>を1番目と2番目の<li>の間にドラッグで移動します。

結果、項目が入れ替わります。

この入れ替え以外にも、複製や削除なども行うことができます。

これ、使いこなせばかなり手助けになってくれそうな気がします。

CCを契約されている方は、ぜひCC2014をインストールして試してみてください。

※ちなみにCC2014をインストールしてもCCが消えることはないので、両方使うことが可能です。

さて、今日はここまでにしてみますが、今後もCC2014の新機能、少しずつご紹介していきたいと思います。

バンフートレーニングスクールでは、ドリームウィーバーを最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。
ドリームウィーバー講座詳細:http://www.vanfu-vts.jp/landing/dw.html
無料体験:http://www.vanfu-vts.jp/lesson_e/index.html
資料請求:https://www.vanfu-vts.jp/cgi-bin/contact/request.php

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ