ホームページの仕組み

(1)

見

やすいホームページを作ろう！

跡見学園女子大学

公開講座

文学部准教授

福田博同

(2)

5月7日

1. ショートカットキー

2. HTMLの仕組み

3. XHTMLとCSS

4. W3C標準

5. 見本に書き込む

6. 単語登録

7. ブログ等の準備

5月14日

1. ブログを試そう

2. スタイルで変更

3. 画像を作る

4. 音を作る

5. アップロードする

6. まとめ

(3)

見やすいホームページを作ろう 2011年5月7日

レジュメ

１．ショートカットキー入力の効率化のため、高齢者・障害者でマウスを見づらい人のため、Office のバージョンで操作が違う人のため、よく使うショートカットキー（ CtrlキーとかAltキーとかShiftキーにCキーなどを組合す）を示します。２． HTMLの仕組みホームページの仕組みを理解します。３． XHTMLとCSS HTML文書と見栄え（色とか文字の大きさなど:CSS といいます）の違いを学びます。休憩１． W3C標準高齢者・障害者にやさしい「世界標準」の XHTML文書のチェック方法を学びます。２．見本に書き込む見本のページの必要部分を書き直すことでホームページをつくります３．単語登録長い文字を1文字で呼び出す単語登録を学びます４．ブログ等の準備ブログやホームページなどができるよう準備します

(4)

１．ブログを試そうブログに書いてみましょう２．スタイルで変更スタイルシートで背景色を変えてみましょう３．画像を作る画像の作り方を学びます１．音を作るマイクで録音してmp3ファイルを作ります２．アップロードする出来上がったホームページをアップします３．まとめ

(5)

「色盲の人にもわかるバリアフリープレゼンテーション法」より岡部正隆･伊藤啓編よく使うショートカットキー ★スタート： Windowsキー（田キー） ★エクスプローラ：田にEキー ★画面切り替え： AltにTabキー ★漢字変換：スペースバー ★決定： Enterキー ★ファイル保存： CtrlにSキー ★別名保存： AltにFキー、Aキー ★終了： AltにF, XキーかCキー ★複写： CtrlにCキー ★切取： CtrlにXキー ★削除：範囲選択、Deleteキー ★貼付： CtrlにVキー ★復活： CtrlにZキー ★アドレス取得： AltにDキー ★ハイパーリンク： CtrlにKキー ★パソコン終了：田にUキー

(6)

1. 元の文書、図、表、音、動画等を作る

2. HTML形式へ変換

3. 絵も音楽も文書もリンク

か埋め込み

4. プロバイダ等へファイル転送

5. ブラウザで読む

プロバイダ

見る人

サイト開設者

見る人

インターネット

目次へ

(7)

元の文書

• Editor

で

_HTML文書

_{を書く →}

保存

• HTML-Editor

で書く

_→

保存

• ワープロソフト

で書く

_→

_{保存 → 変換}

• プレゼンテーションソフト

で

_{書く→保存 → 変換}

• 表計算ソフト

で

書く

_→

_{保存 → 変換}

• ブログ

や

Media Wiki

で

_{Web上で書く}

(8)

原図ファイル

拡張子

Web用ファイル

• ペイント形式で描く

ペイント

_{bmp, tif}

_{gif, jpg, png}

• ドロー形式で描く

Illustrator

ai, pdf, svgなど

jpg, pdf, png, svg, tif等

Power Point

ppt

pdf に印刷 ○

HTMLで出力 ×

• 写真を撮る

_{tiff, bmp, jpg}

_jpgで出力

• スキャナーで写す

_{bmp, jpg, pdf}

_{jpg, pdf}

• PC画面を写す

bmp, jpg

jpgへ変換

詳細はノートを参照

(9)

音ファイル

拡張子

Web用ファイル

• 録音

マイク録音

_WAV,WMA

ディジタル録音機

WAV, MP3

• DAW ソフトで作曲

Flashアニメーション FLA

SMILアニメーション BMP

3Dアニメーション

AVI

（代表的ファイル形式例を記載）

サイト開設者

Web用に変換

MP3, RA,

高スペックPCと編集ソフトで変換

FLV, MPEG4-AVC/H.264 等

SWF, アニメーションGIF等

SMI

SWF, MPEG, MOV, QT, WMV等

(10)

動画ファイル

拡張子

Web用ファイル

• ビデオ撮影

通常STD画質撮影 MPEG2,AVI

ハイビジョンHVCSD撮影

MPEG4-AVC

• ソフトで描く

Flashアニメーション FLA

SMILアニメーション BMP

3Dアニメーション

BLENDほか

（代表的ファイル形式例を記載）

コンバーターや編集ソフトで変換

QT, RM, SWF, WMV, H.264, MOV等

高スペックPCと編集ソフトで変換

FLV, MPEG4-AVC/H.264 等

SWF, アニメーションGIF等

SMI

VRML, SWF,X3D等

(11)

元のファイル

• 静止画

• ペイントソフトで描く

_→

_{ファイル名.jpg}

• ドローソフトで描く

_→

_{ファイル名.jpg}

• 動画

• Flashで描く

→

.swf

• _{Premiereで変換}

_→

_{.mpgや.gif(アニメ)}

• Realで変換

→

.ｒｍ

• 音

• Midiソフトで作る

→

.mid

• 録音をmp3で変換

→

.mp3

• Excel等

の直接変換

_→

_{xml形式変換}

サイト開設者

(12)

HTML文書（ファイル名.html)

<html>

<head>

この文書の属性（著者だとかキーワードとか

スタイルとか）

</head>

<body>

見える部分図とかはすべてリンクで可能

</body>

</html>

(13)

HTML/XHTMLと CSS

（スタイルシート）

• HTMLは文書を、スタイルはCSSを使う。

– 理由：文書と見映えの分離: アクセシビリティ、

SEO（検索エンジン対策）、メンテナンス性、

互換性

– W3C（Webの仕様を決める団体）国際標準

• ユーザビリティ /

筆者

(14)

• W3C Markup Validation Service

• Another HTML -lint gateway

/

石野恵一郎氏

• W3C CSS Validation Service

• 色覚チェック

/ 岡部正隆氏、伊藤啓氏

• _aDesigner

/ 浅川千恵子氏グループ

(15)

Head部例

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ここにタイトルを書きます</title>

漢字もOK -->

(16)

<img src=“zuNoName.jpg” alt=“説明文” width=“44” height=“33” /><a href=“index.html”>トップページの名へ </a> | <a href=“shumi.html”>趣味</a> | <a href=“nikki.html”>日記</a> |<span class=“chu”>著者

</span> </div>

<p><span class="chu">ここはトップページの名</span> </p> <h2>このページの見出し</h2> 箇条書きを書くときはulを使います。下をみましょう<br /> <ul> <li>趣味</li> <li>日記</li> </ul> </div> </body> </html>

spanは、ある部分

a hrefはリンク| 必ず閉じる

pは、段落

hは、階層

/body /htmlで閉じます

(17)

単語登録

（良く使うフレーズ）

• CtrlにF10キー → W（単語登録） →

単語を入れ、読みを入れ、ok

• <a href=“”> </a>

あ

（リンク）

• <img src=“” width=“” height=“” alt=“” align=“left” />

い

_{（画像；srcはファイル名、}

altは図の説明、align回り込み）

• <ul> <li> </li> </ul>

う

（箇条書きリスト）

• <ol> <li> </li> </ol>

お

（段落番号付きリスト）

• <p> </p>

ぴ

（段落）

• <hr />

ふ

（罫線）

• <br />

ぶ

（改行）

• <br clear=“all” />

ぶ

（回り込みクリアし改行）

• <li></li>

り

（リスト）

(18)

• 紺地に白文字120%T

右インデックス

• 紺地に白文字120%

• 紺地に白文字120%T

• 肌色地に黒文字120%

(19)

ブログを試そう

1. メール

アドレスが必要

2. 安全な無料サイトから選ぶ

–

Blogger

Hatena Diary

Yahoo!ブログ

等

（見本:筆者）

（見本:筆者） (見本 yahoo! Japan)

3. 申し込み、メールで確認、

開設

4. 管理や設定で

プロフィール設定

5. 日記を書く・投稿する

(20)

1. Blogger

手順：

_Blogger

に入る

1. Tabキー5回でアカウント開始 → Enterキー 2. Googleアカウント作成 → Tabキーでメールアドレス等を入れ、Enterし、メールで確認する → アカウントを得る（メモしておこう） 3. ブログを作成

(21)

ブログ作成画面

1. Yahoo! ブログ

手順：

_{Yahoo! ブログ}

に入る

1. 新規取得 → Yahoo! IDの取得→ 記入「利用規約に同意して登録」 2. ブログを作成 → プロフィールの作成 → 新規ブログ投稿

(22)

はてなダイアリー

手順：

はてなダイアリー

に入る

– 無料ブログ開設→ 登録内容確認 → メールアドレス入力 → 登録完了 → ダイアリー開設 – ブログの作成

(23)

元ファイル作成方法

• 図：ペイントで描く→ 拡張子pngとかjpg

• 図：ドローソフトで描く

• 図：携帯カメラ等で写す→jpgで送る

• 動画：Flashで描く

• 動画：ビデオをReal形式やFlash形式で変換

• 音：MIDIソフトで作る

• 音：録音→mp3変換

• Excel, Access→Webページで保存

• 電子文書：wordや一太郎やPowerPointを

Acrobatで印刷=PDF文書

(24)

スタート（Windowsキー）

プログラム(pキー)

アクセサリー

ペイント

(25)

ペイント

キャンバスサイズ、円の書き方

キャンパス色とサイズ

円や四角等の書きかた

(26)

スプレー

バケツ

円と色

(27)

ペイント

保存

ファイル

別名保存

保存場所

デスクトップ

自分のフォルダ

zuのフォルダ

ファイル種類

すべてにして

拡張子jpg

！bmpではない

動画等様々な「作り方」はArtNaviの「

インターネットプレゼンテーション入門

」を

(28)

ArtNavi → ユーザビリティ → Webサイト作成→

HTMLファイル作成 → 図の埋め込み

を参照

• 静止画の作成

• ペイントソフト

• ドローソフト

• カメラで撮影

• OCRで読み込む

• パソコン画面を複写

(29)

元ファイル作成

方法：

音ファイル

ArtNavi → 芸術工房 → 音楽 →

「作ろう♪インターネットで芸術音楽を」

ＭＭＬで作曲

MIDIで作曲

音の編集

（マイクで録音）

(30)

ArtNavi → ユーザビリティ → Webサイト作成→ HTML

ファイル作成 → 音・動画の埋め込み

を参照

・

リンク再生

・

_{音(MIDI)埋め込み}

・

_{音(MP3)埋め込み}

・

動画の埋め込み

・

_{動画(RealMedia)埋め込み}

・

_{動画(Flash)埋め込み}

・

_{動画(YouTube)埋め込み}

(31)

アップロードする

1. メール

アドレスが必要

2. 安全な無料サイトから選ぶ

–

Yahoo! Geocities

google apps

等

3. 申し込み、メールで確認、

開設

4. 管理や設定で

プロフィール設定