< 返回 7.4 为模块设置样式 - v0.0.8版本 - C计划

在前面一节中,我们已经能够在前台输出菜单模块了,但菜单显示出来的样式似乎并不如我们的期待,在这一节我们就来优化这个菜单,让他显示得比较美观。

1,本节目标


美化菜单模块,了解模板开发的工作范畴

2,网站的前端与后端


开发一个完整的网站,一般需要两个部门的技术支持,也就是我们经常所说的前端和后端。后端负责输出数据,前端负责美化。

使用Joomla的一个好处就是你无需后端,就可以制作出一个功能齐全的网站,因为Joomla已经为我们实现了一个非常强大的后端,输出数据完全没有问题(如菜单管理,文章管理,模块管理等等,这就是Joomla为我们体用的后端支持)。上一节我们在前台发布了一个菜单模块,那么菜单模块的数据就已经有了。

剩下的部分也就是对数据展示的外观进行调整了。这也是模板开发的主要内容。理论上,你不需要任何的后端只是,只要你懂得基本的CSS知识,了解Joomla的模板原理,是可以做出很复杂的网站。

3,美化页面


当你能够熟练的使用Joomla来生产数据(如:文章,模块等等),那么模板开发的问题已经和Joomla并没有太多的关系了。剩下的都是简单的HTML,CSS知识。

前台已经输出了我们要的数据,如图

joomla模块的内容输出.png

如何来优化,自然就是写一些css样式了。这些是很基础的内容,如果你不清楚,请参考相关的章节:CSS

 4,浏览器调试工具


现在要说的内容已经和Joomla关系不大了,是一些通用的技术——CSS。在写CSS之前,我们需要了解一下浏览器提供的调试工具,能够大大的加快工作进度。

各种浏览器的调试工具并不一样,建议大家安装chrome浏览器,或者firefox浏览器。

5,如何使用浏览器的调试器来快速的写css样式


个人比较喜欢chrome的调试工具,在这里就以chrome浏览器为例来说明。

5.1,将鼠标放到需要调整样式的元素的上面。然后点击右键,在弹出框中选择审查选项,打开浏览器的调试器。如图:

使用浏览器的调试工具.png

5.2,在调试器中,系统会自动定位到当前元素的位置,然后你就可以查看该元素的HTML代码结构,以及现有的CSS样式。如图:

chrome调试器.png

5.3,直接在右边的css样式栏中更改即可,可以立刻看到效果。

css修改页面样式.png

5.4,将写好的样式复制下来,存储到CSS文件中。(如何在页面加载css文件前面已经介绍了,不清楚的可以参考:给模板增加CSS文件,JS文件-v0.0.2版本

6,v0.0.8版本


在本版本中,我仅仅只是调整了一下菜单部分的CSS代码。让他美观一点。(实际上,模板开发的大部分工作就是写CSS代码,请大家记住这一点)。

6.1 代码如下:

.nav {
    height: 60px;
    color: #000;
}
.nav .nav.menu {
    background: #fff;
}
.nav .nav>li {
    position: relative;
    display: inline-block;
    height: 60px;
    line-height: 40px;
}

6.2 前台显示的效果如图:

planc_v0.0.8效果图.png

6.3  v0.0.8版本的代码

关于v0.0.8版本的代码,可以在此下载 tpl_plancv0.0.8_2019-01-13_for_j3x.zip

7,说明


7.1 有一些样式我并没有写,为什么会被应用到元素上面呢?

joomla是模块化的,每一个模块都可以有自己的样式文件。一般的开发者会提供一个相对简单的样式,如果模块默认的样式不满足你的要求的时候,你可以在模板中对这些默认的样式进行覆盖重写

7.2 关于css的说明

模板开发的大部分的工作是为模块的位置写css。由于本教程的核心是介绍Joomla模板开发相关的内容,并不会详细介绍每一段css代码相关细节。大家如果对css代码不熟悉,请自行补全

7.3 剩下的工作 

学到了现在,如果你曾经手写过页面,那么基本上写一个简单的Joomla模板已经不成问题了。剩下的要做的,就是按照你的要求,在后台输出内容,然后调整样式。

C计划

第3章:Joomla模板机制
第13章:让模板支持多语言
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
在前面一节中,我们已经能够在前台输出菜单模块了,但菜单显示出来的样式似乎并不如我们的期待,在这一节我们就来优化这个菜单,让他显示得比较美观。

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程