【文章內(nèi)容簡介】 選中表格，在屬性面板“對齊”列表中選擇“居中對齊”命令；單擊屬性面板“背景顏色”右側(cè)的按鈕 ，打開顏色選擇面板，選擇淺灰色。 步驟 18：在此單元格內(nèi)單擊，插入光標(biāo)。在屬性面板中輸入“背景顏色”為白色色標(biāo)值“ FFFFFF”。這 樣表格形成一個 1 像素寬的長方形邊框。在單元格內(nèi)插入 1行 2列，寬度為 100%，邊框粗細(xì)、單元格邊距、單元格間距均為 0 的表格。 步驟 19：設(shè)置兩個單元格背景顏色為“ F0F0F0”，然后，兩個單元格內(nèi)分別插入圖像“ ”、“ ”。 步驟 20：在標(biāo)題表格下方按 Shift+Enter 鍵，回車兩次。隨后，插入 1 行 1 列，寬度為 90%的表格，設(shè)置表格居中對齊。在此表格中輸入關(guān)于此欄目的介紹性文字。 步驟 21：單擊屬性面板上的 按鈕，打開“頁面屬性”對話框。在“外 觀”窗口的“大小”列表中選擇“ 9”，單位列表中選擇“點(diǎn)數(shù)（ pt）。 步驟 22：單擊“確定”按鈕，表格中的文字大小顯示為 9pt。 16 步驟 23：下面將制作欄目中的戶型圖部分。接著上面授表格插入 5 行 2 列，寬度為 90%，邊框粗細(xì)、單元格邊距、單元格間距均為 0的表格，設(shè)置表居中對齊。 步驟 24：在第 1 個單元格中，插入嵌套表格，插入 1 行 1 列，寬度為 70%，邊框粗細(xì)為 0，單元格邊距為 單元格間距為 1的表格。選中插入的表格，在屬性面板中輸入“背景顏色”色標(biāo)值為“ CCCCCC”。然后，在單元格中插入圖像“ ”。 步驟 25：在右側(cè)單元格內(nèi)插入同樣的嵌套表格，但需要在屬性面板中設(shè)置此表格為右對齊。 步驟 26：在表格最底部制作版權(quán)信息。首先，插入 1 行 1 列，寬度為 100%，邊框粗細(xì)、單元格邊距、單元格間距均為 0 的表格。設(shè)置單元格背景顏色為深灰色“ 393C4A”，并插入圖像“ ”。 步驟 27：按 Ctrl+S 快捷鍵，保存制作完成的網(wǎng)頁。 制作彈出網(wǎng)頁 二級網(wǎng)頁中的戶型圖，需要放大讓瀏覽者可以看得更清楚。這里使用彈出窗口方式，在一個新的窗口中，顯示放大的戶型圖。下面就先 制作需要彈出的網(wǎng)頁。 步驟 1：選擇菜單“文件” “打開”命令，打開“ ”網(wǎng)頁。選擇菜單“文件” “另存為”命令，在“文件名”文本框中輸入“ ”。 步驟 2：單擊“保存”按鈕，保存網(wǎng)頁為 。在網(wǎng)頁編輯窗口中，按 Ctrl+A 快捷鍵全選，按 Delete 鍵刪除所有元素。 步驟 3：單擊屬性面板中“居中對齊”按鈕 ，插入 1行 3列、寬度為 651 像素的表格，縣城設(shè)置邊框粗細(xì)、單元格邊距、單元格間距均為 0。選中左、右兩側(cè)單元格，在屬 性面板中設(shè)置其“寬”為“ 1”，“背景顏色”為黑色“ 000000”。 步驟 4：在中間的單元格中單擊，插入光標(biāo)。單擊“表格”按鈕，插入 11 行 1列，寬度為 100%，邊框粗細(xì)、單元格邊距、單元格間距為 0的表格。選中第 11 行單元格，在屬性面板中設(shè)置“高”為“ 1”，“背景顏色”為黑色“ 000000”。 步驟 5：光標(biāo)定位在第 2 行單元格中，在屬性面板“高”文本框中輸入“ 30”，在“背景顏色”文本框中輸入色標(biāo)值“ EBEBEB”。切換輸入方法為“全角”模式，按空格鍵，這樣才能在表格開頭位置插入空格，接著插入“ A1 戶型”。 步驟 6：光標(biāo)定位在第 5 行單元格中，單擊“圖像”按鈕，插入 A1 戶型圖像“ ”。 步驟 7：在第 7 行單元格插入 1行 2列，寬度為 75%的表格。選中表格，設(shè)置為“居中對齊”。在左側(cè)單元格中輸入 A1 戶型的介紹文字，右側(cè)單元格中插入圖像“ ”。 步驟 8：在第 9 行單元格中插入圖像“ ”。 步驟 9：按 Ctrl+S 快捷鍵，保存制作完成的網(wǎng)頁。 制作彈出窗口效果 下面為網(wǎng)頁 中戶型 A1制作彈出窗口效果，操作步驟如下： 步驟 1：選擇菜 單“文件” “打開”命令，打開 網(wǎng)頁。 步驟 2：單擊戶型圖 A1，選中后在屬性面板“鏈接”文本框中輸入“ ”，創(chuàng)建無址鏈接。 步驟 3：選擇菜單“窗口” “行為”命令，打開“行為”面板，單擊行為面板 17 上的“ +”按鈕，在彈出的下拉列表中選擇“打開瀏覽器窗口”命令，如圖 211 所示。 圖 211 選擇“打開瀏覽器窗口”命令 步驟 4：在“打開瀏覽器窗口”對話框中設(shè)置鏈接及窗口狀態(tài)。單擊“瀏覽”按鈕，選擇需要鏈接的網(wǎng)頁“ ”，在“窗品寬度”和“窗口高度”文本框中分別輸入 670 和 500，勾選“需要時使用滾動條”復(fù)選框，如圖 212 所示。 圖 212 設(shè)置“打開瀏覽器窗口”對話框 步驟 5：完成設(shè)置后，單擊“確定”按鈕，行為面板顯示出所設(shè)置的“打開瀏覽器窗口”行為項(xiàng)，如圖 213所示。 圖 213 行為面板顯示行為項(xiàng) 步驟 6：在行為面板“事件”下拉列表中選擇“ onMouseDown”選項(xiàng)，如圖 214所示。設(shè)置完成后，保存網(wǎng)頁，按 F12 鍵在瀏覽器中查看效果。 圖 214 選擇事件類型 選擇“打開瀏覽器窗口”命令 18 第 3章 博客（ Blog）類網(wǎng)站 —— 一言堂博客 博客（ Blog）類網(wǎng)站概述 Weblog 是 Web Log 的縮寫，中文意思是“網(wǎng)絡(luò)日志”，后來縮寫為 Blog，而Blogger（博客）則是寫 Blog 的人。 一個博客（ Blog）就是一個網(wǎng)頁，它通常是由簡短且經(jīng)常更新的短文所構(gòu)成；這些張貼的文章都按照年份和日期排列。博客（ Blog）的內(nèi)容和目的有很大的不同，有關(guān)公司、個人、構(gòu)想的新聞到日記、照片、詩歌、散文，甚至科幻小說的發(fā)表或張貼都有，涉及各行各業(yè)。許多博客（ Blog）則是一群人基于某個特定主題 或共同利益領(lǐng)域的集體創(chuàng)作。博客（ Blog）好像對網(wǎng)絡(luò)傳達(dá)的實(shí)時訊息。撰寫這些 Weblog或博客（ Blog）的人就叫做 Blogger 或 Blogwriter。 具體說來，博客（ Blog）這個概念解釋為使用特定的軟件，在網(wǎng)絡(luò)上出版、發(fā)表和張貼個人文章的人。其實(shí)博客（ Blog）的定義和認(rèn)識可以說并沒有統(tǒng)一的說法，或者說博客（ Blog）是一種新的生活方式、新的工作方式、新的學(xué)習(xí)方式和交流方式，是“互聯(lián)網(wǎng)的第 4 塊里程牌”。 博客網(wǎng)站通常有以下 3 種類型：綜合性博客網(wǎng)、行業(yè)性博客網(wǎng)、門戶網(wǎng)站下的一樣欄目。 對于博客（ Blogger），現(xiàn)已具以如下 5 種分類：日記博客、學(xué)術(shù)博客、文學(xué)博客、音頻博客、視頻博客。 實(shí)例展示 通過“一言堂博客網(wǎng)”首頁和內(nèi)容頁的制作，詳細(xì)介紹博客類網(wǎng)站的基本元素和制作方法。 本網(wǎng)站設(shè)計(jì)風(fēng)格清新、可愛、漂亮，適合一些休閑博客類網(wǎng)站。博客類網(wǎng)站的制作需要和后臺程序進(jìn)行配合。通常在博客網(wǎng)站中會有“用戶登錄”、“站點(diǎn)日歷”、“站點(diǎn)統(tǒng)計(jì)”、“日志搜索”等重要功能，使網(wǎng)站的管理和用戶的使用都非常方便。本實(shí)例也不例外，都涵蓋了以上功能，并且給網(wǎng)站劃分了許多欄目，可以把用戶歸類，把有相同愛好的用戶統(tǒng)一在一起， 更適合專業(yè)的博客網(wǎng)站。實(shí)例中劃分了如下欄目：“生活記事”、“夢筆生花”、“耳聞目睹”、“唯美貼圖”、“電腦網(wǎng)絡(luò)”、“影視音樂”、“游戲人生”、“資料書簽”、“英語天地”和“貼文轉(zhuǎn)載”。 在實(shí)例制作中，需要注意表單的應(yīng)用、表格的布局等功能，如圖 31 所示即是網(wǎng)站首頁和內(nèi)容頁的效果。 19 圖 31 一言堂博客網(wǎng)站首頁和內(nèi)容頁 實(shí)例制作 創(chuàng)建和保存網(wǎng)站首頁 步驟 1：啟動 Dreamweaver 8 后，選擇“文件” “新建”菜單命令，打開“新建文檔”對話框，選擇“類別”列表框中的 “基本頁”選項(xiàng)，在“基本頁”列表中再選擇“ HTML”選項(xiàng)。 步驟 2：單擊“創(chuàng)建”按鈕，創(chuàng)建一個空白頁面。選擇菜單“文件” “保存”命令，打開“另存為”對話框。 步驟 3：然后，命名新建文件夾為“一言堂博客網(wǎng)”。雙擊文件夾，在“文件名”文本框中輸入“ index”，單擊“保存”按鈕，完成網(wǎng)頁保存。 創(chuàng)建首頁標(biāo)題欄 所有網(wǎng)頁頂部基本上都有標(biāo)題欄，因?yàn)樗梢郧逦貍鬟f關(guān)于網(wǎng)站標(biāo)題、欄目和廣告等信息。下面將介紹如何設(shè)置網(wǎng)頁基本樣式，以及首頁標(biāo)題欄的制作。 步驟 1：單擊屬性面板中的“頁面屬性”按鈕，在“外觀 ”樣式中進(jìn)行設(shè)置，單擊“大小”下拉表，選擇“ 12”，在后面的下拉列表中選擇“像素（ px）”。在“背景顏色”文本框中輸入色標(biāo)值“ A5B221”。在“左邊距”、“右邊距”、“下邊距”文本框中輸入“ 6”，在“上邊距”文本框中輸入“ 0”。 步驟 2：在“分類”列表框中選擇“標(biāo)題 /編碼”選項(xiàng)，在“標(biāo)題”文本框中輸入“歡迎光臨 —— 一言堂博客網(wǎng)”，在“編碼”下拉列表中選擇“簡體中文（ GB2312）”選項(xiàng)。 步驟 3：單擊“確定”按鈕，返回網(wǎng)頁編輯窗口，可以看到“文檔”工具欄的“標(biāo)題”文本框中顯示了在“頁面屬性”對話框中設(shè)置 的標(biāo)題。設(shè)置的頁面背景顏色在瀏覽器中查看時都能看到。 步驟 4：在網(wǎng)頁編輯窗口中單擊鼠標(biāo)左鍵，插入光標(biāo)。單擊“常用”面板中的“表格”按鈕 ，彈出“表格”對話框進(jìn)行設(shè)置。 步驟 5：單擊表格邊框，選中表格。在屬性面板“對齊”列表中選擇“居中對齊”選項(xiàng)。 步驟 6：在第 1 行單元格內(nèi)單擊，插入光標(biāo)，單擊屬性面板中“拆分單元格為行 20 或列”按鈕 ，在“拆分單元格”對話框中，單擊“列”單選按鈕，然后在“列數(shù)”文本框中輸入“ 3”。 步驟 7：同樣，拆分第 2行單 元格也為 3列。在屬性面板中分別設(shè)置兩行單元格高度為“ 110”。 步驟 8：拖動鼠標(biāo)左鍵，選擇前兩行左側(cè)的兩個單元格，單擊屬性面板上的“合并單所選單元格按鈕 。然后，再選中第 2行右側(cè)的兩個單元格，并且單擊“合并所選單元格”按鈕。 步驟 9：光標(biāo)插入在第 1 行左側(cè)單元格內(nèi)，單擊常用面板上的“圖像”按鈕 ，在“選擇圖像源文件”對話框中，選擇圖像“ ”，單擊“確定”按鈕，打開“圖像標(biāo)簽輔助功能屬性”對話框，在“替換文本”文本框中可以輸 入說明文本。 步驟 10：然后，單擊“確定”按鈕，將圖像插入在單元格中。同樣方法，在第2 行右側(cè)兩個單元格內(nèi)分別插入圖像“ ”和“ ”。 步驟 11：在第 2 行右側(cè)單元格內(nèi)，插入 1行 1列，寬度為 100%的表格。選中表格，設(shè)置表格高度為“ 100”。并單擊“背景圖像”文本框后面的“瀏覽文件”按鈕 ，在打開的“選擇圖像源文件”對話框中選擇圖像“ ”。 步驟 12：單擊“確定”按鈕，設(shè)置了表格背景圖像。在此表格內(nèi)輸入文字“歡迎光臨”，在此網(wǎng)頁 中我們將導(dǎo)入一個 CSS樣式文件來設(shè)置文本、表格等樣式。 步驟 13：單擊菜單“窗口” “ CSS 樣式”命令，打開“ SS 樣式”面板。在面板下方，單擊“附加樣式表”按鈕 ，彈出“鏈接外部樣式表”對話框，如圖 32 所示。 圖 32 “鏈接外部樣式表”對話框 步驟 14：單擊“瀏覽”按鈕，在“選擇樣式表文件”對話框中，打開“ images”文件夾，然后選擇“ ”文件，如圖 33所示。 圖 33 選擇樣式表文件 21 步驟 15： 單擊“確定”按鈕后，返回“鏈接外部樣式表”對話框，在“文件 /URL”文件框中顯示了所選擇 CSS 文件的路徑，如圖 34所示。 圖 34 “文件 /URL”文本框中顯示選擇的 CSS 文件 步驟 16：單擊“確定”按鈕， CSS 文件顯示在“ CSS樣式”面板中，如圖 35 所示。 圖 35 顯示外部樣式表 步驟 17：選中單元格中的文字“歡迎光臨”，在屬性面板“樣式”列表中選擇“ header”選項(xiàng)，如圖 36所示。 圖 36 設(shè)置文本樣式 步驟 18：在第 2 行單元格內(nèi)單擊，插入光標(biāo)。在屬性面板中設(shè)置單元格“高”為“ 14”，單擊“背景顏色”右側(cè)按鈕，彈出顏色造反器，使用吸管選擇白色。 步驟 19：將光標(biāo)定位在第 3 行單元格中，輸入頻道名稱“本站首頁 |BLOG 網(wǎng)址收藏 |BLOG 下載中心 |Blogger BBS|留言本”。然后，在屬性面板中的“高”文本框中輸入“ 20”，背景顏色設(shè)置為白色，并單擊“右對齊”按鈕。 步驟 20：拖動鼠標(biāo)左鍵，選擇頻道名稱文本，在屬性面板“樣式”列表中選擇 22 “ sliderbar_head”選項(xiàng)。 步驟 21：將光標(biāo)插入到第 4 行單元 格中，輸入欄目名稱“日志首頁 |生活記事 |夢筆生花 |耳聞目睹 |唯美貼圖 |電腦網(wǎng)絡(luò) |影視音樂 |游戲人生 |資料書簽 |英語天地 |貼文轉(zhuǎn)載”。然后，在屬性面板中的“高”文本框中輸入“ 20”，背景顏色設(shè)置為白色。雙擊文本內(nèi)容，選中它們，單擊屬性面板中“粗體”按鈕 到此，網(wǎng)頁的標(biāo)題欄和欄目欄就制作完成了。 制作用戶登錄區(qū)域 在博客網(wǎng)站中，通常需要用戶注冊為會員，才可以開通自己的博客和評論別人的博客留言，因此在首頁中需要有一個用戶登錄區(qū)域。 步驟 1：在上面標(biāo)題表格的右側(cè)表 格外單擊鼠標(biāo)左鍵，插入光標(biāo)。然后，按 Enter鍵回車，新建一行。 步驟 2：單擊“插入”面板的“表格”按鈕，打開“表格”對話框，在“行數(shù)”文本框中輸入“ 1”，“列數(shù)”文本框中輸入“ 2”，在“表格寬度”文本框中輸入“ 770”，選擇后面的單位為“像