网站开发指南：WEB网页设计的基础知识有哪些？
2021-01-30

网站开发指南：WEB网页设计的基础知识有哪些？

WEB页面结构网页设计是一个很基础的设计规划，它不仅会作用css代码的价值质量，还会对网页页面功能的扩展和代码的深化出现一定的作用。因此在设计规划步骤过程中，设计规划师一定要掌握基本的WEB设计规划基础知识，同时还要有很清晰的思路，并且要打算周全，这样才能使页面结构网页设计不会处处受限，才会使设计规划出的网页页面功能尤其优越。

前端网站页面的任务很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很关键的一点还要细心。下面我们就讲讲网站页面建设开发，建设开发中需要事项和常遇到的疑问吧。

首先剖析结果效果图，细节点上是不是是否和站内样式风格统一;设计规划的因素是不是是否便于完成;因素是不是是否能复用。有疑问及时和商品产品人员进行交流沟通，防止建设开发步骤过程中的频繁调整修改，作用工期和代码的价值质量。这些都是为更好的部署布局和精简css代码做的必要任务。

合理部署布局很关键，如同大厦的地基，大厦的高度再于地基是不是是否牢固，合理的部署布局能有更好的扩展性。模版结构要尽量简洁，尽量降低模版结构中的嵌套，不要为了完成某种样式增加添加多余的空tag标签。

tag标签尽量语义化，满足让代码尤其清晰。目前html5增加添加了更多的语义化tag标签，像header，section等，大胆的运用吧。虽然html5对于tag标签的相互嵌套体现了很好的包容性，即使tag标签不存在闭合，或是inline因素中包含一堆block因素也不会有疑问，但是为了培养成良好的习惯依然是尽量做到严格遵循xhtml的规范。

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

网站页面中推选的两种注释

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

背景图是通过样式在网站页面上输出，会在网站页面中出现请求，延长网站页面的渲染时间，为明白决这个疑问，能够把类似的image图片推进合并，降低请求数。在推进合图的时候，尽量把色彩相近的图标放到一起，能够降低image图片的大小。

网站页面中直接引用的image图片尽也许少的缩放，十分作用网站页面的渲染相应速度;尽也许少的运用前端技能控制图像表现大小，对用户使用者不可见的部分就是浪费带宽，浪费钱，网站页面的渲染相应速度也肯定会受到作用，影响访问者体验;在清楚了解image图片宽高的情景概况下尽量在img中加上宽高，降低网站页面reflow造成的相应速度损耗。

静态image图片一定要小，提议存成png8格式，在不作用image图片的表现价值质量下，能够选取128色或是更低的色彩输出image图片。当然有的色调比较丰富的image图片，存成jpg格式的更小，难道你会非选png的吗?存储完后image图片还能用少许压缩工具推进无损压缩(如：PNGGauntlet)。

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

image图片有几点需要留意

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

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

3、防止过小的背景图平铺。

4、尽量将image图片上的纯文本文字提取出来用代码完成，便于image图片的复用和日后文案的调整修改;

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清除浮动的运用，防止运用无意义的空tag标签清除浮动，通常站内运用clearfix来清除浮动。

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

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

查看浏览器的兼容疑问是网站页面建设开发的永衡话题。模版结构的合理和简洁在很大程度上能够降低兼容性的bug,但是ie的特立独行又不可防止有少许兼容性疑问。