前回のページはちゃんと理解できたかな?
今回も楽しい内容になるよ！この前は白黒から一転ど派手なカラーを、
使えるようになったね。
今までは､文字中心のページだったから､色をつけても、結構地味な面があったけど、
今回は画像を貼り付けてみたいと思う。
さてと早速いってみようか。まずは今回目標となるページはここ。 サンプル１
そしたらまず､サンプル１のソースを出してみよう。
出し方は覚えてるよね?
忘れちゃったという人のためにもう一回。【右クリック】→【ソースの表示】
ホームページで使える画像
ホームページ上で使える画像って決まってるって知ってた?
基本的には、JPEG形式とGIF形式。
（最近GIFの特許問題があってPNG形式というのもある。これに関しては、
ネット上にいろいろ情報があるから自分で調べてみて）
用途によって使い分けるんだけど、写真なんかだったらJPEG形式、
普通のイメージ(画像)例えば､タイトルの文字とか、
ボタンとかに使うんだったらGIFって覚えとけば何とかなるよ。
そんなのどこでわかるんだ！という人のために、ちょっと解説。
【拡張子の表示の仕方】
まず、Windowsユーザーなら(とゆうかMacはさっぱりわからない･･･)
【マイコンピュータ】か､【エクスプローラー】を開く。
メニューバーの【表示】から、【フォルダオプション】を選択。
そこで開いたタブの【表示】を選択。
その中の”登録されているファイルの拡張子は表示しない”の
チェックマークをはずす。
これでファイルの拡張子を表示できるようになる。
こうすれば、ファイルの後ろにgif、とかjpgとかいうのが出てくるから。
ちなみに、JPEG形式の拡張子は、jpg、jpeg、JPG、JPEGと、どれでもいけるんだけど、
ここでは、jpgで統一したいと思う。統一しとかないと、後で、大変なことになる･･･
画像の作り方
こいつはちょっとめんどくさいな･･･
なんか､画像を扱えるソフトを持ってるといいんだけど、持ってないよな､普通･･･
ネット上には､フリーで画像を提供しているサイトがあるから、そこからもらってきてもいい。
ただしその時は､そのサイトの利用規定を読んで使うこと！
あと、Microsoft Wordが入ってるなら、ワードアートで文字画像を作ることもできる。
それで､またMicrosoft OfficeについてくるPhoto Editerで､
写真を多少いじることもできる。
今回は､サンプル１で使った画像を使って、ホームページに取り入れよう。
画像部品はこちら･･･部品
画像の上で右クリックして【画像を保存】を選択して、適当な名前をつけて、
HTMLファイルの置いてあるフォルダと同じ場所に保存して。
<BODY BACKGROUND="ファイル名.拡張子">
さてと準備はいいかな？
まずは､背景に画像を入れてみよう。
前回は､色をつけただけだったけど、背景に画像を入れてやることにより
がらっとイメージが変わるよ。
前回の<BODY>タグの中を､下のように変えてやる。
<BODY BACKGROUND="ファイル名.拡張子">
これだけ･･･
部品のところで､背景用の画像がこんなに小さくていいの?と思った人いるよね?
背景の画像は､その画像を自動的に並べて表示してくれるから、
どんな小さなのでもOK。
ただ､文字が読みにくくなるようなものは使わないほうがいいのと、
あんまりファイルサイズが大きいものは避けたほうがベター。
サンプル２
<img src="ファイル名.拡張子">タグ
それじゃ個別に画像をつけたい場合はどうするか?
<img>タグというものを使う。画像指定の方法は、
<img src="ファイル名.拡張子">でOK。
サンプル３
ここでは、imageというフォルダを作ってその中にある画像ファイルを指定している。
だから、『ファイル名．拡張子』のところが『image/ファイル名．拡張子』となってる。
こうゆう風に、画像ファイルを一つのところにまとめておくと、
ファイルの管理が楽になるよ！
どんなにフォルダを作っても画像ファイルを指定することができる。
画像をたくさん扱うんだったらimageフォルダの中に、
さらにページごとにフォルダを作るとか。
たとえば、imageフォルダの中にindexというフォルダを作って
その中にtitle.gifというファイルが置いてあった場合、
htmlファイルが、imageフォルダと同じところにあれば、
image/index/title.gifとしてやればいい。
逆に、indexフォルダの中にhtmlファイルがあって、
imageフォルダの中の画像を指定したい場合は、
../ファイル名．拡張子となる。（頭の../は、一個上のフォルダという意味）
文字の回り込みを指定
トップページに使うんだったら、ここまででいいけど、
たとえば、写真をいっぱい紹介して文章をつけたい場合なんかあるよね？
そのとき、写真の横に文字を持ってくる方法。
サンプル４
がらっと変わったサンプルだけど、こいつもソースを表示してみて。
そうすると、<img src="ファイル名．拡張子"
align="XXX"> （XXX=left or right)
とゆうのと、<br all=clear>ってのがあると思う。
alignで、画像を表示する場所を、右か左かに指定して、
<br>タグ（つまり改行）をいれて文章をその横に配置している。
<br all=clear>で、回り込みの終了を宣言している。
実は、こうやって画像を配置するってのはあまりやらない・・・
やるとしたら、次回説明するTABLEタグを使って配置するほうが多いかな。
だから、この配置の仕方は、こんな方法があるんだってぐらいに覚えといて。
これの解説がほしい人はK's Home本館の掲示板か、メールで連絡くれれば、
解説のメールを送るよ！
今回のサンプルの解説。
<HTML>
<HEAD>
<TITLE>K's HOME<TITLE>
</HEAD>
<body backgroundr="image/dinne_bg.gif"
text="brown">
･･･BODYタグで、背景の画像を指定。(dinne_bg.gif)
<center>
<img src="image/mainhead.gif">･･･表題のK’s HOMEを、画像表示(mainhead.gif)。
<hr>
<h2>-Content=</h2>
<font color="#0000FF"><i>Last up Date 2000/02/10</i></font>
<hr width="70%">
<font color="#000000"><b>What's New</b></font>
･･･このページの更新情報。<font color="#FF0000">ならびに注意事項。</font>
<br>
<font color="#000000"><b>卒論</b></font>
･･･卒論の進行状況を随時UP。ご意見待ってます。
<br>
<font color="#000000"><b>授業案内</b></font>
･･･僕が今までKGU経済学部で取ってきた授業について。
<br>
<font color="#000000"><b>掲示板</b></font>
･･･連絡・質問・情報交換の場。
<font color="black">(Powerd by YY-BOARD)</font>
<br>
<font color="#000000"><b>ゼミ室【チャットルーム】</b></font>
･･･いろいろな話題について話し合おう。
<font color="black">(Powerd by YY-CHAT)</font>
<br>
<font color="#000000"><b>イベント情報</b></font>
･･･イベント企画案内、結果報告。
<br>
<font color="#000000"><b>自己紹介</b></font>･･･このページを作った人。
<hr width="70%">
<font color="black">>ご意見ご感想はこちらまで･･･</font>
<br><img src="iamge/s_write2.gif">・・・imgタグを使って画像を表示(s_write2.gif)
<hr>
</center>
</body>
</html>
青い文字が解説です。赤い文字が今回変更したところ。
それ以外に、文字が見やすいように文字の色を所々変更してあります。
それは自分でどこが変更されたか確認してみてください。
第四回はここまで。なんか説明がえらく長くなったけど理解できたかな？
まあ、これで、簡単なページは作れるようになったんじゃないかな。
次回は、文字とか画像をきれいに配置するために、
テーブルという表を使ってみようと思う。
それじゃお楽しみに！！
ご意見・ご感想・質問はこちらまで･･･
|
