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