バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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」には、リンクをクリックした時に開くページを指定します。
「ウインドウ幅」と「ウインドウ高」の欄で開くウインドウのサイズを指定します。

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


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

The following two tabs change content below.

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ