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

《《静态网页制作与素材加工实训报告》.docx》由会员分享，可在线阅读，更多相关《《静态网页制作与素材加工实训报告》.docx（61页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、静态网页制作与素材加工实训报告 第一篇：静态网页制作与素材加工实训报告 山西工程职业技术学院 静态网页制作 实训报告书 系别：计算机工程系 专业：计算机网络 设计班级：网14班 姓名：张静龙 指导老师：乔文彪常娟 2022年12月27日 一、指导老师 乔文彪常娟 二、设计目的与要求 此次的网站设计使我们必需具备有： 1色调构成、 2图形、图像素材的获得与编辑处理、 3音频、视频、动画素材的获得和处理、 4简洁数据库设计、 5Dreamweaver软件的应用等相关学问。 本次静态网页制作网页制作设计可以培育我们的创新实力，把所学理论与实际操作紧密结合起来，提高其独立解决问题的实力。 三、设计内容

2、、过程以及设计效果 1、设计内容： 我此次设计的网站主题是教化类网站，名为思科网络学院，设计中包含了4个导航信息，多个二级页面以及少许的三级页面，题型资料可供下载运用。 在此次期间主要是通过在网上搜集了相关的素材题库以及各种页面效果的代码等以及从图书馆借阅相关的书籍来进行对个人站点效果的设计。本次设计的网站主要是用来关心大家快速了解思科网络学院的最新动态以及学习到思科网络学问，由于站点的容量有限，在这里我总结了几种学习思科网络的方式方法和经典题型。网站的设计来源主要是参考思科网络学院和思科网络学习空间两大网站，其中包含思科各种教程以及题库，在我的网站设计中也对这两个网站 进行了链接。 2、设计

3、过程： 1、首先分析站点的设计思路及方法。 首先确定了自己的设计思路是思科网络学院，为了完本钱次设计会用到相应的资料和素材，而网络和图书馆为我们供应了信息来源。 2、网站架构确实定以及书目链接确实定 架构的设计用到了word，网站的书目确定为 首页、概述、课程介绍、工具和资源、思科网络学院在中国5个导航信息栏，以及设计了各级页面中的导航信息。 链接则是由大量的二级页面，少量的三级页面，文本文档以及各种外部链接组成。 3、配置服务器及站点建立 起先进行配置服务器及站点的建立。本次建立的站点名为cisco，为防止站点书目下出现解析读取错误，全部书目下的全部文件均接受英文名字命名。 4、网站各级页面

4、的设计 本次设计运用的是PS 7.0 专业绘图软件，通过运用PS的各项功能来设计网站的各级页面一级页面，二级页面。 5、网站各种标记的设计 此次网站logo的设计主要是仿照官方logo，然后再加以修饰。 6、网站导航及板块设计、版权信息设计 导航栏的设计主要用到的技术是PS中圆角矩形框工具以及文字工具进行设计，版权信息则是参考教材中的格式进行设计。 7、切片制作及各级页面的实现 通过PS的切片功能对设计好的全图像页面进行切片，然后通 过存储为Web格式来生成html格式的网页。 8、首页动态展示栏以刚好钟的设计 完成上面的全图像页面设计后，就起先用Dreamweaver软件对首页进行动态设计。

5、首先是从网上搜寻到代码用以实现动态图片展示栏和时钟的效果。之前切片切好的页面用来做插入时钟代码的时候，结果造成网页拥挤，后来又重新进行切片，插入背景，然后再放入时钟代码，效果就做好了。 9、网页元素添加及格式设置 然后对首页中的图片滚动进行设计，在这里用到了书上相应的代码，至此一个网站的首页就完成了。在二级页面则是用到了大量的嵌入式框架，来对文字进行编辑。在其中一个二级页面思科网院在中国中用到了弹出式信息栏来显示各省思科网院的状况。 10、站点各级页面的链接添加及测试 对做好的各级页面进行链接，在这里可以用到库，避开了繁琐的步骤，最终测试网站。 3、设计效果： 在此次设计中运用的效果有： Dr

6、eamweaver：动态信息展示栏、Flase动画、多次运用嵌入式框架、时钟、动态滚动图片、链接、弹出式信息栏、插入表格、背景， PS：切片工具、插入圆角矩形框、横排文字工具、魔棒、插入图片，渐变工具等。 四、设计地点与时间支配： 时间：第17-18教学周 地点：实训楼 其次篇：静态网页设计与制作 实训报告 静态网页设计与制作 实训报告 这一周我们进行了为期一周的静态网页设计与制作的实训。在这一个星期中我感受很多，无论是从网站的刚起先的主题确实定设计还是后期的网站的发布与测试。感觉又学到了很多新的东西。 从小到大，在自己的心底就有个音乐幻想。我宠爱唱歌，宠爱跳舞，小的时候学过电子琴，上初中后父

7、母认为学业更加要紧，于是全部与音乐有关的东西通通不被再提起。但是自己还是照旧宠爱着音乐。上高校之后，自己最终可以重新“正大光明地重新提起音乐了，于是想制作一个音乐网站的念头就在自己的脑海中出现着。 我始终比较宠爱的华语男歌手是周杰伦，在上大一的那个10月份，周杰伦按例出着专辑，专辑的名字却很让人耐人寻味，跨时代，这我才突然意识到，从小学起先，周杰伦出道10年的十张专辑整整陪我走过了小学、中学的时间。于是在这次竞赛中想制作一个关于周杰伦出道十年纪念的这样一个音乐网站。 下面就让阐述下我制作这个网站的整体构思和具体设计方案。 关于网站的框架结构： 在制作之前，我在网上搜寻过许多周杰伦的官方网站，例

8、如周杰伦中文网，周杰伦中文音乐网之类的。我觉察他们制作时框架紧凑明晰，同时也包括了几个音乐网站必需具有的模块。于是，得到借鉴，我在我的主页上面也就添加了“杰 迷必知、“杰伦贴图、“杰伦影音、“每日杰讯、“歌迷会通道这样五个模块。在添加这五个模块的时候，我不像一些很正式的网站，模块与模块之间凑得很紧，我尝试了下自由、随机的排放。因为我做的是一个音乐兼消遣的网站，想让网友们怀着轻松愉悦而不是肃穆的心情来看我的这个网站。 关于网站的色调搭配： 这次制作的网页是主要关乎于歌手周杰伦，访问的人群绝大多数会是周杰伦的粉丝，也确定是时尚范儿，因此网页的主色调我接受了永不衰竭的经典黑白色调，再者黑白搭配这种反

9、差很大的撞色能够给人很大的视觉冲击力。中间一些板块的边框我选择了用玫红色，玫红色可以提升整个网页的活泼，使黑白色调的网页看起来不死板，肃穆而不失华丽。 关于网站的图片： 网页的logo我分为了两个部分，一面是白色背景的10th周年纪念logo，另一面是周杰伦弹着贝斯转动的画面，这个画面是周杰伦超时代世界巡回演唱会的开场秀，超时代演唱会是对杰伦出道十年来的一个总结，因此我认为这个画面做为纪念杰伦出道十年网站的logo是很不错的。 网站的全部的图片处理在互联网上下载的以外，还有相当大的一部分是下载下来以后处理过的。我处理图片的时候不仅用了firework8，还用了photoshop和美图秀秀。在插

10、视频的时候由于只能插flv格式的，因此还下载了转码器。插 入视频时老师说过时间不宜太长，否则不利于网页打开的速度，于是就用了会声会影x2进行视频编辑和合成。 正文主体部分分为5个模块 第一个模块“杰迷必知，左边是杰伦的两张图片，一张是杰伦正面拍摄，另外一张是反面拍摄。两张图片之间的转换运用了“鼠标经过图像这一基本技术，是网友们在视觉上全方位了解他。图片的右边附着杰伦的简介，在右下角可以点击“更多来查看杰伦更多的具体资料。 其次个模块“杰伦影音，左方和下方附着的是杰伦专辑和演唱会上的精彩照片，在模块的右前方，则简要介绍了周杰伦出道十年来所发行的全部音乐专辑，所举办的全部演唱会和全部所参加拍摄的或

11、者自己导演的全部电影的名字。使网友们更加有爱好深化了解。 第三个模块“杰伦贴图，我之所以把这两个模块放在一起，是因为它们之间的联系比起其他模块更加紧密。因为杰伦的贴图不仅仅是周杰伦的个人写真，更多的是他专辑封面，演唱会现场照和电影剧照。因此在这一模块左边，我选择了一张动态的图片。这张动态的图片是由10张小图片组成的，每一张小图片都是他出道10年来那10张专辑的封面图的头像。在这张动态的图片中，歌迷们看到的是10年前的周杰伦从一个青涩的大男孩长成了一个成熟的男人。而用音乐专辑封面头像则更加表达出这个胜利的创作型音乐人本质的回来。 第四个模块“每日杰讯，歌迷们想知道更多关于杰伦的最新资讯，想与他拉

12、近距离，那么作为音乐网站，每日资讯便是必不行少的一个模块。为了使资讯看起 来便利，于是便运用了层，然后调出时间轴，简洁的做了一个文字向上运动的一个动画。 第五个模块“歌迷会通道，看了每日杰讯的歌迷们知道了周杰伦的近期活动支配行程，想参加一些和杰伦有关的活动，那么进入歌迷会将会是一个不错的选择。歌迷会通道供应了全国以及海外共32个通道，歌迷们可以看自己的地理状况就近参加，这也给歌迷和杰伦互动中间架起了一座桥梁。模块的右边用的是杰伦高清写真，图片充分的表达出杰伦深爱着他的歌迷。还未加入歌迷会的粉丝们也可以点击右下角的“加入我们加入歌迷会。 关于网站链接 这个星期我又重新整理了自己的网站，将它更加美

13、化。 如今网站一共五个页面，分别是“新闻“资料“图片“资源和“电子杂志等。 在“资料链接的页面中，网页的上一部分用大图和文字接受图文混排的方式，下部分将层嵌入到图片中加入文字做了个简洁的文字向上运动的效果。网页的全部文字都在具体介绍网站的主子公周杰伦。 在“图片链接的页面中，主要就贴一些周杰伦的各种图片。第一部分用了代码marquee，使四张图片从左到右运动。中间有一张大图片是周杰伦各个镜头的头像照。紧接着是周杰伦新专辑的照片和镜头。最终一个头部分是杰迷会的会服的照片和介绍，网站正式做成以后可以链接至淘宝。 在“资源链接中插入的视频是我在周杰伦2022超时代世界巡回演唱会上截取的，我个人认为这

14、段视频能够生动记录着周杰伦出道10年来给歌迷挚友们 带来的巨大的视听盛宴，无论是在专辑，电影还是演唱会上。我的不少挚友看到我截的这段视频都说深有感受，甚至有点小感动，原来杰伦的歌已经静默陪我们走过十年。我期盼他的歌能够陪伴我们走过下个十年，下下个十年 最终一个链接页面是“电子杂志。这个页面主要讲周杰伦最近推出的新专辑。整个页面用了图文混排的方式对外展示新专辑的热卖点，并且有预购的系统，这样可以关心网站盈利。 心得体会 经过一周的静态网页设计与制作的实训，让我懂得了很多。首先是做什么事情之前脑袋里面都要想好，都要出现大致的轮廓。在起先制作网站之前最重要的是网站的设计，大到网站的整体构思整个框架设

15、计，小到一张图片的和一段文字的摆放位置。 接下来是自己对颜色和美的感知。互联网上发布的的网站总是让人看起来很舒适。不仅是颜色搭配还有布局还有动态效果和静态的结合。这总是在提示我，制作网页确定不是一项闭门造车的活动。平常和自己的好挚友多探讨，让很多人来给你的网站给些建议和看法都是不错的。除了这些之外，自己也要多看书，多看些和自己要制作的网站主题相关的资讯，多了解时下最流行的时尚元素。 网站的最终目的是为了盈利，因此我在建立网站制作网页的时候，也特地有订购周杰伦最新专辑和周杰伦国际后援会的会服的通道。这些干脆链接到淘宝，然后起先从事电子商务活动。 最终，通过一周的实训让我懂得了，为人做事确定要谨慎

16、细心。同时老师们 传授给我们学问时的耐性也值得我学习。我信任这次实训会为我以后的工作和学习奠定良好的基础。最终，真心地说一句：“老师，您辛苦了！ 第三篇：静态网页实训报告 计算机软件学院 实训报告 Web静态主题网站设计 姓名：夏前伟胡维国海继昌陈佑宏 学号：09 04 03 02 专业：电子商务 班级：电商1413 时间：2022.6.20 任课老师：梁菊华 书目 前言 . 2 实训意义. 3 本实训目的： . 3 综合实训的目的： . 3 对个人的要求 . 4 具体要求如下： . 4 内容的设计及制作 . 5 一、策划阶段： . 5 二、设计阶段网站形象设计： . 5 清晰性： . 5 创

17、建性： . 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 1 前言 随着时代的进展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所留意。在目前国内对

18、此领域探讨甚少的状况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题显明、形式与内容相统 一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不行控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美和“功能都是为了更好地表达网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获得的技术和艺

19、术阅历为基础，按照设计目的和要求自觉地对网页的构成元素进行艺术规划的创建性思维活动，必定要成为设计艺术的重要组成部分，并随着网络技术的进展而进展。外表上看，它不过是关于网页版式编排的技巧与方法，而事实上，它不仅是一种技能，更是艺术 2 实训意义 本实训目的： 通过本次实习对自主网站的设计，使我们娴熟应用HTML标记语言设计制作网页、娴熟应用Dreamveaver网页设计软件，使我们对html5+css3所学的内容有一个系统的理解和驾驭。 在制作过程中，主要驾驭对网页的布局、色调的搭配、框架的应用、层的运用、行为的实现、表单的运用、模板和库的应用等，完成作品。 综合实训的目的： Web静态主题网

20、站设计主要目的是让我们通过这门实践课程的学习了解和驾驭网页设计的基本方法，通过不断上机实习训练到达解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作学问及以前所学习的计算机方面的学问，依据网站制作的流程，完成一个相对具体、综合的网站，全面稳固学生的学问，培育学生解决实际问题的实力，从而到达学以致用的。 3 对个人的要求 我们每个人都应通过本次实训项目课程的学习，培育自己系统、完好、具体地完成网站设计所需的工作实力，通过信息收集处理、方案决策、制定行动支配、实施支配任务和自我检查评价的实力训练，熬炼学生在职场应有的工作实力。每个学生阅历完好个网站设计开发的

21、训练，将驾驭完成实际网站设计应具备的核心实力和关键实力。 具体要求如下： 1.充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文件与作业记录。 2.充分了解自己的学习实力，针对拟完成网站的设计功能要求与规范，查阅资料，了解相关网站设计的技术状况。 3.在学习过程中，认真负责，在关键问题与环节上下功夫，充分发挥自己的主动性、创建性来解决技术上与工作中的问题。 4.认真填写与撰写从资讯、方案、支配、检查到评估各阶段按规范要求完成的相关作业文件与工作记录，并学会根据学习与工作过程的作业文件和记录刚好反省与总结。 4 内容的设计及制作 一、策划阶段： 一阶段的主要任务是收集、探讨和分析用户需求，

22、探讨Web内容，制定支配。 二、设计阶段网站形象设计： 主要包括设计网站的标记logo，设计网站的标准色调，设计网站的标准字体。网站主题及风格设计，从主题策划到网站风格创意等内容。 网站内容设计： 清晰性：网站内容必需简洁明白，直奔主题，特殊有效地讲清楚你想说的内容。 创建性：网站观点会使访问者产生共鸣，发出认同吗？这可以是访问者推断一个公司是否有实力，从而影响到购置动机的重要因素。 突出三个重点：突出你的产品的优点和别出心裁的特色；突出关心访问者区分、推断同类产品优劣方面的内容，出内容的无庸置疑的正确性。 网站技术因素考虑： 阅读器脚本兼容性。 面对屏幕区分率的适应。 网是否需要交互操作。

23、5 页面设计 页面的平铺展示： 主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。 LOGO： logo是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。 LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果。 字体图片背景的搭配： 体图片的搭配要直观，尽量不要撞色太严峻，要考虑字迹清楚，色调简洁一些，不要超过四种。页面的分割要显见。 导航： 此次选用的是简洁直观的静态导航，HOME，PRODUCT，SERVE，ABOUT ME。 子网页的设计：为了保证页面的统一性和美观，子网页的统一性也是很有必要的，简洁的布局就是内容的明白干脆

24、的展示。 其他： 1.有共性，才有统一，有微小环节区分，就有层次。 6 2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。 3.设计的各部分，要协作整体风格，夸张一点好像。 4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。 5.保持页面的透气性。 6.符合人类的审美设计！ 主页和部分页面展示 主页我们接受的是简约商务的风格。 让人一看就很有质感的，交代了网页的或许内容以及整体风格还有网站的名字，让人一眼明白。 7 导航栏接受文字及背景的渐变，简约大气不失风格。 PRODUCT页面的整体布局接受横向排序，为了便利以后增加产品而留有增加的空间，简约的Flash动画也进一步表达

25、出网站整体的品尝！ 简洁的一个小动画起到了装饰页面和分割页面的作用。 8 为了保证每个字页面的统一性，而特意设计的页面，文字的清晰介绍以及高清的图片查看功能，而取消返回首页这个选项而设置在奇异的位置也是一胜利力做！ 9 SERVE页面供应所需的一些服务，一些需要的资源，以及售后的联系，还有物流的查询。 10 ABOUT ME页面介绍了我们是一个怎样的团队，不做没志向的咸鱼，这艺网是一个艺术与沟通的聚集地，论坛功能正在筹建中，你可以在下方选择加入我们这个有志向的团队，来一起质疑那些讪笑的目光。 这是艺术！ 11 部分代码 不是每朵花都可以绽放！ 页面布局接受css样式表的类样式和ID样式，便利以

26、后的更改以及养成自己的一个习惯。 12 Flash插入的代码。 字体的整体美观度，以及排版的统一要求。 整个网站唯一的一处表格和层的布局。 13 要求 主页的要求 对于商务方面，系统要求运行的工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，平安牢靠，对于宽阔客户所要执行的操作简洁易懂，远程访问速度较快，界面友好美观，有基本的错误提示功能，远程操作数据库正确，要求和客户有确定的互动性，在主页上直观的就可以查看阅读者所想要了解的东西。 PRODCT的要求 简洁明白直观 独特的见解 色调的搭配 ABOUT ME的要求 清晰的介绍自己的团队，团队的风格以及网站的规划和要求。 1

27、4 测试站点 站点各个方面无问题，经测试上传到网页，网址为left887.i d 后期维护： 布局的要求完全为了考虑后期的增删改查。 功能模块： 后期可以实现数据库的链接一些交互式的功能。 15 参考文献 百度文库文献系列 16 个人小结 在这次实训中我学会了网页设计的一般步骤以及所需的软件和一些没有实践过的学问，开阔了自己的见解，这对以后的设计生涯是确定有关心的，以后想到当时自己的无从下手到最终的互相探讨得出一个让人满足的布局，这个过程是值得记住的。 因特网上的网页主体数不胜数。主题的选择取决于网页的内容，人们一般不会去选择自己感到生疏的主题，而是选择某一个自己最感爱好，或者是特殊熟识的内容

28、来作为网页的主题，当然专业的网页制作公司除外。所以我们确定制作一个简洁的商务类型的网站，麻雀虽小五脏俱全，布局充分考虑了以后的天劫和修改。 制作一个网站的起先就是站点站点的结构好比是建立高楼大厦之前的图纸设计。规划占点就是将站点中每一个网页用树型结构列出来，网页的内容可以省略，只要大体说明其要展示的内胎即可。 规划好站点的总体结构以后，还应当对站点中每一页的栏目、布局等作更进一步的设计。 收集和加工素材 假如说站点是一栋高楼大厦，那么素材就是建立大厦的材料。建立大厦的材料有些可以干脆拿来用，而有些材料需要经过加工或者整合以后才能运用。同样道理，为制作网页而收集的素材有些可以干脆运用有些却要借助

29、其他软件加工处理后才能适合网页内容的需要。 素才的内容主要有文字、图片、动画、声音、视频、程序等。江 17 收集到的素材分门别类存放起来，需要时可以很快找到。 制作网页 在完成了设计后，事实上，制作网页就是将收集和加工后的素材添加到事先规划设计好的网页中去，或者说制作网页就是将文字、图片、动画、声音、视频、程序等素材依据设计的要求合成起来。在原有的设计基础上可以进行增删改以不破坏为原则，更好的应用布局和所学工具对页面的优化。 制作完网页阶段之后，应当对网页做全面的检测，包括检查网页内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。一个有错误内容的网页时阅读者所不能容

30、忍的，一个编排布局混乱的网页不会引起阅读者多大的爱好，一个有超链接错误的网页则会给阅读者带来很多麻烦。 制作网页的目的是要将网页发布到网上，让更多的阅读者来访问发布的站点，因此发布网页这一环节必不行少，否则失去了制作网页的意义。 综上所述，要制作出富于创意的网页，设计阶段特殊重要。事实上，一个网站从设计到制作，再到发布的整个过程中，大部分的精力和时间花在设计阶段。即使在制作阶段，很多时候也会根据实际需要对原有的设计做一些修改但是假如说是对设计有什么不满的地方那就只可以说道不同。 18 我觉得实训就是对所学学问的一种检验，网页设计所检验的并不只是工具的应用更多的是自己的想法独特的想法，假如停留在

31、那些四四方方的布局毫无新意的页面就失去了该有的意义！ 夏前伟 1402713109 19 通过这次实训，我收获了很多，一方面学习到了许多以前没学过的专业学问与学问的应用，另一方面还提高了自己动手做项目的实力。本次实训，是对我实力的进一步熬炼，也是一种考验。从中获得的诸多收获，也是很宝贵的，是特殊有意义的。 在实训中我学到了许多新的学问。是一个让我把书本上的理论学问运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，如今想来，有些其实并不难，关键在于理解。 在这次实训中还熬炼了我其他方面的实力，提高了我的综合素养。首先，它熬炼了我做项目的实力，提高了独立思索问题、自己动手操作的实力，在工作的过程中