当前位置：首页 > news >正文

《Java Web程序设计》实验报告三使用DIV+CSS制作网站首页

news 2025/7/13 11:31:13

目录

一、实验目的

二、实验环境

三、实验步骤和内容

1、小组成员分工（共计4人）

2、实验方案

3、实验结果与分析

4、项目任务评价

四、遇到的问题和解决方法

五、实验总结

一、实验目的

1、掌握HTML、CSS基础知识

2、掌握DIV+CSS进行网页布局

3、掌握Flex网页布局

4、掌握网站复杂页面制作

二、实验环境

1、硬件要求：笔记本电脑一台。

2、软件要求：Windows操作系统，使用Eclipse编译环境、Tomcat服务器以及Microsoft Edge浏览器。

3、网络要求：能访问互联网。

三、实验步骤和内容

1、小组成员分工（共计4人）

（1）组长——锦鲤

完成小组内部成员的分工以及前端界面的设计和把控，制定相关的组内合作机制，组内项目的构建遵从“四模四合三并一详”制度，即“四模”为相关项目的制作分为四个模块，每一个人负责一个模块的制作；“四合”为组内四人之间相互合作，将项目开展过程中出现的问题及时的反馈到小组群内，小组成员一起解决；“三并”为以3天为一个期限合并一次代码，检测代码之间以及网页之间是否能够正常的进行衔接和跳转，即每周周三和周六各进行一次小的代码合并工作，将过程中出现的问题发到小组群里让对应负责的同学进行修改和完善，最后在每周的周天进行一次大型的代码合并，此时所有成员必须全部到场，对运行过程中和演练过程中可以改进的地方进行记录，全部演示完毕后对自己负责的模块再进行相应的完善工作；“一详”为组内所有代码都要有相应的注释，确保组内成员都可以看懂各自负责模块的代码，方便进行后期代码的修改工作。

设计网页的整体布局结构并完成模块分工，解决项目制作过程中出现的问题并合理的指导组员完成实验报告的撰写和核查，负责中国开源网博客页面中中间主体以及页面底部内容的模仿。

（2）组员——核桃

使用Eclipse编译软件负责中国开源网博客页面中右边栏目内容的模仿以及相关素材的下载和整合嵌入工作。

（3）组员——花生

使用Eclipse编译软件负责中国开源网博客页面中左边栏目内容的模仿以及相关素材的下载和整合嵌入工作。

（4）组员——西瓜

使用Eclipse编译软件负责中国开源网博客页面中头部内容的模仿以及相关素材的下载和整合嵌入工作。

2、实验方案

1、根据课本、PPT和老师课堂中讲解的内容，使用Eclipse编译软件模仿中国开源网博客的页面。

2、各自完成自己负责模块内容的模仿，定期完成代码的迭代和组合。

3、最终项目整合后对存在的问题进行汇总并对有问题的地方进行改正和完善。

4、定期讨论并总结项目制作过程中出现的问题，对出现的问题进行归纳总结。

5、完成最终的项目以及各自的实验报告，最后进行实验报告排版的检测并提交。

3、实验结果与分析

1、组内成员负责的各自模块完成修改成为最终结果后嵌入到仿中国开源网博客的代码之中，最后在Eclipse编译软件中进行运行，仿中国开源网博客运行界面如图5-1：

图5-1 仿中国开源网博客运行界面

2、设计中国开源网博客的中间主体部分的头部，使用参数align=“left”将精彩博客左对齐，使用参数align=“right”将更加右对齐，其中更加附加了链接属性，仿中国开源网博客中间主体头部界面如图5-2：

图5-2 仿中国开源网博客中间主体头部界面

3、使用bootstrap3样式完成仿中国开源网博客中间主体的上端部分区块的设计和排版，并对相关的内容进行渲染，对嵌入的图像进行一定的修饰，仿中国开源网博客中间主体上端界面如图5-3：

图5-3 仿中国开源网博客中间主体上端界面

4、在模仿的中国开源网博客的中间主体的中端放置一个盒子，用来放最新推荐和每日一搏两个切换块，并通过点击实现对应事件的响应以及页面的切换，仿中国开源网博客中间主体中端界面如图5-4：

图5-4 仿中国开源网博客中间主体中端界面

5、在模仿的中国开源网博客的中间主体的下端放置多个盒子，每一个盒子都存放着对应的一部分信息，并对相关的字体颜色、样式、大小等进行了修饰，并在单独盒子的最右边插入了相关内容的图片，每一个盒子均可以通过点击相关内容进入到对应的博主页面进行信息的详细浏览，仿中国开源网博客中间主体下端界面如图5-5：

图5-5 仿中国开源网博客中间主体下端界面

6、将中国开源网博客中间主体内容模仿完成后进行底部内容的模仿，其中使用了一个大盒子用来作为这个底部，然后在大盒子里面又嵌套了7个小盒子用来对相关信息进行封装，同时使用bootstrap3样式对相关内容进行修饰，使其整个页面更加的自然规整，仿中国开源网博客底部界面如图5-6：

图5-6 仿中国开源网博客底部界面

4、项目任务评价

1、组内成员之间的交流较少，导致对于项目的整体进度把握的不够充分，每次在合并代码时总会出现完成进度一多一少的情况，进而导致整体页面的布局过于零散，致使其他组员不能够很好的把控自己模块的布局位置，从而出现合并代码后页面嵌套或者拥挤导致换行的现象。

2、由于对知识的掌握力度不够导致经常会出现一些编译错误，特别是在使用HTML语言进行编写时会出现标签没有封闭也可以运行的情况，最后导致页面的排版出现问题，在寻找错误源头的过程中花费了一定的时间。

3、组内成员可以认真的完成自己负责的模块，并能够准时的提交自己完成的代码，使我们在进行代码合成的过程中节约了一定的时间，为我们进行页面预览和发现问题提供了充足的时间。

4、每次完成代码迭代更新后对应模块出现的问题大家都可以积极的进行解决，对于解决不了的问题也会在群里进行及时的反馈，进而组员之间相互合作、共同解决发现的问题，不但提高了对问题的解决效率，而且还加深了我们每一个人处理问题的能力。

5、每一个组员在编写代码的过程中都可以对自己的代码进行注释，每一期合成完毕后的代码组内的成员都可以看懂其他组员所编写的代码，这样组内的每一位成员都可以详细的了解我们整个项目的运行，并且在运行后可以比较快速的定位到出现错误的地方。

6、虽然在项目制作的过程中存在一定的问题，但是我们都会进行及时的调整，总的来说优点是大于缺点的，我们会继续保持好的的一方面，及时对缺点和不足进行改正和完善，让小组成员和自己的项目更加完善。

四、遇到的问题和解决方法

1、运行问题：编写的代码在运行过程中出现了乱码现象。

解决方法：鼠标右击->Run As->Run Configurations->Common->在Other后填写gbk然后点击Run进行运行后中文可以正常输出。

2、运行问题：代码编写完成后进行运行发现网页无法进行页面加载，显示页面请求失败。

解决方法：由于没有在Tomcat服务器上进行运行所导致，先运行服务器然后再运行代码后页面可以正常加载。

3、运行问题：启动Tomcat的过程中，有时出现端口被占用的情况。

解决方法：对服务器进行配置，将服务器运行的端口号改为别的端口即可（找到Tomcat安装目录下的文件“/conf/server.xml”->使用记事本或写字板打开文件，在文件中找到“Connector port=8080”->将“8080”改为“8888”，然后保存配置文件->重启Tomcat服务器）。

4、项目问题：表单是提交给服务器的，如何确定到底提交给哪一个界面。

解决方法：使用<form>中的action属性进行确定即可。

5、项目问题：<input type="submit" value="登录">表示提交按钮，是否可以写普通按钮。

解决方法：不可以，如果将该按钮改为：<input type="button" value="登录">，显示效果一样，但是点击，没有提交功能。不过可以用JavaScript进行提交。

6、项目问题：多个同名文本框是如何存储在获取到的数组里的。

解决方法：以文本框在源代码中出现的顺序，从数组的第0位开始向后放置。

7、代码问题：解决数据传输安全的问题。

解决方法：将form 的action属性设置为post(默认为get)。

8、运行问题：在使用Tomcat服务器提交过程中，如果提交的内容中含有中文，经常会出现中文无法显示的情况。

解决方法：在文件头上写明：<%@ page language="java" pageEncoding="gb2312"%>或<%@ page language="java" contentType="text/html; charset=gb2312"%>后中文可以正常显示。

9、代码问题：在使用Tomcat服务器提交过程中，如果提交的内容中含有中文，经常会出现提交过程中显示乱码。

解决方法：将其转成gb2312格式-变量(字符串)=new String(变量(字符串).get Bytes("ISO-8859-1"),"gb2312")；直接修request的编码-request.setCharacterEncoding("gb2312")；利用过滤器-对整个Web应用进行统一的编码过滤，比较方便。