C305 情報発信の基礎 例題１ Web ページ作成【第５回】リンク・フレーム② フレームの作成 ページを２つのフレームに分けて表示せよ。 • 左右のフレーム名をそれぞれ「contents」 「main」として，左のページには「contents.html」，右のページには「top.html」 を割り当てよ。 • 左のフレーム幅を 250 ピクセル。 • 境界線はなし。 • ページタイトル「情報化社会」，ファイル名「index.html」で保存。 (解答) 【HTML ソース】 <HTML> <HEAD> <TITLE>情報化社会</TITLE> </HEAD> <FRAMESET cols="250,*" frameborder="NO" border="0"> <FRAME src="contents.html" name="contents" noresize scrolling="AUTO"> <FRAME src="top.html" name="main"> </FRAMESET> </HTML> 《frameset タグによる画面の分割方法の指定》 画面の分割方法には、左右の分割と上下の分割がある。分割方法と各フレームのサイズを、frameset タグで設定する。 • cols="" 左右の分割 + サイズを指定 • rows="" 上下の分割 + サイズを指定 サイズの指定は、ピクセル数かパーセント、または * （残り全て）で行う。 それぞれの数値はカンマ（ , ）で区切って記述する。右の表のソースは次 のようになる。 <FRAMESET cols="150,*"> <FRAME src="sample.html" name="frame_1"> <FRAMESET rows="200,*"> <FRAME src="sample.html" name="frame_2"> <FRAME src="sample.html" name="frame_3"> </FRAMESET> </FRAMESET> C305－1 例題２ リンクの設定，ターゲットフレームへの表示 例題１で作成した左側フレームの内容それぞれに，次のようにリンクをはり，右側のフレームに表示させよ。 • CONTENTS■ インターネット社会の光と影 → 「page_1.html」 • CONTENTS■ 情報の信頼性 → 「page_2.html」 • CONTENTS■ 著作権に関連する権利 → 「page_3.html」 • 「TOP」画像 → 「top.html」 • ■LINK■ の 2 つのページは別ウインドウ表示 (解答) 【HTML ソース】 ・ <P><IMG src="mark003.gif" width="16" height="16" border="0" hspace="5"> <A href="page_1.html" target="main">インターネット社会の光と影</A></P> ・ <P><IMG src="mark003.gif" width="16" height="16" border="0" hspace="5"> <A href="http://www.nikonet.or.jp/spring/sanae/" target="_blank">数学とソフトウエア</A></P> ・ <P align="center"><A href="top.html" target="main"> <IMG src="top2.gif" width="90" height="22" border="0" hspace="10"></A></P> チェック • リンクをはると，下線表示される。 《ターゲットフレームの指定》 • TARGET="_self"･･･そのリンクがあるフレーム自身に表示。 • TARGET="_top"･･･（全ての）フレーム分割を解除して、全画面でリンク先を表示。 • TARGET="_blanc"･･･新たにブラウザが別のウィンドウを開いてそこに表示。 • TARGET="_parent"･･･フレームが「入れ子」になっている時に子フレームの内部のリンクで用いると，親フレー ムは解除せず子フレームのみフレーム分割を解除して表示。 例題３ ページの印刷 作成した Web ページをフレームごと，印刷方向横で印刷せよ。 (解答) 1. 2. ファイル ファイル → → ページ設定 → 印刷の向き「横」 → OK 印刷ﾌﾟﾚﾋﾞｭｰ → 表示されたとおりに印刷する チェック • 「印刷ﾌﾟﾚﾋﾞｭｰ」で一度確認すること。 • 用紙の向き「横」を忘れないこと。 C305－2 → 印刷
© Copyright 2024 Paperzz
