《工信版（中职）Web前端设计基础 项目二-3电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目二-3电子课件.pptx（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）Web前端设计基础 项目二-3电子课件网页中的文本和排版项目二授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施图文混排的HTML 5网页；图文并茂的商品列表网页。图文混排的HTML 5网页通过此项目学习了HTML 5网页中文本、图形、列表等标签元素，下面通过制作一个图文并茂的HTML 5网页来应用这些网页元素，效果如图所示。网页的主体部分是由上下两个标签组成。上面部分嵌套了一个和标签，右边是，左边是。下面部分由两个标签、一个标签和一个有序列表标签组成。图文混排的HTML 5网页启动Sublime程
2、序，执行“文件”菜单中的“新建”命令或使用快捷键Ctrl+N新建一个文件，执行“文件”菜单中的“保存”命令或使用快捷键Ctrl+S保存文件名称为2-7.html。第一步第二步 输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码。图文混排的HTML 5网页第三步悯农二首divwidth:600px;background:silver;overflow:hidden;.flwidth:300px;float:left;imgwidth:180px;float:left;supfont-size:12px;color:red;是内嵌样式的CSS代码，其中的div、img、sup是CSS
3、3常用选择器的一种标签选择器，第8行的.fl是CSS 3常用选择器的一种class选择器。修改网页标题、添加主体内容、设置区块浮动，代码如下：图文混排的HTML 5网页第三步悯农二首divwidth:600px;background:silver;overflow:hidden;.flwidth:300px;float:left;imgwidth:180px;float:left;supfont-size:12px;color:red;为了将上半部分div区块嵌套的标签和标签在一行显示，分别设置.fl和img的宽度为300px、180px和浮动方式为left。设置了上标标签文字的大小为12px
4、、字体颜色为red。设置div区块的宽度为600px、背景颜色为silver（银色）、overflow（此属性规定当内容溢出元素框时发生的事情）为hidden。图文混排的HTML 5网页第三步 悯农二首 唐代：李绅 春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？图文混排的HTML 5网页第三步 译文及注释 译文 春天只要播下一粒种子，秋天就可收获很多粮食。普天之下，没有荒废不种的田地，劳苦农民，仍然要饿死。盛夏中午，烈日炎炎，农民还在劳作，汗珠滴入泥土。有谁想到，我们碗中的米饭，粒粒饱含着农民的血汗？注释 悯：怜悯。这里有同情的意思。诗一作古风
5、二首。这两首诗的排序各版本有所不同。粟：泛指谷类。秋收：一作“秋成”。子：指粮食颗粒。四海：指全国。闲田：没有耕种的田。犹：仍然。禾：谷类植物的统称。餐：一作“飧”。熟食的通称。图文混排的HTML 5网页第四步保存网页，在chrome浏览器预览，效果如图所示。图文并茂的商品列表网页用Sublime编辑器创建一个文件，保存名称为2-8.html。第一步第二步 输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码，输入主体内容、设置标签元素的CSS样式，代码如下：图文并茂的商品列表网页第二步图文并茂的商品列表lifloat:left;list-style:none;margin-left
6、:10px;text-align:center;li imgwidth:150px;height:150px;atext-decoration:none;font-size:14px;智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞是内嵌样式的CSS代码，其中的li、img、a都是CSS 3常用选择器的一种标签选择器。其中标签定义超链接，用于从一张页面链接到另一张页面。设置标签的浮动方式（float）为left、列表样式（list-style）为none、左边距（margin-left）为10px、内容对齐（text-align）方式为center。设置下的标签的宽度（width）和高
7、度（height）均为150px。设置标签的text-decoration（此属性规定添加到文本的修饰）为none，是为了去掉a超链接标签的默认下划线。图文并茂的商品列表网页第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞是CSS行内样式，使用“style=属性:值;”的方式定义本行中标签的clear属性（规定元素的哪一侧不允许其他浮动元素）为both，是为了清除上面标签float属性的left值。图文并茂的商品列表网页第三步保存网页，在chrome浏览器预览，效果如图所示。四 项目拓展对项目实施中的实例二进行修改，给网页添加背景、给div区块设置边框、鼠标移动到超链接上样式变化
8、，制作如图所示效果的网页。四 项目拓展用Sublime编辑器打开文件（Ctrl+O组合键）2-8.html，另存为（Ctrl+Shift+S组合键）2-9.html。第一步 第二步设置网页背景、设置div块的边框和鼠标的hover属性。代码如下：四 项目拓展第二步图文并茂的商品列表divwidth:750px;height:230px;border:2px solid red;overflow:hidden;lifloat:left;list-style:none;margin-left:10px;text-align:center;li imgwidth:150px;height:150px
9、;afont-size:14px;a:hovertext-decoration:none;font-size:16px;color:red;img:hovercolor:green;设置了div块的宽度为750px、高度为230px，边框为2px红色实线、overflow为 hidden。设置鼠标移动到超链接上时文本去掉下划线、字体大小为16px并且变为红色。四 项目拓展第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞设置网页背景图片。四 项目拓展第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞五 项目小结本项目通过项目实施和项目拓展制作了图文混排的HTML 5网页
10、和两种不同的图文并茂的商品列表网页案例，学习了在网页中添加文本、图像、列表等标签元素内容，掌握了、等标签的使用方法。五 项目小结本项目主要知识点总结如表所示。标签格式总结标签标签格式格式说明说明标题文字（n为1,2,3,4,5,6）标题段落内容段落换行水平线分割（块元素）区域（行内元素）标记加粗的内容加粗标记加粗的内容加粗标记倾斜的内容斜体标记倾斜的内容斜体上标文字上标下标文字下标删除线标记内容删除线下划线标记内容下划线 无序列表 有序列表定义名词定义描述自定义列表图像六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise2.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息，如图所示。作业一、上机实训1.上机完成图文混排的HTML5网页的实例操作。2.上机完成图文并茂的商品列表网页的实例操作。3.上机完成项目拓展中的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End