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

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

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

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

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

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

6、p><p>　　關(guān)鍵詞： 網(wǎng)頁設(shè)計(jì) 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、計(jì)流程3</p><p>　　2.6 網(wǎng)頁設(shè)計(jì)原則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)頁的實(shí)現(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è)計(jì)總結(jié)14</b></p><p><b>　　參考文獻(xiàn)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è)單位工作、公司宣傳、電子商務(wù)等社會和經(jīng)濟(jì)內(nèi)容的網(wǎng)絡(luò)平臺支持。政府、事業(yè)單位和企業(yè)對于網(wǎng)頁的設(shè)計(jì)與制作也越來越重視。</p><p>　　由于Web2.0的成熟和廣泛應(yīng)用，網(wǎng)頁設(shè)計(jì)和制作也和以前截然不同。尤其是Div+CSS技術(shù)的應(yīng)用對于網(wǎng)站樣式和內(nèi)容的維護(hù)起到了至關(guān)重要的作用。Adobe公司對于網(wǎng)絡(luò)整合軟件Dreamweav

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

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

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

16、靜態(tài)網(wǎng)頁的網(wǎng)址形式通常為htm（超文本標(biāo)記語言）結(jié)尾 ，還有就是以超文本標(biāo)記語言（.htm、.html）、.shtml、.xml（可擴(kuò)展標(biāo)記語言）等為后綴的。在超文本標(biāo)記語言格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF格式的動畫、FLASH、滾動字幕等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的動態(tài)網(wǎng)頁是不同的概念。靜態(tài)網(wǎng)頁面通常是超文本標(biāo)記語言文檔存儲為文件在文件系統(tǒng)里頭，并且可以通過HTTP訪問網(wǎng)絡(luò)服務(wù)器。</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)頁面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫連接。常

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38、化。</p><p><b>　　5、在線留言</b></p><p>　　在線留言是瀏覽者對我們提出的意見和建議，在留言過后我們也可以通過這個(gè)發(fā)現(xiàn)我們的不足和好的地方，要是發(fā)現(xiàn)我們的不好，我們也可以接收到您的寶貴意見并給您最滿意的答復(fù)，對于好的我們也可以讓更多的瀏覽者看到，顧客的評價(jià)是對其他的瀏覽者的最大的信任。</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ù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。</p><

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

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

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

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

44、放入div標(biāo)簽中，就可以控制div容器中的所有HTML元素顯示在屏幕上的具體位置，為了實(shí)現(xiàn)這種1:1的精確控制，必須給當(dāng)前的div加上唯一的id，用來區(qū)分其他div標(biāo)記。還有一種情況是：你想讓一類或者說幾個(gè)div具有相同的樣式屬性時(shí)，可以給每個(gè)div加上class屬性，這樣具有同樣class屬性的div標(biāo)記樣式相同。代碼如下：</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è)計(jì)者可利用它來定義文檔的樣式，這里指的文檔不僅限于（X）H

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

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

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

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

50、，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。以下是DIV+CSS的特點(diǎn)簡介：</p><p>　　1、符合W3C標(biāo)準(zhǔn)。微軟等公司均為W3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級而被淘汰。</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)在簡潔的代碼，對于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 　　</p><p>　　6、表現(xiàn)和結(jié)構(gòu)分離，在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。</p><p>　　第5章 企業(yè)網(wǎng)頁的實(shí)現(xiàn)</p><p><b>　　5.1 布局與配色</b></p>

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

54、重要的一部分，它以網(wǎng)站綜合平臺的形式展示整個(gè)企業(yè)網(wǎng)站各部分的主體內(nèi)容，是整個(gè)網(wǎng)站的導(dǎo)航，能夠讓瀏覽者在第一時(shí)間內(nèi)領(lǐng)略到企業(yè)特色所在。如圖5-1企業(yè)首頁，導(dǎo)航部分插入div標(biāo)簽編輯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)營項(xiàng)目，榮譽(yù)資質(zhì)和公

60、司的發(fā)展史，結(jié)構(gòu)，業(yè)務(wù)流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司便于樹立企業(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、真實(shí)地看到企業(yè)的產(chǎn)品、進(jì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、　　在線留言是瀏覽者對我們提出的意見和建議，在留言過后我們也可以通過這個(gè)發(fā)現(xiàn)我們的不足和好的地方，要是發(fā)現(xiàn)我們的不好，我們也可以接收到您的寶貴意見并給您最滿意的答復(fù)，對于好的我們也可以讓更多的瀏覽者看到，顧客的評價(jià)是對其他的瀏覽者的最大的信任。如圖5-7 在線留言，中間部分左側(cè)為產(chǎn)品系列，右側(cè)為在線留言。</p><p><b>　　圖5-7 在線留言</b></p><

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

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

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

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

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

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

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

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