• 1. 第一章使用HTML制作网页第二单元
  • 2. 本门课程目标使用语义化的HTML标签制作网页 使用CSS美化网页元素 使用DIV+CSS布局网页 使用JavaScript制作常见的网页特效 使用正则表达式进行表单验证 掌握Oracle数据库基础知识 使用Oracle数据库对数据进行操作和管理 独立解决使用Oracle数据库时遇到的一些问题 第2页/共42页
  • 3. 课程项目展示课程项目展示 第3页/共42页
  • 4. 本章相关学习资源 《使用HTML制作网页》专题 《 Web前端基础及数据库开发》 第1章 《使用HTML制作网页》 学习平台“静态网页制作”课程学生用书第4页/共42页
  • 5. 预习检查至少说出5个常用的HTML标签。 HTML语义化的概念是什么?它有哪些优点? label标签的作用是什么?提问第5页/共42页
  • 6. 本章任务任务1:制作唯品会365爱心基金页面 任务2:制作网易邮箱注册页面第6页/共42页
  • 7. 能熟练运用HTML标签排版网页理解HTML语义化能熟练使用表格布局网页能熟练制作语义化的表单本章目标点重点难点难点重点难点重第7页/共42页
  • 8. 串讲:HTML基本结构HTML的概念是什么? HTML的基本结构包括哪几部分? Web开发方面涉及的W3C标准包括哪些方面?提问第8页/共42页
  • 9. 讲解: HTML基本结构HTML语义化 利用HTML标签相应的含义排版网页元素 h1-h6排版标题p排版段落联想到作用telephone用于通讯、交流第9页/共42页
  • 10. 讲解: HTML基本结构HTML语义化的优点 去掉或丢失样式,页面结构依然清晰 便于屏幕阅读器阅读网页 便于PDA、手机等终端设备渲染网页 便于搜索引擎爬虫收录关键字 便于团队开发和维护 第10页/共42页
  • 11. 串讲:HTML标签为什么需要HTML标签?问题

    茉莉花


    好一朵茉莉花,好一朵茉莉花,

    满园花草,香也香不过它;

    我有心采一朵戴,看花的人儿要将我骂。


    更多
    演示示例:茉莉花 第11页/共42页
  • 12. 串讲: HTML标签HTML的基本标签有哪些? 在img标签中,用于设置图片路径的属性是什么?设置文本替代图像的属性是什么? 网页中,常用的图片格式有哪几种?提问第12页/共42页
  • 13. 串讲:HTML标签a标签中的href属性和target属性分别代表什么? a标签中的target属性有几个属性值?它们分别代表什么?问题链接文本或图像第13页/共42页
  • 14. 串讲:HTML标签超链接可以应用于哪些场合? 问题超链接文本文本文本第14页/共42页
  • 15. 串讲: HTML标签HTML中,常用的字符实体有哪些? 如何在HTML代码中添加注释? 请说出符合W3C标准的HTML标签规范。提问第15页/共42页
  • 16. 讲解: HTML列表为什么需要HTML列表?问题横向导航分类导航纵向导航商品列表新闻列表第16页/共42页
  • 17. 讲解: HTML列表无序列表
      标签声明无序列表
    • 标签声明列表项 采用符号标识每个列表项
      • Dreamweaver
      • Photoshop
      • Flash
      声明无序列表声明列表项默认显示,实心圆点演示示例:无序列表 第17页/共42页
    • 18. 讲解: HTML列表无序列表的应用场合 横向导航 纵向导航 新闻列表 图片列表 第18页/共42页
    • 19. 讲解: HTML列表有序列表
        标签声明有序列表
      1. 标签声明列表项 采用数字、序号标识每个列表项
        1. Dreamweaver
        2. Photoshop
        3. Flash
    声明有序列表声明列表项默认显示,有序数字演示示例:有序列表 第19页/共42页
  • 20. 讲解: HTML列表有序列表的应用场合 排行榜 有序的流程、条款等 第20页/共42页
  • 21. 讲解: HTML列表定义列表
    标签声明定义列表
    标签声明定义列表项
    标签声明定义列表项的定义
    Dreamweaver
    网页制作软件
    Photoshop
    平面设计软件
    声明定义列表声明定义列表项声明定义列表项的定义dd标签内的文字有缩进演示示例:定义列表 第21页/共42页
  • 22. 讲解: HTML列表定义列表的应用场合 分类导航 商品列表 第22页/共42页
  • 23. 上机练习需求说明 制作新闻列表 练习:使用无序列表排版新闻信息完成时间:10分钟共性问题集中讲解练习第23页/共42页
  • 24. 上机练习需求说明 制作推荐商品列表 练习:使用h2标签排版标题,定义列表排版商品信息完成时间:15分钟共性问题集中讲解练习第24页/共42页
  • 25. 小结某网页底部需要增加友情链接栏目,其中放置企业Logo,它们可以使用( )排版。 淘乐网是一个电子商务网站,主营商品多达十个类目,商品上千余件,该网站的类目导航可以使用( )排版。定义列表无序列表 提问第25页/共42页
  • 26. 串讲: 表格在表格中,table标签、tr标签和td标签分别表示表格的哪些部分? 在表格中,cellspacing属性和cellpadding属性分别表示什么? 表格边框的宽度,可以使用什么属性来定义? 用于控制表格中内容的对齐方式的属性是?提问第26页/共42页
  • 27. 串讲:表格在表格中, rowspan 属性和colspan 属性分别表示什么? 如下图所示的表格,该表格所跨的行数和列数分别是多少?问题类目详细日用品洗护洗发水、护发素厨卫洗洁精、碗碟家居床单、被罩、拖把第27页/共42页
  • 28. 上机练习需求说明 制作纽西兰群岛页面 练习:使用表格布局页面,HTML语义化的标签排版页面内容完成时间:30分钟共性问题集中讲解练习第28页/共42页
  • 29. 串讲:表单在HTML中,表单的作用是什么? 在表单标签中,action属性和method属性分别表示什么? 在表单标签中,method属性的取值有哪些?哪一个适用于安全性较高的场合?问题
    第29页/共42页
  • 30. 串讲: 表单元素可以定义多个表单元素的标签是? 请说出4-5个由input标签定义的表单元素,并说出它们对应的type属性值各是什么? 在下拉列表框中,select标签和option标签分别定义什么? 在表单中,定义多行文本域可以使用什么标签?标签中的cols属性和rows属性分别表示什么?提问第30页/共42页
  • 31. 讲解:表单结构标签表单结构标签 fieldset标签 为表单添加结构,将表单元素容纳在一个方框中 同一表单中,可使用多个fieldset标签分组表单控件
    表单元素
    演示示例:fieldset标签的用法 语法第31页/共42页
  • 32. 讲解:表单结构标题表单结构标题 legend标签 为表单结构添加标题,对其中的内容加以说明 个人详细信息演示示例:legend标签的用法 语法标题文字左对齐第32页/共42页
  • 33. 讲解:关联表单元素关联表单元素 label标签 为没有内建标签的表单控件,建立与表单的关联 for属性,用于建立表单控件与表单的关联,其属性值可以自定义 演示示例:label标签的用法 语法建立表单控件与表单的关联第33页/共42页
  • 34. 讲解:语义化的表单语义化的表单 使用具有特定语义的表单标签制作的表单 创建表单form标签语义对应标签表单结构的标题legend标签建立表单控件与表单关联label标签表单元素input标签、select标签、option标签、textarea标签添加表单结构fieldset标签第34页/共42页
  • 35. 讲解:语义化的表单制作语义化的表单制作 fieldset标签分组表单信息 legend标签排版表单标题 p标签或div标签排版表单中每一行的信息 label标签标识每一个表单项 第35页/共42页
  • 36. 演示讲解:语义化的表单制作语义化的表单制作
    个人信息

    演示示例:语义化的表单制作 分组表单信息排版表单标题排版每行表单信息建立表单控件与表单的关联第36页/共42页
  • 37. 上机练习需求说明 制作语义化的表单 练习:fieldset、legend、label、p排版表单元素完成时间:20分钟共性问题集中讲解练习第37页/共42页
  • 38. 小结在HTML中显示单行文本框,需要将input标签的type属性设置为( )。 legend标签内的元素默认( )对齐。提问居左 text 第38页/共42页
  • 39. 答疑时间同学们请就以下方面的问题请教老师 (教员备课时自行填写)第39页/共42页
  • 40. 总结table标签、tr标签、td标签分别定义表格的什么部分? 无序列表在网页中常用于排版什么? 制作语义化的表单时,什么标签可用于排版表单的行信息?提问第40页/共42页
  • 41. 作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间:xxx 提交形式:xxx 阅读学生用书第2章,观看平台《网页样式》专题课件 教员备课时在此添加内容 课后作业预习作业第41页/共42页
  • 42. (本页无文本内容)