Afcommerce/模板制作

来自站长百科
跳转至： 导航、​ 搜索

Afcommerce|Afcommerce基本使用教程| Afcommerce定制指南|Afcommerce模板制作| Afcommerce运输模块设置

修改基本布局[ ]

修改banner[ ]

  • 修改banner，我们需要编辑bannerinclude.php文件，用本地的HTML编辑器打开该文件，下面是未更改的代码情况：
<?php
/*
File Name: bannerinclude.php, v 2.5
Author: Paul Crinigan, AmazingFlash.com
AFCommerce, Amazing Flash Commerce Solutions
http://www.afcommerce.com
Copyright (c) 2004 - 2006 AFCommerce
AFCommerce is Released under the AFCommerce Free Public License Agreement
*/
?>
<IMG SRC="images/mainsite/mainimage.gif" ALT="Amazing Flash Commerce Solutions - AFCommerce.com">
  • 可以看到，bannerinclude文件并不是很复杂，修改banner非常简单，将mainimage.gif图片名称替换成你自己的banner图片名称，再将你自己的banner图片上传到images/mainsite/文件夹下，注意有时候可能需要为你的图片添加width和height属性代码。

修改顶部导航菜单[ ]

  • 默认情况下，在banner的下面显示有 Home、About Us、Resource、和Contact Us导航按钮，这些导航按钮的HTML代码在 toplayout.php文件中，文件中的代码你可以完全删除或者是替换成你自己编辑的代码，下面是未更改的代码：
<!-- The following links are optional. You may delete them or change them any way you like. The menu appears under   
 the banner by default unless you move them. -->
 
 <BR><TABLE bgcolor='#ffffff' WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'><TR><TD WIDTH='25%'   
 ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo 
 $buttontemp; ?>/home-roll.gif');"
 
 onMouseOut="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif');"  
 HREF='index.php'><IMG name='a3001' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif' border='0' 
 alt='Home'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3002','lang/<?php 
 echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus-roll.gif');"
 
 onMouseOut="changeimage('a3002','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif');" 
 HREF='about.php'><IMG name='a3002' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif' 
 border='0' alt='About Us'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage
 ('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources-roll.gif');"
 
 onMouseOut="changeimage('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif');" 
 HREF='resources.php'><IMG name='a3003' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif' 
 border='0' alt='Resources'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage
 ('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus-roll.gif');"
 
 onMouseOut="changeimage('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif');"  
 HREF='contact.php'><IMG name='a3004' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif' 
 border='0' alt='Contact Us'></A></TD></tr></TABLE><BR>

修改圆边角[ ]

  • 系统默认的情况下，左边栏以及主体内容显示框的边框都有一个圆的边角，如下图所示：

Afctheme.PNG

  • 用户可以根据下面的提示，新建自己的边角图片
    1. 图片必须是GIF格式
    2. 图片的宽度为5px，高度为22px
    3. 左边的边角图片必须命名为leftmenu_topleft.gif
    4. 右边的边角图片必须命名为leftmenu_topright.gif
    5. 将新建的图片上传到image/mainsite/文件夹替换掉原先的图片

用户也可以通过编辑修改toplayout.php文件直接删除掉这些图片，下面是toplayout文件中关于此项的部分代码： 

<TABLE WIDTH='100%' cellpadding='0' cellspacing='0'><TR ALIGN='CENTER' VALIGN='TOP'> <td align='left'><IMG  
 SRC="images/mainsite/leftmenu_topleft.gif" WIDTH="5" HEIGHT="22" ALT=""></td> <td align='center' HEIGHT="22" width='100%' valign='middle'  
 class='headline1'><?php echo MENU_CATEGORIES; ?></td> <td align='right'><IMG SRC="images/mainsite/leftmenu_topright.gif" WIDTH="5" HEIGHT="22"  
 ALT=""></td> </tr>
 <TR ALIGN='CENTER' VALIGN='TOP'><TD colspan='3' width='100%' class='menu' ALIGN='left' VALIGN='TOP'><?php require ('categories.php');

</TD><TD WIDTH='*' height='100%' ALIGN='left' VALIGN='TOP'><TABLE WIDTH='100%' cellpadding='0' cellspacing='0'><TR ALIGN='CENTER' VALIGN='TOP'> 
 <td align='left'><IMG SRC="images/mainsite/leftmenu_topleft.gif" WIDTH="5" HEIGHT="22" ALT=""></td> <td valign='middle' align='left'  
 HEIGHT="22" width='100%' class='headline1'> ;  ;
 <?php
 if ($breadcrumbfeature == "1") {
 $catid = afc_secure_number_GET ("cat");
 $breadcrumbstring = afc_get_breadcrumb_string ($catid, $pid, $langid); 
 if ($breadcrumbstring != "") {
 echo "<!-- Begin Breadcrumb -->" . MENU_BREADCRUMBTITLE . ":  " . $breadcrumbstring . "<!-- Ends Breadcrumb -->"; } }
 ?>
 </td> <td align='right'><IMG SRC="images/mainsite/leftmenu_topright.gif" WIDTH="5" HEIGHT="22" ALT=""></td> </tr><tr><TD colspan='3'  
 WIDTH='100%' height='100%' class='bodyframe' ALIGN='left' VALIGN='TOP'>

添加右边栏[ ]

  • 系统已经做好了添加右边栏的准备，只不过相应的代码被屏蔽掉了，这样在默认情况下，右边栏并没有显示。这些代码存放在bottomlayout.php文件中，下面是示例代码：
<?php
 /*
 File Name: bottomlayout.php, v 2.5
 Author: Paul Crinigan, AmazingFlash.com
 AFCommerce, Amazing Flash Commerce Solutions
 http://www.afcommerce.com
 Copyright (c) 2004 - 2006 AFCommerce
 AFCommerce is Released under the AFCommerce Free Public License Agreement
 */
 // By default this file is blank, however this file is attached to the footer 
 // include for websites that want to add any universal html to be added after
 // each cart file's html. For example, if you want to display any links on the 
 // bottom or right hand side of your pages. When using the Amazing Flash website
 // building system, this file is automatically created for each layout option.
 ?>
 </td>
 <!-- if you would like to create a right hand side colomn remove the comments from the html below -->
 
 
 <!-- <td width='150'>
 <TABLE WIDTH='100%' cellpadding='0' cellspacing='0'>
 <TR ALIGN='CENTER' VALIGN='TOP'>
 <td align='left'><IMG SRC="images/mainsite/leftmenu_topleft.gif" WIDTH="5" HEIGHT="22" ALT=""></td>
 <td align='center' HEIGHT="22" width='100%' valign='middle' class='headline1'><?php echo MENU_CATEGORIES; ?></td>
 <td align='right'><IMG SRC="images/mainsite/leftmenu_topright.gif" WIDTH="5" HEIGHT="22" ALT=""></td>
 </tr>
 <TR ALIGN='CENTER' VALIGN='TOP'>
 <TD colspan='3' width='100%' class='menu' ALIGN='left' VALIGN='TOP'>Test Test Test</td>
 </tr>
 </table> -->

 
 </td></tr></table>
 <!-- Place content that you would like displayed in the footer below this comment, or in the footer file AFTER the  
 bottomlayout include statement -->
  • 将前的“<!--”和</table>后的“-->”删掉，前台即可显示右边栏，如下所示：

Afcthird column.jpg

  • 可以将Test Test Test修改成你希望在右边栏里显示的内容

修改样式表[ ]

样式表中常用的标签：background-color（背景颜色）、border-color（边框颜色）、Fonts（字体）、Font-family（字体类型）、Font-size（字体大小）、color（字体颜色）。

Menu[ ]

Menu类文件是用来决定左边栏整体框架的外观显示，该类被toplayout.php文件调用，默认代码如下: 

.menu {
padding: 0px;
border-width: 0px 1px 2px 1px;
border-style: solid;
border-color: #9A9A9A;
background-color: #EEEEEE;
}

注意：如果你修改background-color的话，左边栏中的链接会有一个灰色边框环绕，这是由lftnav（左边导航）类文件中的border-color决定的，如果不想出现边框的话，可以将其修改成和menu中background-color一样的颜色。

lftnav[ ]

lftnav类文件是用来控制左边栏中链接的显示，默认代码如下： 

A.lftnav:link {
width:93%;
padding:4px;
text-decoration:none;
display:block;
border-style:solid;
border-width:1px;
border-color:#EEEEEE;
font-weight:bold;
font-size : 12px;
color: #003366;
}
A.lftnav:hover {
width:93%;
padding:4px;
text-decoration:none;
display:block;
border-style:solid;
border-width:1px;
border-color:#B7B7B7;
background-color:#F7F7F7;
font-weight:bold;
font-size : 12px;
color:#993333;
}

用户可以通过在该文件中添加背景图片，而创建一个带有翻转效果的按钮。在A.lftnav:link和A.lftnav:hover中添加background-image: url('yourimagename.jpg')即可。

注：A.lftnav：hover文件是控制鼠标悬停在链接上时链接的显示情况。

bodyframe（主体框架）[ ]

bodyframe，顾名思义，即是控制网页主体内容外部框架的显示，该文件被toplayout.php文件调用，默认代码如下： 

.bodyframe {
border-width: 0px 1px 1px 1px;
padding: 10px;
border-style: solid;
border-color: #9A9A9A;
}

注：默认情况下bodyframe类从body类中继承background-color这一属性值，用户也可以为其另外定义，这样主体内容就会在颜色方面突出显示

getcategory[ ]

getcategory文件为商品链接增加显示边框和背景颜色，该文件被这也页面调用， getcategory.php、showspecial.php、showclearance.php、showbundles.php、bestseller.php、whatsnew.php、getmanufacture.php以及搜索结果。 

.getcategory {
border-width: 1px;
padding: 0px;
border-style: solid;
border-color: #003366;
background-color: #eeeeee;
}
A.getcategory:link {
width: 98%;
display:block;
color:#003366;
font-weight:bold;
text-decoration:none;
font-size:14px;
border-style:solid;
border-width:1px;
border-color:#eeeeee;
background-color:#eeeeee;
}
A.getcategory:hover {
width: 98%;
display:block;
color:#993333;
font-weight:bold;
text-decoration:none;
font-size:14px;
border-style:solid;
border-width:1px;
border-color:#B7B7B7;
background-color:#ffffff;
}

name[ ]

name类文件主要是控制主体内容顶部显示的页面名称的外观： 

.name { 
font-family : Verdana, Arial, sans-serif;
font-size : 24px;
font-weight: bold;
color: #003366;
}

description[ ]

description类主要控制商品分类以及商品的描述文本的显示： 

.description {
font-family : Verdana, Arial, sans-serif;
font-size : 17px;
font-weight: bold;
color : #000044;
}

参考来源[ ]

http://www.afcommerce.com/docs/

Afcommerce使用手册导航

Afcommerce基本使用教程|Afcommerce定制指南|Afcommerce模板制作|Afcommerce运输模块设置
取自“https://www.zzbaike.com/wiki/Afcommerce/模板制作?oldid=91139”