WEB网页设计的基础知识有哪些？

好酷屋教程网小编为您收集和整理了WEB网页设计的基础知识有哪些？的相关教程：WEB网页设计是一个很基础的设计，它不仅会影响css代码的质量，还会对网页功能的扩展和代码的深化产生一定的影响。因此在设计过程中，设计师一定要掌握基本的WEB设计基础知识，同时还要有很清晰的思路，并且

　　WEB网页设计是一个很基础的设计，它不仅会影响css代码的质量，还会对网页功能的扩展和代码的深化产生一定的影响。因此在设计过程中，设计师一定要掌握基本的WEB设计基础知识，同时还要有很清晰的思路，并且要考虑周全，这样才能使网页设计不会处处受限，才会使设计出的网页功能更加优越。

　　前端页面的工作很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很重要的一点还要细心。下面我们就讲讲页面开发，开发中需要事项和常遇到的问题吧。

　　首先分析效果图，细节上是否和站内风格统一;设计的元素是否便于实现;元素是否能复用。有问题及时和产品人员进行沟通，避免开发过程中的频繁修改，影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。

　　合理布局很重要，如同大厦的地基，大厦的高度再于地基是否牢固，合理的布局能有更好的扩展性。结构要尽量简洁，尽量减少结构中的嵌套，不要为了实现某种样式添加多余的空标签。

　　标签尽量语义化，能够让代码更加清晰。现在html5添加了更多的语义化标签，像header，section等，大胆的使用吧。虽然html5对于标签的相互嵌套体现了很好的包容性，即使标签没有闭合，或是inline元素中包含一堆block元素也不会有问题，但是为了养成良好的习惯还是尽量做到严格遵循xhtml的规范。

　　尽量少在页面写inline css,会使页面代码臃肿，不便于维护，有悖于样式和结构相分离的初衷。

　　页面中推荐的两种注释

　　另一个总和前端页面开发打交道的就是图片。图片分为两种，一种是cssimage引用，另一种纯Image的页面引用。

　　背景图是通过样式在页面上输出，会在页面中产生请求，延长页面的渲染时间，为了解决这个问题，可以把类似的图片进行合并，减少请求数。在进行合图的时候，尽量把颜色相近的图标放到一起，可以减少图片的大小。

　　页面中直接引用的图片尽可能少的缩放，非常影响页面的渲染速度;尽可能少的使用前端技术控制图像显示大小，对用户不可见的部分就是浪费带宽，浪费钱，页面的渲染速度也肯定会受到影响，影响用户体验;在知道图片宽高的情况下尽量在img中加上宽高，减少页面reflow造成的速度损耗。

　　静态图片一定要小，建议存成png8格式，在不影响图片的显示质量下，可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片，存成jpg格式的更小，难道你会非选png的吗?存储完后图片还能用一些压缩工具进行无损压缩(如：PNGGauntlet)。

　　对于图片来说小就是原则，为什么呢，给你算个帐，节约10K看不出什么，100个用户是1000K，10000个是100000K,那一亿个用户呢?全是白花花的银子啊!

　　图片有几点需要注意

　　1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。

　　2、如果你的工程已经上线，我们站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。

　　3、避免过小的背景图平铺。

　　4、尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改;

　　css主要说一下注意事项

　　1、class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。

　　2、CSS后代选择器性能：.a{} > .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便;

　　3、编码时尽可能使用缩写，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;

　　4、使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999em;来达到同样效果。

　　5、减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。

　　6、border:none;替换border:0;的写法;

　　7、使用css3的属性来代替阴影或是圆角的图片;

　　浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。

以上就是好酷屋教程网小编为您收集和整理的网页设计,标签,简介,知识相关内容，如果对您有帮助，请帮忙分享这篇文章^_^

本文来源： https://www.haoku5.com/shenghuo/63fc43724597a65bd50c50a9.html

相关推荐