上面由尚品中国给人人分享一下网站筹划的页面范例计划框架：
1、页面框架
WEB的页面框架是指组成齐备页面的组织布局。凡是是由以下三局部组成：Head，Main，Foot，有些时刻出于计划的需求，在“Head”上面还会加上用于页面功用导航的“Menu”。如图：
2、计划准绳
对付WEB利用来说，页面计划是和web利用的功用区相对应的，并且对付页面中各个局部之间的切分比例也需求恪守必定的规矩。
页面计划的筹划，起首需求斟酌用户在浏览web页面时视觉流向上的哀求：
从视觉流向上看，用户起首看到的是页面“Head”局部的左面，凡是那边是标识这个WEB利用的Logo；然后是陈列WEB利用重要功用的“Menu”来用于页面导航；接上去用户将看的是处于页面左边的“sidebar”，凡是这里也是用于页面功用导航的，和“Menu”出的选择相呼应，这里的内容可以或许经过近似树状布局的方式展现加倍详细的功用；接上去是处于页面中央地位的内容局部，末了用户的视野落在WEB页面的底部。
3、页面朋分
以上面图示的计划方式为例，遵照凡是web页面筹划时所遵守的方式，并连系黄金朋分比例的方式：
起首，将页面遵照3*3的方式终止朋分，以下图：
在高度偏向上，对上部1/3地域遵照黄金朋分的方式分出head和menu的地域；
在宽度偏向上，对中部左边1/3地域遵照黄金朋分的方式分出sidebar的地域，剩下的空间留给content地域；
在高度偏向上，对下部1/3地域遵照黄金朋分的方式分出foot的地域；
4、页面布局
页面的计划中，各个地域巨细的界说方式是分歧的，请见下图：
在页面计划中，对各个功用地域的切分是遵照“像素”和“比例”方式来终止的，以1024*768的分辨率做为基准，个中：
- Head地域，宽度是遵照比例方式设置的，宽度遵照100%设置，高度采纳所占的牢固像素值来肯定的，普通占？px，若是有menu区，则调解为？px；
- Menu地域，和“head”的设置装备摆设哀求是一样的，宽度遵照100%设置，高度连系“head”的高度设置来肯定，普通占？px；
- Sidebar地域，宽度是连系与“content”之间的黄金切分比例，遵照牢固像素的方式肯定的，普通占？px；高度是遵照比例方式来设置的；
- Content地域，高度和宽度偏向计划都是遵照比例方式来设置的；
- Foot地域，宽度遵照100%设置，高度采纳所占的牢固像素值来肯定的，普通占？px;
5、页面揭示
对付页面计划来说，除上述哀求外，还需求斟酌以下哀求：
能自顺应1024*768、800*600两种分辨率；
界面条理不跨越3层；
默许窗口设置下，不应涌现水平、垂直转动条；
当界面内容超越浮现,地域时，以浮动层的情势浮现,；
另有，对付用户的感官而言，屏幕对角线订交的地位是用户直视的中央，而页面正上方四分之一处为易吸援用户留意力的地位，以是在安排页面时要留意操纵这两个地位。
哀求：
父页面或主页面的中央地位该当筹划在对角线核心附近；
子页面的地位该当靠近主窗体的左上角或正中；
需求多个子页面弹出时，该当依次向右下方偏移，以浮现,窗体出标题问题为好；
在页面上方四分之一处安排用户的logo、重要功用导航和一些零碎操纵功用；
6、页面丑化
界面该当巨细合适美学意见，觉得调和舒畅，能在有用的范畴内吸援用户的留意力。
发起和哀求：
- 长宽靠近黄金点比例，切忌长宽比例失调、或宽度跨越长度；
- 计划要公道，不宜过于麋集，也不克不及过于空旷，公道的操纵空间；
- 统一页面上的按钮巨细该当一致，分歧页面的按钮巨细尽可能邻近，按钮上忌用太长的称号；
- 按钮的巨细要与界面的巨细和空间要调和；
- 制止空旷的界面上安排很大的按钮；
- 安排完控件后界面不应有很大的空白地位；
- 字体的巨细要与界面的巨细比例调和， 凡是应用的字体12px；
- 远景与布风景搭配公道调和，反差不宜太大，主色要温和，最好少用深色，如大红、大绿等，可以或许借用Windows界面颜色；
- 大型零碎常常使用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；
- 界面气概要连结一致，字的巨细、颜色、字体要相反，需求艺术处置或有出格哀求的中央发起应用图片浮现,；
- 若是窗体撑持最大化或缩小时，窗体上的控件也要跟着窗体而缩放；切忌只缩小窗体而疏忽控件的缩放；
- 零碎对话框页面不该当撑持缩放，即右上角只需封闭功用；
- 凡是父窗体撑持缩放时，子窗体没有需要缩放；
- 若是能给用户供给自界说界面气概，则由用户本人选择颜色、字体等；
6、页面字体
页面字体属性的设置在呼应的CSS中终止界说，页面笔墨编码哀求是UTF-8，
营销型网站优化，在划定字体属性时，需求设置：中文采纳“宋体”，英文采纳“Arial”或“verdana”，CSS文件中的font-family外面必须包管有“宋体”。
对付页面属性中字体巨细的设置，需求内容的分歧级别来设置，凡是：
- “Head”中标题问题笔墨，20px；
- “Menu”中的导航笔墨，14px；
- “Sidebar”中的笔墨，12px；
- “Content”中的注释，12px或14px，标题问题；
- “foot”中的笔墨，12px或10px；
有关页面字体属性的详细设置拜见附录中的CSS示例。