单元六 任务2 设计简单网页（课件）-《计算机网络应用基础》（高教版）同步精品课堂

6.2 设计简单网页 计算机网络应用基础 同步精品课堂 高等教育出版社 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 一 掌握HTML中三种颜色表示方法 掌握img标签插入图像、表格的基本结构和常用属性设置设置 能够综合运用所学知识制作简单网页 教学重难点 二 图像标签img的src、alt、width、height 属性的正确使用 表格的基本结构（table、tr、td标签）及嵌套关系 相对路径与绝对路径在图像引用中的区别与应用 表格的边框合并（border-collapse）属性理解 上网查资料、和朋友视频聊天、玩网络游戏 导入新课 三 这两个网页给你的感觉有什么不同？哪个更吸引你？为什么？ 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 网页制作中会使用颜色，HTML中颜色的表示方法有以下3种：英文单词表示法、RGB函数表示法和十六进制代码表示法。 一、HTML中的颜色表示法 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 1. 颜色名称（预定义关键字） HTML 预定义了 140 个标准颜色名称，如 red、blue、green 等，这些名称是浏览器直接支持的关键字。 <p style="color: tomato;">这是番茄红文本</p> <div style="background-color: papayawhip;">这是番木瓜色背景</div> 2. RGB 表示法 RGB（Red, Green, Blue）通过三个 0-255 的数值表示颜色，格式为 rgb(红, 绿, 蓝)。 <p style="color: rgb(255, 0, 0);">纯红色</p> <!-等同于 red --> <div style="background-color: rgb(128, 128, 128);">中灰色</div> 3. 十六进制表示法 十六进制颜色是最常用的表示法。 <p style="color: #FF0000;">纯红色</p> <!-等同于 rgb(255, 0, 0) --> 一、HTML中的颜色表示法 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签（img），其基本语法格式如下： <img src="图像文件的地址"> img标签的属性： 二、在网页中插入图像 相对路径/绝对路径 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 1. 图像标签img和源属性src 在 HTML 中，图像由 < img >标签定义，src属性填图片的url地址或者本地路径。 <img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px"> 二、在网页中插入图像 图像的路径 替换文本 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 表格由行、列和单元格3部分组成，一般通过表格标记、行标记和单元格标记来创建表格。 table标签：表格标签 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格 caption标签：用于定义表格的标题 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 表格中的常用属性： 三、在网页中添加表格 1.带边框表格的创建 若直接创建表格，那么创建出来的表格是不带边框的，而大多数情况下，我们需要的往往是一个带有边框的表格，那么我们则需要在table标签中设置属性border。 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 2. 设置单元格内边距-cellpadding 单元格内容与其边框之间的空白。 <table border="1" cellpadding="20" > <tr> <td>用户名：</td> <td><input type="text" placeholder="输入用户名"></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="输入密码"></td> </tr> </table> 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 3. 修改单元格间距-cellspacing 增加单元格之间的距离。 <table border="1" cellspacing="20" > <tr> <td>用户名：</td> <td><input type="text" placeholder="输入用户名"></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="输入密码"></td> </tr> </table> 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 4. 设置表格背景，以及单元格背景 <body> <table border="1" bgcolor = "red"> <tr bgcolor = "pink"> <td>标签</td> <td>说明</td> </tr> <tr> <td bgcolor ="yellow">p</td> <td>段落</td> </tr> </table> </body> 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 5. 设置表头 <body> <table border="1"> <tr> <th>姓名</th> <th>联系方式</th> </tr> <td>苏凉</td> <td>lxzy787991021</td> </table> </body> 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 6. 水平与垂直 align：设置表格水平对其 ■ left：左对齐 ■ right：右对齐 ■ center：居中对其 valign：设置单元格的垂直对其 ■ top：顶部对齐 ■ bottom：底部对齐 ■ middle：中间对齐 三、在网页中添加表格 上网查资料、和朋友视频聊天、玩网络游戏 新知讲授 四 7. 跨行或者跨列 <body> <p>跨列</p> <table border="1"> <tr> <th>姓名</th> <th colspan="2">联系方式</th> </tr> <td>苏凉</td> <td>lxzy787991021</td> <td>787991021</td> </table> 三、在网页中添加表格 <p>跨行</p> <table border="1"> <tr> <th>姓名</th> <td>苏凉</td> </tr> <tr> <th rowspan="2">联系方式</th> <td>lxzy787991021</td> </tr> <tr> <td>787991021</td> </tr> </table> </body> 师生互动 五 实操：制作 "个人作品集网页"，使用三种颜色表示法美化页面元素，插入至少 3 张作品图片并正确设置属性，创建作品信息表格，包含至少 4 行数据。 随堂练习 六 1.在 HTML 中，正确表示红色的选项是（ ） A. color: "red" B. color: #FF0000 C. color: rgb (255, 0, 255) D. color: #255,0,0 答案：B 解析：选项 A 错误，因为 CSS 样式中属性值不需要加引号；选项 B 正确，#FF0000 是红色的十六进制表示法；选项 C 错误，rgb (255,0,255) 表示洋红色；选项 D 错误，十六进制颜色值格式应为 #RRGGBB，不能用逗号分隔。 随堂练习 六 2.在 HTML 中插入图像时，必须设置的属性是（ ） A. width B. src C. height D. align 答案：B 解析：src 属性用于指定图像的路径，是 img 标签必须设置的属性，否则无法加载图像；width 和 height 属性用于设置图像大小，可选；align 属性用于设置对齐方式，已不推荐使用，因此正确答案是 B。 随堂练习 六 3. 下列代码创建的表格有几行几列（ ） A. 3 行 3 列 B. 3 行 2 列 C. 3 行，列数分别为 2、1、3 D. 无法确定 答案：C 解析：表格的行数由<tr>标签数量决定，这里有 3 个<tr>标签，所以是 3 行；列数由每行中<td>标签的数量决定，第一行有 2 个<td>，第二行有 1 个<td>，第三行有 3 个<td>，因此列数不固定，正确答案是 C。 随堂练习 六 4. 请写出在网页中插入一张图片的完整 HTML 代码，要求：图片路径为 "images/school.jpg" ，图片无法显示时显示 "学校校园风光" ，图片宽度设置为 400 像素，高度自动适应。 <img src="images/school.jpg" alt="学校校园风光" width="400"> 课堂小结 七 谢谢 $$