《使用html制作网页剖析》由会员分享，可在线阅读，更多相关《使用html制作网页剖析（51页珍藏版）》请在金锄头文库上搜索。
1、使用HTML制作网页,第二单元 静态网页制作,本门课程目标,学完本门课程后，你能够： 使用HTML进行网页布局 使用CSS美化网页 使用JavaScript制作网页特效,课程项目展示,当当网上书城,演示示例：当当网上书城,本课任务,制作图文并茂的简单网页 李清照简介页面 家用电器排行榜页面,4/37,本课目标,学完本次课程后，你能够： 熟练掌握HTML基本结构创建网页 熟练掌握HTML的基本标签 掌握超链接标签制作页面导航 熟练掌握表格标签制作网页表格 会使用表单标签制作提交页面 了解XHTML框架结构,什么是HTML,HTML Hyper Text Markup Language（超文本标记
2、语言）,超文本包括：文字、图片、音频、视频、动画等,HTML的发展史,HTML的发展史,1993-6,超文本标记语言,1995-11,HTML2.0,HTML3.2,1996-1-14,HTML4.0,1997-12-18,HTML4.01,1999-12-24,XHTML1.0,2000-1-26,XHTML1.1,2001-5-31,XHTML2.0,HTML5,2014-10-28,W3C标准,W3C： World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http:/www.w3.org/ http:
3、/www.chinaw3c.org/ W3C标准包括: 结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript ）,网页开发软件,TXT记事本 EditPlus DreamWeaver,演示示例： 使用软件演示新建网页,HTML基本结构,HTML网页基本结构, 网页标题 网页内容 ,网页头部（用于设置网页的一些属性）,主体部分（网页内容编辑区）,1、等成对的标签，分别叫开放标签和闭合标签; 2、单独呈现的标签（空元素），如 ；意为用 / 来关闭空元素;,注意,页面规范声明,DOCTYPE声明 （告诉浏览器使用什么规范）, 标题 网页内容 ,XHT
4、ML 1.0 版本,网页编码设置,标签 - 用于定义文件信息,推荐utf-8，还可设置为gb2312,1、 gb2312包含全部中文字符; utf-8 则包含全世界所有国家需要用到的字符 2、 页面编码应与页面文件保存时的编码一致,注意,给标签设置不同属性，具体不同的功能,案例分析,案例分析,HTML,网页分析,标题标签,斜体标签,粗体标签,特殊符号 (空格),换行标签,水平线标签,段落标签,课堂演示,需求说明： 制作清平乐诗词网页 要求：使用HTML标签实现,演示示例：制作清平乐诗词网页,小结2-1,网页基本标签元素,小结,小结2-2,注释和特殊符号,小结,标签规范,标签规范（ XHTML标
5、签规范）： 标签名应小写 HTML标签应闭合 标签应正确嵌套 应添加文档类型声明,书写HTML页面时，请遵循XHTML标签规范,注意,课堂练习,需求说明 标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分,完成时间：10分钟,共性问题集中讲解,图像标签2-1,常见的图像格式,图像标签2-2,图像路径 （绝对路径&相对路径）,图像的替代文字,语法,鼠标悬停提示文字,图像宽度,图像高度,示例,演示示例：图像标签,超链接标签, 链接文本或图像 ,链接路径,链接在哪个窗口打开,常用值：_self、_blank,语法,示例,演示示例：超链接,锚链接,锚链接 从A页面的甲位置跳转到本页中的乙位
6、置(同一页面) 从A页面的甲位置跳转到B页面中的乙位置(两个页面) 创建步骤 创建跳转标记 创建跳转链接,乙位置,甲位置,演示示例：锚链接,课堂练习,需求说明 制作家用电器排行榜页面 标题使用标题标签 家电名称加上超链接 商品之间使用水平线分隔,教员讲需求,实现思路 家用电器排行榜放在标题标签中 图像使用标签 商品名称使用超链接标签 商品之间使用标签实现分隔,完成时间：10分钟,共性问题集中讲解,HTML列表,无序列表 有序列表 定义列表,无序列表,语法 说明 没有顺序，每个标签独占一行 默认标签项前有实心小圆点 一般用于无序类型的列表，如导航，侧边栏新闻列表等, 列表项内容一 列表项内容x
7、列表项内容最后一项 ,有序列表,语法 说明 有顺序，每个标签独占一行 默认标签项前有顺序标记 可通过修改标签的type属性值(a,A等)更改 一般用于排序类型的列表，如试卷，问卷选项等, 列表项内容一 列表项内容x 列表项内容最后一项 ,定义列表,语法 说明 没有顺序,每个、标签独占一行 默认没有标记, 咖啡 黑色的热饮料 Milk 白色的冷饮料 ,表单学习目标,了解什么是表单 知道表单的作用 掌握如何制作表单,为什么使用表单,用户登录/注册,收集用户反馈信息,提供搜索工具,表单的典型应用,表单的执行原理,Internet,1,2,客户端：请求登录，通过表单填写账户信息,服务器端：验证发来的账
8、号信息，然后给出反馈,客户端和服务器类似两人沟通一样，从而建立交互活动,表单的典型应用：假定登录 126 邮箱,单行文本框(text),单选按钮(radio),复选框(checkbox),下拉列表(select),重置按钮 (reset),提交按钮(submit),密码框(password),常见的表单元素,文本域(textarea),文件选择框(file), 文本框、按钮等表单元素 ,表单基本结构-标签,语法,action属性： 如果为空则代表向当前页面提交 method属性：可选值 post | get get方法提交参数在地址栏可见 post方法一般用于多数据、保密数据提交,注意,表单基
9、本元素-标签,语法,type属性：可选值 text（默认）、password、button、checkbox、radio等 checked属性： 仅与 或 配合使用，选中值为 checked,注意,课堂演示,需求说明 使用表单元素制作注册页面 要求： 制作注册页面内容 使用HTML基本标签完成,演示示例：商城注册页面2-1,小结,各类表单元素,小结,课堂练习,需求说明： 完成网站登录页面,完成时间：10分钟,共性问题集中讲解,1、提交地址：login.html 2、提交方法：post,其他表单元素, , 文本内容 ,列表框 文本域,关联表单元素,姓名: 或 姓名: ,表单的高级用法2-1,点击
10、label标签鼠标聚焦文本框中,语法,示例,只读属性 readonly：希望某个框内的内容只允许用户看，不能修改 禁用属性 disabled：因没达到使用的条件，限制用户使用 示例,表单的高级用法2-2,课堂演示,需求说明 使用表单元素制作注册页面 要求 继续完善注册页面 完成“出生日期”项 完成“注册条款”项 给输入框加上关联元素标签,演示示例：商城注册页面2-2,课堂练习,需求说明： 使用表单相关标签制作简易求职表表单,完成时间：10分钟,“协议”只读，“提交”按钮禁用,用隐藏域提交求职者姓名“zhangsan”,共性问题集中讲解,表格学习目标,掌握表格的基本结构 掌握表格跨行、跨列的实现
11、方式,表格应用场景,哪里用到表格？,论坛中应用表格,系统中应用表格, 第1个单元格的内容 第2个单元格的内容 第1个单元格的内容 第2个单元格的内容 ,表格基本语法,语法,演示示例：表格基本组成, 标签定 义列, 标签定义表格,表格的属性,表格常用属性,表格的分组标签,表格高级标签,表格标题,数据主体,页眉,页脚,表头,演示示例：报表表格,表格的跨行与跨列,跨列 标签的 colspan 属性，值为数字，代表合并几列 跨行 标签的 rowspan 属性，值为数字，代表合并几行,演示示例：表格跨行跨列,课堂练习,完成时间：10分钟,共性问题集中讲解,需求说明 使用标签制作年终数据报表,XHTML框架结构,标签 作用：创建文档的内联框架 属性 src ( 需引入的文档路径 ) width/height ( 设定框架的宽与高) scrolling (是否显示滚动条，auto | yes | no) frameborder( 是否要边框，1 显示，0 不显示) name ( 内联框架的名称),演示示例：XHTML框架结构,总结,问题,HTML的基本结构？ W3C的基本规范？如何创建符合标准的HTML文档？ 常用的HTML标签有哪些 ？ 表单的语法及执行原理？各类表单元素的语法？ 表格的基本结构和跨行跨列及布局如何实现？ XHTML框架结构标签是什么？,
