ホームページ作成 (Web ページ作成 ) Microsoft Internet Explorer6.0 WZ EDITOR4.0 Paint Shop Pro 7 2004 年度情報リテラシー Ⅲ 学籍番号氏名あ
Web ページ作成 1.Web ページとは HTML(Hyper Text Markup Language) というコンピュータ言語で書かれたものであり ブラウザとよばれるソフトを使って表示することができるが その中身は 以下のようなものである <HTML> <HEAD><TITLE>2004 年度情報リテラシー Ⅲ</TITLE></HEAD> <BODY bgcolor="#7fffd4"> <H2 align="center">2004 年度情報リテラシー Ⅲ</H2> <P ALIGN="RIGHT">2004/10/31 更新 </P> <HR WIDTH="90%"><BR> <CENTER> <TABLE BORDER="2" CELLPADDING="3"> <TR><TD ALIGN="CENTER"> 担当 </TD> <TD> 野坂康仁 (NOZAKA Yasuhito)</TD></TR> <TR><TD ALIGN="CENTER"> メールアドレス </TD> <TD>y_nozaka@kufs.ac.jp</TD></TR> <TR><TD ALIGN="CENTER"> 教室 </TD> <TD>R651(6 号館 5 階 )</TD></TR> </TABLE><BR> <TABLE BORDER="0" CELLPADDING="5"> <TR><TH COLSPAN="2" ALIGN="CENTER"><IMG SRC="2003_il3/new.gif"><BIG><B> 授業予定変更のお知らせ </B></BIG><SMALL>(2004/10/31)</SMALL></TH></TR> <TR><TD COLSPAN="2"><U>11/11 の プレゼンテーション は 11/25 に延期し 11/25 予定の Web ページ作成にあたって 及びタイピングテストを 11/11 におこないます </U></TD></TR> </TABLE><BR> <TABLE BORDER="0" CELLPADDING="5"> <TR><TH COLSPAN="2" ALIGN="CENTER"><IMG SRC="2003_il3/new.gif"><BIG><B> プレゼンテーションのグループ分けについて </B></BIG><SMALL>(2003/10/31)</SMALL></TH></TR> <TR><TD COLSPAN="2"><U> プレゼンテーションのグループ分けは多数決により 名簿順でグループを作ることとします </U></TD></TR> </TABLE><BR> <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> プレゼンテーションソフトを使っての発表資料の作成 ホームページの仕組み 情報倫理 ホームページ作成に関しての授業を行なう <P><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></P> <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 ページ作成 )<BR> サブプリント </TD></TR> <TR><TD>5. 参考文献 </TD><TD> 文系のための情報リテラシー <BR> 梶川裕司 村上正行共編 ( オーム社 )<BR> 私が作る一夜づけの自分のホームページ <BR> 石澤義裕 狩野祐子共著 ( 明日香出版社 )<BR> 超図解 HTMLタグ辞典 <BR> 石橋健一 鐘ヶ江秀彦共著 ( エクスメディア )</TD></TR> </TABLE> </CENTER> </BODY> </HTML> 1
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 の これは~という要素です ということを表すマークのことであり 通常は < > のように < と > でくくる タグには 開始タグと終了タグがあり 終了タグは </ > のように / が入り 省略できるものもある なお タグの入力は全て半角であり 大文字 小文字の区別はない また タグには 要素名の他に属性 ( 付加的な情報 ) をつけることもできる 入力例 )<P ALIGN= CENTER > これは <U> 段落 </U> を表すタグです 表示例 ) これは段落を表すタグです 5.HTML の基本構造 Web ページ作成する際に最低限必要なタグがあり 以下の3つがあれば HTML 文書は完成する <HTML> 今から HTML を書き始めますという意味 <HEAD> ドキュメント情報 ( タイトルや作成者などの情報 ) を定義するものであり 通常 <TITLE> というタグを埋め込み タイトルをマークする <BODY> 本文 ( ページに表示する内容 ) をマークする 6. タグのいろいろ段落 <P> 改行 <BR> 見出し <Hn> (nは1~6の数字) 太字 <B> 斜体 <I> 下線 <U> 2
文字サイズ <FONT SIZE= n > (nは1~7の数字) 文字色 <FONT COLOR= # > ( は 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><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> </CENTER><BR> <FONT SIZE= 4 ><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <FONT SIZE= 4 ><B> メニュー </B></FONT><BR> <FONT COLOR= #CCFF99 > 京都の神社仏閣案内 </FONT><BR> <FONT COLOR= #0000FF > 京都の食事どころ案内 </FONT><BR> <FONT COLOR= #66FF33 > 京都のお土産案内 </FONT><BR> <FONT COLOR= #66FFFF > 京都のホテル案内 </FONT><BR> <FONT COLOR= #FFCC00 > 京都の交通案内 </FONT><BR> <FONT COLOR= #CC9999 > 京都の行事予定 </FONT><BR> <P><FONT SIZE= 4 ><B><U> メールはこちらに </U></B></FONT><BR> 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
画像の種類色数ファイルサイズ用途 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><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> <HR WIDTH="80%"> </CENTER><BR> <FONT SIZE="4"><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <P><FONT SIZE="4"><B> メニュー </B></FONT><BR> <IMG SRC="img/button1.gif"><FONT COLOR= #CCFF99 > 京都の神社仏閣案内 </FONT><BR> <IMG SRC="img/button2.gif"><FONT COLOR= #0000FF > 京都の食事どころ案内 </FONT><BR> <IMG SRC="img/button3.gif"><FONT COLOR= #66FF33 > 京都のお土産案内 </FONT><BR> <IMG SRC="img/button1.gif"><FONT COLOR= #66FFFF > 京都のホテル案内 </FONT><BR> <IMG SRC="img/button2.gif"><FONT COLOR= #FFCC00 > 京都の交通案内 </FONT><BR> <IMG SRC="img/button3.gif"><FONT COLOR= #CC9999 > 京都の行事予定 </FONT><BR> <P><FONT SIZE="4"><B><U> メールはこちらに </U></B></FONT><BR> <IMG SRC="img/mail.gif">gaidai@kufs.ac.jp </BODY> </HTML> 4
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><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> </A> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> <HR WIDTH="80%"> </CENTER><BR> <FONT SIZE="4"><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <FONT SIZE="4"><B> メニュー </B></FONT><BR> <A HREF= jinja.html ><IMG SRC="img/button1.gif"><FONT COLOR= #CCFF99 > 京都の神社仏閣案内 </FONT></A><BR> <A HREF= syokuji.html ><IMG SRC="img/button2.gif"><FONT COLOR= #0000FF > 京都の食事どころ案内 </FONT></A><BR> <A HREF= miyage.html ><IMG SRC="img/button3.gif"><FONT COLOR= #66FF33 > 京都のお土産案内 </FONT></A><BR> <A HREF= hotel.html ><IMG SRC="img/button1.gif"><FONT COLOR= #66FFFF > 京都のホテル案内 </FONT></A><BR> <A HREF= kotsu.html ><IMG SRC="img/button2.gif"><FONT COLOR= #FFCC00 > 京都の交通案内 </FONT></A><BR> <A HREF= gyoji.html ><IMG SRC="img/button3.gif"><FONT COLOR= #CC9999 > 京都の行事予定 </FONT></A><BR> <P><FONT SIZE="4"><B><U> メールはこちらに </U></B></FONT><BR> <A HREF=mailto:nozayasu@kyoto.ne.jp><IMG SRC="img/mail.gif">gaidai@kufs.ac.jp</A> <P><A HREF= #top > このページの先頭へ </A> </BODY> </HTML> 5
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
< 練習 4> 練習 3で作成した index.html を開いて 以下のタグをつけて完成しなさい <HTML> <HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <A NAME= top ><H1><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> </A> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> <HR WIDTH="80%"> </CENTER><BR> <FONT SIZE="4"><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <TABLE BORDER="1" ALIGN="CENTER"> <TR><TH COLSPAN=2><FONT SIZE="4"><B> メニュー </B></FONT></TH></TR> <TR><TD><A HREF= jinja.html ><IMG SRC="img/button1.gif"></TD> <TD><FONT COLOR= #CCFF99 > 京都の神社仏閣案内 </FONT></A></TD></TR> <TR><TD><A HREF= syokuji.html ><IMG SRC="img/button2.gif"></TD> <TD><FONT COLOR= #0000FF > 京都の食事どころ案内 </FONT></A></TD></TR> <TR><TD><A HREF= miyage.html ><IMG SRC="img/button3.gif"></TD> <TD><FONT COLOR= #66FF33 > 京都のお土産案内 </FONT></A></TD></TR> <TR><TD><A HREF= hotel.html ><IMG SRC="img/button1.gif"></TD> <TD><FONT COLOR= #66FFFF > 京都のホテル案内 </FONT></A></TD></TR> <TR><TD><A HREF= kotsu.html ><IMG SRC="img/button2.gif"></TD> <TD><FONT COLOR= #FFCC00 > 京都の交通案内 </FONT></A></TD></TR> <TR><TD><A HREF= gyoji.html ><IMG SRC="img/button3.gif"></TD> <TD><FONT COLOR= #CC9999 > 京都の行事予定 </FONT></A></TD></TR> </TABLE> <P><FONT SIZE="4"><B><U> メールはこちらに </U></B></FONT><BR> <A HREF=mailto:nozayasu@kyoto.ne.jp><IMG SRC="img/mail.gif">gaidai@kufs.ac.jp</A> <P><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
なお 一方だけ数値を指定して もう一方を * にすると画面サイズから指定した数値を自動的に差し引いてフレームを作成してくれる また <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
< 練習 7> 練習 5でファイル名を変更した top.html を開いて 以下のように修正して上書き保存しなさい <HTML><HEAD><TITLE> 京都案内のページ </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <H1><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> </A> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> <HR WIDTH="80%"> <BR> <FONT SIZE="4"><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <P><FONT SIZE="4"><B><U> メールはこちらに </U></B></FONT><BR> <A HREF=mailto:nozayasu@kyoto.ne.jp><IMG SRC="img/mail.gif">nozayasu@kyoto.ne.jp</A> </CENTER></BODY></HTML> < 練習 8> 練習 5でファイル名を変更した menu.html を開いて 以下のように修正して上書き保存しなさい <HTML><HEAD><TITLE> メニュー </TITLE></HEAD> <BODY BACKGROUND="img/back.gif"> <CENTER> <A NAME= top ><H1><FONT COLOR= BLUE > 京都案内のページへようこそ </FONT></H1> </A> <H2><FONT COLOR= GREEN > 多くの情報が盛りだくさん!</FONT></H2> <HR WIDTH="80%"> </CENTER><BR> <FONT SIZE="4"><B> はじめに </B></FONT><BR> <P> このホームページをご覧になってくださりありがとうございます このページではさまざまな京都の情報を提供しておりますので ぜひ ご活用ください <TABLE BORDER="0" ALIGN="CENTER"> <TR><TH COLSPAN=2><FONT SIZE="4"><B> メニュー </B></FONT></TH></TR> <TR><TD><A HREF= jinja.html ><IMG SRC="img/button1.gif"></TD> <TD><FONT COLOR= #CCFF99 > 京都の神社仏閣案内 </FONT></A></TD></TR> <TR><TD><A HREF= syokuji.html ><IMG SRC="img/button2.gif"></TD> <TD><FONT COLOR= #0000FF > 京都の食事どころ案内 </FONT></A></TD></TR> <TR><TD><A HREF= miyage.html ><IMG SRC="img/button3.gif"></TD> <TD><FONT COLOR= #66FF33 > 京都のお土産案内 </FONT></A></TD></TR> <TR><TD><A HREF= hotel.html ><IMG SRC="img/button1.gif"></TD> <TD><FONT COLOR= #66FFFF > 京都のホテル案内 </FONT></A></TD></TR> <TR><TD><A HREF= kotsu.html ><IMG SRC="img/button2.gif"></TD> <TD><FONT COLOR= #FFCC00 > 京都の交通案内 </FONT></A></TD></TR> <TR><TD><A HREF= gyoji.html ><IMG SRC="img/button3.gif"></TD> <TD><FONT COLOR= #CC9999 > 京都の行事予定 </FONT></A></TD></TR> </TABLE></BODY></HTML> 9
< 練習 9>X: nozaka 2004lite3 のフォルダ内にある jinja.html syokuji.html miyage.html hotel.html kotsu.html gyoji.html の6つのファイルを取り込み その後 index.html を開いて内容やリンクが正しくできているかを確認しなさい 10
簡単な画像処理方法 画像のサイズを変更する 1.Paint Shop Pro を起動し [ ファイル ]-[ 開く ] で サイズ変更したい画像を開きます この時 画像が表示されているウィンドウのタイトルバーに ファイル名 [1:1] と表示されますが ファイル名の後の [*:*] が [1:1] になっていることを確認する もし [1:2] や [2:1] になっていると 画像が縮小もしくは拡大されて表示されているので [ 表示 ]-[ 実寸表示 (1:1)] でクリックします ここが 1:1 になっていることを確認する 2.[ イメージ ]-[ サイズ変更 ] をクリックします すると以下の画面が出ますので サイズの指定方法を ピクセル単位のサイズ パーセンテージ指定 印刷時のサイズ から選びます この時 縦横の比率を維持する にチェックが入っていないと縦と横の比率が変わってしまうので気をつける ここにチェックが入っていることを確認する 3.[ ファイル ]-[ 上書き保存 ] でクリックします 11
画像の一部を切り取る ( トリミング ) 1. 編集したい画像を開き ツールパレットバー の トリミング ボタンをクリッ クします ここをクリック 2. マウスポインタの形が変わる ( ) ので 左上の + 部分に切り取りたい部分の角を合わせ 必要個所までドラッグします 3. 四角い枠が出ますので 切り取る範囲を変更するには 枠にマウスポインタを合わせ ドラッグして範囲を変更し 最終的に切り取る範囲が決まれば 枠の中でダブルクリックします すると 枠で囲まれた部分だけが切り取られて表示されますので 上書き保存 または 名前をつけて保存 をします 画像形式の変更 1. 変更したい画像を一度開き [ ファイル ]-[ 名前をつけて保存 ] をクリックします 2. ファイルの種類 の をクリックして 保存したい形式を選び ファイル名をつけて 保存 ボタンをクリックします ここをクリック 12
画像の回転 1. 回転させたい画像を開き [ イメージ ]-[ 回転 ] をクリックします 2. 以下の画面が出ますので 回転させたい方向と角度を指定して OK ボタンをクリックします 透過の設定 1. 透過の設定をしたい画像を一度開き [ カラー ]-[ 透過色の設定 ] をクリックします 2.GIF 形式以外の画像を開いた場合 警告メッセージ ( 図 A) が出ますが はい ボタンをクリックし 次に減色の設定画面 ( 図 B) が出ますので パレット は 最適化 (Median Cut) にチェックがあり 減色方法 は 近似色 にチェックが入っているのを確認して OK ボタンをクリックします 図 A 図 B 3. 透過色の設定 画面が出ますので 次のパレットインデックスを透過に設定する にチェックを入れ そのダイアログボックスを画像と重ならない場所に移動します 4. 画像にマウスポインタを合わせると 形がスポイド状に変わるので 透過したい色 をクリックして OK ボタンをクリックします 5.[ ファイル ]-[ 名前をつけて保存 ] でクリックし ファイル形式 を CompuServe Graphics Interchange(*.gif) にして 保存 ボタンを 透過処理の例 クリックします 透過処理なし透過処理あり 13