• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: | 推荐给好友 上一篇 | 下一篇

谈网站的结构和页面规划

发布: 2007-6-13 20:12 | 作者: admin | 来源: | 查看: 39次 | 进入软件测试论坛讨论

领测软件测试网

网站的目录结构

网站的目录是指在创建网站时建立的目录,我们要根据网站的主题和内容来分类规划,不同的栏目要对应不同的目录,在各个栏目目录下我们也要根据内容的不同对其划分不同的分目录,比如说页面图片放到images目录下,新闻放到news目录下,数据库放到database目录下等等。同时要注意目录的的层次不宜太深,一般不要超过三层,另外给目录起名的时候要尽量使用能表达目录内容的英文或汉语拼音,这样会更加方便日后的管理维护。

网页的构成和布局

不同主题的网站对网页内容的安排会有所不同,但大多数网站首页的页面结构都会包括页面标题、网站LOGO、导航栏、登录区、搜索区、热点推荐区、主内容区和页脚区(如图),其他页面不需要设置如此复杂了,一般由页面标题、网站LOGO、导航栏、主内容区和页脚区等构成。

搞网站设计不是把所有内容放置到网页中就行了,还需要我们把网页内容进行合理的排版布局,以给浏览者赏心悦目的感觉,增强网站的吸引力。在设计布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比,以形成鲜明的视觉效果。我们常见的布局结构有 “同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局等。

1. “同”字形布局:所谓“同”字形结构,就是整个页面布局类似“同”字,页面顶部是主导航栏,下面左右两侧是二级导航条、登录区、搜索区等,中间是主内容区,如http://www.china-channel.com。

2. “国”字形布局:它是在“同”字形布局上演化而来的,它在保留“同”字形的同时,在页面的下方增加一横条状的菜单或广告,如http://www.yesky.com。

3. “匡”字形布局:这种布局结构去掉了“国”字形布局的右边的边框部分,给主内容区释放了更多空间,内容虽看起来比较多,但布局整齐又不过于拥挤,适合一些下载类和贺卡类站点使用,如http://nj.onlinedown.net。

4. “三”字形布局:一般应用在简洁明快的艺术性网页布局,这种布局一般采用简单的图片和线条代替拥挤的文字,给浏览者以强烈的视觉冲击,如http://www.cphoto.com.cn。

5. “川”字形布局:整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能,一般适用在栏目较多的网站里,如http://www.ezIT.com.cn。

在实际设计中我们也不要局限于以上几种布局格式,有时候稍作适当的变化会收到意想不到的效果,另外,平时在浏览网页时要多留心别人的布局方式,遇到好的布局就可以保存下来作为我们设计布局的参考。

网站页面色彩的规划

网页中色彩的应用是网页设计中极为极为重要的一环,赏心悦目的网页,色彩的搭配都是和谐优美的。在确定网站的主题后,我们就要了解哪些颜色适合站点使用,哪些不适合,这主要根据人们的审美习惯和站点的风格来定,一般情况下要注意以下几点,1、忌讳使用强烈对比的颜色搭配做主色;2、配色简洁,主色要尽量控制在三种以内;3、背景和内容的对比要明显,少用花纹复杂的背景图片,以便突出显示文字内容。

如果你对颜色的搭配没有经验,可以使用Dreamweaver的配色方案来学习简单的配色,开启Dreamweaver,执行“命令→设定配色方案”进入配色选择窗口,这里提供了多种背景、文本和链接的颜色,可以根据你的需要来选择搭配。当然,你也可以使用一些专门的网页配色软件如“ColorImpact”、“三生有幸”等来辅助你搭配好网站的色彩。

听完这堂“布局和色彩规划”课,八戒深感自己的艺术修养水平不足,便按照猴哥的吩咐上网浏览别人的网站并结合所学的内容慢慢体会网页布局和色彩搭配的技巧。

(责任编辑:城尘)



延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/


关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备10010545号-5
技术支持和业务联系:info@testage.com.cn 电话:010-51297073

软件测试 | 领测国际ISTQBISTQB官网TMMiTMMi认证国际软件测试工程师认证领测软件测试网