《網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程》全套教學(xué)課件

第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程全套可編輯PPT課件目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.1.1

網(wǎng)頁與網(wǎng)站網(wǎng)頁與網(wǎng)站都是互聯(lián)網(wǎng)詞匯。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，承載著各種網(wǎng)站應(yīng)用；網(wǎng)站是指根據(jù)一定的規(guī)則制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。1.網(wǎng)頁網(wǎng)頁是一個(gè)包含HTML標(biāo)簽的純文本文件，可以存放在世界某個(gè)角落的某一部計(jì)算機(jī)中，這部計(jì)算機(jī)必須與互聯(lián)網(wǎng)相連。2.網(wǎng)站網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件。1.1.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁的區(qū)別在于網(wǎng)頁是否會(huì)根據(jù)數(shù)據(jù)操作的結(jié)果而發(fā)生變化。與靜態(tài)網(wǎng)頁相比，動(dòng)態(tài)網(wǎng)頁的交互性更強(qiáng)，用戶可以主動(dòng)參與到頁面中，如登錄、注冊(cè)網(wǎng)頁等。1.靜態(tài)網(wǎng)頁在網(wǎng)站設(shè)計(jì)中純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁制作的。2.動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁是與靜態(tài)網(wǎng)頁相對(duì)的一種網(wǎng)頁編程技術(shù)。1.1.3網(wǎng)頁標(biāo)準(zhǔn)化技術(shù)網(wǎng)頁主要由結(jié)構(gòu)、表現(xiàn)和行為三部分構(gòu)成，對(duì)應(yīng)的技術(shù)標(biāo)準(zhǔn)為HTML、CSS樣式和腳本語言。1.HTML（超文本標(biāo)記語言）2.CSS樣式（層疊樣式表）3.腳本語言目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.2網(wǎng)站制作流程網(wǎng)站制作一般包括規(guī)劃與需求分析、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、測(cè)試、部署與上線、維護(hù)與更新等步驟。遵循流程進(jìn)行操作，可以使網(wǎng)站制作更加輕松合理，減少差錯(cuò)率。1．規(guī)劃與需求分析2．網(wǎng)站設(shè)計(jì)3．網(wǎng)站開發(fā)4．網(wǎng)站測(cè)試5．網(wǎng)站發(fā)布6．維護(hù)與更新目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.3.1網(wǎng)頁的布局類型骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型10種類型是網(wǎng)頁主要的布局類型。1.骨骼型2.滿版型3.分割型4.中軸型5.曲線型6.傾斜型7.對(duì)稱型8.焦點(diǎn)型9.三角型10.自由型1.3.2網(wǎng)頁色彩基礎(chǔ)色彩是最具表現(xiàn)力的視覺元素之一，具有信息傳達(dá)、情感傳遞、增強(qiáng)視覺表現(xiàn)力等作用。1.色彩三要素色彩分為無彩色系和有彩色系兩大類，其中黑、白、灰屬于無彩色系，其他色彩屬于有彩色系。2.Web安全色Web安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中具有一致顯示效果的顏色，共包括216種。1.3.3網(wǎng)頁配色技巧網(wǎng)頁配色在網(wǎng)站頁面效果中占據(jù)重要地位，優(yōu)秀的網(wǎng)頁配色可以提高網(wǎng)站的頁面效果，增加頁面瀏覽量。1.網(wǎng)頁配色要點(diǎn)2.網(wǎng)頁設(shè)計(jì)色彩搭配原則3.網(wǎng)頁色彩搭配方式目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.4網(wǎng)頁設(shè)計(jì)常用工具根據(jù)各網(wǎng)頁制作工具功能側(cè)重點(diǎn)的不同，在制作網(wǎng)頁時(shí)往往需要綜合利用多種網(wǎng)頁制作工具，以節(jié)省工作時(shí)間，提高工作效率。1.Photoshop2.Illustrator3.Flash4.Dreamweaver目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.5AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用AIGC（ArtificialIntelligenceGeneratedContent）中文名稱人工智能生成內(nèi)容，其核心在于使用機(jī)器學(xué)習(xí)、深度學(xué)習(xí)等算法對(duì)大量數(shù)據(jù)進(jìn)行學(xué)習(xí)和模式識(shí)別，然后根據(jù)用戶的需求或輸入條件，生成與之相關(guān)的內(nèi)容。在網(wǎng)頁設(shè)計(jì)領(lǐng)域，AIGC可以起到內(nèi)容生成與優(yōu)化、交互原型設(shè)計(jì)等作用。1.自動(dòng)內(nèi)容生成2.交互式元素和動(dòng)畫3.快速原型與概念生成4.設(shè)計(jì)反饋與迭代目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計(jì)常用工具1.5

AIGC在網(wǎng)頁設(shè)計(jì)中的應(yīng)用1.6

課后練習(xí)1.6課后練習(xí)1.收集不同汽車網(wǎng)頁并分析其特點(diǎn)。2.收集不同手機(jī)網(wǎng)頁并分析其特點(diǎn)。3.利用人工智能工具了解更多網(wǎng)頁設(shè)計(jì)的知識(shí)。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第2章Dreamweaver入門操作網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents2.1

Dreamweaver的工作界面2.2

站點(diǎn)的創(chuàng)建與管理2.3

文檔的基礎(chǔ)操作2.4

課堂實(shí)戰(zhàn)利農(nóng)農(nóng)機(jī)2.5

課后練習(xí)2.1.1

啟動(dòng)Dreamweaver安裝完成Dreamweaver后，雙擊桌面上的快捷按鈕或是通過“開始”菜單選擇所有程序中的AdobeDreamweaver選項(xiàng)，即可啟動(dòng)Dreamweaver應(yīng)用程序。2.1.2自定義軟件界面用戶可以通過自定義軟件界面使界面更符合個(gè)人需求，從而自在從容地應(yīng)用軟件。1．設(shè)置首選項(xiàng)2．工作區(qū)的調(diào)整3．顯示/隱藏面板和工具欄4．自定義收藏夾2.1.3

四種視圖模式Dreamweaver軟件中的視圖包括代碼視圖、拆分視圖、實(shí)時(shí)視圖和設(shè)計(jì)視圖4種模式。選擇不同的視圖模式，Dreamweaver軟件文檔窗口中顯示的內(nèi)容也將有所不同。2.1.4實(shí)操案例：自定義首選項(xiàng)本案例將以自定義根首選項(xiàng)為例，自定義軟件。目錄Contents2.1

Dreamweaver的工作界面2.2

站點(diǎn)的創(chuàng)建與管理2.3

文檔的基礎(chǔ)操作2.4

課堂實(shí)戰(zhàn)利農(nóng)農(nóng)機(jī)2.5

課后練習(xí)2.2.1創(chuàng)建站點(diǎn)Dreamweaver軟件中包括本地站點(diǎn)和遠(yuǎn)程站點(diǎn)2種站點(diǎn)，其作用是存儲(chǔ)網(wǎng)站中使用的文件和資源。1．創(chuàng)建本地站點(diǎn)本地站點(diǎn)主要用于存儲(chǔ)和處理本地文件。2．創(chuàng)建遠(yuǎn)程站點(diǎn)遠(yuǎn)程站點(diǎn)和本地站點(diǎn)的創(chuàng)建方法類似，只是多了設(shè)置遠(yuǎn)程文件夾的步驟。2.2.2編輯站點(diǎn)創(chuàng)建完成的站點(diǎn)，還可以通過“管理站點(diǎn)”對(duì)話框進(jìn)行復(fù)制、修改、刪除等操作。1．管理站點(diǎn)通過“管理站點(diǎn)”對(duì)話框可以修改編輯站點(diǎn)的屬性。2．復(fù)制站點(diǎn)利用站點(diǎn)的可復(fù)制性，可以創(chuàng)建多個(gè)結(jié)構(gòu)相同或類似的站點(diǎn)，再對(duì)復(fù)制的站點(diǎn)進(jìn)行編輯調(diào)整，以達(dá)到需要的效果。3．刪除站點(diǎn)針對(duì)一些不需要的站點(diǎn)，可以將其從站點(diǎn)列表中刪除。2.2.3導(dǎo)入和導(dǎo)出站點(diǎn)在“管理站點(diǎn)”對(duì)話框中，可以通過“導(dǎo)入站點(diǎn)”按鈕和“導(dǎo)出當(dāng)前選定的站點(diǎn)”按鈕，實(shí)現(xiàn)Internet網(wǎng)絡(luò)中各計(jì)算機(jī)之間站點(diǎn)的移動(dòng)，或者與其他用戶共享站點(diǎn)的設(shè)置。2.2.4新建文件或文件夾若要在站點(diǎn)中創(chuàng)建文件夾，執(zhí)行“窗口>文件”命令，打開“文件”面板，選中站點(diǎn)，在“文件”面板中右擊鼠標(biāo)，在彈出的快捷菜單中選擇“新建文件夾”命令，即可創(chuàng)建一個(gè)新文件夾。選中文件夾，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“新建文件”選項(xiàng)命令，即可新建文件。2.2.5編輯文件或文件夾在“文件”面板中，可以利用剪切、復(fù)制、粘貼等功能來編輯文件或文件夾。目錄Contents2.1

Dreamweaver的工作界面2.2

站點(diǎn)的創(chuàng)建與管理2.3

文檔的基礎(chǔ)操作2.4

課堂實(shí)戰(zhàn)利農(nóng)農(nóng)機(jī)2.5

課后練習(xí)2.3.1新建文檔Dreamweaver支持創(chuàng)建HTML文檔、CSS文檔等多種類型的文檔。2.3.2打開文檔在實(shí)際應(yīng)用過程中，除了新建文檔外，用戶還可以使用Dreamweaver打開HTML、ASP、DWT、CSS等多種格式的文檔。2.3.3插入文檔制作網(wǎng)頁文檔時(shí)，為了節(jié)省時(shí)間可以將編輯好的文檔直接插入到網(wǎng)頁中。2.3.4保存文檔在制作網(wǎng)頁的過程中，可以及時(shí)保存文檔，以避免誤操作關(guān)閉文檔或其他情況。2.3.5關(guān)閉文檔完成網(wǎng)頁的制作與保持后，即可關(guān)閉網(wǎng)頁文檔。執(zhí)行“文件>關(guān)閉”命令，或單擊文檔名稱后的“關(guān)閉”按鈕即可關(guān)閉當(dāng)前文檔。執(zhí)行“文件>全部關(guān)閉”命令，將關(guān)閉軟件中所有打開的文檔。目錄Contents2.1

Dreamweaver的工作界面2.2

站點(diǎn)的創(chuàng)建與管理2.3

文檔的基礎(chǔ)操作2.4

課堂實(shí)戰(zhàn)利農(nóng)農(nóng)機(jī)2.5

課后練習(xí)2.4課堂實(shí)戰(zhàn)本案例將以利農(nóng)農(nóng)機(jī)站點(diǎn)的制作為例，對(duì)站點(diǎn)的創(chuàng)建與應(yīng)用進(jìn)行介紹。目錄Contents2.1

Dreamweaver的工作界面2.2

站點(diǎn)的創(chuàng)建與管理2.3

文檔的基礎(chǔ)操作2.4

課堂實(shí)戰(zhàn)利農(nóng)農(nóng)機(jī)2.5

課后練習(xí)2.5課后練習(xí)1.酷樂冰屋根據(jù)所學(xué)內(nèi)容制作酷樂冰屋網(wǎng)頁。2.哎呀寵物根據(jù)所學(xué)內(nèi)容制作哎呀寵物網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第3章HTML知識(shí)準(zhǔn)備網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.1.1HTML語言基礎(chǔ)HTML（HyperTextMarkupLanguage）并不是程序設(shè)計(jì)語言，而是一種排版網(wǎng)頁中資料顯示位置的標(biāo)記結(jié)構(gòu)語言。HTML文件是一種可以用任何文本編輯器創(chuàng)建的ASCII碼文檔。常見的文本編輯器包括記事本、寫字板等，這些文本編輯器都可以編寫HTML文件，在保存時(shí)以.htm或.html作為文件擴(kuò)展名保存即可。當(dāng)使用瀏覽器打開這些文件時(shí)，瀏覽器將對(duì)其進(jìn)行解釋，瀏覽者就可以從瀏覽器窗口中看到頁面內(nèi)容。3.1.2文件開始標(biāo)簽<html><html>與</html>標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。語法描述如下：<html>…</html>3.1.3文件頭部標(biāo)簽<head><head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head>中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在Web中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。語法描述如下：<head>…</head>3.1.4標(biāo)題標(biāo)簽<titie><title標(biāo)簽可定義文檔的標(biāo)題，是head部分中唯一必需的元素。瀏覽器會(huì)以特殊的方式來使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。語法描述如下：<title>…</title>3.1.5標(biāo)題標(biāo)簽<titie><title標(biāo)簽可定義文檔的標(biāo)題，是head部分中唯一必需的元素。瀏覽器會(huì)以特殊的方式來使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。語法描述如下：<title>…</title>3.1.6主體標(biāo)簽<body><body>標(biāo)簽定義文檔的主體，包含文檔的所有內(nèi)容，比如文本、超鏈接、圖像、表格和列表等。語法描述如下：<body>…</body>3.1.7

UI設(shè)計(jì)常用軟件<meta>標(biāo)簽可提供有關(guān)頁面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。<meta>標(biāo)簽永遠(yuǎn)位于head元素內(nèi)部。name屬性提供了名稱/值對(duì)中的名稱。語法說明如下：<metaname="description/keywords"content="頁面的說明或關(guān)鍵字"/>目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.2.1標(biāo)題文字HTML中設(shè)置文章標(biāo)題的標(biāo)簽為<h></h>。語法描述如下：<h1>…</h1>標(biāo)題標(biāo)簽<h1>-<h6>標(biāo)簽可定義標(biāo)題，<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。3.2.2文字字體Face屬性可以設(shè)置HTML語言中文字的不同字體效果。若瀏覽器中沒有安裝相應(yīng)字體，設(shè)置的效果將會(huì)被瀏覽器中的通用字體替代。語法描述如下：<fontface="字體">文本內(nèi)容</font>3.2.3段落換行換行標(biāo)簽<br>可以設(shè)置一段很長(zhǎng)的文字換行，以便于瀏覽和閱讀。語法描述如下：<br>3.2.4不換行標(biāo)簽<nobr>標(biāo)簽可以幫助用戶解決瀏覽器的限制，避免自動(dòng)換行。語法描述如下：<nobr>不需換行文字</nobr>3.2.5圖像標(biāo)簽制作網(wǎng)頁時(shí)，插入圖片可以更好的美化網(wǎng)頁，吸引用戶瀏覽。在HTML語言中，插入圖片的標(biāo)簽為<img>。語法描述如下：<imgsrc="圖片文件地址">3.2.6超鏈接標(biāo)簽超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系。通過超鏈接可以連接各個(gè)網(wǎng)頁，使其構(gòu)成真正的網(wǎng)站。下面將針對(duì)HTML語言中的超鏈接標(biāo)簽進(jìn)行介紹。1.頁面鏈接在HTML中創(chuàng)建超鏈接需要使用<a>標(biāo)記，具體格式是：<ahref="URL"target="_blank">鏈接</a>2.錨記鏈接建立錨記鏈接，可以對(duì)同一網(wǎng)頁的不同部分進(jìn)行鏈接。3.電子郵件鏈接若將href屬性的取值指定為“mailto:電子郵件地址”，則可以獲得指向電子郵件的超鏈接。3.2.7列表標(biāo)簽在HTML中的列表分為有序列表和無序列表2種。有序列表是指帶有序號(hào)標(biāo)志（如數(shù)字）的列表；無序列表是指沒有序號(hào)標(biāo)志的列表。1.有序列表有序列表的標(biāo)簽是<ol>,其列表項(xiàng)標(biāo)簽是<li>。2.無序列表無序列表的標(biāo)簽是<ul>，其列表項(xiàng)標(biāo)簽是<li>。3.2.8表格標(biāo)簽使用表格可以有效的管理網(wǎng)頁信息，使頁面布局整齊美觀。表格一般由行、列、單元格三個(gè)部分組成。在網(wǎng)頁中使用表格會(huì)用到3個(gè)標(biāo)簽，即<table>、<tr>、<td>。<table>標(biāo)簽表示表格對(duì)象，<tr>標(biāo)簽表示表格中的行，<td>標(biāo)簽表示單元格，<td>標(biāo)簽必須包含在<tr>標(biāo)簽內(nèi)。語法描述如下：<table><tr><td>表項(xiàng)目1</td>……<td>表項(xiàng)目n</td></tr>……<tr><td>表項(xiàng)目1</td>……<td>表項(xiàng)目n</td></tr></table>3.2.9表單標(biāo)簽使用表單可以增加網(wǎng)站與用戶之間的互動(dòng)，實(shí)現(xiàn)更多的功能，如網(wǎng)站登錄、賬戶注冊(cè)等等。表單是由<form>標(biāo)簽定義的。常用的表單元素有下面6種：文本框復(fù)選框單選按鈕提交按鈕多行文本框下拉菜單3.2.10實(shí)操案例：絲竹詩文本案例將以絲竹詩文網(wǎng)頁的制作為例，對(duì)<img>、<br>等標(biāo)簽的應(yīng)用進(jìn)行介紹。目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.3.1HTML5的語法變化HTML語法是在SGML（StandardGeneralizedMarkupLanguage，標(biāo)準(zhǔn)通用標(biāo)記語言）語言的基礎(chǔ)上建立的，但是由于SGML的語法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開發(fā)也不太容易，多數(shù)Web瀏覽器不作為SGML解析器運(yùn)行。HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語法”，但實(shí)際情況卻是，對(duì)于HTML的執(zhí)行在各瀏覽器之間并沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，因此也就有了HTML5。在HTML5中，提高Web瀏覽器間的兼容性是HTML5要實(shí)現(xiàn)的重大的目標(biāo)。要確保兼容性，必須消除規(guī)范與實(shí)現(xiàn)的背離。HTML5分析了各個(gè)瀏覽器之間的特點(diǎn)和功能，在此基礎(chǔ)上要求這些瀏覽器所有內(nèi)部功能符合一個(gè)通用標(biāo)準(zhǔn)，從而大大提高了各瀏覽器正常運(yùn)行的可能性。3.3.2

HTML5中的標(biāo)記方法HTML5的標(biāo)記方法主要有以下3種：1.內(nèi)容類型(ContentType)HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變。2.DOCTYPE聲明DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。3.字符編碼的設(shè)置字符編碼的設(shè)置方法也有些新的變化。3.3.3HTML5中新增元素在HTML5中，新增了以下元素：1.section元素2.article元素3.aside元素4.header元素5.fhgroup元素6.footer元素7.nav元素8.figure元素9.video元素10.audio元素11.embed元素12.mark元素13.progress元素14.meter元素15.time元素16.wbr元素17.canvas元素18.command元素19.details元素20.datalist元素

3.3.4HTML5中新增屬性元素在HTML5中，還新增加了很多的屬性，下面簡(jiǎn)單介紹一些新增的屬性。1.表單相關(guān)的屬性2.與鏈接相關(guān)的屬性3.其它屬性目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.4課堂實(shí)戰(zhàn)綜合本章所學(xué)制作恬逸沙發(fā)網(wǎng)頁。目錄Contents3.1

認(rèn)識(shí)HTML3.2

HTML的基本標(biāo)簽3.3

HTML5的應(yīng)用3.4

課堂實(shí)戰(zhàn)3.5

課后練習(xí)3.5課后練習(xí)1.微著齒輪根據(jù)所學(xué)內(nèi)容制作微著齒輪網(wǎng)頁。2.閃電速運(yùn)根據(jù)所學(xué)內(nèi)容制作閃電速運(yùn)網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第4章頁面與文本網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.1.1

設(shè)置外觀“頁面屬性”對(duì)話框中包括“外觀（CSS）”和“外觀（HTML）”2個(gè)選項(xiàng)卡，用戶可以在“外觀（CSS）”選項(xiàng)卡中設(shè)置網(wǎng)頁的基本頁面布局選項(xiàng)，包括字體、背景顏色、背景圖像等。1.設(shè)置頁面文字屬性2.設(shè)置背景屬性3.設(shè)置頁邊距4.1.2設(shè)置標(biāo)題網(wǎng)頁標(biāo)題是訪問網(wǎng)頁時(shí)瀏覽器標(biāo)題欄中顯示的信息，可以幫助用戶快速了解網(wǎng)頁內(nèi)容。設(shè)置網(wǎng)頁標(biāo)題有以下3種方式：1.新建文檔時(shí)設(shè)置2.使用“頁面屬性”對(duì)話框3.“代碼”視圖設(shè)置4.1.3實(shí)操案例：青木桌椅本案例將以青木桌椅網(wǎng)頁制作為例，對(duì)網(wǎng)頁標(biāo)題及背景的添加進(jìn)行介紹。目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.2.1輸入文本Dreamweaver支持用戶直接在文檔中輸入文本，移動(dòng)鼠標(biāo)至需要輸入文本的地方輸入文字即可。4.2.2導(dǎo)入文本除了直接輸入文本外，用戶還可以導(dǎo)入外部的文檔添加文本信息。打開需要導(dǎo)入文本的網(wǎng)頁文件，從“文件”面板中選擇Word文檔，拖拽至文檔窗口中，在彈出的“插入文檔”對(duì)話框中設(shè)置參數(shù)。完成后單擊“確定”按鈕，即可插入文檔。目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.3.1“屬性”面板“屬性”面板包括HTML屬性檢查器和CSS屬性檢查器兩部分內(nèi)容，其中在HTML屬性檢查器中可以設(shè)置文本的字體、大小、顏色、邊距等；在CSS屬性檢查器中可以通過層疊樣式表(CSS)設(shè)置文本格式。4.3.2設(shè)置文本格式“屬性”面板可以設(shè)置文本的字體、字號(hào)、顏色等參數(shù)，下面將對(duì)此進(jìn)行介紹。1．設(shè)置字體在制作網(wǎng)頁時(shí)，一般使用宋體或黑體這兩種字體。2．設(shè)置字體顏色為文本設(shè)置顏色，可以突出文本信息，增強(qiáng)網(wǎng)頁的表現(xiàn)力。3．設(shè)置字號(hào)字號(hào)是指字體的大小，用戶可以在“屬性”面板中設(shè)置文字字號(hào)。4.3.3設(shè)置段落格式段落格式的設(shè)置可以使頁面中的文本更具條理性。1．設(shè)置段落格式選中文本段落，在HTML屬性檢查器中單擊“格式”右側(cè)的下拉按鈕，在彈出的列表中選擇格式即可設(shè)置段落格式。2．設(shè)置段落對(duì)齊方式段落對(duì)齊方式是指段落相對(duì)于文件窗口（或?yàn)g覽器窗口）在水平位置的對(duì)齊方式，包括“左對(duì)齊”、“居中對(duì)齊”、“右對(duì)齊”和“兩端對(duì)齊”4種。3．設(shè)置段落縮進(jìn)縮進(jìn)是指文檔內(nèi)容相對(duì)于文檔窗口（或?yàn)g覽器窗口）左端產(chǎn)生的間距。4.3.4設(shè)置文本樣式文本樣式是指文本的外觀顯示樣式，包括文本的粗體、斜體、下劃線和刪除線等。4.3.5使用列表在文檔中使用列表可以使文本結(jié)構(gòu)更加清晰。用戶可以用現(xiàn)有文本或新文本床架編號(hào)列表、項(xiàng)目列表和定義列表。1.無序列表無序列表常應(yīng)用于列舉類型的文本中。2.有序列表有序列表常應(yīng)用于條款類型的文本中。3.定義列表定義列表不使用項(xiàng)目符號(hào)或數(shù)字等的前綴符，通常用于詞匯表或說明中。4.3.6實(shí)操案例：緣心志愿以緣心志愿網(wǎng)頁的制作為例，介紹文本的添加與設(shè)置。目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.4.1插入特殊符號(hào)除了常規(guī)的字母、字符、數(shù)字外，在網(wǎng)頁中還可以插入特殊的符號(hào)，如商標(biāo)符、版權(quán)符等。4.4.2插入水平線水平線可以幫助瀏覽者區(qū)分文章標(biāo)題和正文，是網(wǎng)頁中常用到的元素。在網(wǎng)頁中插入水平線的方式非常簡(jiǎn)單。執(zhí)行“插入>HTML>水平線”命令，即可在網(wǎng)頁中插入水平線。4.4.3插入日期日期是許多網(wǎng)頁中常見的內(nèi)容，用戶可以通過“插入”命令插入可更新的日期文字。4.4.4實(shí)操案例：綠其茶業(yè)本案例將以綠其茶業(yè)網(wǎng)頁中特殊元素的添加為例，對(duì)網(wǎng)頁特殊元素的應(yīng)用進(jìn)行介紹。目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.5課堂實(shí)戰(zhàn)每日讀書本案例將以每日讀書網(wǎng)站首頁的制作為例，對(duì)網(wǎng)頁頁面的設(shè)計(jì)及文本的添加等進(jìn)行介紹。目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設(shè)置網(wǎng)頁中的文本屬性4.4

在網(wǎng)頁中插入特殊元素4.5

課堂實(shí)戰(zhàn)4.6

課后練習(xí)4.6課后練習(xí)1.福睿斯蔬果根據(jù)所學(xué)內(nèi)容制作福睿斯蔬果網(wǎng)頁。2.艾森散文根據(jù)所學(xué)內(nèi)容制作艾森散文網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第5章圖像與多媒體元素網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents5.1

在網(wǎng)頁中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.1.1

常用圖像格式GIF、JPEG、PNG等格式是網(wǎng)頁中常用的圖像格式。1.GIF格式GIF是英文單詞GraphicsInterchangeFormat的縮寫，即圖像交換格式。2.JPEG格式JPEG即JointPhotographicExpertsGroup的縮寫，是用于連續(xù)色調(diào)靜態(tài)圖像壓縮的一種標(biāo)準(zhǔn)，是最常用的圖像文件格式。3.PNG格式PNG是PortableNetworkGraphic的縮寫，即便攜式網(wǎng)絡(luò)圖形。5.1.2插入圖像通過“插入”命令可以在網(wǎng)頁文檔中添加圖像，美化網(wǎng)頁頁面。5.1.3圖像的屬性設(shè)置執(zhí)行“窗口>屬性”命令或按Ctrl+F3組合鍵打開“屬性”面板，選中要設(shè)置的圖像，在“屬性”面板中可查看設(shè)置其參數(shù)。1.寬和高2.圖像源文件3.鏈接4.地圖名稱和熱點(diǎn)工具5.目標(biāo)6.編輯5.1.4圖像的對(duì)齊方式通過設(shè)置插入圖像的對(duì)齊方式，可以使頁面整齊且具有條理。用戶可以設(shè)置圖像與同一行中的文本、圖像、插件或其他元素對(duì)齊，也可以設(shè)置圖像的水平對(duì)齊方式。5.1.5替換文本“屬性”面板中的“替換”選項(xiàng)可以指定在只顯示文本的瀏覽器或已設(shè)置為手動(dòng)下載圖像的瀏覽器中代替圖像顯示的替代文本。如果用戶的瀏覽器不能正常顯示圖像時(shí)，替換文字代替圖像給用戶以提示。對(duì)于使用語音合成器（用于只顯示文本的瀏覽器）的有視覺障礙的用戶，將大聲讀出該文本。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過圖像時(shí)也會(huì)顯示該文本。5.1.6鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像可以制作在瀏覽器中查看并使用鼠標(biāo)經(jīng)過時(shí)發(fā)生變化的圖像。創(chuàng)建鼠標(biāo)經(jīng)過圖像必須有原始圖像和鼠標(biāo)經(jīng)過圖像兩個(gè)圖像。5.1.7實(shí)操案例：米格餐具本案例將以米格餐具網(wǎng)頁制作為例，對(duì)圖像的添加與應(yīng)用進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.2.1插入HTML5Video元素在HTML5網(wǎng)頁中可以通過插入HTML5Video元素的方式插入視頻。HTML5Video元素支持Ogg、MPEG4和WebM3種視頻格式。5.2.2插入HTML5Audio元素HTML5網(wǎng)頁中可以通過插入Audio元素的方式插入音頻，Audio元素能夠播放聲音文件或者音頻流，支持OggVorbis、MP3和WAV3種音頻格式。5.2.3實(shí)操案例：青鳥視頻本案例將以青鳥視頻網(wǎng)頁中視頻元素的添加為例進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.3課堂實(shí)戰(zhàn)本案例將以曲樂影音網(wǎng)站首頁的制作為例，對(duì)網(wǎng)頁中圖像及多媒體元素的添加進(jìn)行介紹。目錄Contents5.1

在網(wǎng)頁中插入圖像5.2

插入多媒體元素5.3

課堂實(shí)戰(zhàn)5.4

課后練習(xí)5.5課后練習(xí)1.美相圖片根據(jù)所學(xué)內(nèi)容制作美相圖片網(wǎng)頁。2.賽克音樂根據(jù)所學(xué)內(nèi)容制作賽克音樂網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第6章超鏈接的應(yīng)用網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.1.1

相對(duì)路徑相對(duì)路徑無需給出目標(biāo)端點(diǎn)完整的URL地址，只要給出相對(duì)于源端點(diǎn)的位置即可。一般可以將其分為文檔相對(duì)路徑和站點(diǎn)根目錄相對(duì)路徑2種類型。1.文檔相對(duì)路徑文檔相對(duì)路徑對(duì)于有大多數(shù)站點(diǎn)的本地鏈接來說是最合適的路徑。2.站點(diǎn)根目錄站點(diǎn)根目錄相對(duì)路徑指從站點(diǎn)的根文件夾到文檔的路徑。6.1.2絕對(duì)路徑絕對(duì)路徑是指包括服務(wù)器規(guī)范在內(nèi)的完全路徑，通常使用http://來表示。與相對(duì)路徑相比，采用絕對(duì)路徑的優(yōu)點(diǎn)在于它同鏈接的源端點(diǎn)無關(guān)。只要網(wǎng)站的地址不變，無論文檔在站點(diǎn)中如何移動(dòng)，都可以正常實(shí)現(xiàn)跳轉(zhuǎn)。采用絕對(duì)路徑的缺點(diǎn)在于這種方式的鏈接不利于測(cè)試。如果在站點(diǎn)中使用絕對(duì)地址，要想測(cè)試鏈接是否有效，必須在Internet服務(wù)器端對(duì)鏈接進(jìn)行測(cè)試。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.2.1自動(dòng)更新鏈接當(dāng)本地站點(diǎn)中的文檔發(fā)生移動(dòng)或重命名后，Dreamweaver可更新來自和指向該文檔的鏈接，直到將本地文件放在遠(yuǎn)程服務(wù)器上或?qū)⑵浯婊剡h(yuǎn)程服務(wù)器后才更改遠(yuǎn)程文件夾中的文件。6.2.2檢查站點(diǎn)中的鏈接錯(cuò)誤發(fā)布網(wǎng)頁前需要對(duì)網(wǎng)站中的超鏈接進(jìn)行測(cè)試，為了節(jié)省檢查時(shí)間，Dreamweaver中的“鏈接檢查器”面板就提供了對(duì)整個(gè)站點(diǎn)的鏈接進(jìn)行快速檢查的功能。通過這一功能，可以找出斷掉的鏈接、錯(cuò)誤的代碼和未使用的孤立文件等，以便進(jìn)行糾正和處理。6.2.3修復(fù)鏈接修復(fù)鏈接是指重新設(shè)置檢查出的斷掉鏈接，一般通過以下2種方式實(shí)現(xiàn)：雙擊“鏈接檢查器”面板右側(cè)列表中斷掉鏈接的“文件”中的文件名，Dreamweaver會(huì)在“代碼”視圖和“設(shè)計(jì)”視圖中定位鏈接出錯(cuò)的位置，同時(shí)“屬性”面板也會(huì)指示出鏈接便于用戶修改；在“鏈接檢查器”面板“斷掉的鏈接”列表中單擊直接修改鏈接路徑，或單擊“瀏覽文件”按鈕重新定位鏈接文件。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.3.1文本鏈接Dreamweaver中一般通過以下3種方法創(chuàng)建文本鏈接：1.直接輸入鏈接路徑2.“瀏覽文件”按鈕3.“指向文件”按鈕6.3.2下載鏈接用戶可以單擊下載鏈接實(shí)現(xiàn)文件下載，其創(chuàng)建步驟與文本鏈接一致，區(qū)別只在于下載鏈接鏈接的文件不是網(wǎng)頁文件，而是.exe、.doc、.rar等類型的其他文件。選中要添加下載文件鏈接的對(duì)象，在“屬性”面板“鏈接”下拉文本框中設(shè)置鏈接的文件即可。設(shè)置完成后按F12鍵預(yù)覽，單擊該鏈接對(duì)象將下載鏈接的文件。6.3.3電子郵件鏈接電子郵件鏈接是指用戶點(diǎn)擊時(shí)直接打開電子郵件，并以設(shè)置好的郵箱地址作為收信人的鏈接。一般電子郵件鏈接有以下3種創(chuàng)建方法：1.使用“插入”命令2.使用“屬性”面板3.使用代碼6.3.4空鏈接空鏈接是指沒有指定具體鏈接目標(biāo)的鏈接。選中要?jiǎng)?chuàng)建鏈接的對(duì)象，在“屬性”面板“鏈接”文本框中輸入“#”即可。6.3.5實(shí)操案例：景瀾酒店本案例將以景瀾酒店網(wǎng)頁制作為例，介紹超鏈接的應(yīng)用。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.4.1圖像鏈接選中要建立鏈接的圖像，單擊“屬性”面板“鏈接”文本框右側(cè)的“瀏覽文件”按鈕，打開“查找文件”對(duì)話框進(jìn)行設(shè)置即可。用戶也可以直接在“代碼”視圖中輸入相應(yīng)的代碼設(shè)置圖像鏈接：<body><ahref="#"><imgsrc="02.jpg"width="1280"height="853"alt=""/></a></body>6.4.2圖像熱點(diǎn)鏈接圖像熱點(diǎn)鏈接可以在一個(gè)圖像中創(chuàng)建多個(gè)熱點(diǎn)鏈接，當(dāng)用戶單擊某個(gè)熱點(diǎn)時(shí)，將打開對(duì)應(yīng)的鏈接內(nèi)容。圖像熱點(diǎn)是一個(gè)非常實(shí)用的功能。圖像映射是將整張圖片作為鏈接的載體，將圖片的整個(gè)部分或某一部分設(shè)置為鏈接。熱點(diǎn)鏈接的原理就是利用HTML語言在圖片上定義一定形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域被稱之為熱點(diǎn)或熱區(qū)。常用的熱點(diǎn)工具包括以下3種：矩形熱點(diǎn)工具圓形熱點(diǎn)工具多邊形熱點(diǎn)工具6.4.3實(shí)操案例：微光攝像本案例將以微光攝像網(wǎng)頁鏈接的制作為例，介紹圖像鏈接的應(yīng)用。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.5錨點(diǎn)鏈接錨點(diǎn)鏈接是指目標(biāo)端點(diǎn)位于網(wǎng)頁中某個(gè)指定位置的超鏈接。在創(chuàng)建錨點(diǎn)鏈接時(shí)首先需要?jiǎng)?chuàng)建鏈接的目標(biāo)端點(diǎn)并為其命名，然后再創(chuàng)建到該錨點(diǎn)的鏈接。在“文檔”窗口中選中要作為錨點(diǎn)的項(xiàng)目，在“屬性”面板中為其設(shè)置唯一的ID。在“設(shè)計(jì)”視圖中，選中要從其創(chuàng)建鏈接的文本或圖像，在“屬性”面板的“鏈接”文本框中輸入數(shù)字符號(hào)(#)和錨點(diǎn)ID即可。用戶也可以選擇要從其創(chuàng)建鏈接的文本或圖像，按住“屬性”面板的“鏈接”文本框右側(cè)的“指向文件”按鈕拖拽至要鏈接到的錨點(diǎn)上。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.6課堂實(shí)戰(zhàn)本案例將以美家裝飾網(wǎng)頁的制作為例，介紹網(wǎng)頁超鏈接的應(yīng)用。目錄Contents6.1

超鏈接概念6.2

管理網(wǎng)頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點(diǎn)鏈接6.6

課堂實(shí)戰(zhàn)6.7

課后練習(xí)6.7課后練習(xí)1.長(zhǎng)風(fēng)文學(xué)根據(jù)所學(xué)內(nèi)容為長(zhǎng)風(fēng)文學(xué)網(wǎng)頁添加鏈接。2.可麗甜點(diǎn)根據(jù)所學(xué)內(nèi)容為可麗甜點(diǎn)網(wǎng)頁添加鏈接。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第7章使用表格布局網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.1.1

表格的組成表格由行、列和單元格組成。在一個(gè)表格中，橫向的稱為行，縱向的稱為列；行與列交叉的部分叫做單元格；單元格中的內(nèi)容和單元格邊框之間的距離叫做邊距；單元格和單元格之間的距離叫做間距；整個(gè)表格的邊緣叫做邊框。7.1.2插入表格在網(wǎng)頁文檔中將鼠標(biāo)移動(dòng)至要插入表格的位置，執(zhí)行“插入丨Table”命令，或按Ctrl+Alt+T組合鍵打開“Table”對(duì)話框。在該對(duì)話框中設(shè)置參數(shù)后，單擊“確定”按鈕即可根據(jù)設(shè)置插入表格。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.2.1設(shè)置表格屬性選中整個(gè)表格后可以在“屬性”面板中設(shè)置表格屬性參數(shù)，如圖為選中表格的“屬性”面板。7.2.2設(shè)置單元格屬性選中表格中的某一單元格，在“屬性”面板中顆設(shè)置該單元格的屬性。7.2.3鼠標(biāo)經(jīng)過顏色onMouseOut、onMouseOver屬性可以創(chuàng)建鼠標(biāo)經(jīng)過時(shí)單元格顏色改變的效果。7.2.4表格的屬性代碼通過在“代碼”視圖中添加width、border等屬性代碼，同樣可以設(shè)置表格參數(shù)。1.width屬性用于指定表格或某一個(gè)表格單元格的寬度，單位可以是像素或百分比。

2.height屬性用于指定表格或某一個(gè)表格單元格的高度，單位可以是像素或百分比。3.border屬性用于設(shè)置表格的邊框及邊框的粗細(xì)。值為0時(shí)不顯示邊框；值為1或以上時(shí)顯示邊框，值越大，邊框越粗。4.Bordercolor用于指定表格或某一個(gè)表格單元格邊框的顏色。7.2.4表格的屬性代碼5.bordercolorlight屬性用于指定表格亮邊邊框的顏色。6.bordercolordark屬性用于指定表格暗邊邊框的顏色。7.bgcolor屬性用于指定表格或某一個(gè)表格單元格的背景顏色。8.background屬性用于指定表格或某一個(gè)表格單元格的背景圖像。9.cellspacing屬性用于指定單元格間距，即單元格和單元格之間的距離。7.2.4表格的屬性代碼10.cellpadding屬性用于指定單元格邊距（或填充），即單元格邊框和單元格中內(nèi)容之間的距離。11.align屬性用于指定表格或某一表格單元格中內(nèi)容的垂直水平對(duì)齊方式。屬性值有l(wèi)eft（左對(duì)齊）、center（居中對(duì)齊）和right（右對(duì)齊）。12.valign屬性用于指定單元格中內(nèi)容的垂直對(duì)齊方式。屬性值有top（頂端對(duì)齊）、middle（居中對(duì)齊）、bottom（底部對(duì)齊）和baseline（基線對(duì)齊）。7.2.5實(shí)操案例：陶瓷展覽館以陶瓷展覽館網(wǎng)頁制作為例，對(duì)表格的添加與設(shè)置進(jìn)行介紹。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.3.1選擇整個(gè)表格選中表格后才可以對(duì)其進(jìn)行編輯，常用地選擇整個(gè)表格的方式有以下4種：插入表格，單擊表格上下邊框即可選擇整個(gè)表格。在“代碼”視圖或“拆分”視圖下，選中表格代碼，即<table>和</table>標(biāo)簽之間所有部分，即可選中表格。單擊某個(gè)單元格，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“表格>選擇表格”命令即可選中表格。單擊某個(gè)單元格，執(zhí)行“編輯>表格>選擇表格”命令即可選中表格。7.3.2選擇單個(gè)單元格選中表格中的單元格時(shí)，該單元格四周將出現(xiàn)深色實(shí)線邊框，如圖7-19所示。用戶可以通過以下2種方式選擇單個(gè)單元格：按住鼠標(biāo)左鍵不放，從單元格的左上角拖至右下角，即可選擇該單元格。按住Ctrl鍵，單擊單元格即可選中該單元格。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.4.1拷貝和粘貼表格制、粘貼單個(gè)單元格或多個(gè)單元格可以節(jié)省表格制作的時(shí)間，提高效率，在復(fù)制時(shí)用戶可以選擇保留單元格的格式設(shè)置。若要粘貼多個(gè)表格單元格，剪貼板的內(nèi)容必須和表格的結(jié)構(gòu)或表格中將粘貼這些單元格的部分兼容。7.4.2增減表格的行和列打開網(wǎng)頁文檔，單擊某個(gè)單元格，執(zhí)行“編輯>表格>插入行”命令或按Ctrl+M組合鍵，即可在插入點(diǎn)上方插入1行表格。7.4.3刪除表格和清除表格內(nèi)容刪除表格會(huì)一同刪除表格中的內(nèi)容，而清除表格內(nèi)容只會(huì)清除表格中的內(nèi)容而不影響表格。下面將對(duì)此進(jìn)行介紹。1.刪除表格選中整個(gè)表格按Delete鍵即可刪除表格及表格內(nèi)的內(nèi)容。若只是想刪除某行或某列單元格，可以選中整行或整列后按Delete鍵刪除。2.清除表格內(nèi)容當(dāng)單個(gè)單元格或多個(gè)單元格不能構(gòu)成整行或整列時(shí)，只能清除單元格中的內(nèi)容而不刪除表格。用戶可以選擇要清除的單元格后按Delete鍵刪除其中的內(nèi)容。7.4.4合并或拆分單元格合并或拆分單元格可以豐富表格效果，使其呈現(xiàn)出不規(guī)則的質(zhì)感。1.合并單元格選中網(wǎng)頁文檔中表格中連續(xù)的單元格，執(zhí)行“編輯>表格>合并單元格”命令，即可合并單元格。2.拆分單元格選中表格中要拆分的單元格，執(zhí)行“編輯>表格>拆分單元格”命令，打開“拆分單元格”對(duì)話框。7.4.5實(shí)操案例：爾肆手表以爾肆手表網(wǎng)頁制作為例，對(duì)表格的設(shè)置與編輯進(jìn)行介紹。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.5課堂實(shí)戰(zhàn)春林建筑本案例將以春林建筑網(wǎng)頁制作為例，對(duì)表格的應(yīng)用與編輯進(jìn)行介紹。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.6課后練習(xí)1.倏爾鮮花根據(jù)所學(xué)內(nèi)容制作倏爾鮮花網(wǎng)頁。2.卓越辦公根據(jù)所學(xué)內(nèi)容制作卓越辦公登錄頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第8章CSS網(wǎng)頁美化技術(shù)網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.1.1CSS的特點(diǎn)CSS是描述網(wǎng)頁元素格式的一組規(guī)則，一般具有以下5個(gè)特點(diǎn)：樣式定義豐富：CSS可以設(shè)置豐富的文檔樣式外觀。便于使用和修改：使用CSS時(shí)，可以完成修改一個(gè)小的樣式從而更新所有與其相關(guān)的頁面元素的操作，簡(jiǎn)化操作步驟，使CSS樣式的修改與使用更為便捷。重復(fù)使用：在Dreamweaver軟件中，可以創(chuàng)建單獨(dú)的CSS文件，在多個(gè)頁面中進(jìn)行使用，從而制作頁面風(fēng)格統(tǒng)一的網(wǎng)頁。層疊：通過CSS，可以對(duì)一個(gè)元素多次設(shè)置樣式，后面定義的樣式將重寫前面的樣式設(shè)置，在瀏覽器中可以看到最后設(shè)置的樣式效果。精簡(jiǎn)HTML代碼：通過使用CSS，可以將樣式聲明單獨(dú)放到CSS樣式表中，減少文件大小，減少加載頁面和下載的時(shí)間。8.1.2

CSS的定義CSS格式設(shè)置規(guī)則由選擇器和聲明兩部分組成，選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語，聲明大多數(shù)情況下為包含多個(gè)聲明的代碼塊，用于定義樣式屬性。聲明又包括屬性和值兩部分。1.CSS語法CSS基本語法如下：選擇器{屬性名:屬性值;}即selector{properties:value;}2.選擇器CSS中的選擇器分為標(biāo)簽選擇器、類選擇器、ID選擇器、偽類選擇器等，不同選擇器的作用也有所不同。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.2.1CSS設(shè)計(jì)器“CSS設(shè)計(jì)器”面板中可以創(chuàng)建CSS樣式及選擇器等內(nèi)容，執(zhí)行“窗口>CSS設(shè)計(jì)器”命令，打開“CSS設(shè)計(jì)器”面板。8.2.2創(chuàng)建CSS樣式通過“CSS設(shè)計(jì)器”面板可以創(chuàng)建內(nèi)部或外部CSS樣式。1.創(chuàng)建新的CSS文件“創(chuàng)建新的CSS文件”選項(xiàng)可以創(chuàng)建新CSS文件并將其附加到文檔。2.附加現(xiàn)有的CSS文件用戶還可以為不同的網(wǎng)頁的HTML元素附加相同外部樣式，節(jié)省操作時(shí)間。3.在頁面中定義“在頁面中定義”命令可以將CSS文件定義在當(dāng)前文檔中。8.2.3CSS屬性CSS屬性可以調(diào)整網(wǎng)頁元素的格式和外觀，是CSS樣式的重要組成部分。在Dreamweaver軟件中，用戶可以選中選擇器后在“屬性”選項(xiàng)組設(shè)置CSS屬性。該選項(xiàng)組中包括布局、文本、邊框和背景4個(gè)屬性列表。8.2.4實(shí)操案例：?jiǎn)愤\(yùn)動(dòng)本案例將以啟樂運(yùn)動(dòng)網(wǎng)頁的制作為例，對(duì)CSS的樣式的創(chuàng)建及應(yīng)用進(jìn)行介紹。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.3.1類型在“CSS設(shè)計(jì)器”面板中選中選擇器中的CSS規(guī)則，在“屬性”面板中設(shè)置“目標(biāo)規(guī)則”為選中對(duì)象，單擊“編輯規(guī)則”按鈕，即可打開“CSS規(guī)則定義”對(duì)話框。8.3.2背景“背景”選項(xiàng)卡中選項(xiàng)的功能主要是在網(wǎng)頁元素后面添加固定的背景顏色或圖像。8.3.3區(qū)塊“區(qū)塊”選項(xiàng)卡中選項(xiàng)功能主要是定義樣式的間距和對(duì)齊設(shè)置。8.3.4方框網(wǎng)頁中的所有元素包括文本、圖像等都被看作為包含在方框內(nèi)。8.3.5邊框“邊框”選項(xiàng)卡中的選項(xiàng)可用來設(shè)置網(wǎng)頁元素的邊框外觀。8.3.6列表“列表”選項(xiàng)卡中包括List-style-type、List-style-type、List-style-position等選項(xiàng)。8.3.7定位“定位”選項(xiàng)卡中的選項(xiàng)包括Position、Visibility、placement、clip等。8.3.8擴(kuò)展“擴(kuò)展”選項(xiàng)卡中的選項(xiàng)包括break-before、break-after、Cursor、Filter。8.3.9過渡使用“過渡”選項(xiàng)卡中的選項(xiàng)可將平滑屬性變化更改應(yīng)用于基于CSS的頁面元素，以響應(yīng)觸發(fā)器事件，如懸停、單擊和聚焦。8.3.10實(shí)操案例：微景綠植本案例將以微景綠植網(wǎng)頁樣式的設(shè)置為例，對(duì)“CSS規(guī)則定義”對(duì)話框的應(yīng)用進(jìn)行介紹。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.4課堂實(shí)戰(zhàn)躍野自行車本案例將以躍野自行車網(wǎng)頁的制作為例，介紹CSS樣式的應(yīng)用。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.5課后練習(xí)1.瑞成文具根據(jù)所學(xué)內(nèi)容美化瑞成文具網(wǎng)頁，前后對(duì)比效果。2.玩偶之家根據(jù)所學(xué)內(nèi)容美化玩偶之家網(wǎng)頁，前后對(duì)比效果。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第9章Div+CSS網(wǎng)頁布局技術(shù)網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.1.1

什么是Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)即網(wǎng)頁標(biāo)準(zhǔn)，是指有關(guān)于全球資訊網(wǎng)各個(gè)方面的定義和說明的正式標(biāo)準(zhǔn)以及技術(shù)規(guī)范。網(wǎng)頁主要由結(jié)構(gòu)、表現(xiàn)和行為三部分組成，對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：1.結(jié)構(gòu)結(jié)構(gòu)用于對(duì)網(wǎng)頁中用到的信息進(jìn)行分類與整理。結(jié)構(gòu)標(biāo)準(zhǔn)語言主要包括XHTML和XML。2.表現(xiàn)表現(xiàn)用于對(duì)信息進(jìn)行版式、顏色和大小等形式進(jìn)行控制。表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS。3.行為行為是指文檔內(nèi)部的模型定義及交互行為的編寫，用于編寫交互式的文檔。行為標(biāo)準(zhǔn)主要包括DOM和ECMAScript。9.1.2

Div概述Div全稱為DIVision，即劃分，用于在頁面中定義一個(gè)區(qū)域，使用CSS樣式控制Div元素的表現(xiàn)效果。Div可以將復(fù)雜的網(wǎng)頁內(nèi)容分割成獨(dú)立的區(qū)塊，一個(gè)Div可以放置一個(gè)圖片，也可以顯示一行文本。簡(jiǎn)單來講，Div就是容器，可以存放任何網(wǎng)頁顯示元素。Div具有以下3個(gè)優(yōu)點(diǎn)：(1)節(jié)省頁面代碼(2)加快網(wǎng)頁瀏覽速度(3)便于網(wǎng)站推廣9.1.3創(chuàng)建Div在使用Div布局網(wǎng)頁前需要現(xiàn)在網(wǎng)頁中創(chuàng)建Div區(qū)塊，在Dreamweaver中，用戶可以在“代碼”視圖中添加<div></div>標(biāo)簽創(chuàng)建Div，也可以通過執(zhí)行“插入”命令或通過“插入”面板插入Div。9.1.4實(shí)操案例：琳瑯首飾本案例將以琳瑯首飾網(wǎng)頁的制作為例，介紹Div和CSS的應(yīng)用。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.2.1盒子模型盒子模型時(shí)CSS樣式布局的重要概念，掌握盒子模型及其使用方法，才可以真正地控制頁面中的各種元素。盒子模型是指將頁面中的各個(gè)元素及其周圍的空間看成一個(gè)盒子，該盒子占據(jù)著一定的頁面空間。用戶可以通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置。一個(gè)盒子模型由內(nèi)容（content）、邊框（border）、填充（padding）和空白邊（margin）這4個(gè)部分組成。9.2.2外邊距設(shè)置margin屬性可以設(shè)置外邊距，margin邊界環(huán)繞在該元素的content區(qū)域四周。若margin的值為0，則margin邊界與border邊界重合。margin屬性接受任何長(zhǎng)度單位，可以使用像素、毫米、厘米和em等，也可以設(shè)置為auto（自動(dòng)）。常見做法是為外邊距設(shè)置長(zhǎng)度值，允許使用負(fù)值。9.2.3外邊距合并外邊距合并是指當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。在實(shí)踐中對(duì)網(wǎng)頁進(jìn)行布局時(shí)，它會(huì)造成許多混淆。以下3種情況都有可能出現(xiàn)外邊距合并的現(xiàn)象：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上/或下外邊距也會(huì)發(fā)生合并。外邊距甚至可以與自身發(fā)生合并。假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們也會(huì)發(fā)生合并。9.2.4內(nèi)邊距設(shè)置CSS中的padding屬性控制元素的內(nèi)邊距。padding屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域，接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值。若希望所有h1元素的各邊都有5像素的內(nèi)邊距，代碼描述如下：h1{padding:5px;}9.2.5實(shí)操案例：時(shí)刻餐廳本案例將練習(xí)制作時(shí)刻餐廳網(wǎng)頁，對(duì)Div和CSS的應(yīng)用進(jìn)行介紹。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.3課堂實(shí)戰(zhàn)飛揚(yáng)咖啡本案例將練習(xí)制作飛揚(yáng)咖啡網(wǎng)頁，對(duì)Div和CSS的創(chuàng)建與應(yīng)用進(jìn)行介紹。目錄Contents9.1

CSS與Div布局基礎(chǔ)9.2

CSS布局方法9.3

課堂實(shí)戰(zhàn)9.4

課后練習(xí)9.4課后練習(xí)1.湖江船業(yè)根據(jù)所學(xué)內(nèi)容制作湖江船業(yè)網(wǎng)頁。2.安居養(yǎng)老根據(jù)所學(xué)內(nèi)容制作安居養(yǎng)老網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第10章表單的應(yīng)用網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.1.1

認(rèn)識(shí)表單表單中可以存儲(chǔ)文本、密碼、單選按鈕、復(fù)選框、數(shù)字以及提交按鈕等對(duì)象，這些對(duì)象也被稱為表單對(duì)象。10.1.2

基本表單元素創(chuàng)建表單域后，可以在該區(qū)域中插入各類表單元素。目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.2.1文本文本可用于接收用戶輸入的較短的信息，如姓名、電話等。10.2.2密碼密碼可用于輸入需要保密的信息，當(dāng)用戶在密碼域中輸入文本時(shí)，輸入的文本將被替換為隱藏符號(hào)，以便于保護(hù)這些信息。10.2.3文本區(qū)域文本區(qū)域可用于接收較多的信息。10.2.4實(shí)操案例：億聯(lián)科技登錄頁本案例將以億聯(lián)科技登錄頁的制作為例，介紹表單、文本、密碼等表單元素。目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.3.1單選按鈕和單選按鈕組“單選按鈕”和“單選按鈕組”選項(xiàng)都可以創(chuàng)建單選按鈕，區(qū)別在于“單選按鈕組”可以一次性生成多個(gè)單選按鈕。1.單選按鈕移動(dòng)鼠標(biāo)至要添加單選按鈕的表單中，執(zhí)行“插入>表單>單選按鈕”命令，即可插入單選按鈕。2.單選按鈕組“單選按鈕組”與“單選按鈕”作用類似。移動(dòng)鼠標(biāo)至要添加單選按鈕組的表單中，執(zhí)行“插入>表單>單選按鈕組”命令，打開“單選按鈕組”對(duì)話框。在該對(duì)話框中設(shè)置參數(shù)后，單擊“確定”按鈕即可插入單選按鈕組。10.3.2復(fù)選框和復(fù)選框組“復(fù)選框”和“復(fù)選框組”可以讓用戶在網(wǎng)頁一組選項(xiàng)中選擇多個(gè)選項(xiàng)。目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.4.1“提交”和“重置”按鈕“提交”按鈕可以將表單數(shù)據(jù)內(nèi)容提交到服務(wù)器。執(zhí)行“插入>表單>提交”命令即可在表單中添加“提交”按鈕?！爸刂谩卑粹o可以重置表單中輸入的信息。執(zhí)行“插入>表單>重置”命令即可在表單中添加“重置”按鈕。10.4.2文件“文件”表單可以實(shí)現(xiàn)在網(wǎng)頁中上傳文件的功能。執(zhí)行“插入>表單>文件”命令，可以在表單中添加文件域，按F12鍵在瀏覽器中測(cè)試效果，單擊“瀏覽”按鈕將打開“打開”文件夾上傳文件。10.4.3選擇“選擇”表單可以制作下拉列表框，增加選項(xiàng)的延展性。10.4.4實(shí)操案例：晴空旅社客房預(yù)訂頁本案例將以晴空旅社客房預(yù)定網(wǎng)頁的制作為例，介紹文本、單選按鈕組、選擇等表單的應(yīng)用。目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.5課堂實(shí)戰(zhàn)網(wǎng)絡(luò)安全知識(shí)競(jìng)賽本案例將以網(wǎng)絡(luò)安全知識(shí)競(jìng)賽網(wǎng)頁的制作為例，介紹表單元素的應(yīng)用于設(shè)置。目錄Contents10.1

使用表單10.2

文本類表單10.3

單選按鈕和復(fù)選框表單10.4

其他常用表單10.5

課堂實(shí)戰(zhàn)10.6

課后作業(yè)10.6課后作業(yè)1.知味餐廳會(huì)員注冊(cè)網(wǎng)頁根據(jù)所學(xué)內(nèi)容制作知味餐廳會(huì)員注冊(cè)網(wǎng)頁。2.新科書畫展預(yù)約網(wǎng)頁根據(jù)所學(xué)內(nèi)容制作新科書畫展預(yù)約網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第11章模板和庫網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents11.1

直接創(chuàng)建模板11.2

管理和使用模板11.3

創(chuàng)建和使用庫11.4

課堂實(shí)戰(zhàn)11.5

課后作業(yè)11.1.1直接創(chuàng)建模板創(chuàng)建模板時(shí)需明確模板所在站點(diǎn)，創(chuàng)建后軟件會(huì)自動(dòng)在站點(diǎn)根目錄下創(chuàng)建名為Templates的文件夾，所有模板文件均保存在該文件夾中。11.1.2從現(xiàn)有網(wǎng)頁中創(chuàng)建模板從現(xiàn)有網(wǎng)頁中創(chuàng)建模板可以節(jié)省重新制作模板的時(shí)間，提高工作效率。11.1.3定義可編輯區(qū)域可編輯區(qū)域是指模板文件中能夠進(jìn)行編輯的區(qū)域。默認(rèn)情況下，在創(chuàng)建模板時(shí)模板中的布局就已被設(shè)為鎖定區(qū)域。若想修改鎖定區(qū)域，需要重新打開模板文件，對(duì)模板內(nèi)容編輯修改。11.1.4實(shí)操案例：酷卡服裝本案例將以酷卡服裝網(wǎng)頁模板的制作為例，介紹模板的創(chuàng)建。目錄Contents11.1

直接創(chuàng)建模板11.2

管理和使用模板11.3

創(chuàng)建和使用庫11.4

課堂實(shí)戰(zhàn)11.5

課后作業(yè)11.2.1應(yīng)用模板通過“新建”命令或“資源”面板均可以創(chuàng)建基于模板的網(wǎng)頁。1.“新建”命令執(zhí)行“文件>新建”命令，在打開的“新建文檔”對(duì)話框中選擇“網(wǎng)站模板”選項(xiàng)卡，選擇站點(diǎn)中的模板。完成后單擊“創(chuàng)建”按鈕，即可根據(jù)模板新建網(wǎng)頁文檔。2.“資源”面板新建空白文檔，執(zhí)行“窗口>資源”命令打開“資源”面板，選擇“模板”選項(xiàng)卡中的模板，單擊“應(yīng)用”按鈕即可在文檔中應(yīng)用模板。11.2.2從模板中分離基于模板創(chuàng)建的網(wǎng)頁文檔只有定義為可編輯的區(qū)域內(nèi)容可以修改，其他區(qū)域是被鎖定的，不能修改編輯。若想在不影響模板文檔的前提下更改鎖定區(qū)域，可以將網(wǎng)頁從模板中分離。11.2.3更新模板及模板內(nèi)容頁將模板應(yīng)用至網(wǎng)頁制作后，就可以通過更改模板對(duì)所有應(yīng)用該模板的網(wǎng)頁進(jìn)行更新。11.2.4創(chuàng)建嵌套模板在一個(gè)模板文件中使用其他模板，就是模板嵌套。在創(chuàng)建嵌套模板（新模板）時(shí)，需要先保存被嵌套模板文件（基本模板），然后創(chuàng)建應(yīng)用基本模板的網(wǎng)頁，再將該網(wǎng)頁另存為模板。新模板擁有基本模板的可編輯區(qū)域，還可以繼續(xù)添加新的可編輯區(qū)域。11.2.5創(chuàng)建可選區(qū)域可選區(qū)域是在模板中定義的、可以選擇是否顯示的內(nèi)容。11.2.6實(shí)操案例：應(yīng)用酷卡服裝網(wǎng)頁模板本案例將以應(yīng)用創(chuàng)建的服裝網(wǎng)頁模板的制作為例，介紹如何應(yīng)用模板。目錄Contents11.1

創(chuàng)建模板11.2

管理和使用模板11.3

創(chuàng)建和使用庫11.4

課堂實(shí)戰(zhàn)11.5

課后作業(yè)11.3.1創(chuàng)建庫項(xiàng)目用戶可以創(chuàng)建空白庫項(xiàng)目或?qū)⑽臋n<body>部分中的元素創(chuàng)建為庫項(xiàng)目。1.基于現(xiàn)有元素創(chuàng)建庫項(xiàng)目打開網(wǎng)頁文檔，選中要?jiǎng)?chuàng)建為庫項(xiàng)目的元素，執(zhí)行“窗口>資源”命令，打開“資源”面板。2.創(chuàng)建空白庫項(xiàng)目不選中任何對(duì)象的情況下，單擊“資源”面板底部的“新建庫項(xiàng)目”按鈕，即可新建空的庫項(xiàng)目。11.3.2插入庫項(xiàng)目“庫”中的庫項(xiàng)目可以很便捷地插入網(wǎng)頁文檔中使用。11.3.3編輯和更新庫項(xiàng)目下面將對(duì)庫項(xiàng)目的編輯、重命名、刪除、更新等操作進(jìn)行介紹。1.編輯庫項(xiàng)目在“資源”面板中選中要編輯的庫項(xiàng)目，雙擊或單擊面板底部的“編輯”按鈕即可打開庫項(xiàng)目文件進(jìn)行編輯。2.重命名庫項(xiàng)目在“資源”面板中單擊要修改名稱的庫項(xiàng)目，使其變?yōu)榭删庉嫚顟B(tài)，輸入新的名稱后按Enter鍵確認(rèn)即可。3.刪除庫項(xiàng)目在“資源”面板中選中要?jiǎng)h除的庫項(xiàng)目，單擊底部的“刪除”按鈕即可。4.更新庫項(xiàng)目執(zhí)行“工具>庫>更新頁面”命令，即可打開“更新頁面”對(duì)話框。目錄Contents11.1

創(chuàng)建模板11.2

管理和使用模板11.3

創(chuàng)建和使用庫11.4

課堂實(shí)戰(zhàn)11.5

課后作業(yè)11.4課堂實(shí)戰(zhàn)自然科普本案例將以自然科普網(wǎng)頁模板的制作及應(yīng)用為例，對(duì)模板的創(chuàng)建、設(shè)置及應(yīng)用進(jìn)行介紹。目錄Contents11.1

創(chuàng)建模板11.2

管理和使用模板11.3

創(chuàng)建和使用庫11.4

課堂實(shí)戰(zhàn)11.5

課后作業(yè)11.5設(shè)計(jì)走查1.格紋帽業(yè)根據(jù)所學(xué)內(nèi)容制作格紋帽業(yè)網(wǎng)頁。2.科力廚具根據(jù)所學(xué)內(nèi)容制作科力廚具網(wǎng)頁。學(xué)習(xí)進(jìn)步網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程第12章行為的應(yīng)用網(wǎng)頁設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents12.1

什么是行為12.2

利用行為調(diào)節(jié)瀏覽器窗口12.3

利用行為制作圖像特效12.4

利