杭州理工大学网站设计课程报告

时间：2023-09-22 19:12:01 | 来源：网站运营

时间：2023-09-22 19:12:01 来源：网站运营

杭州理工大学网站设计课程报告：一、实验目的

要求使用div+CSS+JavaScript+jQuery完成杭州理工大学网站（http://www.bit.edu.cn/）首页的设计效果如图所示。

从网页布局设计、内容编排、表现设计、交互与动态效果设计等多个方面完成高校网站设计。企业网站首页中主要包含下拉耳机导航表单、搜索栏、jQuery旋转轮播式插件CarouFredSel、Tab选项卡等表现形式。

二、实验环境（仪器设备、软件等）

实验软件：HBuilderX

系统环境：win10操作系统

三、实验原理（或要求）

1. div网页布局结构设计
   

1. 内容编排
   按照网页布局设计，分别设计每一个分区内容、表现及互动效果。
   ①头部设计。
   头部包含logo和顶部导航链接两部分，有5部分组成，其中三个图层分别插入logo、链接、中英文等。图层设置float属性，分别向左、向右浮动排列。
   类名称.top_link的图层中，有4个链接，当鼠标盘旋时，出现上下翻滚背景图的效果。这是通过CSS变换超链接和盘旋超链接的背景图像的样式来实现的。每副背景图像有两个颜色相近的色块构成。
   默认将超链接背景设置为不重复、居左上部，盘旋超链接设置背景不重复、居左底部，这样来形成翻滚效果。
   ②JavaScript导航栏菜单设计
   导航栏菜单有耳机下拉菜单构成，一级菜单水平排列，有学校概况、党群工作、人才培养、科学研究、师资队伍、学生工作、招生就业、国际交流。二级菜单有下拉菜单，在每个一级下拉菜单列表项的下面。
   采用JavaScript技术实现耳机导航菜单。一级菜单采用无序列表，二级采用自定义列表，并将自定义列表镶嵌在列表项li标记中。
   ③搜索栏设计
   为了方便网站访问者检索信息，一般网站首页都会设计搜索栏。搜索栏内默认值为“站内搜索”，获取焦点是自动清空，，失去焦点时，洛无内容则自动赋值为默认值。
   ④jQuery插件实现轮播图轮播
   分别用两个图层来实现。第一个图层设置轮播项目，即若干个图像超链接；第二个图层设置轮播导航，即显示图像切换按钮‘上一个、下一个’。
   图像轮播图层代码设计。需要将轮播的图像通过超链接的方式加图层中。然后设计图层、超链接、图像的样式。无鼠标操作时，5s自动轮播图像；通过左右箭头实现图手动切换。
   ⑤主体设计
   主体内容设计主要包括北理新闻、北理快讯、公共服务、专题报道、通知公告。
   ·北理新闻。此部分采用图像超链接实现图文混排效果，三个图层向左浮动。
   ·北理快讯。采用tab选项卡实现小区域内显示大量信息的功效。Tab选项卡也称“滑动门”，是由选项菜单 和主体显示取余构成。选项卡标题菜单一半采用无需列表呈现，设置无序列表的class和id属性，并给每一个列表指派onmouseover或者onclick事件句柄，绑定函数settab（m，n）,设置第一个列表class属性为hover，通过css定义hover为块级显示方式。指定选项卡信息显示区域是通过无序列表来显示相应信息，然后在无序列表中嵌入div，在div中在嵌入定义列表，用定义列表加载超链接信息。
   ·公共服务。主要通过CSS加载小图标和文字链接。利用空span标记应用样式加载图标。
   ·专题报道。通过图层嵌套来实现，先定义含两个超链接的导航图层，然后分别定义两个图层，通过无需列表存放信息，其中第一个图层默认为显示。
   ·通知公告。有三个图层嵌套构成，外涂层包含两个子图层，第一个子图层包含标题；第二个子图层包含日期分类的通知信息。
2. 表现设计

网站所有样式文件统一写在外部CSS文件中，文件名为style.css。通过样式表的方式插入在html页面的头部。

四、实验步骤

1. 下载安装HBuilderX。
2. 开始网页结构布局设计，绘制网页布局结构图。
3. 划分功能模块，开始填充设计内容。
4. 准备网页所需图片。
5. 在HBuilderX上创建一个包含html、css、img的项目。
6. 开始编写静态网页。

7、编写动态特效并添加。

五、记录与处理（实验数据、误差分析、结果分析）

1>div网页布局结构设计

2>内容编排

按照网页布局设计，分别设计每一个分区内容、表现及互动效果。

①头部设计。

头部包含logo和顶部导航链接两部分，有5部分组成，其中三个图层分别插入logo、链接、中英文等。图层设置float属性，分别向左、向右浮动排列。

类名称.top_link的图层中，有4个链接，当鼠标盘旋时，出现上下翻滚背景图的效果。这是通过CSS变换超链接和盘旋超链接的背景图像的样式来实现的。每副背景图像有两个颜色相近的色块构成。

默认将超链接背景设置为不重复、居左上部，盘旋超链接设置背景不重复、居左底部，这样来形成翻滚效果。代码如下所示：

顶部菜单具有背景图像翻转效果，需要调用两个外部JS文件

②JavaScript导航栏菜单设计

导航栏菜单有耳机下拉菜单构成，一级菜单水平排列，有学校概况、党群工作、人才培养、科学研究、师资队伍、学生工作、招生就业、国际交流。二级菜单有下拉菜单，在每个一级下拉菜单列表项的下面。

采用JavaScript技术实现耳机导航菜单。一级菜单采用无序列表，二级采用自定义列表，并将自定义列表镶嵌在列表项li标记中。示例：

③搜索栏设计

为了方便网站访问者检索信息，一般网站首页都会设计搜索栏。搜索栏内默认值为“站内搜索”，获取焦点是自动清空，，失去焦点时，洛无内容则自动赋值为默认值。

④jQuery插件实现轮播图轮播

分别用两个图层来实现。第一个图层设置轮播项目，即若干个图像超链接；第二个图层设置轮播导航，即显示图像切换按钮‘上一个、下一个’。

图像轮播图层代码设计。需要将轮播的图像通过超链接的方式加图层中。然后设计图层、超链接、图像的样式。无鼠标操作时，5s自动轮播图像；通过左右箭头实现图手动切换。

⑤主体设计

主体内容设计主要包括北理新闻、北理快讯、公共服务、专题报道、通知公告。

·北理新闻。此部分采用图像超链接实现图文混排效果，三个图层向左浮动。

·北理快讯。采用tab选项卡实现小区域内显示大量信息的功效。Tab选项卡也称“滑动门”，是由选项菜单 和主体显示取余构成。选项卡标题菜单一半采用无需列表呈现，设置无序列表的class和id属性，并给每一个列表指派onmouseover或者onclick事件句柄，绑定函数settab（m，n）,设置第一个列表class属性为hover，通过css定义hover为块级显示方式。指定选项卡信息显示区域是通过无序列表来显示相应信息，然后在无序列表中嵌入div，在div中在嵌入定义列表，用定义列表加载超链接信息。

·公共服务。主要通过CSS加载小图标和文字链接。利用空span标记应用样式加载图标。

·专题报道。通过图层嵌套来实现，先定义含两个超链接的导航图层，然后分别定义两个图层，通过无需列表存放信息，其中第一个图层默认为显示。

专题报道需要引用外部文件tab.js，格式如下

·通知公告。有三个图层嵌套构成，外涂层包含两个子图层，第一个子图层包含标题；第二个子图层包含日期分类的通知信息。

3>表现设计

网站所有样式文件统一写在外部CSS文件中，文件名为style.css。通过样式表的方式插入在html页面的头部。

1. 实验小结

web前端开发技术的课程设计是计算机专业实践性非常强的一门学科，通过本次课程设计近乎完美地实现了html、css、JavaScript的综合使用，但是仍然存在不少问题需要解决，在解决问题过程中我通过查询资料和检索网站获取了很多有趣且有用的东西。我在编写网站时，每编写一段便停下来检查代码运行代码，由于代码量的繁多以及层级过多导致编写过程中出现了许多低级错误，不得不一再停止编写反复检查。对于一些编写不出来的功能模块，我采取空置div，等实验代码实现时再填充模块。