網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)技術(shù)教程 第3章 靜態(tài)頁(yè)面制作

1、一、網(wǎng)頁(yè)布局-表格二、超鏈接三、添加文本四、插入圖像五、用框架布局頁(yè)面靜態(tài)頁(yè)面設(shè)計(jì)一、網(wǎng)頁(yè)布局1、布局的實(shí)質(zhì)n布局布局: 就是在頁(yè)面上劃分出不同的區(qū)域，按照設(shè)計(jì)的原則和方法，把不同的內(nèi)容放置到不同的位置上，并通過(guò)色彩調(diào)和出不同的網(wǎng)站基調(diào)，使網(wǎng)頁(yè)內(nèi)容形成一個(gè)有機(jī)的整體，充分表達(dá)網(wǎng)站主題的過(guò)程。n布局的方法布局的方法 :表格、層、框架 n利用表格布局：利用表格布局： 在插入面板中選擇“常用”標(biāo)簽，點(diǎn)擊按鈕，彈出 “插入表格”對(duì)話框，設(shè)置相應(yīng)的參數(shù)來(lái)插入表格。也可以通過(guò)選擇“【插入】【表格】”菜單命令打開(kāi)“插入表格”對(duì)話框?！安迦氡砀瘛睂?duì)話框 l行數(shù)行數(shù)：新插入的表格的行數(shù)，可以更改數(shù)值來(lái)確定行數(shù)。

2、 l列數(shù)列數(shù)：新插入的表格的列數(shù)，可以更改數(shù)值來(lái)確定列數(shù)，行、列數(shù)控制表格劃分的區(qū)域個(gè)數(shù)（行列）。l表格寬度表格寬度：表格的寬度可以選擇是占頁(yè)面寬度的百分比（單位為百分比）或者固定尺寸（單位為像素）。l 邊框粗細(xì)邊框粗細(xì)：表格的邊界寬度，單位為像素，表格的屬性設(shè)置中將詳細(xì)講解邊框、填充值和間距值的區(qū)別。l 單元格邊距：?jiǎn)卧襁吘啵簡(jiǎn)卧襁吙蚝蛦卧駜?nèi)容的間隔距離。l 單元格間距：?jiǎn)卧耖g距：?jiǎn)卧窈蛦卧裰g的間隔距離。l 頁(yè)眉：頁(yè)眉：把表格的第一行或第一列作為標(biāo)題行或標(biāo)題列。 作為標(biāo)題行或標(biāo)題列的行或列的內(nèi)容將以粗體的形式顯示。l 標(biāo)題：標(biāo)題：提供一個(gè)顯示在表格外的表格標(biāo)題。l 對(duì)齊標(biāo)題：對(duì)

3、齊標(biāo)題：指定表格標(biāo)題相對(duì)于表格的顯示位置。l 摘要：摘要：給出表格的說(shuō)明。該文本不會(huì)顯示在用戶的瀏覽器中。1.表格的屬性設(shè)置（1）“表格Id”是表格的ID，有時(shí)動(dòng)態(tài)更改表格屬性時(shí)要用到它。（2）“行”和“列”是表格中行和列的數(shù)目。（3）“寬”和“高”是表格的寬度和高度，以像素為單位或者是按占瀏覽器窗口寬度的百分比計(jì)算的。（4）“填充”是單元格內(nèi)容和單元格邊界之間的像素?cái)?shù)。（5）“間距”是相鄰的單元格之間的像素?cái)?shù)。（6）“對(duì)齊”指表格相對(duì)于同一段落中其他元素（如文本或圖像）的顯示位置。居左、居中還是居右。（7）“邊框”指表格邊框的寬度（以像素為單位）（8）“清除列寬”按鈕 和“清除行高”按鈕 是

4、清除表格中所有顯示指定的行高和列寬值。（9）“將表格寬度轉(zhuǎn)換成像素”和“將表格高度轉(zhuǎn)換成像素”按鈕是將表格中列的寬度或高度設(shè)置為以像素為單位的當(dāng)前數(shù)值。（10）“將表格寬度轉(zhuǎn)換成百分比”和“將表格高度轉(zhuǎn)換成百分比”按鈕是將表格中列的寬度或高度設(shè)置為按占文檔窗口寬度百分比表示的當(dāng)前寬度。（ 11）“背景顏色”指定表格的背景顏色。（12）“邊框顏色”指定表格的邊框顏色。（13）“背景圖像”指定表格的背景圖像。n選中一個(gè)單元格n選中一行n選中一列n選中不相鄰的單元格(Ctrl)n插入刪除行和列（鼠標(biāo)右鍵“表格”選項(xiàng)）2單元格的操作3.單元格屬性（1）“合并單元格”按鈕 可將所選的多個(gè)連續(xù)單元格、行或

5、列合并為一個(gè)單元格。（2）“拆分單元格”按鈕 可將一個(gè)單元格分成兩個(gè)或是更多的單元格。單擊該按鈕，會(huì)打開(kāi)“拆分單元格”對(duì)話框，如圖 所示。在該對(duì)話框中可以選擇將選中的單元格拆分成“行”或“列” （3）“水平”文本框：設(shè)置單元格內(nèi)對(duì)象的水平對(duì)齊方式。（4）“垂直”文本框：設(shè)置單元格內(nèi)對(duì)象的垂直對(duì)齊方式。（5）“寬”和“高”文本框：設(shè)置單元格的寬度和高度，可以用像素或百分比來(lái)表示。（6）“不換行”復(fù)選框：設(shè)置單元格文本是否換行。如果選擇該復(fù)選框，則當(dāng)輸入的數(shù)據(jù)超出單元格寬度時(shí)，單元格會(huì)自動(dòng)調(diào)整寬度來(lái)容納數(shù)據(jù)。（7）“標(biāo)題”復(fù)選框：如果選擇該復(fù)選框，可以將所選單元格的格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情

6、況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中對(duì)齊。（8）“背景”文本框：設(shè)置單元格的背景圖像。（9）“背景顏色”文本框：設(shè)置單元格的背景顏色。（10）“邊框”文本框：設(shè)置單元格邊框的顏色。例：網(wǎng)頁(yè)模板的設(shè)計(jì)使用模板提高網(wǎng)頁(yè)制作效率 n模板是網(wǎng)頁(yè)編輯軟件生成具有相似結(jié)構(gòu)和外觀的一種網(wǎng)頁(yè)制作功能。如果希望站點(diǎn)中的網(wǎng)頁(yè)享有某種特性，例如，相同的布局結(jié)構(gòu)，相似的導(dǎo)航欄等內(nèi)容，模板是是非常有用的。n模板是由兩類區(qū)域組成的：鎖定區(qū)域和可編輯區(qū)域。當(dāng)某個(gè)文檔從某些模板中創(chuàng)建時(shí)，可編輯區(qū)域則成為唯一可以被改變的地方。1直接新建模板n在Dreamweaver中可以直接創(chuàng)建模板文件，具體步驟如下： （1）選擇“文件”

7、“新建”命令，打開(kāi)“新建文檔”的對(duì)話框，在對(duì)話框的“常規(guī)”選項(xiàng)卡中選擇“類別”中的“模板頁(yè)”中的“HTML模板”選項(xiàng) 2從現(xiàn)有頁(yè)面生成模板對(duì)于已經(jīng)設(shè)計(jì)好的網(wǎng)頁(yè)文檔，如果覺(jué)得有必要作為模板文檔，則將其另存為模板即可，具體操作如下：n（1）打開(kāi)要另存為模板的文檔網(wǎng)頁(yè)，選擇“文件”“另存為模板”命令，n（2）打開(kāi)“另存為模板”對(duì)話框，在對(duì)話框中，在“站點(diǎn)”下列列表中選擇相應(yīng)的站點(diǎn)，在“另存為”文本框中輸入模板的名稱，單擊“保存”按鈕，即可將文件保存為模板。n1.執(zhí)行“插入表格”命令，彈出“表格”對(duì)話框，設(shè)置行數(shù)為“7”，列數(shù)為“7”，表格寬度設(shè)置為“930”像素，高設(shè)置為“130”像素。單擊“確定”

8、按鈕，插入一個(gè)7行7列的表格。n2.設(shè)置表格前3行（單擊標(biāo)簽）高度為43，后5列寬度為54，即頁(yè)面頭部右上角3.模板制作過(guò)程：n3.將第1列前3行單元格合并，設(shè)置寬度為215，將第2列前3行單元格合并，設(shè)置寬度為481n 4.將第4行單元格合并，并插入寬度為100%的表格，1行6列5.第6行后6列合并，第1列中插入6行1列表格，并設(shè)置相應(yīng)高度6.設(shè)置背景圖片和背景顏色7.插入背景圖片8.將光標(biāo)至于要?jiǎng)?chuàng)建可編輯區(qū)域的位置，選擇“插入”“模板對(duì)象”“可編輯區(qū)域”命令，打開(kāi)“新建可編輯區(qū)域”對(duì)話框 。9.利用模板創(chuàng)建頁(yè)面n選擇“文件”“新建”命令，打開(kāi)“從模板新建”對(duì)話框，在“模板”選項(xiàng)卡中選擇站點(diǎn)

9、中的模板，點(diǎn)擊創(chuàng)建按鈕，就可以創(chuàng)建一個(gè)模板頁(yè)面。二、超鏈接 n在一個(gè)文檔中可以創(chuàng)建幾種類型的鏈接：n 鏈接到其它文檔或文件（如圖形、影片、PDF 或聲音文件）的鏈接。n 命名錨記鏈接，此類鏈接跳轉(zhuǎn)至文檔內(nèi)的特定位置。n 電子郵件鏈接，此類鏈接新建一個(gè)收件人地址已經(jīng)填好的空白電子郵件。n 空鏈接和腳本鏈接，此類鏈接使您能夠在對(duì)象上附加行為，或者創(chuàng)建執(zhí)行 JavaScript 代碼的鏈接。1.普通超級(jí)鏈接或者可以點(diǎn)擊“瀏覽”按鈕為圖片添加鏈接n在默認(rèn)情況下，被鏈接的文件在當(dāng)前窗口或框架內(nèi)打開(kāi)。要使被鏈接的文檔顯示在其他窗口或新的窗口或框架內(nèi)，則需設(shè)置屬性面板中的“目標(biāo)(R)”選項(xiàng)“目標(biāo)(R)”的各

10、選項(xiàng)設(shè)置如下：n _blank。 將鏈接的文檔在一個(gè)新的、未命名的瀏覽器窗口中打開(kāi)。n _parent。 將鏈接的文檔在該鏈接所在框架的父框架或父窗口中打開(kāi)。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔在整個(gè)瀏覽器窗口中打開(kāi)。 n _self。 將鏈接的文檔在鏈接所在的同一框架或窗口中打開(kāi)，此目標(biāo)為默認(rèn)值，即不指定目標(biāo)，則在同一框架或窗口打開(kāi)文檔。 n _top。 將鏈接的文檔在整個(gè)瀏覽器窗口中打開(kāi)，從而取代當(dāng)前窗口的所有框架。 2.錨點(diǎn)鏈接n 錨點(diǎn)鏈接指向的是本網(wǎng)頁(yè)中或其他網(wǎng)頁(yè)中的指定位置。從而使瀏覽者可以快速到達(dá)指定的位置，所以錨點(diǎn)鏈接特別適合各個(gè)章節(jié)之間的跳轉(zhuǎn)，以及長(zhǎng)篇文字的閱讀等。錨

11、點(diǎn)鏈接和其他鏈接制作不太相同，在使用前必須先定義一個(gè)錨點(diǎn)，然后在其他的地方指向這個(gè)錨點(diǎn)。（1）設(shè)置錨點(diǎn)n在設(shè)計(jì)視圖中，將光標(biāo)移動(dòng)到需要設(shè)置錨點(diǎn)的地方，或選擇需要作為錨點(diǎn)的文本。n選擇“插入”“命名錨記”命令，或按下快捷鍵Ctrl+Alt+A，或單擊“常用”插入欄中的“命名錨記”按鈕，將打開(kāi)“命名錨記”對(duì)話框 注：如果在設(shè)計(jì)視圖中沒(méi)有看到錨記，則可以選擇在菜單“查看”“可視化助理”“不可見(jiàn)元素”命令來(lái)進(jìn)行查看。（2）創(chuàng)建錨點(diǎn)鏈接n選擇要建立鏈接的文本或圖像。n在“屬性面板”的“鏈接”文本框中輸入#號(hào)和錨記名稱。例如：輸入“#1”。 3E-mail鏈接n E-mail鏈接也是眾多網(wǎng)站上網(wǎng)頁(yè)的重要內(nèi)

12、容之一，瀏覽者只需要在其上單擊鼠標(biāo)，就可以打開(kāi)郵件發(fā)送程序，與企業(yè)或個(gè)人進(jìn)行交流。電子郵件鏈接與其他超級(jí)鏈接稍微有不同，鏈接地址不再以http開(kāi)頭，而是mailto，設(shè)置鏈接的方式與其他鏈接一樣。n在設(shè)計(jì)視圖中，選擇要作為電子郵件鏈接的文字或?qū)⒐鈽?biāo)置于需要設(shè)置電子郵件鏈接的地方。n選擇菜單“插入”“電子郵件鏈接”命令，或單擊“常用”插入欄中的“電子郵件鏈接”按鈕，將打開(kāi)“電子郵件鏈接”對(duì)話框 n“屬性”面板窗口如圖所示，也可以在文檔窗口輸入文字，在屬性窗口中修改鏈接的E-mail地址。 4.空鏈接n相比上面介紹的其他所有超鏈接種類，空鏈接最為獨(dú)特，它是一種沒(méi)有鏈接對(duì)象的鏈接。空鏈接中的目標(biāo)UR

13、L是用“#”來(lái)表示的，在制作鏈接時(shí)，只要在“屬性”面板的“鏈接”文本框中錄入“#”標(biāo)記即可 5腳本鏈接n腳本鏈接是一種特殊類型的鏈接，通過(guò)單擊帶有腳本鏈接的文本或?qū)ο?，可以運(yùn)行相應(yīng)的腳本及函數(shù)（如JavaScript、VBScript等），從而為瀏覽者提供許多附加信息。 n在文檔窗口，選擇要?jiǎng)?chuàng)建鏈接的文本或其他對(duì)象。n在“屬性”面板中的“鏈接”文本框中輸入“JavaScript：”，接著輸入相應(yīng)的JavaScript代碼或函數(shù)，如JavaScript:alert(您好,謝謝光臨！)三、添加文本n1 輸入普通文本： 在Dreamweaver8中輸入文本的方法有很多?？梢灾苯釉谖臋n窗口中輸入文本，

14、也可以從其他文檔中剪切并粘貼或?qū)胛谋?。n2輸入特殊字符 單擊“插入欄”左側(cè)的下拉按鈕，在打開(kāi)的下拉列表中選擇“文本”選項(xiàng)，然后單擊最右邊的“字符”下拉按鈕。 在彈出的下拉菜單中選擇合適的特殊字符，如、等。如果沒(méi)有合適的字符，可以選擇“其他字符”選項(xiàng) 3輸入空格n因?yàn)镠TML有規(guī)定，連續(xù)多個(gè)空格將被忽視，只顯示一個(gè)空格，所以Dreamweaver中不能直接輸入多個(gè)空格，要想輸入多個(gè)空格 ： （1）切換中文輸入法為全角模式，輸入全角的空格。 （2）單擊“文本”插入欄中的“字符”下拉菜單按鈕，在下拉列表中選擇“不換行空格”命令。 （3）在HTML代碼中要插入空格的位置輸入多個(gè)“ 

15、”，在設(shè)計(jì)視圖顯示的就是輸入了多個(gè)空格。4輸入日期（1）在設(shè)計(jì)視圖中直接輸入日期的文本。（2）單擊“常用”插入欄中的“日期”按鈕，在彈出的“插入日期”對(duì)話框中選擇需要的日期格式并單擊確定。 n選擇“存儲(chǔ)時(shí)自動(dòng)更新”復(fù)選框，則在日期格式插入到文檔中后可以對(duì)其進(jìn)行編輯，如果沒(méi)有選這項(xiàng)，插入后變成純文本，不好修改。如果希望在每次保存文檔時(shí)都更新插入的日期，則選擇“儲(chǔ)存時(shí)自動(dòng)更新”。 n如果要更改日期，可以先用鼠標(biāo)選中該對(duì)象，然后單擊“屬性”面板中的“編輯日期格式”按鈕， 5.設(shè)置文本格式1標(biāo)題 在HTML中，一共定義了6級(jí)標(biāo)題，從1級(jí)到6級(jí)，字體大小依次遞減。 （1）選擇相應(yīng)的文本，選擇“文本”“段

16、落格式”命令，然后在子菜單中選擇相應(yīng)的標(biāo)題。 （2）選擇相應(yīng)的文字，在“屬性”面板上的“格式”下拉列表中選擇相應(yīng)的標(biāo)題。 2字體對(duì)文本進(jìn)行字體設(shè)置的方法有以下兩種： （1）選擇要設(shè)置字體的文本，然后選擇 “文本”“字體”命令，在彈出的子菜單中選擇合適的字體類型。 （2）選擇要設(shè)置字體的文本，單擊“屬性”面板上的“字體”下拉按鈕，在下拉列表中選擇合適的字體類型。如果沒(méi)有找到合適的字體，單擊“編輯字體列表”命令，將彈出“編輯字體列表”對(duì)話框 3顏色（1）選擇要設(shè)置顏色的文本，然后選擇“文本”“顏色”命令，將彈出“顏色”對(duì)話框（windows標(biāo)準(zhǔn)顏色對(duì)話框）。（2）選擇要設(shè)置顏色的文本，單擊“屬性”

17、面板上的“文本顏色”按鈕，打開(kāi)顏色選擇器。 （3）在“屬性”面板上點(diǎn)擊“頁(yè)面屬性”，或者選擇菜單“修改”“頁(yè)面屬性”命令，打開(kāi)“頁(yè)面屬性”對(duì)話框，可以設(shè)置文本的字體顏色 4文本大小n選擇要設(shè)置的文本，在“屬性”面板上的“大小”下拉列表中選擇合適的文本大小，也可以在文本框中直接輸入數(shù)值來(lái)改變文本大小，如果不想設(shè)置，則選擇“無(wú)”選項(xiàng)，此時(shí)，文本就恢復(fù)為默認(rèn)的文本大小。 5文本的樣式： 文本的樣式，即文本的顯示方式，如加粗、傾斜、下劃線和刪除線等。 設(shè)置文本樣式的方法是選擇要設(shè)置的文本，然后選擇菜單“文本”“樣式”命令 6對(duì)齊n對(duì)齊可以將幾個(gè)段落相對(duì)于文檔窗口進(jìn)行對(duì)齊，有4種對(duì)齊方式：左對(duì)齊、居中對(duì)

18、齊、右對(duì)齊、兩端對(duì)齊。 設(shè)置方法同上所述，可以選擇菜單“文本”“對(duì)齊”命令來(lái)實(shí)現(xiàn)，也可以在“屬性”面板上單擊對(duì)齊方式的按鈕來(lái)實(shí)現(xiàn) 。7縮進(jìn)和凸出縮進(jìn)和凸出有兩種設(shè)置方法：（1）將光標(biāo)至于要設(shè)置縮進(jìn)的文本中，選擇菜單“文本”“縮進(jìn)”命令，就可以將文本向右移兩個(gè)字符的位置。選擇“文本”“凸出”命令，則可以將文本向左移兩個(gè)字符的位置。（2）在“屬性”面板中點(diǎn)擊縮進(jìn)和凸出的圖標(biāo) ，也可以進(jìn)行設(shè)置。8文本列表（1）項(xiàng)目列表的類型 項(xiàng)目列表根據(jù)各個(gè)項(xiàng)目之間是否有先后次序，可以分為有序列表和無(wú)序列表。 無(wú)序列表表示各個(gè)項(xiàng)目之間沒(méi)有先后次序，通常用正方形、菱形等符號(hào)作為列表項(xiàng)的前綴。而有序列表正好相反，各項(xiàng)目

19、之間具有明確的先后關(guān)系，前綴符號(hào)常常是阿拉伯?dāng)?shù)字、羅馬數(shù)字和英文字母等。 （2）對(duì)現(xiàn)有文檔進(jìn)行項(xiàng)目列表 n創(chuàng)建無(wú)序列表 選擇所輸入的文本，然后選擇菜單“文本”“列表”“項(xiàng)目列表”命令，或者單擊“屬性”面板下方的“項(xiàng)目列表”按鈕。n創(chuàng)建有序列表 選擇所輸入的文本，然后選擇“文本”“列表”“編號(hào)列表”命令，或者單擊“屬性”面板下方的“編號(hào)列表”按鈕。n（3）設(shè)置列表屬性 在介紹建立有序列表和無(wú)序列表時(shí)，默認(rèn)只有一種前綴，其實(shí)還可以通過(guò)修改列表屬性來(lái)改變前綴。 選擇“文本”“列表”“屬性”命令，打開(kāi)“列表屬性”對(duì)話框 n列表類型列表類型指定列表屬性，而列表項(xiàng)目列表項(xiàng)目指定列表中的個(gè)別項(xiàng)目。使用彈出式

20、菜單選擇項(xiàng)目、編號(hào)、目錄或菜單列表。根據(jù)所選的“列表類型”，對(duì)話框中將出現(xiàn)不同的選項(xiàng)。n樣式樣式確定用于編號(hào)列表或項(xiàng)目列表的編號(hào)或項(xiàng)目符號(hào)的樣式。所有列表項(xiàng)目都將具有該樣式，除非為列表項(xiàng)目指定新樣式。n開(kāi)始計(jì)數(shù)開(kāi)始計(jì)數(shù)設(shè)置第一個(gè)編號(hào)列表項(xiàng)的值。文字變化典型實(shí)例n在網(wǎng)頁(yè)中插入文字并對(duì)文字進(jìn)行修飾的方法，包括色彩變化、大小變化、特殊字符、斜體粗體、段落縮進(jìn)、對(duì)齊效果等。靈活掌握這些方法，對(duì)網(wǎng)頁(yè)制作能起到很大的幫助。四、插入圖像n1 插入圖像對(duì)象 在Dreamweaver中向網(wǎng)頁(yè)文件插入圖像，Dreamweaver會(huì)自動(dòng)生成該圖像的路徑引用，如果要是圖像能夠正確地在網(wǎng)頁(yè)中顯示，必須保證此圖像文件在當(dāng)

21、前的站點(diǎn)內(nèi)。如果不在站點(diǎn)內(nèi)，Dreamweaver會(huì)提示是否將此圖像復(fù)制到當(dāng)前站點(diǎn)的文件夾中。(1)插入單個(gè)圖像n選擇要插入圖像的位置，然后選擇“插入”“圖像”命令，或者單擊“常用”插入欄中的“圖像”“圖像”按鈕 n在彈出的“選擇圖像源文件”對(duì)話框中，選擇本地的圖像文件 (2)插入圖像占位符 圖像占位符，是最終圖像的一個(gè)暫時(shí)替代品。雖然沒(méi)有最終的圖像，但是可以讓設(shè)計(jì)者很直觀的看到設(shè)計(jì)的整體效果。n插入圖像占位符的步驟如下： 選擇要插入圖像占位符的位置，然后選擇“插入”“圖像對(duì)象”“圖像占位符”命令，或者單擊“常用”插入欄中的“圖像”“圖像占位符”按鈕，將彈出“圖像占位符”對(duì)話框. 在“替換文本

22、”文本框中，輸入描述此圖像占位符的文字，當(dāng)瀏覽器不能顯示該圖像占位符時(shí)，就會(huì)顯示該替換文本。選中該圖像占位符，也可以通過(guò)屬性面板來(lái)修改圖像占位符的屬性，如大小，顏色，替換文本等。(3)插入鼠標(biāo)經(jīng)過(guò)的圖像 鼠標(biāo)經(jīng)過(guò)的圖像實(shí)際上是由兩幅圖像組成的，即原始圖像和鼠標(biāo)經(jīng)過(guò)的圖像。原始圖像，是首次網(wǎng)頁(yè)裝載是顯示的圖像；鼠標(biāo)經(jīng)過(guò)的圖像是鼠標(biāo)移動(dòng)到原始圖像上時(shí)，用來(lái)替換原始圖像的圖像。n選擇要插入鼠標(biāo)經(jīng)過(guò)的圖像的位置，選擇“插入”“圖像對(duì)象”“鼠標(biāo)經(jīng)過(guò)圖像”命令，或者單擊“常用”插入欄中的“圖像”“鼠標(biāo)經(jīng)過(guò)圖像”按鈕，將彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。(4)插入導(dǎo)航條 導(dǎo)航條由圖像和圖像組組成，這些圖像顯示

23、的內(nèi)容隨用戶操作的變化而變化。導(dǎo)航條通常為站點(diǎn)上的頁(yè)面和文件之間的移動(dòng)提供一條簡(jiǎn)潔的途徑。導(dǎo)航條項(xiàng)目有4種狀態(tài)：一般狀態(tài)、鼠標(biāo)經(jīng)過(guò)狀態(tài)、按下?tīng)顟B(tài)、按下時(shí)鼠標(biāo)經(jīng)過(guò)狀態(tài)。n選擇要插入導(dǎo)航欄的位置，選擇“插入”“圖像對(duì)象”“導(dǎo)航條”命令，或者單擊“常用”插入欄中的“圖像”“導(dǎo)航條”按鈕，將彈出“插入導(dǎo)航條”對(duì)話框 l在導(dǎo)航條里，每個(gè)鏈接圖像即為一個(gè)項(xiàng)目，全部導(dǎo)航條項(xiàng)目都顯示在“導(dǎo)航條元件”列表框中。單擊 “+” 按鈕，將增加一個(gè)項(xiàng)目，在列表框中選擇一個(gè)項(xiàng)目，單擊“-” 按鈕，可以刪除選擇項(xiàng)目。選中一個(gè)項(xiàng)目，單擊“向上向下”按鈕，可以調(diào)整選擇的項(xiàng)目在導(dǎo)航條里的排列位置l“項(xiàng)目名稱”文本框：為項(xiàng)目起一個(gè)

24、名稱，英文或數(shù)字。l“狀態(tài)圖像”文本框：設(shè)置這個(gè)項(xiàng)目原始圖像，可單擊“瀏覽”按鈕，選擇源圖像文件。l“鼠標(biāo)經(jīng)過(guò)圖像”文本框：設(shè)置當(dāng)鼠標(biāo)經(jīng)過(guò)這個(gè)項(xiàng)目的原始圖像時(shí)變成的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“按下圖像”文本框：設(shè)置當(dāng)鼠標(biāo)左鍵按下后，這個(gè)項(xiàng)目所顯示的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“按下時(shí)鼠標(biāo)經(jīng)過(guò)圖像”文本框：設(shè)置當(dāng)鼠標(biāo)左鍵按下后，鼠標(biāo)經(jīng)過(guò)這個(gè)項(xiàng)目所變成的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“替換文本”文本框：設(shè)置當(dāng)圖像無(wú)法顯示時(shí)，所顯示的文字說(shuō)明。l“按下時(shí)，前往的URL”文本框：設(shè)置當(dāng)單擊這個(gè)項(xiàng)目時(shí)所鏈接的網(wǎng)址。l“插入”下拉列表：設(shè)置導(dǎo)航條的排列方式，選擇“

25、水平”，則導(dǎo)航條將水平排列，如果選擇“垂直”，則導(dǎo)航條將垂直顯示。l“使用表格”復(fù)選框：選擇該復(fù)選框，導(dǎo)航條將用表格排版，每個(gè)鏈接圖像位于一個(gè)單元格內(nèi)。l單擊“確定”按鈕，即可在網(wǎng)頁(yè)中插入一個(gè)導(dǎo)航條。2.設(shè)置圖像屬性n在網(wǎng)頁(yè)中插入原始圖像后，往往達(dá)不到想要的效果，這是就需要對(duì)圖像進(jìn)行相關(guān)的設(shè)置。打開(kāi)文檔，選中要修改的圖像，然后在屬性面板中改變圖像屬性n邊距:是圖像和周圍元素間的距離，在垂直邊距和水平邊距文本框中可為圖像的邊緣添加邊距，單位也是像素。n低解析度源:這里指定在載入主圖像之前所載入的圖像。許多設(shè)計(jì)人員使用二位（黑白）圖像版本，由于他們的數(shù)據(jù)量比較小，在主圖像載入之前能很快顯示，使訪問(wèn)

26、者能對(duì)他們等待的圖像內(nèi)容有所了解。當(dāng)然，在這里也可以指定任何與主圖像大小相同的圖像，不一定是主圖像的縮略圖。3.創(chuàng)建熱區(qū)鏈接 一張圖片內(nèi)可以創(chuàng)建包含多個(gè)鏈接，圖像內(nèi)不同的區(qū)域或文字都可以指向具體鏈接目標(biāo)。圖像圖內(nèi)創(chuàng)建鏈接的區(qū)域稱為“熱區(qū)”，熱區(qū)與鏈接目標(biāo)逐一對(duì)應(yīng)，單擊熱區(qū)后，即可對(duì)鏈接目標(biāo)進(jìn)行跟蹤、訪問(wèn)。n（1）選中要?jiǎng)?chuàng)建熱點(diǎn)區(qū)域的圖像，打開(kāi)“屬性”面板。n（2）在“屬性”面板中的“地圖”文本框中輸入該熱點(diǎn)區(qū)域的名稱。n（3）創(chuàng)建圓形的熱點(diǎn)區(qū)域，則點(diǎn)擊橢圓形的熱點(diǎn)工具，然后在圖像上的某個(gè)區(qū)域拖拽鼠標(biāo)指針，從而創(chuàng)建一個(gè)圓形的熱點(diǎn)區(qū)域，也可以選擇矩形和多邊形熱點(diǎn)工具來(lái)創(chuàng)建熱點(diǎn)區(qū)域。 l 在“鏈接”

27、文本框設(shè)定鏈接的URL地址。l 在“目標(biāo)”下拉列表中，設(shè)置鏈接目標(biāo)文件的打開(kāi)窗口類型。l 在“替換”文本框中輸入給圖像熱點(diǎn)區(qū)域的替換文字。例2：導(dǎo)航欄五、用框架布局頁(yè)面 n框架的作用就是把瀏覽器窗口劃分為幾個(gè)不同的區(qū)域，每個(gè)區(qū)域顯示不同的網(wǎng)頁(yè)。n常見(jiàn)的框架方式是將左方區(qū)域或上方區(qū)域設(shè)置為目錄區(qū)域，其中包含顯示文件各個(gè)頁(yè)面的目錄索引或?qū)Ш綏l。右方區(qū)域或下方區(qū)域?yàn)橹黧w區(qū)域，顯示網(wǎng)頁(yè)變化的主體內(nèi)容。n用戶單擊目錄索引項(xiàng)或?qū)Ш綏l時(shí)，主體區(qū)域就顯示相應(yīng)的內(nèi)容。而目錄區(qū)域的導(dǎo)航內(nèi)容始終顯示在頁(yè)面上，這樣將重復(fù)區(qū)域固定下來(lái)，當(dāng)向?yàn)g覽器發(fā)出請(qǐng)求時(shí)，只下載變化的網(wǎng)頁(yè)內(nèi)容。n框架集就是框架的集合，實(shí)際上是一個(gè)頁(yè)面

28、，用于在一個(gè)文檔窗口中顯示多個(gè)文檔的框架結(jié)構(gòu)。在框架集中顯示的每個(gè)框架，就是一個(gè)獨(dú)立存在的HTML文件 。1創(chuàng)建框架集（1）創(chuàng)建預(yù)定義框架集：在Dreamweaver中，可以用兩種方式：通過(guò)“布局”插入欄創(chuàng)建框架集，步驟如下：l選擇“布局”插入欄，在“布局”插入欄中選擇“框架”選項(xiàng) 。l打開(kāi)框架選擇面板，選擇一種框架結(jié)構(gòu)，可以是左側(cè)框架、右側(cè)框架、上下框架等。 l單擊某個(gè)框架類型，系統(tǒng)會(huì)自動(dòng)彈出“框架標(biāo)簽輔助功能屬性”對(duì)話框。 l單擊“框架”下列列表，選擇要更改標(biāo)題的框架，然后在“標(biāo)題”文本框中輸入框架標(biāo)題。通過(guò)菜單命令創(chuàng)建新的空框架集l打開(kāi)Dreamweaver，選擇“文件”“新建”菜單命令

29、，打開(kāi)“新建文檔”對(duì)話框，在該對(duì)話框中“常規(guī)”選項(xiàng)卡的“類別”列表框中選擇“框架集”選項(xiàng)（2）編輯框架集）編輯框架集將鼠標(biāo)放在要插入新框架的框架頁(yè)中，選擇“插入”|“HTML”|“框架”命令，在后面的列表中選擇需要的樣式；或者選擇“修改”|“框架頁(yè)”命令，可以進(jìn)行框架的拆分。（3）調(diào)整框架大小l如圖，單擊“可視化助理”按鈕，在彈出的菜單中選擇“框架邊框”并打開(kāi)l將鼠標(biāo)移至“文檔窗口”邊框，當(dāng)鼠標(biāo)指針變?yōu)殡p向箭頭時(shí)，拖動(dòng)鼠標(biāo)即可粗略調(diào)整框架的大小。2存儲(chǔ)框架和框架集（1）保存框架集的所有文件 保存框架集的所有文件的方法為：選擇“文件”“保存全部”命令，將彈出“另存為”對(duì)話框，提示保存框架文件；或者也可以依次一個(gè)一個(gè)保存框架集和框架。在保