网页制作实验报告

北京理工大学珠海学院课程设计说明书

_2013_—_2014_学年第_1_学期

题目: 《Web应用开发课程设计》

学院：计算机学院

专业班级： 11级软件工程3班

学号： 110202031031

学生姓名：蒋征

指导教师：魏志军

成绩：

时间： 2014/1/5

2014年 1 月 5 日

摘要

本次作品是一个IT技术交流论坛，实现论坛的基本功能，注册、登录、发帖、浏览和回帖。

论坛分三个分板块，网页、C#和JA V A，纵向层次也是三层，主页、板块页和帖子页。网站使用JavaScript实现动态页面。

关键词：计算机技术交流社区JavaScript 网页

I

目录

摘要 ............................................. I 目录 ............................................. II 1 网站结构和布局 (1)

1.1 网站结构 (1)

1.1.1 总体结构 (1)

1.1.2 横向链接结构 (2)

1.2 页面布局 (3)

1.2.1 主页 (3)

1.2.2 分版页面 (6)

1.2.3 帖子页面 (6)

2 技术应用 (8)

2.1 逻辑设计 (8)

2.1.1 HTML和CSS设计 (8)

2.1.2 JavaScript设计 (10)

参考文献 (13)

心得体会 (14)

I

教师评语 (15)

成绩评定表 (16)

课程设计答辩记录表 (17)

II

1 网站结构

1.1主体结构

1.1.1总结构

网站是以技术交流社区为主题的论坛型网站。

这个网站是按树形结构设计如图1-1-1，页面种类共分三层，分别是主页，分主题页还有就是内容页。

主页连向三个分主题分区页面，分别是MTHL板块，C#板块还有就是JAVA 板块。

主题分区页面下面是内容帖子。

图1-1-1网页关系

1

1.1.2横向连接结构

在连接方面本着任一网页能够链接其他所有网页的思路设计，为了达到这一想法，设计了导航区位于页面中部的右方如图1-1-2。

图1-1-2导航栏

除了导航栏外，为了让用户更明了知道自己当前所在的位置，还设计了路径栏。如图1-1-3。

2

图1-1-3路径栏

1.2页面布局

1.2.1主页

主页布局用的是常见的头-中-尾，三段式布局。

用户打开网站第一眼看到的就是头部，所以头部的设计要有视觉冲击力，给用户一个好的第一印象。

头部开始部位是站标如图1-2-1，站标不是独立的图片而是PS在背景上的，即给显示了站标，又给背景图片上了水印（在此仅为技术展示，背景图片取自百度图片），一举两得。

图1-2-1站标

站标右边是登录界面，登陆界面是使用JS的动态块（具体内容看2.1.2JavaScript设计）。然后是页内导航栏，通过点击这个导航栏可以使滑条滑倒指定位置。再下面就是公告栏，页内导航栏和公告栏都添加了黑色且半透明的背景块，使网页更具视觉效果如图1-2-2。

3

图1-2-2站内导航栏及公告栏

头部的最下面是路径栏和发帖栏（由于没有服务器，所以发帖栏没有功能）。整个头部如图1-2-3。

图1-2-3头部

中部是内容的载体，光给用户好的第一印象是不够的，用户打开网站的目的是浏览内容，因此中部要给用户一个充实的中部，而最有内容充实感的组件就是幻灯片，所以中部的开始位置是幻灯片，幻灯片和其右边的调转块是联动的（JS 参照 2.1.2JavaScript设计），目的是结合图片和文字更好的说明内容如图1-2-4。

图1-2-4幻灯片及文字说明联动快

4

接下来的的部分左边分版导航栏，用户可以通过这里链接到各个主题的板块分区。左边是各个板块的精品贴展示区如图1-2-5。

图1-2-5导航栏及精品贴展示区

为了统一风格，中部和尾部都使用了黑色半透明的背景块。

网站的尾部是网页说明如图1-2-6。

图1-2-5尾部

5

1.2.2分版页面

分版页面和主页一样也是三段设计，其头部与首页相同。

中部没有幻灯片，左边也是导航栏，右边是板块里所有的帖子的链接如图1-2-6。

图1-2-6分区中部

尾部也与首页相同。

1.2.3帖子页面

帖子页的模版与分区页相同，目地是为了简约，使用户不用记忆过多的界面，及界面的使用方法。

帖子的格式也非常的简约如。开始是标题，标题同行后面跟着帖子的一些属性。然后是正文，图片左浮，段落开头空两格，段落间空一行图1-2-7。

6

7

2 技术应用

2.1设计与逻辑

2.1.1 HTML和CSS设计

全站使用的是DIV+CSS兼顾表格布局（表格的作用只是显示行列数据，不参与板块布局），全网站页面在制作之初就以划分为数个模块，模块使用DIV+CSS 绝对定位布局，以模块为单位封装内容。

全网站是用的CSS选择器为类选择器及属性选择器。为减少代码量，以模块为单位在不冲突的情况下尽量使用重写类选择器下的属性的方法调整布局如图2-1-1。

图2-1-1重写类选择器的属性

这样做的好处是不用在HTML标签中反复的添加class=””属性如图2-1-2（p、h2等标签没有class=””属性），从而减小代码量，减小服务器载荷。

图2-1-2重写选择器属性的好处

8