含山县城市建设有限公司网站,手机网站设计与实现是什么,大商创官网,河北平台网站建设作者: 闻庭牛 | 分类: zen cart插件精解 | 浏览: 4 | 评论: 暂时没有评论 如果你的Zen-cart需要一个Blog来发布一些你的最新动态#xff0c;可以试试Wordpress#xff0c;并且用WOZ这个Zen-cart的Module来把它们关联起来。WOZ的全名叫Wordpress On Zen-cart。 下面就详细介绍… 作者: 闻庭牛 | 分类: zen cart插件精解 | 浏览: 4 | 评论: 暂时没有评论 如果你的Zen-cart需要一个Blog来发布一些你的最新动态可以试试Wordpress并且用WOZ这个Zen-cart的Module来把它们关联起来。WOZ的全名叫Wordpress On Zen-cart。 下面就详细介绍一下WOZ的安装方法当然你可以在WOZ包里找到英文的安装说明。我所使用的版本为zen-cart1.3.8和wordpress2.6至于其它版本能否集成没有测试过。 Wordpress on Zen-cart总的来说有两种安装模式 第一种是把Wordpress的文件全部解压到Zen-cart的根目录下另一种方法是把Wordpress单独放到Zen-cart下新建的一个目录里。 两种方法最后访问Wordpress的地址都是 [Zen-Cart URL]/index.php?main_pagewordpress 第一步安装Wordpress 把Wordpress解压到你的Zen-cart目录下然后把Wordpress的文件夹名改为blog呵看起来感觉会爽一些。这一步的安装和普通的Wordpress安装没啥区别。 第二步设置Wordpress 在Wordpress的后台设置一下setting - General - Blog address(URL)把Blog address (URL)改为[Zen-Cart URL]即http://your.zen-cart.com 把主题设为默认主题。 第三步上传WOZ的文件 建议用ftp直接覆盖 把WOZ解压后的ZC_ROOT目录下的文件上传到服务器Zen-cart的安装目录下。把WOZ解压后的WP_ROOT目录下的文件上传到服务器WordPress的安装目录下。 再把/ZC_ROOT/includes/templates/MY_TEMP/里的CSS文件上传到你的Zen-cart模板里的CSS文件夹里。这个是Wordpress的显示主题。 第四步修改Wordpress的文件 在你的Wordpress安装目录下找到[Path of WordPress]/wp-include/template-loader.php把所有的“exit;”都替换成“return;”。如果你的Wordpress版本比较新就不需要做这一步的工作了。 第五步修改Zen-cart文件 打开Zen-cart安装目录下的[Path of Zen-Cart]/includes/extra_configures/wordpress-config.php把 define (ABSPATH,/var/www/vhost/example.com/public_html/blog/); 替换为 define (ABSPATH,[Path of WordPress]); 比如说在我本地我是改为这样的东西define (ABSPATH,E:/mywebs/zen-cart/blog/); 记住这个路径得是你服务器上的绝对路径。 第六步布局设置 在Zen-cart后台管理面板的admin panel › tools › Layout Boxes Controller里选择打开你需要的Wordpress侧栏框。所有和Wordpress有关的侧栏框都是以WP_XXX格式存在的。 第七步检查 现在你可以通过 http://your.zen-cart.com/index.php?main_pagewordpress 这个网址来访问你的Wordpress了。 如果你能看到Wordpress则表明你已经把Wordpress集成到了Zen-cart里了。 完成了这七步基本上就把Wordpress的显示页面整合到了Zen-cart里面。 版权修改 问题如何清除zencart页脚上的 版权所有(c)2003 Zen Cart. Powered by Zen Cart 解决方案:版权所有 (c) 2003 Zen Cart 覆盖了模板的设计和图形。如果您使用原有的模板和图形您必须保留版权信息。如果您使用自己的模板和图形您可以修改版权信息。 如果您想将商店放在Zen Cart网站上展示您必须在页脚上保留Powered by Zen Cart。保留Powered by Zen Cart对您和Zen Cart都有好处因为相关的互惠链接能提高您在搜索引擎的排名。如果您不想在Zen Cart网站上展示您可以去掉Powered by Zen Cart但不可以修改它。 如果要定制这段文字在 \includes\languages\schinese.php 文件中第17行。 本文转自最模板,原文地址http://www.zuimoban.com/php/zencart/317.html zen-cart 实现MSN在线聊天 作为一个外贸网店怎么能少一个与客户沟通的通道为网站添加一个MSN在线聊天按钮可以方便客户何乐而不为。但是现在网上大部分的MSN聊天代码已经不能使用出现信息无法发送的情况。 正确的方法如下 1.登陆http://settings.messenger.live.com/applications/websettings.aspx申请MSN 在线通同时登入个人的 Windows Live ID。2.进入申请页面按提示设置最后会生成一段Html文本。黏贴到需要显示的地方即可。 第一修改zen-cart二次开发教程 以下是zen cart 首页程序的修改。根据各个文件修改不同的功能。希望这些能对你有所帮助。首页界面//include/templates/zccn/common/tpl_main_page.php首页主样式表//include/templates/zccn/css/schinese_stylesheet.css首页左边栏目/includes/templates/template_default/common/tpl_box_default_left.php商品分类内容修改/includes/modules/sideboxes/categories.php/includes/templates/zccn/sideboxes/tpl_categories.php推荐产品/includes/modules/sideboxes/featured.php/includes/templates/template_default/sideboxes/tpl_featured.php新进产品/includes/modules/sideboxes/whats_new.php/includes/templates/template_default/sideboxes/tpl_whats_new.php特价产品/includes/modules/sideboxes/specials.php/includes/templates/template_default/sideboxes/tpl_specials.php数据库表/includes/database_tables.php首页中间商品修改/includes/templates/template_default/common/main_template_vars.php/includes/templates/template_default/templates/tpl_index_default.php内页中间商品修改/includes/templates/template_default/templates/tpl_index_catergories.php首页中间 August新进商品/includes/templates/template_default/templates/tpl_modules_whats_new.php首页中间 August特价商品/includes/templates/template_default/templates/tpl_modules_specials_default.php首页中间 推荐商品/includes/templates/template_default/templates/tpl_modules_featured_products.php首页右边栏目/includes/templates/template_default/common/tpl_box_default_right.php商品搜索/includes/templates/template_default/sideboxes/tpl_search.php客服中心/includes/templates/template_default/sideboxes/tpl_ezpages.php畅销商品/includes/templates/template_default/sideboxes/tpl_best_sellers.php商品评论/includes/templates/template_default/sideboxes/tpl_reviews_write.php在线名单/includes/templates/template_default/sideboxes/tpl_whos_online.php 第二修改 有的程序一看就明白,然而真要进行修改和扩展,还真不容易,ICommerce就是这样的程序;然而有的程序,看起来很复杂,以至于一时间连某个页面都找不到在哪儿,这种程序架构比较复杂,初级网站编程人员很难看明白,但是当你真正的掌握到了它的程序结构后,你一定会为架构师的思维拍案叫绝,因为你会发现,若要开发一些新功能会变得如此的方便,zen-cart就是如此. zen-cart是国外比较优秀的开源电子商务网点源码,zen-cart程序源于os-commerce,借鉴了os-commerce的很多成果,而在扩展性方面,zen-cart显得又比前辈做得更好. 可以看到, zen-cart前台所有的页面地址是如下格式: 1. http://127.0.0.1/zencart/index.php?main_pageindexcPath1_4 2. http://127.0.0.1/zencart/index.php?main_pageproduct_infocPath1_4products_id1 3. http://127.0.0.1/zencart/index.php?main_pagesite_map 也许你会觉得很困惑, 怎么所有的页面都是index.php啊?这么大的一个网店系统, 难道一个index.php页面就可以搞定了吗? 这时, 你可能就需要耐心的去分析一下index.php页面了. 经过分析, 你就会发现, 其实index.php页面并不想你所想象的那么神奇, 那么深不可测. 相对于其他文件, Index.php更像是一个管理者, 一个司令员, 当它接到指令后, 并不是自己来处理, 而是把任务分配给他的下属. 至于要完成什么任务, 那么就要看接收到的指令main_page的内容了. 在index.php页面的开头, 作者介绍了该页面的处理过程, 如表格 21所示. * index.php represents the hub of the Zen Cart MVC system * * Overview of flow * ul * liLoad application_top.php - see {tutorial initsystem}/li * liSet main language directory based on $_SESSION[language]/li * liLoad all *header_php.php files from includes/modules/pages/PAGE_NAME//li * liLoad html_header.php (this is a common template file)/li * liLoad main_template_vars.php (this is a common template file)/li * liLoad on_load scripts (page based and site wide)/li * liLoad tpl_main_page.php (this is a common template file)/li * liLoad application_bottom.php/li * /ul * * package general * copyright Copyright 2003-2005 Zen Cart Development Team * copyright Portions Copyright 2003 osCommerce * license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * version $Id: index.php 2942 2006-02-02 04:41:23Z drbyte $ 表格 1. 加载application_top.php文件 Application_top.php文件中将进行许多常量的定义, 加载配置文件等工作 2. 设置语言目录 这里定义了一个变量$language_page_directory, 代表当前的语言目录, 该变量的值和$_SESSION[language]值息息相关. 3. 加载” includes/modules/pages/PAGE_NAME/”目录中的所有header_php.php文件. 可以看到, 在每个网页内容的文件夹中, 都有header_php.php文件, 加载页面时, 首先会加载该文件. 4. 加载html_header.php文件 html_header.php文件包含了在head/head标记中出现的内容, 默认放在includes/templates/common目录下. 当然在特定的情况下, 加载的可能不是这个文件, 你可以再模板级或者页面级来重写这个文件, 从而定义特殊的html_header.php文件. 通过金字塔视图, 可以看到html_header.php文件的优先级别, 越靠近金字塔顶端, 优先级别越高, 如果优先级别高的文件已经存在, 则不会加载优先级别比它低的文件了. 图 5. 加载main_template_vars.php文件 main_template_vars.php文件根据$_GET[main_page]的值实现了页面的跳转逻辑. 该文件的加载过程和html_header.php文件的加载过程异曲同工, html_header.php加载的是网页头部head/head中的内容, 而文件main_template_vars.php却决定了要加载的网页的主体内容. 通过观察template_default中common下面的main_template_vars.php中的代码, 可以知道, 若在存储页面文件的”includes/modules/pages/$_GET[main_page]”中增加一个名为main_template_vars.php的文件, 则将直接加载这个文件. 否则, 将加载当前模板中的”tpl_$_GET[main_page]_ default.php”文件. (注意, 这里实际上没有真正加载文件, 而只是将要加载的文件的路径$body_code进行设置) 如果您对这两个文件的加载过程还不胜了解, 那么请试着做下面的实验. 在地址栏中访问”http://127.0.0.1/zencart/index.php?main_pagenews_list”, 将会出现网页未找到的提示信息. 这是可以理解的, 因为news_list是我自己想象的, zen-cart没有提供这个页面, 我自己也没有安装类似的插件. 然后在目录”/includes/modules/pages”中新建一个文件夹, 命名为news_list, 再访问该链接, 就不会提示找不到链接了, 至此一个新的页面就建好了, 接下来的工作就是要丰富该页面的内容了. 这将在后面的章节中予以描述. 6. 加载on_load脚本 on_load_*.js文件中包含了要在body标记的onload属性中出现的内容, 即在页面加载完成后要执行的脚本. 可以在同一个页面中定义多个on_load_*.js文件, 这些内容将会同时被执行. on_load_*.js文件可能是页面级和站点级的. 页面级的on_load_*.js文件只在当前页面中有效, 而站点级on_load_*.js文件将对站点中的每个页面有效. 有关如何定义页面级和站点级的onload事件, 将在后面的章节予以描述. 在这里, 页面级和站点级的on_load_*.js文件内容都将读入$za_onload_array[]数组中, 然后组合到变量$zv_onload中, 为后面做好准备. $zv_onload最终将作为到body的onload属性值. 7. 加载tpl_main_page.php文件 这里定义将选择影响页面布局的模板, 可以在具体的页面中选择, 或者使用zen-cart默认的模板(一个标准的三列板式), 模板中会对main_template_vars.php中定义的变量$body_code所指文件予以加载. 8. 加载application_bottom.php文件 application_bottom.php文件中将进行一些清理操作. 第三修改 本文介绍了基于Zen Cart搭建外贸网站的流程以及在使用Zen-Cart网站中遇到的一些常见问题是作者开发经验的总结对希望快速了解和掌握Zen Cart的PHPer有所帮助。 1、安装配置PHPMySQL环境建议安装PHP集成环境包(方便快捷).网上也有许多此类教程在此就不赘叙了。如果是虚拟主机的话需要服务器支持Zen-Cart的安装运行环境要求。 2、下载Zen-Cart源程序解压并上传到网站空间的对应目录下在浏览器的地址栏里面输入http://domainname/zc_install/index.php然后按照提示步骤进行安装...安装完成之后转到前台会发现有两条显眼的红色背景的Warning这是要求你删除或重命名安装目录的名字以及让你修改配置文件的权限(FTP改不了的话直接修改includesinit_includesinit_header.php文件 define(WARN_CONFIG_WRITEABLE, true); 里true改为false)以防被别有用心者利用按照要求做然后再刷新你的网页就OK了。 3、安装Easy Popular批量商品管理软件然后批量导入数据。下载批量商品管理插件解压之后里面有一个若干个txt文件和一个catalog的目录将catalog目录下的文件全部拷贝到你的程序安装目录下。刷新后台在Tools栏目下便可以发现多了Easy Popular的菜单点击进入网页顶部会有相关Configuration提示要你安装根据提示点击here这样就成功安装了EP插件。然后是向数据库导入数据这里要求上传产品图片到程序安装目录下的images目录下可能产品图片非常多手工编辑记录数据很麻烦本人写了一个专用的小工具可根据产品图片直接生成对应的excel报表如有需要的可联系本人。 4、模版修改主要是三个大的方面顶部的Banner和Logo、导航、Flash/JS图片展示、整体的色调修改导航栏在includes/templates/模版文件目录/commom/tpl_header.php。在这个文件下id为topLinks的div里面require了一个文件里面是输出导航菜单的。可以将这个require改为我们需要的东西也可以直接去includes/templates/template_default/templates/tpl_ezpages_bar_header.php里面修改对应的CSS位于includes/templates/模版文件目录/css/stylesheet.css里面的#topLinks里面对于三栏的模版左右两侧栏目的宽度都可以在Configuration下的布局设置里可直接修改但对于中间一栏的设置则需要修改CSS代码了对应的CSS代码位于includes/templates/模版文件目录/css/stylesheet.css文件中的#mainWrapper中改过这里之后你便会发现顶部的LOGO和导航那部分的宽度与整体不协调了我们继续修改本文件中的#logoWrap的宽度就可以了。默认模版左右侧栏的标题背景颜色是不相同的若要把他们修改为一样的颜色该怎么修改呢有两种办法一种就是继续在上面的CSS文件里面直接修改背景图片另外一种就是将模版文件下images目录下的带有Headingbg的图片换成一样的图片。 5、后台常用设置(1)根据需要开启左右侧栏的内容 Tools→Layout Boxes Controller(2)购物支付及免运费模块设置Modules→Payment Modules 安装配置支付模块Modules→Shipping Modules 免运费模块设置 (Free Shipping)Modules→Order Total Modules 可设置优惠券,税款等。(3)国家地区: Locations→Countries (外贸英文网站可移除中国地区Code (2)CHN)(4)汇率设置: Localization→Currencies (使用IPS等支付方式注意保留人民币CNY)(5)开户关闭注册或结账的条款:在后台 Configuration--条款选项 里设置 6、局部细节上的调整information栏目里面的内容[在Tool→Define Pages Editor菜单下]填充、sponsors栏目里面的广告图片[在Tool→Banner Manager]更改、底部的版权信息(includeslanguagesEnglish.php)需要做对应的修改等等。 7、产品图片放大效果在后台Tools栏目下点击Image Handler2下拉菜单→点击Install Image Handler安装图像管理模块然后在Configuration中设置图像参数IH 放大(中)小图像设为yes在商品信息 - 图像宽度/图像高度 分别设定要放大的图片大小。我们自己开发主要是修改下面两个文件includes/templates/dreamugg/templates/tpl_specials_default.phpincludes/functions/html_output.php 8、是不是觉得自己网站浏览人数少的让人尴尬有办法includes/modules/sideboxes/whos_online.php里面自己修改吧其中$n_guests是游客人数$n_members是注册会员人数自己可以据此去修改。另外一个就是Powered by信息的修改修改方法如下includes/languages/english.php里面修改第一个define()中对应处为自己所要信息即可。 9、记得安装IPS等补丁(先执行SQL语句,再上传IPS补丁程序)... 10、如果产品的分类比较多的话点击父分类的连接时会有子分类的连接但是这个链接平平无奇有些客户会认为他不是链接这样我们的产品浏览次数以及被购买的机会就降低所以必须对这种链接做一些修改。/includes/modules/category_row.php里面修改相关代码即可. 11、做外贸网站Google推广是一个很关键的环节所以这里就衍生了一个问题如何将GGAD跟踪代码添加到网站中去添加位置很灵活这里的例子仅供参考。全站跟踪代码添加到includes/templates/使用的模版/common/tpl_footer.phpGGAD定义操作跟踪代码!-- Google Code for 注册/登陆行为 Conversion Page --includes/languages/english/login.phpincludes/languages/english/create_account.php!-- Google Code for 购买/销售 Conversion Page --/includes/templates/template_default/templates/tpl_checkout_success_default.php../includes/templates/template_default/templates/tpl_checkout_confirmation_default.php(183,1)!-- Google Code for 销售机会 Conversion Page --includes/languages/english/shopping_cart.php!-- Google Code for 关键网页视图跟踪 Conversion Page --!-- Google Code for 其它跟踪 Conversion Page --注意添加的时候如代码是直接加在网站开头head之前的时候会导致整个页面的错位. 12、后台显示的时区是默认值这对于我们来说很不方面如何修改呢找到admin/includes/header.php文件搜索到echo date(r, time()) . GMT位置处不用明说了大家都知道这里就是输出时间的在前面加上一句话 date_default_timezone_set(PRC); 存档到后台刷新一下看效果okay现在就是北京时间了。(但生成的订单时间还是以网站所在服务器时间为准) 13、由于Google广告申请不下来所以需要更换域名更换域名的话则需要修改网站里面的配置信息如何修改呢先修改两个配置文件includes/configure.phpadmin/includes/configure.php把里面的定义的域名变量改为需要的域名或者使用一种一劳永逸的办法使用http:// . $_SERVER[HTTP_HOST]https:// . $_SERVER[HTTP_HOST]替换对应位置处。接着就是修改Logo、Banner这个没有什么值得说的没有技巧可言;接着就是Copyright信息和Powered by信息的修改。 14、如何设置搜索引擎优化在后台的Configuration-搜索引擎优化选项下打开SEO功能SEO模块需要检查的就三个地方(1). 确认网站支持mod_rewrite且主机允许你使用自己的.htaccess文件;(2). .htaccess 文件名字正确 前面有个点(3). 将根目录下的文件htaccess_sample改名为 .htaccess并修改其中的/shop/为您的zen-cart目录。如果你的域名指向的目录是zen-cart的根目录那么就设置为: RewriteBase /如果是 http://www.domain.com/zencart/ 这样的形式打开网站那么 RewriteBase /zencart/ 15、如何添加新的页面Payment Policy设置后台ToolEZ-PagesPayment Policyedit: (如果没有Payment Policy这项,则点选new file按钮)在Page Title填写Payment Policy其它单选按钮不用改动只需在HTML编辑框内填写支付条款内容即可其它都不用填写。详见: topic1947.html 16、网关支付接口相关设置ZenCart程序已集成了PayPal等支付网关接口只要设置好收款支付账号等相关参数即可。另外要安装的IPS等网关支付接口,可根据官方提供的支付接口进行整合。 17、商品描述之Attributes Controller扩展(在属性控制选项内容里添加设置)在Catalog下拉菜单下的Attributes Controller的标题Option Name下填写选项名称和ID并插入然后在Option Values中分别各个选项的值。另外如果所有商品属性都已设置好的话可以下载 型号/属性 以TAB分割的文本文件 18、设置优惠券: admin-Modules-Order Total-Discount Coupon 19、产品重量的修改: (g改为kg)/includes/languages/english.php/includes/languages/english/modules/shipping/zones.php在这两个文件里查找替换. 20、在选择支付方式中添加支付条款的语句:在/includes/languages/english/checkout_payment.phpdefine(TEXT_SELECT_PAYMENT_METHOD或者define(TABLE_HEADING_PAYMENT_METHOD相应的地方添加。.ccinfo {display:none; /*隐藏内卡标志*/} 21、开启关闭注册或结账的条款在后台 Configuration--条款选项 里设置22、添加友情链接的方法这里利用到了Banner Manager广告代码显示友情链接首先在后台布局设置中的“广告显示组-页脚位置1”填写你的广告组名称,如Links. 然后在Tools栏目下的Banner Manager菜单新建“New Banner”在Banner Group填写框中输入广告组名称Links, 并输入Banner Title在HTML Text文本框内输入你要显示的友情链接Html代码点击insert即可。 第四修改 去掉产品目录旁边的产品总数方法在管理后台里进入”Configuration” — “My Store” — “Show Category Counts”选项设置为关即可。目录后面会有一个烦人的小箭头-按Zen-cart的默认配置目录后面有-(12356)这样风格的统计数字显示。如何去掉呢在管理后台里进入”Configuration” — “Layout Settings” — “Categories Separator between the Category Name and Count”选项按你的需要设置即可。在Zen-cart里如何修改”Powered by Zen Cart”的内容?这个可以在后台My Store-footer text body里进行修改也可以到FTP里的/include/template/你的模板/common/tpl_footer.php里进行修改。页眉下面有一大堆烦人的Categories tags怎么去掉后台管理 — Configuration — Layout Settings — Categories-Tabs Menu ON/OFF把这个属性设为关闭即可怎么修改Contact Us的页面内容与风格如果是内容的话在后台管理的Tools — Define Pages Editor里进行页面内容的修改。如果是风格的话在CSS文件里找到对应的id或是class名进行修改。如果是要修改显示内容的话在你的模板目录下的templates/tpl_contact_us_default.php里修改如果你重写了页面内容的话请在common文件夹下找到相应的文件进行修改。打开产品根目录后会显示子目录的排列图标这个东西怎么修改在模板目录下的common/tpl_columnar_display.php文件里修改显示的内容。浏览器的抬头上写着”Zen Cart!, The Art of …”怎么修改打开文件includes/languages/english/meta_tags.php在里面找到下面这段// page title define(’TITLE’, ‘Zen Cart!’);// Site Tagline define(’SITE_TAGLINE’, ‘The Art of E-commerce’);把这些文字替换掉就可以了。当然如果你是中文的页面就要到相应的文件夹下面去找。我想把左、中、右三栏之间留一点空隙怎么办Zen-cart默认把左侧栏、中间产品栏、右侧栏排列得很紧密我想把三间之间的两个空隙弄小一些怎么办只要按这个方法你可以随意调节三者之间的空隙大小。在后台Configuration — Layout Setting中仔细调节Column Width – Left BoxesColumn Width – Right Boxes和Column Width -LeftColumn Width – Right的值上面的这类带有Boxes的是设定显示给我们看的box的大小而没有Boxes的这类值则是显示背景的大小。只要你把下面的值设得比上面的值大就有空隙出来了。刚安装好的Zen-cart如何修改首页的Congratulations! you have successfully installed…If you want to change “Congratulations! You have successfully installed your Zen Cart; E-Commerce Solution” with your own text open the includes/languages/ENGLISH/index.php file and find the following code:// This section deals with the “home” page at the top level with no options/products selected/*Replace this text with the headline you would like for your shop. For example: ‘Welcome to My SHOP!’*/define(’HEADING_TITLE’, ‘Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.’);} elseif ($category_depth ‘nested’) {// This section deals with displaying a subcategory/*Replace this line with the headline you would like for your shop. For example: ‘Welcome to My SHOP!’/define(’HEADING_TITLE’, ‘Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.’);}Replace the text starting “Congratulations” with your own text. Make sure that the single quote marks are not left out.如何修改左、右边框的显示风格修改文件common/tpl_box_default_left.php或common/tpl_box_default_left.php即可。我得到了一个空白页面怎么调试呢最简单的方法把以下代码加入到你的index.php里?php define(’STRICT_ERROR_REPORTING’, true);?这样你访问页面产生的错误消息就会输出到页面了。当然记得把这个关掉如果你把错误fix掉了的话免得给用户看到。我要单独修改Categories里的内容怎么办不单是Categories所有的sidebox的内容都可以在/includes/templates/YourTemplate/sideboxes文件夹里进行修改。tpl_categories文件就是修改Categories里面的显示内容的当然你修改了里面的CSS标签就修改了Categories的样式。你可以通过common/tpl_box_default_left.php和common/tpl_box_default_right.php这两个文件来对左栏和右栏的内容进行大的调整。一般来说你只要修改sideboxes里面对应的文件就能搞定你所需要的东西了。Posted in Zen-Cart 系列知识, 常用知识 | No Comments ?zen-cart全新做一个自己的模板应参考文档(转载)星期天, 七月 12th, 2009 Zen Cart的模板设计比较复杂需要一定的时间来熟悉。一旦你了解了它的结构就会慢慢习惯了。首先要阅读常见问答部分的如何添加、制作新模板。 Zen Cart的设计没有什么特别与以前设计HTML页面是一样的。只是整个页面分成了好几个部分并加入了PHP代码。通常页面分为页眉(header)页脚(footer)边框(sideboxes)。所以设计页面的时候要记住Zen Cart是如何组织这些页面的。页面是通过CSS样式表来控制的。样式表控制表格单元的背景图案、字体的颜色和样式等等。所以假如你需要修改边框标题栏的字体那么查看样式表文件。Zen Cart在页面添加图像有两种方式。可以使用图像目录的相对路径或者在模板中用php变量定义图像。如果你使用https服务器并且采用相对图像路径那么https的图像目录下也要有同样的图像否则https服务器很可能会给出警告提示。Zen Cart可以设置成任意的html/flash的界面只是比通常的html页面的设计费时。你可以从修改缺省的模板开始先修改CSS文件和三栏格式的界面。开始先采用不同的颜色很快就可以设计出完全不同的风格。最后在设计模板前要先计划好你网页的内容事半功倍。下面是zen cart页面各部分相对应模板文件的一个列表文件路径注释index.php主文件includes/templates/[custom template folder]/common/html_header.php页面的head部分includes/templates/[custom template folder]/common/tpl_main_page.php页面的body部分includes/templates/[custom template folder]/common/tpl_header.php所有页面的页眉(column left)includes/templates/[custom template folder]/common/main_template_vars.php决定页面的内容部分缺省为 ‘tmp_index_default.php’首页 – 缺省includes/templates/[custom template folder]/templates/tmp_index_default.php首页模板文件首页 – 显示分类includes/templates/[custom template folder]/templates/tpl_index_categories.php首页上显示分类时的模板文件includes/modules/[custom template folder]/pages/index/category_row.php选择要显示的分类includes/templates/[custom template folder]/templates/tpl_index_category_row.php显示分类首页 – 显示指定分类includes/templates/[custom template folder]/templates/tpl_index_product_list.php首页上显示指定的分类时采用的模板文件includes/modules/[custom template folder]/product_listing.php将商品数据添加到数组includes/templates/[custom template folder]/templates/tpl_modules_product_listing.php显示商品数量和商品导航菜单includes/templates/[custom template folder]/common/tpl_list_box_content.php显示商品数组商品信息页面includes/templates/[custom template folder]/templates/tpl_product_info_display.php显示单件商品信息购物车页面includes/templates/[custom template folder]/templates/tpl_shopping_cart_default.php购物车页面(column right)includes/templates/[custom template folder]/common/tpl_footer.php所有页面的页脚 正确地定制您的网站 - 文件替代机制 由 Jack » 2005-07-25 21:14 本文翻译自NetworkDad的文章“Properly customizing Your Site”适当修改。原文地址: http://www.zen-cart.com/forum/showthread.php?t7263很多用户对zen cart做了自己的修改非常好但同时一些用户修改了很多重要的文件例如/includes/filenames.php/includes/languages/schinese.php/includes/languages/schinese/*.php等等...友情提示如果你希望以后的升级更容易不要修改这些文件Zen Cart的文件替代机制的功能非常强你不需要修改上面的这些文件。如果你修改了这些文件下次升级的时候Zen Cart会覆盖这些文件你做的修改会丢失。好了如何避免这种情况呢如何使用文件替代机制下面我一步步说明如何使用文件替代机制而不是去修改Zen Cart的核心文件下面的所有例子都假设你1. 使用简体中文。其它语言相应修改就好。2. 例子使用的模板名字是custom custom 目录名可以是任何名字.... 只是在所有地方都要一致这样文件替代机制才能正常工作。你可以命名为:- mytemplate- custom- billg- helluvacart- zenrocks- thisseemstoolongatemplatename- supercalifragilisticexpialidocious- tpl还有很多 !!!! 附录及声明: 如果我漏了什么, 或者说错了请告知我会尽快修改! 不作任何担保。一个月后凭收据退款! -- 注请先阅读如何添加/建立新的模板修改缺省语言文件 - /includes/languages/schinese.php例子: 你想修改标题将“Zen Cart!”, 改为“我的商店名称”在目录/includes/languages下建立一个与你的模板同名的目录例如/includes/languages/custom.将schinese.php文件复制到该目录。接着你就可以修改文件/includes/languages/custom/schinese.php: define(TITLE, Zen Cart!); 改为: define(TITLE, 我的商店名称!); 修改语言文件 - /includes/languages/schinese/*.php (所有该目录下的文件)例子: 你想修改account.php中的文字 - 比如你要将 帐号 改为 档案建立一个与你的模板同名的目录。假设模板名是custom。那么目录就是:/includes/languages/schinese/custom将原来的文件/includes/languages/schinese/account.php复制到新目录:/includes/languages/schinese/custom接着, 修改该新的custom目录下的文件。这样该修改会 替代 原来/includes/languages/schinese目录中的相应文件, 从而不会影响和修改核心文件。修改模板文件 - /includes/templates/template_default/templates/tpl_*_default.php例如: 你想修改tpl_account_default.php文件中的一些HTML在你的模板目录中( /includes/templates/custom ) 你应该已经有一个模板目录了 ( /includes/templates/custom/templates )。将文件tpl_account_default.php复制到该目录中。然后你就可以自己修改了它会自动 替代 /includes/templates/template_default/templates目录中的相应文件。你只要复制需要修改的文件到自己的模板目录如果你未做修改那么缺省情况下商店会从template_default目录调用缺省文件。修改边框模板这和修改通用模板是一样的(见上), 除了边框的路径是:/includes/templates/custom/sideboxes修改边框 - /includes/modules/sideboxes/*.php例子: 你想修改边框information.php文件加上另外一个链接。在边框文件的目录中(/includes/modules/sideboxes)建立另一个和模板custom同名的子目录就是/includes/modules/sideboxes/custom将文件information.php复制到该新目录中接着你就可以修改新的information.php它会替代/includes/modules/sideboxes目录中的缺省information.php文件你可以核对该边框是否被替代登录管理页面 - 工具 - 外观控制。在栏目 方框文件名 下, 如果文件名显示为红色, 就说明它被替代了。调用自定义文件名 - /includes/filenames.php例子: 你新建了一个页面about_us需要调用该文件名。不要在/includes/filenames.php文件中添加一个新的定义你应该在已有的目录/includes/extra_datafiles中定义该文件名。建立新文件about_us_filenames.php然后放在目录/includes/extra_datafiles中。在该文件中要有以下代码: 代码: 全选 ?php// About Us Filename Define##define(FILENAME_ABOUT_US, about_us);? 该文件将自动被调用, 就象该目录中的其它文件一样, 因此系统知道你的定制文件。尽量用同样的办法新建文件...例如, 调用文件blah将它命名为blah_filenames.php调用自定义数据库表 - /includes/database_tables.php例子: 你为自己的UPS跟踪系统建了个数据库ups_track需要为代码定义数据表名。不要在文件/includes/database_tables.php中定义, 你要在已有的目录/includes/extra_datafiles中定义数据表。建立新文件ups_track_database_tables.php置于目录/includes/extra_datafiles中。在该文件中要有以下代码: 代码: 全选 ?php// UPS Tracking Table##define(TABLE_UPS_TRACK, ups_track);? 该文件将自动被调用就象该目录中的其它文件一样, 因此系统知道你的定制数据库。额外语言文件例如: 你新建了一个Resource Center方框需要一个额外文件来调用额外语言定义。在目录/includes/languages/schinese/extra_definitions中, 你可以建立一个文件resource_center_box_defines.php。在该文件中你可以放置新的方框的所有语言定义。该文件将自动被调用, 保证你的自定义方框或页面的语言定义被调用。给已有文件增加额外Javascript例子: 你想为你的Bizrate帐号调用一些javascript这样订单完成后就会从已有页面调用checkout_success.php。在目录/includes/modules/pages/checkout_success中建一个新文件jscript_bizrate.js在该文件中放置Bizrate给你的javascript代码例如: 代码: 全选 script languagejavascript ##typetext/javascript!--whatever the heck bizrate gave you//--/script 同样地..如果你使用Google的转换跟踪系统。建立另外一个文件例如jscript_google.php添加和修改CSS文件例子: 你为自己的网站新建了一个CSS类不要添加到已有的CSS文件/includes/templates/custom/css/stylesheet.css中要在同一目录下另建一个文件stylesheet_YOURFILENAME.css然后将你的CSS数据加在这里。最后谈谈升级现在你正确使用Zen Cart的替代机制了恭喜你可以放心了。你不用担心升级文件会覆盖你的定制文件因为所有的定制文件都保存在你自己的目录里好吧你升级了Zen Cart。但如果你替代的文件有新的代码呢所以你需要比较custom目录和新的核心文件。例子你修改了/includes/languages/custom/schinese.php文件, 升级后, /includes/languages/schinese.php文件中有些新的定义。显然你要把这些新的定义加入到你的schinese.php文件中。最容易的方法就是使用文件比较工具推荐使用WinMerge, 也是开源免费。有了文件比较工具你就可以比较你的/includes/languages/custom/schinese.php文件 和新的核心文件/includes/languages/schinese.php然后很容易将新的修改加入到你的替代文件中。 常用CSS元素 div ul dl dt ol的简单解释 及 布局 定位 post by waipiu / 2009-4-14 11:43 Tuesday xhtml 发表评论 几个css元素的简单解释 div ul dl dt oldiv这个很常见块级元素div尽量少用和table一样嵌套越少越好 ol 有序列表。 ol li……/li li……/li li……/li /ol 表现为 1…… 2…… 3…… ul 无序列表表现为li前面是大圆点而不是123 ul li……/li li……/li /ul 很多人容易忽略 dl dt dd的用法 dl 内容块 dt 内容块的标题 dd 内容 可以这么写 dl dt标题/dt dd内容1/dd dd内容2/dd /dl dt 和dd中可以再加入 ol ul li和p 理解这些以后在使用div布局的时候会方便很多w3c提供了很多元素辅助布局 由于项目中编写文档结构、编写CSS的人员较多并与程序员协同工作就需要统一class与id的名称前天花了一点时间按照大多人的习惯制定了下面的常用关键字 容 器container/box 头 部header 主 导 航mainNav 子 导 航subNav 顶 导 航topNav 网站标志logo 大 广 告banner 页面中部mainBody 底 部footer 菜 单menu 菜单内容menuContent 子 菜 单subMenu 子菜单内容subMenuContent 搜 索search 搜索关键字keyword 搜索范围range 标签文字tagTitle 标签内容tagContent 当前标签tagCurrent/currentTag 标 题title 内 容content 列 表list 当前位置currentPath 侧 边 栏sidebar 图 标icon 注 释note 登 录login 注 册register 列 定 义column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列) 代码精简 使用DIV CSS布局页面代码精简这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点一是提高spider爬行效率能在最短的时间内爬完整个页面这样对收录质量有一定好处;二是由于能高效的爬行就会受到spider喜欢这样对收录数量有一定好处。 表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来但根据目前掌握的情况来看spider爬行Table布局的页面遇到多层表格嵌套时会跳过嵌套的内容或直接放弃整个页面。 使用Table布局为了达到一定的视觉效果不得不套用多个表格。如果嵌套的表格中是核心内容spider爬行时跳过了这一段没有抓取到页面的核心这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。 而DIV CSS布局基本上不会存在这样的问题从技术角度来说XHTML在控制样式时也不需要过多的嵌套。搜索引擎优化及营销都是非常有利的。搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议但樂思蜀本人保持这样的观点有异议者可以拿三组以上基本同等质量的网站对比观察。内容来自中国站长资讯网(www.chinahtml.com) 我想这样的情况可能不是排名规则最大的可能还是spider爬行网站时出现以上差异导致收录质量的不同。 毕竟廖胜于无建议建站或改版的朋友们技术许可的情况下还是选择DIV CSS布局为好。 CSS布局常用的方法float:none|left|right 取值 none: 默认值。对象不飘浮 left: 文本流向对象的右边 right: 文本流向对象的左边 它是怎样工作的看个一行两列的例子 xhtml: div idwrap div idcolumn1这里是第一列/div div idcolumn2这里是第二列/div div classclear/div /div CSS: #wrap{width:100;height:auto;} #column1{float:left;width:40;} #column2{float:right;width:60;} .clear{clear:both;} position:static|absolute|fixed|relative 取值 static: 默认值。无特殊定位对象遵循HTML定位规则 absolute: 将对象从文档流中拖出使用leftrighttopbottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象则依据body对象。而其层叠通过z-index属性定义 fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative: 对象不可层叠但将依据leftrighttopbottom等属性在正常文档流中偏移位置 它来实现一行两列的例子 xhtml: div idwrap div idcolumn1这里是第一列/div div idcolumn2这里是第二列/div /div CSS: #wrap{position:relative;width:770px;} #column1{position:absolute;top:0;left:0;width:300px;} #column2{position:absolute;top:0;right:0;width:470px;} 他们的区别在哪? 显然float是相对定位的会随着浏览器的大小和分辨率的变化而改变而position就不行了所以一般情况下还是float布局 CSS常用布局实例 单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;} 两行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;} #content-end{margin-left:auto;margin-right:auto;width:400px;} 三行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;} #content-end{margin-left:auto;margin-right:auto;width:400px;} 单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:420px;} 两行两列 #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:420px;} 三行两列 #header{width:700px;margin-right:auto;margin-left:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:420px;} #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 单行三列 绝对定位 #left{position:absolute;top:0px;left:0px;width:120px;} #middle{margin:0px190px0px190px;} #right{position:absolute;top:0px;right:0px;width:120px;} float定位 xhtml: div idwrap div idcolumn div idcolumn1这里是第一列/div div idcolumn2这里是第二列/div div classclear/div /div dividcolumn3这里是第三列/div divclassclear/div /div CSS: #wrap{width:100;height:auto;} #column{float:left;width:60;} #column1{float:left;width:30;} #column2{float:right;width:30;} #column3{float:right;width:40;} .clear{clear:both;} float定位二 xhtml div idcenterclasscolumn h1Thisisthemaincontent./h1 /div div idleftclasscolumn h2Thisistheleftsidebar./h2 /div div idrightclasscolumn h2Thisistherightsidebar./h2 /div CSS body{ margin:0; padding-left:200px; padding-right:190px; min-width:200px; } .column{ position:relative; float:left; } #center{ width:100; } #left{ width:200px; right:200px; margin-left:-100; } #right{ width:190px; margin-right:-100; } *html#left{ left:190px; } 这样的一个指令(position)在DreamWeaver中文版中翻译为“定位”常用的属性有两个relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚这里做一些细致的讲解。 position:relative; 表示相对定位被定位了这个属性的标签在所属的范围内可以进行上下左右的移这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动而被定义为relative的元素是真正的移动这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。 position:absolute; 表示绝对定位如果定义了这个属性的元素其位置将依据浏览器左上角的0点开始计算并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。 于是产生了一个问题现在大家做的网页大部分是居中的如果我需要这个元素跟着网页中的某个元素位置不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的靠单纯的absolute是不行的。 正确的解决方法是在元素的父级元素定义为position:relative;(这里可以是祖父级也可以是position:absolute;多谢谢old9的提出)需要绝对定位的元素设为position:absolute; 这样再设定top,right,bottom,left的值就可以了这样其定位的参照标准就是父级的左上角padding的左上侧。 一.选择符模式 模式/含义/内容描述 * 匹配任意元素。(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器) E F 匹配元素 E 的任意后代元素 F 。(后代选择器) E F 匹配元素 E 的任意子元素 F 。(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时匹配元素 E 。(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类) E:active E:hover E:focus 在确定的用户动作中匹配 E 。(动态伪类) E:lang(c) 如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)则匹配该元素。(:lang() 伪类) E F 如果一个元素 E 直接在元素 F 之前则匹配元素 F 。(临近选择器) E[foo] 匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器) E[foowarning] 匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器) E[foo~warning] 匹配其“foo”属性值为空格分隔的值列表并且其中一个严格等于“warning”的任意元素 E 。(属性选择器) E[lang|en] 匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器) DIV.warning 仅 HTML。用法同 DIV[class~warning]。(类选择器) E#myid 匹配 ID 等于“myid”的任意元素 E 。(ID 选择器) 我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。 div title这是一个div h1这是是h1的内容/h1 p这是一个段落p的内容strong这里是strong的内容/strong这是一个段落p的内容/p /div 从以上代码中我们可以找出这样的关系 h1 和 p 同为 div 的“儿子”两者分别同 div 形成“父/子”关系。 h1,p,strong 都是 div 的“子元素”。三者都包含在 div 之内 div 是 h1 和 p 的“父元素”。 strong 和 p 形成“父/子”关系strong 的“父元素”是 p 。 但 strong 和 div 并非“父/子”关系而是“祖孙”关系但 strong 依然是 div 的“子孙元素”。 div 是 h1 p strong 三者的“祖先”三者是 div 的“子孙元素”。 h1 和 p 两者是相邻的。 继承上面的实例来具体演示一下E F的关系假如我们需要将 strong 内的内容二字变为绿色我们可以有哪些方法呢 div strong {color:green;} p strong {color:green;} div strong {color:green;} 临近选择器和通用选择器通用选择器以星号“*”表示可以用于替代任何 tag 。 实例 h2 * { color:green } 二.选择符分类介绍 1.通配选择符 语法 * { sRules } 说明 通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。 假如通配选择符不是单一选择符中的唯一组成“*”可以省略。 示例 *[langfr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.类型选择符 语法 E { sRules } 说明 类型选择符。以文档语言对象(Element)类型作为选择符。 示例 td { font-size:14px; width:120px; } a { text-decoration:none; } 伪类可以看做是一种特殊的类选择符是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1. 语法 伪类的语法是在原有的语法里加上一个伪类pseudo-class selector:pseudo-class {property: value} 选择符:伪类 {属性: 值} 伪类和类不同是CSS已经定义好的不能象类选择符一样随意用别的名字根据上面的语法可以解释为对象选择符在某个特殊状态下伪类的样式。 类选择符及其他选择符也同样可以和伪类混用 selector.class:pseudo-class {property: value} 选择符.类:伪类 {属性: 值} 2. 锚的伪类 我们最常用的是4种a锚元素的伪类它表示动态链接在4种不同的状态link、visited、active、hover未访问的链接、已访问的链接、激活链接和鼠标停留在链接上。我们把它们分别定义不同的效果 a:link {color: #FF0000; text-decoration: none} a:visited {color: #00FF00; text-decoration: none} a:hover {color: #FF00FF; text-decoration: underline} a:active {color: #0000FF; text-decoration: underline} 上面这个例子中这个链接未访问时的颜色是红色并无下划线访问后是绿色并无下划线激活链接时为蓝色并有下划线鼠标在链接上时为紫色并有下划线 注意有时这个链接访问前鼠标指向链接时有效果而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面这样的话由于后面的优先级高当访问链接后就忽略了a:hover的效果。所以根据叠层顺序我们在定义这些链接样式时一定要按照a:link a:visited a:hover a:actived的顺序书写。 3. 伪类和类选择符 将伪类和类组合起来用就可以在同一个页面中做几组不同的链接效果了例如我们定义一组链接为红色访问后为蓝色另一组为绿色访问后为黄色 a.red:link {color: #FF0000} a.red:visited {color: #0000FF} a.blue:link {color: #00FF00} a.blue:visited {color: #FF00FF} 现在应用在不同的链接上 a classred href...这是第一组链接/a a classblue href...这是第二组链接/a 4. 其他伪类 此外CSS2还定义了首字和首行first-letter和first-line的伪类可以对元素的首字或首行设定不同的样式。 下面看这个例子我们在段落标记里定义文本首字尺寸为默认大小的3倍 style type”text/css” p:first-letter {font-size: 300%} /style …… p 这是一个段落这个段落的首字被放大了。 /p 我们再定义一个首行样式的例子 style type”text/css” div p:first-line {color: red} /style …… div p 这是段落的第一行 这是段落的第二行 这是段落的第三行 /p /div 上例中段落的第一行为红色第二、三行为默认颜色 注意首字和首行的伪类需要IE5.5以上的版本支持。 1. Block和inline元素对比 所有的HTML元素都属于block和inline之一。 block元素的特点是 总是在新行上开始 高度行高以及顶和底边距都可控制 宽度缺省是它的容器的100%除非设定一个宽度 div, p, h1, form, ul 和 li是块元素的例子。 相反地inline元素的特点是 和其他元素都在一行上 高行高及顶和底边距不可改变 宽度就是它的文字或图片的宽度不可改变。 span, a, label, input, img, strong 和em是inline元素的例子。 用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢 让一个inline元素从新行开始 让块元素和其他元素保持在一行上 控制inline元素的宽度对导航条特别有用 控制inline元素的高度 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 2. 再来一个box黑客方法 之所以有这么多box黑客方法是因为IE在6之前对box的理解跟别人都不一样它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致可以用CSS的方法 padding: 2em; border: 1em solid green; width: 20em; width: 14em; 第一个宽度所有浏览器都认得但IE5.x不认得第2行的宽度设置只因为那一行上有空白的注释符号多么蠢的语法分析所以IE5.x就用20减掉一些空白而其他浏览器会用14这个宽度因为它是第2行会覆盖掉第1行。 3. 页面的最小宽度 min-width是个非常方便的CSS命令它可以指定元素最小也不能小于某个宽度这样就能保证排版一直正确。但IE不认得这个而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用可以把一个 放到 标签下然后为div指定一个类 body div classcontainer“ 然后CSS这样设计 #container { min-width: 600px; width:expression(document.body.clientWidth 600? 600px: auto ); } 第一个min-width是正常的但第2行的width使用了Javascript这只有IE才认得这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 同样的办法也可以为IE实现最大宽度 #container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth 600? 600px : document.body.clientWidth 1200? ”1200px“ : ”auto; } 4. IE与宽度和高度的问题 IE不认得min-这个定义但实际上它把正常的width和height当作有min的情况来使。这样问题就大了如果只用宽度和高度正常的浏览器里这两个值就不会变如果只用min-width和min-height的话IE下面根本等于没有设置宽度和高度。 比如要设置背景图片这个宽度是比较重要的。要解决这个问题可以这样 .box { width: 80px; height: 35px; } body .box { width: auto; height: auto; min-width: 80px; min-height: 35px; } 所有的浏览器都可以使用第一个box设置但IE不认得第2段设置因为其中用到了子选择器命令。第2个设置更特殊些所以它会覆盖掉第1个设置。 在以前的web开发栏目中我介绍了不少处理HTML表格的方法尽管现在使用表格来布局网页的方法已经不再时髦了但是您依然可以使用表格来显示表列数据。 显示和样式化表格的方法有很多种在这篇文章中我将介绍使用CSS对表格边框进行样式化的方法。 链接 CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行表格模型包含以下的元素表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。 边框 根据不同的需求您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框 TABLE { 5px solid black; } 除此以外您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型 l none: 指定表格没有边框所以边框宽度为0。 l dotted: 由点线组成的表格边框。 l dashed: 由虚线组成的表格边框。 l solid: 由实线组成的表格边框。 l Double: 由双实线组成的表格边框。 l Groove: 槽线效果边框。 l ridge: 脊线效果边框和槽线效果相反。 l inset: 内凹效果边框。 l outset: 外凸效果边框和内凹效果相反。 每个边框类型都可以指定一种颜色边框是绘制在背景颜色上的列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。 html headtitleHTML Table/title/head style typetext/css TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border: 5px solid red; } TD, TH { background: white; border: inset 5pt; horizontal-align: right; } CAPTION { border: ridge 5pt blue; } /stylebody table summaryTechRepublic.com - Tables and CSS captionFirst Quarter Sales/caption theadtr thabbrsalesperson scopecolPerson/th thabbrsales scopecolSales/th /tr/thead tbodytr tdMr. Smith/td td600.00/td /trtr tdMr. Jones/td td0000.00/td /trtr tdMs. Williams/td td0000.00/td /tr/tbody tfoottr td colspan2Let\s sale, sale, sale!/td /tr/tfoot/table/body/html 列表A 这个例子展示了很多可供使用的表格边框的选项您可以使用您熟悉的度量单位像素、磅行长单位等。设定边框的尺寸您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。 border: 5px solid red; 在这一条语句中融合了宽度、样式和颜色属性的定义但是您也可以对这些元素进行单独定义如下所示 border-width: 5px; border-style: solid; border-color: red; 除了将表格作为一个整体进行定义您也可以将表格边框的四个部分分别进行定义包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。 CSS布局常用的方法 float:none|left|right 取值 none: 默认值。对象不飘浮 left: 文本流向对象的右边 right: 文本流向对象的左边 它是怎样工作的看个一行两列的例子 xhtml代码: Example Source Code div idwrap div idcolumn1这里是第一列/div div idcolumn2这里是第二列/div /div CSS代码: Example Source Code #wrap{width:100;height:auto;} #column1{float:left;width:40;} #column2{float:right;width:60;} .clear{clear:both;} position:static|absolute|fixed|relative 取值 static: 默认值。无特殊定位对象遵循HTML定位规则 absolute: 将对象从文档流中拖出使用leftrighttopbottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象则依据body对象。而其层叠通过z-index属性定义 fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative: 对象不可层叠但将依据leftrighttopbottom等属性在正常文档流中偏移位置 它来实现一行两列的例子 xhtml代码: Example Source Code div idwrap div idcolumn1这里是第一列/div div idcolumn2这里是第二列/div /div CSS代码: Example Source Code [www.52css.com] #wrap{position:relative;width:770px;} #column1{position:absolute;top:0;left:0;width:300px;} #column2{position:absolute;top:0;right:0;width:470px;} 他们的区别在哪 显然float是相对定位的会随着浏览器的大小和分辨率的变化而改变而position就不行了所以一般情况下还是float布局 在以前为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面这样才能够在打印的时候获得令人满意的效果。现在通过使用结构化的XHTML和CSS你可以实现同样的效果而只用花费少得多的精力。 从屏幕显示到打印效果 大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而有的时候用户需要将某些页面打印出来也许就是为了保留一个长期的记录或者将其用作方便的离线参考资料。 现在的麻烦是让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性都无法在打印版的Web页面上表现出相同的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候彩色的组合会失去原有的对比效果图形会看起来失真而且耗费太长的打印时间在Web页面上起着重要作用的导航按钮在打印页面上也毫无用处。 为了克服这些问题Web的创建者常常会为页面专门设计一个打印机友好的版本这样访问者就有打印的欲望。打印机友好的版本通常都包括有和主要Web页面相同的内容但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种形式以便生成能够让人接受的灰度图像。 CSS的解决方案 使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于通过更改CSS样式你可以很轻易就把内容重新格式化。因此创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。 你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里所以就没有必要单独创建一个打印机友好的页面只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文件时这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则而为了打印输出要使用哪些规则。 下面是链接到一对CSS文件的例子 link relstylesheet typetext/css mediascreen hrefmysite-screen.css / link relstylesheet typetext/css mediaprint hrefmysite-print.css / 如果需要支持老版本的浏览器那你就必须坚持使用CSS1的媒体描述符screen和print。它们是相互排斥的因此在为屏幕显示而生成页面的时候浏览器会忽略掉打印样式表反之亦然。所以每个样式表都需要包含相同的样式选择器但是有不同的规则声明以便为不同的输出设备分别生成页面样式。 转载于:https://www.cnblogs.com/alex-13/p/3284290.html
