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