joomla模板设计的DIV等高的设置
joomla制作模板的过程中,发现有时候由于模块内容的不同,导致高度不一致,影响美观。这倒也罢了,特别是背景图片应用中需要左右一致的效果,这样就头痛了。于是只能用JS来解决这样的问题。
joomla制作模板的过程中,发现有时候由于模块内容的不同,导致高度不一致,影响美观。这倒也罢了,特别是背景图片应用中需要左右一致的效果,这样就头痛了。于是只能用JS来解决这样的问题。
在制作模板的过程中,无疑要碰到图片的相关处理的问题。以下是从网上收录的信息":
PNG:可移植网络图形
PNG 图片以任何颜色深度存储单个光栅图像。PNG 是与平台无关的格式。
优点: PNG 支持高级别无损耗压缩。PNG 支持 alpha 通道透明度。PNG 支持伽玛校正。 PNG 支持交错。PNG 受最新的 Web 浏览器支持。
缺点: 较旧的浏览器和程序可能不支持 PNG 文件。作为 Internet 文件格式,与 JPEG 的有损耗压缩相比,PNG 提供的压缩量较少。作为 Internet 文件格式,PNG 对多图像文件或动画文件不提供任何支持。GIF 格式支持多图像文件和动画文件。
JPEG:联合摄影专家组
JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的。渐近式 JPEG 文件支持交错。可以提高或降低 JPEG 文件压缩的级别。但是,文件大小是以图像质量为代价的。压缩比率可以高达 100:1。(JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件,而图片质量不会下降。)JPEG 压缩可以很好地处理写实摄影作品。但是,对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品,JPEG 压缩无法提供理想的结果。有时,压缩比率会低到 5:1,严重损失了图片完整性。这一损失产生的原因是,JPEG 压缩方案可以很好地压缩类似的色调,但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
优点: 摄影作品或写实作品支持高级压缩。利用可变的压缩比可以控制文件大小。支持交错(对于渐近式 JPEG 文件)。JPEG 广泛支持 Internet 标准。
缺点:有损耗压缩会使原始图片数据质量下降。当您编辑和重新保存 JPEG 文件时,JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
GIF、JPEG 和 PNG 是三种最常见的图片格式。
我在实际使用过程中,对于大的图片一般是处理成JPG,对于不需要透明背景的的简单的LOGO,还有模块的H3也就是标题的背景,一般都处理成PNG8,如果是需要透明背景的图片处理成PNG24,但这样的图片在IE6下显示就会有问题,背景呈灰色。
处理方法就是用CSS滤镜,
*html div#XXX{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/templates/xxx/xxx.png’, sizingMethod=’image’);
background-image: none;
}
这样就可以有效避免PNG的在IE6显示灰色背景的问题。
在制作模板的过程中,有时候需要将error message 也就是<jdoc:include type=”message”/> 单独加div,而不是和<jdoc:include type=”component”/>放在一起,在FF和IE8是没有问题,但是在IE7和IE6下就会产生多余的空格,当MESSAGES没有被载入的时候。这样就影响了美观。不过可以通过加入一个判断语句来解决这样的问题,
<?php if ($this->getBuffer(‘message’)) : ?>
<div class="main">
<jdoc:include type="message" />
</div>
<?php endif; ?>
在这样的情况下,如果没有MESSAGE产生时,他会隐藏。这样有IE7和IE6就没有问题了。
在写模板的时候,经常要用到空的DIV,例如<div style=”height:1px;background:#cccccc”></div>,想显示一根横线,在IE7还好,IE6,就变成这样一个矩形色块。或者可能因为某些条件语句,导致一个空的DIV,FF还好,IE7和IE6就会多个空出来,直接影响外观效果。后查了很久,将<!– ie –>插入DIV之间,空块消失 。IE6的色块也恢复正常成色线。

此款模板也是比较流行的企业类模板,而现在joomla的模板更多的趋向于花里胡哨的风格发展,或许是因为这是追求个性的时代,相关企业类的模板却是寥寥无几。还有一个底部菜单代码未完成。完成后提供下载。主体布局完成,演示:demo.nhuang.com
joomla模板,来自joomlart,模式没什么太多的变化.稍稍改变的美工,没有太多的新颖揉合进去.但joomlart就是joomlart,每款模板一出,都趋之若鹜.个人使用模板,学习模板也都倾向joomlart,所以他的每一款模板,也是尽量一个不落的收藏.虽然是都是来自不正当渠道.但也只是学习之用.不作他用.
在设置底部菜单的css时,设置li{float:left;display:block;}li a{border-right:1px solid #333333;padding:0 12px}在FF浏览器下,总是左右不对称,ie7正常,ie6居然是全是另起新行.折腾了半天.忘了自己应该是将display:设成inline.拿破仑当年兵败滑铁卢的根本性原因竟然是士兵的钮扣是锡做的,天气太冷,就变成粉末了.
第二款模板完成,现在还剩文章组件的单元显示格式模板需要重新更改,目的是想以单元链接下文章显示格式参照门户类的网站新闻的显示模式来显示,分类列表清单显示,类似搜狐和新浪的新闻中心,模板的演示地址:demo.nhuang.com,
该款joomla模板是继仿淘宝后的第二款joomla 模板,适用于行政机构及门户类网站,整个页面布局内嵌了大量的多tab,这样也就没有必要再安装多tab模块就可以使用,也相应提高了网站的速度.DEMO地址明天完成,然后再进行测试,确认没有太大的问题,以保证易用性再提供下载.
最近评论