咖啡知識網(wǎng)站的設(shè)計和實現(xiàn) 計算機(jī)專業(yè)

咖啡知識網(wǎng)站的設(shè)計二、網(wǎng)站總體設(shè)計1．功能模塊設(shè)計首頁導(dǎo)航：什么是網(wǎng)站導(dǎo)航？大家打開一個公司網(wǎng)站，一般首先會看到網(wǎng)站首頁、關(guān)于我們、產(chǎn)品中心和聯(lián)系我們等等的欄目，點擊它們分別能鏈接到內(nèi)頁去，這些就是網(wǎng)站的導(dǎo)航。它的好處是能告訴用戶所在的位置，并快速的把用戶帶到他所想要去的地方，在很大程度上提高了用戶體驗！（詳細(xì)描述網(wǎng)站各欄目的功能，主要提供哪些信息。補(bǔ)充內(nèi)容?。┛Х鹊钠鹪矗嚎Х绕鹪吹臅r間，咖啡的主要產(chǎn)地，文化集錦，禮節(jié)等等?？Х鹊某煞郑嚎破盏男问降闹v解成分，咖啡豆的種類：三個大種類為基礎(chǔ)?？Х扰c健康：主要說明好處與壞處，社會現(xiàn)象等等?？Х刃那榻涣鲄^(qū)：留言板的形式開發(fā)小型論壇

網(wǎng)站頁面網(wǎng)站頁面丹寧酸以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度蛋白質(zhì)以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡因以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度開發(fā)數(shù)據(jù)庫開發(fā)動態(tài)的留言板，以供瀏覽者交流以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡心情交流區(qū)（留言板）咖啡的益處咖啡豆的種類咖啡的成分咖啡的起源丹寧酸以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度蛋白質(zhì)以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡因以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度開發(fā)數(shù)據(jù)庫開發(fā)動態(tài)的留言板，以供瀏覽者交流以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡心情交流區(qū)（留言板）咖啡的益處咖啡豆的種類咖啡的成分咖啡的起源以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度、圖2-1網(wǎng)站功能結(jié)構(gòu)3．關(guān)鍵代碼網(wǎng)頁中使用的是div+css技術(shù)，在html網(wǎng)頁中，首先引用css文件<linkhref="style.css"rel="stylesheet"type="text/css"/>，然后在html網(wǎng)頁中分別插入不同的div容器，設(shè)置不同容器的背景、內(nèi)容等，在導(dǎo)航部分插入每個導(dǎo)航對應(yīng)的網(wǎng)頁鏈接，從而使網(wǎng)站順利打開。<ahref="home.html"class="current">首頁</a>，值得一提的是設(shè)置的current樣式，含義是鼠標(biāo)定位到該頁面，比如當(dāng)點擊進(jìn)入首頁時，current樣式就是定位在首頁，用戶進(jìn)入咖啡的起源頁面時，current樣式就是定位在咖啡的起源頁面，設(shè)置current的樣式是顏色加深。修改意見：代碼不要截圖，請插入文本代碼；代碼段前標(biāo)出此段代碼實現(xiàn)的功能。\咖啡知識網(wǎng)站的設(shè)計摘要摘要應(yīng)將論文的內(nèi)容要點簡短明了地表達(dá)出來，內(nèi)容可以包括：網(wǎng)站制作的背景或現(xiàn)狀、網(wǎng)站制作的目的或意義、按照目錄標(biāo)題順序概括論文主要內(nèi)容、網(wǎng)站功能創(chuàng)新或開發(fā)技術(shù)特色。關(guān)鍵詞從摘要中選取。400字左右。重新編寫摘要！至少分3段描述。（第1段：簡述咖啡知識網(wǎng)站制作的背景、意義，以下前3段都是背景，縮減內(nèi)容?。翱Х取币辉~源自希臘語“Kaweh”，意思是“力量與熱情”。過多?？Х葮涫菍偕浇房频某＞G灌木，日常飲用的咖啡是用咖啡豆配合各種不同的烹煮器具制作出來的，而咖啡豆就是指咖啡樹果實內(nèi)之果仁，再用適當(dāng)?shù)暮姹悍椒ê姹憾桑Х任幕墒煊跉W洲。十六世紀(jì)初，咖啡向歐洲傳播開來，咖啡的起源跟中國的茶一樣是個五彩斑斕的跡，它最早的歷史記載要追溯到850年的波斯。第一座咖啡館出現(xiàn)于1660年的巴黎，獲得了文人、世術(shù)家和諸職責(zé)盧梭、狄德羅、丹東、羅伯斯庇爾等當(dāng)時社會名流們的積極贊助。單從這些名字就可以看出，咖啡館在當(dāng)時社會中扮演了一個多么重要的角色。威尼斯的第一家咖啡館開張于1683年，短時斯內(nèi)就發(fā)展到200多家。很久以來喝咖啡是歐洲和美國生活方式的一部分。在歐洲，人行道上遍布的咖啡館大傘成為一道亮麗街景，各式各樣的人在那里聚會、約見，喝意式濃縮咖啡或卡布基諾。這種潮流現(xiàn)在波及到了亞洲。整個中國最早種植咖啡的是臺灣省。時間：1884年最早且很有名氣：云南大理朱苦拉村由法國傳教士田德能種植。至今，中國咖啡在不斷的改進(jìn)和培育中已經(jīng)有很好的品質(zhì)了。而我們國內(nèi)很多喝咖啡的人甚至都不知道云南咖啡，所以，有可能你所買的很多進(jìn)口咖啡，有很多卻是真正的國產(chǎn)，所以為了向還沒有了解咖啡知識的朋友傳播和介紹咖啡文化，制作以咖啡色為網(wǎng)站主色調(diào)，想給用戶溫馨安靜的風(fēng)格體驗，網(wǎng)站以咖啡豆做頭部背景，讓用戶剛進(jìn)入網(wǎng)站有種真實，自然的感覺，緊接著在正文部分，為用戶沖調(diào)一杯濃郁的咖啡，讓用戶似乎可以聞到了咖啡的香味。（第2段：概述網(wǎng)站設(shè)計目標(biāo)、設(shè)計特色、適用人群、技術(shù)創(chuàng)新的等內(nèi)容。）本站定位為知識科普類門戶網(wǎng)站，介紹咖啡的成分、種類、起源等，讓平時只會品味咖啡的用戶對咖啡多了一層了解。對咖啡來說最重要的常識是種類，不同咖啡店，有不同咖啡，不同定價，所以本站重點介紹了幾種：藍(lán)山咖啡、貓屎咖啡、摩卡咖啡，并以圖片形式詳細(xì)介紹了幾種咖啡，讓用戶對所要獲取的信息更深入更透徹。（第3段：按照目錄標(biāo)題順序概括論文主要內(nèi)容）請補(bǔ)充具體內(nèi)容！關(guān)鍵詞：咖啡知識；咖啡豆資訊？、咖啡歷史？、HTML、CSS

目錄（按照正文重新編排目錄內(nèi)容與頁碼，分散對齊，按照藍(lán)字格式重新排版。）一、引言…………………2（一）開發(fā)背景…………2（二）開發(fā)意義…………2（三）開發(fā)工具…………2二、總體設(shè)計………………………31.功能模塊…………32.版面設(shè)計（原則）………………33.數(shù)據(jù)庫設(shè)計…………三、功能實現(xiàn)（模塊）…………………3（一）網(wǎng)站首頁（描述）…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)………………………4（二）咖啡的起源…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)………………………4（三）咖啡的成分…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)………………………4（四）咖啡的種類…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)………………………4（五）咖啡與健康…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)……………………4（六）咖啡心情留言板…………………41.網(wǎng)頁界面…………42.界面設(shè)計………………………43.代碼與實現(xiàn)………………………4四、結(jié)束語……………10參考文獻(xiàn)…………………咖啡知識網(wǎng)站的設(shè)計（標(biāo)題前空2字位置，以下自行修改！注意格式、字體）一、引言（一）開發(fā)背景說起咖啡，首先就要說咖啡樹，咖啡樹很可能就是在埃塞俄比亞的卡發(fā)?。↘AFFA）被發(fā)現(xiàn)的。一批的奴隸從非洲被販賣到也門和阿拉伯半島，咖啡也就被帶到了沿途的各地?？梢钥隙?，也門在15世紀(jì)或是更早既已開始種植咖啡了。阿拉伯雖然有著當(dāng)時世界上最繁華的港口城市摩卡，但卻禁止任何種子出口！這道障礙最終被荷蘭人突破了，1616年，他們終于將成活的咖啡樹和種子偷運到了荷蘭，開始在溫室中培植。有關(guān)于咖啡由來的傳說有好幾種，其中較為人熟知的是牧羊人的故事:根據(jù)羅馬一位語言學(xué)家羅士德．奈洛伊(1613-1707)的記載：大約紀(jì)元六世紀(jì)時，有位阿拉伯牧羊人卡爾代某日趕羊到伊索比亞草原放牧?xí)r，看到每只山羊都顯得無比興奮，雀躍不已，他覺得很奇怪，後來經(jīng)過細(xì)心觀察發(fā)現(xiàn)，這些羊群是吃了某種紅色果實才會興奮不已，卡爾代好奇地嘗了一些，發(fā)覺這些果實非常香甜美味，食後自己也覺得精神非常爽快，從此他就時常趕著羊群一同去吃這種美味果實。後來，一位回教徒經(jīng)過這里，便順手將這種不可思議的紅色果實摘些帶回家，并分給其他的教友們吃，所以其神奇效力也就因此流傳開來了。八世紀(jì)的時候，阿拉伯人開始大量飲用咖啡，當(dāng)時是將咖啡當(dāng)做酒和藥品使用。最初咖啡只是為了解除回教徒的困倦及醫(yī)生用以幫助人們保護(hù)“胃、皮膚和各種器官”。直到11世紀(jì)左右，人們才開始用水煮咖啡做為飲料。13世紀(jì)時，埃塞俄比亞軍隊入侵也門，將咖啡帶到了阿拉伯世界。因為伊斯蘭教義禁止教徒飲酒，有的宗教界人士認(rèn)為這種飲料刺激神經(jīng)，違反教義，曾一度禁止并關(guān)閉咖啡店，但埃及蘇丹認(rèn)為咖啡不違反教義，因而解禁，咖啡飲料迅速在阿拉伯地區(qū)流行開來?？Х菴offee這個詞，就是來源于阿拉伯語Qahwa，意思是“植物飲料”，后來傳到土耳其，成為歐洲語言中這個詞的來源。但在西元15世紀(jì)以前，咖啡長期被阿拉伯世界所壟斷，僅在回教國家間流傳;當(dāng)時主要被使用在醫(yī)學(xué)和宗教上，回教醫(yī)生和僧侶們承認(rèn)咖啡具有提神、醒腦、健胃、強(qiáng)身、止血等功效;15世紀(jì)初開始有文獻(xiàn)記載咖啡的使用方式，并且在此時期融入宗教儀式中，同時也出現(xiàn)在民間做為日常飲品。因回教世界嚴(yán)禁飲酒，因此咖啡成為當(dāng)時很重要的社交飲品。直到16、17世紀(jì)，透過威尼斯商人和海上霸權(quán)荷蘭人的買賣輾轉(zhuǎn)將咖啡傳入歐洲，很快地，這種充滿東方神秘色彩、口感馥郁香氣迷魅的黑色飲料受到貴族仕紳階級的爭相競逐，咖啡的身價也跟著水漲船高，甚至產(chǎn)生了“黑色金子”的稱號，當(dāng)時的貴族流行在特殊日子互送咖啡豆以示盡情狂歡，或是給久未謀面的親友，有財入袋、祝賀順?biāo)熘猓瑫r也是身分地位象征。而“黑色金子”在接下來風(fēng)起云涌的大航海時代，借由海運的傳播，全世界都被納入了咖啡的生產(chǎn)和消費版圖中。中國從上世紀(jì)九十年代后期以來，咖啡店像雨后春筍般出現(xiàn)在北京、上海等大陸城市的大街小巷，其中廣為人知的上島咖啡、星巴克咖啡、真鍋咖啡等咖啡連鎖或加盟店，或由臺商創(chuàng)立，或由臺商參股、代理，全面推動了大陸咖啡文化的興起和發(fā)展。而由臺商開設(shè)的一些小型、精致、風(fēng)格獨特的咖啡店，則進(jìn)一步詮釋了咖啡文化中浪漫、優(yōu)雅的一面，使咖啡在大陸逐漸普及。任何一個商業(yè)產(chǎn)業(yè)的普及都會伴隨著文化的變革，深化！在咖啡產(chǎn)業(yè)遍布全國的同時，會有越來越多的喝咖啡的人，對咖啡有興趣的人都會迫切的需要得到咖啡文化的知識普及，本站正是為這些用戶提供了平臺，讓更多人認(rèn)識咖啡了解咖啡。（二）開發(fā)意義咖啡廳是專門提供咖啡飲品和文化與服務(wù)的地方，開發(fā)網(wǎng)站的意義就在于線上也可以提供相關(guān)的文化知識與服務(wù)，是互聯(lián)網(wǎng)時代的新思維，與西方傳統(tǒng)文化的對接，我們先說說咖啡館。咖啡館興起以前的歐洲，可以為廣大民眾提供交流的公共場所，就是教堂。而書信的傳遞又是點對點的。信息的傳播非常緩慢?？Х瑞^出現(xiàn)以后，越來越多的人來到咖啡館，它是公共休息室，也是有效的信息發(fā)布站。曾經(jīng)，除了教堂，貴婦人在自家客廳組織的沙龍也受到藝術(shù)家思想家的歡迎，但它是局限在上流社會的，普通民眾根本無法接觸到?？Х瑞^就將這種情況完全打破。早先的英國咖啡館，只要付一便士買一杯咖啡，普通民眾就可以在咖啡館里聽名人的講座，閱讀書籍報紙等等。歷史上稱為“便士大學(xué)”。咖啡館慢慢將志同道合、興趣專業(yè)一致的人聯(lián)系起來，形成了自己的特色和主題。比如這是醫(yī)藥界聚會的咖啡館，那里又成了出版商和作家溝通的特定咖啡館等等。1680年開張的倫敦喬納森咖啡館，逐漸變成了很受歡迎的貿(mào)易站。到了1773年，一群股票經(jīng)紀(jì)人開了一家“新喬納森咖啡館”。就是今天倫敦證券交易所的前身。所以，早期歐洲的咖啡館是推動當(dāng)時社會進(jìn)步的積極因素?？Х瑞^經(jīng)過三百多年的存在，已經(jīng)形成了獨特的咖啡館文化，成為很多人生活的一部分。到了現(xiàn)代隨著互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)的發(fā)展，網(wǎng)路技術(shù)得到了迅速的成長，漸漸的人們使用網(wǎng)絡(luò)的習(xí)慣變得非常普及，在網(wǎng)絡(luò)上社交非常方便，足不出戶就可以和在網(wǎng)絡(luò)的使用者進(jìn)行溝通學(xué)習(xí)，為了節(jié)約學(xué)習(xí)成本，在網(wǎng)絡(luò)中可以找到許多的網(wǎng)站，以供查閱資料，給瀏覽者便捷的查找途徑，也是迎合有關(guān)于咖啡的愛好者分享知識與經(jīng)驗需要的渠道。（三）開發(fā)工具AdobeDreamweaver，簡稱“DW”，中文名稱"夢想編織者"，最初為美國MACROMEDIA公司開發(fā)，2005年被Adobe公司收購。DW是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計師和程序員可以在幾乎任何地方快速制作和進(jìn)行網(wǎng)站建設(shè)。AdobeDreamweaver使用所見即所得的接口，亦有HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）編輯的功能，借助經(jīng)過簡化的智能編碼引擎，輕松地創(chuàng)建、編碼和管理動態(tài)網(wǎng)站。訪問代碼提示，即可快速了解HTML、CSS和其他Web標(biāo)準(zhǔn)。使用視覺輔助功能減少錯誤并提高網(wǎng)站開發(fā)速度。制作效率：Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計工具，如PlaybackFlash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。網(wǎng)站管理：使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver會自動更新所有鏈接。使用支援文字、HTML碼、HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。AdobePhotoshop，簡稱“PS”，是由AdobeSystems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Adobeillustrator，常被稱為“AI”，是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件。作為一款非常好的矢量圖形處理工具，該軟件主要應(yīng)用于印刷出版、海報書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計到大型的復(fù)雜項目。二、網(wǎng)站總體設(shè)計1．功能模塊設(shè)計首頁導(dǎo)航：什么是網(wǎng)站導(dǎo)航？大家打開一個公司網(wǎng)站，一般首先會看到網(wǎng)站首頁、關(guān)于我們、產(chǎn)品中心和聯(lián)系我們等等的欄目，點擊它們分別能鏈接到內(nèi)頁去，這些就是網(wǎng)站的導(dǎo)航。它的好處是能告訴用戶所在的位置，并快速的把用戶帶到他所想要去的地方，在很大程度上提高了用戶體驗?。ㄔ敿?xì)描述網(wǎng)站各欄目的功能，主要提供哪些信息。補(bǔ)充內(nèi)容?。┛Х鹊钠鹪矗嚎Х绕鹪吹臅r間，咖啡的主要產(chǎn)地，文化集錦，禮節(jié)等等?？Х鹊某煞郑嚎破盏男问降闹v解成分，咖啡豆的種類：三個大種類為基礎(chǔ)?？Х扰c健康：主要說明好處與壞處，社會現(xiàn)象等等?？Х刃那榻涣鲄^(qū)：留言板的形式開發(fā)小型論壇

網(wǎng)站頁面網(wǎng)站頁面丹寧酸以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度蛋白質(zhì)以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡因以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度開發(fā)數(shù)據(jù)庫開發(fā)動態(tài)的留言板，以供瀏覽者交流以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡心情交流區(qū)（留言板）咖啡的益處咖啡豆的種類咖啡的成分咖啡的起源丹寧酸以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度蛋白質(zhì)以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡因以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度開發(fā)數(shù)據(jù)庫開發(fā)動態(tài)的留言板，以供瀏覽者交流以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度咖啡心情交流區(qū)（留言板）咖啡的益處咖啡豆的種類咖啡的成分咖啡的起源以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度以圖文結(jié)合方式呈現(xiàn)，使用文字，圖片線條的結(jié)合，增加網(wǎng)站舒適度、圖2-1網(wǎng)站功能結(jié)構(gòu)2．版面設(shè)計在咖啡網(wǎng)站整體版面布局中，需要更多運用CSS樣式和html代碼使網(wǎng)站無論在色彩搭配上還是與用戶交互上都能提現(xiàn)出產(chǎn)品的特色和優(yōu)勢。需要完成的各類預(yù)期效果：色彩溫馨，版面清爽，搭配合理，方便閱讀原則,版式設(shè)計的首要目的是讓讀者以最快的速度、最便捷的方式找到他所需要的信息，一致性原則;版式設(shè)計風(fēng)格要與內(nèi)容訴求的觀點與情節(jié)協(xié)調(diào)一致由于是食品類網(wǎng)站，所以版面不宜生硬死板或是過于冷艷，但也要注意整體格局。采用溫暖清晰色彩、板塊布局工整。主題風(fēng)格偏向溫馨怡人，網(wǎng)頁主要以咖啡色為背景，淺白色為輔，如圖2-1所示。（修改：此圖太小，文字不清晰！）圖2-1圖名？1．標(biāo)號為“圖A-B”二級即可，A表示第幾部分，B表示此部分第幾張圖2．圖號與圖名在圖的下方、居中，自行修改全文圖的標(biāo)號與圖名！版面合理，頁面鏈接無誤。為避免布局過于混亂，各個div之間的位置間距要控制得當(dāng)，代碼的正確應(yīng)用，html與CSS的簡潔書寫，使之有更豐富的效果，此外也要保證頁面間的鏈接。3．?dāng)?shù)據(jù)表設(shè)計修改意見：補(bǔ)充留言板模塊的數(shù)據(jù)表設(shè)計內(nèi)容數(shù)據(jù)表設(shè)計描述參考樣例：（藍(lán)字部分）網(wǎng)站留言板采用……數(shù)據(jù)庫，數(shù)據(jù)庫中包含管理員表、出勤表、考勤配置表、部門表、職工表、請假表、工資統(tǒng)計表、工資表、績效表、菜單表、菜單組表、角色目錄表、角色表共13張數(shù)據(jù)表，以下詳述各表功能及其屬性列表設(shè)置。出勤表存儲員工個人的工作考勤信息，包括員工編號、加班時間、遲到時間、早退時間和曠工時間等。如表2-1所示。表2-1管理員表字段名類型寬度是否為空說明adminUserNamevarchar20Notnull登錄名adminPasswordvarchar32Notnull登錄密碼roleIdIntNotnull驗證碼JobNumbervarchar50null工作編號修改意見：以下藍(lán)色部分屬于“開發(fā)工具”介紹，調(diào)整到第一部分的“（三）開發(fā)工具”內(nèi)MySQL關(guān)系型數(shù)據(jù)庫管理系統(tǒng)（MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQLAB公司開發(fā)，目前屬于Oracle旗下產(chǎn)品。MySQL是最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，在WEB應(yīng)用方面，MySQL是最好的RDBMS(RelationalDatabaseManagementSystem，關(guān)系數(shù)據(jù)庫管理系統(tǒng))應(yīng)用軟件。MySQL是一種關(guān)系數(shù)據(jù)庫管理系統(tǒng)，關(guān)系數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。MySQL所使用的SQL語言是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。MySQL軟件采用了雙授權(quán)政策，分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇MySQL作為網(wǎng)站數(shù)據(jù)庫。由于其社區(qū)版的性能卓越，搭配PHP和Apache可組成良好的開發(fā)環(huán)境。）WAMPWindows下的Apache+Mysql/MariaDB+Perl/PHP/Python，一組常用來搭建動態(tài)網(wǎng)站或者服務(wù)器的開源軟件，本身都是各自獨立的程序，但是因為常被放在一起使用，擁有了越來越高的兼容度，共同組成了一個強(qiáng)大的Web應(yīng)用程序平臺。隨著開源潮流的蓬勃發(fā)展，開放源代碼的LAMP已經(jīng)與J2EE和.Net商業(yè)軟件形成三足鼎立之勢，并且該軟件開發(fā)的項目在軟件方面的投資成本較低，因此受到整個IT界的關(guān)注。LAMP是基于Linux，Apache，MySQL/MariaDB和PHP的開放資源網(wǎng)絡(luò)開發(fā)平臺，PHP是一種有時候用Perl或Python可代替的編程語言。這個術(shù)語來自歐洲，在那里這些程序常用來作為一種標(biāo)準(zhǔn)開發(fā)環(huán)境。名字來源于每個程序的第一個字母。每個程序在所有權(quán)里都符合開放源代碼標(biāo)準(zhǔn)：Linux是開放系統(tǒng)；Apache是最通用的網(wǎng)絡(luò)服務(wù)器；mySQL是帶有基于網(wǎng)絡(luò)管理附加工具的關(guān)系數(shù)據(jù)庫；PHP是流行的對象腳本語言，它包含了多數(shù)其它語言的優(yōu)秀特征來使得它的網(wǎng)絡(luò)開發(fā)更加有效。開發(fā)者在Windows操作系統(tǒng)下使用這些Linux環(huán)境里的工具稱為使用WAMP。（圖2-3-1菜單頁面）（圖2-3-2wamp管理頁面截圖）

三、網(wǎng)站功能實現(xiàn)修改意見：按照“（一）首頁導(dǎo)航”修改網(wǎng)站功能實現(xiàn)部分每個模塊的三個標(biāo)題名——欄目界面、界面設(shè)計、關(guān)鍵代碼。其中，代碼不要截圖，請插入文本代碼。（一）首頁導(dǎo)航1．欄目界面在此應(yīng)插入網(wǎng)站首頁完整界面，其中包括導(dǎo)航欄。（示圖3-1-1）修改圖號、圖名！使用工具：首先在電腦上用到的是Photoshop、Dreamweaver收集資料：從咖啡的起源、介紹、功效等文字內(nèi)容收集開始，然后一些關(guān)于咖啡的分類資料，圖片，和很多可以做大背景的圖片收集起來備用。2．界面設(shè)計任何一個網(wǎng)站必須有三部分組成：頭部，正文和頁腳。本站的頭部使用了主色調(diào)咖啡色，濃郁、深沉、溫暖，頭部包含三塊：logo，圖標(biāo)和導(dǎo)航，logo使用的是英文<ahref="home.html">Coffee</a>和副標(biāo)題<span>盡情享受咖啡帶來的樂趣！</span>，為logo加上鏈接，讓內(nèi)頁點擊logo的時候都可以回到主頁。小圖標(biāo)部分可以說是快捷菜單，放在logo右側(cè)，增加網(wǎng)站飽滿度，分別是回到主頁，留言板和網(wǎng)站地圖。緊接著是導(dǎo)航欄，導(dǎo)航欄是使用ul標(biāo)簽，將每個鏈接設(shè)置了大小后，全部向左浮動，使導(dǎo)航可以橫向排列，為了導(dǎo)航更加飽滿，加入了邊框?qū)傩裕瑸槊總€鏈接加上左邊框：border-left:1pxsolid#9a705b;，正文部分使用的是插入div模塊后，設(shè)置模塊的尺寸和背景圖，.container{width:990px;margin:0auto}設(shè)置尺寸是990像素，居中對齊，保證網(wǎng)頁內(nèi)容居于屏幕正中央，然后再插入內(nèi)容，頁腳部分由于網(wǎng)站首頁是整體重心偏右，所以本站將版權(quán)部分靠左以達(dá)到均衡，而一般網(wǎng)頁的版權(quán)聲明部分都是居中對齊。草圖制作：在Photoshop中剪裁各個圖片，建立900像素寬度的網(wǎng)頁，將各個板塊填充上，因為咖啡網(wǎng)站的特殊性，在設(shè)計方面，必須采用溫暖的風(fēng)格設(shè)計，因此考慮用大量彩色產(chǎn)品圖片拼接，配合合理的布局，應(yīng)用暖色背景，從而使整體形成溫暖風(fēng)格。（圖3-1-2ps工具菜單）3．關(guān)鍵代碼網(wǎng)頁中使用的是div+css技術(shù)，在html網(wǎng)頁中，首先引用css文件<linkhref="style.css"rel="stylesheet"type="text/css"/>，然后在html網(wǎng)頁中分別插入不同的div容器，設(shè)置不同容器的背景、內(nèi)容等，在導(dǎo)航部分插入每個導(dǎo)航對應(yīng)的網(wǎng)頁鏈接，從而使網(wǎng)站順利打開。<ahref="home.html"class="current">首頁</a>，值得一提的是設(shè)置的current樣式，含義是鼠標(biāo)定位到該頁面，比如當(dāng)點擊進(jìn)入首頁時，current樣式就是定位在首頁，用戶進(jìn)入咖啡的起源頁面時，current樣式就是定位在咖啡的起源頁面，設(shè)置current的樣式是顏色加深。修改意見：代碼不要截圖，請插入文本代碼；代碼段前標(biāo)出此段代碼實現(xiàn)的功能。（首頁截圖3-1-4）（二）咖啡的起源1.網(wǎng)頁界面（頁面截圖3-2-1）2.界面設(shè)計內(nèi)頁部分的布局主要是參考首頁，因為一個網(wǎng)站必須風(fēng)格統(tǒng)一，內(nèi)頁延續(xù)了首頁的頭部和尾部，不同的是每個頁面的內(nèi)容部分都進(jìn)行了變更，不光是文字圖片的變化，為了讓網(wǎng)站更加豐富也變更了背景圖片，內(nèi)容的布局等，比如咖啡的起源，是插入了兩個box,<divclass="box"style="width:48%;float:right;">設(shè)置2個box的尺寸都是寬度48%。然后一個向左浮動，一個向右浮動，從而實現(xiàn)左右兩列的效果。3.代碼實現(xiàn)（頁面截圖3-2-2）（頁面截圖3-2-3）三、咖啡的成分1.網(wǎng)頁界面（頁面截圖3-3-1）2.界面設(shè)計PS相關(guān)問題，包括各種圖層和效果的應(yīng)用，dreamweaver相關(guān)問題，排版預(yù)覽，css層疊樣式應(yīng)用等等。（1）圖片圖層背景的透明與否問題。此問題出現(xiàn)在網(wǎng)站的背景圖片制作方面，有些地方如果不用透明背景，則會導(dǎo)致顯示相互影響，而有些地方如果用了透明圖層，會導(dǎo)致顏色過淡，以及顯示出背景圖等問題，后來經(jīng)過仔細(xì)的對比，將適合透明的圖片設(shè)置為透明，并且保存為適合透明圖層的PNG格式。DIV定位與排版。這個問題難度較大，并且極易出現(xiàn)問題，在首頁以及各個頁面中，分別涉及多個div的排列尤其是居中問題，一開始非?；靵y，完全凌亂，沒有頭緒，后來發(fā)現(xiàn)，解決這個問題主要是要有條理和明確不同定位CSS的效果，把框架搞清楚以后一個一個的寫，不斷填充測試，最后達(dá)到較良好的效果。3.代碼實現(xiàn)（圖3-3-2）（圖3-3-3）JS的應(yīng)用邏輯。最難的就是JS腳本的書寫和應(yīng)用，有些比較難以理解，而且最容易出差錯。有些在頁面打開時就要加載，需要在body里輸代碼，這個還有待掌握，最終調(diào)試失敗。（四）咖啡豆的種類1.網(wǎng)頁界面(圖3-4-1)2.界面設(shè)計<div>標(biāo)簽?zāi)J(rèn)會通過margin占滿一行

需要給<div>標(biāo)簽加上float屬性，才能達(dá)到多個標(biāo)簽在容器內(nèi)并排顯示

另父標(biāo)簽雖然結(jié)構(gòu)上包括了子標(biāo)簽，但需要加上overflow:hidden屬性才能確保父標(biāo)簽大小完全包裹子標(biāo)簽，CSS邊框即CSSborder是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式CSS屬性3.代碼實現(xiàn)(圖3-4-2)<li>標(biāo)簽定義列表項目。<li>標(biāo)簽可用在有序列表(<ol>)和無序列表(<ul>)中。(圖3-4-3)（五）咖啡與健康1.網(wǎng)頁界面(圖3-5-1)2.頁面設(shè)計<divid="page">的意思就是：新建一個div，名字是page.；

DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時可以稱其為圖層。

DIV在編程中又叫做整除，即只得商的整數(shù)。DIV元素是用來為HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。（圖3-5-2）3.代碼實現(xiàn)（圖3-5-3）（圖3-5-4）（六）咖啡心情留言板1.網(wǎng)頁界面（圖3-6-1）2.頁面設(shè)計三列的網(wǎng)格為主，主要的日期、用戶的名稱、頁面內(nèi)容。實體：一種可以用來記錄，展示文字信息的載體，有比較強(qiáng)的時效性。一般以黑板、木板為載體，用來留言。各種各樣的留言使用。留言板還有引申的“\t"/item/%E7%95%99%E8%A8%80%E6%9D%BF/_blank"網(wǎng)絡(luò)留言板”。這個和網(wǎng)絡(luò)留言本不一樣的地方是留言板一般比較集中的反應(yīng)信息的。3.代碼實現(xiàn)（（圖3-6-2）（圖3-6-3）（圖3-6-4）（圖3-6-5）（圖3-6-6）（圖3-6-7）四、結(jié)束語重新整理結(jié)束語內(nèi)容，可以包括以下內(nèi)容：概述網(wǎng)站制作背景與意義；總結(jié)畢業(yè)設(shè)計整個過程；指出網(wǎng)站設(shè)計優(yōu)點與特色、網(wǎng)站有待進(jìn)一步完善、改進(jìn)的不足之處；簡述畢業(yè)設(shè)計的收獲與體會（可選內(nèi)容）。在網(wǎng)頁制作以前，我首先查閱了大量的相關(guān)資料，對技術(shù)有了大概的了解，并且搜集了大量的資料。然后我開始了具體的制作。這次開發(fā)使我個人對網(wǎng)站建設(shè)開發(fā)有了極大的興趣，對我的學(xué)習(xí)有極大的益處，我很好的學(xué)習(xí)到了很多很多的技術(shù)。雖然整個開發(fā)用了不少時間，但是我認(rèn)為是值得的，我學(xué)到的東西遠(yuǎn)比課本教給我的多得多，我發(fā)現(xiàn)了網(wǎng)站的巨大用處，也明白了網(wǎng)站開發(fā)這類多媒體技術(shù)其實離我們并不遙遠(yuǎn)，我非常希望以后能夠有更多的機(jī)會學(xué)習(xí)他！從剛開始接觸網(wǎng)站到現(xiàn)在完成，經(jīng)歷的時間雖不是很長，但在這期間我們所做的工作還是很多的。包括選材、網(wǎng)站頁面設(shè)計、各種軟件運用（Photoshop、Flash、Dreamweaver、Html）等等。我們覺得最大的收獲是不僅學(xué)到了知識，更為重要的是培養(yǎng)了不放棄努力奮斗的精神。作為自己獨立制作的咖啡網(wǎng)站，在網(wǎng)頁制作以前，我首先查閱了大量的相關(guān)資料，對技術(shù)有了大概的了解，并且搜集了大量的資料。然后我開始了具體的制作。首先要做的就是資料的搜集，不僅僅是有關(guān)圖片的搜集，有些關(guān)于咖啡的相關(guān)文字介紹也要記錄，而屬于圖片的素材就歸入images文檔中，包括網(wǎng)上下載和自己利用photoshop軟件完成的素材。針對所設(shè)計的咖啡網(wǎng)站，其中最先遇到的問題就是photoshop軟件的生疏，各種操作都需要去重新熟悉應(yīng)用，如要將網(wǎng)上下載的咖啡圖片進(jìn)行摳圖時就有點難度，使用魔棒工具摳出后總覺得有點粗糙，然后就是使用文本工具時字體無法描邊，也不知道從哪里點擊進(jìn)行變換，后來才知道編輯菜單中的自由變換可以達(dá)到該功能，同時還知道有些字體的變換需要柵格化才能繼續(xù)操作。這次網(wǎng)站設(shè)計，我總結(jié)了幾點：確定網(wǎng)站主題：對于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網(wǎng)站的特色，也會帶來高強(qiáng)度的勞動，給網(wǎng)站的及時更新帶來困難。掌握建網(wǎng)工具：在制作網(wǎng)頁的時候，一定要