网页制作实训报告.doc

《网页制作实训报告.doc》由会员分享，可在线阅读，更多相关《网页制作实训报告.doc（16页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页制作课程实训说 明 书系 （部）： 班 级： 姓 名： 指导教师： 2011 2012学年第一学期摘 要网页制作实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为圣诞节，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用D

2、reamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。目 录摘要 2第一章 概述3一、主题介绍4二、制作目的及其方法4三、网站规划及其实现过程4 1、系统结构图5第二章 网站制作的步骤 5一、主页的制作51、主页表格的布局及其图片的插入52、主页文字的输入及其最终效果图63、导航条的设计及代码6二、分页的制作71、圣诞起源表格布局及其效果72、圣诞雪景代码显示及其最终效果83、插入滚动图片的代码及其效果图9 4、圣诞促销层的插入及其效果图9三、

3、背景音乐、Flash图片和视频的插入10四、框架排版和时间轴的运用11、12五、鼠标特效代码的插入13、14第三章 心得及体会 15一、在做超链接时出现的问题及解决方法15二、网页制作的意义及实训总结15参考文献16一、 概 述（一）、主题介绍大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，

4、预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。（二）、制作目的及其方法 主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Firework、Flash、Photoshop等相关辅助软件。1、应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。（三）、网站规划及其实现过程我们通过前期的网站策划首先搜集相关资

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

6、介绍主要内容滚动字幕主要内容页面第二章 网站制作的步骤一、 主页的制作1、 主页表格的布局及其图片的插入2、主页文字的输入及其最终效果图3、导航条的设计及代码利用ul序列标记设计导航:部分代码 首页 圣诞文章 圣诞活动 圣诞雪景 关于我们 二、分页的制作1、圣诞起源表格布局及其效果图2、圣诞雪景代码显示及其最终效果 var xm;var ym;/* = onmousemove event = */document.onmousemove = function(e)if(window.event) e=window.event;xm = (e.x | e.clientX);ym = (e.y |

7、 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; .drop position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40

8、; color: blue 3、 插入滚动图片的代码及其效果图4、 圣诞促销层的插入及其效果图三、背景音乐、Flash图片和视频的插入1、背景音乐插入代码2、 flash图片插入的代码及其效果 3、 flash视频插入区域的说明及其视频四、框架排版和时间轴的运用五、鼠标特效代码的插入 !- 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=

9、0.2,currStep=0,my=0,mx=0;document.write();for (i=0; i amount; i+)document.write(.);document.write();ini=1;gstep=1;function iMouse()my=event.y;mx=event.x;document.onmousemove=iMousefunction dim()ini-=gstep;dt=setTimeout(dim(),10);if (ini 14)clearTimeout(gt);dim();function stars()ie.style.top=document

10、.body.scrollTop;for (i=0; i amount; i+) var layer=iestarsi.style; layer.filter=glow(color=+coloursi+, 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)

11、+i*70)*Math.sin(currStep)/10)*Math.cos(currStep+i*25)/10); currStep+=step; function bbimg(o) return true;.STYLE3 font-size: 18px.STYLE4 color: #0099FFfunction delay()Ydelay = YgetDelay+=(my-YgetDelay)*1/20;Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;stars();setTimeout(delay(),10);delay();glow();/-第三章 心得

12、及体会一、 在做超链接时出现的问题及解决方法1、一开始找不到相应的文件，在命令“#up”时出现了问题，已经做好文件链接的工作，打开浏览时，链接打不开，页面出错，通过尝试重新链接已成功解决。2、链接的页面图片无法显示，通过检查发现图片的路径出错，或图片命名不一致导致的。二、 网页制作的意义及心得体会1、 网页制作的意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程，因此，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有

13、着重要的作用.。训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力,学会通过网站、书籍等方式收集所需的文字资料、图像资料、Flash动画、视频和鼠标特效等。培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。2、实训总结我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我们通过小组分工合作已经完成了网站设计整体布局，尤其是我作为一个小组的组长，深知要把整个网站建设好的重要性。在整个网站的建设中，我负责的主要是主页面设

14、计，圣诞起源和前夕的分页面制作，最后主要负责各个页面的链接和PPT的制作，通过实训，我发现对于平时的知识有了很大的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材、图片和网页设计的制作整体布局方法，这些学习不但增加了我的知识面，而且使我在以后的设计过程中能博采众长，为制作出好的网页打下了基础。最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。好的素材需要多放面查找资料的，好的技能需要不断的实践，经常锻炼做网页。另一方面，想要做好一件事，必须懂得团结合作的重要性，明确小组的分工与合作，做好网站规划与需求分析。更重要的一点是，我希望以后还能有这样的机会来锻炼自己的实践能力，不断丰富自己在网页设计方面的知识。参考文献1、圣诞节朗诵诗歌作者：佚名文章来源：网络点击数： 21322更新时间：2006-12-232、圣诞起源文章http:/www.allaboutjesuschrist.org/chinese/christmas-origin.htm3、Flash动画4、Flash视频5、鼠标特效代码6、相关圣诞节的图片2011-12-192011-12-117、超酷图片自定义滚动代码