Webデザイン演習

第６章Ｗｅｂサイトの充実
6.1 印刷用スタイルシート
6.2 Formデザイン
6.3 サウンドファイルの掲載
6.4 動画の配置
6.5 Flashムービーの配置
6.6 JavaScriptとは
6.1 印刷用スタイルシート
6.1.1 複数のスタイルシート
6.1.2 印刷用スタイルシート
6.1.3 印刷不要ボックスを非表示に
6.1.4 印刷用レイアウト
6.1.1 複数のスタイルシート
■複数のスタイルシートの指定
例えば，以下のように文書構造用のスタイルシートとナビゲーション用
のスタイルシートを分けて指定することもできる。
<head>
<META http-eqiuv="Content-Type" content="text/html">
<link href=”structure.css" rel="stylesheet" type="text/css">
<link href=”nav.css" rel="stylesheet" type="text/css">
</head>
6.1.2 印刷用スタイルシート
（１）指定方法
■複数のスタイルシートの指定して，media属性を
指定する。
属性値
all
screen
print
handheld
tv
projection
braille
tty
説明
すべての環境
パソコン画面
プリンタ
携帯用機器
テレビベースのウェブブラウザ
プロジェクタ
点字出力機器
文字幅固定の機器
（２）指定例
■linkタグのmedia属性にscreenとprintを指定する。
<head>
<META http-eqiuv="Content-Type" content="text/html">
<link href="060101_s.css" rel="stylesheet" type="text/css”
media="screen">
<link href="060101_p.css" rel="stylesheet" type="text/css”
media="print">
</head>
6.1.3 印刷不要ボックスを非表示に
■印刷不要なボックスのdisplayプロパティをnoneに
する。（ここではナビゲーション用ボックス）
#nav{ display: none;}
6.1.4 印刷レイアウト
■印刷したときのレイアウトを整える。
【例】
body{ width:550px;}
#header { color: red; border-bottom: 1px solid #777777;}
#nav{ display: none;}
#content{clear: both; }
#col1{ width:250px; float:left;}
#col2{ width:250px; float:right;}
#footer{ position:absolute; top:150px;left:250px;}
プレビュー画面で確認する
■メニューから「ファイル（F）」「印刷プレビュー（V）」を選ん
で確認する。
6.2 Formデザイン
6.2.1 ＣＧＩ
6.2.2 フォームの作成
6.2.3 テキストボックスとボタンを配置
6.2.1 CGI
（１）Common Gateway Interface
■Webからの要求に応じてプログラムを起動
するための仕組み
①ユーザからの情報を受け取り，プログラム
の処理結果によりWebページを作成するこ
とができる。
②最近はPHPやPerl という言語で書かれて
いることが多い。
（２）CGIのイメージ
■ブラウザからＣＧＩにデータを送信し，WWWサー
バを通じて結果をHTMLで送信する。
CGIにデータ送信
ＷＷＷ
サーバ
ブラウザ
ＣＧＩの
実行
ＨＴＭＬ
提供されるサーバ環境ごとにCGIの格納箇所が異なるので，
ここではユーザデータを受け取るフォームの定義だけを示す。
（３）データの長さ
■環境変数変数CONTENT_LENGTHにフォーム
データの長さが設定されている。
標準入力
$ENV{‘CONTENT_LENGTH’}
標準入力
$ENV{‘QUERY_STRING’}
POST
GET
ＣＧＩ
プログラム
（４）データの受取
■REQUEST_METHDにフォームで指定したリクエ
ストメソッドが設定されているので，それぞれのメ
ソッドにしたがってデータを取り込む。
【Perlでの例】
POSTのときは，標準入出力から
GETのときは，環境変数QUERY_STRINGから
If($ENV(‘REQUEST_METHOD’) eq ‘POST’){
read(STDIN,$query,$ENV{‘CONTENT_LENGTH’});
}
else {
$query=$ENV{‘QUERY_STRING’};
}
（５）受取ったデータの文字列
【形式】コントロール名=内容&コントロール名=内容&…
ただし，空白が+，特殊な文字が %１６進数の形式となる。
【文字列の例】
Name=mailsubmit&[email protected]&subject=About
+your+message&msg=How+do+you+do%3F%0D%0AI+am+Suzume.
【上記の意味】
コントロール名
Name
email
subject
msg
:
:
:
:
:
値
mailsubmit
[email protected]
About your message
How do you do?
I am Suzume.
（６）Webサーバへのデータ転送
【形式】標準出力としてHTMLの形式で出力する
【文字列の例】
Content-type: text/html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
<head><title>Sample Data Transform</title>
</head>
<body>
<p>サーバへのデータ転送例です</p>
</body>
</html>
6.2.2 フォームの作成
（１）指定方法
■<form>タグでaction属性とmethod属性を指定
する。
■たずねたい内容のグループを<fieldset>タグ
でグルーピングし，その見出しを<legend>タグ
で指定する。
（２）<form>タグの属性
■action属性とmethod属性
属性
action
method
説明
CGIファイルまでのパスの指定
（サーバ環境によって異なる）
getまたはpost(データの送信形式)
通常は，情報量が多くても問題のない
postを用いる。
（３）<form><fieldset>の例
■fieldsetの見出しは，直後に<legend>タグで指定する。
<form method="post" action="inquiry.cgi">
<fieldset>
この部分は
<legend>お名前とご連絡先</legend>
サーバ環境により異なる
個人情報など
</fieldset>
<fieldset>
<legend>アンケート</legend>
アンケート項目
</fieldset>
</form>
（４）<input>タグ
■フォーム中のデータ入力用。
■終了タグは必要ない。
属性
type
value
name
属性値
右表参照
文字列
文字列
id
文字列
size
整数
maxlength 整数
説明
type属性
文字列の初期値
CGIに特定させる
ための文字列
label要素のfor
属性に対応する
名前
テキストボック
スの横幅
入力可能文字数
■type属性値
属性値
説明
text
一般テキスト入力用
テキストボックス
password パスワード入力用
テキストボックス
checkbox 複数選択可能
チェックボックス
radio
単一選択可能
ラジオボタン
submit
送信ボタン
reset
リセットボタン
image
画像ボタン
（５）<input>タグの例
■name，id，typeを指定
<fieldset>
<legend>お名前とご連絡先</legend>
お名前：<input name="in-name" id="in-name" type="text">
</fieldset>
（６）<label>タグ
■どの文字列がinput要素と対応しているかを示す。
<fieldset>
<legend>お名前とご連絡先</legend>
<label for="in-name">お名前：</label>
<input name="in-name" id="in-name" type="text">
</fieldset>
ラベルでクリックすると，フォーカスが入力欄に移る。
6.2.3 テキストボックスとボタンを配置
（１）1行のテキストボックス
■typeにtextを記述
■passwordを指定すると何を入力しても●が出力される。
<fieldset>
<legend>お名前とご連絡先</legend>
<label for="in-name">お名前：</label>
<input name="in-name" id="in-name" type="text">
<label for="in-pass">パスワード：</label>
<input name="in-pass" id="in-pass" type="password">
</fieldset>
<fieldset>
（２）複数行のテキストボックス
■<textarea>タグを使用する
<div><label for="in-comment">ご意見・ご要望：
</label></div>
<textarea name="in-comment" id="i-comment”
cols="50" rows="10">
ここに記述してください。
</textarea>
（３）チェックボックス
■タイプ属性にcheckboxを指定する。
<div>使用している言語（複数選択可）</div>
<input name="u-vb" id="u-vb" type="checkbox"
<label for="u-vb">VB</label>
<input name="u-cp" id="u-cp" type="checkbox"
<label for="u-cp">C++</label>
<input name="u-cs" id="u-cs" type="checkbox"
<label for="u-cs">C#</label>
<input name="u-jv" id="u-jv" type="checkbox"
<label for="u-jv">JAVA</label>
value="vb">
value="cp">
value="cs">
value="jv">
（４）ラジオボタン
■タイプ属性にradioを指定する。
<div>記事の難易度</div>
<input name="u-easy" id="u-easy" type="radio" value="easy">
<label for="u-easy">やさしい</label>
<input name="u-good" id="u-good" type="radio" value="good">
<label for="u-good">ちょうどよい</label>
<input name="u-diff" id="u-diff" type="radio" value="diff">
<label for="u-diff">少し難しい</label>
<input name="u-vdiff" id="u-vdiff" type="radio" value="vdiff">
<label for="u-vdiff">難しすぎる</label>
（５）プルダウンメニュー
■<select>タグと<option>タグを使う。
<div>漫画週間誌の購入頻度</div>
<select class="selectForm" name="s-form1">
<option value="selected">ここから選択してください</option>
<option value="毎週購入">毎週購入している</option>
<option value="月１">月に1回程度購入している</option>
<option value="ときどき">ときどき購入する</option>
<option value="めったにない">めったに購入しない</option>
<option value="ない">購入したことはない</option>
</select>
（６）送信ボタンとリセットボタン
■type属性にsubmit， resetを指定する。
<div>
<input type="submit" name="Submit" value="問合せ">
<input type="reset" name="Reset" value="リセット">
</div>
（７）ボタンに画像を使う
■type属性にimageを指定すると
ボタンに画像を使うことができる。
<div>
<input type="image" name="Submit" value="問合せ"
src=”img002.gif" width=80 height=80>
<input type="image" name="Reset" value="リセット"
src=”img003.gif" width=80 height=80>
</div>
6.3 サウンドファイルの掲載
6.3.1 objectタグ
6.3.2 サウンドの形式
6.3.3 サウンドを鳴らす
6.3.1 objectタグ
■画像，動画，音声，各種プラグインデータ，他のHTML文
書など，様々な形式のデータをHTML文書に埋め込むた
めの汎用的なタグ
<object data="パス" type="データの種類">
<param name="指定するパラメータ(1)" value="値(1)">
<param name="指定するパラメータ(2)" value="値(2)">
・
・
・
<param name="指定するパラメータ(n)" value="値(n)">
オブジェクト要素で指定したとき，替わりに表示されるテキストまた
は画像
</object>
6.3.2 サウンドの形式
■Webページを閲覧中に音楽が鳴ると不快に感ずる人もい
るので要注意
■掲載可能なサウンド
形式
MP3
Wma
RealAudio
MIDI
説明
拡張子mp3。サウンドの圧縮形式のひとつ。
拡張子wma。Windows標準サウンドの圧縮形式。
拡張子rm。RealPlayer で再生できる圧縮形式。
拡張子mid。楽譜の情報をメロディとして鳴らすことがで
きる。
Type属性
■形式はtype属性で指定する
形式
MP3
WAV
MIDI
OGG
RealAudio
属性値
audio/x-mpeg
audio/wav
audio/midi
audio/ogg
audio/x-realaudio
6.3.3 サウンドを鳴らす
■Active Xコントロールを不許可にしている人もいるので，
避けたほうが良いが？
■サウンドは，できるだけダウンロードして聞いてもらうよう
にしよう。
<div>
<object data="music001.mp3" autostart="true”
type="audio/x-mpeg"loop="3" hidden="false"
width="180" height="40">
あれだけ言ったでしょう
</object>
</div>
6.3.4 ソフトを導入していないユーザのために
■無料のダウンロードサイトを紹介
■スクリプトの実行を不許可しているユーザのためには，
ダウンロードしてサウンドを聞けるように，
リンクで対処する。
【例】
<div>
<p><a href="music001.mp3">音楽</a></p>
</object>
</div>
6.4 動画の配置
6.4.1 動画の形式
6.4.2 動画を挿入
6.4.1 動画の形式
■簡単な動画ならGIFファイルでも可能
■一般的な動画
形式
MP3
Wma
RealAudio
MIDI
説明
拡張子mp3。サウンドの圧縮形式のひとつ。
拡張子wma。Windows標準サウンドの圧縮形式。
拡張子rm。RealPlayer で再生できる圧縮形式。
拡張子mid。楽譜の情報をメロディとして鳴らすことがで
きる。
Type属性の属性値
■ メディアタイプをtype属性で指定する。
形式
MPEG
RealMedia
Windows Media
QuickTime
AVI
説明
video/mpeg
application/vnd.rn-realmedia
video/x-ms-wmv
video/quicktime
video/msvideo
6.4.2 動画を挿入
■<object>タグでファイルのパス，動画ファイルのサイズ，
メディアタイプを指定する。
■ただし，エンコードの方法によっては，属性値を指定して
も再生できない場合が多い。
■このため，<a>タグで動画ファイルにリンクを貼るWebサイ
トが多い。
【例】
<object data="animation1.mpg" width="562" height="465"
type="animation1.mpg" type="video/mpg">
<param name="movie" value="animation1.mpg">
波の動き
</object>
6.4.3 動画が再生できない環境のために
■<a>リンクで動画をダウンロードしてから動画を閲覧させる。
■gif ファイルにすることでイメージとして貼り付ける。
【例】
<div>
<image src="Wave.gif" alt="波の動き">
</div>
6.5 動画の作成方法
6.5.1 動画作成のあらまし
6.5.2 絵を動かす基本
6.5.3 運動を与える
6.5 動画の作成方法
6.5.1 動画作成のあらまし
6.5.2 絵を動かす基本
6.5.3 運動を与える
6.5.1 動画作成のあらまし
基本的にはパラパラ漫画
■複数の画像を連続させて動きを実現
●Paint Shop付属のAnimation Shop，IBMホームページ・ビ
ルダ付属のウェブアニメータでは画像ファイルを読み込
んで簡単に作成してGIFファイル等で保存
●Animation ShopではAVIファイルにすることもできる。
6.5.2 動画作成
（IBMウェブアニメータもほぼ同じ操作）
①Animation Shopでアニメーションウィザード
②画面にしたがってオプション指定
「イメージの追加」ボタンをクリックして…
③「イメージの追加」ボタンをクリックすると，ファイルを開く画面になるの
で，選択して「開く」ボタンをクリック。
上移動や下移動で順序を合わせて，「次へ」
④ファイルの順序を合わせて「次へ」
⑤最後に「完了」ボタンをクリック
アニメーションを表示してみよう
⑥アニメーション表示
6.5.3 動画を動かす
（１）位置を動かす
■Animation ShopでGIF，AVIを作成
（２）動きを表現する
■コマごとに形を変えると動きが表現できる
（３）解析結果もアニメーションに
■解析結果画面を保存して動画にすると
（４）細かな動きも表現してみよう
■細かな動きを工夫してみよう
（５）その他
■デジカメを連写して画像を作ってアニメにする。
■風景等でカメラを動かして写真をとってアニメに
する。静止風景がパノラマ風に移動。
■イラスト画像は特別のソフトがなくてもExcel等で
作成したものをhtml形式で保存すると作成できる。
■最近はFlushで作成した画面も多い。ただし，
Flushムービーをインストールしていないユーザも
いるので気をつけよう。
【注意】
デジカメは画素数が多いので解像度を落としたほう
がアニメ用画像に向く。
6.6 JavaScript
6.6.1 JavaScriptとは
6.6.2 scriptタグに定義する
6.6.3 inputタグに定義する
ここでは概要のみに留める。
Java言語については，
他の講義に任せる
6.6.1 JavaScriptとは
■ブラウザがインタプリタ的に解釈して実行するプログラミ
ング言語
<script language = “JavaScript”>

</script>
■ヘッダ内に以下の記述を書く
<meta http-equiv =“Content-Script-Type”
content = “text/javascript”>
6.6.2 プログラム本体
■<script>タグ中にプログラム本体を記述する。
<script language = “JavaScript”>
<!-var today = new Date(); var hour = today.getHours();
document.write("今、日本は");
if (hour < 12) { document.write(“午前中”);}
else { document.write("午後");}
document.write("です");
//-->
</script>
6.6.2 プログラム本体
■<script>タグ中にプログラム本体を記述する。
<script language = “JavaScript”>
<!-function ClearSearchBy(){
if(document.getElementById('q').value==
'検索したい用語を入力して下さい'){
document.getElementById('q').value=='';}
}
//-->
</script>
6.6.3 イベントハンドラ
■<input>タグ中に記述する。
• <input name="q" id="q" onclick="ClearSearchBy();" value="
検索したい用語を入力して下さい" size="50">

Download Report