网页制作实训报告 网页制作实训报告总结

        《网页设计》实训报告网站名称：乐器学号：**********************日期：2011-7-4

        一、网站名称：乐器

        二、设计工具：Dreamweaver

        8、Photoshopcs5

        三、站点构思制作该网站的目的如下：

        (1)帮助更多的人了解乐器

        (2)提供其他与乐器相关的网站链接

        (3)提供搜索乐器相关信息的便利途径计划提供如下服务：

        (1)共享一些精彩的乐器活动照片

        (2)将即将开始的有关乐器活动通知大家

        (3)提供与特定集会相关的信息

        (4)阅读乐器文章和介绍

        四、网站规划及实现过程

        (1)实现方式：使用HTML构建网页结构，外部样式表ssc.css设置页面样式。

        (2)总体规划：网站包含8个页面，分为三层，，，。其中，首页采用div+css布局并加入表格制作，并包含导航栏；6个二级子页分别为表单网页、利用模板制作的网页、利用div+css布局的网页；并在各网页中添加了JavaScript动态效果。

        五、页面设计说明

        (1)：使用div+css布局，首页(index.html)使用div+css布局，将整个页面设置为1整体4大块，如图：#header头部内容和#main1主体1内容#main2此为主体2内容#footer为底部内容代码：#content{margin:0auto;width:1150px;}此为整体定义#header{width="1150";height="120";}头部定义#main1{margin-top:5px;width:1150px;}主体1定义#main2{margin-top:5px;margin-left:120px;width:910px;border:1pxsolid#CCC;}主体2定义#footer{margin-left:120px;width:910px;border-left:1pxsolid#CCC;border-right:1pxsolid#CCC;}底部定义

        (2)模板网页：以“模板”(moban.html)为例，说明具体实现方法，如图：(moban.html)其中“新闻中心”(xinwenzhong.html)“经典回顾”(jingdianhuigu.html)“关于我们”(guangyuwomen.html)“钢琴介绍”(chanping.html)“乐器活动”(huodong.html)5张网页采用此张模板。

        (3)表格和表单：“注册”position:absolute;中插入了一个表单和内嵌入一张表格，如图：(zhuce.html)

        (4)FLASH：以主页(index.html)为例，如图：(index.html)代码：<embedsrc="Flash/banner.swf"width="906"height="284"></embed>(xinwenzhongxin.html)代码：<embedsrc="Flash/news.swf"width="625"height="160"></embed>(huodong.html)代码：<embedsrc="Flash/event.swf"width="625"height="160"></embed>

        (5)JavaScript交互效果：首页(index.html)采用了两组特效，如图：(index.html)代码：<marqueedirection="up"height="240"onMouseOut=this.start()onMouseOver=this.stop()scrollamount="2"scrolldelay="1"><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【赛事活动】关于圣诞音乐会的...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【考级通知】2011年寒假中央音...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【行业消息】雅马哈钢琴赞助梁...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【乐器培训】教你如何演奏萨克...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【琴行动态】北京盛世雅歌琴行...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【乐器市场】电子琴新品PSR-3...</a></p><p><imgsrc="Image/图标.jpg"width="30"height="25"/><ahref="#">【最新新闻】周立波助阵沈灏水...</a></p></marquee>(index.html)代码：<divalign="center"id="d10"><tablewidth="853"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdalign="center"id="d11"><tableborder="0"cellspacing="0"cellpadding="0"><tr><td><ahref="#"target="_blank"><imgtitle=""src="Image/000.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0001.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0002.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0003.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0004.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0005.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0006.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0007.jpg"width="170"height="125"border="0"/></a></td><td><ahref="#"target="_blank"><imgtitle=""src="Image/0008.jpg"width="170"height="125"border="0"/></a></td></tr></table></td><tdid="d12"></td></tr></table></div><scriptlanguage="javascript"type="text/javascript"><!--vard10=document.getElementById("d10");vard11=document.getElementById("d11");vard12=document.getElementById("d12");varspeed=20;d12.innerHTML=d11.innerHTMLfunctionMarquee(){if(d12.offsetWidth-d10.scrollLeft<=0)d10.scrollLeft-=d11.offsetWidthelse{d10.scrollLeft++}}varMyMar=setInterval(Marquee,speed);d10.onmouseover=function(){clearInterval(MyMar)}d10.onmouseout=function(){MyMar=setInterval(Marquee,speed)}--></script>

        六、总结在本次实训里，我设计的乐器网站，实现了图片滚动，flash的播放等动作，但从整体里看，这些网站总缺少一些活力，颜色上的搭配不太好，毕竟大部分采用图片的插入，并没有太多的动态，所以，要加强自己对脚本的利用，参考一些网页的制作的代码，来丰富自己的对网页制作的能力。我在这次实训中，我也有许多收获。

        首先，我体会到了作为一个网页设计师，不会用css的痛苦和尴尬；然后，我发现了很多以前都不曾注意到的细节；其次，在实训中，我对作为一名网页制作者应该学习的内容做了一个更深层次的理解；最后，我还从这次实训中看到了自己很他人的差距，危机意识增强，为了不使这个差距拉大，甚至赶上前面的同学，我会努力的。总之，这次实训为我提供了与众不同的学习方法和学习体会，从书本中走出来，面对现实，为我将来走上社会打下了扎实的基础，铺了一条五光十色的大马路。而且，我也体会到了前人总结出的许多的实践经验，而且一直都知道技术永远是工资的基础，社会是不会要一个一无是处的人的，所以，为了生活庸俗一点，努力一点，多累一点，好好学习技术，将来才有吃大餐的钱呀。

        在设计的过程中遇到问题，可以说得是困难重重，这毕竟是难免会遇到过各种各样的问题，同时在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固，比如说拖动层的设置，时间轴与层的显示与隐藏的综合应用，在CSS的具体应用还不是和很熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导才能达到最终效果……通过这次网页设计与制作实训，一定把以前所学过的知识重新温故。图片欣赏(gallery.html)