随着互联网的飞速发展,网站已经成为企业、个人展示形象、传播信息的重要平台。而一个网站的美观程度,往往能直接影响到用户的浏览体验。在这个方面,DedeCMS背景图片扮演着至关重要的角色。本文将为您详细解析DedeCMS背景图片的重要性,以及如何选择和设置合适的背景图片,让您的网站焕发出独特的魅力。
一、DedeCMS背景图片的重要性
1. 提升网站视觉效果:背景图片作为网站的重要组成部分,能够瞬间抓住用户的目光,提升网站的视觉效果。合适的背景图片能让网站更具个性,给用户留下深刻印象。
2. 塑造品牌形象:通过选择与品牌形象相符的背景图片,可以更好地传达企业的文化内涵和价值观,从而塑造良好的品牌形象。
3. 优化用户体验:合适的背景图片能够让用户在浏览网站时感到舒适,提高用户在网站上的停留时间,提升用户体验。
4. 增强网站竞争力:在众多网站中,拥有独特背景图片的网站更容易脱颖而出,吸引更多潜在客户。
二、DedeCMS背景图片选择技巧
1. 与网站主题相符:选择与网站主题相符的背景图片,可以使网站整体风格更加统一,提升视觉效果。
2. 分辨率适中:背景图片的分辨率应适中,过高或过低都会影响网站加载速度。
3. 颜色搭配合理:背景图片的颜色应与网站整体色调相协调,避免过于刺眼或过于单调。
4. 避免使用过于花哨的图片:过于花哨的图片容易分散用户注意力,影响用户体验。
三、DedeCMS背景图片设置方法
1. 登录DedeCMS后台:您需要登录DedeCMS后台,进入“系统管理”模块。
2. 选择背景图片:在“系统管理”模块中,找到“网站设置”选项,点击进入。在“网站设置”页面,找到“网站背景”选项,点击“上传背景图片”。
3. 上传背景图片:选择您要上传的背景图片,点击“上传”按钮。上传成功后,您可以看到背景图片已应用到网站上。
4. 调整背景图片样式:在“网站设置”页面,您还可以调整背景图片的样式,如背景颜色、背景透明度等。
四、DedeCMS背景图片应用实例
以下是一些DedeCMS背景图片的应用实例,供您参考:
网站类型 | 背景图片类型 | 优点 |
---|---|---|
企业官网 | 产品图片 | 突出企业核心竞争力 |
个人博客 | 美景图片 | 营造温馨舒适的氛围 |
教育机构 | 校园图片 | 体现教育氛围 |
电商网站 | 商品图片 | 突出商品特点 |
DedeCMS背景图片在网站建设中具有举足轻重的作用。通过选择合适的背景图片,并运用恰当的设置方法,可以让您的网站焕发出独特的魅力。希望本文对您有所帮助,祝您的网站越办越好!
织梦模板怎么设置背景颜色
方法
1、首先制作网站背景图片,这个建议找一些大尺寸的图片。(本图仅限测试使用)
2、通过FTp工具链接到网站的空间,找到dedecms网站的模版文件templets。找到模版目录下的模版样式文件。如果使用的是默认模版,文件在templets/default/style/dedecms.css文件
如果使用的是其他模版,那就看下网页源代码中最上面那部分有行:<link href=”xxxxxxx” rel=”stylesheet” media=”screen” type=”text/css”/>其中的xxxxxx就是目标css位置。
3、使用nopepad文件编辑工具打开模版下的dedecms.css样式文件。
将
html{background:#FFF;}body{font:12px Verdana,Arial,Tahoma;}
更改为如下代码:
html{
background-image: url(“../images/bj.jpg”);
text-align: center;
}
body{
background:#FFF;
font: 12px Verdana,Arial,Tahoma;
margin: 0 auto;
text-align: left;
width: 970px;
}
4、然后保存,通过FTP工具重新上传至网站模版目录,然后打开网站首页就可以看到网站已经有了背景图片了。
从这两个图就可以看到背景图片已经添加成功了。
代码解释:
background-image为背景图片
url(“../images/bj.jpg”)为背景图片路径
text-align: center;为居中
background:#FFF;设置body的背景色
font: 12px Verdana,Arial,Tahoma;字体设置
margin: 0 auto;声明外边距属性
text-align: left;位置为居左
width: 970px; body的宽度
dedecms自定义图片字段标签问题
之前选择的自定义图片图集
一、添加一个获取图片地址的方法
打开/include/extend.func.文件(注:这个文件就是系统预留的自定义函数接口文件,主要用于二次开发用的。如果你是老版本,默认没有这个文件,自己创建一个PHP文件即可),在最下面的?>上一行加入以下函数代码:(如果结尾没有?>那就直接在最下面添加)
function GetOneImgUrl($img,$ftype=1){ if($img<>''){$dtp= new DedeTagParse();$dtp->LoadSource($img); if(is_array($dtp->CTags)){ foreach($dtp->CTags as$ctag){ if($ctag->GetName()=='img'){$width=$ctag->GetAtt('width');$height=$ctag->GetAtt('height');$imgurl= trim($ctag->GetInnerText());$img=''; if($imgurl!=''){ if($ftype==1){$img.=$imgurl;} else{$img.='<img src=”'.$imgurl.'” width=”'.$width.'” height=”'.$height.'”/>';}}}}}$dtp->Clear(); return$img;}}
可以直接用下面的方法调用
[field:自定义图片字段名 function=”GetOneImgUrl(@me,显示类型)”/]
最终使用方法。
{dede:arclist typeid='12' addfields='datu' channelid='17' limit='0,7'}
<li><a href=”[field:arcurl/]” target=”_blank”><img border=”0″ src=”[field:datu%20function='GetOneImgUrl(@me,1)'/]”></a></li>
{/dede:arclist}
最终调用到这个图片地址。
dedecms5.7调用图片出现严重失真,缩略图显示严重变形
首先在网站后台系统中设置网站缩略图尺寸大小和模板中调用图片最大尺寸相同.
再打开文件include/helpers/extend.helpes.php在最下面加上以下代码
if(! function_exists('thumb'))
{
function thumb($imgurl,$width,$height,$bg= true)
{
global$cfg_mainsite,$cfg_multi_site;
$thumb= eregi(“http://”,$imgurl)?str_replace($cfg_mainsite,'',$imgurl):$imgurl;
list($thumbname,$extname)= explode('.',$thumb);
$newthumb=$thumbname.'_'.$width.'_'.$height.'.'.$extname;
if(!$thumbname||!$extname||!file_exists(DEDEROOT.$thumb)) return$imgurl;
if(!file_exists(DEDEROOT.$newthumb))
{
include_once DEDEINC.'/image.func.php';
if($bg==true)
{
ImageResizeNew(DEDEROOT.$thumb,$width,$height, DEDEROOT.$newthumb);
}
else
{
ImageResize(DEDEROOT.$thumb,$width,$height, DEDEROOT.$newthumb);
}
}
return$cfg_multi_site=='Y'?$cfg_mainsite.$newthumb:$newthumb;
}
}
调用方法:
标签: [field:picname function='thumb(@me,$width,$height,$bg)'/]
参数说明:
$width:缩略图宽度(整数)
$height:缩略图高度(整数)
$bg:是否用空白填补,默认自动填补,背景填充颜色在系统-附件设置里(true/false)
举例:
调用长宽为100像素的缩略图:[field:picname function='thumb(@me,100,100)'/]
保留原有比例,不自动填充(不建议):[field:picname function='thumb(@me,100,100,false)'/]
再到 include/helpers/image.helpes.php中写入以下代码
/**
*缩图片自动生成函数,来源支持bmp、gif、jpg、png
*但生成的小图只用jpg或png格式
*@access public
*@param string$srcFile图片路径
*@param string$toW转换到的宽度
*@param string$toH转换到的高度
*@param string$toFile输出文件到
*@return string
*/
if(! function_exists('ImageResize'))
{
function ImageResize($srcFile,$toW,$toH,$toFile=””)
{
global$cfg_photo_type;
if($toFile==””)
{
$toFile=$srcFile;
}
$info=””;
$srcInfo= GetImageSize($srcFile,$info);
switch($srcInfo[2])
{
case 1:
if(!$cfg_photo_type['gif'])
{
return false;
}
$im= imagecreatefromgif($srcFile);
break;
case 2:
if(!$cfg_photo_type['jpeg'])
{
return false;
}
$im= imagecreatefromjpeg($srcFile);
break;
case 3:
if(!$cfg_photo_type['png'])
{
return false;
}
$im= imagecreatefrompng($srcFile);
break;
case 6:
if(!$cfg_photo_type['bmp'])
{
return false;
}
$im= imagecreatefromwbmp($srcFile);
break;
}
$srcW=ImageSX($im);
$srcH=ImageSY($im);
if($srcW<=$toW&&$srcH<=$toH)
{
return true;
}
//缩略生成并裁剪
$newW=$toH*$srcW/$srcH;
$newH=$toW*$srcH/$srcW;
if($newH>=$toH)
{
$ftoW=$toW;
$ftoH=$newH;
}
else
{
$ftoW=$newW;
$ftoH=$toH;
}
if($srcW>$toW||$srcH>$toH)
{
if(function_exists(“imagecreatetruecolor”))
{
@$ni= imagecreatetruecolor($ftoW,$ftoH);
if($ni)
{
imagecopyresampled($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);
}
else
{
$ni=imagecreate($ftoW,$ftoH);
imagecopyresized($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);
}
}
else
{
$ni=imagecreate($ftoW,$ftoH);
imagecopyresized($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);
}
//裁剪图片成标准缩略图
$new_imgx= imagecreatetruecolor($toW,$toH);
if($newH>=$toH)
{
imagecopyresampled($new_imgx,$ni,0,0,0,($newH-$toH)/2,$toW,$toH,$toW,$toH);
}
else
{
imagecopyresampled($new_imgx,$ni,0,0,($newW-$toW)/2,0,$toW,$toH,$toW,$toH);
}
switch($srcInfo[2])
{
case 1:
imagegif($new_imgx,$toFile);
break;
case 2:
imagejpeg($new_imgx,$toFile,85);
break;
case 3:
imagepng($new_imgx,$toFile);
break;
case 6:
imagebmp($new_imgx,$toFile);
break;
default:
return false;
}
imagedestroy($new_imgx);
imagedestroy($ni);
}
imagedestroy($im);
return true;
}
}
即可
QQ:51461981