网页设计的注意事项

设计页面时，一定要留心页面版式的合理性。一个合理的版式和让人一望而知的页面能够给人带来舒服的感受，并且会让人情愿花时间去了解。下面介绍网页设计的注意事项，希望可以帮助到大家。

一、合理的页面版式

设计页面时，一定要留心页面版式的合理性。一个合理的版式和让人一望而知的页面能够给人带来舒服的感受，并且会让人情愿花时间去了解。注重版式的设计，不要板块冗繁;页面版式的分配，注重调和简练。合理地分配设计页面中的版式，出现一个新鲜的页面。

二、舒缓的颜色设计

不管哪个职业的页面，在设计进程中都不要一味地寻求视觉影响，做出奇特的颜色分配。在设计页面的进程中，设计者一定要注重页面颜色的分配，多用暖色调，调和分配冷暖色。只要颜色满意调和、舒缓，才能够让人有持续逗留的想法。

三、新颖的页面内容

页面中的内容，犹如人的魂灵不可或缺。设计一个页面，一定都是想要宣传某个公司或产品，而页面中的内容更是不能够缺少的。如今，想要用内容吸引用户，就一定需要有新颖的内容，从文字或许其他方式的内容出发，注重独创和内容的新颖。

四、减少运用格外字符

设计页面时，尽量少用格外字符。在不一样的计算机或许不一样的平台中，看到的情况有时候有一些不一样，假如运用了格外字符，很可能会有比照差劲的展现作用，所以应当尽量减少格外字符的运用。

如今，网页制作的方式有很多种，如果是通过自助建站平台来完成制作的话，那么企业只需要一个账号，加上几分钟的傻瓜式操作就能完成，网页的精美度以及安全性等方面都能得到保障。但如果企业想要自己建站的话，就一定要注意下面这些重要的注意事项了。

1.慎防木马源码

虽然现在网上有很多可以免费下载的网站源码，但是其安全性还是令人怀疑的，即使是花钱购买的源码，企业也要仔细分析程序源码和数据库，检查其是否有二次加密，较好还能进行md5加密，这样就能大大较少木马源码的顾虑，有效防止黑客入侵。

2.清除网站死链

如果用户点击进入网页，却发现一片空白什么都看不到，那么用户体验就会瞬间跌倒谷底。不管是自助建站还是代码建站，都有可能面临这个问题，这个需要企业自己细心管理，及时发现并及时清除。另外，建议代码建站的企业尽量使用动态语言来设计网页，而且在解析前就要检查有无死链。

3.注重导航分配

导航是每个网站的重要的栏目，通常它都是以横向排布的方式分布在首页顶部，但是如果网站内容又多有复杂的话，就不适合采用横向导航的设计形式了，垂直导航倒是一个不错的考虑。但是不管怎么，企业都一定要保证内部链接能够合理分配，需要的时候可以在新闻等文章栏目中添加相关文章，方便用户快速找到需要的内容。

4.提高视觉冲击力

企业在设计网页时，除了美观度，还要提高页面的视觉冲击力。不过，现在网上的很多网站模板的页面质量的确不敢恭维，所以建议企业较好不要直接复制网上的作品，原创的才是较好的，但是也可以适当参考一些优秀的案例，把网页设计做到较好。

其实，综合所有方面的因素，企业利用自助建站平台来进行建站才是更方便、更高效、更经济的建站方式，这样以上这些问题都不再是问题了。

一、 background背景图像

由于千篇一律的单色背景早已产生了视觉疲劳，因此出现了花纹背景，例如用点、线、面组成的背景，通常这种背景都是做成10*10px (或其它)的方形大小。再受韩潮影响，目前应用广泛的是渐变背景，由于分辨率的关系，通常采用上下渐变，左右渐变不可取。问题来了，上下渐变在Photoshop(做网页设计的常用软件)中只需要简单的使用渐变工具拉动一下即可，但是作为网页设计师的你有没有想过在页面中这种背景应该如何去做?分成上下2个背景，或者做一个超级长估计要在3000px以上的背景?因此在做这种背景的时候，需要仔细考虑页面该如何去生成。

二、 适应分辨率

为适应分辨率，最佳方法应该是整个页面采用100%自适应表格，这种网站让800*600及以上分辨率的彩显都能整屏幕最佳效果浏览，这样的制作方法在为数不多的几个网站上出现过。但是这种方法必然需要最少的图片及最多的216安全色及最精简的表格。目前这样的网站不怎么能满足客户的设计要求。

在国内，网站通常都在750-780px的宽度之间，这样做的目的是为了适应800*600及以上分辨率的彩显浏览网站。OK，矛盾出现了，中间是780px的宽度，但是通常设计师会加上描边或者投影的效果，做为设计师的你，有没有把这个尺寸算进去?更有甚者，中间的内容是780px 两边采用长达30px的投影，再加上前面第一点提到的渐变背景，好了，你想让生成页面的工作人员自杀吗?请你在做这样的设计时候为后面的生成页面工作考虑一下。

三、 网页216安全色

所谓网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色，也就是说这些颜色在任何用户显示设备上的显示效果都是相同的。所以使用216网页安全色进行网页设计可以最大限度避免颜色失真的问题。

但是通常216个色彩不怎么能满足网页设计师的设计，随便一个渐变已经超出了这个范围，矛盾又出现了。请尽量将非网页完全色做在图片上，也就是说将非网页安全色做成图片，而将安全色做为代码，这样尽可能使网站拥有美观及快速。如果碰到一个网页设计师的设计作品，从上到下、从内到外、从文字到图片都没有1个安全色，你会怎么做?我昨天就遇到了。难道让我把所有的文字都做成图片?那这个网站还需要更新吗?程序员又该如何做?如果你是这样设计网站的，请改改这种毛病。

四、 象素与羽化

象素和羽化应用都非常广泛，但是某些地方却产生了矛盾。举个例子，在一个带有图片背景的表格上，有一个翻转图片的按钮(鼠标经过变换图片)，而这个按钮并不需要一定做成方形，为了整体效果，你也许会做成圆角，这个圆角如果做成象素，那么按钮可以做成方形透明背景的GIF，这样不会有任何问题，但作为设计师的你，也许会做成羽化的圆角，问题出现了，这个按钮是一定要用JPG或者非透明背景的GIF了，那么一旦需要更改此表格的背景色，这个按钮的两张图片也需要更改。所以在设计到圆角这种效果的时候，用象素还是用羽化，你要考虑清楚了。

1、将网页修改为百分比布局

当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxx px;而是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷ 上下文元素宽度 = 百分比宽度

2、要阻止移动浏览器自动调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

3、用CSS如何控制网页中图片自适应大小

在设计自适应网站页面时图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢?

4、用em替换px

目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

5、要主要流动布局(fluid grid)的使用

“流动布局”指的是各个区块的位置都浮动，不是固定不变的。

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}

这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位(position:absolute)的使用，也要非常小心。