Archive

Archive for the ‘WebSite’ Category

CSS Sprites 用法

June 23rd, 2010 rockfu No comments

第一次遇見CSS Sprites是在facebook，當時想模仿facebook的風格，但分析了它的css後，發現了一樣東西，就是facebook 的很多icon都在同一個檔案裡面。

例如：http://static.ak.fbcdn.net/rsrc.php/zCVPK/hash/95o21x7p.png

這種方法就叫css sprites， facebook是一個超級超級多人用的平台，因此它的流量相當厲害，就算是小小的圖片，但是有接近幾億人用，那麽小圖片就變了大圖片了，再者，單一圖片可以減少對服務器的訪問次數，上圖那裡面有6個icon，現在只訪問一次，相對訪問六次，工作輕鬆多了，其實記得之前facebook一張圖片是包含所有icon的，可能優化後改善了。

主要用法是在background那進行定位(我覺得很辛苦)，網上也見到很多人分享經驗，例如把圖片像facebook那樣，豎直排起來，然後只要加減高度就可以，還有就是把相同顏色的圖片放在一起，可以減少圖片的大小，當然不要用photoshop進行另存檔案，用其他工具會比較小，例如firework，這些技巧以後用時在慢慢體會

用法：background: transparent url(test-3.jpg) -96px -200px no-repeat;
這裡介紹一篇文章：http://www.alistapart.com/articles/sprites
文字比較多，自己選擇看

Popularity: 3%

Categories: CSS Tags:

wordpress 3 多站設定

June 20th, 2010 rockfu No comments

wordpress 3.0 一大新功能就是multi site，此功能來自wordpress mu， 但現在只需要在後台啟動後就可以實現多用戶wordpress，這裡將會簡單說明如何設定wordpress multi site。

測試環境：centos，directadmin 控制台

要啟用wordpress 多用戶功能，伺服器需要支援subdomain，假如沒有也不用擔憂，有插件可以幫助你解決這個問題，這裡只說明用subdomain 的方法。

1. 首先設定domain支援subdomain，要支援此功能，伺服器要支援wildcard，此功能是指 『任何次域名.domain.com』都能夠被伺服器接受，這一般都需要伺服器管理員才能加入此功能。設定方法很簡單，首先到你的空間控制台domain name管理那，加入一個* host:

加入一個*只想你的ip， 然後次域名就會全部指到你的網站去，然後根據程序來指向各個網站。

2. 設定伺服器支援wildcard，這裡需要伺服器管理員才能完成，我使用directadmin 設定。 在directadmin：Admin Level -> Custom Httpd configurations -> domain.com(你的域名)

在頂部的輸入框輸入：

ServerAlias *.|DOMAIN|

然後save，等幾分鐘就完成了。

注：你的域名比較交給伺服器進行管理才能見效，不要用域名供應商的伺服器

3. 安裝wordpress 3.0 ，這個我就不多說了

4.進入空間編輯wp-config.php，找一個地方加入

define(‘WP_ALLOW_MULTISITE’, true);

 進入後台，首先把blog的插件全部都停止，在tools 那會見到一個Network，

進入後，需要輸入你的站點資料，這些站點資料以後都可以更改，

5. 建立一個blogs.dir 資料夾在wp-content 裡面，必須可寫， 然後根據說明，更改wp-config.php ，記得先備份， 接著就更改.htaccesss文件

6.確認完成後，站點就基本建立，需要重新登入一次，在Dashboard上面就會見到Super Admin

然後可以測試一下，在sites那增加一個site，隨便輸入一個，管理員就是自己的email，然後確定，它會發一封email到你的郵箱，然後你按visit就可以瀏覽那個網站了，十分方便，不用安裝就有一個站點。

假如你不能用subdomain，可以試下這個插件：http://wordpress.org/extend/plugins/wordpress-mu-domain-mapping/


Popularity: 4%

Categories: Diary, wordpress Tags: , , , ,

wordpress 3.0 正式版

June 18th, 2010 rockfu No comments

期待已久的wordpress 3.0 終於出來了，

3.0 有甚麽功能？ 簡單形容就是wp+wu =3.0 ，看影片介紹吧

下載：http://wordpress.org/download/

Popularity: 2%

Categories: wordpress Tags:

出血位的講解

May 29th, 2010 rockfu No comments

有幸參與製作刊物，學習了不少書籍排版和印刷的知識，在此分享一下一個很困擾的問題：出血位(bleed)。

我用indesign 進行書籍設計排版，在開始時問人應該如何設定，很多人都答如果輸出PDF是不用設置出血位。現在我對這個答案有所保留。假如你是那PDF在電腦看，那麽出血位有沒有是沒問題，假如你拿去印刷，那麽出血位十分重要。

出血位一般都用紅色線來區分，這條線叫出血線，出血線以外的都會被裁走。對於一般的書籍『內頁』，出血位是應該設定3mm，其出血線為0.1mm(這個不用理)。出血位的制定是有利於在裁剪的時候不會出現白邊的情況。

何為出現白邊？一般的文字圖書比較少見，主要是雜誌上多見，例如一張照片要填滿一頁，如下圖

兩種情況，A把圖片拉到出血位，B卻沒有，切的結果會有下結果，下圖為切了右邊

由於刀片有厚度，容易出現誤差，因此切的時候會留下邊距，假如沒有把圖片拉到出血線，那麽切後，你的書邊就會有白邊的情況，拉大到出血線，書邊就沒白線。

另外，封面的出血和內頁不同，我問過印刷廠說是5mm，而且封面由於要包住整本書，因此中間還要加多6mm，記得要封面和背面合在一起，就像一個書皮一樣。


Popularity: 4%

Categories: Design Tags: , , ,

joomla 創建drop down menu

May 22nd, 2010 rockfu No comments

原本想用jQuery tools 來做menu，懶人法則，但是發現Joomla 已經用了mootools，因此用jQuery會有衝突，於是再尋找懶人法則，找到了個不錯的方法

首先上http://de.siteof.de/extended-menu.html 下載module，Extensions =>install & uninstall=> 選擇下載了的extended-menu，上載安裝

安裝成功後，入Extensions =>Module Manager，找到Extended Menu，進入設定，按下面設定

Menu Class Suffix： mainnav  （這個名字是因為在javascript 時會用到）

Menu Style: Tree List

Expand Menu: Yes
Menu name：topmenu (其實就是選擇你要顯示的menu)
記得要Enabled這個module
儲存好後，接著把下面的css 複製到你的主題(template)的css 文件裡


#twocols{ /*the columns that gets dropped down over yours might be different*/
  z-index:20;
}
#leftcol{  /*the columns that gets dropped down over yours might be different*/
  z-index:10;
}
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/
  position:absolute;
  top:187px;
  left:20px;
  z-index:100;
  font:0.9em Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul {
  float:left;
  list-style:none;
  line-height:1em;
  background:transparent;
  font-weight:700;
  margin:0;
  padding:0;
}
#mainlevelmainnav a {
  display:block;
  color:#f90;
  text-decoration:none;
  margin-right:15px;
  padding:0.3em;
}
#mainlevelmainnav li {
  float:left;
  padding:0;
}
#mainlevelmainnav li ul  {
  position:absolute;
  left:-999em;
  height:auto;
  width:11em;
  font-weight:400;
  background:#36f;
  border:#00C 1px solid;
  margin:0;
}
#mainlevelmainnav li li {
  width:11em;
}
#mainlevelmainnav li ul a {
  width:11em;
  color:#fff;
  font-size:0.9em;
  line-height:1em;
  font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
  left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
  ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
  left:auto;
  z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
  background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

css完成後，就可以加上下面的javascript放到 主題的index.php 的<head></head>裡面

&lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i&lt;sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--&gt;&lt;!]]&gt;&lt;/script&gt;

上面的getElementById裡面的mainlevelmainnav，就是剛才定的，前面mainlevel是系統的東西。

保存完畢後，就可以到主頁看看，css可以自己更改，這個很多網站都有提供配色，可以參考下。

Popularity: 3%

Categories: Joomla Tags: , ,

joomla 主題筆記

May 21st, 2010 rockfu No comments

在設計joomla 主題時，雖然已經開始熟悉，但是有些細微的東西總是容易忘記，不如記下來吧，方便自己做 內容code



<jdoc:include type="component" />

檢查是否首頁



<?php if(JRequest::getVar('view') == "frontpage" ) : ?>

增加多一個position 需要在templateDetails.xml中的<position> 中增加
joomla 模塊輸出的位置都是用

<jdoc:include type="modules" name="user2" style="xhtml" />

只要把名字改成你的position 名就可以了，十分簡單

Popularity: 2%

Categories: Joomla Tags: