静态网页设计布局模式，网页设计静态页面

静态网页制作步骤

编辑文档与超级连接 经过上面的几个步骤之后，一切准备工作都已经就绪，现在可以像装箱一样把收集到的资料及制作的组件放到页面布局中为它们指定的位置上了。发布站点 站点的发布 网站发布就是把网站上传到因特网上，以提供浏览者浏览。站点的维护 站点发布之后还要经常对站点进行维护。

在Dreamveaver中“文件—新建—常规—基本页—HTML”，这就建好了一个页面，英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。

静态网页制作步骤：第一步：制作一个静态网页之前，我们需要先制作一个网页1：1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。

网页的布局类型有哪些?

区块型 为了网站优化的效果，目前区块型布局现在出现非常频繁，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。但这种布局有一个缺点，就是由于片面固定，各区域很难根据其中的内容的多少而调整大小，因此该布局不太适用与那些区域内容长度经常变化的网页。

“国”字型拐角型这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

左右框架型是一种左右为分别两页的框架结构布局，这种类型业非常清晰且一幕了然。一般左侧是导航链接，在最上方有个小标题或标志；右侧则是正文。上下框架型 上下框架型是一种上下为分别两页的框架结构布局。一般上方是导航链接，下方则是正文。

静态网页设计制作中的布局模式

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、POP布局是一种艺术化、时尚化的网页布局方式。设计通常以一幅精美的海报图片作为版面的主体。[8]闪光灯布局 Flash布局是指以一个或多个FLASH作为页面主体的网页布局。在这种布局中，大部分甚至整个页面都是Flash。网页布局提示 首先要定位网站的主题。

3、静态布局 在传统的网页设计中，网页上所有元素的大小都是px。布局特征 无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。

4、对称对比型 对称对比型采取左右或上下对称的布局，一半深色，一半浅色，一般用于设计型网站。而其优点是视觉冲击力强，缺点是将两部分进行有机结合较难。变化型 即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

静态、自适应、流式、响应式四种网页布局有什么区别?

1、静态布局 给页面元素设置固定的宽度和高度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。优点：简单方便，不存在兼容问题。缺点：网页无法根据用户设备屏幕的宽度进行自适应。流式布局 也叫100%布局。宽度单位为百分比。

2、不同点是响应式的模板 在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式。而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。

3、流式布局 流式布局使用的是百分比，这位网页提供了很强的可塑性和流动性，与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。

4、——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

5、自适应布局 ：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用 @media媒体查询 技术。流式布局 ：元素的宽高用 百分比 做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

网页设计的布局有哪几种?

网页布局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。

对称对比型 对称对比型采取左右或上下对称的布局，一半深色，一半浅色，一般用于设计型网站。而其优点是视觉冲击力强，缺点是将两部分进行有机结合较难。变化型 即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

网页布局方式还有：一列布局 一般都是固定的宽高，设置margin ： 0 auto来水平居中，用于界面显著标题的展示等。两列布局 说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。设置左左浮动，或设置左右浮动。

“t”结构布局所谓“t”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“t”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。

关于静态网页设计布局模式和网页设计静态页面的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。