模板制作核心技术：DIV+CSS完美基础教程

下面这篇文章来自于Phpcms论坛的beyond0624,对于像我这样对div/css一无所知的初学者来讲是一个很好的入门教材．本文提供案例下载，附于文章后面． btw.　coco女性网　　这个网站就是来自于phpcms套件．

--by ghostzhu

 

大家好，我接触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://blog.chinaunix.net/u/10957/showart_2337344.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。代码如下：

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   
9. 
   

复制代码

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

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8.   <div  id="left">  
   
9.             

   left

   
   
10.         div>
    
11.     <div  id="middle">
    
12.             

    middle

    
    
13.         div>
    
14.    <div  id="right">
    
15.             

    right

    
    
16.        div>
    
17. 
    

复制代码

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

/left

middle

right

  哎！你会觉得这样的页面真是太难看了！是吧，呵呵，这只是一张"脸"，如何给这张“脸”化化妆！让网页看上去更好看，更有美感！就需要使用我们的css了！
   关于css控制页面的方式我先在这里说一下，css是通过对html网页进行风格控制来美化我们的网页的！它css大体有四种链接方式：
   一，行内样式表 ：那上面的代码举个例子，

left

,  这样预览一下你会发现“left”变成了红色，字体为20像素了。
  二，内嵌式：就是在与之间加入一下风格代码。

   




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

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

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


   




相信从以上代码中，大家可以大概了解css的语法规则，我也不多说了，网上有很多的教程，我推荐一个，大家可以进去看看


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

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. 
   
9. <div id="banner">div>
   
10. <div id="mainbox">
    
11.         <div  id="left">  
    
12.             

    left

    
    
13.         div>
    
14.       <div  id="middle">
    
15.             

    middle

    
    
16.         div>
    
17.       <div  id="right">
    
18.   
    
19.             

    right

    
    
20.        div>
    
21. div>
    
22. <div id="footer">div>
    
23. 
    

复制代码

  2、 关联的css文件style.css的代码如下：

1. @charset "utf-8";
   
2. .style {
   
3. }
   
4. body{
   
5.     margin:0px;
   
6. padding:0px;
   
7. font-family:Arial, Helvetica, sans-serif;
   
8. color:#3300FF;
   
9. background-color:#ccc;
   
10. }
    
11. #mainbox{
    
12. width:1000px;
    
13. margin:0px;
    
14. background:#fff;
    
15. border:1px solid #0000FF;
    
16. }
    
17. #left{
    
18.     position:absolute;
    
19. top:1px;
    
20. left:0px;
    
21. width:180px;
    
22. height:500px;
    
23. margin:0px;
    
24. background:#fff;
    
25. border:1px solid #0000FF;
    
26. }
    
27. #middle{
    
28.     padding:10px;
    
29. background:#fff;
    
30.     height:500px;
    
31. margin:1px 190px 0px 190px;
    
32. margin-top:1px;
    
33. border:1px solid #0000FF;
    
34. }
    
35. #right{
    
36.     position:absolute;
    
37. top:1px;
    
38. right:0px;
    
39.     height:500px;
    
40. margin:0px;
    
41. background:#fff;
    
42. width:180px;
    
43. border:1px solid #0000FF;
    
44. }

复制代码

四，总结：
    以上只是思路，其实制作模板的工作远远没有结束！但是，通过以上简单的例子，相信大家对div+css有了一定的了解了吧！具体的素材请下载我在下面发布的附件，非常简单，请自己查看吧！！
  当然，限于篇幅，我不可能把div+css讲得那么透，只是想通过这篇文章，让很多刚接触phpcms且不懂技术的未来站长一些帮助！！其实还有很多关于css选择器、css的继承、csss在表格表单中的应用、以及css盒模型、div+css网页布局美化等等更加详细的教程。我会在以后抽空奉献给大家！！
同时，在未来的与phpcms2008共处的日子里，我还会陆续发布我的一些想法和思路，特别是一些大型网站（例如新浪、网易等）网站的实例剖析。与大家共同分享phpcms带来的建站享受！请广大新老站长能够支持我！谢谢大家^_^

文件:	index.rar
大小:	181KB
下载:	下载