网页制作课程报告
小组任务：
制作并提交一个精品课程网站，课程内容为高频电子电路
可仿照网站：
http://course.jingpinke.com/details/introduction?uuid=8a833999-1e4881f5-011e-4881f832-02a7&courseID=S0600096&column=brief
http://jx.qtech.edu.cn/txdzxxq/gaopindianzi/web_final.asp
http://jpkc.hhuc.edu.cn/gpdz/main.aspx?pid=179&mid=181&cate=1
大部分内容可以是纯html的，但需要有一些具有交互功能的页面，jsp或asp都可以，数据库用access或mysql或SqlServer都可以。
设计提交：
作为课程网站，我们考虑到其应用性强的特点，设计其应具有资源共享、课程介绍、讨论交互等功能，首先针对以上需求设计了网页简易的框架结构：
各页面链接关系：
首页：
首页是网页的大门，首页的设计面貌、风格决定了整个网页的面貌与风格。
首页截图：
从内容上来讲，高频电子电路是计算机与通信工程学院课程之一，主页使用了北科大计通学院图片作为网页的封面。下面导航为上述架构包含的内容，由于资源有限与版权等原因，有些导航内容功能没有实现；主页还涵盖了课程简介、课程特色等板块，简明扼要地介绍了该课程与网站所涉及的内容。另外在主页右下方是本次设计中实现交互功能的设想之一：资源检索和用户登录系统，如图：
关于登录，对于非用户则应显示一个“注册/登录”页面，按照常规登入系统，我们选择的“注册/登录”框架为：
另外，主页Login下方可见友情链接，我们设计它的目的是希望提供一个能够链接到其他相关知识网站的通道接口，方便访客学习与使用。
再下方版权与技术支持为北京科技大学，在网络连接正常情况下点击它可进入北京科技大学“本科教学网”主页，设计初衷是希望得到我校的资源支持。同时可作为对我校的一个宣传途径。
从结构上来讲，网页必须具有严格的布局，为突出主题，吸引读者，主页更是如此。我们的主页布局为：
网页上部放置Logo和Banner； 其下为导航条与其他链接；
分区域分标题显示各部分内容。
这种布局的好处是网页的各个部分非常集中，可以在区域性地突出网页的重要内容，很有层次感。
关于网页制作
不论是主页还是相关网页都需要设计框架，HTML的文件结构相当简单，其主体结构主要由以下：
文件头信息
在浏览器中显示的HTML文件的正文
HTML文档通常分为文件头和正文两部分。文件头用以记录与网页相关的重要信息，例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主体内容，将在浏览器中显示。
常见HTML标记
段落标记 回车换行标记 网页标题标记
水平线 图像标记 超链接标记
另外有一些元素在网页中出现，但用的不多： 1.创建表格
表格标记
行标记
单元格标记 空格
表单内边框及增加背景颜色在
尖框号
2.增加网站搜所关键词及刷新和说明
要在的后面回车以后插入菜单-HTML-相关插入菜单弹出输入相应的关键的词语就可；
iframe增加页中页；（在＂插入＂菜单点＂标签＂里面＂＂ＨＴＭＬ标签＂下的＂页面元素＂内）
元素也就是文档中的文档,或者好像浮动的框架(FRAME)。
scrolling="NO">
3.设置文本行为
事件解读相应的参数：
onFocus 事件在对象获得焦点时发生； onBlur 事件会在对象失去焦点时发生； onClick 事件会发生在点击时； onDblclick 事件会发生在双击时；
onmouseDown 事件会在鼠标按键被按下时发生；
onmouseUp 事件会在鼠标按键被松开时发生；
onmouseOver 事件会在鼠标指针移动到指定的对象上时发生； onmouseOut 事件会在鼠标指针离开到指定的对象上时发生； onmouseMove 事件会在鼠标指针移动时发生；
onkeyDown 事件会在用户按下一个键盘按键时发生；
onkeyPress 事件会在键盘按键被按下并释放一个键时发生； onkeyUp键盘按键被松开时发生。
以首页导航条中链接“教师队伍”页面04.html为例： 截图：
从代码中看，网页模版：
文件头信息
所对应的部分从代码第二行起，完整内容为：
高频电子电路
结束符在该页面所有代码之后，可以看出上面的内容与模板别无二致，只是多了些属性设置和脚本信息。继续向下，是网页的body主体内容，
以开始，以结束，中间的内容为在浏览器中显示的所有元素所对应的代码，我们以以下几个元素为例：
1.封面为和主页相同的计通的logo，我们以table属性实现：
background="../../template_class/jceyzhsj/images/1_01.gif">
导航条也是由表格（table）实现，不同的是需要划分多条，相关代码见完整代码；
2.导航条下有两个划分在同一table但是不同tr的元素，一个用来显示当前时间，一个用来作为location，这是我们网页设计中相对的亮点，它们的实现方法：
您所在的位置：首页 > 教师风采
表格和照片依旧是table的使用，不再赘述了。
“教师队伍”页面完整代码：
高频电子电路
background="../../template_class/jceyzhsj/images/1_01.gif">
首页
学习指南
课程建设
教师队伍
多媒体课件
教学课件
授课录像
第二课堂
习题试题
学习参考
在线答疑
您所在的位置：首页 > 教师风采
width="99%" border="0" cellspacing="0" cellpadding="0">
width="50%" border="0" cellspacing="0" cellpadding="0">
友情链接
style="margin-left:2px; " width="86%" border="0" align="center" cellpadding="0" cellspacing="3" >
bgcolor="#F3F3F3">
教师风采
姓 名
谢迎刚
性 别
男
出生年月
1978年11月
最终学历
博士研究生
学 位
博士研究生
职 称
讲师
职 务
讲师
所在系部
联网与电子工程系
联系电话
通信地址
研究方向
先进视频监控平台建设及系统开发、环保综合信息化GIS系统平台建设、融合分布式的儿童玩伴机器人个性化交互技术研究、基于状态空
间描述的人工情绪理论和方法研究、视线追踪技术及其在残疾人环境控制中的应用。
版权所有：北京科技大学 技术支持：北京科技大学
返回页面顶部
想说明的是关于资源下载的页面：“多媒体课件”、“教学课件”和“授课录像”，其实由于资源有限前两个导航里资源是一样的，而“授课录像”则涉及版权问题暂时为空，但是它们实现的方法是一样的，如“多媒体课件”一样我们需要实现链接功能：
第1章 绪论
第2章 小信号调谐放大器
第3章 高频调谐功率放大器
第4章 正弦波振荡器
第5章 振幅调制与解调
第6章 角度调制与解调
第7章 变频器
第8章 锁相环路及其他反馈控制电路
第9章 电噪声及其抑制
附录A 综合测试题及答案
附录B 自测题部分参考答案
如上，获得课件和录像后我们可以建立相关链接将资源分享给浏览者。
最后想说明的是网站设计中另外的一处交互功能的设想。在导航条中的“在线答疑”可链接至该页面：
该功能设计初衷是实现用户讨论留言，应该与用户数据库形成关联，并且将留言信息储存，然后可以对信息在数据库中进行操作。但是由于小组成员水平有限没有实现，非常遗憾。希望通过以后的学习能够有能力完成一个完整网站的设计。
在小组中担任的任务：
搜集优秀高频电子电路网站，提供制作网站的资料；
撰写第4组的网站应用说明报告。