如何做好网页前端的设计
一，设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
- 能分清设计稿中的公共与私有的部分
- 在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 ...
最新文章
- iOS开发笔记--UIView中的坐标转换
- 网站优化中需要关注哪些对网站排名有关的内容呢？
- 企业使用MES系统的好处以及使用前后的区别
- NYOJ 135 取石子(二)
- Java面试题 Java中sleep和wait的区别？
- Git 常用命令速查表(图文+表格)【转】
- [引]VS2005 之 Visual Basic 程序的结构
- 献给 Python 开发人员的 25 个最佳 GitHub 代码库！
- php+api抖音随机播放视频源码
- 理发店收银系统php,【毕业论文】基于php+mysql美发店收银系统设计与实现.doc
- 如何成为一名游戏设计师
- 自学python能学成吗-Python能自学成功吗？
- 【sklearn第三讲】数据预处理
- 动易CMS如何能实现直接粘贴把图片上传到服务器中
- 更改计算机浏览视图,来，一起认识查看、编辑幻灯片时不同的视图方式—想象力电脑应用...
- 关于python机器学习cross_val_score()交叉检验的参数cv实际默认为5这件事，你怎么看？
- 人脸姿态估计（计算欧拉角）
- CTF-PHP反序列化漏洞1-基础知识
- 基于uFUN开发板的心率计（二）动态阈值算法获取心率值
- 【C语言-库函数模拟】字符串库函数模拟