网页设计文字显示区域 第1篇
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳，主要是考虑到一些适配的问题，作为内容出现的图片，一定需要有介绍信息和排序信息。
图片的格式有很多，比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
在线压缩工具Tinypng网站
网页设计文字显示区域 第2篇
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。
官方微信公众号：优联创UCreator
网页设计文字显示区域 第3篇
信息流广告是埋在信息流中的一种广告形式，这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如：朋友圈、知乎、Facebook都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验，信息流广告的尺寸与信息流相同。
知乎APP中信息流中的广告
以上从广告的形式上简单介绍了三种常见的网站广告形式，如果我们在阅读需求时看到了cpm、pv等单词是什么意思呢？
他们是广告的收费模式。
网页设计文字显示区域 第4篇
我们把整体宽度定义为W，然后整个宽度分成多个等分单元A，每个单元A中有元素a和间距i。所以他们之间的关系就是 (A×n)-i=W。
当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间，其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。
比如：如果网页宽度是1000px，我们可以使用：
如果网页宽度是990px，我们可以使用：
如果网页宽度是980px，我们可以使用：
栅格系统具体有以下优势，能大大提高网页的规范性。
在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
网站的栅格化会使网站看起来更有秩序感
网页设计文字显示区域 第5篇
有了HTML这个骨架，加上图片和多媒体后，网站的发展速度就更快了。但是服务器的损耗很大，所有用户都需要重复地来服务器下载代码和图片等资源进行“握手”，而且很多HTML代码都是重复的，造成了资源的浪费。比如：如果我网站的头部都是黄色的、链接都是蓝色的，那么每个页面都会啰嗦这几句代码。
这个问题没多久就被一种崭新的代码解决了——CSS技术。
CSS是层叠样式表的意思，我们可以理解为现在把网站的样式（颜色、大小、位置等样式信息）。也就是CSS和网站的内容（文字、图片、链接等内容信息）。也就是HTML完全分开，并且一个网站可以下载一份CSS然后不同页面都调取这份CSS的缓存，那么就节省了服务器资源。
所以目前主流的网站配置是HTML5+CSS3+JS代码的组合，当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐，这取决于我们的主要目标用户群在使用什么样的浏览器。
当然，我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作，以便更好地配合他们。
主流形式：HTML + CSS + JS
网页设计文字显示区域 第6篇
原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。
构建网站原型图（工具：Axure RP ）
网页设计文字显示区域 第7篇
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。
我们一般看到的网页都是静态网页，静态网页是由HTML编译的，我们在服务器上存储的网页代码基本都是HTML格式。
HTML全称是HyperText Markup Language，即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素，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等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。
因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如：减少对用户占比不高浏览器的支持，对不好搞的浏览器单独加载特定的适配代码等，道高一尺魔高一丈呀。
网页设计文字显示区域 第8篇
门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如Naver、Llinternaute等。
我们可以看得出，门户网站都是大而全包罗生活万象的。比如：腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。
首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求，比如：巴黎时装周需要负责时尚频道的设计师来设计对应的专题，世界杯小组出线需要负责体育频道的设计师，来设计对应的专题等。
地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。
另外，具体对接频道的设计师也需要有一定擅长之处，比如：对接体育频道的设计师起码应该熟悉足球篮球等体育项目，时尚频道的设计师要懂得各个大牌的设计风格，佛学频道的设计师需要懂得基本的佛学知识和忌讳，文化频道的设计师需要对传统文化有所涉猎。
所以基本上门户网站的设计师可以分为：产品组和频道组两种。
韩国门户网站Naver
网页设计文字显示区域 第9篇
设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了，一般H5的操作是上下滑动。
字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利，英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。
除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的H5，就是通过H5工具生成。
目前比较火的H5生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将PSD上传即可对每个原件进行动效的设置了。
但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
H5项目的尺寸
网页设计文字显示区域 第10篇
企业OA，即（Office Automation），也就是办公自动化系统。在六七十年代就兴起了一场使用电脑，来改变传统办公方式的革命。
在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA可以很好地解决这方面的问题。通过企业OA可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作，这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。
互联网公司更是提供给员工除了企业OA之外的交流功能，比如建立员工BBS和留言板等，在上面大家可以对公司提出建议和意见。企业OA一般出于安全和保密性的原因，很多公司都更加愿意自己开发。
Robo Advisor – Projection, List and Questionnaire by Michal Parulski
网站组成部分
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分。
网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时，要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。
网页设计文字显示区域 第11篇
因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。
网站的尺寸规范
网页设计文字显示区域 第12篇
我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的，那这种文字在浏览器上的渲染与系统和浏览器有关，比如：在苹果电脑上看到的文字效果和Windows系统电脑上看到的文字效果就有所不同，苹果会对文字进行渲染，而windows的文字几乎充满了像素颗粒。
按照用户占比来说无疑Windows的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和Windows显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。
另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。
网页设计文字显示区域 第13篇
游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。
国外游戏网站比如暴雪娱乐公司（）的官网设计得极其精美，每个游戏的官网都是一个精品。比如：魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。
暴雪公司星际争霸2游戏官网
6. 专题页面
当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如：儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。
专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。
所以在那么短的生命周期怎么抓住人的眼球？
当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。
所以专题设计和产品设计正相反，专题设计必须刺激。
极有家淘宝专题页面
网页设计文字显示区域 第14篇
字体设计的总原则是：可辨识性和易读性。
网页的文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体，英文则建议使用arial无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。
网页设计文字显示区域 第15篇
从苹果公司的iPhone介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。
设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。
由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。
苹果公司产品介绍页
网页设计文字显示区域 第16篇
前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。
埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等，这里省略。
前端工程师代码编译（工具：Notepad +）
网页设计文字显示区域 第17篇
按钮的风格在过去的十几年发生了很大的变化，由一开始的“斜面与浮雕”风格过渡到后面的“拟物风格”，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
不同时代下不同的按钮风格
网页设计文字显示区域 第18篇
视差滚动是一种运动速率不一样的设计效果，用以实现空间感，比如：密尔沃基警察局官网就大量运用了视差滚动效果。
其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验，仿佛是我们在物理现实中看到的空间感一样。
视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求，我们需要准备的就是运动速率不同的分层静态PSD文件。
运用了视差滚动效果的密尔沃基警察局官网（）
网页设计规范
终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。
那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。
网页设计文字显示区域 第19篇
让我们考虑另一个例子，我们正在使用textarea标签
When the script gets executed, the output window will pop up, providing the input type for textara along with a submit button.
前端入门到VUE实战笔记：立即学习>在学习笔记中，你将探索 前端 的入门与实战技巧！
网页设计文字显示区域 第20篇
无论您面对的项目是To C的还是To B的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。
如果设计一般网站的页面，可以按照1920 X 1080px尺寸设计。每屏高度900px，字体使用宋体 12px 无 和微软雅黑 14-20 Windows LCD。Banner尽量满屏，但是图片需要按照4:3或16:9等比例来设计。
做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态。另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。
原文链接：
题图来自 Pexels，基于 CC0 协议
网页设计文字显示区域 第21篇
做网页设计时，你还要特别注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。
除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏的高度。
Window XP的首屏高度平均值是580px，Window 7的首屏高度平均值是710px。
综合考虑到Window XP已经逐渐退出市场，在实际操作时，我们 以710px 作为依据。
如下图所示，蓝色区域则是我们设计时需要着重考虑的首屏范围。
另外，是关于图片尺寸的问题。
需要全屏显示的图片，宽度尺寸严格设计为1920px。
但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即控制在1200px以内。
避免遇到小屏幕设备时，内容显示不全，而造成信息的遗漏的情况。
网页设计文字显示区域 第22篇
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪，网站已经是中小企业的标配了。
企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。
企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。
美国通用公司官网
网页设计文字显示区域 第23篇
后台网站又叫Dashborad，中文翻译为仪表盘，其含义就是有一大堆数据与统计信息。
后台网站不需要特别可爱的插图以及卡通形象，最重要的是效率。所以如果您经常处理To C类的需求，接到了To B类的产品需求时一定要注意这一点，后台网站因为需要更大的画面，通常会使用全屏式排版，也就是撑满整个画布。
那如果小屏怎么办呢？
前端会使用相对布局缩小各个元素，排版的位置也会用百分比来确定。
微信公众号后台
网页设计文字显示区域 第24篇
了解完静态网页还不够，现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画，而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。
动态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾，静态网页结尾是html或htm，而动态网页由于使用了高级网页编程技术，结尾则是Asp、Php、Jsp等。
Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言，当然有的时候为了让网站效率提升也会使用伪静态结构，结尾和静态网页就一致了，但是实际上是会在用户访问前调取一遍数据库的。
同时动态网页的网址会有一个特点，含有符号。动态语言目前最火的是Php，较早而现在比较少见的是Asp、Cgi，最安全的是Jsp，所以很多银行采用JSP编译。
了解完这些，我们基本就弄清楚网站的运行原理了。
主流后台编译语言：PHP ASP JSP CGI
网页设计文字显示区域 第25篇
我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：
那么像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删除，保留一半的动作。
雪碧图
网页设计文字显示区域 第26篇
视频网站的访问量惊人，并且用户的黏着度更高，很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前时代用户主要是单向浏览网站，提出的UGC概念就是说用户不仅在浏览也会上传内容。
那么视频网站为什么会火呢？
视频网站的设计师同样也可以分为：产品组和运营组两个种类，来处理产品方向和运营方向的不同需求。
腾讯视频播放页面
网页设计文字显示区域 第27篇
你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等H5刷过屏吧？
平时我们经常被这种好玩儿的H5刷屏，其实H5全称是HTML5，并不是仅仅指移动端，而是网页前端的开发语言、由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式成为H5。
其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页，随着技术日新月异的发展，H5显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的H5的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。
使用前端语言编译的适合手机浏览的H5界面
网页设计文字显示区域 第28篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
网页设计文字显示区域 第29篇
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 css。
网页设计文字显示区域 第30篇
待用户阅读完底层页的信息后，可以顺势在左侧或右侧的侧栏，寻找用户可能感兴趣的相关内容。在底侧可以看到网友的评论，底侧也会有分享按钮、赞功能等。如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。
总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。
底层页原型图
网页设计文字显示区域 第31篇
门户类网站如何盈利？
广告是变现方法之一。网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、产品侧设计师来完成。在网站中常见到的广告图形式就是banner。banner一般尺寸巨大，在网站之中非常显眼。因此也不一定是外部广告，也有内部活动、推荐资讯等。
那么banner图的尺寸有固定吗？
答案是没有。
Banner的宽度有两种：一种是满屏（1920PX）；一种是基于安全距离的满尺寸（1200px或1000px）。
高度要注意了，一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以banner不可以做得很高，否则第一屏信息会显示得不够。
你可能会说，那就让用户往下拉啊。
那么除了首页巨大的banner广告位，网站还有哪些广告形式呢？
网页设计文字显示区域 第32篇
因为如果比12像素更小的中文无法放得下复杂的笔画了，而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。
那么总结一下，文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑，大小为14-20px，渲染方式选择Windows Lcd或锐利。另外，英文和数字需使用Arial字体，渲染方式选择无。
网站字体规范
网页设计文字显示区域 第33篇
主文字颜色，建议使用 公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。
正文字体颜色，保险起见，选用易读性的深灰色，建议选用 #333333到#666666 之间的颜色。
辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。
如果，你对颜色驾驭能力比较强，你也可以选用 偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字颜色。
例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。
这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。
网页设计文字显示区域 第34篇
在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目_站设计最主流的交互方式还是鼠标和键盘。
来让我们看看鼠标有什么结构吧！
那么让我们来了解一下超链接的四个状态：（前端术语是：超链接标签的CSS四个伪类）。
按钮与文字的不同状态
网页设计文字显示区域 第35篇
当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面_性的东西，比如说：字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如：同样的分享功能，如果采用两种截然不同的样式，就会让用户困惑。
那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。
最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位，所以我认为设计师应该主动去做设计规范和项目总结。
设计规范如何去做？
其实设计规范就是把主要页面的元素固定成统一元素即可，具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。
视觉规范（工具：Photoshop）