网页实训报告

第二篇：网页实训报告

日照职业技术学院

网页实训报告

学号：

姓名：

班级：

实训日期：

指导老师：

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.实现的功能

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

三、调试中出现的问题

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

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

四、实训心得体会

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

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

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

五、实训总结

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

第三篇：网页制作实训报告

《网站设计与制作》实训报告

X学院XX班XXX号

一．实训时间：

2010年6月7日到2010年6月13日

二．实训地点：

XXX学院XXX班级

三．实训组员：

XXX、XXX

四．实训目标：

运用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累Web网站的制作经验，培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页；学会申请免费域名空间和正确上传站点的方法。

五．实训策划：

这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中，我们发现了许多问题，某些关键点无法做出心中的效果，这让我们有些遗憾。通过自身及组员的共同探索，我们已尽权利将以下是我们的策划内容：

1.确定主题。制作网页,首先是确定主题，冬天很冷,却冷得很幸福，刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发，想到了结婚-婚纱，建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点，粉红是可爱清纯的颜色，粉红代表着幸福温馨，所以本站以粉红为风格，让整个网站充满爱的力量。

2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致

分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛8大板块，每一板块又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用Photoshop CS3技术来设计出导航栏，制作切片，建立导航栏，将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选p图，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。

4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。

5.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后，网站基本算是建好了。

6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。

六．实训心得：

通过这周的学习实践，在老师的指导下以大量明晰的操作步骤和典型的应用实例，使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站，作为实训的成果。其内容是多样化的，制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高，加上寒冬，于是以幸福为论点扩展想到了结婚，想到了婚纱，想到了未来的美好城市生活，城市让生活更美好，结婚让生活更完整婚纱让生活更多姿！想到这些，我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷，让我们回忆起那些幸福的日子。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于婚纱的图片，进行Photoshop CS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作动画，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。

首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。

简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在Deamweaver CS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，经过再三调试，整理，加了好多表格，终于满意了。

通过温本周的实训，发现自己还有很多的不足。框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。

因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，表格的嵌套是非常重要的，CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

第四篇：网页设计实训报告

天津电子信息职业技术学院 暨国家示范性软件职业技术学院

网页制作实训报告

姓名：系别：专业：班级：指导教师：完成时间：2012 年 6 月 1日

第五篇：网页设计实训报告

重庆科创职业学院

《静态网站建设》 实 训 报 告

题目：

专业：班级：学号：姓名：成绩：指导教师：

完成日期：年月日

目录

一、课程设计目的....................1

二、课程设计题目描述和要求.....................1

三、课程设计报告内容...................1

3.1总体功能介绍...............................1

3.2总体框架结构设计..............................2

3.3页面设计.........................2

3.4总体测试与发布...........................2

四、结论......................2

五、结束语.........................3

六、主要参考资料....................3一、课程设计目的本课程是一门计算机科学与技术及相关专业实践性环节。以HTML和CSS为基础，全面介绍与网页设计制作有关的知识，向学生阐明Web基本工作机制，并使学生具有一般网页制作的能力。与此同时，通过对Web页制作技术和制作工具的学习，使学生对网页设计中所涉及的相关知识有一个全面的了解。通过本课程的学习，使学生全面了解网站建设与网页设计的基本概念、基本理论及业务运作模式，了解网站建设与网页设计的特点及工作过程，掌握网站的建立及网页设计制作的方法，能够完成一般性网站的建设，因此要求利用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累 Web 程序的编程经验，提高编程与调试能力，培养独立学习、吸取他人的经验、探讨技术的习惯和团队协作能力。

二、课程设计题目描述和要求

每个设计人员设计制作利用DIV+CSS网页布局方法制作的任意类型的网站（主题不限），制作网站所需的相关文字资料、图片资料等可以到相关类型的网站上进行采集或自行采集。

要求：根据上面指定的网站开发项目内容进行开发设计，网站栏目设置、网站要表达的具体内容和网站的风格根据小组确定的课题进行设计；要求根据网站设计规范和常用网制作页技术进行设计；设计的网站要求结构合理，版面美观大方，颜色合理，风格一致，并运用适当的动态网页技术进行修饰。

三、课程设计报告内容

3.1总体功能介绍

制作该网站的时代背景？该网站主要的功能是什么？可以实现哪些用途？主要使用的技术是什么？利用了哪些语言实现哪些效果……

3.2总体框架结构设计

该网站有多少个模块？层次关系是什么样子的？并且可以绘制一个流程图来进行进一步说明。

3.3页面设计

3.3.1首页（页面、设计思路、主要代码）

1．进行截图；

2．对设计思路进行说明。

3．将主要代码复制粘贴。

3.3.2各子页（页面、设计思路、主要代码）

1．进行截图；

2．对设计思路进行说明。

3．将主要代码复制粘贴。

3.4总体测试与发布

使用的测试方法是什么？

测试中遇到的问题以及解决的方法。

四、结论

写法要求：

1、概括地说明所进行工作的情况和价值，分析其优点和特色，指出创新所在，性能达到何种水平，并应指出其中存在的问题和今后的改进方向，特别是对工作中遇到的重要问题要着重指出，并提出自己的见解。篇幅不宜过长。

2、结论要简单、明确。在措辞上应严密，容易被人领会。应实事求是地介绍自己的工作成果，忌言过其实，在无充分把握时，应留有余地。

五、结束语

要求：在文章结尾处，通常以简短的文字，对设计过程中自己的收获，及工作过程中曾给自己以直接帮助的人员，例如指导老师、答疑老师及其他人员，表示自己的谢意。这不仅是一种礼貌，也是对他人劳动的尊重，是治学者应有的品质。

六、主要参考资料

[1]吴东伟等，《网页设计三剑客》，北京，清华大学出版社，2004年

[2]李宏，张敏，《网页设计与制作》，北京，化学工业出版社，2006年

[3]李桂杰，《网页设计与制作》，大连，大连理工大学出版社，2008年

[4]李英俊，《网页设计与制作》，大连，大连理工大学出版社，2010年

…………………………………………………………………………..(要求:五号字，宋体，1.5倍行距。按作者、书名、出版社、地点、出版时间格式逐一列出，中间用逗号格开)