(第三章dreamweaver网页制作.ppt

《(第三章dreamweaver网页制作.ppt》由会员分享，可在线阅读，更多相关《(第三章dreamweaver网页制作.ppt（117页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.1 3.1 使用使用 DreamweaverDreamweaver 创建站点创建站点 3.1.1 3.1.1 最终效果最终效果第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 3.1.2 3.1.2 制作过程制作过程 操作演示操作演示操作演示操作演示 3.1.3 3.1.3 工程技术要点工程技术要点 文件操作快捷菜单文件操作快捷菜单第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 1.1.创建一个新的站点创建一个新的

2、站点 点击点击“管理站点管理站点”打开打开管理站点管理站点对话框，点击对话框，点击“新建新建”按钮按钮 弹出弹出未命名站点未命名站点1 1的站点定义的站点定义对话框，在对话框，在您打算您打算为您的站点起什么名字为您的站点起什么名字文本框中输入站点名称，点击文本框中输入站点名称，点击 “下下一步一步”选择选择否，我不想使用服务器技术否，我不想使用服务器技术，点击，点击 “下一步下一步”弹出对话框，询问网站存储的路径。选择弹出对话框，询问网站存储的路径。选择编辑我计算编辑我计算机上的本地副本，完成后再上传到服务器机上的本地副本，完成后再上传到服务器，在，在文件存储文件存储在计算机上的什么位置在计算

3、机上的什么位置文本框中输入网站文件存储的路径，文本框中输入网站文件存储的路径，点击点击 “下一步下一步”第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 弹出对话框询问如何连接服务器，采用弹出对话框询问如何连接服务器，采用本地本地/网络网络选选项。项。您打算将您的文件存储在服务器上的什么文件夹中？您打算将您的文件存储在服务器上的什么文件夹中？的文本框中同样选择网站文件存储路径。点击的文本框中同样选择网站文件存储路径。点击 “下一步下一步”弹出对话框，选择弹出对话框，选择否，不启用存回和取出否，不启用存回和取出，点击，点击 “下一步下一

4、步”。弹出对话框，显示之前的所有设置信息，点击弹出对话框，显示之前的所有设置信息，点击 “完成完成”返回返回“管理站点管理站点”窗口，则看到新建的站点名称出现在窗口，则看到新建的站点名称出现在窗口中，点击窗口中，点击 “完成完成”2.2.在站点下新建文件夹在站点下新建文件夹 第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.2 3.2 使用表格制作文章列表使用表格制作文章列表 3.2.1 3.2.1 最终效果最终效果(table.htmltable.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作

5、过程详解 1.1.新建新建table.htmltable.html文件，并打开文件文件，并打开文件 2.2.界面工具栏设置界面工具栏设置 将界面工具栏转换成制表符模式将界面工具栏转换成制表符模式 3.3.插入新表格插入新表格 设置表格参数为：行数：设置表格参数为：行数：6 6，列数：，列数：3 3，边框粗细：，边框粗细：0 0，单元格边距：单元格边距：0 0，单元格间距：，单元格间距：0 0，页眉：无，页眉：无 4.4.设置表格辅助信息标尺设置表格辅助信息标尺 5.5.设置表格基本属性设置表格基本属性 设置表格三列列宽分别为设置表格三列列宽分别为6060，420420，120120 设置表格背

6、景色设置表格背景色(#666666)(#666666)、间距、间距(1)(1)、对齐方式、对齐方式(居中居中对齐对齐)设置单元格背景色设置单元格背景色(#FFFFFF)(#FFFFFF)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 6.6.美化表格美化表格 单元格背景色设置单元格背景色设置 表格第一行表格第一行 合并单元格合并单元格 行行“背景色背景色”设置为设置为#F2EBDD#F2EBDD 表格第二行表格第二行 设置设置背景颜色背景颜色为为#E2D3B4#E2D3B4 设置各单元格中文字对齐方式设置各单元格中文字对齐方式 第一

7、行：居中对齐第一行：居中对齐 第一列第一列 第二列第二列 第三列第三列 第二行第二行 第六行第六行 居中对齐居中对齐 居左对齐居左对齐 居中对齐居中对齐 7.7.输入表格文字输入表格文字 第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 8.8.设置页面属性设置页面属性 表格字体设置表格字体设置 9 9点数点数(pt)(pt)页边距设置页边距设置 0 0 9.9.单元格微调单元格微调 微调第微调第1 1列行高为列行高为2020 微调第微调第1 1行行高为行行高为20 20 10.10.表格再次调整表格再次调整 修改表格宽度为修改表格宽

8、度为9090，单位为，单位为%设置表格设置表格(将表格宽度转换成像素将表格宽度转换成像素)11.11.保存文件保存文件第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础设置表格行与列设置表格行与列定义表格宽度定义表格宽度设置表格边框宽度设置表格边框宽度单元格边框和单单元格边框和单元格内容相隔的元格内容相隔的距离距离相邻单元格之间相相邻单元格之间相隔的距离隔的距离设置表格的页眉设置表格的页眉设置表格的标题设置表格的标题设置表格的标题设置表格的标题相对于表格的显相对于表格的显示位置示位置表格的说明表格的说明第三章第三章 DreamweaverDreamweaver网

9、页制作基础网页制作基础表格参数的几点说明：表格参数的几点说明：表格宽度：表格宽度：实际总宽度实际总宽度 像素像素 页面中的百分比页面中的百分比%第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 单元格边距单元格边距(像素像素)：表格中各单元格边与边之间的距离。表格中各单元格边与边之间的距离。边距为0边距为10第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 单元格间距单元格间距(像素像素)：表格中各单元格之间的间距。表格中各单元格之间的间距。间距为0间距为10第三章第三章 DreamweaverDreamweaver网页制作基

10、础网页制作基础 辅助功能：辅助功能：用于创建一个带标题的特殊表格。用于创建一个带标题的特殊表格。(辅助功能中标题设置为辅助功能中标题设置为“表格一表格一”)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 基础实训：基础实训：制作课程表制作课程表 课程表课程表 (ex-(ex-table.htmltable.html)：第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础课程表参数：课程表参数：1)1)表格：宽表格：宽80%80%，行数，行数6 6，列数，列数7 7，边框粗细边框粗细1 1像素，单元格边距像素，单元格边距0 0，单

11、元格间距，单元格间距0 0，边框色边框色#000000#000000，居中对齐，标题为，居中对齐，标题为课程表课程表 2)2)第一行：背景色第一行：背景色#CCCCCC#CCCCCC，高，高3030，居中对齐，居中对齐，字体为黑体字体为黑体12pt12pt 3)3)第一列的第一列的2626行：字体为黑体行：字体为黑体12pt12pt，居中对齐，居中对齐 4)4)第三列第三列 第七列，宽度第七列，宽度200200，高，高4040，居中对齐，居中对齐第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础表格标记表格标记 表格标记对于制作网页是很重要的，现在很多网页都使用

12、多重表格，利用表格可以实现各种不同的布局方式，而且可以保证当浏览器改变页面字体大小的时候保持页面布局不变，还可以任意进行背景和前景颜色的设置。1、标记对用来创建表格。它具有的属性有:设置表格的背景颜色第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 设置边框的宽度，默认值 为0 设置边框的颜色 设置单元格边距 设置单元格间距 设置表格的宽度，单位为像素或百分比。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础2、标记对用来创建表格中的行。注：标记对只能放在标记对之间使用，而在此标记对之间加入文本时无用的，因为在 之间只有紧跟

13、标记对才是有效的语法。标记对用来创建行中的每一个格子。注：此标记对只有放在标记对之间才是有效的，要输入的文本只有放在标记对中才有效(即才能显示出来)。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.3 3.3 制作一个简易的电子相册制作一个简易的电子相册 3.3.1 3.3.1 最终效果最终效果(photo.htmlphoto.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 1.1.新建新建photo.htmlphoto.html文件，并打开文件文件，并打开文件 2.2.插入新表格插入

14、新表格 设置表格参数为：行数设置表格参数为：行数:6:6，列数，列数:3:3，宽度，宽度:670:670像素，像素，边框粗细边框粗细:1:1像素，单元格边距像素，单元格边距:0:0，单元格间距，单元格间距:0:0，页眉，页眉:无无 3.3.调整表格调整表格 第第1 1列中列中1 1、3 3、5 5行的行的“单元格高度单元格高度”调整为调整为125125像素。像素。设置第设置第2 2、4 4、6 6行的单元格背景色为行的单元格背景色为#F2EBDD#F2EBDD。调整表格各列宽度为调整表格各列宽度为 221221 第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础

15、 制作过程详解制作过程详解 4.4.插入图片插入图片 执行菜单栏执行菜单栏“插入记录插入记录”“图像图像”，将任意一张图片插入第，将任意一张图片插入第1 1个单元格个单元格,在弹出的在弹出的图像标签辅助功能属性图像标签辅助功能属性对话框中设置对话框中设置替换文本替换文本为为图片图片1 1 设置图片高度为设置图片高度为125125，宽度为，宽度为150150。(调整图片的大小调整图片的大小的方法还有：按住的方法还有：按住shiftshift键向左上方拖动图片右下角的小方键向左上方拖动图片右下角的小方块，实现图片块，实现图片 按比例缩放，调整图片到合适大小松开鼠标左键即按比例缩放，调整图片到合适大

16、小松开鼠标左键即可。可。)5.5.调整图片单元格属性调整图片单元格属性 设置所有单元格图片为设置所有单元格图片为“居中对齐居中对齐”。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 6.6.输入图片说明文字输入图片说明文字 在第在第2 2、4 4、6 6行中输入文字说明行中输入文字说明 点击点击属性属性面板中面板中页面属性页面属性按钮按钮 进入进入“页面属性页面属性”对话框中设置页面字体对话框中设置页面字体大小大小为为9 9点数点数 (pt),(pt),设置上、下、左、右边距为设置上、下、左、右边距为0 0 依次选定第依次选定第2

17、2、4 4、6 6行文字说明各单元格行文字说明各单元格 设置说明文字单元格为设置说明文字单元格为居中对齐居中对齐。7.7.文件保存文件保存第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 3.3.3 3.3.3 制作要点制作要点 (1)(1)本例中所有图片为本例中所有图片为jpgjpg格式，所有图片均保存格式，所有图片均保存 在本网站文件夹下的在本网站文件夹下的imagesimages子文件夹下。子文件夹下。注注:在向网站中添加其他类型的文件时，都应先创建相应文件夹，在向网站中添加其他类型的文件时，都应先创建相应文件夹，这样可以有一个清晰的网站目录，也更方便资

18、料的整理和使用。这样可以有一个清晰的网站目录，也更方便资料的整理和使用。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 (2)(2)关于插入图像时弹出的关于插入图像时弹出的“图像标签辅助功能属性图像标签辅助功能属性”对对话框话框“替替换文本文本”的功能是：的功能是：当当图片由于片由于网网速或速或资源失效源失效导致无法在用致无法在用户的的浏览器中器中显示示时，原，原图片位置片位置将将由替由替换文本中的文本中的内内容容来来替替换，避免用，避免用户因无法因无法看到看到图片而无法理解片而无法理解图片的片的内内容。容。第三章第三章 DreamweaverDreamwe

19、aver网页制作基础网页制作基础 (3)(3)关于图片的关于图片的“属性属性”面板面板图片左上角片左上角与与距离距离它它上上一一级的元素的的元素的横横向和向和纵向距离。向距离。插插入入图片的的路片的的路径径(相相对路路径径)替替换文本功能文本功能当当前前图片的低片的低分辨率版本的分辨率版本的路路径径。在在图片四周加片四周加指定指定宽度的度的边框。框。替替换文本功能文本功能“重重设图像大小像大小”按按钮可可以使以使图像像还原尺寸。原尺寸。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 基础实训：基础实训：制作一篇图文并茂的网页制作一篇图文并茂的网页 网页网页(

20、ex-(ex-photo.htmlphoto.html)：第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 1.1.新建新建ex-ex-photo.htmlphoto.html文件，并打开文件文件，并打开文件 2.2.设置页面属性设置页面属性 在在“属性属性”面板中，点击面板中，点击“页面属性页面属性”按钮按钮 弹出弹出页面属性页面属性对话框，对话框，设置上、下、左、右边距分别为设置上、下、左、右边距分别为5 5像素。像素。3.3.插入表格插入表格 点击点击“插入记录插入记录”菜单中的菜单中的“表格表格”二级菜单二级菜单 弹出弹出表格

21、表格对话框，设置参数为：对话框，设置参数为：行数为行数为2 2，列数为，列数为1 1，表格宽度为，表格宽度为670670像素，边框粗细为像素，边框粗细为1 1像素，单元格边距为像素，单元格边距为0 0，单元格间距为，单元格间距为0 0 单击单击“确定确定”第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 4.4.设置表格属性设置表格属性 在表格内点击鼠标右键，选择快捷菜单中在表格内点击鼠标右键，选择快捷菜单中表格表格下的下的选择表格选择表格，在，在属性属性面板中设置对齐方式为面板中设置对齐方式为居中对居中对齐齐。5.5.插入图片插入图

22、片 将光标置于表格第一行单元格中，选择将光标置于表格第一行单元格中，选择“插入记录插入记录”菜菜单下的单下的“图像图像”菜单菜单 弹出弹出“选择图像源文件选择图像源文件”对话框，选择需插入的图片对话框，选择需插入的图片imagesimagesbanner.gifbanner.gif，点击，点击“确定确定”“图像标签辅助功能属性图像标签辅助功能属性”对话框，设置图片的替换对话框，设置图片的替换文本文本“确定确定”设置图片宽为设置图片宽为668668，高为，高为7070第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 将光标置于表格第二行

23、单元格中，单击将光标置于表格第二行单元格中，单击属性属性面板面板中，中，背景背景框中右侧的框中右侧的单元格背景单元格背景URLURL按钮，弹出按钮，弹出“选选择图像源文件择图像源文件”对话框，选择需插入的图片对话框，选择需插入的图片backgroundbackgroundwall.jpgwall.jpg，点击，点击“确定确定”6.6.输入文本输入文本 输入标题和正文。输入标题和正文。设置标题文字参数：字体为新宋体，大小为设置标题文字参数：字体为新宋体，大小为18pt18pt，粗，粗体体 正文文字字体为宋体，大小为正文文字字体为宋体，大小为14pt14pt 第三章第三章 DreamweaverD

24、reamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 7.7.插入图片插入图片 将光标置于表格第二行单元格中，选择将光标置于表格第二行单元格中，选择“插入记录插入记录”菜单下的菜单下的“图像图像”菜单菜单 弹出弹出“选择图像源文件选择图像源文件”对话框，选择需插入的图片对话框，选择需插入的图片imageskexuejy6.jpgimageskexuejy6.jpg，点击，点击“确定确定”弹出弹出“图像标签辅助功能属性图像标签辅助功能属性”对话框，设置图片的对话框，设置图片的替换文本替换文本 “确定确定”在在“属性属性”面板中设置图片参数为：面板中设置图片参数为：宽为宽为150

25、150，高为，高为200200，对齐方式为右对齐。，对齐方式为右对齐。8.8.保存文件保存文件第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.4 3.4 使用文字与图片链接制作实例索引页使用文字与图片链接制作实例索引页 3.4.1 3.4.1 最终效果最终效果(link.htmllink.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 1.1.新建新建link.htmllink.html文件，并打开文件文件，并打开文件 2.2.插入表格插入表格 点击点击“插入插入”菜单，选择菜单，选择

26、“表格表格”子菜单子菜单 弹出弹出“表格表格”对话框，在其中设置表格行数为对话框，在其中设置表格行数为6 6，列数，列数为为4 4，宽度为，宽度为600600，边框粗细为，边框粗细为1 1像素，边距和间距均为像素，边距和间距均为0.0.点击点击“确定确定”3.3.选择所有单元格，在选择所有单元格，在“属性属性”面板中设置行高为面板中设置行高为2020，输入，输入所有文字。所有文字。4.4.选择所有单元格，设置布局方式为选择所有单元格，设置布局方式为“居中对齐居中对齐”，第，第1 1行背行背景色为景色为#333333,#333333,第第2 2行背景色为行背景色为#A1A1A1#A1A1A1。5

27、.5.选中选中table.htmltable.html文字，单击文字，单击“属性属性”面板中的面板中的“链接链接”文文本框右侧的浏览图标，弹出本框右侧的浏览图标，弹出“选择文件选择文件”对话框，在这里选对话框，在这里选择链接目标文件，点击择链接目标文件，点击“确定确定”。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 6.6.重复步骤重复步骤5 5，设置其他，设置其他photo.htmlphoto.html的超链接目标文件的超链接目标文件 7.7.插入图片，并设置超链接插入图片，并设置超链接 点击点击“插入插入”菜单，选择菜单，选择

28、“图像图像”子菜单子菜单 选择图片，在选择图片，在“属性属性”面板中的面板中的“链接链接”栏中设置图片栏中设置图片的超链接目标地址，这里设置为的超链接目标地址，这里设置为http:/http:/；设置图片的宽为设置图片的宽为500,500,高度为高度为150150。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.5 3.5 使用热区制作一图多链的图片使用热区制作一图多链的图片 3.5.1 3.5.1 最终效果最终效果(requ.htmlrequ.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过

29、程详解 1.1.新建新建requ.htmlrequ.html文件，并打开文件文件，并打开文件 2.2.页面属性设置页面属性设置 点击点击“属性属性”面板中的面板中的“页面属性页面属性”弹出弹出“页面属性页面属性”对话框，在其中设置对话框，在其中设置“背景颜色背景颜色”为为黑色，点击黑色，点击“确定确定”3.3.插入图片插入图片 执行菜单栏中执行菜单栏中“插入插入 图像图像”，插入一张图片，调整图片，插入一张图片，调整图片居中对齐。居中对齐。4.4.选择图片，在下方的选择图片，在下方的“属性属性”面板的左下角有面板的左下角有 三个按钮，它们就是三个按钮，它们就是“热点热点”工具。工具。5.5.选

30、择长方形热点工具，在图片中选择长方形热点工具，在图片中北京北京上绘制热点区，上绘制热点区，在在“属性属性”面板中的面板中的替换替换框中输入框中输入“北京北京”提示文字。提示文字。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程详解制作过程详解 6.6.采用相同的方法在采用相同的方法在天津天津重庆重庆上海上海上分别绘制上分别绘制 热点区域，并设置其替换文字。热点区域，并设置其替换文字。7.7.选择多边形热点工具，在图片中选择多边形热点工具，在图片中成都成都红色部分区域绘红色部分区域绘制热点区，在制热点区，在“属性属性”面板中的面板中的替换替换框中输入框

31、中输入“成都成都”提示文字。提示文字。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.6 3.6 使用锚点制作网页书签使用锚点制作网页书签 3.6.1 3.6.1 最终效果最终效果(link_md.htmllink_md.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程点睛制作过程点睛 1.1.插入水平线方法插入水平线方法 将光标移到要插入水平线的位置；将光标移到要插入水平线的位置；单击单击【HTMLHTML】选项卡中的选项卡中的【水平线水平线】按钮按钮 ，便可在，便可在网页中直接插入一条水平线来分隔段

32、落。网页中直接插入一条水平线来分隔段落。2.2.网页文本中插入空格方法网页文本中插入空格方法 在中文的全角状态下连续按空格键即可连续输入空格。在中文的全角状态下连续按空格键即可连续输入空格。3.3.网页文本中插入锚点方法网页文本中插入锚点方法 将光标移到要需要插入锚点的位置；将光标移到要需要插入锚点的位置；选择菜单选择菜单“插入插入”“命名锚点命名锚点”或单击或单击“插入插入”工工具栏中具栏中“常用常用”标签栏中的标签栏中的 ；弹出弹出命名锚点命名锚点对话框，在其中设置锚点名称对话框，在其中设置锚点名称(如：如：1)1)；第三章第三章 DreamweaverDreamweaver网页制作基础网

33、页制作基础 制作过程点睛制作过程点睛 选中需创建链接文字，在选中需创建链接文字，在“属性属性”面板的面板的“链接链接”栏中输栏中输入入#1#1 (其中，其中，#代表空链接，其作用是将任意可设置为超链接的元素代表空链接，其作用是将任意可设置为超链接的元素设置为指向本页的链接。设置为指向本页的链接。)4.4.显示锚点的设置方法显示锚点的设置方法 可视化助理可视化助理 不可见元素不可见元素 5.5.设置各种段落格式设置各种段落格式 选中需做设置的段落文字；选中需做设置的段落文字；【属性属性】检查器中设置格式为检查器中设置格式为段落段落；点击点击【属性属性】检查器中的检查器中的 【文本缩进文本缩进】按

34、钮，整个段落按钮，整个段落都会相应缩进。反之，要取消段落的缩进，可单击都会相应缩进。反之，要取消段落的缩进，可单击【属性属性】检检查器中的查器中的【文本凸出文本凸出】按钮按钮 ，即可取消段落缩进。，即可取消段落缩进。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程点睛制作过程点睛 6.6.插入特殊字符插入特殊字符 将光标移到要插入特殊字符的位置；将光标移到要插入特殊字符的位置；单击单击【文本文本】选项卡中的选项卡中的【字符字符】按钮按钮 右侧的下右侧的下拉按钮，在打开的下拉菜单中，选中需要的字符即可；拉按钮，在打开的下拉菜单中，选中需要的字符即可；如

35、果该下拉菜单中没有需要的字符，可以单击该菜单中如果该下拉菜单中没有需要的字符，可以单击该菜单中的的【其他字符其他字符】命令，将弹出命令，将弹出【插入其他字符插入其他字符】对话框，单对话框，单击需要的特殊字符，最后单击击需要的特殊字符，最后单击【确定确定】即可。即可。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.7 3.7 插入鼠标经过图像网页插入鼠标经过图像网页 最终效果最终效果(index.htmlindex.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程点睛制作过程点睛 1.1.插入变换图片对象

36、插入变换图片对象 “插入插入”“图像对象图像对象”“鼠标经过图像鼠标经过图像”弹出弹出插入鼠标经过图像插入鼠标经过图像对话框，在其中设置原始图对话框，在其中设置原始图像、鼠标经过图像像、鼠标经过图像 点击点击“确定确定”2.2.“原始图像原始图像”表示鼠标没有放在图像上方时显示的图像文表示鼠标没有放在图像上方时显示的图像文件；件；“鼠标经过图像鼠标经过图像”表示鼠标放在图像上方时显示的图像文表示鼠标放在图像上方时显示的图像文件。件。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.8 3.8 导入表格数据导入表格数据 最终效果最终效果(index.htmli

37、ndex.html)第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础 制作过程点睛制作过程点睛 1.1.导入表格数据文件导入表格数据文件 “插入插入”“表格对象表格对象”“导入表格式数据导入表格式数据”弹出弹出导入表格式数据导入表格式数据对话框，对话框，【数据源文件数据源文件】文本文本框中输入数据源文件框中输入数据源文件(3.8/3.8/新建文本文档新建文本文档.txt.txt)，【定界符定界符】文本文本框中点击下拉箭头，选择框中点击下拉箭头，选择逗号逗号(因为本案例的数据源文件中各因为本案例的数据源文件中各列以逗号分隔列以逗号分隔)点击点击“确定确定”2.2

38、.在表格在表格“属性属性”面板中设置面板中设置“对齐对齐”为居中对齐，为居中对齐，“边框颜色边框颜色”为为#66CC33#66CC33。第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.9 3.9 使用表单元素创建一个用户注册页使用表单元素创建一个用户注册页 最终效果最终效果(reg.htmlreg.html)HTMLHTML语言语言表单的应用表单的应用1 1 表表单概概述述2 2 表表单标记3 3 信息信息输入入4 4 小小实例例表表单的的实际应用用HTMLHTML语言语言表单的应用表单的应用1 1、表单的概述、表单的概述 表单是网页中提供的一种交互式操作

39、手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是用HTML源代码描述的表单，可以直接通过插入的方式添加到网页中；二是提交后的表单处理，需要调用服务器端编写好的脚本对客户端提交的信息作出回应。HTMLHTML语言语言表单的应用表单的应用 2 2、表单标签、表单标签 .表单Form为浏览者在屏幕上建立一个表格，表格中有明确的文字提示，使浏览者可以在表格上输入自己的信息，然后使用提交按钮，将浏览者的信息传送给服务器。HTMLHTML语言语言 Form Form的语法格式的语法格式：form a

40、ction=“”method=“”target=“”HTMLHTML语言语言 Form Form的语法说明的语法说明：HTMLHTML语言语言(1)Action(1)Action属性属性 actionaction属性的作用是指出该表单所对应的处理程序属性的作用是指出该表单所对应的处理程序的位置，它的参数值是该程序的的位置，它的参数值是该程序的URLURL(2)Method(2)Method属性属性 methodmethod属性的作用是指定该表单的运行方式，属性属性的作用是指定该表单的运行方式，属性的参数值为的参数值为getget和和postpost之一，默认方式是之一，默认方式是getget。

41、当参数值为当参数值为getget时，表示该表单主要是从服务器中时，表示该表单主要是从服务器中获取的信息，因此它传送给服务器的反馈信息不能超获取的信息，因此它传送给服务器的反馈信息不能超过过255255个字符；个字符；当参数值为当参数值为postpost时，表示该表单主要是向服务器时，表示该表单主要是向服务器发送信息时，它传送给服务器的反馈信息长度没有限发送信息时，它传送给服务器的反馈信息长度没有限制。制。HTMLHTML语言语言 Form Form标签实例说明标签实例说明：HTMLHTML语言语言3 3、标签标签 input name=“HTMLHTML语言语言3 3、标签标签 是单标签，没有

42、结束标签，它必须嵌套在表单标签中使用，用于定义一个用户输入项。标签主要有六个属性：type、name、size value、maxlength、checked。其中,name和type是两个必选的属性。name属性显示插入的控件名称；type属性显示插入的控件类型。HTMLHTML语言语言(1)(1)文本框控件文本框控件texttext input name=“”type=“text”size=“”value=“”HTMLHTML语言语言(1)(1)文本框控件文本框控件texttext 语法说明：语法说明：sizesize属性：用于指定文本框的长度，默认值是属性：用于指定文本框的长度，默认值是

43、2020，以字节为单位。，以字节为单位。valuevalue属性：设定预先出现在文本框中的内容属性：设定预先出现在文本框中的内容 maxlengthmaxlength属性：表示该文本框允许用户输入的属性：表示该文本框允许用户输入的最大字符数。最大字符数。(此值总是大于或等于此值总是大于或等于sizesize属性的参数属性的参数值值)HTMLHTML语言语言文本框控件实例说明文本框控件实例说明HTMLHTML语言语言(2)(2)密码框控件密码框控件passwordpassword input name=“”type=“password”=“”size=“”说明：在表单中插入密码框，只要将标记中t

44、ype属性值设为password就可以插入密码框。HTMLHTML语言语言密码框控件实例说明密码框控件实例说明HTMLHTML语言语言(3)(3)复选框控件复选框控件checkboxcheckbox input name=“”type=“checkbox”value=“”说明：在表单中插入复选框，只要将标记中type属性值设为checkbox就可以插入复选框。其中的id为可选项。HTMLHTML语言语言复选框控件实例说明复选框控件实例说明HTMLHTML语言语言(3)(3)复选框控件复选框控件checkboxcheckbox 语法说明：语法说明：由于选择是多项的，属性由于选择是多项的，属性na

45、mename应取不同的值。应取不同的值。属性属性valuevalue的参数值用于向的参数值用于向webweb服务器提交。服务器提交。CheckedChecked属性用于指定该选项在初始时被选中的。属性用于指定该选项在初始时被选中的。HTMLHTML语言语言(4)(4)单选按钮控件单选按钮控件radioradio input name=“”type=“value=“”说明：当type=radio时，表示该输入项是一个单选项。单选项必须是唯一的。即用户只能选中表单中所有单选项中的一项作为输入信息。因此，所有属性name都应取相同的值，但属性value的值应是不同的，而其中的checked属性用于指

46、定该选项在初始时是被选中的。HTMLHTML语言语言单选按钮控件实例说明单选按钮控件实例说明 HTMLHTML语言语言(5)(5)标准按钮控件标准按钮控件b buttonutton input name=“value=“”HTMLHTML语言语言标准按钮控件实例说明标准按钮控件实例说明HTMLHTML语言语言(6)(6)提交按钮控件提交按钮控件submitsubmit 重置按钮控件重置按钮控件resetreset input name=“value=“”input name=“value=“”HTMLHTML语言语言(6)(6)提交按钮控件提交按钮控件submitsubmit 重置按钮控件重置

47、按钮控件resetreset 说明：说明：当当type=submittype=submit时，浏览器会在相应的位置产生一个提时，浏览器会在相应的位置产生一个提交按钮，当用户单击此按钮时，浏览器会将表单的输入信交按钮，当用户单击此按钮时，浏览器会将表单的输入信息传送到服务器。其中，息传送到服务器。其中，valuevalue用于指定显示在提交按钮上用于指定显示在提交按钮上的文字。的文字。当当type=resettype=reset时，浏览器会在相应位置产生一个重置按时，浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时，浏览器就会清除表单中所有的钮。当用户单击该按钮时，浏览器就会清除表单中所有

48、的输入信息而恢复到初始状态。其中，输入信息而恢复到初始状态。其中，valuevalue用于指定显示在用于指定显示在重置按钮上的文字。重置按钮上的文字。HTMLHTML语言语言(7)(7)图像域控件图像域控件imageimage input name=“image”type=“image”border=“”HTMLHTML语言语言图像域控件实例说明图像域控件实例说明HTMLHTML语言语言(8)(8)文字域控件文字域控件t textareaextarea cols=“”wrap=“”id=“”/说明：在表单中插入文字域，只要插入成对的文字域标记 就可以插入文字域。其中的“wrap”和“id”为任

49、选项。HTMLHTML语言语言文字域控件实例说明文字域控件实例说明HTMLHTML语言语言(9)(9)下拉菜单和列表项控件下拉菜单和列表项控件 select/optionselect/option 说明：在表单中插入下拉菜单和列表项，只要插入成对的，其中嵌套，就可以插入下拉菜单和列表。HTMLHTML语言语言下拉菜单和列表项控件实例说明下拉菜单和列表项控件实例说明第三章第三章 DreamweaverDreamweaver网页制作基础网页制作基础3.10 3.10 制作动态文字新闻制作动态文字新闻 最终效果最终效果(index.htmlindex.html)第三章第三章 DreamweaverD

50、reamweaver网页制作基础网页制作基础 制作过程点睛制作过程点睛 1.1.插入第一个表格插入第一个表格 “插入插入”“表格表格”(1(1行、行、1 1列，宽度为列，宽度为100%100%，边框粗，边框粗细为细为0 0，单元格间距为，单元格间距为0 0，单元格边距为，单元格边距为0)0)，点击点击“确定确定”设置表格设置表格“居中对齐居中对齐”2.2.插入第二个表格插入第二个表格 “插入插入”“表格表格”(1(1行、行、1 1列，宽度为列，宽度为30%30%，边框粗细，边框粗细为为0 0，单元格间距为，单元格间距为0 0，单元格边距为，单元格边距为0)0)，点击点击“确定确定”设置表格设置