下面由桔子科技给大家分享一下网站设计页面模板构思的实施方案：
1、页面模板构思框架
页面的模板构思是指构成完整网页的结构布局。
通常包括以下几部分构成：Head区域、Main区域、Footer区域，有些时候为了满足特定的布局需求，在“Head”区域下方还会设置一个用于功能导航的“Menu”区域。
2、布局原则
对于WEB应用程序来说，页面布局与web应用的功能模块相对应，并且对页面各个部分之间的分割比例也有一定的规则要求。
在进行页面模板构思时，首先需要考虑用户在浏览web页面时的视觉流向：从视觉流向上看，用户最先注意到的是页面的“Head”区域左侧，那里通常摆放着这个WEB应用的Logo；
接着是展示Web应用主要功能的“Menu”区域，用于页面导航；
然后用户会看到位于页面左侧的“Sidebar”区域，这里同样也是用于功能导航的，与“Menu”区域相呼应，内容可通过类似树状结构的方式展现更为详细的功能说明；
接下来是页面中央的内容区域；
最后用户的视线落在WEB页面的底部。
3、页面模块划分
以上图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：
首先，将页面进行切割，在高度方向上，对上部1/3的区域按黄金分割法分割出“Head”和“Menu”区域；
在宽度方向上，对中部左侧1/3的区域按黄金分割法分割出“Sidebar”区域，剩余空间留给“Content”区域；
在高度方向上，对下部1/3的区域按黄金分割法分割出“Footer”区域。
4、页面模块结构
页面的模板构思中，各个模块大小的设置方式不尽相同。在页面布局中，对于各个功能模块的分割多采用像素和比例的方式进行。
以14*768分辨率作为基准，具体如下：
“Head”区域：宽度按1%的比例进行设置，高度使用固定的像素值确定，一般占50px；
如果有“Menu”区域，则调整为60px；
“Menu”区域：与“Head”区域的配置要求相同，宽度按1%设立，高度结合“Head”区域的高度设置，一般占60px；
“Sidebar”区域：宽度采用固定像素的方式进行设置，与“Content”区域保持黄金分割比例，一般占200px；
高度按比例进行设置；
“Content”区域：在高度和宽度方向上均按比例进行布局；
“Footer”区域：宽度按1%设立，高度使用固定的像素值确定，一般占50px；
5、页面展现
对于页面模板构思来说，除了以上要求外，还需考虑以下要素：
- 能适应14768、86等多种分辨率；
- 界面层次不超过4层；
- 默认窗口设置下，不应出现水平、垂直滚动条；
- 当界面内容超出显示区域时，以浮窗的形式展现；
- 对于用户感官而言，屏幕对角线相交的位置是用户直视的地方，而页面正上方四分之一处为容易吸引注意力的位置。因此，在放置页面时应注意利用这两个位置。
6、视觉效果
模板的视觉效果应符合审美观点，具有协调舒适的观感，能在有效范围内吸引用户的注意力。
以下是一些建议和要求：
- 长宽比例接近黄金分割比例；
- 布局合理，不宜过于密集或空旷；
- 同一页面上的按钮大小一致，不同页面的按钮大小尽量相近；
- 按钮的大小与界面尺寸和空间协调；
- 避免在空旷的界面上放置过大的按钮；
- 放置完控件后，界面不应存在过大空缺；
- 字体大小与界面尺寸比例协调，通常使用字体1px；
- 前景与背景色搭配合理、协调，反差不宜过大，主色调应柔和，尽量少用浓重颜色，如大红、大绿等；
- 大型系统常用主色有“#E1E1E1”、“#EFEFEF”、“#CCC”等；
- 界面风格保持一致，字的大小、颜色、字体要相同；
- 如果窗体支持最大化或放大时，窗体上的控件也随窗体进行缩放；
- 若系统对话框页面支持缩放，则右上角功能仅限关闭按钮；
- 通常父窗体支持缩放时，子窗体无需缩放；
- 如能提供自定义界面风格，由用户自行选择颜色、字体等。
7、页面字体
页面字体的设置在相应的CSS中进行定义。页面的文字编码要求是UTF-8。在规定字体属性时，需根据以下规定进行：
- 中文使用“宋体”；
- 英文使用“rial”或“verdana”；
- CSS文件中的font-family中必须包含“宋体”。
对于页面字体大小的设置，通常按照内容级别来划分。具体如下：
- 在“Head”区域中，标题文字字号为16px；
- “Menu”区域中的导航文字，字号为14px；
- “Sidebar”区域中的文字，字号为12px；
- “Content”区域的正文，标题字号分别为1px和16px；
- “Footer”区域中的文字，字号分别为1px和12px。