网页实训小结2篇

第三篇：网页实训总结

（信息工程系）

综合实训总结报告

实训课程：____网页制作 ____ ______实训项目： _网页制作基础教程实训_ 姓名：_ __________ 班级：_11计算机应用学号：_______

指导教师：____ _实训时间： 2012-2013学年第一学期第20周网页制作实训总结报告

一、实训目标

1、知识目标：

⑴掌握设置站点。

⑵掌握网页元素的基本操作。

⑶灵活使用超级链接。

⑷熟练掌握表格、层和框架来布局页面。

⑸掌握表单的设置与使用。

⑹掌握设置CSS样式。

⑺能够使用多媒体来丰富页面。

⑻能够使用模板制作大批风格相似的页面。

2、技能目标：

⑴对于给定的设计题目，学会如何进行分析，理清思路，并给出相应的结构模型。

⑵通过对所选课题的分析，有针对性的进行调查研究，学会收集、整理相关资料。

⑶合理运用所学过的知识及实验中的练习，将其融入本次实训当中，真正成为自己的东西。

⑷熟练运用所学知识制作出具有个人特色的班级网站

二、实训环境

我们在6号机房完成了为期一周的实训，此机房设备、软件齐全

1、硬件设备

PC机

2、软件环境

Dreamweaver 8.0、flash、photoshop等

三、实训内容

1、确定的网站内容要健康、具有时代气息。

2、网站提供的信息应与网站主题相符合。

3、页面布局合理，网站结构应层次分明，主题鲜明，界面美观、简洁。

4、建议采用层、表格、框架结构布局页面，导航和超链接清晰。

5、插入图片、多媒体元素。

6、撰写实训报告。

四、实训步骤

1、根据老师布置的实训要求，构思整体布局以及LOGO的设计。

2、打开Macromedia Dreamweaver 8，创建相应的本地站点，命名为banjizhuye(E/banjizhuye)，在banjizhuye站点中建立文档和文件夹，分别为index，xiangce，banwei，chengyuan，huodong和文件夹images，flash，ps等。

3、打开Adobe Photoshop CS4，利用ps着手做logo，因为我们是11级计算机应用班，所以我就用艺术字设计了字体，外面的图标代表这我们团结进取，里面倒影的树叶是代表着我们蓬勃的精神面貌，下面的五个字母是计算机应用的首字母缩写。如下图；

4、利用表格对页面布局，我的网站共有5个主页面：班级首页、相册集合、班委成员、班级成员、班级活动，每一个页面用统一的背景以及图片，以保证网站统一的页面风格，版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。

1)

通过绘制表格来设计页面布局；

2）在表格中插入页面元素，如利用文本域，来创建用户登录界面，插入图片等，首页头部插入了flash动画，改变其参数，使其达到了雪花飘落的动态效果，如下图：

主页的左边我用代码实现了其自动播放幻灯片的效果，右边利用代码达到了字幕的滚动效果，如下图：

5、子页面的设计，整体格局美观，温馨，明亮，能让观赏者眼前一亮，并在每个子页面添加了滚动字幕，以及flash特效。如下图：

6、每个网页完成后，为其添加链接，以达到浏览每个页面时畅通无阻，在添加 链接时，为了使导航文字在浏览时是白色字体，我用CSS为导航栏定义了一个版块，并用 CSS高级设置设置我需要的色彩。

五、实训总结

在这三天多的实训当中和同学进讨论制作网站，同时学到了许多关于网页制作的相关知识。第一，我觉得在制作过程中，发现自己学的东西太欠缺了，要学习有条不紊，要学习冷静思索，所以我想以后课上课下一定要认真学习，虚心听取别人意见，多去学习一点网页制作的技术，以备我以后的制作之路。通过这次实训，我学到了很多有价值的东西。我独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面资料，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号；第三：我现在已经熟练使用超级链接，合理使用列表；第四：我现在已经掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。最后，我感受最深的是：要想做好一个网站，素材和技能都十分重要。好的素材需要多方查找资料，可以从图书、网站和新闻上查找。好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出精湛的网页。五天的实训课程结束了，此次实训检验了通过一学期的学习对知识进行了汇总，通过本次实训我已基本掌握了制作简单网页的过程，基本熟悉了各种软件的综合使用方法。实践出真理，实训的日子过去了，从理论和操作中融合了我们平时所学的知识，为我们的学习和工作铺垫了精彩的一幕。因此，我坚信，用血去做自己认为应该做的事，努力的开拓我们的极限，没有什么是不可能的，我们要更加的去努力。通过这五天的学习，在制作过程中出现了许多问，这些都是细节问题，我与同学进行了细致的研究后，最后达到了所要预期的效果。我非常感谢学校给了我这次制作网页的机会！

第四篇：网页实训报告

日照职业技术学院

网页实训报告

学号：

姓名：

班级：

实训日期：

指导老师：

X年X 月 X 日

个人博客

一、实训目的与要求

目的：通过实训让同学们对网页有更深一步的了解，培养学生的动手能力，提高学生运用HTML语言编写静态网页能力的水平，掌握HTML和CSS语言的应用，为学生学习动态网页打下坚实的基础，通过实训可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强学生的综合能力，把本学期学到的东西都运用起来达到一定的技术性、创意性，让其更美观。

（1）掌握创建Dreamweaver本地站点的方法，利用表格和层规划网页布局

（2）掌握在网页中添加文本、图像、Flash动画等页面元素

（3）掌握在网页中输入、设置标题和正文文字的方法。

（4）掌握在Dreamweaver中建立链接

（5）综合运用所学软件进行网页材料的准备

要求：掌握网页设计基本概念和HTML的基本结构，了解网页技术概况、HTML的编辑和运行环境，掌握文字版面的编辑，掌握网页的超链接技术的应用，了解图像的处理。包括背景图案、图形、图像及其超链接等的设定和应用。了解列表的各种使用，了解表格的基本语法，掌握表格的定义、控制、分组、标题等的应用。了解表单在网页中的应用，了解如何在网页中加入各种动态效果，了解网页中CSS的基础知识。掌握CSS的各种属性应用。最后根据自己的兴趣，设计一个个人站点或介绍一个集体的小网站，围绕一个主题并能够体现出自己的个性，有足够的页面及链接，有整体的框架结构，表格定位以及表单处理等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

二、实训内容

1.准备工作

（1）先想好做什么方面的网站。

（2）根据自己的需要在网上下载图片、动画等相关的素材。

（3）安装好需要用到的相关软件。

（4）大致设计一下该用到的页面的布局版面情况，规划一下网站的结构，画一下草图。

2.使用的技术

用Word处理艺术字、在Photoshop中用切刀工具切图片、用其它工具处理图片、裁切

图片、转换格式等，用Flash做动感图片，用ACDsee裁切图片。制作网页时应用表格、层、超链接、动态文本、表单等。

3.网站的整体布局及介绍

该个人博客使用了16个页面，一个进入页面，用了几个图片和一个“Enter”链接进入主页面，其主页面使用了一个以糖果屋为主题的背景图片，其中有导航、个人资料、微博、留言、好友、照片、博客、版权信息、按钮、文本框等组成并做了相应的链接。16个页面分别是：jinru.html、index.html、jiaru.html、pengyou.html、liuyan.html、xiangce.html、boke.html、gerendang.html、yinyuehe.html、guanyu.html、lianxi.html、youqing.html、yinsi.html、wenzhang.html、jianai.html、yuluo.html，.在音乐盒和个人档页面中用到了很多的表单项，有文本域、单选按钮、复选框、列表/菜单、按钮。前几个页面的主要背景色是#F3B8CA和#ABCD45后几个页面主要应用了#ABCD45和白色作为背景色，前几个页面和后几个页面采用了不同的风格。

4.实现的功能

主要是几个页面的链接，加入我们、联系我们、关于我们、友情链接、隐私与版权几个页面主要是针对本网站进行了介绍，介绍了该网站的联系方式、加入方式、合作商、网站的隐私及版权信息。个人档主要写个人信息，音乐盒写了最近流行的专辑及歌曲，还有一些朋友、留言、相册、博客等信息。

三、调试中出现的问题

在制作网页的过程中出现的问题主要是排版布局问题和链接问题，链接有时行有时不行，还有表单的使用，通过问老师同学及在网上自己找寻答案最后都解决了。

其次在使用其它软件时也是出现种种问题，主要还是自己对这些软件还没有真正的熟练掌握，在以后的学习过程中我会更加努力一定多多练习。

四、实训心得体会

在这次实训的过程中让我唯一感觉到创新的重要性。我也看了其他的同学做的网页，大家的都千篇一律，大多是学习过程的但是有的同学通过其他的参考资料，然后得到自己想要的画面和效果，然后把自己的与其他人的区分开来，我认为在这个过程中是一种创新的过程，一种将别人的智慧运用到自己生活中为己所用的能力，这种能力虽然反映的不是自己的真实水平，但是一种学习的过程，这以后，就成为了自己的东西。也发现很多同学都在自己的脑海中构造自己想要的画面，同时，自我摸索，在不断地失败

和成功中吸取不足和失败的原因，我认为这本身就是一种创新的过程。力求有一个很好的视觉效果，其次网页页面美观也是很重要的，不断地尝试调配颜色。想着也是一种创新，这种创新中得到自己所要的效果是学习的一部分。

其次我还知道了此次实训的目的，也清楚了目前自己的许多不足，那就是缺乏相应的专业知识与经验，对所学的专业知识不能够很好地运用于实践操作中。不过我也发现了以前不曾注意到的细节，在实训制作网页的过程中，我对作为一名网页设计师制作网页时要注意的细节和一些重要的地方也有了更多的了解。把职业能力训练与职业素质的训导有机结合起来。相信这对我接下来的学习专业知识会起到很有效的帮助，在接下来的时间里，我会以作为一名学习者的身份在这几个方面要求自己，严格自我，向专业知识靠近，丰富我们的知识。

五、实训总结

通过本次实训我又一次感觉到了实训的重要性，通过实训可以让我们深深地体会到理论与实践联系的重要性和必要性，通过实训我们可以把这学期以来学的东西做个总结，并且还可以学到一些新知识对该软件有更深一步的了解，我们要认真面对实训，虽说实训是一个很累的过程，但是实训一周让我们学到的东西要赶平时上课的好几倍，好好努力把握好一切学习的机会，不要让时间白白浪费。

第五篇：网页设计实训

网站名称：微言微语个人主页

班级：J09301班，J09302班

学生姓名：

指导老师：李向

实训时间：2010.12.6—2010.12.22

2010年下期网页设计课程实训报告

一、实习目的：

通过教学实习掌握站点制作、站点测试与发布技术。会综合利用Fireworks、Flash和Dreamweaver三个软件进行静态网站的设计。

二、实习内容：

1.用Fireworks处理图片。对图片裁剪、钝化、高斯模糊。设置图片的GIF动画格式，制作标题动画。对文字应用效果。利用Fireworks制作导航条并导出格式为html。

2.用Flash制作标题动画。首页中的动画不超过20M。制作按钮来超级链接到其他页面。

3.使用Dreamweaver布局视图，设置本地站点。在标准视图和布局视图模式相互转换。建议使用布局视图，在标准模式中插入层对象制作层动画，利用行为面板添加鼠标行为，制作翻转动画，使用CSS样式统一网页中文字样式，插入Fireworks中的GIF 文件及导入Flash中的SWF文档，设置文档间的超级链接。

三、具体要求：

1、利用Dreamweaver制作一个静态网站，要求网站有特色，整个网站的内容和形式要统一，应能够反映一个简单的主题。可以选择制作《个人网站设计》、《企业网站设计》、《文化网站的设计》、《娱乐网站设计》或者其他自己认为适合的网站。

2、作一个主页面，至少5个次页面。

3、必须用到框架、表格或层排版技术、Flash技术和图像处理技术，使网站具有合理的外观和功能。

4、主页基本要求：

页头Logo，准确无误地标识站点和企业标志；

网页标题动画，可以制作成GIF动画或者Flash动画；

导航条；

E-mail地址，用来接受用户垂询；

联系信息，如普通邮件地址或电话；

版权信息。

5、制作一个表单页面。

6、某个页面有滚动字幕。

7、为一个页面添加背景音乐。

8、至少添加一种行为效果。

9、整个网站各页面之间保持风格一致，页面之间要有合理的超级链接。

10、进行站点测试后申请免费空间并发布到网络。

四、网站设计思路：

本站应该算是一个人主页的小型网站。关于本站站名的来源：微言微语个人主页，因为，我觉得这个网站里面的所有文字都是像一个人在自言自语，在低声地向某人诉说着什么，没有主题，没有目的。取这个站名，是做了网站的大概构思后才取的，觉得，这个名字与网站的图片、背景音乐还有文字都很相符。

个人主页，一般都会包括首页，相册，链接，一些个人喜欢的文字加图片，我的个人主页也不例外，包括次首页（个人喜欢的的文章加图片），我的作品（里面包括自己做的三个FLASH动画），文章（一些自己喜欢的文章），相册（Firworks处理过的相册），关于（关于自己的文字，关于本站的一些说明），链接（世界著名网站的有关链接），反馈表（浏览者信息反馈表）。

五、网站设计过程：

把所有的素材都整理好（图片，文章，相片），开始布局。此站大多数用的是“三”字型的，三字型是我给它取的名字，因为，最开头是一张带有导航条的图片，用Firworks处理过的HTML文件，中间一大片用于放正文，下面就是版权信息，E-mail地址用来接受用户垂询；联系信息，如普通邮件地址或电话，像被分开的三个部分，所以我叫它三字型。这种布局方式看起来比较的整齐，简洁美观。

首页本想做一个动态网页，由于时间有限所以还没完全成功。只好用了一张与次页面一样的背景图片做背景，加上从下向上的滚动字幕，背景图片是用Firworks处理过的图片，大片的灰色墙壁加上颜色艳丽的钮扣图案，首页加了状态栏逐字出现的效果，加了“加入收藏”、“设为首页”等代码。

次页面包括如下些内容：首页、作品、文章、相册、关于、链接以及反馈表。这些页面是用模板做的，上面的图片，导航条以及下面的版权联系方式是不用改变的，都保持着首页的风格，背景图一样，字体与样式一样，图片风格一样。中间是两个可编辑区域。

在所有的页面导航条下面，插入层对象制作了一个层动画，来回移动的层，里面存放日期，利用行为面板为此层添加了鼠标行为，单击此层，会出现对话框，“欢迎您访问我的个人主页！”，做布局大多使用表格布局，使用了少量的css样式，字体，字号，颜色都统一套用相应的样式。

首页中添加背景音乐，小说音乐《我在那一角落患过伤风》，一边看慢慢上移的文字，一边听这轻柔的音乐，给人一种意境美。其实次页面添加《虫儿飞》，轻快而活泼。首页禁止右键复制功能，右键单击没有反应。

次首页，就是进入次页面的第一个页面。主题算是与青春有关的三种感情，三张图片，用Firworks处理，加上相应的文字。要用到两个表格，分别放在两个可编辑区域里面，一个1*2的表格，一个2*2的表格，第一个表格放一张有关于亲情的图片加一小段文字，第二个表格放一张有关于友情的图片加一小段文字,还有一张有关于爱情的图片加一小段文字。作品页面是三个FLASH动画，第一个是左右键控制的图片移动按钮，可以单击来链接到主页面（代码见附录），四个图片经过裁剪、高斯模糊。第二个是光芒四射（代码见附录），要用到ActionScript语言，长短不一的线条加上透明度的改变组成光芒四射。第三个是鼠标跟随特效（代码见附录）。文章页面，就是简单的文字页面，没有什么特别的。相册页面，上面是一个用Firworks处理后的一组图片，鼠标移到小图片上，下面做出现相应的大相片，中间有少量文字，底部是用FLASH做的一组循环滚动图片（代码见附录），图片跟着鼠标的移动而左右移动。关于页面，也是简单的文字页面，没什么特别的，“个人简历”文字链接到WORD文档“个人简历”(代码：

附录：源代码

(1)状态栏逐字出现的效果代码：

(2)首页收藏代码：

onClick=“window.external.addFavorite('”,“_blank”);}

六、实训中遇到的难点及解决办法：

在设计开始的时候，想的太多，不知道怎么开头，定哪个主题，背景，色调，文字，布局都没有头绪，后来，开始做，而且觉得越做越有头绪了，所以我觉得，还是不要想的太多，太复杂了，不要追求完美，不要做的网页太多，搞到最后，别人都不知道，你这个网站的主题

是什么了。

还有就是布局的时候总是不能做到很美观，后来，我把页面属性改了左过距为10，上边距为10，刚好把背景图片里面的那些亮丽的钮扣图案显示出来，改变了表格背景图的灰暗，使网页的整体看起来更美观了。

在做CSS样式表的时候，做字的颜色的时候，老是不知道用哪种颜色才搭配的起这个背景，后来，看到那个背景的钮扣颜色与灰色配起来很好看就用吸管取了钮扣的颜色了。

七、实训心得：

在我看来，设计网页，应该先策划，策划很重要，加上创意，配色很重要，技术与鉴赏能力是最主要的。建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意，如图片文件夹用image，网页文件夹用html。

在所有配色当中，不同的颜色传达着不同的意义也有不同的象征。如白色代表着：清洁、天真、洁净、真理、和平、冷淡、贫乏；灰色让人联想到灰尘、石头、水泥、白银，象征着中庸、平凡、温和、谦让，它给人以中立和高雅的感觉。太多的颜色会给人带来视觉上的疲劳。所以，在我下载准备素材的时候，就选择用灰色做背景颜色，灰色太贫乏，就加上亮色的钮扣起到“中和”的作用。

通过此次实训,我觉得平面设计的创意思维、版面设计、色彩配置、图形创意等方面都有很重要，对于网页制作来说，我觉得是一个以多学科设计为基础，受到包括视觉艺术、技术、内容的多种影响。网页设计的技术不算什么困难，真正困难的是网页的设计创意，文字我觉得也很重要，有些人浏览你的网页不是喜欢上你的艳丽漂亮的图片，也许是喜欢上你的文字，那种感动人心的，唯美的文字。文字与图片要搭得上调，不可能用一张美女图做背景，上面却写有关于亲情的文章。也就是整体的搭配问题。

通过此次实训，使我对于网页制作的三大软件有了进一步的了解，各功能都能够实现。提高了自己的鉴赏能力，综合搭配能力，也对以前学过的内容进行了综合的复习。

通过此次实训，我更了解到，生活中有许多色彩，搭配颜色的时候，联想到生活中的东西会做的更漂亮，给人一种亲切感，现在看到什么东西，我就会联想到做网页的时候，还有怎么布局。反正此次实训收获很多。

最后，我想，如果此次实训老师是要我们分组来做的话，也许，我们可以做得更好，因为，一个想的毕竟不全面，而且，一个人的申美有限，我们可以分工合作，一个人做一个方面的东西，也可以根据他所善长的方面来分工，善长动画制作的人做动画，善长图片处理的人做图片，善长文字与布局的就来布局。但是，也许那样，有些同学会懒的动手，推着给别人做