計(jì)算機(jī)應(yīng)用基礎(chǔ)-第8章網(wǎng)站設(shè)計(jì)DreamweaverCS4基礎(chǔ)

1、計(jì)算機(jī)應(yīng)用基礎(chǔ)計(jì)算機(jī)應(yīng)用基礎(chǔ)第8章 網(wǎng)站設(shè)計(jì)基礎(chǔ)機(jī)械工業(yè)出版社8.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)一、網(wǎng)站基本知識(shí)一、網(wǎng)站基本知識(shí) 1、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè) 網(wǎng)頁(yè)網(wǎng)頁(yè)（Web Page）存放在Web服務(wù)器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。 網(wǎng)站網(wǎng)站（Web Site）也稱站點(diǎn)，被定義為已注冊(cè)的域名、主頁(yè)或Web服務(wù)器。 主頁(yè)主頁(yè)（Homepage）就是網(wǎng)站默認(rèn)的網(wǎng)頁(yè)，通常指用戶進(jìn)入網(wǎng)站后所看到的第1個(gè)頁(yè)面。 8.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)一、網(wǎng)站基本知識(shí)一、網(wǎng)站基本知識(shí) 2、網(wǎng)站的分類(lèi) 按照網(wǎng)站主題性質(zhì)可分為政府網(wǎng)站、企業(yè)網(wǎng)站、商業(yè)網(wǎng)站、教育科研機(jī)構(gòu)網(wǎng)站

2、、個(gè)人網(wǎng)站、其他非盈利機(jī)構(gòu)網(wǎng)站以及其他類(lèi)型的網(wǎng)站。 8.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)一、網(wǎng)站基本知識(shí)一、網(wǎng)站基本知識(shí) 3網(wǎng)站設(shè)計(jì)的步驟 （1）確定網(wǎng)站主題（2）搜集材料（3）規(guī)劃網(wǎng)站（4）選擇合適的制作工具（5）制作網(wǎng)頁(yè)（6）上傳測(cè)試（7）推廣宣傳（8）維護(hù)更新6.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)二、站點(diǎn)與網(wǎng)頁(yè)的創(chuàng)建二、站點(diǎn)與網(wǎng)頁(yè)的創(chuàng)建 1、新建站點(diǎn) 2、新建空白網(wǎng)頁(yè) 6.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)三、網(wǎng)頁(yè)元素編輯三、網(wǎng)頁(yè)元素編輯 1、插入文本 2、文本格式化 3、在網(wǎng)頁(yè)中使用超鏈接 （1）為文本設(shè)置超鏈接 （2）設(shè)置電子郵件鏈接 （3）創(chuàng)建錨記鏈接 （4）創(chuàng)

3、建熱點(diǎn)鏈接 （5）設(shè)置圖片鏈接和下載鏈接 4、使用導(dǎo)航欄5、使用表單6.1 基本知識(shí)和操作要點(diǎn)基本知識(shí)和操作要點(diǎn)四、網(wǎng)頁(yè)布局方法四、網(wǎng)頁(yè)布局方法1、使用表格 2、使用框架 8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 1項(xiàng)目背景項(xiàng)目背景計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展到今天，網(wǎng)絡(luò)產(chǎn)生的社會(huì)和經(jīng)濟(jì)效益是無(wú)法估量的。人們?cè)诰W(wǎng)絡(luò)上共享信息，相互交流。在這樣一個(gè)遍及全球，迅速、快捷的信息平臺(tái)上，每一個(gè)公司都認(rèn)識(shí)到它在實(shí)現(xiàn)公司的戰(zhàn)略目標(biāo)、提高公司和公司產(chǎn)品的知名度、挖掘客戶關(guān)系資源、增強(qiáng)公司的市場(chǎng)競(jìng)爭(zhēng)力的重要性。所以，有效地利用網(wǎng)絡(luò)，設(shè)計(jì)好網(wǎng)站是擺在每個(gè)網(wǎng)站技術(shù)員面前的重要課題。2項(xiàng)目目的項(xiàng)目目的為了做好公司的網(wǎng)

4、站，必須認(rèn)真地調(diào)查研究，決定公司要發(fā)布和關(guān)心的信息，進(jìn)行規(guī)劃和設(shè)計(jì)。本節(jié)把這個(gè)項(xiàng)目分解為3個(gè)任務(wù)，即網(wǎng)站的規(guī)劃、網(wǎng)站和主頁(yè)的設(shè)計(jì)、其它欄目網(wǎng)頁(yè)的設(shè)計(jì)。通過(guò)這些任務(wù)的完成，可以聯(lián)系公司的實(shí)踐活動(dòng)，增強(qiáng)實(shí)際工作的能力；同時(shí)對(duì)Dreamweaver基本知識(shí)的運(yùn)用達(dá)到掌握和熟練應(yīng)用的程度。3項(xiàng)目要求項(xiàng)目要求（1）內(nèi)容要求（2）技術(shù)要求8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 8.2.1 任務(wù)任務(wù)1 網(wǎng)站的規(guī)劃網(wǎng)站的規(guī)劃1任務(wù)目的公司的網(wǎng)站是公司的形象窗口，是公司和客戶的聯(lián)系點(diǎn)。通過(guò)任務(wù)的完成，對(duì)如何規(guī)劃、設(shè)計(jì)、測(cè)試、發(fā)布和維護(hù)網(wǎng)站等業(yè)務(wù)有初步的認(rèn)識(shí)。2任務(wù)要求1）提出網(wǎng)站規(guī)劃的主要工作內(nèi)容

5、。2）提出網(wǎng)站設(shè)計(jì)步驟。3）提出測(cè)試要點(diǎn)。3方法和步驟（1）網(wǎng)站規(guī)劃（2）網(wǎng)站的設(shè)計(jì)與制作（3）網(wǎng)站的測(cè)試和維護(hù)8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 8.2.2 任務(wù)任務(wù)2 網(wǎng)站和主頁(yè)的設(shè)計(jì)網(wǎng)站和主頁(yè)的設(shè)計(jì)1任務(wù)目的 應(yīng)用Dreamweaver CS4軟件設(shè)計(jì)公司網(wǎng)站的結(jié)構(gòu)和主頁(yè)，從而既能清楚地知道公司網(wǎng)站和主頁(yè)的設(shè)計(jì)過(guò)程，又能熟悉Dreamweaver構(gòu)架站點(diǎn)的網(wǎng)頁(yè)結(jié)構(gòu)、應(yīng)用主題、建立表格、編輯網(wǎng)頁(yè)等操作。2任務(wù)要求1）建立站點(diǎn)：站點(diǎn)的位置是“D:君牛網(wǎng)站”。2）站點(diǎn)中的網(wǎng)頁(yè)結(jié)構(gòu)：由1個(gè)主頁(yè)和6個(gè)網(wǎng)頁(yè)組成，其中6個(gè)網(wǎng)頁(yè)分別為公司簡(jiǎn)介、新聞資訊、產(chǎn)品世界、營(yíng)銷(xiāo)網(wǎng)絡(luò)、客戶留言和聯(lián)

6、系我們。3）主頁(yè)要求。醒目的公司名稱，公司產(chǎn)品的動(dòng)態(tài)廣告，公司的詳細(xì)聯(lián)系方法。主頁(yè)還要對(duì)本網(wǎng)站其它網(wǎng)頁(yè)的內(nèi)容進(jìn)行概要介紹，如公司簡(jiǎn)介，新聞資訊和產(chǎn)品展示。8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 8.2.2 任務(wù)任務(wù)2 網(wǎng)站和主頁(yè)的設(shè)計(jì)網(wǎng)站和主頁(yè)的設(shè)計(jì)3方法和步驟（1）建立站點(diǎn)（2）創(chuàng)建站點(diǎn)網(wǎng)頁(yè)結(jié)構(gòu) （3）主頁(yè)設(shè)計(jì)8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 8.2.3 任務(wù)任務(wù)3 其它欄目網(wǎng)頁(yè)的設(shè)計(jì)其它欄目網(wǎng)頁(yè)的設(shè)計(jì)1任務(wù)目的 除了主頁(yè)之外，還有6個(gè)其它欄目的網(wǎng)頁(yè)，分別是“公司簡(jiǎn)介（gsjj.html）”、“新聞資訊（xwzx.html）”、“產(chǎn)品世界（cpsj.html

7、）”、“營(yíng)銷(xiāo)網(wǎng)絡(luò)（yxwl.html）”、“客戶留言（khly.html）”、“聯(lián)系我們（lxwm.html）”，這些頁(yè)面分別從各個(gè)方面來(lái)展示公司的信息，為企業(yè)起到很好的品牌推廣作用。 2任務(wù)要求1）設(shè)計(jì)與主頁(yè)相同風(fēng)格的“公司簡(jiǎn)介”網(wǎng)頁(yè)。2）設(shè)計(jì)帶有浮動(dòng)框架的“新聞資訊”網(wǎng)頁(yè)。3）設(shè)計(jì)表格布局的“產(chǎn)品世界”網(wǎng)頁(yè)。4）設(shè)計(jì)帶圖片超鏈接的“營(yíng)銷(xiāo)網(wǎng)絡(luò)”網(wǎng)頁(yè)。5）應(yīng)用表單完成“客戶留言”網(wǎng)頁(yè)。6）設(shè)計(jì)“聯(lián)系我們”網(wǎng)頁(yè)，顯示公司具體的聯(lián)系方式。8.2項(xiàng)目項(xiàng)目 企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì)企業(yè)門(mén)戶網(wǎng)站的設(shè)計(jì) 8.2.3 任務(wù)任務(wù)3 其它欄目網(wǎng)頁(yè)的設(shè)計(jì)其它欄目網(wǎng)頁(yè)的設(shè)計(jì)3方法和步驟（1）公司簡(jiǎn)介（gsjj.html）

8、設(shè)計(jì)（2）新聞資訊（xwzx.html）設(shè)計(jì)（3）產(chǎn)品世界（cpsj.html）設(shè)計(jì)（4）營(yíng)銷(xiāo)網(wǎng)絡(luò)（yxwl.html）（5）客戶留言（khly.html）（6）聯(lián)系我們（lxwm.html）8.3 操作小經(jīng)驗(yàn)操作小經(jīng)驗(yàn) 1）自從表格功能被引進(jìn)）自從表格功能被引進(jìn)HTML后，表格就成了初學(xué)者布局網(wǎng)頁(yè)的法寶。后，表格就成了初學(xué)者布局網(wǎng)頁(yè)的法寶。所以，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，用表格進(jìn)行頁(yè)面布局是一個(gè)好經(jīng)驗(yàn)。所以，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，用表格進(jìn)行頁(yè)面布局是一個(gè)好經(jīng)驗(yàn)。2）網(wǎng)頁(yè)設(shè)計(jì)一定要從整體效果出發(fā)，布局合理、簡(jiǎn)潔明了、主題突出、）網(wǎng)頁(yè)設(shè)計(jì)一定要從整體效果出發(fā)，布局合理、簡(jiǎn)潔明了、主題突出、內(nèi)容充實(shí)、圖文并茂、色彩融

9、合，使人瀏覽時(shí)賞心悅目，才能提高瀏覽內(nèi)容充實(shí)、圖文并茂、色彩融合，使人瀏覽時(shí)賞心悅目，才能提高瀏覽者對(duì)信息的接受效率，并給瀏覽者留下美好的印象。者對(duì)信息的接受效率，并給瀏覽者留下美好的印象。在網(wǎng)頁(yè)設(shè)計(jì)時(shí)千萬(wàn)不要生拼硬湊內(nèi)容，切忌頁(yè)面華而不實(shí)，整體凌亂或在網(wǎng)頁(yè)設(shè)計(jì)時(shí)千萬(wàn)不要生拼硬湊內(nèi)容，切忌頁(yè)面華而不實(shí)，整體凌亂或無(wú)特色、無(wú)生氣。無(wú)特色、無(wú)生氣。8.4 上機(jī)操作練習(xí)題上機(jī)操作練習(xí)題1）建立一個(gè)“嵌套式層次結(jié)構(gòu)”的框架網(wǎng)頁(yè)如圖8-36所示。下左框架中的“作品一”、“作品二”和“作品三”分別鏈接三張美術(shù)作品圖片，單擊超鏈接時(shí)，所鏈接的美術(shù)作品會(huì)在下右框架中顯示。初始狀態(tài)下，下右框架中顯示的是“作品一

10、”的圖片。8.4 上機(jī)操作練習(xí)題上機(jī)操作練習(xí)題2）建立一個(gè)有6行2列表格的網(wǎng)頁(yè)，把右列的第26行合并，在合并行中嵌入5行3列的圖表，用綠色勾描邊框，按圖8-37完成設(shè)計(jì)。8.5 創(chuàng)新設(shè)計(jì)練習(xí)題創(chuàng)新設(shè)計(jì)練習(xí)題 為所在系設(shè)計(jì)一個(gè)網(wǎng)站，反映所在系包括教學(xué)情況、黨團(tuán)工作和學(xué)生活動(dòng)等方面的情況。要求：該網(wǎng)站至少包含3層網(wǎng)頁(yè)，網(wǎng)頁(yè)中應(yīng)盡可能包括文字、表格、圖片、表單及音視頻等多種媒體，網(wǎng)頁(yè)布局合理，色彩搭配和諧。8.6 習(xí)題習(xí)題1在表單元素“列表”的屬性中，用來(lái)設(shè)置列表顯示行數(shù)的是_。A高度 B類(lèi)型 C允許多選 D列表值2HTML代碼中，表示_。A文本加注下標(biāo)線 B文本加注上標(biāo)線 C文本閃爍 D文本或圖片居中3將鏈接的目標(biāo)文件載入該鏈接按所在的同一框架或窗口中，鏈接的“目標(biāo)”屬性應(yīng)設(shè)置成_。A_self B_blank C_parent D_top4若要使訪問(wèn)者無(wú)法在瀏覽器中通過(guò)拖動(dòng)邊框來(lái)調(diào)整框架大小，則應(yīng)在框架的屬性面板中設(shè)置_。A將“滾動(dòng)”設(shè)為“否” B將“邊框”設(shè)