第1章-使用HTML制作网页.pptx

第二单元第一章使用HTML制作网页本门课程目标第页/共42页使用语义化的HTML标签制作网页使用CSS美化网页元素使用DIV+CSS布局网页使用JavaScript制作常见的网页特效使用正则表达式进行表单验证掌握Oracle数据库基础知识使用Oracle数据库对数据进行操作和管理独立解决使用Oracle数据库时遇到的一些问题课程项目展示第页/共42页课程项目展示本章相关学习资源学习平台“静态网页制作”课程学生用书第页/共42页《使用HTML制作网页》专题《 Web前端基础及数据库开发》第1章 《使用HTML制作网页》预习检查至少说出5个常用的HTML标签。HTML语义化的概念是什么？它有哪些优点？label标签的作用是什么？提问第页/共42页本章任务第页/共42页任务1：制作唯品会365爱心基金页面任务2：制作网易邮箱注册页面本章目标点重能熟练运用HTML标签排版网页点难理解HTML语义化点重能熟练使用表格布局网页点难点重能熟练制作语义化的表单点难第页/共42页串讲：HTML基本结构HTML的概念是什么？HTML的基本结构包括哪几部分？Web开发方面涉及的W3C标准包括哪些方面？提问第页/共42页讲解： HTML基本结构用于通讯、交流联想到telephoneh1-h6排版标题作用p排版段落第页/共42页HTML语义化利用HTML标签相应的含义排版网页元素讲解： HTML基本结构第页/共42页HTML语义化的优点去掉或丢失样式，页面结构依然清晰便于屏幕阅读器阅读网页便于PDA、手机等终端设备渲染网页便于搜索引擎爬虫收录关键字便于团队开发和维护串讲：HTML标签bodydiv h1茉莉花/h1 hr/ p好一朵茉莉花，好一朵茉莉花，/p p满园花草，香也香不过它；/p p我有心采一朵戴，看花的人儿要将我骂。/pbr / a href=#更多/a /div/body问题演示示例：茉莉花第页/共42页为什么需要HTML标签？串讲： HTML标签HTML的基本标签有哪些？在img标签中，用于设置图片路径的属性是什么？设置文本替代图像的属性是什么？网页中，常用的图片格式有哪几种？提问第页/共42页串讲：HTML标签a href=？ target=？链接文本或图像/a问题第页/共42页a标签中的href属性和target属性分别代表什么？a标签中的target属性有几个属性值？它们分别代表什么？串讲：HTML标签问题第页/共42页超链接可以应用于哪些场合？串讲： HTML标签HTML中，常用的字符实体有哪些？如何在HTML代码中添加注释？请说出符合W3C标准的HTML标签规范。提问第页/共42页讲解： HTML列表横向导航问题新闻列表分类导航纵向导航商品列表第页/共42页为什么需要HTML列表？讲解： HTML列表声明无序列表默认显示，实心圆点ul liDreamweaver/li liPhotoshop/li liFlash/li/ul声明列表项演示示例：无序列表第页/共42页无序列表ul标签声明无序列表li标签声明列表项采用符号标识每个列表项讲解： HTML列表第页/共42页无序列表的应用场合横向导航纵向导航新闻列表图片列表讲解： HTML列表默认显示，有序数字声明有序列表ol liDreamweaver/li liPhotoshop/li liFlash/li/ul声明列表项演示示例：有序列表第页/共42页有序列表ol标签声明有序列表li标签声明列表项采用数字、序号标识每个列表项讲解： HTML列表第页/共42页有序列表的应用场合排行榜有序的流程、条款等讲解： HTML列表声明定义列表dl dtDreamweaver/dt dd网页制作软件/dd dtPhotoshop/dt dd平面设计软件/dd/dldd标签内的文字有缩进声明定义列表项声明定义列表项的定义演示示例：定义列表第页/共42页定义列表dl标签声明定义列表dt标签声明定义列表项dd标签声明定义列表项的定义讲解： HTML列表第页/共42页定义列表的应用场合分类导航商品列表上机练习需求说明制作新闻列表练习：使用无序列表排版新闻信息练习完成时间：10分钟共性问题集中讲解第页/共42页上机练习需求说明制作推荐商品列表练习：使用h2标签排版标题，定义列表排版商品信息练习完成时间：15分钟共性问题集中讲解第页/共42页小结某网页底部需要增加友情链接栏目，其中放置企业Logo，它们可以使用（ ）排版。淘乐网是一个电子商务网站，主营商品多达十个类目，商品上千余件，该网站的类目导航可以使用（ ）排版。无序列表 提问定义列表第页/共42页串讲： 表格在表格中，table标签、tr标签和td标签分别表示表格的哪些部分？在表格中，cellspacing属性和c