back   home
 
  Dreamwever3(または4)で細かな部分の設定をしてみたいと思います。「JavaScript」で書かれたり、「CSS」で書かれたりする部分の解説なのですが、いろいろな本を見てもなかなか上手く説明されていませんね。
私なりに解釈した設定もありますが、いくつか紹介していきたいと思います。
最初は、先日教え子(?)から質問があったもので、「小さなウインドウで画像を表示したい」と言うものです。
 
  第2回)エコノミーサイズでウインドウを開く  
  第1回ではDWで「ブラウザウインドウを起動する」設定をおこないました。

【サンプルA(そのままの設定)】
ここをクリックするウインドウが開きます。(クリックすると300px×400pxのウインドウが開きます)

このままではクリックと言う文字を本当にクリックするべきか迷います。やはりリンクが付いてないと困りますよね。そのためには前回最後に書いたように「#」でリンクを指定する方法がすぐに考え付きます。これでも一応起動しますが今ひとつ完成されていない感じがいやですよね。

【サンプルB(#でリンクを付ける)】
ここをクリックするウインドウが開きます。(クリックすると300px×400pxのウインドウが開きます)

こんな感じですね。<A>で指定すると反応するときに「カチッ」と音がするので、その辺は感じが良いです。さらに次はスタイルシートで設定してみます。

【サンプルC(スタイルシートで設定)】
ここをクリックするウインドウが開きます。(クリックすると300px×400pxのウインドウが開きます)

「サンプルC」でスタイルシートを適応してみました。なんとなくスマートな感じがします。「拡張」でマウスカーソルの形をいろいろに変えられるので暇があったら試してください。

一応スタイルシートの適応のさせ方を説明しておきます。(これはIEではOKなのですが、先日、NN6.01バージョンで確認したところ再現できませんでした。と言うことでお薦め案では無いという事です。)スタイルシートに関しては後日まとめて説明したいと考えています。
(DWでの設定の仕方)スタイルシートの設定

1.メニューバーから[ウインドウ]→[CSSスタイル]を選びます。 「CSSスタイル」パネルが立ち上がります。 新規スタイルを設定しますので、パネルの下にある「新規スタイル」アイコンをクリックしてください。


2.タイプは「カスタムスタイルの作成(クラス)」にして、名前をつけてください。 (今回は「test」にしました)
3.各項目を設定します。文字のサイズ、とウエイト、カラー、飾り(アンダーライン)を設定しました。さらに、カテゴリーの拡張をセレクトします。
4.カーソルの部分で目的のところでマウスポインターを変化させる形を選びます。(ハンド)
 

5.今回は「クリック」と言う文字に反応させるため、「クリック」と言う文字を選びCSSスタイルを適応させてください。「test」を選び適応させます。以上で設定できたと思います。

F12で確認してみてください。この方法だと色や文字のサイズ、マウスカーソルの形までいろいろ変えられます。ちょっと楽しそうですよね。 今回は2回に分けて「エコノミーサイズのウインドウを開く」というテーマでした。
もちろん画像に対して「ブラウザウインドウを開く」の設定をおこなう場合は、「onClick」以外にカッコが付いた「(onClick)」が登場するのでそれを選べばまったく問題なく設定終了です。画像の場合はこの「(onClick)」を選んでください。
 
 
     
  Copyright © 1999-2002 hiroshi sato