WEB开发基础实验报告
《WEB开发基础》课程设计报告
题目：
班级：
学号：
姓名：
日期：
青岛科技大学课程设计（论文）任务书课程名称： WEB开发基础校区：高密校区班级：学生姓名： ___ 学号： _
目录
1、选题说明 (1)
2、系统分析与设计 (1)
2.1、功能分析 (1)
2.2、网站布局 (1)
2.3、网页效果 (2)
3、设计小结 (6)
3.1、设计中遇到的问题及解决 (6)
3.2、心得体会 (6)
1、选题说明
主要描述设计思路，包括为什么选此题目，总体的设计思路（如风格、色彩搭配等）。
本网站设计的是火影忍者中文网，自然明了是关于众多大家喜爱的鸣人专网。个人是对动漫的追求忠实爱好者，从小到大都是动漫相伴，可惜的是我长大了成为一个大学生，柯南还是个小学生。有点悲催。所以不设计名侦探柯南网站，我选择设计火影忍者中文网主要是因为个人觉得他网页的色彩很丰富，亮丽，有活力。让人眼前一亮。当然我没有那高超的web技术，就仅仅是选择了一些比较好看的图片作为我自己的素材，设计一个与众不同的火影中文网，只是技术问题。希望老师不要吐槽。技术有限。看完我设计的网站，希望会有更多的爱好者加入到我这一行列中来
2、系统分析与设计
2.1、功能分析
主要描述要实现那些功能，功能之间的联系等
图2-1 功能结构图
网站首页下面有5个二级网页。各网页主要内容如下：
首页：总述。
最新情报：漫画最新的情报。
欣赏漫画：显示漫画图片。
观看动画：播放动画。
主题音乐：播放音乐。
最新文章：关于漫画分析的文章。
2.2、网站布局
主要将网站的整体布局格式画出来
由上该网站的基本布局可见，本网站有5个html页面。分别由上图的标题按钮控制，分别为最新情报、欣赏漫画、观看漫画。主题音乐、分析文章。由着5个页面对火影忍者中文网的介绍。其中不同的颜色模块代表着不同的盒子。同样由上图可知，为了保持网页的风格一致，在这里不同的html内容改变的仅仅就一个盒子里面的内容。所以，在设计上有两个CSS文件，一个为公有的，另一个css则是不同的html 各有属性定义。整个网站采用淡红色为主色调，整个网站的主题背景色也是采用火的意志为都设定为火影的给人以视觉冲击。网站分为三大块，头部，主体，和底部。头部用以放置相关图片标题，用以体现网站的内容；主体内分为两个块，左边用来设置导航栏，右边用以网页内容的描述；底部用以添加相关外部链接，提供更多的相关信息资料。整个网站的设计条理清晰，层次分明。
2.3、网页效果
主要将设计的网页截图，并作简要描述
首先是index.html如下图所示。很吐槽的说，这就是传说中我设计的框架首页。
根据这个效果图，我们可以发现，是不是跟最上面的布局是一样的！在这里总体布局有四个盒子，都是居中方式排布。有最上面的logo栏的黑色图片盒子，第二个是一个大型的盒子，背景图片也是为一张图片。在它的里面嵌套入另外连个盒子，一个是导航栏，另外一个是预留区，为了另外五个网页的不同层次的变化做准备的地方。下面两个盒子分别是“生死对决”渲染主题的图片和个人版权所有的模块footer。在这总体布局的四个大盒子中，没有采用center形式固定在中间。而是采用绝对定位的方式将其固定。
最新情报(Zuixin.html)
欣赏漫画（Xinshang.html）
在这一页中，总体布局部分依然不变，并且导入外部CSS样式表，重新对ul无序列表定义。使
得
化进行改动。在主体部分头部，加入了JavaScript特效，手风琴特效。使得图片能够在鼠标触及的时候自动切换。开始的时候本想再次叠加几个网页，使得实行上一页、下一页的图片反动效果。想想很繁琐，在网上看到一个JavaScript特效很符合改变我这种尴尬的情况。所以直接拿来调动。虽然我对JavaScript掌握的还不是很好，但基本功能及使用还是可以的。在切换的动漫图片都是自己手动用photoshop按照盒子的大小比例做出来的，。从而图片看起来一点都不会出现偏大偏小。看起来是不是很舒服，这样的欣赏漫画方式，我觉得，那个火影忍者中文网是不是该要改改我这样的了哈哈，自己娱乐一下。导入代码如下：
观看漫画（Guankan.html）
当看到如下图片效果的时候，我想肯定会有人膜拜我，以为我那个真的可以在线播放视频，嘿嘿，其实不然，虽然不能播放，但还是可以忽悠一部分人的，这里的仅仅是截取了两个小播放缩图，分别用相对定位的方式如：position:relative;top:10px;将其固定在在背景色为白色的盒子中，旁边的文字也是如此，在此就不解释文字的定位了。一样的意思，然而在“放送时间”下面链接部分，采用了style="text-decoration:none;清除其默认带有的下划线。美丽充满迷惑的效果就出来了。
主题音乐（Zhuti.html）
在这一网页设计中，背景图直接是放在隐含的盒子中，另外两张图片同上面的“观看漫画”网页中的是一样盒子，只不过是图片不同，刚才看到的图片是假的不能播放视频，然而这个可以播放音乐哦。这下可以膜拜了。嘿嘿，说出来其实就很简单，仅仅是调用了html5的新功能。在IE6就不会出现这个小型音乐播放器了，代码如下：是不是这样感觉很fashion？
分析文章（Wenzhang.html）
在此网页中都是些文本编辑，所以也就没有涉及的什么定位浮动什么的。刚开始的第一句“火影忍者漫画分析?诗歌美文”用对字体的样子进行改变。然后以
来一个华丽的分割线。字体的加粗以及换行
和空格 。本来想想缩进有没有其他更好的
方法让他自动缩进两个字节，怕嫌麻烦就还是用简单的 虽然也能达到，感觉好没水平的方式
3、设计小结
3.1、设计中遇到的问题及解决
刚开始打算开动写web课设的时候就绞尽脑汁，如何排版一个框架出来，这个就像是建房子，把地基和柱子都打好了，剩下的仅仅是将砖块堆砌上去就可以，问题就出在如何完美的做出一个符合自己口味的布局。试过用float方式，可能是因为掌握的不熟练，老是不能按照指定的想法将盒子放在一个地方，最后还是采用最强有力的方法，绝对定位，把盒子死死的钉在固定的位置；在欣赏漫画的网页中，由于开始的时候本想再次叠加几个网页，使得实行上一页、下一页的图片反动效果。想想很繁琐，那样的话又得多增加好几个网页。在网上看到一个JavaScript特效很符合改变我这种尴尬的情况。所以直接拿来调动。虽然我对JavaScript掌握的还不是很好，但基本功能及使用还是可以的。在切换的动漫图片都是自己手动用photoshop按照盒子的大小比例做出来的，。从而图片看起来一点都不会出现偏大偏小；下一个在设计网站中遇到的问题就如何在网页中添加一个播放器，比如百度音乐盒之类的小型播放器。想着自己下载一个插件来解决。最终尝试了多次还是失败而不用那种方法，技术不精导致。用背景音乐又不能控制它的播放。百度果然也是个好东西，不懂的问问度娘，问题迎刃而解。只需一行代码就能除去我的所有后顾之忧。那就是神奇的HTML5新有的
3.2、心得体会
在这次的web课程设计中，虽然网站看起来很亮丽，也蛮炫的，但是却花了我不少时间去布局，个人感觉时间投入不够啊，没有更多的网页设计经验有的不知道的东西还得找资料问问同学，过程中学到不少东西。看着自己设计的成果，我发现自己对网页这个玩意觉得有点意思，而且也涉及到自己的制作想要的图片要photoshop。蛮爽的，我这个自学的不错。哈哈。另外的就是javascript十个很强大的技术，他可以让你的网页显得更加的灵动。有趣。
web前端开发技术实验报告 实验三
长春大学 20 15 —2016学年第二学期Web前端开发技术课程 实验报告 学院：计算机科学技术专业：软件工程 班级：软件15402
学号：041440210 姓名：王悦 任课教师：车娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面； 2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素； 3.理解块元素与行内元素的区别，能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果，满足如下要求： 1.网页弹出框由上面的标题和下面的宣传内容两部分组成； 2.标题通过h2定义； 3.在段落文本中内容部分由h3和p标记进行定义； 4.应用
Web程序设计实验报告
Web程序设计实验报告 姓名：冯刚 学号：200905030324 班级：计科3班
Html代码： 1.首页代码