《WEB前端开发实战》课件 项目三-首页制作.pptx

项目三综合应用任务一首页制作及全站链接调试主讲：莫德智htmlh5imgjavascriptwebcsscolorhr

目录任务情境任务目标任务描述任务实施考核评价课后拓展htmlh5imgjavascriptwebcolorhr

任务情境首页是一个网站的门面，我们可以通过首页了解网站所要展示的内容以及访问每个链接。本任务中，我们将通过制作广西少数民族文化资源网中的首页来对前面学习的所有内容进行总结回顾以及综合应用。

工作任务单工作任务单任务要求根据效果图完成首页制作甲方提供的设计图如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择html标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果

任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够使用HTML常用的标签构建简单的HTML页面能够通过定义样式属性美化页面，实现网页效果图的重构效果能够运用JavaScript交互界面

任务描述首页的页面结构：页面顶部包含欢迎语、日期时间、标题logo、页面导航栏、登陆、注册以及轮播图，页面主体部份包含美食模块、服饰模块、节日模块、古迹模块、咨询模块以及固定侧边栏，页面尾部。

任务实施图1结构布局划分图布局结构分析页面切图链接各分页并进行全站调试HTML布局+css美化制作JavaScript特效

任务实施图2页面切图切片效果布局结构分析页面切图链接各分页并进行全站调试HTML布局+css美化制作JavaScript特效

创建站点、链接样式、搭建页面主体结构完成页头（header）内容完成美食模块完成服饰模块步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤完成节日模块步骤五完成古迹模块步骤六完成侧边栏模块步骤七布局结构分析页面切图链接各分页并进行全站调试HTML布局+css美化任务实施制作JavaScript特效完成页尾（footer）内容步骤九完成侧边模块步骤八

选项卡特效时间特效固定头部特效侧边展开特效步骤一步骤二步骤三步骤四制作JavaScript特效操作步骤轮播图特效步骤五布局结构分析页面切图链接各分页并进行全站调试HTML布局+css美化任务实施制作JavaScript特效

链接各分页并进行全站调试操作步骤布局结构分析页面切图链接各分页并进行全站调试HTML布局+css美化任务实施制作JavaScript特效

考核评价班级：姓名：学号任务名称：古首页页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律遵守纪律□是□是协作有交流、团队合作□是□是文明保持安静，清理场所□是□是总分：

课后拓展练一练：设计并制作南宁市第六职业技术学校校园网---首页制作，效果如图所示校园网首页效果图

主讲：莫德智htmlh5imgjavascriptwebcsscolorhr感谢您的聆听THANKYOUFORLISTENING