【文章內(nèi)容簡(jiǎn)介】 網(wǎng)頁(yè)素材的準(zhǔn)備和頁(yè)面內(nèi)容的填充 13 在向網(wǎng)頁(yè)填充內(nèi)容之前，需要準(zhǔn)備素材，包括網(wǎng)站的 LOGO， Banner，圖片， Flash動(dòng)畫(huà)，各種按鈕，聲音文件，用于布局參考的參考圖像。把這些內(nèi)容 復(fù)制到站點(diǎn)中。教程的實(shí)例是把圖片復(fù)制到站點(diǎn)中的 images文件夾，參考圖像復(fù)制到 image文件夾。 簡(jiǎn)明步驟：準(zhǔn)備各種素材復(fù)制到站點(diǎn)中 → 設(shè)置頁(yè)面的跟蹤圖像 → 插入表格確定尺寸 → 布局 →從資源面板中把資源拖到頁(yè)面。 用 Fireworks制作一個(gè)頁(yè)面的效果圖，或者用一個(gè)已經(jīng)存在的頁(yè)面做布局的參考。打開(kāi)本教程示范站點(diǎn) media，打開(kāi) ，設(shè)置頁(yè)面屬性，選擇跟蹤圖像，點(diǎn)游覽按鈕。 選擇跟蹤圖像，這個(gè)跟蹤圖像，是已經(jīng)做好的圖像。也可以是其它網(wǎng)站頁(yè)面的截圖。如果覺(jué)得跟蹤圖像太亮，可以調(diào)整跟蹤圖像的透明度，當(dāng)透明度為 0％時(shí)，跟蹤圖像就看不到了，百分比越小，跟蹤圖像越不明顯。建議設(shè)置為 50％以下，以便和頁(yè)面內(nèi)容區(qū)別。 設(shè)置了跟蹤圖像的頁(yè)面如下圖。跟蹤圖像并不在最終的頁(yè)面中出現(xiàn)，僅僅是在設(shè)計(jì)中起輔助作用。 插入一 個(gè)寬為 768的圖像，選中這個(gè)表格，設(shè)置這個(gè)表格為居中對(duì)齊。 在 查看 菜單，選擇 跟蹤圖像 子菜單，再選擇 對(duì)齊所選范圍 ，使跟蹤圖像和表格對(duì)齊。 轉(zhuǎn)換到布局選項(xiàng)卡，點(diǎn) 繪制布局表格 ，在頁(yè)面參考跟蹤圖像布局。從上到下，一行一行的畫(huà)好整個(gè)頁(yè)面的表格。 點(diǎn) 繪制單元格按鈕 ，在布局表格里面繪制單元格。 一個(gè)頁(yè)面做好布局之后，再打開(kāi)頁(yè)面屬性，圖像透明度設(shè)置為 10％，就可以填充內(nèi)容了。 打開(kāi)資源面板，把相應(yīng)的資源拖到布局單元格中。 在拖放的過(guò)程中，會(huì)出現(xiàn)選擇對(duì)話(huà)框?？梢暂斎胩鎿Q文本和鏈接。 按照這種方法把素材放到頁(yè)面中。 Flash素材可以用類(lèi)似的方法。文字部分可以手工輸入或者從一個(gè)文本中復(fù)制到單元格中。一個(gè)頁(yè)面的內(nèi)容就填充好了。 在布局視圖中設(shè)置對(duì)象屬性（一） 14 在布局視圖中可以設(shè)置各種對(duì)象的屬性，本篇的主要內(nèi)容是了解各種設(shè)置的作用。 1 給圖像描邊 作用：增加圖片的美觀。 簡(jiǎn)明步驟：選中一個(gè)圖像，邊框設(shè)置為 1，就給圖像加了一個(gè)像素的邊框。選中頁(yè)面中的一個(gè)圖像。 在屬性面板 邊框 中填 1。 經(jīng)過(guò)描邊后的圖像在瀏覽器中顯示如下圖。 2 設(shè)置圖文混排 圖文混排的作用：當(dāng)沒(méi)有設(shè)置圖文混排，頁(yè)面看起來(lái)很不美觀。要使圖像和文字在一起美觀，必須設(shè)置好圖文混排。 簡(jiǎn)明步驟：選中圖片，在屬性面板中設(shè)置對(duì)齊方式為左對(duì)齊或者右對(duì)齊。 采用默認(rèn)設(shè)置時(shí)的圖片和文字： 選中圖片，在屬性面板中選擇對(duì)齊方式為 左對(duì)齊 。 圖文混排的結(jié)果： 3 給圖片增加提示 作用：使用瀏覽者知道所選擇項(xiàng)目的內(nèi)容。 簡(jiǎn)明步驟： 選中一個(gè)圖片，在屬性面板的替代下拉欄，輸入提示文字。 選中一個(gè)圖片。 在屬性面板的替代下拉欄，輸入提示文字。 在瀏覽器中，當(dāng)指向這個(gè)圖片時(shí)，就會(huì)出現(xiàn)文字提示。 4 創(chuàng)建圖像地圖 作用：當(dāng)點(diǎn)擊一個(gè)圖像的不同部分，可以鏈接到一個(gè)新的網(wǎng)頁(yè)。也可以在當(dāng)前窗口打開(kāi)。 簡(jiǎn)明步驟：選中目標(biāo)圖片 → 選擇屬性面板中的熱點(diǎn)工具 → 用熱工具在圖片中畫(huà)出熱點(diǎn)區(qū)域 →在屬性面板中輸入鏈接地址 ，選擇目標(biāo)窗口打開(kāi)方式。 選中目標(biāo)圖片，選擇屬性面板中的矩形熱點(diǎn)工具。 用熱工具在圖片中畫(huà)出熱點(diǎn)區(qū)域。 在屬性面板中輸入鏈接地址，選擇目標(biāo)窗口打開(kāi)方式。 5 設(shè)置圖像邊距 作用：設(shè)置圖像邊距，可 以使圖像和表格邊框產(chǎn)生一個(gè)邊距，也會(huì)和相鄰的文字或者其它圖片產(chǎn)生一個(gè)邊距。有時(shí)候設(shè)置邊距為一個(gè)非 0的數(shù)值可以起到美觀的作用。但是有的時(shí)候輸入數(shù)值為 0的邊距可以使用頁(yè)面緊湊。 簡(jiǎn)明步驟：選中一個(gè)圖片，在屬性面板中，給垂直邊距和水平邊距輸入數(shù)值。 沒(méi)有設(shè)置邊距的圖片： 輸入了垂直邊距和水平邊距的 效果，明顯和表格邊框有距離。 在布局視圖中設(shè)置對(duì)象屬性（二） 15 1 給單元格設(shè)置顏色 簡(jiǎn)明步驟：選中單元格，在屬性面板中，選擇一種背景顏色。 把鼠標(biāo)放在單元格內(nèi)，出現(xiàn)紅色邊框時(shí)，單擊，就可以選中單元格了。 在屬性面板中，選擇一種背景顏色。 設(shè)置了背景顏色的單元格： 2 設(shè)置單元格的對(duì)齊方式 作用：可以使單元格里的內(nèi)容 ，從不同的地方開(kāi)始。在 “ 垂直 ” 下拉欄選擇頂端，輸入的文字可以從最上面一行開(kāi)始；選擇中間，文字就開(kāi)始從中間開(kāi)始。在 “ 水平 ” 下拉欄，選擇 “ 左對(duì)齊 ” ，文字和單元格左對(duì)齊；選擇 “ 右對(duì)齊 ” ，文字和單元格右對(duì)齊。 簡(jiǎn)明步驟：選中一個(gè)單元格，在屬性面板中的 “ 水平 ” ， “ 垂直 ” 下拉欄選擇一個(gè)參數(shù)。 在屬性面板中的垂直選項(xiàng)欄選擇 “ 中間 ” ，輸入的文字從單元格中間開(kāi)始。 在屬性面板中的垂直選項(xiàng)欄選擇 “ 頂端 ” ，輸入的文字從單元格頂端開(kāi)始。輸入文字常選擇這種方式。 在屬性面板中選擇水平對(duì)齊方式為右對(duì)齊： 在屬性面板中，如果不想文字換行，不要選中 “ 不換行 ” 。這種方式可以保持其它表格不變形。 如果選中 “ 不換行 ” ，文字會(huì)沿一行擴(kuò)張，其它表格也被擠壓變形。 設(shè)置列為自動(dòng)伸展的作用：自動(dòng)伸展列可以隨著瀏覽器調(diào)整大小。 選擇自動(dòng)伸展后的效果如下圖。 選擇固定的寬，輸入數(shù)值可以改變單元格的高度。 表格的使用 16 雖然您能夠在 “布局 ”視圖中調(diào)整絕大部分設(shè)計(jì)元素，但有一些改變卻必須在 “標(biāo)準(zhǔn) ”視圖中才能完成。本文主要內(nèi)容是表格的使用。 主要內(nèi)容： （ 1） 理解單元格，表格，間距，填充，邊框。 （ 2）調(diào)整行和列的寬度、高度。 （ 3）制作一象素表格。 （ 4）拆分和合并單元格。 第一部分： 當(dāng)單元格邊距和單元格間距沒(méi)有指定數(shù)值時(shí)， Netscape Navigator， Microsoft Inter Explorer和 Dreamweaver 都將以間距 2，填充 1 的設(shè)置顯示表格。 填充：?jiǎn)卧駜?nèi)容和單元格邊框之間的距離（單位：象素）。 間距：?jiǎn)卧裰g的距離（單位：象素）。 插入一個(gè)表格，為了便 于分析表格，這里單元格間距設(shè)置為 10。 插入一個(gè)表格： ◇ 單元格：在表格 中點(diǎn)擊以選定單元格，也可以在標(biāo)簽選擇器里點(diǎn)擊 td標(biāo)簽以選擇單元格。 ◇ 表格：在標(biāo)簽選擇器里點(diǎn)擊 table標(biāo)簽以選擇表格。 ◇ 一行：在標(biāo)簽選擇器里點(diǎn)擊 td標(biāo)簽選擇一行。本實(shí)例是以一個(gè)一行二列的表格為基礎(chǔ)的。 ◇ 一個(gè) “一行一列 ”的表格，至少有兩個(gè)邊框。設(shè)置邊框?yàn)?1 邊框顏色黑色的表格如下圖。 ◇ 紅色為表格邊框，綠色為單元格邊框。表格邊框和單元格邊框的顏色可以分別指定。 間距：邊框和邊框之間的距離就是間距。 為了便于觀看填充的效 果，在屬性面板中，填充輸入為 30。 ◇ 填充：?jiǎn)卧襁吙蚝蛢?nèi)容之間的距離就是填充。 第二部分：調(diào)整行和列的寬度 ◇ 鼠標(biāo)放在一列的上面，出現(xiàn)向下的箭頭時(shí)，單擊，就可以選中一列。在屬性面板中可以設(shè)置所選列的寬和高。 鼠標(biāo)放在一行的左邊，出現(xiàn)橫向的箭頭時(shí)，單擊，就可以選中一行。在屬性面板中可以設(shè)置所選行的寬和高。 第三部分：制作一像素表格 ◇ 制作一像素的表格，實(shí)質(zhì)上是設(shè)置間距的大小和顏色。實(shí)例為便于觀看效果，把間距設(shè)置為 10。單元格填充和邊框設(shè)置為 0。單元格填充和邊框不輸入數(shù)值效果類(lèi)似。 在單元格中點(diǎn)擊，或者選中標(biāo)簽選擇器中的 td選中單元格。設(shè)置單元格的背景顏色為白色。 選中表格，設(shè)置表格的背景顏色為黑色。一個(gè) 10 象素寬的表格就做好了。實(shí)際上是把間距的顏色設(shè)置成了黑色。 把間距改成 1。 發(fā)布在瀏覽器中的效果。 第四部分：拆分和合并單元格 ◇ 嵌套表是在表格中的一個(gè)表格。在一個(gè)單元格中，插入一個(gè)表格，就是嵌套表。 ◇ 合并單元格：按 Ctrl，點(diǎn)單元格，選中表格，在屬性面板中點(diǎn) “合并所選單元格，使用跨度 ”。 合并后的效果： 拆分單元格：插入一個(gè)表格。 ◇ 在單元格中單擊，選中單元格。點(diǎn)擊屬性面板中的 “拆分單元格為行或列 ”，設(shè)置拆分方式。 拆分為二行一列的表格如下圖。 各種鏈接的功能和實(shí)現(xiàn)方法 17 指向文檔，圖象，多媒體文件或可下載軟 件的超文本鏈接稱(chēng)作超級(jí)鏈接 , 我們可以為文檔內(nèi)任何地方的任何文本或圖象創(chuàng)建鏈接，包括在標(biāo)題，列表，表格，層或框架中的任何文本或圖象。 超級(jí)鏈接的作用是，可以把一個(gè)網(wǎng)站的網(wǎng)頁(yè)連接起來(lái)，點(diǎn)擊鏈接時(shí)從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，或者跳轉(zhuǎn)到頁(yè)面指定的位置。 本文主要內(nèi)容：各種鏈接的功能和實(shí)現(xiàn)方法。 1 導(dǎo)航鏈接：實(shí)現(xiàn)站點(diǎn)內(nèi)文檔的鏈接。方法一，使用屬性檢查器；方法二，指向文件圖標(biāo)鏈接文檔；方法三，使用拖放創(chuàng)建鏈接。相關(guān)內(nèi)容：在鏈接時(shí)使用的路徑；目標(biāo)文件的打開(kāi)方式。 2 鏈接到文檔中的指定位置，使用錨； 3 空鏈接：是一 個(gè)無(wú)指向的鏈接。使用空鏈接可以為頁(yè)面上的對(duì)象或文本附加行為。 4 創(chuàng)建 javascript 腳本鏈接：用于執(zhí)行 JavaScript 代碼或者調(diào)用 JavaScript 函數(shù)，這樣可以讓來(lái)訪者不用離開(kāi)當(dāng)前 Web 頁(yè)面就可以得到關(guān)于一個(gè)項(xiàng)目的其他信息。當(dāng)來(lái)訪者點(diǎn)擊某指定項(xiàng)目時(shí)，腳本鏈接也可以用于執(zhí)行計(jì)算，表單確認(rèn)和其他處理任務(wù)。 5 創(chuàng)建電子郵件鏈接 6 鏈接到站點(diǎn)中的文檔或者其它站點(diǎn)，可以使用跳轉(zhuǎn)菜單，跳轉(zhuǎn)菜單是文檔中的一種來(lái)訪者可以看見(jiàn)的彈出式菜單，其中列出了鏈接的文檔或文件。 7 給鏈接增加提示，給鏈接增加快捷鍵。 第一部分：創(chuàng)建導(dǎo)航鏈接 ◇ 使用指向文件圖標(biāo)鏈接文檔：選中圖像，將 “屬性 ”檢查器的 “鏈接 ”域右邊的 “指向文件 ”圖標(biāo)拖動(dòng)到站點(diǎn)窗口的文檔中。這種方法方便快捷，推薦使用。示例中指向一個(gè)文件夾，如果發(fā)布到網(wǎng)上后，自動(dòng)會(huì)打開(kāi)這個(gè)文件夾下的默認(rèn)首頁(yè)文件 。 ◇ 使用屬性檢查器：選中示例中的圖像，也可以是文字，點(diǎn)擊屬性面板中的 “瀏覽文件 ”圖標(biāo)。 ◇ 選中一個(gè)文件。會(huì)出現(xiàn)一個(gè)文件相對(duì)于 “文檔 ”， “站點(diǎn)根目錄的選擇 ”。文檔相對(duì)路徑是最適合用于本地鏈接的路徑類(lèi)型，適合絕大多數(shù) Web 站點(diǎn)，推薦使用。 ◇ 根相對(duì)路徑：如果在一個(gè)使用多臺(tái)服務(wù)器的大型 Web 站點(diǎn)或一臺(tái)服務(wù)器上有多個(gè)站點(diǎn)的情況下工作，可能需要使用這種類(lèi)型的路徑。很少用到這種路徑。如果沒(méi)有服務(wù)器的控制權(quán)限，不要使用這種方式！ ◇ 絕對(duì)路徑：完整的 URL，稱(chēng)作絕對(duì)路徑。例如在鏈接域輸入 ◇ 從打開(kāi)文檔的選取中創(chuàng)建鏈接：選中文字，按 Shift 鍵，拖動(dòng)出現(xiàn) “指 向文件 ”圖標(biāo)，把 “指向文件 ”圖標(biāo)拖向目標(biāo)文件，就會(huì)建立鏈接。 ◇ 選擇被鏈接文檔要打開(kāi)的位置： 若要使被鏈接文 檔不出現(xiàn)在當(dāng)前窗口或框架中，從屬性面板的 “目標(biāo) ”彈出式菜單選取一個(gè)選項(xiàng)。 _blank 在新的未命名的瀏覽器窗口中加載鏈接文檔。 _parent 在父框架頁(yè)或包含該鏈接的框架窗口中加載鏈接文檔。如果包含鏈接的框架不是嵌套的，則鏈接文檔將加載到整個(gè)瀏覽器窗口中。 _self 將鏈接文檔加載到與鏈接相同的框架或窗口中，該目標(biāo)是默認(rèn)值，所以通常您不需要指定它。 _top 將在整個(gè)瀏覽器窗口中加載鏈接文件，同時(shí)移除所有框架。 一個(gè)網(wǎng)站中，第一級(jí)鏈接或者導(dǎo)航鏈接選擇 _self，第二級(jí)鏈接和友情鏈接選擇 _blank。 第二部分：使用錨 簡(jiǎn)明步驟：選中文本 → 在目標(biāo)文檔中插入錨標(biāo)記 → 命名 → 拖動(dòng) “指向文件 ”圖標(biāo)到文本。 ◇ 鏈接到文檔中的指定位置：在需要插入錨的地方，點(diǎn)一下光標(biāo)，然后單擊常用面板上的命名錨記工具。 鍵入錨記名稱(chēng)，一個(gè)站點(diǎn)中的錨記名稱(chēng)只可以是唯一的，否則會(huì)出現(xiàn)錯(cuò)誤。 在文檔中選取要?jiǎng)?chuàng)建鏈接的文本，打開(kāi)您需要鏈接的命名錨記所在文檔，不一定要是當(dāng)前文檔，可以是站點(diǎn)中 的其它文檔，點(diǎn)擊屬性面板中的 “指向文件 ”圖標(biāo)，并將它拖動(dòng)到您需要鏈接的錨記處。 第三部分：使用空鏈接 使用空鏈接可以為頁(yè)面上的對(duì)象或文本附加行為。創(chuàng)建步驟： 1. 在文檔窗口中，選中要設(shè)置鏈接的文本、圖像或其他對(duì)象。 2. 在屬性面板的鏈接框中，只輸入一個(gè) “”號(hào)。 3. 如果單擊這種地址 為一個(gè) “”的鏈接，無(wú)論當(dāng)前你處于文檔的什么地方，都會(huì)自動(dòng)跳轉(zhuǎn)到文檔的開(kāi)頭位置。很多人非常討厭這種情況，因此出現(xiàn)很多插件?？梢杂?“”來(lái)代替 “”，單擊這樣的鏈接的時(shí)候，會(huì)保持當(dāng)前頁(yè)面的瀏覽位置。 4. 還可以在屬性面板的鏈接框中輸入 javascript:。創(chuàng)建空鏈接。 第四部分：創(chuàng)建 javascript 腳本鏈接 1. 在文檔窗口中選取文本，圖象或?qū)ο? 2. 在 “屬性 ”檢查器的 “鏈接 ”欄中鍵入 javascript:，其后緊接 JavaScript 代碼或函數(shù)調(diào)用。 例如在鏈接欄中鍵入 javascript:alert(39。哈哈你上當(dāng)了 39。)創(chuàng)建一個(gè)鏈接，點(diǎn)擊鏈接后就會(huì)出現(xiàn)一個(gè)警告框 第五部分：創(chuàng)建電子郵件鏈接 方法一：選取需要?jiǎng)?chuàng)建鏈接的文本或者圖像，