《《Web设计软件应用实训》期末综合报告-XXX网站的设计与制作》由会员分享，可在线阅读，更多相关《《Web设计软件应用实训》期末综合报告-XXX网站的设计与制作（20页珍藏版）》请在金锄头文库上搜索。
1、Web 设计软件应用实训报告 XXXXXX 网站的设计与制作网站的设计与制作 学 院： 数学与计算机科学学院 专业 / 班级： 数学（1）班 年 级： 2010 学 号： 031001134 姓 名： 指 导 老 师： 2011 年 11 月 19 日 目录 第一章 网站构思 .1 1.1 网站的目标及功能定位1 1.2 网站构思的灵感来源1 .1 第二章 网站内容和结构 .2 2.1 网站的主要内容.2 2.2 网站的结构设计.2 .2 第三章 网站素材分析与制作 .3 3.1 图像的设计与处理3 3.2 网络动画的设计3 3.3 标题文字的设计和处理效果3 第四章 网站制作 .4 4.1
2、网站制作环境4 4.2 网站制作步骤4 4.3 网站效果4 总结 4 参考文献 5 1 第一章第一章 网站构思网站构思 1.1 网站的目标及功能定位网站的目标及功能定位 本网站是一个宣传公益性网站，以服务人民为我们的根本目标。 本网站的主要定位是给已经步入青年的学生，以及未到中年的工作人士。主要是 通过文字，图片，动画，使读者回顾自己的童年，使之感到更加的美好和幸福。同时 让广大人民群众更加关心和关注我们下一青少年的成长和发展，希望政府和相关性人 员能够把更多的服务，措施做好、做全，做到位，让孩子们能够切实受到保护，为孩 子们营造个温暖而温馨的家园! 最后，我们希望通过我们的网站，能唤起大家更
3、多的善良之心,为我们社会筑其一 道善良墙，把我们的社会建设得更加的和谐、更加的美好。 1.2 网站网站构思的灵感来源构思的灵感来源 1.本人处于青少年时期，距离童年不远，所以难免有些童心未泯。应老师要求， 对此题目洽有兴趣。所以选取“童年”为题。 2.开始不懂做，后面在百度上考虑相应网站后，有了自己心中的一个模板。 （具体 考虑较多的是童年网 3.因为时光不可倒流，对于失去的童年美好的时光不免有诸多怀念。平时和同学 们交往，也听同学们常提及同学众多美好事件，遂选择主要是讲述逝去的同年。 4.因为社会要发展，要积极向前，所以我把主页定位孩子美好的东西，选择相应 的暖色调，不要让整个网页充满着悲伤
4、的气氛。 5.上面也述，网站主要是缅怀为主，所以必然在其相应链接网站上放入些怀念性 文字和图片。引起读者的共鸣。 6.更进一步说，孩子是弱势群体，所以我们必须多加保护和照顾。所以另一方面， 我也希望通过自己小小的一点能力，让更多的人关注到孩子，我们的未成年人。 7.当然，建立一个童年网站，可以引发大家的共鸣，勾起大家内心对美好事物的 憧憬和幻想。希望以此能让大家净化心灵，不被世俗功利而玷污。 2 第二章第二章 网站内容和结构网站内容和结构 2.1 网站的主要内容网站的主要内容 主要网站有：童年首页，童年相册，童年回忆和童年想像 1.童年首页 以栏目为主，栏目有：新闻资讯今日推荐，童年视频，家长
5、频道资讯推荐，家长 博客博文推荐，童年社区 | 投票 | 悬赏 | 辩论 | 活动，童年社区主题推荐。以及 相应的 flash 和图片 2.童年相册 以 flash 相册为主，配合上自己原创的一段文字 3.童年回忆 以一篇散文为主（非原创） ，附有相应的背景和效果标题 4.童年想像 以孩子的眼光制作的风车 flash 为主，配合一段原创文字说明，附有相应的背景。 以上网上均设有童年歌曲音乐插件。 2.2 网站的结构设计网站的结构设计 网站分为以一个首页，和三个分页。 首页主要由表格布局，其余三个分页主要由绘制的 AP DIV 布局 首页开头插入一个 FLASH 动画，选择相应的背景图案，接着是
6、导航栏。接着便是 标题栏共 7 个，其间还插入了相应的一些可爱图片，一个声音插件，和一个滚动的 FLASH，最后一栏是插入版权提示。首页末尾还插入了滚动字幕。并且，在进入首页的 时候，还插入了提示语。 相册分页，开头插入一个像胶卷一样的 FLASH，选择相应的背景图案，之后插入 一段对 FLASH 相应说明的文字，起到相互相应的作用。最后在底部插入声音和链接返 回主页。 回忆分页，开头插入一个自制的标题栏目，选择相应的背景图案，接着在下面 插入一段文字，一段从百度找到的关于童年的优美散文。最后在底部插入声音和链接 返回主页。 想像分页，开头插入一个自制的标题文字，选择相应的背景图案，接着在下面
7、 插入一个自制的 FLASH 动画，在动画的旁边插入一段原创的文字说明，最后在文字的 3 底部插入声音和链接返回主页。 第三章第三章 网站素材分析与制作网站素材分析与制作 3.1 图像的设计与处理图像的设计与处理 1.“童年”文件夹中图像的处理 在 PS 中点击【文件】选择【新建】将画布大小调节成，宽 4500PX 高 500PX。点 击【文件】选择【打开】选中相应图片，点击【确定】打开。按【ctrl+A】全选图片， 按【ctrl+C】复制图片，然后回到之前新建的画布下，按【ctrl+V】粘贴图片。拖动 图片到相应的位置。如此反复上述步骤，即可把全部的图片拖入到图层中，然后再调 节相应图片位置
8、，接着使用工具栏中的【裁剪工具】进行图片整体裁剪，把多余的空 白地区除外。双击【图片】 ，便可出现满足的图层大小和图片。单击【文件】 ，选择 【存储为】 ，选择相应的存储位置，将格式选择为【jpeg】 ，单击【保存】 ，整个图片处 理就完成了。 2 “童年相册”文件夹中图像的处理 在 PS 中点击【文件】选择【新建】将画布大小调节成，宽 980PX 高 1500PX。单 击【图层】面板底部的【创建新图层】按钮，新建一个图层 1。选择工具箱中的【矩 形选框】工具，在图像上绘制一个矩形选区。选择【编辑】下的【填充】命令，弹出 【填充】对话框，在【使用】下拉列表中选择【黑色】 ，单击【确定】按钮，填
9、充选区。 选择【矩形选框】工具，在图像中绘制一个正方形选区，将【前景色】设置为白色， 按组合键【Alt+Delect】填充正方形选区。按组合键【ctrl+C】复制，按组合键 【ctrl+V】多次粘贴，选择工具箱中的【移动】工具调整矩形位置。选中【图层】面 板中最上面的图层，按组合键【ctrl+E】向下合并。单击【图层】面板底部的【创建 新图层】按钮，新建以个图层 2，选择工具箱中的【矩形选框】工具，在工作区中绘 制一个矩形选取框。选择【编辑】下【填充】命令，弹出【填充】对话框，在【使用】 下拉列表中选择【白色】 ，单击【确定】按钮，矩形选区填充为白色，按组合键 【ctrl+C】复制，多次粘贴，
10、选择工具箱中的【移动】工具调整矩形位置，按组合键 4 【ctrl+E】向下合并图层。选择【文件】下【打开】命令，弹出【打开】对话框，选 择要打开的图像，单击【打开】按钮，即可打开图像，选择【选择】下【全选】命令， 按组合键【ctrl+C】 ，单击右上角的【关闭】按钮，将该图像关闭，按组合键 【ctrl+V】 ，将其粘贴到图像中。选择【编辑】下【变换】的【缩放】命令，调整图像 与白色矩形大小相同。按【Eenter】确认【缩放】的变化。如此反复，将全部所需要 用到的图像分别调到矩形选框中，并调整好大小。按组合键【ctrl+E】向下合并，选 中【图层 1】选择【滤镜】下【扭曲】的【切变】命令，弹出【
11、切变】对话框，在对 话框中调整切变曲线，单击【确定】按钮，胶片的波浪效果便出现了。接着选择工具 箱中的【文本】 ，在【颜色板】下选择【绿色】 ，分别在正方形框框区域输入相应文字。 最后入上述 1.一样，保存导出图片即可。 3.“主页图片”文件夹中图像的处理 和上述步骤一样新建相应大小的图层，这里和以下不再叙述。选择【文件】下 【打开】命令，弹出【打开】对话框中选择相应图片，单击【打开】 ，选择工具栏下的 【仿制图章工具】 ，按住键【Alt】鼠标单击蓝色天空处，松开按键【Alt】在要修改处 按住鼠标【左键】拖动鼠标，涂抹掉原先图案上的文字，在颜色面板上选择适当的颜 色，单击相应工具栏中的【横排文
12、字工具】 ，选择相应的位置，输入文字。同理单击 【竖排文字工具】 ，选择相应位置输入文字。保存图片即可。 5 修改前 修改后 4.“童年想像的背景”文件中图像的处理 与 3.一样，只不过这回不需要输入文字。不过，在靠近手和翅膀处，需要改选 【画笔直径】更为细小的圆点，需要细心，慢慢一点一点的涂抹。 修改前 修改后 5.“童年相册背景”文件夹中图像的处理 选择【文件】下【打开】命令，在弹出【打开】对话框中选择相应图片，单击 【打开】 ，选择工具栏下【裁剪工具】 ，把最低端的文字舍去，将之上的裁剪下来， 【双 击】图片，将呈现裁剪后的图片，保存图片即可。 6 修改前 修改后 6.“主页背景”文件夹
13、中图像的处理 选择【文件】下【打开】命令，在弹出【打开】对话框中选择相应图片，单击 【打开】 ，选择工具栏下的【魔术棒工具】慢点的选取边裁。选取好后，选择工具栏中 的【移动工具】按组合键【ctrl+C】复制，在新建一个图层中，按组合键【ctrl+V】 粘贴。保存图片即可。 修改前 修改后 3.2 网络动画的设计网络动画的设计 1.“欢迎加入童年 high 吧”的 flash 设计 打开 flash cs4，选择【文件】下【打开】命令，在弹出【打开】对话框中选择 “欢迎加入童年 high 吧”图片，点击【确定】导入图片。在属性面板下，调节画布大 小，宽为 980px,高为 300px。在工具栏中
14、，选择【任意变形工具】调节图片的大小， 使之略小于画布。选择时间轴下的【新建图层】按钮，新建一个图层，并取名为标题， 点击工具栏中的【文本工具】 ，并调节文字颜色，在相应的位置输入文字。在第一帧中 单击【右键】选择【插入关键帧】 ， （2,3,4 均有在第一帧插入关键帧，下面就不在叙 述）选择第 15 帧，击右键，单击【插入关键帧】命令，在第 30 帧一样插入一个关键 帧。第 15 帧和第 30 帧，均做出相应的改变，然后分别在其间击右键，选择【创建传 统补间】 ，与之前一样，再新建两个图层，分别为图层 3 和图层 4.在图层 3 中，选择 工具栏中的【椭圆工具】并选择好【绿色】 ，在图层 3
15、 中画好 4 个椭圆，更改颜色，选 择工具栏中的【文字工具】在 4 个椭圆中分别输入“同校区” ， “同地区” ， “同兴趣” ， 7 “同爱好” ，并在第 30 帧的时候单击右键，选择【插入帧】 。选择图层 4，选择工具栏 中的【矩形工具】按钮，画出长矩形。并选择【任意变形工具】 ，将其先移动到图层左 外侧，在第 30 帧的时候单击【右键】 ，选择【插入关键帧】命令，然后长矩形移动到 图层右侧，使之恰好能同时完全覆盖图层 3 个 4 个椭圆。在补间处单击【右键】 ，选择 【创建补间动画】命令，对着图层 4 点击【右键】 ，选择【遮罩层】命令，整个动画便 做好了。选择【文件】下【另存为】 ，保
16、存到根目录下得 flash 文件夹，选择【文件】 下【导出】中【导出影片】选择相应位置，点击【确定】即可。 2.“童年”的 flash 设计 选择【文件】下【打开】命令，在弹出【打开】对话框中选择“童年”图片，点 击【确定】导入图片。在属性面板下，调节画布大小，宽为 980px 高为 383px。在工 具栏中选择【选择工具】 ，将图片左上端与画布对齐，在第一帧单击【右键】选择【插 入关键帧】 。因为图片比较大，所以在第 50 帧的时候点击【右键】选择【插入关键帧】 命令，拖动图片至相应位置，对着补间单击【右键】 ，选择【创建补间动画】 。每隔 50 帧一个动画补间，直至第 350 帧，到 400 帧，图形不变到时候播放起来就会稳定一段 时间于此。第 450 帧的时候时候只需要将前面对应的 300 帧给复制过来，系
