一 实验过程

1.资料的搜集。

2.熟悉制作软件。

3.构建站点框架。

打开Dremweaver后第一步便是新建站点

4设计主页及二级页面。

5实现网页间的链接

链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。

6向静太网页插入动态效果

具体情况如下：

通过这半年的学习实践中 和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了个人网站，作为实习的成果。其内容是多样化的。制作网页用的软件是Ｄreamweaver , banner软件。Dreamweaver大大加速了网络时代电子交易应用中的项目交付。它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于中国的一些事迹历史图片，好的文章

和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作网页的banner。

再后是建立站点，站点分布如下：

再后是制作网页了，使用dreamweaver制作。

首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：

简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档 次。当然雅俗共赏是人人都追求的。

利用我们所学的框架集，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在dream里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，还有怎么解决啊，不用这么反复调整的办法，还有什么好办法啊？

还有，在最超链接过程中，明明在页面属性里设置的是超链接的文字是原色，点击链接后也是原色，可一链接上就变色了，想了老半天，也做了很多研究，实验，终于知道怎么回事了，原来应该对文字所在的单元格整体做链接，而不是只选中文字做链接。

还有，这次的网站大部分用的是表格，层用的很少，因为它太灵活了，不好控制，用的很少。

再后，是网页的上传与发布，用ftp将制作好的网站上传

制作过程中，才发现，原来自己懂的太少了，好多不知道的地方，才赶紧查书，开始的时候只是会建立模版，可不会应用，操作，可这样要修改模版可就麻烦了，要一个网页一个的修改，于是赶紧上网学习相关内容，阅览书籍，最后才知道文件这有个资源，点击

进入资源面板，点击到数第二个的模版，选项，所有模版就都显示了，点击资源面板左下角的应用命令，好了，这个模版就应用到你建立的网页中去了。

这只是在制作过程中出现的问题之一，其它问题也是类似相同。现在想想，自己所会

的东西太少了，现在做的网站只是一些简单的网站，看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。

同学告诉我，要做好网页，一定要学从C++,JAVA,php，asp，数据库。以后要学的实在是太多了，而且我也很喜欢这方面，在以后的日子里，会努力填充自己，丰富自己的。希望以后有不懂的地方，老师能多多指点。

二 实验心得

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“代言人”。我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。

企业网站在企业的网络营销当中占有及其重要的地位，只要是涉及网络宣传的企业，都应该建立属于自己的个性企业网站。他不仅能够让企业在网络上展示自己的产品，促进实际销售的增长，更能够通过一根网线，向目标客户展示企业自身的形象。

对于企业网站设计的观点，偏重网站的形象设计，即在功能务实、体系完善的情况下，重点结合企业理念打造网站的形象。Logo就能很好的表现企业的形象。企业标志(Logo)是指用于代表企业形象的独特的、有意义的图案，是企业形象识别当中最核心的环节，可用于与企业形象相关的所有环节。由于企业标志所处的特殊地位，决定了其不能够随意更换，因此能否设计一个有内涵、有文化、便于识别的标志，并建立相关的应用系统，关乎到企业长远的发展，不容小视。

建设网站的一般过程包括：前期内容确立、网站架构搭建、创意策划、设计、网站建设。网站的功能版块一般分为首页（含引导页）、新闻部分、产品部分、信息交流部分、定制系统、零散页面等。根据不同的企业需求，各网站的功能版块数量、布局、结构各异。

（一） 页面的设计方面

网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。

学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。

学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习

并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.

并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。

（二）网页视觉效果

视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。

视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直接的接触。

（三）网页的整体布局和导航

网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容，即让用户第一眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型

网页布局是主要考虑以下几点：

1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。

2、其次就应该考虑导航条的设置了。

3、正文的框架设置（横向因素和纵向因素交错）

（四）网页中文字、图像

图象我利用网上搜索和自己所学过的banner进行处理,这样做起来节约了很多时间。。

（五）网页制作过程中的其他注意事项

不要过于注重色彩的灿烂，只要简单就行。我们最终追求的主要是实用价值。

通过这次实习，在制作时想想使自己的网页更加丰富多彩，在网页中插入图象，动画，动态特效。可是总遇到这样那样的问题，但在同学的帮助和自己摸索的情况下完成了这个实习的成果。看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。虚在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。

近一个星期的实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。

 

第二篇：网页制作实训报告

一.实训意义：

网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.

二.实训目的:

1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。

(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。

(2) 熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。

(3) 掌握页面的整体控制和头部内容设置的方法。

(4) 熟练掌握网页页面布局的各种方法。

(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。

(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。

(7) 熟练建立各种形式的超级链接的方法。

(8) 掌握表单网页制作方法。

(9) 掌握网页特效制作方法。

(10) 掌握网站测试的方法。

2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。

4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。

三．实验步骤:

1. 网站主题

我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页面都有介绍不同的游戏资料，、心得、图片等内容。同时，网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色，给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。

2． 网站材料

网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料，Flash动画和网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可

以做好一个好的网站。

3． 网站规划

我的网站共有6个主页面：首页、图片专区、视频专区、玩家交流、帮助中心和联系我们。每一个页面用统一的背景，以保证网站统一的页面风格。如下图：

网站整体色为浅蓝色，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位置的设计也是重要的一个部分，根据具体内容决定大体结构，相同的风格调用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入适当的Flash动态图片，用以达到更好的浏览效果。

4．网站的制作工具

做网页时主要使用的是Deamweaver8软件。另外，为了处理网页中的其他元素，还使用了Photoshop、GifAnimator等软件。

5． 制作网站的网页

素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做到站点的规划，建立一个本地站点“TT”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“images”文件夹存放图片专用的，网页中的CSS样式文件也统一管理，做到有条理，我设计的网站首页如下图：

以导航栏为界，上面插入一个自己制作的Flash动画，用为给浏览者好的视角享受。Flash动画制作过程：首先在网上下载下来的背景图片，以背景图片的内容做标题，设计“梦幻西游”四个字为主题突出网页游戏效果，还有网页的网址，加上字体颜色闪动效果，给人带来一种梦幻的感觉，中间也插入标语，分别上下字体移动，由淡到实的颜色闪动效果，在由左右变换颜色弹走，显得整个Flash动画比较生动些！

网站导航分别还有图片专区，视频专区，玩家交流等！介绍下图片专区内容如下：

图片专区页面中四副图片都是上网搜索下来加以PS之后成品的，页面要设置好位置，每张图片大小格式一样，排整对齐有列序，给人一个舒适的浏览感觉，例如第一张图片在Photoshop中加以相框的外表显得图片比较生动点！第二张图片加以光晕滤镜效果！使图片明亮清晰，第三，四张图片加以修饰亮度暗度光泽等效果，显得图片真实动人。

跟住到视频专区页面介绍如下：

视频专区页面比较简单点，只是自己制作一个简单的Flash动画插入去页面中间显示的。制作的过程就是：新建个深蓝色的背景，在从左上角设计梦幻西游这四个字标题，右下角输入主页网址格式内容。中间制作一个IE的图片加入旋转一周动态代码，使IE图片能自动播放转动，中间也插入文字设置为放大缩细感觉和颜色变换。完成后测试过就直接发布上页面中排好。还有其他导航都插入相关的资料文字来完成的，主页左边也做好相关内容的资料题目，每个链接都有吾同资料内容显示。每一个标题都好做相关链接资料的内容题材。在主页、图片专区、视频专区这三个页面都插入吾同的倾听动人的音乐了。最后，形成一个统一的整体的，方便给浏览者进行了各个页面间的跳转。

6． 上传测试网站

网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。

四. 设计特色

我觉得我的网页设计最大特点就是色彩谈雅，布局协调，结构清晰。给人以清丽，纯朴的感觉。另外，设计过程插入大量搜集资料和图片等，还加入倾听动人的音乐。

五． 心得体会

我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了

很多有价值的东西。我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，增加知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。好的素材需要多放面查找资料的，可以从图书、网站和新闻上查找的。好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出最精湛的网页。

 

第三篇：网页制作实训报告

《网页制作》课程实训

说 明 书

系 （部）：

班 级：

姓 名：

指导教师：

20** ~ 20**学年第一学期

摘 要

《网页制作》实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为《圣诞节》，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。

摘要．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 2

第一章 概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．3

　一、主题介绍．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4

二、制作目的及其方法．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4

三、网站规划及其实现过程．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4

1、系统结构图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．5

第二章 网站制作的步骤．．．．．．．．．．．．． ．．．．．．．．．．．．．．．．．．．5

一、主页的制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．5

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

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

3、导航条的设计及代码．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．6

二、分页的制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．7

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

2、圣诞雪景代码显示及其最终效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．8

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

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

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

四、框架排版和时间轴的运用．．．．．．．．．．．．．．．．．．．．．．．．．11、12

五、鼠标特效代码的插入．．．．．．．．．．．．．．．．．．．．．．．．．．．．13、14

第三章 心得及体会 ．．．．．．．．．．．．．．．．．．．．．．15

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

二、网页制作的意义及实训总结．．．．．．．．．．．．．．．．．．．．．．．．．15

参考文献．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16

一、概 述

（一）、主题介绍

大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在20##年里有好运气、学习成绩更优，每个人的生活都很精彩。

（二）、制作目的及其方法

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

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

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

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

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

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

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

（三）、网站规划及其实现过程

我们通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面我们选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，我们选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在我们开始勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamwever制作，图片设计选择Fireworeks和photoshop制作。

1、系统结构图

第二章网站制作的步骤

一、主页的制作

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

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

3、导航条的设计及代码

利用ul序列标记设计导航:部分代码

＜div id="templatemo_menu"＞

＜ul＞

＜li＞＜a href="../Untitled-3.html" class="current"＞首页＜/a＞＜/li＞

＜li＞＜a href="subpage.html"＞圣诞文章＜/a＞＜/li＞

＜li＞＜a href="../shishun/圣诞活动.html"＞圣诞活动＜/a＞＜/li＞

＜li＞＜a href="../陶瑞/sdxj.html"＞圣诞雪景＜/a＞＜/li＞

＜li＞＜a href="subpage.html"＞关于我们＜/a＞＜/li＞

＜/ul＞

＜/div＞

二、分页的制作

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

2、圣诞雪景代码显示及其最终效果．

＜script type="text/javascript"＞

var xm;

var ym;

/* ==== onmousemove event ==== */

document.onmousemove = function(e){

if(window.event) e=window.event;

xm = (e.x || e.clientX);

ym = (e.y || e.clientY)

/* ==== window resize ==== */

function resize() {

if(diapo)diapo.resize();

onresize = resize;

/* ==== opacity ==== */

setOpacity = function(o, alpha){

if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;

}

＜style＞

.drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: blue }

＜/style＞

＜script language="javascript"＞

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

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

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

1、背景音乐插入代码

＜bgsound src="1.mid" loop="1" /＞

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

＜object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1295" height="151" title="top"＞

＜param name="movie" value="flash/15.swf" /＞

＜param name="quality" value="high" /＞

＜param name="wmode" value="transparent" /＞

＜embed src="flash/15.swf" width="1295" height="151" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"＞＜/embed＞

＜/object＞

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

四、框架排版和时间轴的运用

五、鼠标特效代码的插入

＜script language="JavaScript"＞

＜!--

if (document.all){

colours=new Array('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('＜div id="ie" style="position:absolute;top:0;left:0;"＞＜div style="position:relative"＞');

for (i=0; i ＜ amount; i++)

document.write('＜div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center"＞.＜/div＞');

document.write('＜/div＞＜/div＞');

ini=1;

gstep=1;

function iMouse(){

my=event.y;mx=event.x;

}

document.onmousemove=iMouse

function dim(){

ini-=gstep;

dt=setTimeout('dim()',10);

if (ini ＜ 2){

clearTimeout(dt);

glow();

}

}

function glow(){

ini+=gstep;

gt=setTimeout('glow()',10);

if (ini ＞ 14){

clearTimeout(gt);

dim();

}

}

function stars(){

ie.style.top=document.body.scrollTop;

for (i=0; i ＜ amount; i++)

{

var layer=iestars[i].style;

layer.filter='glow(color='+colours[i]+', 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;

} function bbimg(o)

{

return true;

}

＜/script＞

＜SCRIPT LANGUAGE="JavaScript"＞

＜!--

function ResumeError() {

return true;

}

window.onerror = ResumeError;

// --＞

＜style type="text/css"＞

.STYLE3 {font-size: 18px}

.STYLE4 {color: #0099FF}

function delay(){

Ydelay = YgetDelay+=(my-YgetDelay)*1/20;

Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;

stars();

setTimeout('delay()',10);

}

delay();

glow();

}

//--＞

＜/script＞

第三章心得及体会

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

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

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

一致导致的。

二、网页制作的意义及心得体会

1、网页制作的意义

网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程，因此，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有着重要的作用.。训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力,学会通过网站、书籍等方式收集所需的文字资料、图像资料、Flash动画、视频和鼠标特效等。培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。

2、实训总结

我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我们通过小组分工合作已经完成了网站设计整体布局，尤其是我作为一个小组的组长，深知要把整个网站建设好的重要性。在整个网站的建设中，我负责的主要是主页面设计，圣诞起源和前夕的分页面制作，最后主要负责各个页面的链接和PPT的制作，通过实训，我发现对于平时的知识有了很大的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材、图片和网页设计的制作整体布局方法，这些学习不但增加了我的知识面，而且使我在以后的设计过程中能博采众长，为制作出好的网页打下了基础。最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。好的素材需要多放面查找资料的，好的技能需要不断的实践，经常锻炼做网页。另一方面，想要做好一件事，必须懂得团结合作的重要性，明确小组的分工与合作，做好网站规划与需求分析。更重要的一点是，我希望以后还能有这样的机会来锻炼自己的实践能力，不断丰富自己在网页设计方面的知识。

参考文献

1、《圣诞节朗诵诗歌》

作者：佚名    文章来源：网络    点击数： 21322    更新时间：20##-12-23 

http://www.edzx.com/Article/Class24/shengdan/200612/11348.htm

2、圣诞起源文章

http://www.allaboutjesuschrist.org/chinese/christmas-origin.htm

3、Flash动画

www.uus8.com

4、Flash视频

http://video.sina.com.cn/p/sports/g/v/20##-12-23/104961623063.html

5、鼠标特效代码

http://www.7stk.com/shubiao/shubiao.htm

6、相关圣诞节的图片

http://www.webshu.net/shengdanjie.htm

soso.nipic.com/ 20##-12-19

www.nipic.com/vector/ 20##-12-11

7、超酷图片自定义滚动代码

http://www.7stk.com/shubiao/shubiao.htm

www.itwswitches.com