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

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

项目实施任务分析社团负责人希望小丁能设计一个“诗人简历”模块，通过简历，用户可以了解诗人的作品风格、代表作品等详细信息。任务3.4制作“诗人简历”模块

项目实施任务分析任务3.4制作“诗人简历”模块“诗人简历”模块框架结构

知识储备知识导图完成本任务还需要学习的主要知识点有表格的基本结构，合并单元格以及表格的CSS样式设置，知识导图如图所示。任务3.4制作“诗人简历”模块

知识储备新知学习1：表格元素表格元素是一种用于展示结构化数据的标记语言元素，在网页设计中用得很多，使用表格可以更清晰地展示数据。任务3.4制作“诗人简历”模块

知识储备1．表格的基本结构表格元素由table标签来定?义。行：tr单元格：td表格标题：caption表头：th边框：border空间属性：cellspacing和cellpadding任务3.4制作“诗人简历”模块新知学习1：表格元素

知识储备tableborder=1cellspacing=0cellpadding=0caption传统汉文学/captiontrtd诗/tdtd词/td/trtrtd歌/tdtd赋/td/tr/table任务3.4制作“诗人简历”模块新知学习1：表格元素

知识储备2．合并行rowspan在设计表格时，有时候需要将两个或者更多的相邻单元格组合成一个单元格，类似于Excel中的“合并单元格”。在HTML中，需要用到“合并行”和“合并列”。我们先来学习合并行rowspan属?性。语法：tdrowspan=跨度的行数任务3.4制作“诗人简历”模块新知学习1：表格元素

知识储备tablecaption传统汉文学/captiontrtd诗/tdtdrowspan=2词赋/td!--合并两个单元格--/trtrtd歌/td!--td赋/td--!--此单元格已经被合并，需删掉--/tr/table任务3.4制作“诗人简历”模块新知学习1：表格元素

知识储备3．合并列colspan在HTML中，表格合并列指的是将几列进行合?并。语法：tdcolspan=跨度的列数任务3.4制作“诗人简历”模块新知学习1：表格元素

知识储备1．去除单元格的间距默认情况下，表格加入边框时单元格与单元格之间存在一定的间距，导致整个表格看上去不美观，如图所?示。任务3.4制作“诗人简历”模块新知学习2表格的CSS样式

知识储备如果我们要去除单元格的间距，该怎么办呢？在CSS中，我们可以使用border-collapse属性值来去除单元格之间的间?距。语法：border-collapse:属性值;任务3.4制作“诗人简历”模块新知学习2表格的CSS样式border-collapse属性值属性值描述separate默认值，边框分开，不合并collapse边框合并，如果相邻，则共用一个边框

知识储备2．定义表格边框间距在实际开发中，有时候我们需要定义一下表格边框的间?距。在CSS中，可以使用border-spacing属性值来定义表格边框的间?距。语法：border-spacing:像素值；任务3.4制作“诗人简历”模块新知学习2表格的CSS样式

小结延伸任务小结本任务围绕“诗人简历”模块的制作，分析了页面的结构要素，介绍了表格元素及表格的CSS样式设置，综合应用完成了该功能模块的制作。任务3.4制作“诗人简历”模块

小结延伸1.课后同学们可以根据所学知识，丰富网站内容，将完成的功能模块进行整合，参考效果如图所?示。课后延伸任务3.4制作“诗人简历”模块