《静态网页制作与素材加工实训报告》

第一篇：《静态网页制作与素材加工实训报告》

山西工程职业技术学院 《静态网页制作》 实训报告书

系别：计算机工程系 专业：计算机网络 设计班级：网14班 姓名：张静龙

指导教师：乔文彪常娟

2012年12月27日

一、指导教师

乔文彪常娟

二、设计目的与要求

此次的网站设计使我们必须具备有：

（1）色彩构成、（2）图形、图像素材的获取与编辑处理、（3）音频、视频、动画素材的获取和处理、（4）简单数据库设计、（5）Dreamweaver软件的应用等相关知识。

本次《静态网页制作》《网页制作》设计可以培养我们的创新能力，把所学理论与实际操作紧密结合起来，提高其独立解决问题的能力。

三、设计内容、过程以及设计效果

1、设计内容：

我此次设计的网站主题是教育类网站，名为《思科网络学院》，设计中包含了4个导航信息，多个二级页面以及少许的三级页面，题型资料可供下载使用。

在此次期间主要是通过在网上搜集了相关的素材（题库以及各种页面效果的代码等）以及从图书馆借阅相关的书籍来进行对个人站点效果的设计。本次设计的网站主要是用来帮助大家快速了解思科网络学院的最新动态以及学习到思科网络知识，由于站点的容量有限，在这里我总结了几种学习思科网络的方式方法和经典题型。网站的设计来源主要是参考《思科网络学院》和《思科网络学习空间》两大网站，其中包含思科各种教程以及题库，在我的网站设计中也对这两个网站

进行了链接。

2、设计过程：

1、首先分析站点的设计思路及方法。

首先确定了自己的设计思路是思科网络学院，为了完成本次设计会用到相应的资料和素材，而网络和图书馆为我们提供了信息来源。

2、网站架构的确定以及目录链接的确定 架构的设计用到了word，网站的目录确定为 首页、概述、课程介绍、工具和资源、思科网络学院在中国5个导航信息栏，以及设计了各级页面中的导航信息。

链接则是由大量的二级页面，少量的三级页面，文本文档以及各种外部链接组成。

3、配置服务器及站点建立 开始进行配置服务器及站点的建立。本次建立的站点名为cisco，为防止站点目录下出现解析读取错误，所有目录下的所有文件均采用英文名字命名。

4、网站各级页面的设计 本次设计使用的是PS 7.0 专业绘图软件，通过使用PS的各项功能来设计网站的各级页面（一级页面，二级页面）。

5、网站各种标志的设计 此次网站logo的设计主要是模仿官方logo，然后再加以修饰。

6、网站导航及板块设计、版权信息设计 导航栏的设计主要用到的技术是PS中圆角矩形框工具以及文字工具进行设计，版权信息则是参考教材中的格式进行设计。

7、切片制作及各级页面的实现 通过PS的切片功能对设计好的全图像页面进行切片，然后通

过存储为Web格式来生成html格式的网页。

8、首页动态展示栏以及时钟的设计

完成上面的全图像页面设计后，就开始用Dreamweaver软件对首页进行动态设计。首先是从网上搜索到代码用以实现动态图片展示栏和时钟的效果。之前切片切好的页面用来做插入时钟代码的时候，结果造成网页拥挤，后来又重新进行切片，插入背景，然后再放入时钟代码，效果就做好了。

9、网页元素添加及格式设置

然后对首页中的图片滚动进行设计，在这里用到了书上相应的代码，至此一个网站的首页就完成了。在二级页面则是用到了大量的嵌入式框架，来对文字进行编辑。在其中一个二级页面（思科网院在中国）中用到了弹出式信息栏来显示各省思科网院的情况。

10、站点各级页面的链接添加及测试

对做好的各级页面进行链接，在这里可以用到库，避免了繁琐的步骤，最后测试网站。

3、设计效果：

在此次设计中使用的效果有：

Dreamweaver：动态信息展示栏、Flase动画、多次使用嵌入式框架、时钟、动态滚动图片、链接、弹出式信息栏、插入表格、背景，PS：切片工具、插入圆角矩形框、横排文字工具、魔棒、插入图片，渐变工具等。

四、设计地点与时间安排：

时间：第17-18教学周地点：实训楼

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

静态网页设计与制作

实训报告

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

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

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

关于网站的框架结构：

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

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

关于网站的色彩搭配：

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

关于网站的图片：

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

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

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

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

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

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

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

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

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

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

关于网站链接

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

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

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

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

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

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

心得体会

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

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

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

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

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

第三篇：静态网页实训报告

计算机软件学院

实训报告

——Web静态主题网站设计

姓名：夏前伟胡维国海继昌陈佑宏 学号：09

04

03

02 专业：电子商务 班级：电商1413 时间：2016.6.20 任课教师：梁菊华

目录

前言..................................................................................................................................................2 实训意义...........................................................................................................................................3

本实训目的：...........................................................................................................................3 综合实训的目的：...................................................................................................................3 对个人的要求...................................................................................................................................4

具体要求如下：.......................................................................................................................4 内容的设计及制作...........................................................................................................................5

一、策划阶段：.......................................................................................................................5

二、设计阶段网站形象设计：...............................................................................................5 清晰性：...................................................................................................................................5 创造性：...................................................................................................................................5 网站技术因素考虑：...............................................................................................................5 页面设计...........................................................................................................................................6

页面的平铺展示：...................................................................................................................6 LOGO：.....................................................................................................................................6 字体图片背景的搭配：...........................................................................................................6 导航：.......................................................................................................................................6 其他：.......................................................................................................................................6 主页和部分页面展示.......................................................................................................................7 部分代码.........................................................................................................................................12 要求................................................................................................................................................14 主页的要求.............................................................................................................................14 PRODCT的要求......................................................................................................................14 ABOUT ME的要求..................................................................................................................14 测试站点.........................................................................................................................................15 后期维护：.............................................................................................................................15 功能模块：.............................................................................................................................15 参考文献.........................................................................................................................................16 个人小结.........................................................................................................................................17 夏前伟.....................................................................................................................................19 胡维国.....................................................................................................................................22 海继昌.....................................................................................................................................24 陈佑宏.....................................................................................................................................27

前言

随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术

实训意义

本实训目的：

通过本次实习对自主网站的设计，使我们熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver网页设计软件，使我们对html5+css3所学的内容有一个系统的理解和掌握。在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成作品。

综合实训的目的：

《Web静态主题网站设计》主要目的是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的。

对个人的要求

我们每个人都应通过本次实训项目课程的学习，培养自己系统、完整、具体地完成网站设计所需的工作能力，通过信息收集处理、方案决策、制定行动计划、实施计划任务和自我检查评价的能力训练，锻炼学生在职场应有的工作能力。每个学生经历完整个网站设计开发的训练，将掌握完成实际网站设计应具备的核心能力和关键能力。

具体要求如下：

1.充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文件与作业记录。

2.充分了解自己的学习能力，针对拟完成网站的设计功能要求与规范，查阅资料，了解相关网站设计的技术情况。

3.在学习过程中，认真负责，在关键问题与环节上下功夫，充分发挥自己的主动性、创造性来解决技术上与工作中的问题。4.认真填写与撰写从资讯、方案、计划、检查到评估各阶段按规范要求完成的相关作业文件与工作记录，并学会根据学习与工作过程的作业文件和记录及时反省与总结。

内容的设计及制作

一、策划阶段：

一阶段的主要任务是收集、研究和分析用户需求，讨论Web内容，制定计划。

二、设计阶段网站形象设计：

主要包括设计网站的标志（logo），设计网站的标准色彩，设计网站的标准字体。网站主题及风格设计，从主题策划到网站风格创意等内容。

网站内容设计：

清晰性：网站内容必须简洁明了，直奔主题，非常有效地讲清楚你想说的内容。

创造性：网站观点会使访问者产生共鸣，发出认同吗？这可以是访问者判断一个公司是否有实力，从而影响到购买动机的重要因素。突出三个重点：突出你的产品的优点和与众不同的特色；突出帮助访问者辨别、判断同类产品优劣方面的内容，出内容的无庸置疑的正确性。

网站技术因素考虑：

浏览器脚本兼容性。面对屏幕分辨率的适应。网是否需要交互操作。

页面设计

页面的平铺展示：

主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。

LOGO：

logo是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。

LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果。

字体图片背景的搭配：

体图片的搭配要直观，尽量不要撞色太严重，要考虑字迹清楚，色彩简单一些，不要超过四种。页面的分割要显见。

导航：

此次选用的是简单直观的静态导航，HOME，PRODUCT，SERVE，ABOUT ME。子网页的设计：为了保证页面的统一性和美观，子网页的统一性也是很有必要的，简单的布局就是内容的明了直接的展示。

其他：

1.有共性，才有统一，有细节区别，就有层次。

2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。3.设计的各部分，要配合整体风格，夸张一点好像。4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。5.保持页面的透气性。6.符合人类的审美设计！

主页和部分页面展示

主页我们采用的是简约商务的风格。

让人一看就很有质感的，交代了网页的大概内容以及整体风格还有网站的名字，让人一眼明了。

导航栏采用文字及背景的渐变，简约大气不失风格。

PRODUCT页面的整体布局采用横向排序，为了方便以后增加产品而留有增加的空间，简约的Flash动画也进一步体现出网站整体的品味！

简单的一个小动画起到了装饰页面和分割页面的作用。

为了保证每个字页面的统一性，而特意设计的页面，文字的清晰介绍以及高清的图片查看功能，而取消返回首页这个选项而设置在巧妙的位置也是一成功力做！

SERVE页面提供所需的一些服务，一些需要的资源，以及售后的联系，还有物流的查询。

ABOUT ME页面介绍了我们是一个怎样的团队，不做没理想的咸鱼，这艺网是一个艺术与交流的聚集地，论坛功能正在筹建中，你可以在下方选择加入我们这个有理想的团队，来一起质疑那些嘲笑的眼光。

这是艺术！

部分代码

不是每朵花都可以绽放！

页面布局采用css样式表的类样式和ID样式，方便以后的更改以及养成自己的一个习惯。

Flash插入的代码。

字体的整体美观度，以及排版的统一要求。

整个网站唯一的一处表格和层的布局。

要求

主页的要求

对于商务方面，系统要求运行的工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏览者所想要了解的东西。

PRODCT的要求

简单明了直观 独特的见解 色彩的搭配

ABOUT ME的要求

清晰的介绍自己的团队，团队的风格以及网站的规划和要求。

测试站点

站点各个方面无问题，经测试上传到网页，网址为left887.ihttpd.com 后期维护：

布局的要求完全为了考虑后期的增删改查。

功能模块：

后期可以实现数据库的链接一些交互式的功能。

参考文献

百度文库文献系列

个人小结

在这次实训中我学会了网页设计的一般步骤以及所需的软件和一些没有实践过的知识，开阔了自己的见解，这对以后的设计生涯是绝对有帮助的，以后想到当时自己的无从下手到最后的相互讨论得出一个让人满意的布局，这个过程是值得记住的。

因特网上的网页主体不胜枚举。主题的选择取决于网页的内容，人们一般不会去选择自己感到陌生的主题，而是选择某一个自己最感兴趣，或者是非常熟悉的内容来作为网页的主题，当然专业的网页制作公司除外。所以我们决定制作一个简单的商务类型的网站，麻雀虽小五脏俱全，布局充分考虑了以后的天劫和修改。

制作一个网站的开始就是站点站点的结构好比是建造高楼大厦之前的图纸设计。规划占点就是将站点中每一个网页用树型结构列出来，网页的内容可以省略，只要大体说明其要展示的内胎即可。

规划好站点的总体结构以后，还应该对站点中每一页的栏目、布局等作更进一步的设计。

收集和加工素材

如果说站点是一栋高楼大厦，那么素材就是建造大厦的材料。建造大厦的材料有些可以直接拿来用，而有些材料需要经过加工或者整合以后才能使用。同样道理，为制作网页而收集的素材有些可以直接使用有些却要借助其他软件加工处理后才能适合网页内容的需要。

素才的内容主要有文字、图片、动画、声音、视频、程序等。江

收集到的素材分门别类存放起来，需要时可以很快找到。

制作网页

在完成了设计后，实际上，制作网页就是将收集和加工后的素材添加到事先规划设计好的网页中去，或者说制作网页就是将文字、图片、动画、声音、视频、程序等素材按照设计的要求合成起来。在原有的设计基础上可以进行增删改（以不破坏为原则），更好的应用布局和所学工具对页面的优化。

制作完网页阶段之后，应该对网页做全面的检测，包括检查网页内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。一个有错误内容的网页时浏览者所不能容忍的，一个编排布局混乱的网页不会引起浏览者多大的兴趣，一个有超链接错误的网页则会给浏览者带来很多麻烦。

制作网页的目的是要将网页发布到网上，让更多的浏览者来访问发布的站点，因此发布网页这一环节必不可少，否则失去了制作网页的意义。

综上所述，要制作出富于创意的网页，设计阶段非常重要。事实上，一个网站从设计到制作，再到发布的整个过程中，大部分的精力和时间花在设计阶段。即使在制作阶段，很多时候也会根据实际需要对原有的设计做一些修改但是如果说是对设计有什么不满的地方那就只可以说道不同。

我觉得实训就是对所学知识的一种检验，网页设计所检验的并不只是工具的应用更多的是自己的想法独特的想法，如果停留在那些四四方方的布局毫无新意的页面就失去了该有的意义！

夏前伟

1402713109

通过这次实训，我收获了很多，一方面学习到了许多以前没学过的专业知识与知识的应用，另一方面还提高了自己动手做项目的能力。本次实训，是对我能力的进一步锻炼，也是一种考验。从中获得的诸多收获，也是很可贵的，是非常有意义的。

在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，现在想来，有些其实并不难，关键在于理解。

在这次实训中还锻炼了我其他方面的能力，提高了我的综合素质。首先，它锻炼了我做项目的能力，提高了独立思考问题、自己动手操作的能力，在工作的过程中，复习了以前学习过的知识，并掌握了一些应用知识的技巧等。其次，实训中的项目作业也使我更加有团队精神。

从那里，我学会了下面几点找工作的心态：

一、继续学习，不断提升理论涵养。

在信息时代，学习是不断地汲取新信息，获得事业进步的动力。作为一名青年学子更应该把学习作为保持工作积极性的重要途径。走上工作岗位后，我会积极响应单位号召，结合工作实际，不断学习理论、业务知识和社会知识，用先进的理论武装头脑，用精良的业务知识提升能力，以广博的社会知识拓展视野。

二、努力实践，自觉进行角色转化。

只有将理论付诸于实践才能实现理论自身的价值，也只有将理论

付诸于实践才能使理论得以检验。同样，一个人的价值也是通过实践活动来实现的，也只有通过实践才能锻炼人的品质，彰显人的意志。必须在实际的工作和生活中潜心体会，并自觉的进行这种角色的转换。

三、提高工作积极性和主动性

实习，是开端也是结束。展现在自己面前的是一片任自己驰骋的沃土，也分明感受到了沉甸甸的责任。在今后的工作和生活中，我将继续学习，深入实践，不断提升自我，努力创造业绩，继续创造更多的价值。

我认为大学生实习难，就业难，除非你有关系，能给你轻松找到工作，否则就难逃市场选择的厄运。我在该公司实习总结了五个攻略，只能智勇双全，才能在这个社会中出人头地。

首先确定主题，找对目标。

实训的第一节课先设计好网站的类型规则，我们设计的是一款关于旅行方面的物品的网站，对待这个问题要快、准、狠，不要拖拖拉拉，犹豫不决。确定好主题以后该思考要在网站上面上架那些物品，这个需要先调查一下现在主流的旅行物品的需求量，通过互联网和身边的调查然后在做决定。

构造结构框架。

规划好网站是做什么的就好办了，接下来这一步师非常关键的一步，因为一个好的网站无论是网站的布局和色彩以及总体都对用户访

问这个网站起着至关重要的一个决定，所以在这方面我们选择了反其道而行之的简约界面，我们的这个界面不同那些普遍的大网站一样，他们内容很多，很复杂，连接几百个甚至更多更多，画面也花花绿绿的，但是我们觉得这样的网站反而显得太乱，于是我们决定好了结构框架。

后台数据处理。

基本界面已经设计好了，接下来就是见证奇迹的时刻了，在网站中我们看到的甚少甚少，最厉害的还是那些我们看不到的后台数据，那些虽然我们看不到但是反而更加复杂难以理解，这一步也至关重要，设计好每一步的连接数据，每个图片的跳转，窗口的弹出关闭等，这样一个基本的网站已经成型了，最后就是看看哪里不好修改修改，然后就可以完成了。

We Are A Team!

胡维国

1402713104

我在这次实训中担任的是图片处理和flash动画制作以及子网页的制作工作，运用ps对需要用到的图片进行相应的效果处理，保存在相应的图片文件夹内，在制作flash动画的时候出现了一些小的问题，我保存flash动画文件的时候名字做成了默认的文件名，结果在插入动画的时候在浏览器中预览不出来，最后通过查阅资料把这个问题给解决了，我用css样式进行了自己的子网页页面布局，以及对图像的插入，通过类样式对产品进行文字说明，并且插入相应的鼠标特效，来吸引眼球。

通过这次实训对这门课程的学习，做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结：

一、准备资料和挑选符合目的主题的合适素材

做主页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把它保存起来，作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。你可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹，养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长你就有拥有了一个可观的图库，等做主页时随手拈来或加以修改就成你自己的东西了。

二、规划好整个网站

主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不

必要的细节，或使画面过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力，很难令他们深入观赏，而且他们恐怕再也不会访问你的网站了。

三、善用图片，增强艺术效果

我记得老师说过网页的迷人之处之一，要算它上面能点缀许多漂亮的图片。精美的图片设计，可以使自己的网页增辉不少，令人过目不忘。图片的内容应有一定的实际作用，切忌虚饰浮夸，同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。

四、要多次使用不同的浏览器进行预览

在做品完成之后，要多次对自己的网站进行测试，在不同的浏览器中进行尝试效果，以达到手机和电脑上不同的浏览器中都能完整的体现出网站的内容。

海继昌

1402713103

这次实训我们主要是练习网页制作及网站发布的各种知识。Dreamweaver工具为我们实现这些提供了便利，下面我将网页制作和网站发布的知识总结如下：

（1）网页制作的前期工作是搜集大量的素材，我们的网页只有是实用的才会是大众喜欢的，搜集素材以充实我们的网页。当然我们也应该在此时定下网站的方向是什么，剩下的就是靠Dreamweaver进行编辑。

（2）网页的版式设计，版式设计时我们应该有重点，把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。

（3）文本编写，我们的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改。

（4）处理网页之间的关联，这主要是建立合理、高效的网页导航系统；

（5）网页发布过程，主要是将建设好的网页上传到服务器中供用户浏览。

存在的问题及解决思路

(1)在Dreamweaver基础方面：制作网页时如何实现网页不跳转就可以出现新的内容，实现页面内的链接；用代码编写网页上的按钮，25 实现按钮的各种功能，如刷新，重置，确定操作。Css样式表的概念模糊。

（2）网站风格方面：一个网站的各个页面之间风格应该是统一的，只有围绕一个风格才会成功。

（3）网站的内容方面：在制作网站时内容之间应该是相关的，在制作时我们不能追求面面俱到，只能做到精益求精。杂乱无章的网站是不会有大的发展的。

网页设计实训就快结束了，在这短短的三周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。在这一周的时间里，我一心只做网页，做自己喜欢的风格的网页。经历了一次充实而有愉快的实训，我学会了制作框架、使用锚点、给网页网页插入背景音乐、表格、视频、flash、导航条等更深层次的掌握了它们的用法，现在整个网页也已经大体竣工，我感到很开心，经过这三周不断探索，我喜欢上了这门课程，感觉很有意思。或许实训的结束代表一段新生活的开始，但是我认为它不但是一门课，需要我们去掌握，同时还可以锻炼我们的逻辑思维能力和思维的严密性，还有就是在制作网页的过程中，更需要有不错的艺术审美观，这样，你做出的网页才会赏心悦目，让人眼前一亮，也就是从此刻起，我决心好好钻研这门课，力求这方面的技能达到顶级。虽然网页已经完成，可这并不是一件轻而易举的事情，在此过程中遇到了许多以前不曾遇到的问题，多的情况都是自己解决，万不得已之际，我会主动问老师和同学，直到弄懂为止！

让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。

陈佑宏

1402713102

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

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

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样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

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

《网页设计与制作》课程设计报告书

设计题目：起止日期： 工作室或公司网站设计

2013.12.23-2013.12.27

目录

一、关于网站 ···························· 3

1、网站的主题 ·························· 3 2.网站材料 ··························· 4

二、网站的规划设计 ························· 5 1.网站的功能定位 ························2.站点的内容 ··························3.站点的风格 ··························4.网站功能模块图 ························三．网站技术解决方案 ························

1、网站的制作工具 ························

2、所用技术 ···························四．网页介绍 ····························

1、制作网站的网页 ························2.第二层展示 ··························3.动漫排行榜展示 ························4.第三层展示 ··························5.关于短片的插入： ·······················五.关于我们： ···························六．实训总结： ··························· 2 5 5 6 6 7 7 8 9

13 14 14

一、关于网站

1、网站的主题

我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。建立一个展示动漫的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。

动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。

现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代（Anime Comic Time）》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。在中国以外，并没有此种说法。国外习惯性将动画（anime）、漫画（comic）、游戏（game）三者合称作ACG，或加上轻小说（novel）合称为ACGN。

由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。

漫画正是吸收了影视艺术的这两个特点。当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了； 当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候；当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。一部现代故事漫画往往集远、中、近、特四种镜头于一身，漫画家往往能熟练地运用镜头的移动和各种蒙太奇剪接，对故事特定部分的情绪和氛围进行渲染。这就是现代故事漫画容易和动画结合的一个原因，因为它天生就像动画的分镜头剧本，读者在看漫画时仿佛就是在看一部电影。正是有着这样的相似性，所以如今将动画和漫画合称为“动漫”。

动漫领域衍生出的许多术语均已经被广泛应用，例如：正太，萝莉，御姐，百合,BL等。

动漫产业日益与游戏产业结合紧密，在日本已经形成一个成熟的产业链，动漫已经 3 从单单的平面媒体和电视媒体扩展到游戏，书籍，网络，玩具等众多领域。许多动漫游戏应运而生，例如《死神bleach》PSP平台的游戏，也有许多GALGAME被改编成动漫作品。

Manga（まんが，manga）为日语“漫画”的罗马字注音。另外，英文词cartoon的中文音译“卡通”，也是漫画与动画的合称，但被用来特指美国动画。版面有限，相关词条，详见：“动漫概论” 按类型分类：

情感；推理；动作；战争；后宫；宠物；历史；搞笑；机战；少年；冒险；治愈；童话；格斗；

少女；悬疑；科幻；竞技；社会；神魔；热血；校园；耽美；原创；魔法；教育；恐怖；惊悚；

政治；哲理；经典；励志；伦理；恶搞；血腥；言情；暴力。按版本分类： 电视动画（TV）：

电视频道上播映的动画作品。

剧场动画（MOV）：影院公映的动画作品，是日本动画按传播方式分类的一种，在中国又被称为剧场版。

OVA（OAD）：原创动画录影带，其中OVA是单独发售，OAD是随书发售的。网络动画（NET）：以网络为播放平台的动画。

动画音乐：一部动漫作品中的音乐，包括主题音乐和背景音乐（BGM）。

动画原创：依漫画改编的动画，由于动画的更新速度比漫画快的关系，当动画的剧集快赶上漫画时，动画的剧情就要脱离漫画剧情，开始动画原创。

同人：也叫二次创作，由漫画、动画、游戏、小说、影视等作品甚至现实里已知的人物、设定衍生出来的文章及其他如图片影音游戏等等，或“自主”的创作。COS：全称COSPLAY，装扮成漫画、动画、游戏、小说等中的人物，也可以是原创。

2.网站材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的产品。同时，查询相关的动漫、百度等方式收集所需的文字资料,图象资料,网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

二、网站的规划设计

1.网站的功能定位

我的网站共有5个主页面：首页、动漫之家、动漫排行榜、动漫连载、周边产品。每一个页面用图片来做。

我是用素材拼音命名网站名，用以方便存储和转发。网站主页整体色调为梅红色，配上深沉的背景图，搭配出一种层次感。然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。

2.站点的内容

我们动漫汇主要是要向客户介绍动漫，包括动漫的介绍，动漫的周边产品，动漫的图片及动漫的漫画或是动漫片段。站点里面包括：

首页：第一层网页，画面主要有动漫汇的logo，logo下方是一个横幅，鼠标经过会有光亮，点击仍将是动漫的主页。左边是一个动态动漫图，显得主页可爱又有动漫气息等。下方是会员登录，点击登陆跳转至输入账号及密码界面，如不是会员，点击注册跳转个人用户注册界面。主页的背景图是动漫海报，由两层叠加。主图是6幅动漫图，6种动漫的介绍。鼠标进过动漫图时，会有相应的动漫简介。

跳转页：第二层和第三层，主要的主页的过渡。里面有动漫的详细介绍，有动态图欣赏左侧是关于动漫的周边产品。点击看漫画或动漫，即可欣赏相关动漫。

3.站点的风格

整个网页色彩明显，我们添加了gif图，这样网页稍微有活力，背景都是用动漫海报。其中使用翻看图片的特效，使得看漫画不那么单挑。同时也插入视频，使得网站有活力一些。

首页的标题插入闪光效果，鼠标经过时能出现，不容易产生无趣感。首页的图片不只有图片，鼠标放至图片上会有文字出现，是动漫的简介。使得网页有活力。

4.网站功能模块图

三．网站技术解决方案

1、网站的制作工具

做网页时主要使用的是Dreamweaver CS3另外，为了处理网页中的其他元素，还使用了Photoshop、FLASH等软件。

2、所用技术

动漫汇需要大量的图片及相关的话题。我们需要插入图片，大小要适合，以动漫海报为网页的背景，则设置好页面设置，选好准备好的海报图。插入gif图片，需要时在ps中做gif图。插入视频时需要设置好相关的，视频名称中不能有中文，是flv格式的。图文介绍的需要经过ps的加工，使得首页的图片有生机活力。插入表单，是关于用户的登录，点击跳转至登录或是注册界面。首页标题都有链接，点击进入相应的网站。首页下方是关于动漫汇，为了突出字，用ps进行加工。

四．网页介绍

1、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“web”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了各类动漫的文件夹来存放图片。同时，由于漫画页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。

2.第二层展示

页面中，中间的页面主要包含动漫介绍，周边产品，但浏览者有了新的认识后，可以点击下方的“点击看漫画”按钮来进入第三层页面（漫画页面）。而背景图必须选择横图，而且两边的位置要有良好的视觉效果，我们的排版虽然精简，但是非常有视觉效果，使页面的整体布局合理，既突出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性。

动漫介绍页面

3.动漫排行榜展示

动漫排行榜是为了让浏览者更方便更快更准确地了解到动漫的最新信息而制作的，红色的为最热门的TOP5，分别有：总排行、日本漫画排行、香港漫画排行、大陆漫画排行等排行榜榜单。我们也会定时更新榜单，为了让广大读者更快更直接地了解最新的动漫信息。

4.第三层展示

看漫画页面，是我们制作的重点，并且为了让大家能看漫画，我们专门找了类似翻页的网页特效，方便读者的翻阅，而且让网站更炫，也不容易觉得无趣及疲劳。第三层部门动漫是漫画欣赏，有的是动漫观看。主要是看我们更新的是什么哦~ 也可以让各位动漫迷提前看到剧情的发展，好看又过瘾啊！亲。定时进入查看最新动漫吧~注册用户账号，方便随时进入看哦 送上一幅漫画图： 第三层页面的设计代码如下：