《计算机网络应用基础 国家精品课程配套教材 教学课件 ppt 冯博琴 ch5-2》由会员分享，可在线阅读，更多相关《计算机网络应用基础 国家精品课程配套教材 教学课件 ppt 冯博琴 ch5-2（72页珍藏版）》请在金锄头文库上搜索。
1、计算机网络应用基础,第5章 网页设计与编程 (),本章内容,5.1 HTML概述 5.2 HTML文档结构和常用元素 5.3 HTML标准单位 5.4 动态文档的工作原理 5.5 PHP的基本元素 5.6 表单与PHP处理程序 5.7 网页的设计与测试环境,5.4 动态文档的工作原理,上一课讲述的HTML主要用来构建静态网页，而作为信息平台的Web，需要动态的回应用户的请求，这就是动态网页发展的动机 如：搜索引擎的应用 在第四章，介绍了两种动态网页 客户端：活动文档（Active Document） 服务器：动态文档（Dynamice Document） 本节以为例，说明动态文档的基本概念,三
2、种网页工作模式回顾,公共网关接口（CGI）,公共网关接口（Common Gateway Interface） 体现Web作为网络应用程序的一种公共的通道 在接口的一侧，HTML扮演了内容表达和数据采集的角色，展示网页，收集信息, TCP, IP协议的数据也发给该网关 在接口另一侧，不同的程序或进程对来自CGI的信息进行解读，做出响应 在Web服务器端，PHP,JSP,ASP的解释器都可以解读来自浏览器及其主机的信息，并进行处理、响应,动态文档的运行环境,一张服务器状态信息的快照,服务器内情快照的输出程序如下： Phpinfo.php 是不是很简单哪？,5.5 PHP的基本元素,PHP程序基础
3、动态网页的执行过程 PHP与 “纯”HTML网页的不同 动态网页的设计举例 PHP函数,PHP程序基础, The First Greeting from PHP ,动态网页的执行过程,打开浏览器，在地址栏中输入： http:/127.0.0.1/greeting.php?name=Cheng 本节所含的实验或例子假设在本地主机上的Web服务器Apache上运行。Apache的网页发布目录在d:xampphtdocs,PHP与 “纯”HTML网页的不同,PHP网页需要经过Apache的PHP解释模块处理才能显示（直接用IE打开PHP文件，只能看到源码）; PHP网页的程序参数（或变量）至少可以从
4、URL地址栏输入；网页的输出可以随程序参数（或变量）值变化而变化 在上例在http:/127.0.0.1/greeting.php网址之后附带了“?name=Cheng” 。 “=” 左边为“参数”， “=”右侧为参数值 当需要输入的参数多于一项时，参数之间要用“&”号隔开,动态网页的设计举例-一个计算,“.$temp; ?,一个计算：修改后的程序,“.$temp; ?,动态网页的设计举例-电子字典,Reset():将数组的内部指针指向第一个单元 List():把数组中的值赋给一些变量 Each():返回数组中当前的键值对并将数组指针向前移动一步,电子词典的输出,全部输出：,电子字典的查询,S
5、trtoupper()：将字符串的字母变大写 Empty():检查一个变量是否为空,电子字典的查询结果,PHP函数,PHP函数库是一种通过CGI接口执行的网络应用指令集 在PHP 4.0中，这些函数可以分为100余类，共计一千多个，而且还在不断的扩展之中 用户可以把PHP函数看成动态网页的重要构件，只要使用得当，使用函数进行程序设计可以收到事半功倍的效果,PHP函数(1),常用PHP函数分类,程序设计语言通用函数 数学/数组函数 字符串处理函数 时间日期函数 文件函数 数据库专用函数（Informix ,MySQL, Oracle 8 , PostgreSQL，Unified ODBC ） 环
6、境函数（PHP Options&Information， Session handling，COM support functions for Windows ）,PHP函数应用举例,5.6 表单与PHP处理程序,HTML表单的引入 一个简单的表单实例图 表单数据发送后的实例图 HTML表单与PHP处理程序 HTML表单的性质,HTML表单的引入,在浏览器的URL地址栏输入网页的名称和相关参数，而这种用户数据的输入方式显然是很不方便的 尤其不适合普通浏览器用户的使用 在HTML中，一般浏览器用户是通过表单完成网上的数据输入的,一个简单的表单实例图,表单数据发送后的实例图,HTML表单源码,一个
7、简单的HTML表单 姓名: 兴趣: ,HTML表单与PHP处理程序,对简单表单的PHP程序处理 Welcome! ! ,HTML表单的性质,含有表单的文件往往是一个“纯”HTML文件，比如上例的表单文档就是一个有“.htm”后缀的文件 表单是一个容器元素，即有开始和结束标记，在中至少包含两个属性：“ACTION”和“METHOD”,表单的ACTION属性, ACTION属性的值表示该表单的处理方法，也就是表单提交后需要执行的CGI程序名(包括路径) 由于本节ACTION属性中填写的就是对应的PHP程序名称 表示在用户提交表单后，由Web服务器上的echo.php程序来处理用户所提交的数据,HT
8、ML表单的METHOD, METHOD说明本表单向服务器发送输入信息时的使用方式 一般有两种选择：POST和GET，默认的方式是GET 使用GET时，浏览器将表单信息用字符串附加在ACTION所设定的URL后，中间用“?”和“&”隔开，然后传给服务器 由于系统内置变量限制，用GET方式所能传送的数据一般为2k字节以下 而使用POST方法时，HTTP会将表单信息包装后发送，用户数据长度没有限制,5.7 网页的设计与测试环境,DW8简介 DW8静态网页设计和测试 DW8的站点设置 静态网页设计任务 动态网页的编制与测试,1.DW8简介,Dreamweaver是美国Macromedia公司开发的集网
9、页制作和管理网站于一身的所见即所得网页编辑器 它是第一套针对专业网页设计师特别发展的视觉化网页开发工具 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页,网页设计的饿“三剑客”,Dreamweaver 、Flash（动画制作软件）以及针对专业网页图像设计的Fireworks，三者被MACROMEDIA公司称为DreamTeam(梦之队) 在网页设计行业，这三个重要软件被称为“网页设计三剑客” 由于Macromedia2005年被Adobe并购.故此软件现以为Adobe旗下产品,Dreamweaver网站管理,使用网站地图可以快速制作网站雏形、设计、更新和重组网页 改变网页
10、位置或档案名称，Dreamweaver 会自动更新所有连结 使用文本、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单,Dreamweaver制作效率,Dreamweaver可以用最快速的方式将Fireworks，Photoshop等图片文档移至网页上 对于选单，快捷键与格式控制，都只要一个简单步骤便可完成 Dreamweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图档的最佳化,Dreamweaver的控制能力,Dreamweaver是唯一提供可视觉编辑与原始码编辑同步的设计工具 （非常重要） 三种风格的视图： 设计视图
11、（直接显示网页的设计效果） 代码视图（显示HTML代码） 设计和代码视图（拆分） 设计动态网页时，用所见即所得的功能，让用户不需要透过浏览器就能预览网页,Dreamweaver的问题,难以达到与浏览器完全一致的显示效果 在结构复杂一些的网页（如框架结构、动态网页结构）中便可以体现出来 页面原始代码的难以控制性，也就是自动产生的HTML代码可以多到无法解读的地步 而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在用户的监控下产生,掌握DW和理解HTML的关系,实现两者的完美结合 具备则见则所得的高效率、直观性（熟练DW的工具性） 并产生干净、准确的HTML代码（
12、懂得HTML） 在我们的课程中推荐使用“拆分”视图，可以在两类视图间互相参照，代码和设计视图之间的互动关系,各种DW版本（1）,DreamWeaver3.0及早期版本 DreamWeaver4.0 DreamWeaver5.0 DreamWeaverMX,各种DW版本（2）,DreamWeaverMX2004 DreamWeaver8.0 较好的动态网页设计和 调试效果 良好的汉化界面 Adobe DreamWeaverCS3,2. DW8静态网页设计,DW8的文字编码设置,由于我们确定Web服务器的默认字符集为GB2312 所以在网页编辑开始之前，需要确认网页设计使用的文字编码 如果编辑器的
13、文字编码与Web服务器默认字符集不同，可能在测试时出现乱码,DW8的文字编码设置（图例）,GB2312,DW8静态网页界面和菜单,清理word产生的HTML,3. DW8的站点设置（1）,DW8的站点设置的目的 给站点起名：workshop 输入站点的URL：http:/127.0.0.1/workshop 设置网页保存的本地文件夹 设置网页发布Web服务器文件夹 测试发布平台,DW8的站点设置（2）,由于需要调试动态网页，需要选择服务器技术 我们的课程选择 PHP MySQL,DW8的站点设置（3）,在开发过程中，我们选择在本地进行编辑，然后传到远程测试服务器 我们定义本地文件夹在d:My
14、Doumentworkshop,DW8的站点设置（4）,在“您如何连接到测试服务器？”，选择“本地/网络”：我们的“远程主机”就在本地主机上 我们在Apache的发布目录下，新建一个workshop目录，作为测试网页的发布目录,DW8的站点设置（5）,在设置完毕服务器发布目录后，可以点击“测试URL”对服务器发布目录的运作进行测试 由于本地主机安装的防火墙软件，可能导致DW8无法访问Apache服务器，需要对防火墙的设置进行调整,DW8的站点设置（6）,DW8的站点设置（7）,在调整了防火墙的设置后，“远程服务器”测试成功,DW8的站点设置（8）,最后，检查一下站点设置的全部参数,4.静态网页
15、设计任务,输入文本后，选择一段进行超链设置 保存文件，名为index.html, 这是缺省文件名，作为网站或发布目录下的首个文件名 注意，这个文件就在我们建立的站点内，每次更新后，都会自动发到“远程服务器”的发布目录,页面属性设置,在网页设计前，先对文档属性进行设置 需指定页面的默认字体和字体大小、背景颜色、边距、链接样式等，也可以修改现有页面的属性,页面属性设置图例,允许用户在设计网页时将平面设计稿作为辅助的背景 浏览器中显示时不会出现“跟踪图像”,初次使用DW8设计网页,输入文本后，选择一段进行超链设置 保存文件，名为index.html, 作为网站或发布目录下的首个缺省文件名 注意：这个
16、文件就在我们建立的站点内，每次更新后，都会自动发到“远程服务器”的发布目录 DW下，可以使用F12键进行网页的测试，（对于静态网页，这个测试是在DW下进行的，不必依赖Web服务器）,DW8的F12键测试结果,在网页中插入图片,需要插入网页的图片，初始情况下，可能存在不同的文件夹 在使用的过程中，DW8会建议你把用到的图片，复制到站点所在的文件夹，这一步很重要 如果，图片没有复制，集中到站点文件夹下，可能使用F12测试通过；但是，发布时却无法访问,DW的重要提示,DW8图片属性对话框,需要关注，源文件的路径，替换，链接等属性是否正确,从DW8的“拆分”窗口看代码,网页保存后，检查站点文件,从浏览器访问测试网页,5.动态网页的编制与测试,DW8的入口不同 必须依赖支持服务器技术的Web服务器,动态网页的代码形态,
