欢迎您访问信阳联创海鹏科技有限公司! 咨询热线:15939782306

新手网站建设指南

2020-06-12

首先在介绍息县网站建设有限公司之前,我们要明白一个概念,就是网页设计中经常出现的“模块”。不知道是不是因为“模块”这个概念比较基础,写的人也很少,在我刚刚接触网页的时候,并不是很容易查到关于模块的介绍,做图的时候也遇到了一些困难。

与平面不同,在UI和网页设计中,模块是经常出现,并且贯穿设计稿始终的。每个网页都是由模块组成的,并且常用模块都会有固定的称呼。我这里先列举网页中经常出现的几个模块,搞懂了模块,才好进行下面的讲解。

比较常见的是这几个模块,几乎每个网页中都会出现:

Header

页面中header部分一般位于网页中最上端,内容主要包括网站名称或Logo的网站的导航部分。一般来说,header的高度是60-90px,当然这个数值并不绝对,也有100px的header,看实际需要。不过100px的话,就已经很高了。

这里是我这套网站里面登录前的状态,我这里的header非常简单,放在banner里面呈现,也没有做其它特殊效果。(关于banner的概念,下文中会有提到)

 

再放一些其它网站的header进来做以参考:

站酷的header,站酷的高度设置是54px。

 

2.摩拜的header,高度设置是80px。

导航栏

导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮。很多网站的导航栏会显示是=在header里面,上文中的站酷、摩拜的导航栏就是这类,是一种很普遍的导航方式,这里就不再单独列举。

其它也有不同的导航方式,我这套网站里面,使用的就是下拉的导航方式:

Banner

一般来说,息县网站建设首页打开是会有一张横着的大图的,它会占用网页很大的面积。这张大图就叫Banner。Banner的其用面积之大,对网页的整体风格和用户的第一感受,都会造成很大影响。

因为这个图片给客户传达的信息量最大,给客户的吸引力也最大,所以在网页设计中Banner的地位尤其重要。甚至,一套网页在视觉上好不好,Banner可以起到举足轻重的作用。如果Banner设计的足够漂亮,就能给网站带来很多的亮点;反之如果这个Banner做的很普通,就会导致整个网站显得很普通。

而作为网页中占比最大的图片,Banner需要给客户传达有用的信息,否则这个Banner便是一个没有内涵的图片而已,浪费了网站空间。大多数Banner的尺寸都在450-750px之间,也是具体看实际需要。

 

这边放上我这个党建网站的Banner,高度是550px。

下面也放几张其它网站的Banner案例,给各位做以参考:

1.天天看看的Banner,他们的高度设置是573px。视频网站的话,一般都是放片子上来做Banner。一来方便影片推广,二来又增加了自己网站的视频播放量。

 

包括其他视频网站,如优酷、腾讯视频等等,Banner都是采用片子的形式:

 

优酷的Banner是572px;

腾讯视频的Banner是539px。

2.淘宝店铺的Banner,高度设置128px。

这一类Banner又比较特殊。相比其它类型的网站,淘宝的Banner是很小的了,高度仅有128px。考虑到淘宝上面的店铺极多,卖家又大多是个体商家,不一定会在店面设计上花许多心思。在这样的情况下,尽量减少Banner的占比,也确实保持网站整体风格统一的方法之一。

内容区

到这里我们应该能理解“模块”的概念了。通常Banner下面就是网站内容的的模块,按照每个网站的不用,这里的模块也不相同。具体就按照每个网站所提供的需求进行设计就好。有没有说清楚的地方可以留言,或者私信。

Footer

我们浏览网站时,翻到网站页面底部时,底部区域展示的信息就是Footer。通常Footer区会显示版权信息和备案号等资料,用户可以从中获得网站的基本信息。

1.造作

造作的Footer就放入了很多元素进来,从社交媒体链接(微信、新浪)、联系方式(电话、店铺地址)到页面信息(版权、著作权等信息)和网站地图(快速跳转到指定页面的跳转链接)都有展示,这也就占用了页面比较大的篇幅。

 

2.玉名牧场

玉名牧场的Footer也展示了比较多的信息,加入了电话、导航的元素。在Footer区展示导航的方式,在网站设计中并不多见。

 

主视觉区:

最后在引入一个概念,就是网页设计中的主视觉区。

做效果图的时候,为了让不同的显示器及浏览器在浏览页面的时候不出现问题,不出现大小偏差等情况,我们在设计的时候通常会在页面两边进行留白处理。将需要展现的内容,集中让在页面中部,形成一个视觉范围。

视觉区的大小并没有硬性规定,但是为了兼容大多数浏览器一般是设置960px。随着现在浏览器分辨率的变化,已开始向着1000px,1200px宽度发展。

如果需要兼容不同浏览器尺寸,现在比较流行的做法是做成响应式的,即根据不同分辨率显示不同的尺寸,工作量也就随之增加了。

以UI中国举例,中间没有遮罩的白色部分这个就是视觉区域,UI中国的范围的1180px。

网页方面,模块的内容大概就是这些,我觉得对新手来说还是比较全面的了。

热门关键字: 信阳网站建设 信阳网站制作 信阳网站推广 信阳网站优化 信阳400电话 信阳软件开发 息县网站建设 光山网站建设 潢川网站建设 固始网站建设 淮滨网站建设 商城县网站建设 新县网站建设 罗山网站建设 信阳网站建设公司
关于我们
公司简介
企业文化
参观公司
公司荣誉
网站建设
营销型
品牌型
优化型
小程序
APP开发
产品服务
网站建设
软件开发
系统集成
微信广告
短视频
400电话
客户案例
网站建设
移动应用
软件开发
新闻资讯
公司动态
最新签约
咨询热线
业务咨询:15939782306
客服电话:0376-6232777
联创科技

手机官网

© 2019- 信阳联创海鹏科技有限公司 地址:信阳市万家灯火城市广场23号楼1406室(火车站正对面) 豫ICP备17029294号 豫公网安备 41159002000047号 工商网监 本站支持IPv6