模块3-利用HTML编写简单网.ppt

主讲教师 谭荣华 网页设计与制作 学习情境3 利用HTML编写简单网页 布置习题 学习目标 知识讲解 课堂实践 教学总结 利用HTML编写简单网页 学习情境3 课程引导 网页的组成元素以及属性设置最终都形成HTML代码 有必要对HTML语言的语法结构 HTML标记有一定的了解 虽然很少直接输入HTML代码制作网页 但经常要修改HTML代码以满足网页设计的需要 当HTML代码出现错误时 也要切换到代码视图 查找并改正错误 概述 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用HTML编写简单网页 学习情境3 学习目标 掌握DreamweaverCS3的HTML源代码编辑功能 掌握快速标签编辑器 标签选择器和标签编辑器的使用方法 掌握常用的HTML标记的含义及其应用 学会手工修改HTML代码 学习目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用HTML编写简单网页 学习情境3 学习目标 手工编写 修改HTML代码的能力 专业能力目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用HTML编写简单网页 学习情境3 学习目标 HTML语言的结构 格式文本 排版格式 图像 链接 表格 表单 层等标记块级元素和行级元素的概念和区别 专业知识目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用HTML编写简单网页 学习情境3 学习目标 自主学习能力创新能力感悟能力效率观念获取知识能力 专业素质目标 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 教学案例 案例01 利用HTML代码编写网页 案例02 在网页中输入并设置文本 案例03 更改网页中的背景 综合案例实训 制作 九龙湾 图文混排网页 案例04 处理网页中的图像 案例05 创建简单表格 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 案例操作过程 相关知识点 案例01 利用HTML代码编写网页 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 HTML HyperTextMarkupLanguage 即超文本标记语言 是使用类似于 的标记来描述头部信息 段落 列表 超链接等内容的一种结构化语言 目前我们所使用的是HTML4 01版HTML XMLDHTMLXHTML可以看作是一种过渡 HTML简介 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 一个标准的HTML文件的基本结构如下 一般为标题等 一般为正文 HTML文件结构 说明 HEAD标记部分一般描述有关该HTML文件的一些基本信息 如 网页标题 关键字和网页制作工具等信息 说明 BODY标记是主体 是HTML文件的实际内容 说明 并不强求书写缩进 只为易读性 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 标记 是元素的代码表现形式 是指由 括起来的具有特定含义的字符串 每一个HTML元素都有对应的起始标记和结束标记 开始标记为结束标记为 属性 与标记相关的若干性质 只出现在起始标记中 且具有固定的描述结构即属性名 属性值 如 标记与属性 标记和属性的一些特性 HTML标记和属性通常不区分大小写属性值通常用双引号引起来 属性值为单个字符时可省各属性之间用空格分开 如一行写不下 可在下行接着写HTML元素允许相互嵌套 但不得交叉嵌套每个HTML元素只能嵌套合法的子元素有些HTML元素可以没有结束标记所有的HTML标记均为ASCII码字符 不能是全角 中文字符 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 特殊字符 在HTML中 定义转义字符串的原因有两个 第一个原因是像 这类符号已经用来表示HTML标签 因此就不能直接当作文本中的符号来使用 为了在HTML文档中使用这些符号 就需要定义它的转义字符串 当解释程序遇到这类字符串时就把它解释为真实的字符 在输入转义字符串时 要严格遵守字母大小写的规则 第二个原因是 有些字符在ASCII字符集中没有定义 因此需要使用转义字符串来表示 如 版权所有 copy南昌师专 思考一下 如果要在浏览器中显示出 标记一般包含正文内容 这几个字 代码就如何书写 例 ltbody gt标记一般包含正文内容 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 为了以后更容易地阅读HTML代码而生 用法 如 HTML注释 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 步骤 1 选择 开始 所有程序 附件 记事本 命令 打开记事本2 在创建的记事本文件中输入HTML代码3 选择 文件 保存 或 文件 另存为 命令 保存文件为 html文件4 用浏览器打开 html文件 查看显示效果 用记事本编写HTML网页 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 步骤 1 启动DreamweaverCS32 从设计视图切换至代码视图3 输入相应的HTML代码4 保存文件并预览效果 DreamweaverCS3中的HTML源码编辑窗口 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 案例02 在网页中输入并设置文本 案例操作过程 相关知识点 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 HTML中的大部分元素都可分为两种类型 块级元素和行级元素 块级元素会从新的一行出现 行级元素则不会 块级元素的前后都会有插入的断行 所以如果不用CSS则没法让两个块级元素并列在一起 更多的块元素和行元素知识请问百度 块级元素和行级元素 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 标题标签至段落标签 标题元素和段落元素 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 用以对网页中文本的字体 大小 颜色等进行定义的元素 有了CSS后实际上用处已不是很大 主要元素有以下几种 字符格式元素 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 1 有序列表 OL元素 功能 对分段的文本进行有序的列表显示语法 列表项一列表项二列表项三 属性 start type 列表元素 1 Start用以指明列表序号的起始值 如果没有这个属性 则默认从1开始 例 type用以指明序号的类型 一共有五种类型 分别是 A 大写字母a 小写字母I 大写罗马字母i 小写罗马字母1 阿拉伯数字例 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 2 无序列表 UL元素 功能 将分段显示的文本作无序的列表显示语法 列表项一列表项二列表项三 属性 type 值分别为circle disc square 列表元素 2 Circle项目符号为空心圆 Disc项目符号为实心圆 Square项目符号为方块 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 3 定义列表功能 用以罗列定义 每个定义有两项内容 一是定义的内容 二是定义的描述 语法 标题一内容一内容二 标题二内容一内容二 列表元素 3 简单DL列表示例 国内电视台北京电视台上海电视台江西电视台浙江电视台国际电视台美国电视台英国电视台日本电视台 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 可用于在网页中插入水平线语法 属性 Color用于设置水平线颜色 width用于设置水平线长度 align用于设置水平线位置 插入水平线 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 案例03 更改网页中的背景 案例操作过程 相关知识点 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 bgcolor标记文档的背景颜色 语法 其中value可以使用RGB十六进制码 也可以使用颜色所对应的英文单词或者三个十进制数 例 或者 背景颜色 更多的颜色表可访问以下网址 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 background标记文档的背景图片语法 例 背景图片和背景色可同时指定 但在显示时 浏览器会优先考虑背景图片 背景图像 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 bgsound标记文档的背景音乐语法 例 Loop属性设置重复次数 1为无限重复 背景音乐 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 案例04 处理网页中的图像 案例操作过程 相关知识点 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 网页中每一个图片都是以独立文件存在的 HTML代码只是指明了这个图片所在的位置 即URL 浏览器在显示这个图片时 需要根据图片的URL找到这个图片并下载显示出来 图像元素img 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 IMG元素功能 引用图片URL语法 空标记 无需要结束标记 图像元素img 主要属性 Src指明图片的URLAlt设定鼠标移动到图片上时显示的文字Width指明要显示的图片的高度 单位是像素 像素的英文缩写是px Height指明要显示的图片的宽度 单位同上vspace垂直边距Hspace水平边距Align指明图片的对齐方式 有 top middle bottom left right等属性值Border指明图片的边框宽度 无该属性或值为0时 表示无边框Lowsrc设定低分辨率图片URLUsemap指明该图片是否有热区 其值指向一个map元素 例 引用一图片 存放在本地计算机的D盘myphoto文件夹中 文件名为photo1 jpg 要求 在网页中鼠标指向图片时显示 这是一幅示例图片 的字样 边框宽度为5 图片高度300 宽度200 对齐方式为居中对齐 试写出其HTML代码 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 案例05 创建简单表格 案例操作过程 相关知识点 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 相关知识点 表格元素一共有5个 用来定义表格的标题 行和列 tablecaptiontrthtd 表格元素 1 Table功能 用来标志一个表格 语法 表格内容属性 alignbgcolorcellpaddingcellspacingheightwidthTable的元素很多 上述几个是最常用的 Align 对齐方式 Bgcolor 表格的背景色 Border 表格边框的宽度 Cellpadding 单元格中的内容到表格边框线的最短距离 Cellspacing 两个单元格之间的距离 Height 表格高度 其值可以是像素或百分比 Width 表格宽度 其值可以是像素或百分比 这里的百分比是指该高度或宽度占整个屏幕的百分比 2 Caption功能 指明表格的标题或说明语法 表格标题属性 alignalign有四个值 top bottom left right 如果没有指定align属性 默认值是表格的上方且居中显示标题 例 学生成绩登记表 3 Tr功能 定义表格的一行 一个table元素中至少要有一个Tr元素 Tr元素可以嵌套Td和Th子元素 语法 或者或者 属性 alignvalignbgcolor等Align 设置该行中内容的水平对齐方式Valign 设置该行中内容的垂直对齐方式其值可以是 baseline 基线对齐 bottom 底端对齐 top 顶端对齐 middle 垂直居中 Bgcolor 设置该行的背景色 此项设置会覆盖表格的背景色 即table中的bgcolor颜色设置 4 Th Td功能 指明表格某一行中的某一列 即一个单元格 与 基本一样 唯一不同的就在于 会将单元格内的内容以粗体且默认居中显示 故 经常用于表格的表头 也就是第一行或者第一列 而 用于普通的单元格且默认为左对齐 语法 单元格内容单元格内容属性 alignvalignbgcolorcolspanrowspanheightwidthnowrapbgcolor该属性在表格中的排序是 th td tr tablecolspan和rowspan用于不规则的表格 其值是一个正整数 colspan指明该单元格跨越几列 rowspan指明该单元格跨越几行 nowrap设置内容超过单元格宽度时不换行 否则将自动换行 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 知识拓展 HTML的其他元素介绍 HTML的元素可以分为 文件结构元素 html head body frameset 头部元素 title base meta link style等 格式元素 font b i u p h1 h6 pre br adress等 图片元素 img 链接元素 a 列表元素 ul ol dl li dt dd 表格元素 table tbody caption tr th td 表单元素 form input select textarea 层元素 div span 脚本元素 script 对象元素 applet param object embed noembed 课堂实践 布置习题 学习目标 教学总结 课程引导 利用HTML编写简单网页 学习情境3 知识讲解 页面效果图 综合案例实训 制作 九龙湾 图文混排网页 实训步骤 1 新建文件夹 D webdesign jiulongwuan 将 随书光盘 03 最终文件 综合案例实验 images 文件夹复制到 D webdesign jiulongwuan 2 打开DreamweaverCS3 新建名为 webdesign 的本地站点 设置站点 本地根文件夹 为 D webdesign 3 在 文件 面板中展开 jiulongwuan 文件夹 在该文件夹下面新建名为 index html 的文档 按F10切换至代码视图4 在代码视图下按页面效果图编写代码 可参考P44 46 5 保存文件 按F12预览效果6 修改代码 重新保存文件 预览直至符合要求 布置习题 学习目标 知识讲解 教学总结 课程引导 利用HTML编写简单网页 学习情境3 课堂实践 课堂实践 同步模仿操作 案例01 05综合案例实训 制作 九龙湾 图文混排网页 布置习题 学习目标 知识讲解 课堂实践 课程引导 利用HTML编写简单网页 学习情境3 教学总结 疑难解析 如何消除页面四周的空白 如何让浏览器正确显示Word文件格式 怎样插入有颜色的水平线 怎样在网页中输入上下标 布置习题 学习目标 知识讲解 课堂实践 课程引导 利用HTML编写简单网页 学习情境3 教学总结 学习情境3主要讲述了HTML各种常用标签的使用方法 HTML文档是由HTML标签组成的描述性文本 这些标签可以是说明文字 图形 动画 声音和表格等形式 通过本章的学习 读者可以了解网页的基本语言 从而更加灵活自如地制作出精美的网页 课堂小结 学习目标 知识讲解 课堂实践 教学总结 课程引导 利用HTML编写简单网页 学习情境3 布置习题 上网搜索元素块元素和行元素的相关知识 理解二者的区别完全用手工编写HTML代码的形式完成一个页面 不要借助任何可视化编辑工具