简单电子书的制作

今天学习电子书制作,主要采用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;}

还不错,尽管很简单。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值