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

項目一

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

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

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

制作簡單的HTML+CSS頁面任務(wù)一

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

IP地址（InternetProtocol

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

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

Wide

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

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

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

Premium

CS5”>Adobe

Dreamweaver

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

Dreamweaver

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

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

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

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

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

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

像和鏈接）的按鈕，這些按鈕按幾個類別進行組織，默

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

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

Dreamweaver

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

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

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

Markup

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

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

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

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

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

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

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

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

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

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

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

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

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