网页制作课程设计Word文件下载.docx
《网页制作课程设计Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页制作课程设计Word文件下载.docx（12页珍藏版）》请在冰豆网上搜索。
具有个性色彩。
网站的布局其实并不复杂，主要是先规划还一个大致布局，可以参考很多旅游网站他的大体布局，但不能照搬全抄，要结合自身网站的特点做一些较之其他网页相对有特色的东西，这样才能更吸引人，在网页顶部，我们必须做一个能代表我们网站的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所示.
主要代码：
<
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
>
head>
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=UTF-8"
title>
南岳衡山<
/title>
linkrel="
stylesheet"
type="
text/css"
href="
index.css"
head_footer.css"
scriptsrc="
one.js"
/script>
/head>
body>
divclass="
big"
head"
ul>
<
li>
ahref="
index.html"
>
首&
nbsp;
&
页<
/a>
/li>
ziye\jingdian.html"
景点介绍<
luxian.html"
旅游路线<
jiudian.html"
酒店宾馆<
"
宗教文化<
shequ.html"
旅游社区<
/ul>
/div>
main"
left"
title"
<
h1>
南岳衡山旅游资源网<
/h1>
jiaodian"
imgsrc="
img\index\jiaodian2.jpg"
left1"
p1"
<
p>
南岳风光<
/p>
l_1"
l_11"
<
#"
imgclass="
1"
src="
img\index\1.jpg"
/>
l_12"
img\index\2.jpg"
5.3制作二级页面
（1）景点介绍页面
主要使用div+css布局和制作的，以第一个二级菜单为例，进入景点介绍页面，里面详细的介绍了南岳各大风景名胜区，首先我们把LOGO和导航栏放置顶部，然后再使用apdiv,在里面插入文字，然后再使用表单将文字输入里面，再调整好布局，在祝融峰处加入链接，如图4-3所示。
图5-2景点介绍页面
/style>
SpryAssets/SpryEffects.js"
text/javascript"
scripttype="
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:
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）
（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+='
mustcontainanumber.\n'
inRange'
）!
=-1）{p=test.indexOf（'
:
min=test.substring（8,p）;
max=test.substring（p+1）;
if（num<
min||max<
num）errors+='
mustcontainanumberbetween'
+min+'
and'
+max+'
.\n'
}}}elseif（test.charAt（0）=='
）errors+='
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评分表
计算机与通信学院课程设计评分表
课程名称：
网页设计
项目
评价
设计方案的合理性与创造性
设计与调试结果
设计说明书的质量
答辩陈述与回答问题情况
课程设计周表现情况
综合成绩
教师签名：
日期：
升级会员 