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