今天学习电子书制作,主要采用DHTML技术,主页面分为左右两个框架,左边是目录,右边是正文。源自《基于.NET的Web程序设计-ASP.NET》一书。
主要文件源码如下:
book.htm
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<title>用实例学习DHTML</title>
</head>
<frameset cols = "285,*" frameborder = "0" border = "0" framespacing = "0">
<frame src = "left.htm" name = "left">
<frame src = "用实例学习DHTML.htm" name = "right">
</frameset>
<noframes><body>您的浏览器不支持框架</body></noframes>
</html>
left.htm
<HTML>
<HEAD>
<TITLE>目录</TITLE>
<base target = "right">
<link href = "tree.css" rel="stylesheet" type = "text/css">
<script language = "javascript" type="text/javascript" src="tree.js">
</script>
</HEAD>
<BODY onclick = "menuChange( );">
<pre style = "font-family:'楷体_GB2312';font-size:large; color:#000066">用实例学习DHTML<hr></pre>
<span ID = "menu1" CLASS = "menu">1. 创建电子图书 </span>
<div ID = "submenu1" STYLE = "display:None">
<div CLASS = "indent">
<a href = "创建电子图书/浏览电子图书.htm">1.1 浏览电子图书 </a><br>
<a href = "创建电子图书/电子图书的实现步骤.htm">1.2 电子图书的实现步骤</a><br>
</div>
</div>
<br>
<span ID = "menu2" CLASS = "menu">2. Javascript </span>
<div ID = "submenu2" STYLE = "display:None">
<div CLASS = "indent">
<a href = "Javascript/在HTML中使用JavaScript.htm">2.1 在HTML中使用JavaScript</a><br>
<a href = "Javascript/JavaScript 基本语法.htm">2.2 JavaScript 基本语法</a><br>
</div>
</div>
<br>
<span ID = "menu3" CLASS ="menu">3. 事件处理和文档对象模型</span>
<div ID = "submenu3" STYLE="display:None">
<div CLASS = "indent">
<a href = "事件处理和文档对象模型/事件处理.htm">3.1 事件处理 〈/a〉<br>
<a href = "事件处理和文档对象模型/文档对象模型.htm>3.2 文档对象模型 〈/a><br>
</div>
</div>
<br>
<span ID = "menu4" CLASS = "menu">4.级联式样式表(CSS)〈/span〉
<div ID="submenu4" STYLE = "display:None">
<div CLASS = "indent">
<a href = "CSS/使用CSS.htm"> 4.1 使用CSS</a><br>
<a href = "CSS/定义CSS.htm"> 4.2 定义CSS</a><br>
</div>
</div>
<br>
</BODY>
</HTML>
tree.js
<!--
function menuChange( )
{
var src;
var subId;
src = window.event.srcElement;
if ( src.className == "menu")
{
subId = "sub"+src.id;
if(document.all(subId).style.display == "none")
{
document.all(subId).style.display ="block";
}
else
{
document.all(subId).style.display = "none";
}
}
}
//-->
tree.css
BODY{
font-size: 18px;
font-weight:bold;
font-family:"楷体_GB2312";
background-color: #E7E7E7
}
A{ font-size:14px}
.menu{ cursor:pointer}
.indent{margin-left:0.lin}
A:link,A:visited,A:active{color:blue;text-decoration:none}
A:active{color:red;font-weight:bold;font-style:italic;}
还不错,尽管很简单。