一般网站的风格及页面设计_正常系统的页面风格-CSDN博客

本文链接：https://blog.csdn.net/qq_61141142/article/details/139450777

页面设计的原则

设计的3C原则：所谓3C原则是指简洁、一致性、好的对比度。Web页面设计需要遵循这三条原则。

根据以上原则网站页面要做到朴素大方，线条轮廓要流畅、稳重，用色要慎重不可花里胡哨。

5.1.1线条的使用

直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐，所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。

曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。

曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。

5.1.2色彩的选择

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。

所以，我以蓝白色搭配为主色调其它颜色相辅，给人以宁静深远的回味，导航栏用七色箭头点缀，彩色图片和动态元素的使用使页面朴素、大方、庄重。

5.2 网站设计构思

首先在制作一个网页之前，应该先进行构思。新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的“景象”画上去，建议用一张白纸和一支铅笔将初步的设想画在纸上，当然用作图软件photoshop等也可以，免得在做了一半时发现页面不和谐而重做。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张，最后选定一个满意的作为继续创作的脚本。

第一步先明确页面主题，考虑是否有合适的图片来衬托主题，如果有现成的图片就可以了，没有的话，就根据情况来决定是否自己做一幅，这里我用PHOTOSHOP软件设计了一张简单的网站标题“新世纪手机商城”字体颜色选用浅蓝，以便协调网站的基色。但不管怎样，标题的主色调应先定下来，这对后面几步的版面影响很大。

第二步明确页面上要链接的目录，要将他们放在较显眼的位置，根据页面风格的不同可以放在顶部、左边、右边、中部等较明显的位置，主链接可以做成小图标的形式，但注意图片不能太大、也不能过分抢眼（一般情况下不比标题或主图的色彩重）。

第三步是指定主图，所谓主图，就是放一幅较能反映页面主题思想的图片，他的大小可适当超过页面上的其它图片，颜色不加限制，而且位置应尽量突出在前面抢眼处。这里要特别指出的是，网标，它是一个网站的标志和灵魂，在他的设计上一定要突出自己的风格和特点，能反映站点主题，体现企业文化，可以结合使用企业的标志。

以上三步确定下来后，页面的基本风格就出现了，我们在根据情况进行调整，或者看是否加上背景，主要考虑主图是否需要背景。

5.3 网站的风格版面设计

在版面设计上我认为可以说是既继承了传统设计的优点，又作了个性化创新作为传统设计无非是用以下几种架构如图5-1所示：

a、 b、 c、 d、

图5-1 网站架构a型、b型、c型、d型

多数网站的设计都采用了c型，上边为站标及广告栏，左边作为导航栏，底边为版权信息及设计制作小组，中间作为内容区。我的设计基本延用了c型但做了一些改进。延用了上下边框和左边框的设计网页显得简洁。但没有使用共享边框，而是单独的设计制作了上边框的内容top.Asp，下边框的内容copy.asp，和作边框的内容left.asp。使用语句完成对上述部分的调用，实现页面共享使每层网页具有相同的上下及左边框统一了风格，这样的调用方法效地解决了导航栏及超链接在深层网页的相对路径偏差问题，实现链接路径完全统一化。

网站页面结构布局如下图5-2所示：

网站购物功能链接区（top.asp）
手机厂商等（left.asp）	（商品显示区）

图5-2 网站页面结构布局

5.4 商城主页设计

主页是一个商城的门户，顾客一般都是首先看到此页（也有个别从链接进来者），因此大多数商家都希望在主页上能够显示尽可能多的信息，而且希望将自己最希望让别人了解的信息放在最吸引目光的位置。

本系统的主页是default.asp文件，图5-3是在线手机销售系统的主页面。

图5-3 在线手机销售系统主页面

5.5 客户端界面结构设计

在客户端界面中，出于美观考虑，没有采用框架。客户端界面结构是由头（head.asp）、左恻快捷菜单（left.asp）、体和尾（foot.asp）四部分组成。由于没有使用框架，各个模块的页面需要在此的基础上，在页面结构的“体”处加入实现功能特点的页面代码。

5.5.1界面头、尾设计

为了提高代码的重用性，与管理端界面类似，把客户端界面部分相同的头和尾做成两个文件分别命名为head.asp和foot.asp。在head.asp中除了功能菜单以外，还集成了一个会员登陆功能，在head.asp文件中调用showmemberlogin()过程就是为了实现此功能的，其作用是根据会员是否登陆来显示欢迎信息或登陆表单。