网页制作的基本方法

1、dreamweaver网页制作网页制作 主讲：樊郁徽主讲：樊郁徽 电子邮件：电子邮件： 网站，站点，网页网站，站点，网页 网站：在internet 网上有自已独立的 internet地址和ip地址的计算机系统，或者我 们叫主机。（比如：网易，sohu等） 站点：分为本地站点和远程站点。本地站点是 在自已的计算机上建立的用于存储本地信息资 源的一种形式。而远程站点是在主机上分配一 定的存储空间，用于存储本地站点的所有的信 息。 网页却是它们（网站，站点的组成部分） 网页，网站，站点网页，网站，站点 网页基本概念： 网页是网页是一种在网络上传送的特殊 文件。它的扩展名一般为htm或html。 网页

2、是由文字、图像、动画、表格、声 音等多种媒体组成的。 网页必须使用浏览器软件来打开。 网页，网站，站点网页，网站，站点 网页的类型 静态网页 在网站设计中，纯粹html格式的网页通常被称为“静态 网页”，早期的网站一般都是由静态网页制作的。静态网页 以.htm、.html、.shtml、.xml等为后缀的。在html格式的 网页上，也可以出现各种动态的效果，如.gif格式的动画、 flash、滚动字母等，这些“动态效果”只是视觉上的。 动态网页 动态网页是指使用网页脚本语言，比如php、asp、 、jsp等编写，通过脚本将网站内容动态存储到数据 库，用户访问网站是通过读取数据库来动态生成网页的

3、方法。 网站上主要是一些框架基础，网页的内容大都存储在数据库 中。 网页，网站，站点网页，网站，站点 区别 程序是否在服务器端运行，是重要标志。在 服务器端运行的程序、网页、组件，属于动 态网页，它们会随不同客户、不同时间，返 回不同的网页，例如asp、php、jsp、 asp.net、cgi等。运行于客户端的程序、网 页、插件、组件，属于静态网页，例如html 页、flash、javascript、vbscript等等， 它们是永远不变的。 网页，网站，站点网页，网站，站点 网站的基本概念 网站是由若干个网页组成的。网页 有序地链接在一起就构成网站。 在internet 网上有自已独立的 i

4、nternet地址和ip地址的计算机系统， 或者我们叫主机。（比如：网易， sohu等） 网页，网站，站点网页，网站，站点 站点的基本概念 分为本地站点和远程站点。 本地站点是在自已的计算机上建立 的用于存储本地信息资源的一种形 式。 远程站点是在主机上分配一定的存 储空间，用于存储本地站点的所有 的信息。 其他一些概念 文件的概念 网页文件：是以网页编程语言编写的文件， 根据编写语言的不同分为动态和静态两种 网页上显示的图片、动画、视音频、flash 等信息，并不存在与网页文件中，而是通过 在网页文件中调用相关文件的形式实现的 编辑网页文件的工具可以是网页制作软件， 可以是编程软件，也可以是

5、记事本软件 其他一些概念 路径概念 绝对路径：就是从根目录开始一直到该目录的 全程的路径，举个例子： “c:apachehtdocscgi-bintest.htm就是 文件test.htm的绝对路径 相对路径：就是相对于当前目录的路径，举个 例子：例如当前目录目录是 “c:apachehtdocs” ，那么 c:apachehtdocscgi-bintest.htm文件相对 与当前目录的路径就是cgi-bintest.htm 其他一些概念 首页 首页是最重要的网页，就像书中的目录页一 样，通过首页的引导，我们可以访问其它的 网页。首页是进入网站时默认打开的首页面。 首页的文件名一般是index

6、(index的中文含 义是索引）或default（默认的意思），扩 展名有htm、html、asp、aspx、php、jsp等 网站制作的步骤网站制作的步骤 网站制作的一般步骤： 第一步网站规划 网站内容、结构（三层）、特色、色调、功能、风格等信息 第二步资料准备 收集所需信息：包括，文字、图像（动画）、脚本、数据库等 第三步 web服务器准备（可选） 选择合适的web服务器如：iis（internet information server）、apache等 第四步 网页外观设计 使用图像处理软件（photoshop、fireworks等）绘制网页图像 并对图像制作切片，导出成页面文件 第五步

7、 创建网站，制作网页，调试完成 针对各类网页的特点，使用不同的编辑器。如，frontpage 、 dreamweaver 等，完成静态和动态程序的编写 网页制作常用方法 1、准备网页制作素材 2、规划网页布局 3、使用图像处理软件（如fireworks、 photoshop等）绘制网页完整图像 4、对绘制的网页图片制作切片，并导出成 网页文件 5、在网页制作软件中对导出的网页文件进 行修改完善。 使用fireworks绘制网页图像 使用fireworks绘制网页图像 2、在新建文档中完整绘制出要制作的网 页图片 对绘制好的网页图片制作切片 选择“切片”工 具 显示切片视图 对绘制好的网页图片制

8、作切片 切片在网页制作中的作用 1、减少网页背景的体积，加快网页显示 速度 2、制作动态效果 3、优化图像 4、创建链接 将制作好切片的图片导出 在dreamweaver中完成网页制作 在dreamweaver中打开导出的网页文件，修 改完善！ dreamweaver概述 dreamweaver是macromedia公司（现被adobe公司收 购）的一个用于可视化设计与管理网页和网站的专 业级html编辑器。是目前世界上网页设计制作领域 使用率最高的专业软件，换句话说dreamweaver得到 了世界上网页设计制作领域专家的广泛认可。 dreamweaver对于dhtml（动态网页）的支持特别

9、好， 可以轻而易举地做出很多眩目的互动页面特效。插 件式的程序设计使得其功能可以无限的扩展。 dreamweaver与flash、fireworks 并称为 macromedia的网页制作三剑客，由于是同一公司的 产品，因而在功能上有着一个非常紧密的结合。 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 菜单栏 文件 编辑 查看 插入 修改 文本 命令 站点 窗口 帮助 插入面板 由8个子面板构成，是dreamweaverdreamweaver中非常重要的面板 之一 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 工具栏 文档

10、工具栏和标准工具栏 文档工具栏 标准工具栏 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 面板组 包括设计、代码、应用程序、 文件、答案等面板，非常重 要的功能都需要通过面板来 完成，是dreamweaver的重要 特点 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 属性面板 用于修改网页元素的属性，当在文档窗 口中选择某种对象时，属性面板里显示 该对象的属性 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 文档窗口与视图 显示当前正在编辑的网页文档 有设计视图、代码视图、拆分视图和动态视

11、图 设计视图 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 代码视图 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 拆分视图 dreamweaverdreamweaver 8.0 8.0的窗口结构的窗口结构 动态视图 创建站点 步骤：在硬盘新建一个文件夹用字母命 名在dreamweaver中选择“站点”菜 单新建站点 接下来 需要给 站点起 一个名 字，可 以起任 意一个 名字。 点“选择” 按钮，因 为没有使 用远程服 务器，就 选择 “无”。 在网页中插入对象 文本的编辑 在网页中插入文本 输入普通文本 直接输入或者拷

12、贝粘贴已有文本 换行使用“shiftenter”；分段直接回车；输入空格必 须在中文输入法全角状态下输入，或者按 control+shift+空格键 插入特殊字符 在“插入面板”栏中，选择“文本”类别并选择所需的 字符 在网页中插入对象 文本的编辑 文字标题格式、字体、字号的设置文字对齐 与缩进设置 文字风格与颜色的设置 选中所需操作的文字，在属性面板中进行修改 在网页中插入对象 文本的编辑 文字的查找与替换 点击“编辑”下拉菜单，选择“查找和替换”选 项 在网页中插入对象 图像的处理 插入图像及设置图像属性 在“插入面板”“常用”标签 按钮 插入菜单图像选择图像源文件 注意 在插入图像文件之

13、前，页面文件要现存 盘，并保存在本地站点文件夹中，这样 一旦插入的图像文件不在本地站点文件 中时，系统会提示将该文件复制到站点 根文件夹中。 在网页中插入对象 设置图像属性 单击选中图像文件，在属性面板中调整 在网页中插入对象 插入鼠标经过图像 选择菜单“插入图像对象鼠标经过图像” 在网页中插入表格 表格是网页的一个非常重要的元素，由 于html本身并没有提供更多的排版手段， 因此往往要借助表格实现网页的精确排 版。 在网页中插入表格 表格的创建 插入表格 选择菜单“插入表格”命令 设置表格的行数、列数 设置表格的宽度 设置表格边框线的宽度 设置单元格边距和间距 在网页中插入表格 设置表格属性

14、 表格属性面板 单元格属性面板 在网页中插入表格 表格的基本操作 选择单元格（拖动鼠标） 剪切、复制和粘贴单元格（选择单元格编 辑菜单对应操作） 添加行和列（修改表格插入行（列） 删除行和列（同上） 拆分和合并单元格（选择需要的单元格修 改表格拆分单元格（合并单元格） 网页制作实例（1） 网页制作实例（1） 步骤： 1、创建站点 2、新建页面文件 3、修改文件标题 4、插入表格 5、拆分与合并单元格 6、插入图片与文字 7、保存退出 在网页中使用超级链接 超级链接：指向文档，图象，多媒体文 件或可下载软件的超文本链接称作超级 链接 超级链接的作用：可以把一个网站的网 页连接起来，点击链接时从一

15、个网页跳 转到另一个网页，或者跳转到页面指定 的位置。 各种链接的功能和实现方法 1 导航链接：实现站点内文档的链接 2 链接到文档中的指定位置，使用锚； 3 空链接：是一个无指向的链接。使用空链接可 以为页面上的对象或文本附加行为。 4 创建电子邮件链接 6 链接到站点中的文档或者其它站点，可以使用 跳转菜单，跳转菜单是文档中的一种来访者可以 看见的弹出式菜单，其中列出了链接的文档或文 件。 6 给链接增加提示，给链接增加快捷键。 创建导航链接创建导航链接 选中图像，也 可以是文字， 点击属性面板 中的“浏览文件” 图标 创建导航链接创建导航链接 选中一个文件。会出现一个文件相对于“文档”，

16、 “站点根目录的选择”。文档相对路径是最适合用于 本地链接的路径类型，适合绝大多数web站点 创建导航链接创建导航链接 绝对路径：完整的url，称作绝对路径 例如在链接域输入http:/ 选择被链接文档要打开的位置 若要使被链接文档不出现在当前窗口或框架中，从 属性面板的“目标”弹出式菜单选取一个选项: _blank 在新的未命名的浏览器窗口中加载链接文档 _parent 在父框架页或包含该链接的框架窗口中加 载链接文档。如果包含链接的框架不是嵌套的，则 链接文档将加载到整个浏览器窗口中 _self 将链接文档加载到与链接相同的框架或窗口中， 该目标是默认值，所以通常您不需要指定它。 _top

17、 将在整个浏览器窗口中加载链接文件，同时移 除所有框架 一个网站中，第一级链接或者导航链接选择_self， 第二级链接和友情链接选择_blank。 选择被链接文档要打开的位置 使用锚 锚链接让访问者轻松地浏览很长的网页 的各个部分 简明步骤：选中文本在目标文档中插 入锚标记命名拖动“指向文件”图 标到文本 使用锚 链接到文档中的指定位置：在需要插入 锚的地方，点一下光标，然后单击常用 面板上的命名锚记工具 键入锚记名称，一个站点中的锚记名称 只可以是唯一的，否则会出现错误 使用锚 在文档中选取要创建链接的文本，打开您需要 链接的命名锚记所在文档，不一定要是当前文 档，可以是站点中的其它文档，点

18、击属性面板 中的“指向文件”图标，并将它拖动到您需要 链接的锚记处。 使用空链接使用空链接 使用空链接可以为页面上的对象或文本附加行为 创建步骤： 1. 在文档窗口中，选中要设置链接的文本、图像或 其他对象。 2. 在属性面板的链接框中，只输入一个“#”号。 3. 如果单击这种地址为一个“#”的链接，无论当前你 处于文档的什么地方，都会自动跳转到文档的开头位 置。很多人非常讨厌这种情况，因此出现很多插件。 可以用“#”来代替“#”，单击这样的链接的时候， 会保持当前页面的浏览位置。 4. 还可以在属性面板的链接框中输入javascript:;创建 空链接。 创建电子邮件链接 方法一：选取需要创

19、建链接的文本或者 图像，点击常用面板中的“电子邮件链 接”工具，输入邮件地址。 1、选中文字 2、点击电子邮件链接 3、输入电子邮件地址 创建电子邮件链接 方法二：选取需要创建链接的文本或者 图像，在属性面板中的链接栏输入mailto: 邮件地址。 1、选中文字 2、输入mailto:电子邮件地址 创建跳转菜单 首先将插入点放在要插入链接的位置。 点击表单面板中的跳转工具 创建跳转菜单 在插入跳转菜单对话框中，点添加项添 加新链接 创建跳转菜单 创建跳转菜单 给链接增加提示 首先将插入点放在要插入链接的位置，点击 常用面板上的超级链接工具。 设置链接参数 提示 快捷键 alt字母 给链接增加提

20、示 显示效果 上机内容（实验1） 1、使用站点管理器建立一个本地站点 2、分别使用表格和框架的方式进行页面布局， 构建一个个人主页，首页面命名为index.htm 3、在页面中通过插入文字、图片、表格等页 面元素丰富页面信息 4、给文字或图片创建超级链接 5、完成其他相关页面的制作 要求：完成实验报告，包括具体操作步骤，页 面布局图形等内容 层的使用与创建层 层是一种html网页元素，是网页中用来 放置文本、图像、动画、表单、插件等 网页元素的载体。 层可以放置在页面的任意位置，改变层 在页面中的位置，便可以改变层中网页 元素的位置。 “层”的特点是使用方便，可以轻松的 使用“层”来布局网页。

21、 创建层 1、在插入 布局对象选“层”，或点“插 入面板”布局对象选“层” 2、在页面中绘制一个层 3、通过周围的黑色调整柄拖动控制层的大小 4、拖动层左上角的选择柄可以移动层的位置 5、单击层标记可以选中一个层 6、在层中可以插入其他任何元素包括图片文 字链接表格等 创建层 层的属性 层有隐藏和显示的属性 层数决定了重叠时哪个层 在上面哪个层在下面 层面板上面还有一个参数 就是防止层重叠。一旦选 中，页面中层就无法重叠 层还有一种父子关系也就 是隶属关系 ，方法：在 层面板中按ctrl键将子层 拖拽到父层 层和表格之间转换 由于层在网页布局上非常方便，所以， 一些人可能不喜欢使用表格或“布局

22、” 模式来创建自己的页面，而是喜欢通过 层来进行设计。 层的缺点：不支持所有的浏览器，且层 只能相对与页面的左上角对齐 当浏览器窗口大小或屏幕分辨率发生变化后， 绝对定位的层不能保持原有的位置 层和表格之间转换 在转换为表格之前，请确保层没有重叠 选择“修改”“转换”“层到表格”。即可显 示“转换层为表格”对话框 层和表格之间转换 若要将表转换为层，请选择“修改”“转 换”“表格到层”。即可显示“转换表格 为层。对话框 网页布局 网页布局的工作模式：标准视图（默认）和布 局视图 布局视图在网页布局时更加直观、方便 在布局视图中，可以在页上绘制布局单元格和 布局表格。绘制完成后，dreamwea

23、ver 会自 动创建一个布局表格以容纳该单元格。布局单 元格不能存在于布局表格之外。 布局视图 点“布局” 切换到布局视图 布局视图 单击插入栏“布局”分类中的“绘制布局单元格” 按钮 布局视图 将鼠标指针放置在页上要开始绘制单元格的位 置上，然后拖动指针以创建布局单元格。若要 创建多个单元格而不用每次都单击“绘制布局 单元格”按钮，请按住 ctrl 键并拖动指针来创 建每个布局单元格。 布局视图 布局视图 绘制一个布局表格: 单击插入栏“布局” 分类中的“绘制布局表格”按钮, 将鼠标 指针放置在页上，然后拖动指针以创建 布局表格。若要绘制多个布局表格而不 必重复单击“绘制布局表格”按钮，请

24、在单击“绘制布局表格”按钮时按住 ctrl 键。 布局视图 布局视图 绘制嵌套布局表格：将一个布局表格绘 制在另一个布局表格中，创建嵌套表格。 单击插入栏“布局”分类中的“绘制布 局表格”按钮。鼠标指针变为加号 (+)， 指向现有布局表格中的空白（灰色）区 域，然后拖动指针以创建嵌套布局表格。 布局视图 布局视图 转换到标准视图下的表格就是 布局视图 移动布局单元格和表格及调整它们的大小 调整布局单元格的大小: 选择一个单元格，按住 ctrl 键的同时单击该单元格中的任何位置，该单元格周 围出现选择控制点。拖动选择控制点来调整单元格 的大小。 布局视图 移动布局单元格:按住 ctrl 键的同时

25、单击该单元格中的 任何位置, 将该单元格拖到其布局表格中的另一个位置。 按箭头键移动该单元格，每次移动 1 个像素。在按住 shift 键的同时按箭头键移动该单元格，每次 10 个像素。 布局视图 调整布局表格的大小: 通过单击表格顶部的标签选择一 个表格。该表格周围出现选择控制点。拖动选择控制点 来调整表格的大小。 布局视图 移动布局表格：通过单击表格顶部的标签选择一个表 格。该表格周围出现选择控制点。 将表格拖到页上的 另一个位置。(只有当布局表格嵌套在另一个布局表 格中时，才可以移动该布局表格)。 表单与样式表 表单 关于表单 表单（form）技术可以实现浏览者同internet 服务器

26、之间信息的交互传递，它是网络信息收 集的一种重要方式。通过表单可以从网络的用 户端收集信息，然后将收集来的信息经过服务 器处理后再反馈给用户。例如收集用户资料、 获取用户订单，在internet上统也同样存在大 量的表单，让用户输入文字进行选择。 表单 通常表单的工作过程 （1）访问者在浏览有表单的页面时，可填 写必要的信息，然后单击“提交”按钮。 （2）这些信息通过internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行 处理，如果有错误会返回错误信息，并要求 纠正错误。 （4）当数据完整无误后，服务器反馈一个 输入完成信息。 表单 一个完整的表单包含两个部分 （1）一个是在

27、网页中进行描述的表单对象。 （2）二是应用程序，它可以是服务器端的， 也可以是客户端的，用于对客户信息进行分 析处理。 表单 认识表单对象 在 dreamweaver 中，表单输入类型称为表单对象。 可以通过选择“插入”“表单对象”来插入表单对象， 或者通过从下图显示的“插入”栏的“表单”面板访 问表单对象来插入表单对象 表单 1、表单 “表单”在文档中插入表单。任何其他表单对象，如文 本域、按钮等，都必须插入表单之中，这样所有浏览器 才能正确处理这些数据。 2、文本域 “文本域”在表单中插入文本域。文本域可接受任何类 型的字母数字项。输入的文本可以显示为单行、多行或 者显示为项目符号或星号（

28、用于保护密码）。 3、复选框 “复选框”在表单中插入复选框。复选框允许在一组选 项中选择多项，用户可以选择任意多个适用的选项。 表单 4、单选按钮 “单选按钮”在表单中插入单选按钮。单选按钮代表 互相排斥的选择。选择一组中的某个按钮，就会取消 选择该组中的所有其他按钮。例如，用户可以选择 “是”或“否”。 5、单选按钮组 “单选按钮组”插入共享同一名称的单选按钮的集合。 6、列表/菜单 “列表/菜单”使您可以在列表中创建用户选项。 “列表”选项在滚动列表中显示选项值，并允许用户 在列表中选择多个选项。“菜单”选项在弹出式菜单 中显示选项值，而且只允许用户选择一个选项。 表单 7、跳转菜单 “跳

29、转菜单”插入可导航的列表或弹出式菜单。跳转 菜单允许您插入一种菜单，在这种菜单中的每个选项 都链接到文档或文件。请参见创建跳转菜单。 8、图像域 “图像域”使您可以在表单中插入图像。可以使用 图像域替换“提交”按钮，以生成图形化按钮。 9、文件域 “文件域”在文档中插入空白文本域和“浏览”按钮。 文件域使用户可以浏览到其硬盘上的文件，并将这些 文件作为表单数据上传。 10、按钮 “按钮”在表单中插入文本按钮。按钮在单击时执 行任务，如提交或重置表单。可以为按钮添加自定义 名称或标签，或者使用预定义的“提交”或“重置” 标签之一。 11、标签 “标签”在文档中给表单加上标签，以 形式开头和结尾。

30、 12、字段集 “字段集”在文本中设置文本标签。 认识了表单，那么创建和使用表单时就可以根据 需要进行选择。表单时动态网页的灵魂。 表单 创建表单 在dreamweaver中可以创建各种各样的表单， 表单中可以包含各种对象，例如文本域、按 钮、列表等 表单 插入表单 在网页中添加表单对象，首先必须创建表单。表 单在浏览网页中属于不可见元素。在 dreamweaver中插入一个表单。当页面处于“设 计”视图中时，用红色的虚轮廓线指示表单。如 果没有看到此轮廓线，请检查是否选中了“查 看”“可视化助理”“不可见元素”。 表单 将插入点放在希望表单出现的位置。选 择“插入”“表单”，或选择“插入”

31、栏上的“表单”类别，然后单击“表单” 图标 用鼠标选中表单，在属性面板上可以设 置表单的各项属性 表单 动作：在“动作”文本框中指定处理该表单的动态页 或脚本的路径。 方法：在“方法”下拉列表中，选择将表单数据传输 到服务器的方法 post 在 http 请求中嵌入表单数据。get 将值追加到请求 该页的 url 中。默认 使用浏览器的默认设置将表单数据发 送到服务器。通常，默认方法为 get 方法。不要使用 get 方法发送长表单。url 的长度限制在 8,192 个字符以内。如 果发送的数据量太大，数据将被截断，从而导致意外的或失 败的处理结果。而且，在发送机密用户名和密码、信用卡号 或其

32、他机密信息时，不要使用 get 方法。用 get 方法传递 信息不安全 表单 目标 在“目标”弹出式菜单指定一个窗口，在该窗口 中显示调用程序所返回的数据。如果命名的窗口 尚未打开，则打开一个具有该名称的新窗口。目 标值有： _blank，在未命名的新窗口中打开目标 文档。 _parent，在显示当前文档的窗口的父窗口 中打开目标文档。 _self，在提交表单所使用的窗 口中打开目标文档。 _top，在当前窗口的窗体内 打开目标文档。此值可用于确保目标文档占用整 个窗口，即使原始文档显示在框架中 表单 表单的应用 表单 创建图形化“提交”按钮 插入表单对象图像域或者单击“表单” 面板中的“图像

33、域”按钮 选择图像源选定用作按钮的图像确定 选中图片在属性面板中将“图像区域” 文本框修改为“提交”或者“重置 ”， “提交”通知表单将表单数据提交给处理应 用程序或脚本，“重置”将所有表单域重置 为其原始值 样式表 css是cascading style sheets的简称，中文 译作层叠样式表单 层叠样式表 (css) 是一系列格式规则，它们 控制网页内容的外观。使用 css 可以非常灵 活并更好地控制具体的页面外观，从精确的 布局定位到特定的字体和样式。 可以方便地为网页中的各个元素设置背景颜 色和图片并进行精确的定位控制；可以为网 页中的元素设置各种滤镜 样式表 在dw mx 2004

34、的css样式里包含了w3c规 范定义的所有css1的属性，把这些属性分为： 类型、背景、区块、方框、边框、列表、定 位、扩展等八个部分 dw mx 2004 实现css属性设置功能是完全 可视化的，无需编写代码 样式表 创建新的创建新的 css 规则规则 在css 样式面板中，单击面板右下角的新 建 css 规则。 样式表 在“新建 css 规则”对话框中，从“选择器 类型”选项中选择“类”。该选项应该是默 认选中的，在“名称”文本框中输入名称 样式表 出现css 规则定义对话框 样式表 字体：选择字体，如果没有需要的字体，可以编辑字 体列表 大小：设置字体大小，好看的中文字大小有12象素 （

35、px）和9点数（pt）两种 行高：行高是一行文字与另一行文字之间的距离，为 了方便阅读，行高设置大点吧。可以设置在15像素到 25像素之间。实例中使用20像素 修饰：对于普通文本，选择无。对于链接，可以选择 下划线，上划线加下划线，无等几种 颜色：黑色最适合阅读，其次就是灰色，白色。链接 默认的蓝色，如果整个页面都是链接，使用蓝色根本 起不到分辨的作用。建议页面不要使用默认的蓝色 样式表 修改样式表 在css样式面板中，单击“编辑样式”单选按钮， 再点击右下角的“编辑样式表”按钮 样式表 应用css样式 在网页中选中需要套用的css样式的对象 单击“css样式”面板中需要套用的css样式，即

36、可将该样式设置的格式套用的选定的对象上 样式表 对超链接风格进行设置 在“新建样式”对话框中选择 “使用css选择 器”，可以看到标签里出现四个选择项 样式表 a:active表示鼠标点击链接时链接风格； a:hover表示鼠标指向链接但未点击时的链接 风格； a: link表示超链接的文本在链接未被访问时 的风格； a:visited表示链接被访问过后的风格。 样式表 css滤镜 样式表 1.alpha：设置透明度。 语法：alpha(opacity=?, finishopacity=?, style=?, startx=?, starty=?, finishx=?, finishy=?)

37、“alpha”指一个元素的透明度。 opacity代表透明度程度。默认的范围从0到100。0代表完全透 明，100代表完全不透明。 finishopacity是一个可选的参数。如果想要设置渐变的透明效 果，就可以使用它来指定结束时的透明度。范围也是从0到100. style参数指定了透明区域的形状特征。其中0代表统一形状，1 代表线形，2代表放射状，3代表长方形。 startx和starty代表渐变透明效果的开始x和y坐标，单位为数值。 finishx和finishy代表渐变透明效果的结束x和y坐标，单位为数 值。 2. blendtrans：转换 语法：blendtrans(duration

38、=?) duration转换时间，单位是秒。 样式表 3. blur：模糊 语法：blur(add=?, direction=?, strength=?) add参数是一个布尔判断“true（默认）”或者“false”。它指 定图片是否被改变成模糊效果。后面输入true或者false。 direction参数用来设置模糊的方向。其中0度代表垂直向上，然 后每45度为一个单位。它的默认值是向左的270度。角度方向 的对应关系如下： 0：向上 45：右上 90：右 135：右下 180：下 225：左下 270：左 315：左上 strength参值只能使用整数来指定。它代表有多少像素的宽度 将受

39、到模糊影响。默认值是5像素。对于网页上的字体，如果设 置它的模糊“add”为1，那么这些字体的效果会非常好看。 样式表 4. chroma 语法：chroma(color=?) 使用chroma属性可以设置一个对象中的颜色为透明色。 这个属性只有一个参数color，颜色的表示方法，为rrggbb。 5dropshadow 语法：dropshadow(color=?, offx=?, offy=?, positive=?) dropshadow就是添加对象的阴影效果。它的效果就像使原来 的对象离开页面，然后在页面上显示出该对象的投影。其实它 的工作方法就是建立一个偏移量，加上较深的颜色。 col

40、or代表投射阴影的颜色。单位是rrggbb。 offx和offy就分别是x方向和y方向阴影的偏移量。必须用整数。 positive参数是一个布尔值，如果值为“true（非0），那么就 为任何的非透明像素建立可见的投影。如果值为“false（0）”， 那么就为透明的像素部分建立可见的投影。 如果有一个透明的对象可是仍然想要使用普通的投影效果，那 么把positive参数设置为0。此时透明对象会在整个透明区域以 外的地方出现投影效果，而不是在透明区域内。 样式表 6. fliph 语法：fliph fliph是一个水平翻转对象的滤镜属性。 7. flipv 语法：flipv flipv为对象制作一

41、个垂直的镜像，因而使对象在垂直方向上实 现翻转。 8glow 语法：glow(color=?, strength=?) 当对一个对象使用glow后，这个对象的边缘就会产生类似发光 的效果。 color是指发光的颜色。单位rrggbb。 strength则是强度的表现，可以从1到255之间的任何整数值来指 定这个力度值。 9. gray 语法：gray gray把一张图转变为灰度图。 样式表 10. invert 语法：invert invert属性把对象的可视化属性全部翻转，其中包括色 彩、饱和度和亮度值。这就是平时所称的“底片”或者 “负片”效果。 11light 语法：light ligh

42、t属性模拟光源的投射效果 12. mask 语法：mask(color=?) mask属性可以为对象建立一个覆盖于表面的膜。color 的值可以使用rrggbb的形式。 样式表 13. revealtrans 语法：revealtrans(duration=?, transition=?) revealtrans能产生24种效果。 transition：是切换方式，它有24种方式 矩形从大至小 0 随机溶解 12 矩形从小至大 1 从上下向中间展开 13 圆形从大至小 2 从中间向上下展开 14 圆形从小至大 3 从两边向中间展开 15 向上推开 4 从中间向两边展开 16 向下推开 5 从右

43、上向左下展开 17 向右推开 6 从右下向左上展开 18 向左推开 7 从左上向右下展开 19 垂直形百叶窗 8 从左下向右上展开 20 水平形百叶窗 9 随机水平细纹 21 水平棋盘 10 随机垂直细纹 22 垂直棋盘 11 随机选取一种特效 23 transition是切换时间，以秒为单位。 样式表 14. shadow 语法：shadow(color=?, direction=?) shadow属性在指定的方向建立物体的投影。 color是投影的颜色，direction是投影的方向，单位为角度数值。0代表垂直向 上，90代表向右。在blur滤镜部分有讲解。 15. wave 语法：wav

44、e(add=?, freq=?, lightstrength=?, phase=?, strength=?) wave属性把对象按照垂直的波形样式打乱。 add表示是否要把对象按照波形打乱。这个默认值是“true（非0）”，也就 是打乱对象。也可以修改它的值为“false（0）”。 freq是波纹的频率，也就是指定在这个对象上面一共需要产生多少个完整的 波纹。 lightstrength参数可以对波纹增强光影的效果。它的参数值范围是从0到100 的整数值。 phase参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0，它的值 从0到100之间。 strength代表波的振幅大小。值为数值。

45、 16. xray 语法：xray xray可以让对象反映出它的轮廓并把这些轮廓增亮。 动态网页制作 web服务器 web服务器介绍 web服务器也称为www(world wide web)服务器，主 要功能是提供网上信息浏览服务 iis（internet information server）作为当今流行的web服务 器之一，提供了强大的internet和intranet服务功能 web服务器的功能 （1）信息的发布 信息发布是最基本的应用，行政机关、企事业单位甚至个 人，都可以借助web服务发布各种各样的信息，例如时事新 闻、法律法规、科普知识、技术文档、产品图文等。这些能 使用户及时地了

46、解到各种各样的信息。 （2）充当其他网络服务的平台 在信息发布的基础上可以延伸出电子商务、资料查询、网 络图书馆，bbs、网络学校、办公自动化、web电子邮件， 甚至视频点播（vod）等，只是这些应用的交互性更强，并 且必须受到网络数据库的支持而已。 iis 5.0建web服务器 安装iis 步骤1：单击“开始”，指向“设置”，单击“控 制面板”，然后启动“添加/删除程序”应用程序。 iis 5.0建web服务器 安装iis 步骤2：选择配置windows，单击组件按钮，在 【windows组件向导】对话框中，选择【internet信 息服务】组件，单击【详细信息】进行进一步设置， 例如ftp

47、服务、smtp服务、www服务通常可以选 装。单击【下一步】，从windows2000安装光盘中 拷贝所需文件 iis 5.0建web服务器 安装iis iis 5.0建web服务器 iis的配置 步骤1：开始管理工具internet 信息服务(iis) 管理器“，打开iis管理器 iis 5.0建web服务器 iis的配置 步骤2：在“本地计算机网站默认网站”上右键 单击，在快捷菜单里选“属性”（或者直接在操作菜 单下选“属性” ） iis 5.0建web服务器 iis的配置 网站配置： 设置服务器ip地址 如果不设置地址的 话，默认为 localhost iis 5.0建web服务器 ii

48、s的配置 主目录配置：切 换到“主目录” 标签，重新选择 网站根目录 （默 认是系统 盘:inetpubwww root ） iis 5.0建web服务器 iis的配置 默认文档配置：再切换到文档标签，通过添加、 删除、上移、下移，把站点的默认文档设置如 图所示 iis 5.0建web服务器 iis的配置 虚拟目录设置 选择“internet 服务管理器”，展开后在“默认 web 站点”(或默认网站)点鼠标右键，选择“新 建虚拟目录” ，如下图 iis 5.0建web服务器 iis 5.0建web服务器 虚拟目录设置 输入别名（用字母命名），指定该别名对应的网页所 在的目录 配置完成后可以在浏

49、览器的地址栏输入： /别名 http:/localhost/别名 http:/主机ip/别名 的方式来访问建立的网站 iis 5.0建web服务器 重新设置dw的站点 原来建立的站点是针对静态 网页制作的，如果要制作动 态网页的话，必须要修改原 有的设置 打开dw选择“站点”菜 单选择“管理站点”打 开“管理站点对话框” 选择需要更改的站点名称 点击编辑按钮 iis 5.0建web服务器 重新设置dw 的站点 1.“分类”选项中 选择“测试服务 器” 2.“服务器模型”选 项选择“asp vbscript” 3.“访问”选项中 选择“本地/网络” 4.“url前缀

50、”选项中输 入“http:/localhost/别 名/” 5.点击“确 定”完成设 置 数据库准备 1，首先确认站点根目录下有专门的数据库存 放目录 ，比如d:tc下面的database文件夹（数 据库文件最好单独存放在一个文件夹中） 2，打开microsoft access，选择“文 件”“新建.”数据库，在弹出的对话框中选 择存放路径并命名 数据库准备 数据库准备 3，在新建的数据库中“使用设计器创建 表”，弹出的“表1”中设计你的相关字段， 注意各自的“数据类型”，还有一点很重 要：字段id，类型自动编号，并选择它定 为主键 数据库准备 数据库准备 4，设计完“表1”后，直接关闭该窗口

51、，在弹出 对话框中点击“是”保存“表1”命名为user 注意：刚刚强调的设置字段id相关是必须的， 否则在保存之后还会出现如下对话框，其效果 还是设置类型是自动编号的关键字段 数据库准备 5，数据库表user已经建立完毕 数据源的连接 web 应用程序与“记事本”或其它任何应用程 序一样，在试图访问未知格式的数据时面临同 样的问题：应用程序无法解释这些数据。这就 需要在 web 应用程序与数据库之间存在一个 软件接口，以允许应用程序和数据库互相进行 通信。 三种常见接口可以使应用程序与数据库进行通 信。第一种称为“开放式数据库连接”（或 odbc）；第二种称为 ole db（对象链接和 嵌入数

52、据库）；第三种称为“java 数据库连 接”（或 jdbc）。 数据源的连接 asp 应用程序必须通过开放式数据库连接 (odbc) 驱动程序（或对象链接）和嵌入式数 据库 (ole db) 提供程序连接到数据库。该驱 动程序或提供程序用作解释器，能够使 web 应 用程序与数据库进行通信。 两种连接方法：使用数据源名称 (dsn) 或连接 字符串连接到数据库。 数据源的连接 dsn 是单个词的标识符（如 myconnection）， 它指向数据库并包含连接到该数据库所需的全部 信息。可以在 windows 中定义 dsn。如果通过 安装在 windows 系统上的 odbc 驱动程序进行 连

53、接，则可以使用 dsn。 连接字符串是手动编码的表达式，它标识数据库 并列出连接到该数据库所需的信息，如： driver=microsoft access driver (*.mdb);dbq= dbq= & server.mappath(/tc/data/database.mdb) 3.选择连接方式 4.完成设置 成功连接数据库后，在dw里其实是自动生成了 一个连接文件。位置在自动生成的connections 文件夹中，名称是在“自定义连接字符串” 命 名的asp文件。还可以注意到dw数据库标签内 看到mdb文件内的各个字段。 使用dw创建用户注册系统 使用dw创建用户注册系统 1， 在站点

54、里打开以前建立的用户注册文件在站点里打开以前建立的用户注册文件 regist.asp用来做注册页面用来做注册页面 使用dw创建用户注册系统 2、切换到切换到“服务器行为服务器行为”标签，单击标签，单击“+”按钮，按钮， 选择选择“插入记录插入记录”。 1.应用程序面板 2.服务器行为标签 3.单击“”按钮 4.“插入记录”选 项 使用dw创建用户注册系统 3、配置弹出的“插入记录”对话框 1.选择连接文件 2.选择要插入的表格 3.输入插入成功后转 到的页面 4.将表单元素与表格 中的列对应 5.完成配置 使用dw创建用户注册系统 完成用户注册页面的制作 使用dw创建用户登录页面 1、在站点里

55、新建一文件、在站点里新建一文件login.asp用来做登录用来做登录 页面页面 使用dw创建用户登录页面 2、选择“应用程序”面板“服务器行为” 中“+”“用户身份验证”“登录用户” 使用dw创建用户登录页面 3、弹出的对话框中进行具体的设置 1.选择连接验证中 已建立的连接名称 2.选择用户数据的 表格，以及用户名 和密码所对应的列 3.设置登录成功或 失败后打开的页面 地址 4.设置登录时验证 的选项 使用dw创建用户登录页面 4、创建登录成功和失败时打开的页面文件 登录失败：loginerror.asp登录成功：welcome.asp 使用dw创建受限页面 1、打开welcome.asp

56、页面 使用dw创建受限页面 2、选择“服务器行为服务器行为”“身份验证身份验证” “限制对页的访问限制对页的访问” 使用dw创建受限页面 3、按“用户名和密码”进行限制，拒绝则跳 转到“loginerror.asp” 使用dw显示数据库中的数据 1、打开welcome.asp页面 使用dw显示数据库中的数据 2、选择“绑定”标签，添加“记录集（查 询）”。 使用dw显示数据库中的数据 3、在弹出的“记录集”对话框中进行设置 1.名称可随便起 2.选择定义的连 接名称 3.选择用户数据 所在的表 4.选择需要选取 的表列 5.选择数据筛选 条件 6.选择数据排序 方式 使用dw显示数据库中的数据

57、 在筛选条件中选择“name”字段，条件为 “”，类型为“阶段变量”，名称为 “mm_username” 其中“mm_username”为变量名，在用户登 录成功后保存在“阶段变量”中的“用户名” 信息 以上表示在数据库表“user”中，选择所有 “name”列的值等于登录用户的用户名的记录 使用dw显示数据库中的数据 4、确定后，会发现记录集已经绑定，所有数 据库中的字段都显现出来 使用dw显示数据库中的数据 5、将光标移动到页面的合适位置，选中需要 在页面中显示的字段名称，点击下面的“插入” 按钮，该asp页面就显示数据库里面内容了。 使用dw显示数据库中的数据 6、成功登录到 welco

58、me.asp页面后， 呈现的内容如图所示 使用dw显示数据库中的数据 以上显示的只是符合筛选条件的记录集中的一 条记录，在本例中符合筛选条件的记录只有一 条，多条记录的显示将在后面的例子中介绍。 使用dw修改数据库中的资料 修改资料！首先要清醒一点，什么人才可以 修改。 一，本人只能修改自己的； 二，管理员可以修改所有人的。 使用dw修改数据库中的资料 1、打开welcome.asp页面，将插入点移到页 面下端空白行中选择“服务器行为” 选择“转到详细页面” 使用dw修改数据库中的资料 2、设置“转到详细页面”对话框 1.输入地址“useredit.asp” 将在该页面中修改用户资 料 2.选

59、择“id”列作为传 递url参数的值 使用dw修改数据库中的资料 设置完成后页面中会出现“详细信息” 超级 链接的文字 在预览状态下，点击该文件可以打开 useredit.asp页面，并在该页面中修改用户资 料 下面再开始制作useredit.asp页面 使用dw修改数据库中的资料 3、在dw中选择“新建”一个“asp vbscript”的动态页，保存文件名为 “useredit.asp”。 该页面将用来作为用户修改资料的页面 使用dw修改数据库中的资料 4、选择“应用程序”面板“绑定”（或 “服务器行为”）标签“”号按钮“记 录集（查询）” 使用dw修改数据库中的资料 5、设置“记录集”对话

60、框 1.记录集名称可随 便起 2.选择已建立的连 接名称 3.记录集筛选条件 设置分别为“id”； “”；“url参 数”；“id” 使用dw修改数据库中的资料 6、选择“插入”面板“应用程序”标签 “更新记录表单向导” 使用dw修改数据库中的资料 7、设置“更新记录表单”对话框 1.选择连接名称 2.填写更新成功 后打开的页面文 件所在的路径 3.删除id字段， 因为id字段为自 动编号，无法更 新 使用dw修改数据库中的资料 8、设置完成后页面如图所示 使用dw修改数据库中的资料 9、完成editok.asp页面的制作 使用dw修改数据库中的资料 显示效果如图所示： 使用dw制作新闻发布系