何の絵なのかはわかりません。起動して、まず気が付くのが、パネルがいろいろグルーピングされました。以前は別々だったCSSデザイナーパネルとファイルパネルが一緒になっています。CSSデザイナーパネルは、なるべく大きく広げた方が使いやすいので、私はいちいちファイルパネルをたたんでいましたが、今回のように統合してくれた方が使いやすいですね。これまでは別々に存在していた「デザイン」ボタンと「ライブ」ボタンがグルーピングされました。これでうっかり「ライブ」を押してしまうって心配が減りそうですねそして、これまでは画面上部にあったドキュメントのタイトル欄が、画面下部のプロパティインスペクタ内に移動しました。これまでは上にあるのが当たり前のものでしたので、かなり新鮮です。起動してざっと目を走らせたところでは、このあたりが違いです。この後、もう少し使ってみて、また違いがたまってきたら次回のエントリーでアップしたいと思います。バンフートレーニングスクールでは、ドリームウィーバーが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。無料体験も行っておりますので、ぜひお気軽にご参加ください。Cloudのアップデートが行われましたね。2014を試してみました。2014の新機能について触れていきたいと思います。起動時の画面はこんなのになりました。「四角い大きなキービジュアルの下にアプリ名」という形が、CSシリーズになる前のAdobeソフトを彷彿とさせますね。かっこいい起動直後の画面も少し変わりました。新規作成欄がアイコン化され、クリックしやすくなりました。ファイルを開いてみると、タグセレクターのデザインが変わっています。▼これまではこんな感じでした▼CC2014では、こうなりました使い方は、基本的に変わらないと思っていただいていいのですが、気になるのが一番左についた、このマーク。この新しく搭載されたアイコンは「エレメントクイックビュー」という機能のアイコンです。触ってみたら、なかなか便利な機能でした。わかりやすい例でいきましょう。以下のようなリストを作成したとします。いずれかの果物の中にカーソルを立てて、エレメントクイックビューアイコンをクリックすると、こんな表示が出てきます。現在選択している(カーソルを立てている)場所の構造をツリー状で表示してくれています。この果物の順序を入れ替えたい場合...これが今まで微妙に面倒だったんですよ。リストの入れ替えはカット&ペーストでできますが、<li>のタグごと入れ替えなければならないので、タグセレクターを細かくクリックして、入れ替えてました。それでもうまくやらないと、ソースコードが汚くなるので、もうコードビューで直接ソースを編集しちゃえ!って方が早かったり...が、今回のエレメントクイックビューを使えば...この「ぶどう」を「バナナ」の上に持ってこようと思ったら、ビュー内で3番目の<li>を1番目と2番目の<li>の間にドラッグで移動します。結果、項目が入れ替わります。この入れ替え以外にも、複製や削除なども行うことができます。これ、使いこなせばかなり手助けになってくれそうな気がします。CCを契約されている方は、ぜひCC2014をインストールして試してみてください。※ちなみにCC2014をインストールしてもCCが消えることはないので、両方使うことが可能です。今日はここまでにしてみますが、今後もCC2014の新機能、少しずつご紹介していきたいと思います。バンフートレーニングスクールでは、ドリームウィーバーを最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。無料体験も行っておりますので、ぜひお気軽にご参加ください。「ほ」すっかり秋めいてきましたね。過ごしやすい天気なので、休みの日は、お弁当持って公園へ...と行きたいところですが、なぜか休みの日は天気がイマイチな日が続いているスタッフ「ほ」です。んー、まぁ、次の3連休は大丈夫でしょう。さ、久しぶりの更新です。先延ばしにしていましたDreamweaverCCについて触れていこうと思います。今回は、CCからガラッと様変わりしたCSSパネルまわりについてです。CS6まで、CSSを扱うパネルは「CSSスタイル」パネルでした。「すべて」と「現在」のモードを切り替えて使用するパネルです。スクールの講習では主に「すべて」を利用していました。これがCCから、「CSSデザイナー」パネルに変わりました。使い方が変わりまして、スクールで授業を受けた後にCCを使われた方は「え?え?」となった方もいらっしゃるんじゃないでしょうか。ここでは、講習で行っている内容をCCでやる場合はどうするのか?をテーマに説明していきたいと思います。01.CSSファイルを読み込む外部CSSファイルをHTMLページに読み込む場合、CS6までは、CSSスタイルパネル下部にある「スタイルシートを添付」アイコンをクリックしてファイルを読み込んでいました。CCでは「CSSデザイナー」パネル内にある「ソース」欄の「+」マークをクリックし、メニューから「既存のCSSファイルを添付」をクリックします。ダイアログが開いたら、「参照」ボタンで読み込むCSSを指定し、「OK」をクリックします。パネルの「ソース」欄に読み込んだCSSファイル名が表示されたのを確認しましょう。02.新規ルールを追加するCS6までは、新たにCSSルールを作成する場合、CSSスタイルパネル下部にある「新規CSSルール」アイコンをクリックして...この画面が出てきたら、「セレクタータイプ」「セレクター名」「ルール定義」を指定して「OK」を押してから、装飾を行っていました。CCでは、以下の手順で、ルールを作成します。h2に対して、色をつける作業を例に説明していきます。ドキュメントウインドウ上でh2要素内にカーソルを立てて、タグセレクターから<h2>をクリックしておくCSSデザイナーパネルの「ソース」欄から、ルールを定義するCSSファイルをクリック選択する。同パネルの「セレクター」欄にある「+」マークをクリックする。h2」という子孫セレクターができあがるので、「h2」に調整する同パネルにある「プロパティ」欄から、「テキスト」アイコンをクリックし、「color」プロパティ欄で文字の色を指定する。以上で、h2要素に色がつくはずです。最後のパネルの「プロパティ」欄に関しては、「テキスト」というカテゴリをクリックしなくても、すべてのプロパティが縦に並んでいる状態なので、どのカテゴリに入っているかわからなくても、上から順に見ていけば、必要なプロパティは見つかると思います。手順4まで進めば、そのあと、プロパティインスペクタにあるカテゴリを「CSS」に切り替えて「ルールの編集」ボタンを押せば、CS6までお馴染みのCSSルール定義ダイアログが開きますので、ここで設定してもOKです。CSSデザイナーパネルのプロパティ欄は、CSSルール定義ダイアログでは指定できない内容も盛り込まれていますし、例えばtext-alignプロパティやtext-decorationプロパティも視覚的にわかりやすくなったので、今後のことを考えれば、CSSデザイナーパネルになれちゃった方がいいかもしれません。03.HTMLの<head>内にCSSルールを作るHTMLの単一ページにCSSを適用するため、<head>内にCSSを記述したい場合、CS6までは、新規CSSルールダイアログにて、「ルール定義」から「このドキュメントのみ」を指定していました。CCでは、CSSデザイナーパネルの「ソース」欄にて「+」マークをクリックし、「ページで定義」をクリックすると、ソース一覧に<style>が追加されるので、前項の作業手順2にて、この<style>を選択することで、<head>内にCSSルールが記述されます。04.作成したルールを別のCSSファイルへ移動する例えば、index.cssに作りたかったルールを、うっかり間違えてcommon.cssに作成してしまった場合、CS6までは、CSSスタイルパネル内で、ルールをindex.cssにドラッグ&ドロップすることで移動ができていました。-と、ここまでCS6以前とCCの違いをお話してきました。CCのCSSデザイナーパネルは、CS6までのCSSスタイルパネルの「すべて」と「現在」モードが混在したような感じなので、慣れるまで戸惑うことがあるかもしれませんが、慣れてしまえば直感的に使える部分も多そうなので、まずはたくさん触ってみましょう。今後も、少しずつCCネタを追加していきたいと思います。「ほ」もうGWですねー。みなさんはGWはどうする予定ですか?私は遠出はしないんですけど、久しぶりに会う友人とか毎年恒例のとか、近所の交流を深めるためとか、そんな理由でバーベキューが3件も予定が入っちゃいました。おいしいものたくさん食べるので、連休明けからは減量しなくちゃですねぇ。こんにちは、スタッフ「ほ」です。前回の更新から随分とあいてしまいました。4月から、スクールのAdobe製品がCS6に変更になっております。Cloudユーザーの方は12.2へアップデートが可能です。!このDreamweaver、12.1から一部大きな変更があり、講習内容とメニューなどの位置が変更となっております。ここでは、講習との違いをあげていきますので、家に帰ってテキスト見ながらやってみたら「あれ?テキストに出てるメニューがないぞ!?」なんてときの参考にしてみてください。Transitionalでした。ドキュメント」→「初期設定ドキュメントタイプ」にて変更します。挿入メニュー内が整理され、一部指定の方法が変わっております。講習でご案内している部分を中心でご紹介します。以前あった「イメージ」メニューと「イメージオブジェクト」が統合されたことによる結果ですが、1工程増えてしまいました...ここはできればショートカットキーを覚えちゃうといいかもしれません。「挿入」→「Div」これは楽になりました。ちなみに「挿入」→「レイアウト」→「Div」でも可能です。挿入メニュー内で探したのですが、どうやら無くなっているようです。代替案として、下記の方法で行ってみてください。「ファイル」→「読み込み」→「表データ」んー、マイナーバージョンアップで、メニューがガラッと変わるとちょっと焦りますね。今後のバージョンアップで変化が出たら、随時、このブログでご紹介していこうと思います。毎日暖かい日が続きますね。桜も一気に咲いて満開です。桜大好きスタッフ「ほ」です。お花見は桜が満開になる直前くらいにやる人が多いですが、個人的に桜は散り際が一番キレイだと思うので、個人的な見ごろは今週末じゃないないか?と思っています。今日は久しぶりのDreamweaverネタです。授業でたまに受けるご質問に「マウスを当てるとツルッと下にサブメニューが出てくるナビゲーションバーを作りたいんですが...」というものがあります。これ、Dreamweaverを持っていれば、比較的簡単に作れます。Dreamweaverには、SpryというAdobe社がJavascriptがわからない人でも、簡単にJavascriptを扱えるようにしてくれた機能です。最終的にはJavascriptは自分で書けたり修正できるのが理想なのですが、手っ取り早くメニューを作りたい!といった場合には、もう本当にお手軽な機能です。いうことで作り方のご紹介。メニューを作成するファイルを開いてください。挿入したい位置にカーソルを立て、「挿入」メニューから「Spry」⇒「Spryメニューバー」をクリックします。作成するメニューが横型なのか縦型なのかを聞かれますので、自分が作りたい方を選択して「OK」をクリックします。すると、これだけで、もう最低限のメニューバーが出来上がります。上書き保存の際に「依存ファイルのコピー」というウィンドウが開きます。今回のメニューバーを作成するにあたって必要となるファイルをDreamweaverが保存しようとしている確認なので「OK」をクリックしてください。プレビューしてみます。↓こんな状態になっているはずですサンプルを開くもう、必要な動きができあがってるのがわかると思います。さぁ、あとは中の文字を書き換えるだけです。文字の書き換えはプロパティインスペクタを使用します。作成されたメニューバーの左上にあるタブ部分をクリックすると、プロパティインスペクタが以下のような状態になります。はじめに表示されているメニューは、この部分です。項目名を書き換えるときは、項目名をクリックしてパネル右部にあるこの部分を書き換えます。メニュー項目の追加と削除はこの部分にある「+」と「-」で行います。言うまでもなく、「+」が追加、「-」が削除です。この部分がマウスポインタを当てると出てくる下の階層部分になります。先程と同様にテキストを書き換え、クリックした際のリンク先はこの部分で指定します。必要に応じて、その下の階層も追加できます。プレビューして、内容が正しく変更できたかどうかを確認しましょう。これで完成!...と言いたいところですが、「自分の好みのデザインにしたい!」というご意見もあるかと思いますので、少しだけ装飾のお話を。Spryメニューバーを作成すると、十数個のCSSセレクタが自動的に生成されます。この中から、装飾内容ごとの編集ポイントを書いてみます。li」のCSSルールを開き、「ボーダー」のカテゴリから任意の線を設定してください。●各項目の幅を変更したいナビゲーションの各項目幅は初期設定では8emで設定されています。これは、中の文字サイズがユーザーによって変更された場合に柔軟に変化する幅です。レイアウトに組み込む際には横幅をpxで固定したい場合もあります。li」を開いて幅の指定を行います。li」の2つで指定できます。a.MenuBarSubmenuVisible」の設定で変更できます。背景色を自分の好きな色に変更してください。そのほか、サイズや色に関しては、CSSを覗いて「これかなー?」ってところを変更してみれば、たいてい上手くできると思います。