《2022年joomla模板完美开发教程.pdf》由会员分享，可在线阅读，更多相关《2022年joomla模板完美开发教程.pdf（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Joomla 模板制作实战教程【一】-创建一个简单的模板Joomla 绝对是一款优秀的CMS ，相较一些国产CMS她始终不能占据优势地位，很多人说Joomla 做模板难、 Joomla 不支持静态生成、 Joomla 执行效率低等等，但其实Joomla 团队为这些东西做了很多的功夫，细细研究不难发现，Joomla 模板只需要会Html+CSS就行了，Joomla 的静态生成其实就是System-cache ( 缓存插件 ) ，当做足了优化之后，Joomla 的执行效率是相当可观的，如本站（优化的方法会在后面的教程中提及）话说 Joomla 模板难做， 这是很多入门的学习者遇上的足以让他放弃Jo
2、omla 的门槛， 那么我要说的是Joomla 模板一点不难，它的难点根本不在于“是否会PHP ”，而是在于不敢钻研的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。做之前我们必须要准备这几样东西！11、持之以恒的心22、必要的 HTML+CSS 基础知识33、熟悉了 Joomla 的使用方法、工作原理44、一丝不苟的工作态度。55、认认真真的看好教程，不要急着复制粘贴。开始我们的模板制作（以Joomla 为例，完结之后会推出Joomla 相关教程）安装好Joomla ，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask，这时候在
3、后台我们尚且看不到有jk_joomlask的这个模板选项。*Joomla 网站系统是基于utf-8 编码编写的，所以以下所有操作的文件都务必保存为utf-8编码。第一步我们需要让其在Joomla 后台中显示这个模板选项，创建文件， 不要担心会不会xml，很简单，根据官方文档给出的说明，照着写便是： 扩展 - 模块管理 - 创建一个定制HTML （mod_custom）模块，在编辑器中插入一张图片（ LOGO ） ，这个模块定名为LOGO ，模块标题隐藏，模块位置选择jk_logo然后我们再创建顶部广告（利用Joomla 自带的广告管理） ，将我们设计好的广告图片上传至/images/banne
4、rs/进入后台 -旗帜广告 - 分类管理 - 创建一个新的广告分类，定名为“ JOOMLASK”， 再回到旗帜广告 - 客户管理 -创建一个新的客户，定名为“JOOMLASK”回到旗帜广告 - 广告管理 - 创建一个新的广告，名称设置为“头部中间广告”, 分类和客户设置为“ JOOMLASK”，广告URL设定为，广告图片选择我们刚才上传的广告广告创建结束后， 模块中并未显示，所以我们再回到扩展- 模块管理 - 创建一个旗帜广告模块模块位置选择jk_adtop ，保存创建的广告模块。下面我们还要创建右上角的相关信息模块，这是一个定制HTML模块，模块管理- 创建一个定制 HTML 模块，在编辑器
5、中输入以下代码： 新 用 户 注 册| 会员登陆 | 商 务 合 作 | 正體中文 创建定制HTML模块就不多说了，同第一步创建LOGO 模块一样那么这时候jk_header的这三个模块没有实质样式，再打开/templates/jk_joomlask/css/修改代码为：charset utf-8;/*-# Copyright (C) JOOMLASK. All Rights Reserved.# license - Copyrighted Commercial Software精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢
6、迎下载 名师归纳 - - - - - - - - - -第 2 页，共 7 页 - - - - - - - - - - # Author: JOOMLASK# Websites: # This file may not be redistributed in whole or significant part.-*/*-*/bodybackground : #fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height: ;font-size: 12px; acolor : #006699;text-decoration:n
7、one ; /*global*/#jk_wrapper #jk_wrapper.main width : 1000px; margin: 0 auto ; #jk_header.main height: 70px; #jk_header.jk_logo float:left; width: 252px; padding-top: 10px; height: 60px; #jk_header.jk_headad float:left; width: 468px; #jk_header.jk_headinfo float:right; width: 260px; height: 60px; #jk
8、_header.jk_headinfo p margin : 0; padding-bottom: 10px; #jk_nav.main height: 63px; background:red ; #jk_ad_top.main height: 90px; background:yellow; #jk_body.main height: 300px; background:blue ; #jk_bottom.main height: 170px; background:green ; 我们定义了头部的这些样式，自然也要在前端给它装上，更改头部代码如下 扩展 - 模块管理- 创建一个新的菜单模
9、块（mod_mainmenu ） ，模块位置选择jk_bnav ，不显示子菜单，上在我们也讲到了高级配置中设置的菜单ID 来区分，这里的底部菜单我们就填入ID 为：dropdown_bottom继续给底部菜单添加样式，补充后的样式为（底部的绿色标识背景也去除）：charset utf-8;/*-精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 7 页 - - - - - - - - - - # Copyright (C) JOOMLASK. All Rights Reserved.# licen
10、se - Copyrighted Commercial Software# Author: JOOMLASK# Websites: This file may not be redistributed in whole or significant part.-*/*-*/bodybackground : #fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height: ;font-size: 12px; /* 新加了一些公用样式 */body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fie
11、ldset,legend,input,textarea,select,button,th,tdmargin : 0;padding : 0;ol,ul,lilist-style-type:none ; /*global*/#jk_wrapper /* 定义每个框架的宽度、居中对齐*/#jk_wrapper.main width : 1000px; margin: 0 auto ; /* 定义需要设定固定高度的DIV高度*/#jk_header.main height: 70px; background:black ; /* 菜单详细样式代码 */#jk_nav margin-bottom: 6
12、px; #jk_nav.main height: 63px; background : url ( ./images/repeat-xlefttop ; #jk_nav ul #dropdown display: block ;height: 63px;margin: 0; padding : 0 0 0 16px; position: relative; #jk_navul #dropdownli float: left; font-family: 微软雅黑,Tahoma,Geneva, sans-serif;font-size : 14px;font-weight: bold ;heigh
13、t: 35px; #jk_navul #dropdownli a color : #FFFFFF ;display: inline-block ; height : 29px; padding : 6px 12px 0; #jk_nav ul #dropdown a color : #336699; #jk_navul #dropdown , ul #dropdownbackground : url ( ./images/repeat-xscroll50%toptransparent; #jk_navul #dropdownul background : nonerepeatscroll00t
14、ransparent !important;font-weight: normal ;height: 28px !important;#jk_navul #dropdownul display: block ;font-weight: normal ;height: 28px !important;visibility: visible; #jk_navul #dropdownul font-weight: normal ;height: 28px;left: 0; position: absolute ; top : 34px; visibility: hidden ; width : 72
15、8px;z-index: 9999;#jk_nav ul #dropdown ul li background : none repeatscroll0 0 transparent;color: #000000;float: left; font-weight: normal ; height : 28px; #jk_navul #dropdownul background : nonerepeatscroll00transparent; font-weight: normal ; #jk_navul #dropdown ul li a background : none repeatscro
16、ll0 0 transparent; color : #006699; display: inline-block !important; font-size: 12px; font-weight: normal ; 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 7 页 - - - - - - - - - - height : 22px !important;#jk_nav ul #dropdown ul li a span display: inline-block ;height: 22
17、px; /* 最新的广告尺寸为 1000*80的大小*/#jk_ad_top margin-bottom: 6px; #jk_ad_top.main height: 80px; background:yellow; /* 给中间内容部分一个底外边距 */#jk_body margin-bottom: 6px; #jk_body.main height: 800px; background:blue ; #jk_bottom.main height: 170px; /* 新加了底部主菜单的样式 */#jk_bottomul #dropdown_bottom overflow: hidden ;t
18、ext-align: center ; width : 100% ; #jk_bottomul #dropdown_bottom li border-left: 1px solid#CCCCCC; display: inline; padding : 0 8px; #jk_bottom ul #dropdown_bottom border-left: medium none; 二）版权信息及联系方式等这个应该算是最简单的了，后台- 扩展 -模块管理 - 创建一个定制HTML模块，命名为：底部版权，并选择jk_footer模块位置，编辑器代码模式下插入以下代码：Copyright ?2010-2011 JOOMLASK. All rights reserved Server. Power by style=text-align: center;邮箱： joomlasker( at ) 本站目前PR= 4，提供 友情互链 、广告赞助 JOOMLA技术支持 ，客服 保存后，观看一下本前的所有内容前台效果：教材 -结束！精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 7 页，共 7 页 - - - - - - - - - -