网页制作实训报告

目录摘要............................................1概述............................................2主题介绍.......................................................2制作目的及其方法................................................2网站规划及其实现过程............................................3系统结构图.....................................................3网站制作的具体内容...............................4主页的制作.....................................................4分页的制作.....................................................5背景音乐、Flash图片和视频的插入................................9框架排版和时间轴的运用.........................................11鼠标特效代码的插入.............................................12制作网站出现的问题...............................15在做超链接时出现的问题及解决方法...............................15实训总结.........................................16参考文献.........................................17辽源职业技术学院课程设计用纸NO：1摘要《网页制作》实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为《圣诞节》，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。辽源职业技术学院课程设计用纸NO：2概述主题介绍大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。制作目的及其方法主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Flash、Photoshop等相关辅助软件。1、应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。辽源职业技术学院课程设计用纸NO：3网站规划及其实现过程我通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamwever制作，图片设计选择photoshop制作。系统结构图辽源职业技术学院课程设计用纸NO：4圣诞节专题框架首页圣诞起源圣诞雪景圣诞活动圣诞大餐圣诞前夕二级内页面二级内页面二级内页面二级内页面二级内页面圣诞朗诵诗歌雪景图片详细介绍主要内容滚动字幕主要内容页面网站制作的具体内容主页的制作1、主页表格的布局及其图片的插入辽源职业技术学院课程设计用纸NO：52、主页文字的输入及其最终效果图3、导航条的设计分页的制作1、圣诞起源表格布局及其效果图辽源职业技术学院课程设计用纸NO：6辽源职业技术学院课程设计用纸NO：73、插入滚动图片的代码及其效果图4、圣诞促销层的插入及其效果图辽源职业技术学院课程设计用纸NO：8辽源职业技术学院课程设计用纸NO：9背景音乐、Flash图片和视频的插入1、背景音乐插入代码bgsoundsrc=1.midloop=1/2、flash图片插入的代码及其效果objectclassid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000codebase==7,0,19,0width=1295height=151title=topparamname=movievalue=flash/15.swf/paramname=qualityvalue=high/paramname=wmodevalue=transparent/embedsrc=flash/15.swfwidth=1295height=151quality=highpluginspage==application/x-shockwave-flashwmode=transparent/embed/object辽源职业技术学院课程设计用纸NO：103、flash视频插入区域的说明及其视频辽源职业技术学院课程设计用纸NO：11框架排版和时间轴的运用辽源职业技术学院课程设计用纸NO：12鼠标特效代码的插入scriptlanguage=JavaScript!--if(document.all){colours=newArray('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')amount=colours.length;辽源职业技术学院课程设计用纸NO：13YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;document.write('divid=iestyle=position:absolute;top:0;left:0;divstyle=position:relative');for(i=0;iamount;i++)document.write('divid=iestarsstyle=position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:CourierNew;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center./div');document.write('/div/div');ini=1;gstep=1;functioniMouse(){my=event.y;mx=event.x;}document.onmousemove=iMousefunctiondim(){ini-=gstep;dt=setTimeout('dim()',10);if(ini2){clearTimeout(dt);glow();}}functionglow(){ini+=gstep;gt=setTimeout('glow()',10);辽源职业技术学院课程设计用纸NO：14if(ini14){clearTimeout(gt);dim();}}functionstars(){ie.style.top=document.body.scrollTop;for(i=0;iamount;i++){varlayer=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;}functionbbimg(o){returntrue;}/scriptSCRIPTLANGUAGE=JavaScript!--functionResumeError(){returntrue;辽源职业技术学院课程设计用纸NO：15}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()',10);}delay();glow();}//--/script制作网站出现的问题在做超链接时出现的问题及解决方法1、一开始找不到相应的文件，在命令“#up”时出现了问题，已经做好文件链接的工作，打开浏览时，链接打不开，页面出错，通过尝试重新链接已成功解决。2、链接的页面图片无法显示，通过检查发现图片的路径出错，或图片命名不一致导致的。辽源职业技术学院课程设计用纸NO：16实训总结我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。在制作网页过程中，需要配合flash动画的适时加入，更要明白做此类动画所要表达的意义，协调整个网页的布局。从实训中我体会到了flash制作的不易，掌握了一些工具的多种用法，懂得了就算是简简单单的动画也需要有制作者特别的心意。李老师也非常认真负责，耐心讲解，细心指导，一点一点解答同学们的疑惑，直到同学们理解了为止。在实训中，分析、讨论，机房里充满了浓浓的学习气氛。通过实训，我发现对于平时的知识有了很大的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材、图片和网页设计的制作整体布局方法，这些学习不但增加了我的知识面，而且使我在以后的设计过程中能博采众长，为制作出好