网页设计与制作-综合实例运用-(6).ppt

1、第5章 Dreamweaver 8.0概述第5章 Dreamweaver 8.0概述5.1 Internet和HTML语言 5.2 Dreamweaver 8.0的基本工作环境5.3 网页制作基础知识5.4 网页制作高级功能本章小结第5章 Dreamweaver 8.0概述5.1 Internet和和HTML语言语言5.1.1 Internet将不同地理位置的并具有独立工作能力的多个计算机系统通过通信设备、通信线路及通信技术互联在一起，按照某种协议交换数据，由网络软件实现网络资源共享和互相通信的整个信息系统叫计算机网络。计算机网络按照覆盖地域的大小，可分为局域网(LAN)、城域网(MAN)和广

2、域网(WAN)。Internet一词来源于英文Interconnect networks，即“互联各个网络”，简称“互联网”，我国推荐名称为“因特网”。第5章 Dreamweaver 8.0概述5.1.2 万维网万维网万维网也叫WWW，是World Wide Web(全球信息网)的缩写，由遍布在Internet上的称为Web服务器的计算机组成，它将不同的信息资源有机地组织在一起，通过一种叫做“浏览器”的软件进行浏览。它的结构体系是由相互关联的文件组成的一种高级的基于超文本(Hypertext)的浏览和搜索方式，目的是让大家在不同地方能用一种简捷的方式共享信息资源。万维网提供了丰富的信息，各种信

3、息按不同的类型以网页文件的形式分别存放在万维网的服务器上，供人们选择查阅。第5章 Dreamweaver 8.0概述超文本传输协议是在浏览器与Web服务器间建立连接的协议标准。超文本由若干互联的超媒体文件组成，它实质是通过超链接把一些具有超媒体特性的信息链接起来的一种新型的信息管理技术。超媒体不但包括了文本内容，还包括图像、动画、声音和视频等。超链接就是通过超文本中的链接点(也叫“热点”或“参考点”)建立与其他超媒体文件的链接，用鼠标点击链接点即可调出与之相链接的其他超媒体文件。浏览WWW必须通过浏览器来完成。在浏览器中，比较有代表性的是：IE(Internet Explorer)、Navig

4、ator、Maxton、MSN等。第5章 Dreamweaver 8.0概述5.1.3 HTML语言语言HTML是HyperText Markup Language的缩写，译为超文本标记语言。它不是一种程序语言，而是一种描述文档结构的标记语言。它与操作系统平台的选择无关，只要有浏览器就可以运行HTML程序、显示网页内容。HTML是目前制作网页时必须掌握的一种语言，是通过利用各种标签(TAG)来标志文档结构及超链接信息的。自1990年它首次被用于网页制作以来，HTML就一直被用作World Wide Web上的信息表示语言，用于描述网页格式设计和它与WWW上其他网页的链接。第5章 Dreamwe

5、aver 8.0概述5.1.4 浏览网页浏览网页1浏览网页浏览网页浏览网页时，可双击HTML文档图标，调出浏览器窗口，同时打开网页，另外还可以采用如下方法浏览网页：(1)双击浏览器图标，调出浏览窗口，然后单击浏览器窗口内的“文件”“打开”菜单命令，调出“打开”对话框，如图5-1所示。第5章 Dreamweaver 8.0概述图5-1 “打开”对话框 第5章 Dreamweaver 8.0概述(2)单击“打开”对话框中的“浏览”按钮，调出“Microsoft Internet Explorer”对话框(即IE浏览器)，如图5-2所示。选择HTML文件，单击“打开”按钮，回到“打开”对话框，在其“

6、打开”文本框内已有选中的文件目录与名字，如图5-3所示。第5章 Dreamweaver 8.0概述图5-2 “Microsoft Internet Explorer”对话框第5章 Dreamweaver 8.0概述图5-3 “打开”文本框内已有选中的文件目录与名字第5章 Dreamweaver 8.0概述(3)单击“打开”对话框中的“确定”按钮，即可在浏览器中打开选择的网页，如图5-4所示。第5章 Dreamweaver 8.0概述图5-4 在浏览器中打开网页第5章 Dreamweaver 8.0概述2修改网页修改网页(1)单击“Microsoft Internet Explorer”浏览器窗

7、口中的“查看”“源文件”菜单命令，调出Windows记事本，并调出网页的程序。此时可以修改网页程序。(2)修改完程序之后，单击Windows记事本内的“文件”“保存”菜单命令，即可将修改后的程序保存；然后，将鼠标指针移到图5-4所示的网页上，单击鼠标右键，调出其快捷菜单，再单击该菜单中的“刷新”菜单命令，即可看到修改后的网页。第5章 Dreamweaver 8.0概述5.1.5 HTML程序文档中所用标记的含义程序文档中所用标记的含义HTML语言的标记种类很多，上述HTML程序文档中所用标记的含义介绍如下。1标记标记是HTML文档中最基本的标记，不可缺少。表示HTML文档的开始，表示文档的结束

8、。第5章 Dreamweaver 8.0概述2与与标记标记是网页标题标记符，可提高网页文档的可读性，向浏览器提供一个信息，它也可以被忽略。是网页名称标记，是标记内一般不可缺少的标记。3标记标记是网页主题内容标记，其内包括了网页的全部内容，一般不可缺少。第5章 Dreamweaver 8.0概述4标记标记使用 标记中的BGCOLOR属性，可设置网页的背景颜色。使用的格式有：和。第一种格式中，RR、GG、BB分别取值为00FF的十六进制数，分别用来表示颜色中红、绿、蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。第二种格式中，是直接使用颜色的英文名称来设定网页的

9、背景颜色。第5章 Dreamweaver 8.0概述5标记标记是正文的第一级标题标记。此外，还有第二、三、四、五、六级标记，分别为、和，级别越高，文字越小。6标记标记的作用是使其中的文字或其他页面中的构成元素在网页内居中放置。第5章 Dreamweaver 8.0概述7标记标记是图像标记，用来加载GIF图像与动画。在网页中加载GIF动画的方法与加载GIF图像的方法一样，GIF动画文件的扩展名也是.gif，文件格式是GIF89A格式。8标记标记是依附于其他标记的一个属性，依附于标记时，用来导入GIF图像与动画。其格式为：。第5章 Dreamweaver 8.0概述9标记标记是换行标记，表示以后的

10、内容移到下一行，它是单向标记，没有。10标记标记是保留文本原来格式的标记。它的作用是可以将其内的文本内容，按照原来的格式显示，否则浏览器会自动取消文本中的空格，在最后加入换行。第5章 Dreamweaver 8.0概述11标记标记是粗体标记，可使其中的文字变为粗体。12、与与标记标记是有序标记，其内用标记引导文字，显示网页中的这些文字后，文字前会自动加上“1”，“2”，序号。是无序标记，其内用标记引导文字，显示网页中的这些文字后，文字前会自动加上“”。第5章 Dreamweaver 8.0概述5.1.6 文件中的路径名和文件中的路径名和URL1文件的路径名文件的路径名(1)绝对路径：绝对路径是

11、写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用“:”或“:/”，各个目录之间以及目录名与文件名之间，应用“/”分隔开。绝对路径的写法及其含义如图5-5所示。第5章 Dreamweaver 8.0概述绝对路径 含义 HREF=http:/ Index.html 在域名为 的服务器中的design的目录下 HREF=G:UNIVIDESIGNINDEX.html INDEX.html 放在 G 盘的 UNIVI 目录下的DESIGN子目录当中 图5-5 绝对路径名的写法及其含义第5章 Dreamweaver 8.0概述(2)相对路径：相对路径是以当前文件所在路径和子目录为起始目

12、录的，进行相对的文件查找通常都采用相对路径，这样可以保证文件移动后，不会产生断链现象。相对路径名的写法及其含义如图5-6所示。第5章 Dreamweaver 8.0概述相对路径 含义 HREF=INDEX.html INDEX.html 在当前目录下 HREF=DESIGN/INDEX.html INDEX.html 在当前目录“DESIGN”下名字为INDEX.html 文件 HREF=UNIVI/DESIGN/INDEX.html INDEX.html 在当前目录中的“UNIVI/DESIGN”目录下名字为 INDEX.html 的文件 HREF=./INDEX.html INDEX.HT

13、ML 是当前目录的上一级目录下名字为 INDEX.HTML的文件 HREF=././INDEX.html INDEX.HTML 是当前目录的上两级目录下名字为 INDEX.HTML的文件 图5-6 相对路径名的写法及其含义第5章 Dreamweaver 8.0概述2URLURL(Uniform Resource Locator)即统一的资源定位符，是WWW上的地址编码，指出了文件在Internet中的位置。它存在的目的在于统一WWW上的地址编码，给每一个网页一个用它的编码来制定的地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题了。当用户查询信息资源时，只需给出URL地址，则WWW服

14、务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将URL地址的请求传送给WWW服务器。一个完整的URL地址通常由通信协议名、Web服务器地址、文件在服务器中的路径和文件名四部分组成。第5章 Dreamweaver 8.0概述5.2 Dreamweaver 8.0的基本工作环境的基本工作环境在众多的网页制作工具中，Dreamweaver是备受专业Web开发人士推崇的软件。Dreamweaver 8.0 更是新增加了许多强大的功能，这些新增功能改善了软件的易用性，并使用户无论处于设计环境还是编码环境都可以方便地制作页面。如图5-7所示就是Dr

15、eamweaver 8.0的启动画面。新版本中完善了网页设计功能，设计理念更为人性化。第5章 Dreamweaver 8.0概述图5-7 Dreamweaver 8.0启动画面第5章 Dreamweaver 8.0概述5.2.1 Dreamweaver 8.0的工作环境的工作环境Macromedia Dreamweaver 8.0 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。安装了该软件后，首次启动它时，系统会打开一个提示用户选择工作区的对话框，如图5-8所示。用户可以根据需要选择一种工作区设置。第5章 Dreamweaver 8.

16、0概述图5-8 选择Dreamweaver 8.0“用户工作区”第5章 Dreamweaver 8.0概述在“工作区设置”对话框中，选择“Dreamweaver 8.0工作区”单选按钮，然后单击“确定”按钮，系统启动Dreamweaver 8.0软件，并自动打开一个空白未命名的文档窗口，这就是制作网页时的工作界面，如图5-9所示。第5章 Dreamweaver 8.0概述图5-9 Dreamweaver 8.0工作界面第5章 Dreamweaver 8.0概述“菜单”栏包含10类主菜单，涵盖了几乎Dreamweaver 8.0中所有的功能。通过菜单可以进行对象的任意操作与控制。菜单栏按功能的不

17、同进行了相应的划分，使用户使用起来非常方便。“插入”栏包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图、各种查看选项和一些常用操作。“文档”窗口显示当前创建和编辑的文档。如图5-10所示。第5章 Dreamweaver 8.0概述图5-10 “文档”工具栏第5章 Dreamweaver 8.0概述属性面板用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。在编辑窗口中选中不同的对象

18、，属性面板会自动变为相应的样式，如图5-11所示是选中表格对象时的属性面板。第5章 Dreamweaver 8.0概述图5-11 选中表格对象时的属性面板第5章 Dreamweaver 8.0概述5.2.2 文档窗口文档窗口(1)“设计”视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，文档可以编辑。在文档窗口中编辑文档时，显示的效果与在网络浏览器中浏览时非常相似。(2)“代码”视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码(如Microsoft Active Server Page(ASP)或ColdFusion标记语言)以及任何其他类

19、型代码的手工编写环境。(3)“代码和设计视图”：可以使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。第5章 Dreamweaver 8.0概述如果用户需要进行视图切换，可以在“文档”工具栏中单击“代码”、“拆分”和“设计”按钮，选择所需要的开发环境，如图5-12所示。第5章 Dreamweaver 8.0概述图5-12 “代码”视图与“设计”视图的切换第5章 Dreamweaver 8.0概述5.2.3 标题栏与状态栏标题栏与状态栏1标题栏标题栏标题栏位于整个工作界面最上方的左上角，用来标示Dreamweaver的标志和网页的名称，如图5-13所示。从左至右依次显示的是Drea

20、mweaver 8.0的标志，用方括号包括网页的存储位置和名称，以及最小化、最大化和关闭窗口三个按钮。第5章 Dreamweaver 8.0概述图5-13 Dreamweaver 8.0 的标题栏第5章 Dreamweaver 8.0概述2状态栏状态栏Dreamweaver 8.0的状态栏位于文档窗口的底部，如图5-14所示。第5章 Dreamweaver 8.0概述图5-14 Dreamweaver 8.0的状态栏第5章 Dreamweaver 8.0概述3选取工具选取工具选取工具用来选择编辑区内的页面元素。4手形工具手形工具手形工具用来移动文档窗口查看文档编辑区。5缩放工具缩放工具Drea

21、mweaver 8.0 允许使用缩放工具放大或缩小文档，以便查看图形的像素精确度，更加轻松地选择小项目，设计包含小文本的页面，设计大页面等等。【提示】缩放工具只在“设计”视图中可用。第5章 Dreamweaver 8.0概述6“窗口大小窗口大小”弹出式菜单弹出式菜单“窗口大小”弹出式菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸，如图5-15所示。【提示】在Windows中，可以将“文档”窗口最大化以便它填充集成窗口的整个文档区域。当“文档”窗口最大化时，无法调整它的大小。第5章 Dreamweaver 8.0概述图5-15 “窗口大小”弹出式菜单第5章 Dr

22、eamweaver 8.0概述7文档大小和估算的下载时间文档大小和估算的下载时间Dreamweaver 8.0根据页面的全部内容(包括所有的链接对象，例如图像和插件)来计算大小。Dreamweaver根据“状态栏”首选参数中输入的链接速度估计下载时间。实际下载时间因Internet条件不同而有所不同。【提示】检查某一特定网页的下载时间时，一个不错的标准是“8秒钟原则”，即大多数用户等待载入一个页面的时间不会超过 8 秒钟。第5章 Dreamweaver 8.0概述5.2.4 主菜单主菜单主菜单分为10类：文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助，功能分别为文件管理、选择区域文

23、本编辑、观察物件、插入元素、修改元素、文本操作、附加命令、站点管理、所有控制面板切换和窗口切换、联机帮助。以下将简单介绍这10项主菜单的基本用途，对于熟练掌握Dreamweaver 8.0有很大帮助。第5章 Dreamweaver 8.0概述5.2.5 常用面板常用面板1插入面板插入面板插入面板即Dreamweaver 8.0中的对象面板。插入面板集成了所有可以在网页中应用的对象，包括“插入”菜单中的选项。插入面板其实就是一个图形化了的插入指令，通过一个个直观的按钮，可以很容易地加入图像、声音、动画、表格、图层、框架、表单、Flash和ActiveX等丰富的网页元素。执行“窗口”“插入”菜单命

24、令，文档窗口上方将显示出快捷插入面板，在通常情况下会提示一个功能面板，如图5-16所示。第5章 Dreamweaver 8.0概述图5-16 插入面板第5章 Dreamweaver 8.0概述2属性面板属性面板属性面板也叫“属性检查器”，属性面板并不是将所有对象的属性加载在面板上，而是根据用户选择的对象来动态显示对象的属性，在进行网页制作时，可以根据需要来展开或关闭属性面板，或者通过拖动属性面板的标题栏把它们移动到合适的位置，使操作更方便，极大地提高了网页的制作效率。属性面板比较灵活，变化比较多，它随着选择对象的不同而改变。在使用Dreamweaver 8.0时应注意，属性面板的状态完全是随当

25、前在文档中选择的对象来决定的。如图5-17所示为表格属性面板。第5章 Dreamweaver 8.0概述图5-17 表格属性面板第5章 Dreamweaver 8.0概述5.2.6 面板组面板组Dreamweaver 8.0的面板组非常简洁、便于设计，并且将许多常用的功能进行适当的分类，以面板叠加的形式放置于窗口的右侧。面板组包含了“设计”面板、“代码”面板、“应用程序”面板、“标签检查器”面板、“文件”面板、“框架”面板和“历史记录”面板7个控制面板。显示或隐藏面板组只需要用鼠标轻轻单击屏幕右侧箭头标记，就会打开或关闭面板列表框，如图5-18所示。如图5-19所示的即为面板组打开的“文件”面

26、板。第5章 Dreamweaver 8.0概述图5-18 控制面板列表框 第5章 Dreamweaver 8.0概述图5-19 控制面板列表中的“文件”面板 第5章 Dreamweaver 8.0概述5.3 网页制作基础知识网页制作基础知识5.3.1 新建网页与打开和编辑网页新建网页与打开和编辑网页1新建空白文档新建空白文档(1)启动Dreamweaver 8.0后可以看到一个可选界面，如图5-20所示。其中包括：打开最近项目、创建新项目、从范例创建、扩展4个区域。在这里我们选择“创建新项目”下的HTML选项，这样就可以创建一个新的HTML网页。第5章 Dreamweaver 8.0概述图5-

27、20 Dreamweaver 8.0启动后显示界面第5章 Dreamweaver 8.0概述(2)Dreamweaver 8.0启动后，可以选择菜单“文件”“新建”命令，弹出如图5-21所示对话框，在“常规”列表的类别区域选择“基本页”，在基本页区域选择“HTML”选项，然后单击“创建”按钮，创建一个新的空白文档。第5章 Dreamweaver 8.0概述图5-21 “新建文档”对话框 第5章 Dreamweaver 8.0概述(3)在Dreamweaver 8.0的标准工具栏中，还为用户提供了更为便捷的“新建”按钮，如图5-22所示。单击此按钮弹出如图5-21所示的对话框，可进行HTML网页

28、的创建。如果标准工具栏没有显示，可以右键单击插入工具栏，在弹出的菜单下选择“标准”选项，如图5-23所示。第5章 Dreamweaver 8.0概述图5-22 标准面板中的新建按钮第5章 Dreamweaver 8.0概述图5-23 打开标准工具栏第5章 Dreamweaver 8.0概述(4)用鼠标右键单击文档状态栏，从弹出菜单中选择“新建”命令，则将弹出“新建文档”对话框，如图5-24所示。第5章 Dreamweaver 8.0概述图5-24 鼠标右键单击文档状态栏选取新建命令第5章 Dreamweaver 8.0概述2创建基于创建基于HTML的网页模板的网页模板利用模板，可以批量创建具有

29、相同风格的文档，具体操作方法如下：(1)打开“文件”主菜单，选择“新建”命令。(2)在弹出的“新建文档”对话框的“常规”标签下，选择“模板页”选项后，右边的窗口中列出可使用的模板，如图5-25所示。(3)选择HTML模板，单击“创建”按钮，即可创建一个基于HTML的网页模板，在新建网页的文档标题栏会显示“”字样，提示用户当前正在编辑模板文档。第5章 Dreamweaver 8.0概述图5-25 创建HTML模板网页第5章 Dreamweaver 8.0概述3打开网页打开网页单击“文件”“打开”菜单命令，可调出“打开”对话框。在该对话框内选择目录，单击选中HTML文档，再单击“打开”按钮，即可将

30、选定的HTML文档打开。4编辑编辑HTML网页网页在打开HTML文档后，可以在代码视窗或设计视窗用进行修改编辑。如果对文档的编辑不满意，可单击“文件”“回复至上次保存”菜单命令，取消上次存盘后的全部改动，也可以单击“编辑”“撤消”菜单命令，取消刚刚进行的最后一步操作。如果要重做刚刚取消的一步操作，可单击“编辑”重做菜单命令。第5章 Dreamweaver 8.0概述5.3.2 保存与关闭网页保存与关闭网页1保存文档保存文档(1)单击“文件”“保存”菜单命令，或是按下Ctrl+S组合键，可以原名称保存当前的文档。(2)单击“文件”“另存为”菜单命令，即可调出“另存为”对话框，如图5-26所示。选

31、择路径并输入文件名(通常为英文或数字)，按下“保存”按钮，即可存储该文档。第5章 Dreamweaver 8.0概述图5-26 命名并保存文档第5章 Dreamweaver 8.0概述(3)单击“文件”“保存全部”菜单命令，即可将所有打开的Dreamweaver 8.0窗口中正在编辑的文档以原名称保存。如果某些窗口中的文档尚未命名保存过，则会弹出“另存为”对话框，提示输入路径和文件名称。输入相应信息后，按下“保存”按钮即可保存文档，并继续完成其他网页的保存。2关闭网页关闭网页单击“文件”“关闭”菜单命令，即可关闭打开的文档。如果当前文档在修改后没有存盘，则会弹出一个提示框，提示用户是否保存文档

32、。如果关闭的是最后一个打开的文档，则在关闭文档的同时，也关闭了Dreamweaver 8.0。第5章 Dreamweaver 8.0概述5.3.3 应用表格应用表格1插入表格插入表格单击“插入”(常用)面板内的“插入表格”按钮，或单击“插入”“表格”菜单命令调出“插入表格”对话框，如图5-27所示，即可建立新的表格。第5章 Dreamweaver 8.0概述图5-27 “表格”对话框第5章 Dreamweaver 8.0概述“插入表格”对话框内各文本框与列表的作用如下：(1)行数：输入表格的行数。(2)列数：输入表格的列数。(3)表格宽度：以像素(Pixels)或浏览器窗口的百分比(Perce

33、nt)指定表格的宽度。(4)边框粗细：输入表格边框线的宽度。当它的值为0时，表示没有边框。第5章 Dreamweaver 8.0概述(5)单元格边距：输入单元格内的内容与单元格边框间的空白数，其单位为像素。(6)单元格间距：输入表格单元之间两个相邻边框线间的距离。(7)页眉：选择页眉方式，通常把表格的标题和排序等内容设置为页眉。(8)辅助功能：此区域可以设置表格的标题、标题的对齐方式和关于表格的摘要信息。第5章 Dreamweaver 8.0概述2设置表格属性设置表格属性为了使创建的表格更加美观、醒目，需要对表格的属性(如边框线的颜色、表格或单元格的背景图像、颜色等)进行设置。单击表格的外边框

34、，选中整个表格，此时表格的属性如图5-28所示。第5章 Dreamweaver 8.0概述图5-28 表格“属性”面板第5章 Dreamweaver 8.0概述3设置列、行和单元格属性设置列、行和单元格属性表格由很多单元格组成，除了可以设置整个表格属性外，还可以单独设置某行、某列或某些单元格的属性。首先选择单元格的任意组合，然后使用属性面板改变单元格、行、列的属性即可。单元格属性面板如图5-29所示。第5章 Dreamweaver 8.0概述图5-29 单元格属性面板第5章 Dreamweaver 8.0概述4编辑表格编辑表格在实际应用表格的过程中，往往是些结构不规则的表格，需要将规范的单元格

35、通过单元格的合并、拆分，从而达到界面布局的需要。合并单元格：单击按钮图标，即可把选定的单元格、行或列合并成一个单元格。拆分单元格：单击按钮图标，即可把一个单元格分割成多个单元格。第5章 Dreamweaver 8.0概述5插入或删除行、列插入或删除行、列将鼠标在某个单元格中单击，可进行行、列的增加或删除操作。1)插入行或列要同时插入行和列，使用菜单“修改”“表格”“插入行或列”菜单命令，或从右键快捷菜单上选择“表格”“插入行或列”命令，即弹出“插入行或列”对话框，如图5-30所示。这里可设置插入的行或列的位置以及数目。第5章 Dreamweaver 8.0概述图5-30 “插入行或列”对话框第

36、5章 Dreamweaver 8.0概述2)删除行或列删除行：使用菜单“修改”“表格”“删除行”菜单命令，或从右键快捷菜单上选择“表格”“删除行”，可删除单元格所在行。删除列：使用菜单“修改”“表格”“删除列”菜单命令，或从右键快捷菜单上选择“表格”“删除列”，可删除单元格所在列。第5章 Dreamweaver 8.0概述5.3.4 编辑文本编辑文本1添加文本添加文本在网页中添加文本有以下几种方法：(1)直接在打开的文档窗口中输入文本内容。(2)复制其他应用程序中的文本内容，在Dreamweaver 8.0的文档窗口中，将光标设置在要添加文本的位置，选择“编辑”“粘贴”命令即可完成操作。如果选

37、择“编辑”“选择性粘贴”则会弹出“选择性粘贴”对话框，如图5-31所示，根据需要选择合适的粘贴方式。第5章 Dreamweaver 8.0概述图5-31 “选择性粘贴”对话框第5章 Dreamweaver 8.0概述2删除文本删除文本将光标设在要删除文本的位置，使用键盘上的Delete键或Backspace键，就可以删除文本。如果要删除的是大段文本，则用鼠标选择要删除的文本，或采用Shift+方向键的组合方法，使其高亮显示，然后选择“编辑”“清除”命令即可。3文本的查找与替换文本的查找与替换和其他的文本编辑程序一样，Dreamweaver 8.0也提供了查找、替换文本的功能，具体操作如下：单击

38、“编辑”“查找和替换”菜单命令，调出“查找和替换对话框，如图5-32所示。该对话框内各选项的作用如下所述。第5章 Dreamweaver 8.0概述图5-32 “查找和替换”对话框第5章 Dreamweaver 8.0概述5.3.5 插入图像插入图像图像文件有各种各样的格式，可是现在能够用于网络中的只有三种格式，分别是GIF、JPEG、PNG格式。下面介绍在Dreamweaver 8.0中插入图像的方法。(1)单击标准“插入”(常用)面板内的“图像”按钮，或用鼠标拖动图标按钮到页面“设计”视图文档窗口内，均可以调出“选择图像源文件”对话框，如图5-33所示。第5章 Dreamweaver 8.

39、0概述图5-33 “选择图像源文件”对话框第5章 Dreamweaver 8.0概述(2)在该对话框内，利用“查找范围”栏可以寻找文件。如果选中了“预览图像”复选框，则在单击选中一个图像名称后，对话框的右边会显示出该图像的预览图，而且在下面的“URL”文本框中会显示当前选中文件的URL地址，并且在“相对于”下拉列表框中，可以选择文件URL地址的类型。如果选择“文档”选项，则使用的是相对路径；如果选择“站点根目录”选项，则使用的是基于站点根目录的地址。(3)选中图像文件后，单击“确认”按钮，即可关闭“选择图像源文件”对话框，并将选定的图像加入到页面的光标处。第5章 Dreamweaver 8.0

40、概述【提示】如果所选择的图像不是在本地站点的文件夹内，Dreamweaver 8.0则会弹出如图5-34所示的提示框。单击“是”按钮，则将选中的图像文件保存到本地站点目录中；如果不希望将该图片复制到本地站点目录，则可以单击“否”按钮。如果未将图像文件保存到本地站点目录，则所选择的图像将不能在发布的站点中显示。第5章 Dreamweaver 8.0概述图5-34 是否保存图片到本地站点 第5章 Dreamweaver 8.0概述5.3.6 超链接超链接创建超链接基本上是利用属性面板上的“链接”文本框建立超链接的，这也是最直接最简单的链接方式，包括图像的热点链接、锚点链接、E-mail链接、文档链

41、接和网站之间的链接。利用属性面板链接，只要选中要链接的文档内容，打开属性面板，在属性面板的链接文本框中输入链接目标的地址，就可以链接了。如果是图像热点链接，那么，只要选中图像，打开属性面板单击“热点”工具矩形热点工具、椭圆形热点工具、多边形热点工具其中的任意一种，在图像上画出范围即可，然后在属性面板中输入目标地址，或打开文本框右侧的文件夹选择目标文件，即可建立链接，如图5-35所示。第5章 Dreamweaver 8.0概述图5-35 在链接栏中输入目标文件路径第5章 Dreamweaver 8.0概述5.4 网页制作高级功能网页制作高级功能5.4.1 表单表单表单在Web网页中用来收集访问者

42、的信息，使网页具有交互功能。如图5-36所示为一个典型的表单，用来填写用户信息。表单有两个作用：一个是描述表单的HTML源代码；另一个是处理用户在HTML中创建的表单中输入信息的服务端或客户端应用程序。第5章 Dreamweaver 8.0概述图5-36 用户登录表单第5章 Dreamweaver 8.0概述1表单对象概述表单对象概述在Dreamweaver 8.0中，选择“插入”面板中的“表单”，如图5-37所示，也可以执行“插入”“表单”菜单命令，在其下拉菜单中选择适合的表单选项进行插入。第5章 Dreamweaver 8.0概述图5-37 表单面板第5章 Dreamweaver 8.0概

43、述2创建表单创建表单在网页中插入表单对象，如文本域、按钮等，首先必须创建表单域。表单域在浏览器中是不可见的。在“设计”视图状态下表单域用红色的虚线表示，如果看不到表单域的矩形红线，则可以单击“查看”“可视化助理”“不可见元素”菜单命令，即可将表单域的矩形红线显示出来。(1)将光标移到要插入表单的位置，单击“插入”面板中的表单按钮，或用鼠标将表单对象面板内的表单图标拖到网页窗口内(不要进行移动光标的操作)，即可在网页编辑窗口内创建一个表单，如图5-38所示。第5章 Dreamweaver 8.0概述图5-38 创建的表单域第5章 Dreamweaver 8.0概述(2)选中表单域，此时显示表单属

44、性面板。在属性面板上可以设置表单域的各项属性，如图5-39所示。第5章 Dreamweaver 8.0概述图5-39 表单属性面板第5章 Dreamweaver 8.0概述3常用表单的使用常用表单的使用1)文本域文本域是用户在其中输入的表单对象。创建单行文本域和密码文本域按以下步骤进行：(1)将光标插入点放在表单红线轮廓内。(2)选择“插入”对象面板上的文本字段按钮，此时在光标处插入一个文本字段，如图5-40所示。第5章 Dreamweaver 8.0概述图5-40 插入的文本字段第5章 Dreamweaver 8.0概述(3)在视图文档中，选中插入的文本字段，查看属性面板，如图5-41所示。

45、第5章 Dreamweaver 8.0概述图5-41 文本域属性面板第5章 Dreamweaver 8.0概述(4)在属性面板中，可在“文本域”下面的文本框中输入文本域的名称。所选名称必须在该表单内惟一标识该文本域。表单对象名称不能包含空格或特殊字符，可以使用字母、数字和下划线(_)的任意组合。(5)在“字符宽度”文本框中可以输入显示字符的最多个数，系统默认设置的长度为20个字符。(6)在“最多字符数”文本框中，可输入文本域中允许输入的最大字符数目，该值用于限定用户可在文本域中输入的最大字符数。这个值定义文本域的大小限制，而且用于验证该表单。如果将“最多字符数”域留为空白，则用户可以输入任意数

46、量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果用户输入超过了最大字符数，则表单发出警告声。第5章 Dreamweaver 8.0概述(7)在“类型”选项中，文本域的类型可以选择“单行”、“多行”或“密码”指定要创建的文本域的类型。(8)在“初始值”文本框中可以输入初始值，如果希望在域中显示默认文本值，则在属性面板的“初始值”文本框中输入默认文本，当打开带有该文本域的网页时，文本将出现在文本域中。(9)如果要为页面中的域添加标签，则将插入点放在该对象的旁边，然后输入需要的任何文本，如用户名、密码、电子邮箱等等。如图5-42所示为典型的输入文本域表单。第5章 Dreamweaver 8.

47、0概述图5-42 文本域效果图第5章 Dreamweaver 8.0概述2)创建复选框创建复选框按以下步骤进行：(1)将光标插入点放在表单红色线轮廓内。(2)选择“表单”面板上的复选框按钮，此时系统会在光标处插入一个复选框，可以连续加入复选框，如图5-43所示。第5章 Dreamweaver 8.0概述图5-43 插入复选框第5章 Dreamweaver 8.0概述(3)选择视图中的复选框，查看属性面板，如图5-44所示。(4)在“复选框名称”文本框中输入复选框的名称。(5)在“选定值”文本框中输入复选框控件的值，该值可以被提交到服务器上，以便被应用程序执行。(6)在“初始状态”选项中，可设置

48、复选框的初始状态，其中，“已勾选”选项表示复选框初始状态下被选中；“未选中”表示复选框初始状态下未选中。第5章 Dreamweaver 8.0概述图5-44 复选框属性面板第5章 Dreamweaver 8.0概述3)建立滚动列表滚动列表可以在有限的空间内显示多个选项。用户可以滚动整个列表，并选择其中的多个项。创建滚动列表的步骤如下：(1)将光标插入点放在表单红线轮廓内。(2)选择“表单”面板上的“列表/菜单”按钮，此时在光标处插入一个列表框。(3)选择列表框，查看属性面板，如图5-45所示。(4)在列表/菜单下的文本框中，输入该表单中一个惟一名称。第5章 Dreamweaver 8.0概述图

49、5-45 列表/菜单属性面板第5章 Dreamweaver 8.0概述(5)在“类型”选项中，选择“列表”选项，则创建的列表框为平铺列表形式。(6)在“高度”文本框中，只有选择“列表”选项时，此处才可进行编辑。输入一个数字，即可指定该列表显示的行(或项)数。如果指定的数字小于该列表包含的选项数，则出现滚动条。(7)在“选定范围”选项中，选择“允许多选”复选框，可允许用户选择该列表中的多个项。在浏览网页时，可以通过按下“Ctrl”键，再单击相应的选项实现选择多个选项。也可以按下Shift键，再单击相应选项来选中相邻的多个选项。(8)单击“列表值”按钮，弹出“列表值”对话框，如图5-46所示。第5

50、章 Dreamweaver 8.0概述图5-46 列表值对话框第5章 Dreamweaver 8.0概述(9)在“项目标签”域中，输入要在该列表中显示的文本。单击按钮，可增加多项文本项目，单击按钮可以删除文本项目。在“值”区域内，显示了每个对应的值，在用户选择该项目时，这些值将发送到服务器，被应用程序或脚本所调用。(10)设置完成后，单击“确定”按钮，返回属性面板。创建的列表项目显示在“初始化时选定”列表框中，如图5-47所示。滚动列表设置完成后，在网页中的显示结果如图5-48所示。第5章 Dreamweaver 8.0概述图5-47 列表值显示第5章 Dreamweaver 8.0概述图5-