joomla模板完美开发教程_第1页
joomla模板完美开发教程_第2页
joomla模板完美开发教程_第3页
joomla模板完美开发教程_第4页
joomla模板完美开发教程_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Joomla模板制作实战教程【一】-创建一个简单的模板Joomla绝对是一款优秀的CMS，相较一些国产CMS她始终不能占据优势地位，很多人说Joomla做模板难、Joomla不支持静态生成、Joomla执行效率低等等，但其实Joomla团队为这些东西做了很多的功夫，细细研究不难发现，Joomla模板只需要会Html+CSS就行了，Joomla的静态生成其实就是System-cache（缓存插件），当做足了优化之后，Joomla的执行效率是相当可观的，如本站www.J（优化的方法会在后面的教程中提及）话说Joomla模板难做，这是很多入门的学习者遇上的足以让他放弃Joomla的门槛，那么我要说的是Joomla模板一点不难，它的难点根本不在于“是否会PHP”，而是在于不敢钻研的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。做之前我们必须要准备这几样东西！1、持之以恒的心2、必要的HTML+CSS基础知识3、熟悉了Joomla的使用方法、工作原理4、一丝不苟的工作态度。5、认认真真的看好教程，不要急着复制粘贴。开始我们的模板制作（以Joomla1.5.x为例，完结之后会推出Joomla1.7.x相关教程）安装好Joomla1.5.x，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask，这时候在后台我们尚且看不到有jk_joomlask的这个模板选项。*Joomla网站系统是基于utf-8编码编写的，所以以下所有操作的文件都务必保存为utf-8编码。第一步我们需要让其在Joomla后台中显示这个模板选项，创建文件templateDetails.xml，不要担心会不会xml，很简单，根据官方文档给出的说明，照着写便是：<?xmlversion="1.0"encoding="utf-8”?><!DOCTYPEinstallPUBLIC"-//Joomla!1.5//DTDtemplate1.0//EN""/xml/dtd/1.5/template-install.dtd"><!--扩展的类型是模板适用的版本是Joomla1.5--><installversion="1.5"type="template"><!--模板的名称，即后台模板的显示名赧<name>JKJOOMLASK</name><!--模板的创建日期-><creationDate>2011-09-05</creationDate><!--模板的创建作者-><author>Joomlasker</author><!--作者联系邮箱-><authorEmail>joomlasker（at）</authorEmail>V./一一作者网站一〉<authorUrl></authorUrl><copyright>JOOMLASK2011</copyright><license>GNU/GPL</license><version>1.0.0</version>V!--模板的简介-><description>JOOMLASK</description>v!--模板的相关文件-><files>v!--单个文件是filename表达式-><filename>index.php</filename><filename>templateDetails.xml</filename></files>v!--模板的模块位置选项，即新建模块时的位置选择，预设以下位置<positions><position>top</position><position>bottom</position></positions></install>请细心看看上述文档，即是官方文档的标准设置这时候我们进入后台，可以看到JKJOOMLASK的模板已经出现了（如下图：）ff1.-■-ibeez模国名称裁认£JHu1.D.D仲I2QJA_Purity1.2.012/：3CJKJOOMLASK1.0.0201这时候可以将JKJOOMLASK设为默认，但保存后前台会显示一片空白。第二步，我们要让这个模板在前台能显示内容<!--照着抄--><?phpdefined'_JEXEC')ordie('Restrictedaccess');?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"><head><!--导入joomla库的<head>相关内容--><jdoc:includetype="head"/><!--link模板的主样式表--><linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/jk_joomlask/css/template.css"type="text/css"/></head><body><!--创建模块位置top--><jdoc:includetype="modules"name="top"/><!--创建文章内容组件--><jdoc:includetype="component"/><!--创建模块位置bottom--><jdoc:includetype="modules"name="bottom"/></body></html>普及一下PHP的简单知识，<?phpecho"打印内容”？>，就是我们所熟知的程序基本打印功能，示例即是打印出隐号部分内容，那么上述index.php中的<?phpecho$this->baseurl?>便是打印当前网站的绝对路径，<?phpecho$this->language;?>的意思便是当前网站的语言设置，如果我们在后台设置的网站前台语言为中文，那么通过浏览器查看源码得到的就是<htmlxmlns="/1999/xhtml"xml:lang="zh-cn"lang="zh-cn">。回到正题，index.php中，我们创建了top和bottom的两个模块位置，格式：<jdoc:includetype="modules"name="top"/>，这里的top和bottom就是我们在templateDetails.xml预设的位置配置，另外还创建了一个非常重要的组件，那就是Joomla的基本组件：文章格式如：<jdoc:includetype="component"/>，大部分新手忽略了这个从而测试的时候发现不了文章内容。保存好文件之后，刷新前台，即可看到被设定位frontpage的文章了！如下图，虽然难看了点.八、、：欢迎光ilfejoomla的世界！Joomla!社区门户网站四号目WrittenbyAdministratorSaturday,07July200709:54Jgmlal社区门户网站现已在在线运作。在那儿，你可以_得到关于推动Joomlal项目之贡献者活动消息的固定信息来源。得知全世界的Jeon间事件,并可查看是否在你附近有Jonmlal用户群oJoomlal社群杂志允诺会有引人的专题文章、社区成就、学习专题和每月的项目消息更新°并也请看看JoomlsConnectT，这个总汇RSS新闻联播，从全球把你的语言之Joomla!新闻整合在一起。请点按此处来取得最新、最好的信息。LastUpdatedonThursday,15October200907:15我们都是志愿者<-号曰Joomla!安全特攻队占殷曰IJWrittenbyAdministratorWrittenbyAdministratorSaturday,07July200709:54Saturday,07July2007IJIrriTThIr-iiI"t'i1.i'I—i-l17I尊FlI.Lt"iI4*0ri'HIrrsttsIh-lI丁石I—I4*Joomla模板制作实战教程-创建各种模块位置2011-09-2722:22在上一节Joomla模板制作实战教程【一】-创建一个简单的模板）中我们创建了一个非常简单的模板，包含了默认的文章组件、top和bottom两个模块位置。虽然看起来比较不养眼，但是我们掌握了Joomla模板的一个基本结构，这节我们要针对一个设计完整的设计稿进行规划。首先需要解释一下“模块位置”的概念。之前做的一些开发分享，总是会碰到一些似乎入门的朋友容易把模板和F模块”当成两回事，所以有必要把它们的概念讲清楚，Joomla的模板其实就相当于一个白纸，你需要在上面画上各种具体对象，它才能成为一真正模板，而我这里说的具体对象，不仅仅包括文章内容，它主要各种模块，诸如你看到的一条一条的新闻列表、排列整齐的图片列表、带输入用户名密码的登陆区域。他们构成了一个真正的模板。所以当你下载了一个新的纯模板，它安装在Joomla系统之后，是看不到你所看到的模板样子，它需要各种模块去、组件内容（如文章内容）填充这张空白的纸，模块又是组件的另-种表现形式。便于大家理解，请看下图须要有“组件内答”—__模蜘宣一模块的内答来自组件（如友情槌接，文章，第三方组件的内容、定制HTM侍等），它是模板的重要组成部分。须要有“组件内答”—__模蜘宣一很多中国风格网站首页是没有“组件内容''的位置，通常这个“组件内容”是出现在子页，而外国模板基本上在首页都留有“文章组件”的位置，但子页的内容组成除了这些蓝色的模块，还必那么看了上图之后，我们就知道模块的重要性了，它的意义在中式网站上甚至大于组件内容，理论上来说，一个JOOMLA网站可以由N个模块组成，却不需要组件内容，当然这没什么意义。第一步：我们需要针对一个完整的设计稿做出规划此次制作模板是以J为例，所以把很中式的Joomlask设计稿拿出来，针对设计稿，我们把Joomlask的设计稿划分为以下模块位置

jk_logo设计为LOGO位置jk_adtop设计为网站最顶部广告位置headinfoj<logojk_adtopmainmenujk_ad3angjk_u^arluser3adiniduser4admiduser6jk_logo设计为LOGO位置jk_adtop设计为网站最顶部广告位置headinfoj<logojk_adtopmainmenujk_ad3angjk_u^arluser3adiniduser4admiduser6usor8user?linkjk_bnavjk_footerjk_headinfo设计为顶部右上角信息位置jk_mainmenu设计为主菜单位置jk_adlong设计为整条横幅广告位置jk_left设计为左边模块位置jk_right设计为右边模块位置（仅子页显示）jk_user1,jk_user2,jk_user3,jk_user4,jk_user5,jk_user6,jk_user7,jk_user8设计为图中分另U指定位置，可以放一些通用的内容jk_admid_1,jk_admid_2设计为网站中部的两个广告位jk_link设计为底部友情链接位置jk_bnav设计为底部菜单jk_footer设计为底部综合信息compontent就是组件内容的位置（本演示设计为仅子页显示）第二步：根据规划的模块位置将其编写到模板中打开文件templates/jk_joomlask/templateDetails.xml填写代码<?xmlversion="1.0"encoding="utf-8”?><!DOCTYPEinstallPUBLIC"-//Joomla!1.5//DTDtemplate1.0//EN""/xml/dtd/1.5/template-install.dtd"><!--扩展的类型是模板适用的版本是Joomla1.5--><installversion="1.5"type="template"><!--模板的名称，即后台模板的显示名赧<name>JKJOOMLASK</name><!--模板的创建日期-><creationDate>2011-09-05</creationDate><!--模板的创建作者-><author>Joomlasker</author><!--作者联系邮箱-><authorEmail>joomlasker（at）</authorEmail><!--作者网站-><authorUrl></authorUrl><copyright>JOOMLASK2011</copyright><license>GNU/GPL</license><version>1.0.0</version><!--模板的简介-><description>JOOMLASK</description><!--模板的相关文件-><files><!--单个文件是filename表达式-><filename>index.php</filename><filename>templateDetails.xml</filename></files><!--模板的模块位置选项，即新建模块时的位置选择，预设以下位置<positions><position>jk_logo</position><position>jk_adtop</position><position>jk_headinfo</position><position>jk_mainmenu</position><position>jk_adlong</position><position>jk_left</position><position>jk_right</position><position>jk_user1</position><position>jk_user2</position><position>jk_user3</position><position>jk_user4</position><position>jk_user5</position><position>jk_user6</position><position>jk_user7</position><position>jk_user8</position><position>jk_admid_1</position><position>jk_admid_2</position><position>jk_link</position><position>jk_bnav</position><position>jk_footer</position></positions></install>这时候神奇的事情发生了，我们回到后台，扩展>模块->创建一个新模块（以mod_custom）为示例，在选择模块位置的时候我们就看到了刚才规划的这些模块位置了

位置:排序:访问簸别:ID:简介:菜单:荣单选择:10(jk_adlongjk_adlongjk__u3erS第三步：在模块文件index.php中调用安装模块位置jk_adziid_2jk_adtopjk_bnavjk_£&oterjk__headinfojk_leftjk_linkjk_lDgojk_zainriEnujk_ri^htjk_u3erljk__user2位置:排序:访问簸别:ID:简介:菜单:荣单选择:10(jk_adlongjk_adlongjk__u3erS第三步：在模块文件index.php中调用安装模块位置打开/templates/jk_joomlask/index.php，编写如下代码：<?phpdefined('_JEXEC')ordie'Restrictedaccess');?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"><head><jdoc:includetype="head"/><linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/mynewtemplate/css/template.css"type="text/css"/></head><body><jdoc:ncludetype="modules"name="jk_logo"/><jdoc:ncludetype="modules"name="jk_adtop"/><jdoc:ncludetype="modules"name="jk_headinfo"/><jdoc:ncludetype="modules"name="jk_mainmenu"/><jdoc:ncludetype="modules"name="jk_adlong"/><jdoc:ncludetype="modules"name="jk_left"/><jdoc:ncludetype="modules"name="jk_right"/><jdoc:ncludetype="modules"name="jk_user1"/><jdoc:ncludetype="modules"name="jk_user2"/><jdoc:ncludetype="modules"name="jk_user3"/><jdoc:ncludetype="modules"name="jk_user4"/><jdoc:ncludetype="modules"name="jk_user5"/><jdoc:ncludetype="modules"name="jk_user6”/><jdoc:ncludetype="modules"name="jk_user7”/><jdoc:ncludetype="modules"name="jk_user8”/><jdoc:ncludetype="modules"name="jk_admid_1”/><jdoc:ncludetype="modules"name="jk_admid_2”/><jdoc:ncludetype="modules"name="jk_link”/><jdoc:ncludetype="modules"name="jk_bnav”/><jdoc:ncludetype="modules"name="jk_footer"/></body></html>好了，请前往你的网站前台测试吧，在URL最后面，如：/2tpT,需要注意的是，第一节我们安装了组件内容位置、TOP和BOTTOM模块位置，这一节我们先将其删除。[noneojtlinel曲m.迎...瓯!业』询」…ifej1瘦碰响匹ik睡1堕理虫血.西旦..硕山旦虹啪[noneoutline]股顽tt[rwneoutline][noneoutineljkLU^^Inoneoutline]IL嵯.〔禽ikLUWS[noneoutline]noneoutine]j|tU^^[noneoutline]noneoutline]IlL熨网QI.[匹.：13..口.顼丽1.j股箜顷gZEgimUpe]—A-fjfelinhtfnoreOLitfine]到这里我们创建了很多胀眼的模块位置，有的同学可能会问了，怎么又是没内容，这简单，我们就来填充一个模块内容，就以mod_custom模块为例，后台-＞扩展-＞模块-＞创建一个定制html模块(mod_custom)，在定制HTML模块中我们输入任意内容，模块位置就选择第一个jk_logo，保存好创建的模块。

模块类型：室枷g模块仿阳K.B州莫板制作教程标墨:胃介:IAd/・一51半主■、生|/兀该模块龙许你在一个所见即所得的编辑器里崔用HTML语言创建自己的模块标墨:胃介:保存之后我们前台刷新如下:jklogofnoneoutline]…_忻JO&M氓Sk.COM棋板制作教程jffL^tQP-oneoutinel旦...辿匝旦i1定.可琶”.哩!担」性..唳.£侦..皿国..j眩宅JI印用[non9outline]ifcl^trnoneoutline]；iKirightt[noreoutline]1必更生】0国也U.套：j|^u泼什-oneoutine]Joomla模板制作实战教程-美化我们的模板【一】2011-10-2116:44上一节（Joomla模板制作实战教程-创建各种模块位置）中我们学了关于在模板中制作各种模块位置，作为模板的骨架，模块位置的外观自然占有很重要的分量。当然制作模板首先最重要的一门知识就是前端制作（HTML+CSS）在这里一些HTML+CSS的细节性知识就不多阐述了，首先我们要明确整个站点的前端框架，1必更生】0国也U.套：首先创建好整站的前端框架及基础样式根据上一节中提供的设计稿模块规划，我们将前端分为5个部分，分别是：jk_header（头部）、jk_nav（菜单）、jk_ad_top（设计之初是考虑这里放置多个广告）、jk_body（内容主体部分）、jk_bottom（底部），我们将这5个部分制作在index.php中打开/templates/jk_joomlask/index.php，编写如下代码：<?phpdefined（'_JEXEC'）ordie'Restrictedaccess':;?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"><head><jdoc:includetype="head"/><linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/jk_joomlask/css/template.css"type="text/css"/></head><body><divid="jk_wrapper"><divid="jk_header"><divclass="main"><jdoc:includetype="modules"name="jk_logo"/><jdoc:includetype="modules"name="jk_adtop"/><jdoc:includetype="modules"name="jk_headinfo"/></div></div><divid="jk_nav"><divclass="main"><jdoc:includetype="modules"name="jk_mainmenu"/></div></div><divid="jk_ad_top"><divclass="main"><jdoc:includetype="modules"name="jk_adlong"/></div></div><divid="jk_body"><divclass="main"><jdoc:includetype="modules"name="jk_left"/><jdoc:includetype="modules"name="jk_right"/><jdoc:includetype="modules"name="jk_user1"/><jdoc:includetype="modules"name="jk_user2"/><jdoc:includetype="modules"name="jk_user3"/><jdoc:includetype="modules"name="jk_user4"/><jdoc:includetype="modules"name="jk_user5"/><jdoc:includetype="modules"name="jk_user6"/><jdoc:includetype="modules"name="jk_user7"/><jdoc:includetype="modules"name="jk_user8"/><jdoc:includetype="modules"name="jk_admid_1”/><jdoc:includetype="modules"name="jk_admid_2”/></div></div><divid="jk_bottom"><divclass="main"><jdoc:includetype="modules"name="jk_link”/><jdoc:includetype="modules"name="jk_bnav”/><jdoc:includetype="modules"name="jk_footer"/></div></div></div></body></html>然后我们要给这些前端框架一些外观样式打开文件/templates/jk_joomlask/css/template.css编写代码：(以下代码为了方便学习识别，会暂时在框架上加上一些颜色、高度以区分)@charset"utf-8";/*Copyright(C)JOOMLASK.AllRightsReserved.@license-CopyrightedCommercialSoftwareAuthor:JOOMLASKWebsites:Thisfilemaynotberedistributedinwholeorsignificantpart.*//**body{background:#fff;color:#000;font-family:Tahoma,Geneva,sans-serif;line-height:1.5;font-size:12px;}/*global*/#jk_wrapper{}/*定义每个框架的宽度、居中对齐/#jk_wrapper.mainwidth:1000px;margin:0auto;/*定义需要设定固定高度的/V高度*/#jk_header.main{height:70px;background:black;#jk_nav.main{height:63px;background:red;}#jk_ad_top.main{height:90px;background:yellow;}#jk_body.main{height:800px;background:blue;}#jk_bottom.main{height:170px;background:green;}上述样式是给大框加进行了大体上的设定，并附加了颜色加以区分，在后面的控制中我们会把这些背景色全部去掉。那么我们现在测试以上改的结果如下图那么这样确实蛮难看的！我们现在就开始创建三个头部模块，一个LOGO,一个顶部广告，一个右上角的快捷信息。进入后台->扩展->模块管理->创建一个定制HTML(mod_custom)模块，在编辑器中插入一张图片(LOGO)，这个模块定名为LOGO，模块标题隐藏，模块位置选择jk_logo<div><ahref=""target="_blank"><imgsrc="/templates/jk_joomlask/images/logo.gif"border="0”/></a></div>DetartsModuteType:TitFe:LOGOShowTithe:&血广Yese皿e：rN(JYesPosition:二|OrderP^bliLEpecinl-二|曲0DescripttonThisModuleallowsyoub然后我们再创建顶部广告（利用Joomla1.5自带的广告管理），将我们设计好的广告图片上传至ZimagesZbannersZad_top_1.jpgMenuAssignmentPhlenus:旧All广NenePJenuSeection:之家iQEE进入后台->旗帜广告->分类管理->创建一个新的广告分类，定名为“JOOMLASK”，再回到旗帜广告->客户管理->创建一个新的客户，定名为“JOOMLASK”BannerClient:[New]回到旗帜广告->广告管理->创建一个新的广告，名称设置为“头部中间广告”，分类和客户设置为“JOOMLASK”，广告URL设定为http:ZZ,MenuAssignmentPhlenus:旧All广NenePJenuSeection:之家iQEEName:头迓=间工亡AHdSriz—ksai>tiowBanner:广Np&YesStbcky:<•ndYesOrtfenjiCategory:|joohusk-CtientName;jodmlask二JsPurchased:|~|Unlimited匠ClickURL:g+pjwluuirfUT~Clicks：0EeSClickslannerCoW:■iption^Notes;a.geSe[ector:aitopi.Jpr▼|Width:.\HerghtrannerImage:468X60JOOMLASK.COM广告创建结束后，模块中并未显示，所以我们再回到扩展->模块管理->创建一个旗帜广告模块TargetParentWinz-ziTFtitkErc-TssrNavi5:2.1isr.二JCount1BannerClient.joohlasktICategory：oo£i=K『SearchByTags•Nd广yesRandomise史让岫，wawi砧二J模块位置选择jk_adtop，保存创建的广告模块。下面我们还要创建右上角的相关信息模块，这是一个定制HTML模块，模块管理-＞创建一个定制HTML模块，在编辑器中输入以下代码：<p><ahref="/member.php?mod=register.php"target="_blank"><spanstyle="color:#ff0000;">新用户注册</span></a>|<ahref="/"target="_blank">会员登陆</a>|<ahref="/news/cooperation.html”target="_blank”>商务合作<^>|<strong><aid="translateLink"style="color:red;font-weight:bold;">正醴中文</a></strong></p><p><ahref="/forum.php?mod=forumdisplay&amp;fid=14”target="_blank"><imgsrc="/images/stories/img/other/button_temp_03.gif”alt="button_temp_03"width="123"height="26”/></a>&nbsp;&nbsp;<ahref="/forum.php?mod=forumdisplay&amp;fid=6”target="_blank"><imgsrc="/images/stories/img/other/button_temp_05.gif”alt="button_temp_05"width="123"height="26”/></a></p>创建定制HTML模块就不多说了，同第一步创建LOGO模块一样那么这时候jk_header的这三个模块没有实质样式，再打开/templates/jk_joomlask/css/template.css修改代码为：@charset"utf-8”;/*Copyright(C)JOOMLASK.AllRightsReserved.@license-CopyrightedCommercialSoftwareAuthor:JOOMLASKWebsites:Thisfilemaynotberedistributedinwholeorsignificantpart.*//**body{background:#fff;color:#000;font-family:Tahoma,Geneva,sans-serif;line-height:1.5;font-size:12px;}a{color:#006699;text-decoration:none;}/*global*/#jk_wrapper{}#jk_wrapper.mainwidth:1000px;margin:0auto;}#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_header.jk_headinfop{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;}我们定义了头部的这些样式，自然也要在前端给它装上，更改头部代码如下<?phpdefined('_JEXEC')ordie'Restrictedaccess');?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"><head><jdoc:includetype="head"/><linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/jk_joomlask/css/template.css"type="text/css"/></head><body><divid="jk_wrapper"><divid="jk_header"><divclass="main"><divclass="jk_logo"><jdoc:ncludetype="modules"name="jk_logo"/></div><divclass="jk_headad"><jdoc:ncludetype="modules"name="jk_adtop"/></div><divclass="jk_headinfo"><jdoc:includetype="modules"name="jk_headinfo"/></div></div></div><divid="jk_nav"><divclass="main"><jdoc:includetype="modules"name="jk_mainmenu"/>

</div></div><divid="jk_ad_top"><divclass="main"><jdoc:ncludetype="modules"name="jk_adlong"/></div></div><divid="jk_body"><divclass="main"><jdoc:ncludetype="modules"name="jk_left”/><jdoc:ncludetype="modules"name="jk_right"/><jdoc:ncludetype="modules"name="jk_user1”/><jdoc:ncludetype="modules"name="jk_user2”/><jdoc:ncludetype="modules"name="jk_user3”/><jdoc:ncludetype="modules"name="jk_user4”/><jdoc:ncludetype="modules"name="jk_user5”/><jdoc:ncludetype="modules"name="jk_user6”/><jdoc:ncludetype="modules"name="jk_user7”/><jdoc:ncludetype="modules"name="jk_user8”/><jdoc:ncludetype="modules"name="jk_admid_1”/><jdoc:ncludetype="modules"name="jk_admid_2”/></div></div><divid="jk_bottom"><divclass="main"><jdoc:ncludetype="modules"name="jk_link”/><jdoc:ncludetype="modules"name="jk_bnav”/><jdoc:ncludetype="modules"name="jk_footer"/></div></div></div></body></html>468X60JOOMLASK.COM468X60JOOMLASK.COM^==1-垄H智中宜It豪圈雄廿廖■若土•口时既.■vjoomu^KJoomla模板制作实战教程-美化我们的模板【二】2011-11-1117:04上一节（Joomla模板制作实战教程-美化我们的模板【一】）中我们学了美化模板的最重要知识，即是对模块进行美化，本节我们继续对整站的模块进行完善，说的简单点就是，先把那些预置的模块位置框架设计完全，经过上节的简单DIV+CSS讲解，想必大家也课下了解了一下DIV+CSS的知识，那么我们后面就不对DIV+CSS的一些构建原理做过多阐述。创建主菜单一）创建菜单在/templates/jk_joomlask/index.php，前一节中我们已经编写如下代码，其中<jdoc:includetype="modules"name="jk_mainmenu"/><divid="jk_nav"><divclass="main"><jdoc:includetype="modules"name="jk_mainmenu”/><!--调用菜单模块--></div></div>进入后台->菜单->创建新菜单，这时候由于我们菜单暂时还没有指定的内容，所以我们创建菜单的时候注意设置成“自定义链接”，链接设定为当前页涔”，以保证有点击手形，好的，创建如下菜单（文章尾部的Quickstart安装包中的菜单链接示例数据是来自

Filter:GoIReset#r1r首页2r.LjkDisjiz；p口苴3rLjKLinks4r.L插件5r.匚模块6r.1-更多7rLpHFSrLMYSQL9rI-Joomla1.610rJQ%1L曜板11r1-Joomlartf^二)创建菜单模块进入后台-＞扩展-＞模块管理-＞创建一个新的菜单模块(mod_mainmenu),如下设置模块位置选择jk_mainmenu，子菜单终止至U2级，始终显示子菜单ModuleT^|je:mod_mainmenuTrtte:网站零财ShovjTitle:选择jk_mainmenu，子菜单终止至U2级，始终显示子菜单ModuleT^|je:mod_mainmenuTrtte:网站零财ShovjTitle:广叫口拎yesEnaMed:L肘。苗火巨Posiii湖|jk_mainmenu日~~5日的|刁PublicRegisteredSpecialIID:0rVacrrin+ifxn■nicn.lon?c。P..1omiruiuemclcinModuleParametersYesLNoAlwaysshov/sub-m&nutt&msTarg&tPosrtioH►AdvancedParameters*注意：创建模块的时候我们给该菜单加一个ID区分，比如底部主菜单调的是同一菜单，就是通过ID来区分，打开高级配置，在MenuTagID处输入dropdownParametersfrModuleParameters♦AdvancedParametersSho'.7lYhitespace|No▼|Caching|UseGlobal工|MenuTagIDdropdawn给菜单加样式打开文件/templates/jk_joomlask/css/template.css编写代码：（基于上节的代码，修改#jk_nav.main部分，并将颜色标识去除，CSS中的调用图片见安装包）并且我们新加了一些公用样式，和菜单配套的图片以及菜单、广告的底边距，请注意区分@charset"utf-8";/*Copyright(C)JOOMLASK.AllRightsReserved.@license-CopyrightedCommercialSoftwareAuthor:JOOMLASKWebsites:Thisfilemaynotberedistributedinwholeorsignificantpart.*//**body{background:#fff;color:#000;font-family:Tahoma,Geneva,sans-serif;line-height:1.5;font-size:12px;}/*新加了一些公用样式/body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button,th,t{margin:0;padding:0;}ol,ul,li{list-style-type:none;}/*global*/#jk_wrapper{}/*定义每个框架的宽度、居中对齐/#jk_wrapper.mainwidth:1000px;margin:0auto;/*定义需要设定固定高度的/V高度*/#jk_header.main{height:70px;background:black;/*菜单详细样式代码/#jk_nav{margin-bottom:6px;}#jk_nav.main{height:63px;background:url(../images/nav_bg.gif)repeat-xlefttop;}#jk_navul#dropdown{display:block;height:63px;margin:0;padding:00016px;position:

relative;}#jk_navul#dropdownli{float:left;font-family:"微软雅黑”,Tahoma,Geneva,sans-serif;font-size:14px;font-weight:bold;height:35px;}#jk_navul#dropdownlia{color:#FFFFFF;display:inline-block;height:29px;padding:6px12px0;}#jk_navul#dropdownli.activea{color:#336699;}#jk_navul#dropdownli.hover,ul#dropdownli.active{background:url(../images/nav_hover.gif)repeat-xscroll50%toptransparent;}#jk_navul#dropdownli.activeulli.active{background:nonerepeatscroll00transparent!important;font-weight:normal;height:28px!important;}#jk_navul#dropdownli.activeul{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:728px;z-index:9999;}#jk_navul#dropdownulli{background:nonerepeatscroll00transparent;color:#000000;float:left;font-weight:normal;height:28px;}#jk_navul#dropdownulli.hover{background:nonerepeatscroll00transparent;font-weight:normal;}#jk_navul#dropdownullia{background:nonerepeatscroll00transparent;color:#006699;display:inline-block!important;font-size:12px;font-weight:normal;height:22px!important;#jk_navul#dropdownulliaspan{display:inline-block;height:22px;}/*最新的广告尺寸为000*80的大小*/#jk_ad_top{margin-bottom:6px;}#jk_ad_top.main{height:80px;background:yellow;}#jk_body.main{height:800px;background:blue;}#jk_bottom.main{height:170px;background:green;}上述样式是针对主菜单进行的设计，保存之后打开前台测试得下图结果:菜单就成形了。m耳二空I菜单就成形了。m耳二空I金5；三进•I电冬■宝yI中：JC博交18沾励中氟原468X60JOOMLASK.COM竣皂的喉5A■■JOOffiLRSK大横幅广告上一节中我们有提过，旗帜广告和广告模块的创建，同上节，我们把演示中的黄色部分替换为广告，把准备好的广告上传到/images/banners目录下。468X60JOOMLASK.COM记得在旗帜广告管理中，要创建一个新的分类，因为广告模块要按分类调用。创建广告模块并设置到我们预设的jk_adlong模块位置，结果如下图*注意上述的样式中，我们也要把原来预设的黄色背景去掉，高度改成现在的80px，并且让广告的下面显的有一些边距#jk_ad_top{margin-bottom:6px;}#jk_ad_top.main{height:90px;}底部版权信息一）底部主菜单（底部友情链接本节不讲）上面我们创建过了主菜单，也创建了主菜单的模块，这里我们还要创建一个底部的主菜单模块，样式与上面的主菜单也略有不同进入后台->扩展->模块管理->创建一个新的菜单模块（jk_bnav，不显示子菜单，上MotlaleT^pe:modtnainmenuTitle:•底部主菜箪ShowTitle:Enabled:广NoYesPosition:jk_bnavOrderrj^cc&ss进入后台->扩展->模块管理->创建一个新的菜单模块（jk_bnav，不显示子菜单，上MotlaleT^pe:modtnainmenuTitle:•底部主菜箪ShowTitle:Enabled:广NoYesPosition:jk_bnavOrderrj^cc&ssL&v&f:PublicRegisteredSpecialID:mod_mainmenu)，模块位置选择ModuleParametersMenuNameMenuStyleStartLevetEndLevetAlwaysshowsub-menuItemsTargetPosition|mainmenu]List继续给底部菜单添加样式，补充后的样式为（底部的绿色标识背景也去除）:@charset"utf-8”;/*Copyright(C)JOOMLASK.AllRightsReserved.@license-CopyrightedCommercialSoftwareAuthor:JOOMLASKWebsites:Thisfilemaynotberedistributedinwholeorsignificantpart.*//**body{background:#fff;color:#000;font-family:Tahoma,Geneva,sans-serif;line-height:1.5;font-size:12px;}/*新加了一些公用样式/body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button,th,t{margin:0;padding:0;}ol,ul,li{list-style-type:none;}/*global*/#jk_wrapper{}/*定义每个框架的宽度、居中对齐/#jk_wrapper.mainwidth:1000px;margin:0auto;/*定义需要设定固定高度的/V高度*/#jk_header.main{height:70px;background:black;/*菜单详细样式代码/#jk_nav{margin-bottom:6px;}#jk_nav.main{height:63px;background:url(../images/nav_bg.gif)repeat-xlefttop;}#jk_navul#dropdown{display:block;height:63px;margin:0;padding:00016px;position:relative;}#jk_navul#dropdownlifloat:left;font-family:"微软雅黑”,Tahoma,Geneva,sans-serif;font-size:14px;font-weight:bold;height:35px;}#jk_navul#dropdownlia{color:#FFFFFF;display:inline-block;height:29px;padding:6px12px0;}#jk_navul#dropdownli.activea{color:#336699;}#jk_navul#dropdownli.hover,ul#dropdownli.active{background:url(../images/nav_hover.gif)repeat-xscroll50%toptransparent;}#jk_navul#dropdownli.activeulli.active{background:nonerepeatscroll00transparent!important;font-weight:normal;height:28px!important;}#jk_navul#dropdownli.activeul{display:block;font-we

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论