编辑“Afcommerce/模板制作”

{{Afcommerce top}}
== 修改基本布局 ==
=== 修改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文件中，文件中的代码你可以完全删除或者是替换成你自己编辑的代码，下面是未更改的代码：
 <nowiki><!-- 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></nowiki>
=== 修改圆边角 ===
*系统默认的情况下，左边栏以及主体内容显示框的边框都有一个圆的边角，如下图所示：
[[image:afctheme.PNG]]
*用户可以根据下面的提示，新建自己的边角图片
*#图片必须是GIF格式
*#图片的宽度为5px，高度为22px
*#左边的边角图片必须命名为leftmenu_topleft.gif
*#右边的边角图片必须命名为leftmenu_topright.gif
*#将新建的图片上传到image/mainsite/文件夹替换掉原先的图片
用户也可以通过编辑修改toplayout.php文件直接删除掉这些图片，下面是toplayout文件中关于此项的部分代码：
 <nowiki><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');</nowiki>

 <nowiki></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'></nowiki>
=== 添加右边栏 ===
*系统已经做好了添加右边栏的准备，只不过相应的代码被屏蔽掉了，这样在默认情况下，右边栏并没有显示。这些代码存放在bottomlayout.php文件中，下面是示例代码：
 <nowiki><?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 --></nowiki>
*将<td width='150'>前的“<nowiki><!--”和</table>后的“--></nowiki>”删掉，前台即可显示右边栏，如下所示：
[[image: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}}

[[category:Afcommerce]]