今日の研修内容
|
課題２１ 箇条書きの頭に使う「ボールの絵」を作ろう。
|
箇条書きの頭にボールのような絵を使っているホームページを見かけます。このようなアイコンがあると、柔らかい内容に感じられます。今日は、このようなアイコンを描いてホームページに表示するようにしましょう。
＜手順＞
gif形式で保存することができる別のソフトウェアを使う場合は、以下の手順を参考にして行ってください。
（１）「DPixed」の実行と絵を描く準備
- デスクトップの「DPixed」のアイコンをダブルクリックして「DPixed」を起動します。
- メニューバーの「ファイル」→「新しい絵」の順に左クリックします。絵のサイズは、幅も高ともに13にします。
- メニューバーの「表示」→「倍率」→「500%」の順に左クリックします。また、窓の角をドラッグして広げます。
（２）ボールの作成
- ツールウィンドウの「ペンツール」のアイコンと「楕円塗りつぶしモード」(黒塗りの円)のアイコンを左クリックします。
- パレットウィンドウで、濃い色を左クリックします。
- ボールを描く窓のタイトルバーを左クリックします。「DPixed」の窓の最下部に座標が表示されます。 (6,6)から(0,0)へドラッグしますと、円が描かれます。
- 同系の少し淡い色を選択し、タイトルバーを左クリックしてから(5,5)から(1,1)へドラッグします。
- 同系のさらに淡い色を選択し、タイトルバーを左クリックしてから(4,4)から(2,2)へドラッグします。
- メニューバーの「表示」→「倍率」→「100%」の順に左クリックして、ボールに見えるか確かめます。
（３）保存
- 保存する場所を「3.5インチFD」、ファイル名を「ball」、ファイルの種類を「GIFイメージ」にして保存します。
- 「DPixed」を終了しないでそのままにします。
（４）「sample03.htm」の修正
- 「メモ帳」を起動し、「3.5インチFD」の「sample3.htm」を読み込みます。
- 15行目の「・ＪＲ○○線○○駅から５００ｍ<BR>」の前に<IMG SRC="ball.gif">を入れ、「・」を削除します。同様に16行目もなおして、上書き保存します。
- NetscapeNavigatorを起動し、「sample3.htm」を読み込みます。
（５）透明化ＧＩＦで保存
ボールのまわりが白いので、周りと同じ色にします。
- 「DPixed」の窓をアクティブにし、メニューバーの「ファイル」→「絵を保存」の順に左クリックします。
- 上書き保存の確認メッセージが表示されるので、「はい」を左クリックします。
- 「GIF形式で保存」の窓で、「透明化GIF」の左横の枠を左クリックしてチェックします。
- 「スポイド」を左クリックし、ボールの周りの白いところで左クリックし、「OK」を左クリックします。
- NetscapeNavigatorをアクティブにし、再読み込みをします。先ほど白かったところが周りの色になっています。
| ワンポイントアドバイス
透明化GIFで保存すると、透明に指定した色が<BGCOLOR>等で指定した色で表示されます。 |
＜まとめ＞
画像の形式には、BMP,TIFF,JPEG,GIF等たくさんありますが、ホームページに表示できるのは、JPEGとGIFだけです。写真などの色数が多いものはJPEGで、図などの色数が少ないものはGIFで保存します。