CMS介绍

什么是cms

就是别人已经把数据库和基本的php代码设计好了。只需要我们填充静态页面和基本的数据，就可以做成一个网站。

能做那些网站

1 只能做一些，逻辑比较简单。

2 以展示内容为主，主要是静态页面。

3 不需要和用户进行太多的交互。

4 适合做企业的门户网站，素材网站等。

不适合做的网站

1 逻辑比较复杂的，和用户有较多的交互的。

2 比如，电商网站，社交网站，新闻类网站。

开源的cms系统有哪些

dedecms开源网站，偏向于美工使用的系统，操作起来比较简单，只需要套静态页面就行（适合于企业的门户网站）。

phpcms开源的，相对来说比较复杂，适合于php程序员做一些二次开发，做稍微大一点的网站。

开源的cms系统有哪些特点

（1） 强大的后台管理功能

（2） 网站的前台绝大部分页面真静态

（3） 采用mvc架构，便于扩展新的内容

（4） 强大的采集功能，便于采集其他的网站内容

（5） 强大的标签体系，便于在模板中取出数据

案例演示：http://www.dedecms.com/caseshow/e-gov/

安装dedecms

a 下载dedecms

b 下载完成的页面，放到网站的根目录中直接进行解压

c 访问dede进行安装

点击uploads之后出现安装的页面

设置数据库的密码和管理员的初始密码

安装成功之后的页面

网站的首页访问：

目录结构

使用编辑器将我们的项目搭建起来

a目录

用于存放网站生成的静态页面

data目录

用于存放数据库的配置信息文件和一些缓存的数据文件

dede目录

cms的后台主程序目录

include目录

用于存放dede核心文件目录，比如数据库类，文档的上传类，标签的解析类。

install目录

dede的安装目录

memeber目录

会员目录，主要是对会员进行增删改查的操作

plus目录

插件目录，如果后期我们有特别的需求，可以自己把相应的程序文件放在这里使用

templets目录

静态文件模板目录，用于存放我们的静态页面

uploads目录

上传文件的保存目录，比如上传的图片等。

完成一个新闻类型的网站

访问到dedecms的后台

http://localhost/dede-1/uploads/dede/login.php

创建模型

现在dede中默认有以上的模型，等到后续如果这些模型不能满足我们的需求我们可以自己创建。

模型值得就是，这个网站的内容的类型。

因为我们要创建一个新闻类型的网站，只需要使用使用文章模型即可。

创建栏目

顶级导航：体育新闻、娱乐新闻

体育新闻：足球新闻、武术新闻

娱乐新闻：明星轶事、明星八卦

a 打开后台创建栏目

b 进行网站顶级栏目的添加

添加娱乐新闻

c 顶级栏目添加之后的效果

d 点击增加子级为每一个顶级栏目添加二级栏目

二级栏目增加之后的效果:

e 栏目增加完成之后,刷线前台页面,即可看到效果

添加内容

a 为网站增加文章

b 添加具体的文档内容

c 文章添加完成之后的效果

d 在首页查看刚才添加的文章内容

生成静态页面

生成首页静态页面

生成栏目静态页面

生成内容静态页面

dedecms里面主要的表

dede_channeltype（模型表）

这个表主要使用与我们保存模型的

dede_arctype（栏目表）

deede_archives(内容主表)

dede_addonxxx(附加表)

每一个附加表,都是为了保存这个模型下面所独有的内容

表之间的关系

模型表与栏目表

由于每个栏目必然要确定是哪一个模型下面的栏目所以这里dede_channeltype模型表中的id字段对应的就是dede_arctype栏目表中的channeltype字段进行关联

内容主表与栏目表

内容主表的typeid与栏目表中id是对应的

内容主表和附加表

这两个表中的typeid是相对应的

开发一个电影网站（添加数据信息）

创建电影模型

a 创建模型的一个步骤

核心—->内容模型管理——–>增加模型

b 增加一个电影模型

增加成功之后的界面

模型所对应的附加表

添加属性字段

因为增加模型时,默认添加的字端,不能满足我们的需求,所以我们要自己手动的增加一些字段.

a 更改已经创建好的模型

b 添加主演字段

c 添加导演字段

d 增加年代字段

e 增加语言的字段

f 增加地区的字段

g 增加评分

h 评分人数

j 增加简介的字段

字段增加完成之后的效果’

查看已经创建好的电影模型附加表所对应的字段

创建电影网站栏目

顶级导航：我的电影、国产大片、原声影院、欧美大片、3D影院、公司简介、关于我们

我的电影：爱情、动作、科幻、惊悚、儿童、动漫

a 使用批量添加顶级导航栏目

b 增加导航栏目

将公司简介,和关于我们两个栏目添加成为文章类型的

增加之后的页面

添加具体电影数据

a 在内容管理中添加电影数据

b 增加电影数据:

制作电影网站首页

复制模板文件到项目中

a 将我们的模板复制到templets中

修改模板文件的默认风格

修改dede默认加载静态页面的路径

将a67模板首页改名,作为整个网站的首页

生成首页文件

a 在生成栏目下找到更新主页html页面的按钮’

b 选择a67下面的index.htm文件

c 首页更新成功

修改首页资源路径

此时的常量所代表的路径:

a 新建一个demo.html文件测试

b 重新生成首页文件,显示出路径

c 更新主页html之后重新生成的页面,路径的输出结果如下

d 将index.htm中的静态资源路劲进行修改

路径修改完成之后,重新生成主页html页面,并且进行访问

dede里面的标签

单标签

语法格式：

{dede:标签名称 属性1=属性值1 /}

例如：

{dede:global.cfg_templets_skin/}

{dede:include filename=”head.html”/} 表示包含一个外部文件

注意：很多单标签以global开头的变量值都是在common.inc.php这个文件中进行定义的

双标签

语法格式：

{dede:标签名称 属性1=属性值1 属性2=属性值2}

[field:字段名称/]

{/dede:标签名称}

注意：

1、dede后面要有一个冒号：

2、标签名和属性之间要有空格

3、属性与属性之间也要有空格分开

4、结束双标签要以斜线打头

5、[field:字段名称/]里面的字段名称，一般是双标签所操作的表里面的字段名称

举个栗子：

{dede:channel type=’top’ row=’10’ }

<li><a href='[field:typeurl/]’ [field:rel/]><span>[field:typename/]</span></a></li>

{/dede:channel}

每一个双标签都对应一个解析文件，通过该解析文件完成标签到PHP代码的转换。

解析标签为sql语句的,文件位置

所有的前段使用的取数据的标签都在php中被解析了

常用双标签

channel 取出栏目数据的标签

arclist 取出文章的标签

channnelartlist 取出栏目和栏目下的所有数据

标签的定影位置:

取出首页中的栏目数据

使用channel标签取出数据库中的数据进行显示:

举个栗子：

{dede:channel type=’top’ row=’10’ }

<li><a href='[field:typeurl/]’ [field:rel/]><span>[field:typename/]</span></a></li>

{/dede:channel}

type:top表示取出顶级标签

row:10 取出十条数据

a 使用demo.html页面进行测试

输出的效果如下:

b 在首页index.htm中使用channel标签,输出顶级栏目

c 重新生成index.htm页面

查看效果:

顶级栏目就显示完成

取出“我的电影”栏目的子栏目

这里我们还要使用channel标签

重新生成index.htm查看效果

多学一招:解析channel标签的使用,

每一个标签都是对应的一个PHP文件

在channel.lib.php中打印出执行的sql语句

打印到的效果如下:

这里虽然调用了标签,但是他的后面确实跟着一个php文件

取出如下电影数据（首页专题电影）

使用arclist标签实现

channelid属性

用来确定是哪个模型下面的数据信息以及确定哪个附加表进行关联

addfields属性

如果不使用addfields属性，则只会关联内容主表和栏目表进行数据查询，所以当我们需要查询附加表中的数据时就必须要使用addfields属性。这个属性标明附加表dede_addmovie需要使用的字段.

格式：addfields=“字段1,字段2,字段3”;//指定的是要从附加表中获取的字段信息列表。

注意：要想从附加表中取得数据那么就必须同时使用addfields属性和channelid属性

取出数据的代码：

回顾

1. 计算机单位
   1. 最小单位是位（B）
   2. 字节（b） 一个字符的大小
   3. 1K=1024b
   4. 1M=1024K
   5. 1G=1024M
   6. 1T=1024G
2. 进制转换
   1. 十进制转二进制：整数除2反向取余，小数乘2正向取整
   2. 二进制转成十进制：以2为底，从右往左依次是2的0次方，1次方…
   3. 八进制转二进制，一个八进制转成3位的二进制，然后再合并起来
   4. 十六进制转二进制：一个十六进制转成4位的二进制，然后在合并起来。
3. 网页中的颜色表示：光的三原色，红色（red），绿色(green)，蓝色（blue）。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255，颜色的表示通过RGB的十六机制数表示，
4. CSS介绍：层叠样式表，用来控制网页的外在表现（网页的装修），
5. 语法

选择器{

属性:属性的值;

属性:属性的值;

}

1. 注释 /* */
2. CSS选择器
   1. ID选择器
      1. 以#开头
      2. 只能供一个元素使用。
   2. 类选择器
      1. 以点（.）开头
      2. 可以供多个元素使用
   3. 标签选择器：选择标签
   4. 通配选择器：*
   5. 组合选择器：h1,#aa,.bb
   6. 后代选择器：p b #aa .bb
   7. 子元素选择器p>b
   8. 相邻元素选择器div+p div~p
   9. 伪类：4种状态。 lvha
      1. :link 正常连接的状态
      2. :visited 点击完后代状态
      3. :hover 当鼠标移上去的时候状态
      4. :active 当鼠标点击下去的状态

网页中图像的基础知识

1. 位图：由像素点组成的图
   1. 体积大
   2. 放大失真
   3. 颜色丰富，达到256*256*256种颜色

1. 矢量：是由线条和面组成的图形
   1. 体积小
   2. 可以无限制的放大
   3. 支持的颜色数比较少

脚下留心：网页上的图片都是位图

1. 分辨率

思考：是不是像素点越多，图片的质量越高？

答：不是，衡量一个照片的质量通过的是分辨率。

分辨率：单位长度里的像素点的多少，一般都以一英寸为单位。

在尺寸一定情况下，分辨率越大质量也好，图片的体积也越大，网页打开的速度也越慢。网页上的分辨率一般是72。（印刷的分辨率一般在300）

1. 网站默认尺寸单位为象素（px）。
2. 网页常见的图象格式：网页中常用的图片格式有png，jpg，gif

伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type=”text/css”>

a.first:link{

color:#F00;

text-decoration:none;

font-size:12px;

}

a.first:hover{

color:#060;

text-decoration:underline;

font-size:12px;

}

a.second:link{

color:#00F;

text-decoration:overline;

font-size:36px;

}

a.second:hover{

color:#90F;

text-decoration:underline;

font-size:36px;

}

</style>

<a href=”#” class=”first”>链接1</a> <br>

<a href=”#” class=”first”>链接1</a> <hr>

<a href=”#” class=”second”>链接2</a> <br>

<a href=”#” class=”second”>链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type=”text/css”>

p:first-letter{ /*选择元素的第一个字*/

font-size:24px;

color:#F00;

}

div:first-line{ /*选择元素的第一行*/

font-size:12px;

color:#060;

text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

属性选择器

1. 元素[属性]：具备指定属性的元素

1. 元素[属性=值]：选择指定属性指定值的元素

1. 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

1. 元素[属性|=值]：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素

E1[attr] element（元素） attribute（属性）

常用CSS属性的讲解

字体属性

<style type=”text/css”>

body{

color:#F00; /*字体颜色*/

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”; /*字体*/

font-size:16px; /*字号*/

font-weight:bold; /*字体粗细*/

text-decoration:underline; /*文本修饰*/

text-transform:uppercase; /*文本转换（大小写）*/

line-height:30px; /*行高*/

}

</style>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

I a am boy!

运行结果

详细说明text-transform属性值

思考：为什么font-family跟多个字体？

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”;

答：客户端首先用第一个字体来解析，如果没有就选择第二个字体，依次类推，一直到最后。如果一个字体都没有，就选择客户端的默认字体。中文的浏览器默认字体是宋体。

文本属性

text-align的值

尺寸属性

width：宽度

height：高度

边框属性

多学一招：

背景属性

边距属性 （margin）

margin-top：上边距

margin-right：右边距

margin-bottom：下边距

margin-left：左边距

margin：符合边距

列表属性

内容溢出属性

overflow:hidden; /*溢出部分隐藏*/

overflow:auto; /*如果有溢出，就会出现垂直滚动条*/

CSS样式的的分类

样式按照写的地方不同分成3类：

1. 内部样式：写在页面的内部，只能给当前页面使用

<style type=”text/css”></style>

1. 外部样式：写在页面的外部，可以给所有页面使用

新建一个css文件，将样式写到文件中

1. 行内样式：写在元素的后面，只能给当前元素使用

<div style=””></div>

内部样式

写在页面的内部，通过<style>开头</style>结束，可以给整个页面使用

行内样式

每个元素都有style属性，通过style属性也元素添加样式

外部样式

将样式写到外部文件中，给所有页面使用

第一步：创建CSS文件

脚下留心：在CSS文件中，不需要<style>开头，</style>结束。

第二步：新建html，并引入css文件

引入CSS文件的方式：链接和导入

1. 链接

语法：<link rel=’stylesheet’ href=’地址’>

1. 导入

语法：@import url(地址);

思考：为什么<link>不需要写在<style></style>之间，而@import需要呢？

答：因为<link>是HTML标签，而@import是CSS指令

思考：<link>和@import引入样式的区别？

分析：

答：1、<link>在HTML页面中引入CSS文件

2、@import在HTML页面和CSS页面都能引入。

样式的继承

内层标签继承和覆盖外层标签的样式。

1. 子级标签继承父级标签没有的样式
2. 子级标签覆盖父级标签相同的样式

样式的优先级

1. ID选择器>CLASS选择器>HTML标签选择器
2. 直接（行内）样式表>内部样式表>外部样式表

例题2

1. class=“类1，类2”，以类的加载的顺序为优先级，后加载的将先加载的覆盖。

1. 强制优先级（important）

1. 权重叠加
   • 标签 < 类 < id选择器<直接<important
   • 1 < 10 < 100 <1000<10000

例题：

标签的显示模式

标签的显示模式有两种：块显示，行显示

1. 块显示特点
   1. 上下排列
   2. 默认宽度是100%，高度0px
   3. 可以设置宽度和高度
2. 行显示特点
   1. 左右排列
   2. 默认框架是宽度0px，高度是0px
   3. 不能设置宽度和高度

思考：如何设置行显示标记的宽度和高度？

答：将行显示转成块显示即可

思考：既要设置宽高，又要显示在一行，如何实现？

display:block; 将标签显示方式改为块显示

display:inline：将标签显示方式改为行显示

div+css拼版好处

1. 提高页面执行效率
2. 代码维护变得简单
3. 提高代码的可重用性。