집 > 기사 > CMS 튜토리얼 > Joomla를 사용하여 템플릿 만들기: 단계별

Joomla를 사용하여 템플릿 만들기: 단계별

WBOY원래의: 2023-09-04 14:17:391170검색

이 튜토리얼은 처음부터 Joomla 템플릿을 만드는 데 필요한 단계를 안내합니다. 우리는 모든 세부 사항을 다룰 것이므로 시작하겠습니다!

이 튜토리얼은 Pearson에서 최근 출시한 "Joomla! 1.6: User Guide"에서 발췌한 것입니다.

게임 계획

Joomla 템플릿이란 무엇입니까? Joomla 템플릿의 기능은 무엇입니까? 콘텐츠가 없는 템플릿과 CMS에 콘텐츠가 추가된 템플릿의 차이점은 무엇인가요?
로컬 호스트 디자인 프로세스는 정적 HTML 웹 디자인 프로세스와 어떻게 다른가요?
Joomla의 테이블 없는 디자인은 어떤 의미를 갖나요? W3C 표준, 유용성 및 접근성 사이의 관계는 무엇입니까?
Joomla 템플릿은 어떤 파일로 구성되어 있으며 어떤 기능을 수행합니까?
테이블 대신 CSS를 사용하여 소스 순서대로 3열 레이아웃을 만드는 방법은 무엇입니까?
Joomla에서 사용해야 하는 기본 CSS 스타일은 무엇이며 Joomla 코어에서 사용하는 기본 스타일은 무엇입니까?
모듈을 배치하고 스타일을 지정하는 방법은 무엇입니까? 둥근 모서리를 위한 새로운 기술은 무엇입니까?
JavaScript로 개발된 메뉴의 효과를 모방하는 최소한의 CSS 메뉴를 만들기 위한 간단한 전략은 무엇입니까?
열이 표시되는 시기와 콘텐츠가 없는 경우, 열이 숨겨지는 시기를 어떻게 제어하나요?
Joomla 1.6 템플릿을 만드는 올바른 단계는 무엇입니까?

Joomla! 템플릿이 무엇인가요?

Joomla 템플릿은 콘텐츠 렌더링을 제어하는 Joomla CMS의 일련의 파일입니다.

Joomla 템플릿은 콘텐츠 렌더링을 제어하는 Joomla CMS의 일련의 파일입니다. Joomla 템플릿은 웹사이트가 아닙니다. 또한 완전한 웹사이트 디자인으로 간주되지 않습니다. 템플릿은 Joomla 웹사이트를 보기 위한 기본 디자인입니다. "완전한" 웹사이트의 효과를 내기 위해 템플릿은 Joomla 데이터베이스에 저장된 콘텐츠와 긴밀하게 작동합니다.

템플릿은 콘텐츠를 삽입할 때 링크 스타일, 메뉴, 탐색, 텍스트 크기 및 색상 등 템플릿에 정의된 스타일시트의 스타일을 자동으로 상속하도록 스타일이 지정되어 있습니다.

Joomla와 마찬가지로 CMS 템플릿을 사용하면 많은 장점이 있습니다.

Joomla는 페이지에 콘텐츠를 넣는 모든 작업을 수행합니다. 새 게시물을 입력하기만 하면 기존 블로그 페이지에 새 정보를 추가할 수 있습니다. 템플릿과 해당 CSS는 사이트의 나머지 콘텐츠와 스타일적으로 일관성을 유지하도록 보장합니다.
컨텐츠와 프리젠테이션이 완전히 분리됩니다. 특히 CSS가 레이아웃에 사용되는 경우(index.php 파일의 테이블을 사용하는 대신). 이는 웹사이트가 최신 웹 표준을 충족하는지 여부를 결정하는 주요 기준 중 하나입니다. 표준을 준수하는 사이트에서 테이블의 HTML 마크업은 페이지를 열로 배치하는 대신 테이블 형식의 데이터를 표시하기 위해 예약되어 있습니다.
새 템플릿을 즉시 적용하여 웹 사이트를 새롭고 새로운 모습으로 꾸밀 수 있습니다. 여기에는 색상과 그래픽뿐만 아니라 콘텐츠와 모듈을 다른 위치에 배치하는 것이 포함될 수 있습니다.

Localhost 디자인 프로세스

Joomla 기반 웹사이트에서 볼 수 있는 웹페이지는 정적이 아니며 데이터베이스에 저장된 콘텐츠를 기반으로 동적으로 생성됩니다. 데이터베이스의 콘텐츠가 변경되면 해당 콘텐츠를 표시하는 모든 페이지가 즉시 변경됩니다. 표시되는 페이지는 데이터베이스를 쿼리하는 템플릿의 다양한 PHP 명령을 통해 생성됩니다. 템플릿이 내용이 아닌 코드 줄처럼 보이기 때문에 디자인 단계에서 약간의 어려움이 있습니다.

웹페이지를 만드는 데 "올바른 방법"은 없습니다.

이제는 Dreamweaver와 같은 WYSIWYG(What You See Is What You Get) HTML 편집기를 사용하는 것이 일반적이므로 HTML 코드를 작성할 필요가 없습니다. 그러나 WYSIWYG 편집기는 동적 페이지를 표시하고 편집할 수 없기 때문에 Joomla 템플릿 디자인 중에는 이러한 편집기를 사용할 수 없습니다. 따라서 템플릿과 해당 CSS를 수동으로 코딩하고 변경 시 자주 새로 고쳐지는 서비스 페이지에서 PHP의 출력 페이지를 확인해야 합니다. 연결이 충분히 빠르면 웹 서버일 수 있지만 대부분의 디자이너는 컴퓨터에서 로컬 서버나 로컬 호스트(12장에서 설명하는 로컬 호스트 설정과 같이 컴퓨터에서 웹 페이지를 제공하는 소프트웨어)를 사용합니다. "Joomla를 다운로드하고 설치하세요!"

웹 페이지를 만드는 방법은 배경에 따라 "올바른 방법"이 없습니다. 그래픽을 선호하는 사람들은 그래픽 프로그램(예: Photoshop)에서 페이지의 "이미지"를 만든 다음 웹에서 사용하기 위해 이미지를 분할하는 경향이 있습니다(슬라이싱 및 다이싱이라고 함). 더 많은 기술 기반 디자이너는 CSS로 직접 뛰어들어 글꼴, 테두리 및 배경 코딩을 시작하는 경우가 많습니다. 그러나 방금 언급한 것처럼 Joomla 템플릿 디자이너로서 동일한 편집기에서 코딩 효과를 즉시 확인할 수 없다는 사실로 인해 제한됩니다. 따라서 다음과 같이 수정된 디자인 흐름을 사용할 수 있습니다.

로컬 호스트 서버가 Joomla를 "실행"하기 위해 백그라운드에서 실행 중인 항목을 로드하도록 합니다.
편집기를 사용하여 HTML과 CSS를 편집한 다음 변경 사항을 서버에 저장하세요.
웹 브라우저에서 편집 내용의 영향을 받는 페이지를 확인하세요.

Localhost Server Option

이 튜토리얼을 계속하려면 WampServer를 설치해야 합니다. 아직 수행하지 않은 경우 설치를 계속하십시오. 여기서 기다릴게요.

호스팅 웹 서버에서는 브라우저의 다른 탭에서 프런트엔드를 여는 동안 백엔드의 HTML 템플릿과 CSS 파일을 편집할 수 있습니다. 변경 사항을 저장할 때 프런트엔드 보기를 새로 고치면 영향을 확인할 수 있습니다.

localhost 설정을 사용하면 더욱 편리하게 파일에 직접 액세스하고 원하는 편집기로 편집할 수 있습니다. 변경 사항을 저장한 후 브라우저에서 프런트엔드 보기를 새로 고치고 편집기를 닫지 않고도 영향을 확인할 수 있습니다.

W3C 및 테이블 없는 디자인

사용성, 접근성 및 검색 엔진 최적화(SEO)는 모두 오늘날 인터넷에서 고품질 웹 페이지를 설명하기 위해 사용되는 문구입니다. 실제로 유용성, 접근성, SEO 간에는 상당한 중복이 있으며 이러한 특성 중 하나를 나타내는 웹 페이지는 종종 세 가지 모두를 나타냅니다. 이 세 가지 목표를 달성하는 가장 간단한 방법은 W3C 웹 표준에 지정된 프레임워크를 사용하는 것입니다.

예를 들어, 시력이 약한 사람은 스크린 리더를 사용하여 HTML 의미 체계를 사용하여 구축된 웹 사이트를 쉽게 읽을 수 있습니다. 검색 엔진 스파이더에서도 쉽게 읽을 수 있습니다. Google은 실제로 스크린 리더를 사용하는 것과 마찬가지로 웹사이트를 읽는 방법에 대해 무지합니다.

웹 표준은 모든 웹 브라우저가 웹 페이지를 표시하는 데 사용하는 공통 "규칙" 세트를 설정합니다. 이러한 표준을 주도하는 주요 조직은 W3C이며, 그의 이사인 Tim Berners-Lee는 1989년에 웹을 발명한 것으로 알려져 있습니다.

웹 표준이 어디서 왔는지 이해하려면 약간의 역사를 아는 것이 도움이 됩니다. 실제로 많은 웹페이지는 구형 브라우저용으로 설계되었습니다. 왜? 월드 와이드 웹(World Wide Web)이 탄생한 이후 브라우저는 계속해서 발전해 왔습니다. 각 세대마다 새로운 기능이 도입되었으며, 이를 위해 제조업체는 서로 다르고 때로는 독점 라벨(이름)을 내놓았습니다. 각 브라우저는 동일한 기본 HTML 언어를 구현하는 서로 다른 구문 또는 "방언"과 특징을 갖는 경향이 있습니다. 새로운 브라우저가 등장했고 일부 오래된 브라우저는 사라졌습니다(Netscape를 기억하시나요?).

현재 W3C 표준은 제조업체가 동일한 언어를 읽고 페이지를 보다 일관되게 표시하여 디자이너가 단일 공통 플랫폼용으로 디자인할 수 있는 보다 호환 가능한 브라우저를 출시하도록 유도하는 데 도움이 됩니다.

또 다른 복잡한 요인은 역사적으로 다양한 브라우저 제조업체(예: Microsoft)가 브라우저에서 HTML을 약간 다른 방식으로 해석하는 경향이 있다는 것입니다. 따라서 웹 디자이너는 최신 브라우저보다는 기존 브라우저를 지원하도록 웹사이트를 디자인해야 합니다. 디자이너와 웹사이트 소유자는 종종 웹페이지가 이러한 "이전" 브라우저에서 올바르게 표시되는 것이 중요하다고 생각합니다. 웹 페이지 코드에 대한 W3C 표준은 일관성을 달성하기 위해 개발되었습니다. W3C 웹 표준을 통합한 웹 사이트는 검색 엔진에 액세스하고 사용 가능하며 최적화할 수 있는 좋은 기반을 갖추고 있습니다. 이것을 집의 건축 법규라고 생각하십시오. 이를 통해 구축된 웹사이트는 더 강력하고 안전하며 사용자 기대에 부응합니다. W3C의 HTML 유효성 검사 서비스(validator.w3.org)를 사용하여 페이지를 확인할 수 있습니다. 쉽고 무료입니다(코드를 검증할 때 올바른 DOCTYPE을 사용하는지 확인하세요. 가장 간단하게 W3C 검증을 충족하는 사이트는 시맨틱 HTML을 사용하고 CSS를 사용하여 콘텐츠를 프레젠테이션에서 분리할 수도 있습니다.

Five Designers에게 물어보세요. 웹 표준은 무엇이며 다섯 가지 다른 답변을 얻을 수 있지만 웹 표준은 최신 버전의 표준

에 지정된 대로 HTML(또는 기타)이든 유효한 코드 사용을 기반으로 한다는 데 대부분 동의합니다.

의미적으로 올바른 코드

의미상 정확하다는 것은 웹 페이지의 HTML 태그가 프레젠테이션이 아닌 콘텐츠만 설명한다는 것을 의미합니다.

앞서 언급했듯이 의미상 정확하다는 것은 웹 페이지의 HTML 태그가 프레젠테이션이 아닌 콘텐츠만 설명한다는 것을 의미합니다. 이는 H1 태그, H2 태그 등의 구조화된 구성을 의미하며 레이아웃이 아닌 표 형식 데이터에만 테이블을 사용한다는 의미입니다. Joomla 템플릿 디자이너가 순수한 의미 정확성에 대해 약간 타협한 영역 중 하나는 왼쪽 및 오른쪽 열의 이름을 지정하는 것입니다. 2열 또는 3열 레이아웃은 의미상 더 정확한 사이드바 또는 사이드바 대신에, 이는 단지 템플릿 PHP에서 사용된 위치 이름일 뿐이며, 기술적으로 왼쪽과 관련된 모든 것을 명명하거나 분류합니다. 표시 페이지의 열은 HTML 및 CSS에서 일치하는 클래스를 정의하는 데에도 사용된다면 용서할 수 있는 편의를 제공합니다. 아래 예에서 왼쪽 위치는 클래스 사이드바를 사용하여 스타일이 지정된 것을 볼 수 있습니다. Sidebar-2는 의미상 올바른 코드

Cascading Style Sheets (CSS)

입니다. 의미상 정확하고 밀접한 관련이 있는 것은 CSS를 사용하여 웹 페이지의 모양과 레이아웃을 제어하는 것입니다. 웹 문서에 스타일(글꼴, 색상, 간격 등)을 추가하는 메커니즘

CSS는 HTML 코드와 나란히 존재합니다. 콘텐츠(코드)는 프레젠테이션(CSS)과 완전히 분리될 수 있습니다.

이 내용을 실제로 보려면 , CSS 파일만 변경하면 동일한 HTML 콘텐츠를 다양하고 독특한 방식으로 표시하는 웹사이트인 CSS Zen Garden을 확인해 보세요. 결과 페이지는 매우 다르게 보이지만 핵심 콘텐츠는 완전히 동일합니다

현재 Joomla로 구동되는 웹사이트를 디자인하는 것은 검증 표준을 충족하는 데 상당한 어려움에 직면해 있습니다.

현재 Joomla로 구동되는 웹사이트를 디자인하는 것은 검증 표준을 충족하는 데 상당한 어려움에 직면해 있습니다. Joomla 버전의 첫 번째 시리즈인 1.0.X에서는 코드가 페이지를 출력하기 위해 많은 테이블을 사용했습니다. 이것은 실제로 CSS를 사용하는 방법을 보여주는 것이 아니며 의미상 올바른 코드를 생성하는 것도 아닙니다. 이 문제는 많은 타사 구성 요소 및 모듈 개발자가 여전히 테이블을 사용하여 레이아웃을 생성한다는 사실로 인해 더욱 복잡해집니다.

다행히 Joomla 핵심 개발팀은 Joomla에서 이 문제를 인식했습니다. Joomla 1.5에서 템플릿 디자이너는 코어의 출력(뷰라고 함)을 완전히 무시하고 원하는 방식으로 테이블을 제거하거나 레이아웃을 사용자 정의할 수 있습니다.

템플릿을 만들 때 액세스 가능(예: 확장 가능한 글꼴 크기), 사용 가능(명확한 탐색), 검색 엔진에 최적화(정렬된 소스 코드)를 보장하려면 여전히 주의가 필요합니다.

간단한 템플릿 만들기: 1단계

템플릿의 내용을 이해하기 위해 먼저 빈 Joomla 템플릿을 살펴봅니다.

템플릿 파일 구성 요소

이 섹션에서는 템플릿 파일을 수동으로 설정하는 프로세스를 검토합니다. 일반적으로 이러한 모든 단계를 처리하는 Joomla 설치 프로그램을 사용하여 템플릿을 설치합니다.

자신만의 템플릿을 만들 때는 여러 파일과 폴더를 조화롭게 설정해야 합니다. 템플릿에는 다양한 파일과 폴더가 포함되어야 합니다. 이러한 파일은 Joomla 설치의 /templates/ 디렉터리에 있어야 하며, 각 파일은 해당 템플릿에 대해 지정된 폴더에 있어야 합니다. Element와 Voodoo라는 두 개의 템플릿을 설치한 경우 디렉터리는 다음과 같습니다. /templates/ 目录中，每个文件都放置在为该模板指定的文件夹中。如果您安装了两个名为 Element 和 Voodoo 的模板，您的目录将如下所示：

/templates/element
/templates/voodoo

请注意，模板的目录名称必须与模板的名称相同 - 在本例中为 element 和 voodoo。这些名称区分大小写且不应包含空格。

模板目录下有两个关键文件：

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

这些文件名和位置必须完全匹配，因为这是 Joomla 核心脚本调用它们的方式。第一个是模板 XML 文件。

这是一个 XML 格式的元数据文件，它告诉 Joomla 在加载使用此模板的网页时还需要哪些其他文件。（注意大写的 D。）它还详细说明了作者、版权以及构成模板的文件（包括使用的任何图像）。

此文件的最后一个用途是在管理后端使用扩展安装程序时解压并安装模板。

第二个关键文件是生成页面的主要模板文件，index.php。

该文件是 Joomla 模板中最重要的文件。它对站点进行布局并告诉 Joomla CMS 在哪里放置不同的组件和模块。它是 PHP 和 HTML 的组合。

几乎所有模板都使用附加文件。按照惯例（尽管 Joomla 核心不要求）对它们进行命名和定位，如此处所示的名为 Element 的模板所示。

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

这些只是示例。模板中一些常见的文件如下所示

/element/template_thumbnail.png -- 模板的 Web 浏览器屏幕截图（通常缩小到约 140 像素宽 x 90 像素高）。安装模板后，该模板将充当预览图像，在 Joomla 管理模板管理器中可见。

/element/params.ini -- 一个文本文件，用于存储模板具有的任何参数的值。

/element/css/template.css -- 模板的 CSS。文件夹位置是可选的，但您必须指定它在index.php 文件中的位置。你可以随心所欲地称呼它。通常，会使用显示的名称，但稍后您会发现拥有其他 CSS 文件也有优势。

/element/images/logo.png——模板附带的任何图像。同样出于组织原因，大多数设计师将它们放在图像文件夹中。这里我们有一个名为 logo.png 的图像文件作为示例。

templateDetails.xml

templateDetails.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>

템플릿의 디렉터리 이름은 템플릿 이름과 동일해야 합니다. 이 경우에는 Element와 Voodoo입니다. 이러한 이름은 대소문자를 구분하며 공백을 포함할 수 없습니다.

템플릿 디렉터리에는 두 개의 주요 파일이 있습니다: 🎜

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

🎜이러한 파일 이름과 위치는 Joomla 코어 스크립트에서 호출하는 방식이므로 정확하게 일치해야 합니다. 첫 번째는 템플릿 XML 파일입니다. 🎜🎜이 템플릿을 사용하는 웹 페이지를 로드할 때 필요한 다른 파일이 무엇인지 Joomla에게 알려주는 XML 형식의 메타데이터 파일입니다. (대문자 D에 유의하세요.) 또한 작성자, 저작권, 템플릿을 구성하는 파일(사용된 이미지 포함)에 대해 자세히 설명합니다. 🎜🎜이 파일의 마지막 용도는 관리자 백엔드에서 확장 설치 프로그램을 사용할 때 템플릿의 압축을 풀고 설치하는 것입니다. 🎜🎜두 번째 키 파일은 페이지 생성을 위한 메인 템플릿 파일인 index.php입니다. 🎜🎜이 파일은 Joomla 템플릿에서 가장 중요한 파일입니다. 사이트의 레이아웃을 지정하고 Joomla CMS에 다양한 구성 요소와 모듈을 배치할 위치를 알려줍니다. PHP와 HTML의 조합입니다. 🎜🎜 거의 모든 템플릿은 첨부파일을 사용합니다. 여기 Element라는 템플릿에 표시된 대로 이름을 지정하고 위치를 지정하는 것이 관례입니다(Joomla 코어에서는 필요하지 않음). 🎜

<?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">

🎜이것들은 단지 예일 뿐입니다. 템플릿의 일부 공통 파일은 다음과 같습니다. 🎜🎜/element/template_thumbnail.png -- 템플릿의 웹 브라우저 스크린샷(보통 약 140픽셀 너비 x 90픽셀 높이로 축소됨). 템플릿이 설치되면 Joomla 관리 템플릿 관리자에 표시되는 미리보기 이미지로 작동합니다. 🎜🎜/element/params.ini - 템플릿에 있는 모든 매개변수의 값을 저장하는 데 사용되는 텍스트 파일입니다. 🎜🎜/element/css/template.css -- 템플릿용 CSS입니다. 폴더 위치는 선택 사항이지만 index.php 파일에서 해당 위치를 지정해야 합니다. 원하는 대로 부를 수 있습니다. 일반적으로 표시된 이름이 사용되지만 나중에 다른 CSS 파일도 사용하면 이점이 있다는 것을 알게 될 것입니다. 🎜🎜/element/images/logo.png – 템플릿과 함께 제공되는 모든 이미지. 또한 조직적인 이유로 대부분의 디자이너는 이미지 폴더에 배치합니다. 여기에는 logo.png라는 이미지 파일이 있습니다. 🎜🎜templateDetails.xml🎜🎜 templateDetails.xml 파일은 템플릿에 속하는 모든 파일 또는 폴더 목록을 포함하는 매니페스트 또는 포장 목록 역할을 합니다. 여기에는 작성자, 저작권 등의 정보도 포함됩니다. 이러한 세부정보 중 일부는 템플릿 관리자의 관리 백엔드에 표시됩니다. XML 파일의 예는 다음과 같습니다. 🎜

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

🎜 일부 행의 의미를 살펴보겠습니다. 🎜

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 创建模板：分步

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

请注意，您使用了 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>

使用 Joomla 创建模板：分步

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

<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 中设置字体和行高时，页面将更易于访问，因为查看者将能够根据自己的喜好调整字体大小，并且页面将重排并保持可读。此处将对此进行进一步讨论。

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

使用 Joomla 创建模板：分步

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

如果您的模板的所有三列都是白色背景，那么这没有问题。您将使用这种方法，并且模块周围会有方框。如果您想要彩色或带有方框的等高列，则必须使用某种技术使列具有相同的高度。一种常见的解决方案是使用 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 现在会产生如下所示的结果。

使用 Joomla 创建模板：分步

模板中的菜单

同样，使用 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 规则设置样式的菜单的任何模块中。这会生成如下所示的菜单

使用 Joomla 创建模板：分步

隐藏列

到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从 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 模板非常有用。

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

使用 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;
}

标题现在如下所示：

使用 Joomla 创建模板：分步

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

列背景

回想一下，当您在列上放置彩色背景时，颜色并没有一直延伸到页脚。这是因为 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;
}

完成的模板应如下所示

使用 Joomla 创建模板：分步

摘要

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

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

위 내용은 Joomla를 사용하여 템플릿 만들기: 단계별의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：데이터를 가져오는 WP REST API다음 기사：데이터를 가져오는 WP REST API