Joomla一小时快速建站教程.docx

Joomla! 2.5.x 一小时快速建站手册Joomla!入门教程之建站实战本手册旨在演示如何用 Joomla! 2.5.x 实现第一次快速建站。手册涉及的内容大致包括：l删除示范站点数据；l定制站点模版；l添加网站内容。遵循 CASH 工作流程：n创建站点内容框架（C，Categorize 归类）；n添加内容（A，Add 添加）；n添加菜单及菜单项（SH，Show 展示）；l添加站点功能：创建交互式联系表单及投票功能；l完成第一个 Joomla!实例站点。本手册所完成站点的首页效果如上图所示。该站点基于 Joomla!2.5.x 示范站点，并依据 客户需求进行精心调整。会见客户了解客户需求请允许我为你介绍你的第一位客户。这是一家名为 CORBA（Collectors Of Really Bad Art） 的俱乐部，喜欢收集一些看起来比较古怪甚至令人恶心的绘画和一些奇丑无比的其他形式的 艺术作品。这些作品在专业人士看来通常只能被丢弃到垃圾堆中，或者是只能在慈善团体中 售卖。这个俱乐部认为，丑陋的作品正因为其丑陋的一面而值得收藏。当地报纸和电视台打算对 CORBA 俱乐部进行报道，俱乐部负责人请你尽快为他们创建 一个网站，并希望借此机会推广他们的理念以及让更多人了解俱乐部。你也许不熟悉相关艺术领域，但这确是你展示建站艺术的大好机会。经沟通，你了解到CORGA 俱乐部对网站有如下需求：l网站的外观需与俱乐部 Logo 相配，配色需与俱乐部定制使用的信纸、信封等办公用 品相适应。l网站需呈现出组织结构良好的内容页，且便于日后俱乐部内容的扩充。l首页需展现出一些经过精选的新近收集的艺术品内容。l访客能有效的与俱乐部进行沟通，需构建一个在线交互式通信表单。清除示范站点数据（若安装 Joomla!时未安装示范站点数据，此步可略过。）为一睹 Joomla!芳颜，初次安装时往往都会选择安装示范站点数据。当你将要准备搭建 正式站点时，这些示范站点数据不但毫无用处，还显得碍手碍脚。不幸的是，Joomla!后台 并没有“删除示范站点数据”的按钮。与其着手重新安装一个 Joomla!空白站点，还不如手 动删除这些“垃圾”来的更快些。要手动删除示范站点数据，只需两步即可。如果你打算重新安装 Joomla!平台进行建站，那么无需安装示例站点数据。第一步，清除示例站点内容首先需要清除示例站点内容，这包括三方面工作：l实际内容：包括文章以及 Joomla!用来组织文章的容器-类。l链接到这些文章和类的菜单。l模块：一些预制的功能块，例如登录表单。操作要点：清除文章和类在文章管理中，将所有希望清除的文章放入回收站（Trash）。放入回收站的文章并没有 在后台的数据库中真正被清除，日后仍可以恢复。若想永久清除回收站中的文章，首先将筛 选条件中“选择状态”设定为“已转入回收站”，然后全选并执行右上角“清空回收站”操 作。用同样的方法可以在分类管理中清除所有的“类”。注意，需保留类名为“uncategorised”的类，这是 Joomla!默认的初始分类。所有未经指定类别的文章默认情况下都会被归属到 “uncategorised”这个类中。第二步，清除菜单和其他模块除了文章和类以外，示例站点还包含一些菜单和模块。实际上，菜单本身就是模块。操作要点：清除菜单对于我们的最终目标而言，示例站点的大部分菜单都是多余的。别担心，虽然 CORBA 站点也需要菜单，我们可以很容易的完成重建。这一步中，我们只是清除示例站点中菜单的 一些特定实例。在菜单管理中，选中不再使用的“About Joomla”、“Australian Parks”、“Fruit Shop”三 个菜单，执行右上方“删除”操作将其清除。剩下的“Main Menu”、“Top”和“User Menu” 三个菜单由于较为通用，我们可以保留下来在新站点中适当修改并重新使用。保留下来的“Main Menu”菜单包含很多菜单项，我们只保留其中名为“Home”的菜 单项。“Main Menu”菜单及其中的“Home”的菜单项是 Joomla!空站点默认始初菜单样式。 某一菜单中菜单项的清除步骤参见之前对文章和类的操作。操作要点：清除模块对于我们来说，示例站点中很多模块都是多余的，可以安全的删除掉。有些模块甚至你 都没有关注过，因为它们只出现在特定页面而非首页。别担心，所有被删除的模块都可以被 重建。我们只是删除这些模块在示例站点中出现的实例，而不是删除 Joomla!平台中该模块 的功能。在模块管理中，清除除“This Site”、“Top”、“User Menu”、“Search”、“Login Form”和 “Breadcrumbs”以外的所有模块。清除模块的步骤参见之前对文章和类的操作。到此，你已经清除示例站点中所有的文章、类、菜单和多余的模块。重新浏览网站，你 会看见一个全新的空站点，如下图所示：搭建新站点只需三步当前只有一个 Joomla!空白站点，如上图所示，没有内容，只是极少量的基本的布局元 素。接下来，你只需三步就可以新建一个又酷又有吸引力的 CORBA 俱乐部站点：1.按客户要求定制网站布局（Customize the layout）：将 Joomla!默认前台模版稍做调 整以满足客户需要；2.添加网站内容：将网站内容结构化（Categorize）并向内容框架中添入内容（Add）， 最后在网站前台展示（Show）出来。即 CASH 工作流。3.添加额外功能：向站点添加额外功能，例如交互式联系表单或评级功能等。第一步，按客户要求定制网站布局Joomla!平台里，所有的网站布局都是在模版文件中设置的。我们可以使用“模版管理” 对当前模版进行编辑。本手册案例中，需要使用客户 Logo 图标替换掉 Joomla!默认模版的 Joomla! Logo；还需要编辑并替换页眉处图像，即将深蓝色带螺旋形图案图像右侧的“We are volunteers”字样去除。操作要点：准备一个新的客户 Logo 图标Logo 对于现代企业、单位或团体来说是至关重要的。定制客户网站布局，需要使用客 户 Logo 图标替换掉 Joomla!默认模版的 Joomla! Logo。使用任何一款图像处理工具，本案例以 Adobe Photoshop 为例，创建客户 Logo。若无Photoshop 可使用 Paint.NET 或 GIMP 等免费软件，也可以使用免费的在线图像编辑工具。新建一个长 225 像素，宽 50 像素，背景内容为透明的画板。一般新建 Logo 尺寸大小与 模版中原 Logo 一致，便于直接替换。Photoshop 使用灰色和白色横纵交错排列的棋盘格表示透明。Logo 通常使用透明作为背 景，可以和处于其下方的背景图案完美结合，形成前景与后景相互映衬的效果。在新建的以透明为背景的画板中，你可以根据需要自行创建 Logo 或者导入客户提供的Logo 图标。本案例 Logo 为字符样式，如下图所示：其中 Quadronta 字体免费下载自 ，随后还使用了外发光和投影 图层样式。存储时选择“存储为 Web 和设备所用格式”，选择 PNG-24 文件格式并确保已勾 选“透明度”选项。存储的文件名为 CORBAlogo.png。在 Joomla!后台管理页面，进入模版管理，选择“风格”标签卡。可见默认网站模版为 Beez_20，点击 Beez2 - Default 风格标题进入编辑风格页面。在高级选项中，点击“选择” 上传新 logo 文件 CORBAlogo.png，选中并点击“插入” 替换掉原模版自带 Logo 文件。同时 更改网站标题为“CORBA”，网站说明为“Collectors Of Really Bad Art”，如下图所示：点击“保存”，并通过“浏览网站”查看效果。操作要点：更换页眉处图像默认模版页眉处深蓝色带螺旋形图案图像风格上虽然满足客户需求，其右侧“We are volunteers!”字样却与客户需求不符。字样是以图像形式与深蓝色背景融为一体的，因此需 要将这幅图像加以编辑，剔除字样信息后保存成与原图像同名的文件，最后用处理后的新图 像替换掉原模版中同名图像文件。若在商用场合，模版文件的下载与上传需使用 FTP 客户端程序。在本机搭建的本地测试 服务器，则可借用操作系统自带的文件浏览器完成。默认模版页眉处图像文件路径及文件名为：templates/beez_20/images/personal/personal2.png 图像尺寸为 1060 X 288 像素。 剔除右侧文字样式信息后页眉处图像效果如下图所示：操作要点：把站点设计细节稍作调整也许你对当前的默认模版或者某个从网上获取的模版很满意，尤其在更新了模版自带 Logo 和页眉处图像后。然而更多时候，为了更好的满足客户需求我们还需要对模版进行更 进一步的调整。此时，你就需要编辑修改模版自带的 css 文件。CSS（层叠样式表）定义了网站的设计。HTML 代码规定了网页的基本结构，CSS 则用来定制布局、配色、排印等。理解 CSS 如何工作的最佳方式就是更改指定 CSS 内容并立即查看 效果变化。例如，本例中我们将更改 Logo 下方标语文字的风格。默认模版中，标语文字显 得比较小，且并不引人注目。我们将把它加大字号，加粗体并将字体颜色调整成与深蓝色背 景对比度更协和的颜色。在模版管理页面中点击“模版”标签卡。点选“beez_20 细节”进入自定义模版页面。 列表中列出当前模版所有可供编辑的 CSS 层叠样式表文件。选择“编辑 css/personal.css”进入 css 源代码编辑界面。在源代码中查找到：#logo spancolor:#fff; padding-left:50px;font-size:0.3em !important;text-transform:none;font-family:arial, sans-serif更改为：#logo spancolor:silver; padding-left:6px; padding-top:20px ;font-size:0.5em !important;text-transform:none;font-family:arial, sans-serif其中，l修改 color 值由白色（#fff）改为中灰色（silver），使得变大加粗后的标语颜色不太 刺眼；l修改 padding-left 左边距值由 50 像素改为 6 像素，目的是将标语与 logo 字样左对齐；l新增 padding-top 上边距值并设为 20 像素，用以调整标语与上端 logo 字样间距；l修改 font-size 字体大小，由 0.3 倍 em 调整为 0.5 倍 em； 点击“保存”并“浏览网站”，或者按键盘上“F5”键刷新并重新载入网页，可查看编辑后的网页效果。借用 Chrome 浏览器的“审核元素”功能可以快速定位指定网页元素及其对应的 CSS 文件 及代码。扩展：CSS 那些事儿之前我们修改了 Joomla!官方默认模版中的一个 css 文件。编辑和修改模版中的 css 文件 是快速更改网站外观的途径之一。我们都知道，网页是用 html 代码所构建的文档。Html 代码告诉浏览器此网页要显示什 么内容，各部分内容大致在什么位置上显示出来。Html 文档可以被链接到特定的 Cascading Style Sheet (CSS，层叠样式表)中，CSS 告诉浏 览器该 html 中的数据该如何显示到浏览器上。Css 是一个比较简单的规则集合，它定义了网页的配色、字体、字号、页面布局及其它。 这些 css 样式的规则被存放到一个以 css 为后缀的文件中。这个 css 文件可以被网站上任意 多的 html 文档所链接。这也就意味着，只要修改了这一个 css 文件中的一行代码，所有链 接到这个 css 文件的 html 网页外观都将受到影响。正如我们刚才编辑修改 personal.css 所演 示的那样。Joomla!内置的 css 编辑器能够让我们方便的对 joomla!站点内的 css 样式做轻微的调整。 更多关于 CSS 的知识和应用请自行查阅相关资料或者互联网内容。操作要点：进一步探讨网站布局设置正如我们所见的那样，Joomla!中更改当前模版的呈现样式有如下不同的方法。 第一种，在“模版管理|风格”界面内，更改模版的配置选项； 第一种，在“模版管理|模版”界面内，更改模版所链接的 css 样式表。不妨尝试更改不同的模版配置选项，并浏览网站，注意观察不同配置相应提现出来的不 同变化。我们不难发现，更改模版配置选项只能修改非常有限的若干固定选项；而修改 CSS 显得更为灵活。通过修改 CSS 所能达到的外观和布局变化仅仅取决于你个人对 CSS 技能的掌 握程度。CSS 代码的语法结构异常简单，几乎只是说“什么东西是什么”。第二步，添加网站内容不同于制作静态网页，在为动态网站添加内容之前，首先需要做出承载内容的容器， 这些容器组合在一起构成整个网站的内容框架。在 Joomla!中，这些容器叫做“类”。你可 以根据实际需要创建无数多的类。网站的具体内容一般用一篇一篇具体的“文章”来表现。 Joomla!中用“父类-子类-文章”来约束并管理内容。本案例中，根据内容之间的逻辑关系，我们将 CORBA 俱乐部站点的内容分为 3 大类，每一个大类又根据需要划分出若干个子类，子类下在包含各自的文章。内容在管理后台中添 加完后，并不会在前台显示出来。还需要做“Show”才能展示出来。将上述步骤加以归纳总结并加以标准化，可以抽象成一个“CASH”工作流，即：1.将网站内容结构化（Categorize，归类）；2.向内容框架中添入内容（Add，添加）；3.最后在网站前台展示（Show，展示）出来。操作要点：新建内容分类根据客户需求，客户希望借助网站发布 3 个方面的信息：“News”新闻，“Club Meetings” 俱乐部集会，以及“Art Lectures”艺术讲座。你需要在类别管理中分别为它们创建分类。操作要点：向类中添加具体内容在文章管理中，为 News 类添加一篇名为“Bad Photography Exhibition”的文章。在在新 编辑器工作区域，你可以随意的添加一些虚构的文字以填充内容。尝试在摘要或是简短引文后面插入“阅读更多”按钮。以后在博客式排版时，文章列表 只会显示文章标题和摘要（或简短引文），需要访客点击“阅读更多”按钮才能看到全文。尝试在文章开头插入一幅图片，可以自行上传也可以使用 Joomla!自带文件夹 sampledata/parks/landscape 下的图片。图片对齐方式设置为“居右”。在批量添加文章时，若多篇文章的参数和选项设置相同，可利用“save as copy”功能复 制指定文章并保存为副本，如此一来只需更改该文章正文内容即可实现新增文章，可以简化 结构样式相雷同的文章的批量添加步骤。尝试分别为网站中不同的内容分类添加若干篇虚构的文章，注意不妨在每篇文章开头都 插入一幅图像，保持站点呈现内容的一致性。如下图所示：在更大一些的站点中，一个分类下可以包含若干个子类，每一个子类下又可以包含若 干个子类以此层层递进的方式可以划分更多的内容层次。就像“章节条目”中章包含 节，节包含条，条包含目，目中才呈现正文内容一样。内容在管理后台中添加完后，并不会在前台显示出来。还需要 CASH 工作流程第三步做 “Show”才能展示出来。操作要点：添加第一个菜单及菜单项之前我们向网站中添加的具体内容（即文章等）都存储在数据库中。此时访客在浏览前 台网站时是无法看到这些内容的，因为我们没有创建任何指向这些内容的链接。当前站点只 有一个“Main Menu”，其下只有一个菜单项“Home”。尝试在菜单管理中，往“Main Menu”菜单里新增一个菜单项。菜单项类型选择“分类文章的博客式排版”（Category Blog）。这个菜单项类型将以博客样式呈现指定分类下的文章 列表。即每一篇文章显示标题和摘要，要阅读全文需点击“阅读更多”按钮。将该菜单项的 指定分类确定为“News”类，菜单项标题命名为“News”。注意观察对比操作前后网站前台 的变化。“分类文章的博客式排版”（Category Blog）呈现样式如下图所示：上述操作举例说明了 Joomla!中菜单及菜单项的强大功能！通过使用不同的菜单项类型， 站点的内容可以以不同的样式呈现出来。需要特别注意的是，在 Joomla!中菜单项是非常特别的！它们不只是单纯链接到已经存 在的文章页面，还决定着页面的呈现方式。正如之前介绍“分类文章的博客式排版”（Category Blog）所说的那样。每一种菜单项类型还有诸多选项和设置可以调整，以实现更多样化更精 确的呈现。在 Joomla!中选择使用一种菜单项类型并调整它的选项和设置，即告诉 Joomla!平台将满足条件的内容从数据库中抽取出来并以指定的方式加以呈现。为数众多的菜单项类型，保证 了 Joomla!能以很多种不同的方式来呈现网站内容。操作要点：添加更多的菜单及菜单项使用同样的方法向“Main Menu”菜单中添加 Art Lectures 和 Club Meetings 菜单项，菜 单项类型都使用“分类文章的博客式排版”（Category Blog）。至此，“Main Menu”菜单中已经包含 Home，News，Art Lectures 和 Club Meetings 四个 菜单项。这时浏览网站前台首页，可以发现当前网站开始成形了。当你通过菜单项访问网站 内容的任何一个分类时，该分类即以指定的方式显示出来。网站某分类页面大致效果如下图 所示：尝试在文章管理中更改内容分类下各文章的排列顺序。操作要点：添加未经分类的（Uncategorized）文章你的客户，CORBA 俱乐部可能需要一篇特殊的文章来阐述他们的宗旨。这篇文章的特 殊性决定了在逻辑上它不能被划分到任何一个已经确定的内容分类中。单独为这一篇文章新 建一个内容分类似乎又没多大必要。这时，Joomla!自带的 uncategorized 分类就派上用场了。 Joomla!允许你将一些有特殊用途而又不能划分到站点内容分类下的文章，划分到这样个类 名为“uncategorized（未经分类的）”的分类下。尝试在文章管理中添加一篇名为“Mission Statement（宗旨）”的未经分类的文章。这 篇文章的正文内容如下：We all know the works of great art throughout the centuries. But what about bad art? Much of the creative output of really lousy artists has been discarded, thrown away because of its lack of artistic value. Lets not let that happen any more!The beauty in uglinessCollectors Of Really Bad Art is a club for bad art lovers. We seek to find and promote the beauty thats hidden behind superficial ugliness. Tour our website to discover that beauty too!同样的，在文章开头插入一幅图像。尝试在“Main Menu”菜单中创建一个菜单项，该菜单项类型为“单篇文章”，令该菜 单项指向“Mission Statement（宗旨）”这篇文章。菜单项标题为“Mission Statement（宗旨）”操作要点：更改菜单中各菜单项排列次序尝试在菜单管理中更改菜单项的排列顺序。Main Menu 菜单经调整后各菜单项排列次序 如下图所示：尝试隐藏 Main Menu 菜单的菜单标题（注意这里说的是菜单标题而不是菜单项标题）。 一般在网站中，菜单的标题往往不显示出来。操作要点：添加网站内容最后一步设置首页内容至此，你已经往你的站点中塞了很多内容。还有一个最为重要的页面需要你格外关注， 即首页。当前的首页仍然是空空荡荡的。初学者往往会有疑问：在向网站添加内容时为什么我们不先从首页做起？毕竟，首页才 是网站的入口。实际上，你需要先向网站中添加足够多的实际内容，才能从中选择将哪些放置在首页上！ 首页往往是一些网站内容项目的集合。如何控制哪些网站内容能够出现在首页中呢？无论是在文章编辑页面，还是在文章管理 页面，都可以将指定文章设置为“精选”状态。默认情况下，只有设置为“精选”状态的 文章才能出现在网站首页。尝试将如下文章设置为“精选”状态：Deplorable Still Lifes， Ugly Art Lecture，The Art of Bob Ross 和 This Years Meeting。如下图所示：此时，网站首页大致呈现的效果如下图所示：之前所述的，默认情况下 Joomla!会将“精选”状态的文章呈现在网站首页。除了精选文章 外，首页还有其他诸多模块，例如菜单、搜索框等。一个模块是否出现在首页是可以设置的。 关于这一点，后面我们马上会接触到。第三步，通过“扩展”添加额外功能经过之前的若干步骤，你的网站看起来已经像那么回事了。根据客户需求定制了网站布 局和外观，完成了内容框架的设置，添加了客户所需的文章内容并正确的在网站上展示出来。若只是搭建一个静态网站，你已经完成了几乎所有的工作。然而对于 Joomla!来说，好 戏才刚刚开始！下面让我们一起来为站点添加一些实用而有趣的功能。这里不得不介绍组件 和扩展，它们才是 Joomla!最具吸引力的活力之源。Joomla!正是依靠其灵活的可扩展性展示出不同寻常的强大的功能。除了安装包自身所 具备的基本功能外，Joomla!还有一个异常庞大而活跃的资源宝库，即 Joomla extension database，简称 JED。若是你希望实现一些 Joomla!官方安装包所不具备的功能，十有八九能 在 JED 中寻获。这些数量庞大、种类繁多、功能各异的扩展通常在 JED 中可供下载，由你自 行上传并安装到 Joomla!平台上后便可扩展网站的功能。Joomla!的扩展以大小和复杂程度划分大致可分为三类：组件（Components）、模块（Modules）和插件（Plugins）。l组件：较大较复杂的。通常是较为全面的扩展，在管理后台有诸多的选项和设置以 供调节。组件的输出通常在网站前台的主要内容区域。l模块：中等大小。通常显示为网站前台包含特定功能的块状区域。模块通常围绕在 主要内容区域四周。模块区域的位置由模版制作者在模版中预先确定。l插件：短小精干，专注单一。通常实现针对单一功能的增强。在安装和使用第三方扩展前，建议将 php 配置文件（即 php.ini，若是使用 xampp 做本 地测试服务器，该配置文件在 xampp/php 目录下）中“display_errors = On”更改为 “display_errors = Off”。即不显示错误信息。操作要点：官方组件（联系人） 联系人实例自行完成。最好遵循 CASH 工作流，先添加联系人分类，再新增联系人并为每一个联系 人指定分类，最后用菜单或者模块等展示出来。操作要点：官方模块（自定义 HTML） 公告栏实例自行完成。操作要点：官方模块（Newsflash） 新闻快讯实例 1随着网站内容的不断充实，管理员必需要考虑如何在首页中更及时有效的展示各个内容 分类下的内容。防止一些重要的内容更新处于无人关注的位置。除了将文章设置为精选状态 并在首页中展示出来以外，还有一些其它方法也能让指定文章呈现在首页以引起访客的关注。例如我们可以使用 Joomla!官方自带的“新闻快讯（Newsflash）”模块，在首页随机的 显示指定分类下的文章标题和内容摘要。在模块管理界面中“新建”一个“新闻快讯（Newsflash）”模块。本实例中，标题设置 为“Recent Lectures”，并强制显示模块标题。将“状态”设置为“发布”，模块“位置”设置为“position-9”。“菜单分配”设置为只 在“HOME（首页）”上分配。在右侧“基本选项”中，将“分类”设置为“所有分类”，“显示图像”设置为“是”， “链接标题”设置为“是”，“阅读更多. 链接”设置为“显示”，“文章数量”设置为“1”， “排序结果”设置为“随机”。点击“保存”并浏览网站，查看新增添并经调整后的新闻快讯呈现样式。别被“新闻快讯”这个名称忽悠了，除了新闻外这个模块可以被用做很多事情。例如我 们这个实例中，就利用它来在首页随机的呈现指定分类下的一篇或者多篇文章。使用“随机” 的好处是，访客每次访问你首页的时候会显示不同的文章，让人感觉你的网站一直在持续更 新尝试使用新闻快讯模块，将同在底部的“position-10”、“position-11”空白模块位置充 实内容。操作要点：第三方组件（Akeeba Backup） 网站备份实例Akeeba