1、第五章使用Dreamweaver制作網(wǎng)頁1回顧 常用樣式屬性有哪些？超鏈接樣式有哪幾種？內(nèi)嵌樣式表、行內(nèi)樣式表、外部樣式的區(qū)別？2預(yù)習(xí)檢查使用Dreamweaver如何實現(xiàn)插入圖像和文本？使用Dreamweaver如何制作樣式表？3制作點卡購買頁面制作用戶注冊頁面制作客戶中心頁面本章任務(wù)點卡購買頁面用戶注冊頁面客戶中心頁面4本章目標會用Dreamweaver實現(xiàn)已學(xué)的各類HTML標簽圖像、文本、列表標簽表格表單框架樣式表5什么是基本標簽網(wǎng)頁標題頁面背景超連接地圖圖片F(xiàn)lash多媒體如何實現(xiàn)這樣的頁面？6如何使用基本標簽 教員逐一演示如下操作：新建一個HTML頁面設(shè)置頁面背景、標題插入圖片插入F

2、lash創(chuàng)建超連接演示示例1：基本標簽的使用11、鏈接到其他文檔2、鏈接到同一文檔的特定位置 7什么是基本標簽格式化文本 空 格換段了 換行了 無序列表 有序列表如何實現(xiàn)這樣的頁面？8如何使用基本標簽教員逐一演示其他標簽的操作：換段、換行格式化文本文本顏色字號大小對其方式插入特殊字符插入空格創(chuàng)建列表演示示例2：基本標簽的使用2Enter表示換段Shift+Enter表示換行1、項目列表 2、編號列表9什么是表格布局跨4列單元格跨3行單元格表格背景色單元格背景圖像單元格背景色單元格內(nèi)容居中對其使用表格進行布局時，一般把表格邊框?qū)挾仍O(shè)為0，還有單元格的填充和間距也設(shè)為0。如何實現(xiàn)這樣的表格布局？1

3、0表格的使用教員演示創(chuàng)建表格布局頁面：創(chuàng)建跨行或跨列的表格1、 “插入” ”表格”2、 輸入7行4列3、 選中要合并的單元格4、 右擊”表格” ”合并單元格”設(shè)置表格背景設(shè)置單元格背景色和對齊方式1、選中整個表格2、在屬性面板里設(shè)置1、光標定位到單元格2、在屬性面板里設(shè)置11表格的使用教員演示創(chuàng)建表格布局頁面操作：插入橫線1、 光標定位到第3行2、選擇”代碼”3、在單元格里輸入如下代碼4、同理，插入第2條虛線演示示例3：表格的使用 選擇“代碼”，切換到“代碼”視圖 12小結(jié)1使用Dreamweaver制作如下圖所示的頁面效果練習(xí)答案練習(xí)頁面4行1列的表格一共有4張圖片表格的cellspacin

4、g和cellpadding屬性都設(shè)為013什么是表單表格布局表單單行文本框密碼框單選按鈕復(fù)選框下拉列表重置按鈕提交按鈕文件域多行文本域如何實現(xiàn)這樣的表格對表單的布局？14表單的使用 教員演示使用表格對表單的布局操作：插入表單設(shè)置表單名表單要提交到的地址設(shè)置表單發(fā)送數(shù)據(jù)的方法15表單的使用在表單域中插入表格1、在表單域里單擊鼠標2、插入10行2列的表格3、合并最后兩行單元格4、設(shè)置表格的相關(guān)屬性表單里插入表格的效果16表單的使用在單元格里插入表單元素1、光標定位到要插入文本域的位置2、 插入單行文本域3、 插入密碼文本域4、 再次插入密碼文本域5、 插入單行文本域6、 插入2個單選按鈕單元格里插

5、入表單元素之后的效果單行文本域所對應(yīng)的屬性17表單的使用在單元格里插入表單元素7、插入3個復(fù)選框8、插入2個單行文本域和一個下拉菜單列表9、插入“重填”按鈕和“提交”按鈕10、 插入一個文件域11、 插入一個文本域單元格里插入表單元素之后的效果演示示例4：表單的使用按鈕所對應(yīng)的屬性18小結(jié)2使用Dreamweaver制作如下圖所示的頁面效果單行文本域密碼文本域單選按鈕文本域提交按鈕重置按鈕下拉列表復(fù)選框練習(xí)答案練習(xí)頁面19框架網(wǎng)頁廣告欄頂部框架(top.html)導(dǎo)航欄左側(cè)框架(left.html)詳細內(nèi)容頁面右側(cè)框架(right.html)框架的邊框框架集頁面(FrameSet.thm)如何

6、實現(xiàn)這樣的框架集頁面？20制作框架網(wǎng)頁教員演示制作框架網(wǎng)頁：新建框架網(wǎng)頁1、選擇“文件” “新建”2、選擇框架集3、選擇一個合適的框架集4、單擊“創(chuàng)建”設(shè)置框架集的屬性1、設(shè)置框架集的邊框?qū)傩?、改變框架的寬度和高度創(chuàng)建好的框架網(wǎng)頁21制作框架網(wǎng)頁教員演示制作框架網(wǎng)頁：添加每個框架的內(nèi)容1、單擊“框架” ”窗口”，打開框架面板2、為每個框架指定網(wǎng)頁文件演示示例5：制作框架網(wǎng)頁框架面板為名為topFrame框架指定網(wǎng)頁文件top.html22制作框架網(wǎng)頁教員演示制作框架網(wǎng)頁的步驟：設(shè)置超鏈接1、在left.html中設(shè)置超鏈接文本2、在屬性窗口中，選擇鏈接網(wǎng)頁文件和輸入目標框架名3、同理，設(shè)置另

7、兩個鏈接預(yù)覽網(wǎng)頁演示示例6：制作框架網(wǎng)頁 right.html文件會在框架名為mainFrame窗口中顯示23什么是樣式字體樣式無下滑線的超鏈接樣式細邊框樣式圖片按鈕樣式表格樣式如何實現(xiàn)這樣的樣式頁面？24制作樣式表創(chuàng)建樣式表 教員演示創(chuàng)建樣式表：1、選擇“窗口” “CSS樣式”2、在“CSS樣式”面板中，右擊新建3、分別新建標簽body、a和table的樣式4、分別新建類.picButton和類.textBorder的樣式查看樣式源代碼演示示例7：創(chuàng)建樣式表25演示示例8：應(yīng)用樣式表制作樣式表應(yīng)用樣式表 教員演示兩種應(yīng)用樣式表方式：1、打開要應(yīng)用樣式的網(wǎng)頁2、在屬性面板中單擊“樣式”下拉框3、選擇附加樣式4、選擇要引入的樣式文件1、選擇附加樣式表2、選擇樣式文件3、選擇附加