《HTML-CSS-JavaScript網(wǎng)頁制作三合一案例教程》教學(xué)課件-01第一章

主編：徐照興、譚鴻健、鄭寧健HTML+CSS+JavaScript網(wǎng)頁制作

三合一案例教程第一章網(wǎng)站開發(fā)入門HTML+CSS+JavaScript網(wǎng)頁制作三合一案例教程

1

了解網(wǎng)站開發(fā)流程

2

創(chuàng)建Dreamweaver站點(diǎn)

3

制作簡單的HTML+CSS

頁面

目錄頁ContentsPage案例一了解網(wǎng)站開發(fā)流程網(wǎng)站的創(chuàng)立需要經(jīng)歷前期準(zhǔn)備〔需求分析〕、中期制作和后期測試發(fā)布3個(gè)大的階段。前期準(zhǔn)備包括了解網(wǎng)站的業(yè)務(wù)背景、明確網(wǎng)站的設(shè)計(jì)風(fēng)格、確定網(wǎng)站的內(nèi)容等；中期制作主要包括創(chuàng)立站點(diǎn)、制作頁面、制作樣式；后期的測試和發(fā)布工作包括檢查頁面效果是否美觀、鏈接是否完好、是否與瀏覽器兼容，以及如何發(fā)布網(wǎng)站等。在本案例中，我們將以一個(gè)汽車廠商網(wǎng)站MACACO的開發(fā)流程為例，讓讀者能夠從宏觀上掌握一個(gè)網(wǎng)站的制作流程，為后面的學(xué)習(xí)奠定根底。案例說明案例一了解網(wǎng)站開發(fā)流程網(wǎng)站開發(fā)流程從整體上來說可以分成3大局部，分別是網(wǎng)站設(shè)計(jì)、網(wǎng)站制作和后期維護(hù)，如圖1-1所示。在這3局部中，本書著重介紹的是網(wǎng)站制作局部，強(qiáng)調(diào)3個(gè)要點(diǎn)的講解：設(shè)置站點(diǎn)、搭建網(wǎng)頁主體結(jié)構(gòu)層、搭建網(wǎng)頁樣式層。案例步驟一、網(wǎng)頁、網(wǎng)站和主頁簡單來說，網(wǎng)頁就是我們上網(wǎng)時(shí)在瀏覽器中翻開的一個(gè)個(gè)畫面。網(wǎng)頁中可以包含文字、圖像、表格、超鏈接、聲音、影像等，其中文字、圖像、超鏈接是組成網(wǎng)頁最根本的3個(gè)元素。網(wǎng)站就是一組相關(guān)網(wǎng)頁的集合，是通過Internet向全世界發(fā)布信息的載體。主頁就是翻開某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁，又叫首頁。每個(gè)網(wǎng)站都有一個(gè)主頁，通過它可以翻開網(wǎng)站的其他頁面。主頁文件根本名一般為index或default，如、、和等。二、Internet，IP地址和域名Internet的全稱是Internetwork，中文稱為因特網(wǎng)，是集現(xiàn)代計(jì)算機(jī)技術(shù)和通信技術(shù)于一體，基于TCP/IP協(xié)議將全世界不同國家、不同地區(qū)、不同部門和不同類型的計(jì)算機(jī)、國家骨干網(wǎng)、廣域網(wǎng)、局域網(wǎng)通過網(wǎng)絡(luò)互聯(lián)設(shè)備連接而成的、全球最大的開放式計(jì)算機(jī)網(wǎng)絡(luò)。因特網(wǎng)上連接了不計(jì)其數(shù)的效勞器和客戶機(jī)，每一個(gè)主機(jī)在因特網(wǎng)上都有一個(gè)唯一的地址，我們稱這個(gè)地址為IP地址〔InternetProtocolAddress〕。IP地址由4個(gè)小于256的數(shù)字組成，數(shù)字之間用點(diǎn)間隔。例如，“26〞就是一個(gè)IP地址。由于IP地址在使用過程中難于記憶和書寫，人們又開發(fā)了一種與IP地址對應(yīng)的字符來表示地址，這就是域名。每一個(gè)網(wǎng)站都有自己的域名，并且域名是獨(dú)一無二的。例如，我們只需要在瀏覽器地址欄中輸入搜狐網(wǎng)站的域名“sohu〞，然后按【Enter】鍵就可以訪問搜狐網(wǎng)站了。三、WWW，HTTP，URL和瀏覽器URL：統(tǒng)一資源標(biāo)識符，也稱為網(wǎng)址，這是世界通用的負(fù)責(zé)給萬維網(wǎng)上的資源〔如網(wǎng)頁〕定位的系統(tǒng)。一個(gè)完整的URL由通信協(xié)議名稱、域名或IP地址、資源在效勞器中的路徑和文件名4局部組成，如圖1-5所示。WWW是WorldWideWeb的縮寫，中文稱為“萬維網(wǎng)〞，也可簡稱為Web，它是互聯(lián)網(wǎng)上的一個(gè)資料空間，在這個(gè)空間中，任何一個(gè)資源都由“統(tǒng)一資源標(biāo)識符〞〔URL〕標(biāo)識，并利用超文本傳輸協(xié)議〔HypertextTransferProtocol，HTTP〕傳送給使用者。HTTP：超文本傳送協(xié)議，它負(fù)責(zé)規(guī)定瀏覽器和效勞器怎樣互相交流。HTML：超文本標(biāo)記語言，它使用標(biāo)簽來定義網(wǎng)頁結(jié)構(gòu)，我們將在后面具體學(xué)習(xí)。瀏覽器：是WWW效勞的客戶端瀏覽程序。使用它可以向萬維網(wǎng)效勞器發(fā)送各種請求，并對從效勞器發(fā)來的超文本信息進(jìn)行解釋和顯示。案例二創(chuàng)立Dreamweaver站點(diǎn)Dreamweaver是由美國Adobe公司推出的一款專業(yè)的網(wǎng)頁編輯軟件，它集網(wǎng)頁制作和網(wǎng)站管理于一體，并提供網(wǎng)頁的可視化編輯和HTML代碼編輯兩種操作界面，能夠有效地開發(fā)和維護(hù)基于Web標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序，是網(wǎng)頁制作者的首選。本案例通過創(chuàng)立一個(gè)貫穿全書的站點(diǎn)，學(xué)習(xí)Dreamweaver操作界面和站點(diǎn)的創(chuàng)立。養(yǎng)成在制作網(wǎng)頁前先建立站點(diǎn)的好習(xí)慣，可以為以后系統(tǒng)地管理和維護(hù)網(wǎng)站打好根底。案例說明案例二創(chuàng)立Dreamweaver站點(diǎn)站點(diǎn)是一個(gè)網(wǎng)站中所有文件和資源的集合。用戶可以使用Dreamweaver在計(jì)算機(jī)上創(chuàng)立站點(diǎn)和網(wǎng)頁，然后將站點(diǎn)上傳到Web效勞器，還可以隨時(shí)上傳更新的文件來對站點(diǎn)進(jìn)行維護(hù)。使用Dreamweaver創(chuàng)立站點(diǎn)的方法很簡單，下面我們便來學(xué)習(xí)在本機(jī)上創(chuàng)立靜態(tài)站點(diǎn)的方法。案例步驟導(dǎo)出當(dāng)前選定的站點(diǎn)復(fù)制當(dāng)前選定的站點(diǎn)編輯當(dāng)前選定的站點(diǎn)刪除當(dāng)前選定的站點(diǎn)一、DREAMWEAVER工作界面介紹啟動(dòng)Dreamweaver后，默認(rèn)情況下將進(jìn)入其起始頁。在其起始頁中單擊“新建〞列中的任一項(xiàng)，將會(huì)創(chuàng)立一個(gè)相應(yīng)格式的新文檔，并進(jìn)入DreamweaverCS6工作界面。此處我們單擊“HTML〞項(xiàng)，創(chuàng)立一個(gè).html格式的文檔并進(jìn)入DreamweaverCS6工作界面，如圖1-11所示。應(yīng)用程序欄位于工作區(qū)頂部，左側(cè)包括常用功能區(qū)和菜單欄，右側(cè)包括工作區(qū)切換器和程序窗口控制按鈕。

菜單欄幾乎集中了DreamweaverCS6的全部操作命令，利用這些命令可以編輯網(wǎng)頁、管理站點(diǎn)以及設(shè)置操作界面等。要執(zhí)行某項(xiàng)命令，可首先單擊主菜單名翻開其下拉菜單，然后用鼠標(biāo)單擊相應(yīng)菜單項(xiàng)。1．應(yīng)用程序欄文檔標(biāo)簽欄位于應(yīng)用程序欄下方，左側(cè)顯示當(dāng)前翻開的所有網(wǎng)頁文檔的名稱及其關(guān)閉按鈕；右側(cè)顯示當(dāng)前文檔在本地磁盤中的保存路徑以及復(fù)原按鈕；下方顯示當(dāng)前文檔中的包含文檔〔如CSS文檔〕以及鏈接文檔。當(dāng)用戶翻開多個(gè)網(wǎng)頁時(shí)，通過單擊文檔標(biāo)簽可在各網(wǎng)頁之間切換。另外，單擊下方的包含文檔或鏈接文檔，可翻開相應(yīng)文檔，如圖1-12所示。2．文檔標(biāo)簽欄利用文檔工具欄中左側(cè)的按鈕可以在文檔的不同視圖之間快速切換，如圖1-13所示。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔相關(guān)的常用命令和選項(xiàng)。3．文檔工具欄A．顯示“代碼〞視圖B．顯示“代碼〞視圖和“設(shè)計(jì)〞視圖

C．顯示“設(shè)計(jì)〞視圖D．實(shí)時(shí)預(yù)覽視圖E．多屏幕

F．在瀏覽器中預(yù)覽/調(diào)試G．文件管理H．W3C驗(yàn)證

I．檢查瀏覽器兼容性J．可視化助理K．刷新設(shè)計(jì)視圖L．文檔標(biāo)題狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息，如圖1-15所示。4．狀態(tài)欄其中，標(biāo)簽選擇器的作用很大，它顯示了當(dāng)前光標(biāo)所在位置或當(dāng)前選定內(nèi)容的標(biāo)簽層次結(jié)構(gòu)〔HTML網(wǎng)頁文檔就是由一個(gè)個(gè)標(biāo)簽組成的，我們將在后面講解〕，單擊某個(gè)標(biāo)簽可以選中網(wǎng)頁中該標(biāo)簽所代表的內(nèi)容，如單擊<table>標(biāo)簽，可選中網(wǎng)頁中與之對應(yīng)的表格。使用屬性檢查器可以檢查和編輯當(dāng)前選定網(wǎng)頁元素〔如文本和插入的對象〕的最常用屬性。屬性檢查器的內(nèi)容會(huì)根據(jù)選定元素的變化而變化。例如，如果選擇頁面中的圖像，那么屬性檢查器將顯示圖像屬性〔如圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊框等〕，如圖1-16〔a〕所示；如果選擇文本，那么屬性檢查器又會(huì)顯示文本的相關(guān)屬性，如圖1-16〔b〕所示。5．屬性檢查器〔a〕〔b〕“插入〞面板包含用于創(chuàng)立和插入對象〔如表格、圖像和鏈接〕的按鈕，這些按鈕按幾個(gè)類別進(jìn)行組織，默認(rèn)顯示“常用〞類別，如圖1-17〔a〕所示；也可以單擊其右側(cè)的下拉三角按鈕，從彈出的列表中選擇其他類別，如圖1-17〔b〕所示。例如，要在頁面中插入圖像，可先定位插入點(diǎn)，然后單擊“插入〞面板“常用〞類別中的“圖像:圖像〞按鈕。6．“插入〞面板〔a〕〔b〕“文件〞面板用于管理站點(diǎn)中的所有文件和文件夾，包括素材文件和網(wǎng)頁文件，如圖1-18〔a〕所示。

使用“CSS樣式〞面板可以非常方便地新建、刪除、編輯和應(yīng)用樣式，以及附加外部樣式表等，如圖1-18〔b〕所示。7．“文件〞和“CSS樣式〞面板〔a〕〔b〕利用“首選參數(shù)〞對話框可以修改Dreamweaver的系統(tǒng)參數(shù)。選擇菜單欄中的“編輯〞>“首選參數(shù)〞菜單或按快捷鍵【Ctrl+U】可翻開該對話框，如圖1-19所示。8．工作環(huán)境參數(shù)設(shè)置二、新建和保存網(wǎng)頁文檔在DreamweaverCS6中可以創(chuàng)立兩種形式的網(wǎng)頁文檔，一種是直接創(chuàng)立空白網(wǎng)頁文檔，另一種是通過DreamweaverCS6的內(nèi)置模板創(chuàng)立具有一定內(nèi)容和樣式的網(wǎng)頁文檔。三、翻開、預(yù)覽和關(guān)閉網(wǎng)頁文檔假設(shè)要對已有的網(wǎng)頁文檔進(jìn)行編輯，就需要在Dreamweaver中翻開該文檔。另外，在Dreamweaver中對文檔進(jìn)行編輯后，如果想查看它在瀏覽器中的效果，可執(zhí)行預(yù)覽操作。案例三制作簡單的HTML+CSS頁面本案例制作的網(wǎng)頁效果如圖1-25所示。學(xué)習(xí)本案例的主要目的是讓初學(xué)者在開始學(xué)習(xí)網(wǎng)頁制作之前先了解一下網(wǎng)頁的主要構(gòu)成。符合Web標(biāo)準(zhǔn)的網(wǎng)頁一般由3局部組成：結(jié)構(gòu)、表現(xiàn)和行為，其中結(jié)構(gòu)層由HTML代碼構(gòu)成，表現(xiàn)層由CSS層疊樣式表構(gòu)成，行為層由JavaScript腳本語言構(gòu)成。案例說明案例二創(chuàng)立Dreamweaver站點(diǎn)本案例的實(shí)施過程分為“構(gòu)建HTML結(jié)構(gòu)〞和“構(gòu)建CSS樣式〞兩個(gè)局部。案例步驟一、構(gòu)建HTML結(jié)構(gòu)二、構(gòu)建CSS樣式12圖1-29設(shè)置CSS樣式前后的效果圖比照一、HTML與CSS簡介HTML是HyperTextMarkupLanguage〔超文本標(biāo)記語言〕的英文縮寫，是用于設(shè)計(jì)網(wǎng)頁的主要語言。網(wǎng)頁中的文本、圖像、表格、超鏈接等內(nèi)容，都是由HTML中的標(biāo)簽定義和組織的。用HTML編寫的超文本文檔稱為HTML文檔，擴(kuò)展名為“.html〞，也就是網(wǎng)頁。CSS〔CascadingStyleSheets〕中文名為“層疊樣式表〞，用于設(shè)置網(wǎng)頁中各標(biāo)簽的樣式?！皹邮建暿侵妇W(wǎng)頁中文本的大小、顏色以及圖片的邊框、位置等?！皩盈B〞是指當(dāng)在HTML文件中引用多個(gè)樣式文件時(shí)，瀏覽器將依據(jù)層疊順序處理，以防止發(fā)生沖突。在網(wǎng)頁制作中，HTML屬于網(wǎng)頁的結(jié)構(gòu)層局部，用來確定網(wǎng)頁的內(nèi)容和結(jié)構(gòu)；CSS屬于網(wǎng)頁的表現(xiàn)層局部，用于設(shè)置網(wǎng)頁的樣式，主要包括各種標(biāo)簽的外觀、大小和位置等。HTML和CSS既相互獨(dú)立又相互聯(lián)系，熟練掌握它們就能制作出各種精彩的網(wǎng)頁。二、HTML根底語法HTML不是一種編程語言，而是一種標(biāo)記語言，它使用標(biāo)記標(biāo)簽〔簡稱標(biāo)簽〕來描述網(wǎng)頁。也就是說，HTML文檔中實(shí)質(zhì)上只包含HTML標(biāo)簽和純文本〔如在Dreamweaver的代碼視圖中看到的內(nèi)容〕。瀏覽器的一個(gè)作用就是讀取HTML文檔，并解釋其中的一個(gè)個(gè)標(biāo)簽，然后以我們熟悉的“網(wǎng)頁〞形式來顯示。<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>圖1-30簡單標(biāo)簽例如HTML標(biāo)簽是由尖括號括起來的關(guān)鍵詞，絕大多數(shù)HTML標(biāo)簽都是成對出現(xiàn)的，包含標(biāo)記頭<>和標(biāo)記尾</>。標(biāo)記頭是開始標(biāo)簽，標(biāo)記尾是結(jié)束標(biāo)簽，中間是元素內(nèi)容，如段落標(biāo)簽<p></p>。除雙標(biāo)簽外也存在少量的單標(biāo)簽，如換行標(biāo)簽<br/>。

HTML文檔源碼中一行可以寫多個(gè)不同的標(biāo)簽，也可將一對標(biāo)簽寫在不同的行中，但每對標(biāo)簽必須嵌套使用，不能交叉使用。下面的列表中列出了標(biāo)簽的正確用法和錯(cuò)誤用法。1．HTML標(biāo)簽概述格式1：2．HTML標(biāo)簽格式<標(biāo)簽名>標(biāo)簽內(nèi)容〔文本或超文本〕<／標(biāo)簽名>例如，定義一個(gè)標(biāo)題的標(biāo)簽及格式：<h1>這是一號標(biāo)題</h1>格式2：<標(biāo)簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2">標(biāo)簽內(nèi)容〔文本或超文本〕</標(biāo)簽名>格式3：<標(biāo)簽名/>此種標(biāo)簽稱為單標(biāo)簽，比方換行標(biāo)簽<br/>屬性都是可選擇的，如果標(biāo)簽中有屬性，那么標(biāo)簽名和屬性名之間要用空格隔開，各屬性值用英文輸入法下的雙引號括起來。例如，實(shí)現(xiàn)超鏈接的代碼如下所示。<ahref="web/index.html"target="_blank">點(diǎn)擊我吧</a>三、網(wǎng)頁的根本結(jié)構(gòu)HTML文檔默認(rèn)被分為兩局部：文檔頭<head>和文檔體<body>，它們都包含在<html></html>標(biāo)簽對中。1．整個(gè)文檔<html></html>網(wǎng)頁中的所有代碼內(nèi)容都包含在<html></html>標(biāo)簽對中。起始標(biāo)簽<html>用于HTML文檔的最前邊，用來標(biāo)識HTML文檔的開始；而結(jié)束標(biāo)簽</html>恰恰相反，它放在HTML文檔的最后面，用來標(biāo)識HTML文檔的結(jié)束，兩個(gè)標(biāo)簽必須成對使用。<head>標(biāo)簽是HTML文檔所有頭部元素的容器，它里面的元素用來描述HTML文檔的相關(guān)信息，如指定網(wǎng)頁標(biāo)題、指示瀏覽器在何處找到CSS樣式表等，不會(huì)在瀏覽器中顯示。下面講解在<head>標(biāo)簽中常用的標(biāo)簽元素，這些標(biāo)簽只能放在<head></head>標(biāo)簽對中。2．文檔頭<head></head>1〕<title></title>2〕<meta/>3〕<style></style>4〕<link></link>5〕<script></script><body>標(biāo)簽是HTML文檔的主體局部，在此標(biāo)簽對之間可包含<p></p>、<h1></h1>、<div></div>、<a/>和<br/>等眾多標(biāo)簽，它們定義的文本和圖像等都會(huì)在瀏覽器中顯示出來。3．文檔體<body></body>DOCTYPE是英文“documenttype〔文檔類型〕〞的簡寫，是HTML與XHTML中的文檔聲明，簡稱為DTD聲明，其作用是告知瀏覽器當(dāng)前文檔所使用的是哪種HTML或XHTML標(biāo)準(zhǔn)。DOCTYPE聲明位于文檔最前端，標(biāo)簽為<!DOCTYPE>，它不屬于文檔的結(jié)構(gòu)局部。

只有確定了一個(gè)正確的DOCTYPE，HTML或XHTML中的標(biāo)簽和CSS才能生效，它甚至對網(wǎng)頁中的JavaScript腳本都會(huì)有所影響。該標(biāo)簽可聲明3種DTD類型，分別表示嚴(yán)格版〔Strict〕、過渡版〔Transitional〕和基于框架〔Frameset〕的HTML文檔。4．文檔類型<!DOCTYPE>四、靜態(tài)頁面與動(dòng)態(tài)頁面從大的方面來講，網(wǎng)頁可分為靜態(tài)網(wǎng)頁〔HTML〕和動(dòng)態(tài)網(wǎng)頁〔DHTML〕。靜態(tài)網(wǎng)頁完全采用HTML語言編寫，后綴名一般為.htm、.html、.shtml和.xml等。動(dòng)態(tài)網(wǎng)頁使用的語言一般為HTML＋ASP、HTML＋PHP或HTML＋JS