第1讲WEB编程基础知识

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,WEB,编程技术,考核方式,考核内容：,设计并布局一个个人网站,(,或其他主题网站,),的主页和其他静态、特效页面,上机实验报告,评分标准,颜色搭配、结构布局（,10,分）,主页设计及布局（,15,分）,登录页面设计（,10,分）,注册页面设计（,10,分）,个人信息介绍（,10,分）,其他页面设计（,20,分）,特效设计（,10,分）,实验报告（,15,分）,教学大纲解读,课程性质、地位和作用,动态网页设计和网站建设的一门专业基础课，是后续课程,ASP.NET,和,WEB,数据库访问技术,的先修课程,课程教学对象、目的和要求,从教学内容上,要求学生了解并熟悉静态页面设计语言,HTML,、,JavaScript,脚本语言和样式表技术。,从能力培养上,要求学生能通过所学的基础知识，参考目前各种流行的网页设计技巧，结合学生的实际能力和专业需求，能独立的完成网站的客户端设计。,教学方法上,在讲解基础知识的同时，充分结合现代网页设计的技巧，注重理论与实践相结合。,实验内容,HTML,与,CSS,结合布局网站主页,1,、熟悉开发环境，配置环境，用已学标记设计自己的简历,2,、主页布局、登录页面布局、注册页面布局,3,、设计网站样式表,使用,JavaScript,实现页面的特效,1,、编写剪刀、石头、布游戏,2,、表单特效,验证登录页面输入信息,验证注册页面的输入信息,3,、页面特效,用动态脚本实现网站的,LOG,用脚本处理自己的照片,其他特效,内容提要,WEB,编程基础知识,WEB,程序的开发环境,静态页面设计（,4,学时）,JavaScript,脚本语言（,6,学时）,JavaScript,浏览器对象（,3,学时）,样式表设计（,3,学时）,特效页面设计（,2,学时）,（,2,学时）,第,1,讲,WEB,编程基础知识,本讲内容,WEB,编程原理,WEB,协议,开发环境,HTML,基本标记,什么是,WEB,Web,全称为,World Wide Web,Web,是,Internet,提供的一种服务,Web,是存储在全世界,Internet,计算机中、数量巨大的文档的集合,Web,是一种超文本信息系统,Web,是图形化的和易于导航的,Web,与平台无关,Web,是分布式的 、具有新闻性、动态的、交互的,Web,的工作原理,用户在浏览器地址栏输入,URL,静态页面,(.,htm,/.html),动态页面,(.asp/.,aspx/.jsp,),识别用户请求的类型，调用相应的处理进程,1,、静态页面,直接返回,2,、动态页面,调用相应的进程处理程序，解析后将结果页面,(.,htm,),反馈给用户,查看相应的请求结果,Internet,网络协议,Internet,是由各种不同类型、不同规模、独立管理和运行的主机或计算机网络组成的一个全球性特大网络。,Internet,使用的网络协议是,TCP/IP,协议，凡是连入,Internet,的计算机都必须安装和运行,TCP/IP,协议软件,。,TCP/IP,协议,TCP/IP,协议把整个网络分成,4,个层次：应用层、传输层、网络层和物理链路层。它们都建立在硬件基础之上。,OSI,参考模型,TCP/IP,参考模型,应用层,应用层,表示层,会话层,传输层,传输层,网络层,网络层,数据链路层,物理链路层,物理层,HTTP,协议,超文本传输协议,HTTP,（,HyperText,Transfer Protocol,）,其定义的事务处理由以下,4,个步骤组成：,（,1,）,客户端与服务器建立连接；,（,2,）,客户端向服务器提出请求；,（,3,）,如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；,（,4,）,客户端和服务器断开连接。,示例,http:/,远程登录协议,Telnet,Telnet,是关于远程登录的一个协议。,用户可以通过用,Telnet,连入某个主机 ，成为该主机的终端而访问各种所需的信息，或运行远程主机上的程序来求解各种复杂的问题,还可以利用,Telnet,连到,Internet,上的种种服务器，如,Archie,、,Gopher,、,Wais,、,WWW,以及其它服务器，比如某图书馆的资料文献服务器等等,示例,开始,运行,telnet,文件传输协议,FTP,FTP,既是一种文件传输协议，也是一种服务。,能使,Internet,上两台主机间互传（拷贝）文件,FTP,服务器,匿名,FTP,服务器；,用户名和口令登录连接、拷贝文件,示例,开始,运行,ftp:/ Resource Locator,）就是用来确定某信息位置的方法,格式：,：,/,示例,ftp:/,Telent:/,安装配置,IIS,开始,程序,管理工具,Internet,信息服务,(IIS),管理器,(,WinServer,版,),开始,控制面板,管理工具,Internet,信息服务,(IIS),管理器,(,WinXp,版,),如果上述方法找不到“,Internet,信息服务,(IIS),管理器,”,开始,控制面板,添加,/,删除程序,添加,/,删除,Windows,组件,网站,默认网站,右键,新建,网站,/,虚拟目录,输入网站别名,(test),输入,/,选择网站路径,(d:test,，,注意：最好不要把网站放在系统盘上,),除了,执行,以外全都选中,配置,Dreamweaver,启动,Macromedia Dreamweaver MX,站点菜单,新建站点,/,管理站点,在弹出的对话框的顶部选择,基本,标签,输入站点的名字,(,即刚才在,IIS,中配置的虚拟目录的别名,test,),选择服务器技术,(,是,)ASP.NET C#,或,JSP,选择“,在本地编辑和测试,”,输入,/,选择站点文件的保存位置,(,d:test,，即刚才在,IIS,中配置虚拟目录所对应的物理路径,),输入站点的,URL,：,http:/localhost/,test,不使用远程服务,使用,Dreamweaver,文件,新建,在弹出的对话框上选择：基本页,HTML(,文档类型无,),文件,保存,(,保存路径为,d:test,，即刚才在,IIS,和,Dreamweaver,中,配置的路径,),编辑页面,再保存,F12,浏览页面效果,静态页面设计,静态页面主要是使用,HTML,语言设计的页面，用户只能浏览,Web,服务器上预先安排好的信息。,设计静态页面主要使用各种页面开发工具，如,Dreamweaver,，,FrontPage,等,头部标记,HTML,文件头开始,描述文档属性,无标题文档,文档标题,显示在浏览器的标题栏,脚本函数,HTML,文件头结束,体部标记,页面正文内容布局与设计,Body,标记的常用属性,文字显示和段落控制标记,常用转义符号,转义符号,对应字符,&,lt,;,&,&,nbsp,;,空格,示例（,Sample1.html,）,图象标记,通过这两个参数，可以将任意大小的图片,设置成所需要的大小，而不需要做任何剪裁,超链接标记,链接文本或图象,target=,_blank,表示目标页面显示于一个新的浏览器窗口中,_self,表示目标页面显示于本窗口中,帧名,目标页面显示于指定帧所在的窗口中,示例,(,Sample2.html,),列表标记,无序列表，每项前默认为“点”,列表项,1,有序列表，每项前自动进行编号,列表项,1,示例,(,Sample3.html,),