不相同种类型的网站建设需要注意的地方解析

响应式网站、网站类型、网站组成部分、技术原理、设计规范等全方位汇总了网站制作的入门知识，接近两万字的干货，小白看完就能基础知识了。1、网站制作是什么？网站制作也被叫做 Web Design、网站建设、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然目前大家常用手机端上的 APP 来获得资讯，但显然基于个人电脑平台的网站上网方法伴随大家的历史要比手机久不少：从1987年钱天白教授向德国发出一封邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到目前网站遍地；中国的网站飞速发展了近三十年。我是在小学开始去网咖「上网冲浪」的，那时的电脑屏幕很小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），网速也非常慢，常常掉线或者加载失败。那时的网站性能和体验都不好，而目前网站建设和过去已经有了巨大的变化：重视客户体验、重视页面动效、富媒体等设计让现在的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中尤为重要的平台之一。那样作为 UI设计师大家就需要学会网站建设的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向你好好说道一下网站需要了解的那些事儿。2、工作步骤最全方位的网站制作入门知识攻略大全第一让大家来看一下网站建设的工作步骤吧，除去之前介绍过的用户研究、写作商品需要文档、市场文档、做竞品调查等工作以外，与设计师密切有关的网站项目步骤可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每一个阶段都需要设计师参与和知道，千万不要只在乎视觉稿这个阶段，有不少前期与后期工作同样需要得到大家的看重。好，让大家一个一个来认识它们吧。1. 原型图阶段原型图阶段中设计师需要和商品经理交流需要，这个时候应该注意，并非商品经理向设计师下发需要，而是需要相互就自己善于的方面进行交流。视觉方面具体呈现或许设计师会有更好的方法，这个时候需要在设计之前与商品经理达成一致。△ 构网站制作原型图（工具：Axure RP）2. 视觉稿阶段视觉稿阶段就是大家要依据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，大家需要一些图像和想法的素材。譬如做世界杯专题时，大家除去采集不少素材以外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题有关的资料和素材拼贴在一块，如此可以更好地引导大家整个需要的设计主题和大体感觉。另外，不少网站的头部一般需要主视觉来抓人眼球，这个时候或许会用到需要方提供的明星照片、主题素材、LOGO、主视觉PSD等，那样用素材和这类需要方提供的资料进行混合并拼出叫人感觉震惊的头部视觉就是大家的目的了。主视觉下面的信息排布更强调合理性，这个时候也需要和商品经理交流从后台调取的图片尺寸、标题字段长度等，然后依据这类需要完成页面信息部分的设计。总之，设计过程中需要大家不断考虑和交流才能完成一个比较棒的视觉稿。△ 视觉稿设计阶段（工具：Photoshop）3. 设计规范当视觉稿通过后，不少设计师可能不会主动去做设计规范。其实每个可迭代的商品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，譬如说字体不一样的大小、图片的尺寸、按钮的样式等，这类共性也是用户访问网站时会理解成固定定义的凭证。譬如同样的推荐功能假如使用两种完全不同的样式就会让用户困惑。那样设计规范主要也是在约束设计师大家自己，在用户有限的记忆力中降低考虑的本钱。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来讲也是对项目影响的一个佐证，可以证明你的考虑和你在项目中的地位。所以我觉得设计师应该主动去做设计规范和项目总结。设计规范怎么样去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来讲一个商品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。△ 视觉规范（工具：Photoshop）4. 切图网页设计人员一般无需为前端工程师切图。由于前端工程师一般需要学会 PS 软件技能。假如遇见特殊状况需要大家切图时，大家可以用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所用的图片。△ 从PSD中提取出来的切图（插件：cutterman）5. 前端代码前端工程师会用代码重构大家设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了便捷知道网站是否达到了大家需要的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，便捷大家之后确定什么页面访问量高，什么没达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是不是存在一些漏洞等。△ 前端工程师代码编译（工具：Notepad +）6. 项目走查网站制作完成后还需要设计师进行项目走查，来确定网页还原度是不是有问题。假如发现有和设计稿出入非常大的，就需要需要前端工程师进行调整。这个步骤尤为重要，由于网站的成品才是大家最后的输出，不要觉得设计稿非常漂亮而达成后的页面就无需大家负责了。△ 将达成后的截图和设计稿进行比对（工具：Photoshop）3、网站类型网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和买家，比如门户网站、公司网站、商品网站、电子商务网站、游戏网站、专题页面、视频网站、手机端H5 等，均是面向用户和买家的商品。因为是面向用户和买家，所以设计上必须要可以吸引人，并且以用户为中心考虑体验设计。而 To B端作为一个需要量非常大的类别，其实总是被设计师所忽略。什么是 To B端项目呢？譬如电子商务网站供货商的后台、Dashboard、企业级OA、网站统计后台等这类面向企业和专业人士的网站就是 To B 类网站项目了。这类项目的需要和 To C端网站的需要大相径庭：To B 类项目非常重要的是效率而不是体验，由于说白了大家在设计用户工作的工具，大家在设计时需要第一要保证操作者可以高效地完成他们所需要完成的工作。那样让大家来认识一下网站的不同门类吧。1. 门户网站门户网站国内比较知名的有新浪、腾讯、网易、搜狐；海外比较知名的如 Naver、Llinternaute 等。大家可以看得出，门户网站都是大而全包罗生活万象的。譬如腾讯网就有新闻、财经、视频、体育、娱乐、时髦、汽车、房地产、科技、游戏等不同频道。门户网站的门槛非常高，需要要有雄厚的实力才能打造起一个门户网站，而门户网站需要的设计师数目也惊人。第一门户网站需要商品方向的界面设计师以迭代的方法维护迭代网站首页、二级页面、底层页等网站基石。然后需要每个频道的设计师来处置平时需要：譬如巴黎时装周需要负责时髦频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那样门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有肯定善于之处：譬如对接体育频道的设计师起码应该熟知足球篮球等体育项目、时髦频道的设计师要了解每个一线品牌的设计风格、佛学频道的设计师需要了解基本的佛学常识和禁忌、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为商品组和频道组两种。2. 公司网站每一个企业都需要有一个网站来对外展示我们的能力、介绍我们的商品等。目前接触一个陌生的企业时，不少老百姓都会上网搜索一下其官方网站验证真假。网站已经是中小微型企业的标准配置了。公司网站建设时一般会有网站首页、公司简介、商品中心、公司团队、在线商城、联系大家等这几个模块，公司网站会展示不少诸如公司环境、团队成员、企业文化等实质的照片，配合一些资料进行设计。公司网站一般也追求所谓「高档」、「大方」、「上档次」的风格，也就是为了达到让买家认可品牌这个需要。所以假如大家接到了公司网站的设计需要，可以多去浏览参考一些愈加一线品牌的公司网站作为竞品来参考。△ 美国通用公司官方网站3. 商品网站从苹果企业的 iPhone 介绍页到小米手机8的介绍页，大家会发现一种新鲜的产品推广模式，就是商品网站。设计这种网站的内容主如果该商品的工艺、技术、设计、特征、架构、用场景等。如此的商品页期望可以让用户有沉浸感，所以通常来讲都是用全屏布局，然后配合一些如视差滚动等方法让大家感觉到这个商品的极致精细。因为中国网络和商品设计进步非常快，所以商品类网站建设需要必然会愈加多。△ 苹果公司商品介绍页4. 电子商务网站电子商务设计师也是网页设计人员吗？是的。假如根据平台细分，无疑电子商务设计师所在的平台大多数是网站。以淘宝、天猫为代表的电商进步得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电子商务平台上门店经营铺了。门店其实本身是平台本身的页面。但为了增强每一个店的个性，平台为商店开通了一些页面自概念的装饰功能，譬如宝贝详细情况、门店排版、banner头图设计等。如此商铺有肯定权限在平台规定的范围内用图片和一部分css样式代码来装饰我们的门店，电子商务设计应运而生。虽然携带镣铐跳舞，但有不少门店由于设计精良而能带动销售。那样电子商务设计师当然就变得尤为重要了。5. 游戏网站游戏是一个巨大的产业，不少企业的收入大半壁江山都来自游戏产业。那样除去游戏需要制作精良以外，游戏的官方网站也需要设计精美。不要忘记，每个玩家都需要访问你的游戏官方网站才能完成下载、充值、社交等要紧操作。海外游戏网站譬如暴雪娱乐公司（https://www.blizzard.com）的官方网站设计得极其精美，每一个游戏的官方网站都是一个精品。譬如魔兽世界、星际争霸2等游戏官方网站，头部都是视觉冲击很强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。6. 专题页面当然无论是电子商务还是门户网站，在节日都会需要设计师来设计一些专题页面增加揭秘。譬如六一、情人节、母亲节节日、圣诞等节日总是会有营销、专题报道等各式活动。专题设计生命周期非常短，上线后基本过了流量的那个点就基本没用了。所以大家找不到前几年的618或者双十一专题页面，由于过了特定的时期专题页面就门可罗雀了。所以在那样短的生命周期如何抓住人的眼球？当然不可以用现代主义设计那种性冷淡风格，而应该在头部尽可能刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每一个人可能只能看一次，不可以放过这个机会。所以专题设计和商品设计正相反，专题设计需要刺激。△ 极有家淘宝专题页面7. 视频网站视频网站的访问量惊人，并且用户的黏着度更高。不少视频网站除去购买版权以外还有不少 UGC 内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，非常早之前 web1.0年代用户主如果单向浏览网站，web2.0提出的 UGC 定义就是说用户不只在浏览也会上传内容。那样视频网站为何会火呢？第一要感谢宽带的进步。在今年大家国内点击视频就立马可以播放了，而在几年前需要等待几分钟才能加载够缓存。视频网站的设计主如果要考虑应用场景：视频是用户主要观看的地区，所以视频地区第一要足够大，另外颜色应该以暗色为主，由于亮色会影响到用户观看视频。然后其他的地区图片比率应都为16:9的视频尺寸，便捷后期编辑在后台添加。视频网站的设计师同样也可以分为商品组和运营组两个类型来处置商品方向和运营方向的不同需要。腾讯视频播放页面8. 手机端H5你肯定在朋友圈被《穿越将来来看你》、《淘宝造物节》等 H5 刷过屏吧？平常大家常常被这种好玩儿的 H5 刷屏。其实 H5 全名是 HTML5，并非仅仅指手机端，而是网页前端的开发语言，因为约定俗成的定义，大家目前常常把手机中的集合视频、动效、互动的这种推广形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。伴随技术日新月异的进步，H5 看上去愈加有传播价值和份量。微信、浏览器等平台级商品在手机端中热门促进了依赖入口而传播的 H5 的进步。假如设计出色，你的项目或许会在朋友圈产生病毒传播的成效。△ 用前端语言编译的合适手机浏览的H5界面手机端H5尺寸设计手机端 H5 项目的时候，大家一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后大家要在顶部预留出微信或者浏览器导航地区。主要内容地区就能自由设计了。一般H5的操作是上下滑动。字体方面用苹方字体，并且字号设置为24PX以上，渲染方法设置成锐利。英文则需要用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除去让前端小哥哥们开发以外，其实还有一种方法可以不需要代码生成浅易版的 H5，就是通过 H5 工具生成。现在比较火的 H5 生成工具备：MAKA、iH5、兔展等，假如大家要自己生成而不是通过前端开发，那样大家设计稿的尺寸需要设置为640x1008PX。这类工具较为简单，注册后将 PSD 上传即可对每一个原件进行动效的设置了。但假如需要复杂的动效和交互，还要前端工程师的配合。△ H5项目的尺寸9. 后台网站后台网站又叫 Dashborad，中文翻译为仪表盘。其含义就是有一大堆数据与统计信息。后台网站是 To B 种类，那样第一的需要就是能迅速地显示给操作者他需要学会的数据。可是数据很枯燥，大家可以用诸如「折线图」、「饼状图」、「曲线图」、「表格」等不同方法来展示这类繁琐的数据，这种图形表达数据的方法也叫做数据可视化。后台网站无需特别可爱的插图与卡通形象，非常重要的是效率。所以假如你常常处置 To C 类的需要，接到了 To B 类的商品需要时必须要注意这一点。后台网站由于需要更大的画面，一般会用全屏式排版，也就是撑满整个画布。那假如小屏如何解决呢？前端会用相对布局缩小每个元素，排版的地方也会用百分比来确定。△ 公众号后台10. CRM系统CRM 即 Customer relationship management，翻译过来是会员管理管理软件。CRM 是企业对顾客进行信息化管理的一种形式，用网络技术达成对顾客信息进行采集、管理、剖析，对企业的销售、服务、售后进行监控。容易见到的功能有职员日程管理、订单管理、发票管理等。大家在设计这种项目时必须要将信息按所属的逻辑关系分类，加大对比、对齐、重复、亲密性的原则，使操作者在用的时候感觉到便利。11. SaaS假如大家服务于为企业搭建 CRM、进销存 或者 OA 等系统的第三方公司，那样大家或许会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为顾客提供从服务器到设计一体化的服务。这里提到这个词是预防设计师误解它的概念。12. 企业OA企业OA，即(Office Automation)，也就是办公智能化系统。在六七十年代就兴起了一场用电脑来改变传统办公方法的革命。在大型企业时常会面临职员海量、地域广袤、办理公司事宜手续冗长等问题，那样企业OA 可以非常不错地解决这方面的问题。通过企业OA 可以完成请假、调休、辞职、查看公司规章规范、请示、汇报等工作。如此降低了不少窗口本钱和职员的时间本钱，增强了公司工作效率。网络公司更是提供给职员除去企业OA 以外的交流功能，譬如打造职员 BBS 和留言板等，在上面大伙可以对公司提出建议和建议。企业OA 一般出于安全和保密性是什么原因，不少公司都愈加想自己开发。设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者随便可以找到在目前页面中非常重要的功能。△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski4、网站组成部分最全方位的网站制作入门知识攻略大全知道了网站的不相同种类别后，让大家来看看组成一个网站需要什么部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。大家设计的是一个像蜘蛛网一样的互联网，而不是一张海报。所以大家在设计网站时要格外考虑从用户角度出发看到的网站，而不可以孤立地把它想象成一个平面作品。1. 首页访问一个网站时一个大家触及的就是网站首页。首页别名叫作 Index 或者 Default，是索引和目录的意思。在网站进步的前期阶段，网站并非富媒体，而是像一本书一样：首页类似书本的目录，需要查询什么子网页就点击链接即可进入。到了目前，网站首页仍然是引导用户进入不同地区的一个「目录」，这个目录除去导航功能外也要露出一部分内容给用户来吸引点击，露出的部分必须要有一个「更多」按钮来引导用户找到二级页面。△ 首页原型图2. 二级页面在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来讲，自然是越靠前访问量越高，页面层级越深越困难被用户找到。一般网站有三级页面，就是为了防止用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面一屏出现的诸如 首页体育NBA频道，如此的超链接结构，便捷用户理解自己在哪儿，并且点击可以回到其他页面。△ 二级页面原型图3. 底层页在网站架构中最后提供用户实质资讯的页面就是底层页。譬如，在门户网站首页或二级页面中大家点击有兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左边或右边的侧栏探寻用户可能有兴趣的有关内容；在底侧可以看到网友的评论；底侧也会有推荐按钮、赞功能等；假如侧栏用户实际转化的比例比较差，最底部还可以第三出现推荐有关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。△ 底层页原型图4. 广告门户类网站怎么样盈利？广告是变现办法之一。网站的广告一般由负责运营需要的设计师负责，但也会由频道设计师、商品侧设计师来完成。在网站中容易见到到的广告图形式就是 banner。banner 一般尺寸巨大，在网站之中很显眼。因此也可能不是外部广告，也有内部活动、推荐资讯等。那样 banner 图的尺寸有固定吗？答案是没。Banner 的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度应该注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以 banner 不能做得非常高，不然一屏信息会显示得不够。你或许会说，那就让用户往下拉啊。但在网站的访问用户之中，第二屏触及到的用户比一屏会少不少。也就是不少用户可能点击网站后就会跳走或者关闭，那样一屏的信息真的尤为重要了，可谓是寸土寸金。所以大家的 banner 不应该占据过大的地区。譬如站酷网的 Banner 地区为1380x350px。那样除去首页巨大的 banner 广告位，网站还有什么广告形式呢？对联广告在门户网站中大家常常会看到网站左右安全地区以外会有个随屏幕滚动的像「对联」一样的广告，一般 banner 也会是一个广告内容，并且居中会弹出由 HTML5 技术或 Flash 技术制作出来的弹窗广告。这种广告一般组合售卖，也就是说一进网站你就会被全方位轰炸，没办法不注意到这个广告的存在。这种广告点击进入还有配合的专题页等，可见需要设计师配合的地方很多。△ 对联广告形式信息流广告信息流广告是埋在信息流中的一种广告形式。这种形式借助了格式塔原理，用户会不自觉地阅读起广告的内容，缘由是由于它的形式和其他信息一样。譬如朋友圈、知乎、Facebook 都使用了信息流广告，信息流广告的成效很强，但会牺牲肯定的客户体验。信息流广告的尺寸与信息流相同。△ 知乎APP中信息流中的广告以上从广告的形式上简单介绍了三种容易见到的网站广告形式，假如大家在阅读需要时看到了 cpm、pv 等单词的意思是呢？他们是广告的收费模式。cpm 是指根据广告 pv 来收费，cps 是指根据用户消费收费，cpa 是指根据用户注册数收费，cpc 是指根据用户点击付费。针对不一样的收费模式，在设计时也会采取不同方案来增强广告需要达到的目的。5. Footer在网站具体的网页设计中，底部会有一个地区大家称之为 footer。一般 footer 的颜色都会比上边内容地区要暗，由于 footer 的信息在逻辑的级别上是次要的。footer 地区的主要功能是版权声明、联系方法、友情链接、备案号等信息。在设计时必须要降级处置，不要让 footer 变得特别明显。5、技术原理最全方位的网站制作入门知识攻略大全网页设计人员在做项目之前需要知道网页背后的技术原理，技术决定了什么设计和交互是可以达成的、什么是不能的。同时技术原理也决定了大家需要怎么样配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个职位，就叫做网站设计师，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。伴随分工愈加细致，产生了网页设计人员和前端工程师两个工种。但网页设计人员不能脱离技术局限天花乱坠地去设计。下面让大家来认识网站的基本存储原理：在你的电脑 C盘保存一个叫 logo.jpg 的图片，然后在浏览器打开这个网址：C:\logo.jpg 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似大家电脑的东西里，那就是服务器。大家通过域名来调取网中不一样的页面和文件，假如服务器关机了那样网站也就瘫痪了。每次当大家通过浏览器访问网站时，敲击一个网址，这个时候这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了将来，大家的浏览器会从服务器上下载网站的代码并把代码翻译成大家能了解的界面，譬如文字、边框、表格等事实上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当大家通过表单输入用户名和密码时，大家的信息就会上传到服务器中，服务器处置完（譬如登录成功这个信息）然后再下发给大家的浏览器。所以平常大家访问网站时，大家的电脑和浏览器要通过网络与服务器进行多次「握手」。当然老「握手」会导致加载速度变慢，于是大家聪明的浏览器会把已经下载过的资源缓存下来，防止浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。△ 基于鼠标的手势操作1. 基于鼠标的交互在不久的将来，个人电脑可能通过多点触控、语音交互等方法与大家交互，但现在网站建设最主流的交互方法还是鼠标和键盘。来让大家看看鼠标有哪些结构吧！大家对鼠标的用法无外乎移动、左键、右键、拖拽四种方法。大家在页面中的大多数操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，但不少网站与网页应用程序也会将右键自概念设计一些操作和交互。与鼠标发生交互的主如果超链接与按钮。那样让大家来认识一下超链接的四个状况吧（前端术语是：超链接标签的 CSS 四个伪类）。△ 按钮与文字的不同状况linklink 是指超链接正常的时候的状况。一般超链接需要与普通文字不同开来，譬如换一种颜色或者加下划线。当然下划线还有一个用途就是便捷弱视群体区别超链接与普通文字。link 默认都是蓝色的（色值：#72ACE3），但为了增强网站的品牌性大家也可以把链接颜色更换成另一种颜色。总之必须要在形式上与普通文字产生差别才能。VisitedVisited 是超链接被点击未来的状况。譬如新浪网新闻很多，所以点击完一个新闻后用户可能不了解自己看过没看过这条新闻了。所以新浪网用了 Visited 属性，点击后的新闻颜色就不同了，便捷用户不同自己什么新闻还没浏览。HoverHover 是超链接鼠标经过状况。这个状况是连接中最为要紧的状况。其实不仅超链接，按钮和图片与视频等所有可交互的元素都要设置 Hover 属性，也就是鼠标悬停时的状况。通常来讲变换颜色和放大是 Hover 状况的基本方法。ActiveActive 是指超链接的激活状况。点击后超链接可以通过 CSS 加载一个状况。同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不一样的样式，便捷用户通过鼠标感知这个物体是被我按下去的，这种给用户的暗示大家也叫做「点击感」。当然按钮会和链接稍有不同，按钮除去拥有正常和鼠标悬停等状况，还有一种状况叫不可点击。这种状况将按钮置灰，提示用户这个功能由于条件不满足不能点击。好了，你可以举出几个点击感 Web 设计的例子吗？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 等多个浏览器测试网站的兼容性，这个时候一般让前端工程师很头疼。由于代码动一发牵全身，常常这个好了那个又不可以了。但针对这种问题也有一些解决方法，譬如降低对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高中一年级尺魔高中一年级丈呀。3. 其他前端语言有了 HTML 这个骨架，加上图片和多媒体后，网站的进步速度就更快了。但服务器的损耗非常大：所有用户都需要重复地来服务器下载代码和图片等资源进行「握手」，而且不少 HTML 代码都是重复的，导致了资源的浪费。譬如，假如我网站的头部都是黄色的、链接都是蓝色的，那样每一个页面都会啰嗦这几句代码。这个问题没多长时间就被一种崭新的代码解决了：CSS技术。CSS 是层叠样式表的意思：大家可以理解为目前把网站的样式（颜色、大小、地方等样式信息）也就是 CSS 和网站的内容（文字、图片、链接等内容信息）也就是 HTML 完全分开，并且一个网站可以下载一份 CSS 然后不同页面都调取这份 CSS 的缓存，那样就节省了服务器资源。另外，因为网站需要一些交互成效，譬如点击特效和菜单特效等，那样需要前端工程师用 Javascript 代码来配合。Javascript 是一种比较短小精悍的语言，构建一些基于浏览器的特效很顺手。所以现在主流的网站配置是 HTML5+CSS3+JS 代码的组合，当然为了兼容那些低端浏览器也会用 HTML4+CSS+JS 的套餐。这取决于大家的主要目的用户群在用哪种浏览器。当然，我讲这类并非需要你去学习 HTML、CSS、JS 代码然后进行前端开发，由于在现代网络公司里已经有专业的前端工程师了。大家知道这类主如果要理解前端工程师的工作以便更好地配合他们。△ 主流形式：HTML + CSS + JS4. 动态网页知道完静态网页还不够，目前让大家谈谈网站怎么样动起来。动态网页不是说它有狂拽酷炫的动画，而是动态网页会伴随时间、内容和数据库的调用而产生动态的网页。譬如今天看到的新闻网站和昨天的新闻一定不同了，可是网站首页的 HTML 代码并无需人去手工修改，而是让记者通过后台录入新闻、上传图片就好了。记者上传后台的过程就会输入数据库，而动态网页又是调取数据库内容显示给用户的一种形式。动态网页会随时调取数据库中的信息给用户，而对用户来讲好像静态网页和动态网页长得都是一样的。那样最傻瓜的判断方法是看网址结尾，静态网页结尾是 html 或 htm，而动态网页因为用了高级网页编程技术，结尾则是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是动态网页的语言，当然有些时候为了让网站效率提高也会用伪静态结构，结尾和静态网页就一致了，但事实上是会在用户访问前调取一遍数据库的。同时动态网页的网址会有一个特征，含有？符号。动态语言现在最热门的是 Php，较早而目前比较少见的是 Asp、Cgi，最安全的是 Jsp，所以不少银行使用 JSP 编译。知道完这类，大家基本就弄了解网站的运行原理了。△ 主流后台编译语言：PHP ASP JSP CGI5. 雪碧图大家常常看到网站中会有动画，那样动画达成的原理一般有如下这么几个：一，HTML5 视频播放；这种方法缺点就是不兼容低端浏览器。第二，Flash Player 播放器播放；这种方法的缺点是Flash安全性非常低而且效率慢。第三，动画用 Gif 格式；这种方法的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那样像 谷歌 首页 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）6、网站制作规范终于，历程过长篇大论网站的原理与组成部分后，大家要谈谈网站建设的规范了。网站建设并无具体平台限定的风格，也没需要要设计的系统级导航栏和工具栏。所以网站建设愈加灵活，然而由于太灵活也会让大家的设计师无从下手。那样下面我将介绍网站建设的规范，在你工作的时候可以参考。注意，在设计之前必须要和前端交流大家用的尺寸、字体、交互等，如此能够帮助后期不会有误会。1. 画板尺寸由于网页尺寸与用户屏幕有关，而用户屏幕的类型很难统计。所以大家的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方法来解决。在最新版 Photoshop 网站 Web 预设尺寸给了大家一些启示：容易见到尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这类是主流尺寸，而大家假如网站建设时建议按主流的分辨率1920x1080px来设计。所以大家一般设计网站时的网站宽度为1920px，每一个屏幕的高度约为900px。为何是900px呢？由于1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全地区为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在制作网站前需要知会前端设计尺寸，由于对于适配的方法和后续配合他们更有发言权。△ 网站的尺寸规范2. 文字规范大家目前都了解了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。譬如在苹果电脑上看到的文字成效和 Windows 系统电脑上看到的文字成效就有所不同：苹果会对文字进行渲染，而 windows 的文字几乎充满了像素颗粒。根据用户占比来讲无疑 Windows 的用户是主流，所以尽管大家可能用苹果电脑制作网站，但设计出来的网页成效也应该和 Windows 显示一致。不然大家设计完好看的设计稿，技术员没办法还原成大家设计的样子。另外，字号的大小也尤为重要。网页的显示地区决定了文字不能过大，在网站建设中大家的文字大小通常来讲是12-20像素。为何不可以比12px更小？由于假如比12像素更小的中文没办法放得下复杂的笔画了。而且奇数的文字表现和适配都不容易做，也就是说大家需要用偶数的字号来设计。那样总结一下：文字用宋体、大小为12px、渲染方法选择无。稍大一些的字体用Microsoft雅黑、大小为14-20px、渲染方法选择 Windows Lcd 或锐利。另外，英文和数字需用 Arial字体，渲染方法选择无。△ 网站字体规范3. 图片规范网站建设中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比率。具体图片大小没固定需要，但整数和偶数为佳。主如果考虑到一些适配的问题。作为内容出现的图片肯定需要有介绍信息和排序信息。图片的格式有不少，譬如支持多级透明的 png 格式、图片文件非常小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像明确度地状况下文件大小越小越好，怎么样让网页用的图片更小呢？一种办法，给技术员切图的时候大家可以适合缩小图片文件的大小。譬如 Photoshop 中存储为 web 所用格式就会比迅速存储文件更小。第二种办法，可以尝试用比如 Tinypng、智图等工具第三压缩图片。这类工具会把图片中的多余信息删除并且压缩，而图像水平不受损失。第三种办法，谷歌 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省很多的服务器宽带资源。譬如 Facebook、Ebay 还有大家设计师常见的站酷图片存储都是用了 Webp 图片格式。第四种办法，浏览器和服务器握手时需要下载网页所调用的图片资源，那样假如一个网站有一百张图片的话，浏览器和服务器就得握一百次。一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所用的图片拼成一大张 png。然后每一个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块地区移动到一大张图片中所需要的那个图像。△ 在线压缩工具Tinypng网站4. 按钮按钮的风格在过去的十几年发生了非常大的变化，由刚开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，目前更时尚的是扁平风格。假如按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方法叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状况。△ 不同年代下不一样的按钮风格5. 表单在网站建设计中大家常常需要用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这类都是系统级的控件，一般是直接调用系统设计的。但系统设计有时难以满足大家的需要：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。那样大家可以通过 CSS 给这类表单增加样式，包含颜色、大小、内外边距等。所以大家遇见涉及到表单的需要时也可以进行自概念设计。△ 表单不同风格的设计 UIDE Kit by Mateusz Dembek6. 栅格大家把整体宽度概念为 W。然后整个宽度分成多个等分单元 A。每一个单元 A 中有元素 a 和间距 i。所以他们之间的关系就是 (A×n)-i=W。当然每一个应用的尺寸不止可以整除成一种栅格，这就要看大家内容排版的疏密程度了。之后，大家将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在我们的栅格内，如此就完成了一个布局很科学的设计了。 譬如：栅格系统具体有以下优势：能大大提升网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站每个页面的布局维持一致。这能增加页面的相似度，提高客户体验。△ 网站的栅格化会使网站看着更有秩序感7. 适配Retina屏幕2012年苹果发布了 Retina Macbook Pro，Retina 屏幕的电脑占有量愈加高了。Retina 屏幕简单地说就是屏幕密度是传统屏幕的两倍，拥有更大地明确度。甚至可以满足大家视网膜高的辨别度，所以也叫视网膜屏幕。这种屏幕下大家设计的安全距离大约为1000像素的网站就看上去很粗糙了。所以假如大家目前 Retina 屏幕下显示一个400x300PX的地区，事实上大家需要提供给前端一张800x600PX的切图才行，由于 Retina 屏幕一个点顶过去两个像素。那样大家的用户是视网膜屏占比更多的用户，譬如设计师群体，那如何兼顾好看的屏幕和普通屏幕呢？第一大家需要以视网膜屏幕大小完成设计稿，建议是传统设计稿的两倍。之后切出两套切图（非 Retina 屏幕用户假如也加载双倍大小的资源会非常慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来辨别，假如屏幕是 Retina 就加载双倍尺寸，不是则加载普通尺寸。前端可以用 Retina.js（https://retinajs.com/）提供的技术进行辨别。8. 自适应与响应式网站大家看到有的网站用PC端或者手机端甚至 iPad 去浏览时体验都很好。这就需要大家为了客户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是一样的，都是通过代码测试设施屏幕宽度，依据不一样的设施加载不一样的 css。响应式网站响应式网站的设计稿是一致的，但设计稿需要考虑屏幕变小时的变化方法。譬如一个网站的内容有5个区块和4个间距，那样假如宽度缩小成900时需要怎么样变化，这就是自适应布局。譬如站酷网、Dribbble 等网站都使用了自适应布局。响应式网站响应式网站则需要设计不同版本的设计稿，然后依据不一样的设施提供不一样的 CSS 样式。譬如断定你设施的宽度是750px，那样网站就了解你用了手机来访问，就会给你导入一份手机才有些样式；若是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来讲，自适应需要考虑网站在不同设施宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了客户体验所适应浏览设施而做出的努力。适配的规范手机方面：适配手机页面时，大家一般以 iPhone 为画布标准。缘由是 iPhone 相对显示比较明确，并且需要较高。而且用户占有量也非常高。在适配时大家一般以750x1334px尺寸为主，然后将网站导航改变为手机 APP 常常用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机 APP 中大家看到的左右几乎满屏的按钮，并且每一个按钮要大于88PX，便捷手指的点击。字体方面，大家要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方法设置成锐利。英文则需要用 SF-UI 代替。也就是将网站改变成一个类 APP 的手机网页，如此才能保证手机客户体验好。假如用户用Android手机，那样前端代码则会基于设计稿的设计适度加强图片与间距来适应Android屏幕。iPad：iPad的尺寸为1024×768、2048x1536px等，无论如何变基本与电脑屏幕尺寸类似。所以在 iPad 上浏览网页是基本舒适的。因此，不少网站并没专门为 iPad 做适配，假如大家期望 iPad 用户用的更爽，可以从文字大小（24PX以上）、按钮大小（88PX左右与以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方法入手。最全方位的网站制作入门知识攻略大全不同设施的需要注意的地方无论你面对的项目是 To C 的还是 To B 的网站商品，大家都要第一确立设计风格探寻设计素材打造情绪板完成视觉稿切图标注打造视觉规范进行项目走查。假如设计一般网站的页面，可以根据1920 X 1080px尺寸设计。每屏高度900px，字体用宋体12px、无和Microsoft雅黑 14-20、Windows LCD。Banner 尽可能满屏，但图片需要根据4:3或16:9等比率来设计。网站建设时可以打造栅格以更好地进行自适应和响应式布局，大家也要为超链接和按钮设计不一样的相应鼠标的状况；另外大家也可以多多尝试在网站建设中加入视差滚动、雪碧图动画等好玩的交互。假如设计手机端的页面，可以根据750x1334PX尺寸设计。字体用苹方24PX以上、锐利。英文字体用SF UI。按钮和点击地区需要大于88PX便捷手指点击。并且头部需要预留出微信或浏览器的导航地区。

名字栏目：不相同种类型的网站建设需要注意的地方解析文章转载

网站制作、网络营销推广公司-博久网络，是专注品牌与成效的网站建设，网络推广营销网站优化公司；服务项目有网站建设等