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

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - 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サイトの構成

今回作成しているサイトの全体構成は次のとおりです。

「わたし」の街（index.htm）
- サイトの窓口（トップページ）
「わたし」について（profile.html）
- 自己紹介とおすすめのリンク（3つ）
「街」について（town.html）
- 自分の出身地の紹介
「わたし」と「街」（memory.html）
- 出身地での思い出や、将来への期待など

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

出入り口となるリンクをつくる
- 情報のながれをつくることで、公開した情報にアクセスしやすくする
- 訪問者を迷い込ませないことで、悪い印象を持たせない
署名をつくる
- 著作権や連絡先を明確にすることで、内容の信用性がわかる
- 更新日時を明確にすることで、内容の鮮度がわかる

▲ ▼

画像データの利用

▲ ▼

画像のフォーマット

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

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

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

JPEG (*.jpg, *.jpeg)

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

GIF (*.gif)

アイコン、バナー向き（最大で256色しか扱えない）
透過GIFやアニメーションGIFなど機能が豊富

PNG (*.png)

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

▲ ▼

素材集の利用

インターネットに公開されている「素材集サイト」にアクセスして、アイコンや写真など、画像の素材を集めます。ただし、次の点に注意すること。

素材を利用する前に、利用上の注意事項をよく確認する: 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。
ファイル名は半角文字にする: インターネットに公開するデータは、半角文字となります。

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

▲ ▼

著作権

著作物：人がアイデアを「書いたり」「作ったり」「発表した」もの
- 小説、講演、楽曲、絵画、コンピュータのプログラム
著作者：著作物を作った人

「著作権」とは、著作権法で定められた、「著作者」が「著作物」に対して持つ権利です。第三者は、著作者に無断で公開することはできません（私的な利用は条件を満たせば認められます）。

著作権は、手続きなしで創作した時点で発生し、著作者の死後50年後まで有効となります。

参考リンク
- 著作権情報センター : http://www.cric.or.jp/
- しゅんしゅんの著作権講座：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">
```

▲ ▼

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ページの内容をブロック状にレイアウトすることができます。

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

<table>
  <tr>
    <td>
      ＜タイトル＞
    </td>
  </tr>
  <tr>
    <td>
      ＜コンテンツ＞
    </td>
    <td>
      ＜写真＞
    </td>
  </tr>
  <tr>
    <td>
      ＜署名＞
    </td>
  </tr>
</table>

▲ ▼

アクセシビリティ

タイトルのつけ方（お気に入り）（ＳＥＯ）単語の間にスペースや改行を入れない大きな画像には、サムネイルを入れる画像にはalt属性で代替テキストを入れる

▲ ▼

ユーザビリティ

タイトルのつけ方（お気に入り）（ＳＥＯ）スクロールしなくても見える範囲に重要な情報（概要や結論を先に）（ＳＥＯ的には１００文字程度で）　画面サイズの目安：８００ｘ６００ピクセルを基準に（ウィンドウ枠やスクロールバーなどの分を忘れずに）工事中にはリンクしない（閲覧側からすれば時間の無駄→ユーザの貴重な時間を無駄にしない）各ページには、サイト名、トップページのＵＲＬ、著作権、連絡先、更新日パンくずリスト（Ｙａｈｏｏを参考に）サイト全体でレイアウトを統一（操作性を重視：操作や見方で迷わないように）　（きちっとした印象をあたえ、信頼感が増す）データのサイズ

▲ ▼

ファイルの更新方法

Webサーバ上のファイルをパソコンへコピーする
パソコン上で編集・確認作業をする
できあがったらWebサーバへコピーする

▲ ▼

Webサーバ上のファイルのコピー

まず、「Webフォルダ」機能を利用して、 Webサーバのファイルのアクセスします。

まず、サーバの中のファイルをコピーします。

デスクトップにある、「Internet Explorer」を起動
メニューバーから、「ファイル」→「開く」を選択
1. 「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック
2. 「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力
3. 「OK」ボタンをクリック
ユーザ名とパスワードを入力したら、「OK」ボタンをクリック
自分の学籍番号のフォルダを開く
コピーするファイルを右クリックし、「コピー」を選択

次に、コピーしたファイルをパソコンの中に貼り付けます。

「マイドキュメント」を開く
「public_html」を開く
ファイルのリストの開いている場所を右クリックし、「貼り付け」を選択
1. ファイルは「上書き」するように選択

▲ ▼

Webサーバへのファイルのコピー

編集や確認作業が完了したファイルを、 Webサーバへ転送します。

まず、パソコンの中にあるファイルをコピーします。

「マイドキュメント」を開く
「public_html」を開く
ファイルのリストの開いている場所を右クリックし、「コピー」を選択

次に、サーバの中にファイルを貼り付けます。

上記の『Webサーバ上のファイルのコピー』を参考に、 Internet Explorerを使って、サーバの中のファイルを開く
自分の学籍番号のフォルダを開く
ファイルのリストの開いている場所を右クリックし、「コピー」を選択
1. ファイルは「上書き」するように選択

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