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

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

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

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

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

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

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

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

8、設(shè)計（2）新聞資訊（xwzx.html）設(shè)計（3）產(chǎn)品世界（cpsj.html）設(shè)計（4）營銷網(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)頁的法寶。后，表格就成了初學(xué)者布局網(wǎng)頁的法寶。所以，在設(shè)計網(wǎng)頁時，用表格進(jìn)行頁面布局是一個好經(jīng)驗(yàn)。所以，在設(shè)計網(wǎng)頁時，用表格進(jìn)行頁面布局是一個好經(jīng)驗(yàn)。2）網(wǎng)頁設(shè)計一定要從整體效果出發(fā)，布局合理、簡潔明了、主題突出、）網(wǎng)頁設(shè)計一定要從整體效果出發(fā)，布局合理、簡潔明了、主題突出、內(nèi)容充實(shí)、圖文并茂、色彩融

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

10、”的圖片。8.4 上機(jī)操作練習(xí)題上機(jī)操作練習(xí)題2）建立一個有6行2列表格的網(wǎng)頁，把右列的第26行合并，在合并行中嵌入5行3列的圖表，用綠色勾描邊框，按圖8-37完成設(shè)計。8.5 創(chuàng)新設(shè)計練習(xí)題創(chuàng)新設(shè)計練習(xí)題 為所在系設(shè)計一個網(wǎng)站，反映所在系包括教學(xué)情況、黨團(tuán)工作和學(xué)生活動等方面的情況。要求：該網(wǎng)站至少包含3層網(wǎng)頁，網(wǎng)頁中應(yīng)盡可能包括文字、表格、圖片、表單及音視頻等多種媒體，網(wǎng)頁布局合理，色彩搭配和諧。8.6 習(xí)題習(xí)題1在表單元素“列表”的屬性中，用來設(shè)置列表顯示行數(shù)的是_。A高度 B類型 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若要使訪問者無法在瀏覽器中通過拖動邊框來調(diào)整框架大小，則應(yīng)在框架的屬性面板中設(shè)置_。A將“滾動”設(shè)為“否” B將“邊框”設(shè)