Dreamweaver网页设计与制作指南-第18章.ppt

本章介绍用ASP开发的一个查询网站的制作流程 包括分析网站的构思 结构策划 配置ASP开发环境 建立本地站点 创建并连接数据库文件 本章重要知识点 如何查看站点地图创建数据库以及建立数据库连接文件 第18章查询网站的制作 如何制作表单以及表单中各元素属性的设置设置请求变量如何使用程序设置段落换行制作信息分页框架页的使用及应用 18 1构思意图 按客户的需求 该查询网站定位为 吉林查询网 即将吉林省中的企业按区域划分 并按地区分配二级域名 通过该网站可以让企业免费加入查询网 并通过增值服务为企业生成名片 方便查询不同地区不同类别的企业名称 为企业与企业之间 客户和企业之间提供了开放式的平台 18 2结构设计及布局设置 在定位了网站的构思策划以后 就要对网站的整体结构进行设置 并通过图片和文字等基本元素对网站进行相应的布局设置 18 2 1网站结构设计 在正式制作网站之前 首先进行网站目录结构的策划与分析 然后进行网站布局的设置 以方便对网站进行管理和更新 18 2 2网站布局设置 界面采用简单的设计 为不同地区的查询分站设置不同的Logo和Banner 页面布局采用左右结构 左侧栏放置企业的类别 右侧放置明星企业以及推荐企业 18 3分析站点地图 为该网站所有的目录建立一个站点 使得ASP文件可以在浏览器中运行 首先要在DW8中配置ASP的运行环境 下面补充介绍如何查看站点中各页面之间的超级链接 18 4数据库分析 制作ASP的网站 必须应用数据库才能完成整个网站数据的更新 查询 编辑等操作 本例使用的是Access数据库jlcx mdb 使用了 admin dengji entercard 3个表 18 5制作CSS样式 在制作网站之前 首先要为网站定制相应的CSS样式 建立CSS样式表 本例中所使用的CSS样式表有main css和style css 前一个应用首页和分站及查询模板 后一个应用于后台管理及企业名片样式 18 6准备网页素材和制作软件 在制作网页过程中 需要使用的软件有UleadGIFAnimator和Photoshop 因本例所实现的主要是查询功能 因而在界面美化方面没有过多的要求 主要让浏览者使用方便 操作快捷 18 7配置ASP环境 制作ASP的网站 首先要指定硬盘中的某一文件夹为本地站点 并在DW8中配置站点的相关参数 18 8创建数据库 运行Access软件 为本例创建数据库及数据表 18 8 1建立jlcx mdb数据库 本节建立jlcx mdb数据库 18 8 2建立admin数据表 本节建立admin数据表 18 8 3建立dengji数据表 本节建立dengji数据表 18 8 4建立entercard数据表 本节建立entercard数据表 18 8 5定义数据表初始值 新建的数据表中值都为空 为了设计的需求 先将数据表设置初始值 18 9制作数据库连接文件 在DreamweaverCS4中可以自定义数据库连接 18 10制作网站首页index htm 网站的首页用静态HTML设计 应用ASP技术制作的网站只需将调用程序和脚本的文件制作成为 asp文件即可 18 11制作 关于我们 页面about htm 在网站中 关于我们 诚征代理 广告服务 均为静态页面 同用一个网站界面模板 将Photoshop中制作的界面用ImageReady切割成为网页 18 11 1切割图片为网页 在切割图片的过程中 注意图片的整体分割与局部分割相结合 让界面中的图片大小合适 又不至于太零散 因为本书第15章 16章已经详细介绍了静态页面的制作流程 在此不再重复介绍页面的具体制作过程 18 11 2设置网页标题和页面属性 本节设置网页标题和页面属性 18 11 3从外部导入CSS样式 本节从外部导入CSS样式 18 11 4新建CSS链接样式 本节新建CSS链接样式 18 11 5设置文本内容 本节设置文本内容 18 11 6设置尾部版权信息 本节设置尾部版权信息 18 12制作企业登记页面 现在开始制作有ASP程序的页面 首先制作为企业提供免费登记的页面EnterReg asp 18 12 1新建文档 本节新建文档 18 12 2制作登记表格 本节制作登记表格 18 12 3制作表单 接下来在表格中插入表单 18 12 4设置表单属性 本节设置表单属性 18 12 5插入包含文件 本页需要与数据库相连接 因此在页面中必须插入数据库连接文件 18 12 6设置请求变量 本节设置请求变量 18 12 7制作脚本文件 在登记表中有几项文本框是必填项 需使用一段Java脚本文件来进行说明 当读者没有填写这几个必填项时 弹出提示这段代码需插入在之前 18 13制作分站信息显示页面 从网站的首页进入各分站后 显示该地区的企业信息 还有 明星单位 和 最新加入企业 左侧是企业的分类 18 13 1定义变量 界面的模板与前面的静态页相同 其实每个地区的页面都是相同的 只是Logo和Banner都分别定义了变量 在实际页面中采用程序调用的方式 18 13 2设置网页标题 每一个地区的标题都是从变量中提取的 18 13 3设置Logo和Banner图像属性 在之前已经定义好了Logo和Banner图片名称的变量 在制作中只需设置变量名称以及设置好图像的大小即可 设置分站Logo图像的源文件为 images gif 18 13 4制作左侧栏 本节制作左侧栏 18 13 5制作搜索栏 本节制作搜索栏 18 13 6制作页面中部信息 在页面正中位置制作信息显示 此处显示 滚动公告 明星单位 及 最新加入企业 滚动公告明星单位最新加入企业 18 14制作企业信息显示页面 单击企业名称 显示的页面是从数据库中按企业在数据库中的id编号显示 本页由之前制作好的静态页面另存生成 保存文件名为 ShowEnter asp 在文档代码第一行插入包含文件 18 14 1数据库查询 在制作页面内容之前 先要在标签中制作数据库查询语句 18 14 2企业信息表格 在右侧正文部分制作企业信息表格 18 14 3制作段落换行脚本 在记录显示中因为单位简介的内容比较多 可能会存在分段的情况 在文档代码中 设置代码让该记录可以按发布的样式分段显示 在中插入代码 18 15企业名片页面 在登记企业时 如果有网址 即显示企业网址 如果没有 吉林查询网 为用户提供了付费企业名片 在付费后单击 企业名片 链接 即可显示其信息 18 16 1制作页面 在搜索框中输入关键字 制作查询结果页面与index jl asp的制作方法基本相同 只是将明星单位滚动显示移到左侧栏 中间部分显示查询结果 是明星企业的的优化显示 并用符号 作为标记 普通企业在记录前用方框图标作为标记 18 16 2制作分页 制作分页 18 17后台管理登录页面login asp 所有的信息都可以在后台进行添加 修改 删除等管理 本站的后台功能包括 地区管理员维护 企业资料维护 企业名片管理 管理员密码维护 下面分别加以介绍 18 18后台管理首页admin index asp 在login asp登录成功后 转入后台管理首页 admin index asp 该页由左右框架页组成 18 19案例扩展 本章案例详细讲解了 吉林查询网 的制作过程 相信读者对于使用ASP制作网页的流程有了一定的认识 应用ASP制作本例的网站还只能算是一个比较简单的操作 在制作好网页以后 还要进行以下的操作 才能让网站在互联网上能够正常访问 18 19 1测试网站链接 打开 文件 面板 选择文件index htm 单击鼠标右键 在弹出的菜单中选择 检查链接 选择文件 文件夹 命令 18 19 2申请域名和空间 每个网站都要自己的独立主机和服务器 域名也必须是唯一的 有了域名 才会让网站在无边无际的互联网中占有一席之地 就比如人有了名字 可以让别人记住你 申请域名配置二级域名申请空间 18 19 3配置FTP站点属性 在DreamweaverCS4中可以直接进行FTP上传下载 18 19 4更新网站信息 在本案例中 在前台可以让用户通过EnterReg asp自助登记企业信息 由管理员在后台将企业审核通过 使其成为正式用户 在后台也可以进行添加企业的资料 增加企业名片 以及对企业资料的修改 删除 添加等操作 18