教材ドットコムオリジナル教材

Size: px

Start display at page:

Download "教材ドットコムオリジナル教材"

えのやなぎしま
4 years ago
Views:

1 問題次の画面写真を参考にソースを組みなさい画像素材は次のサイトにあるトップ大学専門学校授業 10 月 31 日画像素材ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示メニューページ ) top.htm( 右フレーム表示似顔絵イラスト表示ページ ) touroku.htm( 右フレーム表示ユーザー登録ページ ) 画像 1~3 をクリックするとこのように top.htm 内のアンカーにジャンプする touroku.htm のメニュー内文字 - 1 -

2 - 2 -

3 解答例 index.htm <TITLE> 似顔絵ドットコム </TITLE> <FRAMESET FRAMEBORDER=0 BORDER=0 COLS="25%,*"> <FRAME SRC="menu.htm" NAME="menu" SCROLLING=NO> <FRAME SRC="top.htm" NAME="main" NORESIZE> <NOFRAMES> <BODY> このページを表示するにはフレームを表示できる日本語対応のブラウザが必要です </NOFRAMES> </FRAMESET> top.htm <TITLE> メイン </TITLE> <BODY BGCOLOR="#ffbf00"> <HR ALIGN="center" WIDTH="90%"> <H2 ALIGN="center"> 似顔絵ドットコムへようこそ!</H2> <HR ALIGN="center" WIDTH="90%"> <TABLE CELLPADDING="5" ALIGN="center"> <TD BGCOLOR="#FFFFFF"><A NAME="a"> 画像 1</A> <TD><IMG SRC="image1.jpg" ALT=" 似顔絵 1" WIDTH="300" HEIGHT="400" BORDER="5"> <TD BGCOLOR="#FFFFFF"><A NAME="b"> 画像 2</A> <TD><IMG SRC="image2.jpg" ALT=" イラスト 1" WIDTH="400" HEIGHT="300" BORDER="2"> <TD BGCOLOR="#FFFFFF"><A NAME="c"> 画像 3</A> <TD><IMG SRC="image3.jpg" ALT=" 似顔絵 2" WIDTH="400" HEIGHT="300" BORDER="5"> - 3 -

4 menu.htm <TITLE> メニュー </TITLE> <BODY BGCOLOR="#ff6f44" TEXT="#800000" LINK="#800000" VLINK="#800000"> <TABLE WIDTH="150" BORDER="0" CELLSPACING="0" CELLPADDING="5" ALIGN="CENTER"> <TD WIDTH="100%" BGCOLOR="#ffcccc" ALIGN="CENTER"> 似顔絵ドットコム <BLOCKQUOTE> <A HREF="top.htm" TARGET="main"> ホーム </A> <OL> <LI><A HREF="top.htm#a" TARGET="main"> 画像 1</A><BR> <LI><A HREF="top.htm#b" TARGET="main"> 画像 2</A><BR> <LI><A HREF="top.htm#c" TARGET="main"> 画像 3</A><BR> </OL> <A HREF="touroku.htm" TARGET="main"> ユーザー登録 </A> <ADDRESS><A 管理者あて </A></ADDRESS> </BLOCKQUOTE> touroku.htm <TITLE> ユーザ登録 </TITLE> <BODY VLINK="#000066" LINK="#ff9900" BGCOLOR="#ffcc00"> <FORM ACTION="/cgi-bin/Register.cgi" METHOD="POST"> <TABLE CELLSPACING="0" CELLPADDING="3" WIDTH="500" ALIGN="CENTER" BORDER="0" BGCOLO R="#e1eec3"> <TD ALIGN="center"> <TABLE HEIGHT="5" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" ALIGN="CENTER" BGCOL OR="#e1eec3" BORDER="0"> <TR VALIGN="BOTTOM" ALIGN="center"> <TD VALIGN="BOTTOM" BGCOLOR="#ff6633"> <B> ユーザ登録 </B> <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="1"> <TD COLSPAN="2"> ご利用規約をお読みになってご同意の上ユーザ登録を行って下さい <TD> ご希望のユーザ名 <TD><INPUT MAXLENGTH="18" SIZE="30" NAME="REGISTER" <TD> パスワードリマインダ - 4 -

5 <TD><SELECT NAME="REMIND"> <OPTION VALUE="0" SELECTED>--- リストから一つ選んでください --- <OPTION VALUE="1"> 電話番号は? <OPTION VALUE="2"> 運転免許証番号は? <OPTION VALUE="3"> 学生証 / 社員証番号は? <OPTION VALUE="4"> レンタルビデオ会員証番号は? </SELECT> <TD> リマインダの答え <TD><INPUT MAXLENGTH="20" SIZE="30" NAME="REGISTER.REM_ANS" TYPE="text"> <TD> パスワード <TD><INPUT TYPE="password" MAXLENGTH="8" SIZE="30" NAME="REGISTER.PASSWD1"> <TD> パスワード ( 確認 ) <TD><INPUT TYPE="password" MAXLENGTH="8" SIZE="30" NAME="REGISTER.PASSWD2"> <TD> 連絡先メールアドレス <TD> <INPUT MAXLENGTH="60" SIZE="30" NAME="REGISTER.MAIL" TYPE="text"> <TD COLSPAN="2"> <FONT SIZE="-1"> フレッシュアイ発行のメールマガジン ( 無料 ) の配信を希望しますか? </FONT> <TD VALIGN="TOP"> メールマガジン申込 <TD> <INPUT TYPE="checkbox" CHECKED="1" VALUE="on" NAME="MAIL1"> 芸能時事の最新の話題 <BR> <INPUT TYPE="checkbox" CHECKED="1" VALUE="on" NAME="MAIL2"> おすすめ懸賞情報 <BR> <INPUT TYPE="checkbox" CHECKED="1" VALUE="on" NAME="MAIL3"> おすすめショッピング情報 <BR> <TD ALIGN="MIDDLE" COLSPAN="2"><CENTER> <INPUT TYPE="submit" VALUE=" 同意してユーザ登録する " NAME="SUBMIT"> <INPUT NAME="name" TYPE="reset" VALUE=" リセット "> <BR></CENTER> </FORM> - 5 -

6 - 6 -

フォームとインナー HTML を使って動的にページ内の文章を変更しよう問題 1. つぎの指示と画面を参考に HTML を組みなさい仕様テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると下部の文章がテキストボックスの内容に置き換わるフォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう問題 1. つぎの指示と画面を参考に HTML を組みなさい仕様テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると下部の文章がテキストボックスの内容に置き換わるフォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;