CSS 网页制作教程- 完整布局实例在网页制作教程中, 有许多的术语, 例如: CSS 、 HTML 、 DHTML 、 XHTML 等等。在下面的文章中我们将会用到一些有关于 HTML 的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的 HTML 基础。下面我们就开始一步一步使用 DIV+CSS 进行网页布局设计吧。所有的设计第一步就是构思, 构思好了, 一般来说还需要用 PhotoShop 或 FireWorks( 以下简称 PS 或 FW) 等图片处理软件将需要制作的界面布局简单的构画出来, 以下是我构思好的界面布局图。下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1 、顶部部分,其中又包括了 LOGO 、 MENU 和一幅 Banner 图片; 2 、内容部分又可分为侧边栏、主体内容; 3 、底部,包括一些版权信息。有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图, 我再画了一个实际的页面布局图, 说明一下层的嵌套关系, 这样理解起来就会更简单了。 DIV 结构如下: │ body {} /* 这是一个 HTML 元素,具体我就不说明了*/ └#Container {} /* 页面层容器*/ ├#Header {} /* 页面头部*/ ├#PageBody {} /* 页面主体*/ │├#Sidebar {} /* 侧边栏*/ │└#MainBody {} /* 主体内容*/ └#Footer {} /* 页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写 HTML 代码和 CSS 接下来我们在桌面新建一个文件夹,命名为“ DIV+CSS 布局练事本文档,输入以下内容: 这是 XHTML 的基本结构,将其命名为 ,另一个记事本文档则命名为 。下面,我们在<body></body> 标签对中写入 DIV 的基本结构,代码如下: <div id="container">[color=#aaaaaa]<!-- 页面层容器-->[/color] <div id="Header">[color=#aaaaaa]<!-- 页面头部-->[/color] </div> <div id="PageBody">[color=#aaaaaa]<!-- 页面主体-->[/color] <div id="Sidebar">[color=#aaaaaa]<!-- 侧边栏-->[/color] </div> <div id="MainBody">[color=#aaaaaa]<!-- 主体内容-->[/color] </div> </div> <div id="Footer">[color=#aaaaaa]<!-- 页面底部-->[/color] </div> </div> 为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开 文件,写入 CS S 信息,代码如下: /* 基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /* 页面层容器*/ #container {width:100%} /* 页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#99} /* 页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /* 页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存, 用浏览器打开, 这时我们已经可以看到基础结构了, 这个就是页面的框架了。关于以上 CSS 的说明(详细请参考 中文手册,网上有下载): 1 、请养成良好的注释习惯,这是非常重要的; 2、 body 是一个 HTML 元素, 页面中所有的内容都应该写在这标签对之内, 我就不多说了; 3 、讲解一些常用的 CSS 代码的含义: font:12px Tahoma ; 这里使用了缩写, 完整的代码应该是: font-size:12px;font-family:Tahoma ; 说明字体为 12像素大小,字体为 Tahoma 格式; margin:0px ; 也使用了缩写,完整的应该是: margin-top:0px;margin-right:0px;margin-bottom:0
CSS网页制作教程-完整布局实例(精) 来自淘豆网m.daumloan.com转载请标明出处.
