《工信版（中职）Web前端设计基础 项目二电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目二电子课件.pptx（53页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）Web前端设计基础 项目二电子课件网页中的文本和排版项目二授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点网页中各种文本的添加；文字的排版标签；网页中的图片。二 知识准备添加文本；文本排版；文字列表；添加图片。添加文本1.添加普通文本普通文本就是指汉字或者使用键盘可以直接输入的字符。在网页中添加普通文本可以有两种方法：一是在需要地位置直接输入汉字或字符；二是如果有现成的文本，可以使用复制、粘贴的方法，把需要的文本从其他窗口中复制过来，回到Sublime窗口在需要文本内容的位置进行粘贴
2、即可。添加文本2.添加特殊字符文本在网页中输入特殊字符，需要在HTML代码中输入该特殊字符相对应的代码。这些特殊字符相对应的代码都是以“&”开头，以“;”（注意是英文分号）结束的。如不断行的空格用“ ”来表示。特殊符号特殊符号名称名称HTML代码代码特殊符号特殊符号名称名称HTML代码代码双引号（英文）"分节符§左单引号‘版权符©右单引号’注册商标®乘号×商标™除号÷欧元€大于号>日元¥&与符号&度°长破折号—|竖线|添加文
3、本2.添加特殊字符文本在编辑化学公式或物理公式时，使用特殊字符的频度非常高，如果每次输入时都去查询或者记忆这些特殊符号的代码，工作量是相当大的，在此提供一些输入技巧。对于部分键盘上没有的字符，可以借助中文输入法的软键盘。如单击搜狗拼音输入法的“软键盘”按钮，弹出如图所示输入方式选项。单击“特殊符号”，,选择需要输入的符号类型，选择相应的特殊符号。添加文本3.文本格式化标签在HTML文档中，重要文本通常以粗体显示，可以使用两个标签或。标签和标签加粗的效果是一样的。但是在实际开发中，想要对文本加粗，尽量用标签，不要用标签，这是由于标签比标签更具有语义性。在HTML文档中，使用或标签实现文本的倾斜显
4、示。（1）粗体标签、（2）斜体标签、标签添加文本3.文本格式化标签在HTML文档中，用标签实现上标文本，用标签实现下标文本。和都是双标签，放在开始标签和结束标签之间的文本会分别以上标和下标的形式出现。在HTML文档中，用标签来呈现那些不再准确或不再相关的内容，用标签实现文本的下划线效果。（3）上标标签和下标标签（4）删除线标签和下划线标签HTML 5基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）文本格式化标签标签实例粗体标签使用<b>标签的粗体文本使用<strong>标签的粗体文本斜体标签使用<i>标签的斜体文本HTM
5、L 5基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）使用<em>标签的斜体文本上标、下标标签使用<sup>标签的上标文本使用<sub>标签的下标文本删除线标签使用<s>标签的删除线标签下划线标签使用<u>标签的下划线标签HTML 5基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）在chrome浏览器中预览文本排版1.换行标签换行标签是一个单标签，它没有结束标签，是英文单词break的缩写，作用是将文字在一个段内强制换行。一个标签代表一个换行，连续的多个标
6、签可以实现多次换行。使用换行标签时，在需要换行的位置添加标签即可。文本排版2.段落标签在HTML文档中，使用标签来标记一段文字。段落标签是双标签，即，在开始标签和结束标签之间的内容形成一个段落。如果省略结束标签，从标签开始，直到遇见下一个段落标签之前的文本，都在一个段落内。段落标签会自动换行，并且段落与段落之间有一定的空隙。文本排版3.标题标签在HTML文档中，文本的结构除了以行和段出现之外，往往还包含有各种级别的标题。各种级别的标题由元素来定义，标签中的字母h是英文header的简称。作为标题，它们的重要性是有区别的，其中标题的重要性最高，标题最低。一般一个页面只能有一个，而可以有多个。文本
7、排版3.标题标签【例2-2】标题标签实例，代码如右（示例文件2-2.html）标题标签实例山不在高，有仙则名水不在深，有龙则灵斯是陋室，惟吾德馨苔痕上阶绿，草色入帘青谈笑有鸿儒，往来无白丁可以调素琴，阅金经在chrome浏览器中预览文字列表1.建立有序列表有序列表的各个列表项是有顺序的。有序列表从开始，到结束，中间的列表项是标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序，其结构如下：有序列表项 有序列表项 有序列表项文字列表1.建立有序列表在默认情况下，有序列表使用数字作为列表项符号，除此之外还可以通过有序列表type属性来改变列表项符号，如表所示。t
8、ype属性值属性值列表项的序号类型列表项的序号类型1数字1、2、3a小写英文字母a、b、cA大写英文字母A、B、Ci小写罗马数字i、ii、iiiI大写罗马数字I、II、IIItype属性实现的效果可以用CSS的list-style-type实现，在后面的项目中会学习到。文本列表1.建立有序列表【例2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）有序列表olfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表1.建立有序列表【例2-3】建立
9、有序列表实例，代码如下所示（示例文件2-3.html）HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery在chrome浏览器中预览文字列表2.建立无序列表无序列表相对于有序列表而言，没有前面的顺序符号，只以符号作为分项标识。无序列表使用一对标签，其中每一个列表项使用标签，结构如下所示：无序列表项 无序列表项 无序列表项在无序列表结构中，使用标签作为一个无序列表的开始和结束，则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且标签的结束标签可以省略。文字列表2.建立无序列表默认情况下，无序列表的项目符号是，还可以通过无序列表type属性来改变
10、无序列表的列表项符号，如表所示。type属性值属性值列表项的序号类型列表项的序号类型disc默认值，实心圆“”circle空心圆“”square实心正方形“”文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）无序列表ulfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）HTMLCSSJavaScriptjQuery在chrom
11、e浏览器中预览文字列表3.建立自定义列表在HTML中还可以自定义列表，自定义列表的标签是。自定义列表由两部分组成：定义条件和定义描述，其结构如下：定义名词 定义描述 在该结构中，标签和标签分别定义了定义列表的开始和结束，后面添加要解释的名词，而在后面则添加该名词的具体解释。文本列表3.建立自定义列表【例2-5】建立自定义列表实例，代码如下所示（示例文件2-5.html）自定义列表/title文本排版换行标签br段落标签p标题标签h1h6文字列表有序列表ol无序列表ul自定义列表dl 在chrome浏览器中预览添加图片图片是网页中不可缺少的元素，巧妙地在网页中使用图片，可以为网页增色不少。网页支
12、持多种图片格式，包括GIF、JPEG、BMP、PNG、TIFF等格式的图片文件，其中使用最多的是GIF和JPEG两种格式，另外在网页中还可以对插入的图片设置宽度和高度，设置图片的提示文字等。src和alt这两个属性是标签必不可少的属性，title属性的值往往都是跟alt属性的值相同。在HTML文档中，插入图像使用单标签，图像标签的常用属性如表所示。属性属性说明说明src图像的文件地址alt图片显示不出来时的提示文字title鼠标移到图片上的提示文字width 设置图像的宽度height 设置图像的高度添加图片1.img标签src属性src，即“source（源文件）”。img标签的src属性用
13、于指定图像源文件所在的路径，它是图像必不可少的属性。其结构如下：相对路径使用的特殊符号有三种：./：代表目前所在的目录（可以省略不写）。./：代表上一层目录。以/开头：代表根目录。img标签是一个自闭合标签，没有结束标签。src属性用于设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径，但在真正的网站开发中，对于图片或者引用文件的路径，都是使用相对路径的。添加图片2.img标签alt属性alt属性用于设置图片的描述信息，这些信息是给搜索引擎看的。在搜索引擎优化SEO中，alt属性也是一个非常重要的属性。其结构如下：添加图片3.img标签title属性title属性用于设置鼠标移到
14、图片上的提示文字，这些提示文字是给用户看的。其结构如下：添加图片3.img标签title属性【例2-6】使用相对路径插入图像实例，文件结构及代码如图所示（示例文件2-6.html）在chrome浏览器中预览三 项目实施图文混排的HTML 5网页；图文并茂的商品列表网页。图文混排的HTML 5网页通过此项目学习了HTML 5网页中文本、图形、列表等标签元素，下面通过制作一个图文并茂的HTML 5网页来应用这些网页元素，效果如图所示。网页的主体部分是由上下两个标签组成。上面部分嵌套了一个和标签，右边是，左边是。下面部分由两个标签、一个标签和一个有序列表标签组成。图文混排的HTML 5网页启动Sub
15、lime程序，执行“文件”菜单中的“新建”命令或使用快捷键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
16、是CSS 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。设置了上标标签文字的大小
17、为12px、字体颜色为red。设置div区块的宽度为600px、背景颜色为silver（银色）、overflow（此属性规定当内容溢出元素框时发生的事情）为hidden。图文混排的HTML 5网页第三步 悯农二首 唐代：李绅 春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？图文混排的HTML 5网页第三步 译文及注释 译文 春天只要播下一粒种子，秋天就可收获很多粮食。普天之下，没有荒废不种的田地，劳苦农民，仍然要饿死。盛夏中午，烈日炎炎，农民还在劳作，汗珠滴入泥土。有谁想到，我们碗中的米饭，粒粒饱含着农民的血汗？注释 悯：怜悯。这里有同情的意思。
18、诗一作古风二首。这两首诗的排序各版本有所不同。粟：泛指谷类。秋收：一作“秋成”。子：指粮食颗粒。四海：指全国。闲田：没有耕种的田。犹：仍然。禾：谷类植物的统称。餐：一作“飧”。熟食的通称。图文混排的HTML 5网页第四步保存网页，在chrome浏览器预览，效果如图所示。图文并茂的商品列表网页用Sublime编辑器创建一个文件，保存名称为2-8.html。第一步第二步 输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码，输入主体内容、设置标签元素的CSS样式，代码如下：图文并茂的商品列表网页第二步图文并茂的商品列表lifloat:left;list-style:none;margin
19、-left: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。设置下的标签的宽度（wid
20、th）和高度（height）均为150px。设置标签的text-decoration（此属性规定添加到文本的修饰）为none，是为了去掉a超链接标签的默认下划线。图文并茂的商品列表网页第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞是CSS行内样式，使用“style=属性:值;”的方式定义本行中标签的clear属性（规定元素的哪一侧不允许其他浮动元素）为both，是为了清除上面标签float属性的left值。图文并茂的商品列表网页第三步保存网页，在chrome浏览器预览，效果如图所示。四 项目拓展对项目实施中的实例二进行修改，给网页添加背景、给div区块设置边框、鼠标移动到超链接
21、上样式变化，制作如图所示效果的网页。四 项目拓展用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:
22、150px;afont-size:14px;a:hovertext-decoration:none;font-size:16px;color:red;img:hovercolor:green;设置了div块的宽度为750px、高度为230px，边框为2px红色实线、overflow为 hidden。设置鼠标移动到超链接上时文本去掉下划线、字体大小为16px并且变为红色。四 项目拓展第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞设置网页背景图片。四 项目拓展第二步智能手机防尘塞智能手机防尘塞智能手机防尘塞智能手机防尘塞五 项目小结本项目通过项目实施和项目拓展制作了图文混排的HTM
23、L 5网页和两种不同的图文并茂的商品列表网页案例，学习了在网页中添加文本、图像、列表等标签元素内容，掌握了、等标签的使用方法。五 项目小结本项目主要知识点总结如表所示。标签格式总结标签标签格式格式说明说明标题文字（n为1,2,3,4,5,6）标题段落内容段落换行水平线分割（块元素）区域（行内元素）标记加粗的内容加粗标记加粗的内容加粗标记倾斜的内容斜体标记倾斜的内容斜体上标文字上标下标文字下标删除线标记内容删除线下划线标记内容下划线无序列表有序列表定义名词定义描述自定义列表图像六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise2.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息，如图所示。End