相关文章
网站设计用CSS属性选择器控制链接样式
北京网页设计XP安装.Net支持视频
企通互联《科汛网站管理系统》主要特性
企通互联[css] 简明教程 样式表的编辑和浏览
网站设计DW定制网页过渡功能
北京网页设计轻松拥有自己的站内搜索引擎
网站设计DreamwaverMX与ASP.NET(五)
北京网页设计DreamweaverMX Ultradev探索(3-1)
网站建设Dreamweaver MX Ultradev探索(1)
网站建设FLASH MX 2004视频教程:摩托罗拉手机广告制作(三)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 北京网页设计网站制作Div+CSS布局入门教程(全)
北京网页设计网站制作Div+CSS布局入门教程(全)
一、页面布局与规划
好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的 北京网页设计HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:网站设计 www.qitongnet.com
1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;企通互联 企通互联
2、内容部分又可分为侧边栏、主体内容;北京网站设计
3 网站设计、底部,包括一些版权信息。网站制作
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:北京网页设计
│body {} /*这是一个HTML元素,具体我就不说明了*/网站设计
└#Container {} /*页面层容器*/网站制作
├#Header {} /*页面头部*/ 网站制作企通互联
北京网站制作 ├#PageBody {} /*页面主体*/网页设计
│ ├#Sidebar {} /*侧边栏*/网站建设
│ └#MainBody {} /*主体内容*/北京网页设计
└#Footer {} /* 网站建设页面底部*/ 网页设计北京网站建设
至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。北京网站建设
上一篇:北京网站制作彻底弄懂CSS盒子模式(DIV布局快速入门)
下一篇:北京网站设计display:inline-block的深入理解


