网页设计课程报告.docx

1、网页设计课程报告武汉华夏理工学院课 程 报 告课程名称：网页设计题 目： XX新闻网专 业 软件工程 班 级 软件1151 学 号 10212815124 姓 名 张劲宇 成 绩 _指导教师 苏永红 2017年3月1日至2017年6月10日1 设计目的制作一个可以陈列各种新闻的网页，还有登录留言的模块。2 开发环境windows 10环境，Mozilla Firefox浏览器，Dreamweaver软件3 需求分析新闻包含国内新闻和国外新闻，还有图片新闻来满足不同人群的新闻阅读需求。4 概要设计 。 。 。图1大致网页布局图整个页面我已简洁大方为其设计特点，各个模块分区清晰明了，登录模块带有登

2、录名自动检测，登录名不能超过6位字符，浏览新闻详细页面模块主要内容极为突出，可以让读者第一时间看到新闻的主要内容，阅读主要信息，来节省读者寻找重要信息的时间。如图1所示，整个网页包含了五个大模块，分别是国内新闻模块，国外新闻模块，登录模块，留言板模块。其中国内模块和国外模块包含了新闻阅读的许许多多的小模块。用到的技术有表格，divcss布局，js操作dom，导航栏。5 详细设计与实现5.1 主页的实现第一步：首先在画图板大概勾勒出主页的布局，我的主页大概分成了四个大块，分别用四个div构成。如图二所示。图2 主页的勾勒第二步：给body设置一个背景图片，使其平铺，默认充满整个body，然后在b

3、ody里面创建这五个div，为了清楚的看清这个布局，先给它加上一个边框样式。第三步：为了更方便的布局，分别给这五个div的css position属性加上absolution的值，然后分别修改其css的top和left的值使其达到图2的效果，其真实效果图如二所示。图三 首页简单布局第四步：给国内新闻和国外新闻加上标题头，然后插入相应的li标签和a标签，还有新闻标题。效果如图四所示。图4 给国内国外div插入内容登录js代码：function panduanUser(element) if (element.value.length 6) alert(用户名长度不能大于6个字符); elemen

4、t.style.borderColor = red; element.style.boxShadow = 5px 4px 13px red; else element.style.boxShadow = none; function reset() var login = document.getElementsByClassName(login)0; var arr = login.getElementsByTagName(input); arr0.value = ; arr1.value = ;第五步：给第四步插入的内容添加css样式，在各个新闻标题的前面添加个点点作为装饰。并将overf

5、low设置为hidden。如图5所示。图5 添加css样式第六步：在底部的div创建一个1*4的一个表格，在表格中添加div调整适当的大小和css样式。设置其div的背景图片的属性，作为展示图片新闻的途径。在给其div设置一个鼠标移上的事件，如图6所示。图6 bottomdiv的布局的实现第七步：给国内国外模块加上浏览更多的点击事件，并加上相应的js代码。如图7所示。图7 点击浏览更多js代码：function getmore(classname,id) if(!key) addClass($(id),zhankai); removeClass($(classname),morehelong)

6、; $(classname).innerHTML = 收起; key = 1 else removeClass($(id),zhankai); addClass($(classname),morehelong); $(classname).innerHTML = 更多; key = 0; 第八步：头部样式的设置效果图如8所示。图8 首页整体完成图5.2 详情新闻阅读页面第一步：因为新闻阅读页面都是一样，所以可以创建一个新闻阅读的模板，其布局样式如图9所示。图9 新闻阅读模板第二步：向新闻阅读模板插入相应信息，并创建相应的html文件，和主页创建的新闻标题的a标签的跳转链接相对应。其中一个效果图

7、，如图10所示。图10 新闻阅读界面5.3 留言版模块设置第一步：插入一个div作为装留言内容和留言输入文本框的容器，如图11所示。图 11 留言板基本布局第二步：插入一个留言的样板，和文本输入框和提交按钮，如图12所示。图12 插入输入框和留言样本第三步：插入相应的js代码，实现提交留言的功能，如图13所示，为提交一条留言的示例图。图13 提交留言示意图js代码：function submit() var login = document.getElementsByClassName(login)0; var arr = login.getElementsByTagName(input);

8、if(arr1.value.length = 0) arr1.style.borderColor = red; arr1.style.boxShadow = 5px 4px 13px red; if(arr0.value.length = 0) arr0.style.borderColor = red; arr0.style.boxShadow = 5px 4px 13px red; if(arr0.value.length = 0 | arr1.value.length = 0 | arr2.value.length 6) alert(请输入正确的用户名和密码); else document

9、.getElementById(userName).innerHTML = 欢迎： + arr0.value; document.getElementsByClassName(getin)0.style.display = block; removeClass($(.liuyan),hidden) $(.login).style.display = none; function liuyantijiao() var text = $(#text).value; $(.leirong).innerHTML += 我说：+ text +; $(#text).value = ;6 总结“书到用时方恨

10、少”，从这次课程设计当中我深刻的体会到理论知识的重要性，理论结合实际才能将知识掌握牢固。为了使自己的网页风格统一，是自己在设计过程中更加省时省力，我使用了较多的模板和表格嵌套，这使我的工作效率大大提高。在设计的过程中遇到了很多问题，有些知识理解得不够深刻，掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导和同学们的帮助达到了最终效果。通过这个课程设计我学到了很多，也发现自己的不足，一周的课程设计结束了，至于总体的感觉只能用八个字来概括虽然辛苦，但很充实。在这一周里，我学到了很多有用的知识，我也深深地体会到IT行业的辛苦和伟大，随着科学的迅猛发展，计算机行业发展更

11、快了，新技术的广泛应用，会有很多领域是我们未曾接触过的，只有敢于去尝试才能有所突破，有所创新。搞好一次课程设计，是我今后走上社会的一种财富，所以努力搞好实训才是最要的，打高分不是最重要的，最重要的是你在这次实训中你学到了什么，因为这就是你今后走上社会的一种定贵的财富。学习的能力很重要，特别是对一个站长来说，因为网络的发展太快，新的技术，新的模式，新的思维方法每天都在出现，如果不学习，很快就会跟不上形势。做网站虽然辛苦但是让我知道：“千淘万漉虽辛苦，吹尽黄沙始到金！”以前我经常在网上浏览网页，对那些图文并茂的网页很是喜欢，但是根本不知道是怎么做出来的，对一些代码我更本就看不懂，现在好了，经过这学期专门对的学习，我已学会了很多。虽然我还不是很专业，但是已经可以做一些不太复杂的网页了。通过这一周的课程设计，在张老师老师的精心教导下和同学们的帮助下，以及通过自己在平时的学习和实践，对网站创建和网页的设计知识有了更深的认识课程设计期间上网查看了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出自己学习的还不够，存在许多缺点疏漏，需要更加刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。