Microsoft Word IL3_3.doc

Size: px

Start display at page:

Download "Microsoft Word IL3_3.doc"

ありさつねざき
5 years ago
Views:

1 ホームページ作成 (Web ページ作成 ) Microsoft Internet Explorer6.0 WZ EDITOR4.0 Paint Shop Pro 年度情報リテラシー Ⅲ 学籍番号氏名あ

2 Web ページ作成 1.Web ページとは HTML(Hyper Text Markup Language) というコンピュータ言語で書かれたものでありブラウザとよばれるソフトを使って表示することができるがその中身は以下のようなものである <HTML> <HEAD><TITLE>2004 年度情報リテラシー Ⅲ</TITLE></HEAD> <BODY bgcolor="#7fffd4"> <H2 align="center">2004 年度情報リテラシー Ⅲ</H2> 2004/10/31 更新 <HR WIDTH="90%"> <CENTER> <TABLE BORDER="2" CELLPADDING="3"> <TR><TD ALIGN="CENTER"> 担当 </TD> <TD> 野坂康仁 (NOZAKA Yasuhito)</TD></TR> <TR><TD ALIGN="CENTER"> メールアドレス </TD> <TR><TD ALIGN="CENTER"> 教室 </TD> <TD>R651(6 号館 5 階 )</TD></TR> </TABLE> <TABLE BORDER="0" CELLPADDING="5"> <TR><TH COLSPAN="2" ALIGN="CENTER"><IMG SRC="2003_il3/new.gif"><BIG> 授業予定変更のお知らせ </BIG>(2004/10/31)</TH></TR> <TR><TD COLSPAN="2">11/11 のプレゼンテーションは 11/25 に延期し 11/25 予定の Web ページ作成にあたって及びタイピングテストを 11/11 におこないます </TD></TR> </TABLE> <TABLE BORDER="0" CELLPADDING="5"> <TR><TH COLSPAN="2" ALIGN="CENTER"><IMG SRC="2003_il3/new.gif"><BIG> プレゼンテーションのグループ分けについて </BIG>(2003/10/31)</TH></TR> <TR><TD COLSPAN="2"> プレゼンテーションのグループ分けは多数決により名簿順でグループを作ることとします </TD></TR> </TABLE> <TABLE BORDER="1" WIDTH="80%" CELLPADDING="5"> <TR><TH ALIGN="LEFT" COLSPAN="2"> 情報リテラシー Ⅲ</TH></TR> <TR><TD WIDTH="25%">1. 講義題目 </TD><TD WIDTH="75%"> 情報発信としてのプレゼンテーションソフトの利用とホームページ作成の基礎 </TD></TR> <TR><TD>2. 授業内容計画 </TD><TD> プレゼンテーションソフトを使っての発表資料の作成ホームページの仕組み情報倫理ホームページ作成に関しての授業を行なう <TABLE CELLPADDING="3"> <TR><TD> 主な項目 </TD><TD COLSPAN="5">1. プレゼンテーションとは </TD></TR> <TR><TD></TD><TD COLSPAN="5">2. プレゼンテーションソフトの基本操作 </TD></TR> <TR><TD></TD><TD COLSPAN="5">3. プレゼンテーション </TD></TR> <TR><TD></TD><TD COLSPAN="5">4.Web ページ作成にあたって </TD></TR> <TR><TD></TD><TD COLSPAN="5">5. タグによる Web ページ作成 </TD></TR> <TR><TD> シラバス </TD><TD><A HREF="2004_il3/2004lite3_0.pdf" TARGET="BLANK"> 短期大学木曜日 1 講時 </A><TD></TR></TD></TR> </TABLE> <TR><TD>3. 授業に際しての留意点 </TD><TD> コンピュータの基礎知識を必要とし情報リテラシー ⅠもしくはⅡを履修している方が望ましいなお学生諸君のコンピュータに対する積極的な態度を望む </TD></TR> <TR><TD>4. 教科書 </TD><TD> プリント (<A HREF="2004_il3/2004lite3_1.pdf" TARGET="BLANK">PowerPoint</A> Web ページ作成にあたって Web ページ作成 ) サブプリント </TD></TR> <TR><TD>5. 参考文献 </TD><TD> 文系のための情報リテラシー 梶川裕司村上正行共編 ( オーム社 ) 私が作る一夜づけの自分のホームページ 石澤義裕狩野祐子共著 ( 明日香出版社 ) 超図解 HTMLタグ辞典 石橋健一鐘ヶ江秀彦共著 ( エクスメディア )</TD></TR> </TABLE> </CENTER> </BODY> </HTML> 1

3 2.Web ページの仕組み Web ページは先にも述べたとおり HTML で書かれたものであってそれを見られるようにするためにはそのファイル ( 拡張子は htm or html) をインターネットに接続された www サーバと呼ばれるものに保存しなければならず見る側はブラウザを使ってそのサーバとファイル名 (URL) を指定して見ることができるなおファイルをサーバに保存するには FTP(File Transfer Protocol) ソフトを用いる 3.HTML とは HTML とは Hyper Text Markup Language の略である Text が普通の文字であるのに対し Hyper Text は複数のテキストを相互に関連付けて1つのデータとして扱う概念である利用法としては Web ページ上の文字や画像をクリックするだけで別の Web ページの情報を表示できるようにすること ( リンクを張ること ) が挙げられるまた Markup とはマーク ( タグ ) をつけてタイトルや段落中央揃え等を指示することであり HTML とは Hyper Text を扱うことができる Markup 言語ということであるなお HTML で書いたファイルのファイル名は半角で付けて保存し拡張子は htm もしくは html にする 4. タグ HTML のこれは~という要素ですということを表すマークのことであり通常は < > のように < と > でくくるタグには開始タグと終了タグがあり終了タグは </ > のように / が入り省略できるものもあるなおタグの入力は全て半角であり大文字小文字の区別はないまたタグには要素名の他に属性 ( 付加的な情報 ) をつけることもできる入力例 ) これは 段落 を表すタグです表示例 ) これは段落を表すタグです 5.HTML の基本構造 Web ページ作成する際に最低限必要なタグがあり以下の3つがあれば HTML 文書は完成する <HTML> 今から HTML を書き始めますという意味 <HEAD> ドキュメント情報 ( タイトルや作成者などの情報 ) を定義するものであり通常 <TITLE> というタグを埋め込みタイトルをマークする <BODY> 本文 ( ページに表示する内容 ) をマークする 6. タグのいろいろ段落 改行 見出し <Hn> (nは1~6の数字) 太字 斜体 下線 2

4 文字サイズ (nは1~7の数字) 文字色 ( は RGB で指定 ) Web ページ上で用いる色の指定は6 桁の数字とアルファベットの組み合わせで 16,777,216 色の中から指定できる背景色 <BODY BGCOLOR= # > ( は RGB で指定 ) < 練習 1>X: nozaka 2004lite3 のフォルダ内にある index.html というファイルを取り込み以下のタグをつけて完成しなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BGCOLOR="#999933"> <CENTER> <H1> 京都案内のページへようこそ </H1> <H2> 多くの情報が盛りだくさん!</H2> </CENTER> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください メニュー 京都の神社仏閣案内 京都の食事どころ案内 京都のお土産案内 京都のホテル案内 京都の交通案内 京都の行事予定 メールはこちらに nozayasu@kyoto.ne.jp </BODY> </HTML> 7. 罫線 <HR> 罫線を表示 <HR> 太さを指定 <HR SIZE=n> (n=1~100 であり無指定は2) 長さを指定 <HR WIDTH= n% > (n は画面の幅に対するパーセンテージ ) <HR WIDTH= n > (n はピクセル数 ) ピクセルとは画素数のことであり 1 画素は 0.339mm であるピクセルで指定すると画面の大きさに関係なく長さを一定に表示することができる 8. 画像について Web ページ上で表示できる画像の種類には GIF 形式と JPEG 形式がある GIF 形式の画像は 256 色で表示するのに対し JPEG 形式はフルカラーで表示できる一般に GIF 形式はバナーやボタンなど色数の少ない画像に使用し JPEG 形式は写真などの画像に使用することが多い 3

5 画像の種類色数ファイルサイズ用途 GIF 形式 256 色小バナーやボタン等 JPEG 形式フルカラー大写真等 9. 画像の挿入 <IMG SRC> 画像を挿入 <IMG SRC= ファイル名 > 代替文字の指定 < IMG SRC= ファイル名 ALT= 代替文字 > 大きさ指定 <IMG SRC= ファイル名 WIDTH= n% HEIGHT= n% > 枠の太さ指定 <IMG SRC= ファイル名 BORDER= n > (n はピクセル数 ) 画像ファイルが HTML ファイルと異なるフォルダ内にある場合 <IMG SRC= フォルダ名 / ファイル名 > となる 10. 背景 <BODY BACKGROUD= x > </BODY> 背景の指定 <BODY BACKGROUD= x > </BODY> (x はファイル名 ) < 練習 2>X: nozaka 2004lite3 のフォルダ内にある img というフォルダを取り込み練習 1で作成した index.html を開いて以下のタグをつけなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <H1> 京都案内のページへようこそ </H1> <H2> 多くの情報が盛りだくさん!</H2> <HR WIDTH="80%"> </CENTER> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください メニュー <IMG SRC="img/button1.gif"> 京都の神社仏閣案内 <IMG SRC="img/button2.gif"> 京都の食事どころ案内 <IMG SRC="img/button3.gif"> 京都のお土産案内 <IMG SRC="img/button1.gif"> 京都のホテル案内 <IMG SRC="img/button2.gif"> 京都の交通案内 <IMG SRC="img/button3.gif"> 京都の行事予定 メールはこちらに <IMG SRC="img/mail.gif">gaidai@kufs.ac.jp </BODY> </HTML> 4

6 11. リンク <A HREF= URL >aaa</a> リンク先指定 <A HREF= URL > 文字や画像ファイル </A> (URL はリンク先 URL もしくはファイル名 ) メール作成指定 <A HREF= mailto: メールアドレス > メールアドレス </A> 特定の場所へのリンク <A NAME= 名前 > 文字や画像ファイル </A> <A HREF= URL# 名前 > 文字や画像ファイル </A> < 練習 3> 練習 2 で作成した index.html を開いて以下のタグをつけて完成しなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <A NAME= top ><H1> 京都案内のページへようこそ </H1> </A> <H2> 多くの情報が盛りだくさん!</H2> <HR WIDTH="80%"> </CENTER> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください メニュー <A HREF= jinja.html ><IMG SRC="img/button1.gif"> 京都の神社仏閣案内 </A> <A HREF= syokuji.html ><IMG SRC="img/button2.gif"> 京都の食事どころ案内 </A> <A HREF= miyage.html ><IMG SRC="img/button3.gif"> 京都のお土産案内 </A> <A HREF= hotel.html ><IMG SRC="img/button1.gif"> 京都のホテル案内 </A> <A HREF= kotsu.html ><IMG SRC="img/button2.gif"> 京都の交通案内 </A> <A HREF= gyoji.html ><IMG SRC="img/button3.gif"> 京都の行事予定 </A> メールはこちらに <A HREF=mailto:nozayasu@kyoto.ne.jp><IMG SRC="img/mail.gif">gaidai@kufs.ac.jp</A> <A HREF= #top > このページの先頭へ </A> </BODY> </HTML> 5

7 12. 表 <TABLE><TR><TD> ~ </TD></TR></TABLE> 表の挿入 <TABLE> ~ </TABLE> 外枠の幅 <TABLE BORDER=n> ~ </TABLE> (n はピクセル数 ) 表の位置 <TABLE ALIGN= x > ~ </TABLE> (x は LEFT, CENTER, RIGHT) 表の大きさ <TABLE WIDTH= n% HEIGHT= n% > ~ </TABLE> 行の指定 <TR> ~ </TR> セル内の強調 <TH> ~ </TH> セルの指定 <TD> ~ </TD> 複数のセル ( 横方向 ) を結合 <TD COLSPAN=n> ~ </TD> (n はセル数 ) 複数のセル ( 縦方向 ) を結合 <TD ROWSPAN=n> ~ </TD> (n はセル数 ) 例 )<TABLE BORDER=3 ALIGN= CENTER WIDTH= 70% > <TR><TD COLSPAN=3 ALIGN= CENTER > 情報リテラシー Ⅲ 課題一覧表 </TD> </TR> <TR><TH> 課題名 ></TH><TH> 締切日 </TH> <TH> 内容 </TH> </TR> <TR><TD ALIGN= CENTER > タイピングテスト </TD> <TD ALIGN= RIGHT >11 月 11 日 </TD> <TD ALIGN= LEFT >350 文字 </TD> </TR> <TR><TD ALIGN= CENTER >PowerPoint 課題 </TD> <TD ALIGN= RIGHT >12 月 2 日 </TD> <TD ALIGN= LEFT > スライド作成 </TD> </TR> <TR><TD ALIGN= CENTER > タイピングテスト </TD> <TD ALIGN= RIGHT >1 月 27 日 </TD> <TD ALIGN= LEFT >350 文字 </TD> </TR> <TR><TD ALIGN= CENTER >Web ページ課題 </TD> <TD ALIGN= RIGHT >1 月 27 日 </TD> <TD ALIGN= LEFT >3ページ以上 </TD> </TR> </TABLE> 情報リテラシー Ⅲ 課題一覧表課題名締切日内容タイピングテスト 11 月 11 日 350 文字 PowerPoint 課題 12 月 2 日スライド作成タイピングテスト 1 月 27 日 350 文字 Web ページ課題 1 月 27 日 3ページ以上 6

8 < 練習 4> 練習 3で作成した index.html を開いて以下のタグをつけて完成しなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <A NAME= top ><H1> 京都案内のページへようこそ </H1> </A> <H2> 多くの情報が盛りだくさん!</H2> <HR WIDTH="80%"> </CENTER> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください <TABLE BORDER="1" ALIGN="CENTER"> <TR><TH COLSPAN=2> メニュー </TH></TR> <TR><TD><A HREF= jinja.html ><IMG SRC="img/button1.gif"></TD> <TD> 京都の神社仏閣案内 </A></TD></TR> <TR><TD><A HREF= syokuji.html ><IMG SRC="img/button2.gif"></TD> <TD> 京都の食事どころ案内 </A></TD></TR> <TR><TD><A HREF= miyage.html ><IMG SRC="img/button3.gif"></TD> <TD> 京都のお土産案内 </A></TD></TR> <TR><TD><A HREF= hotel.html ><IMG SRC="img/button1.gif"></TD> <TD> 京都のホテル案内 </A></TD></TR> <TR><TD><A HREF= kotsu.html ><IMG SRC="img/button2.gif"></TD> <TD> 京都の交通案内 </A></TD></TR> <TR><TD><A HREF= gyoji.html ><IMG SRC="img/button3.gif"></TD> <TD> 京都の行事予定 </A></TD></TR> </TABLE> メールはこちらに <A <A HREF= #top > このページの先頭へ </A> </BODY> </HTML> 13. フレーム <FRAMESET> ~ </FRAMESET> フレームとは画面を分割するものであり通常は <HEAD> の後に <BODY> で始まるがフレームでは <FRAMESET> で始まり </FRAMESET> で終了しその間にフレームの分割法やどの HTML ファイルを表示するかを指定するフレームの定義 <FRAMESET> ~ </FRAMESET> フレームの縦割り <FRAMESET COLS= n1, n2 > ~ </FRAMESET > (n1 n2 はピクセル数 or 画面に対する割合 (%)) フレームの横割り <FRAMESET ROWS= n1, n2 > ~ </FRAMESET > (n1 n2 はピクセル数 or 画面に対する割合 (%)) 7

9 なお一方だけ数値を指定してもう一方を * にすると画面サイズから指定した数値を自動的に差し引いてフレームを作成してくれるまた <FRAMESET> タグを組み合わせるとさらに細かく分割できるフレーム内のファイル指定 <FRAME SRC= x > (x はファイル名 ) 別フレームに表示 <FRAME SRC= x NAME= y > <A HREF= z TARGET= y > 文字や画像ファイル </A> (x はファイル名 y はフレーム名 z はファイル名 ) フレーム枠線の固定 <FRAME NORESIZE SRC= x > (x はファイル名 ) 例 )<FRAMESET ROWS= 100,* > <FRAMESET COLS= 30%,70% > <FRAME SRC= frame1.html > <FRAME SRC= frame2.html > </FRAMESET> <FRAME SRC= frame3.html > </FRAMESET> frame1.html が表示される 30% 100 ピクセル frame2.html が表示される 70% frame3.html が表示される < 練習 5> 練習 4のファイル (index.html) をコピーしそれぞれのファイル名を top.html および menu.html に変更しなさい < 練習 6> 以下のタグを入力し index.html という名前で保存しなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <FRAMESET COLS="15%,85%"> <FRAME SRC="menu.html" NAME="menu"> <FRAME SRC="top.html" NAME="main"> </FRAMESET> </HTML> 8

10 < 練習 7> 練習 5でファイル名を変更した top.html を開いて以下のように修正して上書き保存しなさい <HTML><HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <H1> 京都案内のページへようこそ </H1> </A> <H2> 多くの情報が盛りだくさん!</H2> <HR WIDTH="80%"> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください メールはこちらに <A </CENTER></BODY></HTML> < 練習 8> 練習 5でファイル名を変更した menu.html を開いて以下のように修正して上書き保存しなさい <HTML><HEAD><TITLE> メニュー </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <A NAME= top ><H1> 京都案内のページへようこそ </H1> </A> <H2> 多くの情報が盛りだくさん!</H2> <HR WIDTH="80%"> </CENTER> はじめに このホームページをご覧になってくださりありがとうございますこのページではさまざまな京都の情報を提供しておりますのでぜひご活用ください <TABLE BORDER="0" ALIGN="CENTER"> <TR><TH COLSPAN=2> メニュー </TH></TR> <TR><TD><A HREF= jinja.html ><IMG SRC="img/button1.gif"></TD> <TD> 京都の神社仏閣案内 </A></TD></TR> <TR><TD><A HREF= syokuji.html ><IMG SRC="img/button2.gif"></TD> <TD> 京都の食事どころ案内 </A></TD></TR> <TR><TD><A HREF= miyage.html ><IMG SRC="img/button3.gif"></TD> <TD> 京都のお土産案内 </A></TD></TR> <TR><TD><A HREF= hotel.html ><IMG SRC="img/button1.gif"></TD> <TD> 京都のホテル案内 </A></TD></TR> <TR><TD><A HREF= kotsu.html ><IMG SRC="img/button2.gif"></TD> <TD> 京都の交通案内 </A></TD></TR> <TR><TD><A HREF= gyoji.html ><IMG SRC="img/button3.gif"></TD> <TD> 京都の行事予定 </A></TD></TR> </TABLE></BODY></HTML> 9

11 < 練習 9>X: nozaka 2004lite3 のフォルダ内にある jinja.html syokuji.html miyage.html hotel.html kotsu.html gyoji.html の6つのファイルを取り込みその後 index.html を開いて内容やリンクが正しくできているかを確認しなさい 10

12 簡単な画像処理方法画像のサイズを変更する 1.Paint Shop Pro を起動し [ ファイル ]-[ 開く ] でサイズ変更したい画像を開きますこの時画像が表示されているウィンドウのタイトルバーにファイル名 [1:1] と表示されますがファイル名の後の [*:*] が [1:1] になっていることを確認するもし [1:2] や [2:1] になっていると画像が縮小もしくは拡大されて表示されているので [ 表示 ]-[ 実寸表示 (1:1)] でクリックしますここが 1:1 になっていることを確認する 2.[ イメージ ]-[ サイズ変更 ] をクリックしますすると以下の画面が出ますのでサイズの指定方法をピクセル単位のサイズパーセンテージ指定印刷時のサイズから選びますこの時縦横の比率を維持するにチェックが入っていないと縦と横の比率が変わってしまうので気をつけるここにチェックが入っていることを確認する 3.[ ファイル ]-[ 上書き保存 ] でクリックします 11

13 画像の一部を切り取る ( トリミング ) 1. 編集したい画像を開きツールパレットバーのトリミングボタンをクリックしますここをクリック 2. マウスポインタの形が変わる ( ) ので左上の + 部分に切り取りたい部分の角を合わせ必要個所までドラッグします 3. 四角い枠が出ますので切り取る範囲を変更するには枠にマウスポインタを合わせドラッグして範囲を変更し最終的に切り取る範囲が決まれば枠の中でダブルクリックしますすると枠で囲まれた部分だけが切り取られて表示されますので上書き保存または名前をつけて保存をします画像形式の変更 1. 変更したい画像を一度開き [ ファイル ]-[ 名前をつけて保存 ] をクリックします 2. ファイルの種類のをクリックして保存したい形式を選びファイル名をつけて保存ボタンをクリックしますここをクリック 12

画像の回転 1. 回転させたい画像を開き [ イメージ ]-[ 回転 ] をクリックします 2.

透過の設定をしたい画像を一度開き [ カラー ]-[ 透過色の設定 ] をクリックします 2.

が出ますのでパレットは最適化 (Median Cut) にチェックがあり減色方法は近似色にチェックが入っているのを確認して OK

透過色の設定画面が出ますので次のパレットインデックスを透過に設定するにチェックを入れ

14 画像の回転 1. 回転させたい画像を開き [ イメージ ]-[ 回転 ] をクリックします 2. 以下の画面が出ますので回転させたい方向と角度を指定して OK ボタンをクリックします透過の設定 1. 透過の設定をしたい画像を一度開き [ カラー ]-[ 透過色の設定 ] をクリックします 2.GIF 形式以外の画像を開いた場合警告メッセージ ( 図 A) が出ますがはいボタンをクリックし次に減色の設定画面 ( 図 B) が出ますのでパレットは最適化 (Median Cut) にチェックがあり減色方法は近似色にチェックが入っているのを確認して OK ボタンをクリックします図 A 図 B 3. 透過色の設定画面が出ますので次のパレットインデックスを透過に設定するにチェックを入れそのダイアログボックスを画像と重ならない場所に移動します 4. 画像にマウスポインタを合わせると形がスポイド状に変わるので透過したい色をクリックして OK ボタンをクリックします 5.[ ファイル ]-[ 名前をつけて保存 ] でクリックしファイル形式を CompuServe Graphics Interchange(*.gif) にして保存ボタンを透過処理の例クリックします透過処理なし透過処理あり 13

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合