Category: Web Design

  • 为Drupal6做布景(Theme)

    尽管强大的Drupal7.0 就要出现了, 但是考虑到组件的支持程度以及程序的健康程度, 目前还不得不使用Drupal6.x 作为产品平台. 做网站的其中一步, 就是把美工做的设计图(一般是.psd文件?) 用html/css以及图片实现出来. 如果你只是需要一个盒饭质量的点一下export就出来的html, 那就不必往下看了, 因为我记录的是手工打造一个符合w3c规范的Drual 布景. 首先, 安装Zen布景.  Zen是目前口碑最好的Drupal基础布景, 就像一套未上色的积木. 安装Zen以及建立自己的sub-Zen布景步骤如下: 下载Zen, 并解压缩到/drupal/sites/all(假设你的drupal安装路径是/drupal), 完成之后, Zen应该在/drupal/sites/all/zen 假设你要制作的布景叫mytheme 将/drupal/sites/all/zen/STARTERKIT 复制到 /drupal/sites/all/mytheme 将 mytheme/STARTERKIT.info.txt 改名为 mytheme.info 编辑mytheme.info/template.php/theme-settings.php,  找到原来是STARTERKIT的地方, 改为mytheme 从zen文件夹复制 zen.css, 并改名为mytheme.css 我一般是选择固定布局, 就是从zen文件夹复制layout-fixed.css并改名为layout.css, 如果你要流动布局, 复制并改名layout-liquid.css即可. 从zen文件夹复制print.css/html-elements.css 完成 这样, 进入Drupal admin之后你就可以找到刚刚制作的mytheme了. 注意, mytheme是Zen的子布景, 所以Zen文件夹不要动, 所有改动和定制都在mytheme完成. Zen为几乎每一个元素都定义了css class, 因此初次接触Zen的你可能在打开mytheme.css后就没了头绪. 其实很简单, 使用FireFox+FireBug(相信很多人已经知道了), 用鼠标一点, 就知道要改哪里了.…

  • Joomla! 1.5.x 首页链接问题

    Joomla! 1.5.x 内容管理系统(CMS)的一个”特点”就是你不需要像Wordpress那样强制指定网站的入口网址, 系统会自动识别网站被分配的域名. 此方法一般来说是没什么问题的, 但是在存在多个域名指向同一个网站的情况下, 首页上的首页链接偶尔会变成另一个域名, 而不是期望的缺省域名. 寻找修理办法中…

  • 用Nginx给Joomla!提速

    Joomla!是个不错的基于PHP的CMS,在LAMP环境下安装运行都非常方便,不过性能并非最优。一个提速的方法是用Nginx服务静态内容。 Nginx的配置片段: upstream apache1{ server 127.0.0.1:8001; } server{ listen 80; server_name mysite.com.cn www.mysite.com.cn; location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js)$ { root   /home/raymond/public_html/www.mysite.com.cn; expires 14d; gzip on; gzip_comp_level 3; gzip_types text/plain text/javascript text/html text/css image/png application/json application/x-javascript text/xml application/xml+rss; gzip_vary on; gzip_buffers 16 8k; } location / { proxy_pass    http://apache1; proxy_set_header   Host             $http_host; proxy_set_header   X-Real-IP        $remote_addr; proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;…

  • 改进Joomla!1.5中的Google Analytics应用

    参考链接:浅析豆瓣的 Google Analytics 应用 其中我感兴趣的是这一段: 使用 _ga._addOrganic 识别非主流搜索引擎 再来看豆瓣比默认 Google Analytics 代码增加的部分,那就是多了数个 _ga._addOrganic ,这是 Google Analytics 添加自定义搜索引擎的代码。尽管 Google Analytics 对于主流的搜索引擎都能自动识别,但毕竟能识别的是国外的主流搜索引擎,在国内,像搜狐的 Sogou,QQ 的 soso,网易的有道等搜索引擎,都不能被 Google Analytics 正确识别,而被当作推荐来源。这时候我们就可以利用_addOrganic 参数来识别这些非主流搜索引擎,如豆瓣的做法。 在Joomla! CMS当中我比较喜欢JoomlaGATor!这个Google Analytics模块,因为它有很多参数可以定制,其中就包括上面的_addOrganic,但遗憾的是只有一组。好在Joomla!的模块参数全部基于XML,因此改一下XML就可以有多组addOrganic参数了。 增加addOrganic参数需要两个步骤,一是改XML,二是改PHP。先看XML样本,这里定义了organic_key1和organic_value1这样一组参数: <param name=”organic_key1″ type=”text” default=”” label=”ANALYTICS_FIRST_SEARCH_VAR” description=”ANALYTICS_FIRST_SEARCH_VAR_DESC” /> <param name=”organic_value1″ type=”text” default=”” label=”ANALYTICS_SEC_SEARCH_VAR” description=”ANALYTICS_SEC_SEARCH_VAR_DESC” /> 然后在模块的PHP文件里修改对参数的调用: $organic_key1       = $params->get(‘organic_key1’); $organic_value1       = $params->get(‘organic_value1’); 并给出对应的输出:…

  • 别把Webserver累坏了

    天气又热起来了,想着服务器在机房里累的呼呼冒着热气,我多少有些于心不忍,于是想办法帮它减负吧。 首先是网页模板方面: 尽量减少修饰目的的<img/>,改用css来修饰模板,减小传输流量和request数目 合并CSS和JS,就是把所有用到的CSS写到一个文件,JS写到一个文件,减少request数目 HTML CSS JS文件的minify,就是去除文本中多余的空格、换行、注释等等 然后是HTTP Server方面: 静动分离,例如用nginx服务静态文件,而apache2服务动态内容(php,……) 利用浏览器端的cache(Apache2: mod_expires; Nginx: expires),降低重复访问时的流量。 对文本或非压缩格式文件开启gzip压缩 关闭access log或者将log写到另外的服务器 最后是webapp方面: 很多CMS都有内建的cache机制,尽量开启,减少DB操作 尽量减少安装组件或插件,特别是访问统计这类,DB开销很大 好了,简单总结一下,抛砖引玉吧。 附:Apache 2.0 开启gzip压缩和expire的例子 SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|pdf)$ no-gzip dont-vary ExpiresByType image/gif     “access plus 1 week” ExpiresByType image/jpeg     “access plus 1 week” ExpiresByType image/png     “access plus 1 week” ExpiresByType text/css   …

  • 带着小抄去上班

    你上考场那年带小抄了么?带了也别说,那是作弊。不过上班跟考试不同,你要尽可能的用上一切能方便工作的工具。下面是我最近喜欢的几张小抄: 以上小抄来自 http://www.addedbytes.com/cheat-sheets Thanks Dave!

  • 为IE6捉虫的一个小技巧

    按照设计稿做好了CSS,但是唯独在IE6里面有着意外的表现:左栏和中栏之间的宽度比设计中指定值要大。是什么原因呢?我一时没想明白。于是我根据经验把可能影响到宽度的那个div的背景色改为红色,这样一看就明显了: CSS里的设定是{padding:0; margin: 7px 0 0 10px;},就是说上面留白7px,右和下不留,左边留白10px。根据经验,我怀疑是那个10px导致,于是为IE6单独写了ie6sux.css,并在里面补上{padding:0; margin: 7px -10px 0 10px;},在右边给出-10px作为补偿。问题解决。 分析:IE6对留白(margin)的处理与众不同,留白的宽度似乎没有受到总宽度的限制,因此导致了右边超长出来。这应该算是个加减法级别的bug了。好在IE6用户会逐步转移到IE7,以后应该不必受此bug讨扰。

  • 自定义Joomla!的模块/组件参数

    Joomla!的灵活结构再次让我省心省事了。虽然Joomla!的菜单导航组件很不错,但是一些不算很通用的功能就需要自己定制,例如为每个栏目设定背景图或者标题图。 我是这样做的: /administrator/components/com_menus/models/metadata/component.xml <?xml version=”1.0″ encoding=”utf-8″?> <metadata> <state> <name>Component</name> <description>Component Parameters</description> <params> <param name=”page_title” type=”text” size=”30″ default=”” label=”Page Title” description=”PARAMPAGETITLE” /> <param name=”show_page_title” type=”radio” default=”1″ label=”Show Page Title” description=”SHOW/HIDE THE PAGES TITLE”> <option value=”0″>No</option> <option value=”1″>Yes</option> </param> <param name=”pageclass_sfx” type=”text” size=”20″ default=”” label=”Page Class Suffix” description=”PARAMPAGECLASSSFX” /> <param name=”@spacer” type=”spacer” default=”” label=”” description=”” /> <param…