网页设计演讲教程ppt课件

1、网页设计教程2022/7/161本章要点配置动态效力器IIS建立建立动态站点创建动态页面创建数据库链接制造表单文档8.1动态站点概述何为动态？一种具有“交互性的页面效果，即网页会根据用户的要求和选择而动态改动和呼应。制造动态网页需求做的任务有：第一，要在个人电脑上调试动态网页。第二，运用数据库技术。第三，在Dreamweaver中建立动态站点。8.2配置IIS效力器1安装IIS效力器2设置IIS3测试ASP动态网页1安装IIS效力器1执行【开场】|【控制面板】命令，翻开【控制面板】。2双击【添加或删除程序】图标，翻开【添加或删除程序】窗口。3单击【添加/删除Windows组件】，翻开【Wind

2、ows组件导游】对话框。4选择【Internet信息效力IIS】复选项。5单击【下一步】按钮，开场安装IIS效力器。安装完成后的窗口如以下图所示。2设置IIS首先在D盘下面建立一个“liuyanban的文件夹，用来存放留言板动态页面文件。其次经过以下的步骤来设置站点虚拟目录：1从【控制面板】窗口翻开【管理工具】，在翻开的【管理工具】窗口中选择【Internet信息效力快捷方式】。2设置IIS2双击【Internet信息效力快捷方式】选项，在弹出的【Internet信息效力】窗口左边窗格中，右击【默许网站】项，在弹出的菜单中执行【新建】|【虚拟目录】命令，弹出【虚拟目录创建导游】窗口，如右图所示

3、。2设置IIS3单击【下一步】按钮继续。如左图所示，在【别名】下面的文本框中输入“liuyanban。单击【下一步】按钮继续。如右图所示，在【目录】下边的文本框中输入“D:liuyanban，或者单击【阅读】按钮找到D盘的“liuyanban文件夹。3测试ASP动态网页在【Internet信息效力】窗口右边的窗格中找到建立的ASP动态页面，右键单击后，在弹出的快捷菜单中选择【阅读】项即可，如图8-15所示。8.3创建留言板主页面8.3.1建立动态站点8.3.2创建留言板页面8.3.1建立动态站点1定义站点。8.3.1建立动态站点2选择效力器技术。8.3.1建立动态站点3选择存放的本地文件夹。8

4、.3.1建立动态站点4设置本机测试的URL。8.3.1建立动态站点5单击【下一步】按钮继续进展设置。由于是在本机测试，并不需求远程效力器参与，所以选择【否】项。8.3.1建立动态站点6单击【下一步】按钮继续。窗口显示了所填写的信息，确认一下。假设发现有错，可以单击【上一步】按钮前往修正设置，确认无误后就可以单击【完成】按钮。这时，动态站点就定义完成了，如今可以在Dreamweaver 8中进展动态网页的设计了。8.3.2创建留言板页面1创建留言板主页面ASP文档。2用表格规划留言板主页面。3选择这个表格，翻开【属性】面板，在其中设置表格及其单元格的宽度和高度。4拆分表格第1行右边的单元格，分成

5、两列。5在表格中插入一些显示元素。8.3.2创建留言板页面6先将images文件夹下的图片依次插入表格第一行最右边的单元格中，然后分别在每个单元格中输入相应的信息，如以下图所示。7最后再将整个表格的【背景颜色】设置为浅蓝色#66CCFF。8.4用Access 2003创建数据库 1创建空数据库文档2创建留言板用户信息表3创建管理员信息数据表1创建空数据库文档1新建一个名为data的文件夹，然后将空数据库文件保管在data文件夹下，文件名为liuyanban_data.mdb。1创建空数据库文档2单击【创建】按钮创建一个名为liuyanban_data的数据库文件，同时出现一个相应的数据库设计窗

6、口，如图8-30所示。1创建空数据库文档3双击【运用设计器创建表】命令，弹出一个表设计器窗口，如图8-31所示。表的构造设计将在其中完成。2创建留言板用户信息表1创建字段域。最后的结果如图8-33所示。2创建留言板用户信息表2设置用户信息数据表的主键字段。3设置字段属性。用户信息数据表设计完成以后，封锁表设计器窗口，可以看到数据库设计窗口中多了一个名字为yonghu的数据表，如以下图所示。3创建管理员信息数据表创建一个用来存储和管理留言板管理员的信息的数据表，名字为_guest，创建结果如以下图所示。最终的数据库设计窗口如以下图所示。8.5留言板的逐渐实现8.5.1创建数据库链接8.5.2留言

7、板主页面的动态效果8.5.3创建用户留言页面8.5.4在留言板主页面实现留言记录导航8.5.1创建数据库链接1定义系统DSN 数据源称号2经过DSN实现衔接1定义系统DSN 数据源称号1翻开【控制面板】，双击其中的【管理工具】图标，在转换到的【管理工具】窗口中可以看到一个【数据源ODBC】图标。2双击【数据源ODBC】图标，翻开【ODBC数据源管理器】对话框，切换到【系统DSN】选项卡，如下图。1定义系统DSN 数据源称号3添加一个新的系统DSN称号。单击【添加】按钮，弹出【创建新数据源】对话框，在其中选择“Driver do Microsoft Access(*.mdb)项，如下图。1定义系

8、统DSN 数据源称号4单击【完成】按钮以后，弹出【ODBC Microsoft Access安装】对话框，在其中定义数据源名并选取数据库文件。设置后如右图所示。1定义系统DSN 数据源称号5单击【确定】按钮，完成数据库的选择，这时的【ODBC Microsoft Access安装】对话框如以下图所示。6经过上面步骤的操作以后，在上图所示的对话框中就会显示一个新定义的数据源称号。2经过DSN实现衔接翻开留言板站点的主页面文档main.asp。在【运用程序】面板中的【数据库】面板下单击加号按钮，在弹出的下拉菜单中单击【数据源称号】项，如下图。2经过DSN实现衔接在【数据源称号】对话框的【衔接称号】

9、文本框中输入数据源衔接称号，在【数据源称号】下拉列表中选择名字为“liuyanban的DSN，其他参数坚持默许值，如下图。2经过DSN实现衔接单击【确定】以后，【数据库】面板就会出现新定义的衔接称号，单击它前面的加号按钮展开，可以看到留言板数据库中的两个表，如下图。这时就完成数据库和留言板站点的衔接了，衔接名是liuyb。8.5.2留言板主页面的动态效果1在【绑定】面板中定义记录集2将记录集中数据绑定到表格域1在【绑定】面板中定义记录集在Dreamweaver中翻开留言板站点主页面main.asp。翻开【绑定】面板，单击加号按钮，在弹出的下拉菜单中执行【记录集查询】命令，如下图。1在【绑定】面

10、板中定义记录集在弹出的【记录集】对话框中，定义记录集【称号】为i、选择数据库【衔接】名为liuyb、选择数据库中的【表格】为yonghu、选择表中的字段域、定义记录排序的方法等，如下图。1在【绑定】面板中定义记录集按照前面的步骤操作完成以后，在【绑定】面板中就会出现新定义的记录集，单击它前面的加号按钮，可以展开记录集，如下图。2将记录集中数据绑定到表格域1重新编辑留言板主页面。对留言板主页面main.asp中的表格重新编辑，并删除单元格中的一些文字和图片，如下图。2将记录集中数据绑定到表格域2将记录集中的数据域字段绑定到表格相应的单元格中。翻开【绑定】面板，展开记录集。用鼠标将记录集中的y_n

11、ame字段拖放到页面表格的左上角中，用同样的方法将其他数据域字段拖动到相应的单元格中，结果如下图。8.5.3创建用户留言页面1添加表单并规划表格2添加表单域3定义提交按钮的效力器行为4在【行为】面板定义表单提交的错误检查1添加表单并规划表格新建一个动态页面，并将其保管为“write.asp，它就是用户留言页面。在【表单】工具栏中单击【表单】按钮，插入一个表单。然后在表单中插入一个表格，表格规划如下图。2添加表单域1添加“姓名文本字段。经过【表单】工具栏中的【文本字段】按钮，完成在单元格中添加一个“文本字段表单域。在【属性】面板中【文本域】下面的文本框中定义这个文本字段的名字为name，如下图。

12、2添加表单域2添加OICQ、个人主页文本字段。OICQ、个人主页表单域的添加方法同上，均为文本字段，在【属性】面板中各个文本字段的命名情况是：OICQ文本字段：oicq；文本字段：mail；个人主页文本字段：homepage。2添加表单域3添加“性别单项选择按钮表单域，性别“男的单项选择按钮属性设置如下图。2添加表单域同样的方法再设置一个性别“女的单项选择按钮。完成后的页面效果如以下图所示。2添加表单域4添加“选择头像表单域。由于“选择头像右边的单元格中要有假设干备选的头像图片，所以我们应该事先制造或者搜集一些卡通头像图片。复制以后的【文件】面板情况如下图。2添加表单域将光标定位在“选择头像右

13、边的单元格中，分两行插入8个头像图片。在每幅图片的右边添加一个单项选择按钮。名字一致定义为tx，第一个单项选择按钮的【初始形状】选择为【已勾选】，其他的单项选择按钮为【未选中】，每个单项选择按钮【选定值】属性的设置略微费事一些。2添加表单域以第1个单项选择按钮为例，先选中这个单项选择按钮前面对应的头像图片，在【属性】面板中复制这个图片【源文件】地址，如下图。2添加表单域再选中与头像对应的单项选择按钮，在【属性】面板的【选定值】处粘贴刚刚复制的头像图片源文件地址，如下图。2添加表单域其他7个单项选择按钮的【选定值】属性都按照同样的方法进展设置。最后编辑页面效果如下图。2添加表单域5添加“留言内容

14、文本区域。效果如图8-60所示。2添加表单域6添加提交和重置按钮。完成以后的页面效果如下图。2添加表单域7添加隐藏区域。将光标定位在“提交按钮的左边，单击【表单】工具栏中的【隐藏域】按钮，在【属性】面板中，定义它的名字为ip，在【值】文本框中输入代码：3定义提交按钮的效力器行为翻开【绑定】面板，单击加号按钮，执行【记录集查询】命令，并按照8.5.3引见的方法绑定【记录集】。选中整个表格，翻开【效力器行为】面板，单击加号按钮，选择【插入记录】命令。在【插入记录】对话框中设置表单域与数据库字段名一一对应，在【表单元素】中依次选中元素，在下面的【列】中选择与数据库相对应的域。4在【行为】面板定义表单

15、提交的错误检查选中【提交】按钮，翻开【行为】面板，单击加号按钮，在弹出的菜单中选择【检查表单】命令。设置表单域和检查事件：name选择【必需的】；ociq选择【数字】；mail选择选择【必需的】；【电子邮件地址】，homepage不选；liuyan选择【必需的】，如下图。最后单击【确定】按钮，事件为onClick。8.5.4在留言板主页面实现留言记录导航1实现留言记录导航2留言内容显示问题的处理1实现留言记录导航在main.asp页面实现留言记录导航主要包括控制一页显示留言数和翻页按钮上一页、下一页、最前一页、最后一页。这个功能主要运用【运用程序】工具栏来完成。将工具栏切换到【运用程序】工具栏

16、后得运用程序按钮如下图。1实现留言记录导航这里主要运用【记录集分页】按钮和【记录集导航形状】按钮。单击【记录集分页】按钮弹出如右上图所示的下拉列表框；单击【记录集导航形状】按钮弹出如右以下图所示的对话框。1实现留言记录导航下面为留言板主页面添加记录导航功能：1将光标定位在编辑页面的下边，单击【记录集导航形状】按钮，弹出【记录集导航形状】对话框，单击【确定】按钮后页面如下图。1实现留言记录导航2再回车另起一行，单击【记录集分页】按钮，弹出【记录集导航条】对话框，如以下图所示。单击【确定】按钮，记录导航条将以文字方式显示。1实现留言记录导航这样就完成了显示留言数量和翻页的按钮，如下图。2留言内容显示问题的处理需求处理的问题：防止留言内容支持html代码；防止留言很长时main.asp页面上的表格被自动撑大文字不会自动换行用如下的操作处理上述问题：2留言内容显示问题的处理1将原来绑定到留言内容单元格中的记录集字段删除，然后在这个单元格中添加【文本区域】表单域，添加好后的文本区域如下图。2留言内容显示问题的处理2选中刚刚添加的文本区域，在【属性】面板中设置【字符宽度】为66，【行数】为5，然后单击【绑定