网页设计与制作实训报告

1、网页设计与制作实训报告班级：G093501姓名：孙建武学号：47指导老师：郭建明实训时间：5.95.22甘肃机电职业技术学院2011年5月20日、实训目的：1、进一步熟悉和掌握网站建设的基本流程和技术规范；2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识；3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识；4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；5、具备独立撰写实训报告基本能力；6、在网页设计的实践中培养分析问题、解决

2、问题的能力，培养协作、交流的能力，培养创新能力和团队意识；7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站开发、维护和管理奠定基础。、二、实训项目星空间街舞俱乐部网站设计1、网站主题我的网站的主旨在于从各个方面全面的介绍星空间街舞俱乐部，包括它的团队、环境和课程。另外，网站里还包括我的资料，建立了一个展示自我形象的平台。同时，网站里的每一个网页都有统一

3、的风格，每一个网页的主题色彩都是橙色和蓝色搭配，用以展示星空间街舞俱乐部个性的效果。其实最重要的是要做出自己的风格，给浏览者好的欣赏感受。2、网站材料主要在网站上搜集所要的网页信息，包括图片、文字。同时，查询相关的书籍、百度等方式收集所需的文字资料，图象资料flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3、网站规划我的网站共有7个主页面：首页、介绍、团队、环境、课程、联系我们和关于我。每一个页面用统一的模块，以

4、保证网站统一的页面风格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用CSS设计一个样式，以保证随时、准确的调用。4、网站的制作工具做网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop等软件。5、制作网站的网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“093501”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文

5、件，我在制作时建立了“img”文件夹来存放图片。网页中的CSS样式文件也应统一管理,做到有条不紊，我设计的网站的首页如下图:SHOT恶躍SHOT恶躍导航栏下面插入了一个flash，用以给浏览者好的视觉享受。左上方插入了一个图片滚动效果，左侧有关于街舞的一些教程，是相关链接的菜单栏，一方面为了布局合理，弥补右边的空缺，另一方面给浏览者提供放便的导航。另外，右边插入的是表格，表格中的背景是蓝色的。用以体现网站的主题色彩，左边加入了图片滚动特效。当鼠标停在图片上时，图片停止滚动。特效代码如下：向左无缝滚动/titlebody,html,div,amargin:0;padding:0#demoback

6、ground:#FFF;overflow:hidden;border:1pxdashed#CCC;width:500px;#demoimgborder:3pxsolid#F2F2F2;#indemofloat:left;width:800%;#demo1float:left;#demo2float:left;margin-left:7px;window.onload=function()varspeed=10;/数字越大速度越慢vartab=document.getElementById(demo);vartab1=document.getElementById(demo1);vartab2=

7、document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML;functionMarquee()if(tab2.offsetWidth-tab.scrollLeft=0)tab.scrollLeft-=tab1.offsetWidthelsetab.scrollLeft+;varMyMar=setInterval(Marquee,speed);tab.onmouseover=function()clearInterval(MyMar);tab.onmouseout=function()MyMar=setInterval(Marquee

8、,speed);向左无缝滚动然后利用模板制作了关于街舞种类介绍的链接，它分为Breaking、Poppin、Hip-hop、Newstyle、Jazz.从而进行了全面的介绍，当点击任意一个舞种按钮，都会在右下版块出现对应浏览文字版块。如下图：本月绘新勰本月堆新课程TOMAS教学柔韧性SH0I齟SIY1.S将SHOW丽HEISTYLE本月绘新勰本月堆新课程TOMAS教学柔韧性SH0I齟SIY1.S将SHOW丽HEISTYLE苒虫可逹几歩前关慑！好的羿驀霭聲咗创建模板时，我在右侧建立了关于街舞教程的导航，这样可以让整个界面显得整洁、有序。与介绍街舞类型的主页面采用了相同的背景，相同的布局。使页面连

9、接清晰跟聲严叱稼可頤建棒臓体的三头稼的胆住到煎一张箱子之上”把祢的丰敷在地上，身悻向后倏芥且莽直條的目悌楼床吊1対AI；：to.议扶汶录置仃勺许脖中:瘀盅.HE：:厉亍人伯讦亡日；,胡盘预年扛鼻爭卜诫悯卜农疔T1把轉的诂了的归於瞬*、去*希稍齐直，擁的4注a怖Kff.t?*出右丰社斤賂扛t：.Bia爼2-SiftJSx現以11国弧的才式电起傳的换逖乍歩尊很栄饋，星宇人会发觉自己像托忌丽At翹去卷有动力问昱住注会出祀这里，傑算感觉到fl：前嶺是左甩！面不是蔽！期謬侮审会抚的谡丈的应.!：启匸沿论卑川的仝山.啟林一起童单灼満试方祛,珂fit：劇白攻*动舛能JWX辭的A.衷fe:黑誥诉fit.曲成醴

10、f.就带动牛乂M然不快.忸却手-tHffia：hr末才肉曲pj动怕麻*WF呈近年耒岀现的“-杞新前U凤和它傑呈-种購黑侯用隹耳-因为brEEkirtfi*pippin,Itpckin帮幣建威neastyle,建也察对stjledancer矗B菠高的要牝什电禹西舉野衆至会-A.市就主银苦舊印象中的醪K“1它里鹿工包會rt-WHlk,harLnushaSte,krizipirLbeoir吐吐芒浮淳的如汩辉穆+其矣哦疋昭?-wa血harlensticks,knmfliihZmit创址聽这寻未画而G它们证不配成绸抽:町B择冲.灼狀是一粪很有特直刖功悴而己”ALordAL1c：】忙诺崔册可取看如已*苗玄

11、就是一ff；忖縉前技术丁蛛.韶迪咒猱也可風着出MTPfflP莊杀匪萎比护前末画爭些-因Aber耳磔证蹩建立在hiphcp的基稠上的+阵牛入时有乐的理卿啊目己鬲殊出辖克氐郡不一样出如PI-首逬抵可薛:言欢用麹扎可谟凫poppjjia忸康出来的末圍稱uNheistjle.u.学搅：ti诵机电哄业技术学舉田Ml学号：学搅：ti诵机电哄业技术学舉田Ml学号：。知?甘肃备估谯宾北去帶金荥花制最后就是制作个人简介，也就是导航栏中的关于我，包含我的姓名、性别、年龄、爱好、学校、班级、学号和家庭住址等。简历的左侧，插入了一张代表中国街舞爱好者的标志图，为达到亮眼的效果。加入了滚动图片特效。增加页面的可看性。C

12、hineseHiphopUndersnundIfEli俪6、上传测试网站网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。三、实训中遇到的问题和解决方法1、在制作网页的过程中，经常遇到css样式的运用和网页特效的添加，由于对CSS样式的不熟悉和网页特效代码的不了解，导致在做网页时遇到很多的麻烦，但是最后经过老师和同学们的帮助，最终解决了CSS样式和网页特效添加的问题。2、创建了模板，但是运用模板制作网页时，发现全部不可编辑，这就需要在模板中添加可编辑区域。这样就可以利用模板制作其它的网页。3、表格的应用，当每次插入表格，对其插入内容，就会影响到整个页面的大小，经过再三的思考，发现要在表格里插入图片，就要先插入表格再插入图片，这样就不会影响到整个网站的布局。我非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实训的过程中，搜集了大量的素材和网页设计的技术，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页