如何做好网页前端的设计
一，设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
- 能分清设计稿中的公共与私有的部分
- 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
- 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
- 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
- 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）
上面这些都是在还没开始动手制作之前所要做的。
二，切图
切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：
- 切成所需要的图片（如何将需要的部分切出来）
- 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
- 在2的基础上，规划切出来的图片（包括文件分布）
- 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）
HTML和CSS的编写
HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：
- 还原设计稿视觉效果，并通过标准验证（HTML）
- 在1的基础上，实现多浏览器的兼容（HTML）
- 在2的基础上，标签语义化（HTML）
- 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
- 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
- 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
- 在6的基础上，样式写法的优化（包括技巧的应用）
是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。
如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧
如何做好网页前端的设计相关推荐
- UI干货素材模板|从做好网页头部内容设计开始！
一个网站时最先接触到的就是网页的头部区域,这部分内容为网站的其他各个方面设定了基调,在网页设计中起着非常关键的作用. 现如今简洁设计比较盛行,多数时候把头部内容设计好就变成了吸引用户眼球最好的办法.网 ...
- web前端网页设计作业_如何学习网页前端设计培训？
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
- web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
- 网页前端设计-作业三(JavaScript)
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值? 使用Math.round()方法. 2 . 普 ...
- 优漫动游掌握好这技巧做好网页美工设计
在网页美工切图设计之前,我们先基于ps进行新建文件设置,在设置的时候需要注意以下几点: 1.一定要做好网页宽度的设置设计,一般网页宽度有760PX.900PX.1000PX等,最好不要超过12 ...
- 网页前端设计-作业二（CSS）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (4分)元素可以向哪些方向进行浮动?如何清除浮动效果? 在CSS中float属性可以用于令元素向左或向右浮动.常用clear ...
- 网页前端设计-作业四（HTML5）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1. 普通 (2分)如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字? 关于正则表达式有多种用法,这里选择其中 ...
- 网页前端设计-作业一（HTML5）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)HTML5新增的格式标签有哪些? HTML5新增的格式标签如下: </p> <p> < ...
- 网页前端设计-作业六（CSS3）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (3分)CSS3的Transition动画中使用何种属性可以设置渐变的持续时间? 在CSS3中transition-dura ...
最新文章
- DeepID：Python基于Caffe的DeepID2实现人脸识别的简介、实现之详细攻略
- 游张孝祥老师博客(blog)有感
- ImageNet验证集6%的标签都是错的，MIT：十大常用数据集没那么靠谱
- scala type关键字用于起别名
- ceph存储修改vm密钥（密码）
- Mtlab 二次规划及其例子
- HackerRank Breadth First Search: Shortest Reach
- ARM指令集与Thumb指令集与Thumb-2指令集的区别
- Spring Boot使用RabbitMQ出现诡异异常：Failed to send reply with payload 'OK'，Cannot determine ReplyTo message
- matlab彩色图像的R、G、B三个分量以灰色和彩色的形式显示
- 电脑英语--著名软件篇
- HTML学习第十二章------布局和排版
- Discriminative Learning of Relaxed Hierarchy for Large-scale Visual Recognition
- 新个人所得税EXCEL计算公式以及税后工资反算税前工资公式
- 树莓派2 是否值得购买、入手？
- Next() Nextline() hasNext()区别
- Thinkpad X200 换屏记
- 自认为个人总结得最好的一次读后感：知行 - 技术人的管理之路.ppt
- 数据库八（数据库恢复技术）
- 视界解析：游戏中的建筑狂热！3A游戏《控制》中的粗野主义设计