photoshop图形图像处理项目7 使用Div+CSS制作网页 电子课件 中职网页制作项目实训教程.pptx

《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网页制作项目实训教程重庆大学出版社