HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第10章 实战开发-好趣艺术设计部落首页

第10章实战开发——好趣艺术设计部落首页《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target掌握好趣艺术设计部落首页的开发流程，能够独立完成代码编写。知识目标完成好趣艺术设计部落首页的制作，并能够实现简单的JavaScript特效。技能目标通过独立完成项目开发，培养独立解决问题的能力。素质目标章节概述/Summary在深入学习前9章的知识后，初学者已经熟练掌握了HTML相关标签、CSS样式属性、排版布局和一些简单JavaScript特效的制作技巧。为了帮助初学者及时、有效地巩固所学的知识，本章将运用前9章介绍的基础知识实现好趣艺术设计部落首页，其效果如图。目录/Contents0102效果图分析页面制作面效果图分析案例10-1案例描述只有熟悉页面的结构和版式，才能更高效地完成网页的布局和排版。下面对首页效果图所示的HTML结构、CSS样式和JavaScript特效进行分析。10.1.1HTML结构分析掌握好趣艺术设计部落首页的开发流程，能够完成HTML结构分析。学习目标观察图“好趣艺术设计部落首页效果”可以看出，整个页面大致可以分为头部、导航、焦点图、通知公告、主体内容、版权信息（或称为底部）这6个模块，具体结构如图。10.1.1HTML结构分析10.1.2CSS样式和JavaScript特效分析掌握好趣艺术设计部落首页的开发流程，能够完成CSS样式和JavaScript特效分析。学习目标图“好趣艺术设计部落首页效果”所示的页面有一些共性样式，可以提前定义，以减少代码冗余。例如，超链接状态、内容字体样式等。头部、焦点图和主体内容部分添加了JavaScript特效，具体说明如下。头部当鼠标指针移至头部的“我的关注与收藏”时，会弹出一个下拉菜单，效果如图。0110.1.2CSS样式和JavaScript特效分析焦点图焦点图自动轮播，当鼠标指针移至轮播按钮时停止轮播，并显示当前轮播按钮所对应的焦点图，同时按钮的样式也发生改变。当鼠标指针移出转播按钮时焦点图继续自动轮播。例如，鼠标指针移至第3个轮播按钮时的焦点图效果如图。0210.1.2CSS样式和JavaScript特效分析主体内容主体内容部分主要实现Tab栏切换效果，当鼠标指针移至某个时显示对应的内容，并改变当前标题栏的背景样式。例如，当鼠标指针移至“作品展示”时，效果如图。0210.1.2CSS样式和JavaScript特效分析页面制作案例10-210.2.1制作头部和导航模块完成好趣艺术设计部落首页的制作，并能够制作头部和导航模块。学习目标网页的头部包括Logo、操作菜单和下拉菜单3个部分。导航模块结构清晰，可以通过无序列表来定义，同时由于其通栏显示，所以还需要在无序列表的外边加上一个大盒子。头部和导航模块的具体结构如图。10.2.1制作头部和导航模块10.2.2制作焦点图和通知公告模块完成好趣艺术设计部落首页的制作，并能够制作焦点图和通知公告模块。学习目标仔细观察图“好趣艺术设计部落首页效果”，可以看出焦点图模块分为焦点图和轮播按钮两部分，通知公告模块分为通知标题和通告内容两部分，具体结构如图。10.2.2制作焦点图和通知公告模块10.2.3制作主体内容模块完成好趣艺术设计部落首页的制作，并能够制作主体内容模块。学习目标分析图”好趣艺术设计部落首页效果”可以看出，主体内容模块大体上由上、下两部分构成，上部分又可以分为左、中、右三部分，每部分都分别由两个上下结构的模块构成。下部分由左右两部分构成，分别是“数据统计”模块和“创作达人”模块。主体内容模块的具体结构如图。10.2.3制作主体内容模块10.2.4制作版权信息模块完成好趣艺术设计部落首页的制作，并能够制作版权信息模块。学习目标由图”好趣艺术设计部落首页效果”可以看出，版权信息模块大致可以分为Top按钮和内容两部分。由于其背景通栏显示，所以需要在Top按钮和内容外加上一个大盒子。版权信息模块的具体结构如图。10.2.4制作版权信息模块本章小结本章实现了一个好趣艺术设计部落首页，首先对网页效果图进行分析，然后详细讲解了页面的制作，包括