网页制作实训报告.docx

资源描述

网页制作实训报告.docx

《网页制作实训报告.docx》由会员分享，可在线阅读，更多相关《网页制作实训报告.docx（13页珍藏版）》请在冰豆网上搜索。

网页制作实训报告.docx

网页制作实训报告

摘要1

概述2

主题介绍2

制作目的及其方法2

网站规划及其实现过程3

系统结构图3

网站制作的具体内容4

主页的制作4

分页的制作5

背景音乐、Flash图片和视频的插入9

框架排版和时间轴的运用11

鼠标特效代码的插入12

制作网站出现的问题15

在做超链接时出现的问题及解决方法15

实训总结16

参考文献17

摘要

《网页制作》实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。

我所作的网页主题为《圣诞节》，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。

在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。

概述

主题介绍

大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。

但是有很多圣诞节的欢庆活动和宗教并无半点关联。

交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。

由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。

制作目的及其方法

主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Flash、Photoshop等相关辅助软件。

1、应用远程站点管理的知识和技能；

2.应用本地站点管理的知识和技能；

3.应用网页页面设计的知识和技能；

4.应用网页制作的知识和技能；

5.培养以上知识和技能的综合应用能力。

主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。

网站规划及其实现过程

我通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：

首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，选择页面设计宽950像素，能够在各类型显示器下很好的呈现。

前期的策划完毕，现在勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamwever制作，图片设计选择photoshop制作。

系统结构图

网站制作的具体内容

主页的制作

1、主页表格的布局及其图片的插入

2、主页文字的输入及其最终效果图

3、导航条的设计

分页的制作

1、圣诞起源表格布局及其效果图

3、插入滚动图片的代码及其效果图

4、圣诞促销层的插入及其效果图

背景音乐、Flash图片和视频的插入

1、背景音乐插入代码

2、flash图片插入的代码及其效果

D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="width="1295"height="151"title="top">

3、flash视频插入区域的说明及其视频

框架排版和时间轴的运用

鼠标特效代码的插入

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（'

absolute;top:

0;left:

0;">

relative">'）;

for（i=0;i

document.write（'

absolute;top:

0px;left:

0px;height:

50px;width:

50px;font-family:

CourierNew;font-size:

5px;color:

'+colours[i]+';padding-top:

20px;text-align:

center">.

'）;

document.write（'

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）;

1、一开始找不到相应的文件，在命令“#up”时出现了问题，已经做好文件链接的工作，打开浏览时，链接打不开，页面出错，通过尝试重新链接已成功解决。

2、链接的页面图片无法显示，通过检查发现图片的路径出错，或图片命名不一致导致的。

我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。

在制作网页过程中，需要配合flash动画的适时加入，更要明白做此类动画所要表达的意义，协调整个网页的布局。

从实训中我体会到了flash制作的不易，掌握了一些工具的多种用法，懂得了就算是简简单单的动画也需要有制作者特别的心意。

李老师也非常认真负责，耐心讲解，细心指导，一点一点解答同学们的疑惑，直到同学们理解了为止。

通过实训，我发现对于平时的知识有了很大的提高，并且合理的在试验中进行了实践。

在这次实验的过程中，我搜集了大量的素材、图片和网页设计的制作整体布局方法，这些学习不但增加了我的知识面，而且使我在以后的设计过程中能博采众长，为制作出好的网页打下了基础。

好的素材需要多放面查找资料的，好的技能需要不断的实践。

我希望以后还能有这样的机会来锻炼自己的实践能力，不断丰富自己在网页设计方面的知识。