网页设计实训 体会感悟

-精选财经经济类资料- -最新财经经济资料-感谢阅读- 1 网页设计实训体会感悟 一连上了两个星期的网页实训课， 可以说学到很多以前没有学到的东西。 虽然在大一的时候我们的专业出开设了 网页设计课，但感觉这两个星期学到的 远远比以前学一个学期的要多，要丰富。 每一天都有新的内容要学，让人 感觉很兴奋，很高兴，恨不得马上就把 它给学会。通过这次实训使我更熟练掌 握 dreamweaver、 flash 、fireworks 、photoshop 等软件的功能和应用。不 但如此，更增加了同学间的友谊，陪养 了彼此间的团结。 在这期间，每一天老师都会发一 些素材和实训给我们，首先是网页素材 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 2 的准备，在网上查看一些网页背景和背 景颜色搭配，让我了解到网页的颜色不 能多过 3 种色彩。接下来的几天再结合 自己的网页来进行策划，在做首页之前， 先用图纸把网页的结构画出来，内容和 结构都想清楚用 fireworks 把网页设计 出来，再切割图片，把它们导成 html 格式在 dreamweaver 中进行进一步的编 辑。 我们的网站主要是围绕宿舍而展 开的一串活动、人物等，宿舍给我们一 种很温馨、很快乐的感觉，所以我们决 定将这次的网页名叫 funny room。主题 确定好了，那么分工出就明确了，我们 组有三个人，两个人负责找素材，另一 个美术好的就负责网页的页面设计，但 是我们始终不是学美术方面的，所以色 彩方面搭配的不是很好，后来采用了色 彩比较清新自然的绿色来作为首页的主 色调，让人第一眼看上去就有难忘的感 觉。而从第二页开始就采用粉色为主色 调，让人可以感受到我们的主题，因为 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 3 首页和其它的颜色不一样，所以我们就 把首页当作是过渡页，第二页开始才是 网页的内容。为了增加网页的新鲜感和 活泼感，还适当在添加一些透明 flash 和一些网页特效。在这实训的时间里面， 我们分工合作，共同努力，对网页反复 调试和修改，特别是对于 fireworks 软 件不那么熟悉，有很多的实例都要看过 老师的演示才会明白，不过这也恰恰让 我学到更多。虽然中途难不免会有因为 意见的不合而发生一些小小的争吵，但 我觉得不影响我们的网页设计，反而会 因为这些不同的意见而重新学到更多的 知识。 实训总结 经过俩周的实训，我从中收获了 很多。原本以为计算机科学导论的实训 是纯理论的，得知是上机操作还是有一 点兴奋。刚打开实训的要求，发现在实 训期间我们要学的好多。像 word、 excel、photoshop、powerpoint 、f lash、dreamweaver 等软件的应用，有些 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 4 是我从来没有接触过的，有一些是自己 会一点皮毛的。带着一份紧张一份好奇， 我开始展开了对这些软件的探索。按照 老师在实训期间给我们的要求，在做 word 的时候，原本以为很简单的，后 来才发现自己会的只是冰山一角，原来 word 的用处那么多。通过训练，我掌 握了段落的拆分、移动和复制处理以及 段落格式设置，格式、特殊字符的查找 和替换，分栏、首字下沉设置，页眉、 页脚及页码的设置，插入艺术字体、图 片、公式等对象， 图片的旋转和翻转、 组合和对齐。excel 在我的意识里只能 用来编辑数据，做个表格，没想到还有 数据排序和自动筛选、图表的创建和编 辑、分类汇总等功能。photoshop 的功 能是处理图片，在实训的时候自己做的 那个端午节的粽子是通过这个软件自己 绘制出来的，感觉到软件应用的神奇。 ppt 由于自己上学期的学习，因此在实 训期间做的作业也就驾轻就熟的完成了。 最好玩的软件应该就是 flash 了，通过 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 5 几张图片的叠加和处理，就出现很可爱 的动画了。最让我惊讶的软件当然就是 dreamweaver 了，它竟然是用来做自己 的个人网页的，本来觉得自己做网站是 一件很不切实际的事情。经过实训期间 的学习，我也学会了制作自己的个人主 页。 这次的实训让我掌握了办公自动 化以及网页制作软件的使用，也能运用 word、 excel、powerpoint 处理文档，能 运用 dreamweaver、flash 、photoshop 制 作网页了。总之实训的收获颇多。 网站名称：微言微语个人主页 班级：j09301 班，j09302 班 学生姓名： 指导老师：李向 实训时间：2014.12.6 2014.12.22 2014 年下期网页设计课程实训报 告 一、实习目的： 通过教学实习掌握站点制作、站 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 6 点测试与发布技术。会综合利用 fireworks 、 flash 和 dreamweaver 三个 软件进行静态网站的设计。 二、实习内容： 1.用 fireworks 处理图片。对图片 裁剪、钝化、高斯模糊。设置图片的 gif 动画格式，制作标题动画。对文字 应用效果。利用 fireworks 制作导航条 并导出格式为 html。 2.用 flash 制作标题动画。首页中 的动画不超过 20m。制作按钮来超级链 接到其他页面。 3.使用 dreamweaver 布局视图， 设置本地站点。在标准视图和布局视图 模式相互转换。建议使用布局视图，在 标准模式中插入层对象制作层动画，利 用行为面板添加鼠标行为，制作翻转动 画，使用 css 样式统一网页中文字样式， 插入 fireworks 中的 gif 文件及导入 flash 中的 swf 文档，设置文档间的超级 链接。 三、具体要求： -精选财经经济类资料- -最新财经经济资料-感谢阅读- 7 1、利用 dreamweaver 制作一个 静态网站，要求网站有特色，整个网站 的内容和形式要统一，应能够反映一个 简单的主题。可以选择制作个人网站 设计 、 企业网站设计 、 文化网站的 设计 、 娱乐网站设计或者其他自己 认为适合的网站。 2、 作一个主页面，至少 5 个次 页面。 3、 必须用到框架、表格或层排 版技术、flash 技术和图像处理技术，使 网站具有合理的外观和功能。 4、 主页基本要求： 页头 logo，准确无误地标识站点 和企业标志； 网页标题动画，可以制作成 gif 动画或者 flash 动画； 导航条； e-mail 地址，用来接受用户垂询； 联系信息，如普通邮件地址或电 话； -精选财经经济类资料- -最新财经经济资料-感谢阅读- 8 版权信息。 5、制作一个表单页面。 6、某个页面有滚动字幕。 7、为一个页面添加背景音乐。 8、至少添加一种行为效果。 9、整个网站各页面之间保持风 格一致，页面之间要有合理的超级链接。 10、进行站点测试后申请免费空 间并发布到网络。 四、网站设计思路： 本站应该算是一个人主页的小型 网站。关于本站站名的来源：微言微语 个人主页，因为，我觉得这个网站里面 的所有文字都是像一个人在自言自语， 在低声地向某人诉说着什么，没有主题， 没有目的。取这个站名，是做了网站的 大概构思后才取的，觉得，这个名字与 网站的图片、背景音乐还有文字都很相 符。 个人主页，一般都会包括首页， 相册，链接，一些个人喜欢的文字加图 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 9 片，我的个人主页也不例外，包括次首 页，我的作品，文章，相册，关于，链 接，反馈表。 五、网站设计过程： 把所有的素材都整理好，开始布 局。此站大多数用的是“ 三 ”字型的，三 字型是我给它取的名字，因为，最开头 是一张带有导航条的图片，用 firworks 处理过的 html 文件，中间一大片用于 放正文，下面就是版权信息，e-mail 地 址用来接受用户垂询；联系信息，如普 通邮件地址或电话，像被分开的三个部 分，所以我叫它三字型。这种布局方式 看起来比较的整齐，简洁美观。 首页本想做一个动态网页，由于 时间有限所以还没完全成功。只好用了 一张与次页面一样的背景图片做背景， 加上从下向上的滚动字幕，背景图片是 用 firworks 处理过的图片，大片的灰色 墙壁加上颜色艳丽的钮扣图案，首页加 了状态栏逐字出现的效果，加了“加入 收藏”、 “设为首页”等代码。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 10 次页面包括如下些内容：首页、 作品、文章、相册、关于、链接以及反 馈表。这些页面是用模板做的，上面的 图片，导航条以及下面的版权联系方式 是不用改变的，都保持着首页的风格， 背景图一样，字体与样式一样，图片风 格一样。中间是两个可编辑区域。 在所有的页面导航条下面，插入 层对象制作了一个层动画，来回移动的 层，里面存放日期，利用行为面板为此 层添加了鼠标行为，单击此层，会出现 对话框， “欢迎您访问我的个人主页！” ， 做布局大多使用表格布局，使用了少量 的 css 样式，字体，字号，颜色都统一 套用相应的样式。 首页中添加背景音乐，小说音乐 我在那一角落患过伤风 ，一边看慢 慢上移的文字，一边听这轻柔的音乐， 给人一种意境美。其实次页面添加虫 儿飞 ，轻快而活泼。首页禁止右键复 制功能，右键单击没有反应。 次首页，就是进入次页面的第一 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 11 个页面。主题算是与青春有关的三种感 情，三张图片，用 firworks 处理，加上 相应的文字。要用到两个表格，分别放 在两个可编辑区域里面，一个 1*2 的表 格，一个 2*2 的表格，第一个表格放一 张有关于亲情的图片加一小段文字，第 二个表格放一张有关于友情的图片加一 小段文字,还有一张有关于爱情的图片加 一小段文字。作品页面是三个 flash 动 画，第一个是左右键控制的图片移动按 钮，可以单击来链接到主页面，四个图 片经过裁剪、高斯模糊。第二个是光芒 四射，要用到 actionscript 语言，长短不 一的线条加上透明度的改变组成光芒四 射。第三个是鼠标跟随特效。文章页面， 就是简单的文字页面，没有什么特别的。 相册页面，上面是一个用 firworks 处理 后的一组图片，鼠标移到小图片上，下 面做出现相应的大相片，中间有少量文 字，底部是用 flash 做的一组循环滚动 图片，图片跟着鼠标的移动而左右移动。 关于页面，也是简单的文字页面，没什 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 12 么特别的， “个人简历 ”文字链接到 word 文档“个人简历 ”，下面有个信息反馈的 链接，链接到有关的“ 浏览者信息反馈 表”，此信息反馈表用表单做的，用到 单行文本域，多行文本域，单选框，复 选框，按键，此表单可以用邮件方式反 馈信息。链接页面，前面是我的个人主 页 logo，一张用 firworks 做的 logo，并 建立有关链接，中间是一些文字，下面 是世界著名网页的有关网址以及相应链 接。 附录：源代码 状态栏逐字出现的效果代码： var msg = “欢迎来到 微言微语个人主页，请多提 意见。谢谢! “ ; var interval = 120 var spacelen = 120; var space10=“ “; var seq=0; function helpor_net len = msg.length; -精选财经经济类资料- -最新财经经济资料-感谢阅读- 13 window.status = msg.substring; seq+; if seq = 0; window.status = ; window.settimeout;”, interval ); else window.settimeout;”, interval ); helpor_net; 首页收藏代码： onclick=“window.external.addfavorite; 六、实训中遇到的难点及解决办 法： 在设计开始的时候，想的太多， 不知道怎么开头，定哪个主题，背景， 色调，文字，布局都没有头绪，后来， 开始做，而且觉得越做越有头绪了，所 以我觉得，还是不要想的太多，太复杂 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 14 了，不要追求完美，不要做的网页太多， 搞到最后，别人都不知道，你这个网站 的主题 是什么了。 还有就是布局的时候总是不能做 到很美观，后来，我把页面属性改了左 过距为 10，上边距为 10，刚好把背景 图片里面的那些亮丽的钮扣图案显示出 来，改变了表格背景图的灰暗，使网页 的整体看起来更美观了。 在做 css 样式表的时候，做字的 颜色的时候，老是不知道用哪种颜色才 搭配的起这个背景，后来，看到那个背 景的钮扣颜色与灰色配起来很好看就用 吸管取了钮扣的颜色了。 七、实训心得： 在我看来，设计网页，应该先策 划，策划很重要，加上创意，配色很重 要，技术与鉴赏能力是最主要的。建立 站点的时候，各个文件夹取名的时候， 最好用相应的英语，见名知意，如图片 文件夹用 image，网页文件夹用 html。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 15 在所有配色当中，不同的颜色传 达着不同的意义也有不同的象征。如白 色代表着：清洁、天真、洁净、真理、 和平、冷淡、贫乏；灰色让人联想到灰 尘、石头、水泥、白银，象征着中庸、 平凡、温和、谦让，它给人以中立和高 雅的感觉。太多的颜色会给人带来视觉 上的疲劳。所以，在我下载准备素材的 时候，就选择用灰色做背景颜色，灰色 太贫乏，就加上亮色的钮扣起到“中和” 的作用。 通过此次实训,我觉得平面设计的 创意思维、版面设计、色彩配置、图形 创意等方面都有很重要，对于网页制作 来说，我觉得是一个以多学科设计为基 础，受到包括视觉艺术、技术、内容的 多种影响。网页设计的技术不算什么困 难，真正困难的是网页的设计创意，文 字我觉得也很重要，有些人浏览你的网 页不是喜欢上你的艳丽漂亮的图片，也 许是喜欢上你的文字，那种感动人心的， 唯美的文字。文字与图片要搭得上调， -精选财经经济类资料- -最新财经经济资料-感谢阅读- 16 不可能用一张美女图做背景，上面却写 有关于亲情的文章。也就是整体的搭配 问题。 通过此次实训，使我对于网页制 作的三大软件有了进一步的了解，各功 能都能够实现。提高了自己的鉴赏能力， 综合搭配能力，也对以前学过的内容进 行了综合的复习。 通过此次实训，我更了解到，生 活中有许多色彩，搭配颜色的时候，联 想到生活中的东西会做的更漂亮，给人 一种亲切