【正文】 1回到“標準”模式，將光標定位到第8步創(chuàng)建的單元格內，選擇[插入]/[模板對象]/[可編輯區(qū)域]菜單命令，彈出如圖21011所示的對話框，單擊“確定”按鈕，則在該單元格內就出現(xiàn)了一個名為“EditRegion1”的可編輯區(qū)域。居中，背景顏色：CC3333的單元格，輸入文字：首頁　個人簡介 文學作品 繪畫作品 動畫作品　視頻作品　學習心得　給我留言　寫信給我，設置文字格式：字體“宋體”，大小“14px”。 圖2101 圖2102 圖2103 圖2104 圖2105 圖2106 圖2107 圖2108 圖2109 圖21010 三、知識點分解由上圖可知，所有頁面的頁眉、導航和頁腳區(qū)域的內容都是一致的，只要主題區(qū)不一致，所以我們可以利用模板來創(chuàng)建這些頁面，該模板的頁眉、導航和頁腳區(qū)域都是固定區(qū)域，只有主體區(qū)是可編輯區(qū)域，在主體區(qū)域我們可以繪制2個表格，每個表格內創(chuàng)建1個可編輯區(qū)域，同時設置左邊表格的背景顏色和右邊表格的背景圖像。2，選中文字“動物類”，打開屬性面板，設置鏈接：，目標：mainFrame。合并第1行的單元格，設置該行高：83px，邊框：FF99CC，輸入文字“動物類：”，字體為“黑體”。1按【Ctrl+S】保存該網頁。 注意：對于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道該文件對應與該框架集中的哪個框架。二、實驗內容利用框架制作如下圖所示的頁面效果，其中：； 圖292 單擊左側“動物類”的網頁效果圖；圖293 單擊左側“插花類”的網頁效果圖；圖294 單擊左側“海洋類”的網頁效果圖；圖295 單擊左側“郵票類”的網頁效果圖；圖296 單擊左側“詩歌”的網頁效果圖，其中詩歌內容在“”文檔中；圖297 單擊左側“散文”的網頁效果圖，其中散文內容在“”文檔中。內容4的步驟： 打開要實現(xiàn)下拉菜單效果的文檔。選擇層layer2，layer3，layer4，選擇[修改]/[排列順序]/[左對齊]菜單，設置這3層垂直方向對齊。1再單擊“添加行為”按鈕，在彈出的菜單中選擇“顯示隱藏層”，打開“顯示隱藏層”對話框，選中層layer4，單擊“隱藏”按鈕，再單擊“確定”按鈕，然后回到“行為”面板，將事件改為“onMouseOut”。 將光標定位在層layer4中，單擊“布局”工具欄中的“插入表格”按鈕，插入4行1列的表格，在第1個單元格中插入圖像“”，第2個單元格中插入圖像“”，第3個單元格中插入圖像“”，第4個單元格中插入圖像“”。圖2881 按【F12】鍵，預覽。 選擇[窗口]/[時間軸]，調出“時間軸面板”，如圖285所示。圖282 圖像拖動的制作：制作如圖283所示的網頁，要求選中某個水果，可以將該水果放到籃子中，放入籃后就看不見該水果了，圖284為把蘋果放到籃子的效果圖。1 在層“l(fā)ayer8”的左邊，層“l(fā)ayer7”的下方，繪制層“l(fā)ayer11”，然后選擇[插入]/[表格]菜單命令，插入一個6行1列，有邊框的表格，插入后調整表格的大小，使得它跟層“l(fā)ayer11”的大小一致。選擇多個層有2種方法。將光標放在層layer1內，然后按下繪制層按鈕，當光標變成“十字形”時，按Alt鍵直接在層layer1內繪制一個嵌套層layer2，插入圖像“”。5選中最外面的表格，切換到“標準”模式，打開“屬性面板”，將對齊改為“居中對齊”。垂直“居中”的布局單元格，輸入文字“第四屆天目湖南山竹海登山節(jié)盛大開幕”，并將文字設為：字體“宋體”，大小“12px”。在3個圖像所在的布局單元格的正下面繪制3個寬“120px”，高“27px”，水平對齊“居中對齊”，垂直“居中”的布局單元格，分別輸入文字“張家界”、“天涯海角”、“昆明”，并將文字設為：字體“宋體”，大小“12px”，顏色“000099”。3在上面的布局表格內繪制一個寬“278px”，高“42px”，水平對齊“居中對齊”，垂直“居中”的布局單元格，將“” 圖像插入到該單元格。2緊接上面的布局表格，在它下方繪制一個寬“181px”，高“60px”，水平對齊為“居中對齊”，垂直為“居中”的布局單元格，輸入文字“民族風情”，同時將該文字設為：字體“楷體”，大小“18px”，顏色“CC0033”。1緊接導航欄的布局單元格，在它下方繪制一個寬為“181px”，高為“665px”，顏色為“dde56c”的布局表格，用來放左邊導航內容。1再切換到“布局”模式，在“插入”欄的“布局”選項卡中單擊“繪制布局單元格”按鈕。切換到“布局”模式后，在“文檔”窗口的頂部會出現(xiàn)標有“布局模式”的藍色長條。二、實驗內容利用布局表格制作如圖261所示的網頁。在表格的第四行輸入如下數(shù)據(jù)：100867225。(2) 在“插入欄”的“常用”選項卡中單擊“表格”按鈕。掌握格式化表格和排序表格。 f) 在“按下時，前往的URL”文本框中單擊按鈕并選擇要鏈接的文件，如本例中選擇“”，或者直接輸入文件的路徑。圖244 選中“愛情人生”，打開“屬性面板”，將“字號”改為“36px”，“顏色”為“紅色”。將光標定位到導航條后面，敲回車，然后單擊“插入”面板的“HTML”選項卡，再單擊“水平線”按鈕 ，插入水平線。f) 選中復選框，可在載入頁面時下載圖像。 圖243在“插入導航條”對話框中進行具體的設置。四、實驗步驟內容1的實驗步驟：導航條由圖像或圖像組組成，這些圖像的顯示內容隨操作不同而不同。掌握圖像導航條的制作。注意：若要鏈接到當前文檔中名為“top”的錨記，則輸入“top”。使用命名錨記的鏈接可以跳轉至文檔內的特定位置。 (1) 在“文檔”窗口的“設計”視圖中選擇要建立電子郵件鏈接的文本或圖像，如“與我聯(lián)系”。創(chuàng)建電子郵件鏈接有兩種方法。 如果所選擇的圖像文件不在定義的本地站點中，系統(tǒng)會打開如圖235所示的詢問對話框，詢問是否保存到本地站點目錄下。由圖232可以看出，文字以表格的形式顯示在網頁上的，此時注意不是在網頁中繪制表格，把文字錄入進去，使他以“表格式數(shù)據(jù)”顯示出來，“再看一遍”采用了錨鏈接，“返回首頁”采用文字鏈接，兩個鏈接都無下劃線。(9) 單擊“屬性”面板中的“頁面屬性”按鈕，在彈出的“頁面屬性”對話框，單擊“背景顏色”后面的按鈕，在拾色器中選擇“006600”。(3) 上述操作進行完畢后，效果圖如圖227所示，把該圖與圖221進行比較可以發(fā)現(xiàn)編號所在的位置不一樣，此時我們只需要把圖227中帶編號的文字給縮進一下就可以了，選中帶編號的文字，單擊“文本縮進”按鈕即可。編輯一個項目列表。(1) 選擇[插入]/[HTML]/[水平線]菜單命令； (2) 單擊“插入”面板的“HTML”選項卡，再單擊“水平線”按鈕 ，如圖225所示 。 (3) 按【Ctrl+Shift+空格鍵】鍵輸入。在新的頁面中編輯一個項目列表，如圖221所示，要求：字體為“楷體”、大小為“16pt”、顏色為“黃色”，網頁背景顏色為綠色。(4)在工作區(qū)的“編輯窗口”中輸入“歡迎光臨我的小站”圖216 (5)瀏覽測試。在站點文件列表下新建文件和文件夾步驟：(1)在站點文件列表中右鍵單擊“站點—myweb(D:\myweb)”，在彈出的菜單中選擇“新建文件夾”，文件列表中就會出現(xiàn)名為“新建文件夾”的文件夾，將該文件夾命名為image，同樣操作建立css文件夾和mdb文件夾。(4) “本地根文件夾”——選擇本地文件夾如“D\myweb”(5) “自動刷新本地文件列表”——選中是否每次拷貝文件到本地站點時都自動更新本地文件夾列表，選中該選項。進行一個簡單的網頁設計。 當 Web 服務器接收到對靜態(tài) Web 頁的請求時，服務器將該頁直接發(fā)送到請求瀏覽器。打開一個網站時看到的第一個頁面就是主頁，也稱為首頁；與主頁相鏈接的其他各個頁面就稱之為子頁。 標題（說明網站的形式和類型） 216。網頁內容便于瀏覽。 網上安家網上安家即將站點發(fā)布到互聯(lián)網上。(6) 完成。b)導航條 導航條應出現(xiàn)在網站的各個頁面中，提供各個站點的相關主題，引領瀏覽者有條理地瀏覽網站。 規(guī)劃站點時應按素材的不同種類分為幾個站點，再將收集好的素材分類放置在相應站點中，然后在不同站點中將不同的素材進行細分。如想要制作影視網站就需收集大量中外電影的信息以及演員資料；要制作公司網站就需收集公司的介紹、產品信息和企業(yè)文化等。網站是由多個頁面鏈接而成的。(3) 設計人員進行二級頁面設計工作。c)為了使頁面不支持的樣式、層、插件等在瀏覽器中能兼容且功能正常，可進行瀏覽器兼容性的檢查。(3)推廣你的Web地址。網頁內容要精彩。 頁腳（網站設計者的基本信息）216。當訪問者單擊 Web 頁上的某個鏈接、在瀏覽器中選擇一個書簽、或在瀏覽器的地址文本框中輸入一個 URL 時，便生成一個頁請求。當該頁到達時，瀏覽器得到的全部內容都是純 HTML。四、實驗步驟創(chuàng)建本地站點步驟：(1) 打開DREAMWEAVER,選擇菜單下[站點]/[管理站點]|/[新建]/|[站點]。(9) 設置完畢，點擊“確認”按鈕。圖214：(1)，打開該網頁。二、實驗內容在頁面中插入特殊符號，如：“￥和空格符”。 圖223插入不換行空格，可執(zhí)行如下操作之一。 單擊“確定”按鈕即可插入日期。選擇[插入]/[日期]菜單命令，或者選擇“插入”面板中的“常用”選項卡，然后單擊“插入日期”按鈕，則打開 “插入日期”對話框。(2) 選中文字：將光標定位到插入特殊字符的位置。(7) 同理在“屬性”面板中“大小”下拉列表中選擇“16pt”。二、實驗內容某站點下有如下4個網頁，首頁效果圖如圖231所示，圖像顯示在網頁的中間，單擊“情感美文”，單擊“愛情故事”，單擊“婚姻情感”，單擊“與我聯(lián)系”會發(fā)送電子郵件。 單擊“確定”按鈕，彈出如圖234所示的“圖像標簽輔助功能屬性”對話框。圖2361 在“屬性面板”中將“鏈接”，在“替換”中輸入“情感美文”，在“目標”下拉列表框中選擇“_blank”.1 用同樣的方法繪制其他熱點，并設置相應的鏈接。 (5) 在“EMail”文本框中輸入要鏈接到的電子郵箱地址，如“csygold”。內容2的實驗步驟: 打開“”頁面，選擇[文件]\[導入]\[表格式數(shù)據(jù)]，彈出如圖238所示的“導入表格式數(shù)據(jù)”對話框。 在打開的“命名錨記”對話框的“錨記名稱”文本框中，輸入錨記名稱，如top，并單擊“確定”按鈕，錨記標記出現(xiàn)在插入點處。1按【F12】鍵，在IE瀏覽器中單擊“再看一遍”鏈接，則返回到“中華人民共和國婚姻法”（命名錨記處），單擊“返回首頁”鏈接。圖242三、知識點分解由圖241可以看出，該頁面最上面導航條，導航條下面是水平線，正文的格式與“”格式一致。在創(chuàng)建導航條時，不必包含所有這4種狀態(tài)的導航條圖像，可以只選用“一般”和“按下”或“滑過”這兩種狀態(tài)。c) 在“鼠標經過圖像”文本框后，單擊按鈕選擇當一般圖像顯示時如果鼠標指針滑過項目所顯示的圖像。本例中導航條項目順序為“sy”、“jdwz”、“grwz”，“rszl”。鼠標經過圖像由兩個圖像組成，主圖像（首次載入頁時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像）。c) 在“鼠標經過圖像”文本框后單擊按鈕并選擇鼠標指針滑過原始圖像時顯示的圖像，,或在文本框中輸入圖像文件的路徑。思考題：在做網頁時，經常需要用圖像處理軟件來制作圖像，如本實驗中的導航條圖像，但是在將該圖像插入到Dreamweaver中會經常遇到圖像不能緊密的結合在一起，如下圖所示，怎么才能將他改成圖241所示的導航條的效果呢？實驗五 網頁表格操作一、實驗目的掌握表格的創(chuàng)建、結構調整與美化。如果文檔是空白的，則只能將插入點放置在文檔的開頭。在表格的第一行輸入如下數(shù)據(jù)：學號、語文、數(shù)學、英語、總分。1按【Ctrl+S】保存該網頁。圖263單擊布局工具欄中的按鈕，進入布局模式。在“插入”欄的“布局”選項卡中單擊“繪制布局表格”按鈕 。1在“插入”欄的“布局”選項卡中單擊“繪制布局單元格”按鈕。2在上面的布局單元格右邊繪制一個寬“153px”，高“24px”，垂直“居中”的布局單元格，輸入文字“□自然環(huán)境”(“□”的輸入：在“智能abc”輸入法下按鍵盤符號v+數(shù)字1)，將其設為：字體“宋體”，大小“14px”。在該布局表格內繪制一個寬“418px”，高“239px” 的布局表格。3緊接上面的布局表格，在它下方繪制一個布局表格，在該布局表格內繪制一個寬“418px”，高“10px”的布局單元格。4在該布局表格內繪制一個寬“184px”，高“49px”，背景圖像為“”的布局表格，再在該布局表格內繪制一個寬“86px”，高“49px”，垂直“居