軟 件 與 食 品 工 程 系計 算 機 多 媒 體 技 術 專 業(yè)畢 業(yè) 論 文 設 計 說 明 書題 目 ： 蛋 糕 之 家 LAZY 主 題 站 專 業(yè) 方 向 ： 12 計 算 機 多 媒 體 技 術 （ 影 視 后 期 ） 姓 名 ：學 號 ： 指 導 教 師 ：師范高等?？茖W校畢業(yè)設計(論文)2目錄一、作品主題 1二、基本構思 1三、素材收集整理 1四、制 作 流 程 及 應 用 的 技 術 .4五 、 使 用 軟 件 .12六 、 自 己 操 作 中 所 遇 到 的 問 題 ， 最 后 是 否 解 決 …………13師范高等?？茖W校畢業(yè)設計(論文)3一 、 作 品 主 題 ：蛋 糕 之 家 LAZY 主 題 站二 、 基 本 構 思 ：首先有個大概的構思，以蛋糕為主題，通過簡潔、大方的頁面，向瀏覽者提供圖文、視頻等關于蛋糕的內容，讓瀏覽者在了解所需內容的同時，也有良好的體驗感。其次通過瀏覽其他網(wǎng)站，學習模仿，取其精華去其糟粕。三 、 素 材 收 集 整 理 ：1.圖 片 （ 百 度 圖 片 下 載 ） :2.動 畫 （ 下 載 +PS 制 作 ） ：四 、 制 作 流 程 及 應 用 的 技 術 ：師范高等?？茖W校畢業(yè)設計(論文)41.首 頁 的 制 作 ：（ 1） 導 航 的 制 作 ， 如 圖 1 所 示 ：圖 1此 部 分 應 用 的 技 術 ：① 鼠 標 移 到 導 航 上 ， 字 體 會 變 小 ， 主 要 運 用 的 代 碼 如 下 ：ul#nav li a:hover{font-size:18px;}② 二 級 導 航 的 制 作 。 二 級 導 航 的 制 作 主 要 運 用 了 display 的 none（ 此 元 素 不會 被 顯 示 ） 屬 性 ， 當 鼠 標 移 動 到 此 鏈 接 上 才 會 被 顯 示 。（ 2） 輪 播 、 設 為 首 頁 、 收 藏 本 站 、 顯 示 系 統(tǒng) 時 間 的 制 作 。 由 于 知 識 有 限 ， 而 且制 作 輪 播 等 要 自 己 寫 JS 代 碼 固 從 網(wǎng) 上 下 載 。 為 了 豐 富 頁 面 內 容 ， 下 面 還 有 一 些網(wǎng) 上 下 載 的 效 果 。 如 圖 2、 圖 3 所 示 ：圖 2圖 3師范高等?？茖W校畢業(yè)設計(論文)5（ 3） 首 頁 主 要 內 容 的 制 作 。 如 圖 4 所 示 ：圖 4此 部 分 應 用 的 技 術 ：① 首 先 從 網(wǎng) 上 下 載 如 上 的 圖 片 ， 然 后 寫 上 “歡 迎 來 到 LAZY 蛋 糕 房 ”的 字 樣 ，對 這 些 字 加 上 斜 面 浮 雕 和 投 影 效 果 。 至 于 底 下 的 波 浪 是 用 圓 形 工 具 繪 制 而 成 。② 對 于 最 右 邊 的 div 里 面 包 含 的 字 用 了 類 you1 對 部 分 字 樣 加 了 鏈 接 代 碼 如下 ：.you1{ width:250px;float:right;margin-right:20px;font-size:18px;line-height:35px;color:#FFF;}（ 3） 首 頁 主 要 內 容 的 制 作 。 如 圖 5 所 示 ：圖 5此 部 分 應 用 的 技 術 ：師范高等?？茖W校畢業(yè)設計(論文)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 所 示 ：師范高等專科學校畢業(yè)設計(論文)7圖 7此 部 分 應 用 的 技 術 ：① 最 左 邊 用 到 的 效 果 是 鼠 標 移 動 有 下 滑 線 代 買 如 下 ：a {color:#000; text-decoration:none;}a:hover{color:#933;text-decoration:underline;}② 圖 7 右 邊 的 圖 片 用 到 了 “行 為 ”里 面 的 “晃 動 ”， 增 加 了 瀏 覽 的 趣 味 性 。（ 6） 首 頁 主 要 內 容 的 制 作 。 如 圖 8 所 示 ：圖 8此 部 分 應 用 的 技 術 ：① 這 部 分 主 要 給 紅 色 模 擬 按 鈕 做 了 個 鏈 接 代 碼 如 下 ：.btn {color:#fff;padding:8px 16px;background:#db3222;}師范高等?？茖W校畢業(yè)設計(論文)8.btn:hover {background:#2e2e2e； }② 圖 8 底 部 主 要 是 版 權 信 息 ， 其 版 權 符 號 是 在 “插 入 —HTML—特 殊 字 符 ”。2.子 頁 面 1 的 制 作 ：（ 1） 蛋 糕 教 學 的 制 作 。 如 圖 9 所 示 ：圖 9此 部 分 應 用 的 技 術 ：① 此 部 分 主 要 是 文 字 信 息 的 展 示 ， 主 要 介 紹 的 是 蛋 糕 的 做 法 步 驟 等 。 右 邊 是 老師 的 教 學 視 頻 ， 左 邊 主 要 運 用 的 是 類 zuo4 使 其 向 左 浮 動 代 碼 如 下 ：.zuo4{width:280px;float:left;margin:5px 5px 0 0px;padding:0 10px 7px 40px;background:#fff;border-radius:18px;}② 圖 9 的 整 體 框 架 運 用 類 content 對 其 框 架 進 行 了 圓 角 處 理 ， 這 樣 看 起 來 不 至于 太 呆 板 。 用 了 border-radius 這 一 屬 性 。師范高等?？茖W校畢業(yè)設計(論文)93.子 頁 面 2 的 制 作 ：（ 1） 知 識 技 巧 的 制 作 。 如 圖 10 所 示 ：圖 10此部分應用的技術：① 圖 10 與 圖 9 相 比 起 來 區(qū) 別 可 能 是 在 圖 10 分 成 了 2 個 板 塊 。 圖 10 最 主 要的 是 介 紹 一 些 蛋 糕 制 作 的 必 要 技 巧 以 及 注 意 事 項 。 其 中 分 成 2 個 板 塊 是 改動 了 一 下 content 里 面 的 內 容 。 用 到 的 代 碼 如 下 ：#content1 {background:url(/images/bg.gif);width:960px;margin:0 auto;padding:0;}② 最 左 邊 的 圓 圈 1 用 到 的 代 碼 如 下 ：.zuo2{float:left;width:54px;background:#000;border-radius:26px;font-size:45px;line-height:48px;color:#fff;師范高等?？茖W校畢業(yè)設計(論文)10text-align:center;padding:1px 0 5px;margin:0 12px 18px 0； }4.子 頁 面 3 的 制 作 ：（ 1） 精 品 展 示 的 制 作 。 如 圖 11 所 示 ：圖 11此部分應用的技術：① 這 一 部 分 加 入 本 網(wǎng) 站 的 宣 傳 標 語 “健 康 源 自 天 然 ”融 于 背 景 。② 右 邊 的 文 字 主 要 是 運 用 了 向 右 浮 動 代 碼 如 下 ：.main2{height:157px;width:480px;float:right;background-color:#fdfcfb;border-radius:18px;}（ 2） 精 品 展 示 的 制 作 。 如 圖 12 所 示 ：師范高等?？茖W校畢業(yè)設計(論文)11圖 12此部分應用的技術：① 圖 12 上 半 部 分 主 要 運 用 了 圖 片 滾 動 的 效 果 代 碼 如 下 ：② 底 部 的 動 態(tài) 效 果 是 源 于 網(wǎng) 上 下 載 ， 為 了 增 加 頁 面 的 生 動 性 。5、 子 頁 面 4 的 制 作 ：（ 1） 關 于 我 們 的 制 作 。 如 圖 13 所 示 ：圖 13師范高等?？茖W校畢業(yè)設計(論文)12此部分應用的技術：① 這 主 要 介 紹 LAZY 完 善 的 體 制 ， 免 費 實 習 ， 迅 速 開 點 、 就 業(yè) 。 上 一 圖 片 頂 部 主要 運 用 到 border-radius 這 一 屬 性 ， 然 后 加 入 水 平 分 割 線 。5、子頁面 5 的制作：（1）聯(lián)系我們的制作。 如圖 14 所示：圖 14此部分應用的技術：① 這一部分主要是表單的運用，都是運用了 DW 軟件里的表單直接插入的。主要用到表單里的“文本字段”和“文本區(qū)域”，然后對其設置。 代碼如下：#textfield{ background: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:30px;}#textarea{background: #e8e7de;border: 1px solid #d1cfbd;width: 84%;height:190px;}五 、 使 用 軟 件 ：師范高等?？茖W校畢業(yè)設計(論文)13（ 1） Dreamweaver：用 于 添 加 整 個 網(wǎng) 頁 的 代 碼 ；（ 2） Adobe Photoshop CS6：用 于 處 理 整 個 網(wǎng) 頁 所 用 到 的 圖 片 ；六 、 自 己 操 作 中 所 遇 到 的 問 題 ， 最 后 是 否 解 決1.由 于 不 怎 么 制 作 網(wǎng) 站 所 以 在 很 多 方 面 都 很 欠 缺 ， 所 以 在 實 際 操 作 的 過 程 中 會遇 到 很 多 困 難 。 大 多 數(shù) 上 網(wǎng) 百 度 搜 索 都 得 到 了 解 決 方 法 ， 比 如 ：（ 1） 首 先 就 是 尋 找 素 材 ， 由 于 欠 缺 設 計 水 平 所 以 在 總 體 的 把 握 上 有 待 提 升 。 怎么 把 搜 集 來 的 素 材 融 合 為 一 體 比 較 困 難 。（ 2） 好 多 效 果 都 是 要 會 寫 JS 語 言 才 能 實 現(xiàn) ， 所 以 從 網(wǎng) 上 下 載 了 不 少 效 果 。 但同 時 修 改 也 是 比 較 困 難 的 ， 要 不 斷 地 修 改 參 數(shù) ， 看 是 否 是 你 想 要 的 效 果 ， 直 到最 后 達 到 效 果 才 能 停 止 修 改 。（3）設置 DIV 框架到底有多大的時候，你估計框架的大小與你實際需要的不符合，需要不斷修改。（4）基本代碼不熟練，在制作的時候需要百度或者參考書本，降低了制作的速度。（5）在制作初稿的時候水平相當?shù)牟?，一時找不到原因。相比較之下還是需要先看別人的制作，吸取經(jīng)驗，然后才會有自己的想法。只有看的多了，才會形成基本的框架。（6）在整體的統(tǒng)一性方面的把握，還有待加強。（7）有一些涉及到浮動，然后清除浮動的方面就出現(xiàn)一些問題。比如說該對其的時候不能對其等，沒有得到解決。