1、網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)實(shí)訓(xùn)指導(dǎo)書實(shí)訓(xùn)目的網(wǎng)頁制作課程設(shè)計(jì)是電子商務(wù)專業(yè)的一門重要的專業(yè)必修課程，也是該專業(yè)的一門重點(diǎn)建設(shè)課程。隨著電子商務(wù)的迅速發(fā)展，網(wǎng)站的建設(shè)也越來越重要。目前很多企業(yè)都在上網(wǎng)，開展網(wǎng)絡(luò)營銷活動(dòng)，設(shè)計(jì)并制作企業(yè)自己的商務(wù)網(wǎng)站則是企業(yè)實(shí)現(xiàn)網(wǎng)絡(luò)化經(jīng)營的重要手段。因此，作為電子商務(wù)專業(yè)的學(xué)生，學(xué)習(xí)網(wǎng)頁的設(shè)計(jì)與制作是十分必要的。通過課程設(shè)計(jì)的訓(xùn)練，使每位學(xué)生在掌握理論知識(shí)基礎(chǔ)上，通過身體力行的實(shí)踐具備網(wǎng)頁設(shè)計(jì)與制作的相關(guān)技術(shù)及網(wǎng)頁制作的操作技能，能獨(dú)立設(shè)計(jì)小型WEB站點(diǎn)。實(shí)訓(xùn)任務(wù)通過對(duì)網(wǎng)站的設(shè)計(jì)，使學(xué)生熟練應(yīng)用網(wǎng)站設(shè)計(jì)軟件，使學(xué)生對(duì)網(wǎng)站建設(shè)有一個(gè)綜合系統(tǒng)的掌握。在制作過程中，主要完成

2、對(duì)網(wǎng)頁的布局、色彩的搭配、框架的應(yīng)用、層的運(yùn)用、行為的實(shí)現(xiàn)、表單的使用、模板和庫的應(yīng)用等，完成項(xiàng)目作品。具體要求是：（1）網(wǎng)站中網(wǎng)頁的個(gè)數(shù)不少于10頁（2）至少有一頁用到表格布局（3）至少有一頁用到CSS+DIV布局（4）至少有一頁使用框架布局，至少有一頁使用頁內(nèi)框架（5）為該網(wǎng)站設(shè)計(jì)一個(gè)調(diào)研問卷（6）適當(dāng)使用圖片，并把所有的圖片放在一個(gè)文件夾下（7）可以借助Dreamweaver工具實(shí)訓(xùn)計(jì)劃序號(hào)任務(wù)內(nèi)容課時(shí)1網(wǎng)站策劃項(xiàng)目任務(wù)分析,畫出網(wǎng)站結(jié)構(gòu)草圖1確定欄目1進(jìn)行版面設(shè)計(jì)1搜集素材12制作網(wǎng)頁建立站點(diǎn)1進(jìn)行主頁的設(shè)計(jì)與制作2進(jìn)行其他頁面的設(shè)計(jì)2建立幾個(gè)頁面間的鏈接關(guān)系13測試網(wǎng)站檢查網(wǎng)頁的運(yùn)行

3、情況14作品提交與評(píng)分依照評(píng)分表進(jìn)行考核15實(shí)訓(xùn)報(bào)告的編寫參見附錄（課后完成）0合計(jì)12實(shí)訓(xùn)考核與評(píng)分根據(jù)實(shí)訓(xùn)期間的紀(jì)律考核情況、對(duì)待實(shí)訓(xùn)的態(tài)度，站點(diǎn)的目錄結(jié)構(gòu)，各個(gè)頁面的布局結(jié)構(gòu)、顏色搭配，文字、圖像、動(dòng)畫的合理搭配，網(wǎng)頁之間的鏈接是否順暢，網(wǎng)頁制作技術(shù)的應(yīng)用，網(wǎng)站的整體瀏覽效果等方面進(jìn)行綜合評(píng)分。評(píng)分參考標(biāo)準(zhǔn)如下表所示。網(wǎng)站開發(fā)實(shí)訓(xùn)的參考評(píng)分標(biāo)準(zhǔn)序號(hào)考核項(xiàng)目評(píng)分比例1網(wǎng)站效果（1）內(nèi)容方面：主題明確，內(nèi)容健康、具體，各個(gè)頁面的文字、圖像、動(dòng)畫能夠清晰地表達(dá)主題。70%（2）版面結(jié)構(gòu)：版面結(jié)構(gòu)合理，每個(gè)頁面都有返回上一級(jí)或鏈接到其他頁面的文字或按鈕。（3）視覺感受：色彩搭配協(xié)調(diào)、美觀，頁面設(shè)

4、計(jì)規(guī)范，沒有出現(xiàn)亂碼、空鏈接和錯(cuò)誤鏈接。（4）網(wǎng)站風(fēng)格：網(wǎng)站具有特色，主題、文字、圖像、動(dòng)畫有創(chuàng)新。2紀(jì)律考核實(shí)訓(xùn)期間組織紀(jì)律性強(qiáng)，無遲到、早退、缺課現(xiàn)象10%3創(chuàng)新情況制作的網(wǎng)頁具有獨(dú)創(chuàng)性，構(gòu)思巧妙、有新意5%4成員協(xié)作所有的成員在規(guī)定時(shí)間內(nèi)完成實(shí)訓(xùn)任務(wù)，無雷同現(xiàn)象或抄襲現(xiàn)象。5%5實(shí)訓(xùn)報(bào)告實(shí)訓(xùn)報(bào)告書寫認(rèn)真、完整、字跡清楚、頁面整潔，實(shí)訓(xùn)收獲較大10%合計(jì)100%作品完成情況當(dāng)場驗(yàn)收考核，實(shí)訓(xùn)報(bào)告在14周上交。附錄一：實(shí)訓(xùn)報(bào)告內(nèi)容 封面 目錄 網(wǎng)站全名及 logo 標(biāo)志； 建立網(wǎng)站的目的、意義； 網(wǎng)頁設(shè)計(jì)制作最突出的創(chuàng)意（如 Amgo “俺們走” ,logo 設(shè)計(jì)有特色）； 網(wǎng)站的欄目設(shè)計(jì)；

5、 色彩搭配及其含義（如綠色 + 金黃 + 淡白，體現(xiàn)優(yōu)雅 , 舒適的感覺；） 網(wǎng)站的結(jié)構(gòu)圖和頁面組成； 網(wǎng)站設(shè)計(jì)中具體實(shí)現(xiàn)的幾個(gè)關(guān)鍵功能和相關(guān)技術(shù)說明（例如布局的方法：應(yīng)用層、應(yīng)用表格、應(yīng)用模板、應(yīng)用 Flash 或其他腳本技術(shù)）；對(duì)所做各網(wǎng)頁的抓圖，并做簡要說明；網(wǎng)站建設(shè)的心得體會(huì)和擴(kuò)展性分析；參考資料附錄二：參考網(wǎng)站主題（1）制作教學(xué)資源網(wǎng)站。（2）制作個(gè)人網(wǎng)站。（3）制作班級(jí)網(wǎng)站。（4）制作學(xué)習(xí)網(wǎng)站。（5）制作學(xué)校網(wǎng)站。（6）制作旅游網(wǎng)站。（7）制作公司網(wǎng)站。附錄三：網(wǎng)站設(shè)計(jì)與制作案例31 規(guī)劃網(wǎng)站1策劃網(wǎng)站主題在首手設(shè)計(jì)網(wǎng)站之前，要確定好網(wǎng)站的主題，每個(gè)網(wǎng)站都應(yīng)該具有一個(gè)明確的主題。本

6、章所創(chuàng)建的網(wǎng)站是一個(gè)學(xué)習(xí)類網(wǎng)站，主要介紹網(wǎng)頁制作的基礎(chǔ)知識(shí)、網(wǎng)站建立的基礎(chǔ)知識(shí)、網(wǎng)頁制作的技巧、網(wǎng)頁特效的制作方法、網(wǎng)絡(luò)編程語言、動(dòng)畫制作方法、圖像處理方法等內(nèi)容，同時(shí)為讀者提供大量的網(wǎng)頁制作素材、學(xué)習(xí)網(wǎng)頁設(shè)計(jì)和編程的視頻教程，解決學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作過程中遇到的問題。所以該網(wǎng)站的主題是“提供制作素材、解決學(xué)習(xí)問題、指導(dǎo)網(wǎng)頁制作”。2確定網(wǎng)站風(fēng)格確定好站點(diǎn)主題后，就要根據(jù)該主題選擇站點(diǎn)的風(fēng)格。由于本章所建立的網(wǎng)站是一個(gè)學(xué)習(xí)類網(wǎng)站，要求結(jié)構(gòu)清晰，結(jié)合現(xiàn)代教學(xué)理念，將學(xué)習(xí)與網(wǎng)絡(luò)合理整合，實(shí)現(xiàn)教學(xué)對(duì)象廣泛、使用方便、時(shí)間自由。本網(wǎng)站的主要特點(diǎn)如下：（1）設(shè)計(jì)風(fēng)格要大眾化，為了提高瀏覽速度，盡量減少圖片

7、的使用，更多地使用表格實(shí)現(xiàn)效果。（2）背景顏色以灰色和白色為主、黃色為輔，文字顏色以黑色為主、藍(lán)色和紅色為輔。（3）文字內(nèi)容豐富、知識(shí)性強(qiáng)，標(biāo)題簡潔明了，字體一般采用宋體，大小一般為12像素。（4）首頁的版式結(jié)構(gòu)采用典型的“國”字型結(jié)構(gòu)，二級(jí)欄目網(wǎng)頁采用“頂部和嵌套的左側(cè)框架”結(jié)構(gòu)以及簡單的“左右型”結(jié)構(gòu)。本章所介紹的網(wǎng)站名稱為“網(wǎng)頁設(shè)計(jì)與制作教學(xué)網(wǎng)”，簡稱為“網(wǎng)頁教學(xué)網(wǎng)”，英文名稱為“zzwebjx”。3構(gòu)思網(wǎng)站欄目結(jié)構(gòu)先在紙上繪制網(wǎng)站的欄目結(jié)構(gòu)草圖，經(jīng)過反復(fù)推敲，最后確定完整的欄目和內(nèi)容的層次結(jié)構(gòu)。本章的“網(wǎng)頁教學(xué)網(wǎng)”的欄目結(jié)構(gòu)如表17-1所示。圖17-1“網(wǎng)頁設(shè)計(jì)與制作教學(xué)網(wǎng)”的首頁瀏覽

8、效果表17-1“網(wǎng)頁教學(xué)網(wǎng)”的欄目結(jié)構(gòu)一級(jí)欄目二級(jí)欄目三級(jí)欄目及內(nèi)容頁面首頁index.html網(wǎng)頁制作基礎(chǔ)：wyjch.htmlwyjch_xx_xx.html網(wǎng)頁制作技巧：wyjq.htmlwyjq_xx_xx.html網(wǎng)頁特效制作：wytx.htmlwytx_xx_xx.html網(wǎng)頁素材下載：wysc.htmlwysc_xx_xx.html網(wǎng)絡(luò)編程技術(shù)：wybch.htmlwybch_xx_xx.html網(wǎng)頁書籍瀏覽：wybook.htmlwybook_xx_xx.html網(wǎng)絡(luò)課程瀏覽：wykch.htmlwykch_xx_xx.html教學(xué)交流答疑：wyjl.htmlwyjl_xx_x

9、x.html網(wǎng)站建設(shè)指南：wzjsh.htmlwzjsh_xx_xx.html圖像動(dòng)畫制作：txdh.htmltxdh_xx_xx.html練習(xí)考試題庫：examtk.htmlexamtk_xx_xx.html教學(xué)論壇（）為了簡化對(duì)網(wǎng)站的瀏覽過程，大部分網(wǎng)頁通過二級(jí)欄目就能瀏覽內(nèi)容頁面，首頁的主菜單包括11個(gè)菜單項(xiàng)：制作基礎(chǔ)、制作技巧、網(wǎng)頁特效、網(wǎng)頁素材、網(wǎng)絡(luò)編程、網(wǎng)頁書籍、網(wǎng)絡(luò)課程、教學(xué)交流、建站指南、圖像動(dòng)畫、考試題庫，各個(gè)主菜單所包括的彈出子菜單如表17-2所示。三級(jí)欄目及內(nèi)容頁面用數(shù)字標(biāo)識(shí)其所屬子類，例如利用JavaScript腳本制作網(wǎng)頁的第一個(gè)內(nèi)容頁面，其文件名為：wytx_02_

10、01.html，“02”代表所屬的子類，這一層次的網(wǎng)頁與首頁中的子菜單對(duì)應(yīng)，“01”代表第一個(gè)內(nèi)容頁面的序號(hào)。表17-2首頁中的菜單首頁中主菜單名稱彈出式子菜單名稱制作基礎(chǔ)Dreamweaver、Frontpage、HTML、XML、CSS、JavaScript、VBScript。制作技巧網(wǎng)頁文本、網(wǎng)頁圖像、網(wǎng)頁鏈接、網(wǎng)頁導(dǎo)航、表格布局、層的布局、框架網(wǎng)頁、模板與庫、媒體應(yīng)用、網(wǎng)頁美化、表單網(wǎng)頁、色彩搭配。網(wǎng)頁特效標(biāo)記特效、腳本特效、行為特效、插件特效。網(wǎng)頁素材網(wǎng)頁模板、Logo圖片、首頁背景、精美按鈕、網(wǎng)頁廣告、網(wǎng)頁欣賞、動(dòng)畫圖片、擴(kuò)展插件、導(dǎo)航菜單。網(wǎng)絡(luò)編程ASP、PHP、JSP、.NET

11、、Java、數(shù)據(jù)庫。網(wǎng)頁書籍網(wǎng)頁制作、網(wǎng)頁特效、網(wǎng)絡(luò)編程、圖形圖像、動(dòng)畫制作、網(wǎng)站建設(shè)、藝術(shù)設(shè)計(jì)。網(wǎng)絡(luò)課程學(xué)習(xí)入門、操作指導(dǎo)、教學(xué)向?qū)А＝虒W(xué)交流有問必答、經(jīng)驗(yàn)交流、方法探討、制作心得。建站指南方案設(shè)計(jì)、創(chuàng)意設(shè)計(jì)、網(wǎng)站結(jié)構(gòu)、申請域名、申請空間、網(wǎng)站測試、網(wǎng)站發(fā)布。圖像動(dòng)畫Fireworks、Photoshop、Flash。考試題庫理論題庫、操作題庫、實(shí)訓(xùn)題庫、成套題庫、模擬實(shí)訓(xùn)。視頻教程Dreamweaver視頻教程、Fireworks視頻教程、Flash視頻教程、Photoshop視頻教程、 常用軟件。4規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)根據(jù)網(wǎng)站策劃確定的欄目結(jié)構(gòu)，創(chuàng)建站點(diǎn)目錄，一個(gè)網(wǎng)站的目錄結(jié)構(gòu)要求

12、層次清晰、井然有序，首頁、欄目頁、內(nèi)容頁區(qū)分明確，有利于日后的修改。“網(wǎng)頁教學(xué)網(wǎng)”的目錄結(jié)構(gòu)，各文件夾的所存放文件類型如表17-3所示。注意文件夾和文件的名稱建議不要使用中文名，因?yàn)橹形拿贖TML文檔中容易生成亂碼，導(dǎo)致鏈接產(chǎn)生錯(cuò)誤。表17-3網(wǎng)站的目錄結(jié)構(gòu)及其存放的文件類型文件夾名稱存放的文件類型cssCSS樣式文件。flash 動(dòng)畫文件、視頻文件。image圖像文件、照片。js外部腳本文件。Library庫文件。music音樂、音頻文件。Templates模板文件。text文字素材。webpage_1一級(jí)頁面文件，該文件夾又有多個(gè)子文件夾，例如webpage_1_01。webpage_2

13、二級(jí)頁面文件，該文件夾又有多個(gè)子文件夾，例如webpage_2_01。other其他類型的文件。webstandby備用頁面、備用素材index.html主頁網(wǎng)站的鏈接結(jié)構(gòu)與目錄結(jié)構(gòu)不同，網(wǎng)站的目錄結(jié)構(gòu)指站點(diǎn)的文件存放結(jié)構(gòu)，一般只有設(shè)計(jì)人員可以直接看到，而網(wǎng)站的鏈接結(jié)構(gòu)指網(wǎng)站通過頁面之間的聯(lián)系表現(xiàn)的結(jié)構(gòu)，瀏覽者瀏覽網(wǎng)站能夠觀察到這種結(jié)構(gòu)。本網(wǎng)站的鏈接結(jié)構(gòu)采用“網(wǎng)狀”鏈接結(jié)構(gòu)，結(jié)構(gòu)圖如圖17-2所示。圖17-2“網(wǎng)頁教學(xué)網(wǎng)”中的鏈接結(jié)構(gòu)5主要頁面布局設(shè)計(jì)使用表格對(duì)首頁與其他幾個(gè)主面導(dǎo)航頁面的布局結(jié)構(gòu)草圖進(jìn)行設(shè)計(jì)，主頁布局結(jié)構(gòu)草圖如圖17-3所示，兩種形式的導(dǎo)航頁面布局結(jié)構(gòu)草圖如圖17-4和圖17

14、-5所示。由于本網(wǎng)站中許多頁面都采用圖17-5所示的布局結(jié)構(gòu)，所以可以將該網(wǎng)頁制作成模板。圖17-3主頁的布局結(jié)構(gòu)草圖圖17-4利用“框架”制作的導(dǎo)航頁面圖17-5利用“表格、層、浮動(dòng)框架”制作的導(dǎo)航頁面3.2準(zhǔn)備素材根據(jù)網(wǎng)站的欄目、內(nèi)容設(shè)計(jì)，鏈接結(jié)構(gòu)設(shè)計(jì)，首頁的布局結(jié)構(gòu)，幾個(gè)主要導(dǎo)航頁面的布局結(jié)構(gòu)，準(zhǔn)備所需素材1準(zhǔn)備文本準(zhǔn)備大量網(wǎng)頁中所需的文字資料，可以從各類網(wǎng)站、各種書籍中搜集文字資料，然后制作成word文檔或文本文件，注意各種文字資料的文件名命名要科學(xué)合理，避免日后找不到所需的文本內(nèi)容。2準(zhǔn)備Logo利用Fireworks或Photoshop量身定做本網(wǎng)站的Logo標(biāo)志，Logo標(biāo)志要與

15、本網(wǎng)站的主題相符，要有新意。3準(zhǔn)備圖片及按鈕根據(jù)需要到網(wǎng)上或素材光盤中搜集所需的圖片和按鈕、有些圖片、按鈕需要自己利用圖像處理軟件制作。注意圖片文件要盡可能小。4準(zhǔn)備動(dòng)畫網(wǎng)站中的動(dòng)畫最好能突出主題，起到畫龍點(diǎn)睛之功效。動(dòng)畫一般利用flash軟件制作，本網(wǎng)站主頁和導(dǎo)航頁的標(biāo)題動(dòng)畫就是利用flash軟件量身定做。5建立庫項(xiàng)目網(wǎng)頁中經(jīng)常用到的項(xiàng)目，例如版權(quán)區(qū)，可以事先定義為庫項(xiàng)目，以備制作網(wǎng)頁時(shí)重復(fù)使用，提高工作效率。3.3創(chuàng)建網(wǎng)站1創(chuàng)建本地站點(diǎn)在開始著手設(shè)計(jì)網(wǎng)頁之前，首先要定義站點(diǎn)。因?yàn)榫W(wǎng)頁只是網(wǎng)站的一個(gè)組成部分，所有設(shè)計(jì)的網(wǎng)頁和相關(guān)文件都要放置于站點(diǎn)之中。定義站點(diǎn)的好處是：定義站點(diǎn)以后的所有操作

16、都是在站點(diǎn)統(tǒng)一監(jiān)控之下進(jìn)行。如果使用了外部文件，Dreamweaver就會(huì)自動(dòng)檢測并予以提示和詢問是否將外部文件復(fù)制到站點(diǎn)內(nèi)，以保持站點(diǎn)的完整性。如果某個(gè)文件夾或文件重新命名了，系統(tǒng)會(huì)自動(dòng)更新所有的鏈接，以保證原有的鏈接關(guān)系的正確性。創(chuàng)建站點(diǎn)之前，要求先建立一個(gè)文件夾，以便創(chuàng)建站點(diǎn)時(shí)為站點(diǎn)指定存儲(chǔ)位置。在Windows操作系統(tǒng)中，打開“資源管理器”，創(chuàng)建一個(gè)名為“網(wǎng)頁教學(xué)網(wǎng)”的文件夾。創(chuàng)建站點(diǎn)在第3章已有詳細(xì)介紹，在此只作簡要說明，與第3章中的步驟有所區(qū)別，這里假設(shè)事先已申請了主頁空間，所申址的網(wǎng)址為：，用戶名和密碼也已經(jīng)知道。定義站點(diǎn)的操作步驟如下：（1）在Dreamweaver 8主窗口中

17、，單擊菜單【站點(diǎn)】【新建站點(diǎn)】，將彈出如圖17-6所示站點(diǎn)定義對(duì)話框。在該對(duì)話框中先輸入站點(diǎn)的名稱，然后輸入網(wǎng)址，如圖17-6所示。接著單擊【下一步】按鈕，進(jìn)入到下一步操作。（2）選擇“否，我不想使用服務(wù)器技術(shù)”單選按鈕，然后單擊【下一步】按鈕，進(jìn)入到下一步操作。（3）選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”單選按鈕，接著在下面的文本框中輸入站點(diǎn)文件在本地計(jì)算機(jī)上的存放位置，也可以選擇存儲(chǔ)位置，然后單擊【下一步】按鈕，進(jìn)入到下一步操作。（4）選擇連接到遠(yuǎn)程服務(wù)器的方式為“FTP”,然后分別輸入Web服務(wù)器的主機(jī)名、在服務(wù)器上文件的存儲(chǔ)位置、FTP用戶名、FTP密碼等參數(shù)

18、，如圖17-7所示。然后單擊【下一步】按鈕。（5）選擇“否，不啟用存回和取出”單選按鈕，如圖17-8所示。接著單擊【下一步】按鈕，此時(shí)會(huì)顯示所定義的站點(diǎn)信息。如果發(fā)現(xiàn)有誤可以單擊【上一步】按鈕，返回到上一步操作的對(duì)話框中重新修改。如果站點(diǎn)定義信息符合要求，可以單擊【完成】按鈕，完成站點(diǎn)的定義。此時(shí)會(huì)自動(dòng)顯示“文件”面板，并且會(huì)自動(dòng)切換到新創(chuàng)建的網(wǎng)站。圖17-6輸入站點(diǎn)名稱及網(wǎng)址圖17-7設(shè)置連接遠(yuǎn)程服務(wù)器的參數(shù)2網(wǎng)站目錄結(jié)構(gòu)的搭建創(chuàng)建站點(diǎn)后，在“文件”面板中切換到新創(chuàng)建的站點(diǎn)，然后利用快捷菜單創(chuàng)建文件夾及子文件夾，本網(wǎng)站的目錄結(jié)構(gòu)如圖17-9所示。圖17-8選擇是否啟用存回和取出圖17-9“網(wǎng)

19、頁教學(xué)網(wǎng)站”的目錄結(jié)構(gòu)3.4網(wǎng)站首頁的設(shè)計(jì)與制作首先在網(wǎng)站根目錄下創(chuàng)建首頁文件index.html，在設(shè)計(jì)視圖狀態(tài)下，打開index.html，開始對(duì)首頁進(jìn)行布局。3.4.1網(wǎng)站首頁的布局設(shè)計(jì)首頁的布局方案如下：（1）整個(gè)頁面分為9個(gè)區(qū)域，從上往下依次為：表格1、頁面區(qū)域1、頁面區(qū)域2、頁面區(qū)域3、表格2、表格3、頁面區(qū)域4、頁面區(qū)域5、頁面區(qū)域6。（2）表格1為1行1列（760120），用于插入flash動(dòng)畫和Logo標(biāo)志；表格2和表格3為1行3列；頁面區(qū)域1為76022，為導(dǎo)航欄；頁面區(qū)域2為76020，為導(dǎo)航欄，頁面區(qū)域3為76020，當(dāng)前位置標(biāo)識(shí)；頁面區(qū)域4為76033，圖片型友情鏈接

20、；頁面區(qū)域5為76022，文字型友情鏈接；頁面區(qū)域6：76066，文字型導(dǎo)航菜單與版權(quán)信息區(qū)。（3）表格2的第一列插入表格21（4行1列），第二列插入表格22（5行2列），第三列插入表格23（4行1列）；表格21中第4行插入表格211（18行2列）；表格22中第二列插入表格221（16行2列）；表格23中第4行插入表格231（18行2列）。（4）表格3的結(jié)構(gòu)與表格2相同。網(wǎng)站首頁的布局示意圖如圖17-13所示。圖17-10網(wǎng)站首頁的布局示意圖注意頁面中的間隔線是將表格中有些單元格的背景設(shè)置網(wǎng)狀點(diǎn)所致。3.4.2編輯CSS樣式文件新建一個(gè)CSS樣式文件“style1.css”，其主要代碼代碼如下

21、所示：body font-size: 12px; font-family: 宋體; td font-size: 12px; line-height: 160%; font-family: 宋體 a:hover color: #990000; text-decoration: underline a color: #000000; text-decoration: none .menu:link color: #ff0000; text-decoration: underline .menu:hover color: #ff0000; text-decoration: underline .me

22、nu:visited color: #000000; text-decoration: none #top clear: both; border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; width: 760px; padding: 3px; height:70px #banner width: 756px;text-align: right;padding-right: 4px; #nav background-image: url(./image/d2_

23、bg.gif); background-position: top; width:750px; border-right: #000000 1px solid; border-left: #000000 1px solid; height:22px; text-align: center; padding: 8px; #nav1 background-position: top; width:762px; border-right: #000000 1px solid; border-left: #000000 1px solid; height:20px ; text-align: left

24、; top: 2px ; background-color: #ffcc99; padding: 2px; #nav4 background: #f8e587; background-position: top; width:766px; border-right: #000000 1px solid; border-left: #000000 1px solid;height:20px; text-align: left;padding-top: 5px #text font-size: 14px; margin: 12px; line-height: 160%; text-align: l

25、eft #foot background: #eaba27; background-position: top; width:766px; border-top: #000000 1px solid; border-right: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid; text-align: center; padding-top: 3px #logolink background: #ffffff ; background-position: top; width

26、:766px ; height:33px; text-align: cente r; padding-top: 5px ; border-top-width: 1px ; border-right-width: 1px; border-left-width: 1px ; border-top-style: solid; border-right-style: solid ; border-left-style: solid; border-top-color: #000000 ; border-right-color: #000000 ; border-left-color: #000000;

27、 #wordlink background: #ffffff ; background-position: top ; width:766px; height:22px ; text-align: center ; padding-top: 5px ; border-top-width: 1px ; border-right-width: 1px ; border-left-width: 1px ; border-top-style: solid ; border-right-style: solid ; border-left-style: solid ; border-top-color:

28、 #000000 ; border-right-color: #000000 ; border-left-color: #000000; 在網(wǎng)站首頁代碼的HEAD部分添加一行代碼（），引入CSS樣式文件。3.4.3網(wǎng)站首頁的布局設(shè)計(jì)1網(wǎng)站首頁的主體布局在首頁中插入三個(gè)表格，定義六個(gè)塊（用div標(biāo)記符定義），并在style1.css樣式文件中為這六個(gè)塊定義樣式。首頁主體布局的瀏覽效果如圖17-11所示。圖17-11網(wǎng)站首頁布局的瀏覽效果首頁主體布局的HTML代碼如下：網(wǎng)頁設(shè)計(jì)與制作教學(xué)網(wǎng)|網(wǎng)頁教學(xué)|網(wǎng)頁制作|網(wǎng)頁特效|素材下載 表格1 頁面區(qū)域1 頁面區(qū)域2 頁面區(qū)域3 表格2：a單元格 表格2

29、：b單元格 表格2：c單元格 表格3：a單元格 表格3：b單元格 表格3：c單元格 頁面區(qū)域4 頁面區(qū)域5 頁面區(qū)域6 2插入嵌套表格分別在表格2和表格3的三個(gè)單元格各插入一個(gè)表格，例如在表格2的B單元格中插入一個(gè)5行2列的嵌套表格22，該表格的HTML代碼如下，其他的幾個(gè)嵌套表格的HTML代碼與表格22相似。 表格22:A單元格 表格22:B單元格 表格22:C單元格 表格22:D單元格 表格22:E單元格 表格22:F單元格 表格22:G單元格 接下來在表格21、表格22、表格23、表格31、表格32、表格33中再插入嵌套表格，形成三層嵌套結(jié)構(gòu)，例如表格23中插入一個(gè)18行2列的表格231

30、，該表格的的HTML代碼如下。其也的幾個(gè)表格的HTML代碼與表格231相似。 3.4.4編輯美化網(wǎng)站首頁在首頁中輸入文字、插入圖片、flash動(dòng)畫、腳本代碼，對(duì)首頁進(jìn)行編輯和美化，主要操作內(nèi)容如下：（1）設(shè)置頁面屬性網(wǎng)頁標(biāo)題設(shè)置為“網(wǎng)頁設(shè)計(jì)與制作教學(xué)網(wǎng)|網(wǎng)頁教學(xué)|網(wǎng)頁制作|網(wǎng)頁特效|建站指南|網(wǎng)絡(luò)編程|素材下載|教程下載|HTML|CSS|數(shù)據(jù)庫”，“上邊距”設(shè)置為0。（2）在表格1插入標(biāo)題flash和Logo標(biāo)志。（3）在頁面區(qū)域1中輸入導(dǎo)航文字：“制作基礎(chǔ) | 制作技巧 | 網(wǎng)頁特效 | 網(wǎng)頁素材 | 網(wǎng)絡(luò)編程| 網(wǎng)頁書籍 | 網(wǎng)絡(luò)課程 | 教學(xué)交流 | 建站指南 | 圖像動(dòng)畫 | 考試題

31、庫”。（4）在頁面區(qū)域2左側(cè)輸入“當(dāng)前位置：網(wǎng)頁教學(xué)網(wǎng) 首頁”，右側(cè)輸入文字“日期：”，然后插入日期與時(shí)間，中間用空格分隔。插入顯示日期與時(shí)間的JavaScript代碼的步驟如下：在Dreamweaver 8主窗口中，單擊菜單【插入】【HTML】【腳本對(duì)象】【腳本】，在彈出的“腳本”對(duì)話框“內(nèi)容”列表框中輸入以下代碼：setInterval(showtime.innerHTML=new Date().toLocaleString()+ 星期+日一二三四五六.charAt(new Date().getDay();,1000); 如圖17-15所示的“腳本”對(duì)話框，然后單擊【確定】按鈕，在首頁中文

32、字“日期：”右側(cè)將會(huì)動(dòng)態(tài)顯示瀏覽網(wǎng)頁的日期和時(shí)間。圖17-12“腳本”對(duì)話框（5）在頁面區(qū)域3輸入文字：“推薦視頻教程：Dreamweaver視頻教程 | Fireworks視頻教程 | Flash視頻教程 | Photoshop視頻教程 | 常用軟件”。（6）在表格21、表格211、表格22、表格221、表格23、表格231中插入圖像、輸入文字，注意將間隔單元的背景設(shè)置為網(wǎng)狀點(diǎn)圖片。（7）在表格31、表格311、表格32、表格321、表格33、表格331中插入圖像、輸入文字，注意將間隔單元的背景設(shè)置為網(wǎng)狀點(diǎn)圖片。（8）在頁面區(qū)域4中插入圖片型友情鏈接，在頁頁區(qū)域5中插入文字型友情鏈接，在頁面

33、區(qū)域6中輸入導(dǎo)航菜單文字和版權(quán)信息。（9）利用屬性面板，對(duì)添加的各網(wǎng)頁元素進(jìn)行修飾，包括文字或圖片的對(duì)齊方式，表格或單元格的背景顏色等。（10）應(yīng)用CSS樣式在頁面的六個(gè)塊區(qū)域中應(yīng)用CSS樣式，如表17-4所示。表17-4CSS樣式的應(yīng)用頁面區(qū)域應(yīng)用的樣式的HTML代碼頁面區(qū)域1頁面區(qū)域2頁面區(qū)域3頁面區(qū)域4頁面區(qū)域5頁面區(qū)域6（11）在狀態(tài)插入“打字效果”的文字特效文字在狀態(tài)欄中從左往右一個(gè)一個(gè)顯示，好像打字一樣，在代碼的HEAD區(qū)域輸入如下代碼，實(shí)現(xiàn)打字效果的文字特效。var msg = 歡迎光臨湖南鐵道職業(yè)技術(shù)學(xué)院網(wǎng)頁教學(xué)網(wǎng)，請多提寶貴意見 ;var interval = 220 /間隔

34、時(shí)間var seq=0;function statushow() len = msg.length; /字符串長度window.status = msg.substring(0, seq+1);seq+;if ( seq = len ) seq = 0; window.status = ; window.settimeout(statushow();, interval ); else window.settimeout(statushow();, interval );statushow();（12）保存首頁，并預(yù)覽其效果。首頁的預(yù)覽效果如圖17-1所示。3.5制作二級(jí)欄目網(wǎng)頁和內(nèi)容網(wǎng)頁3.

35、5.1制作模板由于本網(wǎng)站的二級(jí)欄目頁和內(nèi)容頁存在大量布局結(jié)構(gòu)相同的頁面，它們只是具體的內(nèi)容不同，為了統(tǒng)一外觀、提高制作效率，這些頁面基于模塊文件創(chuàng)建。接下來制作模板。1創(chuàng)建基于表格和層的模板（1）新建一個(gè)網(wǎng)頁文件。（2）插入一個(gè)2行2列的表格，且將第一行的兩個(gè)單元格合并。（3）在第二行左邊的單元格插入一個(gè)20行2列的嵌套表格，該表格最后一行的兩個(gè)單元格合并，且輸入文字“返回首頁”。在嵌套表格前19行左邊的單元格插入特殊字符“”。（4）為文字“返回首頁”設(shè)置超鏈接選中文字“返回首頁”，在“鏈接”文本框中輸入“index.html”，在“目標(biāo)”下拉列表框中選擇“_parent”。（5）在第二行右邊

36、的單元格繪制一個(gè)層，該層的寬度為558px，高度為658px。頁面的外觀如圖17-13所示，以上操作是設(shè)計(jì)模板的頁面文檔，此時(shí)的文檔仍是頁面文檔，而不是模板文檔，下面將頁面文檔保存為模板文檔。（6）在Dreamweaver 8主窗口中，單擊菜單【文件】【另存為模板】，彈出“另存板”對(duì)話框，在該對(duì)話框中，選擇站點(diǎn)“網(wǎng)頁教學(xué)網(wǎng)”，輸入模板的名稱：wyjch.dwt，然后單擊【保存】按鈕，將當(dāng)前文檔保存為模板文檔。（7）定義可編輯區(qū)域?qū)㈨撁嫖臋n保存為模板后，還需要在模板中定義可編輯區(qū)域，如果不在模板中定義可編輯區(qū)域，則基于該模板創(chuàng)建的網(wǎng)頁文檔都是不可編輯的。選中頁面中2行2列表格中第一行，單擊菜單【

37、插入】【模板對(duì)象】【可編輯區(qū)域】，將會(huì)彈出“新建可編輯區(qū)域”對(duì)話框，輸入可編輯區(qū)域的名稱：EditRegion3，然后單擊【確定】按鈕，完成可編輯區(qū)域的創(chuàng)建。按照同樣的操作方法將層和嵌套表格都設(shè)置為可編輯區(qū)域，名稱分別為EditRegion4、EditRegion5。單擊標(biāo)準(zhǔn)工具欄中的【全部保存】按鈕，保存模板文檔。模板文檔的外觀如圖17-13所示。圖17-13基于表格和層的模板2創(chuàng)建基于表單的頁面模板為了使網(wǎng)頁瀏覽者既能夠看到網(wǎng)頁特效的HTML源代碼，也能夠?yàn)g覽網(wǎng)頁特效的效果，特創(chuàng)建一個(gè)基于表單的頁面模板。該模板頁面的外觀如圖17-14所示。圖17-14基于表單的模板頁面的外觀效果基于表單模

38、板文檔的HTML文檔如下所示。狀態(tài)欄顯示靜止文字!-function runEx() var winEx2 = window.open(, winEx2,); winEx2.document.open(text/html, replace); winEx2.document.write(unescape(event.srcElement.parentElement.children0.value); winEx2.document.close(); function saveFile() var win=window.open(,top=10000,left=10000); win.docum

39、ent .write(document.all.asdf.innerText) win.document.execCommand(SaveAs,tx.htm) win.close(); 網(wǎng)頁特效標(biāo)題 3創(chuàng)建內(nèi)容頁面的模板按照前期所介紹的方法創(chuàng)建內(nèi)容頁的模板，該模板文檔的名稱為：wyjch1_00.dwt，其頁面外觀如圖17-15所示。圖17-15內(nèi)容頁面模板的外觀效果3.5.2制作基于模板的二級(jí)欄目網(wǎng)頁在模板文檔中定義了可編輯區(qū)域，就可以使用模板文檔創(chuàng)建頁面文檔了。1在Dreamweaver 8的主窗口中，單擊菜單【文件】【新建】，將會(huì)彈出“從模板新建”對(duì)話框，切換到“模板”選項(xiàng)卡，在“模板用

40、于”區(qū)域中選擇模板文檔所要應(yīng)用的站點(diǎn)，從“站點(diǎn)模板”列表項(xiàng)中選擇一個(gè)模板文檔，這里選擇“wyjch.dwt”模板文檔。2單擊【創(chuàng)建】按鈕，于是基于wyjch.dwt模板文檔創(chuàng)建了一個(gè)頁面文檔。3接下對(duì)可編輯區(qū)域進(jìn)行修改。（1）在可編輯區(qū)域EditRegion3中輸入類型標(biāo)題；（2）在可編輯區(qū)域EditRegion5中輸入文章標(biāo)題；（3）在可編輯區(qū)域EditRegion4中創(chuàng)建浮動(dòng)框架，切換到代碼視圖，輸入以下HTML代碼。（4）利用屬性面板為文章標(biāo)題設(shè)置超鏈接，在“鏈接”列表框中輸入鏈接的內(nèi)容網(wǎng)頁的正確路徑和文檔名稱，在“目標(biāo)”列表框中輸入“panther”，注意“panther”為浮動(dòng)框架的

41、名稱。4保存該二級(jí)欄目網(wǎng)頁，預(yù)覽其效果，如圖17-16所示。圖17-16基于模板創(chuàng)建的二級(jí)欄目頁面的預(yù)覽效果以同樣的方法制作基于模板的瀏覽內(nèi)容的頁面和瀏覽網(wǎng)頁特效的頁面。3.5.3制作框架網(wǎng)頁由于網(wǎng)頁特效的類型較多，制定一個(gè)框架網(wǎng)頁，左邊列出網(wǎng)頁特效的大類，右邊既可以列出網(wǎng)頁特效的小類，也可以瀏覽網(wǎng)頁特效的HTML代碼。1制作三個(gè)網(wǎng)頁文件：wytxtop.html、wytxleft.html、wytxmain_01.html，分別如圖17-17、17-18、17-19所示。wytxtop.html頁面中只插入了一個(gè)1行1列的表格，表格中插入一個(gè)flash動(dòng)畫。wytxleft.html頁面中插

42、入了一個(gè)5行1列的表格，表格的“邊框”設(shè)置1，“間距”設(shè)計(jì)為0，“填充”設(shè)計(jì)為1，“邊框顏色”設(shè)置為“#C0C0C0”。 wytxmain_01.html頁面中插入了一個(gè)21行2列的表格，其中第一行的兩個(gè)單元格合并為一個(gè)單元格，表格的“邊框”、“間距”、“填充”、“邊框顏色”設(shè)置與wytxleft.html網(wǎng)頁中的表格相同。圖17-17框架網(wǎng)頁的頂部外觀效果（對(duì)應(yīng)于wytxtop.html網(wǎng)頁）選中文字“返回首頁”，在“鏈接”文本框中輸入“index.html”，在“目標(biāo)”下拉列表框中選擇“_parent”。圖17-18框架網(wǎng)頁左側(cè)導(dǎo)航菜單（對(duì)應(yīng)于wytxleft.html網(wǎng)頁）圖17-19框

43、架網(wǎng)頁右側(cè)網(wǎng)頁特效列表（對(duì)應(yīng)于wytxmain_01.html網(wǎng)頁）2創(chuàng)建框架網(wǎng)頁創(chuàng)建“頂部和嵌套的左側(cè)框架”類型的框架網(wǎng)頁，編輯窗口被劃分成三個(gè)框架。3顯示框架的邊框線在Dreamweaver 8主窗口中，單擊菜單【查看】【可視化助理】【框架邊框】，此時(shí)編輯窗口就顯示出了框架的邊框線。4顯示框架面板在Dreamweaver 8主窗口中，單擊菜單【窗口】【框架】，框架面板便顯示出來了。5導(dǎo)入框架源文件在框架面板中單擊上方的框架，在框架屬性面板中“源文件”文本框中輸入已制作好的網(wǎng)頁文件的路徑和名稱，也可以單擊右側(cè)的【瀏覽文件】按鈕，從彈出的“選擇文件”對(duì)話框中選擇已制作好的網(wǎng)頁文件wytxtop

44、.html。用同樣的方法在另兩個(gè)框架中導(dǎo)入網(wǎng)頁文件wytxleft.html和wytxmain_01.html。當(dāng)三個(gè)框架網(wǎng)頁文件全部導(dǎo)入后，可根據(jù)需要通過拖動(dòng)相鄰之間的邊框線重新調(diào)整各框架區(qū)域的大小。6保存框架集文件在框架面板上單擊最外邊框的框架線選中整個(gè)框架，然后單擊菜單【文件】【框架集另存為】或【保存全部】，在彈出的“另存為”對(duì)話框中輸入文件名wytxFrameset.html。此時(shí)如果有提示信息需要保存框架文件，只需使用導(dǎo)入的源文件名稱保存即可。如果系統(tǒng)提示是否覆蓋，單擊【是】覆蓋即可。7設(shè)置框架屬性分別選中某個(gè)框架，通過框架屬性面板設(shè)置框架的屬性。上方框架的“滾動(dòng)”設(shè)置為“否”，選中

45、“不能調(diào)整大小”復(fù)選框；左側(cè)框架和右側(cè)框架的“滾動(dòng)”設(shè)置為“默認(rèn)”，取消對(duì)“不能調(diào)整大小”復(fù)選框的選中。三個(gè)框架“邊框”都設(shè)置為“默認(rèn)”。8設(shè)置超級(jí)鏈接選中左側(cè)框架“欄目導(dǎo)航”中的“綜合特效”，在屬性面板的“鏈接”欄右側(cè)單擊【瀏覽文件】按鈕，在“選擇文件”對(duì)話框中選擇剛才創(chuàng)建的網(wǎng)頁文件wytxmain_01.html。單擊屬性面板“目標(biāo)”欄右側(cè)的下拉列表，從中選擇“mainFrame”項(xiàng)，即可在主框架（右側(cè)框架）中打開鏈接頁。用同樣的方法創(chuàng)建其他欄目的相關(guān)鏈接。9保存框架集文件和框架文件，預(yù)覽框架網(wǎng)頁效果。3.6設(shè)置首頁的超級(jí)鏈接二級(jí)欄目頁面、內(nèi)容頁面制作完成后，必須通過設(shè)置超級(jí)鏈接才能將他們

46、有機(jī)地聯(lián)系起來，成為一個(gè)完整的網(wǎng)站。1打開網(wǎng)站首頁文檔index.html。2為導(dǎo)航菜單設(shè)置超鏈接。選中某個(gè)導(dǎo)航菜單，在“屬性”面板的“鏈接”項(xiàng)后的文本框中，輸入被鏈接文件的存放路徑和名稱，也可單擊“鏈接”欄右側(cè)的【瀏覽文件】按鈕，在彈出的“選擇文件”對(duì)話框選擇一個(gè)鏈接文件，“目標(biāo)”列表框中為空。3為網(wǎng)站首頁的各個(gè)欄目的標(biāo)題文字設(shè)置超鏈接使用同樣的方法為各個(gè)欄目的標(biāo)題文字設(shè)置超鏈接。4為友情鏈接設(shè)置外部超鏈接設(shè)置外部超鏈接要比設(shè)置內(nèi)部頁面之間超鏈接復(fù)雜一些，選中設(shè)置超鏈接的圖片或者文字，然后在“鏈接”右側(cè)的文本框中輸入所鏈接網(wǎng)站的網(wǎng)址，例如設(shè)置“網(wǎng)址之家”這個(gè)友情鏈接，可以輸入以下代碼：Jav

47、ascript:if(confirm(/)window.location=/5為“設(shè)為主頁”鏈接編寫代碼“設(shè)為主頁”鏈接一般可輸入如下代碼： 設(shè)為首頁6為“收藏本站”鏈接編寫代碼“收藏本站”鏈接一般可輸入如下代碼： 收藏本站7為“留下建議”鏈接插入電子郵電鏈接先選中文字“留下建議”，然后單擊菜單【插入】【電子郵件鏈接】，彈出如圖17-20所示的“電子郵件鏈接”對(duì)話框，在“文本”文本框中輸入“留下建議”，在“E-mail”文本框中輸入郵箱地址，例如。然后單擊【確定】按鈕，完成電子郵件鏈接的設(shè)置。待首頁中所有鏈接設(shè)置完成后，保存首頁文件，瀏覽其效果，對(duì)鏈接進(jìn)行測試。圖17-20“電子郵件鏈接”對(duì)話

48、框3.7制作首頁彈出式菜單17.1節(jié)中所規(guī)劃的首頁彈出式菜單還沒有完成，所有的二級(jí)欄目網(wǎng)頁和內(nèi)容頁制作完成后可以開始制作彈出式菜單了，彈出式菜單是指當(dāng)鼠標(biāo)指針指向某一個(gè)主菜單項(xiàng)時(shí)，按鈕下面會(huì)自動(dòng)彈出一行菜單或一列菜單。本網(wǎng)站使用“顯示彈出式菜單”行為創(chuàng)建所需的彈出式菜單，下面以首頁中的主導(dǎo)航條的主菜單項(xiàng)“網(wǎng)頁特效”為例說明如何制作首頁的彈出式菜單。1設(shè)置鏈接選中導(dǎo)航條中的主菜單項(xiàng)文字“網(wǎng)頁特效”，在屬性面板“鏈接”文本框中輸入“#”。2打開“行為”面板在Dreamweaver 8主窗口中，單擊菜單【窗口】【行為】，即可打開“行為”面板。3創(chuàng)建彈出式菜單先選中導(dǎo)航條中的文字“網(wǎng)頁特效”，然后單擊

49、“行為”面板中的“+”按鈕，在彈出快捷菜單中單擊【顯示彈出式菜單】選項(xiàng)，打開“顯示彈出式菜單”對(duì)話框。（1）設(shè)置彈出式菜單的內(nèi)容選項(xiàng)在“顯示彈出式菜單”對(duì)話框的“文本”文本框內(nèi)輸入“標(biāo)記特效”，“目標(biāo)”列表框?yàn)榭眨凇版溄印蔽募蛑休斎氡绘溄泳W(wǎng)頁的路徑和名稱，也可以單擊【瀏覽文件】按鈕，在彈出的“選擇文件”對(duì)話框選擇一個(gè)鏈接文件。接下單擊“+”按鈕，輸入其他菜單項(xiàng)的文本、目標(biāo)、鏈接等，反復(fù)多次，該彈出式菜單所有的菜單項(xiàng)都設(shè)置完成。如圖17-21所示。圖17-21“顯示彈出式菜單”對(duì)話框中的“內(nèi)容”選項(xiàng)卡（2）設(shè)置彈出式菜單的外觀選項(xiàng)切換到“外觀”選項(xiàng)卡，在上面第一個(gè)列表框中選擇“水平菜單”；在

50、“字體”列表框中選擇“宋體”，“大小”設(shè)置為12，單位為像素；單擊“居中對(duì)齊”按鈕，分別為一般狀態(tài)、滑過狀態(tài)的“文本”和“單元格”設(shè)置顏色。如圖17-22所示。（3）設(shè)置高級(jí)選項(xiàng)切換到“高級(jí)”選項(xiàng)卡，“單元格寬度”選擇“自動(dòng)”，也可以先在右側(cè)的列表框中選擇“像素”選項(xiàng)，然后自行輸入單元格的寬度數(shù)值。圖17-22“顯示彈出式菜單”對(duì)話框中的“外觀”選項(xiàng)卡“單元格高度”設(shè)置為“17”，單位選擇“像素”。“單元格邊距”設(shè)置為1；“單元格間距”設(shè)置為1；“文本縮進(jìn)”設(shè)置為0；“菜單延遲”設(shè)置為500ms，相當(dāng)于0.5秒鐘；取消對(duì)“顯示邊框”復(fù)選框的選擇。下面可以看到其外觀效果，如圖17-23所示。圖1

51、7-23“顯示彈出式菜單”對(duì)話框中的“高級(jí)”選項(xiàng)卡（4）設(shè)置位置選項(xiàng)切換到“位置”選項(xiàng)卡，設(shè)置彈出式菜單相對(duì)于觸發(fā)圖像或鏈接文字的顯示位置。先單擊【低于且位于觸發(fā)器的左邊緣】按鈕，在“X”文本框中輸入“-130”，即彈出式菜單顯示在觸發(fā)鏈接文字的左邊130像素外；在“Y”文本框中輸入“13”，其原因是首頁中顯示水平彈出式菜單的位置只留出了13像素的空間。選中“在發(fā)生onMouseOut事件時(shí)隱藏菜單”復(fù)選框，如圖17-24所示。圖17-24“顯示彈出式菜單”對(duì)話框中的“位置”選項(xiàng)卡在圖17-24所示的對(duì)話框中單擊【確定】按鈕，返回網(wǎng)頁編輯窗口，在“行為”面板列表中顯示了兩個(gè)動(dòng)作：onMouse

52、Out（隱藏彈出式菜單）、onMouseOver（顯示彈出式菜單）。如圖17-25所示。圖17-25行為面板中顯示了兩個(gè)動(dòng)作和“編輯行為”菜單如果需要重新設(shè)置彈出式菜單的選項(xiàng)，可以在“行為”面板中雙擊“顯示彈出式菜單”，或者單擊鼠標(biāo)右鍵，在彈出菜單中單擊【編輯行為】命令，即可重新打開“顯示彈出式菜單”對(duì)話框，對(duì)彈出式菜單進(jìn)行修改，修改完成后單擊【確定】按鈕即可。4保存該網(wǎng)頁文檔，在瀏覽器中查看彈出式菜單的效果，如圖17-26所示。圖17-26首頁中“網(wǎng)頁特效”主菜單的彈出式菜單使用同樣的方法為其他主菜單設(shè)置彈出式菜單。3.8查看與設(shè)置站點(diǎn)地圖站點(diǎn)地圖使用直觀的樹狀結(jié)構(gòu)顯示網(wǎng)站中文件的鏈接關(guān)系，

53、在站點(diǎn)視圖中可以將文件加入到站點(diǎn)中，或者加入、修改、刪除鏈接。1查看站點(diǎn)地圖在“文件”面板中，單擊視圖列表中的“地圖視圖”，如圖17-27所示，這時(shí)，在文件列表中將以站點(diǎn)地圖的方式顯示網(wǎng)站的文件，展現(xiàn)出站點(diǎn)中文件之間的鏈接關(guān)系。單擊【展開以顯示本地和遠(yuǎn)端站點(diǎn)】按鈕，將把以地圖視圖顯示的“文件”面板展開，如圖17-28所示。在圖17-28中單擊工具欄的【站點(diǎn)地圖】按鈕，從其下拉菜單中選擇“地圖和文件”，如圖17-29所示，也可以選擇“僅地圖”。在站點(diǎn)地圖視圖中，首頁文檔index.html顯示在最上方，在index.html文件名下方的頁面都是由首頁所鏈向的頁面。在站點(diǎn)地圖視圖中，不僅能顯示出內(nèi)

54、部鏈接，還能顯示出外部鏈接、電子郵件鏈接、外部樣式文件、圖像文件等。圖17-27選擇“地圖視圖”圖17-28站點(diǎn)文件以“地圖”形式顯示2站點(diǎn)地圖中的操作（1）隱藏文件在站點(diǎn)地圖中選定一個(gè)或幾個(gè)要隱藏的文件，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單單擊【顯示/隱藏】命令，被選中的文件就會(huì)在站點(diǎn)地圖中消失。圖17-29“站點(diǎn)地圖”下拉菜單注意如果菜單【查看】【站點(diǎn)地圖選項(xiàng)】中的級(jí)聯(lián)菜單項(xiàng)【顯示標(biāo)記為隱藏的文件】已經(jīng)被選中，則設(shè)置隱藏文件時(shí)，文件就不會(huì)從站點(diǎn)地圖中消失了。（2）顯示文件如果要顯示隱藏的文件，可以單擊菜單【查看】【站點(diǎn)地圖選項(xiàng)】【顯示標(biāo)記為隱藏的文件】。在站點(diǎn)地圖可進(jìn)行的操作較多，例如可以完

55、成“鏈接到新文件”、“鏈接到已有文件”、“改變鏈接”、“移除鏈接”、“打開鏈接源”、“顯示網(wǎng)頁標(biāo)題”等操作。3保存站點(diǎn)地圖站點(diǎn)地圖可以作為圖形文件保存，操作很簡單，單擊菜單【文件】【保存站點(diǎn)地圖】，在彈出的“保存站點(diǎn)地圖”對(duì)話框，輸入文件名，單擊【保存】按鈕即可。如圖17-30所示即為所保存的站點(diǎn)地圖。圖17-30所保存的站點(diǎn)地圖3.9測試網(wǎng)站一個(gè)網(wǎng)站包含很多鏈接，可能會(huì)出現(xiàn)鏈接錯(cuò)誤或斷鏈現(xiàn)象，在發(fā)布站點(diǎn)前有必要檢查整個(gè)站點(diǎn)的鏈接，以避免站點(diǎn)發(fā)布之后出現(xiàn)無效鏈接情形。利用Dreamweaver 8提供的“檢查鏈接”可以檢查網(wǎng)站中存在斷鏈、孤立文件等。鏈接檢查無誤后，可以在瀏覽器中瀏覽各個(gè)網(wǎng)頁，

56、檢查文字、圖片、鏈接是否有誤、是否會(huì)出現(xiàn)亂碼，網(wǎng)頁元素定位是否準(zhǔn)確，瀏覽速度和視覺效果是否滿意。經(jīng)過測試、修改、再測試、再修改，反復(fù)多次循環(huán)，直到各方面都合格方可發(fā)布網(wǎng)站。3.10發(fā)布網(wǎng)站發(fā)布網(wǎng)站就是把網(wǎng)頁文件上傳到Web服務(wù)器，發(fā)布網(wǎng)站之前先必須申請一個(gè)主頁空間，擁有網(wǎng)頁空間的訪問域名、FTP用戶名和密碼。如果主頁空間已成功申請，可以先與遠(yuǎn)程Web服務(wù)器進(jìn)行連接，連接成功后，再通過單擊“文件”面板上的【上傳文件】按鈕，往遠(yuǎn)程Web服務(wù)器中上傳本地站點(diǎn)，上傳成功后，就可以在瀏覽器中輸入正確的網(wǎng)址訪問網(wǎng)站了。附錄資料：不需要的可以自行刪除C語言編譯器的設(shè)計(jì)與實(shí)現(xiàn) 我們設(shè)計(jì)的編譯程序涉及到編譯五個(gè)

57、階段中的三個(gè)，即詞法分析器、語法分析器和中間代碼生成器。編譯程序的輸出結(jié)果包括詞法分析后的二元式序列、變量名表、狀態(tài)棧分析過程顯示及四元式序列程序，整個(gè)編譯程序分為三部分：(1) 詞法分析部分(2) 語法分析處理及四元式生成部分 (3) 輸出顯示部分一詞法分析器設(shè)計(jì) 由于我們規(guī)定的程序語句中涉及單詞較少，故在詞法分析階段忽略了單詞輸入錯(cuò)誤的檢查，而將編譯程序的重點(diǎn)放在中間代碼生成階段。詞法分析器的功能是輸入源程序，輸出單詞符號(hào)。我們規(guī)定輸出的單詞符號(hào)格式為如下的二元式： (單詞種別，單詞自身的值)#define ACC -2#define syl_if 0#define syl_else 1#

58、define syl_while 2#define syl_begin 3#define syl_end 4#define a 5#define semicolon 6#define e 7#define jinghao 8#define s 9#define L 10#define tempsy 11#define EA 12#define EO 13#define plus 14#define times 15#define becomes 16#define op_and 17#define op_or 18#define op_not 19#define rop 20#define l

59、parent 21#define rparent 22#define ident 23#define intconst 24函數(shù)說明 讀取函數(shù) readline( )、readch( )詞法分析包含從源文件讀取字符的操作，但頻繁的讀文件操作會(huì)影響程序執(zhí)行效率，故實(shí)際上是從源程序文件” source.dat ”中讀取一行到輸入緩沖區(qū)，而詞法分析過程中每次讀取一個(gè)字符時(shí)則是通過執(zhí)行 readch( )從輸入緩沖區(qū)獲得的；若緩沖區(qū)已被讀空，則再執(zhí)行readline( )從 source.dat 中讀取下一行至輸入緩沖區(qū)。掃描函數(shù) scan( ) 掃描函數(shù) scan( )的功能是濾除多余空格并對(duì)主要單

60、詞進(jìn)行分析處理，將分析得到的二元式存入二元式結(jié)果緩沖區(qū)。變量處理 find（ ）變量處理中首先把以字母開頭的字母數(shù)字串存到 spelling 數(shù)組中，然后進(jìn)行識(shí)別。識(shí)別過程是先讓它與保留關(guān)鍵字表中的所有關(guān)鍵字進(jìn)行匹配，若獲得成功則說明它為保留關(guān)鍵字，即將其內(nèi)碼值寫入二元式結(jié)果緩沖區(qū)；否則說明其為變量，這時(shí)讓它與變量名表中的變量進(jìn)行匹配（ 變量匹配函數(shù) find（ ） ），如果成功，則說明該變量已存在并在二元式結(jié)果緩沖區(qū)中標(biāo)記為此變量（ 值填為該變量在變量名表中的位置），否則將該變量登記到變量名表中，再將這個(gè)新變量存入二元式緩存數(shù)組中。數(shù)字識(shí)別 number( ) 數(shù)字識(shí)別將識(shí)別出的數(shù)字填入二元