网页设计怎么排版

在做网站时会遇到很多的问题，所以网页设计师通常要扮演多种角色，并且要掌握如何构建一个有效实用的网站布局知识。接下来小编告诉你网页设计怎么排版。

1.不要使用过多的字体

网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。

通常情况下，将字体家族的数量限制在最小数量(2个是很多，1个通常就够了)，整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。

而在中英文排版中，建议大家中文使用标准中文字体，而英文、数字和字符使用标准的英文字体。以下面的图为例，是否可以对比处那个美观一些。

2.尽量使用标准字体

在Google Web Font或者Typekit，和国内的“有字库”的字体嵌入式服务有很多有趣的字体，对于国内设计师来说，痛苦的是中文字体会很大，一个字体动则几兆，十几兆的，这样用户在会增加用户浏览网站的载入时间;反之英文字体26个字母大小写，加数字标点符号一共几百k的字体是很容易在网页中使用的。

尽可能选择标准字体(近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体，如宋体)

不是每位用户都可以在终端上看到同一个字体，意味着你选择的适合的字体，用户有可能看不到。

用户更熟悉标准字体，因此他们可以更快的阅读

特殊的、并且少量的字体可以制作成.svg格式的素材嵌入Web使用

良好的排版会使用户更加关注内容本身，而不是字体的类型。

3.限制一行文字的长度

保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度，而是根据用户的可读性来定义。

太宽-会使得单行文字太长，读者的眼睛会难于专注文字。因为长时间阅读容易串行，大段的文本中很难找到正确的行。

太短-会使得用户的眼睛经常回到下一行文本，会打破读者的阅读节奏，长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号，使得读者没有读完当前这行就去跳到下一行阅读，可能会忽略潜在的重要词句。

4.选择用有多个字重并显示良好的字体

用户将通过不同屏幕分辨率的终端设备访问你的网站，大多数用户界面需要各种大小尺寸的文本(标题、副标题、文本、标注等等)。选择一款能够在不同屏幕分辨率的设备上运行良好的字体以保证它的不同尺寸的字体都具有极高可读性(Readability)和可用性(Usability)也是非常重要的。

1、如何用dreamweaver插入图像：

其实用Dreamweaver在网页里面插入图像真的很简单，只需要直接输入图像标签，或者直接点击插入图片按钮，即可实现。

插入图片后，我们还需要设置一下图片的属性，比如图片的宽度和高度，是否设置边框，以及图片文字说明等等，我们只需要鼠标在dw中点击图片，图片就会出现可任意拉动的伸缩框，我们可以随意拖动来设置图片大小，并且可以在属性栏中，显示出图片的信息。如果想要更加精确简便的设置，我们也可以直接在属性面板中，直接输入图像的尺寸大小，默认的单位是px也就是像素。之后就是如何调整图片的一个位置，这个比较简单，我们可以通过样式直接定义，也可以在当前位置，直接插入图片。

2、如何网页的背景：

一般网页的背景有两种格式，一个是直接用系统颜色来设置，在一个是直接用图片来作为网页背景，我们分别来说一下，

第一种：用颜色来设定网页的背景

最简便的方式，就是打开页面属性的对话框，我们点开网页背景色设置，就可以在颜色选框中随意选择自己的喜欢的颜色。

第二种：用图片来设置网页的背景

我们可以用到css样式，来设置网页背景，可以用一张图片直接作为背景，也可以用平铺整个页面，大家根据自己的情况来设定。

3、如何在Dreamweaver中处理图像：

上面我们说到可以给图片增加文字说明，作用就是在打开网页时，如果图片不能正常显示，可以用文字来代替，让用户哪怕看不到图片，也可以通过文字来了解图像的含义。可以在标签中加入alt属性来设置

1、html。html是编辑网页的基础。是最简单，最基础的，基本写几遍代码就能理解。

2、table布局。table布局属于html的内容，但是是html 的重点，学会用table布局网页，虽然table布局有点过时，但是很多时候很多用得到的地方。

3、divcss。这是网页设计的重点，写好了，网上95%你见到的页面都能自己写出来了，当然我说的是静态部分。divcss相对html 难度上升了一个等级，但是也不很难，只要耐心点研究也是可以学好的。float属性和绝对定位相对定位是重点。

4、JavaScript/jquery。Javascript是网页脚本语言，是实现网页动态效果的语言，使用JavaScript可以使网页更加酷炫，有吸引力。比如网页上的轮播图，弹窗等都是用Javascript/jquery实现的

5、html5css3响应式网页设计，是现在比较流行，也是一种趋势，html5css3做成的页面比较美观大气，也能适应各个终端。html5是趋势现在需求也是很大，学习好html5也是一个前端人员必备知识技能。

1. 优化图片，获得更好的页面加载速度 学习如何通过选择正确的格式，来优化网页图片，并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带，但仍然有人是拨号上网。此 外，虽然移动装置技术的普及，但移动装置却不一定支持像宽频一样的速度，图片文件的大小可能还是会延长网页的加载时间，有可能把用户赶走的。 这里有个选择适合的文件格式的技巧：如果图片是单色，那最好保存成PNG或者GIF格式;如果是连续性的色调(如照片)则最好保存成 JPG格式。

有很多的工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这个工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。

2. 保持干净和简单(即：简洁) 一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用 户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后 问自己以下问题： 是否真的需要这个设计么? 这是什么组件是做什么用，它如何协助用户浏览? 如果我突然删除这个组件，大多数人会希望它“回来”吗 ? 如何把这些元素和目标、消息和网站的宗旨互相结合? 此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。 要有创意，但还要保持简单。

3. 导航(条/栏)是最重要的设计 一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。 首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。 摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。 在没有CSS的状况下，你的导航设计应该也是可用的，这是基于文字基础的浏览器相容性。你可以尽量去嘲笑文字基础的浏览器，但它们在很多的移动设备上还是流行的。也许更为重要的是，对屏幕用户来说(99.99%的情况下)，没有CSS的导航功能照样可用访问。 在没有客户端技术情况下(如JavaScript或Flash)，导航功能应该容易进入和使用的。用户可能因安全性或公司政策而没有开启或安装。 所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。 哪怕只有一瞬间，用户也必定不会纳闷：“网站导航在哪里?” 最后，对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达最高层的页面(例如网站首页)。 最主要的目标就是你的网站导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。

4. 明智和有条理地使用字体 虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持CSS3)。 所以坚持使用网页安全字体。如果你不喜欢网页安全字体，可以考虑利用sIFR或Cufon逐步增强的网页设计。 保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。 也许一个网页设计师常常犯的错误就是使用不对的字体大小。因为我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不 舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他 类似视觉障碍的族群吧。

5. 理解色彩无障碍性 说完字体后，我们还需要指出使用正确颜色的重要性。例如，黑色文字在白色背景，如果使用高对比度，橙色背景上的红色文字会令你的眼睛感到紧张。

此外，使用一些对特殊形式色盲的用户友好的颜色(检查工具名为Vischeck，可以测试某些类型的色盲)。 有些色彩组合只适合运用在前景色的部分，而不适合做背景色。举个例子来说，深蓝色的文字搭配粉红色的背景与粉红色的文字搭配深蓝色的背景，都是使用两 种一样的颜色，但用在不同的部分则影响了它的可读性和阅读的舒适度。重要的是，不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。