Web设计基础-网页布局设计_第1页
Web设计基础-网页布局设计_第2页
Web设计基础-网页布局设计_第3页
Web设计基础-网页布局设计_第4页
Web设计基础-网页布局设计_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web设计基础教程网页布局设计目录1网页布局的概念2网页布局形式3网页版面设计常用方法4Photoshop在网页布局中的作用8.1网页布局的概念网页布局设计也可以理解为网页版面设计，就是我们在浏览器上看到的一个完整的页面。我们如何将所有要体现的内容完整的分布布局，达到一种视觉效果，这就叫做版面布局设计。8.1.1网页布局的要素1．页面尺寸2．图像的运用3．文字的运用8.1.2网页布局设计遵循的原则1．重点突出、主次分明2．平衡性3．对比4．疏密度5．对齐6．图文并茂7．网页版面设计风格的统一性8.2网页布局形式8.2.1传统的网页版式布局设计传统的网页设计版式布局结构大致可分为“同”字型、“国”字型、拐角型、“三字”型、对称型、POP型等。“同”字型结构布局实例拐角型布局实例“三”字型布局实例POP布局实例对称对比布局实例大框套小框布局大框套小框布局实例通栏布局实例8.2.2网页设计布局的流行趋势1．打破框架的版面设计8.2.2网页设计布局的流行趋势2．去界面化8.2.2网页设计布局的流行趋势3．基于模块或网格8.2.2网页设计布局的流行趋势4．一屏以内8.3网页版面设计常用方法1．瀑布设计法

2．原型设计法3．螺旋设计法4．增量开发法8.4Photoshop在网页布局中的作用8.4.1用Photoshop设计网页布局的优点1．布局灵活2．修改方便3．加快浏览进度8.4.2用Photoshop设计网页布局应注意的几个问题1、字体，标题。2、布局格式3、科学使用参考线8.4.3Photoshop切片工具“切片”这关键的一步，应遵循以下原则：

1．必须依靠参考线

2．Logo和Banner必切

3．虚线和转角形状必切

4．渐变必切

5．大图必切

6．特殊文字效果必切

7．导航条必切

8．有效存储切片8.5网页栅格系统8.5.1什么是网页栅格系统栅格系统英文为“gridsystems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，一般给它的定义为：栅格设计系统，是一种平面设计的方法与风格，即运用固定的格子设计版面布局，以规则的网格阵列来指导和规范网页中的版面结构以及信息漫衍。在设计商业网站时，为了让网页的信息呈现更加美观易读，一般建议选择合适的栅格系统和页面宽度。8.5.2栅格系统的设计原理及应用

(A×n)-i=WA：一个栅格单元的宽度a：一个栅格的宽度i：栅格与栅格之间的间隙A=a+in：正整数W

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论