《HTML5+CSS3网页制作》课件——模块九 综合实战项目.pptxVIP

模块九综合实战项目任务1原生响应式站点布局网页制作CSSHTML

首页头部区布局首页正文及版权布局原生响应式站点布局0201列表页布局03项目进度监控04项目心得05

1.掌握响应式页面的开发2.掌握CSS3媒体查询的应用原生响应式站点布局学习目标：

1.强化责任意识，使其在开发过程中注重用户体验，培养对学生对社会责任的认识，理解优秀设计对于社会的意义。2.提高团队协作能力，使其在项目实战中，通过小组合作的形式，加强学生的沟通和协作能力，培养团队精神。3.强化法律意识，在网页图标和字体图标的应用过程中，提醒学生注意版权问题，增强他们的法律意识。原生响应式站点布局思政目标：

首页头部区布局—需求说明1本次任务主要是用HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表等知识点完成原生响应式站点的首页头部区布局，分为导航栏和主题图片两部分。电脑端的预览效果如下图所示。

2平板端导航栏中的“网站首页”和“招商加盟”被隐藏，预览效果如下图所示。首页头部区布局—需求说明1

2手机端LOGO出现在屏幕顶端，导航栏居下并只显示“公司简介”、“新闻动态”和“产品展厅”3个重要栏目，预览效果如下图所示。首页头部区布局—需求说明1

2首页头部区布局的制作思路为用header元素作为首页头部区容器，里面的导航栏用nav元素做容器，包含用h1元素包裹的LOGO图标和含有七个导航项的ul元素，使用浮动实现左右分布。主题图片用类名为banner的div元素作为容器，里面包含一个img元素作为主题图片。使用媒体查询实现响应式布局。可以分成五步来完成：首先做好新项目创建的准备工作；其次新建index.html，制作首页头部区的HTML结构代码；接着编写基础CSS代码；随后编写导航栏和主题图片的样式；最后使用媒体查询，实现响应式布局。首页头部区布局—制作思路1

21.新项目创建的准备工作首页头部区布局—制作步骤1

22.新建index.html，制作首页头部区的HTML结构代码首页头部区布局—制作步骤1

23.编写基础CSS代码首页头部区布局—制作步骤1

24.编写导航栏和主题图片的样式首页头部区布局—制作步骤1

25.使用媒体查询，实现响应式布局首页头部区布局—制作步骤1

首页正文及版权布局—需求说明2本次任务主要是用HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表等知识点完成原生响应式站点的首页正文及版权布局，分为首页正文和底部导航及版权两部分。电脑端的预览效果如下图所示。

首页正文及版权布局—需求说明2平板端产品系列和新闻动态上下排列且各自占满整屏，产品图片放大显示，预览效果如下图所示。

首页正文及版权布局—需求说明2手机端呈现的排列结果和平板端基本相同，不同之处在于产品图片会缩小，新闻列表文本超出的部分会被截断且用省略号代替，版权区域隐藏了底部导航，直接显示版权内容，预览效果如下图所示。

首页正文及版权布局—制作思路2首页正文及版权布局的制作思路为用main元素作为首页正文容器，包含应用类名为product的div元素定义产品系列部分，类名为news的div元素定义新闻动态部分，使用浮动实现左右分布。产品系列部分包含用h2元素包裹的两张图片（一张代表“产品系列”的标题，另一张代表“更多”的链接）和含有三个列表项的ul元素，每个列表项是一张产品图片。新闻动态部分包含用h2元素包裹的两张图片（一张代表“新闻动态”的标题，另一张代表“更多”的链接）、用p元素介绍公司的背景信息和列出了三条新闻摘要的ul元素，每条新闻包含一个日期和标题，点击标题会跳转到相应的新闻页面。底部导航及版权用footer元素作为容器，底部导航用类名为min-bar的div为容器，包含一系列链接，指向关于公司和联系方式的相关页面。版权部分用p元素实现。使用媒体查询实现响应式布局。可以分成三步来完成：首先制作首页正文及版权的HTML结构代码；其次编写首页正文和底部导航及版权的样式；最后使用媒体查询，实现响应式布局。

首页正文及版权布局—制作过程21.制作首页头部区的HTML结构代码

首页正文及版权布局—制作过程22.编写首页正文和底部导航及版权的样式

首页正文及版权布局—制作过程23．使用媒体查询，实现响应式布局

列表页布局—需求说明3本次任务主要是用代码复用、HTML5结构化元素、媒体查询、定位、浮动、伪类选择器、无序列表、下拉列表等知识点完成原生响应式站点的列表页布局，列表页的头部及版权区与首页是一样的，正文区是不一样的。列表区的正文分为侧边栏、产品搜索和产品列表三部分。电脑端隐藏产品搜