长春网站优化推广
当前位置: 首 页 >> 新闻中心 >> 行业新闻

网页设计必须要懂得的那些事儿(七)

网页设计必须要懂得的那些事儿(七)

发布日期:2018-09-03 作者: 点击:

  3. 其他前端语言

  有了HTML这个骨架,加上图片和多媒体后,网站的发展速度就更快了。但是服务器的损耗很大,所有用户都需要重复地来服务器下载代码和图片等资源进行“握手”,而且很多HTML代码都是重复的,造成了资源的浪费。比如:如果我网站的头部都是黄色的、链接都是蓝色的,那么每个页面都会啰嗦这几句代码。

  这个问题没多久就被一种崭新的代码解决了——CSS技术。

  CSS是层叠样式表的意思,我们可以理解为现在把网站的样式(颜色、大小、位置等样式信息)。也就是CSS和网站的内容(文字、图片、链接等内容信息)。也就是HTML完全分开,并且一个网站可以下载一份CSS然后不同页面都调取这份CSS的缓存,那么就节省了服务器资源。

  另外,由于网站需要一些交互效果,比如:点击特效和菜单特效等,那么需要前端工程师使用Javas cript代码来配合。Javas cript是一种比较短小精悍的语言,构建一些基于浏览器的特效非常顺手。

  所以目前主流的网站配置是HTML5+CSS3+JS代码的组合,当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐,这取决于我们的主要目标用户群在使用什么样的浏览器。

  当然,我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发,因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作,以便更好地配合他们。

  


  主流形式:HTML + CSS + JS

  4. 动态网页

  了解完静态网页还不够,现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画,而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。

  比如:今天看到的新闻网站和昨天的新闻肯定不一样了,可是网站首页的HTML代码并不需要人去手工修改,而是让小编通过后台录入新闻、上传图片就好了。小编上传后台的过程就会输入数据库,而动态网页又是调取数据库内容显示给用户的一种形式。

  动态网页会随时调取数据库中的信息给用户,而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾,静态网页结尾是html或htm,而动态网页由于使用了高级网页编程技术,结尾则是Asp、Php、Jsp等。

  Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言,当然有的时候为了让网站效率提升也会使用伪静态结构,结尾和静态网页就一致了,但是实际上是会在用户访问前调取一遍数据库的。

  同时动态网页的网址会有一个特点,含有符号。动态语言目前最火的是Php,较早而现在比较少见的是Asp、Cgi,最安全的是Jsp,所以很多银行采用JSP编译。

  了解完这些,我们基本就弄清楚网站的运行原理了。

  


  主流后台编译语言:PHP ASP JSP CGI

  5. 雪碧图

  我们经常看到网站中会有动画,那么动画实现的原理一般有如下这么几个:

  第一,HTML5 视频播放;这种方式缺点就是不兼容低端浏览器。

  第二,Flash Player播放器播放;这种方式的缺点是Flash安全性很低而且效率慢。

  第三,动画使用Gif格式;这种方式的问题是动画长度不够,并且这个格式仅仅支持透明和不透明两级属性。

  那么像Google首页Doodle的动画是怎么实现的呢?

  这种技术叫做:雪碧图。CSS雪碧 即CSS Sprite,也有人叫CSS精灵,它是一种CSS图像合并技术。它本身调用的图片是支持多级透明的PNG格式,然后把动画并排排列出来。

  比如:一个卡通人物的动画每帧宽度是100px,那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的PNG图片里。然后代码在一个100px的宽度框子内背景图调用这张png,我们就看到了动作1,然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。

  雪碧图也有自身的缺点,如果帧数太多,会消耗很大的内存,所以帧数一定要控制少。如果你的动作设计了 12 帧,那么我建议你可以试试将2,4,6,8, 10 删除,保留一半的动作。

  


  雪碧图

  6. 视差滚动

  视差滚动是一种运动速率不一样的设计效果,用以实现空间感,比如:密尔沃基警察局官网就大量运用了视差滚动效果。

  其实现原理是,代码判定网页滚动,滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验,仿佛是我们在物理现实中看到的空间感一样。

  视差滚动已经不是什么高新技术,如果你的网站比较适合视差滚动,请大胆设计并和前端工程师提需求,相信前端工程师可以满足你的要求,我们需要准备的就是运动速率不同的分层静态PSD文件。

  


  运用了视差滚动效果的密尔沃基警察局官网(milwaukeepolicenews.com)

  网页设计规范

  终于,经历过长篇大论网站的原理与组成部分后,我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格,也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活,然而因为太灵活也会让我们的设计师无从下手。

  那么接下来我将介绍网站设计的规范,在您工作的时候可以参考。注意,在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等,这样有助于后期不会有误会。

  1. 画板尺寸

  因为网页尺寸与用户屏幕相关,而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率,其他分辨率用适配的方式来解决。

  在最新版Photoshop网站Web预设尺寸给了我们一些启示:常见尺寸(1366x768px)、大网页(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。这些是主流尺寸,而我们如果做网站时建议按主流的分辨率1920x1080px来设计。

  所以我们通常设计网站时的网站宽度为1920px,每个屏幕的高度约为900px。

  为什么是900px呢?

  因为 1080 还要减去浏览器头部和底部高度,大约就是900px了。内容安全区域为1200px (或1000px / 1400px)。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸,因为对于适配的方式和后续配合他们更有发言权。

  


  网站的尺寸规范

  长春中融合信有限公司致力于为企业提供有价值的产品服务,以需求为导向,不虚假宣传、不过度营销。坚持为客户提供有价值服务。 公司由多年从事软件开发、网站开发、手机程序开发、网络营销的多名技术人员组建。 具体项目有:长春企业品牌设计长春网站优化推广长春高端网站建设手机网站建设等的全网整合营销。公司提倡以人为中心的管理思想,实行人性化的管理方案。让员工喜欢工作、享受工作。最终让客户得到专业用心的服务。


本文网址:http://www.jlwzjs.com/news/596.html

关键词:

最近浏览: