网页设计的排版布局 第1篇
(1）GIF：是Internet上应用最广泛的图像文件格式之一，是一种索引颜色的图像格式，此格式在网页中使用较多。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。
（2）JPEG：JPEG 是Internet 上应用最广泛的图像文件格式之一，适用于摄影或连续色调图像。JPEG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG 文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
（3）PNG：PNG是一种新型的无专利权限的图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
(1)高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。 (2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。 (3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件与A文件夹在同一目录下，那么文件在目录A下的B文件夹中，它对于文件的相对路径则为 A/B/，
在HTML中，用标签在网页中添加图像，图像是以嵌人的方式添加到网页中的图像标签的格式:
其中src 是必需的属性。需要注意的是，在 width 和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致，那么显示的图像会相对于原图变形或失真。
有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。
在HTML中，通过img标签的属性width和height来调整图像大小，其目的是通过图的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置 width 和 height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示。 width和 height 的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。例如，设置宽松羽绒服面包服图像的宽度和高度。代码如下: < img src =_ images/waitao. jpg_ width =_ 150_ height=_174_>
在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border属性为图像添加边框，添加边框后的图像显得更醒目、美观。 border属性的值用数字表示，单位为像素;默认情况下图像没有边框，即border=0;图像边框的颜色不可调整，默认为黑色;当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。
图像也可以作为超链接热点单机图像则跳转到被链接的文本或其他的文件语法：
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口那么图像将在整个浏览器窗口进行复制。格式:
网页设计的排版布局 第2篇
所谓_T_结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变_T_结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人_看之无味_。
网页设计的排版布局 第3篇
当我们接触到一个新的网页时，我们通常会立即快速浏览，以了解其大致内容。这种快速扫读，也被称为略读，通常是以Z字形或之字形进行。我们的视线从左上角移动到右上角，然后向下移到左下角，最后再移到右边。Z型网站布局就是利用这种阅读习惯，在Z形路径上分布重要信息。
在这种网页布局设计类型中，Logo通常被放置在主页的左上角，以便首先引起注意。在它对面的右上角，则常常设置导航菜单和醒目的行动召唤按钮。
Z型对角线部分，从页面顶部跨越到底部，是应该放置最吸引人注意力的信息的地方，也是你可以通过排版和强调来制造影响力的地方。这可以通过使用吸引人的视觉效果和一行简洁的文字来实现，这些文字能够概括出网站的主题。
在Z型模式的底部，用户应该能找到你最重要的行动召唤（CTA）。无论你是在期待购买产品还是预定服务，现在是时候让访问者参与并鼓励他们采取行动了。
Z型网页布局设计非常适合视觉化程度高的页面，并且通常特定转化目标的落地页都非常适合。
F型布局和Z型布局类似，这种网页布局设计也基于常见的页面扫描行为。对于文本较多的网页，我们通常以F形方式快速浏览或阅读信息。这意味着页面的顶部水平部分会吸引我们的大部分注意力，然后我们的视线会从那里垂直向下移动，左侧通常作为我们的焦点。
使用F型网页布局时，要确保在页面的上半部分投入更多资源，因为访问者可能会在那里停留更长时间。这通常包括标题、副标题和特色图片——能够以引人入胜的方式介绍网站其余部分的内容。你还可以包括锚文本来引导访问者获取信息，并使用导航菜单来引导他们到网站最相关的部分。
页面左侧的F型布局垂直线可以帮助使文本更具吸引力。这可以通过使用图像、图标、颜色调色板或格式化元素（如项目符号或编号）来实现。
F型网页布局设计适合主要围绕文本展开的网站。例如，在创建博客时，这种网站布局适用于主页和单个博客帖子页面。
全屏图像网页布局通过将一张超大的图片放在页面中心，可以营造出引人入目和沉浸式的主页设计。大型媒体特性可以在瞬间传达出你是谁、你做什么的信息。这种布局的优点是它在移动设备上看起来同样出色。
你使用的视觉元素可以是照片、插图或视频等任何形式。无论如何，它都应该是高质量的，并且与你的服务、产品或整体感觉相关，以便充分利用这种布局。
网页全屏图像还应配以一行简短的文字，以进一步解释网站的主题。精心设计一个有力的标题或一个吸引人的口号来介绍你作为一个商业实体提供了什么，激发访问者更深入地探索。
全屏图像的网页布局设计类型非常适合希望突出特定领域或产品，并且拥有丰富视觉素材库的企业。例如，摄影网站会骄傲地展示新系列或销售风格的照片，而婚礼网站则可以通过展示一张幸福夫妇的照片给人留下温馨印象。
分屏网页布局通过将屏幕垂直地一分为二，形成了完美的对称平衡，避免了负空间的出现。这种整齐的两部分划分使得每个部分都能表达一个完全不同的概念，或者从两个不同角度支持同一个概念。
例如，在这里展示的登录页网页布局模板中，右侧以引人注目的视觉效果展现了公司的工作环节，左侧则是文本和表单形式引导用户填写邮箱信息。这种布局使得两侧能够完全互补，而不是争抢注意力。在需要让网站访问者在两个对立选项间做出选择的情况下，这种设计也同样适用，比如在电商网站中“男士”和“女士”的分类。
为了最大化利用分屏布局，你可以考虑加入一些动态效果，比如让屏幕的每一半表现得稍微不同。例如，你可以在屏幕的一侧使用视差滚动效果。另一个选择是将这种布局延伸到你设计的第二个页面区域，但是交换屏幕两侧的内容以增加视觉趣味性。
总之，分屏网页布局设计非常适合那些提供两种明显不同类型内容的网站，或者希望将文字和图像均匀结合的网站。根据年龄、性别或行为对用户进行分类的在线商店非常适合使用这种布局。
不对称的网页布局与分屏布局类似，也将网站内容进行了划分，但在这种布局中，两部分的大小和重要性并不相等。这种从一侧到另一侧的非对称平衡变化产生了视觉动态效果，使整个设计感觉更为活跃。
通过在页面上非均匀地分布规模、颜色、空间和宽度，可以吸引访问者关注特定元素。要在你自己的网站布局中实现这一点，你需要给某些元素更多的视觉重点——使它们更大、更粗或更亮——从而成为焦点。
确定你希望突出显示哪部分内容，如产品图片、引导注册的按钮等。然后，通过使用高颜色对比度、放大比例和其他类型的视觉强调来使其突出。
非对称网页布局设计非常适合追求现代和创新外观，并且希望提高用户参与度的网站。例如，商业网站或设计机构的在线作品集就是很好的例子。