底层页原型图
4.4 广告
那么门户类网站如何盈利呢？广告是变现方法之一。网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、策划或者部门经理。那么最常见的网页广告就是banner。而且我们都知道banner尺寸都很大，在网页之中非常显眼。那你可能会问尺寸很大，那到底有没有具体尺寸大小？那么我可以负责任告诉你 banner 图的尺寸没有固定的。一般宽度分两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度就要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以 banner 不可以做得很高，否则在第一屏信息会显示不完。你可能会说，那就让用户往下拉啊。但是这样很影响用户体验的。也就是很多用户可能点击进来看了一下网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，真可谓是寸土寸金啊。所以我们的 banner 不应该占据过大的区域。比如站酷网的 Banner 区域为1380x350px。那么除了首页巨大的 banner 广告位，网站还有哪些一些其他广告形式！
4.4.1对联广告
在门户网站中里面我们可能会经常看到有些网站左右安全区域之外会有个随屏幕滚动的像「对联」一样的广告，通常 banner 也会是一个广告内容，并且居中会弹出由 HTML5 技术或 Flash 技术制作出来的弹窗广告。这种广告一般组合售卖，也就是说一进网站你就会被全面轰炸，无法不注意到这个广告的存在。这种广告点击进入后可能是个专题页或者是官方聊天界面等！
对联广告形式
4.4.2信息流广告
信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地按照顺序阅读起广告的内容了，因为他和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是缺点就是会牺牲一定的用户体验。信息流广告的尺寸大小与信息流相同。
知乎APP中信息流中的广告
4.5 底部信息
在网站具体的页面设计中，底部会有一个区域我们称之为 footer，也叫底部信息，底部信息一般颜色都会比上边内容区域要暗，因为底部信息在逻辑的级别上是次要的。那么这一块区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 这块抢了主视觉风头！
五、技术原理
作为一个网页设计师在做项目时候要了解一定的技术程序，为什么呢？为什么我一个设计要动这些？因为技术决定了哪些设计和交互是可以实现出来的、哪些是不可以的。所以我们如果不去了解，低头一周做了个掉渣天的交互动销，结果程序小哥哥说sorry我写不出来！那就GG了。。。
基于鼠标的手势操作
5.1 鼠标的交互
就目前而言我们所使用的电脑还是处于基础的鼠标点击、拖动、移动、左键、右键、拖拽等这些命令，所以网页也是点击的艺术。右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。但是我相信在不久的将来，个人电脑可能通过多点触控、智能语音等完成指令，像现在MAC已经往这方面发展了！现在我们先了解一下目前的几个交互伪类!
Link(链接时)
Link是指元素当前是个超链接时候他的一些状态的时候他的一些样式。
例如a：link{ color：#red;}
意思当前这个a链接默认是一个红颜色的链接！
Hover（鼠标经过时）
Hover 是指超链接鼠标经过状态。
例如a：hover{ color：#blue;}
意思当前这个a链接在鼠标经过时会变成一个蓝颜色的链接！
Active（点击时）
Hover 是指当我们用鼠标点击下去时这个超链接的状态。
例如a：active{ color：#yello;}
意思当前这个a链接在鼠标点击时会变成一个黄颜色的链接！
Visited（已访问）
Visited 是指超链接被点击以后的状态。比如一些资讯类或者新闻类网页阅读完返回来时我们就知道自己有没有看过没看过这条新闻了！
例如a：visited{ color：#green;}
意思就是你访问过的链接他是个绿色了！
5.2 静态网页
5.2.1 HTML
了解完上面的后，我们现在来聊点正儿八经的。我们现在来说看到的一些网页都是静态网页。那么静态网页都是由 HTML 写的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML超文本标记语言（Hyper Text Markup Language，缩写为HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。XHTML是（The Extensible Hyper Text Markup Language，可扩展超文本标识语言）的缩写。HTML是一种基本的WEB网页设计语言。
模拟代码编译过程
是的，我们所看到的页面就是这样一点点通过代码写出来的，你也可以在预览网页的时候右键查看一下源代码。即使你没有代码基础但你懂英语，基本也可以看个二二三三！
5.2.2CSSCSS层叠样式表：英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
那么其实CSS就是和HTML两个配合起来用的，可以这样理解他们，一个是盖好的房子，而另外一个是装修房子的！那这里我说说下CSS嵌入HTML的三种方面吧！
第一种：行内样式
代码书写：
注意：这里的CSS他是写在我们的标签里面的。
第二种：内嵌式
代码书写：
注意：这里的CSS他是写在网页头部head里面的。
第三种：链接式
代码书写：
注意：这里需要我们另外新建一个CSS文件，将他链接到我们的HTML里面！
5.2.3 JS
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
用途
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies，包括创建和修改等。
7.基于Node.js技术进行服务器端编程。
主流形式：HTML + CSS + JS
前端教程：
六、网页设计规范
哇终于到了设计规范了，经历过长篇大论网页原理外现在我们好好谈谈设计规范，网页设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏或者标签栏。虽然前期我们也出过一个今天我们说到网页了再去逼逼一下！
6.1. 页面尺寸
那这个图是之前一个用户屏幕使用的一个统计图，我们可以看到在最新版 Photoshop 网站 Web 预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。
那这些呢都是些主流尺寸，而我们去做一个网站时候都是以最大的1920去设计的，高度为900px,那你可能糊涂了为什么是900px呢？不是1920*1080吗？那是因为1080还要减去浏览器头部和底部高度啊，大约就是900px了。内容区域为1200px （或1000px / 1400px）这几个常用尺寸。
网站的尺寸规范
6.2 文字规范
在网页设计中我们所采用的文字大小一般为12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文就无法显示复杂的中文字体了，而且都为偶数值！奇数的文字表现和适配都不好做。
网页的中文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体
英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px则适用于非突出性的普通正文内容。
16px、18px、20px、26px或者30px适用于突出性的标题内容。注意都是偶数原则，奇数像素会出毛边！
字体间距
相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。
行间距：推荐以字体大小的1.5—2倍作为参考；
段间距：推荐以字体大小的2—2.5倍作为参考。
例如，当选用14px 的字体时，行间距：21—28px；段间距：28px—35px。
6.3 图片规范
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。
第二种方法，可以尝试使用例如 Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。
第三种方法，Google 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省大量的服务器宽带资源。比如 Facebook、Ebay 还有我们设计师常用的站酷图片存储都是使用了 Webp 图片格式。
第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张 png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
在线压缩工具Tinypng网站
6.4 按钮
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
不同时代下不同的按钮风格
6.5 表单
在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件，一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。那么我们可以通过 CSS 给这些表单增加样式，包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。
表单不同风格的设计 UIDE Kit by Mateusz Dembek
6.6 网页栅格化
我们把整体宽度定义为 W。然后整个宽度分成多个等分单元 A。每个单元 A 中有元素 a 和间距 i。所以他们之间的关系就是 (A×n)-i=W。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。 比如：
栅格系统具体有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出，但至今，仍然有很多设计师在使用，除了考虑到显示设备的分辨率，还依赖于960 gird的灵活性。所以，对于新晋web ui来说，采用960 grid 仍然是最佳的方案，不会出彩但也不会出错。如果是考虑到宽屏的设计（需要舍弃一部分分辨率不高的用户），可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助一些非常好用的在线工具，比如知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。
Grid-Guide自动生成的栅格系统（宽950-12列）
从图中可以看出，这三种方案列宽column width和间距gutter不同，剩下的工作对于ui设计师来说就简单了很多，你可以把版式规范的png格式下载下来，作为你网页设计的基础版块，在此基础上进行列的划分。或者只是以这个参数为基础，重新建立参考线（我更推荐这种方式，尤其photoshop cc2017的新建参考线版面，装订线对应Gutter，列宽对应column width）。我简单的拿版式规范做了个页面设计示意图，这就是基于栅格系统设计的优点，在划分列时，有理可依，有据可循。
【基于960grid系统的版块划分示意】
当然，既然是设计师，就可以感性的元素再多一些。比如，你希望更多的留白，就可以采用间距值较大的栅格版式，只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统，你还可以尝试很多方案，但Max Width的设定并不是那么随意，这个取决于网站的定位。
Grid-Guide自动生成的宽1180的栅格系统（24列）
至于高度和垂直间距，栅格化系统并没有统一的准则，设计师可以采用一些黄金分割之类满满的都是设计感之类的值，或者垂直间距与栅格系统的间距相同或是整倍，总之，也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况，尽量建立10的倍数或8的倍数（google material design推荐）。
6.6.1栅格化布局的参数
在前面提到过，如果网站的需求是响应式的设计，这时，设计师们一定一定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统，首先声明一点，当前端乐意并了解CSS原理和框架的构建方式时，可以构建其他样式的网格，比如7、9、11、13等等，甚至各种异形网格，但在绝大多数情况下，更多的前端攻城狮青睐于高（tou）效(lan)，而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，如果只是需要一个响应式的css的话，可选的非常多，比如960.gis），除此之外，有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定下来之前，请放下架子，请教一下开发人员，因为虽然不想承认，但这种情况下是前端来指导设计。值得庆幸的是，这种情况在现实中非常少的，（但不排除你接手的是一个二次开发的项目等等之类），确定他们使用哪种框架之后，设计师可以开始自己的工作了。
下面也举个例子，是960gis的。
【960-grid-system栅格化布局】
看完你也许会明白为什么涉及到栅格化布局需要前端来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只要向前端索取他使用的框架的psd模板即可，里面参考线都是建好的。而前端一定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量，皆大欢喜。比如下面这张，就是目前最新的Bootstrap4的psd文件的截图。
6.7 适配Retina屏幕
2012年苹果发布了 Retina Macbook Pro，Retina 屏幕的电脑占有量越来越高了。Retina 屏幕简单地说就是屏幕密度是传统屏幕的两倍，拥有更大地清晰度。甚至可以满足我们视网膜最高的识别度，所以也叫视网膜屏幕。这种屏幕下我们设计的安全距离大约为1000像素的网站就显得非常粗糙了。所以如果我们现在 Retina 屏幕下显示一个400X300PX的区域，实际上我们需要提供给前端一张800X600PX的切图才行，因为 Retina 屏幕一个点顶过去两个像素。那么我们的用户是视网膜屏占比更多的用户，比如设计师群体，那怎么兼顾高清屏幕和普通屏幕呢？
首先我们需要以视网膜屏幕大小完成设计稿，建议是传统设计稿的两倍。之后切出两套切图（非 Retina 屏幕用户如果也加载双倍大小的资源会很慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来识别，如果屏幕是 Retina 就加载双倍尺寸，不是则加载普通尺寸。前端可以使用 Retina.js（）提供的技术进行识别。
6.8自适应与响应式网站
我们看到有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 css。
自适应网站
自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。比如站酷网、Dribbble 等网站都采用了自适应布局。
响应式网站
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）
无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）
我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。
常见的主要有如下几种方式：
1、布局不变，即页面中整体模块布局不发生变化，主要有：
2、布局改变，即页面中的整体模块布局发生变化，主要有：
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。
适配的规范
手机方面：适配手机页面时，我们一般以 iPhone 为画布标准。原因是 iPhone 相对显示比较清晰，并且要求较高。而且用户占有量也很高。在适配时我们一般以750x1334px尺寸为主，然后将网站导航改变为手机 APP 常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机 APP 中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88PX，方便手指的点击。字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。也就是将网站改变成一个类 APP 的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。
iPad：iPad的尺寸为1024×768、2048x1536px等，无论怎么变基本与电脑屏幕尺寸类似。所以在 iPad 上浏览网页是基本舒适的。因此，很多网站并没有专门为 iPad 做适配，如果我们希望 iPad 用户用的更爽，可以从文字大小（24PX以上）、按钮大小（88PX左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。
不同设备的注意事项
6.9 视觉稿命名
6.9.1布局
6.9.1 Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
6.9.2 Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
6.9.3 Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
6.9.4 Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
6.9.5 Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.9.6 Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
6.9.7 Footer