joomla模板完美開發(fā)教程_第1頁
joomla模板完美開發(fā)教程_第2頁
joomla模板完美開發(fā)教程_第3頁
joomla模板完美開發(fā)教程_第4頁
joomla模板完美開發(fā)教程_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

Joomla模板制作實戰(zhàn)教程【一】-創(chuàng)建一個簡單的模板Joomla絕對是一款優(yōu)秀的CMS，相較一些國產(chǎn)CMS她始終不能占據(jù)優(yōu)勢地位，很多人說Joomla做模板難、Joomla不支持靜態(tài)生成、Joomla執(zhí)行效率低等等，但其實Joomla團(tuán)隊為這些東西做了很多的功夫，細(xì)細(xì)研究不難發(fā)現(xiàn)，Joomla模板只需要會Html+CSS就行了，Joomla的靜態(tài)生成其實就是System-cache（緩存插件），當(dāng)做足了優(yōu)化之后，Joomla的執(zhí)行效率是相當(dāng)可觀的，如本站www.J（優(yōu)化的方法會在后面的教程中提及）話說Joomla模板難做，這是很多入門的學(xué)習(xí)者遇上的足以讓他放棄Joomla的門檻，那么我要說的是Joomla模板一點不難，它的難點根本不在于“是否會PHP”，而是在于不敢鉆研的心，那么為了砍掉這個所謂的“門檻”，我將為大家?guī)磉@個系列的模板實戰(zhàn)教程。做之前我們必須要準(zhǔn)備這幾樣?xùn)|西！1、持之以恒的心2、必要的HTML+CSS基礎(chǔ)知識3、熟悉了Joomla的使用方法、工作原理4、一絲不茍的工作態(tài)度。5、認(rèn)認(rèn)真真的看好教程，不要急著復(fù)制粘貼。開始我們的模板制作（以Joomla1.5.x為例，完結(jié)之后會推出Joomla1.7.x相關(guān)教程）安裝好Joomla1.5.x，在templates/目錄下建立一個我們要制作的模板文件夾，命名為jk_joomlask，這時候在后臺我們尚且看不到有jk_joomlask的這個模板選項。*Joomla網(wǎng)站系統(tǒng)是基于utf-8編碼編寫的，所以以下所有操作的文件都務(wù)必保存為utf-8編碼。第一步我們需要讓其在Joomla后臺中顯示這個模板選項，創(chuàng)建文件templateDetails.xml，不要擔(dān)心會不會xml，很簡單，根據(jù)官方文檔給出的說明，照著寫便是：<?xmlversion="1.0"encoding="utf-8”?><!DOCTYPEinstallPUBLIC"-//Joomla!1.5//DTDtemplate1.0//EN""/xml/dtd/1.5/template-install.dtd"><!--擴(kuò)展的類型是模板適用的版本是Joomla1.5--><installversion="1.5"type="template"><!--模板的名稱，即后臺模板的顯示名赧<name>JKJOOMLASK</name><!--模板的創(chuàng)建日期-><creationDate>2011-09-05</creationDate><!--模板的創(chuàng)建作者-><author>Joomlasker</author><!--作者聯(lián)系郵箱-><authorEmail>joomlasker（at）</authorEmail>V./一一作者網(wǎng)站一〉<authorUrl></authorUrl><copyright>JOOMLASK2011</copyright><license>GNU/GPL</license><version>1.0.0</version>V!--模板的簡介-><description>JOOMLASK</description>v!--模板的相關(guān)文件-><files>v!--單個文件是filename表達(dá)式-><filename>index.php</filename><filename>templateDetails.xml</filename></files>v!--模板的模塊位置選項，即新建模塊時的位置選擇，預(yù)設(shè)以下位置<positions><position>top</position><position>bottom</position></positions></install>請細(xì)心看看上述文檔，即是官方文檔的標(biāo)準(zhǔn)設(shè)置這時候我們進(jìn)入后臺，可以看到JKJOOMLASK的模板已經(jīng)出現(xiàn)了（如下圖：）ff1.-■-ibeez模國名稱裁認(rèn)￡JHu1.D.D仲I2QJA_Purity1.2.012/：3CJKJOOMLASK1.0.0201這時候可以將JKJOOMLASK設(shè)為默認(rèn)，但保存后前臺會顯示一片空白。第二步，我們要讓這個模板在前臺能顯示內(nèi)容<!--照著抄--><?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><!--導(dǎo)入joomla庫的<head>相關(guān)內(nèi)容--><jdoc:includetype="head"/><!--link模板的主樣式表--><linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/jk_joomlask/css/template.css"type="text/css"/></head><body><!--創(chuàng)建模塊位置top--><jdoc:includetype="modules"name="top"/><!--創(chuàng)建文章內(nèi)容組件--><jdoc:includetype="component"/><!--創(chuàng)建模塊位置bottom--><jdoc:includetype="modules"name="bottom"/></body></html>普及一下PHP的簡單知識，<?phpecho"打印內(nèi)容”？>，就是我們所熟知的程序基本打印功能，示例即是打印出隱號部分內(nèi)容，那么上述index.php中的<?phpecho$this->baseurl?>便是打印當(dāng)前網(wǎng)站的絕對路徑，<?phpecho$this->language;?>的意思便是當(dāng)前網(wǎng)站的語言設(shè)置，如果我們在后臺設(shè)置的網(wǎng)站前臺語言為中文，那么通過瀏覽器查看源碼得到的就是<htmlxmlns="/1999/xhtml"xml:lang="zh-cn"lang="zh-cn">?；氐秸}，index.php中，我們創(chuàng)建了top和bottom的兩個模塊位置，格式：<jdoc:includetype="modules"name="top"/>，這里的top和bottom就是我們在templateDetails.xml預(yù)設(shè)的位置配置，另外還創(chuàng)建了一個非常重要的組件，那就是Joomla的基本組件：文章格式如：<jdoc:includetype="component"/>，大部分新手忽略了這個從而測試的時候發(fā)現(xiàn)不了文章內(nèi)容。保存好文件之后，刷新前臺，即可看到被設(shè)定位frontpage的文章了！如下圖，雖然難看了點.八、、：歡迎光ilfejoomla的世界！Joomla!社區(qū)門戶網(wǎng)站四號目WrittenbyAdministratorSaturday,07July200709:54Jgmlal社區(qū)門戶網(wǎng)站現(xiàn)已在在線運作。在那兒，你可以_得到關(guān)于推動Joomlal項目之貢獻(xiàn)者活動消息的固定信息來源。得知全世界的Jeon間事件,并可查看是否在你附近有Jonmlal用戶群oJoomlal社群雜志允諾會有引人的專題文章、社區(qū)成就、學(xué)習(xí)專題和每月的項目消息更新°并也請看看JoomlsConnectT，這個總匯RSS新聞聯(lián)播，從全球把你的語言之Joomla!新聞?wù)显谝黄?。請點按此處來取得最新、最好的信息。LastUpdatedonThursday,15October200907:15我們都是志愿者<-號曰Joomla!安全特攻隊占殷曰IJWrittenbyAdministratorWrittenbyAdministratorSaturday,07July200709:54Saturday,07July2007IJIrriTThIr-iiI"t'i1.i'I—i-l17I尊FlI.Lt"iI4*0ri'HIrrsttsIh-lI丁石I—I4*Joomla模板制作實戰(zhàn)教程-創(chuàng)建各種模塊位置2011-09-2722:22在上一節(jié)Joomla模板制作實戰(zhàn)教程【一】-創(chuàng)建一個簡單的模板）中我們創(chuàng)建了一個非常簡單的模板，包含了默認(rèn)的文章組件、top和bottom兩個模塊位置。雖然看起來比較不養(yǎng)眼，但是我們掌握了Joomla模板的一個基本結(jié)構(gòu)，這節(jié)我們要針對一個設(shè)計完整的設(shè)計稿進(jìn)行規(guī)劃。首先需要解釋一下“模塊位置”的概念。之前做的一些開發(fā)分享，總是會碰到一些似乎入門的朋友容易把模板和F模塊”當(dāng)成兩回事，所以有必要把它們的概念講清楚，Joomla的模板其實就相當(dāng)于一個白紙，你需要在上面畫上各種具體對象，它才能成為一真正模板，而我這里說的具體對象，不僅僅包括文章內(nèi)容，它主要各種模塊，諸如你看到的一條一條的新聞列表、排列整齊的圖片列表、帶輸入用戶名密碼的登陸區(qū)域。他們構(gòu)成了一個真正的模板。所以當(dāng)你下載了一個新的純模板，它安裝在Joomla系統(tǒng)之后，是看不到你所看到的模板樣子，它需要各種模塊去、組件內(nèi)容（如文章內(nèi)容）填充這張空白的紙，模塊又是組件的另-種表現(xiàn)形式。便于大家理解，請看下圖須要有“組件內(nèi)答”—__模蜘宣一模塊的內(nèi)答來自組件（如友情槌接，文章，第三方組件的內(nèi)容、定制HTM侍等），它是模板的重要組成部分。須要有“組件內(nèi)答”—__模蜘宣一很多中國風(fēng)格網(wǎng)站首頁是沒有“組件內(nèi)容''的位置，通常這個“組件內(nèi)容”是出現(xiàn)在子頁，而外國模板基本上在首頁都留有“文章組件”的位置，但子頁的內(nèi)容組成除了這些藍(lán)色的模塊，還必那么看了上圖之后，我們就知道模塊的重要性了，它的意義在中式網(wǎng)站上甚至大于組件內(nèi)容，理論上來說，一個JOOMLA網(wǎng)站可以由N個模塊組成，卻不需要組件內(nèi)容，當(dāng)然這沒什么意義。第一步：我們需要針對一個完整的設(shè)計稿做出規(guī)劃此次制作模板是以J為例，所以把很中式的Joomlask設(shè)計稿拿出來，針對設(shè)計稿，我們把Joomlask的設(shè)計稿劃分為以下模塊位置

jk_logo設(shè)計為LOGO位置jk_adtop設(shè)計為網(wǎng)站最頂部廣告位置headinfoj<logojk_adtopmainmenujk_ad3angjk_u^arluser3adiniduser4admiduser6jk_logo設(shè)計為LOGO位置jk_adtop設(shè)計為網(wǎng)站最頂部廣告位置headinfoj<logojk_adtopmainmenujk_ad3angjk_u^arluser3adiniduser4admiduser6usor8user?linkjk_bnavjk_footerjk_headinfo設(shè)計為頂部右上角信息位置jk_mainmenu設(shè)計為主菜單位置jk_adlong設(shè)計為整條橫幅廣告位置jk_left設(shè)計為左邊模塊位置jk_right設(shè)計為右邊模塊位置（僅子頁顯示）jk_user1,jk_user2,jk_user3,jk_user4,jk_user5,jk_user6,jk_user7,jk_user8設(shè)計為圖中分另U指定位置，可以放一些通用的內(nèi)容jk_admid_1,jk_admid_2設(shè)計為網(wǎng)站中部的兩個廣告位jk_link設(shè)計為底部友情鏈接位置jk_bnav設(shè)計為底部菜單jk_footer設(shè)計為底部綜合信息compontent就是組件內(nèi)容的位置（本演示設(shè)計為僅子頁顯示）第二步：根據(jù)規(guī)劃的模塊位置將其編寫到模板中打開文件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"><!--擴(kuò)展的類型是模板適用的版本是Joomla1.5--><installversion="1.5"type="template"><!--模板的名稱，即后臺模板的顯示名赧<name>JKJOOMLASK</name><!--模板的創(chuàng)建日期-><creationDate>2011-09-05</creationDate><!--模板的創(chuàng)建作者-><author>Joomlasker</author><!--作者聯(lián)系郵箱-><authorEmail>joomlasker（at）</authorEmail><!--作者網(wǎng)站-><authorUrl></authorUrl><copyright>JOOMLASK2011</copyright><license>GNU/GPL</license><version>1.0.0</version><!--模板的簡介-><description>JOOMLASK</description><!--模板的相關(guān)文件-><files><!--單個文件是filename表達(dá)式-><filename>index.php</filename><filename>templateDetails.xml</filename></files><!--模板的模塊位置選項，即新建模塊時的位置選擇，預(yù)設(shè)以下位置<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>這時候神奇的事情發(fā)生了，我們回到后臺，擴(kuò)展>模塊->創(chuàng)建一個新模塊（以mod_custom）為示例，在選擇模塊位置的時候我們就看到了剛才規(guī)劃的這些模塊位置了

位置:排序:訪問簸別:ID:簡介:菜單:榮單選擇:10(jk_adlongjk_adlongjk__u3erS第三步：在模塊文件index.php中調(diào)用安裝模塊位置jk_adziid_2jk_adtopjk_bnavjk_￡&oterjk__headinfojk_leftjk_linkjk_lDgojk_zainriEnujk_ri^htjk_u3erljk__user2位置:排序:訪問簸別:ID:簡介:菜單:榮單選擇:10(jk_adlongjk_adlongjk__u3erS第三步：在模塊文件index.php中調(diào)用安裝模塊位置打開/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>好了，請前往你的網(wǎng)站前臺測試吧，在URL最后面，如：/2tpT,需要注意的是，第一節(jié)我們安裝了組件內(nèi)容位置、TOP和BOTTOM模塊位置，這一節(jié)我們先將其刪除。[noneojtlinel曲m.迎...甌!業(yè)』詢」…ifej1瘦碰響匹ik睡1墮理蟲血.西旦..碩山旦虹啪[noneoutline]股頑tt[rwneoutline][noneoutineljkLU^^Inoneoutline]IL嵯.〔禽ikLUWS[noneoutline]noneoutine]j|tU^^[noneoutline]noneoutline]IlL熨網(wǎng)QI.[匹.：13..口.頊麗1.j股箜頃gZEgimUpe]—A-fjfelinhtfnoreOLitfine]到這里我們創(chuàng)建了很多脹眼的模塊位置，有的同學(xué)可能會問了，怎么又是沒內(nèi)容，這簡單，我們就來填充一個模塊內(nèi)容，就以mod_custom模塊為例，后臺-＞擴(kuò)展-＞模塊-＞創(chuàng)建一個定制html模塊(mod_custom)，在定制HTML模塊中我們輸入任意內(nèi)容，模塊位置就選擇第一個jk_logo，保存好創(chuàng)建的模塊。

模塊類型：室枷g模塊仿陽K.B州莫板制作教程標(biāo)墨:胃介:IAd/?一51半主■、生|/兀該模塊龍許你在一個所見即所得的編輯器里崔用HTML語言創(chuàng)建自己的模塊標(biāo)墨:胃介:保存之后我們前臺刷新如下:jklogofnoneoutline]…_忻JO&M氓Sk.COM棋板制作教程jffL^tQP-oneoutinel旦...辿匝旦i1定.可琶”.哩!擔(dān)」性..唳.￡偵..皿國..j眩宅JI印用[non9outline]ifcl^trnoneoutline]；iKirightt[noreoutline]1必更生】0國也U.套：j|^u潑什-oneoutine]Joomla模板制作實戰(zhàn)教程-美化我們的模板【一】2011-10-2116:44上一節(jié)（Joomla模板制作實戰(zhàn)教程-創(chuàng)建各種模塊位置）中我們學(xué)了關(guān)于在模板中制作各種模塊位置，作為模板的骨架，模塊位置的外觀自然占有很重要的分量。當(dāng)然制作模板首先最重要的一門知識就是前端制作（HTML+CSS）在這里一些HTML+CSS的細(xì)節(jié)性知識就不多闡述了，首先我們要明確整個站點的前端框架，1必更生】0國也U.套：首先創(chuàng)建好整站的前端框架及基礎(chǔ)樣式根據(jù)上一節(jié)中提供的設(shè)計稿模塊規(guī)劃，我們將前端分為5個部分，分別是：jk_header（頭部）、jk_nav（菜單）、jk_ad_top（設(shè)計之初是考慮這里放置多個廣告）、jk_body（內(nèi)容主體部分）、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編寫代碼：(以下代碼為了方便學(xué)習(xí)識別，會暫時在框架上加上一些顏色、高度以區(qū)分)@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;/*定義需要設(shè)定固定高度的/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;}上述樣式是給大框加進(jìn)行了大體上的設(shè)定，并附加了顏色加以區(qū)分，在后面的控制中我們會把這些背景色全部去掉。那么我們現(xiàn)在測試以上改的結(jié)果如下圖那么這樣確實蠻難看的！我們現(xiàn)在就開始創(chuàng)建三個頭部模塊，一個LOGO,一個頂部廣告，一個右上角的快捷信息。進(jìn)入后臺->擴(kuò)展->模塊管理->創(chuàng)建一個定制HTML(mod_custom)模塊，在編輯器中插入一張圖片(LOGO)，這個模塊定名為LOGO，模塊標(biāo)題隱藏，模塊位置選擇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然后我們再創(chuàng)建頂部廣告（利用Joomla1.5自帶的廣告管理），將我們設(shè)計好的廣告圖片上傳至ZimagesZbannersZad_top_1.jpgMenuAssignmentPhlenus:舊All廣NenePJenuSeection:之家iQEE進(jìn)入后臺->旗幟廣告->分類管理->創(chuàng)建一個新的廣告分類，定名為“JOOMLASK”，再回到旗幟廣告->客戶管理->創(chuàng)建一個新的客戶，定名為“JOOMLASK”BannerClient:[New]回到旗幟廣告->廣告管理->創(chuàng)建一個新的廣告，名稱設(shè)置為“頭部中間廣告”，分類和客戶設(shè)置為“JOOMLASK”，廣告URL設(shè)定為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廣告創(chuàng)建結(jié)束后，模塊中并未顯示，所以我們再回到擴(kuò)展->模塊管理->創(chuàng)建一個旗幟廣告模塊TargetParentWinz-ziTFtitkErc-TssrNavi5:2.1isr.二JCount1BannerClient.joohlasktICategory：oo￡i=K『SearchByTags?Nd廣yesRandomise史讓岫，wawi砧二J模塊位置選擇jk_adtop，保存創(chuàng)建的廣告模塊。下面我們還要創(chuàng)建右上角的相關(guān)信息模塊，這是一個定制HTML模塊，模塊管理-＞創(chuàng)建一個定制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”>商務(wù)合作<^>|<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>創(chuàng)建定制HTML模塊就不多說了，同第一步創(chuàng)建LOGO模塊一樣那么這時候jk_header的這三個模塊沒有實質(zhì)樣式，再打開/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模板制作實戰(zhàn)教程-美化我們的模板【二】2011-11-1117:04上一節(jié)（Joomla模板制作實戰(zhàn)教程-美化我們的模板【一】）中我們學(xué)了美化模板的最重要知識，即是對模塊進(jìn)行美化，本節(jié)我們繼續(xù)對整站的模塊進(jìn)行完善，說的簡單點就是，先把那些預(yù)置的模塊位置框架設(shè)計完全，經(jīng)過上節(jié)的簡單DIV+CSS講解，想必大家也課下了解了一下DIV+CSS的知識，那么我們后面就不對DIV+CSS的一些構(gòu)建原理做過多闡述。創(chuàng)建主菜單一）創(chuàng)建菜單在/templates/jk_joomlask/index.php，前一節(jié)中我們已經(jīng)編寫如下代碼，其中<jdoc:includetype="modules"name="jk_mainmenu"/><divid="jk_nav"><divclass="main"><jdoc:includetype="modules"name="jk_mainmenu”/><!--調(diào)用菜單模塊--></div></div>進(jìn)入后臺->菜單->創(chuàng)建新菜單，這時候由于我們菜單暫時還沒有指定的內(nèi)容，所以我們創(chuàng)建菜單的時候注意設(shè)置成“自定義鏈接”，鏈接設(shè)定為當(dāng)前頁涔”，以保證有點擊手形，好的，創(chuàng)建如下菜單（文章尾部的Quickstart安裝包中的菜單鏈接示例數(shù)據(jù)是來自

Filter:GoIReset#r1r首頁2r.LjkDisjiz；p口苴3rLjKLinks4r.L插件5r.匚模塊6r.1-更多7rLpHFSrLMYSQL9rI-Joomla1.610rJQ%1L曜板11r1-Joomlartf^二)創(chuàng)建菜單模塊進(jìn)入后臺-＞擴(kuò)展-＞模塊管理-＞創(chuàng)建一個新的菜單模塊(mod_mainmenu),如下設(shè)置模塊位置選擇jk_mainmenu，子菜單終止至U2級，始終顯示子菜單ModuleT^|je:mod_mainmenuTrtte:網(wǎng)站零財ShovjTitle:選擇jk_mainmenu，子菜單終止至U2級，始終顯示子菜單ModuleT^|je:mod_mainmenuTrtte:網(wǎng)站零財ShovjTitle:廣叫口拎yesEnaMed:L肘。苗火巨Posiii湖|jk_mainmenu日~~5日的|刁PublicRegisteredSpecialIID:0rVacrrin+ifxn■nicn.lon?c。P..1omiruiuemclcinModuleParametersYesLNoAlwaysshov/sub-m&nutt&msTarg&tPosrtioH?AdvancedParameters*注意：創(chuàng)建模塊的時候我們給該菜單加一個ID區(qū)分，比如底部主菜單調(diào)的是同一菜單，就是通過ID來區(qū)分，打開高級配置，在MenuTagID處輸入dropdownParametersfrModuleParameters?AdvancedParametersSho'.7lYhitespace|No▼|Caching|UseGlobal工|MenuTagIDdropdawn給菜單加樣式打開文件/templates/jk_joomlask/css/template.css編寫代碼：（基于上節(jié)的代碼，修改#jk_nav.main部分，并將顏色標(biāo)識去除，CSS中的調(diào)用圖片見安裝包）并且我們新加了一些公用樣式，和菜單配套的圖片以及菜單、廣告的底邊距，請注意區(qū)分@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;/*定義需要設(shè)定固定高度的/V高度*/#jk_header.main{height:70px;background:black;/*菜單詳細(xì)樣式代碼/#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;}上述樣式是針對主菜單進(jìn)行的設(shè)計，保存之后打開前臺測試得下圖結(jié)果:菜單就成形了。m耳二空I菜單就成形了。m耳二空I金5；三進(jìn)?I電冬■寶yI中：JC博交18沾勵中氟原468X60JOOMLASK.COM竣皂的喉5A■■JOOffiLRSK大橫幅廣告上一節(jié)中我們有提過，旗幟廣告和廣告模塊的創(chuàng)建，同上節(jié)，我們把演示中的黃色部分替換為廣告，把準(zhǔn)備好的廣告上傳到/images/banners目錄下。468X60JOOMLASK.COM記得在旗幟廣告管理中，要創(chuàng)建一個新的分類，因為廣告模塊要按分類調(diào)用。創(chuàng)建廣告模塊并設(shè)置到我們預(yù)設(shè)的jk_adlong模塊位置，結(jié)果如下圖*注意上述的樣式中，我們也要把原來預(yù)設(shè)的黃色背景去掉，高度改成現(xiàn)在的80px，并且讓廣告的下面顯的有一些邊距#jk_ad_top{margin-bottom:6px;}#jk_ad_top.main{height:90px;}底部版權(quán)信息一）底部主菜單（底部友情鏈接本節(jié)不講）上面我們創(chuàng)建過了主菜單，也創(chuàng)建了主菜單的模塊，這里我們還要創(chuàng)建一個底部的主菜單模塊，樣式與上面的主菜單也略有不同進(jìn)入后臺->擴(kuò)展->模塊管理->創(chuàng)建一個新的菜單模塊（jk_bnav，不顯示子菜單，上MotlaleT^pe:modtnainmenuTitle:?底部主菜簞ShowTitle:Enabled:廣NoYesPosition:jk_bnavOrderrj^cc&ss進(jìn)入后臺->擴(kuò)展->模塊管理->創(chuàng)建一個新的菜單模塊（jk_bnav，不顯示子菜單，上MotlaleT^pe:modtnainmenuTitle:?底部主菜簞ShowTitle:Enabled:廣NoYesPosition:jk_bnavOrderrj^cc&ssL&v&f:PublicRegisteredSpecialID:mod_mainmenu)，模塊位置選擇ModuleParametersMenuNameMenuStyleStartLevetEndLevetAlwaysshowsub-menuItemsTargetPosition|mainmenu]List繼續(xù)給底部菜單添加樣式，補(bǔ)充后的樣式為（底部的綠色標(biāo)識背景也去除）:@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;/*定義需要設(shè)定固定高度的/V高度*/#jk_header.main{height:70px;background:black;/*菜單詳細(xì)樣式代碼/#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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論