网页排版与布局

一 网站的层次结构
制作便于浏览页面的一个大敌就是视觉干扰,它包含两类:
a,混乱页面主次不清,所有东西都引人注目
b,背景干扰
1.把页面分割成清晰明确的不同区域很重要,因为可以使用户迅速判断出哪些区域应重点看,哪些可以放心地忽略.
2.创建清晰直观的页面层次结构;越重要越要突出;逻辑相关的内容视觉上也应该相关
3.用嵌套的方式形象地显示从属关系
在这里插入图片描述
二 网页的布局形式
整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,
游戏网网站夜微凉出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面评分为左右两个部分,但是这样会让人不着重点,还有的框架用的太多,影响力页面的整体性…
1.骨骼型
网页版式的骨骼型是一种规范的,理性的分割方法,类似于报刊的版式.
常见的骨骼型有竖向通栏,双栏,三栏,四栏和横向的通栏,双栏,三栏和四栏等.一般以竖向分栏为多.这种版式给人以和谐,理性的美.几种分栏方式结合使用,既理性,条理,又活泼而富有弹性.
在这里插入图片描述
题头加三栏式的设计方式:题头就是在最上行,左边是网站标题图案,右边是正文.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上下水平设计方式,它有适合信息量大,维护方便的特点,适合用于商业网站.
在这里插入图片描述
网站导航的设计-----清晰,简洁,一致
导航的意义
a,帮助用户寻找他要的东西
b,告诉用户他在哪里
c,更好的展现网站的内容
d,使浏览者对网站有信心
固定导航应包括下列最常用的5个元素:
1,网站标识
2,栏目
3,公共服务(帮助,网站地图,关于我们,联系我们等)
4,返回主页
5,搜索
在这里插入图片描述
2.满版型
页面以图像充满整版.主要以图像为诉求点,也可以将部分文字压置于图像之上.四边出血,向往扩张,合适年轻人的口味.
在这里插入图片描述
3.分割型
把整个页面分成上下或左右两部分,分别安排图片和文案.分割线上的压置的图片既打破了页面分割的生硬感,也使自身得到强调.左边框上的小标签乃点睛之笔.
在这里插入图片描述
4.中轴型
沿浏览器窗口的中轴将图片或位子作水平或垂直方向的排列.水平排列的页面给人稳定,平静,含蓄的感觉.垂直排列的页面给人以舒畅的感觉.
在这里插入图片描述
5.曲线型
图片,文字在页面上作曲线的分割或编排构成,产生韵律与节奏.网站的导航标题沿图片形弧线排列.
在这里插入图片描述
6.倾斜型
页面主题形象或多幅图片,文字作倾斜编排,形成不稳定感或强烈的动感,引人注目.
文字水平排列,将画框斜置,产生对于与动势,印象被加强.
在这里插入图片描述
7.对称型
对称的页面给人稳定,严谨,庄重,理性的感受.以相对对称手法制作的导航页面.
在这里插入图片描述
8.焦点型
焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉效果.通过离心的版式,清晰地传达出网站提供的服务.
在这里插入图片描述
9.三角型
网页各视觉元素整体看为正三角形的构图,主体形象稳定而突出
在这里插入图片描述
10.自由型
自由型的页面具有活泼,轻快的风格
引导视线的图片以散点构成,传达随意,轻松的气氛
但是作为个人网站,就不一定要采用这些方式,完全可以更新颖,更艺术些.什么又算是灵活多样?怎样做到新颖,艺术呢?没有一个模式取套,他需要你领悟,去创新.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
留白
我们应该在网页中通过留白的作用,使整个内容排布得松紧有度,给人以跌宕起伏之感.
把整个屏幕都塞得满满的,让人感觉不乱也很挤.网适当的留白,可以提高网页的视觉效果和艺术感染力.
留白既可以给人带来心理上的松弛,也可以给人带来紧张与节奏.利用留白的体量感来使页面布局平衡,在一种不平衡中营造平衡,这样会使页面生动起来.
“破”
这个"破"是指打破拘束,打破平衡,增添动感的手法(不是动画的动感).有如国画中画兰花----“一撇二交三破”,每片叶子都朝上竖着当然不好看了,这一"破"就是其中的道理.
简单
“美就是简单”,平淡之中才显真色.过于复杂,过于花哨,自然就偏离了没得轨道,比如过多地使用特效,过分炫目的图案,过于复杂的文字板块排列等.
精简文字—生动的诱惑力的作品是简洁的
不要用文字去填充空间
减掉那些没有用的文字的好处:
a,减少了页面的干扰;
b,使有用的内容更突出;
c,使页面更短,无需滚屏就可以一眼看到更多的东西
在这里插入图片描述
巧妙地运用动态元素.以横贯页面的长条色块统一画面,图片安排随意,疏密有致,使整体风格即统一又有变化.
在这里插入图片描述
在块状组合结构中,如图片太多,则无法突出重点.这个页面通过改变图片的面积,有效地分开了
在这里插入图片描述
图片与文字穿插编排,形成散点组合.运用线条的分割,文字的群组化以及单一的背景色形成整体
在这里插入图片描述
多幅图片使垂直线规律地等量分割,获得了理性与秩序的美.
在这里插入图片描述
以水平分割为主的页面,右上角与左下角安排了文字,打破了呆板的感觉.
在这里插入图片描述
饱满的页面构图,巧妙地利用表盘稳定住页面四角.
在这里插入图片描述
人物全部退底,文字色块的安排轻松随意,是面向年轻人的设计.
在这里插入图片描述
根据页面色调灵活运用文字的色彩,既符合页面的整体氛围,又保证了可读性.
在这里插入图片描述
密集的文字形成块面,丰富了页面层次.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bash的循环结构(for和while)

在bash有三中类型的循环结构表达方法:for,while,until。这里介绍常用的两种:for和while。 for bash的for循环表达式和python的for循环表达式风格很像: for var in $(ls) doecho "$var"done 取值列表有很多种…

MVVM模式下实现拖拽

MVVM模式下实现拖拽 原文:MVVM模式下实现拖拽在文章开始之前先看一看效果图 我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不能拖拽一个"游戏类型"给它。 所以当拖拽开始发生的时候我们必须添加一些限制条件&a…

jenkins+Docker持续化部署(笔记)

参考资料:https://www.cnblogs.com/leolztang/p/6934694.html (Jenkins(Docker容器内)使用宿主机的docker命令) https://container-solutions.com/running-docker-in-jenkins-in-docker/ (Running Docker i…

免安装Mysql在Mac中的神坑之Access denied for user 'root'@'localhost' (using password: YES)

眼看马上夜深人静了,研究了一天的问题也尘埃落定了。 废话不多说 直接来干货! 大家都知道免安装版本的Mysql, 在Mac中安装完成(如何安装详见Mac OS X 下 TAR.GZ 方式安装 MySQL)之后,在登录时会遇到没有访问权限的问题…

用jquery实现html5的placeholder功能

版权声明:本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/QianShouYuZhiBo/article/details/28913501 html5的placeholder功能在表单中经经常使用到。它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自己…

mac环境下node.js和phonegap/cordova创建ios和android应用

mac环境下node.js和phonegap/cordova创建ios和android应用 一介布衣 2015-01-12 nodejs 6888 分享到:QQ空间新浪微博腾讯微博人人网微信引用百度百科的一段描述:PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的…

java中多线程 - 多线程中的基本方法

介绍一下线程中基本的方法使用 线程睡眠sleep() Thread.sleep(毫秒);我们可以通过sleep方法设置让线程睡眠。可以看到sleep是个静态方法 public static native void sleep(long var0) throws InterruptedException; try {System.out.println(new Date().getSeconds());Thread.s…

cordova 一个将web应用程序封装成app的框架

cordova 一个将web应用程序封装成app的框架 cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建。 1.首先你需要下载几样东西 1.jdk. 2.android_SDK. 2.安装这两个,并配置环境变量 这里jdk的环境变量配置…

windows linux 子系统折腾记

最近买了部新电脑,海尔n4105的一体机,好像叫s7。 放在房间里面,看看资料。因为性能孱弱,所以不敢安装太强大的软件,然后又有一颗折腾的心。所以尝试了win10自带的linux子系统。然后在应用商店搜索linux推荐debian 系统…

《深入理解Java虚拟机》读书笔记八

第九章 类加载及执行子系统的案例与实战 Q:如果有10个WEB应用程序都是用Spring来进行组织管理的话,可以把Spring放到Common或Shared目录下(Tomcat5.0)让这些程序共享。Spring要对用户程序的类进行管理,自然要能访问到用…

js的原型和原型链

构造函数创建对象: function Person() {} var person new Person(); person.name Kevin; console.log(person.name) // KevinPerson 就是一个构造函数,我们使用 new 创建了一个实例对象 person prototype 每个函数都有一个 prototype 属性 每一个Ja…

二维数组

要求:求一个二维数组的最大子数组和 思路:对于这个题,我会最简单的读取,虽然在网上查到了代码,但是查找最大子数组的循环我真的看不懂,也不是特别懂思路,所以在这不会写思路 package 二维数组; …

033 Url中特殊字符的处理

在url跳转页面的时候,参数值中的#不见了,一直没有处理,今天有空看了一下,后来发现后台的过滤器之类的都没有处理,就比较奇怪了,原来是特殊字符的问题。 一:Url中的特殊字符 1.说明 这里还是需要…

Effective Java(1)-创建和销毁对象

Effective Java(1)-创建和销毁对象 转载于:https://www.cnblogs.com/Johar/p/10556218.html

VMware VIC

vSphere Integrated Containers - a short intro High-Level view of VCH Networking vSphere Integrated Containers Roles and Personas 参考链接:https://vmware.github.io/vic-product/assets/files/html/1.4/转载于:https://www.cnblogs.com/vincenshen/p/9715…

Locust学习总结分享

简介: Locust是一个用于可扩展的,分布式的,性能测试的,开源的,用Python编写框架/工具,它非常容易使用,也非常好学。它的主要思想就是模拟一群用户将访问你的网站。每个用户的行为由你编写的py…

初始Zookeeper

Zookeeper是一个分布式服务框架,据说是一个比较强大的架构模式,具体我也不甚了解,但是最近由于工作上的原因,需要部署一个Zookeeper服务,实现移动端一个简单的发单、抢单功能。于是我便开始了解这个框架,将…

Solr的安装和使用

安装 CentOS中先安装好Java和Tomcat。准备工具IK Analyzer 2012FF 和Solr-4.10.3.tgz 将solr-4.10.3文件夹中dist中的solr-4.10.3.war文件复制到Tomcat的webapps,并且更名为solr.war,下开启tomcat解压后再关闭tomcat,再删除solr.war。 将Solr…

maven如何修改本地仓库与中央仓库

什么是Maven仓库 在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/lib的子目录,那里存放着各类第三方依赖jar文件,如 log4j.jar,junit.jar等等。每建立一个项目&#xff0…

Maven项目 之eclipse操作篇

使用eclipse创建maven项目大家应该都很熟悉,这里主要说明如何将已创建的非maven项目修改为maven项目。 1.创建测试项目 创建一个Dynamic Web Project ,项目结构如图。 2.配置工程类型 右击项目--> Properties --> Project Facets,勾选…