水平線有很多妙用，插入水平線可使文檔結構清晰，層次分明，便于瀏覽。將光標置于需要插入水平線的位置。切換到“插入”欄的【HTML】選項卡，單擊【水平線】按鈕，即可插入水平線。根據需要，在“屬性”檢查器中修改各個屬性值即可。如果要修改水平線的顏色，只要選中水平線，切換到“拆分窗口”，進行如下修改：
在網絡上搜索“網頁特效”，可以得到許多用腳本語言書寫好的代碼。有些代碼很實用，可以為頁面增色。比如下面的這段取自特效錦集網站（http://code.helpor.net/time.php）的時間特效代碼。
首先復制特效代碼，然后將光標置于需插入時間特效的單元格中，單擊“文檔”工具欄上的【代碼】按鈕，這時在【代碼】視圖中出現的插入點的位置處粘貼特效代碼；最后按F12鍵預覽網頁就可以看到這個時間特效了。效果如下圖：
CSS也叫層疊樣式表，使用 CSS 能夠以 HTML 無法提供的方式來設置文本格式和定位文本，從而能更加靈活自如地控制頁面的外觀。單擊【窗口】菜單，選擇【CSS樣式】可以在Dreamwaver 8右側面板組的最上方展開【CSS樣式面板】。對CSS樣式的新建、編輯以及刪除等操作都可以在這個面板中進行。
（1）在站點目錄下新建一個文件夾（如：CSS），用以存放本章中所創建的CSS文件。（2）單擊【CSS樣式面板】右下方的按鈕，打開如圖5.5.1所示的“新建CSS規則”對話框。
（4）如果希望該CSS規則只應用于當前的網頁，則選擇【僅對該文檔】；如果希望該CSS規則可以在其他頁面中被引用，則在下拉列表中選取一個已經存在的外部CSS文件，如果之前沒有定義任何外部CSS文件，則選擇【新建樣式表文件】。
（6）單擊【保存】按扭后，將打開如圖5.5.2所示的“CSS規則定義”對話框，這里先不做任何設置，單擊【確定】按鈕關閉對話框。此時，在【CSS樣式面板】中將會顯示新創建的CSS文件“border.css”以及文件中包含的CSS規則“.style1”。
標簽，選中該單元格。 ④ 鼠標移動到【CSS樣式面板】上，右擊“.style1”規則，在彈出的快捷菜單中選擇【套用】。⑤ 重復③和④中的操作，逐一將“.style1”規則應用到接下來的幾個單元格中去。⑥ 保存并預覽，其效果如圖5.5.4所示。 圖5.5.3 表格邊框設置 圖5.5.4效果預覽 注意：在Dreamwaver 8中，上一個單元格的下邊框和下一個單元格的上邊框的屬性值效果是可以疊加的。對于相鄰的兩個單元格，在設置邊框的時候需要考慮到這點。 （2）長文本行距、縮進調整的設置步驟如下： ① 在【CSS樣式面板】右擊“border.css”，選擇【新建】創建一個新的CSS規則，命名為“.style5”。 ② 雙擊“.style5”，打開“CSS規則定義”對話框。③ 分別設置以下參數： ·在【分類】列表框中選擇【類型】，設置【行高】為25像素； ·在【分類】列表框中選擇【區塊】，設置【文字縮進】為30像素； ·在【分類】列表框中選擇【方框】，設置【邊界】左、右各10像素。④ 單擊【確定】關閉“CSS規則定義”對話框。 ⑤ 選中圖11.21中的“自薦信”下方單元格中的兩段長文本。 ⑥ 鼠標移動到【CSS樣式面板】上，右擊“.style5”規則，在打開的快捷菜單中選擇【套用】。 ⑦ 保存并預覽，其效果如圖5.5.5所示。 圖5.5.5 長文本行距調整效果預覽 5.6使用模板 模板，它能幫助我們快速定制網頁的風格，并由模板生成其他頁面，從而避免了許多重復性的工作。制作模板與制作其他頁面基本相同，只是模板不需要把頁面的所有內容都完成，而只要把導航條、標題欄等各個頁面相同的部分制作出來就可以了，其他部分則由模板生成具體頁面時再設置。 1．創建模板 模板的后綴名是.dwt，保存模板時Dreamwaver 8會在站點目錄下自動生成一個名為“Templates”的文件夾，用以保存模板文件。生成模板的步驟如下： （1）按照制作普通網頁的方法，制作一個頁面。（2）將該頁面另存為模板，如果彈出警示對話框詢問【要更新鏈接嗎？】時，單擊“是”。這時在站點目錄下將出現一個名為Templates的文件夾，且包含了一個名為“filemod.dwt”的模板文件。 2．創建可編輯區 模板創建后還不能夠直接使用，要先進行模板的編輯，主要是創建可編輯區。通過模板生成的新網頁，只能更改可編輯區的內容，其余部分總是與模板中的相應部分完全一樣。 創建可編輯區的步驟如下： （1）打開模板文件，選擇一個希望在生成頁面中可被編輯的元素。 （2）切換到“插入”欄的【常用】選項卡，單擊【模板】按鈕，選擇【可編輯區域】，如圖5.6.1所示。 圖5.6.1 【可編輯區域】按鈕 （3）在打開的如圖5.6.2所示的“新建可編輯區域”對話框中輸入可編輯區域的名稱，最后單擊【確定】按鈕。 圖5.6.2 命名可編輯區 （4）重復上述過程逐一創建并命名模板中的可編輯區域，最后保存并關閉模板文件。最終生成的模板文件如圖5.6.3所示，圖中的“Edit Region1”、“Edit Region2”等就是可編輯區。 圖5.6.3 生成的模板文件及可編輯區 3．應用模板創建網頁 基于模板創建網頁的操作步驟如下：（1）單擊【文件】菜單，選擇【新建】，打開如圖5.6.4所示的“新建文檔”對話框。（2）切換到【模板】選項卡，在【模板用于】列表中選擇“我的簡歷”站點，并選擇站點模板“filemod”。 圖5.6.4 “從模板新建”對話框 （3）單擊【創建】按鈕即可生成一個新頁面。 通過模板創建的頁面在文檔編輯區的四周為淡黃色，且其右上角顯示“模板：filemod”字樣。鼠標移動至非可編輯區域時呈鎖定狀態，既不可選取也不可單擊。 4．更新模板 不管從模板生成多少網頁，這些網頁在可編輯區域中可隨意添加、編輯、刪除頁面元素。但是它們的共同部分——不可編輯區域，卻嚴格遵守模板的統一設計。反過來，如果模板改變了，那么通過模板創建的各個頁面也可以實現同步更新。 對模板的修改，只需打開模板文件，按照普通頁面那樣隨意修改。修改后保存模板時Dreamwaver 8自動打開如圖5.6.5所示的“更新模板文件”對話框，提示是否更新站點中所有基于此模板的頁面。選擇“更新”將更新所示基于此模板的頁面；選擇“不更新”則所有頁面仍將基于原始模板。 圖5.6.5 “更新模板文件”對話框 《網頁制作》教學大綱簡易教案 網站開發流程 ?規劃 確定建設網站的目標； 分析目標用戶及潛在用戶對站點的需求； 3 確定網站風格； 4 考慮網絡的技術問題。 ?設計 頁面布局； 2 網頁中的顏色； 文字、圖像、動畫以及多媒體的使用。 ?制作 測試與發布 維護 ?? 第一章 站點管理 站點：一系列文件的組合，通過各種鏈接關聯起來，實現對整個站點的瀏覽。 設置站點信息 一，基本思路： 1，對站點進行規劃 2，創建站點的基本結構 站點結構的顯示方式：目錄結構和站點地圖 3，組織文件和資料開始制作 二，定義站點： 步驟：站點－新建站點－對站點進行定義 三，新建網頁（站點中所包含的所有網頁文件）和文件夾（用來存放網頁中的圖片、聲音、Flash等） 四，設置站點地圖布局 第二章 文字、圖片和超鏈接 網頁中最多的就是文字，并伴有精美的圖片來美化網頁，本章主要闡述如何使用菜單、插入面板在文檔中插入這些對象以及使用屬性面板編輯這些對象的屬性。 一，設置頁面屬性（Ctrl+J，也可在屬性面板中找到）： 在頁面屬性中分別對外觀、鏈接和標題進行設置 二，文字 可在屬性面板中對文字的樣式、大小等進行設置。三，插入圖像 方法1，插入－圖像； 方法2，常用－圖像； 方法3，Ctrl+Alt+I。四，設置超鏈接 1，頁面鏈接 2，郵件鏈接（mailto:） 3，書簽鏈接（對同一網頁的不同部分進行鏈接）4，空鏈接（＃） 第三章 表格和層的應用 一，設置網頁布局和處理表格 網頁布局：給將要出現在網頁中的所有元素進行定位。繪制布局表格和布局單元格： 方法：布局－切換到布局視圖－點擊布局表格or布局單元格按鈕－拖動創建－在屬性面板設置屬性。 注意：布局表格和布局單元格之間不能相互重疊。 表格：表格是在網頁中放置行列數據和圖像的最佳工具。插入表格：常用－表格－設置行，列數－插入 拆分，合并單元格：選中要拆分或要合并單元格－屬性面板中進行操作 設置表格和單元格的屬性：屬性面板中進行操作。 二，添加層 層是一種頁面元素定位技術，它能夠將層中的內容在瀏覽器窗口中任意定位。層是一個載體，在層中可以添加文本，圖像和表格等元素。方法：布局－點擊層按鈕－拖動創建－在屬性面板設置層屬性。 第四章 模板 所謂“模板”是指具有一定共性的文檔樣板。 模板用于創建多個具有一致風格的網頁，用戶可根據模板生成大量相同的頁面。新建網頁模板（.dwt） 1,將已有文檔另存為模板： 步驟：打開已有文檔； 文件－另存為模板； 在出現的對話框中選擇站點，給模板命名； 保存。 2，新建空白模板 步驟：窗口－資源（F11）； 模板－新建模板； 輸入模板名－編輯。 定義模板的可編輯區域 模板包括：1，可編輯區域（具有可變內容） 2，鎖定區域（具有靜態不變內容）默認 1，將已有內容定義為可編輯區域： 步驟：選擇要定義為可編輯區域的文本或內容； 插入－模板對象－可編輯區域； 輸入區域名； 確定。 2，定義新的可編輯區域： 步驟：定位光標； 同上。 取消區域標記： 步驟：打開已有模板； 選中已有可編輯區域，修改－模板－刪除模板標記。 注意：刪除模板標記之后的區域將被鎖定。 基于模板生成新網頁 方法1：文件－新建，選擇模板標簽，選一個模板－創建。方法2：新建一個文檔，修改－模板－應用模板到頁。 方法3：新建一個文檔，窗口－資源－模板，將所需模板直接拖動到新文檔中。 網頁制作與設計教案 第一講 網頁設計概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網頁中所使用的技術............................................................................................................4 1.4 制作網頁的基本方法............................................................................................................4 第二講 HTML的基本標志與格式標志.......................................................................................4 2.1 HTML文檔的基本結構.........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標志綜合運用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態網頁設計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運用..................................................................................................................14 3.4.表格的應用.........................................................................................................................14 3.5.在網頁中創建表單.............................................................................................................15 第八講 DREAMWEAVER中動態網頁設計.............................................................................15 第九講 DREAMWEAVER綜合性網頁設計案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數據類型.......................................................................................................................18 4.2.表達式和運算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20 第一講 網頁設計概述 【教學內容】 講解網頁設計的相關術語及網站制作的基本流程。【教學目的】 使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣。【教學重點】 網頁設計中的若干術語。【教學難點】 理解網頁設計中的若干術語。【教學方式】 講授式、討論式、案例分析式。【教學參考】 1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。 2、《Internet 網頁工場》Wittime工作室 重慶出版社。 3、《WEB網站設計》Joel Sklar著 高等教育出版社。 4、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點和結構 Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式 在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協議）作為網絡應用層通信協議 1.1.3 URL URL的完整格式 協議://主機名或IP地址：端口號/路徑名/文件名 1.2 IE5的使用 Web瀏覽器是瀏覽Internet資源的客戶端軟件 在Windows環境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 列表標志的使用。【教學方式】 討論式、案例分析式、練習式。【教學參考】 1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。 2、《WEB網站設計》Joel Sklar著 高等教育出版社。 3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】 2.1 HTML文檔的基本結構 2.1.1 HTML語法 1、雙標記 語法： <標記>內容 2、單標記 語法：<標記> 最常用的單標記是
3、標記屬性 語法 <標記 屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式 例子 2.1.2 HTML文檔的基本結構 【課后小結】 通過本次課的學習,要求能熟練掌握網頁面的基本標志與格式標志,并能靈活運用 列表,有序列表,無序列表標志及屬性。 第三講 HTML的文本、圖片與超級鏈接標志 【教學內容】 講解HTML標準中的文本、圖片與超級鏈接標志 【教學目的】 * 使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。 < EM>......，強調文字，通常用斜體。 < STRONG>......，特別強調的文字，通常用黑體。 ......，以等寬體顯示西文字符。 ......，使文字大小相對于前面的文字增大一級。 ......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標。......，使文字成為前一個字符的下標。......，使文字顯示為閃爍效果。2.2.6 文本修飾 2.2.7 預格式化文本 使用預格式化標記 不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉義字符與特殊字符 一般轉義符都是以“&”開始，以“；”結束，一個轉義符之間不能有空格 2.2.9 文本強制換行和不換行 文本強制換行
不換行 2.2.10 插入水平線 使用
標記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表 1、無序列表 2、有序列表 - 列表條目1
- 列表條目2......
3、定義列表 - 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結】 本節介紹了在網頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志是制作多媒體網頁的基礎。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學習HTML中超級鏈接標志的難點。 第四講 HTML表格、表單與框架標志 【教學內容】 講解HTML中制作表格、表單與框架的標志。【教學目的】 使學生掌握簡單表格、表單與框架的制作。【教學重點】 * 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性。【教學難點】 * 理解表格屬性rowspan與colspan的含義以及表格嵌套實現的基本思想。* 理解框架屬性name、target的意義。 * 理解表單中相應元素對應標志及屬性的含義。【教學方式】 案例分析式、項目教學 【教學參考】 1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。 2、《WEB網站設計》Joel Sklar著 高等教育出版社。 3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】 2.5 插入表格 2.5.1 在網頁中插入表格 表格的基本構成元素：表頭，單元格，列，行 | 第一行第一列 | 第一行第二列 | | 第二行第一列 | 第二行第二列 | FrameSpacing=“2“ BorderColor=”#008000“ > 2.7.3 子窗口屬性設置 2.7.4 常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結構，分為上中下三部分 （3）目錄和標題，分為左上、左下、右三部分 （4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網頁 | 