《電子商務(wù)網(wǎng)頁(yè)制作》實(shí)驗(yàn)指導(dǎo)書(shū).doc

電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書(shū)實(shí)驗(yàn)一 網(wǎng)站基礎(chǔ)知識(shí)一、實(shí)驗(yàn)?zāi)康暮蛯?shí)驗(yàn)內(nèi)容要求了解網(wǎng)站相關(guān)基礎(chǔ)知識(shí)，IP地址、域名、主頁(yè)空間等。二、實(shí)驗(yàn)基本原理和方法訪問(wèn)網(wǎng)站，熟悉ip地址和域名的申請(qǐng)注冊(cè)方法和流程，并了解虛擬主機(jī)情況。三、實(shí)驗(yàn)使用的儀器設(shè)備及其基本工作原理計(jì)算機(jī)，互聯(lián)網(wǎng)四、實(shí)驗(yàn)基本步驟（一）IP地址申請(qǐng)/index/0D/index.htm1.了解IPv4地址申請(qǐng)步驟2.查詢學(xué)校主頁(yè)的IP地址信息 可以查詢到學(xué)校的IP地址段范圍、單位、通信地址、聯(lián)系人等信息 注：目前使用IPv4，IPv6仍處于試驗(yàn)階段（二）域名信息查詢/index/0A/index.htm 可以查詢到域名的相關(guān)信息，目前比較好的域名都被關(guān)注著，過(guò)期后未及時(shí)注冊(cè)就會(huì)被搶注，時(shí)間可能只有幾分鐘。（三）域名注冊(cè)/選擇你的域名和后綴，查詢注冊(cè)情況（四）域名服務(wù)器(DNS)使用ping 命令查詢 的ip地址通過(guò)該命令可以知道域名的ip地址，是否連通，連接速度，線路是否有數(shù)據(jù)丟失等（五）了解國(guó)內(nèi)幾類典型網(wǎng)站政府類網(wǎng)站：商務(wù)部 / 統(tǒng)計(jì)局 / 政府網(wǎng)頁(yè)鏈接 /govinfo/教育類網(wǎng)站：教育部 / 清華大學(xué) 北京大學(xué) 門(mén)戶類網(wǎng)站：新浪網(wǎng) 網(wǎng)易 TOM 電子商務(wù)網(wǎng)站： B2B代表 阿里巴巴 / B2C代表 當(dāng)當(dāng)網(wǎng) C2C代表 淘寶網(wǎng) Ebay中國(guó)（原易趣） （六）了解不同類型的主頁(yè)空間/了解虛擬主機(jī)、服務(wù)器托管、整機(jī)租用的介紹和費(fèi)用。（七）網(wǎng)站推廣1. 了解競(jìng)價(jià)排名，搜索“汽車(chē)”關(guān)鍵詞，看贊助商列表2. 看看新浪上面有哪些網(wǎng)絡(luò)廣告，說(shuō)出給你印象最深的那個(gè)廣告 五、實(shí)驗(yàn)記錄與數(shù)據(jù)處理要求要求詳細(xì)記錄實(shí)驗(yàn)步驟，嚴(yán)禁抄襲他們或?qū)嶒?yàn)指導(dǎo)書(shū)中畫(huà)面，所有畫(huà)面必須是自己操作過(guò)程中的畫(huà)面。六、實(shí)驗(yàn)中注意事項(xiàng)在實(shí)驗(yàn)操作過(guò)程中，要仔細(xì)閱讀相關(guān)說(shuō)明。七、實(shí)驗(yàn)思考題1.建立一個(gè)網(wǎng)站的主要步驟及要注意的問(wèn)題？八、實(shí)驗(yàn)報(bào)告基本要求 按照實(shí)驗(yàn)報(bào)告格式，詳細(xì)寫(xiě)出你的操作步驟，關(guān)鍵畫(huà)面采用烤屏的方式貼到文檔中。46實(shí)驗(yàn)二 網(wǎng)站建設(shè)一、實(shí)驗(yàn)?zāi)康暮蛯?shí)驗(yàn)內(nèi)容要求學(xué)會(huì)安裝并配置web站點(diǎn)和ftp站點(diǎn)，使用ftp客戶端軟件進(jìn)行網(wǎng)頁(yè)的上傳維護(hù)。二、實(shí)驗(yàn)基本原理和方法利用提供的軟件和網(wǎng)站代碼配置一個(gè)web站點(diǎn)，掌握web服務(wù)器和ftp服務(wù)器的配置和使用三、實(shí)驗(yàn)使用的儀器設(shè)備及其基本工作原理計(jì)算機(jī)，互聯(lián)網(wǎng)，Serv-U，IIS5.0四、實(shí)驗(yàn)基本步驟（一）web服務(wù)器軟件安裝與配置1.web服務(wù)器軟件的安裝Windows操作系統(tǒng)主要選擇IIS，Apache，tomcat，其中IIS適合asp，Apache適合php，tomcat適合jsp，本機(jī)器IIS已經(jīng)安裝，可以看演示錄像了解。Linux操作系統(tǒng)主要使用Apache + php + Mysql組合。2.IIS的配置（1）解壓縮以下的一個(gè)源代碼包（推薦西亞購(gòu)物系統(tǒng)，配置簡(jiǎn)單，多次測(cè)試無(wú)任何問(wèn)題）到桌面，也可以自己另找源代碼解壓到任意其它位置。名稱演示地址電子商務(wù)網(wǎng)站源代碼蔚藍(lán)網(wǎng)上商店/西亞購(gòu)物系統(tǒng) 2004 整合論壇版/SiacartProA/xiya/SiacartProA/動(dòng)感購(gòu)物4.0完全正式商業(yè)版本/zyshop 正源網(wǎng)上商城程序/文章管理系統(tǒng)源代碼Joekoe_CMS_1.2_free/曉宇聽(tīng)幽新聞管理系統(tǒng)/夢(mèng)凌文章管理系統(tǒng)(終極版)/gb/index.aspMY動(dòng)力管理系統(tǒng)v3.6正式版/index.asp論壇系統(tǒng)源代碼dvbbs7.1.0_ac（動(dòng)網(wǎng)論壇）/bbsxp/（2）在F盤(pán)中建立一個(gè)名為web的文件夾，我的電腦右鍵管理服務(wù)與應(yīng)用層程序設(shè)置網(wǎng)站ip地址設(shè)置網(wǎng)站主目錄為F盤(pán)中的xiya文件夾設(shè)置默認(rèn)文檔。（二）ftp服務(wù)器軟件安裝與配置1.安裝ftp服務(wù)器軟件，最常用的是serv-u，設(shè)置好帳號(hào)，文件夾訪問(wèn)權(quán)限，只讀權(quán)限下只能下載不能上傳，要上傳需要設(shè)置為寫(xiě)權(quán)限。文件夾設(shè)置為xiya站點(diǎn)中的主目錄。（三）網(wǎng)站源代碼上傳并測(cè)試網(wǎng)站1使用ftp客戶端軟件，如flashfxp，cuteftp等將解壓后網(wǎng)站源代碼全部上傳到網(wǎng)站空間（實(shí)際上與ftp空間是同一個(gè)文件夾，即通過(guò)ftp來(lái)管理網(wǎng)頁(yè)文件的上傳和更新）。2.通過(guò)ip地址訪問(wèn)網(wǎng)站，有些網(wǎng)站需要簡(jiǎn)單配置一下，請(qǐng)查看源代碼包中的說(shuō)明文本，同時(shí)，管理帳號(hào)、密碼也見(jiàn)說(shuō)明文檔。思考題：理一理你的網(wǎng)站建設(shè)的思路，若你想建一個(gè)網(wǎng)站，如何操作？ 以后自己需要做比較復(fù)雜的網(wǎng)站，如何利用好成熟的網(wǎng)站源代碼？五、實(shí)驗(yàn)記錄與數(shù)據(jù)處理要求實(shí)驗(yàn)報(bào)告中畫(huà)面必須是本人自己實(shí)驗(yàn)過(guò)程中的畫(huà)面顯示內(nèi)容。六、實(shí)驗(yàn)中注意事項(xiàng)在實(shí)驗(yàn)操作過(guò)程中，要仔細(xì)閱讀相關(guān)說(shuō)明。七、實(shí)驗(yàn)思考題1.如何在自己的計(jì)算機(jī)上建立一個(gè)可供訪問(wèn)的網(wǎng)站？2當(dāng)你的網(wǎng)站放在虛擬主機(jī)上，如何進(jìn)行遠(yuǎn)程更新維護(hù)？3如果你想給客戶提供虛擬主機(jī)服務(wù)，如何實(shí)現(xiàn)？八、實(shí)驗(yàn)報(bào)告基本要求 按照實(shí)驗(yàn)報(bào)告格式，詳細(xì)寫(xiě)出你的操作步驟，關(guān)鍵畫(huà)面采用烤屏的方式貼到文檔中，打印后上交。實(shí)驗(yàn)三 網(wǎng)頁(yè)設(shè)計(jì)一、實(shí)驗(yàn)?zāi)康模毫私獠⒄莆帐褂肈reamweaver制作網(wǎng)頁(yè)二、實(shí)驗(yàn)基本原理和方法利用Dreamweaver MX 2004中文版制作網(wǎng)頁(yè)三、實(shí)驗(yàn)使用的儀器設(shè)備及其基本工作原理Dreamweaver MX 2004中文版，可視化網(wǎng)頁(yè)集成編輯環(huán)境四、實(shí)驗(yàn)基本步驟綜合應(yīng)用Dreamweaver MX中的文字、圖片、超級(jí)鏈接、表格、層、行為等網(wǎng)頁(yè)制作技術(shù)，設(shè)計(jì)出自己的網(wǎng)頁(yè)。參考教材，提供的視頻演示和本實(shí)驗(yàn)項(xiàng)目指導(dǎo)書(shū)內(nèi)容。五、實(shí)驗(yàn)記錄與數(shù)據(jù)處理要求自己搜集素材制作網(wǎng)頁(yè)，不能和實(shí)例網(wǎng)頁(yè)相同六、實(shí)驗(yàn)中注意事項(xiàng)在實(shí)驗(yàn)操作過(guò)程中，要注意課堂上提到的一些注意事項(xiàng)，否則會(huì)容易出現(xiàn)圖片、鏈接不正常。七、實(shí)驗(yàn)思考題1如何保證自己的網(wǎng)頁(yè)維護(hù)起來(lái)更容易？八、實(shí)驗(yàn)報(bào)告基本要求本實(shí)驗(yàn)內(nèi)容不需要打印，在最后一次實(shí)驗(yàn)課上直接提交所制作的網(wǎng)頁(yè)作品。附錄 網(wǎng)頁(yè)制作技術(shù)第一章：界面介紹安裝好Dreamweaver MX 中文版(或者漢化版)后,運(yùn)行，選擇Dreamweaver MX工作區(qū)后，將看到下面的畫(huà)面：一、 為菜單區(qū)，和其它的軟件一樣，該軟件所有的操作命令都可以從這一個(gè)區(qū)內(nèi)找到,舉個(gè)例子，選中該區(qū)編輯(E)中的參數(shù)選擇(S). CTRL+U其中CTRL+U是該選項(xiàng)的快捷鍵,如下圖所示：在這里，你可以把自己的DREAMWEAVER MX設(shè)置為自己喜歡的樣式，一般使用默認(rèn)就可以了，如下圖：為了使用的方便，選中字體這一項(xiàng)目，把參數(shù)設(shè)置為上圖所示的樣子，因?yàn)槟J(rèn)的時(shí)候?qū)嵲谔y看了（當(dāng)然也可以選自己喜歡的）。如果你瀏覽網(wǎng)頁(yè)時(shí)使用的不是IE的話，請(qǐng)選中在瀏覽器中預(yù)覽這一項(xiàng)（以后制作網(wǎng)頁(yè)的時(shí)候要用到），點(diǎn)一下那個(gè)“”添加你使用的瀏覽器程序。二、 是插入項(xiàng)目選擇工具(插入面板)，在 選中了某個(gè)項(xiàng)目， 中會(huì)出現(xiàn)相應(yīng)的插入項(xiàng)目，下面詳細(xì)介紹，選中常用這一項(xiàng)后如下圖：錨點(diǎn)用于網(wǎng)頁(yè)中的定位，如網(wǎng)頁(yè)的上、中、下等；圖像點(diǎn)位符是用于動(dòng)態(tài)交換圖片的，后面再說(shuō)；Fireworks HTML為用Fireworks軟件切割出來(lái)的圖片；交換圖像為鼠標(biāo)移上去時(shí)變?yōu)榱硪粓D片，增強(qiáng)動(dòng)感；表格數(shù)據(jù)可以將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進(jìn)網(wǎng)頁(yè)；標(biāo)簽選擇器可以插入其它不常用的HTML標(biāo)簽。在 中選中布局一項(xiàng)，共有標(biāo)準(zhǔn)視圖和布局視圖兩種視圖，如下圖所示：在標(biāo)準(zhǔn)視圖下，可以插入表格和在網(wǎng)頁(yè)制作區(qū)畫(huà)圖層。切換到布局視圖下，如下圖：在布局視圖下，可以在網(wǎng)頁(yè)制作區(qū)描繪布局視圖下的表格和單元格，描繪好之后，再切換到標(biāo)準(zhǔn)視圖后，可以轉(zhuǎn)化為表格，這個(gè)比較好用，可以用來(lái)排版網(wǎng)頁(yè)，后面將說(shuō)到。在 中選中文本一項(xiàng)，可以對(duì)文本進(jìn)行格式化，如下圖：A可以對(duì)字體進(jìn)行全面的格式；B可以將字體變?yōu)榇煮w；I為斜體；S為加強(qiáng)字體；這些比較簡(jiǎn)單，可以自己一項(xiàng)一項(xiàng)慢慢試試，看看字體有什么變化。在 中選擇表單（表格和框架兩項(xiàng)后面再說(shuō)），可以插入各種按鈕，如下圖：A 為表單；B 為文本框；C 為隱藏域；D 為文本區(qū)域；E 為多選框；F 為單選框；G 為單選按鈕組；H 為列表/菜單；I 為跳菜單；J 為圖像域；K 為文本字段；L 為按鈕；M 為標(biāo)簽；N 為字段集。（詳細(xì)的使用方法后面將說(shuō)到）在 中選中模版可以使用模版制作網(wǎng)頁(yè)或自己創(chuàng)建模版，做起網(wǎng)頁(yè)更加方便快捷。在 中選中字符可以插入一些特殊的字符，如：，其中BR為換行符（快捷鍵為CTRLENTER，此項(xiàng)與ENTER有所不同，可以自己試試），其它的可以自己試試。在 中選中媒體，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在 中選中文本頭，將出現(xiàn)下面的畫(huà)面：關(guān)鍵字為網(wǎng)頁(yè)的關(guān)鍵詞，可以讓搜索引擎搜索到；說(shuō)明為網(wǎng)頁(yè)的說(shuō)明，如作者、介紹等；刷新可以設(shè)定多長(zhǎng)時(shí)間后刷新網(wǎng)頁(yè)或跳轉(zhuǎn)到其它網(wǎng)頁(yè)；基礎(chǔ)為網(wǎng)頁(yè)的基本鏈接，如插入一個(gè)目標(biāo)為_(kāi)blank基礎(chǔ)，網(wǎng)頁(yè)中的一切默認(rèn)鏈接都將打開(kāi)新窗口；其它比較少用不再詳細(xì)講述。在 中選中腳本，可以插入各種Javascript、Vbscript或其它腳本。在 中選中ASP（編輯ASP網(wǎng)頁(yè)時(shí)用到，新手可不必理會(huì)），可以插入各種ASP編程里用到的標(biāo)簽。在 中選中應(yīng)用程序（編輯動(dòng)態(tài)網(wǎng)頁(yè)時(shí)候用到，新手可不必理會(huì)），可以對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。三、對(duì) 區(qū)的詳解如下圖：在上圖中，點(diǎn)擊帶有向下小箭頭的工具，會(huì)彈出更多選擇。四、 區(qū)為網(wǎng)頁(yè)設(shè)計(jì)區(qū)，你所設(shè)計(jì)的網(wǎng)頁(yè)或代碼將出理在該區(qū)。五、 區(qū)為屬性區(qū)(屬性面板)，在該區(qū)可以對(duì)選中的對(duì)象進(jìn)行一些設(shè)置（后面將有詳細(xì)講解）。六、 區(qū)如下圖所示，詳細(xì)的使用將在后面的章節(jié)詳細(xì)講述。第二章：定義站點(diǎn) 在正式開(kāi)始制作網(wǎng)頁(yè)之前，最好先定義一個(gè)新網(wǎng)站，這是為了更好地利用站點(diǎn)窗口對(duì)站點(diǎn)文件進(jìn)行管理，也可以盡可能的減少一些錯(cuò)誤的出現(xiàn)，如路徑出錯(cuò)，鏈接出錯(cuò)（特別是新手），當(dāng)熟練掌握了DREAMWEAVERMX的使用后，并且只需制作單個(gè)網(wǎng)頁(yè)時(shí)候可以省去這一步；還值得說(shuō)的是，新手做網(wǎng)頁(yè)，就只知道做網(wǎng)頁(yè)，不懂得條理性、結(jié)構(gòu)性，一個(gè)文件放這里，另一個(gè)文件放那里，或者所有文件都放在同一文件夾內(nèi)，這樣顯得很亂。我提倡的做法是：建立一個(gè)文件夾用于存放網(wǎng)站的所有文件，再在文件內(nèi)建立幾個(gè)文件夾，將文件分類，如圖片文件放在image文件夾內(nèi)，HTML文件放在HTML文件夾內(nèi)，當(dāng)然，如果站點(diǎn)比較大，文件比較多，可以先按欄目分類，在欄目里再分類。還有文件的命名也是非常重要的，新手通常不注意這些，隨便亂起些名字，這樣過(guò)些時(shí)候自己也搞不懂是什么了（特別是文件比較多的時(shí)候），我們要做到一看文件的名字就知道是什么內(nèi)容的文件。我提倡的做法是：用英文或者拼音給文件命名（推薦英文），不要使用中文的名字（因?yàn)橛械臋C(jī)器對(duì)中文支持不太好，有可能出現(xiàn)鏈接的錯(cuò)誤，你自己以為正確的東西在別人看來(lái)有可能是錯(cuò)的）。下面開(kāi)始講述如何建立站點(diǎn)：方法一：找到 區(qū)（第一章已經(jīng)講過(guò)），展開(kāi)文件一項(xiàng)，選中站點(diǎn)，然后再選編輯站點(diǎn)，如下圖：選中后將出現(xiàn)：然后點(diǎn)擊新建:站點(diǎn)名稱（N）處填上你要建立的站點(diǎn)的名稱，這個(gè)名字只起著識(shí)別的作用，與網(wǎng)站發(fā)布后真實(shí)的名字無(wú)關(guān)；本地根文件夾（F）處選擇設(shè)置網(wǎng)站在本地硬盤(pán)的位置，點(diǎn)擊后面的文件夾圖標(biāo)可以選擇硬盤(pán)的任意目錄作為存放網(wǎng)站文件的目錄；緩存可以使文件的移動(dòng)、改名、查找等站點(diǎn)管理的操作速度大大提升，因此建議大家在這里打上鉤；其它的可以默認(rèn)，當(dāng)然你可以試試選擇不同的，默認(rèn)圖像文件夾為站點(diǎn)默認(rèn)存放圖片的文件夾（以后在做網(wǎng)頁(yè)的過(guò)程中，使用非站點(diǎn)內(nèi)的圖片時(shí)，它會(huì)提示是否把該文件復(fù)制到這個(gè)文件夾內(nèi)）；HTTP 地址（H）為你站點(diǎn)的網(wǎng)址 。上圖中遠(yuǎn)程信息一項(xiàng)也是非常有用的，可以用它來(lái)管理你的網(wǎng)站（網(wǎng)站不在本機(jī)上的時(shí)候），如下圖：在訪問(wèn)處選中FTP這一項(xiàng)，其中FTP主機(jī)（H）為你的網(wǎng)站的FTP地址；主機(jī)目錄（D）為你的網(wǎng)站所在FTP主機(jī)上的目錄（一般為根目錄,可以不填）；登錄（L）為你的用戶名；密碼（P）為登錄密碼；如果你鏈接服務(wù)器要用到防火墻，請(qǐng)勾中使用防火墻（U）這一項(xiàng)，并設(shè)置好參數(shù)；其它的可以根據(jù)自己需要選擇（保存時(shí)自動(dòng)將文件上傳到服務(wù)器（A）這一項(xiàng)可以考慮勾選）。其它的如測(cè)試服務(wù)器，遮蓋 ，設(shè)計(jì)備注，站點(diǎn)地圖布局，文件視圖列這些，較少用到，為了熟練掌握，可以自己償試。方法二：找到 區(qū)（第一單已經(jīng)講過(guò)）， 點(diǎn)擊站點(diǎn)（S），再選新建站點(diǎn)（N）,其它的操作與方法一相同。站點(diǎn)定義完畢之后，就可以正式制作屬于你自己的網(wǎng)頁(yè)了，下面舉個(gè)例子：回到 區(qū)（第一章已經(jīng)講過(guò)），展開(kāi)文件一項(xiàng)，選中站點(diǎn)一項(xiàng)，按上面的方法建立一個(gè)站點(diǎn)dwmx(當(dāng)然可以另起一個(gè)名字，這里只是為了方便)，再選文件，將彈出菜單選項(xiàng)，如下圖：在上圖中：選新建文件夾，然后建立html、image、style三個(gè)文件夾，再選新建文件，建立一個(gè)index.htm的網(wǎng)頁(yè)文件（這個(gè)為站點(diǎn)的首頁(yè)），同樣你可以在文件這一項(xiàng)內(nèi)對(duì)文件進(jìn)行其它操作（如刪除，設(shè)置文件屬性，檢查鏈接等）。小提示：所有帶有小箭頭的選項(xiàng)都是帶有彈出菜單的編緝一項(xiàng)可以對(duì)站點(diǎn)的文件進(jìn)行復(fù)制，條件選擇等操作，可以自己練習(xí)。視圖一項(xiàng)可以改變站點(diǎn)文件的顯示方法和其它的一些信息，可以自己練習(xí)。站點(diǎn)一項(xiàng)也是對(duì)站點(diǎn)進(jìn)行操作的，如上傳，下載，檢查鏈接，同步等，可以自己練習(xí)。在上圖中：a 為鏈接遠(yuǎn)端主機(jī)的操作（如上面建立站點(diǎn)過(guò)程中遠(yuǎn)程信息中提及的FTP主機(jī)）；b 為刷新站點(diǎn)內(nèi)文件的操作（如你修改了站點(diǎn)內(nèi)的內(nèi)容，點(diǎn)一下，可以取得最新的列表）；c 為獲取文件（從遠(yuǎn)程主機(jī)把文件下載）；d 為上 傳文件（把文件上傳到遠(yuǎn)程主機(jī)或服務(wù)器）；e 為取出文件（從遠(yuǎn)程主機(jī)把文件取出）；f 為存回文件（把文件存回遠(yuǎn)程主機(jī)）；g 為展開(kāi)/折疊（可以把上圖中的窗口展開(kāi)或收回）。如果你切換到資源，將看到：這里是你站點(diǎn)內(nèi)的，圖片，顏色，鏈接等（所有用到的資源都可以找到），下面對(duì)上圖中的各個(gè)按鈕加以說(shuō)明：點(diǎn)編輯，可以編輯選取的文件，收藏可以把選中的加入收藏，把一些常用的加入收藏，當(dāng)文件眾多的時(shí)候方便查找（特別是做大網(wǎng)站時(shí)）切換到收藏，將顯示收藏夾里的項(xiàng)目。第三章：學(xué)習(xí)從最簡(jiǎn)單的開(kāi)始一般推薦大家在站點(diǎn)窗口完成新建網(wǎng)頁(yè)文件的操作，這樣有助大家清楚新建的頁(yè)面在整個(gè)網(wǎng)站的具體位置，找到 區(qū)(第一章已經(jīng)講述)，在站點(diǎn)窗口里新建一個(gè)index.htm或index.html文件（上一章定義站點(diǎn)已經(jīng)講述過(guò)）；當(dāng)然你也可以從 區(qū)(第一章已經(jīng)講述)中的文件（F）菜單，選新建（N）其中后面的CTRLN是該操作的快捷鍵，將出現(xiàn)下面的畫(huà)面：其中，如果選中模板，將使用模板創(chuàng)建一個(gè)新的網(wǎng)頁(yè)文件，參數(shù)選擇（P）.處就是第一章中說(shuō)的參數(shù)選擇,這里使用默認(rèn)文檔類型為HTML就行了,創(chuàng)建好之后，將文件保存為index.htm（注意：將它保存到站點(diǎn)文件夾里）。htm既是文件的后綴，也是這個(gè)網(wǎng)頁(yè)文件的類型說(shuō)明，表示這個(gè)網(wǎng)頁(yè)文件是屬于靜態(tài)的HTML文件（也可以用后綴html表示），以后大家緊記將網(wǎng)頁(yè)的后綴改為htm或html，否則傳上到服務(wù)器之后，瀏覽器就無(wú)法正常打開(kāi)，當(dāng)然以后將會(huì)用到ASP或PHP后綴的動(dòng)態(tài)網(wǎng)頁(yè)。何為CSS？CSS就是Cascading Style Sheets（層疊樣式表單）的簡(jiǎn)稱，可以用來(lái)統(tǒng)一網(wǎng)頁(yè)的風(fēng)格，后面將用詳細(xì)講述。提示：為什么網(wǎng)站的第一頁(yè)的名字通常是index.htm、index.html、index.asp等，而不是其他？舉個(gè)例子，當(dāng)你在瀏覽器打入 這個(gè)網(wǎng)址時(shí)，其實(shí)并沒(méi)有明確地指定打開(kāi)哪一個(gè)頁(yè)面，但服務(wù)器就會(huì)自動(dòng)尋找index.htm、index.html、index.asp等，道理就在于此處了設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性，是在正式開(kāi)始制作網(wǎng)頁(yè)前一個(gè)必不可少的工序。雙擊打開(kāi)剛才新建的index.htm，就自動(dòng)轉(zhuǎn)入編輯窗口。選擇 區(qū)(第一章已經(jīng)講述)中的修改(M)， 頁(yè)面屬性(P) CTRL+J為該操作的快捷鍵，設(shè)置一些必要的頁(yè)面屬性，如下圖：a 標(biāo)題（T）：頁(yè)面的標(biāo)題會(huì)直接顯示在瀏覽器的左上方，例如用瀏覽器打開(kāi)草原孤星網(wǎng)站，可以在瀏覽器的左上角看到該頁(yè)的標(biāo)題“草原孤星-輕輕松松做網(wǎng)頁(yè)(清爽新版)”。務(wù)必要養(yǎng)成為每一頁(yè)都設(shè)定一個(gè)標(biāo)題的習(xí)慣，這既便于訪問(wèn)者的瀏覽，也有助于你在網(wǎng)頁(yè)編輯的過(guò)程中區(qū)分不同的頁(yè)面。雖然標(biāo)題并不是一個(gè)網(wǎng)頁(yè)必要的元素，但卻是體現(xiàn)著網(wǎng)頁(yè)制作者有否從細(xì)處為瀏覽者著想。b 背景圖像（I）：點(diǎn)擊瀏覽（B）按鈕，可以為網(wǎng)頁(yè)添加背景圖片。c 背景（G）：默認(rèn)為白色，點(diǎn)擊可以選擇其他的顏色。后面“#FFFFFF”是以16進(jìn)制形式顯示的RGB色值。d 文本（E）：在這里將文字默認(rèn)設(shè)置為黑色。要注意，假如不對(duì)背景及文字的顏色進(jìn)行設(shè)置（此時(shí)RGB色值顯示為空），那么瀏覽器在顯示頁(yè)面的時(shí)候，就會(huì)采用系統(tǒng)的默認(rèn)設(shè)置。但因?yàn)椴煌南到y(tǒng)的設(shè)置都可能會(huì)有所區(qū)別，這樣就回導(dǎo)致頁(yè)面的顯示效果也是千差萬(wàn)別。因?yàn)?，為了更好地讓?yè)面體現(xiàn)出你的設(shè)計(jì)思想，就千萬(wàn)別忘記設(shè)定頁(yè)面的背景顏色及文字顏色。e 鏈接（L）：設(shè)定超級(jí)鏈接的顏色，不設(shè)定則默認(rèn)為藍(lán)色。f 頂部邊界和左邊界：設(shè)置左部及頂部的頁(yè)邊距，一般都設(shè)置為“0”以方便于網(wǎng)頁(yè)的編輯。其它的可以自行設(shè)置一次，看看有何不同。以便熟練。確保頁(yè)面的設(shè)置正確后，點(diǎn)擊 確定結(jié)束。制作一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)萬(wàn)事起頭難，就讓我們先從最簡(jiǎn)單的網(wǎng)頁(yè)做起。如果你是按照先前的步驟一步一步做下來(lái)，那么應(yīng)該可以如下類似的畫(huà)面：此時(shí)光標(biāo)處于 區(qū)編輯窗口的最最左上角，現(xiàn)在可輸入你喜歡的任何文字，例如：“歡迎來(lái)來(lái)品味人生網(wǎng)站”，選取文字，在 區(qū)屬性面板上的大?。⊿）下拉菜單選取文字的大小，例如“7”，再點(diǎn)擊面板上的（這個(gè)是讓對(duì)象居中的操作，旁邊分別為居左居右）使文字置中，再在文字前敲幾個(gè)回車(chē)，使文字下移，直到使文字完全至于頁(yè)面中央高度為止，如下圖：選取 區(qū)菜單中的文件(F) 保存(S)該操作的快捷鍵為：CTRL+S保存頁(yè)面，恭喜你，你的第一個(gè)網(wǎng)頁(yè)就已經(jīng)完成了，按 F12 注：F12為預(yù)覽網(wǎng)頁(yè)的快捷操作，你可以從 區(qū)菜單中的文件（F）在瀏覽器中預(yù)覽這里操作看看頁(yè)面效果，滿意嗎？第四章：用圖片美化你的頁(yè)面上面的網(wǎng)頁(yè)實(shí)在也太單調(diào)了，當(dāng)然無(wú)法讓大家滿意，現(xiàn)在我們來(lái)一步一步美化我們的頁(yè)面。而最簡(jiǎn)單直接的方法是在網(wǎng)頁(yè)上添加圖片。而很大程度上，人們說(shuō)一個(gè)網(wǎng)頁(yè)漂亮，通常就是指網(wǎng)頁(yè)上的圖片漂亮。點(diǎn)擊對(duì)象面板上的( 區(qū)中選中常用將在 區(qū)找到)按鈕，然后彈出對(duì)話框，選擇需要插入的的圖片，如下圖：如果被選擇的文件，是網(wǎng)站目錄以外的文件，系統(tǒng)就會(huì)問(wèn)你時(shí)候?qū)D片復(fù)制到網(wǎng)站內(nèi)，如下圖。答案當(dāng)然是“是”，否則網(wǎng)頁(yè)傳上服務(wù)器后，圖片就不會(huì)被顯示，因?yàn)閳D片根本就不在網(wǎng)站里面：接著，選擇圖片在網(wǎng)站的存放位置，如下圖。我的做法是將所有圖片另存放在同一個(gè)目錄，例如如圖所示的“image”，這樣可以方便查找。也有人喜歡將圖片和網(wǎng)頁(yè)文件混放在一起，看各人習(xí)慣，沒(méi)有什么特別好，也沒(méi)什么特別不好。(不過(guò)當(dāng)站點(diǎn)的文件多起來(lái)時(shí)就顯得不好了)但不知道你有沒(méi)有留意到第二章里講述新建站點(diǎn)里提及的默認(rèn)圖像文件夾，如果你設(shè)置了這個(gè)，將會(huì)自動(dòng)把文件復(fù)制到你的默認(rèn)圖片文件夾里去而不會(huì)出現(xiàn)上圖的對(duì)話框。如果你覺(jué)得這個(gè)操用比較實(shí)用，可以現(xiàn)在設(shè)置一下（參考第二章，你可以把站點(diǎn)內(nèi)的image文件夾設(shè)為默認(rèn)圖片文件夾）。保存完畢，就可以看頁(yè)面的效果：復(fù)習(xí)：細(xì)心的朋友可能發(fā)現(xiàn)了，上圖右邊 區(qū)的站點(diǎn)小窗口里并沒(méi)有看到剛才插入的圖片，不是按了確定讓文件復(fù)制進(jìn)去了嗎？，不用急，回頭看一下第二章，新建站點(diǎn)里的介紹，是不是說(shuō)到了一個(gè)刷新的按鈕，點(diǎn)一下就可以找到剛才插入的圖片了,如下圖的 b 插入圖片后，下面接著講格式化插入的圖片：假設(shè)現(xiàn)在我們插入的是如下這張圖片：展開(kāi)區(qū)（第一章已經(jīng)提及）屬性面板，點(diǎn)選該圖片A 圖片的縮略圖及圖片的大小。B 圖片的長(zhǎng)寬，如果圖片長(zhǎng)于寬跟原圖的大小不一致的話，這里的數(shù)字會(huì)用粗體顯示；點(diǎn)取一張圖片，你可以看到圖片會(huì)被套上一個(gè)框和三個(gè)點(diǎn)，三個(gè)點(diǎn)分別代表將圖片向三個(gè)不同的方向拉伸，從而達(dá)到放大和縮小的效果；在拉伸過(guò)程中，按著Shift鍵，再拖動(dòng)角上的點(diǎn)，可以使圖片保持寬高比例拉伸，如下圖。如果要將圖片恢復(fù)為原始大小，可以按屬性面板右下角的“重置大小”按鈕。C 源文件(S)是圖片所在的位置；鏈接(L)是該圖片對(duì)應(yīng)的超鏈接，由于沒(méi)有做成鏈接，所以這里顯示為空；后面的兩個(gè)按鈕 ，前者可以拉出一個(gè)箭頭，直接將圖片或鏈接指向文件夾的某一個(gè)文件，后者則是按照傳統(tǒng)的方法打開(kāi)文件夾去尋找某一個(gè)文件，按照實(shí)際操作的經(jīng)驗(yàn)，前者作用不大；目標(biāo)(R)是鏈接的打開(kāi)方式。關(guān)于鏈接的建立與注意事項(xiàng)將在后面介紹。D 對(duì)齊(A)：圖片的對(duì)齊方式，這是最基本的網(wǎng)頁(yè)排版方式之一，方式大家可以自行調(diào)試，在此就不占篇幅了。替代（T），是圖片的說(shuō)明，假如我在這里輸入：“本站LOGO”，在瀏覽的時(shí)候，將鼠標(biāo)移到圖片上，就可以看到這些說(shuō)明；邊框（B）：圖片的邊框?qū)挾?，例如輸?10：E 圖片的置左、居中、置右，相信只要你使用過(guò)Word2000 ，就不會(huì)對(duì)他感到陌生。 H 垂直距:指圖片離上面的距離，水平距也是同理，只是水平方向。F 用于在一個(gè)圖片上的不同區(qū)域制作多個(gè)不同鏈接，也留待后面介紹如何建立鏈接時(shí)介紹。 第五章：文字處理與鏈接適當(dāng)?shù)膱D片，可以令網(wǎng)頁(yè)生色不少，但也不要忘記，文字，才是一個(gè)網(wǎng)頁(yè)最基本的要素?，F(xiàn)在讓我們回過(guò)頭來(lái)看看Dreamweaver可以在文字上耍些什么花招。選取一段文字，此時(shí)的屬性窗口（ 區(qū)）顯示如下：A 格式(F)：可以選擇幾種預(yù)設(shè)的文字格式；B 選擇文字的字體，這里可以選擇的全是是英文字體，如果想選擇其他字體，就要選擇最底的一項(xiàng)，編輯字體列表.(一般的文字編輯，默認(rèn)字體就可以了),在那里，你可以加入刪除字體列表，這里就不多說(shuō)了；注意：因?yàn)閯e人的系統(tǒng)上不一定裝有與你相同的字體，所以不要將一些特殊的字體加到列表中并使用。如果真有需要用到這些字體，應(yīng)當(dāng)做成圖片后再使用。C 大小(S)：文字的大小，數(shù)字越大，文字也越大；D 在這里選擇文字的顏色：你不僅可以在上面這個(gè)調(diào)色版上選取顏色，還可以選取屏幕上的任意顏色。其中可以去掉文字上的顏色，使其顯示為默認(rèn)顏色值；可以選擇其他樣式的調(diào)色版（可以試試選擇不同的，看看調(diào)色板有什么變化）；可以在擴(kuò)展調(diào)色版上選取顏色：在這里，不僅可以選取更為豐富的顏色，還可以通過(guò)填寫(xiě)RGB數(shù)值來(lái)選取顏色并將該顏色值保存起來(lái)方便以后調(diào)用。E 是設(shè)置字體為粗體和斜體。 F 設(shè)置文字的置左、置中、置右。G 為鏈接的網(wǎng)址，或文件的路徑，如：選中文字，填上,剛文字鏈接到品味人生網(wǎng)站。H 設(shè)置文字段落標(biāo)號(hào)，如： 新浪 搜狐 網(wǎng)易 或 1. 新浪 2. 搜狐 3. 網(wǎng)易 是設(shè)置文本的凸出和縮進(jìn)的，如：品味人生品味人生其實(shí)屬性面板上還有一些小按鈕的，不知道你有沒(méi)有留意到了：a 點(diǎn)擊可以顯示或隱藏該面板（所有面板上的該按鈕均有此功能）；b 點(diǎn)擊可出現(xiàn)彈出菜單（所有面板上的該扭鈕均有此功能），如下圖：如果選擇了關(guān)閉面板，可以在菜單區(qū)（ 區(qū)）找回屬性面板；d 展開(kāi)或隱藏非常用的項(xiàng)目（所有面板上的該扭鈕均有此功能）；e 快速標(biāo)簽編輯器，如果對(duì)HTML標(biāo)簽了解的話，使用該項(xiàng)可以事并功倍。超級(jí)鏈接（L），簡(jiǎn)稱鏈接，是頁(yè)面與頁(yè)面之間一個(gè)單向的關(guān)聯(lián)關(guān)系。通過(guò)點(diǎn)擊鏈接，我們可以從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面。我們可以在文字、圖片建立鏈接。1、文字鏈接在頁(yè)面中選取需要建立鏈接的文字，如下圖：在屬性面板的鏈接(L)一項(xiàng)，填寫(xiě)鏈接地址，當(dāng)瀏覽者點(diǎn)擊該鏈接的時(shí)候，瀏覽器就回跳轉(zhuǎn)到該頁(yè)面，例如這里填寫(xiě)的是：如果你希望該頁(yè)面是在一個(gè)新窗口打開(kāi)，可以在目標(biāo)(T)中選擇“_balnk”。如果要鏈接到網(wǎng)站內(nèi)的文件，可以點(diǎn)擊 ：上圖中，我們是將文字鏈接到dwmx04.htm這個(gè)文件，特別注意的是最底的相對(duì)于的選項(xiàng)，意思是選擇相對(duì)路徑的形式，默認(rèn)是文件，也可以選擇根目錄，區(qū)別在于，文件是指相對(duì)路徑是從本頁(yè)開(kāi)始計(jì)算，而根目錄是從根目錄開(kāi)始計(jì)算（即“/”）另外，如果使用站點(diǎn)根目錄的模式做成的鏈接，在本地硬盤(pán)直接打開(kāi)頁(yè)面瀏覽通常會(huì)出錯(cuò)，但在Dreamweaver的預(yù)瀏模式和上傳上服務(wù)器后，都不會(huì)有問(wèn)題。2、圖片鏈接圖片鏈接的建立過(guò)程與文字鏈接相似，就不多作介紹了。但特別要提出的是，某些圖片，在加上鏈接后，會(huì)出現(xiàn)一個(gè)藍(lán)色的邊框，要將邊框去掉，將邊框(B)設(shè)為0即可。3、熱區(qū)鏈接前面介紹的圖片鏈接，一張圖只能對(duì)應(yīng)一個(gè)鏈接，能不能一張圖對(duì)應(yīng)多個(gè)鏈接呢？答案是可以的，選取一張圖片后，可以在屬性面板( 區(qū))看到地圖（M）選項(xiàng)：其中： 創(chuàng)建矩形熱區(qū)， 創(chuàng)建原形熱區(qū)， 創(chuàng)建多邊形熱區(qū)。例如我們現(xiàn)在點(diǎn)，光標(biāo)變成一個(gè)十字，此時(shí)可以在圖片上畫(huà)出一個(gè)藍(lán)色矩形的熱區(qū)：此時(shí)對(duì)應(yīng)的屬性面板為：同樣地，在鏈接(L)輸入鏈接地址（“#”表示一個(gè)空鏈接），而替代(T)則為當(dāng)鼠標(biāo)指向熱區(qū)時(shí)所顯示的文字，與圖片的替代(T)相似。我們可以通過(guò) 選擇不同的熱區(qū)，并通過(guò)調(diào)整熱區(qū)四個(gè)角的控制點(diǎn)調(diào)整熱度的大小。通過(guò)熱區(qū)，我們可以在圖片的任何地方做一個(gè)鏈接，當(dāng)然可以在一張圖片畫(huà)很多熱點(diǎn)，做很多鏈接，分別鏈接到不同的頁(yè)面。關(guān)于鏈接的提示：1、如果要鏈接到一個(gè)E-mail地址，則在鏈接(L)處填寫(xiě)：“mailto:地址”，例如mailto:，或者點(diǎn) 區(qū)為常用時(shí) 區(qū)中的，填上文本和E-Mail。那么點(diǎn)擊該鏈接的時(shí)候，就回打開(kāi)默認(rèn)的E-mail程序，例如Outlook，發(fā)送E-mail到這個(gè)地址。2、如果鏈接到瀏覽器無(wú)法打開(kāi)的文件，例如exe、Zip等文件，那么瀏覽者在點(diǎn)擊這個(gè)鏈接的時(shí)候，就會(huì)彈出對(duì)話框，詢問(wèn)是將文件保存到硬盤(pán)的什么地方，這就實(shí)現(xiàn)了文件下載的功能。思考：何為相對(duì)鏈接和絕對(duì)鏈接？絕對(duì)鏈接指示文件的完整路徑，如：htttp://homepage/homepage.asp或者：D:草原孤星新版homepagedwdw4dw42.htm相對(duì)鏈接指示文件的相對(duì)路徑，如：文件index.htm和defaule.htm在同一目錄下，從index.htm鏈接到default.htm只需要在鏈接處填上：default.htm就可以了，如果default.htm在index.htm的上級(jí)目錄則：./default.htm,“./”用于返回上級(jí)目錄。一般將鏈接做為相對(duì)的，因?yàn)檫@樣兼容性比較好，可移植。如果做成絕對(duì)的鏈接，當(dāng)把網(wǎng)站換了目錄后，所有鏈接將要重新做過(guò)。目標(biāo)（T）的說(shuō)明：_blank為打開(kāi)新窗口；_parent為父窗口（使用框架時(shí)）；_seft為本窗口；_top為上級(jí)窗口（使用多級(jí)框架時(shí)）第六章：網(wǎng)頁(yè)的排版(表格篇)表格是網(wǎng)頁(yè)的一個(gè)非常重要元素，因?yàn)镠TML本身并沒(méi)有提供更多的排版手段，我們往往就要借助表格實(shí)現(xiàn)網(wǎng)頁(yè)的精細(xì)排版?？梢哉f(shuō)表格的是網(wǎng)頁(yè)制作中最為重要的一個(gè)技巧，表格運(yùn)用得好壞，直接反映了了網(wǎng)頁(yè)設(shè)計(jì)師的水平。點(diǎn)擊對(duì)象面板的，看到如下的對(duì)話框：A 行數(shù)：表格的行數(shù)；列數(shù)：表格的列數(shù)；B 寬度：表格的寬度，單位可以是像數(shù)（Pixels）或百分比（Percent）。按像素定義的表格大小是固定的，而按百分比定義的表格，會(huì)按照瀏覽器的大小而變化。后面會(huì)繼續(xù)深入講解兩種定義方法的區(qū)別；C 邊框：表格線的寬度；D 單元格間距：?jiǎn)卧耖g距；單元格填充：?jiǎn)卧駜?nèi)距。所謂的單元格，就是表格里面的每一小格。按照如圖的設(shè)置后，就得到下面這個(gè)表格： 在表格線上點(diǎn)一下，可以全選整個(gè)表格，此時(shí)可在屬性面板看到：A 行(R)，列(C)：表格的行和列；B 寬(W)，高(H)：表格的寬和高，通常情況下，我們都不會(huì)定義表格的高度；C 間距(S)，邊距(P)：?jiǎn)卧耖g距和單元格邊距；邊框(B)：表格線的寬度；D 對(duì)齊(A)：表格的對(duì)齊方式，可以將表格靠左（Left）、置中（Center）、靠右（Right）；E 消除列的寬度設(shè)置；消除行的高度設(shè)置；將表格寬度的設(shè)置由百分比轉(zhuǎn)換為像素；將表格高度轉(zhuǎn)化為象素；將表格寬度轉(zhuǎn)化為百分比；將表格高度轉(zhuǎn)化為百分比；F 背景顏色(G)：設(shè)置表格的背景顏色；G 邊框顏色(R)：設(shè)置表格線的顏色；H 背景圖像(B)：設(shè)置表格的背景圖，如果設(shè)置了背景圖，背景顏色就失效了；點(diǎn)擊后面的公文包按鈕選擇背景圖；如果我們把光標(biāo)移到其中一個(gè)單元格，此時(shí)看到的屬性面板又有所不同：A ：合并單元格（之前要先選擇相應(yīng)的需要合并單元格）；：拆分單元格，拆分為多行或多列；B 水平(Z)：?jiǎn)卧駜?nèi)部的水平對(duì)齊方式，作用與 類似；垂直(T)：?jiǎn)卧駜?nèi)部的縱向?qū)R方式；C 寬(W)，高(H)：?jiǎn)卧竦膶挾扰c高度；D 背景(B)：?jiǎn)卧癖尘皥D；E 背景顏色(G)：?jiǎn)卧癖尘邦伾籉 邊框(R)：?jiǎn)卧襁吙蝾伾?。如果你的網(wǎng)頁(yè)里沒(méi)有一個(gè)表格，那可以說(shuō)算不上一個(gè)網(wǎng)頁(yè)（FLASH做的除外），表格的重要性就可想而知。表格的參數(shù)說(shuō)得差不多了，使用表格有很多的技巧，你可否知道呢？1.使用表格排版網(wǎng)頁(yè)，可以使你的網(wǎng)頁(yè)更美觀。（將表格的寬設(shè)為100%,可以使網(wǎng)頁(yè)的兼容性更好），有的人喜歡有層來(lái)排版，但層在不同分辨率的瀏覽器中有不同的效果，兼容性不好。2.不要把整個(gè)網(wǎng)頁(yè)放在一個(gè)大的表格里，因?yàn)橐粋€(gè)大表格里的內(nèi)容要全部LOAD完才會(huì)顯示，如果整個(gè)網(wǎng)頁(yè)放在一個(gè)表格里，那么你的網(wǎng)頁(yè)就只會(huì)兩種情況：1）全部不顯示。2）全部顯示出來(lái)。3.插入一個(gè)表格，邊框大小設(shè)為0（border=0），間距設(shè)為1（cellspacing=1 ），背景色設(shè)為深色（如bgcolor=#000000），全部選定單無(wú)格，并將單無(wú)格的背景色設(shè)為淺色（如:bgcolor=#FFFFFF），這樣可以得到一個(gè)細(xì)線邊框的表格，請(qǐng)看下面的例子： 當(dāng)然你也可以另一種方法做到：將表格的邊框設(shè)為0，選取表格，用CSS樣式，為表格設(shè)一個(gè)大小為1的邊框（這種方法做出來(lái)的兼容性會(huì)差一些）。4.動(dòng)態(tài)改變表格的顏色，可讓網(wǎng)頁(yè)更有動(dòng)感，把鼠標(biāo)移到下面表格看看效果。 在單元格的標(biāo)記里加上：onMouseOut=this.style.backgroundColor= onMouseOver=this.style.backgroundColor=lightgreen就可以了；這些是些javascript腳本，如果你看不懂，可以暫時(shí)不必理會(huì)，其中l(wèi)ightgreen為鼠標(biāo)移上去的時(shí)候單元格出現(xiàn)的顏色。5.用表格代替水平線，插入一個(gè)表格，將高度設(shè)為1（按需要設(shè)定），當(dāng)然也可以將寬設(shè)為1，制作豎線。注：在DREAMWEAVER里制作時(shí)，先將高設(shè)為1后，切換到代碼窗口，將表格里的空格符去掉（ ）,如果不去了，將看不到效時(shí)。請(qǐng)看下面 6.制作有立體感的表格，請(qǐng)先看下面的幾個(gè)例子：A B C A 表格的參數(shù)：border=1 cellspacing=0 cellpadding=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CCB 表格的參數(shù)：border=1 cellspacing=2 cellpadding=0 bgcolor=#9999CCC 表格的參數(shù)：border=1 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC其實(shí)有一個(gè)技巧：把bordercolor設(shè)為淺色一點(diǎn)，表格就會(huì)凸起來(lái)了。表格的特殊屬性，請(qǐng)看下面的例子：表格的說(shuō)明 代碼如下： 表格的說(shuō)明 表格的嵌套在網(wǎng)頁(yè)制作中被經(jīng)常使用到，尤其是在新浪、搜狐、網(wǎng)易等門(mén)戶網(wǎng)站中，為了使大量的信息整齊地展示在瀏覽者面前，表格的嵌套就使用得最為頻繁。下圖是品味人生的首頁(yè)在編輯狀態(tài)下的情況，可以看到，頁(yè)面密密麻麻地布滿了表格線：在剛開(kāi)始時(shí)候，對(duì)上面表格應(yīng)用可能看得不太懂，但做網(wǎng)頁(yè)時(shí)間長(zhǎng)了，就可以領(lǐng)悟出其中道理了。第七章：網(wǎng)頁(yè)的排版(層的使用)如果你覺(jué)得用表格對(duì)頁(yè)面元素進(jìn)行定位太難掌握，不妨嘗試?yán)脤樱↙ayer）這個(gè)好東西。點(diǎn)擊屬性面板的（ 區(qū)選中常用 區(qū)中可找到）按鈕，光標(biāo)會(huì)成為一個(gè)十字，在編輯窗口上拖動(dòng)，就可以創(chuàng)建出一個(gè)層，我們可以在層上輸入絕大部分的網(wǎng)頁(yè)元素，例如圖片、文字等、表格。層的好處是可以放置在頁(yè)面的任何位置，如下圖：選擇一個(gè)層后，對(duì)應(yīng)的屬性面板如下：A 層編號(hào)：層的名稱，用于識(shí)別不同的層；B 左(L)，上(T)：層的位置，左是距離頁(yè)面左邊界的距離，上是距離頁(yè)面上邊界的距離；寬(W)，高(H)：層的寬和高；C Z軸(Z)：層的Z軸順序；D 背景圖像(I)：層的背景圖；E 顯示(V)：層的顯示狀態(tài)，其中的隱藏是將層隱藏，處于不可見(jiàn)狀態(tài)；F 背景顏色(C)：層的背景顏色；G 標(biāo)簽(A)：層使用的代碼方式，一般使用默認(rèn)的DIV即可；H 溢出：如果層里面的文字太多，或圖片太大，層的大小不足以全部顯示的時(shí)候，可以選擇：visible：超出的部分照樣顯示；hidden：超出的部分隱藏；scrool：不管有否超出，都顯示滾動(dòng)條；auto：有超出時(shí)才出現(xiàn)滾動(dòng)條；層的優(yōu)點(diǎn)很明顯，但缺點(diǎn)也同樣明顯，例如難以制作一個(gè)適應(yīng)不同分辨率的網(wǎng)頁(yè)；當(dāng)一個(gè)頁(yè)面使用了多個(gè)層后，頁(yè)面的復(fù)雜程度增加而導(dǎo)致編輯起來(lái)非常煩瑣；編輯狀態(tài)與瀏覽狀態(tài)的實(shí)際效果有相當(dāng)明顯的差別等。通常人們是采用利用層(Layer)進(jìn)行排版，然后將層轉(zhuǎn)換為表格的做法（修改(M) 轉(zhuǎn)換(C) 轉(zhuǎn)換圖層為表格(L)），大家可自己嘗試一下。下面講述用圖層排版：前面之所以以將圖層與表格互換的功能一筆帶過(guò)，是因?yàn)樵赿reamweaver 4.0以來(lái)，推出了一個(gè)新的Layout排版功能，能夠更加直接方便地對(duì)頁(yè)面布局進(jìn)行編排，在 區(qū)（插入面板）中選中布局，將看到：在標(biāo)準(zhǔn)視圖下，可以像常規(guī)一樣，插入表格，圖層；切換到布局視圖，如果你第一次使用，將遇到下圖的對(duì)話框：如果你勾了不再顯示此消息一項(xiàng)，在以后的切換將不在出現(xiàn)；切換到布局視圖后，將看到：其中：繪制布局表格：象畫(huà)圖一樣在頁(yè)面里面排版表格；繪制布局單元格：在表格中畫(huà)單元格?，F(xiàn)在我們嘗試?yán)靡陨系墓ぞ吲虐嬉粋€(gè)新頁(yè)面：新建一個(gè)頁(yè)面，點(diǎn)在頁(yè)面上畫(huà)出表格，再點(diǎn)，在表格中畫(huà)出單元格，其中表格會(huì)以綠色框表示，單元格會(huì)以藍(lán)色表示，未確定的單元格會(huì)以灰色表示，如下圖：在這里，每一個(gè)表格，單元格的大小都可以隨意的調(diào)整。最后切換標(biāo)準(zhǔn)視圖，你會(huì)發(fā)現(xiàn)，剛才畫(huà)的“布局表格”已經(jīng)全部轉(zhuǎn)化為表格了。如下圖：另外，在布局視圖上的表格上有一個(gè)數(shù)字，表示的是表格的寬度，單擊數(shù)字，可以看到以下菜單：列設(shè)置為自動(dòng)伸展：列自動(dòng)伸縮，就是表格可以按照屏幕比例來(lái)自動(dòng)調(diào)整寬度，相當(dāng)于將表格的寬度定義為百分比。添加間隔圖像：增加/移去透明圖片。透明圖片的作用就是撐住表格的寬度。清除單元格高度：把單元格高度清除掉。第八章：互動(dòng)效果(行為應(yīng)用)互動(dòng)效果一：在網(wǎng)頁(yè)上經(jīng)?？吹竭@樣的效果，當(dāng)鼠標(biāo)移到一張圖片上的時(shí)候，原來(lái)的圖片就切換為另一張圖片，鼠標(biāo)移開(kāi)后，又恢復(fù)原來(lái)的模樣，是怎么做的呢？Dreamweaver比Frontpage優(yōu)勝的其中一個(gè)地方是Dreamweaver能做出能具互動(dòng)性的網(wǎng)頁(yè)。現(xiàn)在，我們就利用Dreamweaver制作這個(gè)最簡(jiǎn)單的互動(dòng)效果變換圖片。 準(zhǔn)備兩張大小相同的圖片，一張是鼠標(biāo)還沒(méi)有移上的狀態(tài)，另一張是鼠標(biāo)移上去后的圖片，例如以下兩圖：點(diǎn)擊對(duì)象面板上的 （ 區(qū)選中常用，在 區(qū)可找到），看到如下的對(duì)話框：A 圖像名稱(Image Name)：變換圖片效果的標(biāo)記名稱，Dreamweaver會(huì)自動(dòng)分配；B 原始