版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第四章簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)第四章簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)1內(nèi)容提要4.1插入文本4.2格式化文本4.3項(xiàng)目列表的應(yīng)用4.4標(biāo)尺和網(wǎng)格4.5在網(wǎng)頁(yè)中添加圖像4.6創(chuàng)建超級(jí)鏈接4.7插入多媒體<2>內(nèi)容提要4.1插入文本<2>24.1插入文本插入普通文本插入特殊字符在字符之間添加空格插入其他文本<3>4.1插入文本插入普通文本<3>3插入普通文本將插入點(diǎn)定位在文檔編輯區(qū)中,直接輸入文本即可。在Word等文本編輯軟件中編輯好文本之后,將其復(fù)制到剪貼板上,然后在Dreamweaver8中將插入點(diǎn)定位到文檔編輯區(qū)中,粘貼剪貼板中的文本亦可。<4>插入普通文本將插入點(diǎn)定位在文檔編輯區(qū)中,直接輸入文本即可。<4插入特殊字符在Dreamweaver8中編輯文本時(shí),往往會(huì)遇到一些無(wú)法通過(guò)鍵盤直接輸入的特殊字符,如版權(quán)符號(hào)?、注冊(cè)商標(biāo)符號(hào)?等,這時(shí)可通過(guò)插入特殊字符的功能進(jìn)行插入。<5>插入特殊字符在Dreamweaver8中編輯文本時(shí),往往會(huì)5在字符之間添加空格Dreamweaver8中的文檔格式都是以HTML編碼形式存在的,而HTML編碼中只允許字符之間包含一個(gè)空格,所以在Dreamweaver
8中無(wú)論按多少次空格鍵都只會(huì)輸入一個(gè)空格。Ctrl+Shift+空格可以插入空格<6>在字符之間添加空格Dreamweaver8中的文檔格式都是6插入水平線在文檔編輯區(qū)將插入點(diǎn)定位到所需位置,選擇[插入][HTML][水平線]菜單命令或單擊“插入”欄中的“HTML”選項(xiàng)卡在其中單擊按鈕即可添加水平線。<7>插入水平線在文檔編輯區(qū)將插入點(diǎn)定位到所需位置,選擇[插入]7修改水平線初始繪制的水平線的格式往往不能滿足實(shí)際需要,此時(shí)可通過(guò)屬性面板對(duì)其進(jìn)行修改。<8>修改水平線初始繪制的水平線的格式往往不能滿足實(shí)際需要,此時(shí)可8插入日期在制作網(wǎng)頁(yè)時(shí),有時(shí)需要插入當(dāng)前的日期,Dreamweaver8提供了快速插入日期和時(shí)間的功能。<9>插入日期在制作網(wǎng)頁(yè)時(shí),有時(shí)需要插入當(dāng)前的日期,Dreamwe94.2格式化文本設(shè)置字體外觀設(shè)置字體大小設(shè)置顏色設(shè)置字體樣式設(shè)置對(duì)齊方式設(shè)置標(biāo)題格式設(shè)置樣式<10>4.2格式化文本設(shè)置字體外觀<10>10設(shè)置字體外觀用戶也可對(duì)屬性面板的“字體”下拉列表框中的字體列表重新編輯。<11>設(shè)置字體外觀用戶也可對(duì)屬性面板的“字體”下拉列表框中的字體列11設(shè)置字體大小
在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng),并選擇其后的“單位”下拉列表框中相應(yīng)的單位選項(xiàng),即可設(shè)置所選文本的字體大小。字體的度量單位有像素(px)、厘米(cm)等,可根據(jù)具體情況進(jìn)行選擇,但一般都以像素為單位。<12>設(shè)置字體大小在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng)12設(shè)置顏色單擊屬性面板中的按鈕,在彈出的顏色列表框中選擇相應(yīng)的選項(xiàng)可設(shè)置所選文本的字體顏色,在其后的文本框中可直接輸入顏色的英文名(如Red、Green等)或以“#”開頭的十六進(jìn)制顏色代碼(如#ff0000、#00ff00)設(shè)置所選文本的顏色。<13>設(shè)置顏色單擊屬性面板中的按鈕,在彈出的顏色列表框中選13設(shè)置字體樣式粗體根據(jù)在“首選參數(shù)”對(duì)話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇,將<b>或<strong>標(biāo)簽應(yīng)用于選定的文本,即對(duì)所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置,再次單擊按鈕可取消“加粗”設(shè)置。斜體根據(jù)在“首選參數(shù)”對(duì)話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇,將<i>或<em>標(biāo)簽應(yīng)用于選定的文本,即對(duì)所選文本進(jìn)行傾斜設(shè)置。選中按鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。<14>設(shè)置字體樣式粗體<14>14設(shè)置對(duì)齊方式通過(guò)屬性面板中的“左對(duì)齊”按鈕、“居中對(duì)齊”按鈕、“右對(duì)齊”按鈕和“兩端對(duì)齊”按鈕可設(shè)置文本的對(duì)齊方式。<15>設(shè)置對(duì)齊方式通過(guò)屬性面板中的“左對(duì)齊”按鈕、“居中對(duì)齊”按鈕15設(shè)置標(biāo)題格式在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式,其中“段落”是應(yīng)用<p>標(biāo)簽的默認(rèn)格式,“標(biāo)題1”選項(xiàng)應(yīng)用<H1>標(biāo)簽,設(shè)置該選項(xiàng)可以將所選的文本設(shè)置成各種標(biāo)題。標(biāo)題號(hào)越小,字體越大。<16>設(shè)置標(biāo)題格式在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式,其16設(shè)置樣式屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所選文本的樣式。<17>設(shè)置樣式屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所174.3項(xiàng)目列表的應(yīng)用有序列表無(wú)序列表定義列表為現(xiàn)有文本創(chuàng)建列表創(chuàng)建嵌套列表設(shè)置項(xiàng)目列表屬性<18>4.3項(xiàng)目列表的應(yīng)用有序列表<18>18有序列表
有序列表又稱為編號(hào)列表,是有一定排列順序的列表,一般前面有數(shù)字前導(dǎo)字符,其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。<19>有序列表有序列表又稱為編號(hào)列表,是有一定排列順序的列表,一19無(wú)序列表無(wú)序列表又稱為項(xiàng)目列表,是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目文本組成的列表,一般前面是用項(xiàng)目符號(hào)作為前導(dǎo)字符。<20>無(wú)序列表無(wú)序列表又稱為項(xiàng)目列表,是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目20定義列表定義列表不使用項(xiàng)目符號(hào)或數(shù)字這樣的前導(dǎo)字符,通常用在詞匯表或說(shuō)明書中<21>定義列表定義列表不使用項(xiàng)目符號(hào)或數(shù)字這樣的前導(dǎo)字符,通常用在21為現(xiàn)有文本創(chuàng)建列表除了先創(chuàng)建列表項(xiàng)再輸入文本外,還可以先輸入文本,然后再設(shè)置列表項(xiàng)。<22>為現(xiàn)有文本創(chuàng)建列表除了先創(chuàng)建列表項(xiàng)再輸入文本外,還可以先輸入22創(chuàng)建嵌套列表嵌套列表是包含在其他列表中的列表●
演示<23>創(chuàng)建嵌套列表嵌套列表是包含在其他列表中的列表●演示<23>23設(shè)置項(xiàng)目列表屬性使用“列表屬性”對(duì)話框可以設(shè)置列表項(xiàng)的外觀,包括編號(hào)樣式、項(xiàng)目符號(hào)樣式等。<24>設(shè)置項(xiàng)目列表屬性使用“列表屬性”對(duì)話框可以設(shè)置列表項(xiàng)的外觀,24標(biāo)尺和網(wǎng)格標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺,分別顯示在Dreamweaver8文檔編輯區(qū)的上方和左側(cè)。標(biāo)尺的單位包括像素、厘米和英寸,在默認(rèn)狀態(tài)下使用像素為單位。<25>標(biāo)尺和網(wǎng)格標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺,分別顯示在Dreamw25網(wǎng)格網(wǎng)格與標(biāo)尺都是定位工具,但在網(wǎng)頁(yè)布局中使用網(wǎng)格更方便。文檔編輯區(qū)中顯示了網(wǎng)格后,就可以對(duì)網(wǎng)頁(yè)元素進(jìn)行準(zhǔn)確的定位了。<26>網(wǎng)格網(wǎng)格與標(biāo)尺都是定位工具,但在網(wǎng)頁(yè)布局中使用網(wǎng)格更方便。文264.5在網(wǎng)頁(yè)中添加圖像網(wǎng)頁(yè)圖像的格式及來(lái)源插入圖像設(shè)置圖像屬性圖像高級(jí)設(shè)置<27>4.5在網(wǎng)頁(yè)中添加圖像網(wǎng)頁(yè)圖像的格式及來(lái)源<27>27網(wǎng)頁(yè)圖像的格式及來(lái)源GIF格式JPEG格式PNG格式網(wǎng)頁(yè)圖像來(lái)源<28>網(wǎng)頁(yè)圖像的格式及來(lái)源GIF格式<28>28GIF格式GIF全稱為“GraphicsInterchangeFormat”,意為可交換圖像格式,它是第一個(gè)支持網(wǎng)頁(yè)的圖像格式,在PC機(jī)和蘋果機(jī)上都能被正確識(shí)別。GIF文件占用空間小,最多支持256種顏色。GIF圖像可以在網(wǎng)頁(yè)中以透明方式顯示,還可以包含動(dòng)態(tài)信息,即GIF動(dòng)畫。<29>GIF格式GIF全稱為“GraphicsInterchan29JPEG格式JPEG全稱為“JointPhotographicExpertsGroup”,意為聯(lián)合圖像專家組,它可以高效地壓縮圖片,丟失人眼不易察覺的部分圖像,使文件容量在變小的同時(shí)基本不失真,通常用來(lái)顯示顏色豐富的精美圖像。<30>JPEG格式JPEG全稱為“JointPhotograph30PNG格式PNG全稱為“PortableNetworkGraphics”,意為便攜網(wǎng)絡(luò)圖像,它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點(diǎn),又具有JPEG處理精美圖像的優(yōu)勢(shì),且可以包含圖層等信息,常常用于制作網(wǎng)頁(yè)效果圖。<31>PNG格式PNG全稱為“PortableNetworkG31網(wǎng)頁(yè)圖像來(lái)源網(wǎng)頁(yè)圖像的素材有很多來(lái)源,如可以使用圖形處理軟件(如Photoshop、Fireworks和FreeHand等軟件)制作;可以購(gòu)買網(wǎng)頁(yè)素材光盤;可以從網(wǎng)絡(luò)上下載等。<32>網(wǎng)頁(yè)圖像來(lái)源網(wǎng)頁(yè)圖像的素材有很多來(lái)源,如可以使用圖形處理軟件32插入圖像直接插入占位符插入圖像的放大顯示<33>插入圖像<33>33直接插入選擇[插入][圖像]菜單命令。單擊插入欄的“常用”選項(xiàng)卡中的按鈕。按【Ctrl+Alt+I】鍵。<34>直接插入選擇[插入][圖像]菜單命令。<34>34占位符插入制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像,但確定了圖像大小的時(shí)候,可以使用占位符來(lái)代替圖像的方式插入到文檔中。將圖像確定后雙擊占位符,在打開的對(duì)話框中設(shè)置后插入即可。<35>占位符插入制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像,但確定了圖像大小的35圖像的放大顯示Dreamweaver8新增的放大鏡功能可以讓用戶更方便地進(jìn)行對(duì)齊圖像、選擇較小的對(duì)象以及查看較小的文本、動(dòng)畫或網(wǎng)頁(yè)元素等操作。<36>圖像的放大顯示Dreamweaver8新增的放大鏡功能可以36設(shè)置圖像屬性在網(wǎng)頁(yè)中插入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改等設(shè)置。圖像命名圖像大小編輯圖片源文件設(shè)置
文本說(shuō)明圖像與文本的對(duì)齊圖像邊距圖像邊框<37>設(shè)置圖像屬性在網(wǎng)頁(yè)中插入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改37圖像命名為了在使用Dreamweaver行為(如交換圖像)或腳本撰寫語(yǔ)言(如JavaScript或VBScript)時(shí)可以引用該圖像,可在屬性面板的“圖像”文本框中為圖像命名。<38>圖像命名為了在使用Dreamweaver行為(如交換圖像)或38圖像大小在Dreamweaver8中插入圖像后系統(tǒng)會(huì)自動(dòng)將圖像的原始大小顯示在“寬”和“高”文本框(以像素為單位)中。<39>圖像大小在Dreamweaver8中插入圖像后系統(tǒng)會(huì)自動(dòng)將39編輯圖片在網(wǎng)頁(yè)中選擇圖像之后,單擊屬性面板中的按鈕,打開圖像處理軟件,對(duì)圖像進(jìn)行處理。如果安裝了Fireworks,那么Fireworks將被默認(rèn)為圖像處理軟件。如果沒有安裝,用戶也可自己設(shè)置使用其他軟件中處理圖像<40>編輯圖片在網(wǎng)頁(yè)中選擇圖像之后,單擊屬性面板中的按鈕,打開圖像40源文件設(shè)置在屬性面板的“源文件”文本框中顯示了圖像的保存路徑,如果要重新插入一幅新圖像,可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址,或單擊右側(cè)后的按鈕,在打開的“選擇圖像源文件”對(duì)話框中重新選擇需要的圖像。<41>源文件設(shè)置在屬性面板的“源文件”文本框中顯示了圖像的保存路徑41文本說(shuō)明在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說(shuō)明。<42>文本說(shuō)明在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入42圖像與文本的對(duì)齊選取圖像后,在屬性面板的“對(duì)齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對(duì)齊方式。<43>圖像與文本的對(duì)齊選取圖像后,在屬性面板的“對(duì)齊”下拉列表框中43圖像邊距選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁(yè)面上方和左側(cè)之間的距離,也可以設(shè)置圖像與其他網(wǎng)頁(yè)元素之間的距離。<44>圖像邊距選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框44圖像邊框選取圖像后,在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度,單位為像素,“0”表示無(wú)邊框。<45>圖像邊框選取圖像后,在屬性面板的“邊框”文本框中可以設(shè)置圖像45圖像高級(jí)設(shè)置鼠標(biāo)經(jīng)過(guò)圖像設(shè)置插入FireworksHTML對(duì)象<46>圖像高級(jí)設(shè)置<46>46鼠標(biāo)經(jīng)過(guò)圖像設(shè)置鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí),鼠標(biāo)光標(biāo)經(jīng)過(guò)該圖像時(shí),圖像發(fā)生變化的動(dòng)態(tài)圖像。<47>鼠標(biāo)經(jīng)過(guò)圖像設(shè)置鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí),鼠標(biāo)47插入FireworksHTML對(duì)象Macromedia公司的圖形處理軟件Fireworks優(yōu)化后的圖像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站點(diǎn)文件夾中。<48>插入FireworksHTML對(duì)象Macromedia公司484.6創(chuàng)建超級(jí)鏈接創(chuàng)建文本超級(jí)鏈接創(chuàng)建錨鏈接創(chuàng)建空鏈接創(chuàng)建電子郵件超級(jí)鏈接創(chuàng)建圖像超級(jí)鏈接創(chuàng)建導(dǎo)航條<49>4.6創(chuàng)建超級(jí)鏈接創(chuàng)建文本超級(jí)鏈接<49>49創(chuàng)建文本超級(jí)鏈接文本超級(jí)鏈接是最常見的超級(jí)鏈接,通過(guò)使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。<50>創(chuàng)建文本超級(jí)鏈接文本超級(jí)鏈接是最常見的超級(jí)鏈接,通過(guò)使用鼠標(biāo)50創(chuàng)建錨鏈接創(chuàng)建命名錨記鏈接命名錨記<51>創(chuàng)建錨鏈接創(chuàng)建命名錨記<51>51創(chuàng)建命名錨記在制作網(wǎng)頁(yè)時(shí),為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁(yè)固定位置的目的,可以使用錨鏈接。通過(guò)對(duì)網(wǎng)頁(yè)中指定位置的命名,利用超級(jí)鏈接打開目標(biāo)網(wǎng)頁(yè)時(shí)可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。<52>創(chuàng)建命名錨記在制作網(wǎng)頁(yè)時(shí),為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁(yè)固定位置的目的,52鏈接命名錨記創(chuàng)建好錨記之后,必須創(chuàng)建對(duì)應(yīng)的超級(jí)鏈接源端點(diǎn)。<53>鏈接命名錨記創(chuàng)建好錨記之后,必須創(chuàng)建對(duì)應(yīng)的超級(jí)鏈接源端點(diǎn)。<53創(chuàng)建空鏈接要想對(duì)文本設(shè)置行為,首先必須為文本建立空超級(jí)鏈接(空超級(jí)鏈接是一個(gè)未指派目標(biāo)的超級(jí)鏈接),這樣行為才會(huì)有效。為文本建立空超級(jí)鏈接時(shí),只要先在文檔窗口中選中需要建立空超級(jí)鏈接的文本,然后在屬性面板的“鏈接”文本框中輸入一個(gè)“#”符號(hào)即可。建立空超級(jí)鏈接的目的只是為了應(yīng)用行為,其他情況下不必建立。<54>創(chuàng)建空鏈接要想對(duì)文本設(shè)置行為,首先必須為文本建立空超級(jí)鏈接(54創(chuàng)建電子郵件超級(jí)鏈接電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛,在網(wǎng)頁(yè)中建立電子郵件超級(jí)鏈接可方便網(wǎng)頁(yè)瀏覽者與設(shè)計(jì)者之間的聯(lián)系。<55>創(chuàng)建電子郵件超級(jí)鏈接電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛,在網(wǎng)頁(yè)中建55創(chuàng)建圖像超級(jí)鏈接為一般圖像創(chuàng)建超級(jí)鏈接創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接<56>創(chuàng)建圖像超級(jí)鏈接<56>56為一般圖像創(chuàng)建超級(jí)鏈接<57>為一般圖像創(chuàng)建超級(jí)鏈接<57>57創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接要在一幅比較大的圖片中添加許多超級(jí)鏈接時(shí),應(yīng)該將圖片化整為零,分割成較小的圖片,然后分別為這些小圖像上建立超級(jí)鏈接來(lái)達(dá)到目的,但這時(shí)整幅圖片就不能對(duì)齊,利用Dreamweaver8的圖像熱點(diǎn)超級(jí)鏈接功能就能避免這個(gè)問(wèn)題。<58>創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接要在一幅比較大的圖片中添加許多超級(jí)鏈接時(shí)58創(chuàng)建導(dǎo)航條插入導(dǎo)航條編輯導(dǎo)航條<59>創(chuàng)建導(dǎo)航條<59>59插入導(dǎo)航條導(dǎo)航條一般由圖像或圖像組組成,這些圖像的顯示內(nèi)容隨用戶的操作不同而進(jìn)行相應(yīng)的變化。導(dǎo)航條為訪問(wèn)者瀏覽不同網(wǎng)頁(yè)提供了一條捷徑。<60>插入導(dǎo)航條導(dǎo)航條一般由圖像或圖像組組成,這些圖像的顯示內(nèi)容隨60編輯導(dǎo)航條<61>編輯導(dǎo)航條<61>61上機(jī)實(shí)戰(zhàn)制作如下圖所示導(dǎo)航條。<62>上機(jī)實(shí)戰(zhàn)制作如下圖所示導(dǎo)航條。<62>624.7插入多媒體(1)插入Flash對(duì)象(2)插入音頻文件(3)插入視頻文件(4)插入JavaApplet<63>4.7插入多媒體(1)插入Flash對(duì)象<63>63插入flash對(duì)象插入Flash動(dòng)畫
插入Flash文本圖像查看器插入Flash按鈕插入Flashpaper插入Flash視頻<64>插入flash對(duì)象插入Flash動(dòng)畫<64>64插入flash動(dòng)畫在Dreamweaver中,可以直接插入發(fā)布后的Flash動(dòng)畫,其具體操作步驟如下:(1) 將光標(biāo)定位在要插入flash動(dòng)畫的位置(2) 選擇“插入”|“媒體”|“flash”命令,或單擊“常用”工具欄按鈕,在彈出的下拉菜單中選擇flash命令,彈出“選擇文件”對(duì)話框。(3) 在“查找范圍”下拉列表框中選擇需要插入的flash動(dòng)畫文件。(4) 單擊確定按鈕,會(huì)在網(wǎng)頁(yè)中出現(xiàn)flash標(biāo)志。如果插入的flash文件不在站點(diǎn)文件夾下,系統(tǒng)會(huì)提示復(fù)制該flash文件到站點(diǎn)文件夾下。<65>插入flash動(dòng)畫在Dreamweaver中,可以直接插入發(fā)65插入flash動(dòng)畫(5)選擇插入到網(wǎng)頁(yè)中的flash動(dòng)畫元件,可以在“屬性”面板中設(shè)置它的高度和寬度??梢渣c(diǎn)擊“屬性”面板上的“播放”按鈕來(lái)預(yù)覽效果。(6)其他屬性設(shè)置為寬和高:用于以像素為單位指定Flash對(duì)象的寬度和高度。因?yàn)镕lash使用的是矢量圖形,所以改變高度和寬度時(shí)不會(huì)影響動(dòng)畫的質(zhì)量。還可以指定英寸、毫米、厘米等等單位。<66>插入flash動(dòng)畫(5)選擇插入到網(wǎng)頁(yè)中的flash動(dòng)畫元件66插入flash動(dòng)畫文件:顯示Flash文件的路徑。單擊后面的瀏覽按鈕可以指定新的動(dòng)畫文件。編輯:此按鈕用于啟動(dòng)MacromediaFlashMX以編輯Flash文件。如果計(jì)算機(jī)上沒有加載MacromediaFlashMX,此按鈕將被禁用。重設(shè)大小:恢復(fù)到Flash文件默認(rèn)尺寸。自動(dòng)播放:選中后Flash電影會(huì)自動(dòng)播放。垂直邊距與水平邊距:設(shè)置Flash文件垂直與水平方向上的空白區(qū)域。品質(zhì):此下拉列表框用于在對(duì)象播放期間控制抗失真。設(shè)置越高,效果越好。比例:此下拉列表框用于指定對(duì)象如何在設(shè)置好的寬度和高度尺寸下顯示?!澳J(rèn)值”設(shè)置顯示整個(gè)對(duì)象。對(duì)齊:此下拉列表框用于指定對(duì)象在頁(yè)面上的對(duì)齊方式。背景顏色:用于指定對(duì)象的背景顏色。參數(shù):可設(shè)定ActiveX參數(shù),這些參數(shù)用于ActiveX控件之間的數(shù)據(jù)交換?!?/p>
演示<67>插入flash動(dòng)畫文件:顯示Flash文件的路徑。單擊后面的67插入flash文本用戶如果希望制作一個(gè)有Flash動(dòng)畫效果的文字。在Dreamweaver中很容易實(shí)現(xiàn)。將光標(biāo)放在要插入Flash文字的位置,然后在“常用”插入工具欄中單擊“媒體”按鈕旁的下拉按鈕,在打開的“媒體”下拉列表中選擇“Flash文本”。此時(shí)將打開“插入Flash文本”對(duì)話框?!?/p>
演示<68>插入flash文本用戶如果希望制作一個(gè)有Flash動(dòng)畫效果的68圖像查看器選擇“插入”菜單|“媒體”|“圖像查看器”,可以自動(dòng)創(chuàng)建一個(gè)用于瀏覽多幅圖像的Flash動(dòng)畫?!?/p>
演示<69>圖像查看器選擇“插入”菜單|“媒體”|“圖像查看器”,可以自69插入Flash按鈕在編輯的文檔中如要插入Flash按鈕,先將光標(biāo)放在要插入的位置上,然后在“常用”插入工具欄中單擊媒體按鈕旁的下拉按鈕,在打開的媒體下拉列表中選擇“Flash按鈕“?!?/p>
演示<70>插入Flash按鈕在編輯的文檔中如要插入Flash按鈕,先將70插入FlashpaperFlashpaper是一種特殊的Flash動(dòng)畫文件,可以通過(guò)Flashpaper軟件制作,安裝Flashpaper后,系統(tǒng)會(huì)自動(dòng)增加一個(gè)名為MacromediaFlashpaper的打印機(jī),在任意軟件中使用該打印機(jī)進(jìn)行打印,即可制作出一個(gè)Flashpaper文檔,這樣就可以輕松地將Word、AutoCAD等文檔或圖象的內(nèi)容添加到網(wǎng)頁(yè)中了。利用插入Flashpaper功能可以在網(wǎng)頁(yè)中插入MacromediaFlashpaper文檔,這樣在瀏覽器中打開包含F(xiàn)lashpaper文檔的頁(yè)面時(shí),用戶就可以瀏覽Flashpaper文檔中所有的頁(yè)面信息,而無(wú)須加載新的網(wǎng)頁(yè)。同時(shí)用戶也可以搜索、打印和縮放該文檔。<71>插入FlashpaperFlashpaper是一種特殊的Fl71插入Flashpaper將光標(biāo)定位到插入Flashpaper的位置。選擇“插入”|“媒體”|“Flashpaper”命令,或單擊“常用”工具欄中”媒體”按鈕下的“Flashpaper”命令,彈出“插入Flashpaper”對(duì)話框。單擊“源”文本框后的“瀏覽”按鈕,在彈出的“選擇文件”對(duì)話框中選擇要顯示的Flashpaper文檔。在“寬度”和“高度”文本框中輸入Flashpaper文檔在網(wǎng)頁(yè)中顯示范圍的寬度和高度,單擊確定按鈕即可插入Flashpaper文件?!?/p>
演示<72>插入Flashpaper將光標(biāo)定位到插入Flashpaper72插入FlashVideoFLV流媒體格式是一種新的視頻格式,全稱為FlashVideo。FlashVideo只能播放*.flv格式的視頻文件,若是其他格式的文件可以通過(guò)MacromediaFlash8VideoEncoder將其轉(zhuǎn)換為*.flv格式。<73>插入FlashVideoFLV流媒體格式是一種新的視頻格式73插入FlashVideo將光標(biāo)定位到要插入FlashVideo的位置。選擇“插入”|“媒體”|“FlashVideo”命令,或單擊“常用”工具欄中“媒體”按鈕下的”FlashVideo”命令,彈出“插入FlashVideo”對(duì)話框。在“視頻類型“下拉列表框中選擇視頻類型。單擊“URL”文本框后面的“瀏覽”按鈕,在彈出的“選擇文件”對(duì)話框中選擇要播放的Flash視頻文件,如選擇“1320281.flv”文件。在“外觀”下拉列表框中選擇視頻播放器的外觀界面。選擇后在“外觀”下拉列表框下方會(huì)顯示選擇的界面效果。在“寬度”和“高度”文本框中輸入視頻畫面的寬度和高度,也可以單擊按鈕自動(dòng)獲取選擇的視頻文件的寬度和高度。<74>插入FlashVideo將光標(biāo)定位到要插入FlashVide74插入FlashVideo●
演示<75>插入FlashVideo●演示<75>75插入音頻文件將光標(biāo)定位到插入插件所需的位置。選擇“插入”|“媒體”|“插件”命令,或單擊“常用”工具欄中“媒體”按鈕下的“插件”命令,彈出“插入文件”對(duì)話框,選擇一個(gè)音頻文件。●
演示<76>插入音頻文件將光標(biāo)定位到插入插件所需的位置?!裱菔?lt;7676插入視頻文件在Dreamweaver8中可以通過(guò)不同的方式和使用不同的格式將視頻添加到Web頁(yè)面中,比如通過(guò)一段代碼,或者利用ActiveX控件,以及插件等等。插入ActiveX具體方法如下:將光標(biāo)定位到插入ActiveX的位置選擇“插入”|“媒體”|“ActiveX”命令選中該控件,然后選中“源文件”前的復(fù)選框并單擊后面的“瀏覽文件”按鈕,此時(shí)系統(tǒng)打開插件對(duì)話框。選擇要播放的文件,單擊“確定”按鈕。添加了視頻文件后,如需做參數(shù)設(shè)置,則單擊“屬性”面板上“參數(shù)”按鈕。<77>插入視頻文件在Dreamweaver8中可以通過(guò)不同的方式77插入JavaApplet將光標(biāo)定位在插入Applet地方,然后在“媒體”下拉列表中選擇此時(shí)將打開“選擇文件“對(duì)話框。在對(duì)話框中找到.class文件插入。確定選中文件后,文檔中會(huì)有圖標(biāo)。接著在“屬性”面板中設(shè)置其寬度和高度●
演示<78>插入JavaApplet將光標(biāo)定位在插入Applet地方78課后練習(xí)1.練習(xí)用Dreamweaver8制作網(wǎng)頁(yè)。2.練習(xí)創(chuàng)建各種超級(jí)鏈接。3.練習(xí)在網(wǎng)頁(yè)中插入圖像以及創(chuàng)建圖像熱點(diǎn)鏈接。4.練習(xí)在網(wǎng)頁(yè)中插入多媒體元素。<79>課后練習(xí)1.練習(xí)用Dreamweaver8制作網(wǎng)頁(yè)。<7979TheEnd<80>TheEnd<80>80第四章簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)第四章簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)81內(nèi)容提要4.1插入文本4.2格式化文本4.3項(xiàng)目列表的應(yīng)用4.4標(biāo)尺和網(wǎng)格4.5在網(wǎng)頁(yè)中添加圖像4.6創(chuàng)建超級(jí)鏈接4.7插入多媒體<2>內(nèi)容提要4.1插入文本<2>824.1插入文本插入普通文本插入特殊字符在字符之間添加空格插入其他文本<3>4.1插入文本插入普通文本<3>83插入普通文本將插入點(diǎn)定位在文檔編輯區(qū)中,直接輸入文本即可。在Word等文本編輯軟件中編輯好文本之后,將其復(fù)制到剪貼板上,然后在Dreamweaver8中將插入點(diǎn)定位到文檔編輯區(qū)中,粘貼剪貼板中的文本亦可。<4>插入普通文本將插入點(diǎn)定位在文檔編輯區(qū)中,直接輸入文本即可。<84插入特殊字符在Dreamweaver8中編輯文本時(shí),往往會(huì)遇到一些無(wú)法通過(guò)鍵盤直接輸入的特殊字符,如版權(quán)符號(hào)?、注冊(cè)商標(biāo)符號(hào)?等,這時(shí)可通過(guò)插入特殊字符的功能進(jìn)行插入。<5>插入特殊字符在Dreamweaver8中編輯文本時(shí),往往會(huì)85在字符之間添加空格Dreamweaver8中的文檔格式都是以HTML編碼形式存在的,而HTML編碼中只允許字符之間包含一個(gè)空格,所以在Dreamweaver
8中無(wú)論按多少次空格鍵都只會(huì)輸入一個(gè)空格。Ctrl+Shift+空格可以插入空格<6>在字符之間添加空格Dreamweaver8中的文檔格式都是86插入水平線在文檔編輯區(qū)將插入點(diǎn)定位到所需位置,選擇[插入][HTML][水平線]菜單命令或單擊“插入”欄中的“HTML”選項(xiàng)卡在其中單擊按鈕即可添加水平線。<7>插入水平線在文檔編輯區(qū)將插入點(diǎn)定位到所需位置,選擇[插入]87修改水平線初始繪制的水平線的格式往往不能滿足實(shí)際需要,此時(shí)可通過(guò)屬性面板對(duì)其進(jìn)行修改。<8>修改水平線初始繪制的水平線的格式往往不能滿足實(shí)際需要,此時(shí)可88插入日期在制作網(wǎng)頁(yè)時(shí),有時(shí)需要插入當(dāng)前的日期,Dreamweaver8提供了快速插入日期和時(shí)間的功能。<9>插入日期在制作網(wǎng)頁(yè)時(shí),有時(shí)需要插入當(dāng)前的日期,Dreamwe894.2格式化文本設(shè)置字體外觀設(shè)置字體大小設(shè)置顏色設(shè)置字體樣式設(shè)置對(duì)齊方式設(shè)置標(biāo)題格式設(shè)置樣式<10>4.2格式化文本設(shè)置字體外觀<10>90設(shè)置字體外觀用戶也可對(duì)屬性面板的“字體”下拉列表框中的字體列表重新編輯。<11>設(shè)置字體外觀用戶也可對(duì)屬性面板的“字體”下拉列表框中的字體列91設(shè)置字體大小
在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng),并選擇其后的“單位”下拉列表框中相應(yīng)的單位選項(xiàng),即可設(shè)置所選文本的字體大小。字體的度量單位有像素(px)、厘米(cm)等,可根據(jù)具體情況進(jìn)行選擇,但一般都以像素為單位。<12>設(shè)置字體大小在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項(xiàng)92設(shè)置顏色單擊屬性面板中的按鈕,在彈出的顏色列表框中選擇相應(yīng)的選項(xiàng)可設(shè)置所選文本的字體顏色,在其后的文本框中可直接輸入顏色的英文名(如Red、Green等)或以“#”開頭的十六進(jìn)制顏色代碼(如#ff0000、#00ff00)設(shè)置所選文本的顏色。<13>設(shè)置顏色單擊屬性面板中的按鈕,在彈出的顏色列表框中選93設(shè)置字體樣式粗體根據(jù)在“首選參數(shù)”對(duì)話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇,將<b>或<strong>標(biāo)簽應(yīng)用于選定的文本,即對(duì)所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置,再次單擊按鈕可取消“加粗”設(shè)置。斜體根據(jù)在“首選參數(shù)”對(duì)話框的“常規(guī)”選項(xiàng)中設(shè)置的樣式參數(shù)選擇,將<i>或<em>標(biāo)簽應(yīng)用于選定的文本,即對(duì)所選文本進(jìn)行傾斜設(shè)置。選中按鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。<14>設(shè)置字體樣式粗體<14>94設(shè)置對(duì)齊方式通過(guò)屬性面板中的“左對(duì)齊”按鈕、“居中對(duì)齊”按鈕、“右對(duì)齊”按鈕和“兩端對(duì)齊”按鈕可設(shè)置文本的對(duì)齊方式。<15>設(shè)置對(duì)齊方式通過(guò)屬性面板中的“左對(duì)齊”按鈕、“居中對(duì)齊”按鈕95設(shè)置標(biāo)題格式在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式,其中“段落”是應(yīng)用<p>標(biāo)簽的默認(rèn)格式,“標(biāo)題1”選項(xiàng)應(yīng)用<H1>標(biāo)簽,設(shè)置該選項(xiàng)可以將所選的文本設(shè)置成各種標(biāo)題。標(biāo)題號(hào)越小,字體越大。<16>設(shè)置標(biāo)題格式在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式,其96設(shè)置樣式屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所選文本的樣式。<17>設(shè)置樣式屬性面板中的“樣式”下拉列表框可用于顯示當(dāng)前應(yīng)用于所974.3項(xiàng)目列表的應(yīng)用有序列表無(wú)序列表定義列表為現(xiàn)有文本創(chuàng)建列表創(chuàng)建嵌套列表設(shè)置項(xiàng)目列表屬性<18>4.3項(xiàng)目列表的應(yīng)用有序列表<18>98有序列表
有序列表又稱為編號(hào)列表,是有一定排列順序的列表,一般前面有數(shù)字前導(dǎo)字符,其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。<19>有序列表有序列表又稱為編號(hào)列表,是有一定排列順序的列表,一99無(wú)序列表無(wú)序列表又稱為項(xiàng)目列表,是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目文本組成的列表,一般前面是用項(xiàng)目符號(hào)作為前導(dǎo)字符。<20>無(wú)序列表無(wú)序列表又稱為項(xiàng)目列表,是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目100定義列表定義列表不使用項(xiàng)目符號(hào)或數(shù)字這樣的前導(dǎo)字符,通常用在詞匯表或說(shuō)明書中<21>定義列表定義列表不使用項(xiàng)目符號(hào)或數(shù)字這樣的前導(dǎo)字符,通常用在101為現(xiàn)有文本創(chuàng)建列表除了先創(chuàng)建列表項(xiàng)再輸入文本外,還可以先輸入文本,然后再設(shè)置列表項(xiàng)。<22>為現(xiàn)有文本創(chuàng)建列表除了先創(chuàng)建列表項(xiàng)再輸入文本外,還可以先輸入102創(chuàng)建嵌套列表嵌套列表是包含在其他列表中的列表●
演示<23>創(chuàng)建嵌套列表嵌套列表是包含在其他列表中的列表●演示<23>103設(shè)置項(xiàng)目列表屬性使用“列表屬性”對(duì)話框可以設(shè)置列表項(xiàng)的外觀,包括編號(hào)樣式、項(xiàng)目符號(hào)樣式等。<24>設(shè)置項(xiàng)目列表屬性使用“列表屬性”對(duì)話框可以設(shè)置列表項(xiàng)的外觀,104標(biāo)尺和網(wǎng)格標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺,分別顯示在Dreamweaver8文檔編輯區(qū)的上方和左側(cè)。標(biāo)尺的單位包括像素、厘米和英寸,在默認(rèn)狀態(tài)下使用像素為單位。<25>標(biāo)尺和網(wǎng)格標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺,分別顯示在Dreamw105網(wǎng)格網(wǎng)格與標(biāo)尺都是定位工具,但在網(wǎng)頁(yè)布局中使用網(wǎng)格更方便。文檔編輯區(qū)中顯示了網(wǎng)格后,就可以對(duì)網(wǎng)頁(yè)元素進(jìn)行準(zhǔn)確的定位了。<26>網(wǎng)格網(wǎng)格與標(biāo)尺都是定位工具,但在網(wǎng)頁(yè)布局中使用網(wǎng)格更方便。文1064.5在網(wǎng)頁(yè)中添加圖像網(wǎng)頁(yè)圖像的格式及來(lái)源插入圖像設(shè)置圖像屬性圖像高級(jí)設(shè)置<27>4.5在網(wǎng)頁(yè)中添加圖像網(wǎng)頁(yè)圖像的格式及來(lái)源<27>107網(wǎng)頁(yè)圖像的格式及來(lái)源GIF格式JPEG格式PNG格式網(wǎng)頁(yè)圖像來(lái)源<28>網(wǎng)頁(yè)圖像的格式及來(lái)源GIF格式<28>108GIF格式GIF全稱為“GraphicsInterchangeFormat”,意為可交換圖像格式,它是第一個(gè)支持網(wǎng)頁(yè)的圖像格式,在PC機(jī)和蘋果機(jī)上都能被正確識(shí)別。GIF文件占用空間小,最多支持256種顏色。GIF圖像可以在網(wǎng)頁(yè)中以透明方式顯示,還可以包含動(dòng)態(tài)信息,即GIF動(dòng)畫。<29>GIF格式GIF全稱為“GraphicsInterchan109JPEG格式JPEG全稱為“JointPhotographicExpertsGroup”,意為聯(lián)合圖像專家組,它可以高效地壓縮圖片,丟失人眼不易察覺的部分圖像,使文件容量在變小的同時(shí)基本不失真,通常用來(lái)顯示顏色豐富的精美圖像。<30>JPEG格式JPEG全稱為“JointPhotograph110PNG格式PNG全稱為“PortableNetworkGraphics”,意為便攜網(wǎng)絡(luò)圖像,它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點(diǎn),又具有JPEG處理精美圖像的優(yōu)勢(shì),且可以包含圖層等信息,常常用于制作網(wǎng)頁(yè)效果圖。<31>PNG格式PNG全稱為“PortableNetworkG111網(wǎng)頁(yè)圖像來(lái)源網(wǎng)頁(yè)圖像的素材有很多來(lái)源,如可以使用圖形處理軟件(如Photoshop、Fireworks和FreeHand等軟件)制作;可以購(gòu)買網(wǎng)頁(yè)素材光盤;可以從網(wǎng)絡(luò)上下載等。<32>網(wǎng)頁(yè)圖像來(lái)源網(wǎng)頁(yè)圖像的素材有很多來(lái)源,如可以使用圖形處理軟件112插入圖像直接插入占位符插入圖像的放大顯示<33>插入圖像<33>113直接插入選擇[插入][圖像]菜單命令。單擊插入欄的“常用”選項(xiàng)卡中的按鈕。按【Ctrl+Alt+I】鍵。<34>直接插入選擇[插入][圖像]菜單命令。<34>114占位符插入制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像,但確定了圖像大小的時(shí)候,可以使用占位符來(lái)代替圖像的方式插入到文檔中。將圖像確定后雙擊占位符,在打開的對(duì)話框中設(shè)置后插入即可。<35>占位符插入制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像,但確定了圖像大小的115圖像的放大顯示Dreamweaver8新增的放大鏡功能可以讓用戶更方便地進(jìn)行對(duì)齊圖像、選擇較小的對(duì)象以及查看較小的文本、動(dòng)畫或網(wǎng)頁(yè)元素等操作。<36>圖像的放大顯示Dreamweaver8新增的放大鏡功能可以116設(shè)置圖像屬性在網(wǎng)頁(yè)中插入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改等設(shè)置。圖像命名圖像大小編輯圖片源文件設(shè)置
文本說(shuō)明圖像與文本的對(duì)齊圖像邊距圖像邊框<37>設(shè)置圖像屬性在網(wǎng)頁(yè)中插入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改117圖像命名為了在使用Dreamweaver行為(如交換圖像)或腳本撰寫語(yǔ)言(如JavaScript或VBScript)時(shí)可以引用該圖像,可在屬性面板的“圖像”文本框中為圖像命名。<38>圖像命名為了在使用Dreamweaver行為(如交換圖像)或118圖像大小在Dreamweaver8中插入圖像后系統(tǒng)會(huì)自動(dòng)將圖像的原始大小顯示在“寬”和“高”文本框(以像素為單位)中。<39>圖像大小在Dreamweaver8中插入圖像后系統(tǒng)會(huì)自動(dòng)將119編輯圖片在網(wǎng)頁(yè)中選擇圖像之后,單擊屬性面板中的按鈕,打開圖像處理軟件,對(duì)圖像進(jìn)行處理。如果安裝了Fireworks,那么Fireworks將被默認(rèn)為圖像處理軟件。如果沒有安裝,用戶也可自己設(shè)置使用其他軟件中處理圖像<40>編輯圖片在網(wǎng)頁(yè)中選擇圖像之后,單擊屬性面板中的按鈕,打開圖像120源文件設(shè)置在屬性面板的“源文件”文本框中顯示了圖像的保存路徑,如果要重新插入一幅新圖像,可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址,或單擊右側(cè)后的按鈕,在打開的“選擇圖像源文件”對(duì)話框中重新選擇需要的圖像。<41>源文件設(shè)置在屬性面板的“源文件”文本框中顯示了圖像的保存路徑121文本說(shuō)明在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說(shuō)明。<42>文本說(shuō)明在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入122圖像與文本的對(duì)齊選取圖像后,在屬性面板的“對(duì)齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對(duì)齊方式。<43>圖像與文本的對(duì)齊選取圖像后,在屬性面板的“對(duì)齊”下拉列表框中123圖像邊距選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁(yè)面上方和左側(cè)之間的距離,也可以設(shè)置圖像與其他網(wǎng)頁(yè)元素之間的距離。<44>圖像邊距選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框124圖像邊框選取圖像后,在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度,單位為像素,“0”表示無(wú)邊框。<45>圖像邊框選取圖像后,在屬性面板的“邊框”文本框中可以設(shè)置圖像125圖像高級(jí)設(shè)置鼠標(biāo)經(jīng)過(guò)圖像設(shè)置插入FireworksHTML對(duì)象<46>圖像高級(jí)設(shè)置<46>126鼠標(biāo)經(jīng)過(guò)圖像設(shè)置鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí),鼠標(biāo)光標(biāo)經(jīng)過(guò)該圖像時(shí),圖像發(fā)生變化的動(dòng)態(tài)圖像。<47>鼠標(biāo)經(jīng)過(guò)圖像設(shè)置鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí),鼠標(biāo)127插入FireworksHTML對(duì)象Macromedia公司的圖形處理軟件Fireworks優(yōu)化后的圖像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站點(diǎn)文件夾中。<48>插入FireworksHTML對(duì)象Macromedia公司1284.6創(chuàng)建超級(jí)鏈接創(chuàng)建文本超級(jí)鏈接創(chuàng)建錨鏈接創(chuàng)建空鏈接創(chuàng)建電子郵件超級(jí)鏈接創(chuàng)建圖像超級(jí)鏈接創(chuàng)建導(dǎo)航條<49>4.6創(chuàng)建超級(jí)鏈接創(chuàng)建文本超級(jí)鏈接<49>129創(chuàng)建文本超級(jí)鏈接文本超級(jí)鏈接是最常見的超級(jí)鏈接,通過(guò)使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。<50>創(chuàng)建文本超級(jí)鏈接文本超級(jí)鏈接是最常見的超級(jí)鏈接,通過(guò)使用鼠標(biāo)130創(chuàng)建錨鏈接創(chuàng)建命名錨記鏈接命名錨記<51>創(chuàng)建錨鏈接創(chuàng)建命名錨記<51>131創(chuàng)建命名錨記在制作網(wǎng)頁(yè)時(shí),為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁(yè)固定位置的目的,可以使用錨鏈接。通過(guò)對(duì)網(wǎng)頁(yè)中指定位置的命名,利用超級(jí)鏈接打開目標(biāo)網(wǎng)頁(yè)時(shí)可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。<52>創(chuàng)建命名錨記在制作網(wǎng)頁(yè)時(shí),為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁(yè)固定位置的目的,132鏈接命名錨記創(chuàng)建好錨記之后,必須創(chuàng)建對(duì)應(yīng)的超級(jí)鏈接源端點(diǎn)。<53>鏈接命名錨記創(chuàng)建好錨記之后,必須創(chuàng)建對(duì)應(yīng)的超級(jí)鏈接源端點(diǎn)。<133創(chuàng)建空鏈接要想對(duì)文本設(shè)置行為,首先必須為文本建立空超級(jí)鏈接(空超級(jí)鏈接是一個(gè)未指派目標(biāo)的超級(jí)鏈接),這樣行為才會(huì)有效。為文本建立空超級(jí)鏈接時(shí),只要先在文檔窗口中選中需要建立空超級(jí)鏈接的文本,然后在屬性面板的“鏈接”文本框中輸入一個(gè)“#”符號(hào)即可。建立空超級(jí)鏈接的目的只是為了應(yīng)用行為,其他情況下不必建立。<54>創(chuàng)建空鏈接要想對(duì)文本設(shè)置行為,首先必須為文本建立空超級(jí)鏈接(134創(chuàng)建電子郵件超級(jí)鏈接電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛,在網(wǎng)頁(yè)中建立電子郵件超級(jí)鏈接可方便網(wǎng)頁(yè)瀏覽者與設(shè)計(jì)者之間的聯(lián)系。<55>創(chuàng)建電子郵件超級(jí)鏈接電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛,在網(wǎng)頁(yè)中建135創(chuàng)建圖像超級(jí)鏈接為一般圖像創(chuàng)建超級(jí)鏈接創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接<56>創(chuàng)建圖像超級(jí)鏈接<56>136為一般圖像創(chuàng)建超級(jí)鏈接<57>為一般圖像創(chuàng)建超級(jí)鏈接<57>137創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接要在一幅比較大的圖片中添加許多超級(jí)鏈接時(shí),應(yīng)該將圖片化整為零,分割成較小的圖片,然后分別為這些小圖像上建立超級(jí)鏈接來(lái)達(dá)到目的,但這時(shí)整幅圖片就不能對(duì)齊,利用Dreamweaver8的圖像熱點(diǎn)超級(jí)鏈接功能就能避免這個(gè)問(wèn)題。<58>創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接要在一幅比較大的圖片中添加許多超級(jí)鏈接時(shí)138創(chuàng)建導(dǎo)航條插入導(dǎo)航條編輯導(dǎo)航條<59>創(chuàng)建導(dǎo)航條<59>139插入導(dǎo)航條導(dǎo)航條一般由圖像或圖像組組成,這些圖像的顯示內(nèi)容隨用戶的操作不同而進(jìn)行相應(yīng)的變化。導(dǎo)航條為訪問(wèn)者瀏覽不同網(wǎng)頁(yè)提供了一條捷徑。<60>插入導(dǎo)航條導(dǎo)航條一般由圖像或圖像組組成,這些圖像的顯示內(nèi)容隨140編輯導(dǎo)航條<61>編輯導(dǎo)航條<61>141上機(jī)實(shí)戰(zhàn)制作如下圖所示導(dǎo)航條。<62>上機(jī)實(shí)戰(zhàn)制作如下圖所示導(dǎo)航條。<62>1424.7插入多媒體(1)插入Flash對(duì)象(2)插入音頻文件(3)插入視頻文件(4)插入JavaApplet<63>4.7插入多媒體(1)插入Flash對(duì)象<63>143插入flash對(duì)象插入Flash動(dòng)畫
插入Flash文本圖像查看器插入Flash按鈕插入Flashpaper插入Flash視頻<64>插入flash對(duì)象插入Flash動(dòng)畫<64>144插入flash動(dòng)畫在Dreamweaver中,可以直接插入發(fā)布后的Flash動(dòng)畫,其具體操作步驟如下:(1) 將光標(biāo)定位在要插入flash動(dòng)畫的位置(2) 選擇“插入”|“媒體”|“flash”命令,或單擊“常用”工具欄按鈕,在彈出的下拉菜單中選擇flash命令,彈出“選擇文件”對(duì)話框。(3) 在“查找范圍”下拉列表框中選擇需要插入的flash動(dòng)畫文件。(4) 單擊確定按鈕,會(huì)在網(wǎng)頁(yè)中出現(xiàn)flash標(biāo)志。如果插入的flash文件不在站點(diǎn)文件夾下,系統(tǒng)會(huì)提示復(fù)制該flash文件到站點(diǎn)文件夾下。<65>插入flash動(dòng)畫在Dreamweaver中,可以直接插入發(fā)145插入flash動(dòng)畫(5)選擇插入到網(wǎng)頁(yè)中的flash動(dòng)畫元件,可以在“屬性”面板中設(shè)置它的高度和寬度。可以點(diǎn)擊“屬性”面板上的“播放”按鈕來(lái)預(yù)覽效果。(6)其他屬性設(shè)置為寬和高:用于以像素為單位指定Flash對(duì)象的寬度和高度。因?yàn)镕lash使用的是矢量圖形,所以改變高度和寬度時(shí)不會(huì)影響動(dòng)畫的質(zhì)量。還可以指定英寸、毫米、厘米等等單位。<66>插入flash動(dòng)畫(5)選擇插入到網(wǎng)頁(yè)中的flash動(dòng)畫元件146插入flash動(dòng)畫文件:顯示Flash文件的路徑。單擊后面的瀏覽按鈕可以指定新的動(dòng)畫文件。編輯:此按鈕用于啟動(dòng)MacromediaFlashMX以編輯Flash文件。如果計(jì)算機(jī)上沒有加載MacromediaFlashMX,此按鈕將被禁用。重設(shè)大小:恢復(fù)到Flash文件默認(rèn)尺寸。自動(dòng)播放:選中后Flash電影會(huì)自動(dòng)播放。垂直邊距與水平邊距:設(shè)置Flash文件垂直與水平方向上的空白區(qū)域。品質(zhì):此下拉列表框用于在對(duì)象播放期間控制抗失真。設(shè)置越高,效果越好。比例:此下拉列表框用于指定對(duì)象如何在設(shè)置好的寬度和高度尺寸下顯示?!澳J(rèn)值”設(shè)置顯示整個(gè)對(duì)象。對(duì)齊:此下拉列表框用于指定對(duì)象在頁(yè)面上的對(duì)齊方式。背景顏色:用于指定對(duì)象的背景顏色。參數(shù):可設(shè)定ActiveX參數(shù),這些參數(shù)用于ActiveX控件之間的數(shù)據(jù)交換?!?/p>
演示<67>插入flash動(dòng)畫文件:顯示Flash文件的路徑。單擊后面的147插入flash文本用戶如果希望制作一個(gè)有Flash動(dòng)畫效果的文字。在Dreamweaver中很容易實(shí)現(xiàn)。將光標(biāo)放在要插入Flash文字的位置,然后在“常用”插入工具欄中單擊“媒體”按鈕旁的下拉按鈕,在打開的“媒體”下拉列表中選擇“Flash文本”。此時(shí)將打開“插入Flash文本”對(duì)話框。●
演示<68>插入flash文本用戶如果希望制作一個(gè)有Flash動(dòng)畫效果的148圖像查看器選擇“插入”菜單|“媒體”|“圖像查看器”,可以自動(dòng)創(chuàng)建一個(gè)用于瀏覽多幅圖像的Flash動(dòng)畫?!?/p>
演示<69>圖像查看器選擇“插入”菜單|“媒體”|“圖像查看器”,可以自149插入Flash按鈕在編輯的文檔中如要插入Flash按鈕,先將光標(biāo)放在要插入的位置上,然后在“常用”插入工具欄中單擊媒體按鈕旁的下拉按鈕,在打開的媒體下拉列表中選擇“Flash按鈕“。●
演示<70>插入Flash按鈕在編輯的文檔中如要插入Flash按鈕,先將1
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年中國(guó)七合一騎馬機(jī)市場(chǎng)調(diào)查研究報(bào)告
- 2025至2030年中國(guó)燃煤臺(tái)車加熱爐數(shù)據(jù)監(jiān)測(cè)研究報(bào)告
- 2025至2030年中國(guó)有機(jī)罩標(biāo)志燈數(shù)據(jù)監(jiān)測(cè)研究報(bào)告
- 個(gè)人股東股權(quán)轉(zhuǎn)讓及公司經(jīng)營(yíng)權(quán)轉(zhuǎn)移合同(2025年度)4篇
- 二零二五年度建筑消防設(shè)施安全檢測(cè)合同(2025版)2篇
- 二零二五個(gè)人住房公積金貸款合同范本4篇
- 二零二五版物流倉(cāng)儲(chǔ)投資合同協(xié)議書范本3篇
- 二零二五年度住宅建筑工程質(zhì)量保修合同3篇
- 二零二五版攝影棚租賃居間業(yè)務(wù)合同書3篇
- 2025版航空航天鋼材料采購(gòu)合同樣本
- 充電樁知識(shí)培訓(xùn)課件
- 2025水利云播五大員考試題庫(kù)(含答案)
- 老年髖部骨折患者圍術(shù)期下肢深靜脈血栓基礎(chǔ)預(yù)防專家共識(shí)(2024版)解讀
- 長(zhǎng)期處方管理規(guī)范
- 四合一體系基礎(chǔ)知識(shí)培訓(xùn)課件
- ICD-9-CM-3手術(shù)與操作國(guó)家臨床版亞目表
- 小學(xué)語(yǔ)文教師基本功大賽試卷及答案
- 汽車電氣設(shè)備檢測(cè)與維修中職全套教學(xué)課件
- 《鐵路超限超重貨物運(yùn)輸規(guī)則》(2016)260
- DB35T 1345-2013蘭壽系列金魚養(yǎng)殖技術(shù)規(guī)范
- 工行網(wǎng)銀代發(fā)工資操作流程
評(píng)論
0/150
提交評(píng)論