練習 30
30-1-1. インラインフレームによって説明文を表示させる次のページをつくれ。
<![CDATA[
解答
30-1-1.
30-01.html
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>イタリア旅行記</TITLE>
<STYLE TYPE="text/css">
BODY {background-color: Navy}
TABLE.Komoku {background-color: #000080; border: 2px solid #7ffffe}
TD {font-size: 0.9em}
TD.City {color: Red; background-color: Blue}
TD.Back {font-size: 0.8em; letter-spacing: 0.5em; text-align: center}
A:link, A:visited {text-decoration: none; color: #ffff80}
A:hover {color: Red}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="フレーム分割" Cellspacing="12">
<TR><TD Valign="top">
<TABLE Summary="ミラノ・ベネチアの説明" Border="2" Cellspacing="2" Cellpadding="4" Class="Komoku">
<TR><TD Class="City">ミラノ
<TR><TD><A Href="30-01-01.html" Target="fr2">ミラノ市内</A>
<TR><TD><A Href="30-01-02.html" Target="fr2">ミラノ大聖堂</A>
<TR><TD><A Href="30-01-03.html" Target="fr2">ドォオモ広場</A>
<TR><TD><A Href="30-01-04.html" Target="fr2">スカラ座</A>
<TR><TD><A Href="30-01-05.html" Target="fr2">最後の晩餐の絵</A>
<TR><TD><A Href="30-01-06.html" Target="fr2">イタリアの白バイ</A>
<TR><TD><A Href="30-01-07.html" Target="fr2">小型タクシー</A>
<TR><TD><A Href="30-01-08.html" Target="fr2">スフォルツェスコ城</A>
<TR><TD><A Href="30-01-09.html" Target="fr2">ミラノでの昼食</A>
<TR><TD><A Href="30-01-10.html" Target="fr2">ミラノでの夕食</A>
<TR><TD><A Href="30-01-11.html" Target="fr2">ホテルの部屋の中</A>
<TR><TD Class="City">ベネチア
<TR><TD><A Href="30-01-21.html" Target="fr2">ベネチア市内</A>
<TR><TD><A Href="30-01-22.html" Target="fr2">ドゥカーレ宮殿</A>
<TR><TD><A Href="30-01-23.html" Target="fr2">サンマルコ広場</A>
<TR><TD><A Href="30-01-24.html" Target="fr2">ため息の橋</A>
<TR><TD><A Href="30-01-25.html" Target="fr2">ゴンドラ</A>
<TR><TD><A Href="30-01-26.html" Target="fr2">ガラス工房</A>
<TR><TD><A Href="30-01-27.html" Target="fr2">ヴェネチアン仮面</A>
<TR><TD><A Href="30-01-28.html" Target="fr2">サンクレメンテ・パレス</A>
<TR><TD><A Href="30-01-29.html" Target="fr2">ベネチアでの昼食</A>
<TR><TD><A Href="30-01-30.html" Target="fr2">ベネチアでの夕食</A>
<TR><TD><A Href="30-01-31.html" Target="fr2">ホテルの部屋の中</A>
</TABLE></TD>
<TD Valign="top">
<IFRAME Src="30-01-start.html" Name="fr2" Width="630" Height="630" Frameborder="0">
このページを見るには IFRAME 対応ブラウザが必要です。</IFRAME></TD>
<TD Valign="top">
<TABLE Summary="フィレンツェ・ローマの説明" Border="2" Cellspacing="2" Cellpadding="4" Class="Komoku">
<TR><TD Class="City">フィレンツェ
<TR><TD><A Href="30-01-41.html" Target="fr2">フィレンツェ市内</A>
<TR><TD><A Href="30-01-42.html" Target="fr2">フィレンツェの森</A>
<TR><TD><A Href="30-01-43.html" Target="fr2">ヴェッキオ橋</A>
<TR><TD><A Href="30-01-44.html" Target="fr2">ウフィツィ美術館</A>
<TR><TD><A Href="30-01-45.html" Target="fr2">ミケランジェロ広場</A>
<TR><TD><A Href="30-01-46.html" Target="fr2">ピサの斜塔</A>
<TR><TD><A Href="30-01-47.html" Target="fr2">アルファロメオ</A>
<TR><TD><A Href="30-01-48.html" Target="fr2">ヴィラ・コーラ</A>
<TR><TD><A Href="30-01-49.html" Target="fr2">フィレンツェでの昼食</A>
<TR><TD><A Href="30-01-50.html" Target="fr2">フィレンツェでの夕食</A>
<TR><TD><A Href="30-01-51.html" Target="fr2">ホテルの部屋の中</A>
<TR><TD Class="City">ローマ
<TR><TD><A Href="30-01-61.html" Target="fr2">ローマ市内</A>
<TR><TD><A Href="30-01-62.html" Target="fr2">トレビの泉</A>
<TR><TD><A Href="30-01-63.html" Target="fr2">スペイン広場</A>
<TR><TD><A Href="30-01-64.html" Target="fr2">コロッセオ</A>
<TR><TD><A Href="30-01-65.html" Target="fr2">サン・ピエトロ寺院</A>
<TR><TD><A Href="30-01-66.html" Target="fr2">バチカン美術館</A>
<TR><TD><A Href="30-01-67.html" Target="fr2">カプリ島</A>
<TR><TD><A Href="30-01-68.html" Target="fr2">青の洞窟</A>
<TR><TD><A Href="30-01-69.html" Target="fr2">ローマでの昼食</A>
<TR><TD><A Href="30-01-70.html" Target="fr2">ローマでの夕食</A>
<TR><TD><A Href="30-01-71.html" Target="fr2">ホテルの部屋の中</A>
</TABLE></TD></TR>
<TR><TD Colspan="3" Class="Back"><A Href="30-01-start.html" Target="fr2" Title="表紙に戻る">-表紙-</A>
</TABLE>
</BODY>
</HTML>
30-01-start.html
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>イタリア旅行</TITLE>
<STYLE type="text/css">
BODY {text-align: center; background-color: #0851e6}
TABLE.Top {border: 4px solid Red}
TH {font: bold 1.2em/1.4em 'HG正楷書体-PRO',cursive; color: #ffff80; background-color: Navy;
letter-spacing: 0.6em; border: 2px double Red; padding: 10px 16px}
TD {padding-top: 30px}
P {font-size: 0.72em; text-inden: 1.4em; color: #ffff80}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="テーブル全体">
<TR><TD>
<TABLE Summary="タイトル部分" Border="4" Class="Top">
<TR><TH>イタリア旅行記
</TABLE>
<TR><TD><P>ミラノ → ベネチア → フィレンツェ → ローマ<P>- 2003.8 -
</TABLE>
</BODY>
</HTML>
30-01-02.html
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>ミラノ大聖堂</TITLE>
<STYLE type="text/css">
BODY {text-align: center; letter-spacing: 0.1em; background-color: Aqua}
CAPTION {font: bold 1em/1.2em 'ＭＳ ゴシック', monospace; color: Black}
IMG {width: 200px; height: 150px; border-width: 0px}
IMG.Tate {width: 150px; height: 200px; border-width: 0px}
TR.Com {font-size: 0.8em}
P {width: 500px; font-size: 0.95em; margin-top: 0.5em; text-align: left;
text-indent: 1em; line-height: 1.4em}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="ミラノ大聖堂の説明">
<CAPTION>ミラノ大聖堂</CAPTION>
<TR><TD>
<TABLE Summary="写真4,5" Cellpadding="2">
<TR><TD><A Href="italy-4m.jpg"><IMG Src="italy-4ms.jpg" Alt="Italy-04" Class="Tate"></A></TD>
<TD><A Href="italy-5m.jpg"><IMG Src="italy-5ms.jpg" Alt="Italy-05"></A></TD></TR>
<TR Class="Com"><TD>ミラノ大聖堂</TD><TD>大聖堂の中</TD></TR>
</TABLE>
</TD></TR>
<TR><TD>
<P>大聖堂は現地語(イタリア語)でドゥオモ(duomo)という。ミラノのドゥオモは建造物
の大きさとしては世界第３位だが、イタリアゴシック建築の代表作と言われている。
まず、135 本の尖塔を持つその独特なデザインに目を奪われるが、何よりも増して
驚くのが、1386 年着工、1887 年完成、という実に 500 年に渡るその建造期間だ。
しかも、2003 年夏に行ったときは工事中であった。そして、このドゥオモの中には、
2245 体もの彫像が飾られている。</P>
</TD></TR>
</TABLE>
</BODY>
</HTML>
30-01-43.html
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>ヴェッキオ橋の説明</TITLE>
<STYLE type="text/css">
BODY {text-align: center; letter-spacing: 0.1em; background-color: Aqua}
CAPTION {font: bold 1em/1.2em 'ＭＳ ゴシック', monospace; color: Black}
IMG {width: 200px; height: 150px; border-width: 0px}
TR.Com {font-size: 0.8em}
P {width: 500px; font-size: 0.95em; margin-top: 0.5em; text-align: left;
text-indent: 1em; line-height: 1.4em}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="ヴェッキオ橋の説明">
<CAPTION>ヴェッキオ橋</CAPTION>
<TR><TD>
<TABLE Summary="写真15,9" Cellpadding="3">
<TR><TD><A Href="italy-15m.jpg"><IMG Src="italy-15ms.jpg" Alt="Italy-15ms"></A></TD>
<TD><A Href="italy-9m.jpg"><IMG Src="italy-9ms.jpg" Alt="Italy-09ms"></A></TD></TR>
<TR Class="Com"><TD>朝のヴェッキオ橋</TD><TD>夕暮れヴェッキオ橋</TD></TR>
</TABLE>
</TD></TR>
<TR><TD>
<P>ヴェッキオ橋はフィレンツェにある有名な橋だ。橋の中を歩いているときはさほど
感じないが、外からこの橋を眺めていると、中世の時代へタイムスリップして、あ
たかも自分がこの町の住人であったかのように思えてくる。橋には当時の行きかう
人達の姿が見え、町のにぎわいまでもが見えてくる。</P>
</TD></TR>
</TABLE>
</BODY>
</HTML>
]]>
