来一发网站结构分析实例：网页黄金支解

学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
数学是幽美的.听上往有点奇异?当我第一次入手下手计划的时分，我确信云云。数学云云呆板有趣。你大概会惊奇的发明，最美妙的计划，艺术作品，物体，乃至人都无数学上的配合点。特别是黄金支解，也被称为神之比例，希腊字母暗示其为Φ(phi).本教程会分析一个网站的结构，和怎样对其黄金支解。
作者:JarelRemick是ThemeForest的一位作者，在Moscow,Idaho.
网页骨架

登录/注册后可看大图

这些是web页面的次要元素。有良多分歧的办法往构造它们，可是这类结构大概是最经常使用的。
Container

一切的web页面都用一个container，次要是为了统一个目标：往包括一些页面元素，但是这个办法完成各有分歧。比方，body标签大概是最经常使用的div。乃至于已往经常使用的table（不要利用table作为你的container，这是一个破办法）。想一想container作为你屋子的外墙，内里包括寝室，厨房，起居室等等。
container的范例:

• Liquid:依据扫瞄器宽度添补。
  
• Fixed:指定的宽度，其实不会依据扫瞄器宽度改动。
  

登录/注册后可看大图

Header

header其实不真的是一个特定的元素，只管某些人会以为它是。它更多是用在触及到你安排你的logo，导航栏，tagline的web页面顶层的中央。很多人更乐意把这些元素包括在一个div里以便利使页面款式和内容分别。header会被视为一个container，以是它有两品种型选择，就是上文提到的liquid或fixed。

登录/注册后可看大图

Logo

你的logo是你的身份和品牌。最经常使用的是把logo放在你header的左上角。我们的浏览习气是，从左往右，从上至下，以是你的log应当放在会见者第一眼能看到的中央。
Navigation

页面导航是最主要的元素之一;你的会见者必要用它来利用你的站点。它应当是简单被找到且易用的，这就是为何年夜多半的人把它放在header部分，起码也是在页面顶端四周的缘故原由。
navigation范例:

• Horizontal:程度显现，被称为‘navigation’。
  
• Vertical:垂直显现，被称为‘menu’
  

登录/注册后可看大图

MainContent

每一个人都（应当）晓得，内容才是霸道！当人们来观光你的站点，这是他们想看的次要元素。它应当是web页面的核心，以是观光者才干疾速找到他们想要的。
Sidebar

sidebar是安排你主要内容的元素，像一些告白，站点搜刮，定阅链接(RSS,Twitter,Email,等),接洽办法等。这个元素不是必须的，只管右良多站点用它。它年夜多半是放在右侧的，可是你也能把它放在右边大概双方，只需不侵扰次要内容的扫瞄就行。网站利用横向或纵导游航，sidebar常常是用纵导游航。

登录/注册后可看大图

Footer

web页面的尾部总会有一个页脚，让您的访客晓得他已抵达了你web页面的停止部分。和heaser一样，footer也不是一个特别的元素。在你的页脚里包括版权，功令声明和次要的接洽体例。包括一些主要的链接是个好主张，好比homepage,contactpage,等.有些网站用这个地区供应一些相干质料大概其他主要信息。
"Whitespace"

你大概有激烈的希望往添补这些页面上的空缺，可是请不要这么做。“空缺”也是相称主要的。你能够看看NetTuts网站是怎样无效的利用空缺地区的，创立了页面均衡给人一个好的感到。
以上是web页面的骨架，如今我们来看怎样黄金支解这些元素。
黄金支解和利用网格（Grids）

还记得之前我说数学是俊丽的吗？我们以为视觉的吸引力是基于比例的（好比，黄金支解）。几千年来，艺术家，计划师，修建师等都成心偶然的在利用了一个配合的比例来增添他们作品的美感。这个奇妙的数字是甚么呢？1.62(实践是1.618...)我不会说这个数字的劈头，可是我会告知你怎样利用它。

登录/注册后可看大图

利用黄金支解长短常复杂的。好比你像找到你次要内容和sidebar列表的宽度。你将利用你内容地区总的宽度除以1.62.然后失掉555.55px.我们不必要那末准确，以是我们就用555px。如今你就晓得你的次要内容元素是555px的宽度，你的sidebar是345px。看看何等简单？！
可是等等先，兴趣不止于此！你也能够使用黄金支解到其他元素的宽度和高度。

登录/注册后可看大图

UsingGrids

假如你和年夜多半的人一样，不想每次都抱着个盘算器来盘算这个黄金比率。那末最复杂的办法就是用grid。以是你必要做的就是把你的宽度或是高度分红三分。

登录/注册后可看大图

要发生更具体的gird，只必要持续三平分就行。假如你读了前一篇文章“与BlueprintCSS框架的亲热打仗”的话，你会看到BlueprintCSS框架用了一个具体的gird体系。不单单是gird计划更简单更快，并且它也创立了一个美妙的结构。假如你还没有利用gird计划，那末这是一个很好的实验时机。你能够为fireworks，Photoshops大概其他软件从http://960.gs下载grid模板。

登录/注册后可看大图

正如你看到的，NetTuts很好的遵守了黄金比率。顶端三分之一的网页再次分红了三分，十分靠近黄金比率。难怪NetTuts的计划是云云吸惹人！
假如你要做一个新的计划，我严峻保举你找一些盛行的站点，评价他们的结构，和怎样使用黄金比率和gird。然后花一些工夫往理论利用黄金支解，并在你的结构下面利用gird。

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。