网页设计与制作（活页式） 课件 情景4-3 课中案例

JavaScriptCSSHTMLHTMLCSS网页设计与制作情景案例授课教师：胡文利目录CONTENTS1案例分析2思政育人3知识导图4案例操练5创新拓展案例分析01案例分析

01如何使用表格进行排版

02如何在表格中插入图片使页面更加美观那么，我们如何实现一个历史人物故事网页面呢，首先我们先思考几个问题：案例分析历史人物故事网案例分析案例学习目标能够熟练建立站点能够了解并熟练使用表格。案例知识要点表格标签及属性设置表格的布局02思政育人少年兴则国兴，少年强则国强当代大学生是建设祖国的强大力量，要适应时代的开展要求，努力学习先进的科学文化知识，正确的认识祖国的历史和现实。增强爱国的情感和振兴祖国的职责感，树立民族自尊心和自信心，弘扬伟大的中华民族精神，高举爱国主义旗帜，锐意进取，自强不息，艰苦奋斗，顽强拼搏，真正的把爱国之志变成爱国之行。思政育人通过对历史人物故事页面的设计，灵活运用表格标签及属性设置的知识，学以致用，在具体实现过程中，选择有代表性的部分历史爱国名人作为素材，引起学生的学习兴趣，同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。使学生更加有动力去完成网页的设计与制作，培养学生的不屈不饶的中华民族精神。确定网页主题设计思路本次历史人物故事网的制作，旨在通过历史爱国名人事迹，唤起学生的家国情怀、社会责任感和理想信念。准备素材：搜集中国古代科技文化成就相关文本、图片；确定表格的宽度、行列等设置，图片的路径、大小、宽高；确定页面风格，编码实现；测试运行03知识导图案例探究本次案例所需要的知识线路图04案例操练案例实施

开发工具“HBuilderX”，选择“文件”------>“新建”------>“项目”，打开如下图所示对话框：Step01命名好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。创建项目案例实施

将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图所示Step02案例实施

插入一个4行4列的表格，并设置表格属性及表格标题，代码如下所示。代码如下图所示：Step03<tableborder="1“align=“center"cellpadding="0"cellspacing="0"><caption>历史人物故事</caption><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>案例实施

先完成第一行，将第一行的4个单元格作为标题，将其<td>改成<th>，并设置第一行的背景颜色属性，最后将准备好的文本复制到每个标题单元格内，代码如图所示：Step04

CSS代码图

效果图运行结果如图所示：案例实施

接下来完成第二行，在第二行的每个单元格中插入图片，注意对应第一行的人物。代码如下图所示：Step05

代码图

效果图运行结果如图所示：案例实施

接下来，第三行对应第一行的人物，写上相应的诗句，代码如图所示：Step06最终效果图如下图所示：案例实施

最后对应第一行的人物，补全第四行的人物介绍，最终效果图如图所示。Step0705创新拓展任务拓展根据课中已完成的案例，灵活运用已掌握的知识点，发散思维，使用表格进行布局，制作一个以红色教育、科技强国、绿水青山为主题的页面。可根据自己的实践经历，比如自己所知道的科技成就、历史人物故事、家乡的生态文明史等，或者自己参观过的科技馆、革命历史纪念馆、祖国的大好河山等，善于发现案例，