WEBデザイン授業4日目
今日はCSSを使った画像置換、単純なJavascriptの画像置換、ナビボタンの作成、h1の意味、Daniel Nolan「rollover.js」ロールオーバーの置換、Dreamweaverの使い方を勉強しました。最後にロールオーバーの置換がうまくいかなかったので、忘れないうちに画像を作り直したら出来ました。画像サイズの間違えでした。これからは色んなサイトを参考にしながらロールオーバーの練習をしていきたいと思います。
1.head内に読み込み
<script src="rollover.js" type="text/javascript"></script>
2.ロールオーバーさせたい画像imgにclass="imgover"を記入
3.ロールオーバー用の画像のファイル名を「_o.gif」とつける
- HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>画像置換の練習>
<link href="base.css" rel="stylesheet" type="text/css" />
<script src="rollover.js" type="text/javascript"></script>
</head>
<body>
<div id="case1">
<ul>
<li><a href="#"><img src="images/btn01.gif" alt="HOME" width="120" height="40" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn02.gif" alt="Topics" width="120" height="40" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn03.gif" alt="Products" width="120" height="40" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn04.gif" alt="Aboutus" width="120" height="40" class="imgover" /></a></li>
</ul>
</div>
</body>
</html>
@charset "UTF-8"; html,body,div,ul,li{ margin: 0; padding: 0; line-heigt: 1.0; font-family: sans-serif; } ul{ list-style-type: none; } a{ text-decoration: none; } img{ border: 0; } #case1{ height: 40px; width: 480px;/* 全体の横幅*/ margin-top: 50px; margin-left: 50px; } #case1 li { float: left; } #case1 li a{ width:120px; height:40px; display:block; }