Godzilla. 2018-07-20 网站建设

实用！分享上海网页制作中常用的一些技术要点

随着现在社会的发展，越来越多的商家和企业都开始做起了网站建设，因为互联网的快速发展，网站建设已经成为当下经济发展必不可需的一个重要内容了。那网页制作作为网站建设中最重要的一环，在网页设计中，既要展现网站独特的创意，也要凸显整个网页。因此，设计师在进行网页制作时，要注意的和掌握的技术要点也有很多。那么，下面上海网页制作就来分享一些在网页制作中常用的技术要点。

　　1、XHTML和CSS文件注释

　　上海网页制作文件注释必不可少，但是要适可而止。注释太多回增大文件的大小，受带宽影响，用户在浏览网页时增加了等待时间，造成不好的用户体验。网站在上线前先要在测试服务器上进行测试，测试好没问题后，将相关的CSS文件、Javascript文件先删除注释，然后进行压缩。这些文件的压缩可以利用下载相关工具实现，也可以使用在线压缩工具实现。

　　2、清除浮动的方法

　　（1）在结尾出加空div标签clear:both

　　（2)在父级div顶一overflow：hidden

　　（3）在父级div顶一味蕾：after和zoom

　　3、块级元素和行内元素

　　上海网页制作块级元素是指这些元素显示为一块内容。与之相反，行内元素是指这些元素的内容显示在行中。每个块级元素都是从一个新行开始显示，而且其后的元素也是另起一行进行显示。而行内元素一般显示在块级元素里面。

　　一般的块级元素由<p>、<h1>~<h6>、<ul><ol><li>、<table>、<form>、<div>和<body>等。而内联元素有<input>、<a>、<img>、<span>等。

　　块级元素和行内元素之间可以通过设置display的值来进行转换。将diaplay的值设置为block，可以让行内元素表现得像块级元素一样。也可以通过把display得值设置为inline，让块级元素表现得跟行内元素一样。

　　4、CSS文档流

　　上海网页制作网页元素按照XHTML结构自上而下，从左向右一行一行得布局，叫做CSS文档流。

　　5、label标签中得for属性

　　当用户选择label标签时，浏览器回自动将焦点转到和标签相关的表单元素上。

　　6、zoom:1的作用

　　一般是为了解决IE6下样式不兼容的问题。

　　HasLayout是IE渲染引擎的一个内部组成部分。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了HasLayout的属性，属性值可以为true或false。当一个元素的HasLayout属性值为true时，我们说这个元素有一个布局（layout）。

　　大部分的IE显示错误，都可以通过激发元素的HasLayout属性来修正。可以通过设置一些CSS属性来激发元素的HasLayout属性，使其“拥有布局”。在IE 6中就可以通过zoom：1来激发元素的HasLayout。

　　7、CSS Sprites技术利弊

　　利：减少对服务器的请求数量，进而加快页面加载速度。

　　弊：（1）测算每个背景单元的精确位置，很繁琐；（2）如果页面背景有少许改动，一般就要改合并的图片。

　　8、marquee标签

　　标签里面是滚动文字的内容

　　9、word-spacing

　　上海网页制作修改字间距。简单地说，课室是任何非空白字符组成地串，并由某种空白符包围。所以象形文字是无法指定字间隔地。除非字之间有空格。因此，这个属性主要是针对英文单词地，要使其对中文起作用，需要在中文之间加空格。肯恩那个设计者认为两词之间没空格就是一个词。

　　10、display:inline-block;的使用方法

　　上海网站制作公司在做导航条的时候，一般会用到ul-li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。但是如果当行中li的数目不确定，并且又需要导航中的文字在页面中居中显示时，用这种方法就不太方便了，因为每次修改当行中li的数目量或文字时都需要调整ul或者第一个li标签的padding或者margin属性值。

　　还有一种方法就是设置li为“display：inline-block;”这样就可以达到同样的效果，而且无论有几个li标签或者li中的文字如何变化，只要设置ul中的text-align属性的值为center就可以实现ul中的所有文字水平居中显示。

　　IE6、IE7块级元素不识别inline-block，对于行内元素不存在兼容问题。可以用*display：inline；*zoom：1来代替。

　　11、网页设计稿中特殊字体的处理

　　网页浏览者在看网页时使用自己电脑上的字库来显示字体的，如果在制作网页时用了特殊的字体，必须保证浏览网页的用户的电脑上也有这样的字库才能看到相同的效果，如果用户的电脑上没有所定义的字体，那么它会自动用系统默认字体来显示，一般中文的默认字体都是宋体。特殊字体只能做成图片。

　　CSS中常用的字体包括：宋体、黑体、微软雅黑、Arial、verdana、serif。

　　12、切图时应该保存成那种图片格式

　　（1）JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。对于写实的摄影图片或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。根据经验，在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用JPG的图片格式保存。

　　（2）对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。或者具备较大亮度差异以及强烈对比的简单图像适合使用PNG格式进行存储。

　　（3）PNG8支持1为布尔透明通道，所谓布尔透明值得是要么完全透明要么完全不透明。而PNG24则支持8为的Alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度。

　　（4）对于小图标或小动画，可以保存成gif格式。

　　13、制作中需要注意的问题——z-index属性

　　1、z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

　　2、该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

　　14、兼容问题的技巧

　　（1）写DTD声明。

　　（2）为网页样式引入CSS重置代码，重置各浏览器默认属性值。

　　（3）同时为一个元素写float和margin-left或margin-right时，同时设置display：inline，为解决IE6双边距问题。

　　（4）给元素设置高度后，同时设置overflow：hedden，避免在IE6中高度继续扩展的问题。

　　（5）对于文本，在使用margin-left、padding-left、margin-top、padding-top之前有限考虑是否可用text-indent和line-height代替，因为计算尺寸的代价相对来说要大些。