大學(xué)計算機(jī)基礎(chǔ)課件第8章 網(wǎng)頁制作-課程教案

大學(xué)計算機(jī)基礎(chǔ)（Windows10+Office2016）（張開成主編）課程教案第8章網(wǎng)頁制作【教學(xué)目標(biāo)】理解網(wǎng)頁、網(wǎng)站相關(guān)基本概念熟悉網(wǎng)站開發(fā)的基本流程熟悉常用網(wǎng)頁制作工具掌握HTML文檔基本結(jié)構(gòu)掌握利用DreamweaverCS6制作網(wǎng)頁的基本方法理解網(wǎng)頁測試發(fā)布的作用及方法【教學(xué)重點】網(wǎng)頁制作的基本流程HTML文檔基本結(jié)構(gòu)DreamweaverCS6制作網(wǎng)頁的基本方法網(wǎng)站的測試以及發(fā)布【教學(xué)難點】DreamweaverCS6的基本操作網(wǎng)站的測試與發(fā)布【教學(xué)要點】8.1網(wǎng)頁制作基礎(chǔ)知識8.1.1認(rèn)識網(wǎng)頁與網(wǎng)站1.網(wǎng)頁與網(wǎng)站網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是網(wǎng)絡(luò)上信息傳遞的主要媒介。網(wǎng)頁（WebPage）是一個包含HTML標(biāo)記的純文本文件，是存放在世界某個角落被稱為WEB服務(wù)器的某一臺計算機(jī)中的，能提供給客戶機(jī)用戶瀏覽的頁面；網(wǎng)頁是一種綜合了文字、圖片、動畫和音樂等內(nèi)容的超文本文件，具有可視性和交互性的特點。通常大多數(shù)網(wǎng)頁是以.html為后綴名，俗稱HTML文件。不同的后綴名分別代表不同類型的網(wǎng)頁文件，如.xml、.asp、.php、.cgi、.jsp等。網(wǎng)站是網(wǎng)頁的集合，是指存放在WEB服務(wù)器中的完整信息的集合體。其中包括一個首頁（HomePage）和若干個網(wǎng)頁。這些網(wǎng)頁以超鏈接的方式連接在一起，形成一個整體，描述一組完整的信息。網(wǎng)站主要由主機(jī)、域名、網(wǎng)頁等組成。建設(shè)網(wǎng)站，就是在本地計算機(jī)上安裝WEB服務(wù)器，然后設(shè)計制作相關(guān)網(wǎng)頁并通過Internet發(fā)布出去的過程。2.網(wǎng)頁的基本要素網(wǎng)頁一般包含Logo、Banner、導(dǎo)航欄、文本、圖像、動畫等基本要素。3.網(wǎng)站開發(fā)流程（1）規(guī)劃階段（2）設(shè)計階段（3）發(fā)布階段（4）維護(hù)階段8.1.2網(wǎng)頁編程語言介紹1.網(wǎng)頁設(shè)計語言——HTMLHTML（HyperTextMarkupLanguage）即超文本標(biāo)記語言，或稱為超文本鏈接標(biāo)識語言，是目前萬維網(wǎng)（WWW）上應(yīng)用最為廣泛的語言，它是用來描述網(wǎng)頁的一種語言，強(qiáng)調(diào)把數(shù)據(jù)和數(shù)據(jù)的顯示放在一起，使用標(biāo)記來描述網(wǎng)頁，將數(shù)據(jù)按照不同的格式顯示出來。HTML是網(wǎng)頁制作的基礎(chǔ)，是初學(xué)者必學(xué)的內(nèi)容。2.網(wǎng)頁制作工具（1）FrontPage（2）SharePointDesigner（3）Dreamweaver8.1.3DreamweaverCS6窗口DreamweaverCS6窗口由菜單欄、文檔工具欄、屬性檢查器、“插入”面板、“文件”面板、文檔編輯區(qū)和狀態(tài)欄組成。8.2基本網(wǎng)頁的制作8.2.1站點的建立站點是網(wǎng)站中所有文件和資源的集合。要制作網(wǎng)頁，首先需創(chuàng)建站點，為站點內(nèi)的所有文件建立聯(lián)系。制作一個網(wǎng)站一般需要首先將制作好的這個網(wǎng)站的所有網(wǎng)頁暫時保存在自己的計算機(jī)上，最后再上傳到擁有使用權(quán)限的服務(wù)器上。DreamweaverCS6可以將本地計算機(jī)的一個文件夾作為一個站點。8.2.2創(chuàng)建文件夾及網(wǎng)頁文件1.創(chuàng)建文件夾2.創(chuàng)建網(wǎng)頁文件8.2.3網(wǎng)頁中文本的編輯1.在網(wǎng)頁中輸入文本2.編輯與設(shè)置段落格式3.編輯與設(shè)置文字格式4.設(shè)置水平線8.2.4網(wǎng)頁中多媒體元素的插入與編輯1.圖像的插入與編輯圖像是網(wǎng)頁最主要的元素之一。雖然存在很多種圖形文件格式，但網(wǎng)頁中通常使用的只有3種，即GIF、JPEG和PNG，其中使用最廣泛的是GIF和JPEG文件格式。2.網(wǎng)頁背景的設(shè)置網(wǎng)頁中的背景設(shè)計是相當(dāng)重要的，好的背景不但能影響訪問者對網(wǎng)頁內(nèi)容的接受程度，還能影響訪問者對整個網(wǎng)站的印象。在不同的網(wǎng)站上，甚至同一個網(wǎng)站的不同頁面上，都會有各式各樣的不同的背景設(shè)計。常見的網(wǎng)頁背景包含顏色背景和圖像背景。3.影音文件的插入與編輯在DreamweaverCS6中，不但可以插入圖片，還可以插入Flash動畫和視頻文件等多媒體信息，設(shè)置背景音樂，增加網(wǎng)頁的視聽覺效果。（1）插入Flash動畫（2）插入FLV視頻（3）設(shè)置背景音樂8.2.5超鏈接的創(chuàng)建與編輯超鏈接是網(wǎng)頁之間聯(lián)系的橋梁，瀏覽者可以通過它跳轉(zhuǎn)到其他頁面，可以說超鏈接是整個網(wǎng)站的“靈魂”。它所指向的目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片、電子郵件地址、文件，甚至是應(yīng)用程序。當(dāng)瀏覽者單擊已設(shè)置超鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。（1）絕對地址（2）根路徑（3）相對路徑8.3網(wǎng)頁布局8.3.1頁面布局基礎(chǔ)網(wǎng)頁作為互聯(lián)網(wǎng)信息傳遞的主要媒介，是提供絕大部分信息的平臺，若網(wǎng)頁結(jié)構(gòu)混亂，內(nèi)容雜亂無章，用戶需花費(fèi)大量的時間在查找信息上，用戶體驗則會極差，不能留住客戶，尤其對于企業(yè)網(wǎng)站來說是極大的損失。為此網(wǎng)頁需要精心設(shè)計才能吸引用戶的眼球。為保證網(wǎng)頁結(jié)構(gòu)清晰，在網(wǎng)頁設(shè)計階段對頁面進(jìn)行合理布局是非常關(guān)鍵的。布局就是將有限的視覺元素進(jìn)行合理的排列組合，表現(xiàn)出更強(qiáng)的邏輯性以及個性化。（1）表格布局（2）框架布局（3）DIV+CSS布局8.3.2表格布局表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的強(qiáng)有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。雖然HTML代碼中通常不明確指定列，但Dreamweaver允許操作列、行和單元格。在網(wǎng)頁編輯中，使用表格可以實現(xiàn)兩方面功能，一是用來展示文字或圖像等內(nèi)容，可以把相互關(guān)聯(lián)的信息集中定位，排列更有序；二是用來實現(xiàn)版面布局，使網(wǎng)頁更規(guī)范、更美觀。1.用表格規(guī)劃頁面結(jié)構(gòu)2.創(chuàng)建表格3.表格的選定與編輯4.單元格的選定與編輯5.拆分/合并單元格8.4網(wǎng)站測試及發(fā)布在網(wǎng)頁制作完成后，就要進(jìn)入最后一個環(huán)節(jié)——網(wǎng)站的測試與發(fā)布。8.4.1網(wǎng)站測試在將站點上傳到服務(wù)器之前，必須先對站點進(jìn)行測試，主要包括測試瀏覽器的兼容性、測試超鏈接的有效性、在瀏覽器中測試網(wǎng)頁的正確性等，這樣才能保證發(fā)布站點以后，盡可能少地出現(xiàn)錯誤。（1）測試瀏覽器的兼容性（2）測試超鏈接的有效性（3）在瀏覽器中測試網(wǎng)頁