网页设计课程报告Word下载.docx
- 文档编号:16640725
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:11
- 大小:531.64KB
网页设计课程报告Word下载.docx
《网页设计课程报告Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计课程报告Word下载.docx(11页珍藏版)》请在冰豆网上搜索。
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{
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
removeClass($(id),'
addClass($(classname),'
更多'
key=0;
第八步:
头部样式的设置效果图如8所示。
图8首页整体完成图
5.2详情新闻阅读页面
因为新闻阅读页面都是一样,所以可以创建一个新闻阅读的模板,其布局样式如图9所示。
图9新闻阅读模板
向新闻阅读模板插入相应信息,并创建相应的html文件,和主页创建的新闻标题的a标签的跳转链接相对应。
其中一个效果图,如图10所示。
图10新闻阅读界面
5.3留言版模块设置
插入一个div作为装留言内容和留言输入文本框的容器,如图11所示。
图11留言板基本布局
插入一个留言的样板,和文本输入框和提交按钮,如图12所示。
图12插入输入框和留言样本
插入相应的js代码,实现提交留言的功能,如图13所示,为提交一条留言的示例图。
图13提交留言示意图
functionsubmit(){
if(arr[1].value.length==0){
arr[1].style.borderColor='
arr[1].style.boxShadow='
if(arr[0].value.length==0){
arr[0].style.borderColor='
arr[0].style.boxShadow='
if(arr[0].value.length==0||arr[1].value.length==0||arr[2].value.length>
6){
请输入正确的用户名和密码'
document.getElementById('
userName'
).innerHTML='
欢迎:
+arr[0].value;
document.getElementsByClassName('
getin'
)[0].style.display='
block'
removeClass($('
.liuyan'
),'
hidden'
)
$('
.login'
).style.display='
functionliuyantijiao(){
vartext=$('
#text'
).value;
$('
.leirong'
).innerHTML+='
<
liclass="
xiaoxi"
>
spanclass="
user"
我说:
/span>
mess"
+text+'
/li>
).value='
6总结
“书到用时方恨少”,从这次课程设计当中我深刻的体会到理论知识的重要性,理论结合实际才能将知识掌握牢固。
为了使自己的网页风格统一,是自己在设计过程中更加省时省力,我使用了较多的模板和表格嵌套,这使我的工作效率大大提高。
在设计的过程中遇到了很多问题,有些知识理解得不够深刻,掌握得不够牢固,操作不够熟练,没有能完全达到自己预期的效果,还好通过老师的细心指导和同学们的帮助达到了最终效果。
通过这个课程设计我学到了很多,也发现自己的不足,一周的课程设计结束了,至于总体的感觉只能用八个字来概括虽然辛苦,但很充实。
在这一周里,我学到了很多有用的知识,我也深深地体会到IT行业的辛苦和伟大,随着科学的迅猛发展,计算机行业发展更快了,新技术的广泛应用,会有很多领域是我们未曾接触过的,只有敢于去尝试才能有所突破,有所创新。
搞好一次课程设计,是我今后走上社会的一种财富,所以努力搞好实训才是最要的,打高分不是最重要的,最重要的是你在这次实训中你学到了什么,因为这就是你今后走上社会的一种定贵的财富。
学习的能力很重要,特别是对一个站长来说,因为网络的发展太快,新的技术,新的模式,新的思维方法每天都在出现,如果不学习,很快就会跟不上形势。
做网站虽然辛苦但是让我知道:
“千淘万漉虽辛苦,吹尽黄沙始到金!
”
以前我经常在网上浏览网页,对那些图文并茂的网页很是喜欢,但是根本不知道是怎么做出来的,对一些代码我更本就看不懂,现在好了,经过这学期专门对<
网页设计>
的学习,我已学会了很多。
虽然我还不是很专业,但是已经可以做一些不太复杂的网页了。
通过这一周的课程设计,在张老师老师的精心教导下和同学们的帮助下,以及通过自己在平时的学习和实践,对网站创建和网页的设计知识有了更深的认识
课程设计期间上网查看了一些知名的网站开发出的网页,不仅栏目内容丰富,信息量大,而且页面图文并茂,五彩缤纷,使得网民赞叹不已,流连忘返。
当前的软件的功能日趋复杂,不学到一定的深度和广度是难以在实际工作中应付自如的。
因此反映出自己学习的还不够,存在许多缺点疏漏,需要更加刻苦钻研及学习,不断开拓视野,增强自己的实践操作技能,为以后能做出出色的网页而努力。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 课程 报告
![提示](https://static.bdocx.com/images/bang_tan.gif)