《(精品)网页(二版)第2章.ppt》由会员分享，可在线阅读，更多相关《(精品)网页(二版)第2章.ppt（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页制作及应用第二章第二章 Dreamweaver8 Dreamweaver8 网页设计技术网页设计技术 本章学习目标1.站点的建立与使用。2.工具、菜单、面板组、属性面板组的使用。3.文本的格式化与CSS样式。4.超链接的使用。5.用表格、框架和层布局网页。2.1 Dreamweaver简介 Dreamweaver 由Micromedia公司出品，是当今最流行的专业网页设计应用软件，还用来进行网站的建设与管理、网页可视化编程和脚本编写。既可以用来制作静态网站和静态网页，也可以用来制作动态网站和动态网页。具有跨平台、跨浏览器的特点。1.1.DreamweaverDreamweaver8 8 的
2、起始页的起始页 2.2.DreamweaverDreamweaver8 8 的工作窗口的工作窗口 3.3.DreamweaverDreamweaver8 8 的文档窗口的文档窗口 4.4.DreamweaverDreamweaver8 8 的状态栏的状态栏 5.5.DreamweaverDreamweaver8 8 的属性面板的属性面板 (不同对象属性面板也不同,以下是文本的属性面板)6.Dreamweaver6.Dreamweaver8 8 的面板组的面板组 2.2 2.2 创建及管理站点创建及管理站点 为了使本地站点上传到服务器后文件之间保持正常的链接关系，应该把所有网站资源放入本地站点中
3、，如：网页、图片、歌曲等。所以，首先要在Dreamweaver中创建一个逻辑站点，并让逻辑站点指向位于本地硬盘的本地站点，这样就可以使制作的网页和网页之间的超链接在本地站点中完成。Dreamweaver中的 站 点 只 代 表 该 逻 辑 站 点 与 本 地 站 点 的 关 联，删 除Dreamweaver中的站点后本地站点仍然存在。1.1.新建站点新建站点(举例说明举例说明)(1)在E盘创建文件夹“weblx”作为本地站点，用来放置所有站点资源。(2)“站点”菜单“新建站点”在对话框中单击“高级”选项卡左边分类项目中选“本地信息”。(3)在“本地信息”右窗口的“站点名称”框中为站点起名为“m
4、ysite”，这个名字是Dreamweaver中使用的站点名字,是站点的逻辑名。要注意站点名称是区分大小写的。(4)在“本地根文件夹”中输入本地文件夹的地址。本例中输入e:weblx。(5)勾选“自动刷新本地文件列表”，向本地站点中拷贝文件或从本地站点中删除文件时，会自动更新Dreamweaver中的逻辑站点。(6)勾选“启用缓存”，可以加快站点中链接更新的速度。(7)在“链接相对于”框中选“文档”，让所有的链接使用相对地址，这样整体上传到服务器时链接关系不会出错。(8)单击“确定”按钮,结束Dreamweaver中的站点设置。2.2.关于站点操作的快捷菜单关于站点操作的快捷菜单 3.3.站点
5、文件的显示站点文件的显示 单击站点面板最右单击站点面板最右边的按钮，可以直观地边的按钮，可以直观地查看站点中文件之间的查看站点中文件之间的链接关系，再次单击该链接关系，再次单击该按钮取消查看。如右图按钮取消查看。如右图所示。所示。2.3 页面设计1.创建文档 方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个空白页。方法2：在工作窗口打开“文件”菜单选“新建”“类别”列表中选“基本页”“基本页”列表中选“HTML”单击“创建”，建立一个空白页。方法3：在站点中右击站点名快捷菜单中选“新建文件”给文件起名（扩展名为.htm或.html）双击新建的网页文件在工作窗口可以看到打开的网页文
6、件。2.保存文档 “文件”菜单“保存”选择与逻辑站点相关联的本地站点（如：e:weblx）为文件起名单击“保存”在Dreavweaver站点面板中单击刷新按钮。可以看到新建的文件被显示在站点面板中。3.3.页面属性页面属性“修改”菜单“页面属性”，打开“页面属性”对话框，如图所示.4.4.使用使用CSSCSS样式格式化文本样式格式化文本 CSS（Cascading Style Sheet）译为“层叠式样式表”，是一系列预制的格式规则，包括对文字和段落的修饰，用于控制网页的外观，使整个站点中的网页格式保持统一。用CSS样式可以快速实现网页格式化。CSS样式表文件是纯文本格式，对应的扩展名为.cs
7、s，可以使用任何纯文本编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则，它由两部分组成：选择器和声明。选择器为样式名称，声明用于定义样式元素。新建和使用新建和使用CSSCSS样式样式(举例说明举例说明):):1.“文本”菜单“CSS样式”“新建”。2.在“名称”文本框中输入样式名a1。3.“选择器类型”选“类”,使创建的样式应用于文本区域或文本块。4.“定义在”选仅对该文档,使定义的样式仅能应用于当前文档。5.单击“确定”按钮出现一个对话框，在对话框中定义样式的属性。6.创建样式后单击“确定”按钮。此时，在属性面板的样式框中会看到该样式的名称a1。7.选取一段文本,在属性面板的样式框
8、中单击a1,文本被格式化为所定义的样式.5.5.新建新建CSSCSS样式文件样式文件 为了便于组织和管理样式，通常把样式放在一个样式文件中。也就是说，先建样式文件，然后再建样式。步骤如下：（1）打开“新建CSS规则”对话框；（2）“定义在”选择“新建样式表文件”选项；（3）为样式确定一个类型为样式起名为b1；（4）单击“确定”按钮在打开的对话框中为样式表文件起名为ysb.css将样式表文件保存在Dreamweaver站点对应的本地文件夹中。（5）在样式面板中可以看到仅对文档的样式a1和保存在样式表文件ysb.css中的样式b1。6.6.插入图像插入图像在网页中插入图像可以按以下操作步骤进行：(
9、1)为插入的图像预留空间，通常把图像放在表格里，使图像排列整齐。(2)用图像处理软件将图像处理成预定尺寸，能有效地减少文档尺寸。(3)用下列3种方法之一将图像放入页面有指定位置。“插入”菜单“图像”在对话框中选图像文件单击“确定”按钮。单击“常用”选项卡中“图像”按钮在对话框中选图像文件“确定”。直接从站点中将图像拖到指定位置。7.7.插入插入FlashFlash对象对象(1)“插入”菜单“媒体”“Flash”。(2)直接从站点中将Flash影片文件拖入设计窗口。(3)单击“常用”卡的媒体按钮在选项中选“Flash”。如图所示:2.4 2.4 创建超链接创建超链接 1.什么是超链接 所谓超链接
10、，是一个从起始端点到目标端点的跳转，由2个端点和1个方向组成。起始端点称为“源点”，通常是文字、图像或图像的热区。目标端点又称为“锚点”，可以是任意网络资源，如：网页、图像、音乐、影片、电子邮件等。定义了超链接的文本通常显示为带有下划线的蓝色文本，浏览网页时，当鼠标指向定义了超链接的文字或图像时，鼠标指针会变为手型，此时单击鼠标会跳转到该超链接的目标端点处。2.2.文档位置和路径文档位置和路径 超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。(1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关，称这种链接路径为绝对路径，例如，一个使用http协议的绝对路径可以写为：ht
11、tp:/ 超链接的源点通常采用文本和图像，图像作为超链接源点又可以用两种方式：用整个图像作为源点或用图像热区作为源点。超链接的类型由锚点决定，主要有以下几种 (1)在本站点之间的超链接称为内部链接，源点在本站点中，锚点可以是本站点中的网页、图像、影片、声音文件等。(2)跳转到其他站点的超链接称为外部链接，锚点是其他站点的文档。(3)跳转到文档某一位置的超链接称为局部链接，锚点是当前文档或本站点其他文档的某一位置，还可以是其他站点文档的某一位置。(4)启动电子邮件程序的超链接称为Email链接，锚点是一个已经填好收件人地址的空白电子邮件。(5)没有锚点的链接称为空链接，用来激活定义了空链接的对象
12、和文本，以便为其添加动作。(6)用来链接一个JavaScript脚本或函数的链接称为脚本链接，实现相应运算效果。4.4.锚点的打开方式锚点的打开方式 属性面板“目标”框默认提供4个选项：_blank、_parent、_self和_top,作为锚点的打开方式.(1)_blank，使锚点在新窗口打开；(2)_self，使锚点在原窗口打开；(3)_parent，使锚点在上一级窗口打开；(4)_top，使锚点打开的窗口在所有窗口的最上层。如果定义了框架结构，“目标”框还会提供框架位置的名称。超链接设置完成后，链接源的文字默认颜色为蓝色并带有下划线。2.5 2.5 用表格布局页面用表格布局页面 表格是对
13、文本和图像进行布局的常用工具，在表格中可以放置多种对象，如文本、图像、表单等。1.创建表格的方法(1)单击“常用”选项卡中表格按钮。(2)“插入”菜单“表格”。2.编辑表格(1)添加行或列单击一个单元格“修改”菜单“表格”“插入行”（或“插入列”）。(2)删除行或列选定完整的行或列“编辑”菜单“清除”（或按delete键）。(3)合并单元格选取连续的单元格“修改”菜单“表格”“合并单元格”，或单击属性面板中的“合并单元格”按钮。(4)拆分单元格单击一个单元格“修改”菜单“表格”“拆分单元格”在对话框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。(5)使用剪切、复制、粘贴命令对所
14、选单元格进行操作，能保留单元格的格式设置。3.设置设置表格属性选定表格后，在表格的属性面板中设置表格属性。如图所示。4.4.用布局模式布局页面用布局模式布局页面 布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的划分。如图所示。（1）绘制布局表格和嵌套的布局表格 最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。如图所示。（2）绘制布局单元格 用布局单元格在布局表格中进行详细设计，产生组成网格的行和列。布局单元格可以占据数行数列，但不能相互重叠。如果两个布局单元格离的太近，系统会自动将两个单元格靠齐以维持不
15、重叠的结构。如图所示。用布局表格设计页面举例，如图所示。2.6 2.6 层的使用层的使用 层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。1在网页中插入层（1）“插入”栏“布局”卡当前单击“绘制层”按钮在页面中拖动鼠标画层。（2）“插入”菜单“布局对象”“层”。如图所示。2.2.层的属性面板层的属性面板 如图所示。3.3.层面板层面板在层面板中可以对层进行各种操作，如图所示。（1）双击“名称”列中层的名称输入新的层名称，可以改变层名称。层名称由字母和数字组成，以字母开头，不能用汉字。（2）勾选“防止重叠”复选框，则层与层不
16、能重叠。（3）在层的眼睛列下单击，改变该层的可见性。眼睛睁开表示该层可见，眼睛闭合表示该层不可见。默认情况下没有眼睛图标，此时层为可见的。（4）层的叠放次序是由Z列中的数字决定，数字小的层会被数字大的层覆盖，单击数字后改为其他数字，可以改变该层的显示等级。数字大小是相对的，只要分出大小来即可。4.4.层与表格相互转换层与表格相互转换 表格与层是可以相互转换的，它们之间的转换用“修改”菜单的“转换”子菜单完成。菜单如图所示。2.7 2.7 用框架布局页面用框架布局页面 框架是一种划分浏览器窗口的技术，将浏览器窗口划分成若干区域，在各区域中显示不同的HTML文档。浏览器窗口的划分信息存放在框架集中
17、，框架集是HTML文档，它定义了一组框架的布局和属性，包括框架数目、框架大小和位置，以及每个框架初始显示页面的URL。如果采用了框架技术，框架集的名称通常是主页名称，如index.html。创建框架集通常先用系统提供的预定义框架集样式，然后再对所生成的框架集样式进行修改。1 1插入预定义框架集插入预定义框架集 单击“布局”卡的“框架”按钮，弹出菜单显示所有系统提供的预定义框架集样式。菜单和“顶部和嵌套的左侧框架”如图所示。2.2.保存框架和框架集保存框架和框架集 “文件”菜单“保存全部”，开始保存框架集和框架，首先保存的是框架集，在站点文件夹中将框架集命名为主页名，然后为各框架中默认显示的网页
18、起名，正在保存的当前框架页被框架线包围。例如，框架集为“顶部和嵌套的左侧框架”，页面被划分为3个部分，要存储4个独立文件：一个是框架集文件，通常起名为“index.html”，另外三个是框架中默认显示的网页文件，按照框架所处位置分别起名为left.html、right.html、top.html。2.8 2.8 表单的使用表单的使用 表单是由文本和表单域组成的集合，用于在因特网上收集指定类型的信息，如登录注册、图书订购等。表单的工作原理很简单，访问者在被称为“表单域”的特定网页元素中输入或选择相关信息，单击“提交”按钮将信息提交给服务器。表单为网页提供交互功能，表单按照统一模式从用户收集信息，
19、然后将信息提交给服务器进行处理。能与服务器进行信息交互的网页称为动态网页，而不具备这个功能网页称为静态网页。表单对于静态网页没有实际的意义。1 1插入表单插入表单方法1：“插入”菜单“表单”，设计窗口内显示红线围成的区域，在其中插入各种表单表单控件就生成了表单。菜单如图所示。方法2：单击插入栏中的“表单”卡单击“表单”按钮，如图所示。从左到右依次为：表单按钮、文本域、隐藏域、文本区域（输入多行文本）、复选框（多个复选框并列时允许多选）、单选按钮（在一组选项中选择了某项后，会自动取消其他项的选择）、单选按钮组、列表/菜单、跳转菜单（外观与列表/菜单相同）、图像域、文件域、命令按钮、标签、字段集（
20、插入一组字段用于数据库）。2.9 2.9 使用行为添加网页效果使用行为添加网页效果 1.行为行为 行为是事件和动作的组合，是运行于浏览器的一组客户端JavaScript代码。在“行为”面板中指定动作和触发该动作的事件，就可以将行为添加到页面中。例如：当鼠标移到图像上图像发生变化，就是一个行为，其中，鼠标移动是事件，图像发生变化是动作。2.2.事件事件 事件是由浏览器生成的标识访问者所执行操作的消息。例如：当用户用鼠标单击一个超链接，浏览器会为该操作在超链接上生成一个“鼠标点击”事件。下面列出一些常用的事件。（1）onClick，用鼠标单击对象。（2）onDbClick，用鼠标双击对象。（3）onMouseOver，鼠标移到对象上。（4）onMouseOut，当鼠标移出对象（5）onLoad，载入网页。（6）onSelect，选中对象。（7）onSubmit，提交表单。如图所示。3.3.动作动作 动作是预先编写好的JavaScript程序，用来执行特定任务。例如：添加背景音乐、显示消息窗口等。打开“行为”面板单击面板上方的“+”号按钮显示显示系统提供的行为。如图所示。E N D