项目案例-1号店首页.pptxVIP

阶段项目：制作1号店首页项目案例预习检查教员根据上节课布置的预习内容进行集中测试本章目标会分析并布局页面会使用DIV+CSS制作电商网站训练的技能点会使用float属性进行多列的网页布局会使用position属性定位网页元素会使用字体样式和文本样式排版网页文本会使用背景属性设置网页元素的背景会使用盒子模型属性设置网页元素会使用无序列表制作导航、列表信息任务描述1号店首页问题分析1：页面制作流程页面制作流程问题分析2：页面开发规范文件命名规范HTML书写规范CSS书写规范JavaScript书写规范图片规范注释规范问题分析3：整体开发思路网页整体布局制作网站导航制作焦点轮播图和左右侧模块制作商品展示区：食品饮料、个护厨卫两个模块制作网站版权开发计划完成时间：10分钟完成时间：20分钟完成时间：35分钟完成时间：30分钟完成时间：10分钟网页整体布局制作网站导航制作焦点轮播图和左右侧模块制作商品展示区：食品饮料、个护厨卫制作网站版权整体布局页面3-1div顶部导航/divdivlogo和搜索部分/divdiv导航菜单/divdiv中间焦点轮播图和右侧内容/divdiv食品饮料和个护厨卫模块/divdiv网站版权/div布局页面关键代码网页整体布局3-2完成时间：10分钟需求说明设置页面整体背景颜色、页面body、列表去掉内外边距、字体样式等通用样式LOGO和搜索部分、菜单导航、食品饮料模块、个护厨卫模块几个模块的宽度一致，居中对齐等设置通用的样式等统一设置padding和margin值为0，解决由于padding和margin带来的兼容性问题网页整体布局3-3功能测试页面排版、布局合理，页面与效果图一致通用样式设置正确整体页面效果美观共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题调试技巧制作网站导航3-1制作导航完成时间：10分钟使用列表制作顶部导航使用背景样式实现导航背景与导航图标制作网站导航3-2完成时间：10分钟制作logo和搜索部分制作logo使用img标签引入图片即可使用表单制作搜索部分内容制作网站导航3-3功能测试页面排版、布局合理，页面与效果图一致网站导航页面效果美观共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题调试技巧制作焦点轮播图和左右侧模块4-1完成时间：15分钟使用制作菜单横向导航使用列表制作所有商分分类竖向导航制作焦点轮播图和左右侧模块4-2完成时间：10分钟制作焦点轮换图使用定位和列表相结合的方式实现制作焦点轮播图和左右侧模块4-3完成时间：10分钟使用列表实现【社区】内容使用表单实现话费快充使用高级选择器实现CSS样式制作焦点轮播图和左右侧模块4-4功能测试页面排版、布局合理，页面与效果图一致焦点轮播图和左右侧模块效果美观共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题调试技巧制作商品展示区3-1完成时间：15分钟食品饮料模块使用标题标签制作标题及图片说明使用定位制作按钮图片与文本的排版设计制作商品展示区3-2完成时间：15分钟制作个护厨卫模块使用标题标签制作标题及图片说明使用定位制作按钮图片与文本的排版设计制作商品展示区3-3功能测试页面排版、布局合理，页面与效果图一致商品展示区效果美观共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题调试技巧制作网站版权2-1完成时间：10分钟版权内容居中对齐，背景为白色字体颜色为灰色，鼠标移至超链接文本字体颜色为红色且有下划线制作网站版权2-2功能测试页面排版、布局合理，页面与效果图一致网站版权效果美观共性问题集中讲解共性问题集中讲解常见问题及解决办法代码规范问题调试技巧项目总结作品展示讲解要点完成情况、技能总结、经验分享、项目收获表达要求清晰流畅、有条理、重点突出作业课后作业教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求预习作业教员备课时根据班级情况在此添加预习内容打开页面进行演示，演示内容：1、页面布局2、页面效果（没有特效，全是静态页面），鼠标移上移出的效果，字体颜色变化，所有商品分类背景图片的变化等；3、每个模块的内容，进行讲解（顶部导航、菜单、搜索功能；左侧菜单、轮换显示的焦点图、左侧图片、列表和话费快充；食品饮料、个护厨卫；底部导航）4、每个模块的局部布局最后分析页面的整体布局和局部布局；根据素材中提供的《项目开发流程文档.docx》讲解网站开发的流程，最后说明本次课就是设计完成后制作HTML页面阶段，也就是最后一个步骤，要说明最后是一个步骤包括HTML页面开发和程序开发，作为前端工程师，负责制作静态的HTML页面；可参考08 制作1号店首页\提供给教员的内容\01 教学演示案例\示例03：开发规范文档及开发流程文档提供的《Web前端开发规范文档.docx》讲