毕业设计（论文）-施华洛尊爵婚纱影楼网站-论文.doc

武 威 职 业 学 院 现现代代教教育育技技术术 专专业业毕业设计毕业设计 题 目 施华洛尊爵婚纱影楼网站 年 级 10 级电子信息工程系 学 号 姓 名 专 业 现代教育技术 指导老师 完成时间 2012 年 12 月 武威职业学院 10 级 电子信息工程系 1 摘要摘要 Internet 的作用在今天显得越来越重要 网站的数量和规模发展迅猛 在 Internet 的早期 网站只能保存单纯的文本 经过几年的发展 图像 声音 动画 视频开始在 Internet 上流行 网站也发展成为今天我们看到的图文并茂的样子 在 制作网站的过程中 Photoshop Dreamweaver Flash 是必不可少的网页图像处理软件 Photoshop Dreamweaver Flash 等软件的功能及其强大 在图像 图形 动画 文 字 视频等方面都有涉及 良好的运用 Photoshop Dreamweaver Flash 这些软件能 在网站开发及后期发展中起到很重大的作用 对于施华洛婚纱影楼网站而言 在制作过程中使用了 Photoshop Flash Dreamweaver 等软件工具 充分利用各个软件的优点 制作出静 态网站 将各个网页融汇起来 关键词 关键词 Dreamweaver Photoshop Flash div Css 技术 武威职业学院 10 级 电子信息工程系 2 目 录 第 1 章 网站制作分析 1 1 1 施华洛婚纱影楼网站的设计思路 1 1 2 施华洛婚纱影楼网站的主题 1 1 3 施华洛婚纱影楼网站的内容 1 1 4 网页设计中色彩的运用 1 第 2 章 软件工具介绍 3 2 1 DREAMWEAVER软件 3 2 2 PHOTOSHOP 软件 4 2 3 FLASH 软件 6 2 4 DIV CSS技术 7 第 3 章 网站制作过程 10 3 1 网站的页面制作 10 3 2 制作 FLASH动画 13 3 3 对七个页面分别进行页面链接 14 结论 15 致谢 16 参考文献 17 武威职业学院 10 级 电子信息工程系 1 第 1 章 网站制作分析 1 1 施华洛婚纱影楼网站的设计思路 将丰富的意义和多样的形式组织成统一的页面结构 体现网站的内容 通过文 字 动画视频 图形使网站不过于呆板 首先利用 Photoshop 处理所要用到的图像 其次使用 Flash 软件制作动画增加网站的活跃效果 最后在 Dreamwaver 中实现整个 网站的运作 1 2 施华洛婚纱影楼网站的主题 网站主页采用静 动相结合的方式 即静态的主画面和动态的视频相结合 体 现婚纱摄影网站的优雅 浪漫 动态画面给人们直观动感的效果 网站主页本着简 单美观全面的原则 以粉色及白色为背景 漂亮且动感的 flash 视频让你感受到温 馨浪漫的气息 1 3 施华洛婚纱影楼网站的内容 该网站主要拥有 7 个页面 包括 首页 动画及婚纱照展示 作品欣赏 通过点击图片查看更多来展示我们的作品 服务报价 此功能介绍了施华洛婚纱影楼的各个套系的价位 优惠活动 方便及时的了解我们的最新优惠活动 店长推荐 让大家了解本店值得关注的套系系列 在线预订 可以方便的为大家提供提前预订拍摄时间 新闻资讯 通过此功能可以让大家及时了解关于婚礼 婚纱等各方面的信息 每个页面采用不同的方式来实现出简单美观的网站 1 4 网页设计中色彩的运用 色彩是艺术表现的要素之一 在网页设计中 根据和谐 均衡和重点突出的原 则 将不同的色彩进行组合 搭配起来构成美丽的页面 所以在对施华洛婚纱影楼 网站进行设计时采用了淡雅而沉静的颜色 粉色 白色 而不是大红大紫的色彩 武威职业学院 10 级 电子信息工程系 2 粉色代表期待爱情 施华洛婚纱影楼采用粉色调主要寓意着爱情的不断成长 生机 勃勃 武威职业学院 10 级 电子信息工程系 3 第 2 章 软件工具介绍 2 1 Dreamweaver 软件 Dreamweaver 软件由美国著名的网站应用开发软件开发工具生产商 Adobe Macromedia 于 2005 年 6 月推出并正式投入市场以来 已经发展相当成熟 Dreamweaver 是一款简单的中文软件 可以在 Windows2003 Windows2000 Windows9x Windowsxp 中运行 Macromedia Dreamweaver 是建立 Web 站点和应用程序的专业工具 它将可视布局工具 应用程 序开发功能和代码编辑支持组合在一起 其功能强大 使得各个层次的开发人员和 设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序 从对基于 CSS 的设计的领先支持到手工编码功能 Dreamweaver 提供了专业人员在一个集成 高 效的环境中所需的工具 开发人员可以使用 Dreamweaver 及所选择的服务器技术来 创建功能强大的 Internet 应用程序 从而使用户能连接到数据库 Web 服务和旧 式系统 Dreamweaver 是在网页设计与制作领域中用户最多 应用最广 功能最强大的 软件 随着 Dreamweaver 8 的发布 更坚定 Dreamweaver 在该领域的地位 它集网 页设计 网站开发和站点管理功能于一身 具有可视化 支持多平台和跨浏览器的 特性 是目前网站设计 开发 制作的首选工具 1 1 灵活的编写方式 灵活的编写方式 Dreamweaver 具有灵活编写网页的特点 不但将世界一流水平的 设计 和 代码 编辑器合二为一 而且在设计窗口中还精化了源代码 能帮助用户按工作 需要定制自己的用户界面 2 2 可视化编辑界面 可视化编辑界面 Dreamweaver 是一种所见即所得的 HTML 编辑器 可实现页面元素的插入和生成 或视化编辑环境大量减少了代码的编写 同时亦保证了其专业性和兼容性 并且可 以对内部的 HTML 编辑器和任何第三方的 HTML 编辑器进行实时的访问 无论用户习 惯手工输入 HTML 源代码还是使用可视化的编辑界面 Dreamweaver 都能提供便捷的 方式使用户设计网页和管理网站变得更容易 3 3 功能更多的 功能更多的 CSSCSS 支持支持 CSSCSS 可视化设计 可视化设计 CSSCSS 检查工具检查工具 武威职业学院 10 级 电子信息工程系 4 4 4 强大的 强大的 WEBWEB 站点管理功能站点管理功能 5 5 内建的图形编辑引擎 内建的图形编辑引擎 6 6 DreamweaverDreamweaver 的集成特性的集成特性 Dreamweaver 8 继承了 Fireworks Flash 和 Shockwave 的集成特性 可以在这 些 Web 创作工具之间自由地切换 轻松地创建美观实用的网页 7 7 丰富的媒体支持能力 丰富的媒体支持能力 可以方便地加入 Flash ActiveX 以及其他媒体 Dreamweaver 具有强大的多媒 体处理功能 在设计 DHTML 和 CSS 方面表现得极为出色 它利用 JavaScript 和 DHTML 语言代码轻松地实现网页元素的动作和交互操作 8 8 超强的扩展能力 超强的扩展能力 Dreamweaver 还支持第三方插件 任何人都可以根据自己的需要扩展 Dreamweaver 的功能 并且可以发布这些插件 2 2 Photoshop 软件 Photoshop 功能丰富实用 界面简洁 集成化程度高 Photoshop 可分为图像编 辑器 图像合成 校色调色及特效制作部分 图像编辑器时处理图像处理的基础 可以对图像进行各种变换 如放大缩小 旋转 镜像 透视等 也可以进行复制 去除斑点 修补 修饰图像的残损等 这 在婚纱摄影 广告制作 人像处理制作中由着非常大的作用 当前很多影楼都使用 了 Photoshop 设计婚纱照片 通过 Photoshop 的设计能是照片更加完美 平面设计是 PHOTOSHOP 应用最为广泛的领域 无论是我们正在阅读的图书封面 还是大街上看到的招帖 海报 这些具有丰富图像的平面印刷品 基本上都需要 PHOTOSHOP 软件对图像进行处理 1 1 修复照片修复照片 PHOTOSHOP 具有强大的图像修饰功能 利用这些功能 可以快速修复一张破损 的老照片 也可以修复人脸上的斑点等缺陷 2 2 广告摄影广告摄影 广告摄影作为一种对视觉要求非常严格的工作 其最终成品往往要经过 PHOTOSHOP 的修改才能得到满意的效果 武威职业学院 10 级 电子信息工程系 5 3 3 影像创意影像创意 影像创意是 PHOTOSHOP 的特长 通过 PHOTOSHOP 的处理 PHOTOSHOP 可以将原 本风马牛不相及的对象组合在一起 也可以使用 狸猫换太子 的手段使图像发生 面目全非的巨大变化 4 4 艺术文字艺术文字 当文字遇到 PHOTOSHOP 处理 就已经注定不再普通 利用 PHOTOSHOP 可以使文 字发生各种各样的变化 并利用这些艺术化处理后的文字为图像增加效果 5 5 网页制作网页制作 网络的普及是促使更多人需要掌握 PHOTOSHOP 的一个重要原因 因为在制作网 页时 PHOTOSHOP 是必不可少的网页图像处理软件 6 6 建筑效果图后期修饰建筑效果图后期修饰 在制作建筑效果图包括许多三维场景时 人物与配景包括场景的颜色常常需要 在 PHOTOSHOP 中增加并调整 7 7 绘画绘画 由于 PHOTOSHOP 具有良好的绘画与调色功能 许多插画设计制作者往往使用铅 笔绘制草稿 然后用 PHOTOSHOP 填色的方法来绘制插画 除此之外 近些年来非常 流行的像素画也多为设计师使用 PHOTOSHOP 创作的作品 8 8 绘制或处理三维帖图绘制或处理三维帖图 在三维软件中 如果能够制作出精良的模型 而无法为模型应用逼真的帖图 也无法得到较好的渲染效果 实际上在制作材质时 除了要依靠软件本身具有材质 功能外 利用 PHOTOSHOP 可以制作在三维软件中无法得到的合适的材质也非常重要 9 9 婚纱照片设计婚纱照片设计 当前越来越多的婚纱影楼开始使用数码相机 这也使得婚纱照片设计的处理成 为一个新兴的行业 10 10 视觉创意视觉创意 视觉创意与设计是设计艺术的一个分支 此类设计通常没有非常明显的商业目 的 但由于他为广大设计爱好者提供了广阔的设计空间 因此越来越多的设计爱好 者开始了学习 PHOTOSHOP 并进行具有个人特色与风格的视觉创意 武威职业学院 10 级 电子信息工程系 6 11 11 图标制作图标制作 虽然使用 PHOTOSHOP 制作图标在感觉上有些大材小用 但使用此软件制作的图 标的确非常精美 12 12 界面设计界面设计 界面设计是一个新兴的领域 已经受到越来越多的软件企业及开发者的重视 虽然暂时还未成为一种全新的职业 但相信不久一定会出现专业的界面设计师职业 在当前还没有用于做界面设计的专业软件 因此绝大多数设计者使用的都 PHOTOSHOP 上述列出了 PHOTOSHOP 应用的 12 大领域 但实际上其应用不止上述这 些 例如 目前的影视后期制作及二维动画制作 PHOTOSHOP 也有所应用的 2 3 Flash 软件 Flash 是一种交互式矢量多媒体技术 他的前身是 Futureplash 早期网上流行 的矢量动画插件 后来由于 Macromedia 公司收购了 Future Splash 以后便将其改名 为 Flash2 到现在最新的 flash8 现在网上已经有成千上万个 Flash 站点 可以 说 Flash 已经渐渐成为交互式矢量的标准 未来网页的一大主流 下面介绍 Flash3 版本的特点 Flash3 的功能特点 总结起来有如下特点 灵巧的绘图工具 Flash 本身具有极其灵巧的图形绘制功能 并产生翻转 拉伸 擦除 歪斜等效果 还可以将图形打碎分成许多单一的元素进行编辑 并改 变其颜色亮度 由于 Flash 提供具有保真技术的绘图工具 使图形边缘在经过一系 列加工后仍会保持平滑 向量透明效果应用 Flash3 可以创建透明的图形 并可以任意改变层次间透 明的不同效果 如透明度 倾斜度及透明的颜色等属性 具有动画效果的按钮和菜单 Flash 采用精灵动画的方式 在 Flash3 中可以 随意创建按钮 多级弹出式菜单 复选框 以及复杂的交互式字谜游戏 物体的变形和形状的渐变 在 Flash3 中产生物体的变形和形状的渐变非常容 易 其发生完全由 Flash 自动生成 无须人为地在两个对象间插入关键帧 增强对图像的支持 Flash3 不但可以对导入的图像 jpg gif 产生翻转 拉伸 擦除 歪斜 改变颜色亮度等效果 还能利用新的套索工具或魔术棒在图像 武威职业学院 10 级 电子信息工程系 7 中选择颜色相同的区域并创建遮罩 将图像打碎分成许多单一的元素进行编辑 设 置图像的属性 如产生平滑效果和质量损失压缩等 声音插入 Flash3 支持同步 WAV Windows 和 mp3 格式的声音文件和声音的 连接 你可以用同一个主声道中的一部分来产生丰富的声音效果 而无须改变文件 量的大小 自定义字体 Flash 可以处理自定义的字体及其颜色 大小 字间距 行间 距 缩进等多种格式 在 Flash 创建的网页中 可以加入眼花缭乱的标题和动态的 文本 而数据量非常小 比位图的下载速度还快 当然为了防止客户端字体短缺 你也可以将特殊字体转换为位图图形 模拟传输 Flash3 提供了一幅设置动画播放方式的图表 你可以在此设置你 的目标 Modem 速度 如 28 8kb s 然后进行模拟传输 检验其播放是否流畅 在参 照图表中找出发生间断的位置 并进行优化 最终确保动画在客户端播放流畅 独立性 Flash3 可以将制作的影片生成独立的可执行文件 EXE 文件 在不 具备 Flash 播放器的平台上 仍可运行该影片 因此 除制作网页外还可以将其应 用于商业演示及电子贺卡等 界面亲切 Flash3 增加了 Inspector 窗口 手柄 加速锁等新功能 比以往 更加易于操作 2 4 Div css 技术 CSS 是 Cascading style Sheets 的简称 中文译作 层叠样式表单 我把它 叫作 层叠样式表 实际上它是一组样式 你可能对 CSS 这个名词比较陌生 实 际上你用 Internet Explorer 上网时 几乎随时都在与 CSS 打交道 在网上没有使 用过 CSS 的网页可能不好找 不管你用什么工具软件制作网页 都有在有意无意地 使用 CSS 用好 CSS 能使你的网页更加简炼 为什么同样内容的网页 有的人做出 来有几十 KB 而高手做出来只有十几 KB CSS 在其中的作用是不言而喻的 我把我 在使用 CSS 中的一些小经验 供大家参考 1 CSS 在网页制作中一般有三种方式的用法 那么具体在使用时该采用哪种用 法 武威职业学院 10 级 电子信息工程系 8 当有多个网页要用到的 CSS 采用外连 CSS 文件的方式 这样网页的代码大大 减少 修改起来非常方便 只在单个网页中使用的 CSS 采用文档头部方式 只有 在一个网页一 两个地方才用到的 CSS 采用行内插入方式 2 CSS 的三种用法在一个网页中要以混用吗 三种用法可以混用 且不会造成混乱 这就是它为什么称之为 层叠样式表 的原因 浏览器在显示网页时是这样处理的 先检查有没有行内插入式 CSS 有就 执行了 针对本句的其它 CSS 就不去管它了 其次检查头部方式的 CSS 有就执行 了 在前两者都没有的情况下再检查外连文件方式的 CSS 因此可看出 三种 CSS 的执行优先级是 行内插入式 头部方式 外连文件方式 3 在 Dreamweaver8 中如何使用外部文件 CSS 在 Dreamweaver8 中使用外连文件式 CSS 并没有特殊要求 同样是用记事本创建 一个 css 文件 在网页的与之间加上一句这样的代码 就行了 4 如何用 Dreamweaver8 快速创建 CSS 外连式文件 对于一个初接触 CSS 的网页设计人员来讲 要用记事之类的编辑器 去创建一 个 CSS 外连式文件是相当困难的 由于 Dreamweaver8 对 CSS 支持的很好 用它来帮 助就轻松多了 具体可以这样操作 1 在 Dreamweaver8 的编辑窗中调出 CSS 面板 一个一个地定义 边定义边试 用 效果不满意 立即修改 2 全部定义好后 再用记事本创建一个空的 CSS 外连式文件 把在与 之间的那段定义好的 CSS 复制到 CSS 文件中去 就大功告成了 整个过程就 是点鼠标 方便吧 5 在文档头部方式和外连文件方式的 CSS 中都有 是干什 么的 作用是为了不引起低版本浏览器的错误 如果某个执行此页面的浏览器不支持 CSS 它将忽略其中的内容 虽然现在使用不支持 CSS 浏览器的人已很少了 由于互 联网上几乎什么可能都会发生 所以还是留着为妙 6 如何给一部分文字加背景色 武威职业学院 10 级 电子信息工程系 9 给文字加上不同颜色 在 Dreamweaver8 中只要在属性面板上选取文字的颜色就 行了 非常方便 7 如何给部分文字或图片组加背景图像 与加背景色操作类似 在背景图像中选择加载图象就是了 武威职业学院 10 级 电子信息工程系 10 第 3 章 网站制作过程 3 1 网站的页面制作 1 index html 的制作 首先插入 1 行 1 列表格 插入头部图像 调整其位 置 其次插入 1 行 7 列表格 输入导航文本 并调整它们之间的位置 调整表格背 景色与行背景色 再次插入 1 行 3 列表格 调整所占比例 第一列占 1 4 第二列 占 1 10 第三列为剩下的部分 在第一列插入 14 行 2 列表格 输入所需要的文字 第二列空白 第三列插入所要用到的图像 视频 文字等 最后插入 1 行 1 列表格 输入文字 效果如图 3 1 所示 图 3 1 index html 效果图 2 zpxs html 的制作 把 index html 复制粘贴应用到 zpxs 中 因为它们的 头部与左侧是相同的 主要把第三列的内容重新制作就好了 插入 6 行 3 列表格 打开图片库 插入图片 效果如图 3 2 所示 武威职业学院 10 级 电子信息工程系 11 图 3 2 zpxs html 效果图 3 fwbj html 的制作 把 index html 复制粘贴应用到 fwbj html 中 修改 第三列内容 效果如图 3 3 所示 图 3 3 fwbj html 效果图 4 yhhd html 的制作 把 index html 复制粘贴应用到 yhhd html 中 保留 头部与页脚 中间部分修改 输入文字素材及相关图片展示 效果如图 3 4 所示 武威职业学院 10 级 电子信息工程系 12 图 3 4 yhhd html 效果图 5 dztj html 的制作 把 index html 复制粘贴应用到 dztj html 中 保留 头部与页脚 中间部分修改 输入文字素材及相关图片展示 效果如图 3 5 所示 图 3 5 dztj html 效果图 6 zxyd html 的制作 把 index html 复制粘贴应用到 zxyd html 中 修改 第三列内容 步骤相同 效果如图 3 6 所示 武威职业学院 10 级 电子信息工程系 13 图 3 6 zxyd html 效果图 7 xwzx html 的制作 把 index html 复制粘贴应用到 xwzx html 中 修改 第三列内容 步骤相同 效果如图 3 7 所示 图 3 7 xwzx html 效果图 3 2 制作 Flash 动画 1 搜集素材婚纱照片 并分类 2 打开 Flash 设置文档大小和舞台背景 新建图层 1 在图层 1 上导入一 张婚纱照图片 在合适的位置按 F6 加入关键帧 右击补间动画 在第一个关键帧处 调整图片的透明度为 10 在第二处关键帧的位置设置不透明度为 100 实现图片 武威职业学院 10 级 电子信息工程系 14 有透明到不透明的渐变 3 以此类推 制作出几张同样的渐变图片 4 测试影片 发现影片中的不足之处 进行调整修改 3 3 对七个页面分别进行页面链接 1 在 Dreamwaver 中打开 index 网页 在需要链接地方分别进行连接 同理 的方法将 7 个页面分别进行链接 在链接时 一定不能漏掉链接 2 在代码中按 Ctrl a 选中整个页面 在设计中将页面居中 每个页面依此 类推 将页面居中 据需要制作相关的页面 武威职业学院 10 级 电子信息工程系 15 结论 经过近两月的努力 施华洛婚纱影楼网站设计终于完成 在整个设计过程中 出现过很多的难题 但都在