网页设计与制作项目式教程（HTML+CSS）课件04.制作“中国民俗”网站首页.pptx

网页设计与制作项目式教程（HTML+CSS）项目二简单展示类网页开发项目——制作“中国民俗”网站首页

任务2.3制作“中国民俗”网站首页项目实施任务分析小丁已经完成了“中国民俗”网站“传统节日”详情页html内容部分的制作，现在开始制作网站首页。“中国民俗”网站首页面效果图

项目实施任务分析分析页面的框架，以及方便后期对主页样式的设置，本页面分成了头部区和主体区2部分。头部区又分成了logo图片及导航区和分隔条区，导航超链接到相应的详情页面，其框架结构图及主要设置如下：任务2.3制作“中国民俗”网站首页

知识储备知识导图根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有图像、块元素、行元素，知识导图如图所示。任务2.3制作“中国民俗”网站首页

知识储备新知学习1：图片1.图片标签img图片是网页中不可或缺的元素，一个图文并茂的网页可以增强用户体验，传达信息以及提升页面的吸引力，吸引更多的浏览者的关注。在HTML文件中，插入图片是通过插入img标签来实现的。它是一个自闭合标签，只包括属性，没有结束标签。基本语法格式如下：imgsrc=＂url＂alt=＂替代文字＂title=＂提示文字＂任务2.3制作“中国民俗”网站首页

知识储备新知学习1：图片img标签的常用属性有src、alt、title。任务2.3制作“中国民俗”网站首页属性值描述src图像文件的URL地址，必选属性alt图像显示不出来时的替代文字，必选属性title鼠标移动图像上的提示文字

知识储备新知学习1：图片2.图片路径img标签有一个非常重要的属性，即src(source),它的值是图片的url地址。url地址可以是相对路径或绝对路径。任务2.3制作“中国民俗”网站首页相对路径是指相对于当前文件，目标文件即图片所在的路径。相对路径的输入方法如下表所示。相对位置输入方法代码示例同一目录输入要插入的图片imgsrc=”img1.jpg”alt=”图像1”上一目录先输入“../”，再输入目录名imgsrc=”../img/img2.jpg”alt=”图像2”下一目录先输入目录名，后加“/”imgsrc=”img/img3.jpg”alt=”图像3”

知识储备新知学习1：图片任务2.3制作“中国民俗”网站首页2.图片路径绝对路径是指目标文件即图片在文件中的完整路径，包括盘符或者文件传输的协议。只要图片没有移动位置，任务网页引用它，使用的路径都是相同的。绝对路径有两种，一种是本地的文件路径，如D:/中国民俗/img/img1.jpg，另一种是从协议开始定义的完整的url网址，如/images/logo.jpg。

知识储备新知学习1：图片举例：已建有如下图所示站点：现index页面想插入舞龙.jpg和划龙舟.jpg，代码编写如下：任务2.3制作“中国民俗”网站首页2.图片路径

知识储备新知学习2：块级元素与行内元素1.块级元素块级元素在浏览器显示时以块的形式独占一行，呈现为一个独立的块，上下有一定空间。如h1-h6、p、hr元素等。块级元素内部可以容纳其它块级元素和行内元素。2.行内元素行内元素通常用于包裹文本的一部分，不会在新行上换行，而是在同一行上呈现，且不会在周围创建额外的空间。如strong、em、a、u元素等。行内元素可以容纳其它其它的行内元素，但不能容纳块级元素。任务2.3制作“中国民俗”网站首页

知识储备新知学习2：块级元素与行内元素3.div元素div是分区或者分块的意思，是块级元素，它用于创建一个容器，可以对容器内的其它HTML元素进行布局和样式控制。div元素本身没有特定的含义，当对它进行样式设置时，可以对内容块整体设置样式属性。div元素的基本语法格式如下：divid=””class=””style=””块包含的内容/div任务2.3制作“中国民俗”网站首页

知识储备div标签的常用属性有id、class、style。任务2.3制作“中国民俗”网站首页属性值描述id元素的唯一idclass元素的类名style元素的行内样式新知学习2：块级元素与行内元素

知识储备新知学习2：块级元素与行内元素3.span元素span是行内元素，通常用于对文本设置样式或者标记特定的部分。span元素没有格式上的意义，只有应用样式时，它才呈现出视觉上的效果。span元素的基本语法格式如下：spanstyle=””文本的内容/span任务2.3制作“中国民俗”网站首页

操作实践任务实践2.3.1：搭建页面框架根据之前对页面结构的分析，主页用div元素布局，形成页面框架，书写相应的HTML代码，具体代码如下：任务2.3制作“中国民俗”网站首页

操作实践任务实践2.3.2：制作图片页面内容任务