2024年网页设计页面布局方式 篇1
我认为当前最流行的响应式布局，为什么呢？因为现在移动互联网与传统互联网并驾齐驱，你不可能每时每刻都使用电脑，但是你可以 将手机时刻待在身上，遇到一些问题可以直接用手机查看，想看某些网站也可以直接用手机打开。
可能一个网站的访问量主要集中于手机用户，手机显示的内容样式肯定不能与电脑浏览器一致，因为那样页面中内容太小，操作麻烦，对用户不友好，用户体验极差。
现在较常用的页面布局方式主要分为以下五种：
1.固定布局，静态布局
传统Web设计，网页上的所有元素的尺寸一律使用px作为单位，网页宽度一般为960px。网页布局始终按照最初写代码时的布局来显示，不受浏览器影响。如果浏览器宽度如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景2.流式布局
流式布局使用的是百分比，这位网页提供了很强的可塑性和流动性，与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。
3.自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式，例如宽度960px是一种样式，网页宽度1440px是另一种样式。改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。4.弹性布局
使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。这种布局中包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位。默认的文字大小16px就是1em。
5.响应式布局
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法通常采用了媒体查询+流式布局，使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。为不同终端的用户提供更加舒适的界面和更好的用户体验。
我是萌新程序猿，科技圈的事情欢迎邀请我来回答！
码了这么多字，点个赞关注下再走吧！！！
关注萌新程序猿（本人咯），了解更多IT以及程序猿的知识！！
2024年网页设计页面布局方式 篇2
网站的页面展示方式直接影响用户阅读网站的体验，一个合理的网站布局可以让用户在浏览网站时快速发现该网站的主体内容，相反一个不合理的网站布局，用户在浏览时就需要思考如何获取该页面的信息。在这过程中，我们总是会先快速浏览，再决定是否需要逗留，我们会快速的浏览每个网站（3-6秒），并迅速的判断是否需要在这个网站逗留。也就是说，如果一个网站没办法在6秒之内说服用户继续往下浏览，那么将很有可能失去这个用户。哪怕我们平时去逛商场也是一样的，我们进入一家店，会快速的扫描一下店内的产品，如果感觉没有适合的，我们会立刻转身就走。因为，每个人的时间都是宝贵的。
在布局首页之前我们需要先做一件事情，那就是分析用户的需求，一个好的网站布局一定是根据用户的需求来布局的，这里我就以一个案例来说明这个问题，例如我的网站是做仓库货架的，那么我们应该如何来分析需求呢？先给大家看一个效果图：
dreamweaver8是一款非常优秀的可视化网页设计布局软件。在日常开发当中，经常会遇到框架布局（如：上下布局，上左右布局；上下左右布局等等）。这里演示怎样插入布局框架，然后全部保存。
打开dreamweaver8，并新建一个html网页；
点击：插入菜单，然后选择HTML项；紧接着，在对应的下拉菜单选择框架，及所需要的布局（如：上方及左嵌套等）；
完整选择示例如下：为了区分，给每框架设置背景颜色；
在对应的框架区域，鼠标右键->页面属性->选择背景颜色->点击确定即可。
框架布局插入成功，如果还想加入其他设计布局，只需在相应的框架部位继续插入，修改布局即可。
最后保存框架：
点击文件菜单，选择保存全部；
保存后的网页，有Frameset的即是框架主页；
当然，如果你想全部手写代码提升自己的能力的话可以参考下《重蔚自留地：www.cwhello.com》