网页设计课件第5章.ppt

1、网页设计与制作1第第5章章 Dreamweaver 8基础知识基础知识 网页设计与制作2 5.1 Dreamweaver 8概述概述 5.1.1 Dreamweaver 8的新增功能的新增功能 Dreamweaver 8新增了许多功能，大大改新增了许多功能，大大改善了软件的易用性，使用户无论处于设计环善了软件的易用性，使用户无论处于设计环境还是编码环境都可以方便地制作页面。新境还是编码环境都可以方便地制作页面。新增的主要功能有：增的主要功能有：1. 用户界面的改进用户界面的改进2多种样式呈现面板多种样式呈现面板3新的标准新的标准CSS面板面板4与最新技术和标准集成与最新技术和标准集成5缩放功能

2、缩放功能6改进的改进的WebDAV 网页设计与制作3 5.1.2 Dreamweaver 8的工作界面的工作界面图图5-2 Dreamweaver 8的工作界面的工作界面网页设计与制作4 5.2 站点的创建和管理站点的创建和管理 5.2.1 创建站点创建站点 5.2.2 管理站点管理站点1站点的重新配置站点的重新配置2创建站点的文件夹创建站点的文件夹3创建网页文件创建网页文件4为网页文件命名为网页文件命名网页设计与制作5 5.3 创建网页创建网页 5.3.1 页面属性的设定页面属性的设定1设置设置“外观外观”页面属性页面属性2设置设置“链接链接”页面属性页面属性3设置设置“标题标题”页面属性页

3、面属性4设置设置“标题标题/编码编码”页面属性页面属性5设置设置“跟踪图像跟踪图像”页面属性页面属性网页设计与制作6 5.3.2 网页文字的处理网页文字的处理 在网页中输入文本是最基本的操作。在在网页中输入文本是最基本的操作。在“文档窗口文档窗口”中可以直接输入文字，一般中可以直接输入文字，一般Dreamweaver 8中的文本段落是自动换行的，中的文本段落是自动换行的，即在输入文字时，若一行文字超过了窗口显示即在输入文字时，若一行文字超过了窗口显示范围时，会自动换到下一行。如果在文本输入范围时，会自动换到下一行。如果在文本输入的过程中需要划分段落，可以用的过程中需要划分段落，可以用Enter

4、键进行键进行换行，用换行，用Enter键换行后上下段落的行间距为键换行后上下段落的行间距为一行。如果用一行。如果用Shift+Enter键进行强制换行，换键进行强制换行，换行所产生的行间距为用行所产生的行间距为用Enter键换行所产生的键换行所产生的行间距的一半。另外行间距的一半。另外“文档窗口文档窗口”也支持也支持Word的复制、粘贴等功能。的复制、粘贴等功能。 网页设计与制作7 5.3.3 网页图像的处理网页图像的处理1图像的添加和编辑图像的添加和编辑2插入其它图像元素插入其它图像元素1）插入）插入“图像占位符图像占位符”2）插入）插入“鼠标经过图像鼠标经过图像” 5.3.4 制作多媒体页

5、面制作多媒体页面 为了增强网页的表现力，丰富文档的显示效果，可以为了增强网页的表现力，丰富文档的显示效果，可以向其向其Flash动画、动画、Java小程序、音频播放插件等多媒体内容。小程序、音频播放插件等多媒体内容。 1插入插入Flash动画动画 2插入插入Flash按钮按钮3插入声音插入声音网页设计与制作8 5.4 创建链接创建链接5.4.1 创建文字链接创建文字链接5.4.2 创建图像链接创建图像链接5.4.3 创建电子邮件链接创建电子邮件链接5.4.4 创建锚记链接创建锚记链接 锚记是指在文档中设置一个位置标记，并锚记是指在文档中设置一个位置标记，并给该位置一个名称，以便引用。通过创建的

6、锚给该位置一个名称，以便引用。通过创建的锚记，可以使链接指向当前页面的指定位置，使记，可以使链接指向当前页面的指定位置，使访问者能够快速浏览到选定的内容，加快信息访问者能够快速浏览到选定的内容，加快信息检索速度。检索速度。网页设计与制作9 5.5 表格的使用表格的使用 表格是网页制作不可缺少的元素，它以简洁明了和表格是网页制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单等元素有序高效快捷的方式将图片、文本、数据和表单等元素有序地显示在页面上，让大家可以设计出漂亮的页面；使用地显示在页面上，让大家可以设计出漂亮的页面；使用表格排版的页面在不同平台、不同分辨率的浏览器里都表

7、格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，所以表格还是网页中最常用的排能保持其原有的布局，所以表格还是网页中最常用的排版方式之一。版方式之一。 5.5.1 表格的创建与编辑表格的创建与编辑 1插入表格插入表格2选择表格选择表格3编辑和应用表格编辑和应用表格1）设置表格的属性）设置表格的属性2）设置单元格属性）设置单元格属性3）应用表格）应用表格 4嵌套表格嵌套表格网页设计与制作10 5.5.2 表格的布局功能表格的布局功能 在在Dreamweaver中表格的作用不仅仅是安放网中表格的作用不仅仅是安放网页元素和记载资料，还有一个更为重要的作用就是页元素和记载资料，还有一个

8、更为重要的作用就是排版布局，固定网页中各个元素的位置。排版布局，固定网页中各个元素的位置。网页设计与制作11 5.6 框架的使用框架的使用 框架的作用就是把浏览器窗口划分为若干区域，每个框架的作用就是把浏览器窗口划分为若干区域，每个区域可以分别显示不同的网页。框架主要由框架集区域可以分别显示不同的网页。框架主要由框架集（Frameset）和框架（）和框架（Frames）两部分组成。框架集是在）两部分组成。框架集是在一个文档内定义一组框架结构的一个文档内定义一组框架结构的HTML网页。当在页面中网页。当在页面中建立框架时，建立框架时，Dreamweaver可以创建一个无标题的框架集可以创建一个无

9、标题的框架集文件，再在每个框架中创建无标题文件，如果某个页面被文件，再在每个框架中创建无标题文件，如果某个页面被划分成划分成2个框架，它实际上包含的却是个框架，它实际上包含的却是3个独立的文件：一个独立的文件：一个框架集文件和两个框架内容文件。框架内容文件包含了个框架集文件和两个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。将出现在页面框架中的内容。 框架通常用来定义页面的导航区域和内容区域。在一框架通常用来定义页面的导航区域和内容区域。在一般情况下，用户需要不停地在文章内容和导航内容之间进般情况下，用户需要不停地在文章内容和导航内容之间进行切换。但是，如果利用框架结构把导航内容永

10、远固定在行切换。但是，如果利用框架结构把导航内容永远固定在页面的顶部或左边，那么在任何时候用户都可以直接选择页面的顶部或左边，那么在任何时候用户都可以直接选择顶部或左边的导航内容，在页面下方或右边浏览想要的内顶部或左边的导航内容，在页面下方或右边浏览想要的内容。容。网页设计与制作12 5.6.1 框架的创建框架的创建 5.6.2 框架和框架集属性的设置框架和框架集属性的设置 建立好的默认属性值为：无边框、无滚动条，建立好的默认属性值为：无边框、无滚动条，在浏览器中无法看到创建的框架，同时不能调整在浏览器中无法看到创建的框架，同时不能调整框架的大小，要改变这些属性，需要在框架的框架的大小，要改变

11、这些属性，需要在框架的“属性属性”面板中进行修改。面板中进行修改。1设置框架属性设置框架属性2设置框架集属性设置框架集属性 5.6.3 在框架中设置链接在框架中设置链接网页设计与制作13 5.7 表单的使用表单的使用 表单是构成动态网站必不可少的元素之一，是提表单是构成动态网站必不可少的元素之一，是提供交互式操作的主要方法，用户可以通过表单和网站供交互式操作的主要方法，用户可以通过表单和网站的管理人员进行交流。表单可以帮助的管理人员进行交流。表单可以帮助Internet服务器收服务器收集信息，如收集资料、获取订单。当访问者在表单中集信息，如收集资料、获取订单。当访问者在表单中输入信息，然后单击

12、提交按钮时，这些信息将被提交输入信息，然后单击提交按钮时，这些信息将被提交给服务器进行处理。表单可以包含允许进行交互的各给服务器进行处理。表单可以包含允许进行交互的各种对象，如文本域、列表框、复选框、单选按钮、图种对象，如文本域、列表框、复选框、单选按钮、图像域、按钮以及其他表单对象。像域、按钮以及其他表单对象。 使用表单必须具备两个条件：一个是建立含有表使用表单必须具备两个条件：一个是建立含有表单元素的网页文档，另一个是具备服务器端的表单处单元素的网页文档，另一个是具备服务器端的表单处理应用程序或者客户端的脚本程序（如理应用程序或者客户端的脚本程序（如CGI、ASP、JSP、PHP等），它能

13、够处理用户输入到表单的信息。等），它能够处理用户输入到表单的信息。5.7.1 表单的创建表单的创建5.7.2 添加表单元素添加表单元素5.7.3 表单制作的实例表单制作的实例 网页设计与制作14 5.8 层的应用层的应用 层（层（Layer）是一种）是一种 HTML 页面元素，可页面元素，可以将它定位在页面上的任意位置。层可以包含以将它定位在页面上的任意位置。层可以包含文本、图像或其它文本、图像或其它 HTML 文档。层的出现使网文档。层的出现使网页从二维平面拓展到三维立体，可以将页面上页从二维平面拓展到三维立体，可以将页面上元素进行重叠和复杂的布局。元素进行重叠和复杂的布局。 5.8.1 层

14、的基本操作层的基本操作1创建层创建层2“层层”面板面板 3设置层属性设置层属性 5.8.2 层的应用实例层的应用实例网页设计与制作15 5.9 CSS样式表的应用样式表的应用 5.9.1 CSS的基本操作的基本操作1创建创建CSS2编辑编辑CSS3应用应用CSS自定义样式自定义样式4链接外部现有的链接外部现有的CSS样式文件样式文件 5.9.2 CSS的应用实例的应用实例网页设计与制作16 5.10 行为的应用行为的应用 一般说来，动态网页是通过一般说来，动态网页是通过JaveScript或基于或基于JaveScript的的DHTML代码来实现的，但编写脚本既复杂代码来实现的，但编写脚本既复杂

15、又专业，需要专门学习。而又专业，需要专门学习。而Dreamweaver提供的提供的“行为行为”的机制，虽然也是基于的机制，虽然也是基于JaveScript来实现动态网页的，但来实现动态网页的，但却不需书写任何代码，在可视化环境中按几个按钮，填几却不需书写任何代码，在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。简单交互。 5.10.1 行为的基本知识行为的基本知识 行为是事件与动作的组合，一般的行为都是由事件来行为是事件与动作的组合，一般的行为都是由事件来激活动作的。动作是由预先写好的能够执行某种任务的

16、激活动作的。动作是由预先写好的能够执行某种任务的JavaScript代码组成，而事件一般与浏览器前的用户的操代码组成，而事件一般与浏览器前的用户的操作相关，如单击鼠标、鼠标上滚等。例如，当鼠标移动到作相关，如单击鼠标、鼠标上滚等。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为网页的图片上方时，图片高亮显示，此时的鼠标移动称为事件，图片的变化称为动作。事件，图片的变化称为动作。 在在Dreamwaever中，对行为的添加和控制主要通过中，对行为的添加和控制主要通过“行为行为”面板来实现。面板来实现。 5.10.2 行为的应用实例行为的应用实例网页设计与制作17 5.11 模

17、板的使用模板的使用 在制作网站的过程中，为了统一风格，很多页面在制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。为了避免大量会用到相同的布局、图片和文字元素。为了避免大量的重复劳动，可以使用的重复劳动，可以使用Dreamweaver 8提供的模板功提供的模板功能，将具有相同版面结构的页面制作为模板，通过模能，将具有相同版面结构的页面制作为模板，通过模板批量制作这些页面来提高效率。板批量制作这些页面来提高效率。 5.11.1 模板的基本操作模板的基本操作 1创建模板创建模板 模板的创建有以下三种方式。模板的创建有以下三种方式。1）利用）利用“模板模板”面板面板2）将普通

18、网页另存为模板）将普通网页另存为模板3）通过菜单创建模板）通过菜单创建模板 2创建可编辑区域创建可编辑区域 5.11.2 模板的应用实例模板的应用实例网页设计与制作18 5.12 测试和发布网站测试和发布网站 5.12.1 测试网站测试网站 在发布网站前先使用在发布网站前先使用Dreamweaver 8 站点管理器对站点管理器对网站文件进行检查和整理，这一步很有必要。通过本地网站文件进行检查和整理，这一步很有必要。通过本地测试可以找出断掉的链接、错误的代码和未使用的孤立测试可以找出断掉的链接、错误的代码和未使用的孤立文件等问题，以便进行纠正和处理。文件等问题，以便进行纠正和处理。 1检查断掉的

19、链接检查断掉的链接 2检查外部链接检查外部链接 3检查孤立文件检查孤立文件 5.12.2 发布网站发布网站网页设计与制作19 5.13 网页制作实例网页制作实例 利用利用Dreamweaver 8制作一个网制作一个网站的首页。详见书上。站的首页。详见书上。 网页设计与制作20 实验三实验三 利用利用Dreamweaver进行网页制作进行网页制作 利用利用Dreamweaver编制简单的静态网页，编制简单的静态网页，要求网页中有文本编辑、图片编辑和超链接，要求网页中有文本编辑、图片编辑和超链接，并在网页设计中使用表格、框架并在网页设计中使用表格、框架,并用层作出弹并用层作出弹出下拉菜单的效果出下拉菜单的效果.