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

《Web开发基础-实训课程.ppt》由会员分享，可在线阅读，更多相关《Web开发基础-实训课程.ppt（90页珍藏版）》请在三一办公上搜索。

1、山东胜利学院企业实训课程,客户端页面技术应用,课程目标,理解静态网页工作原理 掌握 HTML 表单元素 JAVASCRIPT 语言 了解DW(Dreamweaver)工具的使用,课时安排,第1天上午知识点1：WEB概述与超链接知识点2：页面排版布局与表格项目任务：实现一个简单的餐厅连接设计第1天下午知识点1：表单与表单元素项目任务：实现一个注册界面的设计第2天上午知识点1：JavaScript动态脚本语言项目实战：实现微博系统的登录和注册的表单验证第2天下午考核测试：实现一个注册的表单验证（机试）,第一章 WEB概述与超链接,本章目标,了解Internet和万维网(www)?了解 Html语言

2、历史 和 W3C组织学习Html的全局架构标签什么是标签及其属性?如何创建超级链接?,Internet和万维网(www),什么是Internet?Internet的历史定义-连接网络的网络TCP/IP(传输控制协议/Internet协议)，一种能保证计算机之间进行通信的标准规范,Internet和万维网(www),万维网(world wide web)是一个基于超文本（Hypertext）方式的信息检索服务工具。万维网提供这样一种友好的信息查询接口：用户仅需提出查询要求，而到什么地方查询及如何查询则由万维网自动完成。超文本开发语言HTML 信息资源的统一定位格式URL 超文本传送通信协议HTT

3、P,Internet和万维网(www),超文本传输协议HTTP定义：网络传输协议作用：发布和接收Html页面统一资源定位符URL定义：网页地址 格式：协议:/域名:端口号/文件路径/文件名.文件后缀 http:/www.QQ:80/tq/index.html,HTTP协议示例,GET/HTTP/1.1Host:User-Agent:Mozilla/5.0(Windows;U;Windows NT 6.0;en-US;rv:1.9.0.10)Gecko/2009042316 Firefox/3.0.10Accept:text/html,application/xhtml+xml,applicat

4、ion/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,25 May 2009 03:19:18 GMT,HTTP/1.1 200 OKCache-Control:private,max-age=30Content-Type:text/html;charset=utf-8Content-E

5、ncoding:gzipExpires:Mon,25 May 2009 03:20:33 GMTLast-Modified:Mon,25 May 2009 03:20:03 GMTVary:Accept-EncodingServer:Microsoft-IIS/7.0X-AspNet-Version:2.0.50727X-Powered-By:ASP.NETDate:Mon,25 May 2009 03:20:02 GMTContent-Length:12173消息体的内容（略）,HTML超文本标记语言,Html（超文本标记语言）定义：为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语

6、言以“”标识标签的开始，以“”标识标签的结束成对标签又称为容器，一对标签中还可以嵌套其它标签单独标签不需要与之配对的结束标签，又称之为空标签，例如属性设置的格式为：属性名=“属性值”,Hi大家好!,浏览器访问网页文件的方式,http协议网页文件,本地存储系统（硬盘）,www服务器,网页文件,Html 规范与版本,不同浏览器之间的不兼容问题从软件开发角度：多个公司开发了浏览器软件，根据网页中的标签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示效果标签，导致不兼容规范的制定IETF 制定 Html 2.0W3C 组织 3W联盟 http:/www.w3c.org正在使用的Html的版本H

7、tml 4.01XHTMLHTML 5 最新版,网页 与 网站,什么是网页?定义：构成网站的基本元素 格式：分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx.asp.php等什么是网站?实例：新浪，网易定义：展示特定内容的相关网页的集合,如何上网?,网络的工作原理,客户端,向服务器发送页面请求,Web 服务器处理请求并返回请求的页面,HTTP 负责请求和响应,如何上网?,Web 服务器,客户端,HTTP协议,协议用于访问 Web 上资源的一组规则HTTP 是 Web 协议,站点地址或 URL,HTML语言用于制作网页,静态网页,动态网页(1

8、),动态网页(2),编辑工具,Dw(DreamWeaver)EditPlus记事本(Notepad),Html的全局架构标签,网页的基本结构网页以开始结束两个主要的结构：head首部，body主体,Html的全局架构标签,网页的头部结构：内容：,CSS,Javascript网页的主体结构：内容：包含网页中显示的文本、图像和链接等,欢迎来到中软国际ETC.,欢迎来到ETC,什么是标记？什么是属性?,什么是标记?定义：Html命令称为标记(标签)作用：用于控制Html文档的内容和外观分类：单独标签:，成对标签:标记的属性作用：修饰或进一步制定信息。如颜色，对齐方式，高度，宽度等,标签,属性,属性值

9、,学习 HTML 欢迎来到 HTML 世界,DOCTYPE标签,文档类型,会使浏览器使用相应的方式加载网页并显示。示例：,Head-Meta元素,META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容,响应报头信息，如页面编码、缓存模式等等.NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面,标签及其属性,示例xxxxxxxxxxxxx,标签及其属性,标签 属性 bgcolor 设置网页文档的背景颜色十六进制RG

10、B颜色码，使用一个#号后跟六位十六进制数据，例如#FF0000Html的颜色常量名，例如red属性 background 设置网页文档的背景图片属性 text 设置网页中文字的颜色属性 leftmargin 设置网页中的内容到左边距之间的距离属性 topmargin 设置网页中的内容到上边距之间的距离,标签及其属性,标签 属性 align 设置标题文字的水平对齐方式 取值范围(left,right,center,justify)标签 属性 size 设置水平线的粗细属性 width 设置宽度,路径,相对路径由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系（”./”代表上一级文件夹）范

11、例:web/article/01.htm 绝对路径目标文件的完整路径范例:http:/范例:C:/Web/index.html,标签及其属性,标签 属性 align 设置段落文字的水平对齐方式 取值范围(left,right,center)标签 标签 作用:显示图片属性 src 指明图片位置(相对路径，绝对路径)属性 align 设置图片周围内容对齐方式取值范围(top,middle,bottom)属性 alt 图片无法显示时的替代信息属性title 提示信息,超级链接,标签 作用:超级链接1)实现页面之间的跳转 2)页内跳转 3）mailto属性 href=“”属性 target锚记作用:页

12、内跳转利用锚记可以实现页面内跳转结合超级链接，可以跳到另外页面指定的位置Html语言注释,好的html编码习惯,文件扩展名为.html标签必须正确地嵌套要符合XHTML标准标签元素必须要关闭 比如、标签名、属性名要用小写字母文档必须要有根元素 标签的属性必须有属性值,属性值需要加上引号合理必要的注释不要使用W3C不推荐使用的标签,总 结,了解internet,万维网熟悉网页的基本组成结构标记及其属性的构成段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径,任务,项目：为新开的餐厅设计网站要求：1.共有三个页面，分别为A 文件名index.html 站点首页，用来显示餐厅介绍信息，如餐

13、厅主营品种，餐厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种，餐厅地理位置，营业时间为必须选项B 文件名 west.html 介绍西餐的页面（至少4种）分别介绍菜名，图片，价格C 文件名 Chinese.html 介绍中国菜的页面(至少4种)分别介绍菜名，图片，价格2.三个页面之间要建立超级链接A 分别建立超级链接到另外两个页面B 对于west.html和 Chinese.html要求有目录分别链接到本页面内的具体菜肴C west.html和Chinese.html之间能够有互相访问的超级链接,作业（二）,Web 开发基础,第二章 表格与页面布局,回顾,Internet

14、 和 万维网网页的工作原理网页的基本结构标记及其属性段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径,本章目标,网页设计注意事项什么是表格？为什么需要表格？如何创建表格？表格如何使用？,网页设计注意事项,多浏览器支持样式与风格统一网站结构、文件命名页面尺寸与屏幕分辨率图片文件命名、大小尺寸限制相对路径的应用页面内容（title、meta、alt、tbody等属性的应用）,什么是表格？,表格是html高级构件之一，它表示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成,表格应用示例,什么是表格？,表格的作用：用于显示数据，便于理解、分析组织网页版面信息,什么是表格？,

15、行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,如何创建表格?,表格用表示一个表格可以有很多行，用表示每行可以分为多个单元格，用表示演示：一行一列一行三列两行三列,标签及其属性,border 属性 表格边框 演示：不显示边框的表格演示：显示边框的表格align 表格对齐演示：居左，居中，居右对齐排版：新浪 表格背景 bgcolor background颜色表示的3种方法 注：align、bgcolor属性不赞成使用，应使用css控制,标签及其属性,表格宽度 width 高度 height单位设置像素(px)百分比(%)演示 设置宽度，高度避免出现水平滚动条一

16、般不设置高度(自适应)cellspacing，cellpadding 属性cellspacing 设置单元格间距cellpadding 设置单元格边沿和其内容之间的距离,table的常用属性,标签及其属性,align 属性属性值：“left”、“center”、“right”注意区别的align属性valign 属性属性值：“top”、“middle”、“bottom”bgcolor 属性背景颜色设置考虑设置优先级的问题,标签及其属性,align 属性属性值：”left”“center”“right”注意区别的align属性valign 属性属性值：”top”“middle”“bottom”b

17、gcolor 属性 background 属性bgcolor 背景颜色设置 background 背景图片设置考虑设置优先级的问题,标签及其属性,width属性 height属性注意：同行或者同列单元格将受影响rowspan属性 colspan属性rowspan属性 将一个表格单元格扩展为几行。colspan属性 将一个表格单元格扩展为几列演示 项目实战利用rowspan和colspan属性合并单元格,其它表格标签,标签作用：用来说明表格内容的标题属性：align，valign标签作用：同标签不同点:用粗体样式标记的文本表头，对齐方式也不一样 标签,用表格进行页面排版,表格进行页面排版简单，便

18、捷结构清晰表格嵌套使用演示,表格排版注意事项：,表格嵌套层次不要太多整个页面的排版不要用一个table，影响浏览器对页面的显示效率表格的行列排版要整齐td中没有内容时，以空白（）填充Div+CSS布局（了解）,总结,表格可以格式化数据、管理文件布局表格的基本结构标签及其基本属性合并单元格其它表格标签,第三章 表单与表单元素,回 顾,表格在网页中的作用如何创建表格表格的基本结构表格标签及其属性单元格的合并,本章目标,什么是表单？表单如何使用？如何创建表单？了解表单和表单元素之间的关系掌握 表单元素 的使用,表单的应用,表单在商务上的应用网上预定商品 网上商品拍卖表单在各种社会机构中的应用网上调查

19、网络咨询表单在网络上其它应用网络人才招聘网络社区注册,表单应用,表单元素-文本框、密码框,文本框标签：属性：type，name，size，maxlength，value，readonly密码框标签：属性：type，name，size，maxlength，value，readonly,表单元素文件、多行文本,文件输入框标签：属性：type，name，size，maxlength，readonly多行文本框标签：属性：name，rows，cols，readonly文本内容换行符： ,表单元素复选框、单选框,复选框标签：属性：type，name，value，checked单选框标签：属性：ty

20、pe，name，value，checked,表单元素复选框、单选框,你最喜欢什么动物？狗 猫 鸟 鱼,你喜欢什么动物？狗 猫 鸟 鱼,表单元素下拉列表,下拉列表标签：属性：name，size，multiple属性：value，selected补充：标签:为主菜单中的每个子项标签都再生成子菜单,表单元素下拉列表,你所在国家：中国日本韩国法国德国意大利,表单元素动作按钮,提交按钮标签：属性：type，name，value重置按钮标签：属性：type，value,表单元素动作按钮,图像按钮标签：属性：src，name，align，alt点击按钮标签：属性：name，value,表单元素动作按钮,标签

21、标签：属性：type,给表单元素标记和分组,标签使用label 标签来定义表单元素间的关系标签 标签将一群相关表单控件形成一个组，并用和标签来标记这个组,个人资料姓名：个人简介：,Tab 键索引顺序,tabindex 属性用来设定按下tab键时焦点的移动顺序tabindex 属性值为正整数规则：数值越小越先访问，没有tabindex属性或属性为0的元素后被访问,其它相关属性,id 属性id属性赋值的名称不会传递给服务器(证明)id属性和name属性的区别title 属性作用：用弹出式帮助来给用户提示style,class,lang,dir 属性accesskey属性作用：设定页面快捷键IE 为

22、alt+accesskey属性值，FireFox 为alt+shift+accesskey属性值,readonly和disabled属性,readonly属性用户不能修改表单控件控件值将被传送到服务器控件可以被鼠标和通过tab键选定disabled属性用户不能修改表单控件控件值将不会被传送到服务器控件不能被鼠标和通过tab键选定意义实现自动操作(演示),Form标签的三大属性,action属性(必须)说明了接收和处理表单数据的应用程序URLmethod 属性(必须)为浏览器设置表单中的数据传送到服务器的方法属性值：get 和 postName 属性,.,get 还是post(补充),GET/c

23、gi-bin/method.cgi?userName=zhangsan HTTP/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-cnAccept-Encoding:gzip,deflateUser-Agent:Mozilla/4.0(compatible;MSIE 5

24、.01;Windows NT 5.0)Host:localhost:8080Connection:Keep-Alive,POST/cgi-bin/tech/method.cgi HTTP/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:ap

25、plication/x-www-form-urlencodedAccept-Encoding:gzip,deflateUser-Agent:Mozilla/4.0(compatible;MSIE 5.01;Windows NT 5.0)Host:localhost:8080Content-Length:9Connection:Keep-AliveuserName=lisi,注：根据 HTTP 规范，GET 用于信息获取，而且应该是 安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。

26、,总结,表单是由表单容器和其中的表单元素组成表单中的各种表单元素及其属性表单的结构和表单属性,第七章 div和span,回顾,CSS样式的几种选择器CSS样式引入的几种方式样式优先级区别盒状模型，margin与padding属性,目 标,CSS代码书写时注意事项掌握DIV常用属性掌握常用CSS+DIV进行页面布局的方法,CSS代码注意事项,使用css缩写，尽量减小css文件的大小明确定义尺寸等属性单位(%、px/cm/in/mm/em)注意css元素名称的大小写不需要重复定义可继承的属性值最近优先原则不需要给背景图片路径加引号共同属性时可以使用组选择器避免重复定义注意常用css的缩写，比如bo

27、rder:width style color;,文档流,将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流,块元素与内联元素,块元素特点元素总是从一个新行开始显示高度，行高以及顶、底边距都可控制宽度缺省是它所在容器的100%，除非设定一个宽度通常作为其它元素的容器，它可以容纳内联元素和其它块元素内联元素（也称行内元素、内嵌元素）特点和其它元素都在一行上高度，行高以及顶、底边距不可改变宽度就是它所容纳的文字或图片的宽度，不可改变一般作为基本元素，只能容纳文本或者其它内联元素,块元素：h1、p、ol、ul、table、div、,内联元素：a、img、input、textare

28、a、select、span、,绝对定位与相对定位,绝对定位(position:absolute)绝对定位使元素的位置与文档流无关，因此不占据空间绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块,绝对定位与相对定位,相对定位(position:relative)Relative position that is offset from the initial normal position in the flow 偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，或者说相对定位是相对于它在正常情况下的默

29、认位置的偏移,Visibility属性,hidden 控制元素的不显示，但是元素在文档流中的位置仍然占据着visible 默认值为visible，显示出元素,Display属性,block 控制元素显示为块元素none 控制元素不显示，并且从文本流中去除,float(浮动)属性,float:left/right/none/inherit float 属性定义元素在哪个方向浮动使指定元素脱离普通的文档流而产生的特别的布局特性float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了float那么这个元素将被指定为块级元素inherit 属性值意为继承父单元的设置,clear(清理浮动)属性,clear:left/right/both/none清理浮动，采用clear申明用来确保浮动部分不会占据和影响其显示空间，表示框的哪些边不应该挨着浮动框,z-index属性,z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。z-index 仅能在定位元素上奏效(position属性为absolute或者relative),DIV+CSS布局示例,总结,块元素与内联元素元素位置的绝对定位与相对定位元素浮动,