




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
全套可編輯PPT課件第1章初識Dreamweaver2020本章簡介:Dreamweaver是一款主流的“所見即所得”的網(wǎng)頁編輯制作軟件。網(wǎng)頁是網(wǎng)站基本的組成部分,利用Dreamweaver可以制作出我們想要的網(wǎng)站。本章主要講述Dreamweaver2020的基礎(chǔ)知識,包括Dreamweaver2020的工作界面、創(chuàng)建站點、管理站點文件和文件夾、管理站點和網(wǎng)頁文件頭設(shè)置。掌握Dreamweaver2020的工作界面掌握使用站點管理器、創(chuàng)建文件夾、定義新站點、創(chuàng)建和保存網(wǎng)頁掌握重命名、移動、刪除文件和文件夾掌握站點的打開、編輯、復(fù)制、刪除、導(dǎo)出和導(dǎo)入掌握關(guān)鍵字、作者、版權(quán)信息、刷新時間、說明信息等文件頭的設(shè)置課堂學習目標1.1
Dreamweaver2020的工作界面友好的開始頁面不同風格的工作界面伸縮自如的面板多文檔編輯界面新穎的“插入”面板更完整的CSS功能1.1.1友好的開始頁面啟動Dreamweaver2020,首先看到的是開始界面,用戶可在此界面中選擇新建文件的類型或打開已有的文檔等。如果不太習慣開始界面,可選擇“編輯>首選項”命令,或按Ctrl+U組合鍵,彈出“首選項”對話框,取消選中“顯示開始屏幕”復(fù)選框。單擊“應(yīng)用”按鈕,然后單擊“關(guān)閉”按鈕。這樣打開Dreamweaver2020時將不再顯示開始界面。開始頁面“首選參數(shù)”對話框1.1.2不同風格的工作界面Dreamweaver2020的工作界面相比老版本的有一些改變。若用戶想修改工作界面的風格,切換到自己熟悉的開發(fā)環(huán)境,可選擇“窗口>工作區(qū)布局”命令,彈出其子菜單,在子菜單中選擇“開發(fā)人員”或“標準”命令,即選擇其中一種風格,工作界面會發(fā)生相應(yīng)的改變。1.1.3伸縮自如的面板浮動面板按鈕縮放工作區(qū)在浮動面板的右上方單擊按鈕,可以隱藏或展開面板。如果用戶覺得工作區(qū)不夠大,可以將鼠標指針放在文檔編輯窗口右側(cè)與面板交界的框線處,當鼠標指針呈雙向箭頭時按住鼠標的左鍵并拖曳,調(diào)整工作區(qū)的大小。若用戶需要更大的工作區(qū),可以將面板隱藏。鼠標指針呈雙箭頭1.1.4多文檔編輯界面Dreamweaver2020提供了多文檔的編輯界面,將多個文檔整合在一起,方便用戶在各個文檔之間切換。單擊文檔編輯窗口上方的標簽,即可快速切換到相應(yīng)的文檔,方便同時編輯多個文檔。多文檔編輯界面1.1.5新穎的“插入”面板Dreamweaver2020的“插入”面板可以隨意與其他面板組合,為了方便操作一般會放置在菜單欄的下方?!安迦搿泵姘灏ā癏TML”“表單”“模板”“Bootstrap組件”“jQueryMobile”“jQueryUI”和“收藏夾”7個選項卡,不同功能的按鈕分門別類地放在了不同的選項卡中。在Dreamweaver2020中,“插入”面板可用菜單和選項卡2種方式顯示。如果需要菜單樣式,可用鼠標右鍵單擊“插入”面板的選項卡,在彈出的快捷菜單中選擇“顯示為菜單”命令。新穎的“插入”面板1.1.6更完整的CSS功能傳統(tǒng)的HTML語言所提供的樣式及排版功能非常有限,因此,復(fù)雜的網(wǎng)頁版面主要依靠CSS樣式來實現(xiàn)。而CSS的功能較多,語法比較復(fù)雜,需要有一個很好的工具有條不紊地整理復(fù)雜的CSS源代碼,并適時地提供輔助說明。Dreamweaver2020就提供了這樣的功能?!皩傩浴泵姘?.2創(chuàng)建站點站點管理器創(chuàng)建站點文件夾創(chuàng)建新站點創(chuàng)建和保存網(wǎng)頁1.2.1站點管理器站點管理器的主要功能包括新建站點、編輯站點、復(fù)制站點、刪除站點,以及導(dǎo)入或?qū)С稣军c。若要管理站點,必須打開“管理站點”對話框?!拔募泵姘濉白烂妗绷斜怼肮芾碚军c”面板1.2.2創(chuàng)建站點文件夾建立站點前,要先在本地計算機上規(guī)劃站點文件夾。1.2.3創(chuàng)建新站點創(chuàng)建好站點文件夾后,用戶就可以創(chuàng)建新站點了。在Dreamweaver2020中,站點通常包含兩部分,即本地站點和遠程站點。在Dreamweaver2020中創(chuàng)建Web站點,通常應(yīng)先在本地磁盤上創(chuàng)建本地站點,然后創(chuàng)建遠程站點,將網(wǎng)頁的副本上傳到遠程Web服務(wù)器上,使公眾可以訪問它們。1.2.4創(chuàng)建和保存網(wǎng)頁創(chuàng)建站點后,用戶需要創(chuàng)建網(wǎng)頁來組織網(wǎng)站要展示的內(nèi)容。為網(wǎng)頁進行合理的命名非常重要,一般網(wǎng)頁的名稱應(yīng)容易理解,能反映網(wǎng)頁的內(nèi)容。新建空白文檔“新建文檔”對話框1.3管理站點文件和文件夾重命名文件和文件夾移動文件和文件夾刪除文件和文件夾1.3.1重命名文件和文件夾修改文件名稱或文件夾名稱操作的具體步驟如下。(1)選擇“窗口>文件”命令,彈出“文件”面板,在其中選擇要重命名的文件或文件夾。(2)可以通過以下2種方法激活文件或文件夾的名稱。①單擊文件名,稍停片刻,再次單擊文件名。②在文件或文件夾圖標上單擊鼠標右鍵,在彈出的菜單中選擇“編輯>重命名”命令。(3)輸入新名稱,按Enter鍵。1.3.2移動文件和文件夾移動文件或文件夾的操作步驟如下。(1)選擇“窗口>文件”命令,彈出“文件”面板,在其中選擇要移動的文件或文件夾。(2)通過以下2種方法移動文件或文件夾。①剪切該文件或文件夾,然后將其粘貼在新位置。②將該文件或文件夾直接拖曳到新位置。(3)“文件”面板會自動刷新,這樣就可以看到該文件或文件夾出現(xiàn)在新位置上。1.3.3刪除文件和文件夾刪除文件或文件夾有以下2種方法。(1)選擇“窗口>文件”命令,彈出“文件”面板,在其中選擇要刪除的文件或文件夾,按Delete鍵刪除。(2)在要刪除的文件或文件夾上單擊鼠標右鍵,從彈出的菜單中選擇“編輯>刪除”命令。1.4管理站點打開站點編輯站點復(fù)制站點刪除站點導(dǎo)出和導(dǎo)入站點1.4.1打開站點當要修改某個網(wǎng)站的內(nèi)容時,首先要打開站點。打開站點的具體操作步驟如下。(1)啟動Dreamweaver2020。(2)選擇“窗口>文件”命令,彈出“文件”面板,展開“桌面”下拉列表,在其中選擇要打開的站點名。選擇站點打開站點1.4.2編輯站點有時用戶需要修改站點的一些設(shè)置,此時就要利用Dreamweaver2020編輯站點的功能。例如,修改站點的默認圖像文件夾的路徑。1.4.3復(fù)制站點復(fù)制站點可省去重復(fù)建立多個結(jié)構(gòu)相同站點的操作步驟,可以提高用戶的工作效率。在“管理站點”對話框中可以復(fù)制站點,其具體操作步驟如下。(1)在“管理站點”對話框中,選中要復(fù)制的站點,單擊“復(fù)制當前選定的站點”按鈕進行復(fù)制。(2)雙擊新復(fù)制的站點,彈出“站點設(shè)置對象基礎(chǔ)素材復(fù)制”對話框,在“站點名稱”文本框中可以更改新站點的名稱。1.4.4刪除站點刪除站點只是刪除Dreamweaver2020同本地站點間的關(guān)聯(lián),而本地站點包含的文件和文件夾仍然保存在本地磁盤原來的位置上。換句話說,刪除站點后,雖然站點文件夾仍保存在本地計算機中,但在Dreamweaver2020中已經(jīng)不存在相應(yīng)站點了。例如,在按下列步驟刪除站點后,在“管理站點”對話框中已沒有了該站點的名稱。在“管理站點”對話框中刪除站點的具體操作步驟如下。(1)在“管理站點”對話框中選中要刪除的站點。(2)單擊“刪除當前選定的站點”按鈕即可刪除選擇的站點。1.4.5導(dǎo)出和導(dǎo)入站點如果想要在計算機之間移動站點,或者與其他用戶共同設(shè)計站點,可通過Dreamweaver2020的導(dǎo)出和導(dǎo)入站點功能實現(xiàn)。導(dǎo)出站點功能是將站點導(dǎo)出為“.ste”格式文件,然后可在其他計算機上用導(dǎo)入站點功能將其導(dǎo)入到Dreamweaver2020中。導(dǎo)出導(dǎo)入1.5網(wǎng)頁文件頭設(shè)置插入搜索關(guān)鍵字插入作者和版權(quán)信息設(shè)置刷新時間設(shè)置說明信息1.5.1設(shè)置搜索關(guān)鍵字在Web上通過搜索引擎查找資料時,搜索引擎自動讀取Web上網(wǎng)頁中<meta></meta>標簽的內(nèi)容,所以在網(wǎng)頁中設(shè)置搜索關(guān)鍵字非常重要,它可以間接地宣傳網(wǎng)站,提高網(wǎng)站訪問量。但搜索關(guān)鍵字并不是字數(shù)越多越好,因為有些搜索引擎限制搜索關(guān)鍵字的字符數(shù)目,當超過了限制的數(shù)目時,它將忽略所有的搜索關(guān)鍵字,所以最好只使用幾個精選的關(guān)鍵字。一般情況下,關(guān)鍵字是對網(wǎng)頁的主題、內(nèi)容、風格或作者等內(nèi)容的概括。1.5.2設(shè)置作者和版權(quán)信息要設(shè)置網(wǎng)頁的作者和版權(quán)信息,可選擇“插入>Head>Meta”命令,彈出“META”對話框。在“值”文本框中輸入“/x.Copyright”,在“內(nèi)容”文本框中輸入作者姓名和版權(quán)信息,單擊“確定”按鈕完成設(shè)置。
“META”對話框1.5.3設(shè)置刷新時間要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時間,可設(shè)置文件頭部的刷新時間項,具體操作步驟如下。選擇“插入>HTML>Meta”命令,彈出“META”對話框。在“屬性”下拉列表中選擇“HTTP-equivalent”選項,在“值”文本框中輸入“refresh”,在“內(nèi)容”文本框中輸入需要的時間值,單擊“確定”按鈕完成設(shè)置?!癕ETA”對話框1.5.4設(shè)置說明信息搜索引擎也可通過讀取<meta></meta>標簽的說明內(nèi)容來查找相關(guān)信息,但說明信息主要是對網(wǎng)頁內(nèi)容的詳細說明,而搜索關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明信息的具體操作步驟如下。(1)選中文檔編輯窗口中的“代碼”視圖,將鼠標指針放在<head></head>標簽中,選擇“插入>HTML>說明”命令,彈出“說明”對話框。
(2)在“說明”對話框中設(shè)置說明信息?!癕ETA”對話框第2章文本本章簡介:在當今的“網(wǎng)絡(luò)時代”,不管網(wǎng)頁內(nèi)容多么豐富,文本自始至終都是網(wǎng)頁中最基本的元素之一。由于文本的信息量大,輸入、編輯起來方便,并且生成的文件小,容易被瀏覽器下載,不會產(chǎn)生太多的等待時間,因此掌握好文本的使用方法,對于制作網(wǎng)頁來說是基本的要求。掌握文字的輸入、連續(xù)空格的輸入掌握頁邊距、網(wǎng)頁的標題、網(wǎng)頁的默認格式的設(shè)置掌握文字的大小、顏色、字體、對齊方式和段落樣式的設(shè)置掌握項目符號、編號列表、文本縮進、日期、特殊字符和換行符的設(shè)置掌握水平線、網(wǎng)格和標尺的應(yīng)用課堂學習目標2.1輸入文本并編輯課堂案例——青山別墅網(wǎng)頁輸入文本設(shè)置文本屬性輸入連續(xù)的空格設(shè)置是否顯示不可見元素設(shè)置頁邊距設(shè)置網(wǎng)頁的標題設(shè)置網(wǎng)頁的默認格式課堂案例——機電設(shè)備網(wǎng)頁改變文本的大小改變文本的顏色改變文本的字體改變文本的對齊方式設(shè)置文本樣式設(shè)置段落格式2.1.1課堂案例—青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)置網(wǎng)頁外觀、網(wǎng)頁標題效果;使用“首選項”命令設(shè)置允許多個連續(xù)空格。效果圖2.1.2輸入文本使用Dreamweaver2020編輯網(wǎng)頁時,在文檔編輯窗口中光標默認處于顯示狀態(tài)。要添加文本,首先應(yīng)將光標移動到文檔編輯窗口中的編輯區(qū)域,然后直接輸入文本,就像在其他文本編輯器中一樣。打開一個頁面,在頁面中單擊,將光標置于其中,然后輸入文本。輸入文字后的效果圖2.1.3設(shè)置文本屬性利用“屬性”面板可以方便地修改選中文本的字體、字號、樣式、對齊方式等,以獲得預(yù)期的效果。選擇“窗口>屬性”命令,彈出“屬性”面板,在HTML和CSS的“屬性”面板中都可以設(shè)置文本的屬性?!皩傩浴泵姘?.1.4輸入連續(xù)的空格在默認狀態(tài)下,Dreamweaver2020只允許用戶輸入一個空格,要輸入連續(xù)多個空格則需要進行設(shè)置或通過特定操作才能實現(xiàn)。1.設(shè)置“首選項”對話框2.直接插入多個連續(xù)空格2.1.5設(shè)置是否顯示不可見元素在網(wǎng)頁的“設(shè)計”視圖中,有一些元素僅用來標志位置,在瀏覽器中是不可見的。例如,腳本圖標用來標志文檔正文中的JavaScript或VBScript代碼的位置,換行符圖標用來標志每個換行符<br>的位置等。在設(shè)計網(wǎng)頁時,為了快速找到這些不可見元素的位置,常常需要改變這些元素在“設(shè)計”視圖中的可見性。2.1.6設(shè)置頁邊距通常文本與紙的四周需要留有一定的距離,這個距離叫頁邊距。網(wǎng)頁設(shè)計也是如此,在默認狀態(tài)下文檔的上、下、左、右頁邊距不為0。修改網(wǎng)頁頁邊距的具體操作步驟如下。(1)選擇“文件>頁面屬性”命令,彈出“頁面屬性”對話框。(2)根據(jù)需要在對話框的“左邊距”“上邊距”“邊距寬度”和“邊距高度”數(shù)值框中輸入相應(yīng)的數(shù)值即可。“頁面屬性”對話框2.1.7設(shè)置網(wǎng)頁的標題網(wǎng)頁的標題可以提示瀏覽者所查看網(wǎng)頁的內(nèi)容,并可在瀏覽器的歷史記錄和書簽列表中標志頁面。注意,網(wǎng)頁的文件名是通過“保存文件”命令保存的網(wǎng)頁文件名稱,而網(wǎng)頁的標題是瀏覽者在瀏覽網(wǎng)頁時瀏覽器標題欄中顯示的信息。“頁面屬性”對話框2.1.8設(shè)置網(wǎng)頁的默認格式用戶在制作新網(wǎng)頁時,系統(tǒng)提供的頁面都有一些默認的屬性,如網(wǎng)頁的標題、頁邊距、文字編碼、文字顏色和超鏈接的顏色等。若需要修改網(wǎng)頁的默認格式,可選擇“文件>頁面屬性”命令,彈出“頁面屬性”對話框,在其中進行設(shè)置。“頁面屬性”對話框2.1.9課堂案例—機電設(shè)備網(wǎng)頁效果圖使用“屬性”面板,設(shè)置文字的字號、顏色及字體;使用“CSS設(shè)計器”面板,設(shè)置文字的字體、字號、顏色及行距。Dreamweaver2020提供了2種改變文本大小的方法,一種是設(shè)置文本的默認大小,另一種是設(shè)置選中文本的大小。2.1.10改變文本的大小“頁面屬性”對話框豐富的視覺色彩可以吸引網(wǎng)頁游覽者的注意力,網(wǎng)頁中的文本不僅可以是黑色,還可以顯示為其他色彩,最多時可達到16777216種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關(guān),一般建議在216種網(wǎng)頁色彩中選擇文字的顏色。2.1.11改變文本的顏色Dreamweaver2020提供了2種改變文本字體的方法,一種是設(shè)置文本的默認字體,另一種是設(shè)置選中文本的字體。2.1.12改變文本的字體設(shè)置選中文本字體設(shè)置文本默認字體2.1.13改變文本的對齊方式文本的對齊方式是指文字相對于文檔編輯窗口或瀏覽器窗口在水平方向上的對齊方式。對齊方式按鈕有以下4種。“左對齊”按鈕:使文本在瀏覽器窗口中左對齊?!熬又袑R”按鈕:使文本在瀏覽器窗口中居中對齊?!坝覍R”按鈕:使文本在瀏覽器窗口中右對齊?!皟啥藢R”按鈕:使文本在瀏覽器窗口中兩端對齊。文本樣式是指文本的外觀及顯示方式,如加粗文本、傾斜文本和文本加下劃線等。2.1.14設(shè)置文本樣式1.通過“樣式”命令設(shè)置文本樣式2.通過“屬性”面板設(shè)置文本樣式3.使用組合鍵“Ctrl+B”
快速設(shè)置文本樣式網(wǎng)頁中的段落是指描述同一主題的并且格式統(tǒng)一的一段文字。在文檔編輯窗口中,輸入一段文字后按Enter鍵,這段文字就會作為一個段落顯示在<P></P>標簽中。2.1.15設(shè)置段落格式1.應(yīng)用段落格式2.指定預(yù)格式2.2無序列表和編號列表課堂案例——電器城網(wǎng)頁設(shè)置項目符號或編號修改無序列表或編號列表設(shè)置文本縮進格式插入日期和時間插入特殊字符插入換行符2.2.1課堂案例—電器城網(wǎng)頁使用“屬性”面板中的“編號列表”按鈕,創(chuàng)建列表;使用“CSS設(shè)計器”面板,設(shè)置列表的樣式。 效果圖1.通過“無序列表”按鈕或“編號列表”按鈕設(shè)置項目符號或編號。2.通過“列表”命令設(shè)置項目符號或編號。2.2.2設(shè)置項目符號或編號設(shè)置后效果圖列表菜單2.2.3修改項目符號或編號(1)將插入點定位在要修改項目符號或編號的文本中。(2)通過以下2種方法中的一種打開“列表屬性”對話框。①單擊“屬性”面板中的“列表項目”按鈕。②選擇“編輯>列表>屬性”命令。2.2.4設(shè)置文本縮進格式設(shè)置文本縮進格式有以下3種方法。(1)在“屬性”面板中單擊“內(nèi)縮區(qū)塊”按鈕或“刪除內(nèi)縮區(qū)塊”按鈕,使段落向右移動或向左移動。(2)選擇“編輯>文本>縮進”或“編輯>文本>凸出”命令,可使段落向右移動或向左移動。(3)按Ctrl+Alt+]組合鍵或Ctrl+Alt+[組合鍵,使段落向右移動或向左移動。2.2.5插入日期和時間(1)在文檔編輯窗口中,將插入點放置在想要插入對象的位置。(2)通過以下2種方法打開“插入日期”對話框。①單擊“插入”面板“HTML”選項卡中的“日期”按鈕。②選擇“插入>HTML>日期”命令。(3)選擇相應(yīng)的日期和時間的格式,單擊“確定”按鈕完成設(shè)置。“插入日期”對話框2.2.6插入特殊字符在網(wǎng)頁中插入特殊字符,有以下2種方法。(1)選擇“插入>HTML>字符”命令,彈出其子菜單,選擇需要的字符命令。(2)單擊“插入”面板“HTML”選項卡中的“字符”展開式按鈕,彈出12個特殊字符按鈕。在其中選擇需要的特殊字符按鈕,即可插入特殊字符。2.2.7插入換行符為段落添加換行符有以下3種方法。(1)單擊“插入”面板“HTML”選項卡中的“字符”展開式按鈕,選擇“換行符”按鈕。(2)按Shift+Enter組合鍵。(3)選擇“插入>HTML>字符>換行符”命令。2.3水平線、網(wǎng)格與標尺課堂案例——藝術(shù)攝影網(wǎng)頁水平線網(wǎng)格標尺2.3.1課堂案例—藝術(shù)攝影網(wǎng)頁使用“插入>HTML>水平線”命令,在文檔中插入水平線;使用“屬性”面板,改變水平線的高度;添加代碼,改變水平線的顏色。效果圖2.3.2水平線“屬性”面板1.創(chuàng)建水平線創(chuàng)建水平線有以下2種方法。(1)單擊“插入”面板“HTML”選項卡中的“水平線”按鈕。(2)選擇“插入>HTML>水平線”命令。2.修改水平線在文檔編輯窗口中,選中水平線,選擇“窗口>屬性”命令,彈出“屬性”面板,可以根據(jù)需要對水平線的屬性進行修改。使用網(wǎng)格可以更加方便地精確地定位網(wǎng)頁元素,在網(wǎng)頁布局時網(wǎng)格也具有至關(guān)重要的作用。2.3.3網(wǎng)格1.顯示和隱藏網(wǎng)格2.設(shè)置網(wǎng)頁元素與網(wǎng)格對齊3.修改網(wǎng)格的疏密4.修改網(wǎng)格線的顏色和線型標尺顯示在文檔編輯窗口的上方和左側(cè),用以標志網(wǎng)頁元素的位置。標尺的單位分為px(像素)、英寸和cm(厘米)。2.3.4標尺1.在文檔編輯窗口中顯示標尺2.改變標尺的單位3.改變坐標原點4.重置標尺的坐標原點課堂練習——有機果蔬網(wǎng)頁使用“頁面屬性”命令,設(shè)置頁面外觀、網(wǎng)頁標題效果;使用“首選項”命令,設(shè)置允許多個連續(xù)空格;使用“CSS設(shè)計器”面板,設(shè)置文字的字體、字號和行距。
效果圖課后習題——旅行購票網(wǎng)頁使用“頁面屬性”命令,設(shè)置頁面邊距和標題;使用“CSS樣式”命令,改變文本的顏色及行距。效果圖第3章圖像和多媒體本章簡介:圖像在網(wǎng)頁中的作用是非常重要的,適當?shù)靥砑痈黝悎D像可以使網(wǎng)頁更加清晰美觀、形象生動,更能引發(fā)瀏覽者的閱讀興趣。所謂“媒體”是指信息的載體,而“多媒體”指多種媒體的綜合使用,包括文字、圖形、動畫、音頻和視頻等。在Dreamweaver2020中,用戶可以方便快捷地向網(wǎng)頁中添加多媒體文件,并對它們進行各種編輯。掌握圖像的格式掌握圖像的插入、圖像的屬性、圖像替換文字、跟蹤圖像的應(yīng)用掌握Flash動畫、FLV、Animate作品、HTML5Video、音頻和插件的插入課堂學習目標3.1圖像課堂案例——環(huán)球旅游網(wǎng)頁網(wǎng)頁中的圖像格式插入圖像設(shè)置圖像屬性給圖像添加文字說明跟蹤圖像3.1.1課堂案例—環(huán)球旅游網(wǎng)頁使用“Image”按鈕,插入圖像;使用“CSS設(shè)計器”面板,設(shè)置圖像之間的距離。效果圖3.1.2網(wǎng)頁中的圖像格式Web網(wǎng)頁中通常使用的圖像文件有JPEG、GIF、PNG3種格式,但大多數(shù)瀏覽器只支持JPEG、GIF2種圖像格式。因為要保證瀏覽者下載網(wǎng)頁的速度,所以目前網(wǎng)站設(shè)計者也主要使用JPEG和GIF這2種壓縮格式的圖像。3.1.3插入圖像要在Dreamweaver2020文檔中插入圖像,該圖像必須位于本地站點文件夾內(nèi)或遠程站點文件夾內(nèi),否則不能正確顯示,所以在建立站點時,網(wǎng)站設(shè)計者常常是先創(chuàng)建一個名叫“image”的文件夾,并將需要的圖像復(fù)制到其中。“選擇圖像源文件”對話框3.1.4設(shè)置圖像屬性插入圖像后,在“屬性”面板中顯示了該圖像的屬性。插入圖像后的“屬性”面板3.1.5給圖像添加文字說明當圖像不能在瀏覽器中正常顯示時,網(wǎng)頁中圖像的位置就變成空白區(qū)域。為了讓瀏覽者在圖像不能正常顯示時也能了解圖像的信息,可以為網(wǎng)頁中的圖像設(shè)置替換文字,即將圖像的說明文字輸入“替換”文本框中。“屬性”面板效果圖3.1.6跟蹤圖像在工程設(shè)計過程中,一般先在圖像處理軟件中勾畫出工程藍圖,然后在此基礎(chǔ)上反復(fù)修改,最終得到一幅完美的設(shè)計圖。制作網(wǎng)頁時也應(yīng)采用類似的方法,先在圖像處理軟件中繪制網(wǎng)頁的藍圖,將其添加到網(wǎng)頁的背景中,然后按設(shè)計方案添加相應(yīng)元素,等網(wǎng)頁制作完畢后,再將藍圖刪除。在Dreamweaver2020中可利用“跟蹤圖像”功能來實現(xiàn)上述網(wǎng)頁設(shè)計的方式。3.2多媒體課堂案例——綠色農(nóng)場網(wǎng)頁插入Flash動畫插入FLV視頻插入Animate作品插入HTML5視頻插入音頻插入插件3.2.1課堂案例—綠色農(nóng)場網(wǎng)頁使用“FlashSWF”按鈕,為網(wǎng)頁文檔插入Flash動畫;使用“屬性”面板,設(shè)置動畫背景為透明。效果圖3.2.2插入Flash動畫Dreamweaver2020中提供了插入Flash對象的功能,但要注意Flash動畫的格式。例如Flash源文件格式(.fla)的文件不能在瀏覽器中顯示、FlashSWF格式(.swf)的文件是Flash動畫的壓縮格式,可以在瀏覽器中顯示,所以在Dreamweaver2020中只能插入FlashSWF格式的文件,便于在Web瀏覽器上查看。3.2.3插入FLV視頻應(yīng)用Dreamweaver2020可以在網(wǎng)頁中輕松添加FLV視頻,而無須使用Flash創(chuàng)作工具。但插入的FLV視頻必須是經(jīng)過編碼的。3.2.4插入Animate作品Animate是Adobe最新出品的用于制作HTML5動畫的可視化工具,可以將其簡單地理解為HTML5版本的FlashPro。在使用Dreamweaver2020制作的網(wǎng)頁中同樣可以插入Animate制作的作品。3.2.5插入HTML5視頻Dreamweaver2020可以在網(wǎng)頁中插入HTML5視頻。HTML5視頻元素提供了一種將電影或視頻嵌入網(wǎng)頁中的標準方式?!皩傩浴泵姘?.2.6插入音頻1.插入背景音樂Dreamweaver2020的HTML代碼中提供了背景音樂<bgsound>標簽,使用該標簽可以為網(wǎng)頁添加背景音樂效果。2.插入音樂插入音樂和插入背景音樂的效果不同,插入音樂可以在頁面中看到播放器的外觀,如播放、暫停、定位和音量等按鈕。3.嵌入音樂嵌入音樂和插入音樂效果基本相同,只不過嵌入音樂播放器的外觀要比插入音樂播放器的外觀多幾個按鈕。3.2.7插入插件利用“插件”按鈕,可以在網(wǎng)頁中插入AIV、MPG、MOV、MP4等格式的視頻文件,還可以插入音頻文件。在網(wǎng)頁中插入插件的具體操作步驟如下。(1)在文檔編輯窗口的“設(shè)計”視圖中,將插入點放置在想要插入插件的位置。(2)通過以下2種方法彈出“插件”對話框,插入插件。①單擊“插入”面板“HTML”選項卡中的“插件”按鈕。②選擇“插入>HTML>插件”命令。課堂練習——拓森企業(yè)網(wǎng)頁使用“Image”按鈕插入圖像,美化頁面。效果圖課后習題——五谷雜糧網(wǎng)頁使用“FlashSWF”按鈕,插入Flash動畫效果。效果圖第4章超鏈接本章簡介:網(wǎng)站中的每個網(wǎng)頁都是通過超鏈接的形式關(guān)聯(lián)在一起的,超鏈接是網(wǎng)頁中最重要、最根本的元素之一。瀏覽者可以通過鼠標單擊網(wǎng)頁中的某個超鏈接,輕松地實現(xiàn)網(wǎng)頁之間的轉(zhuǎn)換,或下載文件、收發(fā)郵件等。本章將對超鏈接進行具體的講解。掌握超鏈接的概念掌握文本超鏈接、電子郵件超鏈接、下載文件鏈接的創(chuàng)建方法掌握圖像超鏈接、鼠標經(jīng)過圖像鏈接的創(chuàng)建方法掌握ID超鏈接、熱點鏈接的創(chuàng)建方法課堂學習目標4.1超鏈接的概念超鏈接的主要作用是將物理上無序的網(wǎng)頁組成有機的統(tǒng)一體。鏈接對象存放著對應(yīng)網(wǎng)頁或其他文件的地址。在瀏覽網(wǎng)頁時,當用戶將鼠標指針移到某些文字或圖像上時,鼠標指針會改變形狀或顏色,這是在提示用戶:此對象為鏈接對象。用戶只需單擊鏈接對象,就可完成打開鏈接的網(wǎng)頁、下載文件、打開郵件及收發(fā)郵件等操作。4.2文本超鏈接課堂案例——建筑模型網(wǎng)頁創(chuàng)建文本超鏈接設(shè)置文本超鏈接的狀態(tài)創(chuàng)建下載文件超鏈接創(chuàng)建電子郵件超鏈接4.2.1課堂案例—建筑模型網(wǎng)頁使用“插入”面板的“HTML”選項卡制作電子郵件鏈接效果;使用“屬性”面板為文字制作下載文件鏈接效果。效果圖創(chuàng)建文本超鏈接的方法非常簡單,在鏈接文本的“屬性”面板中指定鏈接文件即可。指定鏈接文件的方法有以下3種。4.2.2創(chuàng)建文本超鏈接1.直接輸入要鏈接文件的路徑和文件名。2.使用“瀏覽文件”按鈕。3.使用“指向文件”按鈕。未被訪問過的鏈接文字與被訪問過的鏈接文字在形式上應(yīng)該是有所區(qū)別的,以提示瀏覽者鏈接文字所指示的網(wǎng)頁是否已被訪問過。4.2.3設(shè)置文本超鏈接的狀態(tài)瀏覽網(wǎng)站的目的往往是查找并下載資料,網(wǎng)站中的文件下載功能可利用下載文件超鏈接來實現(xiàn)。創(chuàng)建下載文件超鏈接的步驟與創(chuàng)建文本超鏈接的類似,區(qū)別在于所鏈接的文件不是網(wǎng)頁文件而是其他文件,如EXE、ZIP等文件。創(chuàng)建下載文件鏈接的具體操作步驟如下。(1)在文檔編輯窗口中選擇需添加下載文件超鏈接的網(wǎng)頁對象。(2)在“鏈接”文本框中指定鏈接文件。(3)按F12鍵預(yù)覽網(wǎng)頁。4.2.4創(chuàng)建下載文件超鏈接網(wǎng)站一般只作為單向傳播的工具,將各網(wǎng)頁中的信息傳達給瀏覽者,但網(wǎng)站設(shè)計者可能需要接收瀏覽者的反饋信息,這可以通過讓瀏覽者給網(wǎng)站設(shè)計者發(fā)送電子郵件來實現(xiàn)。在網(wǎng)頁中創(chuàng)建電子郵件超鏈接就可以實現(xiàn)這種功能。4.2.5創(chuàng)建電子郵件超鏈接屬性面板“電子郵件鏈接”對話框4.3圖像超鏈接課堂案例——溫泉度假網(wǎng)頁創(chuàng)建圖像超鏈接創(chuàng)建鼠標指針經(jīng)過圖像超鏈接4.3.1課堂案例—溫泉度假網(wǎng)頁使用“鼠標經(jīng)過圖像”按鈕,為網(wǎng)頁添加導(dǎo)航效果;使用“鏈接”文本框,制作超鏈接效果;使用“CSS設(shè)計器”面板,控制超鏈接的邊框顯示效果。效果圖4.3.2創(chuàng)建圖像超鏈接創(chuàng)建圖像超鏈接的操作步驟如下。(1)在文檔編輯窗口中選擇圖像。(2)在“屬性”面板中,單擊“鏈接”選項右側(cè)的“瀏覽文件”按鈕,為圖像添加相對路徑的鏈接。(3)在“替換”文本框中可輸入圖像替換文字。設(shè)置圖像替換文字后,當圖像不能下載時,會在圖像的位置上顯示替換文字;當瀏覽者將鼠標指針指向圖像時,也會顯示替換文字。(4)按F12鍵預(yù)覽網(wǎng)頁的效果?!笆髽酥羔樈?jīng)過圖像”是一種常用的互動技術(shù),當鼠標指針經(jīng)過圖像時,圖像會隨之發(fā)生變化。一般來說,“鼠標指針經(jīng)過圖像”效果由2張大小相等的圖像形成,一張圖像稱為主圖像,另一張圖像稱為次圖像。主圖像是首次載入網(wǎng)頁時顯示的圖像,次圖像是當鼠標指針經(jīng)過時更換的另一張圖像?!笆髽酥羔樈?jīng)過圖像”效果經(jīng)常應(yīng)用于網(wǎng)頁中的按鈕上。4.3.3創(chuàng)建鼠標指針經(jīng)過圖像超鏈接4.4ID超鏈接課堂案例——東方木品網(wǎng)頁創(chuàng)建ID超鏈接4.4.1課堂案例—東方木品網(wǎng)頁使用“屬性”面板,創(chuàng)建ID標記;使用“鏈接”文本框,制作鼠標經(jīng)過圖像的ID超鏈接。效果圖若網(wǎng)頁的內(nèi)容很多,為了尋找所需內(nèi)容,瀏覽者往往需要拖曳滾動條進行查看,非常不方便。Dreamweaver2020提供了ID超鏈接功能,可用于快速定位到網(wǎng)頁的不同位置。4.4.2創(chuàng)建ID超鏈接1.創(chuàng)建ID標記2.建立ID超鏈接4.5熱點超鏈接課堂案例——恒選地產(chǎn)網(wǎng)頁創(chuàng)建熱點超鏈接4.5.1課堂案例——恒選地產(chǎn)網(wǎng)頁使用熱點按鈕,為圖像添加熱點;使用“屬性”面板,為熱點創(chuàng)建超鏈接。效果圖4.5.2創(chuàng)建熱點超鏈接創(chuàng)建熱點超鏈接的具體操作步驟如下。(1)選取一張圖片,在“屬性”面板的“地圖”項下方單擊熱點按鈕。(2)將鼠標指針放在圖片上,當鼠標指針變?yōu)槭中螘r,在圖片上按住鼠標左鍵并拖曳,創(chuàng)建相應(yīng)形狀的淡綠色熱點。如果圖片上有多個熱點,可通過“指針熱點工具”按鈕選擇不同的熱點,并通過控制點調(diào)整熱點的大小。利用“圓形熱點工具”按鈕,建立多個圓形熱點。(3)在“鏈接”文本框中輸入要鏈接的網(wǎng)頁地址,在“替換”文本框中輸入當鼠標指針指向熱點時所顯示的替換文字。通過熱點功能,用戶可以在圖片的任何地方做一個鏈接。反復(fù)操作,就可以在一張圖片上劃分很多熱點功能,并為每一個熱點設(shè)置一個鏈接,從而實現(xiàn)在一張圖片不同位置上單擊鼠標左鍵鏈接到不同頁面的效果。(4)按F12鍵預(yù)覽網(wǎng)頁的效果。課堂練習——創(chuàng)意設(shè)計網(wǎng)頁使用“電子郵件鏈接”按鈕,制作電子郵件超鏈接;使用“屬性”面板,為文字制作下載文件超鏈接;使用“頁面屬性”命令,改變超鏈接的顯示效果。效果圖課后習題——建筑設(shè)計網(wǎng)頁使用“鼠標經(jīng)過圖像”按鈕,制作鼠標指針經(jīng)過圖像的圖像變換效果。效果圖第5章表格本章簡介:Dreamweaver2020的表格是網(wǎng)頁設(shè)計中一個非常有用的工具。它不僅可以將相關(guān)數(shù)據(jù)有序地組織在一起,還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置,使得頁面在形式上既豐富多彩又條理清楚,在組織上井然有序而不顯單調(diào)。使用表格進行頁面布局的最大好處之一是,即使瀏覽者改變了計算機顯示器的分辨率,也不會影響網(wǎng)頁的瀏覽效果。因此,表格是網(wǎng)站設(shè)計人員必須掌握的工具。表格運用得熟練與否,是劃分網(wǎng)站專業(yè)制作人士和業(yè)余愛好者的一個重要標準。
掌握表格的組成和插入方法掌握表格元素的屬性設(shè)置掌握在表格中輸入文字、插入其他網(wǎng)頁元素掌握復(fù)制、粘貼表格的應(yīng)用掌握刪除行或列、縮放表格的應(yīng)用掌握單元格的合并和拆分掌握表格數(shù)據(jù)的導(dǎo)入、導(dǎo)出掌握表格數(shù)據(jù)排序掌握表格的嵌套課堂學習目標5.1表格的簡單操作課堂案例——布藝沙發(fā)網(wǎng)頁表格的組成插入表格表格各元素的屬性在表格中插入內(nèi)容選擇表格元素復(fù)制、剪切、粘貼表格清除表格內(nèi)容和刪除行或列縮放表格合并和拆分單元格增加表格的行和列5.1.1課堂案例—布藝沙發(fā)網(wǎng)頁使用“頁面屬性”命令,設(shè)置頁面邊距和網(wǎng)頁標題;使用“Table”按鈕,插入表格;使用“Image”按鈕,插入圖像;使用“CSS設(shè)計器”面板,控制圖像的間距。
效果圖5.1.2表格的組成表格中包含行、列、單元格、表格標題等元素。單元格表格的標題行列效果圖5.1.3插入表格在Dreamweaver2020中插入表格,是有效組織數(shù)據(jù)的最佳手段之一。插入表格的具體操作步驟如下。(1)在文檔編輯窗口中,將插入點放到合適的位置。(2)通過以下3種方法彈出“Table”對話框。(3)根據(jù)需要設(shè)置新建表格的行、列數(shù)等,單擊“確定”按鈕完成新建表格的設(shè)置。①選擇“插入>Table”命令。②按Ctrl+Alt+T組合鍵。③單擊“插入”面板“HTML”選項卡中的“Table”按鈕。5.1.4表格元素的屬性插入表格后,通過選擇不同的表格對象,可以在“屬性”面板中看到它們的各項參數(shù),修改這些參數(shù)可以得到不同風格的表格。表格的“屬性”面板單元格、行、列的“屬性”面板5.1.5在表格中插入內(nèi)容建立表格后,可以在表格中添加各種網(wǎng)頁元素,如文本、圖像和表格等。在表格中添加元素的操作非常簡單,只需根據(jù)設(shè)計要求選定單元格,然后插入網(wǎng)頁元素即可。一般當表格中插入內(nèi)容后,表格的尺寸會隨內(nèi)容的尺寸自動調(diào)整。當然,還可以利用單元格的屬性來調(diào)整其內(nèi)部元素的對齊方式和單元格的大小等。1.輸入文本2.插入其他網(wǎng)頁元素5.1.6選擇表格元素表格中的元素需要先選中然后才能對其進行操作??梢赃x擇整個表格、多行或多列,也可以選擇一個或多個單元格。1.選擇整個表格2.選擇行或列3.選擇單元格4.選擇一個矩形區(qū)域5.選擇不相鄰的單元格5.1.7復(fù)制、剪切、粘貼表格在Dreamweaver2020中復(fù)制表格的操作如同在Word中一樣,可以對表格中的多個單元格進行復(fù)制、剪切、粘貼操作,并保留原單元格的格式,也可以僅對單元格的內(nèi)容進行操作。1.復(fù)制單元格2.剪切單元格3.粘貼單元格4.粘貼操作的幾點說明5.1.8清除表格內(nèi)容和刪除行或列刪除表格的操作包括刪除行或列,以及清除表格內(nèi)容。1.清除表格內(nèi)容2.刪除行或列5.1.9縮放表格創(chuàng)建表格后,可根據(jù)需要調(diào)整表格、行和列的大小。1.縮放表格2.修改行或列的大小5.1.10合并和拆分單元格有的表格項需要幾行或幾列來說明,這時需要將多個單元格合并,生成一個跨多個列或行的單元格。1.合并單元格2.拆分單元格5.1.11增加表格的行和列如果想增加網(wǎng)頁中表格的內(nèi)容,不需要重新插入新表格,通過選擇“編輯>表格”中的相應(yīng)子菜單命令,添加行或列,即可加入新的內(nèi)容。5.2表格的復(fù)雜操作課堂案例——典藏博物館網(wǎng)頁導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)表格數(shù)據(jù)排序5.2.1課堂案例—典藏博物館網(wǎng)頁使用“表格式數(shù)據(jù)”命令,導(dǎo)入外部表格式數(shù)據(jù);使用“屬性”面板,改變單元格的寬度、高度和對齊方式;使用“CSS設(shè)計器”面板,控制文字的大小和顏色;使用“排序表格”命令,對表格數(shù)據(jù)進行排序。效果圖在Dreamweaver2020中,可以將一個網(wǎng)頁中的表格數(shù)據(jù)導(dǎo)出為文件或在一個網(wǎng)頁中導(dǎo)入其他表格數(shù)據(jù)。導(dǎo)出的表格文件還可以作為文本導(dǎo)入Word文檔中。5.2.2導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)1.將網(wǎng)頁中的表格導(dǎo)出2.在其他網(wǎng)頁中導(dǎo)入表格數(shù)據(jù)3.在Word文檔中導(dǎo)入表格數(shù)據(jù)日常工作中,網(wǎng)站設(shè)計者常常需要對無序的表格數(shù)據(jù)進行排序,以便瀏覽者可以快速找到所需的數(shù)據(jù)。Dreamweaver2020的表格數(shù)據(jù)排序功能可以為設(shè)計者解決這一難題。將插入點放到要排序的表格中,然后選擇“編輯>表格>排序表格”命令,彈出“排序表格”對話框。根據(jù)需要設(shè)置相應(yīng)選項,單擊“應(yīng)用”或“確定”按鈕完成設(shè)置。5.2.3表格數(shù)據(jù)排序“排序表格”對話框當一個表格無法滿足對網(wǎng)頁元素的定位時,需要在表格的一個單元格中繼續(xù)插入表格,這叫作表格的嵌套,單元格中的表格即內(nèi)嵌入式表格。通過內(nèi)嵌入式表格可以將一個單元格再分成許多行和列,而且可以無限地插入內(nèi)嵌入式表格。但是內(nèi)嵌入式表格越多,瀏覽時下載頁面的時間越長,因此,內(nèi)嵌入式的表格最好不超過3層。5.3表格的嵌套課堂練習——風季租車網(wǎng)頁使用“Table”按鈕,插入表格進行布局;使用“Image”按鈕,插入圖像;使用“CSS設(shè)計器”面板,為單元格添加背景圖像并控制文字大小、顏色。
效果圖課后習題——綠色糧倉網(wǎng)頁使用“表格式數(shù)據(jù)”命令,導(dǎo)入外部表格數(shù)據(jù);使用“排序表格”命令,將表格的數(shù)據(jù)排序。效果圖第6章ASP本章簡介:本章主要介紹ASP動態(tài)網(wǎng)頁基礎(chǔ)和內(nèi)置對象,包括ASP服務(wù)器的安裝、ASP語法基礎(chǔ)、數(shù)組的創(chuàng)建與應(yīng)用及流程控制語句等。通過對本章的學習,讀者可以掌握ASP的基本操作。掌握ASP服務(wù)器的運行環(huán)境、安裝IIS的方法掌握ASP語法基礎(chǔ)、數(shù)組的創(chuàng)建與應(yīng)用的方法掌握VBScript選擇和循環(huán)語句的方法掌握Request請求對象和Response響應(yīng)對象的方法掌握Server服務(wù)對象的使用方法課堂學習目標6.1ASP動態(tài)網(wǎng)頁基礎(chǔ)課堂案例——節(jié)能環(huán)保網(wǎng)頁ASP服務(wù)器的安裝ASP語法基礎(chǔ)數(shù)組的創(chuàng)建與應(yīng)用流程控制語句6.1.1課堂案例—節(jié)能環(huán)保網(wǎng)頁使用“拆分”按鈕和“設(shè)計”按鈕,切換視圖;使用函數(shù)Now()顯示當前系統(tǒng)時間。 效果圖6.1.2ASP服務(wù)器的安裝ASP是一種服務(wù)器端腳本編寫環(huán)境,其主要功能是把腳本語言、HTML、組件和Web數(shù)據(jù)庫訪問功能有機地結(jié)合在一起,形成一個能在服務(wù)器端運行的應(yīng)用程序,該應(yīng)用程序可根據(jù)來自瀏覽器端的請求生成相應(yīng)的HTML文檔并回送給瀏覽器。使用ASP可以創(chuàng)建以HTML網(wǎng)頁作為用戶界面,并能夠?qū)?shù)據(jù)庫進行交互的Web應(yīng)用程序。1.ASP的運行環(huán)境2.安裝IIS6.1.3ASP語法基礎(chǔ)1.ASP文件結(jié)構(gòu)ASP文件是以.asp為擴展名的。2.聲明腳本語言在編寫ASP程序時,可以聲明ASP文件所使用的腳本語言,以便Web服務(wù)器知道ASP文件是使用何種腳本語言來編寫程序的。3.ASP與HTML在ASP網(wǎng)頁中,ASP程序包含在“<%”和“%>”之間,并在瀏覽器中打開網(wǎng)頁時產(chǎn)生動態(tài)內(nèi)容。它與HTML標簽互相協(xié)作,構(gòu)成動態(tài)網(wǎng)頁。ASP程序可以出現(xiàn)在HTML文件中的任意位置,在ASP程序中也可以嵌入HTML標簽。6.1.4數(shù)組的創(chuàng)建與應(yīng)用數(shù)組是有序數(shù)據(jù)的集合。數(shù)組中的元素都屬于同一個數(shù)據(jù)類型,用數(shù)組名和下標可以唯一地確定數(shù)組中的元素,下標放在緊跟數(shù)組名之后的括號中。有一個下標的數(shù)組稱為一維數(shù)組,有兩個下標的數(shù)組稱為二維數(shù)組,以此類推。數(shù)組的最大維數(shù)為60。1.創(chuàng)建數(shù)組在VBScript中,數(shù)組有2種類型:固定數(shù)組和動態(tài)數(shù)組。2.應(yīng)用數(shù)組函數(shù)數(shù)組函數(shù)用于數(shù)組的操作。數(shù)組函數(shù)主要包括LBound函數(shù)、UBound函數(shù)、Split函數(shù)和Erase函數(shù)。6.1.5流程控制語句在VBScript語言中,有順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種基本程序流程控制結(jié)構(gòu)。順序結(jié)構(gòu)是程序設(shè)計中最基本的結(jié)構(gòu),在程序運行時,編譯器總是按照先后順序執(zhí)行程序中的所有命令。通過選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)可以改變代碼的執(zhí)行順序。本節(jié)介紹VBScript中的選擇語句和循環(huán)語句。6.2ASP內(nèi)置對象課堂案例——乒乓球俱樂部網(wǎng)頁Request對象Response對象Session對象Application對象Server對象ObjectContext對象6.2.1課堂案例—乒乓球俱樂部網(wǎng)頁在“代碼顯示器”窗口輸出代碼;使用Request對象獲取表單數(shù)據(jù)。效果圖6.2.2Request對象在客戶端/服務(wù)器結(jié)構(gòu)中,當客戶端Web頁面向網(wǎng)站服務(wù)器傳遞信息時,ASP通過Request對象能夠獲取用戶提交的全部信息。信息包括客戶端用戶的HTTP變量在網(wǎng)站服務(wù)器端存放的客戶端瀏覽器的Cookies數(shù)據(jù)、附于URL之后的字符串信息、頁面中表單傳輸?shù)臄?shù)據(jù)以及客戶端的認證信息等。6.2.3Response對象Response對象用于從服務(wù)器向用戶發(fā)送信息。可以使用Response對象控發(fā)送給用戶的信息,包括直接發(fā)送信息給瀏覽器、重定向瀏覽器到另一個URL或設(shè)置Cookies的值。Response對象提供了標識服務(wù)器和性能的HTTP變量、發(fā)送給瀏覽器的信息和任何將在Cookies中存儲的信息。Response對象只有一個集合——Cookies,該集合用于設(shè)置希望放置在客戶端上的Cookies的值。Cookies集合用于當前響應(yīng),將Cookies值發(fā)送到客戶端。該集合訪問方式為只寫。6.2.4Session對象用戶可以使用Session對象存儲特定會話所需的信息。這樣,當在Web網(wǎng)頁之間跳轉(zhuǎn)時,存儲在Session對象中的變量將不會丟失,而是在用戶會話中一直存在。當用戶請求訪問Web網(wǎng)頁時,如果還沒有用戶會話,則Web服務(wù)器將自動創(chuàng)建一個Session對象。當某會話過期或被舍棄后,Web服務(wù)器將終止該會話。6.2.5Application對象ASP程序是在Web服務(wù)器上執(zhí)行的,在Web站點中創(chuàng)建一個基于ASP的應(yīng)用程序之后,可以通過Application對象在ASP應(yīng)用程序的所有用戶之間共享信息。也就是說,Application對象中包含的數(shù)據(jù)可以在整個Web站點中被所有用戶使用,并且可以在網(wǎng)站運行期間持久保存。用Application對象可以實現(xiàn)統(tǒng)計網(wǎng)站的在線人數(shù)、創(chuàng)建多用戶游戲以及多用戶聊天室等功能。6.2.6Server對象Server對象的作用是訪問有關(guān)服務(wù)器的屬性和方法,大多數(shù)屬性和方法是作為組件實例提供的。6.2.7ObjectContext對象ObjectContext對象是一個以組件為主的事務(wù)處理對象,可以保證事務(wù)的成功完成。系統(tǒng)允許用戶在網(wǎng)頁中直接配合MicrosoftTransactionServer(微軟事務(wù)服務(wù)器MTS)使用ObjectContext對象,從而可以高效率開發(fā)或管理Web服務(wù)器應(yīng)用程序。事務(wù)是一個操作序列,這些序列可以視為一個整體。如果其中的某一個步驟沒有完成,所有與該步驟相關(guān)的內(nèi)容都將取消。事務(wù)用于對數(shù)據(jù)庫進行可靠的操作。課堂練習——挖掘機網(wǎng)頁
使用“Form集合”命令,獲取表單數(shù)據(jù)。效果圖課后習題——建筑信息咨詢網(wǎng)頁使用Response對象的Write()方法,向瀏覽器端輸出標簽,顯示日期。效果圖第7章CSS本章簡介:CSS(CascadingStyleSheets,串聯(lián)樣式表)是萬維網(wǎng)聯(lián)盟(WorldWideWebConsortium,W3C)設(shè)定為標準的輔助HTML設(shè)計的新特性,能保持整個HTML網(wǎng)站的統(tǒng)一外觀。CSS功能強大、操作靈活,用CSS改變一個文件就可以改變很多網(wǎng)頁的外觀,而且其個性化的頁面表現(xiàn)效果更能吸引訪問者。Dreamweaver2020提供了功能復(fù)雜、使用方便的CSS,方便網(wǎng)站設(shè)計師制作個性化網(wǎng)頁。了解CSS的概念掌握CSS設(shè)計器面板和樣式類型的應(yīng)用掌握CSS樣式的創(chuàng)建及應(yīng)用掌握編輯樣式的方法掌握CSS樣式的屬性掌握CSS過渡效果的應(yīng)用課堂學習目標7.1CSS的概念CSS一般譯為“層疊樣式表”或“串聯(lián)樣式表”。CSS對HTML3.2之前版本的語法進行了變革,將某些HTML標簽屬性簡化。比如要將一段文字的大小變成36px,在HTML3.2中要寫成“<p><fontsize="36">文字的大小</font></p>”,標簽的層層嵌套使HTML程序很臃腫;而用CSS,寫成“<pstyle="font-size:36px">文字的大小</p>”即可。CSS使用HTML格式的代碼,瀏覽器處理起來速度比較快??梢哉fCSS是HTML的一部分,它將對象引入HTML中,可以通過腳本程序調(diào)用和改變對象的屬性,從而產(chǎn)生動態(tài)效果。比如,當鼠標指針放到文字上時,文字變大,對應(yīng)的CSS代碼為<ponMouseOver="className='aa'">動態(tài)文字</p>。7.2CSS樣式“CSS設(shè)計器”面板CSS樣式的類型7.2.1“CSS設(shè)計器”面板使用“CSS設(shè)計器”面板可以創(chuàng)建、編輯和刪除CSS樣式,并且可以將外部樣式表附加到文檔中。“CSS設(shè)計器”面板1.打開“CSS設(shè)計器”面板2.CSS的功能7.2.2CSS樣式的類型CSS樣式可分為類選擇器、標簽選擇器、ID選擇器、內(nèi)聯(lián)樣式、復(fù)合選擇器等幾種形式。同級別聲明嵌套式聲明7.3樣式的創(chuàng)建與應(yīng)用創(chuàng)建CSS樣式應(yīng)用CSS樣式創(chuàng)建和附加外部樣式7.3.1創(chuàng)建CSS樣式使用“CSS設(shè)計器”面板可以創(chuàng)建類選擇器、標簽選擇器、ID選擇器和復(fù)合選擇器等CSS樣式。7.3.2應(yīng)用CSS樣式創(chuàng)建自定義樣式后,還要為不同的網(wǎng)頁元素應(yīng)用不同類型的樣式,其具體操作步驟如下。(1)在文檔編輯窗口中選擇網(wǎng)頁元素。(2)根據(jù)選擇器類型的不同應(yīng)用方法不同。7.3.3創(chuàng)建和附加外部樣式如果不同網(wǎng)頁的不同網(wǎng)頁元素需要同一樣式時,可通過附加外部樣式來實現(xiàn)。首先創(chuàng)建一個外部樣式,然后在不同網(wǎng)頁的不同HTML元素中附加定義好的外部樣式即可。1.創(chuàng)建外部樣式2.附加外部樣式7.4編輯樣式網(wǎng)站設(shè)計者有時需要修改應(yīng)用于文檔的內(nèi)部樣式和外部樣式,如果修改內(nèi)部樣式,系統(tǒng)會自動重新設(shè)置受它控制的所有HTML對象的格式;如果修改外部樣式文件,系統(tǒng)會自動重新設(shè)置與它鏈接的所有HTML文檔。7.5CSS樣式的屬性
課堂案例——山地車網(wǎng)頁布局屬性文本屬性邊框?qū)傩员尘皩傩?.5.1課堂案例——山地車網(wǎng)頁使用“Table”按鈕,插入表格;使用“CSS設(shè)計器”面板,設(shè)置導(dǎo)航按鈕的鼠標指針經(jīng)過變化效果。效果圖7.5.2布局屬性“布局”選項組用于控制網(wǎng)頁中塊元素的大小、邊距、填充和位置屬性等。7.5.3文本屬性“文本”選項組用于控制網(wǎng)頁中文字的字體、字號、顏色、行距、縮進、對齊、陰影和列表等屬性。7.5.4邊框?qū)傩浴斑吙颉边x項組用于控制塊元素的邊框粗細、樣式、顏色及圓角等。7.5.5背景屬性“背景”選項組用于在網(wǎng)頁元素后加入背景圖像或背景顏色等。7.6CSS過渡效果課堂案例——羽毛球運動網(wǎng)頁“CSS過渡效果”面板創(chuàng)建CSS過渡效果7.6.1課堂案例——羽毛球運動網(wǎng)頁使用“CSS設(shè)計器”面板,設(shè)置文字的字體、顏色;使用“CSS過渡效果”面板,設(shè)置文字的變色效果。效果圖7.6.2“CSS過渡效果”面板在“CSS過渡效果”面板中可以新建、刪除和編輯CSS過渡效果。7.6.3創(chuàng)建CSS過渡效果在創(chuàng)建CSS過渡效果時,需要為元素指定過渡效果類。如果在創(chuàng)建效果類之前已選擇元素,則過渡效果類會自動應(yīng)用于選定的元素。課堂練習——電商網(wǎng)頁使用“CSS設(shè)計器”面板,設(shè)置文字的字號、顏色及行距等。效果圖課后習題——鮮花速遞網(wǎng)頁效果圖使用“CSS設(shè)計器”面板,設(shè)置文字的字體、顏色及字號;使用“CSS過渡效果”面板,為文字添加陰影效果。第8章模板和庫本章簡介:制作網(wǎng)站的時候,為了保持網(wǎng)站中各網(wǎng)頁風格的統(tǒng)一,需要在每個網(wǎng)頁中制作一些相同的內(nèi)容,如相同的導(dǎo)航條、圖標等。網(wǎng)站設(shè)計初學者可能需要花費大量的時間和精力在這些重復(fù)性的工作上。其實為了提高設(shè)計制作人員的工作效率,Dreamweaver2020提供了模板和庫功能,利用它們,即可從這些重復(fù)性工作中解脫出來。掌握“資源”面板的使用方法掌握創(chuàng)建模板、可編輯區(qū)域、重復(fù)區(qū)域、重復(fù)表格的創(chuàng)建方法掌握模板的重命名、修改模板文件、刪除模板文件和用模板更新的方法掌握如何創(chuàng)建庫文件掌握重命名、刪除、修改和更新庫項目的方法課堂學習目標8.1“資源”面板“資源”面板用于管理和使用制作網(wǎng)站的各種元素,如圖像或視頻文件等。選擇“窗口>資源”命令,即可彈出“資源”面板。
“資源”面板課堂案例——時尚前沿網(wǎng)頁創(chuàng)建模板定義和取消可編輯區(qū)域創(chuàng)建基于模板的網(wǎng)頁管理模板8.2模板
8.2.1課堂案例—時尚前沿網(wǎng)頁使用“創(chuàng)建模板”按鈕,創(chuàng)建模板;使用“可編輯區(qū)域”和“重復(fù)區(qū)域”按鈕,制作可編輯區(qū)域和重復(fù)可編輯區(qū)域。效果圖8.2.2創(chuàng)建模板在Dreamweaver2020中創(chuàng)建模板非常容易。當用戶創(chuàng)建模板之后,Dreamweaver2020會自動把模板存儲在站點的本地根目錄下的“Templates”子文件夾中,文件擴展名為.dwt。如果此文件夾不存在,當存儲一個新模板時,Dreamweaver2020會自動生成此子文件夾。1.創(chuàng)建空白模板2.將現(xiàn)有文檔存為模板8.2.3定義和取消可編輯區(qū)域創(chuàng)建模板后,網(wǎng)站設(shè)計者可能還需要對模板的內(nèi)容進行編輯,這時可以指定模板中哪些內(nèi)容是可以編輯的,哪些內(nèi)容是不可以編輯的。模板的不可編輯區(qū)域是指基于模板創(chuàng)建的網(wǎng)頁中固定不變的元素;可編輯模板區(qū)域是指基于模板創(chuàng)建的網(wǎng)頁中用戶編輯修改的區(qū)域。當創(chuàng)建一個模板或?qū)⒁粋€網(wǎng)頁另存為模板時,Dreamweaver2020默認將所有區(qū)域標志為鎖定,因此設(shè)計者要根據(jù)具體要求定義和修改模板的可編輯區(qū)域。1.對已有的模板進行修改2.定義可編輯區(qū)域3.定義可編輯的重復(fù)區(qū)域4.定義可編輯的重復(fù)表格5.取消可編輯區(qū)域標記8.2.4創(chuàng)建基于模板的網(wǎng)頁創(chuàng)建基于模板的網(wǎng)頁有2種方法,一是使用“新建”命令創(chuàng)建基于模板的新文檔;二是利用“資源”面板中的模板來創(chuàng)建基于模板的網(wǎng)頁。8.2.5管理模板創(chuàng)建模板后可以重命名模板文件、修改模板文件和刪除模板文件。8.3庫課堂案例——品茗茶業(yè)網(wǎng)頁創(chuàng)建庫項目向頁面添加庫項目管理庫項目8.3.1課堂案例—品茗茶業(yè)網(wǎng)頁使用“庫”面板,添加庫項目;使用注冊的庫項目,制作網(wǎng)頁文檔;使用“CSS設(shè)計器”面板,更改文本的顏色。效果圖8.3.2創(chuàng)建庫項目庫項目可以包含文檔<body></body>部分中的任意元素,包括文本、表格、表單、JavaApplet、插件、ActiveX元素、導(dǎo)航條和圖像等。庫項目只是對網(wǎng)頁元素的引用,原始文件必須保存在指定的位置。1.基于選定內(nèi)容創(chuàng)建庫項目2.創(chuàng)建空白庫項目8.3.3向頁面添加庫項目當向頁面添加庫項目時,應(yīng)把實際內(nèi)容以及對該庫項目的引用一起插入到文檔中。此時,無須提供原項目就可以正常顯示。在頁面中插入庫項目的具體操作步驟如下。(1)將插入點放在文檔編輯窗口中的合適位置。(2)選擇“窗口>資源”命令,彈出“資源”面板。單擊“庫”按鈕,進入“庫”面板。將庫項目插入到網(wǎng)頁中。8.3.4管理庫項目當修改庫項目時,會同時更新使用該項目的所有文檔。如果選擇不更新,那么文檔將不會更新但仍保持與庫項目的關(guān)聯(lián),可以在以后進行更新。1.重命名庫項目2.刪除庫項目3.重新創(chuàng)建已刪除的庫項目4.修改庫項目5.用最新庫項目更新課堂練習——游天下網(wǎng)頁使用“創(chuàng)建模板”按鈕,創(chuàng)建模板;使用“可編輯區(qū)域”按鈕和“重復(fù)區(qū)域”按鈕,制作可編輯區(qū)域和可編輯的重復(fù)區(qū)域。效果圖課后習題——婚禮策劃網(wǎng)頁使用“庫”面板添加庫項目;使用注冊的庫項目制作網(wǎng)頁文檔。效果圖第9章表單本章簡介:隨著網(wǎng)絡(luò)的普及,越來越多的人在網(wǎng)上擁有了自己的個人網(wǎng)站。一般情況下,個人網(wǎng)站的設(shè)計者除了想宣傳自己的相關(guān)內(nèi)容外,還希望收到他人的反饋信息。表單為網(wǎng)站設(shè)計者提供了通過網(wǎng)絡(luò)接收用戶數(shù)據(jù)的平臺,如注冊會員頁、網(wǎng)上訂貨頁、檢索頁等,都是通過表單來收集用戶信息。因此,表單是網(wǎng)站管理者與瀏覽者間溝通的橋梁。掌握表單的使用方法掌握單行文本域、多行文本域和密碼文本域的創(chuàng)建方法掌握單選按鈕、單選按鈕組、復(fù)選框和復(fù)選框組的創(chuàng)建方法掌握下拉列表和滾動列表的創(chuàng)建方法掌握文件域、圖像按鈕和普通按鈕的創(chuàng)建方法掌握電子郵件文本域、URL文本域、Tel文本域、搜索文本域、數(shù)字文本域、范圍文本域和顏色的插入方法掌握日期、時間類表單的插入方法課堂學習目標9.1表單課堂案例——用戶登錄網(wǎng)頁創(chuàng)建表單表單的屬性文本域9.1.1課堂案例—用戶登錄網(wǎng)頁使用“表單”按鈕,插入表單;使用“Table”按鈕,插入表格;使用表單中的“文本”按鈕,插入單行文本域;使用表單中的“密碼”按鈕,插入密碼文本域;使用“屬性”面板設(shè)置表格、單行文本域、密碼文本域的屬性。效果圖9.1.2創(chuàng)建表單表單是一個“容器”,用來存放表單對象,并負責將表單對象的值提交給服務(wù)器端的某個程序處理,所以在添加文本域、按鈕等表單對象之前,要先創(chuàng)建表單。 在文檔中插入表單的具體操作步驟如下。(1)在文檔編輯窗口中,將光標置入到希望插入表單的位置。(2)彈出“表單”命令,文檔編輯窗口中出現(xiàn)一個紅色的虛輪廓線用來指示表單域。“表單”效果圖9.1.3表單的屬性在文檔編輯窗口中選擇表單,“屬性”面板中出現(xiàn)表單屬性。表單“屬性”面板9.1.4文本域制作網(wǎng)頁時通常使用表單的文本域來接收用戶輸入的信息,文本域包括單行文本域、多行文本域、密碼文本域3種。一般情況下,當用戶輸入較少的信息時,使用單行文本域接收;當用戶輸入較多的信息時,使用多行文本域接收;當用戶輸入密碼等保密信息時,使用密碼文本域接收。9.2單選按鈕和復(fù)選框課堂案例——傳統(tǒng)文化網(wǎng)頁單選按鈕單選按鈕組復(fù)選框9.2.1課堂案例—傳統(tǒng)文化網(wǎng)頁使用“單選按鈕”按鈕,插入單選按鈕;使用“復(fù)選框”按鈕,插入復(fù)選框。效果圖9.2.2單選按鈕為了使單選按鈕的布局更加合理,通常逐個插入單選按鈕。若要在表單域中插入單選按鈕,先將光標放置在表單內(nèi)需要插入單選按鈕的位置,然后插入單選按鈕?!皢芜x按鈕”效果圖9.2.3單選按鈕組先將光標放在表單輪廓內(nèi)需要插入單選按鈕組的位置,然后打開“單選按鈕組”對話框。打開“單選按鈕組”對話框有以下2種方法。單擊“插入”面板“表單”選項卡中的“單選按鈕組”按鈕。選擇“插入>表單>單選按鈕組”命令?!皢芜x按鈕組”效果圖“單選按鈕組”對話框9.2.4復(fù)選框為了使復(fù)選框的布局更加合理,通常逐個插入復(fù)選框。若要在表單域中插入復(fù)選框,先將光標放在表單內(nèi)需要插入復(fù)選框的位置,然后插入復(fù)選框?!皬?fù)選框”效果圖9.3下拉列表、滾動列表、文件域和按鈕課堂案例——健康測試網(wǎng)頁創(chuàng)建下拉列表和滾動列表課堂案例——網(wǎng)上營業(yè)廳網(wǎng)頁創(chuàng)建文件域插入圖像按鈕插入普通按鈕插入“提交”按鈕插入“重置”按鈕9.3.1課堂案例—健康測試網(wǎng)頁使用“選擇”按鈕,插入下拉菜單;使用“屬性”面板,設(shè)置下拉列表的屬性。效果圖1.插入下拉列表2.插入滾動列表9.3.2創(chuàng)建下拉列表和滾動列表“下拉菜單”效果圖“滾動列表”效果圖9.3.3課堂案例——網(wǎng)上營業(yè)廳網(wǎng)頁使用“圖像按鈕”,插入圖像按鈕。效果圖9.3.4創(chuàng)建文件域網(wǎng)頁中要實現(xiàn)訪問者上傳文件的功能,需要在表單中插入文件域。文件域的外觀與其他文本域類似,只是文件域還包含一個“瀏覽”按鈕。訪問者可以手動輸入要上傳的文件路徑,也可以使用“瀏覽”按鈕定位并選擇該文件。若要在表單域中插入文件域,則先將光標放在表單內(nèi)需要插入文件域的位置,然后插入文件域?!拔募颉毙Ч麍D9.3.5插入圖像按鈕Dreamweaver2020默認的按鈕樣式比較死板,為了設(shè)計需要,可使用自定義的圖像代替按鈕?!斑x擇圖像源文件”對話框9.3.6插入普通按鈕按鈕的作用是控制表單的操作。一般情況下,表單中設(shè)有“提交”按鈕、“重置”按鈕和普通按鈕等,瀏覽者在網(wǎng)上申請QQ、郵箱或會員注冊時會見到。Dreamweaver2020將按鈕分為3種類型,即按鈕、“提交”按鈕和“重置”按鈕。其中,按鈕元素需要制作者指定單擊該按鈕時要執(zhí)行的操作,例如添加一個JavaScript腳本,使得瀏覽者單擊該按鈕時打開另一個頁面?!疤峤话粹o”效果圖按鈕“屬性”面板9.3.7插入“提交”按鈕“提交”按鈕的作用是,在用戶單擊該按鈕時將表單數(shù)據(jù)內(nèi)容提交到表單域的Action屬性中指定的處理程序中進行處理。若要在表單域中插入“提交”按鈕,先將光標放在表單輪廓內(nèi)需要插入“提交”按鈕的位置,然后插入“提交”按鈕。“提交”按鈕“屬性”面板9.3.8插入“重置”按鈕“重置”按鈕的作用是,在用戶單擊該按鈕時將清除表單中所做的設(shè)置,恢復(fù)為默認的設(shè)置內(nèi)容。若要在表單域中插入“重置”按鈕,先將光標放在表單輪廓內(nèi)需要插入“重置”按鈕的位置,然后插入“重置”按鈕。“重置”按鈕“屬性”面板9.4創(chuàng)建HTML5表單元素課堂案例——森林動物園網(wǎng)頁插入電子郵件文本域插入URL文本域插入Tel文本域插入搜索文本域插入數(shù)字文本域插入范圍文本域插入顏色文本域課堂案例——鑫飛越航空網(wǎng)頁插入月表單元素插入周表單元素插入日期表單元素插入時間表單元素插入日期時間表單元素插入日期時間(當?shù)兀┍韱卧?.4.1課堂案例—森林動物園網(wǎng)頁使用“文本”按鈕插入單行文本域;使用“Tel”按鈕插入Tel文本域;使用“日期”按鈕插入日期表單;使用“文本區(qū)域”按鈕插入多行文本域;使用“提交”按鈕和“‘重置’按鈕”插入“提交”和“重置”按鈕;使用“屬性”面板設(shè)置各表單的屬性。效果圖9.4.2插入電子郵件文本域Dreamweaver2020為了適應(yīng)HTML5的發(fā)展增加了許多全新的HTML5表單元素,電子郵件文本域就是其中的一種。電子郵件文本域是專門為輸入郵箱地址而定義的文本框,相應(yīng)程序會驗證輸入的文本是否符合郵箱地址的格式,若不符合會提示驗證錯誤。若要在表單域中插入電子郵件文本域,先將光標置于表單內(nèi)需要插入電子郵件文本域的位置,然后插入電子郵件文本域。電子郵件文本域“屬性”面板9.4.3插入URL文本域URL文本域是專門為輸入URL地址而定義的文本框,在驗證輸入的文本格式時,如果該文本框中的內(nèi)容不符合URL地址的格式,會提示驗證錯誤。若要在表單域中插入URL文本域,先將光標放在表單內(nèi)需要插入URL文本域的位置,然后插入URL文本域。URL文本域“屬性”面板9.4.4插入Tel文本域Tel文本域是專門為輸入電話號碼而定義的文本框,沒有特殊的驗證規(guī)則。要在表單域中插入Tel表單文本域,先將光標置于表單內(nèi)需要插入Tel文本域的位置,然后插入Tel文本域。Tel文本域“屬性”面板9.4.5插入搜索文本域搜索表單元素是專門為輸入搜索內(nèi)容而定義的文本框,沒有特殊的驗證規(guī)則。若要在表單域中插入搜索文本域,先將光標放在表單輪廓內(nèi)需要插入搜索文本域的位置,然后插入搜索文本域。搜索文本域“屬性”面板9.4.6插入數(shù)字文本域數(shù)字表單元素是專門為輸入特定的數(shù)字而定義的文本框,具有“Min”、“Max”和“Step”屬性,表示允許輸入的最小值、最大值和調(diào)整步長。若要在表單域中插入數(shù)字文本域,先將光標放在表單內(nèi)需要插入數(shù)字文本域的位置,然后插入數(shù)字文本域。數(shù)字文本域“屬性”面板9.4.7插入范圍文本域范圍文本域?qū)⑽谋究蝻@示為滑動條,作為某一特定范圍內(nèi)的數(shù)值選擇器。要在表單域中插入范圍文本域,先將光標置于表單內(nèi)需要插入范圍文本域的位置,然后插入范圍文本域。范圍文本域“屬性”面板9.4.8插入顏色文本域顏色表單元素應(yīng)用于網(wǎng)頁時會默認提供一個顏色選擇器,大部分瀏覽器還不能實現(xiàn)該效果,但Chrome、火狐瀏覽器等支持該表單元素。若要在表單域中插入顏色文本域,先將光標放在表單內(nèi)需要插入顏色文本域的位置,然后插入顏色文本域。顏色“屬性”面板9.4.9課堂案例——鑫飛越航空網(wǎng)頁使用“日期”按鈕,插入日期元素。9.4.10插入月表單元素月表單元素的作用是為用戶提供一個月選擇器,但在大部分瀏覽器中還不能實現(xiàn)該效果,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入月表單,先將光標放在表單內(nèi)需要插入月表單的位置,然后插入月表單元素。月表單“屬性”面板9.4.11插入周表單元素周表單元素的作用是為用戶提供一個周選擇器,大部分瀏覽器中還不支持該表單元素,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入周表單,先將光標放在表單內(nèi)需要插入周表單的位置,然后插入周表單元素。周表單“屬性”面板9.4.12插入日期表單元素日期表單元素的作用是為用戶提供一個日期選擇器,大部分瀏覽器還不支持該表單元素,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入日期表單,先將光標放在表單內(nèi)需要插入日期表單的位置,然后插入日期表單元素。日期表單“屬性”面板9.4.13插入時間表單元素時間表單元素的作用是為用戶提供一個時間選擇器,大部分瀏覽器還不支持該表單元素,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入時間表單,先將光標放在表單輪廓內(nèi)需要插入時間表單的位置,然后插入時間表單。時間表單“屬性”面板9.4.14插入日期時間表單元素日期時間表單元素的作用是為用戶提供一個完整的日期時間選擇器,大部分瀏覽器還不支持該表單元素,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在在表單域中插入日期時間表單,先將光標放在表單內(nèi)需要插入日期時間表單的位置,然后插入日期時間表單元素。日期時間表單“屬性”面板9.4.15插入日期時間(當?shù)兀┍韱卧厝掌跁r間(當?shù)兀┍韱卧氐淖饔檬菫橛脩籼峁┮粋€完整的日期時間(不包含時區(qū))選擇器,大部分瀏覽器還不支持該表單元素,但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入日期時間(當?shù)兀┍韱危葘⒐鈽朔旁诒韱蝺?nèi)需要插入日期時間(當?shù)兀┍韱蔚奈恢?,然后插入日期時間(當?shù)兀┍韱卧?。日期時間(當?shù)兀┍韱巍皩傩浴泵姘逭n堂練習——智能掃地機器人網(wǎng)頁使用“表單”按鈕插入表單;使用“Table”按鈕插入表格,進行頁面布局;使用“圖像按鈕”按鈕插入圖像按鈕;使用“復(fù)選框”按鈕插入復(fù)選框;使用“文本”按鈕插入單行文本域;使用“Tel”按鈕插入Tel文本域。效果圖課后習題——房屋評估網(wǎng)頁使用“文本”按鈕,插入文本字段;使用“圖像按鈕”按鈕,插入圖像按鈕;使用“單選按鈕”按鈕,插入單選項。效果圖第10章行為本章簡介:行為是Dreamweaver2020預(yù)置的JaveScript程序庫,每個行為包括一個動作和一個事件。任何一個動作都需要一個事件激活,兩者相輔相成。動作是一段已編輯好的JaveScript代碼,這些代碼在特定事件被激發(fā)時執(zhí)行。本章主要講解行為和動作的應(yīng)用方法,通過這些內(nèi)容的學習,讀者可以在網(wǎng)頁中熟練應(yīng)用行為和動作,使設(shè)計制作的網(wǎng)頁更加生動精彩。掌握“行為”面板的使用掌握調(diào)用JavaScript、打開瀏覽器窗口和轉(zhuǎn)到URL的創(chuàng)建方法掌握檢查插件、檢查表單和交換圖像的創(chuàng)建方法掌握容器的文本、狀態(tài)欄文本、文本域文字的設(shè)置方法掌握跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始的設(shè)置方法課堂學習目標10.1行為“行為”面板
應(yīng)用行為10.1.1“行為”面板使用“行為”面板為網(wǎng)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 轉(zhuǎn)車協(xié)議書模板
- 配件定制加工合同協(xié)議
- 合同私下協(xié)議書
- 活物賠償協(xié)議書
- 違反購車訂購合同協(xié)議
- 連鎖供貨合同協(xié)議書模板
- 煤氣合同協(xié)議書
- 期刊贈閱協(xié)議書
- 構(gòu)建知識框架國際商業(yè)美術(shù)設(shè)計師考試試題及答案
- 2025年快消品行業(yè)包裝可持續(xù)設(shè)計趨勢深度分析報告
- 創(chuàng)新教學任務(wù)
- 工業(yè)管道的分類和分級
- 淺談膿毒血癥的集束化治療及護理-PPT課件
- 架子工班組承包協(xié)議
- 機器人任務(wù)規(guī)劃
- 化驗室化學試劑臺賬范例
- 楊家灣220KV變電站工程預(yù)算表
- 易拉罐回收機設(shè)計畢業(yè)設(shè)計
- 第七課:構(gòu)圖的形式
- 六類網(wǎng)線檢測報告(共9頁)
- 教師素養(yǎng)試題及答案
評論
0/150
提交評論