计算机多媒体技术(影视后期)毕业设计 蛋糕之家LAZY主题站
软 件 与 食 品 工 程 系计 算 机 多 媒 体 技 术 专 业毕 业 论 文 设 计 说 明 书题 目 : 蛋 糕 之 家 LAZY 主 题 站 专 业 方 向 : 12 计 算 机 多 媒 体 技 术 ( 影 视 后 期 ) 姓 名 :学 号 : 指 导 教 师 :师范高等专科学校毕业设计(论文)2目录一、作品主题 1二、基本构思 1三、素材收集整理 1四、制 作 流 程 及 应 用 的 技 术 .4五 、 使 用 软 件 .12六 、 自 己 操 作 中 所 遇 到 的 问 题 , 最 后 是 否 解 决 13师范高等专科学校毕业设计(论文)3一 、 作 品 主 题 :蛋 糕 之 家 LAZY 主 题 站二 、 基 本 构 思 :首先有个大概的构思,以蛋糕为主题,通过简洁、大方的页面,向浏览者提供图文、视频等关于蛋糕的内容,让浏览者在了解所需内容的同时,也有良好的体验感。其次通过浏览其他网站,学习模仿,取其精华去其糟粕。三 、 素 材 收 集 整 理 :1.图 片 ( 百 度 图 片 下 载 ) :2.动 画 ( 下 载 +PS 制 作 ) :四 、 制 作 流 程 及 应 用 的 技 术 :师范高等专科学校毕业设计(论文)41.首 页 的 制 作 :( 1) 导 航 的 制 作 , 如 图 1 所 示 :图 1此 部 分 应 用 的 技 术 : 鼠 标 移 到 导 航 上 , 字 体 会 变 小 , 主 要 运 用 的 代 码 如 下 :ul#nav li a:hoverfont-size:18px; 二 级 导 航 的 制 作 。 二 级 导 航 的 制 作 主 要 运 用 了 display 的 none( 此 元 素 不会 被 显 示 ) 属 性 , 当 鼠 标 移 动 到 此 链 接 上 才 会 被 显 示 。( 2) 轮 播 、 设 为 首 页 、 收 藏 本 站 、 显 示 系 统 时 间 的 制 作 。 由 于 知 识 有 限 , 而 且制 作 轮 播 等 要 自 己 写 JS 代 码 固 从 网 上 下 载 。 为 了 丰 富 页 面 内 容 , 下 面 还 有 一 些网 上 下 载 的 效 果 。 如 图 2、 图 3 所 示 :图 2图 3师范高等专科学校毕业设计(论文)5( 3) 首 页 主 要 内 容 的 制 作 。 如 图 4 所 示 :图 4此 部 分 应 用 的 技 术 : 首 先 从 网 上 下 载 如 上 的 图 片 , 然 后 写 上 “欢 迎 来 到 LAZY 蛋 糕 房 ”的 字 样 ,对 这 些 字 加 上 斜 面 浮 雕 和 投 影 效 果 。 至 于 底 下 的 波 浪 是 用 圆 形 工 具 绘 制 而 成 。 对 于 最 右 边 的 div 里 面 包 含 的 字 用 了 类 you1 对 部 分 字 样 加 了 链 接 代 码 如下 :.you1 width:250px;float:right;margin-right:20px;font-size:18px;line-height:35px;color:#FFF;( 3) 首 页 主 要 内 容 的 制 作 。 如 图 5 所 示 :图 5此 部 分 应 用 的 技 术 :师范高等专科学校毕业设计(论文)6 最 上 角 的 花 样 用 的 是 ps 抠 图 , 然 后 保 存 为 png 格 式 。 图 片 中 的 10 个 蛋 糕 按 照 顺 序 排 开 , 做 好 一 个 div 作 为 模 板 , 其 余 的 进 行 复制 。 所 用 到 的 代 码 如 下 :.div1 width:160px;float:left;color:#F60;font-size:16px;border:1px #FFF solid;margin-right:5px;background-color: #FCC; 对 于 每 张 图 片 的 下 方 都 有 不 同 颜 色 的 字 样 , 是 事 先 设 置 了 不 同 颜 色 模 式 的 类 ,然 后 加 以 运 用 。( 4) 首 页 主 要 内 容 的 制 作 。 如 图 6 所 示 :图 6此 部 分 应 用 的 技 术 : 用 ps 里 的 “窗 口 时 间 轴 ”制 作 , 用 的 是 隐 藏 图 层 并 且 设 置 成 永 远 播 放 模式 , 背 景 使 用 牛 奶 和 草 莓 合 成 。 最 后 保 存 成 gif 格 式 。 在 图 6 之 上 还 运 用 了 AP div 加 入 了 一 些 事 先 下 载 好 的 透 明 动 画 。( 5) 首 页 主 要 内 容 的 制 作 。 如 图 7 所 示 :师范高等专科学校毕业设计(论文)7图 7此 部 分 应 用 的 技 术 : 最 左 边 用 到 的 效 果 是 鼠 标 移 动 有 下 滑 线 代 买 如 下 :a color:#000; text-decoration:none;a:hovercolor:#933;text-decoration:underline; 图 7 右 边 的 图 片 用 到 了 “行 为 ”里 面 的 “晃 动 ”, 增 加 了 浏 览 的 趣 味 性 。( 6) 首 页 主 要 内 容 的 制 作 。 如 图 8 所 示 :图 8此 部 分 应 用 的 技 术 : 这 部 分 主 要 给 红 色 模 拟 按 钮 做 了 个 链 接 代 码 如 下 :.btn color:#fff;padding:8px 16px;background:#db3222;师范高等专科学校毕业设计(论文)8.btn:hover background:#2e2e2e; 图 8 底 部 主 要 是 版 权 信 息 , 其 版 权 符 号 是 在 “插 入 HTML特 殊 字 符 ”。2.子 页 面 1 的 制 作 :( 1) 蛋 糕 教 学 的 制 作 。 如 图 9 所 示 :图 9此 部 分 应 用 的 技 术 : 此 部 分 主 要 是 文 字 信 息 的 展 示 , 主 要 介 绍 的 是 蛋 糕 的 做 法 步 骤 等 。 右 边 是 老师 的 教 学 视 频 , 左 边 主 要 运 用 的 是 类 zuo4 使 其 向 左 浮 动 代 码 如 下 :.zuo4width:280px;float:left;margin:5px 5px 0 0px;padding:0 10px 7px 40px;background:#fff;border-radius:18px; 图 9 的 整 体 框 架 运 用 类 content 对 其 框 架 进 行 了 圆 角 处 理 , 这 样 看 起 来 不 至于 太 呆 板 。 用 了 border-radius 这 一 属 性 。师范高等专科学校毕业设计(论文)93.子 页 面 2 的 制 作 :( 1) 知 识 技 巧 的 制 作 。 如 图 10 所 示 :图 10此部分应用的技术: 图 10 与 图 9 相 比 起 来 区 别 可 能 是 在 图 10 分 成 了 2 个 板 块 。 图 10 最 主 要的 是 介 绍 一 些 蛋 糕 制 作 的 必 要 技 巧 以 及 注 意 事 项 。 其 中 分 成 2 个 板 块 是 改动 了 一 下 content 里 面 的 内 容 。 用 到 的 代 码 如 下 :#content1 background:url(/images/bg.gif);width:960px;margin:0 auto;padding:0; 最 左 边 的 圆 圈 1 用 到 的 代 码 如 下 :.zuo2float:left;width:54px;background:#000;border-radius:26px;font-size:45px;line-height:48px;color:#fff;师范高等专科学校毕业设计(论文)10text-align:center;padding:1px 0 5px;margin:0 12px 18px 0; 4.子 页 面 3 的 制 作 :( 1) 精 品 展 示 的 制 作 。 如 图 11 所 示 :图 11此部分应用的技术: 这 一 部 分 加 入 本 网 站 的 宣 传 标 语 “健 康 源 自 天 然 ”融 于 背 景 。 右 边 的 文 字 主 要 是 运 用 了 向 右 浮 动 代 码 如 下 :.main2height:157px;width:480px;float:right;background-color:#fdfcfb;border-radius:18px;( 2) 精 品 展 示 的 制 作 。 如 图 12 所 示 :师范高等专科学校毕业设计(论文)11图 12此部分应用的技术: 图 12 上 半 部 分 主 要 运 用 了 图 片 滚 动 的 效 果 代 码 如 下 : 底 部 的 动 态 效 果 是 源 于 网 上 下 载 , 为 了 增 加 页 面 的 生 动 性 。5、 子 页 面 4 的 制 作 :( 1) 关 于 我 们 的 制 作 。 如 图 13 所 示 :图 13师范高等专科学校毕业设计(论文)12此部分应用的技术: 这 主 要 介 绍 LAZY 完 善 的 体 制 , 免 费 实 习 , 迅 速 开 点 、 就 业 。 上 一 图 片 顶 部 主要 运 用 到 border-radius 这 一 属 性 , 然 后 加 入 水 平 分 割 线 。5、子页面 5 的制作:(1)联系我们的制作。 如图 14 所示:图 14此部分应用的技术: 这一部分主要是表单的运用,都是运用了 DW 软件里的表单直接插入的。主要用到表单里的“文本字段”和“文本区域”,然后对其设置。 代码如下:#textfield background: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:30px;#textareabackground: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:190px;五 、 使 用 软 件 :师范高等专科学校毕业设计(论文)13( 1) Dreamweaver:用 于 添 加 整 个 网 页 的 代 码 ;( 2) Adobe Photoshop CS6:用 于 处 理 整 个 网 页 所 用 到 的 图 片 ;六 、 自 己 操 作 中 所 遇 到 的 问 题 , 最 后 是 否 解 决1.由 于 不 怎 么 制 作 网 站 所 以 在 很 多 方 面 都 很 欠 缺 , 所 以 在 实 际 操 作 的 过 程 中 会遇 到 很 多 困 难 。 大 多 数 上 网 百 度 搜 索 都 得 到 了 解 决 方 法 , 比 如 :( 1) 首 先 就 是 寻 找 素 材 , 由 于 欠 缺 设 计 水 平 所 以 在 总 体 的 把 握 上 有 待 提 升 。 怎么 把 搜 集 来 的 素 材 融 合 为 一 体 比 较 困 难 。( 2) 好 多 效 果 都 是 要 会 写 JS 语 言 才 能 实 现 , 所 以 从 网 上 下 载 了 不 少 效 果 。 但同 时 修 改 也 是 比 较 困 难 的 , 要 不 断 地 修 改 参 数 , 看 是 否 是 你 想 要 的 效 果 , 直 到最 后 达 到 效 果 才 能 停 止 修 改 。(3)设置 DIV 框架到底有多大的时候,你估计框架的大小与你实际需要的不符合,需要不断修改。(4)基本代码不熟练,在制作的时候需要百度或者参考书本,降低了制作的速度。(5)在制作初稿的时候水平相当的差,一时找不到原因。相比较之下还是需要先看别人的制作,吸取经验,然后才会有自己的想法。只有看的多了,才会形成基本的框架。(6)在整体的统一性方面的把握,还有待加强。(7)有一些涉及到浮动,然后清除浮动的方面就出现一些问题。比如说该对其的时候不能对其等,没有得到解决。软 件 与 食 品 工 程 系计 算 机 多 媒 体 技 术 专 业毕 业 论 文 设 计 说 明 书题 目 : 蛋 糕 之 家 LAZY 主 题 站 专 业 方 向 : 12 计 算 机 多 媒 体 技 术 ( 影 视 后 期 ) 姓 名 :学 号 : 指 导 教 师 :师范高等专科学校毕业设计(论文)2目录一、作品主题 1二、基本构思 1三、素材收集整理 1四、制 作 流 程 及 应 用 的 技 术 .4五 、 使 用 软 件 .12六 、 自 己 操 作 中 所 遇 到 的 问 题 , 最 后 是 否 解 决 13师范高等专科学校毕业设计(论文)3一 、 作 品 主 题 :蛋 糕 之 家 LAZY 主 题 站二 、 基 本 构 思 :首先有个大概的构思,以蛋糕为主题,通过简洁、大方的页面,向浏览者提供图文、视频等关于蛋糕的内容,让浏览者在了解所需内容的同时,也有良好的体验感。其次通过浏览其他网站,学习模仿,取其精华去其糟粕。三 、 素 材 收 集 整 理 :1.图 片 ( 百 度 图 片 下 载 ) :2.动 画 ( 下 载 +PS 制 作 ) :四 、 制 作 流 程 及 应 用 的 技 术 :师范高等专科学校毕业设计(论文)41.首 页 的 制 作 :( 1) 导 航 的 制 作 , 如 图 1 所 示 :图 1此 部 分 应 用 的 技 术 : 鼠 标 移 到 导 航 上 , 字 体 会 变 小 , 主 要 运 用 的 代 码 如 下 :ul#nav li a:hoverfont-size:18px; 二 级 导 航 的 制 作 。 二 级 导 航 的 制 作 主 要 运 用 了 display 的 none( 此 元 素 不会 被 显 示 ) 属 性 , 当 鼠 标 移 动 到 此 链 接 上 才 会 被 显 示 。( 2) 轮 播 、 设 为 首 页 、 收 藏 本 站 、 显 示 系 统 时 间 的 制 作 。 由 于 知 识 有 限 , 而 且制 作 轮 播 等 要 自 己 写 JS 代 码 固 从 网 上 下 载 。 为 了 丰 富 页 面 内 容 , 下 面 还 有 一 些网 上 下 载 的 效 果 。 如 图 2、 图 3 所 示 :图 2图 3师范高等专科学校毕业设计(论文)5( 3) 首 页 主 要 内 容 的 制 作 。 如 图 4 所 示 :图 4此 部 分 应 用 的 技 术 : 首 先 从 网 上 下 载 如 上 的 图 片 , 然 后 写 上 “欢 迎 来 到 LAZY 蛋 糕 房 ”的 字 样 ,对 这 些 字 加 上 斜 面 浮 雕 和 投 影 效 果 。 至 于 底 下 的 波 浪 是 用 圆 形 工 具 绘 制 而 成 。 对 于 最 右 边 的 div 里 面 包 含 的 字 用 了 类 you1 对 部 分 字 样 加 了 链 接 代 码 如下 :.you1 width:250px;float:right;margin-right:20px;font-size:18px;line-height:35px;color:#FFF;( 3) 首 页 主 要 内 容 的 制 作 。 如 图 5 所 示 :图 5此 部 分 应 用 的 技 术 :师范高等专科学校毕业设计(论文)6 最 上 角 的 花 样 用 的 是 ps 抠 图 , 然 后 保 存 为 png 格 式 。 图 片 中 的 10 个 蛋 糕 按 照 顺 序 排 开 , 做 好 一 个 div 作 为 模 板 , 其 余 的 进 行 复制 。 所 用 到 的 代 码 如 下 :.div1 width:160px;float:left;color:#F60;font-size:16px;border:1px #FFF solid;margin-right:5px;background-color: #FCC; 对 于 每 张 图 片 的 下 方 都 有 不 同 颜 色 的 字 样 , 是 事 先 设 置 了 不 同 颜 色 模 式 的 类 ,然 后 加 以 运 用 。( 4) 首 页 主 要 内 容 的 制 作 。 如 图 6 所 示 :图 6此 部 分 应 用 的 技 术 : 用 ps 里 的 “窗 口 时 间 轴 ”制 作 , 用 的 是 隐 藏 图 层 并 且 设 置 成 永 远 播 放 模式 , 背 景 使 用 牛 奶 和 草 莓 合 成 。 最 后 保 存 成 gif 格 式 。 在 图 6 之 上 还 运 用 了 AP div 加 入 了 一 些 事 先 下 载 好 的 透 明 动 画 。( 5) 首 页 主 要 内 容 的 制 作 。 如 图 7 所 示 :师范高等专科学校毕业设计(论文)7图 7此 部 分 应 用 的 技 术 : 最 左 边 用 到 的 效 果 是 鼠 标 移 动 有 下 滑 线 代 买 如 下 :a color:#000; text-decoration:none;a:hovercolor:#933;text-decoration:underline; 图 7 右 边 的 图 片 用 到 了 “行 为 ”里 面 的 “晃 动 ”, 增 加 了 浏 览 的 趣 味 性 。( 6) 首 页 主 要 内 容 的 制 作 。 如 图 8 所 示 :图 8此 部 分 应 用 的 技 术 : 这 部 分 主 要 给 红 色 模 拟 按 钮 做 了 个 链 接 代 码 如 下 :.btn color:#fff;padding:8px 16px;background:#db3222;师范高等专科学校毕业设计(论文)8.btn:hover background:#2e2e2e; 图 8 底 部 主 要 是 版 权 信 息 , 其 版 权 符 号 是 在 “插 入 HTML特 殊 字 符 ”。2.子 页 面 1 的 制 作 :( 1) 蛋 糕 教 学 的 制 作 。 如 图 9 所 示 :图 9此 部 分 应 用 的 技 术 : 此 部 分 主 要 是 文 字 信 息 的 展 示 , 主 要 介 绍 的 是 蛋 糕 的 做 法 步 骤 等 。 右 边 是 老师 的 教 学 视 频 , 左 边 主 要 运 用 的 是 类 zuo4 使 其 向 左 浮 动 代 码 如 下 :.zuo4width:280px;float:left;margin:5px 5px 0 0px;padding:0 10px 7px 40px;background:#fff;border-radius:18px; 图 9 的 整 体 框 架 运 用 类 content 对 其 框 架 进 行 了 圆 角 处 理 , 这 样 看 起 来 不 至于 太 呆 板 。 用 了 border-radius 这 一 属 性 。师范高等专科学校毕业设计(论文)93.子 页 面 2 的 制 作 :( 1) 知 识 技 巧 的 制 作 。 如 图 10 所 示 :图 10此部分应用的技术: 图 10 与 图 9 相 比 起 来 区 别 可 能 是 在 图 10 分 成 了 2 个 板 块 。 图 10 最 主 要的 是 介 绍 一 些 蛋 糕 制 作 的 必 要 技 巧 以 及 注 意 事 项 。 其 中 分 成 2 个 板 块 是 改动 了 一 下 content 里 面 的 内 容 。 用 到 的 代 码 如 下 :#content1 background:url(/images/bg.gif);width:960px;margin:0 auto;padding:0; 最 左 边 的 圆 圈 1 用 到 的 代 码 如 下 :.zuo2float:left;width:54px;background:#000;border-radius:26px;font-size:45px;line-height:48px;color:#fff;师范高等专科学校毕业设计(论文)10text-align:center;padding:1px 0 5px;margin:0 12px 18px 0; 4.子 页 面 3 的 制 作 :( 1) 精 品 展 示 的 制 作 。 如 图 11 所 示 :图 11此部分应用的技术: 这 一 部 分 加 入 本 网 站 的 宣 传 标 语 “健 康 源 自 天 然 ”融 于 背 景 。 右 边 的 文 字 主 要 是 运 用 了 向 右 浮 动 代 码 如 下 :.main2height:157px;width:480px;float:right;background-color:#fdfcfb;border-radius:18px;( 2) 精 品 展 示 的 制 作 。 如 图 12 所 示 :师范高等专科学校毕业设计(论文)11图 12此部分应用的技术: 图 12 上 半 部 分 主 要 运 用 了 图 片 滚 动 的 效 果 代 码 如 下 : 底 部 的 动 态 效 果 是 源 于 网 上 下 载 , 为 了 增 加 页 面 的 生 动 性 。5、 子 页 面 4 的 制 作 :( 1) 关 于 我 们 的 制 作 。 如 图 13 所 示 :图 13师范高等专科学校毕业设计(论文)12此部分应用的技术: 这 主 要 介 绍 LAZY 完 善 的 体 制 , 免 费 实 习 , 迅 速 开 点 、 就 业 。 上 一 图 片 顶 部 主要 运 用 到 border-radius 这 一 属 性 , 然 后 加 入 水 平 分 割 线 。5、子页面 5 的制作:(1)联系我们的制作。 如图 14 所示:图 14此部分应用的技术: 这一部分主要是表单的运用,都是运用了 DW 软件里的表单直接插入的。主要用到表单里的“文本字段”和“文本区域”,然后对其设置。 代码如下:#textfield background: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:30px;#textareabackground: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:190px;五 、 使 用 软 件 :师范高等专科学校毕业设计(论文)13( 1) Dreamweaver:用 于 添 加 整 个 网 页 的 代 码 ;( 2) Adobe Photoshop CS6:用 于 处 理 整 个 网 页 所 用 到 的 图 片 ;六 、 自 己 操 作 中 所 遇 到 的 问 题 , 最 后 是 否 解 决1.由 于 不 怎 么 制 作 网 站 所 以 在 很 多 方 面 都 很 欠 缺 , 所 以 在 实 际 操 作 的 过 程 中 会遇 到 很 多 困 难 。 大 多 数 上 网 百 度 搜 索 都 得 到 了 解 决 方 法 , 比 如 :( 1) 首 先 就 是 寻 找 素 材 , 由 于 欠 缺 设 计 水 平 所 以 在 总 体 的 把 握 上 有 待 提 升 。 怎么 把 搜 集 来 的 素 材 融 合 为 一 体 比 较 困 难 。( 2) 好 多 效 果 都 是 要 会 写 JS 语 言 才 能 实 现 , 所 以 从 网 上 下 载 了 不 少 效 果 。 但同 时 修 改 也 是 比 较 困 难 的 , 要 不 断 地 修 改 参 数 , 看 是 否 是 你 想 要 的 效 果 , 直 到最 后 达 到 效 果 才 能 停 止 修 改 。(3)设置 DIV 框架到底有多大的时候,你估计框架的大小与你实际需要的不符合,需要不断修改。(4)基本代码不熟练,在制作的时候需要百度或者参考书本,降低了制作的速度。(5)在制作初稿的时候水平相当的差,一时找不到原因。相比较之下还是需要先看别人的制作,吸取经验,然后才会有自己的想法。只有看的多了,才会形成基本的框架。(6)在整体的统一性方面的把握,还有待加强。(7)有一些涉及到浮动,然后清除浮动的方面就出现一些问题。比如说该对其的时候不能对其等,没有得到解决。
收藏
编号:533232
类型:共享资源
大小:12.53MB
格式:ZIP
上传时间:2019-04-01
20
积分
- 关 键 词:
-
计算机多媒体技术(影视后期)毕业设计
蛋糕之家LAZY主题站
计算机
多媒体技术
影视
后期
毕业设计
蛋糕
lazy
主题
- 资源描述:
-
展开阅读全文
- 温馨提示:
1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2: 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3.本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
装配图网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。