《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——1.3 网页设计的原则

简介:

本节书摘来自异步社区《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》一书中的第1章,第1.3节,作者: 何新起 , 任慎存 , 田月梅更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 网页设计的原则

设计是有原则的,网页设计遵循以下几个原则:统一、连贯、分割、对比及和谐。

  • 统一是指网页的整体性和一致性。网页的整体效果是至关重要的,网页中各个版块设计风格要一致协调。图1-17所示的网页整体看起来就比较统一。


446ab3f0163c634a0a1c0944d6d6fb0b415f8c91
  • 连贯是指要注意页面的相互关系。设计中要注意各组成部分在内容上的内在联系和表现形式上的相互呼应,并注意整个页面设计风格的一致性,实现视觉上和心理上的连贯,使整个页面设计的各个部分融洽得犹如一气呵成。
  • 分割是指将页面分成若干小块,小块之间有视觉上的不同,这样可以使浏览者一目了然。图1-18所示的网页分成了若干小块。


e55b8b61a4b666f12f602221e1da497436b15de8
  • 对比就是通过矛盾和冲突,使设计更加富有生气。对比的手法很多,如多与少、曲与直、强与弱、长与短、粗与细、主与次、黑与白、动与静及美与丑等。在使用对比的时候应慎重,对比过强容易破坏美感,影响统一。图1-19所示的网页设计中运用了对比效果。


9d11daea00411bd27b437d713b68f5c7398672ce
  • 和谐是指整个页面符合美的法则,浑然一体。网页不仅仅是色彩、形状、线条等的随意混合。
相关文章
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
545 56
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1987 58
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
938 1
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
3949 0
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
289 1
【JavaScript】网页交互的灵魂舞者
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1234 5