Webデザイン1 第3回目
画像を表示する。画像を表示するにはIMG要素を使う。
Webデザイン1 演習 画像の使用
自分のホームページのインデックス(トップページ)を作り、自己紹介のホームページへのリンクなどを追加する。
作成したファイルは圧縮フォルダ(ZIP形式の圧縮)にまとめ、指定された方法で提出する。圧縮フォルダの名前は日付_学籍番号.zipとする。
以下に演習の内容を示す。
- 以前作った自己紹介のホームページのファイルを次の2つに分割する。
- 学籍番号、氏名、住所のファイル:ファイル名about_me.html
- 趣味に関係するファイル:ファイル名hobby.html
- 自分のホームページのインデックスを作る(ファイル名index.html)。
- ホームページの名前を決め、そのタイトルロゴを作り、表示させる。
- 2つのファイル(about_me.htmlとhobby.html)へのリンクを作る。
- 自己紹介のホームページのタイトルロゴを作り、表示されるようにする。
- 自宅近辺の地図をGoogleマップなどから取得し、about_me.htmlで表示する。ウィンドウを画像としてコピーし、編集する方法を見る。
- 趣味に関係する画像ファイルを取得し、hobby.htmlで表示する。
- about_me.htmlとhobby.htmlにはindex.htmlへ戻るリンクを用意する。このリンクには画像を使う事。
- 大きな画像がある場合、画像を小さく表示し、その画像をクリックすると大きな画像が表示されるようにする。
制作上の注意点
※画像ファイルは自分で撮影したものか無料のものを使う。他人のホームページで掲載されているものは使わない(著作権を侵害しない)。
- 画像ファイルのファイル名は各自で決めて下さい。
- ファイルやフォルダ名はすべて半角のアルファベットと数字、記号(-と_)を使う事。
- ファイル名やフォルダ名に空白文字を含めない。
- ファイルは専用のフォルダに保存し、他と区別できるようにしておくと良い。
画像が表示されないときの対処
- ファイルがありますか？ファイルを用意しましょう。
- HTMLファイル内の画像ファイル名と実際のファイル名は一致していますか？正しい名前に変更しましょう。
- 画像をフォルダに保存している場合はフォルダ名も必要です。入力していますか？フォルダ名も入力しましょう。
ロゴ作成、無料素材のサイト
ロゴなどの作成には下記のホームページを利用してください。他にも検索すると沢山あります。
- The WWW Signboard Factory
- 【G-TOOL】ホームページ作成用無料画像素材集｜シリコンカフェ
- フリー素材 3D+WEB MIX
- 3D Log Generator
- ふゆき職業別イラスト
- ロゴ&バナー無料自動作成