网页设计实训报告总结

总结是一种事后记录方式，针对于工作结束情况、项目完成情况等，将整个过程中的经验、问题进行记录，并在切实与认真分析后，整理成一份详细的报告。如何采用正确的总结格式，写出客观的总结呢？以下是小编整理的关于《网页设计实训报告总结》，仅供参考，希望能够帮助到大家。

第一篇：网页设计实训报告总结

网页设计实训报告总结网站建设实训报告总结网页设计实训心得体会

网页设计实训报告总结网站建设实训报告总结网页设计实训心得体会

网站建设实训报告总结网页设计实训心得体会

网页设计实训报告总结总结的目的在于应用、 发展和提高。

“成绩不讲跑不掉， 问题不讲不得了。

”在总结成绩的同时，要客观地查找工作 中存在的不足和问题，以警示今后的工作，少走弯路，切忌 “一路颂歌，满地鲜花” 。

网页设计实训报告总结一： 本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激 发学习兴趣，调动学习的自觉性，自己动脑、动手，动口， 运用网络资源，结合教材及老师的指导，通过自身的实践， 创作出积聚个人风格、个性的个人网页。

总体来说，整个学 期的学习过程，我学会了很多知识，虽然过程比较艰辛，但 在 INTENET 领域中，有了一个展示自我的空间，我觉得很开 心、很有成就感。

一.充分发挥动手能力 作为网页设计的初学者，我对网页设计非常感兴趣，一 心想设计出一个美观、实用、内容丰富的个人网页。

本学期 的教改方案由以前学生单纯接受知识变为主动

参与教学活 动。

在这样的压力和动力下，通过自己动手、动脑，通过网 络资源，老师的指导，在不断发现问题和解决问题的过程中 学到了很多知识，也增强了我的创作能力和动手能力，在网 页设计过程中，从构思到设计、完善、维护，整个过程我都 全身心投入，使我真正学到了网页设计的知识。

二.在设计过程中不断提高网页设计水平 在本次网页设计中，我不仅学到了很多关于网页设计方 面的知识，也从中学会了关于网络、编程等方面的知识。

我 从 最 初 开 始 运 用 FrontPage 设 计 网 页 ， 到 后 来 运 用 Dreamweaver、Flash、Fireworks 等网软件设计网页，完善 网页。

在这个过程中，我通过自学教材、上网查询，学习了 Dreamweaver、Flash、Fireworks 等网页软件的应用，学会 了管理、维护自己的站点，以及一些简单动画、控件的制作 等等。

在设计过程中也出现了很多的问题，但通过看书，上 网查询，请教老师等方式，不断的学习、解决、提高，设计 出的网页不论是外观还是内容，都在不断的进步、改善。

可 以说在自己动手，不断实践的过程中，网页设计水平得到了 很大的提高。

三.不足之处 由于平时工作比较繁忙，学习时间比较少，对于网页设 计软件的强大功能运用得还不够。

在网页设计过程中，由于 没有网页制作代码的知识，所以在设计时也遇到了很多麻烦， 有时插入一个特效脚本也是很麻烦。

在网页制作过程中，想 提高设计水平，想有个理想的网页，必须学会代码的运用， 我将在以后的学习过程中不断加强这方面的学习，希望老师 能简单介绍一下代码，让我也对它有个初步的认识，以后再 加强学习也才会有所提高。

总体来说，通过今次的对网页设计的学习，有收获也有 遗憾、 不足的地方， 但我想， 我已经迈入了网页设计的大门， 只要我再认真努力的去学习，去提高，凭借我对网页设计的 热情和执着，我将来设计出的网页会更加专业，更完善。

也 希望老师在今后的日子里多指导。

网页设计实训报告总结二： 现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可 缺少的一部分，网络成了我们获取知识和信息的一种便捷工 具，现在的网民也在不断的增多，所以，了解和学习网络知 识是我们作为一名大学生迫切所需的， 我利用寒假的时间，

对网页设计进行了初步的认识和了 解，并基本掌握 Dreamweaver 的应用。

通过对网页设计书籍的翻阅，我学习到了一些关于建设 网站和制作网页的知识，在实践查阅资料时，对 flash 也有 所了解。

我还了解了一些基础的网络技术。

通过学习，我对 计算机有了更深层次得到了解，也有了更浓厚的兴趣。

尤其 是对网页制作的过程与一些技巧手法更有了另外一番了解， 对网页制作的基础知识也有了一定的掌握。

在这个过程中， 我同样认识到网页设计不是一门学科的独秀，而是多种课程 的综合，他是、Flash、Fireworks 等网页软件的综合应用。

下面阐述一下我在翻阅《 Dreamweaver 》时的一些关于 网页设计的见解。

在具体的制作一个网页时我了解到一个优

秀的网页设计应该具备一些基本原则。

首先，要·确定网页设计的内容一个优秀的风站要有一 个明确的主题。

整个网站围绕这个主题,也就是你在网页设 计之前要明确你这个网站有什么目的,用来做什么，所有页 面都是围绕着这个内容来制作，有了明确的内容对排名有很 重要的

作用;其次，要了解你网站所在行业的客户，及你的 网页属于哪个类别。

用户是一个网站成败的关键 ,如果用户 要花很多时间进入你网站很有可能用户会立即关掉你网站 , 或者你网站操作很不方便用户也会马上离开 ,这种网站是很 失败的设计,只会让用户失望的离去. 在完成以上的基本内容之后网页的基本框架便成形成 了， 下面要开始的便是优化工作， 内容是整个网页的核心。

在网页设计之前必须明确网页 的内容安排。

优秀网页设计是要建立在平凡的基础上的。

然 后在具体的规划一个网页时，可以用树状结构先把每个页面 的内容大纲列出来，尤其要制作一个大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站的架构，很 浪费时间和财力。

大纲列出来后，还必须考虑每个页面之间 的链接关系。

是星形，树形，或是网形链接。

这也是判别一 个网站优劣的重要标志。

链接混乱，层次不清的站点会造成

浏览困难，影响内容的发挥。

框架定下来了，然后开始一步 一步有条理，有次序地做来，就胸有成竹得多，也会为主页 将来发展打下良好的

基础。

下一步，就以动手制作具体内容 了， 题材选定， 框架选定， 接下来就开始往主页里面填内容。

如果是个人主页，有能力的人完全可以靠自己来创作所 有的内容。

大部分人的方法是：从报纸，杂志，光盘等媒体 中把相关的资料收集整理，再加上一定的编辑后就可以了。

另外一个好的方法是从网络上收集，您只要到搜索引擎上查 找相应的关键字，就可以找到一大堆的资料。

在准备材料的 时候我们可以用一些小的动画和动态图片，Flash 提供了功 能齐全的绘图和编辑图形工具。

可以直接在编辑区里绘画， 编辑修改非常灵活，它的另一大特点是“交互性”强。

在动 画播放时，可以用鼠标或键盘对动画的播放进行控制，效果 可以很直观的反映出来。

然后是开始正式制作主页。

通过 Dreamweaver 作为制作软件，只需要用到软件中的一些基本 的功能：图片插入和对齐设置;文字的格式、颜色、背景颜 色的设置等就可以制作出一个简单的网页。

总体来说，通过这个假期对网页设计的学习，有收获也 有遗憾。

但是，我已经迈入了网页设计的大门，只要我再认 真

努力的去学习，在今后的闲余时间学习制作网页的更多知 识以实现自身技能的提高，我坚信将来设计出的网页会更加 专业，更加华丽，使它最终成为自己的一项技能。

网页设计实训报告总结三：不知不觉,二个星期的《网页设计与网站建设》课程的实操即将过去 ,回顾这一段 日子,真的令我体会很深,也学会很多东西,懂得很多以前不 懂的东西,也明白了一些事情. 自从第一天接触《网页设计与网站建设》课程 ,我以下 定决心要把网页这门课学好 , 做出一个优秀的网站 . 所以我 时刻没有错过任何学习的机会 , 无论在课堂上 , 还是在课外 上 . 更何况这一次实操 . 回顾今次的实操我觉得我过得很充 实 , 很有意义 , 因为我可以诚实的说我在实操没有玩过一次 游戏,我每时每刻都在设计网站,还记得晚上做网站做到

一、 二点，可能有人会说我傻，但正因为这个傻的行动，令我学 会很多东西，学会别人不懂的东西，做出一个令自己满意的 网站，可能跟别人比还需要继续完善，但我不会因为实操结 束，就把网页设计抛到九霄云外，我会继续学习网页设计技 术，把它变为自己的一项特长。

回顾第一天的《网页设计与网站建设》课程实操，老师 叫我们继续完善以前设计的网站， 做出留言板、 注册的功能。

我很快就完成了，但可能我是一个追求完善的人，所以尽管 一个网站做好可以马上交给老师。

但我做出一个别人都不赞 同的决定，从头开始做一个网站。

因为我觉得以前那个真的 不是太好，尽管实操的时间过去了一半，尽管别人对我说你 交原来这个不就行了吗 ! 何必再做一个呢 ? 但真因为我的执

著，追求成功，追求完善的人，才会使我今天交出一个令自 己满足的答卷。

在制作个人网站时我们首先：

一、必需进行个人网站前台功能设计 包括个人网站主题的确定，前台功能设计与管理、个人 网站主页设计、个人网站留言板、注册、忘记密码、搜索等 网页设计与管理。

二、对个人网站后台管理功能设计 包括个人网站后台管理功能的设计、后台管理信息系统 功能的设计、后台系统权限管理、后台文件管理、个人网站 后台管理系统主页设计。

三、网站的发布 通常我们发布一个网站可能以能过域名注册，但我们也 可以利用自己主机，装了 iis 别人就可以通过我的 ip 地址 来访问我的主页。

第一次做的那个网页我已经发布在上网了。

四、个人网站推广 一个网站做好了，就要对个人网站

进行推广，这是一个 电子商务网站必需做得的一步，因为如果你不对你的网站进 行推广，就算你发布了也没有人会知道的。

在设计这个网站时真的体会很多东西，从一开始网页主 题的确定，到主页总体的设计、搜集资料、前台功能设计与 管理、后台功能设计与管理、每个分页面的设计等。

我都一

一进行了规划，因为如果你不规划好，想做什么就做什么， 是不会做得好的。

因我为体会到这一句话： “机会中属于有 准备的人” 。

我详细到一个表格宽度都一一列明。

例如：775 宽度，分三栏，每一栏占多少。

因为我深深懂得“细微处才 见真功夫” 。

在这次实操过程中令我印象最深的是做留言板，因为刚 好在上一个星期 sql 数据库实操做过了，所以今次在做就比 较轻松，但我以前是经过一个比较长的练习，做完了 n 次， 可能有人会想，肯定是不会才做这么多次啦!但我想告诉这 位同学我每次做得都不是不同的方法。

第一次我用的是 access 数据库，第二次我用的是 sql 数据库加权限管理，第 三次我用的是数据源名称的连接，第四次我用的是自定义连 接字符串，第五次……每一次用的方法都是不同的，可能有 人会说我傻，会一种方法就行

了，还要那么多吗 ?但我想说 的就是不是这么多次的练习，不是之么多次不同的方法，也 就不会造就出今天熟能生巧的我，也不会对同学提出的问题 解决到， 也不会轻松教会同学， 因为你自己首先学会， 学通， 学广，才能把问题一一的解决。

第二篇：网页设计实训报告()

重庆科创职业学院

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

题目：

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

完成日期：年月日

- 1 - 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倍行距。按作者、书名、出版社、地点、出版时间格式逐一列出，中间用逗号格开)

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

实训时间：2011年6月20日——2011年6月24日

实训地点：一号教学楼5楼实训室

实训目的：

1.要求学生独立制作有一定思想和创意网页。

2.掌握网站建设的基本思路和流程。

3.网站基本架设、发布、维护。

实训主要内容

1.使用Dreamweaver编辑网页。网站要求包含二级页面，8-10个页面。使用Dreamweaver布局视图，设置本地站点。使用布局视图，在标准模式中插入层对象制作层动画，利用行为面板添加鼠标行为，制作翻转动画，使用CSS样式统一网页中文字样式，插入Fireworks中的GIF 文件及导入Flash中的SWF文档，设置文档间的超级链接。

2.编辑要有一定的创意，能符合观赏的视觉感受;网页结构清晰，主题突出，美观大方，内容丰富，制作规范，色彩协调。

3.页面制作完整，外观力求精美，访问速度快，无HTML语句错误。

4.撰写实训报告。

操作步骤：

1、利用Dreamweaver制作一个静态网站，要求网站有特色，整个网站的内容和形式要统一，应能够反映一个简单的主题。

2、使用Dreamweaver编辑网页。网站要求包含二级页面，8-10个页面。

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

4、 主页基本要求：网页标题动画，可以制作成GIF动画或者Flash动画;

5、制作一个表单页面。

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

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

8、整个网站各页面之间保持风格一致，页面之间要有合理的超级链接。 实训效果：

设计开始，想法不全面,主题，布局都没有头绪，后来，开始做，而且觉得越做越有头绪了。

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

在做CSS样式表的时候，做字的颜色的时候，尤其体现出来色彩学的作用。这次实训中，我也有许多收获。首先，我体会到了作为一个网页设计师，不会用css的痛苦和尴尬;然后，我发现了很多以前都不曾注意到的细节;其次，在实训中，我对作为一名网页设计师应该学习的内容做了一个更深层次的理解;最后，我还从这次实训中看到了自己很他人的差距，危机意识增强，为了不使这个差距拉大，甚至赶上前面的同学，我会努力的。

个人心得：

这次实训为我提供了与众不同的学习方法和学习体会，从书本中面对现实，为我将来走上社会打下了扎实的基础。设计网页，应该先策划，策划很重要，加上创意，配色很重要，技术与鉴赏能力是最主要的。建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意，如图片文件夹用image，网页文件夹用html。

作为在电子商务专业的大专生，现在我能做的就是吸取知识，提高自身的综合素质，提高自己的创新能力和合作能力等，自己有了能力，到时候才会是“车到山前必有路”。我相信在不久的未来，会有属于我自己的一片天空!

在设计中遇到了很多的技术问题，最后在老师的辛勤指导下，终于豁然开朗。同时，在老师的身上我学得到很多实用的知识，在这次实训中，我也有许多收获。首先，我体会到了作为一个网页设计师，不会用css的痛苦和尴尬;然后，

我发现了很多以前都不曾注意到的细节;其次，在实训中，我对作为一名网页设计师应该学习的内容做了一个更深层次的理解;最后，我还从这次实训中看到了自己很他人的差距，危机意识增强，为了不使这个差距拉大，甚至赶上前面的同学，我会努力的。

本次实训，给我最深刻、最刻骨铭心的感觉就是累，不仅每天白天要一整天对着一台机器，我时常想，以后的日子里，如果我成为了一名网页设计师也会是这样吗?好像很无聊的样子啊。好动的我一定坐不住吧。可是，我也知道，为了衣食父母，为了生存，为了未来，现在我还没有任何的资格想这个问题，时间不对，而现在最最应该想的是——我要怎样成为一个顶级的网页设计师。当我终于有能力的时候，才是考虑无不无聊的问题，我还是明白这一点点。

总之，这此实训让我明白作为在校网页设计师专业的大专生，我能做的就是好好的吸取知识，努力的提高自己的技术水平和自身的综合素质，提高自己的表达能力、写作能力和合作能力。如此，出了社会，自己有了能力，到时候才会是 “吃嘛嘛香”，并且是自己选公司，而不是悲惨的等待公司来选。我相信在不久的未来，会有属于我自己的一片天空。

第四篇：网页实训报告

静态网站实训

姓 名：XXX 学 号：XXXXXXXXXXX 班 级：XXXXX 指导教师：XXX 提交日期：2012年3月21日

南京工业职业技术学院项目技术报告

概 要

本实训报告主要介绍并总结了两周实训以来静态网页设计主题的定位、内容结构、素材的下载、版式设计、色彩设计、导航、功能设计、网页的风格设计、Flash的应用、图片动态效果的使用以及DIV的套用、层、行为等方面的设计。

2 南京工业职业技术学院项目技术报告

目录

前言 .................................................................................................................................................. 4

一、实训意义： ............................................................................................................................... 5

二、实训目的: ................................................................................................................................. 5

三、实验步骤: ................................................................................................................................. 6

1. 确定网站主题 ................................................................................................................... 6 2. 收集材料 ........................................................................................................................... 7 3. 网站规划 ........................................................................................................................... 7 4. 网站的制作工具 ............................................................................................................... 8

四、总体功能介绍 ........................................................................................................................... 8

五、总体框架结构设计 ................................................................................................................... 9

5.1制作网站的网页 ......................................................................................................... 9 5.1.1首页： .............................................................................................................................. 9 5.1.2个人资料： .................................................................................................................... 15 5.1.3演员、导演姜文 ............................................................................................................ 17 5.1.4个人写真 ........................................................................................................................ 19 5.1.5奖项荣誉 ........................................................................................................................ 24 5.1.6感情生活 ........................................................................................................................ 25 5.1.7最新资讯 ........................................................................................................................ 27 5.1.8让子弹飞FLASH游戏 ................................................................................................. 27

六、总体调试与分析 ..................................................................................................................... 29 6.1上传测试网站 ................................................................................................................... 29

七、设计特色 ................................................................................................................................. 29 结论 ................................................................................................................................................ 30 结束语 ............................................................................................................................................ 30

3 南京工业职业技术学院项目技术报告

前言

在互联网时代的今天,不同于我们所熟悉和习惯的农业社会和工业社会,它有着较快的发展速度和极高的淘汰率,不仅挑战着我们学习的勇气,更挑战着我们的方法和技巧.为此对有效掌握所需要的知识方面,我们进行了一系列的探索.在今天网络已经成为各级单位,企业和个人的一张名片,一个精美而又独特的网络主页,不仅为商家吸引更多的客户和投资,更能为我们一个人带来更多的机遇和更大的发展空间,对于部分人来说,它所带来的网络生活远比现实生活更有魅力,更富有激情. 今天internet发展非常快，已经成为整个世界的一个主要通信网络标准。接入internet网，浏览www中丰富多彩的主页，对于一般用户已并不陌生，而如何编制自己的网站、在网络上展示自己，已逐渐成为大众热门话题。在这种趋势的影响和推动下，迅速掌握网站制作技术也就成为迫切需要，因此，这次为期两周的实训设计本人选择题网站设计作为课题。出于对姜文导演的欣赏以及研究，所以我选择了“明星资料网站”作为我的网站的主题。

本网站主要是以姜文主题，网站重点介绍姜文的演绎经历、导演经历、感情生活，以及姜文的每部作品的详细介绍。

本文从总体方案、设计思想、素材制作、页面设计等几大方面介绍“姜文”设计制作的全过程，由于我是第一次进行网站页制作，因时间及水平所限，错误之处在所难免，希望老师批评指正。

4 南京工业职业技术学院项目技术报告

一、实训意义：

网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。

二、实训目的: 1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。

(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。 (2) 熟练掌握网页制作软件Dreamweaver CS3和基本操作和使用技能。

(3) 掌握页面的整体控制和头部内容设置的方法。 (4) 熟练掌握网页页面布局的各种方法。

(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。 (6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。 (7) 熟练建立各种形式的超级链接的方法。 (8) 掌握表单网页制作方法。 (9) 掌握网页特效制作方法。

5 南京工业职业技术学院项目技术报告

(10) 掌握网站测试的方法。

2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。

4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。

三、实验步骤: 1. 确定网站主题

网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像综合网站那样做得内容大而全，包罗万象。我们没有这个能力，也没这个精力，所以必须要找准一个内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是客户感兴趣的，任何内容都可以，但主题要鲜明，在一定的主题范围内，内容做到大而全、精而深。

我的网站的主题在于从各个方面全面的介绍了姜文,主页包括八大板块，分别为：个人资料、演员姜文、导演姜文、个人写真、奖项荣誉、感情生活、圈内评价以及最新资讯。每个板块都从不同的角度

6 南京工业职业技术学院项目技术报告

深层次的介绍了姜文。同时，网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是相似的，给人带来一种文化深厚感觉。最重要是能给浏览者好的欣赏感受。 2. 收集材料

明确了网站的主题以后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让网站有血有肉，能够吸引别人关注，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料，Flash动画和网页特效、代码等。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。 3. 网站规划

我的网站共有1个主页面，8个辅助页面，并且，辅助页面也都有细分，大大小小共做了18个链接页面，每一个页面用统一的背景，以保证网站统一的页面风格，如下图：

7 南京工业职业技术学院项目技术报告

网站整体色为暗粉色，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位置的设计也是重要的一个部分，根据具体内容决定大体结构，相同的风格调用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入适当的Flash动态图片，为了有更好的体验，我在首页加入了背景音乐，用以达到更好的浏览效果。 4. 网站的制作工具

做网页时主要使用的是

Deamweaver CS3软件。另外，为了处理网页中的其他元素，还使用了Photoshop、电脑自带的画图等软件。

四、总体功能介绍

这是一个介绍明星姜文的网站，记述了姜文从最初进入影视界开始到现在各个时期的每部作品以及姜文的重大事件的详细介绍。采用简单的网页制作流程，用表格的方式制作明星资料网站。体现了主题的定位、内容结构、版式设计、色彩设计、导航和功能设计等方面设计。

8 南京工业职业技术学院项目技术报告

五、总体框架结构设计 5.1制作网站的网页

素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网站时，建立统一的文件夹放同一类型的文件，我在制作网页时，把所用到的图片全部放到“img”文件夹中，把所用到的网页全部放到“pages”文件夹中，为了保证网站的兼容性，保存素材的文件夹一律采用英文，并且和网页一同归放在“软件1111赵志峰1102343136”文件夹中，网页中的CSS样式文件也统一管理，做到有条理，我设计的网站首页如下图： 5.1.1首页：

9 南京工业职业技术学院项目技术报告

首页主要用Div和表格来完成预设效果。 下面是首页的主要代码：

(这里是插入背景音乐的代码)

第五篇：静态网页设计与制作 实训报告

静态网页设计与制作

实训报告

这一周我们进行了为期一周的静态网页设计与制作的实训。在这一个星期中我感触很多，无论是从网站的刚开始的主题的确定设计还是后期的网站的发布与测试。感觉又学到了很多新的东西。

从小到大，在自己的心底就有个音乐梦想。我喜欢唱歌，喜欢跳舞，小的时候学过电子琴，上初中后父母认为学业更加要紧，于是所有与音乐有关的东西通通不被再提起。但是自己还是仍旧喜欢着音乐。上大学之后，自己终于可以重新“正大光明”地重新提起音乐了，于是想制作一个音乐网站的念头就在自己的脑海中闪现着。

我一直比较喜欢的华语男歌手是周杰伦，在上大一的那个10月份，周杰伦照例出着专辑，专辑的名字却很让人耐人寻味，《跨时代》，这我才突然意识到，从小学开始，周杰伦出道10年的十张专辑整整陪我走过了小学、中学的时光。于是在这次比赛中想制作一个关于周杰伦出道十年纪念的这样一个音乐网站。 下面就让阐述下我制作这个网站的整体构思和具体设计方案。

关于网站的框架结构：

在制作之前，我在网上搜索过许多周杰伦的官方网站，例如周杰伦中文网，周杰伦中文音乐网之类的。我发现他们制作时框架紧凑明晰，同时也包括了几个音乐网站必须具有的模块。于是，得到借鉴，我在我的主页上面也就添加了“杰

迷必知”、“杰伦贴图”、“杰伦影音”、“每日杰讯”、“歌迷会通道”这样五个模块。在添加这五个模块的时候，我不像一些很正式的网站，模块与模块之间凑得很紧，我尝试了下自由、随机的排放。因为我做的是一个音乐兼娱乐的网站，想让网友们怀着轻松愉悦而不是严肃的心情来看我的这个网站。

关于网站的色彩搭配：

这次制作的网页是主要关乎于歌手周杰伦，访问的人群绝大多数会是周杰伦的粉丝，也绝对是时尚范儿，因此网页的主色调我采用了永不衰竭的经典黑白色调，再者黑白搭配这种反差很大的撞色能够给人很大的视觉冲击力。中间一些板块的边框我选择了用玫红色，玫红色可以提升整个网页的活泼，使黑白色调的网页看起来不死板，严肃而不失华丽。

关于网站的图片：

网页的logo我分为了两个部分，一面是白色背景的10th周年纪念logo，另一面是周杰伦弹着贝斯转动的画面，这个画面是周杰伦超时代世界巡回演唱会的开场秀，超时代演唱会是对杰伦出道十年来的一个总结，因此我认为这个画面做为纪念杰伦出道十年网站的logo是很不错的。

网站的所有的图片处理在互联网上下载的以外，还有相当大的一部分是下载下来以后处理过的。我处理图片的时候不仅用了firework8，还用了photoshop和美图秀秀。在插视频的时候由于只能插flv格式的，因此还下载了转码器。插

入视频时老师说过时间不宜太长，否则不利于网页打开的速度，于是就用了会声会影x2进行视频编辑和合成。

正文主体部分分为5个模块

第一个模块“杰迷必知”，左边是杰伦的两张图片，一张是杰伦正面拍摄，另外一张是背面拍摄。两张图片之间的转换运用了“鼠标经过图像”这一基本技术，是网友们在视觉上全方位了解他。图片的右边附着杰伦的简介，在右下角可以点击“更多”来查看杰伦更多的详细资料。

第二个模块“杰伦影音”，左方和下方附着的是杰伦专辑和演唱会上的精彩照片，在模块的右前方，则简要介绍了周杰伦出道十年来所发行的所有音乐专辑，所举办的所有演唱会和所有所参加拍摄的或者自己导演的所有电影的名字。使网友们更加有兴趣深入了解。

第三个模块“杰伦贴图”，我之所以把这两个模块放在一起，是因为它们之间的联系比起其他模块更加紧密。因为杰伦的贴图不仅仅是周杰伦的个人写真，更多的是他专辑封面，演唱会现场照和电影剧照。因此在这一模块左边，我选择了一张动态的图片。这张动态的图片是由10张小图片组成的，每一张小图片都是他出道10年来那10张专辑的封面图的头像。在这张动态的图片中，歌迷们看到的是10年前的周杰伦从一个青涩的大男孩长成了一个成熟的男人。而用音乐专辑封面头像则更加体现出这个成功的创作型音乐人本质的回归。

第四个模块“每日杰讯”，歌迷们想知道更多关于杰伦的最新资讯，想与他拉近距离，那么作为音乐网站，每日资讯便是必不可少的一个模块。为了使资讯看起

来方便，于是便运用了层，然后调出时间轴，简单的做了一个文字向上运动的一个动画。

第五个模块“歌迷会通道”，看了每日杰讯的歌迷们知道了周杰伦的近期活动安排行程，想参加一些和杰伦有关的活动，那么进入歌迷会将会是一个不错的选择。歌迷会通道提供了全国以及海外共32个通道，歌迷们可以看自己的地理情况就近参加，这也给歌迷和杰伦互动中间架起了一座桥梁。模块的右边用的是杰伦高清写真，图片充分的体现出杰伦深爱着他的歌迷。还未加入歌迷会的粉丝们也可以点击右下角的“加入我们”加入歌迷会。

关于网站链接

这个星期我又重新整理了自己的网站，将它更加美化。

现在网站一共五个页面，分别是“新闻”“资料”“图片”“资源”和“电子杂志”等。 在“资料”链接的页面中，网页的上一部分用大图和文字采用图文混排的方式，下部分将层嵌入到图片中加入文字做了个简单的文字向上运动的效果。网页的全部文字都在详细介绍网站的主人公周杰伦。

在“图片”链接的页面中，主要就贴一些周杰伦的各种图片。第一部分用了代码marquee，使四张图片从左到右运动。中间有一张大图片是周杰伦各个镜头的头像照。紧接着是周杰伦新专辑的照片和镜头。最后一个头部分是杰迷会的会服的照片和介绍，网站正式做成以后可以链接至淘宝。

在“资源”链接中插入的视频是我在周杰伦《2011超时代世界巡回演唱会》上截取的，我个人认为这段视频能够生动记录着周杰伦出道10年来给歌迷朋友们

带来的巨大的视听盛宴，无论是在专辑，电影还是演唱会上。我的不少朋友看到我截的这段视频都说深有感触，甚至有点小感动，原来杰伦的歌已经默默陪我们走过十年。我期待他的歌能够陪伴我们走过下个十年，下下个十年……

最后一个链接页面是“电子杂志”。这个页面主要讲周杰伦最近推出的新专辑。整个页面用了图文混排的方式对外展示新专辑的热卖点，并且有预购的系统，这样可以帮助网站盈利。

心得体会

经过一周的静态网页设计与制作的实训，让我懂得了很多。首先是做什么事情之前脑袋里面都要想好，都要出现大致的轮廓。在开始制作网站之前最重要的是网站的设计，大到网站的整体构思整个框架设计，小到一张图片的和一段文字的摆放位置。

接下来是自己对颜色和美的感知。互联网上发布的的网站总是让人看起来很舒服。不仅是颜色搭配还有布局还有动态效果和静态的结合。这总是在提醒我，制作网页绝对不是一项闭门造车的活动。平时和自己的好朋友多讨论，让很多人来给你的网站给些建议和意见都是不错的。除了这些之外，自己也要多看书，多看些和自己要制作的网站主题相关的资讯，多了解时下最流行的时尚元素。

网站的最终目的是为了盈利，因此我在建立网站制作网页的时候，也专门有订购周杰伦最新专辑和周杰伦国际后援会的会服的通道。这些直接链接到淘宝，然后开始从事电子商务活动。

最后，通过一周的实训让我懂得了，为人做事一定要谨慎细心。同时老师们

传授给我们知识时的耐心也值得我学习。我相信这次实训会为我以后的工作和学习奠定良好的基础。最后，真心地说一句：“老师，您辛苦了~!!”