Web前端技术HTML5+CSS3+响应式设计 课件 10-综合案例_第1页
Web前端技术HTML5+CSS3+响应式设计 课件 10-综合案例_第2页
Web前端技术HTML5+CSS3+响应式设计 课件 10-综合案例_第3页
Web前端技术HTML5+CSS3+响应式设计 课件 10-综合案例_第4页
Web前端技术HTML5+CSS3+响应式设计 课件 10-综合案例_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端技术（Html5+css3+响应式设计）第10章

综合案例

HTML教学目标WEB前端设计流程网站开发流程案例分析与实现10.1网站的开发流程1．确定网站主题及网站内容2．选择好的域名3．选择服务器技术4．确定网站结构5．网站风格6．数据库规化10.1网站的开发流程7．后台开发8．前端开发9．网站测试10．发布网站11．网站推广12．网站日常维护10.2web前端设计流程10.3第1阶段——内容分析根据客户给出的图片、文字、视频、音频等资料进行内容的分析，明确网站的定位，面向的消费群体。由此明确网站栏目，各栏目的内容：各种信息的重要性，各种信息的组织架构等。确定网站名称和logo标志10.3第2阶段结构设计在搭建文档结构时应该注意以下几点：1)标签的使用要正确，能明确标记信息元素2)代码中尽量先不出现布局标记如div等（因为div不具语义）。3)根据内容的重要性，把重要的内容放在html文档前面，因为搜索引擎会更加重视接近顶部的代码。4)相同的栏目内容用相同的标签，有规律的文字可以采用列表来组织。5)任何一个页面，应尽可能保证在不使用CSS的情况下，依然保持良好结构和可读性，即标准文件流的形式。10.3第3阶段原型设计所谓原型设计就是用线框图把构思、设计展示出来，它最主要的作用是对网站的完整功能和内容进行全面的分析，它是团队内部沟通的桥梁，也是与客户沟通的重要手段。原型设计可以用纸和笔，也可以用fireworks或photoshop等图像处理工具，还可以使用专业的原型设计工具。在线框图得到各方的认可后，根据线框图用photoshop制作效果图，把线框图中涉及的图片、文字、按钮等都内容化10.3第4阶段布局设计根据线框图，对html文档用div标签进行分块布局，取好相应的类名，先进行大块区域划分。对案例中的页面粗略的划分，给定类名。再对页眉部分细分，分为上、中、下三部分，上部为.top类，分左右2块，中部为.logo类，也分左右2块，下部为.nav汉堡菜单对.con类进行细分,可以分为4块，因为这4块表现形式相同，取相同的类名item和txt。最后对页脚进行细分，也是分3块，左右中，但3块表现相同，取相同的类名linkbox。10.3第5阶段公共样式文件在用css实现页面表现形式之前，应该先把html标签的默认样式清除，以避免样式的层叠与冲突，这对每一页面都是一样的，因此可以写成一个公共样式文件public.css，把它链接到任何一个页面。10.3第6阶段详细设计头部样式主体样式页脚样式媒体查询10.3第7阶段交互设计交互性设计导航的交互链接文字的交互图片的交互进行交互设计时可以充分考虑背景、边框、阴影、圆角，变形等属性本章小结Web前端开发的流程案例实现网站开发流程本章从建站者角度介绍了网站开发的一般流程，通过一个案例，讲解web前端从设计到实现的全过程课程总结HTML

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论