网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第11章 综合项目实战：摄影·开课吧

第11章综合项目实战：摄影·开课吧《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target熟悉网站设计规划的基本流程，能够描述网站设计规划的基本流程熟悉项目的开发流程，能够归纳总结项目的开发步骤掌握首页的搭建，能够独立完成首页的代码编写学习目标/Target掌握注册页的搭建，能够独立完成注册页的代码编写掌握个人中心页的搭建，能够独立完成个人中心页的代码编写掌握视频播放页的搭建，能够独立完成视频播放页的代码编写章节概述/Summary在深入学习了网页的相关知识后，相信读者已经熟练掌握了HTML、CSS和JavaScript，能够为网页进行排版和添加动画效果。为了及时巩固所学的知识，本章将运用前面所学的知识内容，搭建“摄影·开课吧”的部分页面。目录/Contents11.111.2网页设计规划搭建首页11.3搭建注册页11.4搭建个人中心页11.5搭建视频播放页网页设计规划11.111.1网页设计规划如何开发一个网站？11.1网页设计规划确定网站的主题规划网站的结构搜集需要的素材制作页面效果图11.1.1确定网站主题“摄影•开课吧”是一个从事摄影教育培训的企业类网站，用于展示教育产品、技术信息、摄影图片，提升企业的知名度，将“摄影•开课吧”的优秀资源推广给更多的用户。用于展示教育产品、技术信息、摄影图片，提升企业的知名度。扁平的设计风格蓝色11.1.2规划网站结构可以将网站框架初步划分为首页、创业微学院、微聚、论坛、登录|注册、播放记录、APP下载八类。在设计子页面时，其风格要和首页保持一致，变化的仅仅是布局和内容模块。11.1.2规划网站结构首页原型图11.1.3收集素材文本素材图片素材11.1.4设计网页效果图11.1.4设计网页效果图11.1.4设计网页效果图11.1.4设计网页效果图搭建首页11.211.2.1首页效果图分析HTML结构分析11.2.1首页效果图分析CSS样式分析仔细观察页面的各个模块，可以看出，首页的头部、banner和版权信息模块通栏显示。经过对效果图的测量，发现其他模块均宽1200px且居中显示。也就是说，页面的版心为1200px。页面的其他样式细节，可以参照案例源码，根据前面学习的静态网页制作的知识，分别进行制作。11.2.2首页制作JavaScript特效分析banner焦点图可实现自动轮播11.2.2首页制作

1.页面布局页面布局是为了使网站页面结构更加清晰、有条理，而对页面进行的“排版”。11.2.2首页制作/*清除浏览器默认样式*/body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{margin:0;padding:0;border:0;list-style:none;}/*全局控制样式*/body{font-family:"微软雅黑",Arial,Helvetica,sans-serif;font-size:14px;}a{color:#333;text-decoration:none;}input,textarea{outline:none;}@font-face{font-family:'freshskin';src:url('../fonts/iconfont.ttf');}

2.定义公共样式11.2.2首页制作

3.制作页面头部和导航11.2.2首页制作

4.制作banner11.2.2首页制作

5.制作主体内容11.2.2首页制作

6.制作底部版权信息部分搭建注册页11.311.3.1注册页效果图分析仔细观察效果图会发现注册页的导航和首页的导航在样式上有细微差别，注册页导航是不透明灰色背景，首页导航是半透明白色背景。11.3.1注册页效果图分析在内容结构上，注册页的内容部分由左边的图片和右边的表单两部分构成。可以运用前面所学的网页布局的相关知识，制作内容模块。11.3.2注册页制作搭建个人中心页11.411.4.1个人中心页效果图分析个人中心页导航的样式和注册页一致，因此可以直接复制注册页的导航样式。在页面的结构上，个人中心页的头部、导航以及版权信息和其他页面相同，可以直接复制CSS样式。11.4.2个人中心页制作搭建视频播放页11.511.5.1视频播放页效果图分析视频播放