網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目1、2 網(wǎng)頁制作基礎(chǔ)知識、認識網(wǎng)頁中常用的元素

任務(wù)1-1認識Web

任務(wù)1-2認識網(wǎng)頁制作

任務(wù)1-3學(xué)習(xí)網(wǎng)頁設(shè)計常用工具

任務(wù)1-4安裝Web服務(wù)器任務(wù)1-1認識Web1.認識網(wǎng)頁網(wǎng)頁是網(wǎng)站中用于承載信息的頁面，主要由文字、圖像和超鏈接等元素構(gòu)成。除這些元素外，網(wǎng)頁中還可以包含音頻、視頻以及Flash等。在瀏覽器窗口中任一空白處單擊鼠標右鍵，從彈出的快捷菜單中選擇“查看頁面源代碼”菜單命令，可顯示當前窗口網(wǎng)頁的源代碼，如圖1-2所示。網(wǎng)頁有靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁之分。1)靜態(tài)網(wǎng)頁在網(wǎng)站中，沒有數(shù)據(jù)交互而僅為純粹的HTML格式的網(wǎng)頁通常稱為靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是標準的HTML文件，其擴展名為.html或.htm，網(wǎng)頁中可以包含文本、圖像、聲音、Flash動畫、客戶端腳本和ActiveX控件及Java小程序等。靜態(tài)網(wǎng)頁是網(wǎng)站建設(shè)的基礎(chǔ)，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁制作的。靜態(tài)網(wǎng)頁的工作原理如圖1-3所示。靜態(tài)網(wǎng)頁的特點如下：(1)網(wǎng)頁內(nèi)容不會發(fā)生變化，除非網(wǎng)頁設(shè)計者更改了網(wǎng)頁的內(nèi)容；(2)不能實現(xiàn)與瀏覽網(wǎng)頁的用戶之間的交互；(3)信息流是單向的，即從服務(wù)器到瀏覽器，服務(wù)器不能根據(jù)用戶的選擇調(diào)整向用戶返回內(nèi)容。2)動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是利用基本的HTML語法規(guī)范與Java、VB、VC、CGI、ASP、PHP、JSP、ISAPI等高級程序設(shè)計語言及數(shù)據(jù)庫編程等多種技術(shù)，實現(xiàn)對網(wǎng)站內(nèi)容和風(fēng)格的高效、動態(tài)顯示和交互式的管理。動態(tài)網(wǎng)頁文件以asp、aspx、jsp、php等為后綴，能與后臺數(shù)據(jù)庫進行交互，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。動態(tài)網(wǎng)頁的工作原理如圖1-4所示。動態(tài)網(wǎng)頁的特點如下：(1)動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大減少網(wǎng)站維護的工作量；(2)采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的功能，如訂單管理、注冊等；(3)動態(tài)網(wǎng)頁并不是獨立存在于服務(wù)器上的網(wǎng)頁文件，只有當用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁。2.與網(wǎng)頁相關(guān)的專業(yè)術(shù)語1)?InternetInternet(因特網(wǎng))是全球最大、連接能力最強，由遍布全世界的眾多大大小小的網(wǎng)絡(luò)相互連接組成的計算機網(wǎng)絡(luò)，是由美國的ARPANET發(fā)展起來的。Internet將全球范圍內(nèi)的網(wǎng)站連接在一起，形成一個資源十分豐富的信息庫。在人們的工作、生活和社會活動中，Internet起著越來越重要的作用。2)?WWWWWW(WorldWideWeb，萬維網(wǎng))又稱環(huán)球信息網(wǎng)、環(huán)球網(wǎng)、全球瀏覽系統(tǒng)等。WWW是一種基于超文本的、方便用戶在Internet上搜索和瀏覽信息的信息服務(wù)系統(tǒng)，它通過超鏈接把世界各地不同Internet節(jié)點上的相關(guān)信息有機地組織在一起，用戶只需發(fā)出檢索要求，它就能自動地進行定位并找到相應(yīng)的檢索信息。WWW是Internet上最受歡迎、最為流行的信息檢索工具，它能把各種類型的信息(文本、圖像、聲音和影像等)集成起來供用戶查詢。3)?URL在Internet上，每一個信息資源都有唯一的地址，該地址叫統(tǒng)一資源定位(UniformResourceLocator，URL)。URL由資源類型、主機域名、資源文件路徑和資源文件名4部分組成，其格式為“資源類型://主機域名/資源文件路徑/資源文件名”。只要知道資源的URL，就能夠?qū)ζ溥M行訪問，如。4)?DNS在Internet上，每一臺主機都有一個唯一的IP地址，IP地址是數(shù)字的，不便記憶，因此就用一串字符替代數(shù)字記憶。域名與IP地址之間是一一對應(yīng)的。將好記的域名轉(zhuǎn)換成IP的過程稱為域名解析。DNS(DomainNameSystem，域名系統(tǒng))就是進行域名解析的系統(tǒng)，圖1-5所示是域名系統(tǒng)的原理。5)?HTTPHTTP(HypertextTransferProtocol，超文本傳輸協(xié)議)是一種網(wǎng)絡(luò)通信規(guī)劃，其詳細規(guī)定了瀏覽器和WWW服務(wù)器之間互相通信的方式。HTTP是非常可靠的協(xié)議，它具有強大的自檢能力，可以保證用戶請示的文件到達客戶端時是準確無誤的。6)?Web網(wǎng)頁也叫Web頁，就是Web站點上的文檔。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。每個網(wǎng)頁都有唯一的URL地址，通過該地址可以找到相應(yīng)的網(wǎng)頁。網(wǎng)頁是用一種叫HTML的語言書寫的文件，它是文本文件，由瀏覽器翻譯(渲染)。3.?Web標準Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。不同的瀏覽器對同一段代碼有不同的解析，導(dǎo)致頁面顯示效果不一致，因此開發(fā)者常常需要為多版本的網(wǎng)頁開發(fā)而艱苦工作。1)?Web標準的優(yōu)點Web標準的主要優(yōu)點如下：(1)提高頁面瀏覽速度。(2)使網(wǎng)站更易于維護。(3)降低網(wǎng)站流量費用。(4)更容易被搜尋引擎搜索。(5)內(nèi)容能被更廣泛的設(shè)備訪問。(6)讓W(xué)eb的發(fā)展前景更廣闊。2)?Web標準的構(gòu)成Web標準由結(jié)構(gòu)標準、表現(xiàn)標準和行為標準三部分組成。(1)結(jié)構(gòu)標準。結(jié)構(gòu)標準用于對網(wǎng)頁元素進行整理和分類，主要包括XML和XHTML兩個部分。(2)表現(xiàn)標準。表現(xiàn)標準用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要是指CSS。(3)行為標準。行為標準是指網(wǎng)頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。任務(wù)1-2認識網(wǎng)頁制作1.?HTML簡介HTML(HyperTextMarkupLanguage，超文本標記語言)是一種用于基本網(wǎng)頁格式標記的語言，它主要是通過HTML標記對網(wǎng)頁中的文本、圖像、聲音等內(nèi)容進行描述。只要是遵守這種格式編寫的代碼，就可以被瀏覽器正常解析并顯示。HTML包含了許多功能標簽，且易學(xué)易懂，使用這些標簽?zāi)軌蛑谱鞒鼍赖木W(wǎng)頁效果。其主要功能如下：(1)表示文檔結(jié)構(gòu)(html、head、title、body)。(2)格式化文本(font、hn、p、br、b、i、u、sup、sub)。(3)創(chuàng)建列表(ul、ol、li)。(4)建立表格(table、caption、tr、th、td)。(5)制作表單(form、input、select、option)。(6)建立鏈接(a)。2.?HTML的發(fā)展史HTML語言發(fā)展至今，經(jīng)歷了6個版本，這個過程中新增了許多HTML標記，同時也淘汰了一些標記。其具體發(fā)展歷程如下：(1)超文本標記語言(第一版)：1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。(2)?HTML2.0：1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時。(3)?HTML3.2：1997年1月14日，W3C推薦標準。(4)?HTML4.0：1997年12月18日，W3C推薦標準。(5)?HTML4.01：1999年12月24日，W3C推薦標準。(6)?HTML5：2008年1月22日公布第一份正式草案，2014年10月底定稿。3.CSS簡介CSS(CascadingStyleSheets，層疊樣式表)主要用于設(shè)置HTML頁面中的文本內(nèi)容(字體、大小、對齊方式等)、圖像的外形(寬度和高度、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。CSS可以用來改變頁面的位置和布局及顯示顏色等效果。CSS常用于控制HTML標簽的顏色、間距、位置和字體等效果。CSS示例代碼格式如下：1)?CSS的優(yōu)勢相對于傳統(tǒng)的table網(wǎng)頁布局，采用CSS布局有下述3個顯著優(yōu)勢：(1)表現(xiàn)和內(nèi)容相分離。CSS布局將設(shè)計部分剝離出來放在一個獨立樣式文件中，HTML文件只存放網(wǎng)頁結(jié)構(gòu)文本信息。這樣的頁面對搜索引擎更加友好。(2)提高頁面瀏覽速度。對于同一個頁面視覺效果，采用CSS布局的頁面容量要比table編碼的頁面文件容量小得多，瀏覽器不必編譯大量冗長的標簽。(3)易于維護和改版。采用CSS布局，只要簡單地修改幾個CSS文件就可以重新設(shè)計整個網(wǎng)站的頁面。2)常見的CSS樣式常見的CSS樣式有3種，分別是內(nèi)聯(lián)樣式、內(nèi)嵌樣式和鏈入樣式。(1)內(nèi)聯(lián)樣式。內(nèi)聯(lián)樣式是指將CSS樣式寫入HTML標簽內(nèi)部，該種寫法只能控制當前標簽的樣式效果。具體示例代碼如下：(2)內(nèi)嵌樣式。內(nèi)嵌樣式是將CSS樣式單獨放入<head>標簽中，通常使用<style>標簽來標識樣式效果。具體示例代碼如下：(3)鏈入樣式。鏈入樣式是指將CSS樣式單獨放到一個文件中，然后在頁面代碼中引用該文件，這樣就可以將HTML代碼與CSS代碼分離，使頁面變得簡潔、代碼編寫變得靈活。具體示例代碼如下：4.?JavaScript簡介JavaScript是一種基于對象和事件驅(qū)動的腳本語言，通過JavaScript可以將靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)相應(yīng)事件的動態(tài)頁面。在網(wǎng)站建設(shè)中，JavaScript用于為頁面添加動態(tài)效果。JavaScript是一種輕量級的編程語言，由布蘭登·艾奇發(fā)明并于1995年出現(xiàn)在NetScap中。JavaScript的基本語法與C語言類似，但運行過程中不需要單獨編譯，而是進行逐行解釋，運行快。JavaScript具有跨平臺的特性，與操作環(huán)境無關(guān)，只依賴于瀏覽器本身，即只要瀏覽器支持JavaScript就能正確執(zhí)行。5.瀏覽器簡介IE、火狐和谷歌是目前互聯(lián)網(wǎng)的三大瀏覽器，其他常用的瀏覽器還有蘋果的Safari瀏覽器和Opera瀏覽器等。對于一般的網(wǎng)站，只要兼容IE瀏覽器、火狐瀏覽器和谷歌瀏覽器，就能滿足絕大多數(shù)用戶的需求。瀏覽器最重要或者說最核心的部分是“RenderingEngine”，可譯為“渲染引擎”，一般人們習(xí)慣稱之為“瀏覽器內(nèi)核”，負責(zé)對網(wǎng)頁語法的解釋并渲染網(wǎng)頁。因此，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。按照內(nèi)核的種類，可將常見的瀏覽器分為以下4類：(1)?Trident內(nèi)核。Trident的代表產(chǎn)品為InternetExplorer(IE),又稱為IE內(nèi)核或MSHTML內(nèi)核。Trident是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、360瀏覽器、搜狗瀏覽器等。(2)?Gecko內(nèi)核。Gecko是一套開放源代碼的、用C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一，僅次于Trident。使用Gecko的最著名瀏覽器有Firefox、Mozilla、Netscape6～Netscape9。Gecko是Netscape(網(wǎng)景)公司早期自主研發(fā)的瀏覽器內(nèi)核，其優(yōu)點是功能強大、豐富，可以支持很多復(fù)雜網(wǎng)頁和瀏覽器接口，但是會消耗很多資源。MozillaFirefox、MozillaSeaMonkey、Waterfox(Firefox的64位開源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)等均使用Gecko內(nèi)核。(3)?WebKit內(nèi)核。WebKit是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用于MacOS系統(tǒng)。WebKit的優(yōu)點是源碼結(jié)構(gòu)清晰、渲染速度極快；缺點是對網(wǎng)頁代碼的兼容性不高，導(dǎo)致一些編寫不標準的網(wǎng)頁無法正常顯示。其主要代表作品有Safari和Google的Chrome瀏覽器。(4)?Presto內(nèi)核。Presto是由OperaSoftware開發(fā)的瀏覽器排版引擎，供Opera7.0及以上版本使用。它取代了舊版Opera4～Opera6版本使用的Elektra排版引擎，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版。Presto的代表作品有OperaPresto。由于Presto是商業(yè)引擎，使用Presto內(nèi)核的瀏覽器除Opera以外，只剩下NDSBrowser、WiiInternetChannel、Nokia770網(wǎng)絡(luò)瀏覽器等，這在很大程度上限制了Presto的發(fā)展。任務(wù)1-3學(xué)習(xí)網(wǎng)頁設(shè)計常用工具1.認識DreamweaverCC界面執(zhí)行“開始”→“所有程序”→“AdobeDreamweaverCC”菜單命令，即可啟動DreamweaverCC。DreamweaverCC的起始頁工作界面如圖1-7所示。2.?DreamweaverCC界面的基本組成DreamweaverCC界面是MDI(多文檔)形式，即將所有的文檔窗口及面板都集合到主窗口中。在DreamweaverCC的起始頁中選擇一個新建項目類型如“HTML”，就會進入新建“HTML”文檔窗口，此窗口即為DreamweaverCC的主界面，如圖1-8所示。DreamweaverCC主界面主要由7個部分組成，分別是菜單欄、文檔工具欄、文檔窗口、“插入”及“文件”面板、標簽選擇器、屬性面板及面板組。1)菜單欄DreamweaverCC菜單欄由各種菜單命令構(gòu)成，包括“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點”“窗口”和“幫助”10個菜單項，如圖1-9所示。2)文檔工具欄文檔工具欄提供了各種文檔視圖窗口，如代碼、拆分、設(shè)計實時視圖，標題還提供了各種查看選項和一些常用操作，如圖1-10所示。下面介紹幾個常用的功能按鈕：(1)代碼：顯示“代碼”視圖。單擊“代碼”按鈕，文檔窗口只顯示“代碼”。(2)拆分：顯示“代碼”和“拆分”視圖。單擊“拆分”按鈕，文檔窗口拆分成兩個部分：左邊為“代碼”視圖，右邊為“設(shè)計”視圖，且兩個視圖中間用一條間隔線分開。拖動間隔線可以改變兩者所占屏幕的比例。(3)設(shè)計：顯示“設(shè)計”視圖。單擊“設(shè)計”按鈕，文檔窗口只顯示“設(shè)計”視圖。(4)實時視圖：提供頁面在瀏覽器中的非可編輯的、逼真的外觀呈現(xiàn)。(5)標題：輸入的內(nèi)容作為網(wǎng)頁標題。3)文檔窗口文檔窗口是Dreamweaver最常用到的區(qū)域之一，此處會顯示所有打開的文檔。單擊文檔工具欄里的“代碼”“拆分”“設(shè)計”3個選擇按鈕可變換區(qū)域的顯示狀態(tài)。圖1-11所示為“拆分”窗口，左邊為“代碼”窗口，右邊為“設(shè)計”窗口。4)“插入”及“文件”面板單擊面板組中的“文件”面板，顯示站點中的文件和文件夾，如圖1-12所示。5)標簽選擇器在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當前選定內(nèi)容標簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標簽，可以選擇該標簽及網(wǎng)頁中對應(yīng)的內(nèi)容。在標簽選擇器欄還可以設(shè)置網(wǎng)頁的顯示比例，如圖1-13所示。6)屬性面板屬性面板主要用于設(shè)置和查看文檔窗口中所選中元素的屬性。在DreamweaverCC中允許用戶在屬性面板中直接對元素的屬性進行修改。屬性面板比較靈活，選中的對象不同，屬性面板中的內(nèi)容也隨之改變。圖1-14、圖1-15、圖1-16分別是“文檔”屬性面板、“表格”屬性面板和“圖像”屬性面板。7)面板組DreamweaverCC包括多個面板，這些面板都有不同的功能，將它們疊加在一起便形成了面板組，如圖1-17所示。3.?Dreamweaver初始化設(shè)置1)設(shè)置工作區(qū)布局打開DreamweaverCC工具界面，選擇菜單欄中的“窗口”→“工作區(qū)布局”→“經(jīng)典”選項。2)添加必備面板設(shè)置為“經(jīng)典”模式后，需要調(diào)出常用的3個面板，分別為“插入”菜單、“文件”面板、“屬性”面板。這些面板均可通過“窗口”菜單打開，如圖1-19所示。3)設(shè)置新建文檔選擇“編輯”→“首選參數(shù)”選項(或按“Ctrl+U”組合鍵)，即可打開“首選參數(shù)”對話框，如圖1-20所示。選中左側(cè)“分類”中的“新建文檔”選項，右側(cè)就會出現(xiàn)對應(yīng)的設(shè)置。4)設(shè)置代碼提示DreamweaverCC擁有強大的代碼提示功能，可以提高書寫代碼的速度。在“首選參數(shù)”對話框中可設(shè)置代碼提示，選擇“代碼提示”菜單，然后選中“結(jié)束標簽”選項中的第二項“鍵入起始標簽‘>’后(D)”，單擊“確定”按鈕即可完成設(shè)置，如圖1-21所示。5)瀏覽器設(shè)置DreamweaverCC可以關(guān)聯(lián)瀏覽器，對編輯的網(wǎng)站頁面進行預(yù)覽。在“首選參數(shù)”對話框左側(cè)區(qū)域選擇“在瀏覽器中預(yù)覽”選項，在右側(cè)區(qū)域單擊“確定”按鈕，即可打開“添加瀏覽器”對話框。設(shè)置步驟如下：(1)在“名稱”文本框中輸入“火狐”，“應(yīng)用程序”文本框中輸入其程序名(包括路徑)，或單擊其后的“瀏覽”按鈕選擇應(yīng)用程序名，如圖1-23所示。(2)單擊“確定”按鈕，打開瀏覽器的快捷方式，如圖1-24所示。4.創(chuàng)建站點創(chuàng)建一個名稱為“手機報價”的站點，保存在文件夾“sgbj”中。創(chuàng)建步驟如下：1)創(chuàng)建所需的文件夾在本地硬盤D盤中創(chuàng)建名為“sgbj”的文件夾。在文件夾“sgbj”中創(chuàng)建子文件夾“images”。2)創(chuàng)建站點“手機報價”(1)在DreamweaverCC的主界面中選擇“站點”→“新建站點”菜單命令，打開站點設(shè)置對話框。(2)在“站點名稱”文本框中輸入要創(chuàng)建的網(wǎng)站名稱“手機報價”；在“本地站點文件夾”文本框中輸入網(wǎng)站文檔保存的路徑“D:\sgbj”，也可以通過其后的按鈕選擇網(wǎng)站文檔保存位置，如圖1-26所示。(3)單擊“高級設(shè)置”按鈕展開下拉菜單，選擇“本地信息”命令。在“默認圖像文件夾”文本框中輸入網(wǎng)站的圖像保存位置“D:\sgbj\images”，或通過其后的按鈕選擇網(wǎng)站圖像保存位置，如圖1-27所示。單擊“保存”按鈕，完成站點設(shè)置。5.管理站點在DreamweaverCC選擇窗口中選擇“站點”菜單下的“管理站點”命令，即可打開“管理站點”對話框，如圖1-28所示。用戶可以完成如下任務(wù)：(1)單擊

按鈕，可刪除當前選中的站點。(2)單擊

按鈕，可編輯當前選中的站點。(3)單擊

按鈕，可復(fù)制當前選定的站點。(4)單擊

按鈕，可導(dǎo)出選中的站點。(5)單擊“導(dǎo)入站點”命令，可導(dǎo)入站點。(6)單擊“新建站點”命令，可創(chuàng)建站點。6.創(chuàng)建主頁在“手機報價”站點中創(chuàng)建一個主頁，主頁名為default.html。內(nèi)容為“這是我的第一個網(wǎng)頁”。創(chuàng)建步驟如下：(1)啟動DreamweaverCC。(2)選擇“站點”菜單下的“新建站點”命令，設(shè)置站點文件夾指向“D:\sjbj”，然后單擊“保存”按鈕。(3)單擊“新建”列中的“HTML”選項，進入網(wǎng)頁編輯窗口，切換到設(shè)計選項，如圖1-29所示。(4)在設(shè)計窗口中輸入“這是我的第一個網(wǎng)頁”，按“Ctrl+S”鍵保存，輸入文件名“defult.html”。(5)運行代碼。任務(wù)1-4安裝Web服務(wù)器Web服務(wù)器除了用來存儲和管理用戶可訪問的網(wǎng)站信息外，還負責(zé)管理并控制安裝在其上的站點和組件信息。目前，相應(yīng)的Web服務(wù)器軟件是針對某一種操作系統(tǒng)進行優(yōu)化的，有的甚至只能運行在某一種操作系統(tǒng)上，在選擇Web服務(wù)器軟件時必須與操作系統(tǒng)平臺一起考慮。1.?Web服務(wù)器軟件的主要性能在選擇Web服務(wù)器軟件時，通常應(yīng)考慮7個方面的性能。1)響應(yīng)能力Web服務(wù)器的響應(yīng)能力主要是指Web服務(wù)器對客戶端瀏覽器請求的響應(yīng)速度。響應(yīng)速度越快，意味著Web服務(wù)器對用戶單擊的響應(yīng)也越快，也就是說單位時間內(nèi)可支持的用戶訪問量也就越大。2)與其他服務(wù)器的集成能力Web服務(wù)器除了向用戶提供Web信息外，通常還承擔(dān)著與DNS服務(wù)器、FTP服務(wù)器、E-mail服務(wù)器、數(shù)據(jù)庫服務(wù)器等其他各種服務(wù)器的協(xié)同工作?？蛻舳酥恍柰ㄟ^瀏覽器這種統(tǒng)一的界面來訪問其他所有網(wǎng)站服務(wù)器中的信息即可。3)支持Web應(yīng)用開發(fā)的能力開發(fā)Web程序，離不開Web服務(wù)器的支持。服務(wù)器軟件支持Web應(yīng)用程序開發(fā)的能力和難易程度是必須考慮的重要性能。4)管理能力Web服務(wù)器軟件的管理能力主要表現(xiàn)在對客戶端用戶的管理能力以及對其自身的管理能力和方便程度，同時體現(xiàn)在是否能夠通過Web進行遠程網(wǎng)絡(luò)管理等。5)與硬件平臺和操作系統(tǒng)的協(xié)調(diào)能力在選擇Web服務(wù)器軟件時，要考慮Web服務(wù)器軟件與操作系統(tǒng)平臺、Web應(yīng)用開發(fā)軟件和一些中間件協(xié)同工作的能力。6)穩(wěn)定性與可靠性Web服務(wù)器運行的穩(wěn)定性與工作的可靠性除了有硬件的因素外，還必須考慮Web服務(wù)器軟件的因素，如服務(wù)器出現(xiàn)軟件故障的概率和排除故障的措施、速度和難易程度等。任何不穩(wěn)定或不可靠因素都將對網(wǎng)站的聲譽和效益產(chǎn)生嚴重的負面影響。7)安全性能在不考慮硬件和人為因素的情況下，Web服務(wù)器的安全性在很大程度上與其Web服務(wù)器軟件有關(guān)，主要應(yīng)從兩個方面進行考慮：一是Web服務(wù)器中的機密信息是否會被泄露和如何防止泄露；二是是否有防止黑客攻擊的相應(yīng)策略。2.常用的Web服務(wù)器軟件目前應(yīng)用比較廣泛的Web服務(wù)器軟件有Microsoft(微軟)公司的IIS和Apache等。1)?IISIIS(InternetInformationServices，互聯(lián)網(wǎng)信息服務(wù))是由Microsoft公司提供的基于運行MicrosoftWindows的互聯(lián)網(wǎng)基本服務(wù)，是在WindowsNTServer上建立Internet服務(wù)器的基本組件。它與WindowsNTServer完全集成，允許使用WindowsNTServer內(nèi)置的安全性以及NTFS文件系統(tǒng)建立強大靈活的Internet/Intranet站點。IIS是一種Web服務(wù)組件，其中包括Web服務(wù)器、FTP(FileTransferProtocol，文件傳輸協(xié)議)服務(wù)器、NNTP(NetworkNewsTransferProtocol，網(wǎng)絡(luò)新聞傳輸協(xié)議)服務(wù)器和SMTP(SimpleMailTransferProtocol，簡單郵件傳輸協(xié)議)服務(wù)器，分別用于網(wǎng)頁瀏覽、文件傳輸、新聞服務(wù)和郵件發(fā)送等方面，它使得在網(wǎng)絡(luò)(包括互聯(lián)網(wǎng)和局域網(wǎng))上發(fā)布信息成了一件很容易的事。2)?ApacheApacheHTTP

Server(簡稱Apache)是Apache軟件基金會的一個開放源碼的網(wǎng)頁服務(wù)器，可以在大多數(shù)計算機操作系統(tǒng)中運行，其多平臺和安全性被廣泛使用，是最流行的Web服務(wù)器端軟件之一。它快速、可靠并且可通過簡單的API(ApplicationProgrammingInterface，應(yīng)用程序庫接口)擴展，將Perl/Python等解釋器編譯到服務(wù)器中。

Apache

HTTP服務(wù)器是一個模塊化的服務(wù)器，源于NCSAhttpd服務(wù)器，經(jīng)過多次改進，成為世界使用排名第一的Web服務(wù)器軟件。Apache可以運行在幾乎所有廣泛使用的計算機平臺上。3)其他Web服務(wù)器軟件除了以上兩種廣為應(yīng)用的Web服務(wù)器軟件之外，還有一些各有特點的優(yōu)秀Web服務(wù)器軟件，如Netscape公司的EnterpriseServer、Novell公司的NetWareWebServer、Oracle公司的WebServer和IBM公司的WebSphere等。3.?Web站點的設(shè)置和管理Web站點的設(shè)置是在“Internet信息服務(wù)(IIS)管理器”中完成的。(1)打開“管理工具”窗口，如圖1-38所示。(2)雙擊“Internet信息服務(wù)(IIS)管理器”選項，打開“Internet信息服務(wù)(IIS)管理器”窗口。在左窗格中展開節(jié)點，如圖1-39所示。(3)鼠標右擊左窗格中的“網(wǎng)站”節(jié)點，從彈出的快捷菜單中選擇“添加網(wǎng)站”命令，打開“添加網(wǎng)站”對話框。在“網(wǎng)站名稱”文本框中輸入“網(wǎng)頁設(shè)計與制作”，在“物理路徑”文本框中輸入“B:\wysj”，在“IP地址”下拉列表中選擇IP地址“00”，如圖1-40所示。(4)單擊“確定”按鈕，關(guān)閉“添加網(wǎng)站”對話框。(5)在“Internet信息服務(wù)(IIS)管理器”窗口的左窗格展開“網(wǎng)站”節(jié)點，并單擊“網(wǎng)頁設(shè)計與制作”節(jié)點，進入“網(wǎng)頁設(shè)計與制作主頁”窗口，如圖1-41所示。(6)雙擊“默認文檔”圖標，打開“添加默認文檔”對話框，在“名稱”框中輸入默認文檔名稱。(7)單擊“確定”按鈕，返回“默認文檔”對話框。若默認文檔不是處于第1個，則可以將其調(diào)至第1個，如圖1-43所示。(8)在瀏覽器的地址欄中輸入地址“”并回車，顯示如圖1-44所示的效果。任務(wù)2-1認識HTML標簽

任務(wù)2-2使用文本控制標簽

任務(wù)2-3使用圖像標簽

任務(wù)2-4使用列表標簽

任務(wù)2-5使用超鏈接標簽任務(wù)2-1認識HTML標簽1.認識HTML文件的基本結(jié)構(gòu)HTML文件的語法結(jié)構(gòu)十分簡單，其基本結(jié)構(gòu)如下：從上面給出的HTML結(jié)構(gòu)可以看出，HTML文檔包括以下3個主要標記：(1)文檔標記<html>…</html>：標示HTML文檔的開頭和結(jié)尾。它是一個根標記，告知瀏覽器其自身是一個HTML文檔。(2)頭部標記<head>…</head>：用來定義整個文檔的屬性和文檔的標題，這部分的標題信息在瀏覽器的窗口中顯示出來，可以包括標題(<title>)、頭元素(<meta>)、代碼(<script>)等。(3)主體標記<body>…</body>：<body>與</body>之間的部分，是文檔的主要部分，在瀏覽器中顯示的內(nèi)容和顯示內(nèi)容的格式標記都放在這里，如文字、圖像、動畫、表格等。在編寫HTML代碼時，必須遵守以下規(guī)范：(1)所有標記都必須有一個相應(yīng)的結(jié)束標記。(2)所有標記和屬性的名稱都必須小寫。(3)所有標記都必須合理嵌套。(4)所有屬性值必須用雙引號括起來。(5)把<、>和&等符號用編碼表示。(6)所有屬性都要賦一個值。(7)注釋標記<!--注釋內(nèi)容-->2.認識標簽在HTML頁面中，帶有“<>”符號的元素被稱為HTML標簽，如上面<body>、<title>都是HTML標簽，也稱HTML標記或HTML元素，本書稱為標簽。1)標簽的分類根據(jù)標簽組成的特點，HTML標簽可分為雙標簽和單標簽兩類。(1)雙標簽。雙標簽由開始和結(jié)束兩個標簽組成，其基本語法格式如下：<標簽名>內(nèi)容</標簽名>(2)單標簽。單標簽是指用一個標簽符號就能完整地描述某個功能的標簽。其基本語法格式如下：<標簽名/>2)標簽的關(guān)系一個網(wǎng)頁中會存在多種標簽，各標簽之間具有一定的關(guān)系。根據(jù)標簽的位置，標簽的關(guān)系主要有嵌套關(guān)系和并列關(guān)系兩種。圖2-1所示是HTML的結(jié)構(gòu)，其中就包含了這兩種關(guān)系。(1)嵌套關(guān)系。嵌套關(guān)系就是平常所說的包含關(guān)系，即在一個雙標簽里包含其他的標簽。(2)并列關(guān)系。并列關(guān)系也稱兄弟關(guān)系，就是兩個標簽處于同一級別，并且沒有包含關(guān)系。3)注釋HTML中有兩種注釋方法：(1)?<!--注釋內(nèi)容-->：常用于注釋一段內(nèi)容。(2)?<!注釋內(nèi)容>：常用于說明標簽里的內(nèi)容。注釋內(nèi)容只為閱讀者提供閱讀代碼的方便，在瀏覽器窗口中不顯示。通常，標簽包括以下5種：(1)聲明文檔類型標簽。!doctype聲明位于HTML文檔的最前面，在<html>標簽之前，用于告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。(2)?html標簽。html標簽用于表示HTML文件的開始與結(jié)束。Web頁面所有內(nèi)容都位于這兩個標簽之間。(3)?head標簽。<head>標簽又稱首部標簽符，位于Web頁的開頭。Head標簽用于描述HTML文檔本身的信息，如網(wǎng)頁標題、關(guān)鍵字等，但不包括Web頁的任何實際內(nèi)容。除了網(wǎng)頁標題在瀏覽器的標題欄顯示外，其他一般不會顯示在瀏覽器中。(4)?title標簽。<title>標簽用來說明網(wǎng)頁的主題或用途，顯示在瀏覽器的標題欄。(5)?meta標簽。meta標簽不顯示在頁面中，一般用來定義頁面信息、關(guān)鍵字、刷新等。meta不需設(shè)置結(jié)束標記。通常使用<metacharset="utf-8">格式，表示meta標簽定義網(wǎng)頁中所使用的字符集為utf-8。任務(wù)2-2使用文本控制標簽1.頁面格式化標簽1)標題標簽HTML提供了6個等級的標題標簽，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>標題的重要性依次遞減。其格式如下：<hn>標題文本</hn>n取1～6間的值。若想讓標題文字呈對齊(左對齊、居中對齊、右對齊)方式，可在標簽里設(shè)置align屬性來實現(xiàn)，其格式如下：<hnalign="對齊方式">標題文本</hn>說明：“對齊方式”的取值如下：(1)?left：設(shè)置標題文字左對齊(默認值)。(2)?right：設(shè)置標題文字右對齊。(3)?center：設(shè)置標題文字居中對齊。2)段落標簽在網(wǎng)頁中使用<p>標簽來定義段落。<p>標簽是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。<p>標簽的格式如下：<palign="對齊方式">段落文本</p>3)水平線標簽在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過<hr/>標簽來定義。<hr/>是一個單標簽，其定義格式如下：<hr屬性="屬性值"/><hr/>常用的屬性如表2-1所示。4)換行標簽在Word中，按“Enter”鍵可以將一段文字換行顯示，但在網(wǎng)頁中，如果想要將某段文本強制換行顯示，就需要使用換行標簽<br/>。在Dw設(shè)計窗口，可按“shift+Enter”鍵換行。2.文本樣式標簽文本樣式標簽<font>用來控制網(wǎng)頁中文本的效果(如字體、字號和顏色等)，讓網(wǎng)頁中的文字樣式變得更加豐富。文本樣式標簽的基本語法格式如下：<font屬性="屬性值">文本內(nèi)容</font><font>標簽中常用的屬性如表2-2所示。3.文本格式化標簽網(wǎng)頁中經(jīng)常需要為文字設(shè)置粗體、斜體或下畫線等一些特殊的文本效果，此時可以使用HTML提供的文本格式化標簽實現(xiàn)文字的特殊顯示。常用的文本格式化標簽如表2-3所示。4.文本語義標簽在HTML中，文本語義標簽有很多，這里列舉mark和cite標簽，并簡要介紹其應(yīng)用。1)?mark標簽mark標簽的主要功能是在文本中讓某些字符高亮顯示，該元素的用法與em標簽和strong標簽有相似之處，但mark標簽在突出顯示樣式時更隨意、靈活。2)?cite標簽cite標簽可以創(chuàng)建一個引用，用于對文檔引用參考文獻的說明，一旦在文檔中使用了該標簽，被標注的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別于段落中的其他字符。5.特殊字符標簽網(wǎng)頁中有些字符是不能直接輸入的，為此HTML為這些字符提供了專門的替代代碼，如表2-4所示。任務(wù)2-3使用圖像標簽1.認識常見的圖像格式網(wǎng)頁中通常使用以下幾種文件格式。1)?JPEG文件格式JPEG(JointPhotographicExpertsGroup)圖像格式常用于全彩圖像，在Web中常見。它是將原始的圖像壓縮后的格式，其壓縮比較大，在圖像打開時自動解壓縮。JPEG格式支持CMYK、RGB和灰度顏色模式，但不支持Alpha通道。與GIF格式不同，JPEG保留RGB圖像中的所有顏色信息，只是有選擇地扔掉數(shù)據(jù)來壓縮文件大小。2)?GIF文件格式GIF(GraphicsInterchangeFormat)圖像格式是一種圖像交換格式，僅支持256色，常用于Web圖像。GIF又細分為兩種格式即87a和89a，其中89a可存儲動畫和透明背景效果。3)?PNG文件格式PNG(PortableNetworkGraphics)圖像格式使用的是無丟失壓縮方式，支持24位圖像，能生成透明的背景，是網(wǎng)絡(luò)上的一種新生文件格式。它的最大特點是將JPEG和GIF兩種格式的優(yōu)點很好地結(jié)合在一起使用。4)?TIFF文件格式TIFF(Tagged-imageFileFormat)是掃描儀常用的格式，支持跨平臺的軟件應(yīng)用。TIFF文檔的文件最大可達4?GB。TIFF格式支持具有Alpha通道的CMYK、RGB、Lab、索引顏色和灰度圖像，并支持無Alpha通道的位圖模式圖像。5)?SWF文件格式SWF(ShockWaveFlash)文件格式是基于矢量圖像的文件格式，它用于創(chuàng)建適合Web的可縮放的小型圖像。因為文件格式基于矢量，所以在任何分辨率下圖像都可以保持圖像品質(zhì)，特別適用于動畫幀的創(chuàng)建。6)?SVG文件格式SVG(ScalableVectorGraphics)是將圖像描述為形狀、路徑、文本和濾鏡效果的矢量格式。生成的文件很緊湊，在Web上可以設(shè)計激動人心的、高分辨率的Web圖像頁面，甚至在資源十分有限的手持設(shè)備中都可提供高品質(zhì)的圖像。2.圖像的路徑若網(wǎng)頁中有圖像，則瀏覽器在渲染時需要知道圖像的位置即圖像的路徑。如果不知道路徑，就不能夠正確顯示圖像。因此，在網(wǎng)頁中插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。通過設(shè)置“路徑”來幫助瀏覽器找到圖像文件。路徑有絕對路徑和相對路徑。1)絕對路徑絕對路徑一般是指帶有盤符的路徑，或完整的網(wǎng)絡(luò)地址。2)相對路徑相對路徑不帶有盤符，通常是以HTML網(wǎng)頁文件為起點，通過層級關(guān)系描述目標圖像的位置。相對路徑的設(shè)置通常有以下3種形式：(1)圖像文件和html文件位于同一文件夾。只需輸入圖像文件的名稱即可。(2)圖像文件位于HTML文件的下一級文件夾。輸入文件夾名和文件名，之間用“/”隔開。(3)圖像文件位于HTML文件的上一級文件夾。在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推。3.圖像標簽<img/>在網(wǎng)頁中使用<img>標簽顯示圖像。圖像標簽的基本語法格式如下：<imgsrc="圖像URL"/><img/>標簽的屬性如表2-5所示。下面介紹<img>標簽的屬性。1)圖像的替換文本屬性alt當頁面中的圖像無法正常顯示時，我們可以使用alt屬性告知用戶原因。2)鼠標懸停在圖像上時顯示的內(nèi)容屬性title<img/>標簽的title屬性用來設(shè)置當鼠標懸停在圖像上時顯示文本信息。3)圖像的寬度width和高度height屬性通過width和height屬性可以設(shè)置圖像的寬度和高度。若只設(shè)一個屬性，則另一個按等比縮放。如果不設(shè)置圖像的width和height屬性，則圖像按照原始尺寸顯示。4)圖像的邊框?qū)傩詁order默認情況下圖像是沒有邊框的，可以使用border屬性為圖像加邊框，猶如給真實的畫裝裱。5)圖像的邊距屬性vspace和hspaceHTML中通過vspace和hspace屬性分別調(diào)整圖像的