[Dreamweaver]ポップアップウインドウ

気がつけば久しぶりの更新になってしまいました。

だんだん暑~くなってきましたねー。
調子に乗ってクーラー効かせすぎて、毎年風邪をひくスタッフ「ほ」です。

これまで、グラフィックソフトばかりだったので、
今日のテーマはDreamweaverで行ってみようと思います。

何のネタにしようかなぁ、と迷ったんですが、授業ではあまりご紹介していないJavaScriptネタにしてみようと思います。

「そもそもDreamweaverの基本操作が知りたいよっ!」って方は、ぜひバンフートレーニングスクールのWeb講座へお越しください~

簡単なものですが、今回の素材を用意しました。
こちらからダウンロードしてください(Zip形式)

Zipファイルを解凍すると、フォルダ内に3つのファイルが確認できると思います。
index.htmlをドリームウィーバーで開いてください。

通常のリンク設定は、プロパティインスペクタのリンク欄で行いますが、ここでリンクを設定するだけだと、リンク先のページが別ウインドウでは開きません。
プロパティインスペクタのリンク欄

そこで、別ウインドウでリンク先を開くためには、ターゲットで_blankの指定を行うわけですが…

この方法だと、別ウインドウのウインドウサイズが、リンク元のページと同じサイズで開いてしまいます。

この別ウインドウで開くリンク先のウインドウサイズを制御するためには、JavaScriptが必要となります。

それでは、まず準備をしていきましょう。
リンクを設定する文字列にリンクを設定します。
リンク先には「#」を入力してダミーリンクを指定しておきます。
targetは空欄にしておいてください。

JavaScriptは、HTMLのタグと連動して作動します。
今回は、『リンク部分をクリックしたら別ウインドウを開く』という動作を行うので、
リンク部分にカーソルを立てて、タグセレクタから<a>をクリックしておきましょう。

※何の話だか全然わかんないっ!って方は、、バンフートレーニングスクールのHTML+CSS講座でお待ちしてます。

Dreamweaverでは、JavaScriptの制御は、「ビヘイビア」パネルで行います。
ビヘイビアパネルが入っているタグパネルバーに<a>が指定されていることを確認してください。
これで<a>タグにJavaScriptを関連付けする準備ができました。

JavaScriptで動作を追加します。
パネル内の「ビヘイビアの追加」ボタンをクリックします。


表示されたメニューの一覧から「ブラウザウインドウを開く」というメニューを見つけ出してクリックします。

次のダイアログが開きます。

 


「表示するURL」には、リンクをクリックした時に開くページを指定します。
「ウインドウ幅」と「ウインドウ高」の欄で開くウインドウのサイズを指定します。

「属性」欄では、開くウインドウに表示させたい項目にチェックを入れます。
それぞれの項目は以下を参照してください。


ブラウザでプレビューしてみましょう。
リンクをクリックして、指定通りの別ウインドウが開けば成功です!

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

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

[オススメセミナー]DTP Booster(電子書籍)

最近、暑いな~と思っていたら、いつの間にか梅雨に入っていたそうで。。。

電車内のムワッとした空気がつらい時期になってきました。
・・・が!これを乗り切れば、夏がやってきますよ!

晴耕雨読!
雨の日は、スクールでお勉強などいかがでしょう?

DTP Booster 014(Tokyo/100619)さて、iPadの登場で、俄然熱くなっているのが、電子出版業界です!

その媒体の形式や、使われるシーン、流通手段などを考えた場合、DTP業界にもWeb業界にも関係するものになりますよね。

ですので、DTPの人もWebの人も、今のうちから、情報を仕入れておかないと、あっという間に置いていかれますよー!

そんな中、かなり注目なセミナーが今週末に開催されます!

DTP Booster Vol.14
日時:2010年6月19日(土)12:30-18:40
場所:ベルサール神田

詳細は以下のURLをご覧下さい。
http://www.dtp-booster.com/vol14/

スタッフ「ほ」も、すんごく行きたいのですが、その日は授業がありまして…
ぜひ、私の分も見てきて下さい~

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

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

女子ラーメン部 MAP

初めて投稿します。ランチ開拓大好き「あ」です。

『飯田橋、ランチ』で検索するとラーメン屋さんばかりでてくるので、女子的にカロリーは気になりますが、ランチなら可!と色々食べてます。

そこで、休み時間内で行ける、私が実際うまいと思うラーメン屋さんMAPを作っちゃいました。

スクールの棚には置いていない裏MAPです。生徒さんで欲しい方いらっしゃったら、お声かけてください。

最近の1番は、ほぼ九段下に近い『斑鳩(いかるが)』さん。スープ全部飲みたかった(我慢)!

プリントアウトしたい方はクリックするとA5サイズのPDFが見られます。↓

ra-men map
ラーメンマップ 飯田橋

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

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

[Photoshop]切り抜きツール その4

世間はラー油ブームでして…(遅い?

本日、秋葉原のモスバーガーで、ラー油バーガー発売記念として、先着60名様に、モスバーガーの食べるラー油をプレゼント!という企画をしていました。

幸いにも、私は遅番だったので、行ってきましたよ!
いつもの出社時間よりも早く!

朝7時に秋葉原到着。
地下鉄の末広町駅から行ったのですが、地上に出てすぐに行列が目に入りました。
あちゃーと思って、近づいてみると、すでに100人以上の行列が・・・!

残念ながら、ラー油ゲットはできませんでした。
みんな早いなぁ・・・

さてさて、そんな失意のスタッフ「ほ」です。

前回で、切り抜きツールは最終回にするつもりだったのですが、3回では紹介しきれなかったので、今回が最終回になります。

前回までの記事はこちらからどうぞ
[Photoshop]切り抜きツール その1
[Photoshop]切り抜きツール その2

[Photoshop]切り抜きツール その3

今回の素材はビル!

私は千葉の田舎で生まれて、そのまま今も住んでおります。

そんな田舎者の私にとっては、幕張は、未来を感じさせてくれるとってもカッコイイ街なのです。
たまーにドライブに行っては、写真をバシバシ撮っております。
休日の幕張は人気がなくて、撮影にはもってこいなんですよ。

素材はこちらからダウンロードできます(Zip形式)

さて、そんな幕張からのショットなのですが、ビルを下から撮影すると、上階になるにつれて、ビルが先細りになりますよね。

遠近表現としてはあたりまえですし、これは、これでスケール感を出すために大事なのですが、素材として扱う都合上、どうしてもビルをまっすぐにしたい!となった場合…

実は、この矯正も切り抜きツールで行えちゃうんです!

まずは、普通に切り抜きしてみましょう。

この範囲でエイヤッと切り抜くと、↓みたいな感じになりますよね。
まぁ、ただ切り抜いただけです。

これでは、何の解決にもなっていないので、以前ご紹介している回転をしてみましょう。

う~ん、これもダメそうです。
回転をしても、うまくできません。

さて、そんじゃあ、どうするのか?って話です。

まずは、こんな感じで、切り抜き範囲を指定しましょう。

切り抜き範囲を作成している状態で、オプションツールバーを見てみましょう。
「遠近法」というチェックが見つかったら、チェックを入れます。

「遠近法」にチェックを入れると、切り抜き範囲を変形させることができるようになります。
四隅のハンドルを操作して、切り抜き範囲がビルの角度に合わせて先細りするように変形してみましょう。

切り抜きを実行すると、この通り、ビルのゆがみが直っちゃいます!

切り抜き範囲のサイズによっては、写真が間延びしてしまうこともありますので、その場合は、自由変形などで、形状を整えましょう。

変形などの操作は、どうやるの~?って方は、ぜひバンフートレーニングスクールのPhotoshop講座に来てみて下さい~。
インストラクターが、懇切丁寧に教えますよ~!


バンフートレーニングスクールでは、フォトショップ講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

フォトショップ講座の詳細

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

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

[Photoshop]切り抜きツール その3

久しぶりの更新です。
な、なまけていたわけじゃないですよ(言い訳
スタッフ「ほ」です。

前回の更新から、今回までの間に、iPadやAdobe CS5がリリースされましたねー。
みなさんは、もう触りましたか?

私も、毎日、いろいろ触りまくりです。
CS5は、魅力的な新機能がたくさん!

このブログでも、少しずつご紹介できるといいな、と思ってます。

さて、前回からの続きでして。
Photoshopの切り抜きツールについてでした。

前回までのコンテンツはこちらから
[Photoshop]切り抜きツール その1
[Photoshop]切り抜きツール その2

今回の素材です。

私が、近所の風景と、缶コーヒーを買った時のおまけのおもちゃで作った合成写真です。
こちらからダウンロードしてください(zip形式)

どうやったら、合成写真が作れるの?という方は、ぜひ!バンフートレーニングスクールのPhotoshop講座へ!

画像から、任意の場所を切り出せる切り抜きツールは、大変便利なのですが、切り抜いた後のサイズが、はっきりとわからない、という問題を持っています。

例えば、画像から、だいたいこのくらいのサイズで切り抜きをしてみましょう。
大体でいいですよ?

切り抜いた後の画像サイズを確認してみると、1476×1476pxのサイズでした。Web用として扱う場合は、ちょっと大きいですね。
最終的に、これを300×300pxで扱いたい、としましょう。

この方法では、一度、切り抜いた後に画像解像度コマンドなどを使って、画像を小さくする、といった2度手間が発生します。
数が少ない場合は問題ありませんが、たくさんの点数をこなすとなると、これが結構手間だったります。

それなら、切り抜くときに、同時にサイズも変えられちゃったらいいんじゃない?ってことになりますよね?

それを実現してくれるのが、ツールオプションバーです。
この部分です。

もうちょっと大きくすると、こんな感じになってます。
切り抜きツールを指定してないと、出てきませんからね?念のため…

「幅」と「高さ」と「解像度」という入力欄があります。
では、ここに数値を入力してみましょう。

今回は、最終的に幅も高さも300pxにしたいので…

こんな感じですね。
なお、単位にしっかり「px」と付けておかないと、「mm」がついてしまうこともありますので、自分が使う単位もしっかり書いておきましょう。
今回、解像度は、元画像から変更しないので、未入力になってます。

さて、この状態で、画像を切り抜いてみます。
幅と高さが同じ数値なので、今回はドラッグすると、正方形の形状でしか選択できないのがわかると思います。

切り抜きを実行した後に、サイズを確認してみると、しっかりと300×300pxの画像になっていることが確認できます。

これで、切り抜きの手間がグッと減りましたね?

幅と高さの欄に入力した数値は、自分で消去しない限り、数字が残ってしまいますので、作業が終了したら、数値は消しておくクセをつけましょう。

ちなみに、今回の作業は、元々1476×1476pxで切り出される画像を300×300pxにリサイズする作業となりました。

が、これが200×200pxで切り出すはずだった画像を300×300pxで切り出すような、拡大のリサイズになる場合は、画像がぼやけてしまったり、画質が粗くなってしまいます。
サイズ指定で切り抜きを行う場合は、結果的に拡大にならないように気をつけましょう。

さて、今回で切り抜きツールは最終回にするつもりだったのですが、もうちょっとご紹介したい部分があるので、もう1回だけ続きます。


バンフートレーニングスクールでは、フォトショップ講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

フォトショップ講座の詳細

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

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