網(wǎng)頁(yè)制作基礎(chǔ)教程

1、網(wǎng)頁(yè)制作基礎(chǔ)教程一、什么是HTMLHTML（超文本標(biāo)記語(yǔ)言）是網(wǎng)頁(yè)中使用的語(yǔ)言，他能被網(wǎng)頁(yè)瀏覽器（IE或Netscape）解釋，從而顯示出豐富多彩的信息（圖片、文字、聲音、影象、動(dòng)畫等）。制作網(wǎng)頁(yè)前首先要弄懂什么是HTML。在IE中點(diǎn)擊查看源文檔，就能看到該網(wǎng)頁(yè)的HTML代碼。下面是個(gè)網(wǎng)頁(yè)文檔（model.htm）的HTML代碼：這里是標(biāo)題第一段文字。第二段文字。【操作】請(qǐng)?jiān)谟浭卤局休斎胍陨洗a，命名為test1.htm，存于D盤，然后雙擊打開看看。標(biāo)記一般是成對(duì)出現(xiàn)的，#FFFFFF表示使用的顏色是白色。.之間是該網(wǎng)頁(yè)的標(biāo)題charset=gb2312表示語(yǔ)言字符集信息是中文簡(jiǎn)體，如big5

2、則是中文繁體。.之間是網(wǎng)頁(yè)的正文內(nèi)容表示網(wǎng)頁(yè)的背景色是白色，默認(rèn)的文字顏色是白色。.之間是h1號(hào)標(biāo)題字.之間是h2號(hào)標(biāo)題字.之間的文字為紅色HTML是一套國(guó)際標(biāo)準(zhǔn)，其標(biāo)記有幾百種，您并無(wú)需全部了解他們，只要記住其中常用的十幾種，就能夠做出很漂亮的網(wǎng)頁(yè)來(lái)。常用的標(biāo)記舉例：標(biāo)記名稱標(biāo)記舉例解釋鏈接 . URL：鏈接的地址，如： 標(biāo)尺線劃一條橫線 換行人工換行 鏈入圖象如：images/face.gif 文字的對(duì)齊Hello元素中間對(duì)齊 Hello元素右對(duì)齊 Hello元素左對(duì)齊 表格.定義表格 定義表行 定義表頭 定義表元(表格的具體數(shù)據(jù)) 【操作】復(fù)制一個(gè)jpg

3、格式的圖片文檔，取名為pic，保存到D盤，在記事本中輸入下列語(yǔ)句，命名為test2.htm，存于D盤。這里是標(biāo)題第二個(gè)網(wǎng)頁(yè)鏈接到校園網(wǎng)鏈接到我的圖片鏈接到test1下面是個(gè)帶邊框的表格FoodDrinkSweetABC二、準(zhǔn)備工作 制作網(wǎng)頁(yè)前重要的工作是規(guī)劃好網(wǎng)頁(yè)的架構(gòu)，一般開設(shè)images、common、temp三個(gè)子目錄，根據(jù)需要再開設(shè)media子目錄，images目 錄中放不同欄目的頁(yè)面都要用到的公共圖片，例如網(wǎng)站的標(biāo)志、banner條、菜單、按鈕等；common子目錄中放css、js、php、include 等公共文檔；temp子目錄放各種臨時(shí)備用的文檔；media子目錄中放flash

4、、avi、quick time等多媒體文檔。在根目錄中原則上按照首頁(yè)的欄目結(jié)構(gòu)，給每一個(gè)欄目開設(shè)一個(gè)目錄，根據(jù)需要在每一個(gè)欄目的目錄中開設(shè)一個(gè)images和media的子目錄用以放置此欄目專有的圖片和多媒體文檔，假如這個(gè)欄目的內(nèi)容特別多，又分出很多下級(jí)欄目，能夠相應(yīng)的再開設(shè)其他目錄。除非有特別情況，目錄、文檔的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特別字符；目錄的命名請(qǐng)盡量以英文為指導(dǎo)，不到萬(wàn)不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證實(shí)，用拼音命名的目錄往往一個(gè)月后連自己都看不懂。網(wǎng)站的首頁(yè)文檔一般取名：index.htm放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片取名

5、：banner標(biāo)志性的圖片取名：logo在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片取名：button在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片取名：menu裝飾用的照片取名：pic不帶鏈接表示標(biāo)題的圖片取名：title三、制作軟件介紹下面介紹3個(gè)做網(wǎng)頁(yè)的輔助軟件，有了軟件并不一定能夠把網(wǎng)頁(yè)做好，關(guān)鍵還得看懂HTML代碼具體表示什么意思。軟件名稱描述長(zhǎng)處缺點(diǎn)如何獲取Microsoft FrontPage微軟Office套件之一，網(wǎng)頁(yè)制作解決方案，適合初、中級(jí)用戶使用和Word軟件的良好兼容，現(xiàn)成的各種模板操作、修改繁瑣，有冗余代碼Office套件里帶有Macromedia Dreamwea

6、verMacromedia公司的網(wǎng)頁(yè)制作3劍客之一（另外2個(gè)是Flash、Firework），適合專業(yè)用戶使用操作靈活，效率高，網(wǎng)頁(yè)可讀性好，解決IE和Netscape的兼容性幾乎沒有需要另外購(gòu)買或下載東方網(wǎng)頁(yè)王5.0企業(yè)版國(guó)內(nèi)交大銘泰軟件公司的網(wǎng)頁(yè)制作解決方案，適合初級(jí)用戶使用操作簡(jiǎn)便，形象直觀，模板豐富擴(kuò)展度不夠，制作不靈活，修改繁瑣需要另外購(gòu)買或下載四、Dreamweaver初步（見演示）1工具欄2屬性欄3定義本地站點(diǎn)4編輯站點(diǎn)主頁(yè)5定義背景顏色和圖象6定義頁(yè)面標(biāo)題7創(chuàng)建鏈接8編輯表格五、網(wǎng)頁(yè)設(shè)計(jì)配色出色十例（1） 這是個(gè)大型的NBA網(wǎng)站。通常我們經(jīng)常看到的此類網(wǎng)站以白色為背景，但是這個(gè)

7、網(wǎng)站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用 RGB表示），文章標(biāo)題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這 樣的配色能夠顯示獨(dú)特的個(gè)性，又不失大型網(wǎng)站的風(fēng)采。（2）下面是個(gè)娛樂類的綜合性網(wǎng)站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套R(shí)GB（0，0，82），字體白色 RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍(lán)為主色調(diào)，但是配以漂亮的圖片，給人的感覺是生機(jī)盎然，充滿了 互動(dòng)色彩和青春氣息。（3） 下面的這個(gè)網(wǎng)站是大名鼎鼎的微

8、軟公司網(wǎng)站，微軟不但軟件做的好，連網(wǎng)頁(yè)制作也是世界一流。他的每一個(gè)網(wǎng)頁(yè)都是制作的樣板。從網(wǎng)頁(yè)我們就能夠看出微軟公司的 風(fēng)格、作風(fēng)，連同雄厚的實(shí)力。背景顏色使用藍(lán)色RGB為（0，151，254），菜單為黑色RGB（0，0，11），菜單為灰色 RGB（200，200，200），字體為黑色RGB（0，0，0）。（4） 現(xiàn)在介紹的網(wǎng)站相對(duì)簡(jiǎn)單，但是她的用色也別具匠心，現(xiàn)在我們來(lái)看一看，整體上使用的是白色RGB（255，255，255），輔助色為 RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡(jiǎn)單，但顏 色搭配很的科

9、學(xué)合理。（5） 下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個(gè)性，現(xiàn)在我們就來(lái)看一看她的顏色搭配。主色調(diào)為黃色RGB為（255，199，48/#FFC730），輔助色 調(diào)為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個(gè)性十足但又不單調(diào)。（6） 橘紅色假如運(yùn)用得當(dāng)?shù)脑捠且环N很使用于網(wǎng)頁(yè)上的顏色。下面的這個(gè)網(wǎng)站就是個(gè)很著名的例子。他的主色調(diào)為RGB（255，151，0）輔助色調(diào)為 RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的 震懾力較強(qiáng)。（7） 鮮紅色也是

10、一種震撼感很強(qiáng)的顏色，假如搭配不當(dāng)，也可能使網(wǎng)站沒有風(fēng)格和特點(diǎn)。下面的這個(gè)網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來(lái)看看他的顏色搭配。他使用 的主色調(diào)是RGB（200，9，0），配以抽象的圖像，文字使用的是RGB（213，229，167）顯得美觀而不失獨(dú)特，大氣而不逼人。（8） 下面介紹的這種色調(diào)是我們制作網(wǎng)頁(yè)的時(shí)候不會(huì)經(jīng)常用到的顏色，假如使用到您的網(wǎng)頁(yè)中，肯定會(huì)給人耳目一新的感覺。他的主色調(diào)為 RGB（144，151，97）輔助色調(diào)為RGB（173，168，112）邊飾為黑色RGB（0，0，0）字體為黑色RGB（0，0，0）。這樣的搭配 顯得風(fēng)格獨(dú)特，顏色和諧而莊重。（9） 下面的設(shè)計(jì)更加的簡(jiǎn)單化

11、，但是顏色的使用使網(wǎng)頁(yè)并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構(gòu)成，分 別是RGB（239，200，161）和RGB（201，254，200）。如此簡(jiǎn)單，但是卻栩栩如生，躍然網(wǎng)上。（10） 下面舉出這個(gè)例子是想證實(shí)一個(gè)道理只要您有足夠的想象力，您就能夠設(shè)計(jì)出漂亮的網(wǎng)頁(yè)?，F(xiàn)在在網(wǎng)上很流行一句話就是網(wǎng)頁(yè)的搭配不要超過四種主要顏色，否 則就有雜亂之感。下面的這個(gè)網(wǎng)站遠(yuǎn)遠(yuǎn)的超過了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個(gè)例子的菜單就使用了7種顏色，但是我們 看到的網(wǎng)頁(yè)并不雜亂，相反感覺作者很有創(chuàng)意。十一、制作滾動(dòng)公告牌1、 在

12、頁(yè)面上插入一個(gè)層，然后為層配置一個(gè)背景，作為公告版的框架。2、 然后在創(chuàng)建的層中插入嵌套層，將嵌套層移動(dòng)到父層的下方。3、 在嵌套層中輸入文本，并將其居中排列。4、 打開時(shí)間軸面板，將子層作為對(duì)象添加到面板中。5、 為子層創(chuàng)建一個(gè)向上移動(dòng)的路徑，將其移動(dòng)到父層的上方。6、 拖動(dòng)最后一關(guān)鍵幀，增長(zhǎng)動(dòng)畫時(shí)間，然后勾選“自動(dòng)播放”和“循環(huán)”兩項(xiàng)。7、 選定父層，在其屬性面板中將“溢出”屬性配置為“hidden”。十二、在頁(yè)面中運(yùn)用flash動(dòng)畫1、 點(diǎn)擊插入中的Flash按鈕，即可為頁(yè)面插入一個(gè)動(dòng)畫。也能夠選菜單插入/媒體/Flash來(lái)完成這一步。2、 選中已插入的動(dòng)畫，看屬性面板。這里能夠配置他的

13、寬、高，也能夠通過拖動(dòng)來(lái)改變大小。3、 能夠在這里點(diǎn)擊“播放”來(lái)預(yù)覽動(dòng)畫。十三、讓插入的flash動(dòng)畫變透明1、 當(dāng)網(wǎng)頁(yè)上已有背景，或是想要在一張圖片上再插入flash動(dòng)畫，而flash動(dòng)畫本身也有背景色，所以會(huì)影響美觀，這時(shí)我們要把他做成透明動(dòng)畫。2、 如在頁(yè)面上插入一張圖像。3、 在圖像上插入一個(gè)層，在層中插入好所需要的flash動(dòng)畫。4、 選中flash動(dòng)畫，在屬性面板中點(diǎn)擊“參數(shù)”按鈕。5、 在“參數(shù)”的左面一格輸入“wmode”。在右面“值”一格輸入“transparent”。十四、在頁(yè)面中播放聲音1、 在完成全頁(yè)面以后，假如要為該頁(yè)添加背景音樂，注意背景音樂一般是*.midi文檔，

14、這樣的聲音文檔十分小，易于快速下載，其他格式不適合作為背景音樂。 2、 在頁(yè)面中任何表格之外，（注意此時(shí)編輯窗口左下方的標(biāo)簽選擇欄中僅顯示這一項(xiàng)，或是在左下角點(diǎn)一下，這 樣才能確保這個(gè)行為是添加在整個(gè)頁(yè)面上的）。點(diǎn)擊行為窗口上的“ ”按鈕，（或用菜單 窗口/行為，打開行為窗口。）3、 從彈出菜單中選擇“播放聲音”。打開一個(gè)對(duì)話框。4、 在這個(gè)對(duì)話框里用“瀏覽”選擇要播放的聲音，并確定。5、 這時(shí)行為面板上自動(dòng)顯示了事件為onload，動(dòng)作為播放聲音。點(diǎn)擊這一行，中間出現(xiàn)一個(gè)按鈕。點(diǎn)擊按鈕，能夠配置這個(gè)聲音在什么事件下播放。能夠選擇“顯示事件”/“IE5.0。6、 我們常用的如Onload（當(dāng)頁(yè)

15、面載入時(shí)）、OnClick（單擊鼠標(biāo)）、OnMouseOver（鼠標(biāo)移到對(duì)象上）、OnUnload(當(dāng)關(guān)閉頁(yè)面時(shí))等。7、 該行為也能夠配置在圖片上、文字鏈接上。在文字鏈接上播放聲音之前，先為文字添加一個(gè)空鏈接，即選中文字，在鏈接一格里輸入一個(gè)“#”符號(hào)。十五、彈出窗口1、首先制作一個(gè)準(zhǔn)備在小窗口中顯示的頁(yè)面（比如a.htm）,由于這個(gè)彈出窗口不能太大，所以內(nèi)容要少一些。2、打開一個(gè)制作好的頁(yè)面，把光標(biāo)移到頁(yè)面中任何我表格以外，點(diǎn)擊行為窗口上的“ ”按鈕，從彈出菜單中選擇“打開瀏覽器窗口”一項(xiàng)。3、在對(duì)話框中里輸入相應(yīng)的配置。要顯示的URL即a.htm，窗口寬度和高度自己定，單位為像素。屬性中

16、的各項(xiàng)參數(shù)需要就打勾。4、 配置完畢后，點(diǎn)“確定”。此時(shí)行為窗口中將顯示打開瀏覽窗口這個(gè)行為，觸發(fā)條件為Onload，假如不是要這項(xiàng)，就自己配置。5、 該行為也能夠配置在圖片上、文字鏈接上。6、 能夠用這個(gè)方法來(lái)表示對(duì)瀏覽者的打開時(shí)的歡迎、網(wǎng)站公告、離開時(shí)的告別語(yǔ)等。十六、控制狀態(tài)欄信息1、 打開頁(yè)面，選中一張圖片。2、 點(diǎn)擊行為窗口上的“ ”號(hào)按鈕，選擇配置文本/配置狀態(tài)條文本。3、 在對(duì)話框里的“消息”一欄里，輸入需要顯示的話，如對(duì)這張圖片的介紹。4、 能夠配置行為的觸發(fā)條件為OnMouseOver（鼠標(biāo)移到對(duì)象上），這樣當(dāng)鼠標(biāo)經(jīng)過這張圖片的時(shí)候，狀態(tài)欄將出現(xiàn)相關(guān)的信息。5、 假如需要鼠標(biāo)

17、在移開后，這個(gè)信息消失，那么再次使用這個(gè)行為，在“消息”一欄里什么都不寫，然后把觸發(fā)條件改為OnMouseOut（鼠標(biāo)移開）。6、 同樣能夠在一段文字上配置該行為?；蚴桥渲迷谡麄€(gè)頁(yè)面上也能夠。十七、彈出信息1、 打開一個(gè)制作好的頁(yè)面，點(diǎn)左下角項(xiàng)。點(diǎn)擊行為窗口上的“ ”按鈕，從彈出菜單中選擇“彈出信息”一項(xiàng)。2、 在配置窗口中“消息”一欄里輸入想顯示的消息即可。3、 觸發(fā)條件配置為Onload（當(dāng)頁(yè)面載入時(shí)），就能夠用來(lái)作為打開頁(yè)面的歡迎信息。如設(shè)為OnUnload(當(dāng)關(guān)閉頁(yè)面時(shí))，就能夠作為用戶關(guān)閉頁(yè)面時(shí)送別信息。4、 也能夠在某一段文字上配置彈出信息。比如一段文字不愿讓人復(fù)制，就選中整段文字

18、，注意此時(shí)左下角顯示P，即段落。5、 然后同樣操作，消息能夠輸入版權(quán)之類的語(yǔ)句。只是配置觸發(fā)條件為OnBeforeCopy（按右鍵時(shí)觸發(fā)）,或OnCopy（按右鍵選復(fù)制時(shí)觸發(fā)）。十八、動(dòng)態(tài)圖片按鈕1、 準(zhǔn)備好兩張同樣大小的圖片，常用的方法是如一張為灰度照片，一張為彩色照片?；蛞粡埵前粹o凹下的樣式，一張是按鈕凸起的樣式。2、 舉例：插入一個(gè)3行1列的表格，配置寬度為180像素。3、 將光標(biāo)置于第一行，插入一張灰度的圖片。4、 在屬性面板中“鏈接”一欄里輸入需要鏈接的地址，并給圖片加上名稱，如tu1.5、 點(diǎn)擊行為窗口上的“ ”按鈕，從彈出菜單中選擇“交換圖像”。6、 此時(shí)在“圖像”一欄中已顯示要

19、交換的圖像，然后在“廟宇原始檔為”一欄里選擇好交換后的那張圖。7、 下面有兩個(gè)參數(shù)，“預(yù)先載入圖像”和“鼠標(biāo)滑開時(shí)恢復(fù)圖像”，都要選中。8、 同樣方法創(chuàng)建另外兩個(gè)動(dòng)態(tài)按鈕。十九、用框架布局頁(yè)面框架由兩個(gè)主要部分組成框架集和單個(gè)框架。1、 點(diǎn)擊插入中的框架，即顯示出已定義的13種框架的樣式。我們上中下結(jié)構(gòu)為例。2、 點(diǎn)擊“上中下”框架結(jié)構(gòu)的圖標(biāo)，此時(shí)在頁(yè)上插入上下兩個(gè)框架，將整個(gè)頁(yè)面分割成了3部分。我們分別在上面輸入“上”，在中間輸入“中”，在下面輸入“下”。 3、 先保存一下。點(diǎn)擊菜單中的文檔/保存全部。這時(shí)首先保存框架集文檔，能夠自己修改名字，如kuangjia.htm。然后將分別保存框架集

20、中的其他頁(yè)面。 在保存對(duì)應(yīng)的頁(yè)面的時(shí)候，該部分會(huì)以虛線框起來(lái)，這樣可將上面部分保存為shang.htm。下面部分保存為xia.htm。中間部分保存為 zhong.htm。4、至此，我們保存了四個(gè)頁(yè)面，分別是框架集，和組成框架集的上、中、下三個(gè)頁(yè)面。所以，其實(shí)這個(gè)框架是由四個(gè)頁(yè)面組成的，所以用框架會(huì)降低一點(diǎn)用戶瀏覽的速度。5、點(diǎn)擊窗口/其他/框架，打開框架的面板。在這里單擊某個(gè)框架，即可選中該框架。當(dāng)框架被選中時(shí)，編輯窗口中對(duì)應(yīng)的框架出現(xiàn)虛線。6、 如：選中上面topframe,此時(shí)屬性面板上顯示的是上面這個(gè)框架的屬性。同樣選中中間框架和下面框架，也能夠分別配置他們的屬性。7、 在編輯窗口中，將

21、鼠標(biāo)放在兩框架之間的邊框上，光標(biāo)將變成上下箭頭形，此時(shí)點(diǎn)擊邊框，選中的是整個(gè)框架集。8、 此時(shí)屬性面板上出現(xiàn)的是整個(gè)框架組的屬性。能夠在此配置框架集是否有邊框、寬度及顏色等。但是最為重要的是能夠在這里配置框架集中各個(gè)框架的大小。9、 在屬性面板的右面的圖示上選中上面框架，配置他的行為80像素，邊框?yàn)?。10、選中下面框架，配置行高為30像素，邊框?yàn)?。11、選中中間框架，配置行高為1，單位為相對(duì)。（相對(duì)的意思是：當(dāng)前行相對(duì)于其他行所占的比例。設(shè)為1就是指占據(jù)除上和下以后的任何瀏覽窗口剩余空間。 12、舉例：將光標(biāo)置于上面框架topFrame上，右鍵選頁(yè)面屬性，配置背景色為#FF6600。然后插

22、入/表格，插入一個(gè)1行2列，邊框邊距都為0 的表格。配置第1個(gè)單元格的寬度為116像素，然后插入一張圖片。將第2個(gè)單元格配置為水平對(duì)齊方式為居中，垂直排列方式為底部，然后依次輸入“獅子座 ”、“魔蝎座”、“雙子座”字樣。13、將光標(biāo)置于中部框架mainFrame中，右鍵選頁(yè)面屬性，配置背景色為#FFFFCC。然后插入一張大圖像。14、將光標(biāo)置于下面框架bottomFrame中，右鍵選頁(yè)面屬性，配置一個(gè)背景圖像。15、另外做好三個(gè)頁(yè)面，作為“獅子座”、“魔蝎座”、“雙子座”所要鏈接的頁(yè)面。16、選中“獅子座”，在屬性中為他配置好要鏈接的頁(yè)面，然后在“目標(biāo)”里選“mainframe”，即該內(nèi)容在中

23、間那個(gè)框架中顯示。17、同樣配置“魔蝎座”、“雙子座”的鏈接。二十、跳轉(zhuǎn)菜單1、 點(diǎn)擊主菜單中的插入/表單對(duì)象/跳轉(zhuǎn)菜單，也能夠用插入/表單，中的跳轉(zhuǎn)菜單圖標(biāo)，來(lái)調(diào)出跳轉(zhuǎn)菜單配置窗口。2、 首先在“文本”一欄里輸入“請(qǐng)選擇相關(guān)網(wǎng)站”字樣。然后點(diǎn)擊窗口上的“ ”號(hào)按鈕。這時(shí)菜單里多了一個(gè)選項(xiàng)，這個(gè)選項(xiàng)沒有鏈接，僅作為跳轉(zhuǎn)菜單的說明文字。3、 在文一欄里輸入需要的網(wǎng)站，如“新浪”，然后在“選擇時(shí)，前往URL”一欄里輸入網(wǎng)站鏈接地址，此時(shí)，菜單項(xiàng)一欄里又多了一個(gè)選項(xiàng)，這個(gè)選項(xiàng)對(duì)應(yīng)一個(gè)網(wǎng)的鏈接地址。4、 使用同樣方法，在菜單中添加其他一些選項(xiàng)及對(duì)應(yīng)的鏈接。還能

24、夠用“上”“下”的按鈕，來(lái)調(diào)整他們的順序。5、 配置窗口的“菜單之后插入前往按鈕”一項(xiàng)先不要選擇。選中“更改URL后選擇第一個(gè)項(xiàng)目”一項(xiàng)，這樣當(dāng)使用跳轉(zhuǎn)菜單到某個(gè)頁(yè)面后，假如返回到跳轉(zhuǎn)菜單頁(yè)面，此時(shí)頁(yè)面中的跳轉(zhuǎn)菜單默認(rèn)顯示的依舊是第1項(xiàng)內(nèi)容。6、 配置完畢后點(diǎn)擊“確定”即可。*因?yàn)樘D(zhuǎn)菜單是個(gè)表單，所以其實(shí)是先插入了表單（紅色虛線區(qū)域），然后在表單中再插入了下拉菜單。7、 想修改選項(xiàng)，能夠選中頁(yè)面上的下攔菜單，此時(shí)點(diǎn)擊屬性面板中的“列表值”，即可修改各項(xiàng)內(nèi)容了。8、 當(dāng)選中跳轉(zhuǎn)菜單時(shí)，行為窗口中也出現(xiàn)行為。雙擊該行為，也能夠進(jìn)入配置窗口，能夠重新對(duì)其進(jìn)行配置。9、 假如“菜單項(xiàng)”里的第一項(xiàng)就是

25、鏈接，而不是上面所說的一句提示的話，那么就要選中“選項(xiàng)“中的“菜單之后插入前往按鈕”。添加一個(gè)“前往”按鈕。二十一、運(yùn)用插件（Dreamweaver功能擴(kuò)展）1、 首先下載好需要的插件，此處舉例用的是Animate Browser Window。這是個(gè)動(dòng)態(tài)改變窗口的大小的插件。打開Dreamweaver Extension Manager，安裝下載好的插件。 2、 啟動(dòng)Dreamweaver，在做好的頁(yè)面上，右擊左下角body，然后點(diǎn)擊行為窗口中的“ ”號(hào)按鈕，在其中選擇“Animate Browser Window”，然后在其中做相應(yīng)的配置。這里配置窗口打開之前高寬均為0，打開后為填滿屏幕。

26、觸發(fā)條件為onLoad。二十二、滾動(dòng)字幕1、把光標(biāo)插入點(diǎn)放在需要插入滾動(dòng)字幕的地方。2、點(diǎn)擊插入面板的“標(biāo)簽選擇器 ”。3、選擇 marquee標(biāo)簽，點(diǎn)擊“插入”按鈕。然后關(guān)閉“標(biāo)簽選擇器 ”。4、轉(zhuǎn)換到代碼視圖。把光標(biāo)插入點(diǎn)放在 兩個(gè)marquee標(biāo)簽之間。5、選擇“窗口”/“標(biāo)簽檢查器”。能夠在“標(biāo)簽檢查器”中配置標(biāo)簽的各種用法。6、點(diǎn)擊behavior配置項(xiàng)右邊的下拉箭頭，選擇滾動(dòng)字幕內(nèi)容的運(yùn)動(dòng)方式。其中三個(gè)選項(xiàng)意思分別是：Alternate：內(nèi)容在相反兩個(gè)方向滾來(lái)滾去。Scroll：內(nèi)容向同一個(gè)方向滾動(dòng)。Slide：內(nèi)容接觸到字幕邊框就停止?jié)L動(dòng)。7、direction屬性配置字幕內(nèi)容的

27、滾動(dòng)方向。四個(gè)選項(xiàng)意思為：down：向下運(yùn)動(dòng)。Left：向左運(yùn)動(dòng)。Right：向右運(yùn)動(dòng)。Up：向上運(yùn)動(dòng)。8、scrollamount屬性配置字幕滾動(dòng)的速度。一般設(shè)為1。9、scrolldelay屬性配置字幕內(nèi)容滾動(dòng)時(shí)停頓的時(shí)間，單位為毫秒。假如要讓滾動(dòng)看起來(lái)流暢，數(shù)值應(yīng)該盡量小。實(shí)例中配置為1毫秒。10、width屬性配置滾動(dòng)字幕的寬度。這個(gè)任意，比如配置為300。11、onMouseOver事件配置鼠標(biāo)移動(dòng)到滾動(dòng)字幕時(shí)的動(dòng)作，常配置為停止?jié)L動(dòng)。onMouseOut事件配置鼠標(biāo)離開滾動(dòng)字幕時(shí)的動(dòng)作，常配置為開始滾動(dòng)。這個(gè)兩項(xiàng)不能選，只能手工輸入。在onMouseOver后面輸入“this.st

28、op();” 在onMouseOut后面輸入“this.start();”12、style屬性配置字幕內(nèi)容的樣式。實(shí)例中配置字幕文字大小，也要手工輸入“font:12px;”。13、loop屬性配置字幕內(nèi)容滾動(dòng)次數(shù)，默認(rèn)值為無(wú)限。“-1”也為無(wú)限。 14、全部代碼：滾動(dòng)字幕內(nèi)容二十三、創(chuàng)建CSS樣式表1、在網(wǎng)頁(yè)上輸入一些文字。2、打開“CSS樣式”面板，也能夠用“窗口/CSS樣式”打開。3、面板下方有四個(gè)按鈕，分別是附加樣式、新建樣式、編輯樣式、刪除樣式。4、點(diǎn)擊“新建樣式”，打開對(duì)話框。輸入名稱，注意名稱前有一個(gè)點(diǎn)號(hào)。如取名為.zi(中文名不行)。類型：創(chuàng)建自定義樣式，定義在：僅對(duì)該文檔。5

29、、此時(shí)再打開一個(gè)對(duì)話框，在左邊的分類里選擇“類型”，然后在右面配置字體為宋體，大小為14像素，顏色任意。然后確定。6、選中頁(yè)面上的文字，然后點(diǎn)擊窗口里的樣式.zi。此時(shí)這段文字就應(yīng)用了CSS樣式。7、如要對(duì)剛才定義的CSS樣式進(jìn)行修改，能夠點(diǎn)中他，然后點(diǎn)下面的編輯樣式按鈕。二十四、創(chuàng)建動(dòng)態(tài)鏈接樣式表1、點(diǎn)擊“新建CSS樣式”對(duì)話框，在“定義在”一欄選擇“僅對(duì)該文檔”，在“類型”一欄里選擇“使用CSS選擇器”。2、當(dāng)樣式表類型選擇“使用CSS選擇器”時(shí)，下拉菜單的名字變成了“選擇器”，表示輸入內(nèi)容為CSS選擇符，單擊下拉按鈕，能夠看到動(dòng)態(tài)鏈接的4種狀態(tài)。a:link終極鏈接的正常狀態(tài)； a:vi

30、sited訪問過的終極鏈接狀態(tài)。a:hover光標(biāo)移至終極鏈接上時(shí)的狀態(tài)； a:active選中終極鏈接的狀態(tài)。3、 接下來(lái)對(duì)這幾種狀態(tài)分別設(shè)定，首先從下拉菜單中選擇a:link，點(diǎn)擊“確定”按鈕后彈出樣式表配置窗口，設(shè)定該樣式無(wú)下劃線，顏色為#FF6600（橙色）。4、 用同樣方法設(shè)定a:visited，設(shè)定其為無(wú)下劃線，顏色為#FFFF00（黃色）。5、 接下來(lái)設(shè)定a:hover，設(shè)定其為有劃線，顏色為#FF6600（橙色）。6、 a:active不用配置，他會(huì)自動(dòng)依照a:hover而定。7、 在網(wǎng)頁(yè)上輸入一句話，在屬性面板中設(shè)定他的鏈接為“#”。即可。*注意：必須按照這樣a:link、

31、a:visited 、a:hover 、a:active的順序來(lái)配置，否則不會(huì)出現(xiàn)預(yù)期的效果。假如我們需要一個(gè)頁(yè)面上有兩個(gè)或更多的鏈接效果，能夠用以下方法：1、 點(diǎn)擊新建樣式按鈕，樣式類型選“使用CSS選擇器”，在“選擇器”一欄里，直接輸入a.link2:link，接著配置a.link2:link為紅色無(wú)下劃線。2、 繼續(xù)定義下面兩個(gè)樣式。名稱都直接輸入，分別設(shè)定他們?yōu)閍.link2:visited，紫色無(wú)下劃線。 a.link2:hover，藍(lán)色有下劃線。3、 此時(shí)在“CSS樣式”選項(xiàng)下多了一個(gè)名稱為link2的自定義樣式。4、 在頁(yè)面中輸入一段話，為他添加一個(gè)#鏈接，選中這個(gè)鏈接，然后點(diǎn)擊

32、樣式表窗口中的樣式link2，將此樣式應(yīng)用在該鏈接上。5、 同樣方法能夠制作同一頁(yè)面上的不同鏈接格式。*為保持一種風(fēng)格，同一頁(yè)面上不宜建立過多的鏈接樣式。二十五、外部樣式表*在不同的頁(yè)面中應(yīng)用相同的樣式表。1、 新建樣式表，取名，然后類型選“創(chuàng)建自定義樣式”，定義在選“新建樣式表文檔”。2、 確定后，打開保存外部樣式表的窗口。然后把他保存到本地站點(diǎn)中即可。3、 此時(shí)，能夠看到樣式表窗口中新增了一個(gè)樣式表文檔，文檔的后綴名為css4、 假如當(dāng)前頁(yè)面中的一個(gè)內(nèi)部樣式表要導(dǎo)出為外部樣式表文檔，以便供其他頁(yè)面使用，能夠點(diǎn)擊樣式表窗口右上角的灰色的圖標(biāo)，選“導(dǎo)出樣式表”，此時(shí)能夠?yàn)闃邮饺∶捅４鏋橐粋€(gè)外

33、部文檔。5、 當(dāng)其他頁(yè)面需要使用外部樣式表時(shí)，能夠點(diǎn)樣式表窗口中的第一個(gè)按鈕“附加樣式表”，打開窗口，然后選擇外部樣式表文檔，在添加為里選“鏈接”，確定即可。二十六、其他CSS*CSS里的背景，是配置文字背景、表格背景圖等。*CSS里的區(qū)塊，是指配置文本的文字間距、對(duì)齊方式、下標(biāo)、上標(biāo)、排列方式等。*CSS里的盒子，是指配置圖片和文本內(nèi)容之間的空白距離，連同圖文混排的方法。*CSS里的邊框，是指配置表格文本區(qū)、按鈕等的美化。*CSS里的列表，是指配置列表項(xiàng)樣式。即那種提綱式的一段話。*CSS里的定位，是指配置頁(yè)面中圖片的相對(duì)和絕對(duì)定位。*CSS里的擴(kuò)展，其中的光標(biāo)，能夠配置光標(biāo)的樣式，能夠配置

34、為hand（手型）、crosshair（十字型）、text（“I”型）、wait（等待型）、default（默認(rèn)型）、help（幫助型），更有各種方向的箭頭型。*CSS里的擴(kuò)展，其中的過濾器，能夠用來(lái)做CSS濾鏡特效，即用來(lái)加工圖片的透明、發(fā)光等。但效果不太明顯，還是用專門加工圖片的軟件來(lái)完成比較好。二十七、創(chuàng)建網(wǎng)上相冊(cè)1、 首先要安裝好FireworksMX軟件。2、 加工好所需要放在網(wǎng)上的照片，把他們加工成相同大小，放在一個(gè)文檔夾里。3、 點(diǎn)擊菜單中的命令/創(chuàng)建網(wǎng)站相冊(cè)，打開配置窗口。4、 輸入相冊(cè)標(biāo)題，副標(biāo)信息，其他信息（以后也可再修改）。“源圖像文檔夾”，選擇剛才保存照片的文檔夾。5、

35、 “目標(biāo)文檔夾”，單擊“瀏覽”按鈕選擇當(dāng)前站點(diǎn)目錄。（即將照片全部保存到站點(diǎn)里來(lái)）6、 “縮略圖大小”一項(xiàng)，能夠根據(jù)需要選擇，“顯示文檔名稱”一項(xiàng)，選中會(huì)在生成的相冊(cè)中顯示每個(gè)圖片的文檔名。7、 “列”一格是每一行顯示的圖片數(shù)，默認(rèn)為5，能夠自己改變。8、 下面兩個(gè)“格式”一般都選“品質(zhì)較高”。9、 選中“為每張圖片建立導(dǎo)覽頁(yè)面”一項(xiàng)。確定即可。二十八、定制網(wǎng)頁(yè)過渡功能*網(wǎng)頁(yè)過渡是指當(dāng)瀏覽者進(jìn)入或離開網(wǎng)頁(yè)時(shí)，頁(yè)面呈現(xiàn)的不同的刷新效果，比如卷動(dòng)、百葉窗等。網(wǎng)頁(yè)看起來(lái)會(huì)更具備動(dòng)感，但是也要注意適可而止，否則太花哨的變化也容易引起瀏覽者的反感。步驟：1、 打開一個(gè)頁(yè)面，單擊菜單中的插入/文檔頭標(biāo)簽/

36、Meta，會(huì)彈出Meta對(duì)話框。2、 在對(duì)話框中的屬性選項(xiàng)的下拉列表中選HTTP-equivalent選項(xiàng)，在值一格中鍵入Page-Enter，表示進(jìn)入網(wǎng)頁(yè)時(shí)有網(wǎng)頁(yè)過渡效果。3、在內(nèi)容一格中鍵入 Revealtrans(Duration=4,Transition=2),Duration=4 表示網(wǎng)頁(yè)過渡效果的延續(xù)時(shí)間為4秒，Transition表示過渡效果方式，值為2時(shí)表示圓形收縮。4、輸入完后單擊確定，存盤。這樣當(dāng)我們點(diǎn)擊一個(gè)超鏈接進(jìn)入這個(gè)頁(yè)面時(shí)就能夠看到效果了。5、另外更有二十多種效供您選擇，只要將Transition的值改為相應(yīng)的效果的代號(hào)即可，具體效果和配置如下表所示效果 Transi

37、tion 效果 Transition盒狀收縮 0 溶解 12盒狀展開 1 左右向中部收縮 13圓形收縮 2 中部向左右展開 14圓形展開 3 上下向中部收縮 15向上擦除 4 中部向上下展開 16向下擦除 5 階梯狀向左下展開 17向左擦除 6 階梯狀向左上展開 18向右擦除 7 階梯狀向右下展開 19垂直百葉窗 8 階梯狀向右上展開 20水平百葉窗 9 隨機(jī)水平線 21橫向棋盤式 10 隨機(jī)垂直線 22縱向棋盤式 11 隨機(jī) 23二十九、庫(kù)的應(yīng)用*網(wǎng)站中有些內(nèi)容需要反復(fù)使用，比如自己制作的一個(gè)網(wǎng)站圖標(biāo)等，此時(shí)將這個(gè)組件存為在庫(kù)里，能夠隨時(shí)調(diào)用。1、 打開一個(gè)頁(yè)面，選擇需要保存的組件，比如一個(gè)

38、圖標(biāo)。2、 點(diǎn)擊菜單窗口/資源，打開資源窗口。然后在其中選最下面一本書樣的按鈕，打開庫(kù)面板。3、 點(diǎn)擊下面的新建按鈕，就將剛才選中的圖標(biāo)保存到庫(kù)里了，此時(shí)還能夠給他取名。4、 在一個(gè)新頁(yè)面上要應(yīng)用庫(kù)里的內(nèi)容時(shí)，打開庫(kù)面板，選中需要用的圖標(biāo)，然后點(diǎn)擊下面的“插入”即可。三十、用模板迅速完成站點(diǎn)（首頁(yè)或內(nèi)部某一頁(yè)）1、 首先規(guī)劃好自己想要制作的網(wǎng)站，要把他的各項(xiàng)鏈接的內(nèi)容都設(shè)計(jì)好。如我的網(wǎng)站：首頁(yè)上的鏈接有：網(wǎng)頁(yè)版、動(dòng)畫版、請(qǐng)留言、關(guān)于我、聯(lián)系我、許愿瓶網(wǎng)頁(yè)版上的鏈接有：站長(zhǎng)簡(jiǎn)介| |教研論文| |課堂尋真| |原創(chuàng)課件| |心海擷貝| |留影人生| |給我來(lái)信| |雁過留聲|動(dòng)畫版上的鏈接和網(wǎng)頁(yè)版相同。以下再鏈接到各種文章或課件的頁(yè)面。如“課堂尋真”鏈接到全是教案標(biāo)題的頁(yè)面，然后由每一個(gè)教案標(biāo)題，再鏈接到放這個(gè)教案的頁(yè)面。其他同理。2、下載好比較適合自己規(guī)劃的、所喜歡的網(wǎng)頁(yè)模板，（模板網(wǎng)站比較好的如： ）一般他都包括兩個(gè)文檔：一個(gè)是index.htm，另一個(gè)一般是命名為images的文檔夾，即我們所說的用來(lái)放置圖片的。3、 定義好站點(diǎn)，然后將這兩個(gè)文檔（夾）復(fù)