Menu

Column

TOP > マガジン > スタッフコラム > Dreamweaverから消えた、アノ機能を使うには?

スタッフコラム

講師 森コラム
2016年10月19日

Dreamweaverから消えた、アノ機能を使うには?

colum_mori_49  

 

こんにちは! iMedioセミナー講師の森 和恵です。

 

一段と肌寒くなってきましたね。
10月半ばになってやっとです。今年は暑かった・・・。
いよいよこのコラムも次回で50回。どんなネタがいいか、Twitterで募集中です。
https://twitter.com/r360studio/status/786068370609274880

さて。今回は、<Dreamweaver>についてです。

3年ぐらい前にDreamweaver講座を受けた方から、先日質問がありました。
「先生、イメージプレースフォルダがメニューになくなったんです・・・」

イメージプレースフォルダとは、
CS6の時にあった「仮画像」を挿入する機能↓です。
http://www.yocchi01.mydns.jp/Dreamweaver/Dreamweaver06.html

Webページを作ってて、写真と文章は後からくるから、とりあえずページの
枠組みだけ作っておかなくてはならないなんてことありませんか?
わたしは、ページのテンプレート(ひな形ページ)を作る時によく使います。

残念ながら、イメージプレースフォルダ機能は、
現在のCC2015バージョンでなくなってしまいました。ホントに残念です。

なくなってしまっても、イメージプレースは使いたい・・・
という方のために手順を紹介しますね。

(1)画像を挿入する操作を行います。
([挿入]-[image]メニューでなくても、普段馴れてる方法でOK)

(2)画像ファイルを選択する「イメージソースの選択」ダイアログが
表示されたら、ファイル名を「XX」指定し[OK]ボタンを押します。
(ファイル名は、適当なアルファベットなら何でもOK。)

(3)画像は表示されず、壊れたアイコンが表示されます。アイコンを
選択しつつ、プロパティパネルの[幅]と[高さ]に必要なプレースフォルダの
サイズを入力し、代替にコメントを書き加えます。

(4)最終的に、以下のようにコードが表示されます。
<img src="xx" alt="~コメントに指定した文~" width="300" height="300"/>

(5)プレースフォルダを差し替えるには、<デザインビュー>の場合は、
画像をダブルクリックして新たな画像を指定します。<ライブビュー>の場合は、
画像をクリックして右上のメニュー(≡)からsrcを指定します。

(おまけ1)壊れたアイコンだと見栄えが悪い・・・という方は、
placehold.jp↓のURLをsrcに指定してください。
[Advanced]機能を使えば、色や表示文字の指定なんかもできます。
http://placehold.jp/

(おまけ2)CSSを用いて見栄えを指定する方法は、セレクタに“img[src=”xx”]”
(src属性にxxが指定されているタグに対してスタイルを割り当てる)を用いればOKです。

文章だけでは、ちょっとわかりにくかったかもしれませんね。一度、
Dreamweaverを動かしながら、確かめてみてください。ちなみに、Dreamweaverの
画像関連のメニューは、Adobeさんのヘルプ↓が参考になりますよ。
https://helpx.adobe.com/jp/dreamweaver/kb/cq05270222.html

また、別の画像挿入のアプローチですが、最新のCC2015からは、
Creative Cloud Extractという機能が追加されています。Dreamweaverから、
Photoshopを起動することなく、PSDファイルから画像やスタイルを切り出す機能です。
http://www.adobe.com/jp/creativecloud/extract.html

・・・ということで、担当講座のご紹介。最新のDreamweaverについて学んでみませんか?
今日ご紹介した二つのネタは、講座でも触れてみたいと思います。

“Dreamweaver入門 ~はじめよう!Web制作~《最新版 CC 2015》”(10/28開催)
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=21818
※使うテキストも紹介。わたしの講座は、全部オリジナルで講座のために書き起こしてます。

ではまた、次回お会いしましょう。


r360studio 森 和恵 (^^)

【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/