Ⅰ web界面设计规范有哪些
一、网页尺寸
制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。
二、网页字体
字体设计的总原则是：可辨识性和易读性。
网页的文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体，英文则建议使用arial无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。
Ⅱ web布局有包括哪些
网页基本布局方式：
（1）流式布局
Fluid
流布局与固定宽度布局基本不同点
就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。
（2）固定布局 Fixed
在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px。过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以
整除
3，4，5，6，8，10，12和15。在今天，在
web开发
中还是比较普遍使用固定宽度布局的，因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势，固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。
（3）弹性布局
Elastic
弹性布局跟流布局很像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em或者rem，避免了根据px局部在高分辨率下几乎无法辨识的缺点，又相对于%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，需要一段时间适应而且不易从其他布局转换过来。
（4）伸缩
Flex
box
使用
css3
Flex系列属性进行相对布局。对于
富媒体
和复杂排版的支持非常大，但是存在兼容性问题。
（5）响应式
使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。
Ⅲ html布局的几种方式有
1、HTML布局主要有两种方式，一种是表格布局，一种是DIV布局。
2、HTML表格布局是WEB1.0时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单。
3、HTML DIV布局是WEB2.0时代主要使用的布局方式，优点是符合W3C标准，载入速度比较快，也比较便于做结构分离。
4、现在一般都是提倡使用DIV布局，但也不是说就淘汰表格布局了，视具体的场景需要，在很多场景中都是两种混合使用的。
5、希望对你有帮助。
Ⅳ 网站前端开发常用的布局方式有哪些
实现网页布局的方式方法比较多，布局方式可以大概分为这几类。
布局种类：
1、table布局（网页的兴起，1995）
2、Flash布局（自由的黄金时代，1996）
3、div+css（CSS的诞生，1998）
4、栅格与响应式（移动端的兴起，2007与2010）
当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。
Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。
Ⅳ WEB前端怎么布局
在谈WEB前端怎么布局前，我们先梳理前端的布局类型，具体有以下几种：
1.静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2.流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
3.自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4.响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
那么我们如何布局呢？通过以下几点来选择布局。
1.如果只做电脑端，最好的选择是静态布局。
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，通过一份css+一份js调节font-size就搞定。
3.如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
Ⅵ web的标准包括那些组成部分
1.什么是web标准？
首先要明确一个概念。我们本书讲的web标准，不是指XML，而是指为了实现大量HTML信息向XML标准的过渡，W3C和ECMA制定的一系列的技术规范，目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web标准不仅仅是一个规范，而是一系列规范的总称。
按这些规范制作的网页，符合XML格式规范，内容与表现相分离，将使你的页面数据在以后可以被分享、交换和重用。
下面，让我们一起了解一些重要的基础知识。如果你已经掌握，可以跳过直接阅读第二节
。
2. 什么是w3c？
W3C是“World Wide Web Consortium”的缩写，中文称万维网组织。是一个专注于“领导和发展web技术”的国际工业行业协会。它由万维网发明者Time Berners-Lee领导，成立与1994年。W3C已经有超过500家的会员--包括微软、美国在线(Netscape的母公司)、苹果电脑、 Adobe、Macromedia、SUN 以及各类主流硬件、软件制造商和电信公司。学会主要研究由三家学术机构主理--美国麻省理工学院(MIT)、法国的欧洲信息与数学研究论坛 (ERCIM)、日本的应庆大学(KEIO)。
W3C主要工作是研究和制定开放的规范(事实上的标准)，以便提高web相关产品的互用性。W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范 (Recommendations)”发布。更多的信息您可以访问W3C的网站：www.w3.org
web标准的优势
5.1 易用性
用web标准制作的页面，对搜索引擎更加“透明”，因为良好清晰的结构使得搜索引擎能够方便的判断与评估信息，从而建立更精确的索引。按web标准制作的页面也可以在更老版本的浏览器中正常显示基本结构，即使CSS/XSL样式无法解析，它也能显示出完整的信息和结构。
符合web标准的页面也很容易被转换成其他格式文档，例如数据库或者word格式,也容易被移植到新的系统--硬件或者软件系统，比如网络电视、PDA等等。这是XML天生具有的优势。
符合web标准的页面也具有天生的“易用性(accessibility)”,不仅仅是普通浏览器可以阅读，那些有残疾的人们也可以通过盲人浏览器、声音阅读器正常使用。
5.2 向后兼容性
使用web标准建立的页面，将在未来的新浏览器或者新网络设备中很好的工作。我们只要修改CSS或者XSL定制相应的表现形式就可以了。
关于web标准的好处
1.科技在进步，网络带宽越来越大，速度越来也快，节省那点字节有意义吗？
web标准的好处之一是：用web标准制作的页面代码量小，可以节省带宽。这只是web标准附带的好处，因为DIV的结构本身就比TABLE简单，TABLE布局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页面用DIV+CSS比用TABLE布局的节省2/3的代码。这是web标准天生的好处。至于节省带宽的意义并不主要针对普通用户，而主要针对网站经营者，特别是中大型网站，类似新浪、网易这样的站点。一个新闻首页从500K缩小到170k，假设一天的pageview是3000万(保守数字)，那么节省的服务器流量就是330k*30000000=9440G，这个成本的节约是可观的。
2.我需要考虑残障人士（盲人和弱视）吗？
为残障人士提供网络浏览方便是美国及欧洲一些国家的法律规定，由于web标准页面的清晰结构、语义完整，一些相关设备能很容易的正确提取信息给残障人士。因此，方便盲人阅读信息也成为web标准的天生好处之一。至于有人说中国目前还有很多人为解决温饱发愁，哪有时间考虑残障人士。这是社会文明和社会道德问题，不在本书讨论范畴。但如果你页面按web标准制作了，就能达到这个效果，何乐而不为呢？
关于浏览器兼容
1.我不需要关心web标准，IE占有99%的市场，我做的页面只要IE能看就可以了。
“以用户为核心”通常都是反对web标准者的档箭牌，实际上这是虚伪的“以用户为核心”。你不能保证IE永远是垄断浏览器市场，你也不能保证IE不做任何改变(事实上，微软的IE7已经开始改善对 web标准的支持)。坚持用html+table布局制作的页面将是“死”的信息，不方便搜索，无法重用与共享，从长远来讲，这才是对用户最大的伤害。
2.为什么web标准的页面兼容性并不好？
我们说web标准的优势是兼容性好，这个兼容是指向后兼容，向新浏览器、新设备兼容。对已有的浏览器来说，因为它们对web标准的支持程度不一样，因此会出现不同浏览器下页面变形的情况。我们必须采用一些"hack"技巧来实现不同浏览器的兼容。这是无奈、也是不可避免的，是web技术发展必然要经历的一个过程，是我们向XML过渡必须克服的一个困难。
我想你和我一样，都关心WEB的未来会是怎么样的，下一轮的新技术热点在什么方向。其实，要回答这个问题，没有谁比W3C更有权威了。只要看看W3C在做什么，正在研究什么规范就知道WEB的走向和趋势了。
W3C明确地告诉我们：XML是未来的趋势毋庸置疑，开放和共享是互联网的精神和根本动力。
蒂姆.贝纳斯-李（Tim Berners-Lee），W3C领导人，万维网之父，说到：XML提供了信息交换的手段，但这仅仅只是开始。我们的目标是web的语义化，即：使得web上的信息内容更加容易理解、更便于交换和共享，RDF和OWL语言将在这方面提供更强大的支持。
web技术即将迎接新一轮的变革和发展，如果你还在犹豫是不是需要学习web标准，那么你将失去这次机会。
Ⅶ 网页的布局类型有哪些
1、“国”字型
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
2、拐角型
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、封面型
这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
5、“T”结构布局
所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。
如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。
6、“口”型布局
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。
缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
7、“三”型布局
这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。
8、 对称对比布局
顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。
9、POP布局
POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。
网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。
网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。
(7)web布局包括什么扩展阅读
网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。
专业的网页设计，需要经历以下几个阶段：
1、需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。
2、以业务目标为中心进行功能策划，制作出栏目结构关系图。
3、以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。
4、以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。
5、根据用户反馈，进行页面设计调整，以达到最优效果。
Ⅷ web前端几种常见的网页布局
现在的网页差不多都采用分列布局，
常见的有单列布局（如网络首页）、双列布局、三列布局和混合布局，超过三列的布局很少见。
最简单的要数单列布局了，这种布局适合各种搜索引擎主页，干净的界面和较少的干扰信息给用户较好的体验。
Ⅸ 网页制作的结构布局有哪些
学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？
对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：
一、自上而下原则
因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。
二、从左至右原则
在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。
三、一像素原则
这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。
在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，图片和文字其实是属于一个整体，文字是对图片的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：
我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。
说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景图片，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。
那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者最容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。
另外，有些地方可能会有一部分小图片或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。