工信版（中职）Web前端设计基础 项目一-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目一-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目一-2电子课件.pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目一-2电子课件HTML文档结构项目一授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施标准的HTML 5网页；简单的HTML 5网页。标准的HTML 5网页启动Sublime程序，执行“文件”菜单中的“新建”命令或使用Ctrl+N组合键新建一个文件，执行“文件”菜单中的“保存”命令或使用Ctrl+S组合键保存文件名称为1-3.html。第一步标准的HTML 5网页输入“!”，按【TAB】键就会按照HTML 5规范自动创建如下代码。第二步Document标准的HTML 5网页修

2、改网页标题、元信息和注释内容，并在网页的主体中添加内容，代码如下：第三步Web前端设计Web前端设计特点Web前端设计，紧跟时代步伐Web前端设计，源自企业需求Web前端设计项目驱动教学，所需即所学，所学即所用。标准的HTML 5网页再次执行“文件”菜单中的“保存”命令或使用快捷键Ctrl+S保存文件。第四步第五步在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。标准的HTML 5网页用Sublime编辑器创建一个文件，保存名称为1-4.html。第一步第二步输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码，修改网页标题，输入主体内容，代码如下：标准的HT

3、ML 5网页第二步简单的HTML 5网页悯农二首唐代：李绅春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？标准的HTML 5网页第三步保存网页，在chrome浏览器预览，效果如图所示。四 项目拓展通过项目实施，能够制作出简单的HTML 5网页，但对于文字的大小、颜色和图片不能控制，此项目利用简单CSS代码对上例中文本和图片进行格式设置，制作如图所示的网页。四 项目拓展首先要对左边的文字进行大小、颜色的设置，右边图片大小的设置，然后让右边的图片和左边的文字并排显示在一行。第一步 分析需求第二步用Sublime编辑器创建一个文件，保存名称为1-5.h

4、tml，输入“！”按Tab健，修改title标签内容为“简单的HTML 5+CSS网页”。四 项目拓展第二步简单的HTML 5+CSS网页四 项目拓展第三步简单的HTML 5+CSS网页h2color:red;h4font-size:9px;color:gray;pfont-size:14px;color:green;imgwidth:170px;div,imgfloat:left;在body中创建内容，在标签之中用标签添加内嵌样式的CSS代码。内嵌样式的CSS代码，其中的h2、h4、p、img和div都是CSS 3常用选择器的一种标签选择器。例如p选择器，就是声明页面中所有标签的样式风格。四

5、 项目拓展第三步简单的HTML 5+CSS网页h2color:red;h4font-size:9px;color:gray;pfont-size:14px;color:green;imgwidth:170px;div,imgfloat:left;h2选择器声明第16行“悯农二首”的字体颜色为红色h4选择器声明第17行“唐代：李绅”的字体大小为9px（px是像素单位），颜色为灰色p选择器声明第18-21行和21-25行里的内容的字体大小为14px，颜色为绿色img选择器声明第27行中图片的宽度为170px声明了div和img选择器向左浮动四 项目拓展第三步悯农二首唐代：李绅春种一粒粟，秋收万颗子

6、。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？五 项目小结本项目通过项目实施和项目拓展制作了符合W3C标准的HTML 5网页、简单的HTML 5网页和利用CSS代码对文本及图片进行格式设置三个案例，学习了HTML 5文件的基本结构、基本标签和Sublime编辑器的使用等内容，掌握了标签、标签、标签、标签、标签、编辑器快速输入以及Chrome浏览器开发者工具使用技巧。五 项目小结HTML 5基本结构如图所示。五 项目小结本项目主要知识点总结如表所示。标签标签内部内部标签标签说明说明整个网页是从这里开始，然后到结束head标签代表页面的“头”，定义一些特殊内容，这些内容

7、都是在浏览器不可见的定义网页的标题定义网页的基本信息（供搜索引擎）定义CSS样式链接外部CSS文件或脚本文件定义脚本语言定义页面所有链接的基础定位（用得很少）代表页面的“身”，定义网页展示内容，这些内容都是在浏览器可见的页面注释标签是为了代码可读易懂，注释的内容在浏览器不会显示出来HTML 5基本标签及说明五 项目小结本项目主要知识点总结如表所示。Sublime编辑器的使用技巧类别类别方法方法初始化文档初始化文档输入“!”或“html:5”，然后按Tab键或ctrl+e快捷键添加添加ID在元素名称和ID之间输入“#”添加类添加类在输入时类名称之前加“.”添加文本和属性添加文本和属性将HTML元

8、素的内容用“”括起来，元素的属性用“”括起来标签的嵌套标签的嵌套：子元素符号，表示嵌套的元素；+：同级标签符号；：可以使该符号前的标签提升一行代码组合代码组合使用标签的嵌套和括号可以快速生成代码组合隐式标签隐式标签进行快速输入时，根据父标签进行判定从而得到不同的代码。隐式标签名称为：li：用于ul和ol中；tr：用于table、tbody、thead和tfoot中；td：用于tr中；option：用于select和optgroup中定义多个元素定义多个元素使用“*”符号来定义多个元素定义多个带属性的元素定义多个带属性的元素使用“$”符号来指定编号，使用“$-”符号来指定反向编号六 技能训练通过

9、测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise1.html文件，如图所示，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise1.html文件，如图所示，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成标准的HTML5网页的实例操作。2.上机完成简单的HTML5网页的实例操作。3.上机完成项目拓展中的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End