项目案例-1号店首页

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