《網頁設計與制作案例實戰(zhàn)教程》全套教學課件

第1章網頁設計基礎網頁設計與制作案例實戰(zhàn)教程全套可編輯PPT課件目錄Contents1.1

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

課后練習1.1.1

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

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

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

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

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

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

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

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

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

網頁的基本概念1.2

網站制作流程1.3

網頁布局與配色1.4

網頁設計常用工具1.5

AIGC在網頁設計中的應用1.6

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

Dreamweaver的工作界面2.2

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

文檔的基礎操作2.4

課堂實戰(zhàn)利農農機2.5

課后練習2.1.1

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

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

Dreamweaver的工作界面2.2

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

文檔的基礎操作2.4

課堂實戰(zhàn)利農農機2.5

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

Dreamweaver的工作界面2.2

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

文檔的基礎操作2.4

課堂實戰(zhàn)利農農機2.5

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

Dreamweaver的工作界面2.2

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

文檔的基礎操作2.4

課堂實戰(zhàn)利農農機2.5

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

Dreamweaver的工作界面2.2

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

文檔的基礎操作2.4

課堂實戰(zhàn)利農農機2.5

課后練習2.5課后練習1.酷樂冰屋根據所學內容制作酷樂冰屋網頁。2.哎呀寵物根據所學內容制作哎呀寵物網頁。學習進步網頁設計與制作案例實戰(zhàn)教程第3章HTML知識準備網頁設計與制作案例實戰(zhàn)教程目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰(zhàn)3.5

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

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

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰(zhàn)3.5

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

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰(zhàn)3.5

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

HTML5中的標記方法HTML5的標記方法主要有以下3種：1.內容類型(ContentType)HTML5的文件擴展符與內容類型保持不變。2.DOCTYPE聲明DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。3.字符編碼的設置字符編碼的設置方法也有些新的變化。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中，還新增加了很多的屬性，下面簡單介紹一些新增的屬性。1.表單相關的屬性2.與鏈接相關的屬性3.其它屬性目錄Contents3.1

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰(zhàn)3.5

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

認識HTML3.2

HTML的基本標簽3.3

HTML5的應用3.4

課堂實戰(zhàn)3.5

課后練習3.5課后練習1.微著齒輪根據所學內容制作微著齒輪網頁。2.閃電速運根據所學內容制作閃電速運網頁。學習進步網頁設計與制作案例實戰(zhàn)教程第4章頁面與文本網頁設計與制作案例實戰(zhàn)教程目錄Contents4.1

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

課后練習4.1.1

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

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

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

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

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

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

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

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

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

頁面屬性4.2

創(chuàng)建文本4.3

設置網頁中的文本屬性4.4

在網頁中插入特殊元素4.5

課堂實戰(zhàn)4.6

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

在網頁中插入圖像5.2

插入多媒體元素5.3

課堂實戰(zhàn)5.4

課后練習5.1.1

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

在網頁中插入圖像5.2

插入多媒體元素5.3

課堂實戰(zhàn)5.4

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

在網頁中插入圖像5.2

插入多媒體元素5.3

課堂實戰(zhàn)5.4

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

在網頁中插入圖像5.2

插入多媒體元素5.3

課堂實戰(zhàn)5.4

課后練習5.5課后練習1.美相圖片根據所學內容制作美相圖片網頁。2.賽克音樂根據所學內容制作賽克音樂網頁。學習進步網頁設計與制作案例實戰(zhàn)教程第6章超鏈接的應用網頁設計與制作案例實戰(zhàn)教程目錄Contents6.1

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

課后練習6.1.1

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

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

超鏈接概念6.2

管理網頁超鏈接6.3

文本鏈接6.4

圖像鏈接6.5

錨點鏈接6.6

課堂實戰(zhàn)6.7

課后練習6.7課后練習1.長風文學根據所學內容為長風文學網頁添加鏈接。2.可麗甜點根據所學內容為可麗甜點網頁添加鏈接。學習進步網頁設計與制作案例實戰(zhàn)教程第7章使用表格布局網頁網頁設計與制作案例實戰(zhàn)教程目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

課后練習7.1.1

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰(zhàn)9.4

課后練習9.1.1

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

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

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰(zhàn)9.4

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

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰(zhàn)9.4

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

CSS與Div布局基礎9.2

CSS布局方法9.3

課堂實戰(zhàn)9.4

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

課后作業(yè)10.1.1

認識表單表單中可以存儲文本、密碼、單選按鈕、復選框、數字以及提交按鈕等對象，這些對象也被稱為表單對象。10.1.2

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

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

使用表單10.2

文本類表單10.3

單選按鈕和復選框表單10.4

其他常用表單10.5

課堂實戰(zhàn)10.6

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

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

管理和使用模板11.3

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

課堂實戰(zhàn)11.5

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

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

管理和使用模板11.3

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

課堂實戰(zhàn)11.5

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

創(chuàng)建模板11.2

管理和使用模板11.3

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

課堂實戰(zhàn)11.5

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

創(chuàng)建模板11.2

管理和使用模板11.3

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

課堂實戰(zhàn)11.5

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

創(chuàng)建模板11.2

管理和使用模板11.3

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

課堂實戰(zhàn)11.5

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

什么是行為12.2

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

利用行為制作圖像特效12.4

利