CSS布局教程

基于web标准的网站设计指南

« CSS编码精简与合并”变化之美“案例网站制作xhtml编码 »

简洁布局的css网站制作之布局规划

目前的社会分工越来越细,天津网站制作人员的工作不再贯穿于天津网站建设的全部流程,页面设计人员(美工)可以从美学的角度进行更加规范化、更具专业的设计。而网页制作人员的工作则是对页面效果图进行分块、切割,编写XHTML与CSS代码,最终形成网页。首先要细致地分析效果图,做到胸有成竹,然后再根据页面的特点及版式需要进行详细的规划。
从图中可以看出,这是一种典型的布局形式,从企业网站到博客网站,很多站点都采用这样的形式。页面头部设置形象展示或LOGO区域,紧接着是一个通栏的导航菜单;中间区域划分为左右两块,左边较窄区域是导航或其他页面元素,右边较宽的区域放置网页的主要展示内容;最下部是页脚,放置版权信息或底部菜单等。有了上面的分析,相信大家对此页面的构成已经了然于胸,下一步进行规划与切图。
在拿到一份关于天津软膜天花网站的设计方案的效果图后不要立即开始编码,而是要首先理清各元素之间的关系,然后思考以什么标签来组织所需表现的内容。充分地分析与规划是XTHML与CSS编码的基础,这个过程也是自己对页面充分理解的过程,需要认真地进行准备。但是仅仅有了分析是远远不够的,需要从科学的角度进行规划,组织页面元素形成最终的页面。需要思考如何对页面布局进行细致的分割,并且切割效果图,为后面的编码工作提供必需的“原料”。
前面已经分析出页面的基本构成,主要分为5个区域:上部LOGO、导航菜单、左侧边栏、右侧内容区和底部版权区,下面进行布局规划,组织这些内容形成最终的页面。将上部LOGO与导航菜单看成是头部元素,置于header层中;将左侧边栏siderbar与右侧内容区container置于main层中,以实现水平居中对齐;最底部版权区域置于footer层中。依据这样的思路,便形成了所示的页面主体元素布局规划。
header层主要分为4块内容:网站LOGO、网站标语、搜索框和网站导航菜单。将这4块内容置于header层中,左侧边栏共有两块区域,虽然它们展现了不同的内容,但是在形式上这两块区域保持一致。下面仅对其中一个进行分析即可。首先是栏目名称“CSS模板下载”,紧随其后的是一小段说明文字,然后是3个图片链接。将它们置入class为siderlist的层中,经过详细的分析与规划,下面开始对效果图进行切割。图片是网站设计艺术表现的载体,它能美化网页、增强视觉效果,使我们的页面锦上添花。若图片文件非常大,不但要占用更多的服务器空间,也会对页面下载有着非常大的影响,使页面下载很慢。因此应该尽可能地进行必要的优化,以保证浏览的流畅。据上面的规划,共需要5张图片来组成这个页面,由于网站LOGO、网站标语和菜单上方的装饰条色彩较少,因此选用GIF格式图片。而搜索框内的放大镜色彩比较丰富、搜索按钮带有色彩的渐变过渡,所以选用JPG格式图片。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号