Joomla でテンプレートを作成する: ステップバイステップ

このチュートリアルでは、Joomla テンプレートを最初から作成するために必要な手順を説明します。詳細をすべて説明しますので、始めましょう。

このチュートリアルは、ピアソンが提供する最近リリースされた「Joomla! 1.6: ユーザー ガイド」からの抜粋です。

---

ゲームプラン

• Joomla テンプレートとは何ですか? Joomla テンプレートの特徴は何ですか? CMS にコンテンツのないテンプレートとコンテンツが追加されたテンプレートの違いは何ですか?
• ローカル ホストの設計プロセスは、静的 HTML Web ページの設計プロセスとどのように異なりますか?
• Joomla におけるテーブルレス設計の影響は何ですか? W3C 標準、ユーザビリティ、アクセシビリティの間にはどのような関係がありますか?
• Joomla テンプレートはどのようなファイルで構成され、どのような機能を実行しますか?
• テーブルの代わりに CSS を使用して、ソース順に 3 列のレイアウトを作成するにはどうすればよいですか?
• Joomla で使用する必要がある基本的な CSS スタイルと、Joomla コアで使用されるデフォルトのスタイルは何ですか?
• モジュールを配置してスタイルを設定するにはどうすればよいですか?角を丸くするための新技術とは何ですか?
• JavaScript で開発されたメニューの効果を模倣する、必要最低限​​の CSS メニューを作成するための簡単な戦略は何ですか?
• コンテンツが存在しないときに列を表示するタイミングと非表示にするタイミングを制御するにはどうすればよいですか?
• Joomla 1.6 テンプレートを作成する正しい手順は何ですか?

---

Joomla! テンプレートとは何ですか?

Joomla テンプレートは、コンテンツのレンダリングを制御する Joomla CMS の一連のファイルです。

Joomla テンプレートは、コンテンツのレンダリングを制御する Joomla CMS の一連のファイルです。 Joomla テンプレートは Web サイトではなく、Web サイトです。また、これは完全な Web サイトのデザインとはみなされません。テンプレートは、Joomla Web サイトを表示するための基本的なデザインです。 「完全な」Web サイトの効果を生み出すために、テンプレートは Joomla データベースに保存されているコンテンツと密接に連携します。

テンプレートは、コンテンツが挿入されると、リンク スタイル、メニュー、ナビゲーション、テキスト サイズや色など、テンプレートで定義されたスタイルシートからスタイルを自動的に継承するようにスタイル設定されます。

Joomla と同様、CMS テンプレートの使用には多くの利点があります。

• Joomla は、コンテンツをページに配置するすべての作業を実行します。新しい投稿を入力するだけで、既存のブログ ページに新しい情報を追加できます。テンプレートとその CSS により、サイト上の残りのコンテンツとスタイルが一貫していることが保証されます。
• 特に (index.php ファイル内のテーブルを使用する代わりに) CSS がレイアウトに使用される場合、コンテンツとプレゼンテーションは完全に分離されます。これは、Web サイトが最新の Web 標準を満たしているかどうかを判断するための主な基準の 1 つです。標準に準拠したサイトでは、表の HTML マークアップは、ページを列にレイアウトするのではなく、表形式のデータを表示するために予約されています。
• 新しいテンプレートをすぐに適用して、Web サイトの外観を新しくすることができます。これには、色やグラフィックだけでなく、コンテンツやモジュールをさまざまな場所に配置することが含まれる場合があります。

---

ローカルホストの設計プロセス

Joomla を利用した Web サイトで表示される Web ページは静的ではなく、データベースに保存されているコンテンツに基づいて動的に生成されます。データベース内のコンテンツが変更されると、そのコンテンツを表示するすべてのページが即座に変更されます。表示されるページは、データベースにクエリを実行するテンプレート内のさまざまな PHP コマンドによって作成されます。テンプレートはコンテンツではなくコード行のように見えるため、設計段階でいくつかの問題が発生します。

Web ページを作成する「正しい方法」はありません。

現在では、Dreamweaver などの「表示されているものがそのまま得られる」(WYSIWYG) HTML エディターを使用するのが一般的になっており、HTML コードを記述する必要はありません。ただし、WYSIWYG エディターは動的ページを表示および編集できないため、Joomla テンプレートの設計中にそのようなエディターを使用することはできません。したがって、テンプレートとその CSS を手動でコーディングし、変更が行われると頻繁に更新されるサービス ページで PHP の出力ページを表示する必要があります。接続が十分に速い場合、これは Web サーバーである可能性がありますが、ほとんどの設計者は、コンピューター上でローカル サーバーまたはローカルホスト (第 1 章 2 で説明したローカルホスト設定など、コンピューター上で Web ページを提供するソフトウェア) を使用します。 「Joomla をダウンロードしてインストールしてください!」

Web ページを作成する「正しい方法」はありません。どのように作成するかは、あなたのバックグラウンドによって異なります。グラフィックを好む人は、グラフィック プログラム (Photoshop など) でページの「画像」を作成し、Web で使用するためにその画像を分割する (スライス アンド ダイシングと呼ばれます) 傾向があります。テクノロジーベースのデザイナーは、多くの場合、直接 CSS に飛び込み、フォント、境界線、背景のコーディングを開始します。ただし、先ほど述べたように、Joomla テンプレートのデザイナーは、同じエディターでコーディングの効果をすぐに確認できないという制限があります。したがって、次の変更された設計フローを使用できます。

1. localhost サーバーにバックグラウンドで実行されているものをロードして、Joomla を「実行」させます。
2. エディターを使用して HTML と CSS を編集し、変更をサーバーに保存します。
3. 編集の影響を受けるページを Web ブラウザで表示します。

ローカルホスト サーバー オプション

このチュートリアルを続けるには、WampServer をインストールする必要があります。まだインストールを行っていない場合は、インストールを続行します。ここで待ちます。

ホストされた Web サーバーでは、ブラウザの別のタブでフロントエンドを開いているときに、バックエンドで HTML テンプレートと CSS ファイルを編集できます。変更を保存するときに、フロントエンド ビューを更新するだけで影響を確認できます。

localhost 設定を使用すると、より簡単にファイルに直接アクセスし、選択したエディタで編集できるようになります。変更を保存した後、エディターを閉じることなく、ブラウザーでフロントエンド ビューを更新し、その影響を確認できます。

W3C とテーブルレス デザイン

ユーザビリティ、アクセシビリティ、検索エンジン最適化 (SEO) はすべて、今日インターネットで高品質の Web ページを説明するために使用されるフレーズです。実際、ユーザビリティ、アクセシビリティ、SEO の間にはかなりの重複があり、これらの特性のいずれかを示す Web ページは、多くの場合、3 つすべてを示します。これら 3 つの目標を達成する最も簡単な方法は、W3C Web 標準で指定されているフレームワークを使用することです。

たとえば、視覚障害のある人は、スクリーン リーダーを使用すると、HTML セマンティクスを使用して構築された Web サイトを簡単に読むことができます。検索エンジンのスパイダーによっても簡単に読み取られる可能性があります。実際、Google はスクリーン リーダーを使用するのと同じように、Web サイトの読み方についてはまったく知りません。

Web 標準は、すべての Web ブラウザが Web ページを表示するために使用する共通の「ルール」セットを確立します。これらの標準を推進している主要な組織は W3C で、そのディレクターである Tim Berners-Lee は 1989 年に Web を発明したとされています。

Web 標準がどこから来たのかを理解するには、少しの歴史を知ることが役立ちます。多くの Web ページは実際には古いブラウザー向けに設計されています。なぜ？ World Wide Web の誕生以来、ブラウザは進化を続けてきました。世代ごとに新しい機能が導入され、メーカーはそれに対して異なる、場合によっては独自のラベル (名前) を考案しました。各ブラウザには、同じ基本的な HTML 言語を実装しても、異なる構文または「方言」や癖がある傾向があります。新しいブラウザが登場し、いくつかの古いブラウザは姿を消しました (Netscape を覚えていますか?)。

現在の W3C 標準は、同じ言語を読み取り、より一貫してページを表示できる、より互換性のあるブラウザのリリースをメーカーに後押しして、デザイナーが単一の共通プラットフォーム上でデザインをターゲットにできるようにするのに役立ちます (できれば)。

もう 1 つの複雑な要因は、歴史的に、さまざまなブラウザ メーカー (Microsoft など) が、ブラウザで HTML をわずかに異なる方法で解釈する傾向があることです。したがって、Web デザイナーは、新しいブラウザではなく古いブラウザをサポートするように Web サイトを設計する必要があります。デザイナーや Web サイトの所有者は、Web ページがこれらの「古い」ブラウザーで正しく表示されることが重要であると考えることがよくあります。 Web ページ コードの W3C 標準は、一貫性を実現するために開発されました。 W3C Web 標準を組み込んだ Web サイトには、アクセスしやすく、使いやすく、検索エンジン向けに最適化するための優れた基盤が備わっています。これらを家の建築基準と考えてください。これらを使用して構築された Web サイトは、より強力で安全で、ユーザーの期待に沿ったものになります。 W3C の HTML 検証サービス (validator.w3.org) を使用してページをチェックできます。シンプルかつ無料です (コードを検証するときは、必ず正しい DOCTYPE を使用するようにしてください。最も単純な場合、W3C 検証を満たす Web サイトでは、セマンティック HTML を使用し、CSS を使用してコンテンツとプレゼンテーションを分離することもあります。

5 人のデザイナーに Web 標準とは何かと尋ねると、5 つの異なる答えが得られます。しかし、Web 標準は、最新バージョンの標準で規定されているように、HTML (またはそれ以外) の有効なコードの使用に基づいていることにほとんどの人が同意します。指定された方法。

意味的に正しいコード

意味的に正しいとは、Web ページ内の HTML タグが表現ではなくコンテンツのみを記述することを意味します

前に述べたように、意味的に正しいとは、Web ページ内の HTML タグがコンテンツのみを記述し、プレゼンテーションを記述していないことを意味します。特に、これは、H1 タグ、H2 タグなどの構造化された編成を意味し、テーブルは目的にのみ使用されます。レイアウト用ではなく、表形式のデータ Joomla テンプレートのデザイナーが純粋にセマンティックな正確さに関して若干妥協している領域の 1 つは、2 列または 3 列のレイアウトの左と右の列に、セマンティックではなく「左」と「右」という名前を付けることです。これらがテンプレート PHP で使用されている単なる場所名である場合、それらは技術的に正しいです。HTML および CSS で一致するクラスを定義するためにも使用されている場合は、表示ページとの一貫性が保たれます。名前を付けるのは、許容できる便宜です。または、左の列に関連するすべてを左として分類します。以下の例では、左側の位置がクラス サイドバーを使用してスタイル設定されており、右側の位置がサイドバー 2 であることがわかります。これは意味的に正しいコードです。

カスケード スタイル シート (CSS)

コードを意味的に正しくすることと密接に関係しているのは、CSS を使用して Web ページの外観とレイアウトを制御することです。CSS はスタイルを追加するための単純なメカニズムです (例:

CSS は HTML コードと並行して存在するため、コンテンツ (コード) とプレゼンテーション (CSS) の分離を完全に分離できます。

これを実際に確認するには、CSS ファイルを変更するだけで同じ HTML コンテンツを異なる独自の方法で表示する Web サイトである CSS Zen Garden をチェックしてください。結果として得られるページは非常に異なって見えますが、本質的には同じです。

現在、Joomla を利用した Web サイトのデザインは、検証基準を満たす上でかなりの課題に直面しています。

現在、Joomla を利用した Web サイトのデザインは、検証基準を満たす上でかなりの課題に直面しています。 Joomla バージョンの最初のシリーズである 1.0.X では、コードはページを出力するために多くのテーブルを使用していました。これは実際には CSS の使用方法のデモンストレーションではなく、意味的に正しいコードを生成するものでもありません。この問題は、コンポーネントやモジュールの多くのサードパーティ開発者が依然としてテーブルを使用してレイアウトを生成しているという事実によってさらに悪化します。

幸いなことに、Joomla コア開発チームは Joomla のこの問題を認識していました。 Joomla 1.5 では、テンプレート設計者はコアの出力 (ビューと呼ばれる) を完全にオーバーライドし、テーブルを削除したり、レイアウトを任意の方法でカスタマイズしたりできます。

テンプレートを作成するときは、アクセスしやすい (スケーラブルなフォント サイズなど)、使いやすい (明確なナビゲーション)、検索エンジン用に最適化されている (ソートされたソース コード) ことを確認するために、依然として注意が必要です。

---

単純なテンプレートを作成する: ステップ 1

テンプレートの内容を理解するために、まず空の Joomla テンプレートを確認します。

テンプレート ファイル コンポーネント

このセクションでは、テンプレート ファイルを手動でセットアップするプロセスについて説明します。通常、これらすべての手順を実行する Joomla インストーラーを使用してテンプレートをインストールします。

独自のテンプレートを構築する場合は、複数のファイルとフォルダーを調整して設定する必要があります。テンプレートにはさまざまなファイルやフォルダーを含める必要があります。これらのファイルは、Joomla インストールの /templates/ ディレクトリに配置する必要があり、各ファイルはそのテンプレートに指定されたフォルダーに配置されます。 Element と Voodoo という名前の 2 つのテンプレートをインストールした場合、ディレクトリは次のようになります:

/templates/element
/templates/voodoo

テンプレートのディレクトリ名はテンプレートの名前と同じである必要があることに注意してください (この場合は element と voodoo)。これらの名前では大文字と小文字が区別され、スペースを含めることはできません。

テンプレート ディレクトリには 2 つの重要なファイルがあります:

/element/templateDetails.xml
/element/index.php

これらのファイル名と場所は、Joomla コア スクリプトによる呼び出し方法であるため、正確に一致する必要があります。 1 つ目はテンプレート XML ファイルです。

これは、このテンプレートを使用する Web ページを読み込むときに他のファイルが必要であることを Joomla に伝える XML 形式のメタデータ ファイルです。 (大文字の D に注意してください。) また、作成者、著作権、およびテンプレートを構成するファイル (使用されている画像を含む) についても詳しく説明します。

このファイルの最後の用途は、管理バックエンドで拡張機能インストーラーを使用するときにテンプレートを解凍してインストールすることです。

2 番目のキー ファイルは、ページを生成するためのメイン テンプレート ファイル、index.php です。

このファイルは、Joomla テンプレートの中で最も重要なファイルです。これはサイトをレイアウトし、Joomla CMS にさまざまなコンポーネントとモジュールを配置する場所を指示します。 PHPとHTMLを組み合わせたものです。

ほとんどすべてのテンプレートは追加のファイルを使用します。ここで Element という名前のテンプレートに示されているように、それらに名前を付けて配置するのが慣例です (ただし、Joomla コアでは必須ではありません)。

/element/template_thumbnail.png
/element/params.ini
/element/css/template.css
/element/images/logo.png

これらは単なる例です。テンプレート内の一般的なファイルの一部は次のようになります。

/element/template_thumbnail.png -- テンプレートの Web ブラウザーのスクリーンショット (通常は幅約 140 ピクセル、高さ 90 ピクセルに縮小されます)。テンプレートがインストールされると、プレビュー イメージとして機能し、Joomla Admin Template Manager に表示されます。

/element/params.ini -- テンプレートが持つパラメータの値を保存するために使用されるテキスト ファイル。

/element/css/template.css -- テンプレートの CSS。フォルダーの場所はオプションですが、index.php ファイルでその場所を指定する必要があります。好きな名前を付けることができます。通常は表示名が使用されますが、他の CSS ファイルを使用することにも利点があることが後でわかります。

/element/images/logo.png – テンプレートに付属する任意の画像。また、整理上の理由から、ほとんどのデザイナーは画像フォルダーに画像を配置します。ここでは例として、logo.png という画像ファイルがあります。

templateDetails.xml

templateDetails.xml ファイルは、テンプレートの一部であるすべてのファイルまたはフォルダーのリストを含むマニフェストまたはパッキング リストとして機能します。著者や著作権などの情報も含まれます。これらの詳細の一部は、Template Manager の管理バックエンドに表示されます。 XML ファイルの例を次に示します:

<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"
	"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
	<install version="1.6" type="template">
<name>960TemplateTutorialStep1</name>
<creationDate>1/10/10</creationDate>
<author>Barrie North</author>
<authorEmail>contact@compassdesigns.net</authorEmail>
<authorUrl>http://www.compassdesigns.net</authorUrl>
<copyright>Copyright (C) 2005 - 2010 Barrie North</copyright>
<license>GPL</license>
<version>1.6.0</version>
<description>The first of 4 tutorial templates from 
Joomla 1.6 - A User&#39;s Guide</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions></p>
<p> <config>
<fields  name="params">
<fieldset  name="basic">
<field
 name="colorVariation"
type="list"
default="white"
label="Color Variation"
description="Base Color of template">
<option
value="blue">blue</option>
<option
value="red">red</option>
</field>
</fieldset>
</fields>
</config>
</install></p>

いくつかの行の意味を見てみましょう:

• b33c0528146a0b471e50cfc0564ba692 — XML 文档的内容是后端安装程序的说明。选项 type="template" 告诉安装程序您正在安装模板并且它适用于 Joomla 1.6。
• 8a11bc632ea32a57b3e3693c7987c420960TemplateTutorialStep1 df406f776eecbaf16b62325323196f14 — 此行定义模板的名称。您在此处输入的名称还将用于在模板目录中创建目录。因此，它不应包含任何文件系统无法处理的字符，例如空格。如果您手动安装，则需要创建一个名称与模板名称相同的目录。
• 6761ab7deb513d94c073c144a402b50b - 这是模板的创建日期。它是一个自由格式字段，可以是任何内容，例如 May 2005、08-June-1978、01/01/2004 等。
• 48fe722b397613e801e59f453d6c9330 - 这是此模板作者的姓名 - 很可能是您的名字。
• 0957585dd138d30c2391968169f40d39 - 任何版权信息都包含在该元素中。
• 0c7b811afab442937980535f582fdf8c - 这是可以联系到此模板作者的电子邮件地址。
• 79c22554ace83ac36df38b8328dd06a1——这是作者网站的 URL。
• 3d689bd3819ead35ed794427bd12f459—这是模板的版本。
• c6a235960c38d509b87ca752283a5cb2917d3984ce33e8bdef33749ba625760b—这是模板中使用的各种文件的列表。文件

模板中使用的内容使用 2334ac29606bf8a170583e4f7533b1f4 和 59ef88518edd60e9f6a2c9f2c966ac0c 标签进行布局，如下所示：

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>

“文件”部分包含所有通用文件，例如模板的 PHP 源文件或模板预览的缩略图。本节中列出的每个文件都由 2334ac29606bf8a170583e4f7533b1f4 776238b84dcd715ea78f87badeabb693tags 括起来。您还可以使用 59ef88518edd60e9f6a2c9f2c966ac0c 标记包含整个文件夹，例如图像文件夹。

• 202163e00fbd4057f3ddf66d8c249b9c - 这显示模板中可用的模块位置。它是模板中定义的页面位置列表，例如顶部、左侧和右侧，可以使用模块管理器的位置下拉菜单将模块设置为显示在其中。此列表中的职位名称必须与为 index.php 内每个列出的职位生成内容的 PHP 代码精确匹配。
• a3d9f09c127b4debe443efaeb627281b——这部分描述了可以在后端设置并作为全局变量传递的参数，以允许高级模板功能，例如更改模板的配色方案。

index.phpp

index.php 文件中到底有什么？它是 HTML 和 PHP 的组合，决定了页面布局和呈现的所有内容。

让我们看一下实现有效模板的关键部分：index.php 文件顶部的 DOCTYPE。这是每个网页顶部的一段代码。在我们页面的顶部，将其放入模板中：

<?php
	/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined(&#39;_JEXEC&#39;) or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第一个 PHP 语句仅显示版权/许可证，并确保文件不会被直接访问以确保安全。

网页 DOCTYPE 是浏览器如何显示网页的基本组成部分之一 - 如何处理各种 HTML 标记，更重要的是，浏览器如何解释 CSS。 A List Apart 的以下观察应该可以澄清一些事情：

您可以使用多个 DOCTYPE。基本上，DOCTYPE 告诉浏览器使用什么版本的 HTML 来设计页面，是否有一些遗留代码或还包含 XML，以及如何解释页面。

这里开始出现“严格”和“过渡”一词（通常为 float:left 和 float:right），以指示是否包含遗留代码。本质上，自从 Web 诞生以来，不同的浏览器对各种 HTML 标签和 CSS 版本都有不同程度的支持。例如，Internet Explorer 6 或更低版本将无法理解用于设置最小页面宽度的 min-width 命令。要复制效果以使其在所有浏览器中显示相同的效果，有时必须在 CSS 中使用特定于浏览器的“技巧”，以弥补每个浏览器遵守已发布标准的缺陷。

严格意味着 HTML 将完全按照标准的规定进行解释。过渡性 DOCTYPE 意味着该页面将允许与标准存在一些商定的差异（例如，继续使用已停止使用的标签）。

让事情变得复杂的是，有一种叫做“怪癖”模式的东西。如果 DOCTYPE 错误、过时或不存在，浏览器将进入怪异模式。这是向后兼容的尝试，因此 Internet Explorer 6 会像 Internet Explorer 4 一样呈现页面。

不幸的是，人们有时会意外地陷入怪癖模式。它通常以两种方式发生：

• 他们直接使用来自 WC3 网页的 DOCTYPE 声明，链接最终为 DTD/xhtml1-strict.dtd，这是 WC3 服务器上的相对链接。您需要完整路径，如前面所示。
• Microsoft 设置了 Internet Explorer 6，以便您可以拥有有效的页面，但处于怪异模式。当您将 xml 声明放在 DOCTYPE 之前而不是之后时，就会发生这种情况。

接下来是一个 XML 语句（在 DOCTYPE 之后）：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

我刚刚向您提供的有关 Internet Explorer 6 怪异模式的信息非常重要。在本教程中，您仅针对 Internet Explorer 6 及更高版本进行设计，并且需要确保它在标准模式下运行，以最大程度地减少您稍后必须执行的操作。

我们看一下index.php文件头的结构；您希望它尽可能小，但仍然足以满足生产站点的需要。您将使用的标头信息如下：

<?php
	/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined(&#39;_JEXEC&#39;) or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl 
?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl 
?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php 
echo $this->template ?>/css/template.css" type="text/css" />
</head>

这一切意味着什么？

我们已经讨论了 index.php 文件中 DOCTYPE 语句的含义。 ac16d2860bd74e5b9f1019bec2b4bd2f语言; ?0106fee9a73e0f391a610a90a099140e

此代码片段将在生成的页面（即您的前端）中插入全局配置中设置的所有标头信息。在默认安装中，它包括此处显示的标签：

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta  name="robots" content="index, follow" />
<meta  name="keywords" content="joomla, Joomla" />
<meta  name="rights" content="" />
<meta  name="language" content="en-GB" />
<meta  name="description" content="Joomla! - 
the dynamic portal engine and content management system" />
<meta  name="generator" content="Joomla! 1.6 - 
Open Source Content Management" />
<title>Home</title>
<link href="/Joomla_1.6/index.php?format=feed&amp;type=rss" rel="alternate" 
type="application/rss+xml" title="RSS 2.0" />
<link href="/Joomla_1.6/index.php?format=feed&amp;type=atom" 
rel="alternate" type="application/atom+xml" title="Atom 1.0" />

大部分标题信息都是即时创建的，特定于某人正在查看的页面（文章）。它包括许多元标记和任何 RSS 源 URL。

标题中的最后几行提供了 Joomla 生成的页面的 CSS 文件链接，以及此模板中的 CSS 文件：

<link rel="stylesheet" href="<?php echo $this->baseurl 
	?>/templates/system/css/system.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl 
	?>/templates/system/css/general.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php 
echo $this->template ?>/css/template.css" type="text/css" />

前两个文件，system.css 和general.css，包含一些通用的 Joomla 样式。最后一项是模板的所有CSS，这里称为template.css。 PHP 代码 ac16d2860bd74e5b9f1019bec2b4bd2ftemplate ?> 返回当前模板的名称。以这种方式编写而不是编写实际路径会使代码更加通用。当您创建新模板时，您只需复制此行（以及整个标题代码）即可，而不必担心编辑任何内容。

模板 CSS 可以包含任意数量的文件，例如针对不同浏览器和不同媒体（例如打印）的条件文件。例如，以下代码检测并添加一个针对 Internet Explorer 6 怪癖的附加 CSS 文件（我们将在此处将其排除在工作示例之外）：

<!--[if lte IE 6]>
	<link href="templates/<?php echo $this->template ?>/css/ieonly.css" 
	rel="stylesheet" type="text/css" />
<![endif]-->

下一个示例是使用模板参数的技术的一部分。在本例中，在模板管理器中选择作为参数的颜色方案正在加载与所选颜色同名的 CSS 文件：

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
	echo $this->template ?>/css/<?php echo $this->params-
>get(&#39;colorVariation&#39;); ?>.css" type="text/css" />

它可能会生成以下内容：

<link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css"
type="text/css" />

---

Joomla!页面正文

仍然在 index.php 文件中，现在页面的 93f0f5c25f18dab9d176bd4f6de5d30e 部分已设置，我们可以继续处理 body 标记。创建您的第一个模板将会很容易！准备好了吗？

要创建模板，您所需要做的就是使用 Joomla 语句插入主体内容以及您想要的任何模块：

<body>
	<?php echo $app->getCfg(&#39;sitename&#39;);?><br />
	<jdoc:include type="modules"  name="top" />
	<jdoc:include type="modules"  name="left" />
	<jdoc:include type="modules"  name="breadcrumbs" />
	<jdoc:include type="component" />
	<jdoc:include type="modules"  name="right" />
	<jdoc:include type="modules"  name="footer" />
	<jdoc:include type="modules"  name="debug" />
</body>

该模板包含以下内容，按合理的逻辑查看顺序排列：

• 网站名称
• 顶级模块
• 左侧模块
• 面包屑栏
• 主要内容
• 正确的模块
• 页脚模块
• 调试模块

此时（如果您预览它，请确保它是默认模板），该网站看起来不太令人惊叹。

您希望尽可能接近语义标记。从网络的角度来看，这意味着任何人都可以阅读页面——浏览器、蜘蛛或屏幕阅读器。语义布局是可访问性的基石。

请注意，您使用了 Joomla 特有的多个命令中的第一个来创建此输出：

<body>
	<?php echo $app->getCfg(&#39;sitename&#39;);?><br />
	<jdoc:include type="modules"  name="top" />
	<jdoc:include type="modules"  name="left" />
	<jdoc:include type="modules"  name="breadcrumbs" />
	<jdoc:include type="component" />
	<jdoc:include type="modules"  name="right" />
	<jdoc:include type="modules"  name="footer" />
	<jdoc:include type="modules"  name="debug" />
</body>

PHP echo 语句只是从 configuration.php 文件中输出一个字符串。在这里，您使用站点名称；您可以轻松地使用以下内容：

The name of this site is <?php echo $mainframe->getCfg(&#39;sitename&#39;);?><br />
	The administrator email is <?php echo $mainframe->getCfg(&#39;mailfrom&#39;);?><br />
	This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();?>

jdoc 语句插入来自模块或组件的各种类型的 HTML 输出。

该行插入组件的输出。它是什么组件将由链接的菜单项确定： 608c568a82991ca8085cc836155efca5

此行插入模块位置的输出：feeb0a531e0a5da6cc7b72ab1116ffa0

该行为所有位置设置为右侧的模块生成内容。为这些模块生成的内容按照模块管理器的顺序列中设置的顺序放置在页面中。这是完整的语法：

<jdoc:include type="modules"  name="location" style="option" />

---

使用 CSS 创建无表格布局：CSS 模板教程 - 步骤 2

在本节中，您将使用纯 CSS 为 Joomla 模板制作三列布局。您还将使其成为“fixed”布局。网页layouts主要有三种类型——fixed、fluid和jello——它们都是指如何控制页面的宽度。

• fixed 布局的宽度设置为某个 fixed 值。
• fluid 布局可以根据浏览器窗口增大和缩小。
• 果冻布局是 fluid 但介于一些最小值和最大值之间。

几年前，fluid 宽度模板风靡一时。辅助功能人员喜欢它们，抓住浏览器窗口的一角并看到所有内容滑动真是太酷了。

但是现在，我不制作fluid模板，而是专注于fixed宽度模板。我坚信它们最适合当今的网络。四年前，很多人还在使用 800px 宽度的屏幕。 fluid 宽度的要点是，您可以拥有一个在 1024px 屏幕中看起来不错的网页，但仍然可以缩小到仍在使用的较小屏幕。

现在，屏幕的趋势却相反。人们正在使用巨大的屏幕； 32% 的浏览 Joomlahack.com 的人使用的分辨率超过 1024px。

有了这些大屏幕和 960px 宽度布局，你会遇到一个新问题——可读性。研究表明，当您浏览 960px 时，屏幕上的可读性会下降。所以 fluid 的宽度会填满那个大屏幕，并且 a) 看起来很愚蠢，b) 会减慢你的阅读速度。

典型的设计可能使用表格来布局页面。表格作为一种快速解决方案非常有用，因为您只需将列的宽度设置为百分比即可。然而，表格也有一些缺点。例如，与 CSS 布局相比，表格有很多额外的代码。这会导致加载时间更长（冲浪者不喜欢）和搜索引擎性能较差。代码的大小大约可以加倍，不仅可以使用标记，还可以使用“间隔 GIF”，即放置在表格的每个单元格中的 1x1 透明图像，以防止单元格折叠。即使是大公司有时也会陷入桌子陷阱。

基于表格的布局问题

• 它们很难维护。要更改某些内容，您必须弄清楚所有表标记（例如 tr 和 td）正在做什么。使用 CSS，只需检查几行。
• 内容无法按来源订购。许多网络冲浪者不会在浏览器上看到网页。使用文本浏览器或屏幕阅读器查看的用户从左上角到右下角阅读页面。这意味着他们首先查看标题和左列（对于三列布局）中的所有内容，然后再到达重要内容所在的中间列。另一方面，CSS 布局允许“按源排序”内容，这意味着可以在代码/源中重新排列内容。也许您最重要的网站访问者是 Google，它出于各种目的使用屏幕阅读器。

当谈到 CSS 布局时，出现了一种使用新框架的趋势。这个想法是使用一组一致的 CSS 来创建布局，然后维护该组以解决浏览器兼容性等各种问题。对于此模板，我们将采用 Nathan Smith 开发的 960 网格系统。它仍然不是很令人兴奋，但让我们看看不同部分的含义。

使用 960 网格系统，您只需用一个类指定您想要的网格有多大。在此示例中，我使用 12 列网格，因此要使标头横跨 960px 的整个宽度，请在 index.php 中使用：

<div id="header" class="container_12"></div>

对于我们的三列，我们在容器内添加网格，如下所示：

<div id="content" class="container_12">
<div id="" class="grid_3 ">
<jdoc:include type="modules"  name="left" />
</div>
<div id="" class="grid_6">
<jdoc:include type="modules"  name="breadcrumbs" />
<jdoc:include type="component" />
</div>
<div id="" class="grid_3">
<jdoc:include type="modules"  name="right" />
</div>
</div>

请注意，具有 10px 列间距（通常称为装订线）的内容已经有了一些喘息空间。这一切都是由聪明的 960 CSS 网格框架自动完成的，并且所有浏览器问题（是的，我们指的是您，Internet Explorer）都得到了处理。

index.php主要代码如下：

<body>
	<div id="header" class="container_12">
<?php echo $app->getCfg(&#39;sitename&#39;);?><br />
<jdoc:include type="modules"  name="top" />
</div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules"  name="left" />
</div>
<div id="maincolumn" class="grid_6">
<jdoc:include type="modules"  name="breadcrumbs" /
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules"  name="right" />
</div>
</div>
<div id="footer" class="container_12">
<jdoc:include type="modules"  name="footer" />
</div>
<jdoc:include type="modules"  name="debug" />
</body>

在此示例中，我将 CSS 文件重命名为 layout.css。使用 960 网格框架，我们很少需要接触这个文件，并且可以尽可能地压缩它。 layout.css 文件的关键部分如下所示：

.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,
.grid_10,.grid_11,.grid_12,.grid_12 {display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}

很简单，所有内容都向左浮动，并且各种网格大小根据其所需的宽度设置。它是一个 12 列的网格，因此，例如 grid_6 表示六列，即 460 像素 - 全宽度减去填充。这个简单的布局非常适合学习如何在 Joomla 中使用 CSS，因为它显示了 CSS 相对于基于表格的布局的两个优点：代码更少，并且更易于维护。

按源排序的布局对于 SEO 效果更好。

但是，这个简单的布局是按照您在屏幕上看到内容的顺序在代码中排序的。将最重要的内容放置在生成的 HTML 源代码的开头，但在屏幕上仍具有相同的按查看器排序的外观，即左侧列显示在中心列之前（即左侧），这不是“源排序” .

按源代码排序的布局比重要内容出现在代码后期的布局更适合 SEO。从 Joomla 网站的角度来看，重要的内容是来自主体组件的内容。目前，为了保持 CSS 简单，我们将坚持使用这种按查看器排序的布局，并在本文后面更改为按源排序的布局。许多商业模板（例如 Joomlahack 的模板）进一步发展了这种按源排序的概念。

默认CSS

到目前为止，所有 CSS 都只是关于布局，这使得页面变得简单。因此，让我们添加一些格式，将 CSS 放置在名为typography.css 的新文件中。记得将其添加到index.php文件中！

当您开始使用 CSS 进行排版时，您应该设置一些整体样式并包括一个简单的全局重置：

/*Compass Design typography css */
* {
 margin:0;
 padding:0;
 }
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
 margin: 0.5em 0; 
 }
li,dd { 
 margin-left:1em;
 }
	
	fieldset { 
 padding:.5em; 
 }
body {
 font-size:76%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 line-height:1.3;
 }

全局重置的目的是覆盖每个浏览器中不同的默认设置，并获得一个干净、一致的起点，无论页面显示在哪个浏览器上。

所有内容都被赋予零边距和填充，然后所有块级元素都被赋予底部和底部边距。这有助于实现浏览器的一致性。 （上面的第一个 CSS 选择器称为星形选择器，即使在 Internet Explorer 6 中，它也可以充当通用选择器。）您可以在此处和此处阅读有关全局重置的更多信息。

您将字体大小设置为 76% 以尝试在各个浏览器中获得更一致的字体大小。然后在 ems 中设置所有字体大小。设置 line-height:1.3 有助于提高可读性。当您在 ems 中设置字体和行高时，页面将更易于访问，因为查看者将能够根据自己的喜好调整字体大小，并且页面将重排并保持可读。此处将对此进行进一步讨论。

如果您要向标题、侧边栏和内容容器添加一些背景颜色，您会看到如下所示的内容。

请注意，侧栏未到达页脚。这是因为它们仅延伸到其内容；如果左侧和右侧的空间为白色，则侧列不存在。

如果您的模板的所有三列都是白色背景，那么这没有问题。您将使用这种方法，并且模块周围会有方框。如果您想要彩色或带有方框的等高列，则必须使用某种技术使列具有相同的高度。一种常见的解决方案是使用 JavaScript 脚本来动态计算和设置高度。

模板中的模块

当在 index.php 文件中调用模块时，有多种显示方式的选项。语法如下：

<jdoc:include type="modules"  name="location" style="option" />

样式是可选的，在 templates/system/html/modules.php 中定义。目前，默认的 modules.php 文件包含以下布局选项：table、horz、xhtml、rounded 和 none。让我们简要了解一下每个选项所需的代码行：

OPTION="table" (默认显示)模块显示在一列中。如果我们使用 "table" 选项，下面显示了 Joomla 的输出。请注意，PHP 语句将被实际内容替换：

<table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params-
	>get(&#39;moduleclass_sfx&#39;); ?>">
<?php if ($module->showtitle != 0) : ?>
<tr>
<th valign="top">
<?php echo $module->title; ?>
</th>
</tr>
<?php endif; ?>
<tr>
<td>
<?php echo $module->content; ?>
</td>
</tr>
</table>

OPTION="horz" 使模块水平显示。每个模块都在包装器表的单元格中输出。如果我们使用 "horz" 选项，以下显示了 Joomla 的输出：

 <table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<?php modChrome_table($module, $params, $attribs); ?>
</td>
</tr>
</table>

OPTION="xhtml" 使模块显示为简单的 div 元素，标题位于 H3 中

标签。如果我们使用 "xhtml" 选项，以下显示了 Joomla 的输出：

<div class="moduletable<?php echo $params->get(&#39;moduleclass_sfx&#39;); ?>">
<div class="moduletable<?php echo $params->get(&#39;moduleclass_sfx&#39;); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>

OPTION="rounded" 使模块以允许可拉伸圆角等的格式显示。如果使用 $style，则 div 名称从 moduletable 更改为 module。如果我们使用 "rounded" 选项，以下显示了 Joomla 的输出：

<div class="module<?php echo $params->get(&#39;moduleclass_sfx&#39;); ?>">
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div>

OPTION="none" 使模块显示为不包含任何元素和标题的原始输出。

如您所见，CSS 选项（xhtml 和 rounded）的代码更加简洁，这使得设计网页样式变得更加容易。除非绝对需要，否则我不建议使用选项（后缀）表（默认）或 horz。

如果您检查前面显示的 modules.php 文件，您将看到模块中存在的所有这些选项。添加您自己的内容很容易；这是 Joomla 1.6 新模板功能的一部分。

要开发模板，您可以将模块样式xhtml放在index.php中的所有模块上：

<body>
	<div id="header" class="container_12">
<?php echo $app->getCfg(&#39;sitename&#39;);?><br />
<jdoc:include type="modules"  name="top" style="xhtml" />
</div>
<div class="clear"></div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<div id="maincolumn" class="grid_6">
<jdoc:include type="modules"  name="breadcrumbs" style="xhtml" 
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules"  name="right" style="xhtml" />
</div>
</div>
<div class="clear"></div>
<div id="footer" class="container_12">
<jdoc:include type="modules"  name="footer" style="xhtml" />
</div>
<jdoc:include type="modules"  name="debug" />
</body>

让我们从布局 div 中删除背景，并添加一些 CSS 来设置模块的样式，其中包含模块标题的边框和背景。

我们将以下内容添加到排版中。您的 CSS 文件现在应该如下所示：

#header{
 font-size:2em;
 }
#footer{
 border-top: 1px solid #999;
 }
a{
 text-decoration:none;
 }
a:hover{
 text-decoration:underline;
 }
h1,.componentheading{
 font-size:1.7em;
 }
h2,.contentheading{
 font-size:1.5em;
 }
h3{
 font-size:1.3em;
 }
h4{
 font-size:1.2em;
 }
	
	h5{
 font-size:1.1em;
 }
h6{
 font-size:1em;
 font-weight:bold;
 }
#footer,.small,.createdate,.modifydate,.mosimage_caption{
 font:0.8em Arial,Helvetica,sans-serif;
 color:#999;
 }
.moduletable{
 margin-bottom:1em;
 padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
 }
.moduletable h3{
 background:#666;
 color:#fff;
 padding:0.25em 0;
 text-align:center;
 font-size:1.1em;
 margin:0 -10px 0.5em -10px;
 /*negative padding to pull h3 back out from .moduletable padding*/ 
ul.actions li{
float:right;
list-style:none;
border:0;}
ul.actions li a img{
border:0;}

在这里，您为使用 style="xhtml" 生成的模块添加了特定的样式规则，因此每个模块都生成了 .moduletable 类的 dc6dce4a544fdca2df29d5ac0ea9906b，并且模块的标题显示在该 dc6dce4a544fdca2df29d5ac0ea9906b 内的 684271ed9684bde649abda8831d4d355 标记中。

您创建的排版 CSS 现在会产生如下所示的结果。

模板中的菜单

同样，使用 CSS 列表而不是表格可以减少代码并简化标记。将 CSS 用于菜单的其他优点之一是，各种 CSS 开发人员网站上都有大量示例代码。让我们看一下其中一个并看看如何使用它。

maxdesign.com 的网页有三十多个菜单可供选择，所有菜单都使用相同的底层代码。它被称为Listamatic。您必须更改代码才能使这些菜单适应 Joomla。

这些基于列表的菜单使用以下通用代码结构：

<div id="navcontainer"> 
	<ul id="navlist">
	<li id="active"><a href=" #" id="current">Item one</a></li>
	<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>

这意味着有一个名为 navcontainer 的封闭 dc6dce4a544fdca2df29d5ac0ea9906b，并且 ff6d136ddc5fdfeffaf53ff6ee95f185 有一个 id of navlist。要在 Joomla 中复制此效果，您需要某种封闭的 dc6dce4a544fdca2df29d5ac0ea9906b。您可以通过使用模块后缀来实现这一点。回想一下，带有 style="xhtml" is 的模块的输出如下：

<div class="moduletable">
<h3>...Module_Title...</h3>
...Module_Content... 
</div>

如果添加一个名为 menu 的模块后缀，它将被添加到 moduletable 类中，如下所示：

<div class="moduletablemenu">
<h3>...Module_Title...</h3>
...Module_Content... 
</div>

因此，从 Listamatic 中选择菜单时，您需要将 CSS 中的 navcontainer 类样式替换为 moduletablemenu。

模块类后缀的使用很有用。只需简单更改模块类后缀即可使用不同颜色的框。

对于您的网站，假设您想要使用 Mark Newhouse 的列表 10（请参见此处）。你的 CSS 看起来像这样：

.moduletablemenu{
 padding:0;
 color: #333;
 margin-bottom:1em;
 }
.moduletablemenu h3 {
 background:#666;
 color:#fff;
 padding:0.25em 0;
 text-align:center;
 font-size:1.1em;
 margin:0;
 border-bottom:1px solid #fff;
 }
.moduletablemenu ul{
 list-style: none;
 margin: 0;
 padding: 0;
 }
.moduletablemenu li{
 border-bottom: 1px solid #ccc;
 margin: 0;
 }
.moduletablemenu li a{
 display: block;
 padding: 3px 5px 3px 0.5em;
 border-left: 10px solid #333;
 border-right: 10px solid #9D9D9D;
 background-color:#666;
 color: #fff;
 text-decoration: none;
 }
html>body .moduletablemenu li a {
 width: auto;
 }
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
 }

您需要将模块后缀菜单（在本例中没有下划线）添加到您想要使用这组 CSS 规则设置样式的菜单的任何模块中。这会生成如下所示的菜单

隐藏列

到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从 CMS 模板的角度来看，这并不是很有用。在静态网站中，内容永远不会改变，但您希望网站管理员能够将内容放入任何列中，而不必担心编辑 CSS 布局。您希望能够自动关闭某列，或者在没有内容显示的情况下将其折叠。

Joomla 1.6 提供了一种简单的方法来计算为特定位置生成内容的模块数量，以便您可以添加对这些计数的一些 PHP 测试并隐藏任何空列或类似的未使用的 div 容器，并相应地调整布局。 PHP if 模块测试语法如下：

<?php if($this->countModules(&#39;condition&#39;)) : ?>
do something
<?php else : ?>
do something else
<?php endif; ?>

有四种可能的情况。例如，我们来统计一下图 9.7 中的模块数量。您可以将此代码插入到index.php中的某个位置：

left=<?php echo $this->countModules(&#39;left&#39;);?><br />
	left and right=<?php echo $this->countModules(&#39;left and right&#39;);?><br />
	left or right=<?php echo $this->countModules(&#39;left or right&#39;);?><br />
left + right=<?php echo $this->countModules(&#39;left + right&#39;);?>

因此，如果我们将此代码插入到模板中，我们可能会通过示例 Joomla 内容获得以下结果：

• countModules('left') - 返回 3，因为左侧有 3 个模块。
• countModules('left and right') - 返回 1，因为左侧和右侧位置都有一个模块。两个测试都是正确的（>0）。
• countModules('left or right') - 返回 1，因为左侧或右侧位置有一个模块。两个测试都是正确的（>0）。
• countModules('left + right') - 返回 4，因为它将左侧和右侧位置的模块加在一起。

在这种情况下，您需要使用允许您对特定位置（例如右列）中存在的模块进行计数的函数。如果右栏没有发布内容，您可以调整栏大小来填充该空间。

有多种方法可以做到这一点。您可以将条件语句放在正文中以不显示内容，然后根据其中的列使用不同的内容样式。我们将利用网格系统，并根据一些计算简单地传递网格的大小。

在标头中，我们定义几个变量以确保它们具有默认值。

$leftcolgrid= "3";
$rightcolgrid= "3";

在模板的 HTML 中，我们可以使用这些变量来设置网格类：

<div id="content" class="container_12">
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<div id="maincolumn" class="grid_<?php echo 
(12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules"  name="right" style="xhtml" />
</div>
</div>

您会注意到我们正在回显 colgrid 值，然后进行简单的计算来查找主列，因为我们知道它们的总数必须为 12。

然后我们可以使用 countModules 函数来查找一些值。在我们的头脑中我们插入：

<?php
	if ($this->countModules(&#39;left&#39;) == 0):?>
	<?php $leftcolgrid = "0";?>
	<?php endif; ?>
	<?php
	if ($this->countModules(&#39;right&#39;) == 0):?>
	<?php $rightcolgrid = "0";?>
<?php endif; ?>

请注意，我们正在检查左右位置是否有零个模块，因为我们已经将默认网格大小设置为 3。我们也可以通过真/假检查而不是数值来完成此检查（零）。

您已经完成了一半，但现在您已经扩展了中心列的宽度以容纳任何空的（即将隐藏）侧列。

隐藏模块代码

创建可折叠列时，最好将模块设置为在没有内容时不生成。如果不这样做，页面中将包含空 div，这可能会导致跨浏览器问题。

为了不生成空 div，请使用以下 if 语句：

<?php if($this->countModules(&#39;left&#39;)) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<?php endif; ?>

当您使用此代码时，如果left位置没有发布任何内容，则633cdb7db50a7837a57b9c4ff5b31dc7;此外，其中的所有内容都不会包含在生成的页面中。

对左列和右列使用这些技术，您的 index.php 文件现在如下所示：

countModules('left') == 0):?>


countModules('right') == 0):?>





getCfg('sitename');?>





<?php if($this->countModules(&#39;left&#39;)) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<?php endif; ?>




countModules('right')) : ?>

本节中创建的基本模板展示了创建 Joomla 模板的一些基本原则。

现在您已经完成了基础知识，您可以使用您学到的技术创建一个稍微更具吸引力的模板。

---

制作真正的 Joomla! 1.6 模板：960模板教程-步骤3

您需要从一个比较开始。合成图是构图的缩写，是作为模板基础的拟议设计的绘图或模型。

在本节中，我们将使用 Dan Cedarholm 的《Bulletproof Web Design》一书中的设计。我衷心推荐这本书，因为它为一些 CSS 技术提供了出色的基础，这些技术对于创建 Joomla 模板非常有用。

我们将使用其中一些技术来构建这个真实的模板。

切片和切块

该过程的下一步是切片。您需要使用图形程序创建可在模板中使用的小切片图像。重要的是要注意元素如何在需要时调整大小。 （我选择的图形应用程序是 Fire-works，因为我发现它比 Photoshop 更适合网页设计（而不是印刷设计）。）

这个过程本身就可以写满一整本书。要了解如何对设计进行切片，您可以查看图像文件夹并查看切片。

标题

标题图像顶部有微弱的渐变。我们将图像作为未处理的背景放入，然后在其后面分配匹配的填充颜色。这样，如果需要，标题可以垂直缩放（例如，如果调整字体大小）。您还需要将任何类型的颜色更改为白色，以便它显示在黑色背景上。

这是我们必须添加的 CSS 来设置标题样式。

#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(../images/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url(../images/bulls-eye.gif) no-repeat top left;
}

您在这里没有使用图形徽标；你使用纯文本。原因主要是搜索引擎无法读取图像。您可以进行一些漂亮的图像替换，但我会将其作为练习留给您自己完成。

横幅/消息模块

我们使用最后一个模板中的“顶部”模块位置来发送消息。为了给它一些样式，我们可以添加

#message {
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530 url(../images/message-bg.gif) repeat-x top left;
}
#message .moduletable {
padding:1px 10px;
}

标题现在如下所示：

接下来，您需要实现一种技术来在侧栏上显示背景。

列背景

回想一下，当您在列上放置彩色背景时，颜色并没有一直延伸到页脚。这是因为 div 元素（在本例中为 sidebar 和 sidebar-2）仅与内容一样高。它不会增长以填充包含元素。这是基于网格的系统的弱点；我们必须使用一些 JavaScript 来获取侧栏的背景。

有许多脚本可以计算列的高度并使它们相等。我们将使用 Dynamic Drive 中的一个：http://www.dynamicdrive.com/csslayouts/equalcolumns.js。

请注意，我们必须更改脚本中引用的列/元素以与我们的相匹配。我们还将添加另一个包含块元素“maincolbck”来保存主列内容顶部的黄色褪色背景。

我们在index.php中的主要内容代码如下所示：

<div id="content" class="container_12">
	<div id="maincolbck">
<?php if($this->countModules(&#39;left&#39;)) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml" />
</div>
<?php endif; ?>
<div id="maincolumn" class="grid_<?php echo 
(12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>


<?php if($this->countModules(&#39;right&#39;)) : ?>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules"  name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>
<div class="clear">
</div>

在添加这些元素时，我们还可以在页脚元素上添加背景。我们添加的 CSS 是：

#content {
font-size: 95%;
color: #333;
line-height: 1.5em;
background: url(../images/content-bg.gif) repeat-x top left;
}
#maincolbck {
background: url(../images/wrap-bg.gif) repeat-y top right;
}
#footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
padding:1px 0;
}

这现在为我们提供了右列的渐变背景：

	 #footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
padding:1px 0;
}

灵活的模块

设计模块时，您需要考虑它们是否会垂直拉伸（如果其中包含更多内容）、水平拉伸或两者兼而有之。这里我们使用 Dan 书中包含的防弹设计原理。我们使用几个简单的背景图像来创建在两个轴上延伸的模块背景。我们将一个背景放置在包含的 div 上，将另一个背景放置在 h3 标题的对角上。

由于此设计没有水平菜单，因此我们在考虑侧面模块时也会考虑菜单样式。

我们的 CSS 看起来像这样：

#sidebar .moduletable,#sidebar-2 .moduletable { 
margin: 10px 0 10px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #fff url(../images/box-b.gif) no-repeat bottom right;
}
#sidebarh3,#sidebar-2h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
background: url(../images/box-t.gif) no-repeat top left;
}
#sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {
margin: 0;
padding: 0 12px;
}
sidebar ul li,#sidebar-2 ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
list-style: none;
background: url(../images/li-bullet.gif) no-repeat 0 3px;
}

现在让我们关注一些排版。

版式

Joomla 1.6 中的 CSS 排版得到了极大的简化。 Joomla 的早期版本对输出的各个部分有独特的类，例如“contentheading”。在 Joomla 1.6 中，输出使用更多可识别的类，如 H1、H2 等，并且完全无表。

让我们设置这些元素的样式：

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
h1 {font-size:2em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:1.5em;margin-bottom:0.75em;}
h3 {font-size:1.25em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em;}

我们还可以为可应用于内容的特殊类添加一些方便的图标处理：

p.info {
background: #F8FAFC url(../images/info.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #B5D4FE;
border-bottom: 2px solid #B5D4FE;
}
p.warn {
background: #FFF7C0 url(../images/warn.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #F7D229;
border-bottom: 2px solid #F7D229;
}

p.alert {
background: #FBEEF1 url(../images/exc.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}
ul.checklist li {
list-style:none;
background: url(../images/tick.png) no-repeat 0 4px;
line-height: 24px;
padding-left: 20px;
}

完成的模板应如下所示

---

摘要

此摘录通过了四个模板示例，每次都增加了复杂性和功能。以下是我们审查的要点：

• 现代网站通过使用一种称为级联样式表 (CSS) 的技术将内容与演示分离。在 Joomla 中，模板及其 CSS 文件控制内容的呈现。
• 创建模板时，它有助于让 Joomla 在本地主机服务器上“运行”，这样您就可以使用您喜欢的编辑器在文件级别进行更改，并在浏览器中刷新页面输出以查看影响。
• 创建有效的模板应该是一条路径，而不是一个目标。我们的想法是让模板尽可能易于人类和蜘蛛使用，而不是为了获得有效标记的徽章。
• 最基本的模板只是加载 Joomla 模块和 mainbody 组件，最好按源代码顺序加载。布局和设计是 CSS 的一部分，而不是模板的一部分。
• 现代网页设计使用 CSS 而不是表格来定位元素。学习起来很困难，但值得投资。有许多（非 Joomla）资源可以提供帮助。
• Joomla 始终输出网页代码中的特定元素、ID 和类。这些可以通过 CSS 进行预测并用于设计设计风格。
• 模块的输出可以完全自定义，也可以使用预构建的输出选项，例如 xhtml。所有这些选项称为模块 chrome。
• 最好始终使用完全展开的列表选项进行菜单输出。然后，您可以使用 Web 上的许多免费 CSS 资源来设置菜单的样式和动画。
• 当列或模块位置等元素中没有内容时，可以隐藏（或折叠）这些元素。这是使用条件 PHP 语句来完成的，该语句控制与未使用的模块及其容器关联的任何代码是否包含在生成的页面中；它还可以链接到不同的 CSS 样式以相应地调整布局。
• 创建生产 Joomla 模板更多的是图形设计和 CSS 操作的问题，而不是一些特殊的 Joomla 知识。

以上がJoomla でテンプレートを作成する: ステップバイステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。