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

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

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

发布日期:2018-08-31 作者: 点击:

  5. Footer

  在网站具体的页面设计中,底部会有一个区域我们称之为footer。一般footer的颜色都会比上边内容区域要暗,因为footer的信息在逻辑的级别上是次要的。footer区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理,不要让footer变得特别明显。

  


  技术原理

  网页设计师在做项目之前必须了解网页背后的技术原理,技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时,技术原理也决定了我们需要如何配合前端工程师,来完成一些复杂的交互。

  其实在过去网页前端工程师和设计师是一个岗位,就叫做网页美工,这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致,产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限,天花乱坠地去设计。

  下面让我们来了解网站的基本存储原理,在您的电脑C盘保存一个叫logo.jpg的图片,然后在浏览器打开这个网址:C:logo.jpg

  你看到了什么?

  对,就是这张图片,这就是网站的原理。网站的资源和文件存储在一个类似我们电脑的东西里,那就是服务器。我们通过域名来调取网中不同的页面和文件,如果服务器关机了,那么网站也就瘫痪了。

  每次当我们通过浏览器访问网站时,敲击一个网址,这时这个域名会转向一个IP地址,这个IP地址就是服务器所在的门牌号码。找到了以后,我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面,比如:文字、边框、表格等实际上都是代码的形式。

  浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时,我们的信息就会上传到服务器中,服务器处理完(比如登陆成功这个信息)然后再下发给我们的浏览器。

  所以平时我们访问网站时,我们的电脑和浏览器要通过互联网与服务器进行多次“握手”。当然老“握手”会造成加载速度变慢,于是我们聪明的浏览器会把已经下载过的资源缓存下来,避免浪费。

  这个机制就是“cookies”。浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

  


  基于鼠标的手势操作

  1. 基于鼠标的交互

  在不久的未来,个人电脑可能通过多点触控、语音交互等方式与我们交互,但目前网站设计最主流的交互方式还是鼠标和键盘。

  来让我们看看鼠标有什么结构吧!

  我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的,所以网页也是点击的艺术。右键一般会唤起右键菜单,但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互,鼠标发生交互的主要是超链接与按钮。

  那么让我们来了解一下超链接的四个状态:(前端术语是:超链接标签的CSS四个伪类)。

  


  按钮与文字的不同状态

  Link:是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来,比如换一种颜色或者加下划线,当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link默认都是蓝色的(色值:#72ACE3),但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

  Visited:是超链接被点击以后的状态。比如新浪网新闻非常多,所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了Visited属性,点击后的新闻颜色就不一样了,方便用户区别自己哪些新闻还没有浏览。

  Hover:是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接,按钮和图片以及视频等一切可交互的元素都应该设置Hover属性,也就是鼠标悬停时的状态。一般来说,变换颜色和放大是Hover状态的基本方式。

  Active:是指超链接的激活状态。点击后超链接,可以通过CSS加载一个状态。

  同样的链接样式也可以应用在图片、按钮、表单之上,点击、鼠标悬停、鼠标按下都可以设计成不同的样式,方便用户通过鼠标感知这个物体是被我按下去的,这种给用户的暗示我们也叫做“点击感”。

  当然按钮会和链接稍有不同,按钮除了具备正常和鼠标悬停等状态,还有一种状态叫不可点击。这种状态将按钮置灰,提示用户这个功能因为条件不满足不可以点击。

  2. 静态网页

  了解完基本技术背景、鼠标的交互之后,让我们来聊点真格的。

  我们一般看到的网页都是静态网页,静态网页是由HTML编译的,我们在服务器上存储的网页代码基本都是HTML格式。

  HTML全称是HyperText Markup Language,即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素,HTML语言对于没有编程的人来说可能会很头疼,但是它已经是所有编程代码中最简单的一种了。

  别紧张,你可以把它当做摩尔代码,它是服务器和浏览器之间的密语,浏览器会将这些密语翻译成我们能看懂的色彩和链接等。

  那么如果我们用HTML语言写一段文字会是什么样呢?

  


  模拟代码编译过程

  没错,代码就是这么一点一点编起来的。在任何网站空白处,右键点击查看网页源代码,你就可以看到网页的HTML代码。

  HTML这种代码是由一个国际组织 – W3C发布和维护的。W3C创建于 1994 年,是网站国际中立性技术标准机构。W3C已经发布了HTML的诸多版本,其中影响最深远的是HTML4 版本,而HTML5 简称H5 则可以说是划时代的版本了。

  H5 的标签更加接近现代,并且本身可以播放视频,这就可以淘汰掉Flash插件了。(Flash插件带来了比如系统漏洞、加载速度过慢等问题)同时H5 对多平台支持很好,所以适应移动端为王的当今时代。

  H5 甚至还可以变成游戏、Webapp(在网页上如本地程序一样工作的网站,比如蓝湖等)、多媒体等多种形式。可是由于IE浏览器这类不支持HTML5 效果的浏览器在用户中占比还很高,所以造成了HTML5 发展的制约。

  浏览器可以理解为一个代码阅读器,由于它对HTML5 代码的翻译工作不好就会造成所谓“兼容性”的问题。比如:HTML5 中可以通过代码给一个DIV添加投影,那么在某些浏览器中就显示不了这个效果。

  不难理解为什么有程序员会穿着 i hate IE字样的T恤了吧,在每次做完一个网站项目时,测试工程师都会用Chrome、Safari、Firefox、Opera、IE、Edge等多个浏览器测试网站的兼容性,这时通常让前端工程师非常头疼。

  因为代码动一发牵全身,经常这个好了那个又不行了。但是针对这种问题也有一些解决方案,比如:减少对用户占比不高浏览器的支持,对不好搞的浏览器单独加载特定的适配代码等,道高一尺魔高一丈呀。

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


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

关键词:

最近浏览: