网页制作课程设计.docx
- 文档编号:27145865
- 上传时间:2023-06-27
- 格式:DOCX
- 页数:15
- 大小:2.49MB
网页制作课程设计.docx
《网页制作课程设计.docx》由会员分享,可在线阅读,更多相关《网页制作课程设计.docx(15页珍藏版)》请在冰豆网上搜索。
网页制作课程设计
课程设计报告
课程名称《网页设计》
课题名称南岳衡山旅游网页制作
专业信息管理与信息系统
班级信管1301
学号************
姓名肖宏亮
指导教师余新宇、赵锦元、谢雅
2015年6月10日
湖南工程学院
课程设计任务书
课程名称《网页设计》
课题南岳衡山旅游网页制作
专业班级信管1301
学生姓名肖宏亮
学号************
指导老师余新宇赵锦元谢雅
审批
任务书下达日期2015年6月10日
任务完成日期2015年6月27日
第一部分:
课设目的
21世纪是一个信息时代,Internet已经进入人们生活与工作的各方面,而网页作为Internet信息传递的重要载体,其重要也日趋突出。
所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力,并且上传到网上去,让更多人认识我,更好的宣传自己。
个人网站的总体规划和步骤
1设计的思路
我的个人网站主要是以蓝色基调为主,使人一看就了然,很容易一看就形成系统的逻辑,而且与我们南岳衡山的旅游风景相衬显得十分融洽。
2网站总体风格
我设计的这个网站使用蓝色基调主要是给人舒服,能够一目了然,而且能够吸引人的眼球,更重要的是这期主题是南岳衡山,大体基调使用蓝色与大山的图片颜色相当协调。
网站的总体风格主要是以蓝色为主,以淡色为辅,充满活力,生机。
具有个性色彩。
网站的布局其实并不复杂,主要是先规划还一个大致布局,可以参考很多旅游网站他的大体布局,但不能照搬全抄,要结合自身网站的特点做一些较之其他网页相对有特色的东西,这样才能更吸引人,在网页顶部,我们必须做一个能代表我们网站的LOGO,所以做好一个模版,模版做好框架了,那网站就初步先采用ps技术设计好自己网站的LOGO,然后创建导航栏,再根据导航栏制作其他的页面。
在整个网站的制作过程中我们必须得切记整体风格必须一致,这样才会给人形成一个整体舒服的感觉,否则会显得很唐突。
绿色网站的内容结构也很简单,分类清楚。
页面链接的层次也很明确,访问者可以很明确的感受到制作网站的人的心情和性格。
网站的主要色调是以蓝色为主。
明亮的蓝色是一种非常美丽、优雅的颜色,它非常醒目,给人眼前一亮的感觉,使人感觉非常具有活力。
3网站的分析与设计
设计一个个人网站,主要需要考虑两个方面的因素:
速度:
反应出用户访问网站页面的速度。
主页是经常被访问的页面,最好把每页的风格统一起来,例如:
导航部分最好放在每页相同的位置,便于在每个页面中的跳转。
布局:
是个人网站具有吸引力的根本所在,它主要说的是信息显示的视觉效果。
4总体设计图
网页的总体设计图,一个首页,四个二级子页,三个三级子页,其结构关系图如下。
图4-1总体设计图
5详细设计
5.1各页面的内容
(1)首页:
总述。
(2)景点介绍:
南岳十二个著名景点的简介与美图。
(3)旅游路线:
里面详细显示出了南岳的各景点以及周边特色的地理路线
(4)酒店宾馆:
里面有很多南岳衡山周边宾馆。
标明了详细价格及优惠,可供您挑选。
(5)宗教文化:
主要是介绍南岳的宗教信仰及具体介绍。
(6)旅游社区:
登录界面,点击进入注册后可进入注册页面。
5.2首页的布局
选择“布局模式”,将页面布局为如图4-3所示:
图5-1首页
先使用ps自制一个LOGO,然后布局在首页顶端。
然后再使用div+css的方法布局,大致如图4-2所示.
主要代码:
//www.w3.org/1999/xhtml">
南岳衡山
南岳衡山旅游资源网
南岳风光
5.3制作二级页面
(1)景点介绍页面
主要使用div+css布局和制作的,以第一个二级菜单为例,进入景点介绍页面,里面详细的介绍了南岳各大风景名胜区,首先我们把LOGO和导航栏放置顶部,然后再使用apdiv,在里面插入文字,然后再使用表单将文字输入里面,再调整好布局,在祝融峰处加入链接,如图4-3所示。
图5-2景点介绍页面
主要代码:
functionMM_effectGrowShrink(targetElement,duration,from,to,toggle,referHeight,growFromCenter)
{
Spry.Effect.DoGrow(targetElement,{duration:
duration,from:
from,to:
to,toggle:
toggle,referHeight:
referHeight,growCenter:
growFromCenter});
}
functionMM_effectShake(targetElement)
{
Spry.Effect.DoShake(targetElement);
}
functionMM_effectHighlight(targetElement,duration,startColor,endColor,restoreColor,toggle)
{
Spry.Effect.DoHighlight(targetElement,{duration:
duration,from:
startColor,to:
endColor,restoreColor:
restoreColor,toggle:
toggle});
}
(2)旅游路线页面
主要运用div+css布局,页面布局的左边有景区里面的最新动态,景点的地图以及景点的联系电话,页面的右边主要是景点的路线介绍,路线分为四个栏目,精品路线、宗教路线、自驾路线和驴友推荐路线,每个栏目下面都例举一条路线。
图5-3旅游路线图
5.4制作三级页面
(1)景点介绍的子菜单祝融峰详细介绍页面:
图5-4祝融峰景点的详细介绍的页面
进入景点介绍的二级菜单后,点击祝融峰进入祝融峰景点详细介绍的第三级子页,首先插入logo及导航栏后,我们在代码里插入一段实现焦点图转换的函数,接下来加入div标签,在里面输入祝融峰的详细介绍的文字,在后面同样适用div标签加入旅行画册的栏目,再用apdiv以及表单制作四个画册,他们分别链接了驴友们旅行时拍的美图及美文,如图4.4.2所示
主要代码
window.onload=function()
{vartext=["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"];
varimg=document.getElementById("image1");
varim=0,len=text.length,t=3000;
setInterval(function(){
im>=len?
(im=0):
0;
img.src=text[im++];},t)
}
functionMM_effectShake(targetElement)
{
Spry.Effect.DoShake(targetElement);
}
(2)旅游社区注册页面:
图5-5登录注册页
在进入旅游社区后点击注册的链接就进入了注册页面,首先使用ps技术制作一个注册页面的logo,然后再创造一个9行3列的表格,然后再输入要注册的项目后在页面属性内选择向右对齐,再分别在第三列里面使用表单插入相应功能,在后面创建两个按钮实现注册和清除功能,按钮后有一个返回首页的链接,点击返回首页。
主要代码
functionMM_validateForm(){//v4.0
if(document.getElementById){
vari,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for(i=0;i<(args.length-2);i+=3){test=args[i+2];val=document.getElementById(args[i]);
if(val){nm=val.name;if((val=val.value)!
=""){
if(test.indexOf('isEmail')!
=-1){p=val.indexOf('@');
if(p<1||p==(val.length-1))errors+='-'+nm+'mustcontainane-mailaddress.\n';
}elseif(test!
='R'){num=parseFloat(val);
if(isNaN(val))errors+='-'+nm+'mustcontainanumber.\n';
if(test.indexOf('inRange')!
=-1){p=test.indexOf(':
');
min=test.substring(8,p);max=test.substring(p+1);
if(num}}}elseif(test.charAt(0)=='R')errors+='-'+nm+'isrequired.\n';}
}if(errors)alert('Thefollowingerror(s)occurred:
\n'+errors);
document.MM_returnValue=(errors=='');
}}
5.6特效
运用JavaScript脚本语言制作网页中的特效。
首页、二级子页中设计了一个当浏览器窗口上不在显示导航栏的时候,存在一个回到顶部的效果,方便浏览者浏览。
图5-6回到顶部
其js代码如下:
window.onload=function(){
varback=document.getElementById("back_top"),
allh=document.documentElement.scrollHeight;
window.onscroll=function(){
back.style.display="none";
varch=document.documentElement.clientHeight,
scrTop=document.body.scrollTop;
if(scrTop>=100)
back.style.display="block";
}
}
functionto_top(){
top1=document.documentElement.scrollTop=0;}
6错误调试
在本次课设中遇到许多的问题,我用的是纯代码编写的,首先就是用div+css布局的时候,不怎么熟练,不知道用绝对定位还是相对定位或者是用浮动,只能慢慢的试,还有就是定位时网页的整体宽度和高度要设计好,这些都要先做好,然后才去编写代码,才能省很多的时间;再就是在网页制作前要把网页的内容组织好,以及把所有的要用到的图片准备好。
7总结
在这次课设中,老师给我们定下的要求我们基本都完成了,心里觉得非常满足,在整个过程中我遇到了很多难题,也会觉得不耐烦,但是我还是坚持下来了,当看到自己的成果时觉得很满足,觉得不可思议,在这短短的一周里面我学到了很多东西,同时也发现了很多不足,在今后的学习中我一定会好好巩固基础,多加实践。
只有实践的多了,才能让掌握的知识运用的更加的熟练,同时加深我们对知识的理解。
8心得体会
通过这次的课程设计,找到了自己在学习方面的不足,同时锻炼了自己的动手能力。
让我体会到了了以前课堂里面体会不到的成就感,课堂上是学习知识,而课设让我把学到的知识运用到实处,让我把学到的知识完成一个作品,并且能够对我们以后的工作有帮助。
课程设计虽然只是对一个学期学习的检验。
但是在这其中看到了自己的不足,同时也学会了在网页设计上的一些经验。
次课设的实战,让我借这次机会重新温习,我们参考了很多有关旅游的网站,学习了有关网站的布局,查看他的代码,试着借鉴参考,进一步进行了解,然后再查看相关视频,寻找素材,确定布局,慢慢捡起以前学过的知识,从操作陌生到慢慢感到熟练,从而对前端网页制作有更深一步的了解。
这次实训更加考验了团队的合作能力,通过和搭档的团结合作,互相弥补缺陷共享成果,达到事半功倍的效果,当这次成果在班级展示时,我感到非常自豪,虽然和其他人比起来显得有些普通,而且还有很多地方需要完善,但是我还是对我们的作品感到很满意,因为在这次实训中我学到只有敢于去尝试才能有所突破,有所创新。
9评分表
计算机与通信学院课程设计评分表
课程名称:
网页设计
项目
评价
设计方案的合理性与创造性
设计与调试结果
设计说明书的质量
答辩陈述与回答问题情况
课程设计周表现情况
综合成绩
教师签名:
日期:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
网页
制作
课程设计
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。