网页制作实验报告

《网页制作实验报告》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、北京理工大学珠海学院计算机学院课程设计北京理工大学珠海学院课程设计说明书_2013_—_2014_学年第_1_学期题目:《Web应用开发课程设计》学院：计算机学院专业班级：11级软件工程3班学号：110202031031学生姓名：蒋征指导教师：魏志军成绩：　　　时间：2014/1/5　　2014年1月5日北京理工大学珠海学院计算机学院课程设计摘要本次作品是一个IT技术交流论坛，实现论坛的基本功能，注册、登录、发帖、浏览和回帖。论坛分三个分板块，网页、C#和JAVA，纵向层次也是三层，主页、板块页和帖子页。网站使用Ja

2、vaScript实现动态页面。关键词：计算机技术交流社区JavaScript网页I北京理工大学珠海学院计算机学院课程设计目录摘要I目录II1网站结构和布局11.1网站结构11.1.1总体结构11.1.2横向链接结构21.2页面布局31.2.1主页31.2.2分版页面61.2.3帖子页面62技术应用82.1逻辑设计82.1.1HTML和CSS设计82.1.2JavaScript设计10参考文献13心得体会14I北京理工大学珠海学院计算机学院课程设计教师评语15成绩评定表16课程设计答辩记录表17II北京理工大学珠海学院

3、计算机学院课程设计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导航栏除了导

4、航栏外，为了让用户更明了知道自己当前所在的位置，还设计了路径栏。如图1-1-3。2北京理工大学珠海学院计算机学院课程设计图1-1-3路径栏1.2页面布局1.2.1主页主页布局用的是常见的头-中-尾，三段式布局。用户打开网站第一眼看到的就是头部，所以头部的设计要有视觉冲击力，给用户一个好的第一印象。头部开始部位是站标如图1-2-1，站标不是独立的图片而是PS在背景上的，即给显示了站标，又给背景图片上了水印（在此仅为技术展示，背景图片取自百度图片），一举两得。图1-2-1站标站标右边是登录界面，登陆界面是使用JS的动态块

5、（具体内容看2.1.2JavaScript设计）。然后是页内导航栏，通过点击这个导航栏可以使滑条滑倒指定位置。再下面就是公告栏，页内导航栏和公告栏都添加了黑色且半透明的背景块，使网页更具视觉效果如图1-2-2。3北京理工大学珠海学院计算机学院课程设计图1-2-2站内导航栏及公告栏头部的最下面是路径栏和发帖栏（由于没有服务器，所以发帖栏没有功能）。整个头部如图1-2-3。图1-2-3头部中部是内容的载体，光给用户好的第一印象是不够的，用户打开网站的目的是浏览内容，因此中部要给用户一个充实的中部，而最有内容充实感的组件就

6、是幻灯片，所以中部的开始位置是幻灯片，幻灯片和其右边的调转块是联动的（JS参照2.1.2JavaScript设计），目的是结合图片和文字更好的说明内容如图1-2-4。图1-2-4幻灯片及文字说明联动快4北京理工大学珠海学院计算机学院课程设计接下来的的部分左边分版导航栏，用户可以通过这里链接到各个主题的板块分区。左边是各个板块的精品贴展示区如图1-2-5。图1-2-5导航栏及精品贴展示区为了统一风格，中部和尾部都使用了黑色半透明的背景块。网站的尾部是网页说明如图1-2-6。图1-2-5尾部5北京理工大学珠海学院计算机学

7、院课程设计1.2.2分版页面分版页面和主页一样也是三段设计，其头部与首页相同。中部没有幻灯片，左边也是导航栏，右边是板块里所有的帖子的链接如图1-2-6。图1-2-6分区中部尾部也与首页相同。1.2.3帖子页面帖子页的模版与分区页相同，目地是为了简约，使用户不用记忆过多的界面，及界面的使用方法。帖子的格式也非常的简约如。开始是标题，标题同行后面跟着帖子的一些属性。然后是正文，图片左浮，段落开头空两格，段落间空一行图1-2-7。6北京理工大学珠海学院计算机学院课程设计图1-2-6帖子页7北京理工大学珠海学院计算机学院课

8、程设计2技术应用2.1设计与逻辑2.1.1HTML和CSS设计全站使用的是DIV+CSS兼顾表格布局（表格的作用只是显示行列数据，不参与板块布局），全网站页面在制作之初就以划分为数个模块，模块使用DIV+CSS绝对定位布局，以模块为单位封装内容。全网站是用的CSS选择器为类选择器及属性选择器。为减少代码量，以模块为单位在不冲突的情况下尽量使用重