第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC網(wǎng)頁設(shè)計與制作應(yīng)用教程第二部分AdobeDreamweaverCC應(yīng)用篇網(wǎng)頁設(shè)計與制作第3章

AdobeDreamweaverCC入門本章重點AdobeDreamweaverCC工作區(qū)組成站點的建立站點文件的基本操作三、AdobeDreamweaverCC入門網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門3.1AdobeDreamweaverCC2018工作環(huán)境3.3站點文件的基本操作3.2站點的建立3.1AdobeDreamweaverCC2018工作環(huán)境安裝DreamweaverCC2018后，首次啟動Dreamweaver時，屏幕上將顯示一個快速入門菜單，就三個問題的需求對Dreamweaver工作區(qū)進行個性化設(shè)置。會出現(xiàn)工作環(huán)境設(shè)置向?qū)?，根?jù)“是否用過DreamweaverCC”提示選擇“用過”或是“新手”，如圖所示。網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門隨后分別對“主題”顏色、“工作區(qū)”、“新增功能”等工作區(qū)選項進行設(shè)置，選擇后一切就緒，開始使用Dreamweaver。網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門3.1AdobeDreamweaverCC2018工作環(huán)境工作界面組成Dreamweaver提供了一個將全部元素置于一個窗口中的集成布局。在工作區(qū)中，全部窗口和面板都被集成到一個更大的應(yīng)用程序窗口中。新建或者打開一個網(wǎng)頁文件，就會出現(xiàn)如圖

所示的工作區(qū)界面。Dreamweaver

的工作區(qū)主界面主要包括標題欄、菜單欄、工具欄、編輯窗口、狀態(tài)欄、“屬性”面板和浮動面板組。3.2站點的建立

網(wǎng)頁包含的元素有文本、圖像、表格、表單、動畫、視頻等。如果這些元素不有效的組織管理，將使網(wǎng)頁設(shè)計很不方便。建立站點的目的就是為了有效的組織管理設(shè)計網(wǎng)頁所需要的各種元素。

在設(shè)計網(wǎng)頁之前，必須先建立一個站點，它實際是一個文件夾，該文件夾存放網(wǎng)站所需要的所有文檔材料和已經(jīng)設(shè)計和的網(wǎng)頁文件，然后通過超級鏈接方式將它們有效的組織起來。站點需要一個名稱和存儲位置也就是目錄。網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門創(chuàng)建站點站點有網(wǎng)絡(luò)服務(wù)器中的站點（即遠程站點）和本地站點兩種創(chuàng)建形式。通常情況下，首先在本地站點上完成網(wǎng)站的建設(shè)，形成本地站點，然后用FTP上傳至Internet服務(wù)器上，形成最終可以在Internet上瀏覽的遠程站點。建立本地站點就是將本地主機磁盤（通常是硬盤）中的一個文件夾定義為站點，網(wǎng)頁中的所有文檔均放在該文件夾中，以便于管理。通常，在設(shè)計網(wǎng)頁之前，應(yīng)該首先建立本地站點。網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門3.2站點的建立創(chuàng)建站點目錄和文件

站點創(chuàng)建完成，之后的編輯和管理工作非常關(guān)鍵，其中包括繼續(xù)創(chuàng)建站點目錄和文件。網(wǎng)頁文件可以事先都建立好，然后分別編輯這些網(wǎng)頁。在建立好的站點中，有時需要建立一些文件夾，用來存放圖像等有關(guān)內(nèi)容。網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門站點文件的基本操作

使用Dreamweaver創(chuàng)建網(wǎng)頁的最基本的操作是能夠完成對文件的建立和打開。網(wǎng)頁文件的擴展名是.htm（或者html），文件的基本操作，包括創(chuàng)建、打開和基本管理等操作。

3.2站點文件的基本操作網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門

本章首先介紹了AdobeDreamweaverCC2018的界面構(gòu)成和基本工作環(huán)境。本章還介紹了在Dreamweaver編輯器中創(chuàng)建站點的操作方法，以及如何修改和查看站點信息等。這些內(nèi)容是熟練使用Dreamweaver的基礎(chǔ)，通過練習(xí)要很好的掌握網(wǎng)頁文檔的基本操作方法。本章小結(jié)網(wǎng)頁設(shè)計與制作——AdobeDreamweaverCC入門描述改變面板的大小、位置的操作方法。簡述屬性檢查器的作用。描述文件打開、存儲的操作過程。創(chuàng)建站點的基本步驟是什么？簡述站點視圖的幾種查看方式？創(chuàng)建一個個人主頁站點。思考與練習(xí)網(wǎng)頁設(shè)計與制作第4章插入基本網(wǎng)頁元素本章重點頁面屬性設(shè)置插入與編輯頁面基本元素創(chuàng)建超鏈接四、插入基本網(wǎng)頁元素4.1頁面屬性設(shè)置4.3圖像插入與編輯4.2文本插入與編輯4.4多媒體插入與編輯4.5超鏈接4.6應(yīng)用列表4.1

頁面屬性設(shè)置4.1頁面屬性設(shè)置大多網(wǎng)站的頁面會設(shè)置固定的色彩或圖像作為背景，這些如字體、背景顏色和背景圖像等外觀屬性特征可以通過設(shè)置網(wǎng)站的頁面屬性來控制。4.2.1在網(wǎng)頁中插入文本文本是網(wǎng)頁中的重要元素，在Dreamweaver的“設(shè)計”視圖可以直接輸入文本內(nèi)容，類似在Word文檔中輸入文本。當然，也可以導(dǎo)入其他編輯器中已有的文本，從而快速創(chuàng)建文檔內(nèi)容。4.2.3插入滾動文本在網(wǎng)站頁面中，插入滾動文字可以增強視覺流動性，突出顯示文字內(nèi)容。實際上，通過插入<marquee>標簽可以實現(xiàn)該功能。4.2.2編輯文本1.標題級樣式設(shè)置2.文本格式設(shè)置4.2文本插入與編輯說明:direction:設(shè)置滾動方向#的取值有l(wèi)eft,right,up,down

，默認是left，即從右至左。bgcolor:設(shè)置滾動區(qū)域的背景色。

height:設(shè)置滾動區(qū)域的高度

。width:設(shè)置滾動區(qū)域的寬度

。scrollamount:設(shè)置每次移動速度，數(shù)值越大移動越快。scrolldelay:設(shè)置每一次滾動停頓時間，單位是毫秒（ms），時間越短滾動越快。loop：設(shè)置文字滾動次數(shù)，默認為無限次。align：設(shè)置滾動文字與屏幕的垂直對齊方式，取值top、middle、bottom。hspace：設(shè)置字幕左右空白區(qū)域。vspace：設(shè)置字幕上下空白區(qū)域。<h1align="center">學(xué)

校

簡

介</h1><marqueewidth="1000">不忘初心牢記使命立德樹人育警鑄劍</marquee><hr>4.2文本插入與編輯4.3圖像插入與編輯圖像與文字一樣，都是網(wǎng)頁構(gòu)成的基本元素。圖像可以更好的表現(xiàn)主題，避免純文本的單調(diào)，以豐富、美觀的信息來吸引更多的訪問者。Dreamweaver可以直接顯示“GIF”、“JPEG”或“PNG”格式的圖片。4.3.1插入圖像1)打開網(wǎng)頁“page406.html”，頁面是準備插入圖像的

半成品?；蛘咝陆ㄒ粋€空白網(wǎng)頁。2)光標插入點指定在正文段落前面，單擊Enter鍵

空出一行。選擇主菜單【插入】/【image】命令，在彈出的對話框中選擇圖像文件名，單擊“確定”按鈕，則圖像按原始尺寸大小插入到頁面中。4.3.2編輯圖像調(diào)整圖像的大小

、高度和寬度等。4.4多媒體插入與編輯使用Dreamweaver可以在網(wǎng)頁中快速插入各種類型的音頻、視頻、動畫等多媒體控件。多媒體元素使得網(wǎng)頁內(nèi)容更加豐富多彩。這些元素添加到頁面時，在Dreamweaver的編輯窗口是不能直接瀏覽的，它只是一個占位圖標，在瀏覽器窗口才能聽到或看到播放效果。主菜單【插入】/【HTML】中包括了各種類型的執(zhí)行命令。添加音頻添加視頻添加Flash動畫4.5超鏈接

所謂超鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，這個目標可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序。可以說超鏈接是互聯(lián)網(wǎng)技術(shù)能夠得以飛速普及的關(guān)鍵。4.5.1超鏈接的分類外部鏈接內(nèi)部鏈接錨記鏈接E-mail鏈接空鏈接腳本鏈接4.5.2創(chuàng)建超鏈接_blank（或者_new）將鏈接的文檔載入一個新的、未命名的瀏覽器窗口(_blank即將在新標準中被廢除)。_parent：將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏覽器窗口。_self：將鏈接的文檔載入鏈接所在的同一框架或窗口。此目標是默認的，所以通常不需要指定它。_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。4.6應(yīng)用列表列表分為項目列表和編號列表兩種，項目列表也稱為無序列表，編號列表也稱為有序列表。在“設(shè)計”視圖中，鼠標直接拖拽選中所有正文文本（不含題目），然后在屬性檢查器中單擊項目或編號列表符號。項目列表可以使用符號或圖形來對沒有順序的文本進行排列，通常使用項目符號作為列表項的前綴，如圓點（

）、方塊（

）等符號作為列表符號。編號列表是以數(shù)字編號來對一組文本進行排列，通常使用一種數(shù)字符號作為列表前綴，各項目之間存在順序和級別之分。本章小結(jié)靜態(tài)網(wǎng)頁設(shè)計的基礎(chǔ)工作不外乎是將文本、圖像等信息添加組織到網(wǎng)頁中。本章介紹了使用Dreamweaver在網(wǎng)頁中插入各種類型頁面元素的操作方法，主要包括文本和圖像的插入、圖像熱點插入，以及超鏈接的創(chuàng)建方法。在介紹插入網(wǎng)頁對象的操作同時，還介紹了編輯對象的操作。網(wǎng)頁文本處理方法與哪些？簡述網(wǎng)頁表格處理方法？簡述超級鏈接的作用和建立過程？設(shè)計一個介紹自己的網(wǎng)站？思考與練習(xí)網(wǎng)頁設(shè)計與制作第5章表格和表單本章重點表格的創(chuàng)建與編輯表單的創(chuàng)建與編輯五、表格和表單5.1表格的應(yīng)用5.3Spry組件5.2表單的應(yīng)用5.1表格的應(yīng)用表格的應(yīng)用

表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。在Dreamweaver中可以很方便地創(chuàng)建表格，并操作列、行和單元格。5.1.1表格的創(chuàng)建在“設(shè)計”視圖中，將光標置于頁面需要插入表格的位置，選擇主菜單【插入】/【Table表格】命令，彈出“Table”表格對話框，如圖所示。在表格對話框中，可以對表格大小、標題，及輔助功能等選項進行設(shè)置。行數(shù)：確定表格具有的行的數(shù)目。列數(shù)：確定表格具有的列的數(shù)目。表格寬度width：以像素為單位或按占瀏覽器窗口寬度的百分比指定表格的寬度。（圖例中修改為百分比寬度，不管網(wǎng)頁打開多大多小，表格總寬度按照網(wǎng)頁的寬度比例顯示）表格高度height：定義表格的高度，y為像素數(shù)或占窗口的百分比。邊框粗細border：指定表格邊框的寬度（以像素為單位）。單元格邊距cellpadding：確定單元格邊框和單元格內(nèi)容之間的像素數(shù)。單元格間距cellspacing：確定相鄰的表格單元格之間的像素數(shù)。5)表格內(nèi)文字的對齊方式2)在“標題”部分選擇一個標題選項3)在“輔助功能”部分指定選項4)表頭看做一行、只不過使用的是<th>標簽。在瀏覽器中顯示時，<th>標簽的文字按粗體顯示，<td>標簽的文字按正常字體顯示。1)在“表格大小”部分中指定選項6)表格的色彩和圖像背景7)跨行、跨列表項設(shè)計表格的設(shè)置5.1表格的應(yīng)用表項數(shù)據(jù)的水平對齊用標簽<td>的align屬性。align的屬性值分別為：center：表項數(shù)據(jù)的居中l(wèi)eft：左對齊right：右對齊justify：左右調(diào)整表項數(shù)據(jù)的垂直對齊用標簽<td>的valign屬性實現(xiàn)。valign的屬性值分別為：top：靠單元格頂bottom：靠單元格底middle：靠單元格中baseline：同行單元數(shù)據(jù)項位置一致在<table>、<th>、<tr>、<td>標簽中，使用下面屬性可以改變表格的背景和邊框的色彩、添加背景圖像，也可以為行和單元格改變色彩、添加背景圖像。bgcolor：設(shè)置背景色彩。background：設(shè)置背景圖像。bordercolor：設(shè)置表格邊框的色彩。bordercolorlight：設(shè)置表格邊框亮部的色彩。rules＝＂row，cols或none＂：設(shè)置表格內(nèi)線的顯示方法，none為無內(nèi)線。對表格進行格式設(shè)置時，可以對整個表格、行、單元格的屬性進行設(shè)置。表格格式設(shè)置的優(yōu)先順序如下：單元格、行、表格。跨行、跨列表項設(shè)計用<tr>、<td>、<th>標簽中的colspan和rowspan屬性，可以設(shè)置多行（合并行）多列（合并列）的表項。5.1表格的應(yīng)用5.1.2編輯表格5.1表格的應(yīng)用1.選擇表格與單元格2.設(shè)置表格、單元格、行和列的屬性3.在表格中插入/刪除行或列4.在表格中插入對象5.合并/拆分單元格

6.嵌套表格可以將單元格拆分成任意數(shù)目的行或列，或者將多個單元格合并成為一個單元格嵌套表格是在另一個表格的單元格中的表格5.1.3數(shù)據(jù)的導(dǎo)入和導(dǎo)出在Dreamweaver中，可以將

Excel文檔的完整內(nèi)容插入到網(wǎng)頁中，也可以將網(wǎng)頁文件中數(shù)據(jù)表格導(dǎo)出。5.2表單的應(yīng)用創(chuàng)建表單在“設(shè)計”視圖中，選擇主菜單【插入】/【表單】/【表單】命令，則窗口出現(xiàn)一個紅色虛線框為表單域表單主要有下面一些主要屬性：ID：為表單設(shè)置一個ID，在本網(wǎng)頁中對該對象的唯一標識符。動作（Action）：編寫服務(wù)器端表單處理程序。方法（Method）：定義表單數(shù)據(jù)處理的處理程序。分為GET、POST和默認等方式。其中，POST會將表單數(shù)據(jù)嵌入HTTP請求中。GET會將值附加到請求頁面的URL中。默認值會使用瀏覽器的默認設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。5.2表單的應(yīng)用表單中可以添加的對象還有很多，主要作用如下：文本字段：可以接受任何文本、字母和數(shù)字類型。輸入內(nèi)容可設(shè)置顯示為星，單行顯示。文本區(qū)域：可以多行文本。復(fù)選框：在選項中允許選擇多個項目。單選按鈕：在選項中只允許選擇一個項目。按鈕：用于執(zhí)行提交或取消任務(wù)。列表：列出一組可供用戶選擇的值。文件域：允許從磁盤上選擇文件。5.3Spry組件

本節(jié)介紹Spry組件的建立和使用，屬于DreamweaverCS5版本的知識。這部分內(nèi)容在DreamweaverCC2017之后就不再使用。為了結(jié)合之前的版本的相關(guān)知識點，繼續(xù)在本教材中保留這部分內(nèi)容。如果直接使用DreamweaverCC2017之后的版本軟件，則可以忽略本節(jié)知識，對應(yīng)內(nèi)容將在第7章“行為”中進一步體現(xiàn)。本章小結(jié)本章介紹的表格是網(wǎng)頁設(shè)計中的重要頁面元素，表格的創(chuàng)建和編輯方法靈活多樣，單元格可以嵌套表格，使表格的表達形式更加豐富，對數(shù)據(jù)的表現(xiàn)形式也更多樣，也可以實現(xiàn)頁面布局效果。表單是動態(tài)頁面設(shè)計中不可或缺的元素，表單對象及驗證表單組件的創(chuàng)建與編輯是本章重點內(nèi)容之一，設(shè)計者在表單設(shè)計時，通常要根據(jù)表單設(shè)計需求添加表單元素，并結(jié)合表格進行表單元素的布局。表格的實際用途有哪些？表單域中的對象元素有哪些？各有什么特點？除了表格布局表單元素的方法，思考還有什么布局方法可以應(yīng)用在表單設(shè)計中。思考與練習(xí)網(wǎng)頁設(shè)計與制作第6章

使用CSS美化和布局網(wǎng)頁本章重點認識CSS熟悉CSS選擇符和屬性使用使用DIV+CSS進行網(wǎng)頁布局掌握CSS的應(yīng)用六、使用CSS美化和布局網(wǎng)頁6.1初識CSS6.3創(chuàng)建CSS外部樣式6.2用CSS樣式美化頁面6.4盒模型布局網(wǎng)頁CSS(CascadingStyleSheets)層疊樣式表，是W3C組織制定的網(wǎng)頁樣式設(shè)計標準，是一種用來表現(xiàn)HTML文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

在DIV+CSS技術(shù)時代，CSS顯得格外重要，它可以將Web前端的HTML代碼與頁面布局、美化，以及添加一些特殊效果的代碼分隔開來。這樣可以更加靈活、高效地開發(fā)頁面，精確指定網(wǎng)頁元素位置，更輕松地修改和控制頁面外觀。6.1初識CSS6.1.1CSS特點1.將頁面的內(nèi)容與表示形式分離。2.控制頁面的布局。3.網(wǎng)頁體積更小。4.使瀏覽器成為更友好的界面。6.1初識CSS6.1.2CSS規(guī)則CSS格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明。選擇器是標識已設(shè)置格式元素（如

P、H1、類名稱或ID）的術(shù)語，而聲明則用于定義樣式元素。h1是選擇器，介于大括號({})之間的所有內(nèi)容都是聲明。聲明由兩部分組成：屬性和屬性值，中間用英文冒號“:”連接。上述示例為h1標簽創(chuàng)建了樣式：鏈接到此樣式的所有h1標簽的文本都將是16像素大小和粗體字體。CSS的主要優(yōu)點是統(tǒng)一表現(xiàn)形式，只要對一處CSS規(guī)則進行更新，則使用該定義樣式的所有文檔的格式都會自動更新為新樣式。6.1.3CSS樣式的類型1.類樣式2.標簽CSS樣式3.IDCSS樣式4.復(fù)合CSS樣式

5.偽類CSS樣式超鏈接偽類定義：a:link:定義超鏈接對象在沒有訪問前的樣式。a:hover:定義當鼠標移至超鏈接對象上時的樣式。a:active:定義當鼠標單擊超鏈接對象時的樣式。a:visited:定義超鏈接對象已經(jīng)被訪問過后的樣式。6.1初識CSS6.1初識CSS6.1.4CSS基本用法將樣式信息添加到一個HTML文檔中，有4種基本方法：1.添加行內(nèi)樣式。在HTML標簽中，把樣式作為屬性值直接定義在style中。2.在<style>標簽中集中定義CSS，即定義內(nèi)部樣式表。

3.通過<link>標簽導(dǎo)入外部CSS文件，即導(dǎo)入外部樣式表。

4.通過@input命令導(dǎo)入外部CSS文件，即導(dǎo)入外部樣式表。6.1.5創(chuàng)建CSS樣式的方法6.1初識CSS直接編寫代碼創(chuàng)建CSS樣式在屬性檢查器中創(chuàng)建CSS樣式使用“CSS設(shè)計器”面板創(chuàng)建CSS樣式6.1.6CSS屬性說明1.類型字體大小樣式行高修飾粗細變量大小顏色2.背景設(shè)定背景顏色背景圖像重復(fù)附件水平位置垂直位置3.區(qū)塊設(shè)定單詞間距字母間距垂直對齊文本對齊文字縮進空格顯示4.邊框設(shè)定樣式寬度顏色5.擴展設(shè)定分頁光標過濾器6.2用CSS樣式美化頁面6.2.1創(chuàng)建類CSS樣式6.2.2創(chuàng)建標簽CSS樣式6.2.3創(chuàng)建IDCSS樣式6.2.4創(chuàng)建偽類CSS樣式6.2.5創(chuàng)建復(fù)合CSS樣式6.3創(chuàng)建CSS外部樣式

把CSS樣式放在獨立的文件中，稱之為外部樣式表。外部樣式表文件是一個文本文件，擴展名為“.css”，外部樣式表文件需要與“.html”網(wǎng)頁文件聯(lián)合使用，通常以鏈接或?qū)氲男问疥P(guān)聯(lián)到網(wǎng)頁文件中應(yīng)用。

使用外部樣式既可以保持網(wǎng)頁外觀的一致性，又可以極大簡化設(shè)置過程，因而成為專業(yè)網(wǎng)站設(shè)計中普遍使用的一種方法。6.3創(chuàng)建CSS外部樣式例：創(chuàng)建外部樣式表，并在頁面中應(yīng)用樣式。1)打開素材文檔“page607.html”。2)在“CSS設(shè)計器”面板的“源”選項區(qū)中單擊“+”按鈕，在彈出的菜單中選擇“創(chuàng)建新的CSS文件”3)隨即彈出“創(chuàng)建新的CSS文件”對話框，如圖。單擊“文件”文本框后的“瀏覽”按鈕。4)隨即彈出“將樣式表文件另存為”對話框，在此選擇保存文件位置在站點根目錄的“CSS”文件夾中，確

定文件名為“style2.css”，如圖6-31所示。單擊“保存”按鈕。回到圖6-30所示的對話框，默認添加為“鏈接”選項，再單擊“確定”按鈕。6.3創(chuàng)建CSS外部樣式7)在“屬性”選項區(qū)中設(shè)置<div>的屬性。設(shè)置代碼如下：8)回到源文件的“代碼”視圖，光標移至<body>標簽后面，執(zhí)行【插入】/【dov】命令，并將詩詞部分內(nèi)容剪切并粘貼到<div>標簽對中，div{ width:400px; margin-top:50px; margin-left:666px; padding-top:20px; padding-left:10px; font-family:隸書; text-align:center;}9)執(zhí)行【文件】/【保存全部】命令，將“page607.html”和“style2.css”文件進行保存。瀏覽頁面的最終效果如圖6-35所示。5)此時在“代碼”視圖窗口中看到的效果。在文件名標簽下出現(xiàn)“源代碼”標簽和“style2.css”標簽，自動切換到CSS文件編輯窗口，并且第一行默認顯示為“@charset"utf-8";”，表示該文件代碼為純CSS樣式表內(nèi)容。6)在“CSS設(shè)計器”面板的“源”選項區(qū)中顯示了“style2.css”，并在“選擇器”選項區(qū)中添加“div”設(shè)置后“CSS設(shè)計器”面板內(nèi)容6.4盒模型布局網(wǎng)頁6.4盒模型概念所有的HTML頁面元素都包含在一個矩形框內(nèi)，這個矩形框就稱為盒模型。盒模型描述了元素及其屬性在頁面布局中所占的空間大小，因此盒模型可以影響其他元素的位置和大小。一般來說，這些被占據(jù)的空間往往都比單純的內(nèi)容要大。盒模型是由margin（邊界）、border（邊框）、padding（填充）和content（內(nèi)容）等幾個部分組成。margin：邊界也稱為外邊距，用來設(shè)置元素邊框與相鄰元素之間的距離。border：邊框，內(nèi)容邊框線，包括邊框的粗細、顏色和樣式等。padding：填充也稱為內(nèi)邊距，用來設(shè)置內(nèi)容與邊框之間的距離。content：內(nèi)容，是盒模型中必不可少的一部分，可以放置文字、圖像等。一個盒子的實際高度和寬度是由content+padding+border+margin組成的。通過width、height屬性來控制寬度和高度，并且對任何一個盒子，都可以設(shè)置4邊的border、margin和padding。本章小結(jié)

本章主要介紹了CSS樣式功能，DIV+CSS樣式布局已成為網(wǎng)頁布局的主流方法，CSS樣式可以作為網(wǎng)頁外觀布局的主要手段。本章需要讀者掌握的主要知識點包括如下內(nèi)容：CSS樣式的概念和CSS樣式類型的介紹，它在網(wǎng)頁的排版和布局方面能夠發(fā)揮巨大的作用。使用“CSS設(shè)計器”面板創(chuàng)建CSS樣式的方法。編輯和設(shè)置CSS樣式屬性的方法。使用盒模型布局網(wǎng)頁。常用的CSS樣式的類型哪幾種？CSS樣式基本用法有哪些？能結(jié)合使用嗎？簡述DIV+CSS布局頁面的特點。思考與練習(xí)網(wǎng)頁設(shè)計與制作第7章行為和模版本章重點應(yīng)用“行為”面板應(yīng)用模板應(yīng)用庫添加內(nèi)置行為的方法七、行為和模版7.1行為及其使用方法7.3jQuery特效7.2應(yīng)用內(nèi)置行為7.4應(yīng)用模板7.5管理模板

網(wǎng)頁設(shè)計通常不僅僅包含靜態(tài)的文本和圖像，還有很多交互式動態(tài)效果，這種效果可以通過Dreamweaver提供的又一強大功能來實現(xiàn)，即行為。模板是一種特殊類型的文檔，它可以將具有相同版面布局的頁面制作成一個模板，而后大量生成基于模板的網(wǎng)頁。7.1行為及其使用方法行為是事件和由該事件觸發(fā)的動作的組合?！笆录笔怯|發(fā)動態(tài)效果的條件，是瀏覽器生成的消息，指示該頁的訪問者執(zhí)行了某種操作。網(wǎng)頁事件分為不同的種類：有的與鼠標相關(guān)，如鼠標放置在圖像上、移出圖像、單擊圖像等?！皠幼鳌笔怯深A(yù)先編寫的JavaScript代碼組成的，這些代碼最終產(chǎn)生動態(tài)效果。例如打開瀏覽器窗口、顯示或隱藏層、播放聲音等?！皩ο蟆薄ⅰ笆录焙汀皠幼鳌比哧P(guān)系為：對象在發(fā)生設(shè)定事件的情況下，產(chǎn)生相應(yīng)動作。例如，對于交換圖像這一行為，可以用三要素來解釋：圖像（對象）在鼠標放置其上時（事件），更換為另外一幅圖片（動作）,一般的動作是：改變某一個對象（原來的對象或者新對象）的屬性。7.1.1行為概述7.1行為及其使用方法7.1.2“行為”面板行為面板包含以下選項：顯示設(shè)置事件：僅顯示附加到當前對象的那些事件。事件被分別劃歸到客戶端或服務(wù)器端類別中。顯示所有事件：按字母順序顯示屬于特定類別的所有事件。添加動作(+)：顯示特定菜單，其中包含可以附加到當前選定元素的動作。當從該列表中選擇一個動作時，將出現(xiàn)一個對話框，在此對話框中指定該動作的參數(shù)。刪除(–)：從行為列表中刪除所選的事件和動作。向上箭頭和向下箭頭按鈕：在行為列表中上下移動特定事件的選定動作。對于不能在列表中上下移動的動作，箭頭按鈕將處于禁用狀態(tài)。事件：顯示一個下拉菜單，其中包含可以觸發(fā)該動作的所有事件，此菜單僅在選中某個事件時可見（當單擊所選事件名稱旁邊的箭頭按鈕時顯示此菜單）。根據(jù)所選對象的不同，顯示的事件也有所不同。顯示事件：指定當前行為在哪個瀏覽器中起作用（這是“事件”菜單的子菜單）。在此菜單中進行的選擇將確定“事件”菜單中顯示哪些事件。7.1.3行為的應(yīng)用方法1.添加行為2.更改行為7.2應(yīng)用內(nèi)置行為7.2.1交換圖像7.2.2彈出信息7.2.3調(diào)用JavaScript7.2.4顯示-隱藏元素7.2.5改變屬性7.2.6轉(zhuǎn)到URL7.2.7打開瀏覽器窗口7.2.8設(shè)置文本7.3jQuery特效7.3.1概念DreamweaverCC中增加了一系列jQuery特效，使用炫酷的jQuery特效用于創(chuàng)建動畫過渡或者可視方式修改頁面，可以讓頁面元素產(chǎn)生更靈活豐富的動態(tài)效果。Dreamweaver與jQuery相結(jié)合，無需編寫任何代碼，即可加特效。在“行為”面板的“效果”子菜單中有一系列命令，如圖7-24所示。特效實現(xiàn)的方法基本一致，可以舉一反三。下面以“Blind”和“Bounce”兩個實例進行介紹。7.4應(yīng)用模板7.4.1創(chuàng)建模板在DreamweaverCC中，有兩種方法可以創(chuàng)建網(wǎng)頁模板。一種是將現(xiàn)有的網(wǎng)頁文件另存為模板，然后根據(jù)需要再進行修改；另一種是直接新建一個空白模板，在其中插入需要顯示的文檔內(nèi)容。模板文件的擴展名是“.dwt”。

模板的制作方法與普通網(wǎng)頁一樣，只是在制作完成后要定義可編輯區(qū)。模板可以通過直接定義來創(chuàng)建，也可以將普通網(wǎng)頁另存為模板，前者在實際應(yīng)用中更為普遍。在插入可編輯區(qū)域之前，將要插入該區(qū)域的文檔另存為模板。7.4.2創(chuàng)建可編輯區(qū)域7.4.3模板區(qū)域的類型7.4.4創(chuàng)建基于模板的網(wǎng)頁在Dreamweaver中，創(chuàng)建新網(wǎng)頁時，可以直接由模板創(chuàng)建新網(wǎng)頁。前面已經(jīng)完成了創(chuàng)建模板文件，并在模板中定義了可編輯區(qū)域，下面完成針對可編輯區(qū)域的頁面內(nèi)容的制作。7.5管理模板7.5.1在基于模板的文檔中編輯內(nèi)容7.5.2更新模板文件

在Dreamweaver中可以首先創(chuàng)建模板，然后創(chuàng)建基于模板的網(wǎng)頁。這些網(wǎng)頁中部分區(qū)域是不能編輯的，稱為鎖定區(qū)。有些區(qū)域則是可編輯的，稱為可編輯區(qū)。

使用模板的最大好處就在于，當修改模板時，基于該模板創(chuàng)建的所有網(wǎng)頁可以一次更新，這就大大提高了網(wǎng)頁更新維護的效率。模板的高效性不僅在于創(chuàng)建網(wǎng)頁時的批量處理，更體現(xiàn)在修改網(wǎng)頁的時候。對模板進行修改之后，可以將模板的修改應(yīng)用于所有基于該模板生成的網(wǎng)頁中。本章小結(jié)

本章介紹了行為和模板功能及應(yīng)用方法，讀者可以通過應(yīng)用行為創(chuàng)建具有動態(tài)效果的網(wǎng)頁，應(yīng)用模板功能實現(xiàn)統(tǒng)一的多頁面效果。對于一些大中型網(wǎng)站，使用模板可以更好地維護網(wǎng)頁，有利于減輕網(wǎng)站設(shè)計中的重復(fù)工作量，對于剛剛學(xué)習(xí)網(wǎng)頁制作的設(shè)計者來說，可能會覺得本章的知識用處不是很大，但經(jīng)過一些實踐創(chuàng)作之后，會感到它們對讀者是很有幫助的。添加行為時對象、事件和動作之間的關(guān)系是什么？結(jié)合實例解釋。針對IE6.0提供的事件，說明onClick、onDrag、onMouseOver、onMouseOut事件的觸發(fā)條件。模板布局與框架布局的區(qū)別有哪些？舉例說明。使用模板技術(shù)制作學(xué)校各部門的宣傳網(wǎng)頁，要求導(dǎo)航欄和版權(quán)區(qū)域為鎖定區(qū)域，其余區(qū)域為可編輯區(qū)域。思考與練習(xí)網(wǎng)頁設(shè)計與制作第8章利用虛擬機建立動態(tài)Web站點本章要點虛擬機ASP技術(shù)SQL語言SQLServer數(shù)據(jù)庫八、利用虛擬機建立動態(tài)Web站點8.1動態(tài)Web系統(tǒng)開發(fā)概述8.3服務(wù)器上安裝配置IIS\SQLServer\Filezilla8.2虛擬機安裝與部署8.5數(shù)據(jù)庫結(jié)構(gòu)設(shè)計與實現(xiàn)8.4客戶端上安裝配置DWCS5和SQLServer客戶端8.6Web站點開發(fā)準備及規(guī)劃8.1動態(tài)Web系統(tǒng)開發(fā)概述

動態(tài)網(wǎng)站，是指基于數(shù)據(jù)庫進行架構(gòu)的網(wǎng)站，有沒有動畫效果不作為參考標準。動態(tài)網(wǎng)站一般采用編程語言開發(fā)設(shè)計動態(tài)網(wǎng)頁，通過數(shù)據(jù)庫使網(wǎng)站具有更多自動的和高級的功能。

一般情況下，專業(yè)公司通過出租網(wǎng)站空間給網(wǎng)站所有者，提供動態(tài)網(wǎng)站運行環(huán)境，包括Web服務(wù)器以及支持Web服務(wù)器運行的服務(wù)器版本操作系統(tǒng)，以及數(shù)據(jù)庫管理系統(tǒng)。網(wǎng)站所有者用戶租用一定的空間，選擇空間支持環(huán)境，獲取IP、用戶名、口令等授權(quán)信息后，在本地通過網(wǎng)絡(luò)進行網(wǎng)站和信息維護。

動態(tài)Web系統(tǒng)通常由HTML文件、腳本代碼和資源文件組成。HTML文件提供靜態(tài)的網(wǎng)頁內(nèi)容。腳本代碼可以嵌入到HTML文件中，也可以獨立成為一個個文件。具有腳本代碼的網(wǎng)頁往往以該腳本的技術(shù)簡稱為后綴，如ASP文件、PHP文件或者JSP文件。資源文件一般是圖片、視頻、文檔等等。一般的開發(fā)動態(tài)Web系統(tǒng)的過程如下：8.1動態(tài)Web系統(tǒng)開發(fā)概述8.1.1系統(tǒng)開發(fā)過程1、明確并細化建站需求和技術(shù)路線，收集相關(guān)素材2、準備Web服務(wù)器硬件3、安裝服務(wù)器操作系統(tǒng)4、安裝Web服務(wù)器應(yīng)用程序5、安裝和配置數(shù)據(jù)庫管理系統(tǒng)6、安裝和配置Web頁面編輯工具7、安裝和配置數(shù)據(jù)庫管理客戶端8、進行數(shù)據(jù)庫設(shè)計9、根據(jù)需求進行Web頁面設(shè)計10、測試Web系統(tǒng)11、上線運行8.1.2技術(shù)路線與設(shè)計規(guī)劃1.技術(shù)路線2.設(shè)計規(guī)劃1）WindowsXP（或者WIndows7）2）Windows2003Server安裝盤（或者ISO安裝文件）3）SQLServer2000安裝盤（或者更高版本）4）SQLServer2000SP4補丁包5）VMwareWorkstation6安裝軟件（或者更高版本）6）DreamweaverCS5安裝盤7）FTP服務(wù)器軟件FileZilla_ServerWindowsserver+IIS+ASP+SQLServer。8.1動態(tài)Web系統(tǒng)開發(fā)概述8.2虛擬機安裝與部署

虛擬機是指在一臺物理計算機上通過虛擬技術(shù)，虛擬出來的獨立的邏輯計算機。通過虛擬技術(shù)可以在現(xiàn)有的操作系統(tǒng)上虛擬出一個或多個新的子系統(tǒng)，這些子系統(tǒng)建立在正在運行的操作系統(tǒng)之上，同時，又擁有自己獨立的硬件資源，它們之間通過虛擬網(wǎng)卡相互聯(lián)結(jié)起來可以組成網(wǎng)絡(luò)，從而通過網(wǎng)絡(luò)相互訪問。

在虛擬機軟件中，實際存在的物理計算機稱為宿主機器，虛擬出來的計算機稱為虛擬機器。此處，將個人電腦安裝的Win7系統(tǒng)為宿主機器，通過虛擬軟件虛擬的Windows2003Server為虛擬機器。8.3服務(wù)器上安裝配置IIS\SQLServer\Filezilla8.3.1安裝