网页制作实训报告Word格式文档下载.docx
《网页制作实训报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页制作实训报告Word格式文档下载.docx（13页珍藏版）》请在冰豆网上搜索。
概述
主题介绍
大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。
但是有很多圣诞节的欢庆活动和宗教并无半点关联。
交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。
由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。
制作目的及其方法
主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Flash、Photoshop等相关辅助软件。
1、应用远程站点管理的知识和技能；
2.应用本地站点管理的知识和技能；
3.应用网页页面设计的知识和技能；
4.应用网页制作的知识和技能；
5.培养以上知识和技能的综合应用能力。
主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。
网站规划及其实现过程
我通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：
首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，选择页面设计宽950像素，能够在各类型显示器下很好的呈现。
前期的策划完毕，现在勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamwever制作，图片设计选择photoshop制作。
系统结构图
网站制作的具体内容
主页的制作
1、主页表格的布局及其图片的插入
2、主页文字的输入及其最终效果图
3、导航条的设计
分页的制作
1、圣诞起源表格布局及其效果图
3、插入滚动图片的代码及其效果图
4、圣诞促销层的插入及其效果图
背景音乐、Flash图片和视频的插入
1、背景音乐插入代码
<
bgsoundsrc="
1.mid"
loop="
1"
/>
2、flash图片插入的代码及其效果
objectclassid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
width="
1295"
height="
151"
title="
top"
>
<
paramname="
movie"
value="
flash/15.swf"
quality"
high"
wmode"
transparent"
embedsrc="
quality="
pluginspage="
type="
application/x-shockwave-flash"
wmode="
/embed>
/object>
3、flash视频插入区域的说明及其视频
框架排版和时间轴的运用
鼠标特效代码的插入
scriptlanguage="
JavaScript"
!
--
if（document.all）{
colours=newArray（'
ff0000'
'
00ff00'
3366ff'
ff00ff'
ffa500'
ffffff'
fff000'
）
amount=colours.length;
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;
document.write（'
divid="
ie"
style="
position:
absolute;
top:
0;
left:
"
divstyle="
relative"
'
）;
for（i=0;
i<
amount;
i++）
iestars"
0px;
height:
50px;
width:
font-family:
CourierNew;
font-size:
5px;
color:
+colours[i]+'
;
padding-top:
20px;
text-align:
center"
.<
/div>
ini=1;
gstep=1;
functioniMouse（）{
my=event.y;
mx=event.x;
}
document.onmousemove=iMouse
functiondim（）{
ini-=gstep;
dt=setTimeout（'
dim（）'
10）;
if（ini<
2）{
clearTimeout（dt）;
glow（）;
functionglow（）{
ini+=gstep;
gt=setTimeout（'
glow（）'
if（ini>
14）{
clearTimeout（gt）;
dim（）;
functionstars（）{
ie.style.top=document.body.scrollTop;
{
varlayer=iestars[i].style;
layer.filter='
glow（color='
strength='
+ini+'
）'
layer.top=Ydelay+100*Math.sin（（5*Math.sin（（currStep-15.99）/10））+i*70）*Math.sin（（currStep）/10）*Math.cos（（currStep+i*25）/10）;
layer.left=Xdelay+180*Math.cos（（5*Math.sin（（currStep-15.99）/10））+i*70）*Math.sin（（currStep）/10）*Math.cos（（currStep+i*25）/10）;
}
currStep+=step;
}functionbbimg（o）
{
returntrue;
/script>
SCRIPTLANGUAGE="
functionResumeError（）{
window.onerror=ResumeError;
//-->
styletype="
text/css"
.STYLE3{font-size:
18px}
.STYLE4{color:
#0099FF}
functiondelay（）{
Ydelay=YgetDelay+=（my-YgetDelay）*1/20;
Xdelay=XgetDelay+=（mx-XgetDelay）*1/20;
stars（）;
setTimeout（'
delay（）'
delay（）;
//-->
制作网站出现的问题
在做超链接时出现的问题及解决方法
1、一开始找不到相应的文件，在命令“#up”时出现了问题，已经做好文件链接的工作，打开浏览时，链接打不开，页面出错，通过尝试重新链接已成功解决。
2、链接的页面图片无法显示，通过检查发现图片的路径出错，或图片命名不一致导致的。
实训总结
我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。
在制作网页过程中，需要配合flash动画的适时加入，更要明白做此类动画所要表达的意义，协调整个网页的布局。
从实训中我体会到了flash制作的不易，掌握了一些工具的多种用法，懂得了就算是简简单单的动画也需要有制作者特别的心意。
李老师也非常认真负责，耐心讲解，细心指导，一点一点解答同学们的疑惑，直到同学们理解了为止。
在实训中，分析、讨论，机房里充满了浓浓的学习气氛。
通过实训，我发现对于平时的知识有了很大的提高，并且合理的在试验中进行了实践。
在这次实验的过程中，我搜集了大量的素材、图片和网页设计的制作整体布局方法，这些学习不但增加了我的知识面，而且使我在以后的设计过程中能博采众长，为制作出好的网页打下了基础。
最后，我感受最深的是：
想要最好一个网站，素材和技能都十分重要。
好的素材需要多放面查找资料的，好的技能需要不断的实践。
我希望以后还能有这样的机会来锻炼自己的实践能力，不断丰富自己在网页设计方面的知识。
参考文献
1、《圣诞节朗诵诗歌》
作者：
佚名
文章来源：
网络
点击数：
21322
更新时间：
2006-12-23
2、圣诞起源文章
http:
//www.allaboutjesuschrist.org/chinese/christmas-origin.htm
3、Flash动画
4、Flash视频
5、鼠标特效代码
6、相关圣诞节的图片
2011-12-19
2011-12-11
7、超酷图片自定义滚动代码
升级会员 