版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第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视频播放页效果图分析视频播放
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 人口流动影响效应研究
- 化妆技巧助力护理人员职业发展
- 介入护理宣教
- ohsas职业健康宣教
- 尿液检查护理评估的远程护理
- 《零基础掌握烧伤补液|护理操作标准化实训课件》
- 斜视与小儿眼科专科疾病护理|临床查房专用教学资料
- 血友病科专科疾病护理|临床查房专用教学资料
- 湖北省武汉市武昌区武大一附小2025届四年级数学下学期期末检测模拟试题(含答案解析)
- 塑料包装材料创新设计论文
- 2026云南地质工程第二勘察院有限公司社会招聘29人考试参考题库及答案详解
- 2026贵州贵阳市白云区选聘社区工作者62人备考题库含答案详解
- 2026上海博物馆公开招聘12名工作人员备考题库完整参考答案详解
- 2026年四川省高考历史试题(含答案及解析)
- 2025年河南省招聘乡村振兴村级协理员真题
- 四川《装配式复合轻质墙体标准》
- 2026年广东省大湾区联考初中学业水平质量监测卷八年级地理(试卷+解析)
- 2026年见证取样员模拟题含答案详解(研优卷)
- 养老机构安全隐患排查治理台账(范本)
- 中信建投:27年钠电平价放量无虞碳酸锂涨价预期加速进程
- 2026年辽宁省直机关公开遴选公务员笔试题及答案解析
评论
0/150
提交评论