大連東軟信息學(xué)院 電子商務(wù)網(wǎng)頁綜合大作業(yè)設(shè)計(jì)（論文）電子商務(wù)網(wǎng)頁綜合大作業(yè)設(shè)計(jì)（論文） 系系 所：所： 專專 業(yè)：業(yè)： 學(xué)生姓名：學(xué)生姓名： 學(xué)生學(xué)號(hào)：學(xué)生學(xué)號(hào)： 指導(dǎo)教師：指導(dǎo)教師： 導(dǎo)師職稱：導(dǎo)師職稱： 論文題目論文題目：嫣雨坊的網(wǎng)頁設(shè)計(jì)與制作嫣雨坊的網(wǎng)頁設(shè)計(jì)與制作 完成日期：完成日期： 大連東軟信息學(xué)院 Dalian Neusoft University of Information 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） 摘要 I 嫣雨坊的網(wǎng)頁設(shè)計(jì)與制作嫣雨坊的網(wǎng)頁設(shè)計(jì)與制作 摘 要 在時(shí)光飛逝的今天，我們?cè)俨粌H僅是通過書籍報(bào)紙等途徑來收知消息，伴隨著互 聯(lián)網(wǎng)的飛速發(fā)展，人們可以足不出戶就知天下大事國(guó)際新聞，互聯(lián)網(wǎng)成為人們得知消 息和新聞的重要來源，正因?yàn)橛辛嘶ヂ?lián)網(wǎng)人們的生活也發(fā)生了巨大的改變，所以網(wǎng)站 的建設(shè)就成為了互聯(lián)網(wǎng)極為重要的事，我所設(shè)計(jì)的網(wǎng)站是想通過互聯(lián)網(wǎng)這個(gè)大平臺(tái)， 讓更多人去了解和介紹鮮花的寓意，因?yàn)榛ヂ?lián)網(wǎng)這個(gè)大平臺(tái)，可以充分展示每一個(gè)細(xì) 節(jié)。 我這次的設(shè)計(jì)的網(wǎng)站是嫣雨坊鮮花網(wǎng)站，也許有很大一部分人會(huì)設(shè)計(jì)電影的影評(píng)， 明星的主頁，我則不同，我設(shè)計(jì)是一個(gè)鮮花網(wǎng)站，鮮花早已不是當(dāng)年被植物的生殖器 官，在現(xiàn)在人們把它當(dāng)作求愛的一種象征，愛的表達(dá)，促進(jìn)感情的一種手段，所以我 決定做這個(gè)網(wǎng)站來為那些相促進(jìn)感情，又不知送什么花的朋友一些建議，通過這個(gè)網(wǎng) 站能使用最少的時(shí)間來明確找出最適合自己的。 網(wǎng)頁的制作都是通過 HTML 語言設(shè)計(jì)的，因?yàn)閷?duì)其他的編程軟件不是十分了解， 所以制作了一個(gè)靜態(tài)網(wǎng)站，在 WINDOWS 的系統(tǒng)中進(jìn)行調(diào)試和展示效果。 關(guān)鍵詞關(guān)鍵詞：互聯(lián)網(wǎng)，鮮花，HTML，編程 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） Abstract II 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） Abstract III Webpage design and manufacture of Yan rain Abstract The time flies today, we not only through books, newspapers and other ways to receive that message, along with the rapid development of the Internet, people can remain within doors can know the world events of international news, the Internet become important sources of news and news, it is because of the Internet, peoples life has undergone tremendous changes, and so on the construction site of the Internet has become extremely important thing, I design the website is to through the platform of Internet, let more people to understand the meaning and flowers, because the Internet platform, can fully display each detail. I designed this website is Yan rain flowers website, maybe there are a lot of people will design a movie, star home, I was different, I design is a flower, flowers had not had to be the reproductive organs of plants, now people have a it as a symbol for love, the expression of love, a way to promote feelings, so I decided to do the site promotion for those feelings, and I do not know what to send flowers friend some advice, through this website can clearly with the least amount of time to find the most suitable for their own. Webpage production are designed by HTML language, because of other programming software is not very understanding, so making a static website, debug and display in the WINDOWS system. Keywords: Internet, Flower, HTML, Programming 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） 目錄 IV 目 錄 摘 要錯(cuò)誤錯(cuò)誤!未定義書簽。未定義書簽。 ABSTRACT.I 第 1 章 緒 論- 1 - 1.1 網(wǎng)站的背景.- 1 - 1.2 網(wǎng)站的目的.- 1 - 1.3 網(wǎng)站的意義.- 1 - 第 2 章 網(wǎng)頁的分析與設(shè)計(jì) .2 2.1 網(wǎng)站主題.- 2 - 2.2 頁面的相關(guān)設(shè)計(jì).- 2 - 2.2.1 Logo 的設(shè)計(jì)- 2 - 2.2.2 導(dǎo)航條的設(shè)計(jì)- 2 - 2.2.3 背景與圖片的設(shè)計(jì)- 3 - 2.2.4 字體的相關(guān)搭配- 4 - 2.3 網(wǎng)站布局- 5 - 2.3.1 一級(jí)頁面的設(shè)計(jì)- 5 - 2.3.2 二級(jí)頁面的設(shè)計(jì)- 5 - 2.3.3 三級(jí)頁面的設(shè)計(jì)- 6 - 2.3.4 其他頁面的設(shè)計(jì)- 6 - 24 框線圖的設(shè)計(jì) 8 第 3 章 網(wǎng)站的實(shí)現(xiàn) .9 3.1 網(wǎng)站的制作與實(shí)現(xiàn).10 3.1.1 一級(jí)頁面的實(shí)現(xiàn).11 3.1.2 二級(jí)頁面的實(shí)現(xiàn).12 3.1.3 三級(jí)頁面的實(shí)現(xiàn)- 11 - 3.1.4 其他頁面的實(shí)現(xiàn).14 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） 目錄 V 3.1.5 重點(diǎn)頁面的實(shí)現(xiàn).15 3.2 鏈接的使用.16 3.3 編寫代碼- 17 - 3.3.1 外部 CSS- 17 - 3.3.2 導(dǎo)航條代碼的引用- 17 - 3.3.3 其他代碼的編寫.19 第 4 章 網(wǎng)站測(cè)試.- 19 -0 第 5 章 結(jié) 論21 參考文獻(xiàn)- 21 - 致 謝23 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 1 - 第 1 章 緒 論 1.1 網(wǎng)站的背景網(wǎng)站的背景 伴隨著現(xiàn)代人生活越來伴隨著現(xiàn)代人生活越來越快的節(jié)奏，人們對(duì)身邊的生活細(xì) 節(jié)越來越不注重，那些美好的事物都是神奇的大自然創(chuàng)造的，身邊的花花草草，也許 我們并不了解，也不太去欣賞他們突破重重困難的綻放，也并不了解他們獨(dú)特的含義， 所以想通過本論文，來介紹那些美麗的花朵的含義，例如鮮花的來歷鮮花是被子植物 （被子植物門植物，又稱有花植物）的繁殖器官，生物學(xué)功能的是結(jié)合雄性精的細(xì)泡 與雌性軟的細(xì)泡以產(chǎn)生種子。這一項(xiàng)程始于傳粉，然后通過風(fēng)吹或蜜蜂蝴蝶的采蜜形 成受精。鮮花早以不是從前那作為植物的生殖器官，現(xiàn)在早已成為節(jié)日聚會(huì)不可缺少 的一部分。 1.2 網(wǎng)站的目的網(wǎng)站的目的 我想通過這個(gè)網(wǎng)站讓更多人了解花朵并不僅僅是表達(dá)愛意的一種，更是大自然給 我們的一種驚喜，讓我從它們受精到發(fā)育到品種的變異一點(diǎn)一點(diǎn)演變成我們現(xiàn)在看到 的樣子，例如玫瑰為例，屬于薔薇的一種，原產(chǎn)地是中國(guó)，玫瑰作為農(nóng)作物時(shí)，其花 朵主要的目的用于食品及提煉香精玫瑰精油，精油主要用于化妝品，食品，精細(xì)化工 等工業(yè)，通過網(wǎng)頁介紹花朵并不僅僅是觀賞品，也可以有別的用處，也希望通過本網(wǎng) 址呼吁人們要呵護(hù)花朵，它們來到我們面前是養(yǎng)殖人員多么不容易的種植培養(yǎng)。 1.3 網(wǎng)站的意義網(wǎng)站的意義 我們只看見花朵嬌艷美麗的一面，誰知道它們是經(jīng)歷了怎樣的歷程才變成現(xiàn)在人 見人愛的模樣，一朵小花，要從一個(gè)種子慢慢生根發(fā)芽，突破泥土的束縛，在風(fēng)雨中 長(zhǎng)大，成長(zhǎng)到小蜜蜂蝴蝶的采蜜進(jìn)行受粉，我們只愛它們綻放那一刻，所以，我想通 過本網(wǎng)站的介紹，讓跟多的人了解它們，愛護(hù)它們，它不僅僅是原來植物的生殖器官， 現(xiàn)在更是愛的一種表示，就拿玫瑰為例，我們現(xiàn)在提到玫瑰就是愛情的象征，戀人門 之間拿它來作為愛的一種表示，也可以稱為訂情之花，所以現(xiàn)在鮮花早已成為生活中 不可替代的一部分了，古人更是有“碧荷生幽泉，朝日艷且鮮，秋花冒綠水，密葉羅 青煙”這樣的佳作。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 2 - 第 2 章 網(wǎng)頁的分析與設(shè)計(jì) 2.1 網(wǎng)站主題網(wǎng)站主題 嫣雨坊網(wǎng)頁設(shè)計(jì)與制作的主題是以玫瑰，菊花，康乃馨，郁金香等花卉主題的， 通過介紹各中花卉的代表寓意和品種介紹，讓那些苦惱于送花的朋友得到更好的幫助。 同時(shí)也給那些對(duì)花朵一無所知的人普及知識(shí)，讓大家并不盲目的去選購。 2.2 頁面的相關(guān)設(shè)計(jì)頁面的相關(guān)設(shè)計(jì) 2.2.1 Logo 的設(shè)計(jì)的設(shè)計(jì) 圖 2.1 網(wǎng)站 Logo 如圖 3.1 所示，Logo 是以網(wǎng)站的名稱命名的， “嫣雨坊”一個(gè)富有詩情畫意的名字， logo 的上方是通過絕對(duì)定位來實(shí)現(xiàn)的，英文寓意甜蜜小屋，希望看到網(wǎng)站的每個(gè)人都 能有一間甜蜜的小屋，而在“嫣雨坊”下方是通過 span 標(biāo)簽來設(shè)置的，在 Logo 的最 右邊是一個(gè)類似葉子的東西來襯托標(biāo)題。 2.2.2 導(dǎo)航條的設(shè)計(jì)導(dǎo)航條的設(shè)計(jì) 圖 2.2 網(wǎng)站導(dǎo)航條 圖 2.3 網(wǎng)站導(dǎo)航條點(diǎn)擊后 如圖 2.2 所示，整個(gè)導(dǎo)航條是以圓角的形式呈現(xiàn)的，而導(dǎo)航條的前端是黑色的，在 鼠標(biāo)滑動(dòng)過變成橘黃色，黑色是一種特殊的色彩，它本身無刺激性，具有包容性，會(huì) 配合其他色彩增加刺激，黑是消極色，也是嚴(yán)肅的色彩，但卻是一種很重要的補(bǔ)色之 一，所以猶豫對(duì)黑色配合俏皮有活力的橙色來調(diào)節(jié)呆板的導(dǎo)航條。而進(jìn)去的導(dǎo)航條我 使用了莊重的白色搭配大海的藍(lán)色，這樣使頁面看著沒有首頁那么呆板，又多了一點(diǎn) 俏皮。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 3 - 2.2.3 背景與圖片的設(shè)計(jì)背景與圖片的設(shè)計(jì) 圖 2.4 背景圖片 背景圖我采用了漸變的純色，白，深灰，淺灰，因?yàn)楸旧砘ǘ涞膱D片顏色已經(jīng)反 差夠明顯了，所以使用純色的背景可以緩解一下疲憊的視力，還有一個(gè)的原因是，灰 色的含義是，誠(chéng)懇，考究，沒有色相和純度，只有明度，介于黑色和白色之間，既沒 有黑色的憂郁，也沒有白色的明亮，所以純?cè)谟趦烧咧g，背景圖是通過 photoshop 軟 件的調(diào)色板調(diào)出來的，自己調(diào)出來的顏色比較相當(dāng)。整個(gè)網(wǎng)站都以白灰為主色調(diào)穿插 鏈接的。不使用復(fù)雜的顏色回到最初的自己是我想闡述給大家的理念。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 4 - 圖 2.5 圓角圖片 如圖 2.5 圓角圖片所示，圖片是使用 Photoshop 修飾變成圓角圖片，圓潤(rùn)的的圖角 給人的視覺感覺不那么生硬，比較包容，沒有給人那種壓迫感，其圓角和背景圖的搭 配也比較符合視覺感覺。 圖 2.6 白色邊框圖片 如圖 2.6 白色邊框圖片，這種折疊的效果是我想給觀看我網(wǎng)站的瀏覽者一種像在看 相框照片一樣的感覺，就通過使用邊框的顏色，來給瀏覽者一種逼真的感覺，就像圖 片相在框里一樣，從細(xì)節(jié)關(guān)注瀏覽者的感覺。 2.2.4 字體的相關(guān)搭配字體的相關(guān)搭配 整個(gè)網(wǎng)站的字體由黑色為主黑由于圓角背景是白色的，所以要用黑色的字才能讓 整個(gè)網(wǎng)站更加簡(jiǎn)潔更加清晰，而且黑色的字又與大的背景圖片相呼應(yīng)。讓瀏覽網(wǎng)頁的 人一目了然；在大的盒子里面我選擇莊重的黑色還大段的段落介紹各種花卉的寓意， 以表示我對(duì)大自然給我們的驚喜表示尊重，在大段的文字介紹后，我用灰色的字體來 分段介紹各花卉的具體含義，為緩解視覺疲勞，從而達(dá)到放松的作用。在瀏覽網(wǎng)站時(shí)， 沒有那種因?yàn)閳D片凌亂的煩躁感。讓瀏覽者清晰簡(jiǎn)潔的瀏覽。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 5 - 2.3 網(wǎng)站布局網(wǎng)站布局 在制作網(wǎng)站的前期必須要有一個(gè)網(wǎng)站布局圖，在 Adobe Photoshop 中設(shè)計(jì)中制作了 嫣雨坊的布局如圖 2.7，圖 2.8，圖 2.9 所示。 2.3.1 一級(jí)頁面的設(shè)計(jì)一級(jí)頁面的設(shè)計(jì) 如圖 2.7 所示是嫣雨坊一級(jí)頁面的布局圖： 在首頁的布局我采用了九個(gè)盒子來定位，分別為 Logo 一個(gè)盒子，導(dǎo)航條，大張圖 片，小盒子里包括圖片和介紹文字，在設(shè)計(jì)這樣的布局不僅使網(wǎng)頁內(nèi)容豐富，更不讓 網(wǎng)頁看著雜亂無章。在瀏覽網(wǎng)頁時(shí)，所有的圖片都有超鏈接，連貫性很好。 圖 2.7 首頁的布局圖 2.3.2 二級(jí)頁面的設(shè)計(jì)二級(jí)頁面的設(shè)計(jì) 如圖 2.8 所示是嫣雨坊二級(jí)頁面的布局圖：二級(jí)頁面的設(shè)計(jì)布局是通過八個(gè)盒子控 制的，在網(wǎng)頁的上方有導(dǎo)航條，導(dǎo)航條下方是對(duì)花卉具體介紹的大圖片，大圖片的下 方是由一個(gè)個(gè)小盒子的圖片超鏈接，圖片下方是介紹鮮花的文字，在下方是具體介紹 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 6 - 寓意和顏色代表的含義，而在網(wǎng)頁的最下方是一個(gè)長(zhǎng)方形盒子，包含著版權(quán)信息，因 為配和首頁的主色調(diào)，所以二級(jí)頁面也采用了灰色漸變的純色背景，這樣看起來比較 統(tǒng)一搭配。不會(huì)顯得那么唐突。 圖 2.8 二級(jí)頁面的布局圖 2.3.3 三級(jí)頁面的設(shè)計(jì)三級(jí)頁面的設(shè)計(jì) 如圖 2.9 所示是嫣雨坊三級(jí)頁面的布局圖： 網(wǎng)站的三級(jí)頁面是通過一個(gè)一個(gè)圖片構(gòu)造而成，這樣的頁面設(shè)計(jì)最主要的目的是 凸顯鮮花的五彩繽紛，三級(jí)頁面不在僅僅是首頁和二級(jí)頁面單調(diào)的純色，而是通過另 一種豐富多彩的顏色來詮釋著花的海洋，在花朵的海洋里可以盡情的釋放激情。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 7 - 圖 2.9 三級(jí)頁面的布局圖 2.3.4 其他頁面的設(shè)計(jì)其他頁面的設(shè)計(jì) 如圖 2.10 所示是嫣雨坊其他頁面的布局圖： 在網(wǎng)頁其他的頁面設(shè)計(jì)布局里，也使用了在網(wǎng)也的最上方，一個(gè)大盒子包含著導(dǎo) 航條，在導(dǎo)航條的下方，圖片和段落的文字介紹，不同的圖片搭配不同的花語含義， 這樣簡(jiǎn)單大方的結(jié)構(gòu)，可以時(shí)瀏覽網(wǎng)頁者不那么不清晰。 圖 2.10 其他頁面的布局圖 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 8 - 2.4 框線圖的設(shè)計(jì)框線圖的設(shè)計(jì) 在做網(wǎng)站之前，通過設(shè)計(jì)與比較，最終確定網(wǎng)站的框線圖如圖 2.4 所示。嫣雨坊的 首頁包括對(duì)花卉總體的簡(jiǎn)單介紹，二級(jí)頁面則是把想要介紹的花卉分為具體的，康乃 馨，玫瑰，郁金香，菊花等品種的花卉作為具體的介紹，三級(jí)頁面，是把各種花卉的 圖片，和段落的描述更為具體，具體表述到每種花卉的顏色代表的具體含義。也希望 通過框線圖把網(wǎng)站的總體一目了然。 首頁 二級(jí)頁面二級(jí)頁面三級(jí)頁面 圖 2.11 框線圖 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 9 - 第 3 章 網(wǎng)站的實(shí)現(xiàn) 3.1 網(wǎng)站的制作與實(shí)現(xiàn)網(wǎng)站的制作與實(shí)現(xiàn) 3.1.1 一級(jí)頁面的實(shí)現(xiàn)一級(jí)頁面的實(shí)現(xiàn) 首頁的 Logo 是通過用絕對(duì)定位來控制圖片的位置，文字與圖片之間有一定距離， 而 logo 的文字則通過標(biāo)題大小控制文字的大小， 嫣雨坊 SWEET HOUSE 導(dǎo)航條則是使用 nav-bg1，nav-bg2 兩張圖片來組成，當(dāng)鼠標(biāo)劃過時(shí)，導(dǎo)航條的背 景黑色變成橘色在導(dǎo)航條下方，用了一個(gè)大盒子把使用 photoshop 軟件修改圖片的大小 控制在所設(shè)定的盒子里，另外在包在盒子里面的圖片加了文字，使用小段的文字來介 紹盒子里的圖片，讓文字和是圖片的搭配更有美感，使用 em，br 等代碼來控制文字的 大小，和排列位置，還增加了超鏈接讓文字能鏈接，讓整個(gè)網(wǎng)頁更連貫性，通過文字 上的鏈接可以在跳轉(zhuǎn)別的二級(jí)頁面。 在圖片的下方是介紹網(wǎng)站的主要內(nèi)容，使用了三個(gè)盒子分別把圖片文字分成三欄， 這樣再看網(wǎng)址的時(shí)候能更簡(jiǎn)潔看出玫瑰，百合，郁金香，的三種花卉的分類，在各個(gè) 盒子里，盒子的上部分是圖片可以通過圖片跳轉(zhuǎn)到下一個(gè)，實(shí)現(xiàn)更多跳轉(zhuǎn)的目的，而 在圖片的下方這是大段的文字，文字上面的標(biāo)題通過標(biāo)簽控制大小，段落文字則 通過標(biāo)簽來控制。 再往下看是文字地下的更多是使用Read More 的標(biāo)簽來控制，通過此按鈕則可以跳轉(zhuǎn)到三級(jí)頁面，在網(wǎng)頁既美觀又實(shí)用，網(wǎng)站在下 面是版權(quán)信息，也是 footer，作為網(wǎng)站的最底部可以使網(wǎng)站有一個(gè)很好的收尾作用。 首頁沒有使用更多復(fù)雜的盒子作為設(shè)計(jì)，因?yàn)槲蚁胪ㄟ^使用簡(jiǎn)潔大方的代碼，清 晰的線條讓看到網(wǎng)站的每一個(gè)人有著清晰的思路，讓瀏覽頁面的時(shí)候不會(huì)有太多的壓 迫感從而放棄看網(wǎng)頁的想法，只有最簡(jiǎn)單的東西才能讓人的印象更為深刻。 首頁的展示圖如圖 3.1.所示。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 10 - 圖 3.1 首頁設(shè)計(jì)圖 3.1.2 二級(jí)頁面的實(shí)現(xiàn)二級(jí)頁面的實(shí)現(xiàn) 如圖 3.2 在網(wǎng)頁最上方是一個(gè)藍(lán)色的蝴蝶結(jié)，在蝴蝶結(jié)里面我使用 photoshop 軟在 對(duì)在圖片里加的“嫣雨坊。 ”網(wǎng)站的名稱，在藍(lán)色蝴蝶結(jié)兩面是導(dǎo)航條，做為二級(jí)頁面 的導(dǎo)航條我選擇了灰色作為文字的顏色，在鼠標(biāo)劃過時(shí)，文字變?yōu)閼n郁的藍(lán)色，每個(gè) 文字中間插入了小星星作為點(diǎn)綴，是導(dǎo)航條不在那么呆板，在下面使用一個(gè)圖片作為 超鏈接二階頁面主要介紹花朵的展示，通過使用浪線來將一個(gè)盒子間隔開，也起到美 觀的作用，在下面是四個(gè)盒子分別是介紹本頁面花卉的品種圖片，在圖片中添加超鏈 接，鼠標(biāo)點(diǎn)擊是可以進(jìn)入下一個(gè)頁面，通過點(diǎn)擊頁面可以對(duì)三級(jí)頁面的瀏覽，在下面 分為兩個(gè)盒子，盒子中使用段落的文字介紹花卉，其花卉的含義寓意都可以在里面查 看，在下面是一個(gè)盒子，同樣使用段落文字介紹花卉的來源，也添加了超鏈接方便欣 賞到下一頁。同樣頁面的最下方的盒子里也是版權(quán)信息。 二級(jí)頁面的展示圖如圖 3.2 所示。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 11 - 圖 32 二級(jí)頁面設(shè)計(jì)圖 3.1.3 三級(jí)頁面的實(shí)現(xiàn)三級(jí)頁面的實(shí)現(xiàn) 如圖 3.3 第一種三級(jí)頁面： 則是對(duì)各種花卉的更具體得介紹，采用的技術(shù)是一個(gè) 大盒子里面有十二個(gè)正方體的小盒子，讓各種花卉的圖片可以更具體的展示，在 CSS 中設(shè)置大盒子的背景圖片：background-image:url(/images/tu.jpg);使用的圖通過 photoshop 軟件調(diào)出的純色的漸變，可以使大盒子看起來不在那么單調(diào)可以增加內(nèi)容， 在小盒子里使用 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 12 - 玫瑰花語在古希臘神話中，玫瑰集愛與美于一身，既是美神的化身，又溶進(jìn)了 愛神的血液?？梢哉f，在世界范圍內(nèi)，玫瑰是用來表達(dá)愛情的通用語言等代 碼來控制段落和豐富網(wǎng)址內(nèi)容，在一個(gè)又一個(gè)的小盒子的排列中組成了網(wǎng)站精彩豐富 的內(nèi)容。在網(wǎng)站的下邊有段落的文字來更具體介紹花卉的屬性，所控制的盒子代碼是 ，整個(gè)網(wǎng)頁由最外面的大盒子，里面包括了七個(gè)小盒 子的構(gòu)圖而成。 三級(jí)頁面的展示圖如圖 3.3 所示。 圖 3.3 三級(jí)頁面的設(shè)計(jì)圖 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 13 - 圖 3.4 三級(jí)頁面的設(shè)計(jì)圖 3.1.4 其他頁面的實(shí)現(xiàn)其他頁面的實(shí)現(xiàn) 如圖 3.4 在第二個(gè)三級(jí)頁面中，導(dǎo)航條使用灰色的背景圖在 CSS 中通過 background-image:url(/images/title.png);等代碼來控制灰色背景圖，因?yàn)檎麄€(gè)網(wǎng)站都是 有灰色的背景為主色調(diào)，導(dǎo)航條文字是灰色，當(dāng)鼠標(biāo)滑動(dòng)時(shí)會(huì)變成橘黃的，下面圖片 也同樣使用 photoshop 軟件對(duì)圖片的大小進(jìn)行剪裁，在文字上面聽過標(biāo)題 h2 開控制標(biāo) 題大小，段落文字使用標(biāo)簽來控制，使網(wǎng)頁的段落清晰，簡(jiǎn)潔明白。由于三級(jí)頁面 是對(duì)各種花卉區(qū)逐一介紹的，所以在二級(jí)頁面介紹的前提下，三級(jí)頁面這是把想要介 紹的內(nèi)容更具體化。 如圖 3.5 第三個(gè)頁面則是通過一個(gè)灰色的背景圖，在上方的導(dǎo)航條也是使用黑色的 字體搭配灰色背景，在鼠標(biāo)點(diǎn)擊時(shí)，黑色的字體變成白色，上面兩個(gè)小的圖片使用決 定定位在網(wǎng)頁的左邊，采用了不對(duì)稱的效果，左邊由三張圖片組成，而右邊的大圖片 則是浮動(dòng)在右邊，兩邊相互對(duì)應(yīng)，十分和諧。當(dāng)鼠標(biāo)劃過圖片時(shí)，圖片顯示文字，圖 片的下方也有文字的介紹，文字使用超鏈接。作為三級(jí)頁面，沒有太復(fù)雜的構(gòu)圖，想 展示著最簡(jiǎn)單而淳樸的效果，想讓通過瀏覽網(wǎng)站讓瀏覽者想起那最純真的質(zhì)樸。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 14 - 圖 3.5 其他頁面的設(shè)計(jì)圖 3.1.4 重點(diǎn)頁面的實(shí)現(xiàn)重點(diǎn)頁面的實(shí)現(xiàn) 如圖 3.6 重點(diǎn)頁面也采用個(gè)了和首頁相同的導(dǎo)航條，在導(dǎo)航條的左上方是嫣雨坊網(wǎng) 站的 Logo，在導(dǎo)航條的下方通過圖片作為過度，在圖片的下方是分為兩個(gè)版塊，左邊 為網(wǎng)站的列表介紹花卉的品種，同樣采用了超鏈接的方式，而在網(wǎng)站的右邊的盒子里 堆放了六張圖片，通過添加圖片來爭(zhēng)強(qiáng)觀賞性，右邊的小盒子去掉了框線變成透明色。 網(wǎng)也的邊框我也采用了圓角式設(shè)計(jì)，因?yàn)閳A角的設(shè)計(jì)比直角這樣的觀看效果更加較柔 和。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 15 - 圖 3.6 重點(diǎn)頁面的設(shè)計(jì)圖 3.23.2 超鏈接的使用超鏈接的使用 “嫣雨坊”整個(gè)網(wǎng)站設(shè)計(jì)不僅使用了導(dǎo)航條添加超鏈接，而且還通過按鈕、圖片、 列表文字，段落文字等添加了超鏈接，使整個(gè)網(wǎng)站連通起來，讓瀏覽網(wǎng)站變得更加的 流暢。 導(dǎo)航的超鏈接如下代碼： Home second third fourth fifth 圖片及其超鏈接如下圖： 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 16 - 圖 3.6 圖片超鏈接 圖片超鏈接代碼： 玫瑰花語在古希臘神話中，玫瑰集愛與美于一身，既是美神的化身，又溶進(jìn)了 愛神的血液。可以說，在世界范圍內(nèi)，玫瑰是用來表達(dá)愛情的通用語言 按鈕及其超鏈接如下圖： 圖 3.7 圖片超鏈接 按鈕超鏈接代碼如下： Read More More 圖片文字及其超鏈接如下圖： 圖 3.8 圖片超鏈接 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 17 - 粉色玫瑰 / More 3.3 編寫代碼編寫代碼 3.3.1 外部外部 CSS “嫣雨坊”網(wǎng)站是通過代碼鏈接外部樣式表，來對(duì)網(wǎng)站內(nèi)部的 html 代碼進(jìn)行編輯定位等應(yīng)用操作。 3.3.2 導(dǎo)航條代碼的引用導(dǎo)航條代碼的引用 在一個(gè)網(wǎng)站瀏覽中，首先看的就是整個(gè)網(wǎng)站的導(dǎo)航條，在首頁的導(dǎo)航條中，我使 用了 nav 標(biāo)簽來控制導(dǎo)航條的盒子，其展示的代碼如下： Home second third fourth fifth 圖 3.7 效果圖 3.3.3 其他代碼的編寫其他代碼的編寫 （1）正文字體大小及顏色 在瀏覽者瀏覽網(wǎng)站時(shí)，14px、#000 的字是最適合瀏覽者閱讀的字體和顏色，14px 也是在網(wǎng)站瀏覽上和閱讀文字段落上最為合適視力的，字體大小及顏色設(shè)置的代碼如 下所示： Margin-bottom:16px; color:#000; （2）列表樣式的設(shè)置 “嫣雨坊網(wǎng)”的站多處使用了列表，為了讓列表的樣式更加美觀，對(duì)列表進(jìn)行了 去點(diǎn)兒的代碼設(shè)置，列表樣式設(shè)置的代碼如下所示： List-style-type:none; （3）首行縮進(jìn)設(shè)置 在看一篇文章的時(shí)候，段落的開頭通常都空兩格，所以在本網(wǎng)站中的段落，也采 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 18 - 用了首航縮進(jìn)的代碼，網(wǎng)頁的 CSS 代碼中也可以有控制這種效果的語句，使用首行縮 進(jìn)不僅讓大篇的文章有美感，更是讓瀏覽文章的瀏覽者更為方便的區(qū)別段落，首行縮 進(jìn)設(shè)置的代碼如下所示： Text-indent:2em ; 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 19 - 第 4 章 網(wǎng)站測(cè)試 網(wǎng)站測(cè)試是指的在一個(gè)網(wǎng)站制作完成后，上傳到服務(wù)器之后針對(duì)著網(wǎng)站的各項(xiàng)性 能情況的一項(xiàng)檢測(cè)工作。因?yàn)樵诰W(wǎng)頁制作使用的 Dreamweaver 的軟件中，制作網(wǎng)頁的 圖片大小或是顏色，都應(yīng)在服務(wù)器中進(jìn)行測(cè)試，畢竟網(wǎng)站測(cè)試與數(shù)據(jù)庫不同，所以網(wǎng) 站測(cè)試的意義就是查找不足。 雖然網(wǎng)頁制作完成，但是在其他瀏覽器中圖片的大小，格式都有所竄動(dòng)，所以還 得在軟件中進(jìn)行調(diào)試，因?yàn)椤版逃攴弧钡木W(wǎng)站的超鏈接比較多，所以在測(cè)試超鏈接時(shí)， 要特別注意，看每個(gè)網(wǎng)頁的超鏈接是否都能在瀏覽器中正常跳轉(zhuǎn)，在網(wǎng)站的 logo 設(shè)計(jì) 中，使用的方法是決定定位，在文字和圖片顏色上進(jìn)行修改，因?yàn)榫W(wǎng)站圖片特別多， 要注意網(wǎng)站圖片的命名，注意使用不是中文，要不然網(wǎng)站識(shí)別不出來，注意其他格式 在軟件或?yàn)g覽器中都均能正常使用，導(dǎo)航條也能正常連接。網(wǎng)頁的框架也都能正常顯 示，在設(shè)置的特別盒子中，也能保證盒子中的內(nèi)容正常顯示。 經(jīng)過重重測(cè)試，嫣雨坊的網(wǎng)站在獵豹，火狐，IE 瀏覽器上顯示均正常，沒有發(fā)生 篡位以及變色等問題。在獵豹，IF 等瀏覽器中均能正常顯示，網(wǎng)站存在不足也幾乎都 以改正。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 20 - 第 5 章 結(jié) 論 玫瑰花的寓意，在古代歐洲傳說中，玫瑰是與希臘愛神維納斯同時(shí)誕生的，其實(shí) 真正寓意是愛情真摯，濃情，艷麗，嬌羞，但是小心有刺。紅玫瑰象的征愛是情和真 摯的愛。人們把他作為愛情的信物，愛的代名詞，是人們情人節(jié)首選花卉。紅玫瑰代 表熱戀，真心真意。白玫瑰寓意尊敬，崇高和純潔。粉玫瑰表示初戀，特別關(guān)懷，香 檳色玫瑰表示我只鐘情一個(gè)，黃色玫瑰表示富貴之尊，三色玫瑰表示博學(xué)才，深情。 郁金香花的寓意，為體貼，博愛，高雅，富貴，能干。紅色的郁金香代表熱烈的 愛意，粉色的郁金香代表永遠(yuǎn)的愛，黃色的郁金香則代表開朗，白色郁金香代表純潔 的戀情，黑色郁金香代表獨(dú)特的領(lǐng)袖權(quán)利，愛的表白，榮譽(yù)的皇冠，永恒的的祝福。 學(xué)名 Tulipa 屬于百合科郁金香屬于草本植物，是荷蘭的國(guó)花。 通過網(wǎng)站的花語介紹，圖片的展示和寓意的表示，可以讓瀏覽者不僅欣賞花卉圖 片的同時(shí)，更是為了讓瀏覽者能在選購花卉的時(shí)候避免尷尬，了解花卉的寓意這樣在 購買的時(shí)候省去了很多的時(shí)間，所以通過制作本網(wǎng)站也是豐富自己的知識(shí)，學(xué)會(huì)也了 解了很多自己不了解的，意義深刻。在花朵的萬千世界里，我們看到的只是一角，希 望更多的人來愛護(hù)和懂得欣賞它們。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 21 - 參考文獻(xiàn) 1 袁磊網(wǎng)頁設(shè)計(jì)與制作教程M，清華大學(xué)出版社，2008，10 2 溫謙別具光芒M，人民郵政大學(xué)出版社，2012，12 3 劉西杰網(wǎng)頁制作從入門到精通M，人民交通出版社，2011，4 4 溫國(guó)鋒網(wǎng)頁制作與網(wǎng)站建設(shè)完全學(xué)習(xí)手冊(cè)M，經(jīng)濟(jì)科學(xué)出版社，2007，5 5 方寧.Photoshop+Dreamweaver 網(wǎng)頁與網(wǎng)站制作M，中國(guó)電力出版社，2003，6 6 戚安邦網(wǎng)頁制作書籍 教程 教程大全M，南開大學(xué)出版社，2008，2 7 沈建明HTML、CSS 網(wǎng)頁制作從入門到精通M，人民出版社，2003， 4 8 景新梅網(wǎng)站制作與管理J，中國(guó)計(jì)算機(jī)報(bào)，2005，7 9 劉樹立網(wǎng)站的制作M，北京大學(xué)出版社，2006，3 10 馬丁魯斯摩爾網(wǎng)頁建設(shè)圖書，中國(guó)人民出版社M，2003，4 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 22 - 致 謝 時(shí)光轉(zhuǎn)眼飛逝，還記得我是那個(gè)懵懂剛進(jìn)入大學(xué)的無知少年，一轉(zhuǎn)眼我已經(jīng)在這 所美麗的大學(xué)已經(jīng)就讀三年整，時(shí)間真是如流水，這三年是在各位老師的幫助下才得 以順利畢業(yè)，三年的時(shí)光快樂即美好，都說不讀大學(xué)會(huì)是人生中的一種缺憾，在這所 人文學(xué)院里，我的成長(zhǎng)和學(xué)習(xí)的知識(shí)，都是不可多得的財(cái)富。 在嫣雨坊的網(wǎng)頁設(shè)計(jì)與制作中，首先我要感謝我的指導(dǎo)老師，從網(wǎng)站的最開始選 題到設(shè)計(jì)到中期的修改和指導(dǎo)，在老師循循善誘的教導(dǎo)下，獨(dú)立的完成了網(wǎng)站和論文 的撰寫，老師的耐心我依然銘記于心，我會(huì)不斷的努力做到更好。 最后是多我在大學(xué)三年的總結(jié)，這三年里迷茫過，也無助過，但在老師和同學(xué)們 的幫助下，我從新找到了我的目標(biāo)，老師的關(guān)愛，同學(xué)們的友誼，是我最大的財(cái)富， 同學(xué)們之間也許吵鬧過，但開心的那一部分是無可替代的，所以這三年的時(shí)光即珍惜 也盼望著慢慢過，嫣雨坊網(wǎng)站的設(shè)計(jì)不僅是一份畢業(yè)作業(yè)，更是為了展示我這三年的 學(xué)習(xí)成果，感謝各位老師，幫助過我的同學(xué)。 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 23 - 大連東軟信息學(xué)院 畢業(yè)設(shè)計(jì)（論文）原創(chuàng)承諾書 1、本人承諾：所提交的畢業(yè)設(shè)計(jì)（論文）是認(rèn)真學(xué)習(xí)理解學(xué)校的 畢業(yè)設(shè)計(jì)（論文）工作規(guī)范后，在教師的指導(dǎo)下，獨(dú)立地完成了任務(wù) 書中規(guī)定的內(nèi)容，不弄虛作假，不抄襲別人的工作內(nèi)容。 2、本人在畢業(yè)設(shè)計(jì)（論文）中引用他人的觀點(diǎn)和研究成果，均在文 中加以注釋或以參考文獻(xiàn)形式列出，對(duì)本文的研究工作做出重要貢獻(xiàn)的個(gè) 人和集體均已在文中注明。 3、在畢業(yè)設(shè)計(jì)（論文）中對(duì)侵犯任何方面知識(shí)產(chǎn)權(quán)的行為，由本人 承擔(dān)相應(yīng)的法律責(zé)任。 4、本人完全了解學(xué)校關(guān)于保存、使用畢業(yè)設(shè)計(jì)（論文）的規(guī)定，即： 按照學(xué)校要求提交論文和相關(guān)材料的印刷本和電子版本；同意學(xué)校保留畢 業(yè)設(shè)計(jì)（論文）的復(fù)印件和電子版本，允許被查閱和借閱；學(xué)校可以采用 影印、縮印或其他復(fù)制手段保存畢業(yè)設(shè)計(jì)（論文） ，可以公布其中的全部 或部分內(nèi)容。 5、本人完全了解畢業(yè)（設(shè)計(jì)）論文工作規(guī)范關(guān)于“學(xué)生畢業(yè)設(shè) 計(jì)（論文）出現(xiàn)購買、他人代寫、或者抄襲、剽竊等作假情形的，取消其 學(xué)位申請(qǐng)資格；已經(jīng)獲得學(xué)位的，依法撤銷其學(xué)位。取消學(xué)位申請(qǐng)資格或 者撤銷學(xué)位者，從處理決定之日起 3 年內(nèi)，學(xué)校不再接受學(xué)生學(xué)位申請(qǐng)” 的規(guī)定內(nèi)容。 6、本人完全了解學(xué)生手冊(cè)中關(guān)于在“畢業(yè)設(shè)計(jì)（論文）等環(huán)節(jié) 中被認(rèn)定抄襲他人成果者”不授予學(xué)士學(xué)位，并且“畢業(yè)學(xué)年因違紀(jì)受處 分影響學(xué)位的學(xué)生不授予學(xué)士學(xué)位，并且無學(xué)士學(xué)位申請(qǐng)資格”的規(guī)定內(nèi) 容。 以上承諾的法律結(jié)果、不能正常畢業(yè)及其他不可預(yù)見的后果由學(xué)生本 人承擔(dān)！ 學(xué)生本人簽字： 年 月 日 大連東軟信息學(xué)院畢業(yè)設(shè)計(jì)（論文） - 24 -