Lecture/JouhouC2004/14th のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
Lecture/JouhouC2004/14th へ行く。
- 1 (2004-07-20 (火) 08:11:27)
- 2 (2004-07-20 (火) 13:58:35)

情報教育演習II 第14回

▲ ▼

HTMLファイルの作成 (4)

今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。

▲ ▼

Webサイトの作成

▲ ▼

Webサイトの構成

ここまでの内容をもとに、次のような構成の、Webサイトを作成します。 index.htmをひな型にして、ほかの３つのファイルを作成するとよいでしょう。

「わたし」の街（&ref(): File not found: "index.htm" at page "Lecture/JouhouC2004/14th";）
- Webページ全体の窓口（トップページ）です。
「わたし」について（&ref(): File not found: "profile.html" at page "Lecture/JouhouC2004/14th";）
- 自己紹介とおすすめのリンク（３つ）のページです。
「街」について（&ref(): File not found: "town.html" at page "Lecture/JouhouC2004/14th";）
- 自分の出身地の紹介のページです。
「わたし」と「街」（&ref(): File not found: "memory.html" at page "Lecture/JouhouC2004/14th";）
- 出身地での思い出や、出身地への期待や思いを書くページです。

Webサイトや作成するときには、次のポイントが重要になります。

出入り口となるリンクをつくる
- 情報のながれをつくることで、公開した情報にアクセスしやすくする
- 訪問者を迷い込ませないことで、悪い印象を持たせない
  - index.htmlには、兵庫大学のサイト（http://www.hyogo-dai.ac.jp/）へのリンク
  - profile.html, town.html, memory.htmlには、トップページへのリンク
```
<hr>
<a href="index.html">トップページへもどる</a>
```
署名をつくる
- 著作権や連絡先を明確にすることで、内容の信用性がわかる
- 更新日時を明確にすることで、内容の鮮度がわかる

▲ ▼

Webページのレイアウト

サイトの規模にもよりますが、Webページを構成する要素は、大きく分けると次のようになります。

タイトル（ページのタイトルやタイトル画像）
メニュー、サブメニュー（サイト全体やページ内のメニュー）
コンテンツ（文章や画像など）
署名（著作権、連絡先、更新日時）

これらの要素をどうレイアウトするかが、使いやすいWebページ・Webサイトを考える上で重要になります。よく使われるレイアウトは次のとおりですが、コンテンツに応じて向いている・向いていないレイアウトがあります。

全面：もっともシンプルなレイアウト
タイトル
メニュー
コンテンツ
署名
縦分割：メニューが左（または右）にある
メニュータイトル
コンテンツ
署名
横分割：メニューが左（または右）にある
メニュー
タイトル
コンテンツ
署名

▲ ▼

表によるレイアウト

<table>...</table>
- テーブル（表）を設定します。
<table border="外枠の太さ">
- border属性で表の外枠の太さを指定します（0にすると枠線が見えなくなる）
<table width="幅">
- widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します
<tr>...</tr>
- テーブルのひとつの行を設定します。

テーブルのひとつのマス目（セル）を設定します。

 <table border="1">
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>4</td><td>5</td><td>6</td></tr>
 <table>

1	2	3
4	5	6

<table cellspacing="セルの間隔">
- セルとセルの間隔を設定します（セルと外枠の間隔も設定されます）
<table cellpadding="セル枠と内容との間隔">
- セルの枠と内容の間隔を設定します
```
 <table border="2" cellspacing="1" cellpadding="5">
```
<table bgcolor="背景色">
<tr bgcolor="背景色">
<td bgcolor="背景色">
- 表や列やセルの背景色を設定します
```
 <table bgcolor="#ffcccc">
 <td bgcolor="#ffff00">
```

<table>要素は、本来、表を表示するためのものですが、この機能を使って、Webページの内容をブロック状にレイアウトすることができます。

タイトル画像
メインメニュー
サブメニュー	コンテンツ（内容）
署名

▲ ▼

画像データの利用

▲ ▼

画像のフォーマット

画像データのフォーマット（形式）には、次のようなものがあります。

BMP（ビットマップ）(*.bmp)

Windows標準の画像フォーマット（「ペイント」で作成できる）
ファイルサイズが大きい（24ビットカラーの場合）
Webページでは使えないので、ほかの形式に変換する必要がある

JPEG (*.jpg, *.jpeg)

写真、イラスト向き（フルカラーが扱える）
ファイルサイズが小さい（圧縮率を変える）

GIF (*.gif)

アイコン、バナー向き（最大で256色しか扱えない）
Compu Serve（現在はAOL）が定められたフォーマット
透過GIFやアニメーションGIFなど機能が豊富

PNG (*.png)

GIFファイルに代わるフォーマット
GIFファイルに特許問題が生じたため、それ避ける目的で作られた

▲ ▼

素材集の利用

インターネットに公開されている「素材集サイト」にアクセスして、アイコンの素材を集めます。ただし、 素材集サイトを利用するときには、利用に関する注意事項を確認しましょう。「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。

Yahoo! JAPAN( http://www.yahoo.co.jp)にアクセス
「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む
登録されているサイトにアクセスし、画像ファイルを探す
気に入った画像があったら、画像を右クリックする
1. メニューから「名前をつけて画像を保存」を選ぶ
2. ファイルの保存場所を指定して、「保存」ボタンをクリック

▲ ▼

著作権

著作権とは？
- 「著作者」が「著作物」に対して持つ権利（「著作権法」より）
- 著作者に無断で第三者に公開することはできない
著作物とは？（一部）
- 文章：小説、脚本、論文、講演
- 音楽：歌詞、楽曲、舞踏
- 美術：絵画、彫刻、写真、映画
- 情報：Webページ、コンピュータのプログラム
著作者とは？
- 著作物を創作した人
著作権はいつ発生する？
- 特別な手続きは必要なし（創作した時点で自動的に発生）
- 著作者の死後50年後まで有効
参考リンク
- しゅんしゅんの著作権講座：http://www.geocities.jp/shun_disney7/

▲ ▼

画像データの表示

画像データを表示するには、<img>要素を使います。

<img src="画像データの位置" alt="代替テキスト">
- src属性には、画像の位置（ファイルの場所やURL）を指定します
- alt属性には、画像が表示できない場合に表示させる説明文を設定します
  何も説明がない場合は「alt=""」とします
```
<img src="gazou1.jpg" alt="絵本を読む園児の様子">
```

背景として画像データを表示するには、<body>要素にbackground属性を指定します。

<body background="画像データの位置">
```
<body background="kabegami.gif">
```

KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/14th のバックアップ(No.1)

情報教育演習II 第14回

HTMLファイルの作成 (4)

Webサイトの作成

Webサイトの構成

Webページのレイアウト

表によるレイアウト

画像データの利用

画像のフォーマット

素材集の利用

著作権

画像データの表示

参考リンク

メニュー

大学関係リンク

今日の5件

最新の5件