《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第21课 网页设计综合案例

211第课211第课网页设计综合案例的基基本本PAGE6211321211321网页设计综合案例第课PAGE521212网页设计综合案例第21212网页设计综合案例第课PAGE1

课题网页设计综合案例课时2课时（90min）教学目标知识技能目标：（1）了解创建网页之前需要的准备工作（2）掌握企业宣传网站首页和网站登录页的制作方法思政育人目标：（1）培养学生一丝不苟，严谨、认真的工作态度（2）在学习中拓展自己的视野，开阔自己的眼界教学重难点教学重点：创建网页之前需要的准备工作、网站首页和网站登录页的制作方法教学难点：企业宣传网站首页和网站登录页的制作教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（25min）第2节课：导入新知（4min）知识讲解（37min）

课堂小结（2min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】提出问题，引出本节课内容那么在对网页的操作中，如何对需求进行分析，对网站功能进行概述呢？【学生】聆听、思考通过问答的方式，让学生主动思考，如何完成网页设计的准备工作，引起学生的学习兴趣知识讲解

（25min）【教师】讲解创建网页前的准备工作1．需求分析在实际的网站建设中，一般是先由客户提出需求，设计人员根据这些需求设计网页效果图，并不断与客户沟通修改细节，最后由开发人员根据最终效果图编写网页代码。本项目制作的“金企鹅比特币交易网”是一个虚拟货币交易网站，其中包括网站首页、交易中心页、财务中心页、新闻中心页、个人中心页、帮助中心页与登录（注册）页。用户没有登录网站时为游客身份，能够正常访问网站首页、新闻中心页、帮助中心页与登录（注册）页，访问其他页面会弹出登录提醒；用户登录网站后为会员身份，能够正常访问所有页面并使用其中的各项功能。2．网站功能概览（1）游客身份。游客打开网站首页后，可在其中浏览网页内容并使用首页提供的查阅实时交易行情功能；单击导航条中的“新闻中心”按钮，可打开新闻中心页查看虚拟货币交易的相关新闻；单击导航条中的“帮助中心”按钮，可打开帮助中心页查看网站的帮助信息或向网站反馈问题；单击页面右上角的“登录”或“注册”按钮，可打开登录页使用登录或注册功能。（2）会员身份。游客使用登录功能登录网站后转换为会员身份，除上述功能外，单击导航条中的“交易中心”按钮，可打开交易中心页使用交易功能；单击导航条中的“财务中心”按钮，可打开财务中心页使用财务管理功能；单击导航条中的“个人中心”按钮，可打开个人中心页对账号信息进行管理。网页各项功能的具体实现除用到HTML和CSS外，还要用到PHP、ASP等后端开发技术，本项目只介绍使用HTML5和CSS3制作网站首页与登录页的过程。【学生】聆听、记录、思考通过讲解知识点，让学生进一步了解网页设计的准备工作，为以后的学习打下基础课堂练习

（15min）【教师】布置课堂练习创建站点并构建网站目录结构【教师】演示重点操作流程（1）打开DW，选择“站点”→“新建站点”菜单，打开“站点设置对象”对话框，在“站点名称”文本框中输入“bitcoin”，单击“本地站点文件夹”文本框右侧的按钮，打开“选择根文件夹”对话框，在其中选择创建好的“bitcoin”文件夹，单击“选择文件夹”按钮回到“站点设置对象”对话框，然后单击“保存”按钮，创建站点（2）继续在站点下创建一个名为“css”的文件夹，并在其中创建一个名为“base.css”的文档（3）打开本书配套素材“项目11”文件夹，将其中的“img”文件夹复制并粘贴至站点中，此时在“文件”面板中能够看到“bitcoin”站点的目录结构【学生】完成课堂练习【教师】点名学生，讲解课堂练习【学生】讲解课堂练习通过课堂练习，巩固理解本节课内容，加深学生对文件定位的理解交流讨论

（4min）【教师】安排组间讨论，设置讨论话题安排小组之间两两讨论，分析制作网页为何需要这些准备工作以及这些准备工作的具体做法【学生】完成小组讨论，记录讨论内容让学生有自我反省的意识，并且及时回顾学习的内容第二节课导入新知

（4min）【教师】复习上一节课内容，引出本节课知识点前面主要介绍了网页设计之前的准备工作，包括需求分析、网站功能概述浏览以及创建站点并构建网站目录结构。下面将会介绍本节课的内容，制作网站首页和制作网站登录页【学生】聆听、思考、讨论通过对上一节课内容的复习，让学生了解本节课内容知识讲解

（37min）【教师】讲解制作网站首页1．效果图分析根据“金企鹅比特币交易网”首页效果图。效果图能够看出，该页面共包含8个部分，分别为页眉、广告位、风险提醒模块、行情模块、宣传模块、新闻模块、联系模块与页脚。页眉与页脚分别放置在<header>与<footer>标签中，广告位放置在<div>标签中，其余模块放置在<section>标签中。（1）页眉。页眉中含有网站Logo、导航条、登录与注册按钮。（2）广告位。在企业网站中，页眉的下方一般会有一个广告区域，其中用一个或多个图像展示网站的重要内容或核心功能等，让用户对网站的用途一目了然。（3）风险提醒模块。因本项目案例的网站主题为虚拟货币交易，所以需要给用户一个关于交易的风险提醒，避免用户盲目消费。（4）行情模块。行情模块能够让用户了解比特币交易的实时行情，需要配合JavaScript脚本及后端开发技术完成，此处使用图像文件代替。（5）宣传模块。宣传模块主要说明当前网站的特点。（6）新闻模块。新闻模块提供有关虚拟货币的相关资讯，丰富首页内容。（7）联系模块。联系模块提供当前网站运营团队的联系方式，如QQ、微信等。（8）页脚。页脚中包括部分扩展功能、联系地址等。2．设置网页头部信息并构建页面整体结构3．制作页眉4．制作广告位5．制作风险提醒模块6．制作行情模块7．制作宣传模块8．制作新闻模块9．制作联系模块10．制作页脚【学生】聆听、思考、理解【教师】演示、运行参考代码（详见教材）【学生】编写参考代码，运行程序【教师】讲解制作网站登录页1．效果图分析此处的登录页包含4部分，分别为网站Logo图像、宣传语模块、登录表单模块与页脚。网站Logo图像放在<a>标签中，宣传语模块与登录表单模块分别放置在同一个<section>标签中的两个<div>标签内，页脚放置在<footer>标签中，这4部分一同放置在<main>标签中。（1）网站Logo图像。使用图像标签将网站Logo显示在页面左上角。（2）宣传语模块。使用文本标签制作网站宣传语。（3）登录表单模块。在表单中切换登录与注册功能需要用到JavaScript脚本，此处只做出登录功能的表单控件。（4）页脚。该页面的页脚为首页页脚的一部分。

2．设置网页头部信息并构建页面整体结构3．制作网站Logo图像4．制作宣传语模块5．制作登录表单模块6．制作页脚【学生】聆听、思考、理解【教师】演示、运行参考代码（详见教材）【学生】编写参考代码，运行程序【教师】巡视课堂，查看学生理解情况通过讲解知识点，让学生进一步掌握网页设计的流程课堂小结

（2min）【教师】简要总结本章的知识要点本节课学习了创建网页之前需要的准备工作，以及企业宣传网站首页和网站登录页的