Webデザイン演習

Download Report

Transcript 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">