使用HTML制作网页.ppt

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