《网页制作实践报告》由会员分享，可在线阅读，更多相关《网页制作实践报告（11页珍藏版）》请在金锄头文库上搜索。
1、第 1 页网页制作实践报告网页制作课程实训说明书系（部）：班级：姓名：指导教师：网页制作实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为圣诞节，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创
2、建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用展示最终的效果。摘要2第一章概述3一、主题介绍4二、制作目的及其方法4三、网站规划及其实现过程41、系统结构图5第二章网站制作的步骤第 2 页5一、主页的制作51、主页表格的布局及其图片的插入52、主页文字的输入及其最终效果图63、导航条的设计及代码6二、分页的制作71、圣诞起源表格布局及其效果72、圣诞雪景代码显示及其最终效果83、插入滚动图片的代码及其效果图94、圣诞促销层的插入及其效果图9三、背景音乐、Flash图片和视频的插入10四
3、、框架排版和时间轴的运用11、12五、鼠标特效代码的插入13、14第三章心得及体会15一、在做超链接时出现的问题及解决方法15二、网页制作的意义及实训总结15参考文献16一、概述（一）、主题介绍大第 3 页家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在20*年里有好运气、学习成绩更
4、优，每个人的生活都很精彩。（二）、制作目的及其方法主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Firework、Flash、Photoshop等相关辅助软件。1、应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。（三）、网站规划及其实现过程我们通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网
5、站页面我们选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，我们选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在我们开始勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计第 4 页主要运用Dreamwever制作，图片设计选择Fireworeks和photoshop制作。1、系统结构图第二章网站制作的步骤一、主页的制作1、主页表格的布局及其图片的插入篇二：网页设计实训报告网页设计报告题目:个人网站实训报告学号:0000000000姓名:王可元一.实训意义
6、:网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。二.实训目的:1通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能。(1)掌握规划网站的内容结构，目录结构,链接结构的方法。(2)熟练掌握网页制作软件FrontPage20*和的基本操作和使用技能。(3)
7、掌握页面的整体控制和头部内容设置的方法。(4)熟练掌握网页页面布局的各种方法。(5)熟练掌握在网页中输入,设置标题和正文文字的方法。(6)熟练掌握在网页中插入图象,flash动画和背景音乐的方法。(7)熟练建立各种形式的超级链接的方法。(8)掌握表单网页制作方法。(9)掌握网页特效制作方法。(10)掌握网站测试的方法。第 5 页2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、flash动画和网页特效等。3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。4.培养学
8、生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。三实验步骤：1、网站主题我的网站的主旨在于从各个方面全面的介绍我自己，展示自己，包括我的个人资料、个人相片和爱好。另外，网站里还包括我的好友和好友资料，建立一个展示自我形象的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅红色，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。2、网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面
9、。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3、网站规划我的网站共有5个主页面：首页、相册、简历、图书、好友、留言版和音乐。每一个页面用统一的背景图片，以保证网站统一的页面风格。如下图：我是用自己的姓名和学号命名网站名，用第 6 页以方便存储和转发。网站整体色调为浅红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用
10、表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果网站的制作工具做网页时主要使用的是FrontPage20*，但我还使用了Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop、GifAnimator等软件。5、制作网站的网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“mysite”，建立的各个页面都应该放在本地站点中，在网页制作时
11、所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“tupian”文件夹来存放图片。同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：以导航栏为界，上面插入了两个flash动画，用以给浏览者好的视觉享受。左下方有我的个人资料、相片和相关链接。插入相关链接的菜单栏，一方面为了布局合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航，点击其中任意一个都会连接到其他网页，如点击google就会连接到下面网页：根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽
12、一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添第 7 页加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。网页特效为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚动。特效代码如下：SCRIPTLANGUAGE=JavaScript!-Begin/scrollerwidthvarswidth=300/scrollerheightvarsheight=100/scroller/text:changetoyourownwholemessage=divalign=centerfontface=Arialsize=3color=#
13、FF0066欢迎光临我的个人网站/DIVdivalign=center下面是网页背景音乐歌词/strong/DIVdivalign=centerstrong渡情/strong/DIVdivalign=center西湖美景三月天勒/divdivalign=center春雨如酒柳如烟勒/divdivalign=center有缘千里来相会/divdivalign=center无缘对面手难牵/divdivalign=center十年修得同般渡/divdivalign=center百年修得共枕眠/divdivalign=center若是千呀年呀有造化/divdivalign=center白首同心在眼前/
14、divdivalign=center若是千呀年呀有造化/divdivalign=center白首同心在眼前/divdivalign=center啦/divdivalign=center新白娘子传奇片尾曲/divdivalign=center高胜美渡情/divdivalign=center欢迎光临我的个人网站/divdivalign=center/div/fontfunctionstart(*)if(document.all)returnif(document.getElementById)document.getElementById(slider).style.visibility=showns6marquee(document.ge
