网页设计课程报告.docx
《网页设计课程报告.docx》由会员分享，可在线阅读，更多相关《网页设计课程报告.docx（11页珍藏版）》请在冰豆网上搜索。
网页设计课程报告
武汉华夏理工学院
课程报告
课程名称：
网页设计
题目：
XX新闻网
专业软件工程
班级软件1151
学号10212815124
姓名张劲宇
成绩_________________
指导教师苏永红
2017年3月1日至2017年6月10日
1设计目的
制作一个可以陈列各种新闻的网页，还有登录留言的模块。
2开发环境
windows10环境，MozillaFirefox浏览器，Dreamweaver软件
3需求分析
新闻包含国内新闻和国外新闻，还有图片新闻来满足不同人群的新闻阅读需求。
4概要设计
。
。
。
。
。
。
图1大致网页布局图
整个页面我已简洁大方为其设计特点，各个模块分区清晰明了，登录模块带有登录名自动检测，登录名不能超过6位字符，浏览新闻详细页面模块主要内容极为突出，可以让读者第一时间看到新闻的主要内容，阅读主要信息，来节省读者寻找重要信息的时间。
如图1所示，整个网页包含了五个大模块，分别是国内新闻模块，国外新闻模块，登录模块，留言板模块。
其中国内模块和国外模块包含了新闻阅读的许许多多的小模块。
用到的技术有表格，divcss布局，js操作dom，导航栏。
5详细设计与实现
5.1主页的实现
第一步：
首先在画图板大概勾勒出主页的布局，我的主页大概分成了四个大块，分别用四个div构成。
如图二所示。
图2主页的勾勒
第二步：
给body设置一个背景图片，使其平铺，默认充满整个body，然后在body里面创建这五个div，为了清楚的看清这个布局，先给它加上一个边框样式。
第三步：
为了更方便的布局，分别给这五个div的cssposition属性加上absolution的值，然后分别修改其css的top和left的值使其达到图2的效果，其真实效果图如二所示。
图三首页简单布局
第四步：
给国内新闻和国外新闻加上标题头，然后插入相应的li标签和a标签，还有新闻标题。
效果如图四所示。
图4给国内国外div插入内容
登录js代码：
functionpanduanUser（element）{
if（element.value.length>6）{
alert（'用户名长度不能大于6个字符'）;
element.style.borderColor='red';
element.style.boxShadow='5px4px13pxred';
}else{
element.style.boxShadow='none';
}
}
functionreset（）{
varlogin=document.getElementsByClassName（'login'）[0];
vararr=login.getElementsByTagName（'input'）;
arr[0].value='';
arr[1].value='';
}
第五步：
给第四步插入的内容添加css样式，在各个新闻标题的前面添加个点点作为装饰。
并将overflow设置为hidden。
如图5所示。
图5添加css样式
第六步：
在底部的div创建一个1*4的一个表格，在表格中添加div调整适当的大小和css样式。
设置其div的背景图片的属性，作为展示图片新闻的途径。
在给其div设置一个鼠标移上的事件，如图6所示。
图6bottomdiv的布局的实现
第七步：
给国内国外模块加上浏览更多的点击事件，并加上相应的js代码。
如图7所示。
图7点击浏览更多
js代码：
functiongetmore（classname,id）{
if（!
key）{
addClass（$（id）,'zhankai'）;
removeClass（$（classname）,'morehelong'）;
$（classname）.innerHTML='收起';
key=1
}else{
removeClass（$（id）,'zhankai'）;
addClass（$（classname）,'morehelong'）;
$（classname）.innerHTML='更多';
key=0;
}
}
第八步：
头部样式的设置效果图如8所示。
图8首页整体完成图
5.2详情新闻阅读页面
第一步：
因为新闻阅读页面都是一样，所以可以创建一个新闻阅读的模板，其布局样式如图9所示。
图9新闻阅读模板
第二步：
向新闻阅读模板插入相应信息，并创建相应的html文件，和主页创建的新闻标题的a标签的跳转链接相对应。
其中一个效果图，如图10所示。
图10新闻阅读界面
5.3留言版模块设置
第一步：
插入一个div作为装留言内容和留言输入文本框的容器，如图11所示。
图11留言板基本布局
第二步：
插入一个留言的样板，和文本输入框和提交按钮，如图12所示。
图12插入输入框和留言样本
第三步：
插入相应的js代码，实现提交留言的功能，如图13所示，为提交一条留言的示例图。
图13提交留言示意图
js代码：
functionsubmit（）{
varlogin=document.getElementsByClassName（'login'）[0];
vararr=login.getElementsByTagName（'input'）;
if（arr[1].value.length==0）{
arr[1].style.borderColor='red';
arr[1].style.boxShadow='5px4px13pxred';
}
if（arr[0].value.length==0）{
arr[0].style.borderColor='red';
arr[0].style.boxShadow='5px4px13pxred';
}
if（arr[0].value.length==0||arr[1].value.length==0||arr[2].value.length>6）{
alert（'请输入正确的用户名和密码'）;
}else{
document.getElementById（'userName'）.innerHTML='欢迎：
'+arr[0].value;
document.getElementsByClassName（'getin'）[0].style.display='block';
removeClass（$（'.liuyan'）,'hidden'）
$（'.login'）.style.display='none';
}
}
functionliuyantijiao（）{
vartext=$（'#text'）.value;
$（'.leirong'）.innerHTML+='我说：
'+text+'';
$（'#text'）.value='';
}
6总结
“书到用时方恨少”，从这次课程设计当中我深刻的体会到理论知识的重要性，理论结合实际才能将知识掌握牢固。
为了使自己的网页风格统一，是自己在设计过程中更加省时省力，我使用了较多的模板和表格嵌套，这使我的工作效率大大提高。
在设计的过程中遇到了很多问题，有些知识理解得不够深刻，掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导和同学们的帮助达到了最终效果。
通过这个课程设计我学到了很多，也发现自己的不足，一周的课程设计结束了，至于总体的感觉只能用八个字来概括虽然辛苦，但很充实。
在这一周里，我学到了很多有用的知识，我也深深地体会到IT行业的辛苦和伟大，随着科学的迅猛发展，计算机行业发展更快了，新技术的广泛应用，会有很多领域是我们未曾接触过的，只有敢于去尝试才能有所突破，有所创新。
搞好一次课程设计，是我今后走上社会的一种财富，所以努力搞好实训才是最要的，打高分不是最重要的，最重要的是你在这次实训中你学到了什么，因为这就是你今后走上社会的一种定贵的财富。
学习的能力很重要，特别是对一个站长来说，因为网络的发展太快，新的技术，新的模式，新的思维方法每天都在出现，如果不学习，很快就会跟不上形势。
做网站虽然辛苦但是让我知道：
“千淘万漉虽辛苦，吹尽黄沙始到金！
”
以前我经常在网上浏览网页，对那些图文并茂的网页很是喜欢，但是根本不知道是怎么做出来的，对一些代码我更本就看不懂，现在好了，经过这学期专门对<<网页设计>>的学习，我已学会了很多。
虽然我还不是很专业，但是已经可以做一些不太复杂的网页了。
通过这一周的课程设计，在张老师老师的精心教导下和同学们的帮助下，以及通过自己在平时的学习和实践，对网站创建和网页的设计知识有了更深的认识
课程设计期间上网查看了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。
当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。
因此反映出自己学习的还不够，存在许多缺点疏漏，需要更加刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。
升级会员 