网站建设第4章-Dreamweaver8课件

1、*第4章 Dreamweaver 网页设计基础 【知识与技能要点】掌握站点构建的方法掌握使用Dreamweaver创建基本网页的方法掌握使用Dreamweaver创建表格的方法掌握使用Dreamweaver创建超链接的方法掌握使用Dreamweaver创建框架的方法掌握使用Dreamweaver创建表单的方法掌握使用Dreamweaver创建动感网页的方法*4.1 构建站点 网站中包含大量的各类文件：以.html和.htm为扩展名的静态网页页面文件；以.asp为扩展名的动态网页页面文件，这些文件是整个网站的主体；其他资源文件；各级目录等。*4.1 构建站点 为了有效地组织和管理，网站开发者可以

2、构建一个站点，将这些内容全部放置在站点中。站点与WEB服务器上的站点相对应。Dreamweaver 8.0中提供了非常方便的构建站点和管理站点的方法。 *4.1.1 构建本地站点 图4-1 Dreamweaver 8.0的“起始页对话框” *“站点定义”向导编辑文件第1部分*“站点定义”向导编辑文件第2部分*“站点定义”向导编辑文件第3部分*“站点定义”向导测试文件*“站点定义”向导共享文件第1部分*“站点定义”向导共享文件第2部分*“站点定义”向导共享文件第3部分*4.1.2 管理站点 站点建立完成后，用户可以通过 “站点”菜单对站点进行管理。点击“站点管理站点”，将打开 “管理站点”对话框

3、。*4.2 使用Dreamweaver创建基本网页 网站的是由一系列相关的文件组成的，其中最基本的就是基本网页。 *4.2.1 创建基本网页 （1）使用菜单创建 点击“文件新建”菜单项，将打开“新建文档”对话框， *4.2.1 创建基本网页 （2）在“文件”对话框中创建 *4.2.2 编辑窗口简介 *（1）菜单栏菜单名称功能文件包含“新建”、“打开”、“关闭”、“保存”和“打印”等对文档进行控制或操作的项目。编辑包括对当前文档中的内容进行编辑或辅助编辑的项目，例如“剪切”、“复制”、“粘贴”和“查找和替换”等，除此之外，还包括对Dreamweaver 8.0“首选参数”的访问。查看包括文档的各

4、种视图显示，以及文档显示时的一些设置，例如“标尺”、“网格”和“工具栏”等。插入提供各种对象的插入选项。包含“表格”、“图像”和“表单”等。修改提供修改页面、表格、图像、CSS和时间轴等各种对象的选项。文本用于修改和设置当前文档的文本格式。命令提供对各种命令的访问，包括可以根据开发者的格式首选参数设置代码格式的命令和创建相册的命令等选项。站点提供用于管理和维护站点以及上传和下载文文档的菜单选项。窗口提供对Dreamweaver 8.0中所有面板、检查器和窗口的访问选项。帮助提供对Dreamweaver 8.0帮助文档的访问，以及各种语言的参考材料。*（2）插入栏 在菜单栏的下面就是插入栏，其作

5、用如同快捷工具栏，包含用于创建和插入对象的各种按钮，包括如表格、层和图像等内容。*（3）文档编辑区 文档编辑区是网页文件的编辑区域.*三种视图方式 视图方式说明代码使用代码方式时，在编辑界面中只显示网页的源代码（即HTML），这种方式不能直观地看到网页的显示效果，而且还必须要非常了解HTML语言，因此对于初学者来说是不适合使用的。设计使用设计方式时，在界面中将以“所见即所得”的编辑方式显示网页内容，这种方式与Word等常用软件的使用方式非常相似，因此对于开发者来说，这种方式的使用很简单，非常适合初学者应用。拆分使用拆分方式时，则会将编辑界面拆分成两个部分，上半部分显示网页的源代码，下半部分以设

6、计方式显示。*（4）属性检查器和面板组 属性检查器的功能是用于查看和编辑当前选定页面元素的最常用属性，其中的内容根据选定的元素会有所不同。*（4）属性检查器和面板组 在Dreamweaver 8.0中，一些相似的选项被安排在同一个面板上，而功能相近的面板则被组织到一个面板组中。*4.2.3 编辑基本网页（1）在网页中插入文字*4.2.3 编辑基本网页 设置一些特殊格式，比如：背景颜色、背景图像或编码等，开发者可以点击“页面属性”按钮，在打开的“页面属性”对话框中进行设置。*4.2.3 编辑基本网页（2）在网页中插入图像 “插入”菜单中的“图像”选项，点击“插入栏”中的 图标。 *4.3 使用D

7、reamweaver创建表格 表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将图像、文本和表单等元素有序的显示在页面上，让开发者可以很容易地设计出漂亮的页面。 除此之外，当在网页中要显示日历、课程表等内容时，也要使用表格。*4.3.1设计表格 在使用表格对页面进行排版之前，要先设计好表格的样式以及元素放置的位置，以及是否使用嵌套表格。 在设计版面较复杂的页面时，会引入嵌套表格，由外层表格负责整体排版，而由嵌套的内层表格负责各个子栏目的排版，并插入到外层表格的相应位置中，使他们各司其职，互不冲突。 *4.3.2 创建表格（1）创建编辑外层表格 在Dreamweaver 8.

8、0中，除了使用“插入”菜单中的“表格”项创建表格外，也可以点击插入栏中的 按钮，然后在弹出的“表格”对话框中进行表格属性设置。*4.3.2 创建表格*4.3.2 创建表格 设置完成后，点击“确定”按钮创建表格，然后根据设计要求将内容元素放置在表格中，在编辑每一个单元格的时候，可以在“单元格属性检查器”对话框中设置相应的选项。*4.3.2 创建表格 如果表格创建完成后，还需要对其进行修改，可以在设计视图中选中表格，或是在状态栏的标签选择器中选择相应的表格标签，然后在表格属性检查器中修改选项。 *4.3.2 创建表格（2）创建编辑内层表格 *4.4 使用Dreamweaver创建超链接 一个网站是

9、由很多页面和其他相关文件组成的，如果他们之间彼此相互独立，那么页面就好比是一个个孤岛，网站将无法正常运行。为了使网站中每个网页之间可以建立起相互的联系，必须使用一种可以将站内网页、外部网页、图片和邮件等链接在一起的技术，这称为“超级链接”或“超链接”。 *4.4.1 创建页间链接 页间连接是指从一个页面链接到另一个页面上，被链接的目的页面可以和源页面在同一个站点上，也可以是其他站点中的某一个页面。*（1）文字链接 文字链接是网页链接中最常用也是最基本的形式。当在浏览器中显示页面时，可以超链接的文字通常都显示为蓝色的、带有下划线（如果使用了层叠样式表修饰过的可能会显示的不一样），当用户用鼠标指向

10、它时，鼠标指针会变为“小手”的形状。 *（1）文字链接 “目标”选项，也可以称它为目标区，它是指定超级链接指向的目的页面出现在什么目标区域中，其共有五个选项：空：即什么都不选，这个是默认值，表示目的页面与源页面在同一个窗口中显示。_blank：表示目的页面将出现在一个新窗口中。_parent：表示目的页面将替换其上一层的框架结构。_self：表示将目的页面显示在当前框架中。_top：表示目的页面将跳出所有框架，直接出现在浏览器中。*（1）文字链接*（1）文字链接 除了使用属性检查器外，还可以点击“插入栏”中的 图标，或是点击菜单栏中的“插入超级链接”项，将会打开“超级链接”对话框。 *（2）图

11、像链接 由于文字显示的效果比较单调，因此可以使用图像链接增加显示效果。如果一个页面中的图像被增加了链接功能后，其在浏览器中显示时会在图像的外围显示一个蓝色的边框，并且当用鼠标指向它时，鼠标指针也会变为“小手”的形状。 图像链接的创建与文字链接非常相似，先选取中图像，然后使用与创建文字链接一样的方式创建链接。 *4.4.2 下载与邮件发送 在一些网页中，经常可以看到一些超链接，点击后并没有显示目的页面，而是出现了下载界面，或是弹出联系人地址已经填好的邮件发送向导，其实这也是超链接的一种。 *（1）创建下载链接 先选中作为链接的元素，然后使用与创建页间链接相似的方法选择目的文件即可创建下载链接。

12、需要注意，被选择的文件不能是以“.html”或“.htm”为的扩展名的网页文件（以“.jpg”和“.gif”等为扩展名的图像文件，或是以“.txt”为扩展名的文本文件也尽量不要使用），其他类型文件（如“.doc”的Word文档文件、“.rar”或“.zip”的压缩文件、“.exe”的可执行文件）通常都可以。*（2）创建邮件发送链接 创建邮件发送链接的方式与其他链接稍有不同，先将编辑插入点放置在提定位置，然后点击“插入栏”中的 图标，或是点击菜单栏中的“插入电子邮件链接”项，将会打开 “电子邮件链接”对话框。*（2）创建邮件发送链接*（2）创建邮件发送链接*4.4.3 创建锚点链接 使用超级链接

13、可以在不同页面之间进行跳转，同样也可以在一个内容比较多、需要翻屏显示的页面内进行跳转，这种称为“页内链接”。 *4.4.3 创建锚点链接 为了可以在一个页面内部的不同位置进行跳转，首先需要在这些位置上创建“锚点标记”。点击“插入栏”中的 图标，或是点击菜单栏中的“插入命名锚记”项，将会打开“命名锚记 ”对话框。 *4.4.3 创建锚点链接 锚点创建好后，可以使用创建文字链接的方式创建到锚点的链接，但不同的是在属性检查器对话框的“链接”项中不能输入文件名，而是要输入一个以“#”开头，后面跟目的锚点名称的一个文本串，或是打开“超级链接”对话框，在“链接”项中选择或输入。*4.4.3 创建锚点链接*

14、4.4.3 创建锚点链接 使用锚点不但可以在一个页面中进行跳转，还可以从一个页面跳转到另一个页面中的某个锚点位置上，要创建这种链接，只需要在“链接”项后输入目的页面的文件名，后面加一个“#”，再跟目的锚点名称即可，例如：“index.asp#copyright”。 *4.4.4 创建热点 普通的链接方式只能在一个元素上创建一个链接，但有时像地图这样的图片上，可能包含有多个链接，当单击不同的省时可以跳转到不同的网页上，这时就只能使用热点技术了。 需要注意：热点必须作用在图片上。 *4.4.4 创建热点 在对话框的左下角有三个热点图形选择按钮，分别是矩形、圆形和多边形，对于复杂的热区图形可以选择多

15、边形工具来进行描画。 *4.5 使用Dreamweaver 创建框架 为了能够在一个浏览器窗口中显示多个不同页面，可以使用框架结构，它是网页中经常使用的布局设计方式之一。 *4.5.1 创建与保存框架 框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个独立的页面。另外还可以把网站中多个页面相同的部分单独制作成一个页面，将其作为框架结构的一个子框架的内容提供给整个网站公用，这样大大降低了网站的维护成本，减少了开发人员的工作量。 *4.5.1 创建与保存框架 一个框架结构的页面主要有两部分构成： 框架：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其

16、余部分中所显示内容无关的网页文件。 框架集：框架集是一个独立的网页文件，它定义了一组框架的布局和属性，将一个窗口通过行和列的方式分割成多个子框架，而子框架的多少则根据具体有多少个网页来决定，每个子框架中要显示的就是不同的网页内容。*（1）使用新建文档对话框创建 点击菜单栏中的“文件新建”项，或是在起始页对话框中点击“框架集”，将会打开“新建文档”对话框，在“类别”项中选择“框架集”，再在框架集中选择相应的样式，对话框的右侧会显示出所选样式的预览图，最后点击“创建”按钮即可。*（1）使用新建文档对话框创建*（1）使用新建文档对话框创建 框架集创建成功后，马上会显示出“框架标签辅助功能属性”对话框

17、，在其中的“框架”项中给出了每个框架的内部名称，而在“标题”项中，对应每个框架，用户可以指定一个名称，这个名称是为了在页面设计时由开发者使用的（比如在超链接中使用）。 *（1）使用新建文档对话框创建*（2）使用插入栏创建 新建一个普通页面，在“布局插入栏”中选择“框架”按钮，点击其右侧的下拉按钮后，将会出现一个含有多个预制框架集的选择列表，在其中选择相应的框架集样式。*（3）保存框架 编辑完框架的每个部分后，就可以将其保存了，不过要注意，框架的保存不同于普通页面的保存，框架保存时需要对框架集中的每一个部分（即子框架中包含的页面）进行保存，然后再保存整个框架集，也就是说保存框架后，实际的文件个数

18、会比设计时见到的部分多一个。 *4.5.2 框架的编辑与修改（1）编辑框架内容 在框架中编辑页面内容的方法与在普通页面中相似，只需要选择指定的子框架部分，或是使用“框架面板”对话框选择相应框架，就可以在其中进行内容编辑。*4.5.2 框架的编辑与修改（2）修改框架结构 框架创建好后，可以在设计视图中对其进行有限的修改。也可以使用框架属性检查器进行修改。*4.6 使用Dreamweaver 创建表单 在网页设计中经常需要制作一些可以搜集到用户信息的页面，在这些页面中用到的对象元素被称为表单。 一个完整的表单由两部分组成，一个是在网页中进行描述的表单对象；另一个是指定接收信息的应用程序，其可以是服

19、务器端的，也可以是客户端的，主要用于对客户信息进行分析处理。*4.6.1 表单对象简介（1）表单（2）文本域（3）隐藏区域（4）复选框（5）单选按钮（6）列表/菜单与跳转菜单（7）图像区域（8）文件域（9）按钮 *4.6.2 插入表单对象 在建立表单页面之前，先要设计好其布局结构，并根据需要选择要使用的表单对象。新建一个普通页面，然后使用表格对其进行布局排版后，就可以插入表单对象了。*4.6.2 插入表单对象*4.7 创建动感网页 为了增加页面的动感显示效果，或是实现用户与页面的简单交互， Dreamweaver提供了非常方便、简单的机制来实现创建动感网页。*4.7.1 层与时间轴 层是CSS

20、中的一种定位技术，Dreamweaver对其进行了可视化处理。使用层以后，可以任意元素将放置在层内，并且层可以放置在网页中的任何一个位置上，这样可以使元素重叠显示，使其具有立体效果。 *（1）创建层 层的创建非常方便。在Dreamweaver中点击菜单栏中的“插入布局对象层”选项，或是在“布局插入栏”中点击 按钮，然后在编辑区中按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标后层就会出现在页面中。 *（1）创建层 层创建好后，可以通过“属性检查器”进行属性值的修改。 *（2）时间轴 时间轴可以根据时间的流逝，移动图层位置或改变图层的样式，从而显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。*（2