搜索
《网页制作》课程实训说明书系（部）：班级：姓名：指导教师：2011~2012学年第一学期摘要《网页制作》实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为《圣诞节》，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。目录摘要．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．2第一章概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．3一、主题介绍．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4二、制作目的及其方法．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4三、网站规划及其实现过程．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41、系统结构图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．5第二章网站制作的步骤．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．5一、主页的制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．51、主页表格的布局及其图片的插入．．．．．．．．．．．．．．．．．．．．．．．．．52、主页文字的输入及其最终效果图．．．．．．．．．．．．．．．．．．．．．．．．．．63、导航条的设计及代码．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．6二、分页的制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．71、圣诞起源表格布局及其效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．72、圣诞雪景代码显示及其最终效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．83、插入滚动图片的代码及其效果图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．94、圣诞促销层的插入及其效果图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．9三、背景音乐、Flash图片和视频的插入．．．．．．．．．．．．．．10四、框架排版和时间轴的运用．．．．．．．．．．．．．．．．．．．．．．．．．11、12五、鼠标特效代码的插入．．．．．．．．．．．．．．．．．．．．．．．．．．．．13、14第三章心得及体会．．．．．．．．．．．．．．．．．．．．．．15一、在做超链接时出现的问题及解决方法．．．．．．．．．．．．．．．．．．15二、网页制作的意义及实训总结．．．．．．．．．．．．．．．．．．．．．．．．．15参考文献．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16一、概述（一）、主题介绍大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。（二）、制作目的及其方法主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Firework、Flash、Photoshop等相关辅助软件。1、应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。（三）、网站规划及其实现过程我们通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面我们选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，我们选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在我们开始勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamwever制作，图片设计选择Fireworeks和photoshop制作。1、系统结构图第二章网站制作的步骤一、主页的制作1、主页表格的布局及其图片的插入圣诞节专题网页面框架首页圣诞起源圣诞雪景圣诞活动圣诞大餐圣诞前夕二级内页面二级内页面二级内页面二级内页面二级内页面圣诞朗诵诗歌雪景图片详细介绍主要内容滚动字幕主要内容页面2、主页文字的输入及其最终效果图3、导航条的设计及代码利用ul序列标记设计导航:部分代码divid=templatemo_menuulliahref=../Untitled-3.htmlclass=current首页/a/liliahref=subpage.html圣诞文章/a/liliahref=../shishun/圣诞活动.html圣诞活动/a/liliahref=../陶瑞/sdxj.html圣诞雪景/a/liliahref=subpage.html关于我们/a/li/ul/div二、分页的制作1、圣诞起源表格布局及其效果图2、圣诞雪景代码显示及其最终效果．scripttype=text/javascriptvarxm;varym;/*====onmousemoveevent====*/document.onmousemove=function(e){if(window.event)e=window.event;xm=(e.x||e.clientX);ym=(e.y||e.clientY)/*====windowresize====*/functionresize(){if(diapo)diapo.resize();onresize=resize;/*====opacity====*/setOpacity=function(o,alpha){if(o.filters)o.filters.alpha.opacity=alpha*100;elseo.style.opacity=alpha;}style.drop{position:absolute;width:3;filter:flipV(),flipH();font-size:40;color:blue}/stylescriptlanguage=javascript3、插入滚动图片的代码及其效果图4、圣诞促销层的插入及其效果图三、背景音乐、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/object3、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=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);if(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=JavaSc