工信版（中职）Web前端设计基础 项目二-3电子课件
2022-10-25
|
25页
|
99人阅读
|
0人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.97 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-07-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574046.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目二-3电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
网页中的文本和排版
项目二
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
三 项目实施
图文混排的HTML 5网页；
图文并茂的商品列表网页。
图文混排的HTML 5网页
通过此项目学习了HTML 5网页中文本、图形、列表等标签元素，下面通过制作一个图文并茂的HTML 5网页来应用这些网页元素，效果如图所示。
网页的主体部分是由上下两个<div>标签组成。上面<div>部分嵌套了一个<div>和<img>标签，右边是<img>，左边是<div>。下面<div>部分由两个<p>标签、一个<hr>标签和一个<ol>有序列表标签组成。
图文混排的HTML 5网页
启动Sublime程序，执行“文件”菜单中的“新建”命令或使用快捷键Ctrl + N新建一个文件，执行“文件”菜单中的“保存”命令或使用快捷键Ctrl + S保存文件名称为2-7.html。
第一步
第二步
输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码。
图文混排的HTML 5网页
第三步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悯农二首</title>
<style>
div{width:600px;background: silver;overflow:hidden;}
.fl{width:300px;float:left;}
img{width:180px;float:left;}
sup{font-size: 12px;color:red;}
</style>
</head>
是内嵌样式的CSS代码，其中的div、img、sup是CSS 3常用选择器的一种标签选择器，第8行的.fl是CSS 3常用选择器的一种class选择器。
修改<title>网页标题、添加主体内容、设置区块浮动，代码如下：
图文混排的HTML 5网页
第三步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悯农二首</title>
<style>
div{width:600px;background: silver;overflow:hidden;}
.fl{width:300px;float:left;}
img{width:180px;float:left;}
sup{font-size: 12px;color:red;}
</style>
</head>
为了将上半部分div区块嵌套的<div>标签和<img>标签在一行显示，分别设置.fl和img的宽度为300px、180px和浮动方式为left。
设置了上标标签<sup>文字的大小为12px、字体颜色为red。
设置div区块的宽度为600px、背景颜色为silver（银色）、overflow （此属性规定当内容溢出元素框时发生的事情）为hidden。
图文混排的HTML 5网页
第三步
<body>
<div>
<div class="fl">
<h2>悯<sup>①</sup>农二首</h2>
<i>唐代：李绅</i>
<p>
春种一粒粟<sup>②</sup>，秋收<sup>③</sup>万颗子。<br>
四海<sup>④</sup>无闲田，农夫犹<sup>⑤</sup>饿死。<br>
</p>
<p>
锄禾<sup>⑥</sup>日当午，汗滴禾下土。<br>
谁知盘中餐<sup>⑦</sup>，粒粒皆辛苦？<br>
</p>
</div>
<p><img src="images/minnong.jpg" alt="悯农图片"></p>
</div>
图文混排的HTML 5网页
第三步
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。