【正文】 “ Macromedia” “ Macromedia Dreamweaver 8”命令，啟動已安裝的 Dreamweaver 程序。 保存網(wǎng)頁 新建網(wǎng)頁后，需要對網(wǎng)頁進行保存。 步驟 1：在 Dreamweaver 編輯窗口中，選擇菜單“文件” “保存”命令，在“另存為”對話框中選擇“東方日月城”文件夾，在“文件名”文本框中輸入要保存文檔的名稱為“ index”，選擇“保存類型”為“ *所有文檔（ *.htm。 步驟 2：單擊“保存”按鈕，完成首頁的保存。設(shè)置網(wǎng)頁標題有兩種方法，一種是在 Dreamweaver 文檔工具欄的“標題”文本框中輸入標題，如圖 23 所示。 步驟 1：通常屬性面板是打開的，顯示在 Dreamweaver編輯窗口下方。 步驟 2：單擊屬性面板中“頁面屬性”按鈕，在“頁面屬性”對話框中可以設(shè)置網(wǎng)頁的背景顏色、文本顏色等。 步驟 3：在“標題”文本框中輸入網(wǎng)頁標題“東方日月城歡迎您！”，如圖 24 所示。 如果在頁面制作過程中需要修改頁面屬性，隨時可以單擊屬性面 板中的“頁面屬性”按鈕進行重新設(shè)置。 步驟 1：單擊文檔工具欄的“拆分”按鈕 ，在 body代碼中輸入如下代碼： BgColor=ffffff leftmargin=“ 0” topmargin=“ 66” bottomMargin=0 marginwidth=“ 0” 此代碼是為了設(shè)置網(wǎng)頁的背景顏色，以及網(wǎng)頁中的元素與周圍邊框的距離。 步驟 3：在網(wǎng)頁編輯窗口中單擊鼠標左鍵，插入鼠標光標。 步驟 4：在“行數(shù)”文本框中輸入“ 9”，在“列數(shù)”文本框中輸入“ 1”，在“表格寬度”文本框中輸入“ 100”，在后面的選擇框中選擇表格單位“百分比”，隨后在“邊框粗細”、“單元格邊距”和“單元格間距”文本框中分別輸入“ 0”，這樣就設(shè)置了一個 9 行 1 列，寬度為 100%的表格，如圖 25所示。 步驟 6：在第 1 行單元格中單擊鼠標左鍵，插入光標。在“查找范圍”下拉列表中打開“ images”文件夾，然后選中圖像“ ”。 步驟 8：在第 2 行單元格中單擊鼠 標左鍵，插入光標。 步驟 9：在第 3 行單元格中單擊鼠標左鍵，插入光標。在“高”文本框中輸入“ 6”，但此時單元格高度并沒有變化，因為在單元格代碼中的“ ”限制了單元格的設(shè)置。 13 步驟 10：單擊“拆分”按鈕，在此單元格代碼中，拖動鼠標選中“ ”，然后單擊鍵盤空格鍵。在第 4 行單元格中插入光標，單擊屬性面板中“拆分單元格為行或列”按鈕 ，在彈出的“拆分單元格”對話框中選擇“列”單選框，在“列數(shù)”文本框中輸入“ 2”，表示拆分單元格為 2 列，如圖26所示。在左側(cè)單元格中插入光標，單擊工具欄中的“圖像”按鈕 ，打開“選擇圖像源文件”對話框，打開“ images”文件夾，可以在圖 片列表空白處單擊鼠標右鍵，選擇菜單“查看” “縮略圖”命令，這 樣 可 以 看 到 圖 片 的 小 樣 ， 更 方 便 查 找 需 要 手 稿 的 圖 片 。 步驟 13：單擊“確定”按鈕，圖片插入到單元格中。 步驟 15：單擊“確定”按鈕后，在單元格中插入了背景圖像。然后，在屬性面板“背景顏色”文本框中輸入色標值“ 393C4A” 步驟 17：在第 6 行單元格中插入光標，在屬性面板“高”文本框中輸入“ 100”，設(shè)置單元格高度。 步驟 18：此時網(wǎng)站首頁基本制作完成，在下方的其余 3 行單元格沒有用了，拖動鼠標左鍵，選中這 3行單元格，按下鍵盤 Delete 鍵就可以刪除了。 制作二級內(nèi)容頁 首頁制作完成后，下面開始制作二級內(nèi)容頁。 步驟 1：選擇菜單“文件” “新建”命令，打開“新建文檔”對話框。 14 圖 27 “新建文檔”對話框 步驟 2：單擊“創(chuàng)建”按鈕，創(chuàng)建了一個新網(wǎng)頁。 步驟 3：單擊“拆分”按鈕，在代碼 body中加入如下代碼： leftMargin=0 topMargin=0 marginheight=“ 0” marginwidth=“ 0” 輸入完成后，代碼如下： BODY leftMargin=0 topMargin=0 marginheight=“ 0” marginwidth=“ 0” 此代碼設(shè)置了網(wǎng)頁中內(nèi)容與邊框的距離均為 0。 步驟 5：在單元格內(nèi)插入標題圖像“ ”，完成后如圖 28 所示。單擊“插入”面板的“表格”按鈕，在“表格”對話框中設(shè)置行數(shù)為 1，列數(shù)為 13，表格寬度為 1003 像素，設(shè)置邊框粗細、單元格邊距、單元格間距均為 0。 步驟 7：首先從左側(cè)開始 ，選中第 1個單元格，在屬性面板“寬”文本框中輸入“ 300”，在“背景顏色”文本框中輸入色標值“ A87D9B”。 步驟 9：分別設(shè)置單元格 11，寬度為“ 117”，背景顏色為“ C794BF”。設(shè)置單元格 7，寬度為“ 117”，背景顏色為“ F2DFF1”。 步驟 11：在裝飾線條表格下方，接著插入寬度為“ 1003 像素”的表格。設(shè)置其背景顏色為淺灰色“ F6F6F6”。 步驟 13：在表格下方接著插入 1行 2列，寬度為 1003 像素，邊框粗細、單元格 15 邊距、單 元格間距均為 0 的表格。 圖 29 設(shè)置屬性面板中的寬度、背景顏色和垂直位置 步驟 14：左側(cè)單元格將制作網(wǎng)頁的 4 個欄目標題。按 Shift+Enter 鍵空出一行，單擊工具欄的“表格”按鈕，插入 8 行 2 列，寬度為 100%，邊框粗細、單元格邊距、單元格間距均為 0 的表格。 步驟 16：在第 1 行左側(cè)單元格中插入圖像“ ”，右側(cè)單元格中插入圖像“ ”；第 2 行空出作為圖片間的間隔；在第 3 行左側(cè)單元格中插入圖像“ ”，右側(cè)單元格中插入圖像“ ”；以此類推，分別插入圖像“ ” 、“ ”、“ ” 、 “ ”，插入完成后，如圖 210所示。通過表格的設(shè)置和簡單的組合，就能做出不錯的效果。單擊“表格”按鈕，插入 1 行 1 列，寬度為 90%，邊框粗細為 0，單元格邊距為 單元格間距為 0的表格。 步驟 18：在此單元格內(nèi)單擊，插入光標。這 樣表格形成一個 1 像素寬的長方形邊框。 步驟 19：設(shè)置兩個單元格背景顏色為“ F0F0F0”，然后，兩個單元格內(nèi)分別插入圖像“ ”、“ ”。隨后，插入 1 行 1 列，寬度為 90%的表格，設(shè)置表格居中對齊。 步驟 21：單擊屬性面板上的 按鈕，打開“頁面屬性”對話框。 步驟 22：單擊“確定”按鈕，表格中的文字大小顯示為 9pt。接著上面授表格插入 5 行 2 列，寬度為 90%，邊框粗細、單元格邊距、單元格間距均為 0的表格，設(shè)置表居中對齊。選中插入的表格，在屬性面板中輸入“背景顏色”色標值為“ CCCCCC”。 步驟 25：在右側(cè)單元格內(nèi)插入同樣的嵌套表格，但需要在屬性面板中設(shè)置此表格為右對齊。首先，插入 1 行 1 列，寬度為 100%，邊框粗細、單元格邊距、單元格間距均為 0 的表格。 步驟 27：按 Ctrl+S 快捷鍵，保存制作完成的網(wǎng)頁。這里使用彈出窗口方式，在一個新的窗口中，顯示放大的戶型圖。 步驟 1：選擇菜單“文件” “打開”命令，打開“ ”網(wǎng)頁。 步驟 2：單擊“保存”按鈕，保存網(wǎng)頁為 。 步驟 3：單擊屬性面板中“居中對齊”按鈕 ，插入 1行 3列、寬度為 651 像素的表格，縣城設(shè)置邊框粗細、單元格邊距、單元格間距均為 0。 步驟 4：在中間的單元格中單擊，插入光標。選中第 11 行單元格，在屬性面板中設(shè)置“高”為“ 1”，“背景顏色”為黑色“ 000000”。切換輸入方法為“全角”模式，按空格鍵，這樣才能在表格開頭位置插入空格，接著插入“ A1 戶型”。 步驟 7：在第 7 行單元格插入 1行 2列，寬度為 75%的表格。在左側(cè)單元格中輸入 A1 戶型的介紹文字，右側(cè)單元格中插入圖像“ ”。 步驟 9：按 Ctrl+S 快捷鍵，保存制作完成的網(wǎng)頁。 步驟 2：單擊戶型圖 A1，選中后在屬性面板“鏈接”文本框中輸入“ ”，創(chuàng)建無址鏈接。 圖 211 選擇“打開瀏覽器窗口”命令 步驟 4：在“打開瀏覽器窗口”對話框中設(shè)置鏈接及窗口狀態(tài)。 圖 212 設(shè)置“打開瀏覽器窗口”對話框 步驟 5：完成設(shè)置后，單擊“確定”按鈕，行為面板顯示出所設(shè)置的“打開瀏覽器窗口”行為項，如圖 213所示。設(shè)置完成后，保存網(wǎng)頁，按 F12 鍵在瀏覽器中查看效果。 一個博客（ Blog）就是一個網(wǎng)頁，它通常是由簡短且經(jīng)常更新的短文所構(gòu)成；這些張貼的文章都按照年份和日期排列。許多博客（ Blog）則是一群人基于某個特定主題 或共同利益領(lǐng)域的集體創(chuàng)作。撰寫這些 Weblog或博客（ Blog）的人就叫做 Blogger 或 Blogwriter。其實博客（ Blog）的定義和認識可以說并沒有統(tǒng)一的說法，或者說博客（ Blog）是一種新的生活方式、新的工作方式、新的學(xué)習(xí)方式和交流方式，是“互聯(lián)網(wǎng)的第 4 塊里程牌”。 對于博客（ Blogger），現(xiàn)已具以如下 5 種分類：日記博客、學(xué)術(shù)博客、文學(xué)博客、音頻博客、視頻博客。 本網(wǎng)站設(shè)計風(fēng)格清新、可愛、漂亮，適合一些休閑博客類網(wǎng)站。通常在博客網(wǎng)站中會有“用戶登錄”、“站點日歷”、“站點統(tǒng)計”、“日志搜索”等重要功能，使網(wǎng)站的管理和用戶的使用都非常方便。實例中劃分了如下欄目：“生活記事”、“夢筆生花”、“耳聞目睹”、“唯美貼圖”、“電腦網(wǎng)絡(luò)”、“影視音樂”、“游戲人生”、“資料書簽”、“英語天地”和“貼文轉(zhuǎn)載”。 19 圖 31 一言堂博客網(wǎng)站首頁和內(nèi)容頁 實例制作 創(chuàng)建和保存網(wǎng)站首頁 步驟 1：啟動 Dreamweaver 8 后，選擇“文件” “新建”菜單命令，打開“新建文檔”對話框，選擇“類別”列表框中的 “基本頁”選項，在“基本頁”列表中再選擇“ HTML”選項。選擇菜單“文件” “保存”命令，打開“另存為”對話框。雙擊文件夾，在“文件名”文本框中輸入“ index”，單擊“保存”按鈕，完成網(wǎng)頁保存。下面將介紹如何設(shè)置網(wǎng)頁基本樣式，以及首頁標題欄的制作。在“背景顏色”文本框中輸入色標值“ A5B221”。 步驟 2：在“分類”列表框中選擇“標題 /編碼”選項，在“標題”文本框中輸入“歡迎光臨 —— 一言堂博客網(wǎng)”，在“編碼”下拉列表中選擇“簡體中文（ GB2312）”選項。設(shè)置的頁面背景顏色在瀏覽器中查看時都能看到。單擊“常用”面板中的“表格”按鈕 ，彈出“表格”對話框進行設(shè)置。在屬性面板“對齊”列表中選擇“居中對齊”選項。 步驟 7：同樣，拆分第 2行單 元格也為 3列。 步驟 8：拖動鼠標左鍵，選擇前兩行左側(cè)的兩個單元格，單擊屬性面板上的“合并單所選單元格按鈕 。 步驟 9：光標插入在第 1 行左側(cè)單元格內(nèi)，單擊常用面板上的“圖像”按鈕 ，在“選擇圖像源文件”對話框中，選擇圖像“ ”，單擊“確定”按鈕，打開“圖像標簽輔助功能屬性”對話框，在“替換文本”文本框中可以輸 入說明文本。同樣方法，在第2 行右側(cè)兩個單元格內(nèi)分別插入圖像“ ”和“ ”。選中表格，設(shè)置表格高度為“ 100”。 步驟 12：單擊“確定”按鈕，設(shè)置了表格背景圖像。 步驟 13：單擊菜單“窗口” “ CSS 樣式”命令，打開“ SS 樣式”面板。 圖 32 “鏈接外部樣式表”對話框 步驟 14：單擊“瀏覽”按鈕，在“選擇樣式表文件”對話框中，打開“ images”文件夾，然后選擇“ ”文件，如圖 33所示。 圖 34 “文件 /URL”文本框中顯示選擇的 CSS 文件 步驟 16：單擊“確定”按鈕， CSS 文件顯示在“ CSS樣式”面板中，如圖 35 所示。 圖 36 設(shè)置文本樣式 步驟 18：在第 2 行單元格內(nèi)單擊，插入光標。 步驟 19：將光標定位在第 3 行單元格中，輸入頻道名稱“本站首頁 |BLOG 網(wǎng)址收藏 |BLOG 下載中心 |Blogger BBS|留言本”。 步驟 20：拖動鼠標左鍵，選擇頻道名稱文本，在屬性面板“樣式”列表中選擇 22 “ sliderbar_head”選項。然后，在屬性面板中的“高”文本框中輸入“ 20”，背景顏色設(shè)置為白色。 制作用戶登錄區(qū)域 在博客網(wǎng)站中，通常需要用戶注冊為會員，才可以開通自己的博客和評論別人的博客留言，因此在首頁中需要有一個用戶登錄區(qū)域。然后，按 Enter鍵回車，新建一行。 步驟 3：完成設(shè)置，單擊“確定”按鈕，將表格插入在網(wǎng)頁編輯窗口。 步驟 4：先把光標定位在左側(cè)單元格內(nèi)，在 屬性面板“寬”文本框中輸入“ 180”，在“背景顏色”文本框中輸入“ F3F3F3” 。 步驟 5：接著，再次把光標輸入在左側(cè)單元格內(nèi)，單擊“圖像”按鈕，選擇圖像文件“ ”插入在單元格中。拖動鼠標選中文本后，在屬性面板“樣式”列表中選擇“ siderbar_head”選項。 步驟 7：將光標移動到文本右側(cè)，然后按 Enter 鍵換行。 步驟 8：在“表單”插入面板中，單擊“表單”按鈕，在單元格插入紅色虛線框的表單邊框。 步驟 9：接著，單擊表單面板的“文本字段”按鈕，輸入文本“用戶：”。 步驟 10：按照