畢業(yè)設(shè)計（論文）靜態(tài)企業(yè)網(wǎng)頁制作

1、<p><b>　　內(nèi)蒙古化工職業(yè)學院</b></p><p>　　畢業(yè)設(shè)計(論文、專題實驗)任務書</p><p>　姓 名專業(yè)計算機應用技術(shù)班級計應11-1</p><p>　指導教師</p><p>　題 目靜態(tài)企業(yè)網(wǎng)頁</p><p>　原始數(shù)據(jù)</p>

2、<p>　說明書(論文、實驗)主要內(nèi)容本次設(shè)計了解了靜態(tài)網(wǎng)頁設(shè)計與制作的內(nèi)涵和意義。運用Dreanweaver軟件，采用div+css為企業(yè)網(wǎng)頁進行設(shè)計與制作，根據(jù)其內(nèi)容、策劃等確定基本思路，制定方案，并按思路認真完成本次設(shè)計。</p><p>　圖紙要求</p><p>　對學生綜合訓練方面的要求根據(jù)所學課程的理論知識，將理論與實踐相結(jié)合，設(shè)計制作出一套完整的作品。</

3、p><p>　完成期限2013 年 11 月 25 日至 2013 年 12月 15 日</p><p>　備 注:</p><p>　簽發(fā): 日期: 2013 年 12 月</p><p><b>　　內(nèi)蒙古化工職業(yè)學院<

4、;/b></p><p>　　畢業(yè)設(shè)計(論文)評閱意見表</p><p><b>　　摘 要</b></p><p>　　計算機和計算機網(wǎng)絡(luò)的飛速發(fā)展，人們對計算機網(wǎng)絡(luò)的依賴是越來越大。人們在網(wǎng)上聊天交友，在網(wǎng)上請教問題，查閱資料，還在網(wǎng)上聽音樂。除此之外，人們還會在網(wǎng)上進行商務交易、下載信息，有著眾多的使用者。尤其是電子商務大大的減少了

5、人們對周圍環(huán)境的依賴，無論是哪里的網(wǎng)友，都可以瀏覽到世界各地的各類信息，非常的方便，由于以上的優(yōu)勢，各類網(wǎng)站如雨后春筍般的出現(xiàn)，企業(yè)網(wǎng)站也不例外。</p><p>　　本論文著重對div+css布局與美化公司網(wǎng)頁進行了討論；同時根據(jù)客戶需求，采用div+css實現(xiàn)了咨詢公司網(wǎng)頁的設(shè)計，具體實現(xiàn)了首頁、公司簡介、品牌歷史與技術(shù)創(chuàng)新、產(chǎn)品展示、用戶注冊與登錄聯(lián)系我們、在線留言等功能，系統(tǒng)符合公司網(wǎng)站的需求。</

6、p><p>　　關(guān)鍵詞： 網(wǎng)頁設(shè)計 Dreamweaver div+css 企業(yè)網(wǎng)頁</p><p><b>　　目 錄</b></p><p><b>　　第1章 前言1</b></p><p>　　第2章 靜態(tài)網(wǎng)頁制作概述2</p><p>　　2.1 靜態(tài)頁面2&

7、lt;/p><p>　　2.2 網(wǎng)頁開發(fā)技術(shù)2</p><p>　　2.3 網(wǎng)頁布局2</p><p>　　2.3.1網(wǎng)頁布局方法2</p><p>　　2.3.2網(wǎng)頁布局技術(shù)3</p><p><b>　　2.4網(wǎng)頁配色3</b></p><p>　　2.5 網(wǎng)頁設(shè)

8、計流程3</p><p>　　2.6 網(wǎng)頁設(shè)計原則3</p><p>　　第3章 網(wǎng)頁需求分析5</p><p>　　3.1 課題來源5</p><p>　　3.2 需求分析5</p><p>　　第4章 相關(guān)技術(shù)7</p><p>　　4.1網(wǎng)頁制作軟件 Dreamweaver

9、7</p><p>　　4.2 DIV+CSS7</p><p>　　4.2.1 div7</p><p>　　4.2.2 CSS8</p><p>　　4.2.3 樣式8</p><p>　　4.2.4 層疊8</p><p>　　4.3 DIV+CSS簡介8</p>

10、<p>　　第5章 企業(yè)網(wǎng)頁的實現(xiàn)10</p><p>　　5.1 布局與配色10</p><p>　　5.2企業(yè)首頁10</p><p>　　5.3 公司簡介11</p><p>　　5.4產(chǎn)品展示11</p><p>　　5.4用戶注冊12</p><p>　　5.5

11、 在線留言13</p><p><b>　　畢業(yè)設(shè)計總結(jié)14</b></p><p><b>　　參考文獻15</b></p><p><b>　　致 謝16</b></p><p><b>　　第1章 前言</b></p><

12、p>　　網(wǎng)頁和網(wǎng)站在如今的Internet網(wǎng)絡(luò)中已經(jīng)成為重要的基礎(chǔ)，是作為政府和事業(yè)單位工作、公司宣傳、電子商務等社會和經(jīng)濟內(nèi)容的網(wǎng)絡(luò)平臺支持。政府、事業(yè)單位和企業(yè)對于網(wǎng)頁的設(shè)計與制作也越來越重視。</p><p>　　由于Web2.0的成熟和廣泛應用，網(wǎng)頁設(shè)計和制作也和以前截然不同。尤其是Div+CSS技術(shù)的應用對于網(wǎng)站樣式和內(nèi)容的維護起到了至關(guān)重要的作用。Adobe公司對于網(wǎng)絡(luò)整合軟件Dreamweav

13、er在這方面做了很大的改進，Dreamweaver CS5操作更加方便簡捷，給予Div+CSS布局全面的支持。</p><p>　　當今世界已進入信息時代，Internet成為21世紀最受關(guān)注的焦點之一,它的飛速發(fā)展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網(wǎng)絡(luò)技術(shù)的發(fā)展也取得了巨大的成就，為網(wǎng)站開發(fā)提供了很好的技術(shù)支持。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡(luò)營銷平臺，互聯(lián)網(wǎng)應用規(guī)模正在不斷擴大。其

14、中，特別是中小型企業(yè)，對于網(wǎng)絡(luò)平臺搭建的需求相當?shù)钠惹?。各大門戶網(wǎng)，企業(yè)網(wǎng)都在WEB2.0的標準上,采用div+css來布局，因此有了此次的選題。</p><p>　　企業(yè)網(wǎng)站是一個企業(yè)不可缺少的部分，它能介紹企業(yè)文化、經(jīng)營理念、特色服務及企業(yè)在全國的網(wǎng)點分布。拓寬顧客市場，增加企業(yè)與客戶之間的聯(lián)系，縮短二者之間的距離。提高企業(yè)知名度，為企業(yè)今后的業(yè)務發(fā)展開辟一個良好的社會環(huán)境。它的內(nèi)容對于企業(yè)來說至關(guān)重要,企業(yè)

15、概況、企業(yè)論談、企業(yè)特色服務、最新企業(yè)新聞動態(tài)等部分應該能夠為用戶提供充足的信息。企業(yè)網(wǎng)站做成檢索迅速、查找方便、可靠性高、存儲量大、保密性好、壽命長、成本低、維護方便、信息實時性強的功能完善的大型企業(yè)網(wǎng)站。這些優(yōu)點能夠極大地提高了企業(yè)網(wǎng)站的效率,也是企業(yè)走向科學化、信息化與世界接軌的重要條件。</p><p>　　第2章 靜態(tài)網(wǎng)頁制作概述</p><p>　　靜態(tài)網(wǎng)頁有時也被稱為平面頁。

16、靜態(tài)網(wǎng)頁的網(wǎng)址形式通常為htm（超文本標記語言）結(jié)尾 ，還有就是以超文本標記語言（.htm、.html）、.shtml、.xml（可擴展標記語言）等為后綴的。在超文本標記語言格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF格式的動畫、FLASH、滾動字幕等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的動態(tài)網(wǎng)頁是不同的概念。靜態(tài)網(wǎng)頁面通常是超文本標記語言文檔存儲為文件在文件系統(tǒng)里頭，并且可以通過HTTP訪問網(wǎng)絡(luò)服務器。</p&g

17、t;<p><b>　　2.1 靜態(tài)頁面</b></p><p>　　靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp，php，jsp，.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術(shù)例外）。但是靜態(tài)頁面最大的好處是下載速度快，因為不需要程序運算和數(shù)據(jù)庫連接。常

18、見的靜態(tài)頁面以.html、.htm為擴展名的。并非網(wǎng)站上沒有動畫的就是靜態(tài)頁面。</p><p>　　2.2 網(wǎng)頁開發(fā)技術(shù)</p><p>　　HTML（HyperTextMark-upLanguage）即超文本標記語言，是WWW的描述語言。嚴格的來講，HTML不能算做一門編程語言，因為它沒有自己的數(shù)據(jù)類型，也沒有分支、循環(huán)等控制結(jié)構(gòu)。它的設(shè)計簡單，結(jié)構(gòu)靈活，允許在Web瀏覽器及其它兼容的

19、應用程序中顯示文本和圖像，并且文檔的某些部分可以成為超鏈接。完成后把這些文檔保存為*.html文件，然后用瀏覽器打開。HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。</p><p><b>　　2.3 網(wǎng)頁布局</b></p><p>　

20、　網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。網(wǎng)頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從。</p><p>　　2.3.1網(wǎng)頁布局方法</p><p>　　網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。</p><p>　　企業(yè)網(wǎng)頁布局方法采用軟件布局法，利用P

21、hotoshop軟件所具有的對圖像的編輯功能用到設(shè)計網(wǎng)頁布局上更顯得心應手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計出用紙張無法實現(xiàn)的布局意念。</p><p>　　2.3.2網(wǎng)頁布局技術(shù)</p><p>　　企業(yè)網(wǎng)頁布局技術(shù)采用層疊樣式表的應用，在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點復雜，但它

22、的確是一個好的布局方法。曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。</p><p><b>　　2.4網(wǎng)頁配色</b></p><p>　　企業(yè)網(wǎng)頁的配色主要采用白色和灰色這樣一種大眾化的配色，使網(wǎng)頁簡潔大方而且方便瀏覽者瀏覽，同時帶給用戶一種新的體驗。</p><p>　　顏色可以瞬間改變我

23、們的情緒和意見。顏色會讓我們感覺到舒適、敬畏，或者激動。顏色是平衡中的重要部分，不能忽略。</p><p>　　2.5 網(wǎng)頁設(shè)計流程</p><p>　　網(wǎng)頁設(shè)計是一個互動的過程，不僅是設(shè)計師構(gòu)思設(shè)計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計人員共同參與協(xié)商才可以，具體流程如下：</p><p>　　首先，獲取客戶需求和資料。在設(shè)計網(wǎng)站頁面之前，設(shè)計

24、師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設(shè)計人員無法憑空進行設(shè)計制作。在這個步驟中，雙方的溝通與交流是非常重要的。</p><p>　　其次，確定網(wǎng)站內(nèi)容。設(shè)計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設(shè)計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意的效果。在具體設(shè)計時，設(shè)計人員應該為網(wǎng)站定位一個主題，從而保證所

25、有網(wǎng)頁都圍繞這個主題進行設(shè)計制作，保證風格的和諧統(tǒng)一。</p><p>　　然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳發(fā)布文件。</p><p>　　最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設(shè)計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設(shè)計人員需要負責培訓客戶方如何使用后臺管理

26、，這樣客戶就可以自己通過后臺管理添加信息，設(shè)計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。</p><p>　　2.6 網(wǎng)頁設(shè)計原則</p><p><b>　　1、目的性</b></p><p>　　任何一個網(wǎng)站，必須首先具有明確的目的和目標群體。網(wǎng)站是面對客戶、供應商、消費者還是全部？主要目的是為了介紹企業(yè)、宣傳某種產(chǎn)品還是為了試驗電子商務？如果目

27、的不是唯一的，還應該清楚的列出不同目的的輕重關(guān)系。建站包括類型的選擇、內(nèi)容功能的籌備、界面設(shè)計等各個方面都受到目的性的直接影響，因此目的性是一切原則的基礎(chǔ)。</p><p><b>　　2、專業(yè)性 </b></p><p>　　網(wǎng)站的信息內(nèi)容應該充分展現(xiàn)企業(yè)的專業(yè)特性，對外介紹企業(yè)自身，最主要的目的是向外界介紹企業(yè)的業(yè)務范圍、性質(zhì)和實力，從而創(chuàng)造更多的商機。<

28、/p><p><b>　　3、實用性</b></p><p>　　網(wǎng)站提供的功能服務應該是切合瀏覽者實際需求的且符合企業(yè)特點的。例如網(wǎng)上銀行提供免費電子郵件和個人主頁空間就既不符合瀏覽者對網(wǎng)上銀行網(wǎng)站的需求也不是銀行的優(yōu)勢，這樣的功能服務提供不但會削弱瀏覽者對網(wǎng)站的整體印象，還浪費了企業(yè)的資源投入，有弊無利。</p><p><b>　　

29、4、層次性</b></p><p>　　條理清晰的結(jié)構(gòu)，表現(xiàn)為網(wǎng)站的板塊劃分的合理性，信息內(nèi)容的獲取和功能服務的過程都應該盡量將所需要進行的步驟控制在3-5步以內(nèi)，不得不需要更多的步驟的時應該有明確的提示。</p><p><b>　　5、一致性</b></p><p>　　頁面整體設(shè)計風格的一致性：整體頁面布局和用圖用色風格前后一

30、致。界面元素的命名的一致性：同樣的元素應該用同樣的命名；同類元素命名滿足一致性，做到即使某個元素的表述不清楚也能從上下文推斷其義。功能一致性：完成同樣的功能應該盡量使用同樣的元素。元素風格一致性：界面元素的美觀風格、擺放位置在同一個界面和不同界面之間都應該是一致的。</p><p>　　第3章 網(wǎng)頁需求分析</p><p><b>　　3.1 課題來源</b><

31、/p><p>　　信息產(chǎn)業(yè)的發(fā)展，促使相關(guān)技術(shù)也得到相應的發(fā)展。電子商務作為未來商務、流通等領(lǐng)域的熱門從1999年開始也得到飛速發(fā)展，而基于網(wǎng)上的網(wǎng)站建設(shè)、網(wǎng)頁制作和發(fā)布也得到了重視。</p><p><b>　　建立網(wǎng)站的好處：</b></p><p>　　1、可以利用網(wǎng)站及時得到客戶的反饋信息。</p><p>　　2、

32、可以降低通信費用。</p><p>　　3、可以與潛在客戶建立商業(yè)聯(lián)系。</p><p>　　4、可以與客戶保持密切聯(lián)系。</p><p>　　5、可以全面詳細地介紹美食及其制作方法。</p><p><b>　　3.2 需求分析</b></p><p>　　網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息的一種方

33、式，是企業(yè)開展電子商務的基礎(chǔ)設(shè)施和信息平臺。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站則是反映企業(yè)形象和文化的重要窗口。</p><p>　　在IT行業(yè)迅速發(fā)展的今天,企業(yè)網(wǎng)站的建設(shè)已經(jīng)成為一個企業(yè)發(fā)展必不可少的存在。對于創(chuàng)意設(shè)計有限公司來說，我們將建立一個以宣傳為目的的網(wǎng)站類型。將于短期內(nèi)強力打造公司的宣傳力度，讓更多的客戶了解，信任公司。網(wǎng)站的建設(shè)，也是公司對于宣傳方面的長期投資。本網(wǎng)站

34、需要設(shè)置一下幾個模塊：</p><p><b>　　1、企業(yè)品牌形象</b></p><p>　　對于一個以生產(chǎn)為主的大型企業(yè)而言，企業(yè)的品牌形象至關(guān)重要。 特別是對于互聯(lián)網(wǎng)技術(shù)高度發(fā)展的今天，大多客戶都是通過網(wǎng)絡(luò)來了解企業(yè)產(chǎn)品、企業(yè)形象及企業(yè)實力，因此，企業(yè)網(wǎng)站的形象往往決定了客戶對企業(yè)產(chǎn)品的信心。建立具有國際水準的網(wǎng)站，能夠極大的提升企業(yè)的整體形象。</p&

35、gt;<p><b>　　2、企業(yè)首頁</b></p><p>　　網(wǎng)站首頁體現(xiàn)的是一個網(wǎng)站的門面，也顯示了企業(yè)的一些相關(guān)的消息，是網(wǎng)站設(shè)計中比較重要的一部分，它以網(wǎng)站綜合平臺的形式展示整個企業(yè)網(wǎng)站各部分的主體內(nèi)容，是整個網(wǎng)站的導航，能夠讓瀏覽者在第一時間內(nèi)領(lǐng)略到企業(yè)特色所在。</p><p><b>　　3、企業(yè)介紹</b><

36、;/p><p>　　具體介紹出企業(yè)的背景，經(jīng)營項目，榮譽資質(zhì)和公司的發(fā)展史，結(jié)構(gòu)，業(yè)務流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司便于樹立企業(yè)形象。</p><p><b>　　2、產(chǎn)品展示</b></p><p>　　一般其他營銷模式的企業(yè)網(wǎng)站都是注重產(chǎn)品展示來加強企業(yè)的宣傳力度，但是對于創(chuàng)意設(shè)計有限公司來說，沒有其實際物品展示，

37、只有展現(xiàn)其出眾的業(yè)績實例才能讓客戶信服，才能從側(cè)面展現(xiàn)出公司的實力，讓客戶更放心的把業(yè)務交給公司處理。</p><p><b>　　4、用戶注冊</b></p><p>　　使用戶成為會員，可以足不出戶通過互聯(lián)網(wǎng)向客服了解產(chǎn)品的情況，在降低企業(yè)內(nèi)部資源順好、減低成本、加強企業(yè)員工與員工，企業(yè)與員工之間的聯(lián)系和溝通等方面發(fā)揮巨大的作用，最終使企業(yè)的運營和運作打到最大的優(yōu)

38、化。</p><p><b>　　5、在線留言</b></p><p>　　在線留言是瀏覽者對我們提出的意見和建議，在留言過后我們也可以通過這個發(fā)現(xiàn)我們的不足和好的地方，要是發(fā)現(xiàn)我們的不好，我們也可以接收到您的寶貴意見并給您最滿意的答復，對于好的我們也可以讓更多的瀏覽者看到，顧客的評價是對其他的瀏覽者的最大的信任。</p><p><b&

39、gt;　　第4章 相關(guān)技術(shù)</b></p><p>　　4.1網(wǎng)頁制作軟件 Dreamweaver</p><p>　　Dreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的Roundtrip HTML技術(shù)允許用戶隨意導入HTML文檔而無需重新設(shè)置代碼格式。</p><

40、p>　　Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。</p><p>　　Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。</p>

41、<p>　　至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：</p><p>　　1、文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。</p><p>　　2、裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。</p><p>　　3、對象工具欄包含

42、創(chuàng)建不同類型的對象（例如 圖象、表格和層等）的按鈕。</p><p>　　4、屬性檢查器顯示選定對象的屬性。</p><p>　　5、快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。</p><p>　　6、可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。</p><p>　　4.2 DIV+CSS<

43、/p><p><b>　　4.2.1 div</b></p><p>　　div標簽和其他HTML標簽沒有什么區(qū)別，需要由關(guān)閉標志。如果不加入任何css樣式，它的效果類似<p>標記。Div示例代碼如下：</p><p>　　<div>內(nèi)容</div></p><p>　　把css的擴展屬性

44、放入div標簽中，就可以控制div容器中的所有HTML元素顯示在屏幕上的具體位置，為了實現(xiàn)這種1:1的精確控制，必須給當前的div加上唯一的id，用來區(qū)分其他div標記。還有一種情況是：你想讓一類或者說幾個div具有相同的樣式屬性時，可以給每個div加上class屬性，這樣具有同樣class屬性的div標記樣式相同。代碼如下：</p><p>　　<div id=”wrap”>內(nèi)容</div&g

45、t;</p><p>　　<div class=”button”>內(nèi)容</div></p><p><b>　　4.2.2 CSS</b></p><p>　　CSS是英文Cascading Style Sheet縮寫形式，中文譯為層疊樣式表或級聯(lián)樣式表。Web設(shè)計者可利用它來定義文檔的樣式，這里指的文檔不僅限于（X）H

46、TML。通過CSS，設(shè)計者可控制文檔的字體、顏色、圖像、表格、鏈接和布局格式，同時設(shè)計者也可以將表示樣式外觀的信息從內(nèi)容中分離出來，集中放置在頁面的某一部分，甚至可保存為獨立的文件，從而減少文件的大小，節(jié)省網(wǎng)絡(luò)的寬帶、節(jié)約web設(shè)計者維護代碼的時間。CSS有如此多的好處，掌握和使用好它對于web設(shè)計者來說是非常必要的。</p><p><b>　　4.2.3 樣式</b></p>

47、<p>　　樣式一詞對于我們來說并不陌生，即使尚未接觸CSS的人也不難理解樣式的含義。當你使用Microsoft Word一類的字處理程序時，幾乎總要更愛某些樣式以達到更好的效果，比如設(shè)定標題為加粗的三號黑體字，每一段的開始流出兩個空格等。樣式表不能孤立地使用，因為它本身并不包含任何內(nèi)容信息。當然CSS也不僅僅能同Web文檔一起使用，它還能定義XML甚至軟件界面的樣式。</p><p><b&

48、gt;　　4.2.4 層疊</b></p><p>　　與樣式相比，了解層疊一詞的CSS初學者可能就比較少了，層疊是CSS中的術(shù)語，它包含了一系列的規(guī)則，瀏覽器根據(jù)這個規(guī)則來確定樣式應該如何應用到頁面的各個元素中去。</p><p>　　4.3 DIV+CSS簡介</p><p>　　DIV+CSS是網(wǎng)站標準（或稱“WEB標準”）中常用術(shù)語之一，div+

49、css 是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式,真正地達到了w3c內(nèi)容與表現(xiàn)相分離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術(shù)。使得網(wǎng)頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網(wǎng)站設(shè)計標準中

50、，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介：</p><p>　　1、符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡(luò)應用的升級而被淘汰。</p><p>　　2、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。</p>&

51、lt;p>　　3、搜索引擎更加友好。相對與傳統(tǒng)的table, 采用DIV+CSS技術(shù)的網(wǎng)頁，對于搜索引擎的收錄更加友好。</p><p>　　4、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。 現(xiàn)在YAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。 　</p><

52、;p>　　5、CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 　　</p><p>　　6、表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。</p><p>　　第5章 企業(yè)網(wǎng)頁的實現(xiàn)</p><p><b>　　5.1 布局與配色</b></p>

53、<p>　　本網(wǎng)站布局技術(shù)采用層疊樣式表的應用，使用CSS實現(xiàn)出一個完美的網(wǎng)站。布局方法采用軟件布局法，利用Photoshop軟件對圖像進行編輯。網(wǎng)頁配色選用白色與灰色的色彩搭配，來實現(xiàn)企業(yè)網(wǎng)站的簡單大方。</p><p><b>　　5.2企業(yè)首頁</b></p><p>　　網(wǎng)站首頁體現(xiàn)的是一個網(wǎng)站的門面，也顯示了企業(yè)的一些相關(guān)的消息，是網(wǎng)站設(shè)計中比較

54、重要的一部分，它以網(wǎng)站綜合平臺的形式展示整個企業(yè)網(wǎng)站各部分的主體內(nèi)容，是整個網(wǎng)站的導航，能夠讓瀏覽者在第一時間內(nèi)領(lǐng)略到企業(yè)特色所在。如圖5-1企業(yè)首頁，導航部分插入div標簽編輯CSS，代碼如下</p><p>　　<div id="nav"></p><p>　　<ul id="dh"></p><p&g

55、t;　　<li><a href="index.html">首頁</a></li></p><p>　　<li><a href="gsgk.html">公司簡介</a></li></p><p>　　<li><a href="pp

56、ls.html">品牌歷史</a></li></p><p>　　<li><a href="jscx.html">技術(shù)創(chuàng)新</a></li></p><p>　　<li><a href="cxtp.html">車型圖片</a>&

57、lt;/li></p><p>　　<li><a href="cxsp.html">車型視頻</a></li></p><p>　　<li><a href="yhgj.html">用戶工具</a></li></p><p>　

58、　<li><a href="zxly.html">在線留言</a></li></p><p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　　中間部分插入“布局對象” “Spry

59、選擇卡式面板”，讓瀏覽者可以選擇性的瀏覽圖片信息。在Spry選擇卡式面板的下方分別為會員登錄、新聞中心、聯(lián)系我們，讓瀏覽者可以直接看到所需要的信息。</p><p><b>　　圖5-1 公司首頁</b></p><p><b>　　5.3 公司簡介</b></p><p>　　具體介紹出企業(yè)的背景，經(jīng)營項目，榮譽資質(zhì)和公

60、司的發(fā)展史，結(jié)構(gòu)，業(yè)務流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司便于樹立企業(yè)形象。如圖5-2 公司簡介，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為公司簡介。</p><p><b>　　圖5-2 公司簡介</b></p><p><b>　　5.4產(chǎn)品展示</b></p><p>　　主要介紹企業(yè)的產(chǎn)品，讓瀏覽者可以

61、真實地看到企業(yè)的產(chǎn)品、進一步了解產(chǎn)品。如圖5-3 圖片展示，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為產(chǎn)品圖片展示。圖5-4 視頻展示，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為產(chǎn)品視頻展示。</p><p><b>　　圖5-3圖片展示</b></p><p><b>　　圖5-4 視頻展示</b></p><p><b>　　5.4

62、用戶注冊</b></p><p>　　使用戶成為會員，可以足不出戶通過互聯(lián)網(wǎng)向客服了解產(chǎn)品的情況。如圖5-5 用戶注冊，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為用戶注冊。</p><p><b>　　圖5-5 用戶注冊</b></p><p><b>　　5.5 在線留言</b></p><p>

63、　　在線留言是瀏覽者對我們提出的意見和建議，在留言過后我們也可以通過這個發(fā)現(xiàn)我們的不足和好的地方，要是發(fā)現(xiàn)我們的不好，我們也可以接收到您的寶貴意見并給您最滿意的答復，對于好的我們也可以讓更多的瀏覽者看到，顧客的評價是對其他的瀏覽者的最大的信任。如圖5-7 在線留言，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為在線留言。</p><p><b>　　圖5-7 在線留言</b></p><

64、p><b>　　畢業(yè)設(shè)計總結(jié)</b></p><p>　　隨著畢業(yè)日子的到來，畢業(yè)設(shè)計也接近了尾聲。經(jīng)過幾周的奮戰(zhàn)我的畢業(yè)設(shè)計終于完成了。在沒有做畢業(yè)設(shè)計以前覺得畢業(yè)設(shè)計只是對這幾年來所學知識的單純總結(jié)，但是通過這次做畢業(yè)設(shè)計發(fā)現(xiàn)自己的看法有點太片面。畢業(yè)設(shè)計不僅是對前面所學知識的一種檢驗，而且也是對自己能力的一種提高。通過這次畢業(yè)設(shè)計使我明白了自己原來知識還比較欠缺。自己要學習的東西

65、還太多，以前老是覺得自己什么東西都會，什么東西都懂，有點眼高手低。通過這次畢業(yè)設(shè)計，我才明白學習是一個長期積累的過程，在以后的工作、生活中都應該不斷的學習，努力提高自己知識和綜合素質(zhì)。</p><p>　　大學三年就會在這最后的畢業(yè)設(shè)計總結(jié)劃上一個圓滿的句號。我曾經(jīng)以為時間是一個不快不慢的東西，但現(xiàn)在我感到時間過的是多么的飛快，三年了，感覺就在一眨眼之間結(jié)束了我的大學生涯。畢業(yè)，最重要的一個過程,最能把理論知識運

66、用到實踐當中的過程就數(shù)畢業(yè)設(shè)計了。這也是我們從一個學生走向社會的一個轉(zhuǎn)折。另一個生命歷程的開始。畢業(yè)設(shè)計的這幾周，我學到了很多，也成熟了很多。</p><p><b>　　參考文獻</b></p><p>　　[1]陳琳.photoshop cs3 入門實戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11</p><p>　　[2]戎馬工作室

67、.Dreamweaver 8與asp動態(tài)網(wǎng)站開發(fā)[M].北京：機械工業(yè)出版社，2006，5</p><p>　　[3]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社， 2008，1</p><p>　　[4]何秀芳.網(wǎng)頁制作與網(wǎng)站建設(shè)課堂實錄[M].北京：人民郵電出版社. 2009，3</p><p>　　[5]. 唐守國主編，創(chuàng)

68、意+：Photoshop cs4網(wǎng)頁設(shè)計、配色與特效案例精粹，清華大學出版社，2010年7月第一版</p><p>　　[6]. 王征主編，JavaScript網(wǎng)頁特效實例大全，清華大學出版社，2006年9月第一版</p><p>　　[7]. 史曉燕、蘇萍編著，網(wǎng)頁設(shè)計基礎(chǔ)（HTML，CSS和JavaScript），清華大學出版社，北京交通大學出版社，2006年10月第一版</p&

69、gt;<p>　　[8]. 張景峰等.HTML程序設(shè)計.高等教育出版社.2005年9月</p><p>　　[9]. 項宇峰等.HTML網(wǎng)絡(luò)編程從入門到精通.清華大學出版社.2006年</p><p><b>　　致 謝</b></p><p>　　經(jīng)過幾周的努力我的畢業(yè)設(shè)計終于完成了。在沒有做畢業(yè)設(shè)計之前我覺得畢業(yè)設(shè)計只是對

70、這幾年來所學知識的總結(jié)，但是后來我發(fā)現(xiàn)做畢業(yè)設(shè)計原來的看法有點太片面了。畢業(yè)設(shè)計不僅是對前面所學知識的一種檢驗，而且也是對自己能力的一種提高。</p><p>　　經(jīng)歷過這次畢業(yè)設(shè)計我更加明白了自己原來知識還是比較欠缺的。自己要學習的知識還是太多了。通過這次的畢業(yè)設(shè)計，我知道了學習真的是一個長期積累的過程，在今后的工作和生活中都應該不斷的去積累，努力提高自己的知識量和整體的綜合素質(zhì)。</p><

71、;p>　　我對所有人的耐心表示感謝，尤其是我的指導老師 老師和 老師，他仔細閱讀了我的論文和程序，并提出了許多寶貴的意見和建議。感謝他能在忙碌的工作中抽時間指導我。使設(shè)計得以順利完成。</p><p>　　最后，感謝內(nèi)蒙古化工職業(yè)學院的全體同學，幾年來他們在學習、工作和生活中給了我很多的幫助和支持，使我的大學生活收獲很多，在此衷心的感謝他們，衷心的祝福他們身體健康，永遠快樂。</p&g