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文本内容换行符 13 表单元素 复选框 单选框 复选框标签 属性 type name value checked单选框标签 属性 type name value checked 表单元素 复选框 单选框 你最喜欢什么动物 狗猫鸟鱼 你喜欢什么动物 狗猫鸟鱼 表单元素 下拉列表 下拉列表标签 属性 name size multiple属性 value selected补充 标签 为主菜单中的每个子项标签都再生成子菜单 表单元素 下拉列表 你所在国家 中国日本韩国法国德国意大利 表单元素 动作按钮 提交按钮标签 属性 type name value重置按钮标签 属性 type value 表单元素 动作按钮 图像按钮标签 属性 src name align alt点击按钮标签 属性 name value 表单元素 动作按钮 标签标签 属性 type 给表单元素标记和分组 标签使用label标签来定义表单元素间的关系标签标签将一群相关表单控件形成一个组 并用和标签来标记这个组 个人资料姓名 个人简介 Tab键索引顺序 tabindex属性用来设定按下tab键时焦点的移动顺序tabindex属性值为正整数规则 数值越小越先访问 没有tabindex属性或属性为0的元素后被访问 其它相关属性 id属性id属性赋值的名称不会传递给服务器 证明 id属性和name属性的区别title属性作用 用弹出式帮助来给用户提示style class lang dir属性accesskey属性作用 设定页面快捷键IE为alt accesskey属性值 FireFox为alt shift accesskey属性值 readonly和disabled属性 readonly属性用户不能修改表单控件控件值将被传送到服务器控件可以被鼠标和通过tab键选定disabled属性用户不能修改表单控件控件值将不会被传送到服务器控件不能被鼠标和通过tab键选定意义实现自动操作 演示 Form标签的三大属性 action属性 必须 说明了接收和处理表单数据的应用程序URLmethod属性 必须 为浏览器设置表单中的数据传送到服务器的方法属性值 get和postName属性 get还是post 补充 GET cgi bin method cgi userName zhangsanHTTP 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 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 tabl