Webデータ管理
HTML+CSS (6) (2章)
2011/11/9(水)
講義で使うフォルダ
演習室のPCのハードディスクには演習で作成したデータは
保管できません。
各PCの「ネットワーク接続」ショートカットからメディア情報セ
ンターのサーバーにアクセスしてください(Zドライブとして使
用できます)。
演習名
使用するフォルダ
演習1
Z:¥Webデータ管理¥20111109¥演習1¥
演習2
Z:¥Webデータ管理¥20111109¥演習2¥
演習3
Z:¥Webデータ管理¥20111109¥演習3¥
演習4
Z:¥Webデータ管理¥20111109¥演習4¥
演習5
Z:¥Webデータ管理¥20111109¥演習5¥
演習6
Z:¥Webデータ管理¥20111109¥演習6¥
(演習1)表を作成する
HTMLファイル「shuuhen.html」を開き、以下の通り変更して保存してください 前略 <p class=“honbun”>湘南工科大学は1963年に創立した工学部のみの単科大学で、機械工学科、電気電 子工学科、情報工学科、コンピュータ応用学科、コンピュータデザイン学科、人間環境学科の6学科から構 成されます。</p> <table> <tr><th>機械工学科</th><td>機械の開発・設計、生産・組立、管理まで多彩な視点でモノづくりの技術を 学ぶ</td></tr> <tr><th>電気電子工学科</th><td>エコ・情報通信を支え、生活を豊かにする電気と電子の技術を学ぶ </td></tr> <tr><th>情報工学科</th><td>すべてはプログラミングからはじまる。企画・立案・開発ができる情報エンジ ニアへ</td></tr> <tr><th>コンピュータ応用学科</th><td>みんなで力をあわせて進めるモノづくり。社会で発揮できる実践 的な創造力を習得</td></tr> <tr><th>コンピュータデザイン学科</th><td>感性を活かしたデザインと設計技術で機能性や使いやすさを 形にする</td></tr> <tr><th>人間環境学科</th><td>文系・理系双方から総合的に学びテクノロジーと創造力を身につける </td></tr> </table> </div>表を定義するタグ
表を定義するタグ
タグ
<table> ～ </table>
機能
表を定義する
タグ
<tr> ～ </tr>
機能
表の行を定義する
タグ
<td> ～ </td>
機能
表の項目を定義する
タグ
<th> ～ </th>
機能
表の項目の見出しを定義する
(演習2)表にスタイルを適用する
スタイルシート「tsujido.css」を下記の通り修正してください
前略
.shoukai{border-left:solid 20px #ccc;margin:1em 0;background-color:#fff;} a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid 1px #f00;} img.top{vertical-align:middle;} p.honbun img{float:right;margin-left:1em;} p.photo{min-height:180px;} table{margin:auto;border:solid 2px #000;border-collapse:collapse;width:75%;} th,td{height:3em;border:solid 1px #000;padding:0.5em;} th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;}
表に指定できるスタイル
スタイル border-collapse:枠線の表示方法 機能 表の項目同士を離して表示するかどうか指定する 値 collapse・・・表の項目を離さずに表示する separate・・・表の項目を離して表示する(default) スタイル vertical-align:高さ位置の指定 機能 行の中で文字や画像を表示する高さを指定する 値 baseline・・・1行目のベースラインが揃うように調整する (default) top・・・上辺に揃えて表示する middle・・・中央に揃えて表示する bottom・・・下辺に揃えて表示する(演習3)表にタイトルを追加する
HTMLファイル「shuuhen.html」を開き、下記の通り修正してください
「tsujido.css」を開き、下記の通り修正してください
前略 <table> <caption>湘南工科大学工学部の学科一覧</caption> <tr><th>機械工学科</th><td>機械の開発・設計、生産・組立、管理まで多彩な 視点でモノづくりの技術を学ぶ</td></tr> <tr><th>電気電子工学科</th><td>エコ・情報通信を支え、生活を豊かにする 電気と電子の技術を学ぶ</td></tr> 前略 th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} caption{background-color:#350;color:#fff;padding:0.2em 0;}表のタイトルを指定するタグ
タグ
<caption>～</caption>
機能
表の見出しを指定する
(演習4)番号入りのリストを作成する
HTMLファイル「index.html」を開き、下記の通り修正してください
前略
<p class="head">辻堂案内は辻堂周辺を紹介するサイト
です。<img src="tsujido.jpg" title="辻堂" alt="[写真／辻堂]" width="200" height="155" class="top"></p>
<div class="contents"> <ol>
<li><a href="shuuhen.html">辻堂周辺</a>・・・<a href="shuuhen.html#eki">辻堂駅</a> と<a href="shuuhen.html#univ">湘南工科大学</a></li>
<li><a href="history.html">辻堂の歴史</a></li> <li>作者について</li>
</ol> </div>
</body> </html>
番号入りのリストを作るためのタグ
番号入りのリストを作るためのタグ
タグ
<ol> ～ </ol>
機能
番号入りのリストを定義する
タグ
<li> ～ </li>
機能
リストの各行を定義する
(演習5)箇条書きのリスト、リストの中にリスト
を作成する
HTMLファイル「index.html」を開き、下記の通り修正してください
前略 <div class="contents"> <ul> <li><a href="shuuhen.html">辻堂周辺</a> <ol><li><a href="shuuhen.html#eki">辻堂駅</a></li>
<li><a href="shuuhen.html#univ">湘南工科大学</a></li> </ol> </li> <li><a href="history.html">辻堂の歴史</a></li> <li>作者について</li> </ul> </div>
