《（中职）Web前端设计基础 项目二-2电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目二-2电子课件.pptx（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF正版可修改PPT（中职）Web前端设计基础 项目二-2电子课件网页中的文本和排版项目二授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备添加文本；文本排版；文字列表；添加图片。文字列表1.建立有序列表有序列表的各个列表项是有顺序的。有序列表从开始，到结束，中间的列表项是标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序，其结构如下：有序列表项 有序列表项 有序列表项文字列表1.建立有序列表在默认情况下，有序列表使用数字作为列表项符号，除此之外还可以通过有序列表type属
2、性来改变列表项符号，如表所示。type属性值属性值列表项的序号类型列表项的序号类型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文本列表
3、1.建立有序列表【例2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery在chrome浏览器中预览文字列表2.建立无序列表无序列表相对于有序列表而言，没有前面的顺序符号，只以符号作为分项标识。无序列表使用一对标签，其中每一个列表项使用标签，结构如下所示：无序列表项 无序列表项 无序列表项在无序列表结构中，使用标签作为一个无序列表的开始和结束，则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且标签的结束标签可以省略。文字列表2.建立无序列表默认情况下，无序列表的项目符号是，还可
4、以通过无序列表type属性来改变无序列表的列表项符号，如表所示。type属性值属性值列表项的序号类型列表项的序号类型disc默认值，实心圆“”circle空心圆“”square实心正方形“”文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）无序列表ulfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表2.建立无序列表【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）HTMLCSSJavaSc
5、riptjQuery在chrome浏览器中预览文字列表3.建立自定义列表在HTML中还可以自定义列表，自定义列表的标签是。自定义列表由两部分组成：定义条件和定义描述，其结构如下：定义名词 定义描述 在该结构中，标签和标签分别定义了定义列表的开始和结束，后面添加要解释的名词，而在后面则添加该名词的具体解释。文本列表3.建立自定义列表【例2-5】建立自定义列表实例，代码如下所示（示例文件2-5.html）自定义列表/title文本排版换行标签br段落标签p标题标签h1h6文字列表有序列表ol无序列表ul自定义列表dl 在chrome浏览器中预览添加图片图片是网页中不可缺少的元素，巧妙地在网页中使用
6、图片，可以为网页增色不少。网页支持多种图片格式，包括GIF、JPEG、BMP、PNG、TIFF等格式的图片文件，其中使用最多的是GIF和JPEG两种格式，另外在网页中还可以对插入的图片设置宽度和高度，设置图片的提示文字等。src和alt这两个属性是标签必不可少的属性，title属性的值往往都是跟alt属性的值相同。在HTML文档中，插入图像使用单标签，图像标签的常用属性如表所示。属性属性说明说明src图像的文件地址alt图片显示不出来时的提示文字title鼠标移到图片上的提示文字width 设置图像的宽度height 设置图像的高度添加图片1.img标签src属性src，即“source（源文
7、件）”。img标签的src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。其结构如下：相对路径使用的特殊符号有三种：./：代表目前所在的目录（可以省略不写）。./：代表上一层目录。以/开头：代表根目录。img标签是一个自闭合标签，没有结束标签。src属性用于设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径，但在真正的网站开发中，对于图片或者引用文件的路径，都是使用相对路径的。添加图片2.img标签alt属性alt属性用于设置图片的描述信息，这些信息是给搜索引擎看的。在搜索引擎优化SEO中，alt属性也是一个非常重要的属性。其结构如下：添加图片3.img标签title属
8、性title属性用于设置鼠标移到图片上的提示文字，这些提示文字是给用户看的。其结构如下：添加图片3.img标签title属性【例2-6】使用相对路径插入图像实例，文件结构及代码如图所示（示例文件2-6.html）在chrome浏览器中预览作业一、选择题1.制作网页时，如果想在段落内每个项目前面加上1、2、3等有顺序的数字，可以使用_标签。A B C D 2.制作网页时，如果想在段落内每个项目前面加上“”符号，可以使用_标签。A B C D 3.img标签的_属性用于指定图像源文件所在的路径。A src B alt C title D width二、上机实训上机完成例2-3到例2-6的实例操作。End