任務(wù)1-1認(rèn)識(shí)Web

任務(wù)1-2認(rèn)識(shí)網(wǎng)頁制作

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

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

按鈕，可刪除當(dāng)前選中的站點(diǎn)。(2)單擊

按鈕，可編輯當(dāng)前選中的站點(diǎn)。(3)單擊

按鈕，可復(fù)制當(dāng)前選定的站點(diǎn)。(4)單擊

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

Apache

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

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

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

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

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

任務(wù)3-2設(shè)置表格和單元格的屬性

任務(wù)3-1認(rèn)識(shí)表格1.表格的基本構(gòu)成表格是網(wǎng)頁設(shè)計(jì)制作中不可缺少的元素，它可以將各類網(wǎng)頁元素有序地顯示在頁面上。表格由3個(gè)基本部件構(gòu)成：(1)行：水平空間。(2)列：垂直空間。(3)單元格：行列相交處的空間。整張表格的邊緣成為邊框，單元格中的內(nèi)容和邊框之間的距離稱為單元格邊距(CellPad)，單元格和單元格之間的距離稱為單元格間距(CellSpace)，如圖3-1所示。2.創(chuàng)建和選擇表格1)創(chuàng)建表格插入表格的位置必須是從一個(gè)新行開始，且表格獨(dú)占一行。Dw中創(chuàng)建表格的步驟如下：(1)將光標(biāo)置于要插入表格的位置，選擇“插入”菜單中的“表格”選項(xiàng)或在“插入”面板的“常用”選項(xiàng)卡中單擊“表格”按鈕，打開“表格”對(duì)話框，根據(jù)需求設(shè)置表格初始屬性，如圖3-2所示。(2)單擊“確定”按鈕即可將表格插入頁面，可輸入表格內(nèi)容，文字、圖片。表格建立好后就可以向表格內(nèi)添加元素了，如圖像、文字和表格等，方法如同在Word文檔中操作一樣，添加文本，表格會(huì)隨著增多而自動(dòng)增高。在單元格中添加圖像時(shí)，如果單元格的尺寸小于圖像的尺寸，單元格會(huì)自動(dòng)增高或增寬。在單元格中插入表格時(shí)，單元格中的表格叫作內(nèi)嵌式表格。內(nèi)嵌式表格中的單元格可以再拆分成多行或多列，并且可以無限制地插入，不過內(nèi)嵌的表格越多，瀏覽器下載時(shí)間越長，所以內(nèi)嵌表格最好不要超過三層。2)選取表格對(duì)表格進(jìn)行編輯前，需要先選擇表格。選擇整個(gè)表格的方法：將鼠標(biāo)光標(biāo)移動(dòng)到表格的任意邊框上，當(dāng)光標(biāo)變成雙向箭頭形狀時(shí)，單擊鼠標(biāo)左鍵，即可選擇整個(gè)表格，如圖3-4所示。3)選取行或列在選擇表格時(shí)，可以通過鼠標(biāo)直接選擇表格的某一行或某一列，也可以同時(shí)選擇多行或多列。(1)選擇表格的一行。移動(dòng)光標(biāo)到表格的某一行左邊框處，當(dāng)鼠標(biāo)光標(biāo)變成向右的黑箭頭時(shí)，單擊鼠標(biāo)即可選擇該行，如圖3-5所示。(2)選擇表格的一列。移動(dòng)光標(biāo)到表格的某一列上邊框處，當(dāng)鼠標(biāo)光標(biāo)變成向下的黑箭頭時(shí)，單擊鼠標(biāo)即可選擇該列，如圖3-6所示。若要選擇多行或多列，可以配合“Ctrl”鍵和“Shift”鍵使用。4)選取單元格在選取單元格時(shí)，可以選擇單個(gè)單元格，也可以選擇一個(gè)單元格、單元格區(qū)域或不相鄰的多個(gè)單元格。當(dāng)某個(gè)單元格被選時(shí)，該單元格周圍會(huì)出現(xiàn)黑色邊框。單擊表格中的某個(gè)單元格，按住鼠標(biāo)左鍵從當(dāng)前單元格上方開始向要連續(xù)選擇單元格的方向拖動(dòng)鼠標(biāo)選擇單元格，釋放鼠標(biāo)后，完成某個(gè)區(qū)域的單元格選取，如圖3-7所示。在選擇單元格前按住“Ctrl”鍵，然后單擊需要選擇的單元格，最后釋放“Ctrl”鍵可選擇多個(gè)不相鄰的單元格，如圖3-8所示。任務(wù)3-2設(shè)置表格和單元格的屬性創(chuàng)建表格后，需要對(duì)表格元素進(jìn)行一系列的操作，最常用的就是設(shè)置它的屬性。1.設(shè)置表格屬性在網(wǎng)頁中加入表格后，可以對(duì)表格的布局、樣式等進(jìn)行詳細(xì)的設(shè)置，以使表格中的布局可以精確地達(dá)到要求。選定整個(gè)表格后，屬性面板會(huì)變成表格屬性面板，從選項(xiàng)中設(shè)置各個(gè)參數(shù)，如圖3-9所示。2.設(shè)置單元格屬性選定單元格后，屬性面板會(huì)變成單元格屬性面板，如圖3-10所示。任務(wù)4-1認(rèn)識(shí)CSS

任務(wù)4-2創(chuàng)建和使用CSS樣式

任務(wù)4-3設(shè)置CSS樣式屬性

任務(wù)4-4認(rèn)識(shí)CSS選擇器任務(wù)4-1認(rèn)識(shí)CSSCSS非常靈活，既可以嵌入在HTML文檔中，也可以是一個(gè)單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為后綴名。1.?CSS的優(yōu)勢(shì)(1)內(nèi)容和樣式分離，使網(wǎng)頁設(shè)計(jì)更加明了、簡潔。(2)彌補(bǔ)HTML對(duì)標(biāo)簽屬性控制的不足。(3)可精確控制網(wǎng)頁布局。(4)可提高網(wǎng)頁效率，增強(qiáng)易用性和擴(kuò)展性。(5)增強(qiáng)網(wǎng)頁特效，提升用戶體驗(yàn)。2.?CSS的核心基礎(chǔ)1)?CSS樣式規(guī)則使用CSS對(duì)網(wǎng)頁進(jìn)行修飾，首先要了解CSS樣式規(guī)則。CSS樣式語法格式如下：選擇器{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}其中，選擇器可以是標(biāo)簽選擇器、id選擇器、類選擇器和偽類選擇器。選擇器嚴(yán)格區(qū)分大小寫，屬性和屬性值不區(qū)分大小寫。屬性和屬性值以鍵值對(duì)的形式出現(xiàn)。2)引入CSS樣式表使用CSS修飾網(wǎng)頁，需要在HTML文檔中引入CSS樣式表，CSS提供了4種引入方式，分別是行內(nèi)式、內(nèi)嵌式、外鏈?zhǔn)胶蛯?dǎo)入式。(1)行內(nèi)式。行內(nèi)式也被稱為內(nèi)嵌樣式，是通過標(biāo)簽的style屬性來設(shè)置標(biāo)簽的樣式，其基本語法格式如下：<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;...;屬性n:屬性值n">內(nèi)容</標(biāo)簽名>上述語法中，style是標(biāo)簽的屬性，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。(2)內(nèi)嵌式。內(nèi)嵌樣式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)簽定義。其基本語法格式如下：在上述語法中，<style>標(biāo)簽一般位于<head>標(biāo)簽中的<title>標(biāo)簽之后。(3)外鏈?zhǔn)健Ｍ怄準(zhǔn)绞菍⑺械臉邮椒旁谝粋€(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)簽將外部樣式文件鏈接到HTML文檔中。其語法格式如下：其中：①?href：定義所鏈接外部樣式表文件URL。②?type：定義所鏈接文檔的類型。③?rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。(4)導(dǎo)入式。導(dǎo)入式與外鏈?zhǔn)较嗤际轻槍?duì)外部樣式表文件的，但它使用的是@import語句。其基本語法格式如下：該語法中，style樣式標(biāo)簽內(nèi)還可以存放其他的內(nèi)嵌樣式，但@import語句需要位于其他內(nèi)嵌樣式的上面。大多數(shù)網(wǎng)站都是采用外鏈?zhǔn)揭胪獠繕邮奖恚饕蚴撬鼈兊募虞d方式不同。當(dāng)一個(gè)頁面被加載時(shí)，外鏈?zhǔn)降臉邮綍?huì)被同時(shí)加載，而導(dǎo)入式的樣式需要等到頁面全部下載完后才被加載，這樣會(huì)造成不好的用戶體驗(yàn)。3)?CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML標(biāo)簽，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則被稱為選擇器。CSS中的基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器和通配符選擇器。(1)標(biāo)簽選擇器。標(biāo)簽選擇器是指HTML標(biāo)簽名稱作為選擇器，其基本的語法規(guī)則如下：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}所有的HTML標(biāo)簽名都可以作為標(biāo)簽選擇器。標(biāo)簽選擇器的最大優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，其缺點(diǎn)是不能設(shè)計(jì)差異化的樣式。(2)類選擇器。類選擇器使用“.”(英文點(diǎn)號(hào))進(jìn)行標(biāo)識(shí)，后面緊跟類名，而類名是與標(biāo)簽名不同的一串字符。其基本語法格式如下：.類名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}在HTML中，類名為class的屬性值，大多數(shù)HTML元素都可以定義class屬性。類選擇器的優(yōu)點(diǎn)是可以為元素對(duì)象定義單獨(dú)的樣式。注意：①類名的第一個(gè)字符不能使用數(shù)字，且嚴(yán)格區(qū)分大小寫。②一般類名采用小寫英文字符。(3)?id選擇器。id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其id名不能為標(biāo)簽字符串。id選擇器的語法格式如下：#id標(biāo)簽{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}在HTML中，id名即為id的屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id名是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。(4)通配符選擇器。通配符選擇器用“*”號(hào)表示，它是所有選擇器中使用范圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：*{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}任務(wù)4-2創(chuàng)建和使用CSS樣式1.“CSS設(shè)計(jì)器”面板在DreamweaverCC中，可以通過“CSS設(shè)計(jì)器”面板來創(chuàng)建樣式。CSS設(shè)計(jì)器是一個(gè)集成面板，支持可視化創(chuàng)建CSS文件、規(guī)則、集合屬性以及媒體查詢，如圖4-3所示。1)源“源”組中列出了所有與文檔有關(guān)的CSS樣式表。在這個(gè)組中，可以創(chuàng)建CSS樣式并將其附加到文檔中，如圖4-4所示。2)?@媒體“@媒體”組用于列出“源”組中選中的規(guī)則的全部媒體查詢，媒體查詢可以向不同設(shè)備提供不同的樣式。3)選擇器“選擇器”組用于列出“源”組中選擇的規(guī)則的全部選擇器，如果沒有選擇CSS樣式或媒體查詢，則此組將顯示文檔中的所有選擇器，如圖4-5所示。4)屬性“屬性”組可為指定的選擇器設(shè)置屬性，主要有布局、文本、邊框、背景及其他屬性，如圖4-6所示。2.創(chuàng)建CSS樣式選擇器CSS樣式選擇器中包括標(biāo)簽選擇器、類選擇器和id選擇器。1)標(biāo)簽選擇器標(biāo)簽選擇器是現(xiàn)有的HTML標(biāo)簽(或稱標(biāo)記)。用CSS控制這些標(biāo)簽，會(huì)改變標(biāo)簽的默認(rèn)樣式。其語法格式如下：標(biāo)簽名稱{屬性:屬性值1;屬性:屬性值2;…}創(chuàng)建標(biāo)簽選擇器的具體操作方法如下：(1)完成網(wǎng)頁的內(nèi)容架構(gòu)。(2)單擊“CSS設(shè)計(jì)器”面板中“源”組右側(cè)的“+”按鈕，在彈出的菜單中選擇“創(chuàng)建新的CSS文件”，彈出“創(chuàng)建新的CSS文件”對(duì)話框。(3)在彈出的對(duì)話框中，在“文件/URL(F):”文本框中輸入想要使用的CSS文件名，并可通過

按鈕選擇樣式文件保存位置。此時(shí)會(huì)在“文檔”窗口添加名為“style.css”選項(xiàng)卡，在“源代碼”中添加鏈接<linkhref="CSS/style.css"rel="stylesheet"type="text/css">，如圖4-8所示。(4)選擇新建的“style.css”，在“選擇器”組中單擊右側(cè)的“+”按鈕添加選擇器，選擇器會(huì)自動(dòng)添加當(dāng)前光標(biāo)所在位置的HTML標(biāo)簽，如圖4-9所示。用戶也可以自行修改需要使用的HTML標(biāo)簽。(5)在“屬性”組中單擊“Text(文本)”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-10所示，對(duì)h2標(biāo)簽選擇器添加了“font-family”“text-decoration”等屬性，分別設(shè)置了文字的字體、樣式。對(duì)p標(biāo)簽選擇器添加了“font-family”“font-size”和“text-indent”等屬性，分別設(shè)置了文字的字體、字體大小和樣式，如圖4-11所示。(6)單擊“文檔”窗口的“style.css”選項(xiàng)卡，可以看到h2標(biāo)簽和p標(biāo)簽的CSS樣式代碼，如圖4-12所示。(7)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個(gè)網(wǎng)頁的字體類型等發(fā)生改變。2)類選擇器當(dāng)希望某一個(gè)或某幾個(gè)元素的外觀與網(wǎng)頁上的其他相關(guān)標(biāo)簽有所不同時(shí)，設(shè)計(jì)者就可以使用類選擇器。類選擇器可以應(yīng)用到網(wǎng)頁中任意的元素上，還能更精確地控制網(wǎng)頁中的某一元素。很多時(shí)候在CSS中看到名稱前以“.”開頭，這個(gè)英文句點(diǎn)開關(guān)就表示CSS的類樣式，類是可以被多次調(diào)用的。創(chuàng)建類選擇器的具體操作方法如下：(1)與創(chuàng)建標(biāo)簽選擇器相同，在創(chuàng)建類選擇器之前，需要先設(shè)計(jì)網(wǎng)頁內(nèi)容，并在“CSS選擇器”面板中創(chuàng)建或選擇“源”組中對(duì)應(yīng)的CSS文件。(2)在“選擇器”組中單擊“+”按鈕添加選擇器，在顯示的文本框中輸入“.one”文本，如圖4-14所示。(3)在“屬性”組中單擊“文本”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-15所示，添加了“color”“font-weight”和“font-size”，設(shè)置了文字的顏色、字體粗細(xì)和字體大小。(4)在“文檔”窗口選中想要應(yīng)用該類的網(wǎng)頁內(nèi)容，右擊鼠標(biāo)，從彈出的菜單中選擇“CSS樣式”“one”菜單命令。(5)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個(gè)網(wǎng)頁的字體類型等發(fā)生改變。3)?id選擇器創(chuàng)建id選擇器的具體操作方法如下：(1)與創(chuàng)建標(biāo)簽選擇器、類選擇器相同，在創(chuàng)建id選擇器之前，需要先設(shè)計(jì)網(wǎng)頁內(nèi)容，并在“CSS選擇器”面板中創(chuàng)建或選擇“源”組中對(duì)應(yīng)的CSS文件。(2)在“選擇器”組中單擊“+”按鈕添加選擇器，在顯示的文本框中輸入“#two”文本，如圖4-17所示。(3)在“屬性”組中單擊“布局”欄和“文本”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-18所示，添加了“color”和“float”，設(shè)置了文字的顏色和文字的位置。(4)在“文檔”窗口選中想要應(yīng)用該類的網(wǎng)頁內(nèi)容，右擊鼠標(biāo)，從彈出的菜單中選擇“CSS樣式”“.one”菜單命令。(5)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個(gè)網(wǎng)頁的字體類型等發(fā)生改變。任務(wù)4-3設(shè)置CSS樣式屬性創(chuàng)建CSS樣式表的過程，就是對(duì)各種CSS屬性的設(shè)置過程，因此了解和掌握屬性設(shè)置非常重要。在DreamweaverCC中，為了方便初學(xué)者學(xué)習(xí)CSS樣式屬性，提供了可視化操作，那就是“CSS設(shè)計(jì)器”面板上的屬性組，該組中可以設(shè)置“布局”“文本”“邊框”“背景”“其他”5種類型的屬性。DreamweaverCC實(shí)現(xiàn)CSS屬性設(shè)置功能是完全可視化的，無須編寫代碼。1.設(shè)置布局樣式在“屬性”組的“布局”欄中，可以設(shè)置頁面元素在頁面上的放置位置。在應(yīng)用填充與邊距設(shè)置時(shí)，將設(shè)置應(yīng)用于元素的各條邊上，同時(shí)可以應(yīng)用定位來確定元素在頁面上的相關(guān)位置，如圖4-19為CSS面板的“布局”欄。定義樣式設(shè)置可以控制頁面上的元素布局。常用的屬性如下：(1)“width”(寬度)和“height”(高度)：設(shè)置元素的尺寸大小，默認(rèn)值為auto，可以使用px、cm等單位確定具體的寬度和高度。(2)“margin”(邊界)：設(shè)置對(duì)象的外邊距。(3)“padding”(填充)：設(shè)置對(duì)象的內(nèi)容距四邊的距離，即內(nèi)邊距，定義元素內(nèi)容和邊框之間的空間大小。(4)“float”(浮動(dòng))：移動(dòng)元素并將其放置在頁面邊緣的左側(cè)或右側(cè)，其他環(huán)繞移動(dòng)的元素則保持正常。該屬性是實(shí)現(xiàn)div+CSS布局的關(guān)鍵。(5)“clear”(清除)：定義元素的哪一邊不允許有層。如果層出現(xiàn)在被清除的那一邊，則(設(shè)置了清除屬性的)元素將移動(dòng)到層的下面。“margin”和“padding”很重要，它們與盒模型有關(guān)系。2.設(shè)置文本樣式在網(wǎng)頁設(shè)計(jì)過程中，文本的CSS樣式是使用最頻繁的。在“屬性”組的“文本”欄中，可以通過定義CSS樣式來對(duì)文本樣式進(jìn)行設(shè)置，如圖4-20所示。3.設(shè)置邊框樣式在“屬性”組的“邊框”欄中，能夠設(shè)置網(wǎng)頁標(biāo)簽4個(gè)邊框的各種屬性。“邊框”分為樣式(style)、寬度(width)、顏色(color)等，圖4-21為CSS面板的“邊框”欄。4.設(shè)置背景樣式合理使用“背景”樣式設(shè)置網(wǎng)頁背景可以使網(wǎng)頁更加美觀。一般來說，背景顏色或背景圖像顏色深時(shí)，文字顏色應(yīng)該偏淺；背景顏色或背景圖像顏色淺時(shí)，文字顏色應(yīng)該偏深。這樣設(shè)置的目的是容易閱讀，如圖4-22所示。常用的背景樣式屬性如下：1)背景圖(1)“background-color”(背景顏色)：默認(rèn)值為transparent，表示背景顏色為透明，也可以用RGB顏色值、十六進(jìn)制顏色值和顏色名稱作為屬性值。(2)“background-image”(背景圖)：設(shè)置要用的背景圖像，需要指定背景圖的路徑。(3)“background-position”(背景位置)：設(shè)置背景圖像的位置。(4)“background-repeat”(重復(fù)方式)：設(shè)置背景圖像是否平鋪，其值有repeat(默認(rèn)值，表示縱向和橫向平鋪)、no-repeat(不平鋪)、repeat-x(僅橫向平鋪)、repeat-y(僅縱向平鋪)。(5)“background-attachment”(滾動(dòng)方式)：設(shè)置背景圖像是否固定或隨著頁面的其余部分滾動(dòng)，取值scroll(默認(rèn)值，隨內(nèi)容滾動(dòng))和fixed(固定不滾動(dòng))。2)相框陰影(1)“box-shadow”(相框陰影)：為相框添加一個(gè)或多個(gè)陰影。(2)“h-shadow”(水平陰影)：設(shè)置水平陰影。(3)“v-shadow”(垂直陰影)：設(shè)置垂直陰影。(4)“blur”(模糊)：設(shè)置模糊的距離。(5)“spread”(擴(kuò)展)：改變陰影的尺寸。(6)“color”(陰影的顏色)：設(shè)置陰影的顏色。(7)“inset”(向內(nèi))：將外部陰影改為內(nèi)部陰影。5.設(shè)置其他樣式“屬性”組的“其他”欄，主要是對(duì)列表樣式表進(jìn)行設(shè)置，它可以設(shè)置出非常豐富的列表樣式，如圖4-23所示。任務(wù)4-4認(rèn)識(shí)CSS選擇器1.關(guān)系選擇器關(guān)系選擇器可以更精確地控制元素樣式。CSS中的關(guān)系選擇器主要包括子元素選擇器和兄弟選擇器，其中子元素選擇器由符號(hào)“>”連接，兄弟選擇器由符號(hào)“+”和“~”連接。1)子元素選擇器子元素選擇器主要用來選擇某個(gè)元素的第一級(jí)子元素，即只能選擇作為某元素子元素的元素。其格式如下：標(biāo)簽>標(biāo)簽1{}標(biāo)簽1為標(biāo)簽的子元素，標(biāo)簽包含標(biāo)簽1。2)兄弟選擇器兄弟選擇器是用來選擇與某元素位于同一個(gè)父元素之中，且位于該元素之后的兄弟元素。兄弟元素選擇器分為相鄰兄弟選擇器和普通兄弟選擇器兩種。(1)相鄰兄弟選擇器。相鄰近兄弟選擇器使用“+”來連接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父元素，且第2個(gè)元素必須緊跟第1個(gè)元素。(2)普通兄弟選擇器。普通兄弟選擇器使用“~”來連接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親且第2個(gè)元素不必緊跟第1個(gè)元素。2.結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器允許開發(fā)者根據(jù)文檔結(jié)構(gòu)來指定元素的樣式。CSS3中增加了許多新的結(jié)構(gòu)化偽類選擇器，方便網(wǎng)頁設(shè)計(jì)者精準(zhǔn)地控制元素樣式。常用的結(jié)構(gòu)化偽類選擇器有以下6類。1)?:root選擇器:root選擇器用于匹配文檔根標(biāo)簽，在HTML中，根標(biāo)簽始終是html標(biāo)簽，即使用“:root選擇器”定義的樣式，對(duì)所有頁面標(biāo)簽有效。對(duì)于不需要該樣式的標(biāo)簽，可以單獨(dú)設(shè)置樣式進(jìn)行覆蓋。2)?:not選擇器如果對(duì)某個(gè)結(jié)構(gòu)標(biāo)簽使用樣式，而又想排除這個(gè)結(jié)構(gòu)標(biāo)簽下面的子結(jié)構(gòu)標(biāo)簽，讓它不使用這個(gè)樣式，則可以使用:not選擇器。3)?:only-child選擇器:only-child選擇器用于匹配屬于某父標(biāo)簽的唯一子標(biāo)簽的標(biāo)簽，也就是說，如果某個(gè)父標(biāo)簽僅有一個(gè)子標(biāo)簽，則使用“:only-child選擇器”可以選擇這個(gè)子標(biāo)簽。4)?:first-child選擇器和:last-child選擇器:first-child選擇器和:last-child選擇器分別用于為父標(biāo)簽中的第一個(gè)或者最后一個(gè)子標(biāo)簽設(shè)置樣式。5)?:nth-child(n)和:nth-last-child(n)選擇器使用:first-child選擇器和:last-child選擇器可以選擇某個(gè)父元素中第一個(gè)或最后一個(gè)子元素，但是如果用戶想要選擇第2個(gè)或倒數(shù)第2個(gè)子元素，這兩個(gè)選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴(kuò)展。6)?:nth-of-type(n)和:nth-last-of-type(n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素。3.偽元素選擇器所謂偽元素選擇器，是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器。CSS中常用的偽元素選擇器有??:before選擇器和?:after選擇器。1)?:before選擇器:before選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合content屬性來指定要插入的具體內(nèi)容。其格式為：2)?:after選擇器:after選擇器用于在某個(gè)元素之后插入一些內(nèi)容，使用方法與:before選擇器相同。任務(wù)5-1布局概述

任務(wù)5-2布局常用屬性

任務(wù)5-3布局類型任務(wù)5-1布局概述網(wǎng)頁布局是指網(wǎng)頁上的各種元素，如文字、圖片、視頻、按鈕等的展示和組織方式。網(wǎng)頁布局的目的是使頁面的內(nèi)容更易于理解和瀏覽，同時(shí)增強(qiáng)網(wǎng)站的視覺吸引力。div?+?CSS是Web的一種標(biāo)準(zhǔn)，也是一種網(wǎng)頁的布局方法。div?+?CSS布局是采用<div>標(biāo)簽配合CSS實(shí)現(xiàn)對(duì)網(wǎng)頁標(biāo)簽定位的一種布局方法。此種定位方式不同于傳統(tǒng)的表格(table)布局定位方式，它可真正實(shí)現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)相分離的效果。這里div為division的縮寫，意思為劃分，也可以稱為層或區(qū)塊。通過合理的網(wǎng)頁布局設(shè)計(jì)，可以讓頁面內(nèi)容更加有序、整潔，并且使用戶更容易找到自己需要的信息。div?+?CSS布局的主要優(yōu)點(diǎn)如下：(1)網(wǎng)頁和表現(xiàn)內(nèi)容分離，便于站點(diǎn)重構(gòu)頁面。(2)結(jié)構(gòu)清晰，對(duì)搜索引擎更加友好。(3)便于Web項(xiàng)目開發(fā)分工協(xié)作。1.?div標(biāo)簽<div>標(biāo)簽常用于對(duì)塊進(jìn)行標(biāo)記，以便通過樣式表來對(duì)<div>標(biāo)簽標(biāo)記塊進(jìn)行格式化。<div>標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。如果用id或class來標(biāo)記<div>標(biāo)簽，那么該標(biāo)簽的作用會(huì)變得更加明顯。1)?<div>標(biāo)簽的基本語法<div>標(biāo)簽的基本語法格式如下： <div

id="id選擇符">文字或圖像</div>或 <divclass="類選擇符">文字或圖像</div>2)?<div>標(biāo)簽的常用屬性<div>標(biāo)簽的常用屬性如下：(1)?position屬性：表示層的定位方式。(2)?left和top屬性：定義層的位置，與之并列的還有right和bottom屬性，這4個(gè)屬性用來設(shè)置層的位置。(3)?width和height屬性：定義層的寬度和高度。(4)?float屬性：定義層的浮動(dòng)方式。(5)?clear屬性：定義清除屬性，表示層是否允許在某個(gè)元素的周圍有浮動(dòng)元素，即是否去掉某個(gè)位置的浮動(dòng)元素。(6)?z-index屬性：設(shè)置區(qū)域的上下層關(guān)系，相當(dāng)于三維空間的z坐標(biāo)，z-index屬性值越大，其位置就越高。表5-1為<div>標(biāo)簽的屬性及說明。2.?span標(biāo)簽<span>標(biāo)簽與<div>標(biāo)簽一樣也是一個(gè)容器元素，被廣泛運(yùn)用在網(wǎng)頁制作中。<span>標(biāo)簽用來組合文檔中的行內(nèi)元素。<span>元素是一個(gè)內(nèi)聯(lián)元素，它包圍的元素不會(huì)自動(dòng)換行。<span>標(biāo)簽沒有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺上的變化。<span>標(biāo)簽的基本語法如下：<span

id="指定樣式名稱">文本</span>3.使用div+CSS布局的流程為了提高網(wǎng)頁制作的效率，布局時(shí)通常要遵循一定的布局流程，使用div+CSS布局的具體流程如下：(1)確定頁面的版心寬度。版心是指瀏覽器內(nèi)顯示內(nèi)容的有效面積，顯示內(nèi)容在瀏覽器窗口中一般是居中顯示的。瀏覽器顯示內(nèi)容的最大面積是由顯示器的分辨率決定的。目前顯示器的分辨率大多在1024?×?768px(像素)以上，可設(shè)置版心寬度1000px。在設(shè)計(jì)網(wǎng)站時(shí)應(yīng)盡量適配主流的屏幕分辨率。常見網(wǎng)頁的寬度值為960px、980px、1000px和1200px等。(2)分析頁面中的模塊。在運(yùn)用CSS布局之前，首先要對(duì)頁面有一個(gè)整體的規(guī)劃，用筆畫出頁面的草圖，頁面中包括的模塊及模塊間的關(guān)系。(3)控制網(wǎng)頁的各個(gè)模塊。當(dāng)分析完頁面的布局后，就可以運(yùn)用盒子模型的原理，通過div?+?CSS布局來控制網(wǎng)頁的各個(gè)模塊了。初學(xué)者在制作網(wǎng)頁時(shí)，一定要養(yǎng)成分析頁面布局的習(xí)慣，這樣可以提高網(wǎng)頁制作的效率。任務(wù)5-2布局常用屬性div?+?CSS布局通常有3種方式，分別是靜態(tài)布局、浮動(dòng)布局和定位布局。1.靜態(tài)布局靜態(tài)布局，其特點(diǎn)是將網(wǎng)頁中各種布局標(biāo)簽按照其在HTML代碼中的順序從上而下依次顯示。塊級(jí)元素生成的是一個(gè)矩形框，它按照在文檔中出現(xiàn)的位置正常定位顯示，沒有偏移量。在靜態(tài)布局的網(wǎng)頁中，用戶無須設(shè)置網(wǎng)頁各種布局標(biāo)簽的邊距屬性。例如，一個(gè)典型的HTML文檔，其<body>標(biāo)簽中的內(nèi)容通常由頭部(header)、導(dǎo)航欄(nav)、內(nèi)容(content)和頁尾(footer)4個(gè)部分組成，使用<div>標(biāo)簽建立這4個(gè)部分所在的層，代碼如下：<divclass="header1">網(wǎng)頁的頭部標(biāo)簽，通常包括網(wǎng)頁的Logo、Banner和搜索框等</div><divclass="nav1">網(wǎng)頁的導(dǎo)航條標(biāo)簽，完成站點(diǎn)導(dǎo)航的超鏈接。</div><divclass="content1">網(wǎng)頁的內(nèi)容標(biāo)簽，主要包括網(wǎng)站的各種版塊欄目</div><divclass="footer1">網(wǎng)頁的頁尾標(biāo)簽，主要包含網(wǎng)頁的版權(quán)信息及友好鏈接等內(nèi)容</div>4個(gè)部分及<body>的樣式代碼如下：靜態(tài)布局的顯示效果如圖5-6所示。靜態(tài)布局的優(yōu)點(diǎn)是結(jié)構(gòu)簡單，與各瀏覽器兼容性好，缺點(diǎn)是無法實(shí)現(xiàn)左右分欄的樣式效果。2.浮動(dòng)布局浮動(dòng)布局的作用是，定義網(wǎng)頁布局標(biāo)簽脫離網(wǎng)頁的流動(dòng)布局結(jié)構(gòu)后顯示的方向。在網(wǎng)頁設(shè)計(jì)中，浮動(dòng)布局可應(yīng)用于多個(gè)方面，如實(shí)現(xiàn)文本環(huán)繞圖像或?qū)崿F(xiàn)浮動(dòng)的塊狀標(biāo)簽布局。它是目前最主要的布局方法。為元素設(shè)置浮動(dòng)，可以使頁面元素變得整齊有序。1)認(rèn)識(shí)浮動(dòng)浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。定義浮動(dòng)的基本語法格式如下：選擇器{float:屬性值;}float常用的屬性值有3個(gè)，如表5-2所示。2)清除浮動(dòng)運(yùn)用clear屬性清除浮動(dòng)。其基本語法格式為：選擇器{clear:屬性值;}clear的常用屬性值有3個(gè)，如表5-3所示。運(yùn)用clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響。然而在制作網(wǎng)頁時(shí)，經(jīng)常會(huì)遇到一些特殊的浮動(dòng)影響。3.定位布局在CSS中，使用定位屬性可以實(shí)現(xiàn)網(wǎng)頁中元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。1)定位模式position屬性用于定義元素的定位模式，其基本語法格式如下：選擇器{position:屬性值；