Adobe
サインイン 注文状況 マイアカウント
 
Web
 

メイキングWebデザイン【中級編】vol.3 フレームセットとヘッドアクション

page: 1 2 3 4 5 6 7 8 9 10 11

フレームとヘッドアクションで高度なページ構成に挑戦
KEYWORD ヘッドアクション

「WindowOpen」アクション機能を使って、「main.html」が開くと同時に別ウィンドウに小さなメニューが開くように設定しよう。

3.別ウィンドウでメニューを表示
まず「main.html」を開いて、画面左上のページアイコン横にある三角を下向きにクリックしてヘッドセクションを開く。そこに「オブジェクト」パレットのスマートタブにある「ヘッドアクション」アイコンをドラッグ&ドロップする。
  別ウィンドウでメニューを表示
   
  これが選択されている状態のままインスペクタの「アクション」ボタンをクリックして、「Link」の中「OpenWindow」を選択する。
インスペクタの「アクション」ボタンをクリック
小さなウィンドウが開くように設定
  メニューのHTMLである「../menu/menu.html」へリンク設定をしたら、ターゲットに「_new」、サイズ「150」「270」を指定し、表示チェックボックスはすべて外す。これで、main.htmlを開けば自動的に右図の小さなウィンドウが開くように設定された。
     
  アクションの追加 4.Netscape CSS fixとForceFrameアクションの追加
「main.html」に、もうふたつアクションを追加しよう。ひとつ目は、CSSを使用している際に、Netscapeで画面サイズを変更するとスタイルが効かなくなるバグをフィックスするための「Netscape CSS Fix」。これは、「アクション」から「Others」の「Netscape CSS Fix」を選ぶ。
   
  もうひとつ、「子フレーム」が単独で展開しないよう強制的にフレームセットで開かせる「ForceFrame」アクションも追加する。
  アクションも追加
  ヘッドセクションを確認
  ヘッドセクションを確認すると、それぞれ左から「OpenWindow」、「Netscape CSS Fix」、「ForceFrame」アクションが追加されているのが確認できる。
   
メイキングWebデザイン【中級編】
vol.1
Photoshopファイル上のデザインを
そのままHTML化する

Illustrator & LiveMotionによる
アニメーションの作成

vol.2
テーブルを使用したレイアウト
CSSを使った文字の設定と制御
vol.3
トレーシングイメージを使った
ページレイアウト

・フレームとヘッドアクション
メイキングWebデザイン
【初級編】
【中級編】
【上級編】

ダウンロード
・サンプルテンプレート

クリックしてサンプルサイトを見る
テンプルレートをダウンロードする
・フリー素材
221個全てをダウンロードする
選んでダウンロードする
・印刷用PDF
トレーシングイメージを使った
ページレイアウト

(PDF: 160 KB/4 ページ)
フレームとヘッドアクション
(PDF: 112 KB/1 ページ)


トップに戻る


back