网页制作 第五讲 Dreamweaver基础
Dreamweaver 概述 reamweaver 是一款专门的网页设计软件，它采用所见即所得的编辑方式，利用行为、CSS、模板等技术对Web站点、网页和Web应用程序进行设计、编码和开发。无论用户是愿意手工编写HTML代码，还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为用户提供有用的工具，使用户拥有更加完美的Web创作体验。另外除了强大的网页编辑功能外，Dreamweaver 还提供了完善的站点管理功能。 利用Dreamweaver 中的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。用户可以查看所有站点元素和资源并将它们从面板直接拖到文档中，也可以在Fireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver 中，从而优化开发工作流程。
Dreamweaver工作界面 在Dreamweaver CS3工作区中，所有窗口和面板集成在一个应用程序窗口中 插入栏 菜单栏 文档窗口 面板组 属性面板
站点的管理与维护 创建站点 文件上传 本地站点 一个在自己的计算机上，存储网站所有文件的临时文件夹 远程站点 位于远程Web 服务器上，与本地站点相对应 文件上传
新建网页 (1)启动Dreamweaver 软件。选择【文件】|【新建】命令，弹出【新建文档】对话框，在对话框中选择【类别】列表框的【基本页】选项，在【基本页】列表框中选择HTML选项。 (2)单击【创建】按钮，显示创建的HTML网页编辑窗口。 (4)选择【文件】|【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文件保存路径。在【文件名】文本框中输入index。 (5)单击【保存】按钮，返回网页编辑窗口新的空白网页创建完成。
打开网页 要打开网页，在【文件】面板中展开Dreamweaver文件夹，然后双击要打开的文件，该网页将出现在新的文档窗口中；或者在本地电脑上打开网页文档所在的文件，直接双击即可打开网页文档；或者在要打开的网页上，单击鼠标右键，在弹出的快捷菜单中选择【打开】命令，即可打开网页文档。
保存网页 新建网页后，需要对网页进行保存，在网页制作过程中需要养成随时保存网页的良好习惯，防止由于计算机的故障使制作好的网页丢失，造成不必要的损失。 (1) 在Dreamweaver编辑窗口中，选择【文件】|【保存】命令，弹出【另存为】对话框，在对话框中选择保存网页的位置，在【文件名】文本框中输入要保存文档的名称index，【保存类型】设置为【*所有文档(*.htm；…)】。 (2) 单击【保存】按钮，完成网页的保存。
设置页面属性 (1)选择【修改】|【页面属性】命令，弹出【页面属性】对话框，在对话框可以设置关于整个文档的一些信息，在【外观】选项中可以设置页面的一些基本属性。在【外观】选项中可以进行如下设置。 (2)在【链接】选项中可以设置与页面链接有关的属性。在【链接】选项中可以进行如下设置。 (3)在【标题】选项页中可以设置标题字体和颜色的一些属性。在【标题】选项中可以进行如下设置。 (4)在【标题/编码】选项页中可以设置网页标题和文字编码。在【标题/编码】选项页中可以进行如下设置。 (5)在【跟踪图像】选项页中可以设置跟踪图像的属性。跟踪图像一般在设计网页时作为网页背景，用于引导网页的设计。单击文本框右边的【浏览】按钮，弹出【选择图像源文件】对话框，选择一个图像作为跟踪图像。拖动【透明度】滑块可以指定图像的透明度，透明度越高图像显示得越清晰。 (6)设置完成后，单击【确定】按钮。至此，页面属性设置完毕。
网页制作 第六讲 创建简单网页
插 入 文 本 文本是网页中不可缺少的内容之一，担负着传递信息的重要任务，虽然图像及多媒体在网页中所占的比例越来越大，但是在网站中文字的主导地位仍然是不可替代的。 插入普通文本 设置文本属性 插入特殊字符
插入普通文本 在网页中可直接输入文本信息，也可以将其他应用程序中的文本直接粘贴到网页中，此外还可以导入已有的Word文档。 插入普通文本 (1)打开网页文档。 (2)将鼠标指针置于要输入文本的位置，输入文本。 粘贴已有文本 选择性粘贴
设置文本属性 输入文本后，在文本【属性】面板中可以设置文本的各项属性，具体操作步骤如下。 (1)打开网页文档。 (2)选中要设置属性的文本，在【属性】面板中的【字体】下拉列表框中选择【编辑字体列表】选项，弹出【编辑字体列表】对话框。 (3)在对话框中的【可用字体】列表框中选择【宋体】，单击按钮，添加到【选择的字体】列表框中。 (4)单击【确定】按钮，将网页文本字体设置为【宋体】，将字体【大小】设置为14像素。 (5)单击【文本颜色】按钮，弹出颜色调色板，在调色板中将【文本颜色】设置为#FF3F8B。
插入特殊字符 特殊字符包含换行符、不换行空格、版权、注册商标等特殊字符，网页中经常用到特殊字符。下面讲述在网页中插入版权符号的方法，具体操作步骤如下。 (1)打开网页文档。 (2)将鼠标指针置于要插入特殊字符的位置，选择【插入】|【HTML】|【特殊字符】|【版权】命令，弹出Dreamweaver提示框。 (3)单击【确定】按钮，插入版权符号。 (4)保存文档，按F12键在浏览器中预览效果。
使 用 列 表 在网页中使用列表可以清晰地创建可识别的大纲和目录结构。Dreamweaver 中常用的列表分为有序列表和无序列表两种形式。 插入项目列表 插入编号列表
插入项目列表 如果项目列表之间是并列关系，则需要生成项目符号列表。插入项目列表的具体操作步骤如下。 (1)打开网页文档。 (2)将鼠标指针置于要插入项目列表的位置，选择【文本】|【列表】|【项目列表】命令，即可插入项目列表。
插入编号列表 编号列表主要用于把文本内容设置为文本列表清单。插入编号列表的具体操作步骤如下。 打开网页文档，将鼠标指针置于要插入编号列表的位置，选择【文本】|【列表】|【编号列表】命令，即可插入编号列表。
在网页中插入文件头部内容 文件头标签也就是通常说的META标签，文件头标签在网页中是看不到的，它包含在网页中<head>...</head>标签之间。所有包含在该标签之间的内容在网页中都是不可见的。 文件头标签主要包括META、关键字、说明、刷新、基础和链接等内容，下面学习常用的文件头标签的使用。 插入META信息 设置基础 插入关键字 插入说明文字 设置刷新
插入META信息 META元素用来描述网页文件自身的信息。META元素是网页中非常重要的元素，它可以记录有关当前页面的信息，也可以用来向服务器提供信息。插入META信息的具体操作步骤如下。 (1)选择【插入】|【HTML】|【文件头标签】|【META】命令，弹出META对话框。 (2)在对话框中进行相应的设置，然后单击【确定】按钮，在代码视图中就可以看到插入的META信息。 在META对话框中可以进行如下设置。 【属性】：在其下拉列表框中包括【名称】和【http-equivalent】两个选项。【名称】主要用于说明网页，对应于网页内容，以便于搜索引擎查找。 http-equivalent相当于HTTP文件头的作用，可以直接影响网页的传输。 【值】：表示META的类型。 【内容】：【值】选项所对应的具体的META中的信息
设置基础 基础就是指在文件头中添加一个脚本的链接，该网页文档中所有的链接都以此链接为基准，而其他网页中的链接与该网页中的基准链接无关。设置基础的具体操作步骤如下。 (1)选择【插入】|【HTML】|【文件头标签】|【基础】命令，弹出【基础】对话框。 (2)在对话框中进行相应的设置，然后单击【确定】按钮，完成设置。 在【基础】对话框中可以进行如下设置。 Href：填入一个地址作为超级链接的基本地址，或单击【浏览】按钮选择一个链接地址。 【目标】：在下拉列表框中可选择链接的打开方式。【空白】是以新窗口的形式打开；【父】是在父窗口中打开；【自身】是在原来的窗口中打开；【顶部】是在页面的顶部窗口打开。
插入关键字 关键字也就是与网页的主题内容相关的简短而有代表性的词汇，这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网页内容，这样浏览者只要输入很少的关键字，就能最大程度地搜索网页。插入关键字的具体操作步骤如下。 (1)选择【插入】| HTML |【文件头标签】|【关键字】命令，弹出【关键字】对话框。 (2) 在对话框中的【关键字】文本框中输入有关网页的关键字，单击【确定】按钮，即可插入关键字。
插入说明文字 关键字忌讳的是词汇的冗长，而说明则忌讳词汇过于简短。说明为设计者提供了可以详细说明网页内容的机会，而关键字是为了让搜索引擎最大程度地捕捉到网页。插入说明文字的具体操作步骤如下。 (1)选择【插入】|【HTML】|【文件头标签】|【说明】命令，弹出【说明】对话框。 (2)在对话框中的【说明】文本框中输入有关网页的说明，单击【确定】按钮即可。
设置刷新 (1)选择【插入】| HTML |【文件头标签】|【刷新】命令，弹出【刷新】对话框 (2)在对话框中进行相应的设置，然后单击【确定】按钮，完成设置。 在【刷新】对话框中可以进行如下设置。 【延迟】：网页被浏览器下载后所停留的时间，以秒为单位。 【转到URL】：通过单击右侧的【浏览】按钮来输入动作所转向的网页或文档的URL。 【刷新此文档】：重新将当前的网页从服务器载入，将更新的网页显示在浏览器中。
插入图像 一幅幅图像和一个个漂亮的按钮、标记不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见，图像在网页中的作用是非常重要的。 插入图像 设置图像属性 插入翻转图像
插入图像 在Dreamweaver中插入图像非常简单，具体操作步骤如下。 (1)打开网页文档，将鼠标指针置于要插入图像的位置。 (2)选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择图像。 (3)单击【确定】按钮，即可插入图像。
设置图像属性 【宽】和【高】：以像素为单位设定图像的宽度和高度。当用户在网页中插入图像时，Dreamweaver 自动使用图像的原始尺寸。用户可以使用单位点、英寸、毫米和厘米指定图像大小。在HTML源代码中，Dreamweaver将这些值转换为以像素为单位。 【源文件】：指定图像的具体路径。单击按钮选择源文件或直接在文本框中输入源文件路径。 【替换】：图片的注释。当用户的浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。 【编辑】：启动【外部编辑器】首选参数中指定的图像编辑器，并使用该图像编辑器打开选定的图像。编辑共包含以下六种方式。 【垂直边距】：设置图像在垂直方向与文本域或其他页面元素的间距。 【水平边距】：设置图像在水平方向与文本域或其他页面元素的间距。 【低解析度源】：指定在载入主图像之前应该载入的图像。 【边框】：设置以像素为单位的图像边框的宽度。默认为无边框。 【对齐】：设置图像和文字的对齐方式。。
插入翻转图像 翻转图像就是浏览网页时，当鼠标经过图像时，原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的：原始图像(页面显示时的图像)和鼠标经过图像(当鼠标经过时显示的图像)。 (1)打开网页文档，将鼠标指针置于要插入翻转图像的位置。 (2)选择【插入】|【图像对象】|【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。 (3)在对话框中单击【原始图像】文本框右侧的【浏览】按钮，弹出Original Images对话框，在对话框中选择图像。 (4)单击【确定】按钮，添加到【原始图像】文本框中。单击【鼠标经过图像】文本框右侧的【浏览】按钮，在弹出的Rollover Images对话框中选择图像，单击【确定】按钮，添加到【鼠标经过图像】文本框中。 (5)单击【确定】按钮，插入鼠标经过图像。选中图像，在【属性】面板中将【对齐】设置为【右对齐】。 (6)保存文档，按F12键在浏览器中预览效果
插入媒体对象 在网页中插入Flash动画、Flash按钮和Flash文本等，可以增加网页的动感效果，使网页更具吸引力，因此多媒体元素在网页中的应用越来越来广泛。 插入Flash动画 插入Flash按钮对象 插入Flash文本对象 插入Java Applet
插入Flash动画 Flash动画是在专门的Flash软件中完成的，在Dreamweaver中能将现有的Flash动画插入到文档中。 【名称】：用来标识影片的名称。 【宽和高】：以像素为单位设置影片的宽和高。 【文件】：指定Flash文件的路径。单击按钮可以浏览并选择某一文件，或直接在文本框中输入文件的路径。 【源文件】：指向Flash源文件的路径。 【循环】：选择该选项，动画将在浏览器端循环播放。 【自动播放】：选择该选项，则文档被浏览器载入时，自动播放Flash动画。 【垂直边距】和【水平边距】：指定影片上、下、左、右边距空白的像素数。
插入Flash动画 【品质】：在影片播放期间控制失真。设置越高，影片的观看效果就越好，但需要更快的处理器的支持以使影片在屏幕上能够正确显示。 【比例】：用来设定显示比例，有【默认(全部显示)】、【无边框】和【严格匹配】3个选项。 【对齐】：设置Flash影片的对齐方式。 【背景颜色】：为当前Flash动画设置背景颜色。
插入Flash按钮对象 Dreamweaver 中内置了很多Flash按钮样式，可以使用户自定义并插入已设计好的Flash按钮。 【按钮文本】：在文本框中输入显示在按钮上的文字。 【字体和大小】：设置文字的字体和字号。 【背景色】：用于设置Flash按钮的背景色。 【另存为】：设置保存该按钮的路径及文件名，必须将该按钮名保存在站点中。 【应用】：在网页中将会显示出按钮的样式。 【获取更多样式】：从Adobe网站获得更多的按钮样式。
插入Flash文本对象 在网页中插入Flash文本对象，可以利用【插入Flash文本】对话框来完成 。
插入Java Applet Java是一种允许开发并可以嵌入Web页面的编程语言。Java Applet是在Java的基础上演变而成的应用程序，它可以嵌入到网页中用来执行一定的任务。Java Applet小程序创建以后，Dreamweaver 将它插入到HTML文档中，Dreamweaver 使用Applet标签来标识对小程序文件的引用。 在Applet【属性】面板中可以进行如下设置。 【Applet名称】：指定进行脚本撰写时用来标识Applet的名称。 【宽】和【高】：以像素为单位设置Applet的宽度和高度。 【代码】：指定该Applet的Java代码的文件路径。单击按钮可以浏览并选择某一文件，或直接在文本框中输入文件的路径。 【基址】：标识包含选定Applet的文件夹。选择了一个Applet后，此文本框将被自动填充。 【对齐】：设置Applet在文档中的对齐方式。 【替换】：指定如果用户的浏览器不支持Java Applet或者已经禁用Java，将要显示的替换内容。如果输入文本，Dreamweaver将插入该文本，将其作为Applet的alt属性的值。 【垂直边距】和【水平边距】：以像素为单位指定Applet上、下、左、右边距空白的像素数。 【参数】 ：单击此按钮，将弹出一个对话框，可在其中输入传递给Applet的附加参数。
插入其他对象 在页面中添加的文本，除了可以是汉字、英文和其他语言以外，还可以输入一些无法直接输入的特殊字符，如￥、$、◎、#等。在Dreamweaver中，可以利用系统自带的符号集合，方便快捷地插入一些常用的特殊字符，如版权、货币符以及数字运算符等。 插入日期 插入水平线
插入日期 我们经常会在网页上会看到最近一次修改网页的时间，这说明网页是在不断更新的，从而吸引访问者下次再来光顾。Dreamweaver 提供了一个方便的日期对象，该对象可以以任何格式插入当前日期。
插入水平线 在HTML文档中经常用到水平线，它主要用于分隔文档的内容，使文档结构清晰明了。有时候，合理使用水平线可以获得非常好的版面效果。一篇内容复杂的文档，如果放置几条水平线，可能就会变的层次分明，便于阅读。 水平线【属性】面板中可以进行如下设置。 【宽】和【高】：以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。 【对齐】：设置水平线的对齐方式，包括默认、左对齐、居中对齐和右对齐4个选项。只有当水平线的宽度小于浏览器窗口的宽度时，对齐设置才适用。 【阴影】：设置水平线是否带阴影。
网页制作 第七讲 超链接
超链接的基本知识 超链接是从一个网页或文件到另一个网页或文件的连接，通过超链接可以将链接指向图像文件、多媒体文件，电子邮件地址可执行程序。当网站访问者单击超链接时，浏览器将根据目标的类型执行相应的操作。 要正确的创建超链接，就必须了解超链接与被链接文档之间的路径，每一个网页都有一个惟一的地址，称为统一资源定位符(URL)。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整URL，而是指定一个相对路径(当前文档或站点根文件夹的路径)。 绝对路径 相对路径 根目录相对路径
绝对路径 绝对路径是包括服务器规范在内的完全路径。通过绝对路径，不管源文件在什么位置，都可以非常精确地将其找到，除非源文件的位置发生变化，否则链接不会失败。 采用绝对路径的好处是，它同链接的源文件无关。只要网站的地址不变，则无论网页文档在站点中被如何移动，都可以正常实现链接而不会发生错误。另外，如果希望将超链接指向到其他站点上的文件，就必须使用绝对路径。 采用绝对路径的缺点是链接不利于测试，如果在站点中使用绝对地址，要想测试链接是否有效，就必须在Internet服务器端对链接进行测试。绝对路径另一个缺点是不利于站点的移植，例如一个重要的站点，通常在几个地址上创建镜像，要将网页文档在这些镜像站点之间移植，就必须对站点中每一个使用绝对路径的链接进行修改。
相对路径 相对路径对于大多数的本地链接来说，是最适用的路径。文档相对路径还可用来链接到其他的文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。
根目录相对路径 为了避免绝对路径的缺陷，对于站点中的链接来说，使用相对链接就是一个很好的方法。 相对链接可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相联。如果链接中源端点和目标端点位于同一个目录下，则在链接路径中只需要指明目标端点的文档名称就可以。如果链接指向的文档位于当前目录的子级目录中，则可以直接输入目录的名称和目录的位置。如果链接指向的文档没有位于当前目录的子级目录中，则可以利用“..”符号来表示当前位置的父级目录，利用多个“..”符号表示更高的父级目录，从而构建出目录的相对位置。 使用相对链接的好处在于，如果站点的结构和文档的固定位置不变，那么链接就不会出错，可以将整个网站移植到另一个地址的网络服务器中，而不需要修改文档中的链接路径。
链接到文件 用Dreamweaver 创建链接非常简单方便，只要选中要设置成链接的文字或图像，然后在【属性】面板中的【链接】文本框中输入相应的URL路径就可以创建链接。
使用属性面板定义超链接 在文档中选择文本或图像，然后在【属性】面板的【链接】文本框中输入链接的文件名，在【目标】下拉列表框中选择网页打开的方式。
创建下载文件的超链接 如果要在网站中提供资料下载，就需要为文件提供下载链接。如果超链接指向的不是一个网页文件，而是其他文件例如zip、mp3、exe文件等，单击链接的时候就会下载文件。
创建电子邮件超链接 电子邮件地址作为超链接目标与其他链接目标不同。当用户在网页中单击电子邮件地址的超链接时，将会打开操作系统中默认邮件管理器的新邮件窗口，提示用户输入信息并将该信息传送到指定的邮件地址。
创建图像热点链接 当需要对一张图像的特定部位进行链接时就需要用到热点链接。当用户单击某个热点时，会链接到相应的网页，矩形热点主要针对图像轮廊较规则，且呈方形的图像；椭圆形热点主要针对圆形规则的轮廊；不规则多边形热点则针对复杂的轮廊外形。
创建锚点链接 使用锚点链接可以链接到网页中不同的位置。
超级链接的目标 -blank：在新的未命名浏览器窗口中打开链接文件。 -parent：在父框架组或包含该链接的框架窗口中打开链接文件。 -self：在链接所在的框架或窗口中打开链接文件，本选项是默认的，通常无需指定。 -top：将链接的文件在整个浏览器窗口中打开。
链接检查与测试 一般网站中有很多链接在网站发布前需要测试，如果对每个链接都进行手工测试，则会浪费很多时间，使用Dreamweaver 可以对整个站点的链接进行快速检查 . (1) 选择【站点】|【检查站点范围的链接】命令，打开【链接检查器】面板。 (2) 单击面板上的【断掉的链接】列表框中的文档，在其后面会出现一个【选择文件】按钮，单击【选择文件】按钮，即可自动修复断掉的链接。
网页制作 第八讲 使用表格
插 入 表 格 表格在网页中占有重要的地位，它不但能够记载表单式的资料、规范各种数据、输入列表式的文字，而且利用它还可以排列文字和图像。只需通过设置表格的宽度和高度，以及彼此之间的比例大小等，就可以把不同的网页元素分别放置在不同的单元格中。 表格的基本概念 插入表格
表格的基本概念 表格的各部分名称 一张表格横排叫行，纵排叫列，行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫做边距。单元格和单元格之间的距离叫做间距。整张表格的边缘叫做边框。 选中整个表格，就出现表格的【属性】面板，可以在【属性】面板中输入参数。 选中单元格后【属性】面板就发生相应变化，选择行或者列都属于选中单元格。
插入表格 插入表格 (1) 打开网页文档，将鼠标指针置于页面中要插入表格的位置，选择【插入】|【表格】命令，弹出【表格】对话框。 (2) 在对话框中输入【行数】、【列数】、【表格宽度】、【边框粗细】、【单元格边距】和【单元格间距】等，单击【确定】按钮，即可插入相应的表格。 在创建表格时应注意以下几个问题。 整个表格不要都套在一个表格里，尽量拆分成多个表格。 表格的嵌套层次尽量要少，最好嵌套表格不超过3层。 表格的结构尽量整齐。
设置表格属性 在Dreamweaver 中为了使创建的表格更加美观、醒目，需要对表格的属性(如表格的颜色、单元格的背景图像、背景颜色等)进行设置。 设置表格属性 设置单元格属性
设置表格属性 【对齐】：设置表格的对齐方式，其下拉列表中包含四个选项，分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。 【背景颜色】：设置表格的背景颜色。 【背景图像】：设置表格的背景图像。 【边框颜色】：设置表格的边框颜色。 【填充】：设置单元格内容和单元格边界之间的像素数。 【间距】：设置相邻的单元格之间的像素数。 【边框】：设置表格边框的宽度。
设置单元格属性 在单元格【属性】面板中可以进行如下设置。 【水平】：设置单元格中对象水平方向的对齐方式，其下拉列表框中包含四个选项，分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。 【垂直】：设置单元格中对象垂直方向的对齐方式，其下拉列表框中包含五个选项，分别是【默认】、【顶端】、【居中】、【底部】和【基线】。 【宽与高】：设置单元格的宽与高。 【不换行】：表示单元格的宽度将随文字长度的不断增加而加长。 【标题】：将当前单元格设置为标题行。 【背景】：设置表格的背景图像。 【边框】：设置表格边框的颜色。
添加行或列 在制作网页文档时，在特殊情况下需要对表格添加行或列。添加行、列的具体操作步骤如下。 (1) 在已创建的表格中插入行，要先将鼠标指针置于要插入行的单元格中，选择【修改】|【表格】|【插入行】命令，则在鼠标指针所在单元格的上面增加了一行。 (2) 插入列，要先将鼠标指针置于要插入列的单元格中，选择【修改】|【表格】|【插入列】命令，则在鼠标指针所在单元格的左侧增加了一列。 在【插入行或列】对话框中可以进行如下设置。 【插入】：包含【行】和【列】两个单选按钮，一次只能选择其中一个来插入行或者列。该选项组的初始状态选择的是【行】选项，所以下面的选项就是【行数】。如果选择的是【列】选项，那么下面的选项就变成了【列数】，在【列数】文本框内可以直接输入要插入的列数。 【位置】：包含【所选之上】和【所选之下】两个单选按钮。如果【插入】选项选择的是【列】选项，那么【位置】选项后面的两个单选按钮就会变成【在当前列之前】和【在当前列之后】。
删除行或列 将鼠标指针置于要删除的行中，选择【修改】|【表格】|【删除行】命令，即可删除行。将鼠标指针置于要删除的列中，选择【修改】|【表格】|【删除列】命令，即可删除列。 将鼠标指针置于要删除的表格中，单击鼠标右键，在弹出的快捷菜单中选择【删除行或列】命令，也可以删除相应的行或列。
合并单元格 合并单元格就是将选中的多个连续单元格合并成一个单元格。要合并单元格，首先将要合并的单元格选中，然后选择【修改】|【表格】|【合并单元格】命令，即可将多个单元格合并成一个单元格。 合并单元格还有以下两种方法。 选中要合并的单元格，在【属性】面板中单击【合并所选单元格，使用跨度】按钮，即可合并单元格。 选中要合并的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】|【合并单元格】命令，即可合并单元格。
拆分单元格 在网页中设计中有时需要对表格进行拆分，拆分单元格的具体操作步骤如下。 (1) 将鼠标指针置于要拆分的单元格中，选择【修改】|【表格】|【拆分单元格】命令，弹出【拆分单元格】对话框。 (2) 在对话框中将【把单元格拆分】设置为【列】，【列数】设置为3，单击【确定】按钮，即可拆分单元格。
用表格排列数据 在实际设计中，有时需要把其他应用程序(如Excel、Access)建立的表格数据导入到网页中，在Dreamweaver中，利用【导入表格式数据】命令可以很容易的实现这一导入功能，表格排序功能主要针对具有格式数据的表格而言，它根据表格列表中的数据来排序。
导入表格式数据 在导入表格式数据前，首先要将表格数据文件转换成.txt(文本文件)格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等。导入到Dreamweaver中的数据不会出现分隔符，且会自动生成表格。 在【导入表格式数据】指定对话框中可以进行如下设置。 【数据文件】：要导入的数据文件的保存路径和文件名。 【定界符】：选择定界符，使之与导入的数据文件格式匹配。有Tab、【逗点】、【分号】、【引号】和【其他】5个选项。 【表格宽度】：设置导入表格的宽度。 【匹配内容】：勾选此单选按钮，创建一个根据最长文件进行调整的表格。 【设置为】：勾选此单选按钮，在后面的文本框中输入表格的宽度并设置其单位。 【单元格边距】：设置单元格内容和单元格边界之间的像素数。 【单元格间距】：设置相邻的表格单元格间的像素数。 【格式化首行】：设置首行标题的格式。 【边框】：以像素为单位设置表格边框的宽度。
网页制作 第九讲 网页的布局
网页布局方式 网页布局的作用 利用表格进行网页布局 利用框架进行网页布局 利用层进行网页布局
利用表格进行网页布局 布局单元格和表格 嵌套表格 清除单元格高度
框架网页的创建 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成2个框架，它实际上包含的却是3个独立的文件：一个框架集文件和两个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。
创建框架 框架网页有两个主要部分Frameset（框架集）和Frames（框架）组成。框架集是在一个文档内定义一组框架结构的HTML网页，框架是每个单独的网页文档。创建框架集的具体操作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框，如图7.1所示。 (2) 在对话框中选择【常规】选项卡中的【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，如图所示。 (3) 单击【创建】按钮，创建一框架网页。
保存框架 当编辑完框架及框架文件后，必须对框架及框架文件进行保存，在Dreamweaver 中保存框架及框架文件，如果像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以保存框架的方法是非常重要的。 (1) 选择【文件】|【保存全部】命令。 (2) 弹出【另存为】对话框，此时整个框架边框会出现一个阴影框，因为阴影出现在整个框架集内侧，所以询问的是框架集的名称，在【文件名】文本框中输入index.html。 (3) 单击【保存】按钮，此时右边框架内出现虚线，提示保存右边的框架，在【文件名】文本框中输入right.html。 (4) 单击【保存】按钮，此时左边框架内出现虚线，提示保存左边的框架，在【文件名】文本框中输入left.html。 (5) 单击【保存】按钮，此时顶部框架内出现虚线，提示保存顶部的框架，在【文件名】文本框中输入top.html。 (6) 单击【保存】按钮，整个框架保存完毕。
设置框架属性 在对框架进行设置的时候，首先要选取所要进行属性设置的框架集，选中框架后，在【属性】面板中将显示框架的相关参数。 在框架【属性】面板中的可以进行如下设置。 【框架名称】：指定框架名称用来作为链接指向的目标。 【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮，查找并选取文件。也可以通过将鼠标指针置于框架内，选择【文件】|【在框架中打开】命令打开文件。 【滚动】：设置框架内的内容溢出的时候是否出现滚动条。 【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。 【边框】：用来控制当前框架边框。有【是】、【否】、和【默认】三个选项。 【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。 【边界宽度】：设置以像素为单位的框架边框和内容之间左右边距。 【边界高度】：设置以像素为单位的框架边框和内容之间上下边距。
在框架中输入内容 框架创建好以后，就可以添加内容了，每个框架的内部内容就是一个文档，可以直接往里边添加内容，也可以在框架内打开已经存在的文档。在框架中输入内容的具体操作步骤如下。 (1) 打开的框架文档。 (2) 将鼠标指针置于顶部框架中，选择【修改】|【页面属性】命令，弹出【页面属性】对话框，在对话框中将【左边距】、【上边距】设置为0。 (3) 单击【确定】按钮，在顶部框架中输入内容。 (4) 同以上步骤，分别在左侧和右侧的框架中输入内容。 (5) 保存文档，按F12键在浏览器中预览效果。
创建和设置层 可以通过直接插入或绘制的方法来创建层，创建层后，就可以通过【层】面板来设置层的属性。 使用Dreamweaver 可以很方便地在网页上创建层，并精确地定位层的位置。创建层的具体操作步骤如下。 (1) 打开网页文档。 (2) 将鼠标指针置于页面中，选择【插入】|【布局对象】|【层】命令。 (3) 选择命令后，即可插入层。
嵌套层 在Dreamweaver 中，一个层里还可以包含另外一个层，也就是嵌套层，创建嵌套层的具体操作步骤如下。 (1) 将鼠标指针置于文档窗口的现有层中。 (2) 选择【插入】|【布局对象】|【层】命令，插入层。 (3) 嵌套层创建完毕后的效果如图所示。
层的【属性】面板 层【属性】面板中可以进行如下设置。 【层编号】：设置层的名称，用于识别不同的层。 【左】：设置层左边界与浏览器窗口左边界的距离。 【上】：设置层上边界与浏览器窗口上边界的距离。 【宽】：设置层的宽。 【高】：设置层的高。 【Z轴】：设置层的Z轴顺序。 【背景图像】：设置层的背景图像。 【可见性】：设置层的显示状态，包括default、inherit、visible和hidden四个选项。 【背景颜色】：设置层的背景颜色。 【剪辑】：用来指定层的哪一部分可见，输入的数值是距离层的四个边界的距离。 【溢出】：如果层里面的文字太多，或图像太大，或层的较大不足以全部显示的时候，有以下选择： visible：溢出部分依然显示。 hidden：溢出部分隐藏。 scrool：不管是否溢出，强制显示滚动条。 auto：有溢出时将自动出现滚动条。
【层】面板 在Dreamweaver中有一个【层】面板，在该面板中可以设置层的属性。选择【窗口】|【层】命令，打开如图所示的【层】面板。 【层】面板分三栏，最左侧的是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层；中间显示的是层的名称；最右侧是层在Z轴排列的情况。
层的基本操作 利用层可以精确地定位网页元素。下面讲述如何选择层、移动层、对齐层、改变层大小等基本操作。 选择层 调整层的大小 移动层 对齐层
选择层 常见的选择层有如下两种操作方法。 直接在层的边框上单击，选定的层周围出现八个控制点(小黑色方块) 。 切换到【层】面板，在面板中单击层的名称，即可选中层。
调整层的大小 在文档窗口中插入层后，在操作过程中常常会根据需要，对层的大小进行适当的调整，调整层大小的具体操作步骤如下。 (1) 选择需要调整大小的层，在【属性】面板中改变层【宽】和【高】的大小。 (2) 将鼠标指针移动到层边框上的小黑方框上，当鼠标指针变为垂直双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整层的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右拖动鼠标，则可以调整层的宽度；当鼠标指针变为斜向双箭头时，按住鼠标左键斜向上或斜向下拖动鼠标，可以同时调整层的高度和宽度。
移动层 移动层的具体操作步骤如下。 (1) 选中要移动的层，当鼠标靠近层的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，层将跟着鼠标的移动而发生改变。 (2) 选中移动的层，使用键盘上的四个方向键，一次可以移动一个像素。 (3)选中移动的层，按住Shift键，然后按键盘上的四个方向键中的任意一个可以移动10个像素。
对齐层 当在文档窗口中有多个层时，可以使用【修改】|【排列顺序】命令使多个层对齐。具体操作步骤如下。 (1) 打开网页文档，选择【插入】|【布局对象】|【层】命令。 (2) 在网页中插入层按照步骤的方法在网页中插入另外两个层，并调整层的大小和位置。 (3) 选中所有层，选择【修改】|【排列顺序】|【左对齐】命令。 (4) 选择【左对齐】命令后，层将最后选中的层的底部为准，对齐排列。
层和表格间的相互转换 虽然通过层定位网页元素比表格方便很多，但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，Dreamweaver提供了层和表格相互转换功能，可以最大程度的方便网页设计，可以兼顾低版本浏览器能够访问网页。 层转换成表格 表格转换成层
层转换成表格 在【转换层为表格】对话框中可以进行如下设置。 【最精确】：以精确方式转换，为每一层建立一个单元格，并且创建所有的附加单元格，以保证各单元格之间的距离。 【最小】：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。 【使用透明GIF】：用来定义是否使用透明GIF图像。 【置于页面中央】：选择该选项，转换的表格将在页面中居中对齐，否则将左对齐。 【防止层重叠】：该选项一般要选择，否则如果有层发生重叠，将无法进行转换工作。 【显示层面】：在文档窗口中显示【层】面板。 【显示网格】：在文档窗口中显示网格。 【靠齐到网格】：在文档中将文字与网格对应。
表格转换成层 在Dreamweaver 中可以把表格转换为层。如果复杂的布局，则有时表格的形状不能转换为希望的形状，并且层重叠时也不能转换为表格。 在【转换表格为层】对话框中可以进行如下设置。 【防止层重叠】：选中此复选框可以在建立层、移动层和调整层大小时防止层重叠。 【显示层面板】：选中此复选框，在转换完成时显示【层】面板。 【显示网络】：以网格为参照物定位层。 【靠齐到网格】：将层与网络内某个角靠齐以定位层。
网页制作 第十讲 CSS样式
关于CSS样式表 CSS允许控制HTML无法独自控制的许多属性，如可以为选定的文本指定不同的字体、大小和单位(像素、磅值等)，通过使用CSS以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式显示页面外观。 除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。如设置块级元素的边距、边框以及其他文本周围的浮动文本等。
使用【CSS样式】面板 在Dreamweaver中，选择【窗口】|【CSS样式】命令，打开【CSS样式】面板，或按Shift＋F11组合键，打开【CSS样式】面板。 在【CSS样式】面板的底部排列有几个按钮，分别如下。 【附加样式表】：在HTML文档中链接一个外部CSS文件。 【新建CSS样式】：创建新的CSS样式文件。 【编辑样式表】：编辑原有的CSS规则。 【删除CSS样式】：删除选中已有的CSS规则
CSS样式规则 CSS规则 CSS样式的定义 CSS样式的定义如下： 选择符{属性1：值1；属性2：值2} 虽然CSS在网页里是和HTML密不可分的，但它并不属于HTML。它的使用可以扩展HTML的功能，使得可以重新定义HTML元素的显示方式。 CSS样式的定义 CSS样式的定义如下： 选择符{属性1：值1；属性2：值2} 以下一段代码定义了H1和H2的颜色和字体大小属性。 1 <Head> 2 <Title>CSS例子</title> 3 <Style type="text/css"> 4 H1{font-size: 16; color: black} 5 H2{font-size:14; color:yellow} 6 </style> 7 </Head>
添加CSS样式表的方法 链接外部的CSS 添加在<Head>......</Head>中 直接在标签内定义 这个方法适用于单个网页。 直接在标签内定义 这个方法适用于指定网页内的一段文字。
创建新的CSS样式 在Dreamweaver中，可以创建自己的CSS样式来自动格式化HTML标签和网页文字。 【名称】：设置新建的样式表的名称。 【选择器类型】：定义样式类型，并将其运用到特定的部分。选择【类】，要在【名称】的下拉列表框中输入自定义样式的名称，其名称可以是字母和数字的组合，如果没有输入符号“.”，Dreamweaver 会自动输入。选择【标签】，需要在【标签】后的下拉列表框中选择一个HTML标签，也可以直接在【标签】后的下拉列表框中输入这个标签。选择【高级】，需要在【选择器】后的下拉列表中选择一个选择器的类型，也可以在【选择器】后的下拉列表框中输入一个选择器类型。 【定义在】：用来设置新建的CSS语句的位置。CSS样式按照使用方法可以分为内部样式和外部样式，如果想把CSS规则反应用于当前网页内部，勾选【仅对该文档】单选按钮。
应用自定义CSS样式 应用自定义CSS样式的具体操作步骤如下。 (1) 打开网页文档。 (4) 弹出【新建CSS规则】对话框，在对话框中【选择器类型】设置为【类】，【名称】文本框中输入.zt，【定义在】设置为【仅对该文档】。 (5) 单击【确定】按钮，弹出【.zt的CSS规则定义】对话框，在对话框中将【字体】设置为【宋体】，【大小】设置为12像素，【样式】设置为【正常】，【颜色】设置为＃000000。 (6) 单击【确定】按钮，在【CSS样式】面板中可以看到新建的样式。 (7) 选中需要套用样式的文字，然后在样式面板的新建CCS规则名上单击鼠标的右键，在弹出的菜单中选择【套用】命令。 (8) 选择命令后，文字自动套用样式。
创建和链接到外部CSS样式表 1. 创建外部CCS样式表 2. 链接外部样式表 (1) 选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。 (2) 在【CSS样式】面板中单击【新建CSS规则】按钮，弹出【新建CSS规则】对话框，在对话框中【选择器类型】设置为【类】，【名称】文本框中输入.ws，【定义在】设置为【新建样式表文件】。 (3) 单击【确定】按钮，弹出【保存样式表文件为】对话框，在【文件名】文本框中输入样式表文件的名称，并在【相对于】下拉表框中选择【文档】选项。 (4) 单击【保存】按钮，弹出对话框，在对话框中进行相应的格式设置。 (5) 单击【确定】按钮，在【CSS样式】面板中可以看到新建的样式。 2. 链接外部样式表 外部样式表是包含了样式格式信息的一个单独的文件，编辑外部CSS样式表时，链接到该CSS样式表的所有文档会全部更新以反映所做的样式编辑，链接外部样式表的具体操作步骤如下。 (1) 在【CSS样式】面板中单击【附加样式表】按钮，弹出【链接外部样式表】对话框。 (2) 单击对话框中的【文件URL】文本框后面的【浏览】按钮，弹出【选择样式表文件】对话框，在对话框中选择要链接的CSS样式文件，勾选【链接】单选按钮后，单击【确定】按钮即可。
定义样式表属性 控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性，在Dreamweaver 中可以对所有的CSS属性进行设置。CSS属性被分为八大类，分别是：类型、背景、区块、方框、边框、列表、定位和扩展，下面分别进行介绍。 设置CSS样式的类型 设置CSS样式的背景 设置CSS样式的区块 设置CSS样式的方框 设置CSS样式的边框 设置CSS样式的列表 设置CSS样式的定位 设置CSS样式的扩展
设置CSS样式的类型 使用【CSS样式定义】对话框中的【类型】选项可以定义CSS样式的基本字体。 在CSS【类型】选项中可以进行如下设置。 【字体】：为样式设置字体。 【大小】：定义文本大小。可以通过选择数字和度量单位选择特定的大小。 【样式】：将【正常】、【斜体】或【偏斜体】指定为字体样式，默认设置是【正常】。 【行高】：设置文本所在行的高度，该设置传统上称为“前导”，输入一个确切的值并选择一种度量单位即可。 【修饰】：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认修饰设置是【无】，链接的默认设置是【下划线】，将链接设置设为【无】时，可以通过定义一个特殊的类来删除链接中的下划线。 【粗细】：对字体应用特定或相对的粗体量，【正常】等于400；【粗体】等于700。 【变体】：设置文本为正常或者为小型大写字母，Dreamweaver 不在文档窗口中显示该属性。 【大小写】：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。 【颜色】：设置文本颜色。
设置CSS样式的背景 在【分类】列表框中选择【背景】选项，背景属性的功能主要是在网页的元素后面加入固定的背景颜色或图像。 【背景颜色】：设置元素的背景颜色。 【背景图像】：设置元素的背景图像。 【重复】：确定是否以及如何重复背景图像，包含四个选项。【不重复】表示在元素开始处显示一次图像；【重复】表示在元素的后面水平和垂直平铺图像；【横向重复】和【纵向重复】分别表示显示图像的水平带区和垂直带区，图像被剪辑以适合元素的边界。 【附件】：设置背景图像是固定在它的原始位置还是随内容一起滚动。 【水平位置】和【垂直位置】：指定背景图像相对于元素的初始位置，这可以用于将背景图像与页面中心垂直和水平对齐，如果附件属性为【固定】，则位置相对于【文档】窗口而不是元素。
设置CSS样式的区块 在【分类】列表框中选择【区块】选项，区块属性可以定义区块内字体的间距和对齐设置。 【单词间距】：设置单词的间距，若要设置特定的值，在下拉列表框中选择【值】，或输入一个数值，在第二个下拉列表中，选择度量单位。 【字母间距】：增加或减小字母或字符的间距，若要减少字符间距，指定一个负值。 【垂直对齐】：指定所选元素的垂直对齐方式，仅当应用于<img>标签时，Dreamweaver 才在文档窗口中显示该属性。 【文本对齐】：设置元素中的文本对齐方式。 【文本缩进】：指定第一行文本缩进的程度，可以使用负值创建凸出，但其缩进显示取决于浏览器，仅当标签应用于块级元素时，Dreamweaver 才在文档窗口中显示该属性。 【空格】：确定如何处理元素中的空白，从三个选项中选择。【正常】表示收缩空白；【保留】表示元素的处理方式与文本被括在pre标签中一样(即保留所有空白，包括空格、制表符和回车符)。【不换行】表示仅当遇到br标签时文本才换行，Dreamweaver不在文档窗口中显示该属性。 【显示】：指定是否以及如何显示元素。
设置CSS样式的方框 在【分类】列表框中选择【方框】选项，方框属性可对控制元素在页面放置方式的标签和属性进行设置。 【宽和高】：设置元素的宽度和高度。 【浮动】：设置未选择的元素在哪个边围绕已选元素浮动。 【清除】：定义不允许层的边。如果清除边上出现层，则带清除设置的元素移到该层的下方。 【填充】：指定元素内容与元素边框(如果没有边框，则为边距)之间的间距，取消选择【全部相同】选项可设置元素各个边的填充；【全部相同】则将相同的填充属性设置应用到元素的上、下、左或右侧。 【边界】：指定一个元素的边框(如果没有边框，则为填充)与另一个元素之间的间距。仅当应用于块级元素(段落、标题、列表等)时，Dreamweaver 才在【文档】窗口中显示该属性，取消选择【全部相同】可设置元素各个边的边距；【全部相同】将相同的边距属性设置应用到元素的上、下、左或右侧。
设置CSS样式的边框 在【分类】列表框中选择【边框】选项，边框属性可以定义元素周围边框的设置。 在CSS【边框】选项中可以进行如下设置。 【样式】：设置边框的样式外观，样式的显示方式取决于浏览器，Dreamweaver 在【文档】窗口中将所有样式呈现为实线，取消选择【全部相同】可设置元素各个边的边框样式。 【全部相同】：将相同的边框样式属性设置应用到元素的上、下、左或右侧。 【宽度】：设置元素边框的粗细，取消选择【全部相同】可设置元素各个边的边框宽度。 【全部相同】：将相同的边框宽度设置应用到元素的上、下、左或右侧。 【颜色】：设置边框的颜色，可以分别设置每个边的颜色，取消选择【全部相同】可设置元素各个边的边框颜色。 【全部相同】：将相同的边框颜色设置应用到元素的上、下、左或右侧。
设置CSS样式的列表 在【分类】列表框中选择【列表】选项，列表属性为列表标签定义列表设置。 在CSS【列表】中可以进行如下设置。 【类型】：设置项目符号或编号的外观类型。 【项目符号图像】：可以为项目符号指定自定义图像。 【位置】：设置列表项文本是否换行和缩进(外部)以及文本是否换行到左边距(内部)。
设置CSS样式的定位 在【分类】列表框中选择【定位】选项,在CSS【定位】中可以进行如下设置。 【类型】：确定浏览器应如何来定位层，包含如下选项。 【绝对】：使用【定位】框中输入的坐标(相对于页面左上角)来定位层。 【相对】：使用【定位】框中输入的坐标来定位层。 【静态】：将层放在它在文本中的位置。 【显示】：确定层的初始显示条件。如果不指定层的可见性属性，则默认情况下大多数浏览器都继承父级的值，选择以下可见性选项之一。 【继承】：继承层父级的可见性属性，如果层没有父级，则它将是可见的。 【可见】：显示该层的内容，而不管父级的值是什么。 【隐藏】：隐藏这些层的内容，而不管父级的值是什么。 【Z轴】：确定层的堆叠顺序，编号较高的层显示在编号较低的层的上面。 【溢出】(仅限于CSS层)：确定在层的内容超出它的大小时将发生的情况，这些属性控制如何处理此溢出，如下所示。 【可见】：增加层的大小，使它的所有内容均可见，层向右下方扩展。 【隐藏】：保持层的大小并剪辑任何溢出的内容，不提供任何滚动条。 【滚动】：在层中添加滚动条，不论内容是否溢出。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。 【自动】：使滚动条仅在层的内容溢出它的边界时才出现。 【置入】：指定层的位置和大小，如果层的内容溢出指定的大小，则大小值被覆盖。 【裁切】：定义层的可见部分，如果指定了剪辑区域，可以通过脚本语言访问它，并设置属性以创建类似擦除的特殊效果，通过使用【改变属性】行为可以设置这些擦除效果。
设置CSS样式的扩展 在【分类】列表框中选择【扩展】选项，扩展属性包含两部分。 【分页】：用来分页。 其中的两个属性作用是为打印的页面设置分页符。 【之前】：属性名为page-break-before。 【之后】：属性名为page-break-after。 视觉效果：用来设置光标和滤镜等特殊效果。 【鼠标指针】：指针位于样式所控制的对象上时改变指针图像，选择在弹出式菜单中设置的选项。 【过滤器】：对样式所控制的对象应用特殊效果。
网页制作 第十一讲 创建表单网页
初识表单 表单增加了网页的交互性，还可以用来收集浏览者的信息。浏览者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮向网站提交这些信息。网页上的表单一般包括两个部分：表单对象和应用程序。 表单处理信息的过程大致为：浏览者将信息输入到Web浏览器中显示的表单中，通过提交按钮将这些信息发送到服务器，服务器端脚本或应用程序对这些信息进行处理后，将请求信息或基于该表单内容执行一些操作来回复浏览者(或客户端)。用于处理表单数据的常用服务器端技术包括Active Server Pages(ASP)和PHP等。 使用Dreamweaver可以向表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。
插入表单对象 在 Dreamweaver 中有专门的【表单】插入栏，在【表单】插入栏中共有十四个表单对象，使用这些对象可以建立各式各样的表单。 创建表单 插入单行文本域 插入多行文本域 插入密码域 插入复选框 插入单选按钮 插入列表和菜单 插入表单按钮
创建表单 使用表单必须具备两个条件：一个是建立含有表单元素的网页文档，另一个是具备服务器端的表单处理应用程序或者客户端的脚本程序，它能够处理用户输入到表单的信息。 表单的【属性】面板中可以设置以下属性。 【表单名称】：在文本框中输入标识该表单的唯一名称。 【动作】：指定处理该表单的动态页或脚本的路径。可以在【动作】文本框中直接输入路径，也可以单击按钮定位应用程序。 【方法】：选择将表单数据传输到服务器的传送方式，包括三个选项。 POST：用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输入的方式读取表单内的数据。 GET：将表单内的数据附加到URL后传送给服务器，服务器以读取环境变量的方式读取表单内的数据。 默认：用浏览器默认的方式，一般默认为GET。 【目标】：使用【目标】下拉列表指定一个窗口，这个窗口中显示应用程序或者脚本程序，将表单处理完成后的结果。 【MIME类型】：设置类型。
插入单行文本域 文本域能接受任何类型的字母、数字输入。文本可以单行或多行显示，也能以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到。 在文本域【属性】面板中可以进行如下设置。 【文本域】：在文本框中为该文本域指定一个名称。每个文本域都必须有一个唯一名称，文本域名称不能包含空格或特殊字符，可以使用字母、数字、字符或下划线的任意组合，所选名称最好与用户输入的信息要有所联系。 【字符宽度】：设置文本域一次最多可显示的字符数。 【最多字符数】：设置单行文本域中最多可输入的字符数，使用【最多字符数】将邮政编码限制为6位数，将密码限制为10个字符等。如果将【最多字符数】文本框保留为空白，则用户可以输入任意数量的文本，如果文本超过域的字符宽度，文本将滚动显示，如果用户输入超过最大字符数，则表单提出警告。 【行数】：设置多行文本域的行数。 【单行】：选择【单行】将产生一个type属性设置为text的input标签。【字符宽度】设置映射为size属性，【最多字符数】设置映射为maxlength属性。 【密码】：选择【密码】将产生一个type属性设置为password的input标签。【字符宽度】和【最多字符数】设置映射的属性与在单行文本域中的属性相同。当用户在密码文本域中输入内容时，输入内容显示为项目符号或星号，以保护它不被其他人看到。 【多行】：选择【多行】将产生一个textarea标签。 【初始值】：指定在首次载入表单时文本域中显示的值，例如，通过包含说明或示例值，可以提示用户在域中输入信息。
插入多行文本域 插入多行文本域同单行文本域类似，只不过多行文本域允许输入更多的文本，插入多行文本域的具体操作步骤如下。 (1) 将鼠标指针置于表格的第2行第1列单元格中，输入文字“订货内容：”，将鼠标指针置于第2列单元格中，选择【插入】|【表单】|【文本区域】命令，插入文本区域。 (2) 在【属性】面板中将【字符宽度】设置为40，【行数】设置为5，【类型】设置为【多行】。
插入密码域 插入密码域同文本域类似，密码域只不过把【类型】设置为【密码】，具体操作步骤如下。 (1) 将鼠标指针置于第3行第1列单元格中，输入文字“密码:”，将鼠标指针置于第3行第2列单元格中，选择【插入】|【表单】|【密码域】命令。 (2) 在【属性】面板中将【字符宽度】设置为15，【类型】设置为【密码】即可。
插入复选框 复选框允许在一组选项中选择多个选项，插入复选框的具体操作步骤如下。 (1) 将鼠标指针置于第4行第1列单元格中，输入文字“经营范围：”，在第 2列单元格中，选择【插入】|【表单】|【复选框】命令，插入复选框。 (2) 选中复选框，在【属性】面板中将【初始状态】设置为【未选中】。 在复选框【属性】面板中可以进行如下设置。 【复选框名称】：设置复选框的名称。 【选定值】：设置复选框被选中时的取值。 【初始状态】：用来设置复选框的初始状态是【已勾选】还是【未选中】。
插入单选按钮 单选按钮用于标记一个选项是否被选中，但用户只能从每组单选按钮的多个选项中选择一个。 (1) 将鼠标指针置于第5行第1列单元格中，输入文字“类型：”，在第2列单元格中，选择【插入】|【表单】|【单选按钮】命令，插入单选按钮。 (2) 选中单选按钮，在【属性】面板中将【初始状态】设置为【未选中】。
插入列表和菜单 列表/菜单就是可以在网页中以菜单的形式为用户提供一系列的预设选项。插入列表/菜单的具体操作步骤如下。 (1) 将鼠标指针置于第6行第1列单元格中，输入文字“地区：”，将鼠标指针置于第6行第2列单元格中，选择【插入】【表单】|【列表/菜单】命令，插入列表/菜单。 (2) 选中列表/菜单，在【属性】面板中将【类型】设置为【菜单】，单击【列表值】按钮，弹出【列表值】对话框，在对话框中单击按钮，添加项目标签内容。 (3) 单击【确定】按钮，将项目标签内容添加到【属性】面板中的【初始化时选定】文本框中。
插入表单按钮 在表单中，按钮是将表单数据传送给服务器的唯一途径。按钮用于触发服务器端脚本处理程序的工具。只有通过按钮的触发，才能把用户提交的信息传送到服务器端。插入按钮的具体操作步骤如下。 (1) 按上一节操作步骤选中第7行单元格，合并所选单元格。 (2) 将鼠标指针放置在合并后的单元格中，选择【插入】|【表单】|【按钮】命令，插入按钮。 (3) 选中按钮，在【属性】面板中的【值】文本框中输入“提交”，【动作】设置为【提交表单】。 (4) 在按钮的右边再插入一个按钮，选中按钮，在【属性】面板中的【值】文本框中输入“重置”，【动作】设置为【重设表单】，将鼠标指针放置在按钮的右边，在【属性】面板中单击【居中对齐】按钮，将按钮设置为【居中对齐】。
网页制作 第十二讲 使用行为
行为概述 Dreamweaver 中的行为是一系列JavaScript程序的集成，通过行为使得网页制作人员不用编程而实现动态效果。行为包括两部分的内容，一个部分是事件，另一个部分是动作。动作是特定的JavaScript程序，只要在事件发生后，该程序就会自动运行；行为是事件和该事件所触发的动作的结合，在Dreamweaver中主要通过【行为】面板来控制行为的使用。
行为面板 Dreamweaver 提供了丰富的内置行为，这些行为利用简单直观的语句设置，无需需要编写任何代码就可以实现一些强大的交互性和控制功能。 【行为】面板的作用是为网页元素添加动作和事件，使网页具有互动的效果，在介绍【行为】面板前先了解一下三个词语：事件、动作和行为。 事件：是浏览器对每一个网页元素的响应途径，与具体的网页对象相关。 动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务。如播放声音、打开浏览器窗口、弹出菜单等。 行为：实质上是事件和动作的合成体。 选择【窗口】|【行为】命令，打开【行为】面板。在该面板中包含以下四种按钮： 【添加行为】：在该下拉菜单中选择其中的命令，会弹出一个对话框，在对话框中设置选定动作或事件的各个参数。如果弹出的菜单中所有选项都为灰色，则表示不能对所选择的对象添加动作或事件。 【删除事件】：删除列表中所选的事件和动作。 【增加事件值】按钮：向上移动所选的事件和动作。 【降低事件值】按钮：向下移动所选的事件和动作。
动作 动作是最终产生的动态效果，动态效果可以是播放声音、交换图像、弹出提示信息、自动关闭网页等。下面是Dreamweaver中默认提供的动作的种类。 调用JavaScript：调用JavaScript特定函数。 改变属性：改变选定客体的属性。 检查浏览器：根据访问者的浏览器版本，显示适当的页面。 检查插件：确认是否设有运行网页的插件。 控制Shockwave或Flash：控制影片的指定帧。 拖动层：允许在浏览器中自由拖动层。 转到URL：可以转到特定的站点或者网页文档上。 隐藏弹出式菜单：隐藏在Dreamweaver上制作的弹出窗口。 跳转菜单：可以建立若干个链接的跳转菜单。 跳转菜单开始：在跳转菜单中选定要移动的站点之后，只有单击GO按钮才可以移动到链接的站点上。
动作 打开浏览器窗口：在新窗口中打开URL。 播放声音：在设置的事件发生之后，播放链接的音乐。 弹出消息：在设置的事件发生之后，显示警告信息。 预先载入图像：为了在浏览器中快速显示图片，事先下载图片之后显示出来。 设置导航栏图像：制作由图片组成的菜单的导航条。 设置框架文本：在选定帧上显示指定内容。 设置层文本：在选定层上显示指定内容。 设置状态栏文本：在状态栏中显示指定内容。 设置文本域文字：在文本字段区域显示指定内容。 显示弹出式菜单：显示弹出菜单。 显示-隐藏层：显示或隐藏特定层。 交换图像：发生设置的事件后，用其他图片来取代选定图片。 恢复交换图像：在运用交换图像动作之后，显示原来的图片。 时间轴：用来控制时间轴，可以播放、停止动画。 检查表单：检查表单文档在有效性的时候才能使用。
事件 事件用于指定选定行为动作在何种情况下的发生。例如想应用单击图像时跳转到制定网站的行为，则需要把事件指定为单击事件onClick。下面根据使用用途分类介绍Dreamweaver中提供的事件种类。 onAbort：在浏览器中停止加载网页文档的操作时发生的事件 onMOVE：移动窗口或框架时发生的事件 onLoad：选定的对象出现在浏览器上时发生的事件 onResize：访问者改变窗口或框架的大小时发生的事件 onUnLoad：访问者退出网页文档时发生的事件 onClick：用鼠标单击选定要素时发生的事件 onBlur：鼠标移动到窗口或框架外侧时等非激活状态时发生的事件 onDragDrop：拖动选定要素后放开时发生的事件 onDragStart：拖动选定要素时发生的事件 onFocus：鼠标到窗口或框架中处于激活状态时发生的事件 onMouseDown：单击鼠标左键时发生的事件 onMouseMove：鼠标经过选定要素上面时发生的事件 onMouseOut：鼠标离开选定要素上面时发生的事件
事件 onMouseOver：鼠标在选定要素上面时发生的事件 onMouseUp：放开按住的鼠标左键时发生的事件 onScroll：访问者在浏览器中移动了滚动条时发生的事件 onKeyDown：键盘上某个按键被按下时触发事件 onKeyPress：键盘上的某个按键被按下又释放时触发事件 onKeyUp：放开按下的键盘中的指定键时发生的事件 onAfterUpdate：表单文档的内容被更新时发生的事件 onBeforeUpdate：表单文档的项目发生变化时发生的事件 onChange：访问者更改表单文档的初始设定值时发生的事件 onReset：把表单文档重新设定为初始值时发生的事件 onSubmit：访问者传送表单文档时发生的事件 onSelect：访问者选择文本区域中的内容时发生的事件 onError：加载网页文档的过程中发生错误时发生的事件 onFilterChange：应用到选定要素上的滤镜被更改时发生的事件 onFinish：结束移动文字(Marquee)时发生的事件 onStart：开始移动文字(Marquee)时发生的事件
弹出信息 【弹出消息】显示一个带有指定消息的JavaScript警告，因为JavaScript警告只有一个按钮，所以使用此动作可以提供信息，而不能为用户提供选择，具体操作步骤如下。 (1)打开网页文档。 (2)选择【窗口】|【行为】命令，打开【行为】面板。 (3)在【行为】面板中单击【添加】按钮，在弹出菜单中选择【弹出信息】命令，打开【弹出信息】对话框，在对话框中的【消息】文本框中输入“欢迎光临我们的网站”，单击【确定】按钮即可添加行为。
打开浏览器窗口 使用打开浏览器窗口动作在打开当前网页的同时，还可以再打开一个新窗口，同时还可以根据动作来编辑浏览窗口的大小、名称、状态栏和菜单栏等属性。 在【打开浏览器窗口】对话框中可以进行如下设置。 【要显示的URL】：单击【浏览】选择一个文件，或输入要显示的 URL。 【窗口宽度】：指定窗口的宽度(以像素为单位)。 【窗口高度】：指定窗口的高度(以像素为单位)。 各种浏览器属性设置 【窗口名称】：输入窗口的名称，此名称不能包含空格或特殊字符。
设置状态栏文本 设置状态栏文本用于设置状态栏显示的信息，当适当的触发事件触发后在状态栏中显示信息，设置状态栏文本动作作用与弹出信息动作很相似，不同的是如果使用消息框来显示文本，访问者必须单击【确定】按钮才可以继续浏览网页中的内容。而在状态栏中显示的文本信息不会影响访问者的浏览速度。
检查表单 【可接受】选项组内共有以下几类参数。 【任何东西】：如果该文本域是必需的但不需要包含任何特定类型的数据，则使用【任何东西】。 【电子邮件地址】：使用【电子邮件地址】检查该域是否包含一个@符号。 【数字】：使用【数字】检查该文本域是否只包含数字。 【数字从】：使用【数字从】检查该文本域是否包含特定范围内的数字。
转到URL 转到URL动作在当前窗口或指定的框架中打开一个新页，此动作对通过一次单击更改两个或多个框架的内容特别有用。 (1) 打开网页文档。 (2) 单击【行为】面板中的【添加】按钮，在弹出菜单中选择【转到URL】选项，弹出【转到URL】对话框，在对话框中单击URL文本框右边的【浏览】按钮，选择要打开的文档，或在URL文本框中直接输入该文档的路径和文件名。 (3) 单击【确定】按钮确认添加的行为。保存文档，按F12键在浏览器中预览效果。
设置增大/收缩效果 制作步骤 选择要应用效果的内容或布局对象。 在“行为”面板（“窗口”>“行为”）中，单击加号 (+) 按钮，并从弹出菜单中选择“效果”>“增大/收缩”。 从“目标元素”弹出菜单中选择某个对象的 ID。如果您已经选择了一个对象，请选择“<当前选定内容>”。 在“效果持续时间”域中，定义出现此效果所需的时间，用毫秒表示。 选择要应用的效果：“增大”或“收缩”。 在“增大自/收缩自”框中，定义对象在效果开始时的大小。该值为百分比大小或像素值。 在“增大到/收缩到”框中，定义对象在效果结束时的大小。该值为百分比大小或像素值。 为“增大自/收缩自”或“增大到/收缩到”框选择像素值，“宽/高”域就会可见。元素将根据选择的选项相应地增大或收缩。
利用AP Div制作下拉菜单 下拉菜单是网上最常见的效果之一，用鼠标指针轻轻一点或者移过去，就出现一个更加详细的菜单，它不仅节省了网页排版空间、使网页布局简洁有序，而且一个新颖美观的下拉菜单还能为网页增色不少。 制作步骤 建立菜单 利用AP Div制作下拉菜单 在菜单项上使用“显示-隐藏元素”行为
获得更多行为 下载扩展程序、动作文件、脚本、模板以及其他可扩展Adobe应用程序功能的项目。这些项目由Adobe及社区成员创作。其中大多数项目免费提供。不过有些时候，也会找到由个别开发人员提供的商业版本动作文件以及扩展程序的试用版。甚至可以创建并上载自己的文件，并与社区分享，如图所示就是Adobe的官方网站。
网页制作 第十三讲 使用模板与库
库的创建 在Dreamweaver中除了模板外，还有一种网页快速编辑工具，就是库。库是一种用来存储在整个网站上经常重复使用或更新的页面元素的方法，这些元素称为库项目，Dreamweaver 将库项目存储在每个站点的本地根文件夹内的Library文件夹中。
创建库项目 可以从文档body标签之间的任意元素创建库项目，这些元素包括文本、表格、表单、Java Applets、插件、ActiveX元素、导航栏和图像。创建库项目具体操作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框。 (2) 选择【常规】选项卡中的【类别】列表框的【基本页】选项，在【基本页】列表中选择【库项目】选项。 (3) 单击【创建】按钮，创建一个空白网页。 (4) 选择【文件】|【另存为】命令，弹出【另存为】对话框，在对话框中的【文件名】文本框中输入名称top.lbi，【保存类型】选择库文件。 (5) 将鼠标指针置于页面中，选择【插入】|【表格】命令，插入2行1列的表格。 (6) 将鼠标指针置于第1行单元格中，选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择相应的图像文件，单击【确定】按钮，插入图像。 (7) 将鼠标指针置于第2行单元格中，在【属性】面板中单击【背景】文本框后的按钮，弹出【选择图像源文件】对话框，在对话框中选择相应的背景图像，单击【确定】按钮，插入背景图像，将【高】设置为150。 (8) 选择【文件】|【保存】命令，即可创建库项目。
使用库项目 库项目是可以在多个网页中重复使用的网页元素，每当更改某个库时，都可以同时更新所有使用该库的网页文档，具体操作步骤如下。 (1) 打开网页文档，将鼠标指针置于要插入库项目的位置。 (2) 选择【窗口】|【资源】命令。 (3) 选择命令后，打开【资源】面板，在【资源】面板中单击【库】图标，选择【库】 (4) 单击【资源】面板中的【插入】按钮，将库文件插入到网页中。
模板 在Dreamweaver中，模板是一种特殊的文档，可以利用模板创建新网页，从而得到与模板相似但又有所不同的新网页，当修改模板时使用该模板创建的所有网页可以一次自动更新，这就大大提高了网页更新和维护的效率。
创建模板 创建模板一般有以下三种方法。 1. 从新文档创建模板 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框，在对话框中选择【常规】选项卡中【类别】列表框中的【模板页】选项，在【模板页】列表框中选择【HTML模板】选项。 (2) 单击【创建】按钮，创建一空白模板网页。 (3) 选择【文件】|【另存为】命令，弹出Dreamweaver 提示框。 (4) 单击【确定】按钮，弹出【另存为】对话框，在对话框中的【文件名】文本框中输入index，【文件类型】选择模板文件(*.dwt) ，单击【保存】按钮，即可完成模板的创建。 2. 从资源管理器中创建模板 3. 从现在文档创建模板
定义可编辑区域 可编辑模板区域就是基于模板页面中的那些可编辑的区域。可以将整个表格或单独的表格单元格标记为可编辑区域，但不能将多个表格单元格标记为单个可编辑区域。在插入可编辑区域之前，应该将正在其中工作的文档另存为模板。 共有四种类型的模板区域：可编辑区域、重复区域、可选区域和可编辑标签属性。 【可编辑区域】：在创建模板文档的时候，可以进行添加、修改、删除等操作的区域。可以将模板的任何区域定义为可编辑区域，一个模板中至少要包含一个可编辑区域，否则，利用该模板创建的页面将无法编辑。 【重复区域】：可以在文档内重复添加的区域。 【可选区域】：在模板中定义为可选的区域。 【可编辑标签属性】：可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。
应用模板 可以使用【新建文档】对话框从Dreamweaver定义的任何站点中选择模板，有了模板，就可以快速、高效地设计出风格一致的网页。利用模板创建网页的具体操作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框。 (2) 在对话框中选择【模板】选项卡中【模板用于】列表框中的【站点“9.1”】，在【站点“9.1”】列表框中选择index1。 (3) 单击【创建】按钮，利用模板创建网页。 (4) 将鼠标指针置于可编辑区域中，选择【插入】|【表格】命令，插入2行1列的表格。 (5) 将光标置于第1行单元格中，插入图像。 (6) 将光标置于第2行单元格中，输入文字。
更新网页 应用模板创建网页既可以保持整个网站的风格一致，又可节省时间，模板最大的作用就是一次更新多个应用了该模板的页面。 当对模板进行了修改，Dreamweaver 会提示更新所有基于该模板的页面，也可以手动更新当前页面或整个站点。 (1) 打开模板文档，选中文字“返回首页”，在【属性】面板中单击【链接】文本框右边的【浏览】按钮，在弹出的【选择文件】对话框中选择相应的链接文件，单击【确定】按钮，创建链接。 (2) 用同样的方法将其他的导航链接到相应的网页文档，选择【文件】|【另存为】命令，弹出【更新模板文件】对话框。 (3) 单击【更新】按钮，基于该模板制作的网页都会自动更新。
网页制作 第十四讲 创建动态数据库网页
搭建服务器平台 网站要在服务器平台下运行。离开一定的平台，动态交互式的网站就不能正常运行。要将本地电脑设置为服务器，计算机上必须安装能够提供Web服务的应用程序，对于开发ASP页面来说，安装IIS是最好的选择。
安装IIS Windows Server 、Windows XP Professional用户可以安装并运行IIS。安装IIS的具体操作步骤如下。 (1) 选择【开始】|【控制面板】|【添加/删除程序】命令，弹出【添加或删除程序】窗口。 (2) 选择【添加/删除Windows组件】选项，弹出【Windows组件向导】对话框。 (3) 在每个组件之前都有一个复选框，若该复选框显示为，则代表该组件内还含有子组件供选择，双击【Internet信息服务(IIS)】选项，弹出【Internet信息服务(IIS)】对话框。 (4) 当选择完成所有希望使用的组件以及子组件后，单击【确定】按钮，返回到【Windows组件向导】对话框，单击【下一步】按钮，弹出复制文件的对话框。 (5) 复制文件完成后，安装完成。
配置IIS IIS安装完必须进行配置才能正常运行，配置IIS的具体操作步骤如下。 (1) 选择【开始】|【控制面板】|【性能和维护】|【管理工具】|【Internet 信息服务】命令，弹出【Internet 信息服务】窗口。 (2) 展开【网站】选项选择【默认网站】，右击，在弹出的快捷菜单中选择【属性】命令。 (3) 弹出【默认网站属性】对话框，切换到【网站】选项卡，在【IP地址】文本框中输入127.0.0.1。 (4) 然后切换到【主目录】选项卡，在【本地路径】文本框中输入目录或通过单击【浏览】按钮选择目录，其他选项可以根据需要设置。 (5) 切换到【文档】选项卡，可以修改浏览器默认主页及调用顺序。 (6) 单击【确定】按钮，即可完成IIS的设置。
创建数据库 如果说网络是信息传输的媒体，Web应用程序是信息发布的一种方式，那么数据库就是信息的载体。建立交互式站点需要使用数据库来储存访问者的信息，创建动态网页的同时需要使用数据库。下面讲述数据库的设计，具体操作步骤如下。 (1) 打开Microsoft Access，新建一个db1数据库。 (2) 双击【使用设计器创建表】选项，设置相应的字段名称和数据类型。 (3) 将鼠标指针置于相应的字段行中的单元格内，选择【编辑】|【主键】命令，即可设置为主键。 (4) 选择【文件】|【保存】命令，弹出【另存为】对话框，在对话框中的【表名称】文本框中输入表1。 (5) 单击【确定】按钮，即可完成表的保存
连接数据库 动态页面最主要的是结合后台数据库，自动更新网页，所以一般没有数据库也就谈不上动态页面。下面讲述如何创建ASP与Access的连接。
创建ODBC连接 ODBC是数据库服务器的一个标准协议，它是向访问网络数据库的应用程序提供的一种接口。只要系统中有相应的ODBC驱动程序，任何程序都可以通过ODBC操纵数据库。定义系统DSN的具体操作步骤如下。 (1) 选择【开始】|【控制面板】|【性能和维护】|【管理工具】|【数据源(ODBC)】命令，弹出【ODBC数据源管理器】对话框，在对话框中切换到【系统DSN】选项卡。 (2) 单击【添加】按钮，弹出【创建新数据源】对话框，在【名称】列表中选择Driver do Microsoft Access(*.mdb)选项。 (3) 单击【完成】按钮，弹出【ODBC Microsoft Access安装】对话框，在【数据源名】文本框中输入名称，选择数据库的路径。 (4) 单击【确定】按钮，返回到【ODBC数据源管理器】对话框，可以看到新创建的数据源。
创建DSN连接 如果用户的网页服务器和Dreamweaver ·运行在同一个Windows系统上，那么就可以使用DSN来创建数据库连接，DSN是指向数据库的一个快捷方式。创建DSN连接的具体操作步骤如下。 (1) 选择【窗口】|【数据库】命令，打开【数据库】面板，在面板中单击按钮，在弹出的菜单中选择【数据源名称(DSN)】选项。 (2) 弹出【数据源名称(DSN)】对话框，在【连接名称】文本框中输入db1，在【数据源名称(DSN)】下拉列表中选择db1选项。 (3) 单击【确定】按钮，即可成功链接，此时【数据库】面板。
显示数据库内容 数据库、绑定、服务器行为面板 选择ODBC DSN 绑定记录集 插入字段 设定属性与字段的绑定 重复区域
操作记录集 Dreamweaver 提供了3个有关操作数据库表中的记录的服务器行为，分别用来向数据库中插入记录、修改和删除数据库中指定的记录。 插入记录 更新记录 删除记录
插入记录 使用插入记录服务器行为可以将记录插入到数据库中。 在【插入记录】对话框中可以进行如下设置。 【连接】：在下拉列表中选择指定的数据库链接，如果没有数据库链接，可以单击【定义】按钮定义数据库链接。 【插入表格】：在下拉列表中选择要插入表的名称。 【插入后，转到】：在文本框中输入一个文件名或单击【浏览】按钮进行选择。如果不输入该地址，则插入记录后刷新该页面。 【获取值自】：在下拉列表中指定存放记录内容的HTML表单。 【表单元素】：在列表框中指定数据库中要更新的表单元素。在【列】下拉列表中选择字段。在【提交为】下拉列表中显示提交元素的类型。如果表单对象的名称和被设置字段的名称一致，Dreamweaver会自动建立对应关系。
更新记录 Web应用程序中可能包含让用户在数据库中更新记录的页面。 在【更新记录】对话框中可以进行如下设置。 【连接】：在下拉列表中选择指定要更新的数据库连接。如果没有数据库链接，可以单击【定义】按钮定义数据库链接。 【要更新的表格】：在下拉列表中选择要更新的表的名称。 【选取记录自】：在下拉列表中指定页面中绑定的记录集。 【唯一键列】：在下拉列表中选择关键列，以识别在数据库表单上的记录。如果值是数字，则应该勾选【数字】复选框。 【在更新后，转到】：在文本框中输入一个URL，这样表单中的数据更新之后将转向这个URL。 【获取值自】：在下拉列表中指定页面中表单的名称。 【表单元素】：在列表框中指定HTML表单中的各个字段域名称。在【列】下拉列表中选择与表单域对应的字段列名称，在【提交为】下拉列表中选择字段的类型。
删除记录 网页应用中可能包含允许用户从浏览器中的数据库中删除记录的页面。 在【删除记录】对话框中可以进行如下设置。 【连接】：在下拉列表中选择指定要更新的数据库连接。如果没有数据库链接，可以单击【定义】按钮定义数据库链接。 【从表格中删除】：在下拉列表中选择从哪个表中删除记录。 【选取记录自】：在下拉列表中选择使用的记录集的名称。 【唯一键列】：在下拉列表中选择要删除记录所在表的关键字字段，如果关键字字段的内容是数字，则需要勾选【数字】复选框。 【提交此表单以删除】：在下拉列表中选择提交删除操作的表单名称。 【删除后，转到】：在文本框中输入该页面的URL地址。如果不输入地址，更新操作后则刷新当前页面。
网页制作 第十五讲 如何设计网页
网页主题和名称 网页主题题材的选择 主题要简明易懂定位要小，内容要突出 网页的名称 根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如：责任有限公司和工作室，后者更好记。另外，网站名称的字数应该控制在7个字（最好5个字）以内，4个字的可以用成语，如“一网打进”。字数少还有个好处，一般友情链接的小logo尺寸是88MMX31MM，而六个字的宽度是78左右，适合于其他站点的链接排版。
网页形象设计 设计网页的标志 首先需要设计制作一个网站的标志(logo)。就如同商标一样，logo是站点特色和内涵的集中体现，看见logo就让大家联想起站点。注意：这里的logo不是指88X31的小图标banner,而是网站的标志，如图1.4所示。
网页形象设计 设计网站的标准字体 标准字体和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。
网页形象设计 定位网页的版式和栏目 网站的题材确定后，就意味着已经开始收集和组织了许多相关的资料内容。因此往往会认为这些都是最好的，肯定能吸引读者来浏览网站。但是有没有将最好的，最吸引人的内容放在最突出的位置，从而使那些好内容在版面分布上占绝对优势。
网页的目录结构和链接结构 网页的目录结构 网页的链接结构 结构清晰 尽量使用意义明确的目录 方便灵活 在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置
网页设计的流程 收集网页前期资料以及所需文档 策划文档及网页设计规范 网站策划人员先分析网站的目的，网站的功能、网站的定位以及初步栏目的规划描述。然后根据策划方案去收集相关资料 策划文档及网页设计规范 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。主要设计人员进行前期的首页设计。 小组负责人确定设计进程时间并定期审核。
网页设计的流程 网页设计注意事项 主要负责人包括所有参与网站项目的负责人，每个负责人做到审核签字。 所有工作人员进行工作时必须在规定的工作时间内完成工作，不能完成工作的有权承担一定的责任。 在主要负责人通过后，任何人不得以理由修改页面设计工作，特殊情况除外。 网站策划人员必须及时跟踪网站建设情况并记录下来。安排任务进程。
网页设计原则 如果想成为一个网站设计者，并正想建一个网站，首先应该考虑网站的内容，包括网站功能和用户需要什么。整个设计都应该围绕这些方面来进行。 如果用户不能够迅速地进入网站，或操作不便捷，网站设计就是失败的。 在计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。网站设计员使用来定义特性，这虽然允许使用特殊的字体，但是仍需要一些变通的方法，以免所选择的字体在访问者的计算机上不能显示。应当坚持使用通用字体。 背景颜色也会产生一些问题，可能会使网页难于阅读。应当坚持使用白色的背景和黑色的文本。
网页设计原则 在浏览器中即使去掉了图像功能，也要保证访问者能够在网站上获得良好的效果。并通过在网页底部提供另外的链接和使用替代文字，来满足访问者的需要 许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。 保持小的图像，在图像显示之前最好能详细说明图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。
网页设计原则 如果果真有那么多的超连接必须提供给读者，不如将这些超连接以条列的方式列在一选单页或目录页上。 抓住能传达主要讯息的字眼当做超连接的锚点，可有效地控制住超连接的字串长度，避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点)，而不利于读者的阅读或点取。 在具有前后连续顺序的文件里提供必要的连接，将篇幅过长的文件分隔成数篇较小的WebPages大大地增加了界面的亲和性，但在导览按钮与超连接的配置上，WebPage设计者则要更细心周全地安排，使得读者不论身处站台的哪一阶层，依然能够快速便捷地通往其他任何一个页面。
网站建设的误区 仅仅停留在发布企业形象和产品信息上 在页面中塞满图片、Flash、音乐等 很长时间都不更新一次 不重视收集反馈信息，不依照反馈信息作出相应的调整 将宝贵的时间浪费在无益的工作上 不重视推广和营销
网页制作 第二十五讲 创建网页文字
对文本的编辑 Fireworks提供了许多文本功能，可以用不同的字体和字号创建文本，并且可调整其字距、间距、颜色、字顶距和基线等。将 Fireworks 文本编辑功能同大量的笔触、填充、效果以及样式相结合，能够使文本成为图形设计中一个生动的元素。在Fireworks中文本即便应用了投影和斜角这类动态效果之后，也可以很方便地对文本进行更改，垂直文本、变形文本、将文本附加到路径以及转换文本为路径和图像。
输入文本 当要在文档窗口中输入文本时，选择工具箱中的【文本】工具进行输入。输入文本之前，首先要创建文本块，文本块按照不同的创建方式可以分成两类，分别是自动调节大小的文本块和固定宽度文本块。 1. 自动调节大小的文本块 (1) 在工具箱中选择【文本】工具。 (2) 将鼠标指针置于文档中，在需要创建文本的位置单击，显示出一个插入符。 (3) 使用键盘或者其他方式输入文本。 2. 固定宽度文本块 (2) 将鼠标指针置于文档中，在需要创建文本的位置拖动鼠标，创建一个文本框。
编辑文本 在Fireworks 中输入的文本会作为一个对象出现在文档窗口中，可以像选择其他对象一样选择文本，然后对其进行编辑。 (1) 在工具箱中选择【文本】工具，在文字上进行单击。此时【属性】面板如图所示。 (2) 单击【字体】右边的下拉按钮，在弹出的下拉列表中设置需要的字体。 (3) 单击【颜色框】右下角的颜色按钮，在弹出的菜单中选择需要的颜色。
附加文本到路径 一般文字都按照横排或者纵排直线排列，还可以按照一个任意路径的形态排列。附加文本到路径的具体操作步骤如下。 (1) 使用工具箱中的【多边形】工具，在文档中绘制一个多边形。 (2) 使用工具箱中的【文本】工具，在文档中单击输入文本。 (3) 选中多边形，按住Shift键的同时选择文字，选择【文本】|【附加到路径】命令，将文本附加到路径。
转换文本为路径 在Fireworks 中输入文字后，文字依然保持着文本的属性，均采用内码的形式存在。如果要将文字转换为简单的路径，可以执行以下操作，将文本转换为路径后，可以放弃文字的属性，这样就不怕字体丢失问题的出现。并且文字转换为路径后，可以使用编辑路径的工具对转换为路径的文字进行编辑。转换文本为路径的具体操作步骤如下。 (1) 在工具箱中选择【指针】工具。 (2) 选中要进行转换为路径的文字。 (3) 选择【文本】|【转换为路径】命令，此时文本就会转换为路径，如图所示。
网页制作 第二十六讲 创建网页图像
“热点”工具 在网页制作中，我们通常会将图像的某个区域链接到其他的网页，这个区域我们就称之为热点。在Fireworks 提供了“矩形热点”、“圆形热点”和“多边形热点”三种热点形状。鼠标左键按下工具箱中的“矩形热点”工具，在打开的列表中选择热点形状，如左图所示。选好热点形状后，在图像上按住鼠标左键拖动绘制热点，如果选择的是“多边形热点”，是通过单击来创建区域的，如右图所示。
“切片”工具 在Fireworks 提供了“切片”和“多边形切片”两种切片形状。鼠标左键按下工具箱中的“切片”工具，在打开的列表中选择切片形状，如左图所示。选好切片形状后，在图像上按住鼠标左键拖动绘制切片，如果选择的是“多边形切片”，是通过单击来创建区域的，如右图所示。
按钮元件 动态按钮是网页里主要的导航对象，在Fireworks 种提供了一个按钮编辑器，可以方便用户将图形或文本制作成所需的动态按钮效果。 单击“编辑”，选择“插入”-“新建按钮”，打开按钮编辑器，如图所示。
交换图像 在画布中导入第一副图像，设置宽度为100像素、高度为100像素，在图像上单击鼠标右键，选择“插入切片”，如左图所示。 单击“窗口”，选择“帧”，打开帧面板。单击按钮，插入第二帧，如右图所示。
弹出菜单 弹出菜单是目前网页中比较常见的导航效果，单击“编辑”，选择“插入”-“新建按钮”，打开按钮编辑器，从元件库中导入一个按钮，返回画布，设定按钮的文本为“弹出菜单”，如左图所示。单击按钮上的控制手柄在打开的菜单里选择“弹出菜单”，如右图所示。
逐帧动画 FIREWORKS可以创建逐帧动画，每个帧就是一幅图片，将若干幅有联系的图片以较快的速度播放，就生成了动画的效果。 在画布中输入文字内容“火焰动画”，如图所示。现在我们制作的就是动画里第一帧的效果。
动画的导出 动画效果的每一帧都设定完毕之后，我们就可以将文件导出为动画了。单击“文件”，选择“导出预览”，打开“导出预览”对话框，在“选项”里选择“格式”为“GIF动画”，如图所示。