《CSS DIV網(wǎng)頁(yè)樣式與布局案例教程》課件 項(xiàng)目一 網(wǎng)站制作入門

項(xiàng)目一

網(wǎng)站制作入門任務(wù)一

了解網(wǎng)站開(kāi)發(fā)流程任務(wù)二

創(chuàng)建Dreamweaver站點(diǎn)任務(wù)三

制作簡(jiǎn)單的HTML+CSS頁(yè)面任務(wù)一

了解網(wǎng)站開(kāi)發(fā)流程網(wǎng)站開(kāi)發(fā)流程從整體上來(lái)說(shuō)可以分成3大部分，分別是網(wǎng)站設(shè)計(jì)、網(wǎng)站制作和后期維護(hù)。在這3部分中，本書(shū)著重介紹的是網(wǎng)站制作部分，強(qiáng)調(diào)3個(gè)要點(diǎn)的講解：設(shè)置站點(diǎn)、搭建網(wǎng)頁(yè)主體結(jié)構(gòu)層、搭建網(wǎng)頁(yè)樣式層。支撐知識(shí)點(diǎn)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)簡(jiǎn)單來(lái)說(shuō)，網(wǎng)頁(yè)就是我們上網(wǎng)時(shí)在瀏覽器中打開(kāi)的一個(gè)個(gè)畫(huà)面。網(wǎng)頁(yè)中可以包含文字、圖像、表格、超鏈接、聲音、影像等，其中文字、圖像、超鏈接是組成網(wǎng)頁(yè)最基本的3個(gè)元素。網(wǎng)站就是一組相關(guān)網(wǎng)頁(yè)的集合，是通過(guò)Internet向全世界發(fā)布信息的載體。主頁(yè)就是打開(kāi)某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁(yè)，又叫首頁(yè)。主頁(yè)文件基本名為index或default，如index.html、default.html、index.asp和index.aspx等。二、Internet、IP地址和域名Internet的全稱是Internetwork，中文稱為因特網(wǎng)，是集現(xiàn)代計(jì)算機(jī)技術(shù)和通信技術(shù)于一體，基于TCP/IP協(xié)議將全世界不同國(guó)家、不同地區(qū)、不同部門和不同類型的計(jì)算機(jī)、國(guó)家骨干網(wǎng)、廣域網(wǎng)、局域網(wǎng)通過(guò)網(wǎng)絡(luò)互連設(shè)備連接而成的、全球最大的開(kāi)放式計(jì)算機(jī)網(wǎng)絡(luò)。因特網(wǎng)上連接了不計(jì)其數(shù)的服務(wù)器和客戶機(jī)，每一個(gè)主機(jī)在因特網(wǎng)上都有一個(gè)唯一的地址，我們稱這個(gè)地址為

IP地址（InternetProtocol

Address）。由于IP地址在使用過(guò)程中難于記憶和書(shū)寫，人們又開(kāi)發(fā)

了一種與IP地址對(duì)應(yīng)的字符用以表示地址，這就是域名。三、WWW、HTTP、URL和瀏覽器WWW是World

Wide

Web的縮寫，中文稱為“萬(wàn)維網(wǎng)”，也可簡(jiǎn)稱為Web，它是互聯(lián)網(wǎng)上的一個(gè)資料空間，在這個(gè)空間中，任何一個(gè)資源都由“統(tǒng)一資源標(biāo)識(shí)符”（URL）標(biāo)識(shí)，并利用超文本傳輸協(xié)議（HypertextTransfer

Protocol，HTTP）傳送給使用者。任務(wù)二

創(chuàng)建Dreamweaver站點(diǎn)站點(diǎn)是一個(gè)網(wǎng)站中所有文件和資源的集合。用戶可以使用Dreamweaver在計(jì)算機(jī)上創(chuàng)建站點(diǎn)和網(wǎng)頁(yè)，并將站點(diǎn)上傳到Web服務(wù)器，還可以在保存文件后隨時(shí)上傳更新的文件來(lái)對(duì)站點(diǎn)進(jìn)行維護(hù)。使用Dreamweaver搭建站點(diǎn)的方法很簡(jiǎn)單，下面我們便來(lái)學(xué)習(xí)在本機(jī)上創(chuàng)建靜態(tài)站點(diǎn)的方法。支撐知識(shí)點(diǎn)一、啟動(dòng)和退出Dreamweaver1．啟動(dòng)Dreamweaver安裝好Dreamweaver后，就可以使用該軟件了。啟動(dòng)該軟件的方法主要有以下2種。方法一：通過(guò)雙擊操作系統(tǒng)桌面上的Dreamweaver快捷圖標(biāo)啟動(dòng)。方法二：選擇“開(kāi)始”>“所有程序”>“AdobeDesign

Premium

CS5”>Adobe

Dreamweaver

CS5”菜單啟動(dòng)。2．退出Dreamweaver退出Dreamweaver的方法主要有以下3種。方法一：在Dreamweaver的菜單欄中選擇“文件>“退出”菜單。方法二：按【Ctrl+Q】組合鍵退出。方法三：?jiǎn)螕鬌reamweaver操作界面右上角的“關(guān)閉”按鈕退出。二、Dreamweaver工作界面介紹啟動(dòng)Dreamweaver后，在其起始頁(yè)中單擊“新建”列中的任一項(xiàng)，將會(huì)創(chuàng)建一個(gè)相應(yīng)格式的新文檔，并進(jìn)入

Dreamweaver

CS5工作界面。此處我們單擊“HTML”項(xiàng)，創(chuàng)建一個(gè).html格式的文檔并進(jìn)入DreamweaverCS5工作界面。1．應(yīng)用程序欄應(yīng)用程序欄位于工作區(qū)頂部，左側(cè)顯示菜單欄，右側(cè)包

含工作區(qū)切換器、“CS

Live”按鈕和程序窗口控制按鈕。菜單欄幾乎集中了Dreamweaver

CS5的全部操作命令，利用這些命令可以編輯網(wǎng)頁(yè)、管理站點(diǎn)以及設(shè)置操作界面等。要執(zhí)行某項(xiàng)命令，可首先單擊主菜單名打開(kāi)其下拉菜單，然后用鼠標(biāo)單擊相應(yīng)的菜單項(xiàng)。程序窗口控制按鈕包括“最小化窗口”按鈕、“最大化窗口”按鈕和“關(guān)閉窗口”按鈕。2．文檔標(biāo)簽欄文檔標(biāo)簽欄位于應(yīng)用程序欄下方，左側(cè)顯示當(dāng)前打開(kāi)的所有網(wǎng)頁(yè)文檔的名稱及其關(guān)閉按鈕；右側(cè)顯示當(dāng)前文檔在本地磁盤中的保存路徑以及還原按鈕

；下方顯示當(dāng)前文檔中的包含文檔（如CSS文檔）以及鏈接文檔。當(dāng)用戶打開(kāi)多個(gè)網(wǎng)頁(yè)時(shí)，通過(guò)單擊文檔標(biāo)簽可在各網(wǎng)頁(yè)之間切換。另外，單擊下方的包含文檔或鏈接文檔，可打開(kāi)相應(yīng)文檔。3．文檔工具欄利用文檔工具欄中包含的按鈕可以在文檔的不同視圖之間快速切換。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。4．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。其中，標(biāo)簽選擇器的作用很大，它顯示了當(dāng)前光標(biāo)所在位置或當(dāng)前選定內(nèi)容的標(biāo)簽層次結(jié)構(gòu)（HTML網(wǎng)頁(yè)文檔

就是由一個(gè)個(gè)標(biāo)簽組成的，我們將在后面講解），單擊某個(gè)標(biāo)簽可以選中網(wǎng)頁(yè)中該標(biāo)簽所代表的內(nèi)容，如單擊<table>標(biāo)簽，可選中網(wǎng)頁(yè)中與之對(duì)應(yīng)的表格。5．屬性檢查器使用屬性檢查器可以檢查和編輯當(dāng)前選定網(wǎng)頁(yè)元素（如文本和插入的對(duì)象）的最常用屬性。屬性檢查器的內(nèi)容會(huì)根據(jù)選定元素的變化而變化。例如，如果選擇頁(yè)面中的圖像，則屬性檢查器將顯示圖像屬性（如圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊框等）；如果選擇文本，則屬性檢查器又會(huì)顯示文本的相關(guān)屬性。6．“插入”面板“插入”面板包含用于創(chuàng)建和插入對(duì)象（例如表格、圖

像和鏈接）的按鈕，這些按鈕按幾個(gè)類別進(jìn)行組織，默

認(rèn)顯示“常用”類別，您可以單擊其右側(cè)的下三角按鈕，從彈出的列表中選擇其他類別。7．“文件”和“CSS樣式”面板“文件”面板用于管理站點(diǎn)中的所有文件和文件夾，包括素材文件和網(wǎng)頁(yè)文件。使用“CSS樣式”面板可以非常方便地新建、刪除、編輯和應(yīng)用樣式，以及附加外部樣式表等。8．工作環(huán)境參數(shù)設(shè)置利用“首選參數(shù)”對(duì)話框可以修改Dreamweaver的系統(tǒng)參數(shù)。選擇菜單欄中的“編輯”>“首選參數(shù)”菜單或按快捷鍵【Ctrl+U】可打開(kāi)該對(duì)話框。三、新建和保存網(wǎng)頁(yè)文檔在Dreamweaver

CS5中可以創(chuàng)建兩種形式的網(wǎng)頁(yè)文檔，一種是直接創(chuàng)建空白網(wǎng)頁(yè)文檔，另一種是通過(guò)

Dreamweaver

CS5內(nèi)置模板創(chuàng)建具有一定內(nèi)容和樣式

的網(wǎng)頁(yè)文檔。四、打開(kāi)、預(yù)覽和關(guān)閉網(wǎng)頁(yè)文檔若要對(duì)已有的網(wǎng)頁(yè)文檔進(jìn)行編輯，就需要在

Dreamweaver中打開(kāi)該文檔。另外，在Dreamweaver中打開(kāi)文檔并執(zhí)行相應(yīng)操作后，如果想查看它在瀏覽器中的效果，可執(zhí)行預(yù)覽操作。任務(wù)三制作簡(jiǎn)單的HTML+CSS頁(yè)面學(xué)習(xí)本任務(wù)的主要目的，是讓初學(xué)者在開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)制作之前先了解一下網(wǎng)頁(yè)的主要構(gòu)成。符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)一般由3部分組成：結(jié)構(gòu)、表現(xiàn)和行為（行為層不在該書(shū)的講授范圍），其中結(jié)構(gòu)層由HTML代碼構(gòu)成，表現(xiàn)層由CSS層疊樣式表構(gòu)成，行為層由Javascript腳本語(yǔ)言構(gòu)成。支撐知識(shí)點(diǎn)一、HTML與CSS簡(jiǎn)介HTML是HyperText

Markup

Language（超文本標(biāo)記語(yǔ)言）的英文縮寫，是用于設(shè)計(jì)網(wǎng)頁(yè)的主要語(yǔ)言。CSS（CascadingStyleSheets）中文名為“層疊樣式表”用于設(shè)置網(wǎng)頁(yè)中各標(biāo)簽的樣式。二、HTML基礎(chǔ)語(yǔ)法HTML不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言，它使用標(biāo)記標(biāo)簽（簡(jiǎn)稱標(biāo)簽）來(lái)描述網(wǎng)頁(yè)。也就是說(shuō)，HTML文檔中實(shí)質(zhì)上只包含HTML標(biāo)簽和純文本（如我們?cè)?/p>

Dreamweaver的代碼視圖中看到的內(nèi)容）。瀏覽器的一個(gè)作用就是讀取HTML文檔，并解釋其中的一個(gè)個(gè)標(biāo)簽，然后以我們熟悉的“網(wǎng)頁(yè)”形式來(lái)顯示。1．HTML標(biāo)簽概述HTML標(biāo)簽是由尖括號(hào)括起來(lái)的關(guān)鍵詞，絕大多數(shù)

HTML標(biāo)簽都是成對(duì)出現(xiàn)的，包含標(biāo)記頭<>和標(biāo)記尾</>。標(biāo)記頭是開(kāi)始標(biāo)簽，標(biāo)記尾是結(jié)束標(biāo)簽，中間是元素內(nèi)容，如段落標(biāo)簽<p></p>；但也存在少量的單標(biāo)簽，如換行標(biāo)簽<br/>。HTML文檔源碼中一行可以寫多個(gè)不同的標(biāo)簽，也可將

一對(duì)標(biāo)簽寫在不同的行中，但每對(duì)標(biāo)簽必須嵌套使用，不能交叉使用。2．HTML標(biāo)簽格式在HTML中，每個(gè)標(biāo)簽都有名稱、可選擇的屬性及標(biāo)簽

內(nèi)容，標(biāo)簽的屬性都在起始標(biāo)簽內(nèi)標(biāo)明。下面列出了雙標(biāo)簽和單標(biāo)簽的書(shū)寫格式。格式1：<標(biāo)簽名>標(biāo)簽內(nèi)容（文本或超文本）<／標(biāo)簽名>例如，定義一個(gè)標(biāo)題的標(biāo)簽及格式：<h1>這是一號(hào)標(biāo)題</h1>格式2：<標(biāo)簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2">標(biāo)簽內(nèi)容（文本或超文本）</標(biāo)簽名>三、網(wǎng)頁(yè)的基本結(jié)構(gòu)HTML文檔默認(rèn)被分成兩部分：文檔頭<head>和文檔體<body>，它們都包含在<html></html>標(biāo)簽對(duì)中。1．整個(gè)文檔<html></html>網(wǎng)頁(yè)中的所有代碼內(nèi)容都包含在<html></html>標(biāo)簽對(duì)中。起始標(biāo)簽<html>用于HTML文檔的最前邊，用來(lái)標(biāo)識(shí)HTML文檔的開(kāi)始；而結(jié)束標(biāo)簽</html>恰恰相反，

它放在HTML文檔的最后面，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)簽必須成對(duì)使用。2．文檔頭<head></head><head>標(biāo)簽是HTML文檔所有頭部元素的容器，它里面的元素用來(lái)描述HTML文檔的相關(guān)信息，如指定網(wǎng)頁(yè)標(biāo)題、指示瀏覽器在何處找到CSS樣式表等，不會(huì)在瀏覽器中顯示。<title></title><meta/><style></style><link>

</link><script></script>3．文檔體<body></body><body>標(biāo)簽是HTML文檔的主體部分，在此標(biāo)簽對(duì)之間可包含<p></p>、<h1></h1>、<div></div>、<a/>和<br/>等眾多標(biāo)簽，它們定義的文本、圖像等都會(huì)在瀏覽器中顯示出來(lái)。4．文檔類型<!DOCTYPE>DOCTYPE是英文“document

type（文檔類型）”的簡(jiǎn)寫，是HTML與XHTML中的文檔聲明，簡(jiǎn)稱為DTD聲明，其作用是告知瀏覽器當(dāng)前文檔所使用的是哪種HTML或XHTML規(guī)范。DOCTYPE聲明位于文檔最前端，標(biāo)簽為<!DOCTYPE>，它不屬于文檔的結(jié)構(gòu)部分。四、靜態(tài)頁(yè)面與動(dòng)態(tài)頁(yè)面從大的方面來(lái)講，網(wǎng)頁(yè)可分為動(dòng)態(tài)網(wǎng)頁(yè)（DHTML）和靜態(tài)網(wǎng)頁(yè)（HTML）。那么動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)有什么區(qū)別，它們各自又具有什么樣的特征呢？靜態(tài)網(wǎng)頁(yè)完全采用HTML語(yǔ)言編寫，后綴名一般為.

htm、.html、.shtml和.xml等。動(dòng)態(tài)網(wǎng)頁(yè)使用的語(yǔ)言為HTML＋ASP、HTML＋PHP或HTML＋JSP等，后綴名一般為.asp、.php、.jsp等。無(wú)論是動(dòng)態(tài)網(wǎng)頁(yè)還是靜態(tài)網(wǎng)頁(yè)，都可以顯示文字、圖

片和動(dòng)畫(huà)等信息，但動(dòng)態(tài)網(wǎng)頁(yè)可以實(shí)現(xiàn)與服務(wù)器的交互，如各種論壇、留言板和聊天室等都屬于動(dòng)態(tài)網(wǎng)頁(yè)。五、網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)1．認(rèn)識(shí)Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior），對(duì)應(yīng)的標(biāo)準(zhǔn)也分3方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括HTML和XHTML。表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS。行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C

DOM）、ECMAscript等。2．Div+CSS布局優(yōu)勢(shì)Web標(biāo)準(zhǔn)化設(shè)計(jì)是指采用Div（這是HTML中的一個(gè)標(biāo)簽）+CSS布局網(wǎng)頁(yè)，放棄原來(lái)的table（表格）布局。該方式的優(yōu)勢(shì)有如下幾個(gè)方面。完美地實(shí)現(xiàn)結(jié)構(gòu)層同表現(xiàn)層分離。頁(yè)面下載速度快。頁(yè)面修改更簡(jiǎn)單方便。

搜索引擎搜索更加優(yōu)化。3．HTML與XHTML的區(qū)別HTML與XHTML可以被認(rèn)為是一種語(yǔ)言的兩種不同版本，

HTML經(jīng)歷不斷改進(jìn)后得到了XHTML，可以將XHT