《photoshop图形图像处理项目7 使用Div+CSS制作网页 电子课件 中职网页制作项目实训教程.pptx》由会员分享,可在线阅读,更多相关《photoshop图形图像处理项目7 使用Div+CSS制作网页 电子课件 中职网页制作项目实训教程.pptx(19页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、photoshop图形图像处理项目7 使用Div+CSS制作网页 电子课件 中职 高教版 网页制作项目实训教程项目7使用Div+CSS制作网页由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG网页制作项目实训教程重庆大学出版社CONTENTS任务1 制作页头导航区任务2 制作新闻列表区任务3 制作产品展示区任务1制作页头导航区本任务可以分解为2个活动:使用Div+CSS对网页进行布局;制作导航栏。活动1 使用Div+CSS对网页进行布局1-1根据所提供的网站首页效果图,使用Div+CSS完成页面的布局操作,完成后以“index.html”为文件
2、名保存到“task7”文件夹,完成布局的页面效果示意图如下图所示。活动要求活动1 使用Div+CSS对网页进行布局1-1详细操作步骤请参阅教材。活动实施通过本次活动,灵活运用Div+CSS对网页进行布局操作,并复习巩固盒模型的相关概念及CSS样式的应用。活动评价活动2 制作导航栏1-2如下图所示,打开活动1中完成的“index.html”文件,完成导航栏及页头部分的制作,完成后以原文件名保存。活动要求活动2 制作导航栏1-2详细操作步骤请参阅教材。活动实施通过本次活动,掌握使用Div+CSS网页制作思想完成导航栏的制作,重点掌握如何使用CSS样式将导航栏美化成效果图所示的效果。活动评价任务2制
3、作新闻列表区本任务可以分解为2个活动:新闻列表部分布局操作;制作新闻列表。活动1 新闻列表部分布局操作2-1如下图所示,打开任务1中完成的“index.html”文件,完成新闻列表部分的布局操作及左侧部分的制作,完成后以原文件名保存。活动要求活动1 新闻列表部分布局操作2-1详细操作步骤请参阅教材。活动实施通过本次活动,掌握使用Div+CSS网页制作思想完成新闻列表区的布局操作,进一步巩固盒模型的概念及应用。活动评价活动2 制作新闻列表2-2如下图所示,打开活动1中完成的“index.html”文件,完成新闻列表的制作,完成后以原文件名保存。活动要求活动2 制作新闻列表2-2详细操作步骤请参阅
4、教材。活动实施通过本次活动,掌握使用Div+CSS网页制作思想完成新闻列表的制作,重点掌握如何使用CSS样式将新闻列表美化成效果图所示的效果。活动评价任务3制作产品展示区本任务可以分解为2个活动:夏季新品区制作;分类导航区制作。活动1 制作夏季新品区3-1如右图所示,打开任务2中完成的“index.html”文件,完成夏季新品区的制作,完成后以原文件名保存。活动要求活动1 制作夏季新品区3-1详细操作步骤请参阅教材。活动实施通过本次活动,掌握使用Div+CSS网页制作思想完成图文展示区的制作,重点掌握如何使用CSS样式将夏季新品区美化成效果图所示的效果。活动评价活动2 制作分类导航区3-2如下图所示,打开活动1中完成的“index.html”文件,完成分类导航区的制作,完成后以原文件名保存。活动要求活动2 制作分类导航区3-2详细操作步骤请参阅教材。活动实施通过本次活动,掌握使用Div+CSS网页制作思想完成图文展示区的制作,重点掌握如何使用CSS样式将分类导航区美化成效果图所示的效果。活动评价感谢您的观看由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG网页制作项目实训教程重庆大学出版社