网页设计与制作项目式教程（HTML+CSS）课件06.制作“著名诗人”模块.pptxVIP

网页设计与制作项目式教程（HTML+CSS）功能模块类网站开发项目——“古诗词”网站页面模块的实现

“古诗词”网站页面模块的实现我国传统文化博大精深、源远流长，蕴含着极其丰富而宝贵的精神财富，传承和弘扬中华优秀传统文化一直是教育领域的热点。最近，学校国风社团负责人阿文找到小丁，希望他能够帮忙制作一个“古诗词”网站，提高同学们对传统文化的学习兴趣。小丁充分了解了社团的需求，分析了网站需要的功能模块，他和团队的小伙伴将在工作室老师和企业专家的指导下学习制作该网站的功能模块。情景导入

任务3.1创建“古诗词”网站项目项目实施任务分析小丁分配到的任务是制作“古诗词”网站中的“著名诗人”“诗词推荐”“诗文释义”“诗人简历”模块。在制作之前，小丁需要做一些准备工作，根据网站开发需求以及UI设计师提供的素材，创建网站项目，项目信息如表3-1所?示。表3-1项目信息项目名称古诗词网站模块“著名诗人”模块（poet.html）、“诗词推荐”模块（commend.html）、“诗文释义”模块（translate.html）、“诗人简历”模块（introduce.html）资源目录样式表目录（css）、图片目录（img）

项目实施操作实施1.新建网站项目在开发软件HBuilderX中新建“古诗词”网站项目，具体步骤如下：（1）打开开发软件HBuilderX，选择“文件”菜单中的“新建”→“项目”命令。任务3.1创建“古诗词”网站项目

项目实施操作实施1.新建网站项目（2）在“选择模板”区域中选择“基本HTML项目”，填写项目名称“古诗词”，设置存储位置。任务3.1创建“古诗词”网站项目

项目实施操作实施2.网站资源管理根据网站资源需求新建目录和文件，基于模板基础，在“古诗词”根目录上右击，选择“新建”→“目录”和“新建”→“html文件”命令，建立commend.html、introduce.html、poet.html、translate.html文件。注意：要将素材文件夹中的图片文件复制到img文件夹?内。任务3.1创建“古诗词”网站项目

任务3.2制作“著名诗人”模块项目实施任务分析““著名诗人”模块效果图

项目实施任务分析分析页面的框架结构，其框架结构图及主要设置如下：任务3.2制作“著名诗人”模块

知识储备知识导图根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS选择器基础、盒子模型基础和浮动布局，知识导图如图所示。任务3.2制作“著名诗人”模块

知识储备新知学习1：CSS选择器基础CSS选择器是用于选择应用样式的HTML元素的一种模式，通过CSS选择器，我们可以对页面中的元素进行样式设置。CSS选择器主要分为以下几类：基本选择器、属性选择器、伪类选择器、组合选择器和伪元素选择器。这里将介绍基本选择器中的标签选择器、类选择器、id选择器和群组选择?器。任务3.2制作“著名诗人”模块

知识储备标签选择器是最简单的选择器，选择器通常是某个HTML元素，如p元素、td元素等，甚至可以是HTML本?身。语法：标签名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础

知识储备类选择器可以为指定class的HTML元素设置样?式。在HTML元素中，class属性的值不具有唯一性，可以使用class属性为一个或多个元素添加相同的样式。语法：类名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础

知识储备id选择器通过HTML元素的id属性来选取元素。每个HTML元素只能有一个id属性，且该属性的值在整个文档中必须是唯一?的。语法：id名{属性1:属性值1；属性2:属性值2；属性3:属性值3；……}举例：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础

知识储备群组选择器是由逗号分隔的选择器列表，是一种将多个选择器组合在一起，应用相同样式的选择器。我们可以在群组选择器中同时包含类选择器、id选择器、元素选择器等，用逗号分开，从而选择多个元素同时应用相同的样?式。例如h1、h2和p标签均应用了相同的字体和颜色样式，可以使用以下代码：任务3.2制作“著名诗人”模块新知学习1：CSS选择器基础

知识储备新知学习2：盒子模型基础盒子模型是CSS布局的基础，它描述了HTML元素在页面上的显示方式。了解盒子模型有助于我们更好地掌握CSS布局技?巧。1．盒子模型的概念盒子模型是一个矩形的容器，用于存放HTML元素。每个HTML元素都可以看作一个盒子，而这个盒子由4个部分组成：内容区、内边距、边框和外边距。任务3.2制作“著名诗