《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元21：HTML语言 一、课程引导 湖南城道营政外学院 二、 明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元21：HTML语言 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
一) 课程引导 前面各章都是通过Dreamweaver8提供的可视化 设计环境来创建和编辑网页的，但是对于一个希望深 道 入掌握网页制作、对代码严格控制的网页设计人员来 讲，了解和掌握HTML语言是非常必要的。 感 Dreamweaver8是一种非常优秀的可视化网页制 作软件，它也提供了丰富的源代码控件功能，可以让 戏 网页制作者随时查看、编辑HTML源代码。 Dreamweaver8的快速标签编辑器很好地协调了 可视化操作和HTML源代码编写二者之间的关系。 克 网设计与制作
（一）课程引导 前面各章都是通过Dreamweaver 8提供的可视化 设计环境来创建和编辑网页的，但是对于一个希望深 入掌握网页制作、对代码严格控制的网页设计人员来 讲，了解和掌握HTML语言是非常必要的。 Dreamweaver 8是一种非常优秀的可视化网页制 作软件，它也提供了丰富的源代码控件功能，可以让 网页制作者随时查看、编辑HTML源代码。 Dreamweaver 8的快速标签编辑器很好地协调了 可视化操作和HTML源代码编写二者之间的关系
(二) 明确知识技能目标 湖南绒道 (1)掌握Dreamweaver8的HTML源代码编辑功能。 掌握快速标签编辑器、标签选择器和标签编辑器的使 用方法。 (2)掌握常用的HTML标记的含义及其应用。 (3)学会手工修改HTML代码。 营植御拳院 网页设计与制作
（二）明确知识技能目标 （1）掌握Dreamweaver 8的HTML源代码编辑功能。 掌握快速标签编辑器、标签选择器和标签编辑器的使 用方法。 （2）掌握常用的HTML标记的含义及其应用。 （3）学会手工修改HTML代码
(三) 展示网页浏览效果 1.预览网页 湖南绒道 采用手工编写HTML代码制作的网页浏览效果如图11-1示。 3公可部门-scroroft Internet Explorer 回8 文件巴)满指)直者)收常公)工具D帮助D 地址便)包G教材中的网站旅游冈站12语言12h1 )孙到 长沙世界之窗实现总经理领导下的部门经理负责制，管理上采用垂直领导、分层言理、逐级负责。 营植饰拳院 图11-1 手工编写HTML代码所制作的网页预览效果 网页设计与制作
（三）展示网页浏览效果 1．预览网页 采用手工编写HTML代码制作的网页浏览效果如图11-1示。 图11-1 手工编写HTML代码所制作的网页预览效果
(四)分析操作任务 南绒道 在站点“长沙世界之窗”下创建子文件 “12HTML语言”，在“12HTML语言”文件夹中采 用手工编写HTML代码的方法制作网页12.html.。 紫植御拳院 网页设计与制作
（四）分析操作任务 在站点“长沙世界之窗”下创建子文件 “12HTML语言”，在“12HTML语言”文件夹中采 用手工编写HTML代码的方法制作网页12.html
（五)知识讲解与操作示范（1) 11.1HTML简介 湖南鐵道號 11.1.1HTML语言的特点 HTML语言用来描述Web页面文档的语言，它不 是一种编程语言，而是一种页面描述性标记语言。通 过各种标记描述不同的内容，说明标题、段落、字体、 图像等网页元素在浏览器中的显示效果，浏览网页时， 将根据HTML标记显示其内容。 克 网页设计与制作
（五）知识讲解与操作示范（1） HTML语言用来描述Web页面文档的语言，它不 是一种编程语言，而是一种页面描述性标记语言。通 过各种标记描述不同的内容，说明标题、段落、字体、 图像等网页元素在浏览器中的显示效果，浏览网页时， 将根据HTML标记显示其内容。 11.1 HTML简介 11.1.1 HTML语言的特点
(五)知识讲解与操作示范(2) 11.1.2 HTML语言的语法结构 湖南绒道 1.HTML基本结构 一个最基本网页的HTML代码格式如下： 紫植御學 网页标题 网页主体内容 网页设计与制作
（五）知识讲解与操作示范（2） 11.1.2 HTML语言的语法结构 一个最基本网页的HTML代码格式如下： 网页标题 网页主体内容 1．HTML基本结构
(五) 知识讲解与操作示范(3) 11.1.2 HTML语言的语法结构 在HTML网页文档的基本结构中主要包含以下几 种标记： 道 (1)HTML标记 (2)HEAD头部标记 薰 (3)BODY主体标记 戏 2.HTML语言的语法规则 糊 一个完整的HTML文档由各种网页元素与HTML 标记组成的，网页元素指标题、段落、图像、表格、 举 层等各种对象，标记的功能是逻辑性地描述网页的结 构。 网页设计与制作
（五）知识讲解与操作示范（3） 在HTML网页文档的基本结构中主要包含以下几 种标记： （1）HTML标记 （2）HEAD头部标记 （3）BODY主体标记 2．HTML语言的语法规则 一个完整的HTML文档由各种网页元素与HTML 标记组成的，网页元素指标题、段落、图像、表格、 层等各种对象，标记的功能是逻辑性地描述网页的结 构。 11.1.2 HTML语言的语法结构
(五) 知识讲解与操作示范（4) 11.1.2 HTML语言的语法结构 (1)HTML文档以纯文本形式存放，扩展名为“.html'或 线 “.htm”。 (2)HTML文档中标记采用“”作为分割字符。 (3)HTML标记及属性不区分大小写，例如和 是相同的标记。 或 (4)大多数HTML标记可以嵌套，但不能交叉，各层标 记是全包容关系。 琴 (5)HTML文档一行可以书写多个标记，一个标记也可 克 以分多行书写，不用任何续行符号，显示效果相同。 网页设计与制作
（五）知识讲解与操作示范（4） （1）HTML文档以纯文本形式存放，扩展名为“.html”或 “.htm”。 （2）HTML文档中标记采用“”作为分割字符。 （3）HTML标记及属性不区分大小写，例如和 是相同的标记。 （4）大多数HTML标记可以嵌套，但不能交叉，各层标 记是全包容关系。 （5）HTML文档一行可以书写多个标记，一个标记也可 以分多行书写，不用任何续行符号，显示效果相同。 11.1.2 HTML语言的语法结构