专题讲座网页设计与构图(1)-网页的构图(编辑修改稿)

专题讲座网页设计与构图(1)-网页的构图(编辑修改稿)内容摘要：

够在视屏范围。 在网页设计中，我们可在 HTML 语言里控制当前页面内所有对象距离页面左边框的距离，在默认的状态下，页面中的所有对象都距边框 10 像素。 如图： 所以现在页面的安全宽度应该是 760 像素。 而当我们更改了这一默认值以后，把左边距改为 0的时候， HTML 语法： body bgcolor=FFFFFF text=000000 leftmargin=0 /body 效果如图： 那么这个时候的页面安全宽度应该就是 780 像素了。 一般来说，我们在设计页面的时候是要避免在浏览器的窗口下方出现水平滚动条的，这样访问者必须拖拽水平滚动条才能浏览到 网页的全部内容，那么这张网页设计的并不成功，且不管它是多么的漂亮。 专题讲座：网页设计与构图 (4)网页中最常见的构图布局 网校教师：刘涛 网页的构图布局与平面构图布局有着很大的相似之处，但是因为技术的局限，网页构图远不如平面设计那样挥洒自如。 接触过平面设计的朋友应该知道，我们在平面设计中想把某一对象放置到某一位置的时候只需要简单的拖拽就可以完成。 但是在网页设计中我们想对某一对象进行定位的话就不是这么简单的了，必须有 HTML 语言的支持才行。 所以在进行网页设计的时候，除了要有好的创意，还应该考虑到技术上 的可行性。 常见的网页布局有以下几种：左右对称结构布局、 “ 同 ” 字型结构布局、“ 回 ” 字行结构布局、 “ 匡 ” 字行结构布局、 “ 厂 ” 字行结构布局、自由式结构布局、 “ 另类 ” 结构布局等，这些只是我个人的总结，还有待进一步完善。 A、 左右对称结构布局 这类布局是采用分割屏幕的方式实现的，是网页布局结构中最为简单的构图。 一般来讲，页面的左半部设置栏目导航，而右半部分则列举多篇重要内容的概要或者一整篇详细内容，这有利于访问者直观另类，尽管是被动接受，但页面的信息含量较低，不适合大型专业化的网站。 见下图 B、 “ 同 ” 字型结构布局 从 “ 同 ” 字字体形状上也可以直接看出该类页面的布局是以页面顶部为主导航条（主菜单），页面的左右两侧分别列出二级栏目条或综合性热点区（如广告条、搜索引擎、友情链界、登录面板、注册按钮等）。 这种是互连网上常见的布局，其优点是直观、条理、均衡。 缺陷是版式呆板、僵化。 在采用这种布局时要注意色彩的和谐搭配，通过巧妙的用色，能够调节页面的整体韵律。 C、回字型结构布局 所谓 “ 回 ” 字型结构，就是指以 “ 同 ” 字型结构布局为基础，又在页面的底部增加了一条横向的菜单（或广告条、或本站的另一大版块的超链接区）。 这样做的目的是为了充分利用有限的页面空间，增大主页面的信息量，缩短了和正文链接的路径。 使访问者比较便捷、直观地浏览所需要的信息，少走弯路。 其缺点是页面拥 挤、四面封闭。 这种页面布局在我过网站中出现的较多，这大概是受 “ 四合院文化 ” 的影响吧。 D、 “ 匡 ” 字型结构 “ 匡 ” 字型结构布局其实是 “ 同 ” 字型结构布局的变形，将 “ 同 ” 字型结构逆时针旋转 90 度，就是这种布局。 或者说是把 “ 回 ” 字型结构布局的页面上的右边的栏目条删除后所得到的一种结构布局。 这种布局结构克服了 “ 回 ” 字型结构封闭的缺陷，所列信息量和 “ 同 ” 字型结构大体相同。