模板制作核心技术：DIV+CSS完美基础教程-文章-寻她模板站

     大家好，我接触phpcms也有将近一年了，大一时开始学习dreamweaver、FW、flash、PS等等相关的网页设计工具和Xhtml+CSS技术，直到如今，也有三年多了，对于cms，我最先接触的是powereasy,尽管PE2006的教程等后期服务做的不错！让很多不懂技术的新站长迅速就能建立自己的网站。但是PE特别是免费版在功能上无法满足建立庞大的地区门户的要求！鉴于phpcms在建立地区门户网站上的强大功能和php语言超越asp的先天优势，因此我去年开始转向了phpcms！在接触phpcms的这一年里，感触很深！如今phpcms换了东家！很多个人站长心里很焦虑，其实没必要，相信KU6吧，相信phpcms团队会沿着完美开源的道路一直走下去。。。
      鄙人不才，也不是专业人员，作为phpcms的忠实用户，今天我斗胆把我建站时的一些想法和心得与广大phpcms站长们分享！我怕有些新站长不明白！所以下面的教程都力求用最简明易懂的语言！可能有些说法不当，请老站长口下留情！！谢谢大家   ^_^
                模板制作的核心技术：(XHTML)div+css的完美基础教程
一、div+css的基础知识：
     1、引进div+css的作用：
           我们知道，传统的网站是用table表格标签布局的，为什么如今的网站都抛弃了table、而使用div+css、我想广大的站长朋友们也都清楚！这里不多说了，不知的朋友可进网址http://hi.baidu.com/mydesign2007/blog/item/3d606fcf6016c338f9dc6150.html查看！
           打个比方，div与css关系就像“字”与“字体、字号、颜色”。div是一张皮,就像网页的一个页面，而css就是毛，就如网页上各个内容板块的风格！有皮无毛无所谓皮毛，反之亦然！所以我们说div与css就是“脸”和“面”的关系！说到这，可能有些朋友更晕了！没关系，继续往下看。。
        2、认识div：
            div,是division的简写，我们暂时理解为“分区”的意思吧，由此可知，div的作用只是起到吧一张空白的页面划分为不同的“区间”，这些区间就形成了网页上的各个板块。。。
            到底如何利用div这个标签来划分网页内容板块呢，具体技术内容下面再讲！！
       3、认识css：
           css,是Cascading Style Sheet的缩写，也就是“层叠样式表”的意思！前面说到的划分分区的任务是由div标签控制的，是“脸”那么css就是“面”了，是决定给一张由div标签设计出来的网页这张“脸”化什么妆的！
        到这里，广大新手朋友应该对div+css的关系有所了解了吧！o(∩_∩)o...哈哈
    二、div+css的技术基础：
         我们知道，传统的网页是table和页面内的style标签设计的，缺点很多，比如网页下载慢，要等所有表格标签下载完才会完全显示，占宽带，且不利于搜索引擎的搜索；网页更新升级特别难等等。。
         而div+css就不同了，它遵循代码分离的原则，讲求框架(div)和风格（css）相分离.更有利于后期维护，节省宽带，下载快，有利于搜索引擎。
         实例：首先建立一个网页index.html。代码如下：

[Copy to clipboard] [ - ]CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>

</body>
</html>
上面代码是哟用DW新建的一个html页面，不知道大家是否熟悉html语言，我还是说一下吧。介于<head>与</head>之间的网站头部标签，用来定义网页版本，关键词之类的，不是网页的实际内容！介于<body></body>之间的才是网页的主体内容。所以关于网页的板块设计的代码div标签都要写在<body>与</body>之间！
   同<body></body>标签一样，div的标签语法也一样，即<div>文字</div>，注意，在代码的时候，大家一定别忘了结尾的</div>闭合标签，否则网页会出错！这也是很多站长在更新首页时，后台出现前台首页的一个原因，切记！！
    好了，我们继续吧，给刚建立的空白网页加上div标签吧^_^

[Copy to clipboard] [ - ]CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<div id="left"> 
            <p>left</p>
        </div>
    <div id="middle"> 
            <p>middle</p>
        </div>
   <div id="right"> 
            <p>right</p>
       </div>
</body>
</html>

以上红字部分就是我们刚刚添加的div标签了。这是如果我们预览网页的话，发现基本的网页内容就有了，预览如下：

QUOTE:
/left

middle

right

哎！你会觉得这样的页面真是太难看了！是吧，呵呵，这只是一张"脸"，如何给这张“脸”化化妆！让网页看上去更好看，更有美感！就需要使用我们的css了！
   关于css控制页面的方式我先在这里说一下，css是通过对html网页进行风格控制来美化我们的网页的！它css大体有四种链接方式：
   一，行内样式表：那上面的代码举个例子， <p style=“color:red; font-size:20px;” >left</p>, 这样预览一下你会发现“left”变成了红色，字体为20像素了。
二，内嵌式：就是在<head>与</head>之间加入一下风格代码。
<head>

<style tyle="text/css" rel="stylesheet">
     <!--
p{
     color:red;
     font-size:20px;
}
--!>
</style>

</head>

此种方法也可以实现上面一样的效果。

三、链接式：这种方式是先建立一个css文件，然后把该css风格文件链接如你的网页，该css文件的扩展名是 .css ，如我们建立一个css风格文件 style.css .然后把该文件链接到你网页中，具体做法是在刚刚建立的网页文件的<head></head>之间加入以下代码：
<link href="style.css" rel="stylesheet" type="text/css" />

四、导入样式：导入样式与上面第二种链接样式表基本相容，只是语法上略有不同，采用的是import方式导入的。代码如下：

</head>

相信从以上代码中，大家可以大概了解css的语法规则，我也不多说了，网上有很多的教程，我推荐一个，大家可以进去看看
http://tech.163.com/05/0825/11/1S0F0GQK00091589.html

三、建立div+css的基本网页布局
1、首页index.html代码如下：

[Copy to clipboard] [ - ]CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner"></div>
<div id="mainbox">
        <div id="left"> 
            <p>left</p>
        </div>
      <div id="middle"> 
            <p>middle</p>
        </div>
      <div id="right"> 

            <p>right</p>
       </div>
</div>
<div id="footer"></div>
</body>
</html>
2、关联的css文件style.css的代码如下：

[Copy to clipboard] [ - ]CODE:
@charset "utf-8";
.style {
}
body{
    margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
color:#3300FF;
background-color:#ccc;
}
#mainbox{
width:1000px;
margin:0px;
background:#fff;
border:1px solid #0000FF;
}
#left{
    position:absolute;
top:1px;
left:0px;
width:180px;
height:500px;
margin:0px;
background:#fff;
border:1px solid #0000FF;
}
#middle{
    padding:10px;
background:#fff;
    height:500px;
margin:1px 190px 0px 190px;
margin-top:1px;
border:1px solid #0000FF;
}
#right{
    position:absolute;
top:1px;
right:0px;
    height:500px;
margin:0px;
background:#fff;
width:180px;
border:1px solid #0000FF;
}
四，总结：
    以上只是思路，其实制作模板的工作远远没有结束！但是，通过以上简单的例子，相信大家对div+css有了一定的了解了吧！具体的素材请下载我在下面发布的附件，非常简单，请自己查看吧！！
当然，限于篇幅，我不可能把div+css讲得那么透，只是想通过这篇文章，让很多刚接触phpcms且不懂技术的未来站长一些帮助！！其实还有很多关于css选择器、css的继承、csss在表格表单中的应用、以及css盒模型、div+css网页布局美化等等更加详细的教程。我会在以后抽空奉献给大家！！
同时，在未来的与phpcms2008共处的日子里，我还会陆续发布我的一些想法和思路，特别是一些大型网站（例如新浪、网易等）网站的实例剖析。与大家共同分享phpcms带来的建站享受！请广大新老站长能够支持我！谢谢大家^_^
[附件:/uploadfile/article/uploadfile/200810/20081005090646580.rar]

发表评论　加入收藏　告诉好友　打印本页　关闭窗口　报告错误返回顶部