Web开发基础-实训课程.ppt

山东胜利学院企业实训课程,客户端页面技术应用,课程目标,理解静态网页工作原理掌握HTML表单元素JAVASCRIPT语言了解DW(Dreamweaver)工具的使用,课时安排,第1天上午知识点1：WEB概述与超链接知识点2：页面排版布局与表格项目任务：实现一个简单的餐厅连接设计第1天下午知识点1：表单与表单元素项目任务：实现一个注册界面的设计第2天上午知识点1：JavaScript动态脚本语言项目实战：实现微博系统的登录和注册的表单验证第2天下午考核测试：实现一个注册的表单验证（机试）,第一章WEB概述与超链接,本章目标,了解Internet和万维网(www)?了解Html语言历史和W3C组织学习Html的全局架构标签什么是标签及其属性?如何创建超级链接?,Internet和万维网(www),什么是Internet?Internet的历史定义-连接网络的网络TCP/IP(传输控制协议/Internet协议)，一种能保证计算机之间进行通信的标准规范,Internet和万维网(www),万维网(worldwideweb)是一个基于超文本（Hypertext）方式的信息检索服务工具。万维网提供这样一种友好的信息查询接口：用户仅需提出查询要求，而到什么地方查询及如何查询则由万维网自动完成。超文本开发语言HTML信息资源的统一定位格式URL超文本传送通信协议HTTP,Internet和万维网(www),超文本传输协议HTTP定义：网络传输协议作用：发布和接收Html页面统一资源定位符URL定义：网页地址格式：协议:/域名:端口号/文件路径/文件名.文件后缀http:/www.QQ:80/tq/index.html,HTTP协议示例,GET/HTTP/1.1Host:User-Agent:Mozilla/5.0(Windows;U;WindowsNT6.0;en-US;rv:1.9.0.10)Gecko/2009042316Firefox/3.0.10Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language:en-us,en;q=0.5Accept-Encoding:gzip,deflateAccept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive:300Connection:keep-aliveIf-Modified-Since:Mon,25May200903:19:18GMT,HTTP/1.1200OKCache-Control:private,max-age=30Content-Type:text/html;charset=utf-8Content-Encoding:gzipExpires:Mon,25May200903:20:33GMTLast-Modified:Mon,25May200903:20:03GMTVary:Accept-EncodingServer:Microsoft-IIS/7.0X-AspNet-Version:2.0.50727X-Powered-By:ASP.NETDate:Mon,25May200903:20:02GMTContent-Length:12173消息体的内容（略）,HTML超文本标记语言,Html（超文本标记语言）定义：为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语言以“”标识标签的开始，以“”标识标签的结束成对标签又称为容器，一对标签中还可以嵌套其它标签单独标签不需要与之配对的结束标签，又称之为空标签，例如属性设置的格式为：属性名=“属性值”,Hi大家好!,浏览器访问网页文件的方式,http协议网页文件,本地存储系统（硬盘）,www服务器,网页文件,Html规范与版本,不同浏览器之间的不兼容问题从软件开发角度：多个公司开发了浏览器软件，根据网页中的标签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示效果标签，导致不兼容规范的制定IETF制定Html2.0W3C组织3W联盟http:/www.w3c.org正在使用的Html的版本Html4.01XHTMLHTML5最新版,网页与网站,什么是网页?定义：构成网站的基本元素格式：分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx.asp.php等什么是网站?实例：新浪，网易定义：展示特定内容的相关网页的集合,如何上网?,网络的工作原理,客户端,向服务器发送页面请求,Web服务器处理请求并返回请求的页面,HTTP负责请求和响应,如何上网?,Web服务器,客户端,HTTP协议,协议用于访问Web上资源的一组规则HTTP是Web协议,站点地址或URL,HTML语言用于制作网页,静态网页,动态网页(1),动态网页(2),编辑工具,Dw(DreamWeaver)EditPlus记事本(Notepad),Html的全局架构标签,网页的基本结构网页以开始结束两个主要的结构：head首部，body主体,Html的全局架构标签,网页的头部结构：内容：,CSS,Javascript网页的主体结构：内容：包含网页中显示的文本、图像和链接等,欢迎来到中软国际ETC.,欢迎来到ETC,什么是标记？什么是属性?,什么是标记?定义：Html命令称为标记(标签)作用：用于控制Html文档的内容和外观分类：单独标签:，成对标签:标记的属性作用：修饰或进一步制定信息。如颜色，对齐方式，高度，宽度等,标签,属性,属性值,学习HTML欢迎来到HTML世界,DOCTYPE标签,文档类型,会使浏览器使用相应的方式加载网页并显示。示例：,Head-Meta元素,META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)HTTP-EQUIV似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容,响应报头信息，如页面编码、缓存模式等等.NAME定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面,标签及其属性,示例xxxxxxxxxxxxx,标签及其属性,标签属性bgcolor设置网页文档的背景颜色十六进制RGB颜色码，使用一个#号后跟六位十六进制数据，例如#FF0000Html的颜色常量名，例如red属性background设置网页文档的背景图片属性text设置网页中文字的颜色属性leftmargin设置网页中的内容到左边距之间的距离属性topmargin设置网页中的内容到上边距之间的距离,标签及其属性,标签属性align设置标题文字的水平对齐方式取值范围(left,right,center,justify)标签属性size设置水平线的粗细属性width设置宽度,路径,相对路径由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系（”./”代表上一级文件夹）范例:web/article/01.htm绝对路径目标文件的完整路径范例:C:/Web/index.html,标签及其属性,标签属性align设置段落文字的水平对齐方式取值范围(left,right,center)标签标签作用:显示图片属性src指明图片位置(相对路径，绝对路径)属性align设置图片周围内容对齐方式取值范围(top,middle,bottom)属性alt图片无法显示时的替代信息属性title提示信息,超级链接,标签作用:超级链接1)实现页面之间的跳转2)页内跳转3）mailto属性href=“”属性target锚记作用:页内跳转利用锚记可以实现页面内跳转结合超级链接，可以跳到另外页面指定的位置Html语言注释,好的html编码习惯,文件扩展名为.html标签必须正确地嵌套要符合XHTML标准标签元素必须要关闭比如、标签名、属性名要用小写字母文档必须要有根元素标签的属性必须有属性值,属性值需要加上引号合理必要的注释不要使用W3C不推荐使用的标签,总结,了解internet,万维网熟悉网页的基本组成结构标记及其属性的构成段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径,任务,项目：为新开的餐厅设计网站要求：1.共有三个页面，分别为A文件名index.html站点首页，用来显示餐厅介绍信息，如餐厅主营品种，餐厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种，餐厅地理位置，营业时间为必须选项B文件名west.html介绍西餐的页面（至少4种）分别介绍菜名，图片，价格C文件名Chinese.html介绍中国菜的页面(至少4种)分别介绍菜名，图片，价格2.三个页面之间要建立超级链接A分别建立超级链接到另外两个页面B对于west.html和Chinese.html要求有目录分别链接到本页面内的具体菜肴Cwest.html和Chinese.html之间能够有互相访问的超级链接,作业（二）,Web开发基础,第二章表格与页面布局,回顾,Internet和万维网网页的工作原理网页的基本结构标记及其属性段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径,本章目标,网页设计注意事项什么是表格？为什么需要表格？如何创建表格？表格如何使用？,网页设计注意事项,多浏览器支持样式与风格统一网站结构、文件命名页面尺寸与屏幕分辨率图片文件命名、大小尺寸限制相对路径的应用页面内容（title、meta、alt、tbody等属性的应用）,什么是表格？,表格是html高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成,表格应用示例,什么是表格？,表格的作用：用于显示数据，便于理解、分析组织网页版面信息,什么是表格？,行,列,列标题,在HTML文档中，广泛使用表格来存放网页上的文本和图像,单元格,如何创建表格?,表格用表示一个表格可以有很多行，用表示每行可以分为多个单元格，用表示演示：一行一列一行三列两行三列,标签及其属性,border属性表格边框演示：不显示边框的表格演示：显示边框的表格align表格对齐演示：居左，居中，居右对齐排版：新浪表格背景bgcolorbackground颜色表示的3种方法注：align、bgcolor属性不赞成使用，应使用css控制,标签及其属性,表格宽度width高度height单位设置像素(px)百分比(%)演示设置宽度，高度避免出现水平滚动条一般不设置高度(自适应)cellspacing，cellpadding属性cellspacing设置单元格间距cellpadding设置单元格边沿和其内容之间的距离,table的常用属性,标签及其属性,align属性属性值：“left”、“center”、“right”注意区别的align属性valign属性属性值：“top”、“middle”、“bottom”bgcolor属性背景颜色设置考虑设置优先级的问题,标签及其属性,align属性属性值：”left”“center”“right”注意区别的align属性valign属性属性值：”top”“middle”“bottom”bgcolor属性background属性bgcolor背景颜色设置background背景图片设置考虑设置优先级的问题,标签及其属性,width属性height属性注意：同行或者同列单元格将受影响rowspan属性colspan属性rowspan属性将一个表格单元格扩展为几行。colspan属性将一个表格单元格扩展为几列演示项目实战利用rowspan和colspan属性合并单元格,其它表格标签,标签作用：用来说明表格内容的标题属性：align，valign标签作用：同标签不同点:用粗体样式标记的文本表头，对齐方式也不一样标签,用表格进行页面排版,表格进行页面排版简单，便捷结构清晰表格嵌套使用演示,表格排版注意事项：,表格嵌套层次不要太多整个页面的排版不要用一个table，影响浏览器对页面的显示效率表格的行列排版要整齐td中没有内容时，以空白（）填充Div+CSS布局（了解）,总结,表格可以格式化数据、管理文件布局表格的基本结构标签及其基本属性合并单元格其它表格标签,第三章表单与表单元素,回顾,表格在网页中的作用如何创建表格表格的基本结构表格标签及其属性单元格的合并,本章目标,什么是表单？表单如何使用？如何创建表单？了解表单和表单元素之间的关系掌握表单元素的使用,表单的应用,表单在商务上的应用网上预定商品网上商品拍卖表单在各种社会机构中的应用网上调查网络咨询表单在网络上其它应用网络人才招聘网络社区注册,表单应用,表单元素-文本框、密码框,文本框标签：属性：type，name，size，maxlength，value，readonly密码框标签：属性：type，name，size，maxlength，value，readonly,表单元素文件、多行文本,文件输入框标签：属性：type，name，size，maxlength，readonly多行文本框标签：属性：name，rows，cols，readonly文本内容换行符：MSIE5.01;WindowsNT5.0)Host:localhost:8080Connection:Keep-Alive,POST/cgi-bin/tech/method.cgiHTTP/1.1Accept:image/gif,image/x-xbitmap,image/jpeg,image/pjpeg,application/vnd.ms-powerpoint,application/vnd.ms-excel,application/msword,*/*Referer:http:/localhost/other.htmlAccept-Language:zh-cnContent-Type:application/x-www-form-urlencodedAccept-Encoding:gzip,deflateUser-Agent:Mozilla/4.0(compatible;MSIE5.01;WindowsNT5.0)Host:localhost:8080Content-Length:9Connection:Keep-AliveuserName=lisi,注：根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET请求一般不应产生副作用。幂等的意味着对同一URL的多个请求应该返回同样的结果。,总结,表单是由表单容器和其中的表单元素组成表单中的各种表单元素及其属性表单的结构和表单属性,第七章div和span,回顾,CSS样式的几种选择器CSS样式引入的几种方式样式优先级区别盒状模型，margin与padding属性,目标,CSS代码书写时注意事项掌握DIV常用属性掌握常用CSS+DIV进行页面布局的方法,CSS代码注意事项,使用css缩写，尽量减小css文件的大小明确定义尺寸等属性单位(%、px/cm/in/mm/em)注意css元素名称的大小写不需要重复定义可继承的属性值最近优先原则不需要给背景图片路径加引号共同属性时可以使用组选择器避免重复定义注意常用css的缩写，比如border:widthstylecolor;,文档流,将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流,块元素与内联元素,块元素特点元素总是从一个新行开始显示高度，行高以及顶、底边距都可控制宽度缺省是它所在容器的100%，除非设定一个宽度通常作为其它元素的容器，它可以容纳内联元素和其它块元素内联元素（也称行内元素、内嵌元素）特点和其它元素都在一行上高度，行高以及顶、底边距不可改变宽度就是它所容纳的文字或图片的宽度，不可改变一般作为基本元素，只能容纳文本或者其它内联元素,块元素：h1、p、ol、ul、table、div、,内联元素：a、img、input、textarea、select、span、,绝对定位与相对定位,绝对定位(position:absolute)绝对定位使元素的位置与文档流无关，因此不占据空间绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块,绝对定位与相对定位,相对定位(position:relative)Relativepositionthatisoffsetfromtheinitialnormalpositionintheflow偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，或者说相对定位是相对于它在正常情况下的默认位置的偏移,Visibility属性,hidden控制元素的不显示，但是元素在文档流中的位置仍然占据着visible默认值为visible，显示出元素,Display属性,block控制元素显示为块元素none控制元素不显示，并且从文本流中去除,float(浮动)属性,float:left/right/none/inheritfloat属性定义元素在哪个方向浮动使指定元素脱离普通的文档流而产生的特别的布局特性float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了float那么这个元素将被指定为块级元素inherit属性值意为继承父单元的设置,clear(清理浮动)属性,clear:left/right/both/none清理浮动，采用clear申明用来确保浮动部分不会占据和影响其显示空间，表示框的哪些边不应该挨着浮动框,z-index属性,z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的z-index属性值。z-index仅能在定位元素上奏效(position属性为absolute或者relative),DIV+CSS布局示例,总结,块元素与内联元素元素位置的绝对定位与相对定位元素浮动,