电子商务第6章.ppt

6 2设计表单网页 返回主目录 第6章网页制作及其工具 6 1网页制作与FrontPage6 1 1Web页面电子商务最重要的一个环节就是在网上发布信息 掌握网页制作技术是网上发布信息的必要条件 用于网页制作的工具很多 如Dreamweaver Flash Fireworks FrontPage等 对于网页制作的初学者来说 FrontPage被认为是最容易掌握的一个网页制作工具 而且 其效果也相当不错 因此 本章主要介绍用FrontPage制作Web页面 网页是用HTML 超文本标识语言 在文本文件中加入标记以 Htm或者 html保存的文件 但 Htm或者 html与Word生成的 doc文档不同 后者包含了插入的图片和其它对象 可以自由地移动和发布 而网页是纯文本文件 它并不包含插入其中的图片等对象 它只是将插入对象的位置告诉浏览器 而后由浏览器来定位和显示 所以 如果在网页中插入了图片或者其它对象 一定要将这些图片文件与网页一起发布 否则网页将不能正常显示 如果在网页中有一个链接指向本地的另一个网页文件 也要把这个图片文件与该网页文件一并发布 否则 当点击这个链接时 浏览器将找不到要跳转的目标文件 6 1 2如何制作页面FrontPage是微软公司推出的Web站点创建和管理工具 它包含以下几项功能 创建 设计和管理整个Web站点 所见即所得 地制作Web页面 将计算机配置为Web服务器 通过Internet或Intranet对外发布Web页面 处理Web页面中图像 FrontPage的扩展功能 1 启动主页制作工具 在Window98 NT 2000系统中安装FrontPage后 将生成一个 MicrosoftFrontPage 快捷菜单 选择此菜单可以执行FrontPage2000 进入FrontPage的普通网页编辑器后 出现如图6 1所示的FrontPage窗口 这个窗口有点象Word窗口 实际上微软是把FrontPage作为Office中的一部分来发布的 所以FrontPage和其它成员有类似的界面 不过 在Word中处理的是文档 在FrontPage中处理的是页面 至于工具栏的使用 其它的编辑操作和剪贴板功能 则与Word中的用法几乎是一样的 图6 1FrontPage窗口 2 制作简单的页面1 输入文字输入文字的步骤如下 1 按工具栏上的按钮 新建一个空白网页 2 在网页中键入文字 其使用方法与其它字处理软件相同 3 设置文本的格式 用鼠标选定一块文本后 可以用来调整对齐方式 用来改变文本字体效果 其它用来更改文本颜色及文字大小的工具均与Word中的相同 4 保存网页 指定保存的路径和文件名 一个纯文本的网页就编成了 新建一个网页应马上保存文件 并为本次工作专门建立一个目录 把相关的文件都保存在该目录中 可以在目录中再建立下一级的子目录 如imge子目录专门存放网页中的图片 down子目录存放下载文件 sound子目录存放声音文件等 这样 在以后发布主页时只要将工作目录中的文件和子目录一并上载即可 需要注意的是 回车时的设置和Word有所不同 Shift Enter为行回车 而直接按Enter则是段落回车 段落回车后的两行之间会插入一个空白行 在键入中文字符的时候 最好将字体设置为宋体 因为有的浏览器只支持宋体中文字符的显示 如果使用其它字体 则可能出现乱码 2 插入图片将光标移动到页面要插入图片的位置 选择 插入 图片 菜单 其选择方法与在Word中的相同 如果直接点击图像工具栏按钮 就会出现如图6 2所示的对话框 可以直接键入图片的所在位置 如果在网页中插入了图片 在发布网页时一定要将图片放在一起 而且还要保持网页文件和图片文件的相对路径不变 否则网页中的图片将不能正常显示 如果在工作目录下建立了一个子目录专门存放图片 这样就不会出现相对路径改变的情况 注意 制作网页时不要在网页中插入过多的图片 否则由于网络通信带宽有限 会造成用户等待下载网页的时间过长 图6 2选择图片对话框 3 插入表格FrontPage提供了强有力的表格制作功能 将光标移动到要插入表格处 选择 表格 插入 表格 菜单 可直接插入新的表格 弹出的对话框如图6 3所示 将其中的 边框粗细 设置为0 则在网页中不显示表格的边框 但在编辑时可以看到虚线的边框 这只是为了便于编辑 使用户在浏览器中看不到表格的边框 4 插入超链接超链接是FrontPage非常重要的概念 超链接可以有效而又清晰地组织网页 并让访问者方便地浏览相关信息 图6 3 插入表格 对话框 其跳转的目标通常是另一个网页 但也可以是一个图像 E mail地址 Office文档 书签 甚至是一个程序 超链接的载体可以是文字 也可以是图像 超链接的本质就是URL URL可以理解为文字或者资源的地址 URL可以是绝对的 也可以是相对的 所谓绝对的URL 就是完整地给出协议种类 如HTTP FTP 服务器的主机名 路径和文档名四大部分 如 当访问者单击一个超链接 Web浏览器就根据超链接所指示的URL从相应的位置检索文档 如果成功的话就显示出来 如果超链接跳转的目标不是网页而是其它类型的文件 Web浏览器就会自动运行相应的程序以打开文件或者让用户下载文件 要建立超链接 首先要在网页中选择要作为超链接载体的文本或者图像 然后使用 插入 菜单上的 超链接 命令 FrontPage编辑器将打开 创建超链接 对话框 如图6 4所示 图6 4 创建超链接 对话框 6 2设计表单网 6 2 1提交表单提交表单是使用最为普遍的一种表单 顾名思义 提交表单就是把用户填写的内容提交到服务器上 在FrontPage2000里 设计表单要用到的对象作为一组页面元素放置在 插入 菜单里 单击 插入 菜单 选择 表单 选项 就会打开一个子菜单 里面列出常用的表单元素 如单行文本框 滚动文本框 复选框 单选按钮 下拉菜单 按钮等 这些对象在表单里称之为 表单域 当在网页中插入第一个表单域的时候 FrontPage会自动创建一个表单 在表单的周围 有一个虚框 这是表单的边界 表单的边界就起到区分表单与网页上其它内容的作用 根据需要用户填写或者选择的内容在网页上添加各种表单域 可以组成各种各样的提交表单 注意 当插入点在表单边界以外 将会创建另外一个表单 因此 在向表单里加入新的表单域时要注意光标的位置是否在表单边界以内 1 单行文本框文本框是表单中收集信息的主要工具 根据用户输入信息的多少 可以分别采用单行文本框和多行文本框 当只需要输入姓名 民族 电话号码等简单信息的时候 往往采用对话文本框 从 插入 菜单的 表单 子菜单中单击 单行文本框 按钮 就会在网页上插入一个单行文本框 如果网页上还没有表单 将会自动创建一个表单 并加入 提交 和 重新填写 按钮 用鼠标右键单击文本框 在快速菜单中选择单击 表单域属性 选项 打开如图6 6所示的对话框便可进行单行文本框的设置 文本框的 名称 是每个表单域的标志 在服务器程序中处理表单时使用这个名称来调用文本框里的内容 初始值 是当网页浏览时就在文本框里出现的默认文字 宽度 是规定的文本框的显示宽度 而不是输入文字的宽度 Tab键顺序 是指定在按动 Tab 键时 光标在表单域之间切换的顺序 如果要建立一个输入密码的文本框 只要选中 密码域 栏中的复选框 是 则用户键入的任何字符都显示为 2 滚动文本框如果需要输入比较多的文字 可以选择滚动文本框 它的使用方法和单行文本框的选择方法相类似 所不同的是在属性设置里没有 密码域 而多了显示行数的设置 3 复选框对于需要用户进行选择的情况 可以使用 复选框 和 单选按钮 来制作选择题 同样地 从 插入 菜单的 表单 子菜单中单击 复选框 选项 就在网页上插入了一个复选框 可以在复选框的旁边加入文字以表明复选框的内容 用右键单击复选框 在快捷菜单中选择 表单域属性 选项 可以打开如图6 7所示的复选框属性设置对话框 图6 7复选框属性 复选框中 名称 和 Tab键顺序 的设置和文本框中的设置是一样的 值 是指要发送到服务器的复选框所对应的数值或内容 可以在输入框里输入指定的值 初始状态 是指定默认情况下复选框是否被选中 4 单选按钮单选按钮的使用方法与复选框的使用方法相类似 所不同的是单选按钮的名称是 组名称 因为单选按钮的功能是在几个选项里指定一个选项 那么这几个选项就是一个组 它们共同使用一个组名称 同组的单选按钮只能有一个被选中 5 下拉菜单通过表单的下拉菜单还可以为用户事先定义好一系列选项 在下拉列表或者滚动列表中显示 由用户进行选择 从右键的快捷菜单中的 表单域选项 可以打开如图6 8所示的下拉列表属性对话框 如果设定 高度 大于1 则就会显示一个滚动列表 允许多重选项 指定列表是否可以同时选择多个选项 单击 添加 按钮可以设定一个列表项目 对话框如图6 9所示 在 选项 中输入列表中显示的文字 在 指定值 中输入要发送到服务器上的值 在 初始状态 栏指定该选项的默认选择状态 图6 8下列菜单属性 图6 9添加选项 6 按钮表单所要用到的按钮有两个 提交 按钮和 重新填写 按钮 在插入第一个表单域的时候 就会自动建立这两个按钮 用右键单击按钮 在快捷菜单中选择 表单域属性 选项 可以打开如图6 10所示的 按钮属性 对话框 在 值 标签 中指定的是在按钮上显示的文字 按钮类型 用来设置按钮的功能 普通 按钮是用来配合脚本语言 如JavaScript 使用的 提交 按钮将表单的内容发送到服务器上 重置 按钮将表单里所有表单域的内容恢复到默认状态 注意 表单是网页的一部分 同样可以加入文字等内容 在制作表单的时候 要正确加入需要的表单域 将它们在网页上合适地排列 并配合文字等内容 组成一个清楚而美观的表单 图6 10按钮属性 7 提交表单的属性设置为了使表单的信息能上传到服务器 仅有 提交 按钮是不够的 还必须指定表单提交的目的地 可以将表单的内容保存在当前站点的一个文件里 或是将表单信息发送到指定的E mail地址 也可以把表单的内容发送给自己编制的一个表单处理网页或应用程序 指定表单发送目的地是在表单属性里完成的 设置提交表单属性的操作步骤如下 1 在表单边界内单击右键 在快捷菜单中选择 表单属性 选项 弹出如图6 11所示的对话框 图6 11表单属性 2 设置发送目标 表单信息可以发送到以下四种形式的对象中 一是发送到网站的一个文件保存起来 二是作为一份电子邮件寄到指定的E mail地址 三是把表单的数据保存到一个数据库里 四是发送到另外编制的表单处理网页或应用程序 在选中 发送到 单选按钮时 单击 选项 按钮 可以进行表单信息发送目标的设置 如图6 12所示 3 对保存表单信息的文件进行设置 在图6 12中 文件名称 指定将要保存表单信息的文件名 文件格式 选择信息以什么格式存放在文件里 可选的第二文件 指定另外一个存放表单信息的文件 图6 12保存表单属性 6 2 2搜索表单在FrontPage2000中提供了 搜索表单 组件 可以很方便地在网页中加入全文检索的功能 搜索表单实现的是对整个网站的所有文件进行全文检索 只要在搜索表单的搜索输入框里填上一个单词 单击 开始搜索 按钮 搜索表单就会自动搜索站点上所有文件的内容 查找与搜索单词相匹配的语句 并将搜索结果以超链接的形式列在网页上 以便用户选择浏览 建立搜索表单的操作步骤如下 1 启动FrontPage2000并新建或者打开站点 搜索表单组件必须在站点工作方式下才能插入到网页上 从 插入 菜单的 组件 子菜单中选择 搜索表单 选项 打开 搜索表单属性 对话框 如图6 13所示 图6 13搜索表单属性 2 设置搜索表单在网页上显示的属性 在图6 13所示的选项卡中要设置的是搜索表单在网页上的显示形式 输入框的标签 是出现在输入框左边的文字 用来提示用户输入搜索文字 以字符为单位的宽度 是指定输入框允许输入的最多的字符个数 还可以对两个按钮上的文字进行设置 单击对话框上方的 搜索结果 选项卡可以对搜索结果在网页上的显示形式进行一些指定 如图6 14所示 3 设置搜索结果列表在网页上的显示形式 显示形式包括是否显示匹配的程度 文件日期和格式 文件的大小