出血位的講解

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

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

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

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

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

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

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


joomla 創建drop down menu

原本想用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 文件裡

css完成後,就可以加上下面的javascript放到 主題的index.php 的裡面

[code]
#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;
}
[/code]

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

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

joomla 主題筆記

在設計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 名就可以了,十分簡單

實用網頁開發網站

1、MySQL Format Date

MySQL Format Date 幫助你更好地使用 MySQL DATE_FORMAT 函數。只需選擇通用的日期格式,然後將其更改為滿足你需求的格式。MySQL DATE_FORMAT 代碼將會在頁面底部生成,你可以直接複製這段查詢語句。

點擊訪問:http://www.mysqlformatdate.com

2、Script Src

作為網站開發人員,天天一個一個站點打開查看 JavaScript 框架和庫的最新版本是不是很麻煩?ScriptSrc.net 彙集了所有框架和庫的最新版本,以獨立頁面的形式展現,只要一鍵點擊就可以複製種子文件的引用路徑。

點擊訪問:http://scriptsrc.net

3、Em Chart

我並不喜歡 CSS 文件中的 em 單位,但有時候又不得不面對它。在這種情況下,Em Chart 會將 em 單位轉換為像素值,讓你節省時間和麻煩。

點擊訪問:http://aloestudios.com/tools/emchart

4、Twitter API Explorer

如果你在自己的應用中使用了 Twitter API,你肯定會喜歡 Twitter API Explorer。這個網站很方便的讓你通過 Twitter API 進行搜索。更妙的是,該網站可以生成可直接使用的代碼片段。即時生成即時獲取!

點擊訪問:http://twitapi.com/explore

5、Browser Sandbox

跨瀏覽器兼容性肯定是 Web 開發人員日常工作中所要面對的大問題。Browser Sandbox 允許在網絡上運行任何 Windows 瀏覽器。唯一的不足是,你必須運行 Windows 系統:該應用程序不支持 Mac 和 Linux 操作系統。

點擊訪問:http://spoon.net/browsers

6、PHP Forms

Web 表單是網站重要的組成部分,但創造他們也很費時。那麼是否有一個可以免費快速生成表單的工具呢?PHP forms 允許你創建可擴展的、適用於大部分網站需求的表單。

點擊訪問:http://www.phpform.org

7、.htaccess editor

.htaccess 文件是網站(尤其是 WordPress 博客)必須具備的。不知道怎麼寫?沒問題,只要訪問這個網站,即可通過使用嚮導來創建 .htaccess文件。也許它並不是非常完美,但基本能滿足大部分需求。

點擊訪問:http://www.htaccesseditor.com/en.shtml

8、Smush it!

圖片可能勝過千言萬語,但同時也佔用了大量帶寬。圖像可以通過 Photoshop 等處理軟件優化,以滿足網站使用。但如果你沒有這些臃腫不堪的桌面軟件,你也不會束手無策,Smush.it 可以完全滿足你。由雅虎開發者網絡開發的在線圖片優化工具 Smush.it,能有效減少圖像大小而不降低其質量。對於 WordPress 用戶,更有方便強大的 WP-Smush.it 插件可以使用。

點擊訪問:http://developer.yahoo.com/yslow/smushit/
可在線上傳版本:http://www.mangguo.org/smush-it-hidden-online-image-optimizer/

9、CSS Compressor

特別是在有許多不同頁面佈局的網站,CSS 文件往往非常龐大,佔用大量的服務器帶寬。這個名為 CSS Compressor 的壓縮工具,可通過去除註釋、空白等不必要的字節佔用以減少 CSS 文件尺寸。更妙的是,壓縮等級可以隨心配置以滿足你的需求。

點擊訪問:http://www.csscompressor.com

10、Test everything

這個網站是必須具備的書籤:正如其名,一切都可以用它來測試,例如 XHTML 和 CSS 標記、PageRank、反向鏈接和其他更多的測試內容。

點擊訪問:http://tester.jonasjohn.de

英文原稿:10 sites developers should have in their bookmarks | CatsWhoCode
翻譯整理:值得網站開發人員收藏的 10 個網站 | 芒果

photoshop alice in wonderland

今天睡醒很無聊,想起早上在地鐵見到的alice in wonderland 那妝實在迷人,不知道化在自己身上會如何,於是我就用photoshop 幫自己化妝。

我很懶,找了以前的照片,而且還帶眼鏡,弄著弄著發現帶上眼鏡不好看,於是就用photoshop把眼鏡也ko了,但花的時間就更多了。最後的結果還不錯,我這種低等的技術能化上一個可以見人的ps 妝算是偷笑了。

晚上在繼續製作另外一幅,完工,我的鼻子還是比較大,嘴唇比較厚

le