查看: 48235|回复: 136

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

    [复制链接]
发表于 2008-9-11 15:32:40 | 显示全部楼层 |阅读模式
      大家好,我接触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。代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>index</title>
  6. </head>
  7. <body>

  8. </body>
  9. </html>
复制代码
上面代码是哟用DW新建的一个html页面,不知道大家是否熟悉html语言,我还是说一下吧。介于<head>与</head>之间的网站头部标签,用来定义网页版本,关键词之类的,不是网页的实际内容!介于<body></body>之间的才是网页的主体内容。所以关于网页的板块设计的代码div标签都要写在<body>与</body>之间!
   同<body></body>标签一样,div的标签语法也一样,即<div>文字</div>,注意,在代码的时候,大家一定别忘了 结尾的</div>闭合标签,否则网页会出错!这也是很多站长在更新首页时,后台出现前台首页的一个原因,切记!!
    好了,我们继续吧,给刚建立的空白网页加上div标签吧^_^
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>index</title>
  6. </head>
  7. <body>
  8.   <div  id="left">  <!--以上为网页主体左栏-->
  9.             <p>left</p>
  10.         </div>
  11.     <div  id="middle"> <!--以上为网页主中栏-->
  12.             <p>middle</p>
  13.         </div>
  14.    <div  id="right"> <!--以上为网页主右栏-->
  15.             <p>right</p>
  16.        </div>
  17. </body>
  18. </html>
复制代码


  以上红字部分就是我们刚刚添加的div标签了。这是如果我们预览网页的话,发现基本的网页内容就有了,预览如下:
/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>
   
<style tyle="text/css" rel="stylesheet">
     <!--
  @import url(style.css);
--!>
</style>

</head>

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

三、建立div+css的基本网页布局
    1、首页index.html代码如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>index</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="banner"></div>
  10. <div id="mainbox">
  11.         <div  id="left">  <!--以上为网页主体左栏-->
  12.             <p>left</p>
  13.         </div>
  14.       <div  id="middle"> <!--以上为网页主中栏-->
  15.             <p>middle</p>
  16.         </div>
  17.       <div  id="right"> <!--以上为网页主右栏-->
  18.   
  19.             <p>right</p>
  20.        </div>
  21. </div>
  22. <div id="footer"></div>
  23. </body>
  24. </html>
复制代码
  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带来的建站享受!请广大新老站长能够支持我!谢谢大家^_^



[ 本帖最后由 beyond0624 于 2008-10-31 11:06 AM 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?点击这里注册

x

评分

参与人数 5威望 +4 鲜花 +26 收起 理由
songjie + 1
叶紫7880900 + 3 非常需要,谢谢,很实用。
gxqfj + 4 乐于助人
aiens + 21 我很赞同
云飞 + 1 乐于助人

查看全部评分

发表于 2008-9-11 15:39:22 | 显示全部楼层
好贴,我来顶了。
发表于 2008-9-11 17:21:19 | 显示全部楼层
这样的人不多了,最好的支持是要回帖顶起!
发表于 2008-9-11 17:23:58 | 显示全部楼层
不错,只得看下! :loveliness:
发表于 2008-9-11 17:43:02 | 显示全部楼层
学习ing
发表于 2008-9-11 20:07:15 | 显示全部楼层
精辟!学习中!
发表于 2008-9-11 20:13:27 | 显示全部楼层
:victory: :victory: :victory: :victory: :victory:
发表于 2008-9-11 20:47:56 | 显示全部楼层
精神上支持你 写了这么多 真的辛苦啦····
发表于 2008-9-11 21:39:19 | 显示全部楼层
8错。。。
发表于 2008-9-11 23:31:35 | 显示全部楼层
多谢啊 太有帮助了!!!!
发表于 2008-9-12 01:57:55 | 显示全部楼层
确实很不错啊,辛苦了
发表于 2008-9-12 10:16:57 | 显示全部楼层
希望再接再厉
发表于 2008-9-13 12:22:09 | 显示全部楼层

不错,支持

不错,支持 不错,支持
发表于 2008-9-13 13:01:41 | 显示全部楼层
谢谢。。4
发表于 2008-9-14 15:04:14 | 显示全部楼层
不错 看了懂了一点
您需要登录后才可以回帖 登录 | 点击这里注册

本版积分规则

小黑屋|Archiver|phpcms网站管理系统 ( 京ICP备14011169 )

GMT+8, 2019-12-15 01:46 , Processed in 15.285551 second(s), 11 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表