模版Joomla一小时快速建站教程

Joomla!2.5.x一小时快速建站手册

Joomla!入门教程之建站实战——————————————————————————————————————

本手册旨在演示如何用 实现第一次快速建站。手册涉及的内容大致包括

 删除示范站点数据

 定制站点模版

 添加网站内容。遵循CAS H工作流程

 创建站点内容框架C Categorize归类

 添加内容A Add添加

 添加菜单及菜单项SH Show展示

 添加站点功能创建交互式联系表单及投票功能

 完成第一个Joomla!实例站点。

本手册所完成站点的首页效果如上图所示。该站点基于Joomla!2.5.x示范站点并依据客户需求进行精心调整。

请允许我为你介绍你的第一位客户。这是一家名为CORBA Col lectors Of Real ly Bad Art的俱乐部喜欢收集一些看起来比较古怪甚至令人恶心的绘画和一些奇丑无比的其他形式的艺术作品。这些作品在专业人士看来通常只能被丢弃到垃圾堆中或者是只能在慈善团体中售卖。这个俱乐部认为丑陋的作品正因为其丑陋的一面而值得收藏。

当地报纸和电视台打算对CORBA俱乐部进行报道俱乐部负责人请你尽快为他们创建一个网站并希望借此机会推广他们的理念以及让更多人了解俱乐部。

你也许不熟悉相关艺术领域但这确是你展示建站艺术的大好机会。经沟通你了解到CORGA俱乐部对网站有如下需求

 网站的外观需与俱乐部Logo相配配色需与俱乐部定制使用的信纸、信封等办公用

品相适应。

 网站需呈现出组织结构良好的内容页且便于日后俱乐部内容的扩充。

 首页需展现出一些经过精选的新近收集的艺术品内容。

 访客能有效的与俱乐部进行沟通需构建一个在线交互式通信表单。

若安装Joomla!时未安装示范站点数据此步可略过。 

为一睹Joomla!芳颜初次安装时往往都会选择安装示范站点数据。当你将要准备搭建正式站点时这些示范站点数据不但毫无用处还显得碍手碍脚。不幸的是 Joomla!后台并没有“删除示范站点数据”的按钮。与其着手重新安装一个Joomla!空白站点还不如手动删除这些“垃圾”来的更快些。要手动删除示范站点数据只需两步即可。

如果你打算重新安装Joomla!平台进行建站那么无需安装示例站点数据。

第一步清除示例站点内容

首先需要清除示例站点内容这包括三方面工作

 实际内容包括文章以及Joomla!用来组织文章的容器- ‘类’ 。

 链接到这些文章和类的菜单。

 模块一些预制的功能块例如登录表单。

在文章管理中将所有希望清除的文章放入回收站Trash。放入回收站的文章并没有在后台的数据库中真正被清除 日后仍可以恢复。若想永久清除回收站中的文章首先将筛选条件中“选择状态”设定为“已转入回收站”然后全选并执行右上角“清空回收站”操作。

用同样的方法可以在分类管理中清除所有的“类”。注意需保留类名为“uncategorised”

的类这是Joomla!默认的初始分类。所有未经指定类别的文章默认情况下都会被归属到“uncategorised”这个类中。

第二步清除菜单和其他模块

除了文章和类以外示例站点还包含一些菜单和模块。实际上菜单本身就是模块。

对于我们的最终目标而言示例站点的大部分菜单都是多余的。别担心虽然CORBA站点也需要菜单我们可以很容易的完成重建。这一步中我们只是清除示例站点中菜单的一些特定实例。

在菜单管理中选中不再使用的“About Joomla”、 “Austral ian Parks”、 “Fruit Shop”三个菜单执行右上方“删除”操作将其清除。剩下的“Main Menu”、 “Top”和“UserMenu”三个菜单由于较为通用我们可以保留下来在新站点中适当修改并重新使用。

保留下来的“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

最后在网站前台展示S ho w出来。即CAS H工作流。

3. 添加额外功能 向站点添加额外功能例如交互式联系表单或评级功能等。第一步按客户要求定制网站布局

Joomla!平台里所有的网站布局都是在模版文件中设置的。我们可以使用“模版管理”对当前模版进行编辑。本手册案例中需要使用客户Logo图标替换掉Joomla!默认模版的Joomla! Logo还需要编辑并替换页眉处图像即将深蓝色带螺旋形图案图像右侧的“We arevolunteers”字样去除。

Logo对于现代企业、单位或团体来说是至关重要的。定制客户网站布局需要使用客户Logo图标替换掉Joomla!默认模版的Joomla! Logo。

使用任何一款图像处理工具本案例以Adobe Photoshop为例创建客户Logo。若无

Photoshop可使用Paint.NET或GIMP等免费软件也可以使用免费的在线图像编辑工具www.pixlr.com。

新建一个长225像素宽50像素背景内容为透明的画板。一般新建Logo尺寸大小与模版中原Logo一致便于直接替换。

Photoshop使用灰色和白色横纵交错排列的棋盘格表示透明。 Logo通常使用透明作为背景可以和处于其下方的背景图案完美结合形成前景与后景相互映衬的效果。

在新建的以透明为背景的画板中你可以根据需要自行创建Logo或者导入客户提供的Logo图标。

本案例Logo为字符样式如下图所示

图层样式。存储时选择“存储为Web和设备所用格式”选择PNG-24文件格式并确保已勾选“透明度”选项。存储的文件名为CORBAlogo.png。

在Joomla!后台管理页面进入模版管理选择“风格”标签卡。可见默认网站模版为Beez_20 点击Beez2-Default风格标题进入编辑风格页面。在高级选项中 点击“选择”上传新logo文件CORBAlogo.png选中并点击“插入” 替换掉原模版自带Logo文件。 同时更改网站标题为“CORBA” 网站说明为“Col lectorsOf Real ly Bad Art”如下图所示

点击“保存”并通过“浏览网站”查看效果。

默认模版页眉处深蓝色带螺旋形图案图像风格上虽然满足客户需求其右侧“We arevolunteers!”字样却与客户需求不符。字样是以图像形式与深蓝色背景融为一体的 因此需要将这幅图像加以编辑剔除字样信息后保存成与原图像同名的文件最后用处理后的新图像替换掉原模版中同名图像文件。

若在商用场合模版文件的下载与上传需使用FT P客户端程序。在本机搭建的本地测试服务器则可借用操作系统自带的文件浏览器完成。

默认模版页眉处图像文件路径及文件名为templates/beez_20/images/personal/personal2.png图像尺寸为1060X 288像素。 剔除右侧

文字样式信息后页眉处图像效果如下图所示

也许你对当前的默认模版或者某个从网上获取的模版很满意尤其在更新了模版自带Logo和页眉处图像后。然而更多时候为了更好的满足客户需求我们还需要对模版进行更进一步的调整。此时你就需要编辑修改模版自带的css文件。

CSS 层叠样式表定义了网站的设计。 HTML代码规定了网页的基本结构 CSS则用来定制布局、配色、排印等。理解CSS如何工作的最佳方式就是更改指定CSS内容并立即查看效果变化。例如本例中我们将更改Logo下方标语文字的风格。默认模版中标语文字显得比较小且并不引人注目。我们将把它加大字号加粗体并将字体颜色调整成与深蓝色背景对比度更协和的颜色。

在模版管理页面中点击“模版”标签卡。点选“beez_20细节”进入自定义模版页面。列表中列出当前模版所有可供编辑的CSS层叠样式表文件。

选择“编辑css/personal .css”进入css源代码编辑界面。在源代码中查找到

#logo span

{color:#fff; padding-left:50px;font-size:0.3em !important;text-transform:none;font-family:arial, sans-serif

}

更改为

#logo span

{color:silver; padding-left:6px; padding-top:20px ;font-size:0.5em !important;text-transform:none;font-family:arial, sans-serif

}

其中

 修改color值由白色#fff改为中灰色silver使得变大加粗后的标语颜色不太

刺眼

 修改padding-left左边距值由50像素改为6像素目的是将标语与logo字样左对齐 新增padding-top上边距值并设为20像素用以调整标语与上端logo字样间距 修改font-size字体大小 由0.3倍em调整为0.5倍em 点击“保存”并“浏览网

站”或者按键盘上“F5”键刷新并重新载入网页可查看编辑后

的网页效果。

借用Chrome浏览器的“审核元素”功能可以快速定位指定网页元素及其对应的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”才能展示出来。

将上述步骤加以归纳总结并加以标准化可以抽象成一个“CAS H”工作流 即

1. 将网站内容结构化Categorize归类

2. 向内容框架中添入内容Ad d添加

3. 最后在网站前台展示S h ow展示出来。

根据客户需求客户希望借助网站发布3个方面的信息“News”新闻“Club Meetings”俱乐部集会 以及“Art Lectures”艺术讲座。你需要在类别管理中分别为它们创建分类。

在文章管理中为News类添加一篇名为“Bad PhotographyExhibition”的文章。在在新编辑器工作区域你可以随意的添加一些虚构的文字以填充内容。

尝试在摘要或是简短引文后面插入“阅读更多”按钮。以后在博客式排版时文章列表只会显示文章标题和摘要或简短引文需要访客点击“阅读更多”按钮才能看到全文。

尝试在文章开头插入一幅图片可以自行上传也可以使用Joomla!自带文件夹sampledata/parks/landscape下的图片。 图片对齐方式设置为“居右”。

在批量添加文章时若多篇文章的参数和选项设置相同可利用“save as copy”功能复制指定文章并保存为副本如此一来只需更改该文章正文内容即可实现新增文章可以简化结构样式相雷同的文章的批量添加步骤。

尝试分别为网站中不同的内容分类添加若干篇虚构的文章注意不妨在每篇文章开头都插入一幅图像保持站点呈现内容的一致性。如下图所示

在更大一些的站点中一个分类下可以包含若干个子类每一个子类下又可以包含若干个子类„„以此层层递进的方式可以划分更多的内容层次。就像“章节条目”中章包含节节包含条条包含目 目中才呈现正文内容一样。