星期三, 十二月 27, 2006

Dreamweaver 技巧


摘錄自 http://www.ithome.com.tw/plog/index.php?blogId=318
感謝!

Dreamweaver 技巧

1. 用Dreamweaver 4.0輕鬆設計會自動彈性調整的網頁
首 先需要保證的是你的頁面內容採用了表格的格式,然後開啟你要編輯的頁面,按「Ctrl+F6」或是選單「View→TableView→Layout? View」轉換到佈局視圖。這時可以看到單元格的列寬,在列寬數字的旁邊還有一個小小的下拉式箭頭,點擊你要設定彈性顯示的列上方的小箭頭,接著選取「將 列設為彈性顯示」(Make Column Autostretch)。該列方框上方就會出現一條波浪形的線,而不是剛才表示列寬的數字。完成後你的頁面就變成了一個具有彈性的頁面了。此外,需要注 意頁面中不要有尺寸過大的圖片。

2. 用Dreamweaver 4.0製作有閃動效果的Flash按鈕
選 取選單Insert→Interactive?Images→Flash?Button就可看到有哪些內嵌按鈕。在跳出的對話框裡,你可以在 「Style」清單裡選取自己想要的按鈕型態,在預覽(Sample)視窗裡可以看到這種型態的效果如何。選取好之後,在「Button?Text」視窗 輸入按鈕上面的文字,在「Font」視窗選取字型,在「Size」視窗輸入文字的大小,在「Link」視窗輸入連結的目的,在「Target」視窗選取連 結開啟的模式,在「BgColor」選取按鈕背景彩色,在「Save?As」視窗輸入儲存的檔案名。完成這些後,按下「OK」按鈕,你就完成了一個 Flash按鈕啦。這個按鈕還會自動插入你的網頁中,然後在Dreamweaver編輯視窗選中你剛才製作的按鈕,屬性視窗就會顯示出這個按鈕的屬性,點 選上面的「Play」按鈕,你就可直接在編輯視窗預覽這個按鈕的閃動效果。需要注意的是Dreamweaver?4.0的這個功能不支援中文字型。
**********************************************************
**********************************************************
3. 在Dreamweaver 4.0中自訂鍵盤快捷鍵
選 取選單「Edit→Keyboard?Shortcuts」,在對話框中會列出目前已經啟用的以及可以變更的快捷鍵一覽表,你可以在這裡把快捷鍵改成自己 習慣用的。若果要變更快捷鍵,首先要選取你要變更的指令,接著選取目前的快捷鍵,這個快捷鍵就會出現在「Shortcuts」清單中,然後在「Press Key」視窗輸入你想要使用的快捷鍵,然後點擊「Change」按鈕變更即可完畢。你還可以利用「+」、「-」按鈕增加或是刪除目前的快捷鍵。
**********************************************************
**********************************************************
4. 讓Dreamweaver?4.0和Fireworks整合
若 果你的電腦裡同時安裝了Dreamweaver/Fireworks,那麼你就可以使用Dreamweaver?4.0提供的整合Fireworks的功 能。利用這個功能你可以把你的GIF圖片修改得更加動人,輕鬆地實現動畫效果。在Dreamweaver編輯視窗選取好你要修改的GIF圖片,然後在圖片 屬性視窗點選「編輯(Edit)」按鈕,這時系統會自動啟動Fireworks軟體編輯這個圖片。仔細看,你會發現Fireworks的圖片編輯視窗已出 現Editing?From?Dreamweaver這樣的文字和圖樣,也就是說這個圖片是為Dreamweaver頁面進行圖片編輯的。現在我們在 Fireworks裡選取要編輯的圖片,選取選單「Modify→Animate→Animate?Selection」。在跳出的視窗裡設定動畫的屬 性:選定動畫的畫面數、動畫移動的方向、透明度等等。然後把修改好的檔案匯出即可。這樣,在Dreamweaver編輯視窗會自動更新剛才修改好的檔案, 使你的頁面圖片動起來。
**********************************************************
**********************************************************
5. 巧用網站報告器
在Dreamweaver? 4.0里提供了一個網站報告器,利用這個網站報告器可以幫助你在你的網站眾多檔案中快速找到和修復錯誤。點選選單「Site→Reports」即可啟動報 告器,選取你要檢查的項目,然後點選「Run」按鈕即可查出你網站上的一般問題。你也可以自己編寫報告器來查出網站上的一些特殊問題 (一般問題通常是一些文字丟失或文件未命名) 。
**********************************************************
**********************************************************
6. 快速還原多次動作
在 製作頁面時,我們可能需要不停地修改頁面,有時還要還原過去的動作,我們可以使用「Edit」選單裡的「Undo」指令,可是這個指令每次只能還原一次, 若果我們需要還原多次動作,那就要不停地「Undo」,實在太煩。在Dreamweaver?4.0里提供了一個History視窗,可以讓我們輕鬆地還 原多次動作。在「Windows」選單裡選取「History」即可開啟這個歷史視窗。在這個視窗把你每一次的動作都保留下來了,利用視窗左邊那個滑動指 標,就可以不停地還原,還可以還原每一次動作,內含已經存盤的。而且還可以把這個歷史紀錄儲存下來共享。
**********************************************************
**********************************************************
7. 隱藏浮動面板
開啟Dreamweaver,給人的第一印象是一堆浮動面板,往往弄得你眼花繚亂,雖然它可以拖開,但畢竟佔據著本來就很有限的螢幕,若把它關閉了,等一下用它時又要去開啟。其實你只要按一下F4鍵,所有浮動面板都不見,再按F4他們又都重現於螢幕上了。
**********************************************************
**********************************************************
8. 快速預覽網頁
初 學Dreamweaver,往往找不到預覽選單,不得不另外啟動IE瀏覽器來預覽網頁的實際效果。其實Dreamweaver的預覽選單放到File選單 下了,要預覽正在編輯的網頁,按F12鍵就可以了,方便得很呢!而且還可設定在不同的瀏覽器中預覽,在File選單下的Preview in Browser中選取Edit Browser List就可選取不同的瀏覽器進行預覽。以測試你的網頁對不同瀏覽器的適應性。
**********************************************************
**********************************************************
9. 在HTML檢示窗中顯示行號和自動換行
雖 然Dreamweaver的Behaviors是一個javascript小程式的巨集,許多實現特殊網頁效果的 javascript程式都不用動手寫程式,但有時需要編寫一點小程式時,顯示程式行號顯得尤為必要,特別是在程 式發生錯誤時,往往都有是提示在「XX行有錯誤」,若一行一行地去數行號不僅太累而且還容易數錯,在FrontPage中老是為數錯行號而煩惱。在 Dreamweaver中可方便了,只要在HTML源代碼檢視器視窗中,選中「Line Numbers」(行號)復選框,則會在源代碼檢視器視窗中對每條HTML語句自動顯示行號,一目瞭然。同樣有時一行代碼較長,只要在HTML源代碼檢視 器視窗中,選中「Warp」(自動換行)復選框,則會啟用視窗的自動換行特性,過長的代碼會自動從視窗的邊緣繞回。
**********************************************************
**********************************************************
10. 如何獲得彩色的十六進位代碼
在設計網頁時,有時要用到16進位的彩色代碼,以前經常為這事頭痛,在Dreamweaver中只要按屬性面板上「bg」邊上小方框右下角的小三角形,在跳出的彩色板上,滑鼠指到哪兒,馬上就能顯示出相應彩色的16進位代碼,真方便。
**********************************************************
**********************************************************
11. 製作背景音樂
在Dreamweaver中插入背景音樂是非常容易實現的,這裡介紹兩種方法,由大家選取。
(1)在頁面不顯眼的地方插入一空層 ,並在層內放入一個ActivX物件 ,按兩下該對象,在開啟的對話框中選取一個MIDI音樂檔案,然後在層物件屬性面板中設定其可視性為「Hidden」,儲存變動後按F12預覽網頁,聽聽是否有音樂聲。
(2)另一種方法是利用Dreamweaver的「Behaviors」行為編輯器 ,點選「+」按鈕,選取其中「Play Sound」選項,在跳出的對話框中選取一個音樂檔案即可。自己動手試一試吧!
**********************************************************
**********************************************************
12. 讓背景圖不捲動
與FrontPage 不同,Dreamweaver中插入的背景圖是會隨文字捲動的。有的時候我們需要製作固定的背景圖,怎麼辦呢?先定義一張背景圖,按「F10」開啟 HTML源檔案,找到定義背景圖片的語句,例如background=〞images/background.JPG〞,在它的後面空一格加上一句 bgproperties=〞fixed〞。預覽一下,是不是有點小小的成就感。
**********************************************************
**********************************************************
13. 定義大小不變的文字
為 什麼別人網頁上的文字那麼漂亮,不管你怎麼按瀏覽器字型按鈕上的大小,他們的字型尺寸都不會發生變化。其實他們使用了網頁中的「CSS」型態表技術,在 Dreamweaver中要實現這一功能是非常簡單的。首先按「F7」或是選取「視窗」選單中的「型態表」選項開啟型態表編輯器,在視窗中點選滑鼠右鍵選 取「新增」,在跳出的對話框中輸入需要定義的型態表名稱,按「確定」,然後在清單中選取第一項「類型」,並給具體的文字屬性定義參數(一般來說文字的大小 在800×600的螢幕中選取10.5較為適宜),按「確定」後,定義好的型態表就出現了。選取網頁編輯窗中的文字,點選新的型態表名,可以看到選中的文 字發生的變化。預覽一下,試試定義的文字字型尺寸還會不會隨瀏覽器的選取字型大小而改變。
**********************************************************
**********************************************************
14. 插入Flash動畫
Macromedia 公司的Flash動畫因其具有交互性、傳輸速度快等特點,已逐漸成為網頁製作的一項新武器,若果你的網頁上能插入一段Flash動畫,那麼一定會使你的作 品增色不少。在Dreamweaver中插入Flash製作的SWF格式動畫十分容易,點選物件工具列上的Flash徽標或點選的「媒體」下的 「Flash」,就可以開啟選取SWF動畫檔案的對話框了,選好檔案後可在其屬性面板中設定播放的參數,即大功告成。
**********************************************************
**********************************************************
15. 讓表格給網頁留白
在Dreamweaver 的新網頁上輸入文字時,預設格式是頂天立地的,十分不美觀。要避免這一缺憾其實很簡單,只要大家用好表格工具就行了。具體做法是:在新頁面上插入一張齊中 對齊的表格,為了能夠使表格方便控制,最好設定奇數列,並且數值不要太大。這樣在單元格內輸入的文字就被限制在一個可以隨意調整寬度的區域內,就不愁文字 不聽使喚了。
**********************************************************
**********************************************************
16. 改變狀態列提示文字
一 般情況下,當瀏覽器裝入一個頁面時,在其狀態列上顯示的是該頁面的位址名稱,十分呆板。你有沒有想過給瀏覽器的狀態列增加一點個性呢?若果有的話,那麼請 按照以下的步驟,定制自己喜歡的文字吧!首先開啟「Behaviors」行為編輯窗,點選「+」按鈕,選取「Set Text Set」下的「Text Of Status Bar」選項,然後在方框中輸入自己的文字,例如「歡迎來到我的主頁」等,點選「確定」即可。
**********************************************************
**********************************************************
17. 整合的文字代碼編輯器
可 視化網頁編輯軟體的最大不便之處就是很難對源代碼進行編輯,更別說javascript了;不過 Dreamweaver?將使你處理代碼變得異常輕鬆。這個內建的文字代碼編輯器主要的新功能是:自動縮排(可以一次選取多行進行縮排),?還可以進行符 號的檢驗,若果在編寫代碼忘了一個「」,它將給出提示。在工具表中的下拉選單會列出目前網頁中所有自訂java>script< /I>函數,可讓你在網頁原代碼中自由跳轉,「原始碼導航工具」可以讓專業人士方便地處理javascript< /I>函數,在文字代碼編輯器中輸入javascript代碼,系統將用不同的彩色來顯示。
**********************************************************
**********************************************************
18. 在Dreamweaver中輸入多個空格
我們平時輸入的空格是半角字元,在Dreamweaver中只能輸入一個,要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是:開啟中文輸入法,按Shift+Space切換到全角狀態。這時你輸入的空格就是全角空格了。
**********************************************************
**********************************************************
19. 解決Dreamweaver的BUG之一
在Dreamweaver 3.0中行為面板(Behavior inspector)中,「Events for」下拉選單項無法開啟。這樣一來,很多特技效果形同虛設,根本沒法製作。其實這應該算Dreamweaver 3.0和中文Windows98不相容的一個地方吧,在英文Windows98中就沒有這個問題。而實際上這個選單還是可以開啟的,只不過是不能正確顯示 罷了。在選中下拉選單後,我們可以用上下鍵來選取我們想要用的瀏覽器。

20. 用Dreamweaver 3.0的模版製作網頁,設定行為(Behavior)
在 使用範本(Template)做出來的網頁中不能新增行為。這是因為新增行為需要在HTML檔案的Head部分之中插入java script,而使用了Template後,HTML檔案的Head部分會被「封鎖」住。若果要在使用範本生成的網頁中套用行為,你 就需要事先在範本中定義好行為,然後把它定義為範本的可編輯區域。隨後,你就可以在網頁中變更這個行為了。但這也只限於變更行為的觸發事件 (events)和動作(actions)的具體內容,而不能變更動作的類型。
**********************************************************
**********************************************************
21. 給文字施加行為(Behavior),製作動態文字特效
在Dreamweaver 中普通的文字是以字元為單位的,不能作為對象,即一些非常有用的javascript事件不能賦予文字。因為文字 不像圖片和其他控件有具體的「標示」,所以文字與很多特效失之交臂。為了給文字加入特效,只有把文字做成超連結來處理。這樣文字就成為了對象,可以施加行 為了。但是這樣又帶來了一些不需要的超連結屬性,比如下劃線,以及hover、visited等彩色變化。 要想單純為文字加入特效,可以先把所想設定的文字做成超連結,然後再在它的上面加入行為,最後我們再把超連結轉變為普通文字。具體的步驟如下:
選 中你想編輯的文字,在連結目的框裡隨便填入幾個字元。選中這個連結,點選視窗(Windows)→行為(Behaviors),跳出行為面板。按下「+」 加入你想要的行為,如play sound等。開啟Dreamweaver的超文字編輯器,找到這個連結,把改為,把改 為
。最後把「href=...」刪掉。儲存此頁。按F12預覽一下。效果還不錯吧!
**********************************************************
**********************************************************
22. 精確定位網頁中各個元素的位置
精 確定位網頁中各個元素的位置有兩種方法:使用表格或層。使用表格是目前比較通用的做法,具體方法是:先在網頁中建立一個表格,注意表格的邊框寬度應為0。 然後再把各個元素按照你的要求放在各個表格單元之中。仔細調整表格單元的大小以及表格邊框的位置,這時在表格單元中的元素也會隨之移動位置。這樣你就可以 比較精確地定位網頁中各個元素的位置了。使用表格的優點是通用,幾乎各個版本的瀏覽器可以致支援表格。它的缺點是使用起來比較麻煩,需要仔細進行調整,而 且定位不十分精確。層在網頁中可以隨意放置,因此我們可以使用層來進行精確定位。使用方法是,在網頁中插入一個層,然後把你想要定位的元素放在層裡,接著 我們就可以把層放到所想要任何位置了。此外,你還可以借助標尺和網格進行精確的定位。因為層只在最新的瀏覽器中被支援,所以為了相容舊的瀏覽器,我們可以 把層轉變為表格。方法是選取「修改(Modify)→版面佈局模式(Layout Mode) →把層轉化成表格(convert layers to table)」即可。注意這時的層不能有重疊,我們可以在插入層之前選取「檢視(view) →防止層交錯(prevent layer overlaps)」來避免層的重疊。一般來說轉換後的頁面可能會有一些變化,還需要我們手動進行調整。最後有一點要注意,在進行表格和層的相互轉換時, 最好不要在一個頁面中同時使用層與表格,那樣可能會把你的頁面弄得一團糟
23. 改變瀏覽者的滑鼠形狀
這是通過編輯型態表來實現的。具體 方法是:選取「文字(text)→定制型態(CSS Style)→編輯型態表(Edit Style Sheet)」,跳出編輯型態表視窗,在其中選取「新增(new)」。接著選取「建立一個定制的型態(Make custom style)」,給這個型態表起名,點選確定。編輯該型態表,選取延伸項(extension),在右邊的游標項(Cursor)中選取要出現的指標效果 即可。
**********************************************************
**********************************************************
24. 去掉超連結文字之下的下劃線
這 一效果是通過編輯型態表來實現的。具體方法是:「點擊文字(text)→定制型態(CSS Style)→編輯型態表(Edit Style Sheet)」,出現編輯型態表視窗,選取「新增(new)」。接著選取重定義HTML標示(Redefine HTML Tag),並在下面的標示(Tag)選單中選取a。編輯該型態表,選取類型(type),在右邊的裝飾(decoration)中選中無(none )即可。
**********************************************************
**********************************************************
25. 製作一個跟著頁面走的圖像
這一效果是通過javascript實現的。一般來說完成這樣一個效果需要一定的寫程式能力,但現在我們可以通過Dreamweaver的外掛輕易地實現。你可以到 http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下 載這個外掛。外掛的安裝方法:解壓縮後複制到Dreamweaver下的資料夾ConfigurationObjects內的一個新增資料夾裡面即可。重 新啟動Dreamweaver之後,我們就可以在物件面板之中找到新安裝的外掛了。點擊外掛的圖示,在跳出的對話框中填入圖像的存放位址以及圖像的顯示位 置就可以了。
**********************************************************
**********************************************************
26. 製作滑鼠移上去後有變化的動態選單
所 謂動態選單其實是兩幅圖,一幅是滑鼠不放在上面所顯示的,另一副是滑鼠移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現這個效果。首先插入一副圖片,用滑鼠點選它,在屬性面版的連線欄內輸入要連線的網頁。然後開啟行為面板添,點擊「+」號,選取swap image。接著出現一個視窗,要你選取滑鼠移上去後所顯示的圖片,在此選取第二副圖片,點擊「確定」。好了,效果完成了,多簡單。
**********************************************************
**********************************************************
27. 用Dreamweaver製作出一個類似於下拉選單的效果
製 作一個類似於下拉選單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁面中插入一個單行多列的表格,作為你的選單條。表格的列數由選單選項的多少決 定。插入一個層,在層中輸入第一個下拉選單的內容,並把這個層移動到表格第一列的下面。同理,對其他選單項也作如上的動作,插入相應的層。把所有層的顯示 屬性(vis)改為隱藏(Hidden)。
選取表格的第一個單元,點選視窗(Windows)→行為(Behaviors),跳出行為面板。 按下「+」加入行為Show-Hide layers,並將第一個層(Layer1)屬性改為顯示(Show),其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為,將它的觸發事 件(events)改為onMouseover。這樣,當滑鼠移動到第一個表格單元之上時,第一個下拉選單就會顯 示出來。接著再加入一個行為Show-Hide layers,並將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為,將它的觸發事件(events)改為>onMouse< /I>out。這樣當滑鼠從第一個表格單元之上移開時,第一個下拉選單就會隱藏起來。對其他的選單項重複上述動作。但要注意設定「選單二」時,第二 層顯示,其他層隱藏;設定「選單三」時,第三層顯示,其他層隱藏;依此類推下去。好了,做好了,按F12看看吧。
**********************************************************
**********************************************************
28. 輕鬆製作下載檔案
用Dreamweaver其實很簡單,把要讓瀏覽者下載的檔案名寫上,然後拖曳滑鼠選取這段文字,在文字的屬性面板上「Link」的屬性輸入框中寫上檔案名就行了。注意:若被下載的檔案與該網頁不在同一目錄下,則檔案名必須包括相對路徑,否則在下載時將提示找不到檔案。
**********************************************************
**********************************************************
29. 利用Dreamweaver的書籤製作跳轉連結
利 用Dreamweaver的書籤我們可以實現這個功能。具體方法是:將游標移到你想跳轉到的地方,選取選單中的「插入(Insert)→書籤(Name Anchor)」,輸入書籤的名稱。接下來,在你想呼叫連結的連結目的框中填入「#書籤名稱」,這樣一個頁面內的跳轉連結就做好了。在這裡,若果我們在書 籤名稱前填入網頁的名稱,就會跳轉到其他頁面中的書籤處。 比如說我們在Link處填入「index.htm#top」,當瀏覽者點擊這個連結時就會跳轉到index頁面中的top書籤處。
**********************************************************
**********************************************************
30. 去掉圖片和表格接觸地方的空隙
要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(border)設為0是不行的,還需要在表格的屬性面板上把單元格的兩個屬性設為0(即cellspacing="0"和cellpadding="0")。
**********************************************************
**********************************************************
31. 用TracingImage幫助定位網頁中各元素的位置
TracingImage 是Dreamweaver一個非常有效的功能,它容許使用者在網頁中將原來的圖案設計作為輔助的背景。這麼一來,使用者就可以非常方便地定位文字、圖像、 表格、層等網頁元素在該頁面中的位置了。TracingImage的具體使用是這樣的:首先使用各種繪圖軟體作出一個想像中的網頁排版格局圖,然後將此圖 儲存為網路圖像格式(內含gif、jpg、jpeg和png)。用Dreamweaver開啟你所編輯的網頁,在頁面的空白區點選右鍵,選取「Page Properties...」,然後在跳出的對話框中的Tracing Image項中輸入剛才建立的網頁排版格局圖所在位置。再在Image Transparen中設定TracingImage的透明度,OK。這樣你就可以在目前網頁中方便地定位各個網頁元素的位置了。使用了 TracingImage的網頁在用Dreamweaver編輯時不會再顯示背景圖案,但當使用瀏覽器瀏覽時正好相反,TracingImage不見了, 所見的就是經由編輯的網頁(當然能夠顯示背景圖案)。
**********************************************************
**********************************************************
32. 關於「Convert Table widths to Pixels」和「Convert Table widths to Percent」
「Convert Table widths to Pixels」和「Convert Table widths to Percent」是Dreamweaver兩個設定表格寬度的重要功能。當你開啟一個帶有表格的網頁時,在狀態列中點中〈table〉標籤,在隨後顯示出 的表格屬性工具面板中就能看到這兩個按鈕了。顧名思義「Convert Table widths to Pixels」就是將表格中所有單元的寬度以像素表示,而「Convert Table widths to Percent」是將表格中所有單元的寬度以百分比表示。仔細想想他們的作用,若果將一個表格的寬度全以像素表示,但瀏覽視窗被放大時,表格就不會隨之放 大單元格的寬度。而使用了「Convert Table widths to Percent」後能夠使你在640×480解析度下建立的100%寬的表格在更高的解析度下依舊保持100%的寬度。所以活用這兩個功能可以使網頁排版 事半功倍。
**********************************************************
**********************************************************
33. 呼叫Style而不致使網頁原代碼混亂不堪
呼 叫Style的方法很多,你可以點選右鍵選取Custon Style來呼叫Style規範,也可以在狀態列中的元素清單上點選右鍵來呼叫Style。雖然不同的方法達到的效果看似一樣,但實際上產生的HTML代 碼則完全不同。比如用Custon Style來呼叫Style規範,在網頁代碼中就生成一個〈span〉標籤,這樣標籤一多就會使檔案十分臃腫而且影響瀏覽器的解析速度,所以我建議盡量使 用狀態列中的元素清單來呼叫Style。還有一個小技巧,若果你要使用一個Style定義某表格單元中的所有文字,只要在〈td〉標籤中呼叫Style就 行了,而不需要在一個個定義〈p〉標籤。注意這個方法不適用於〈table〉標籤,因為在〈table〉標籤中用Style定義的文字格式會被 Netscape忽略。
**********************************************************
**********************************************************
34. 使用定制視窗功能測試網頁在不同解析度下的效果
誰都不希望看見自己辛辛苦苦做的網頁在不同的解析度下面目全非,所以測試網頁在不同解析度下的瀏覽效果是網頁製作中很重要的一步。我們可以在Dreamweaver的動作界面中的狀態列中間,選取需要的解析度來調節視窗大小,從而實現在不同解析度下測試網頁效果。
**********************************************************
**********************************************************
35. 上傳網站時無需使用第三方FTP軟體
Dreamweaver 中融入了FTP功能,而且為網站上傳作了最佳化。我們可以做一個簡單的比較,當你使用一般的FTP軟體上傳網站時,是不是都按近端機上的網站目錄在伺服器 中新增目錄,然後再一個個檔案上傳。這種做法實在沒錯,但由於近端機中的網站目錄中並不是每個檔案都被網頁呼叫(比如在建網頁時留下的備份檔案),所以篩 選檔案的繁重工作量只有使用者自己知道。但使用Dreamweaver上傳網頁就可以方便得多,由於FTP功能在幕後為使用者進行了許多必要的工作,所以 使用者只要將網站地圖內關聯的HTML檔案上傳,Dreamweaver就會自動將與此HTML檔案關聯的所有其他近端檔案一併上傳(如圖像、ZIP檔 案、FLASH檔案甚至是各種REAL檔案)。使用Dreamweaver內帶的FTP功能的具體做法是:編輯已經定義過的SITE,在「Site Definition for...」面板中選取「Web Server Info」。若果網頁是通過FTP模式上傳的話,將「Server Access」設為FTP,在FTP Host中添入FTP伺服器的位址,在Host Directory中添入遠端登入目錄,在Login中添入使用者名,再填好Password。經由了以上的設定,就可以在Site面板中按 Connect按鈕,當Dreamweaver成功連入伺服器後,Connect按鈕會自動變為Disconnect,並且在一旁亮起一個小綠燈。接著要 做的事就是在要上傳的HTML檔案上點選右鍵,選取「Put」即可。當此HTML檔案上傳成功後,狀態條中將顯示Put Depanding File,說明Dreamweaver正在上傳這個HTML檔案所呼叫的其他近端檔案。不僅如此,Dreamweaver還可以直接下載伺服器上的檔案進 行修改,方法麼,只要使試試Put旁的Get按鈕就明白了。

36. 實現用滑鼠指向連結時出現下劃線的效果
有些網頁的連結,原先沒有下劃線,你把滑鼠指向連結處,才會出現下劃線,滑鼠移掉下劃線就又沒有了。這種效果其實可以用層疊型態表(CSS)來實現,在Dreamweaver中編輯層疊型態表不用編寫代碼,具體動作方法如下:
(1)在快速啟動欄中點擊層疊型態表按鈕(就是把滑鼠放上去顯示「show css styles」的那個按鈕),在跳出的CSS Styles面板上按兩下(none);
(2)此時,可看到跳出的Edit Style Sheet 面板,在該面板上按New按鈕;
(3) 再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示)再在Tag中選取「a」(超級連結標示)標示後按OK按鈕;(4)這時可看到跳出的Style dehinition for a 的對話框,在此對話框中可以設定超級連結的許多屬性,你可以按你的意願設定,但我們這裡主要是要去掉那討厭的下劃線,所以我們在decoration 屬性中選取「none」,這樣就把下劃線去掉了;然後我們再選取彩色為:#339966。按OK按鈕返回到Edit Style Sheet 面板;
(5)在Edit Style Sheet 面板上再按New按鈕;
(6)在跳出的New Style 面板上點取Use CSS Selector ,再在該面板上的selector選取框中選取「a:hover」(定義當滑鼠在超級連結上時連結的屬性),按OK按鈕;
(7) 在跳出的Style dehinition for a:hover 的對話框中,我們在decoration 屬性中選取「underline」,這樣就把下劃線又加上了;然後我們再選取彩色為:#FF3300。按OK按鈕返回到Edit Style Sheet 面板;
(8)在Edit Style Sheet 面板上再按Don按鈕,至此所有設定結束,你在Dreamweaver的源代碼檢視窗中將看到在與之間如下所示的代碼:

37. 實現定義的超級連結文字彩色
文字超級連結的彩色(內含未被訪問的連結彩色、滑鼠的連結上的彩色、已被訪問過的連結彩色等等)可以用層疊型態表(CSS)定義,下面就介紹如何能隨心所欲地設定文字連結的彩色。
(1)超級連結的預設彩色是:未被訪問的超級連結是藍色、被訪問過的超級連結是紫色;
(2)要想使CSS定義的彩色起作用,在超級連結的文字的彩色屬性中什麼都不要填;
(3)若你已定義了文字的彩色,發現CSS中定義的超級連結彩色不起作用,你可以取消文字的彩色定義,或取消超級連結再重新定義一次,CSS定義的彩色就起作用了;
(4) 超級連結上各種狀態下文字彩色的關係:一旦定義了被訪問過的連結的彩色(A: visited),則當連結被訪問過後,該連結的彩色不再改變,即定義滑鼠在超級連結上的彩色(a: hover)將不起作用了。若不定義被訪問過的連結的彩色(A: visited),則當滑鼠在超級連結上顯示a: hover 中定義的彩色,當滑鼠移開時顯示a 中定義的彩色。
從上述可以看出,文字連結的彩色實際上只能在兩種彩色之間變換,並沒有像有些文章中講的那樣可以在多種彩色之間變換,但由於用那兩種彩色可以任意,所以應該講彩色的選取範圍還是比較大的。

38.在Dreamweaver中把圖形放在最中間
點擊選取圖形,在圖形的屬性面板的右上角Align(對齊屬性)邊上有個下拉框,在下拉框中選取,則文字在圖片四周繞排。若是單獨圖片在中間,則在圖像面板上點取齊中屬性即可。
**********************************************************
**********************************************************
39.如何使用Behaviors 功能,而又不連結到任何地方去
選取要作為超級連結的元素(一幅圖片或一段文字),在屬性面板上的位址欄(Link)中不填寫任何連結位址,只加上一個「#」號,(引號不內含在內)。這樣即可以使用Behaviors 功能,而又不連結到任何地方去了。
**********************************************************
**********************************************************
40.實現在一張(較大)圖片上做出幾個不同的連結
在Dreamweaver 中,這就是使用所謂的設定「圖像熱區域」。先選中圖像,然後在圖像屬性面板上有一個「Map」工具列,在其下方有三個淡藍色的工具圖示,即「矩形」、「圓 形」或「多邊形」,你可以根據需要選取一個(用滑鼠點一下就行),再把滑鼠移圖像上,按下滑鼠左鍵,拖曳滑鼠就畫出了一塊淡藍色的區域(不用擔心這塊淡藍 色區域會破壞你的圖像,在瀏覽器中是不顯示的),這時你在屬性面板上把需連結的網頁位址添上就行了。你需要幾個連結就畫幾塊區域,隨你的便。
**********************************************************
**********************************************************
41. 製作目錄樹
在 總目錄的前方有一個「+",一按這個「+",即可顯示其下子目錄,「+"即變成「-",一按「-",即可隱藏其下子目錄,就像在資源管理器中一樣,這需要 做二個頁面,一個頁面寫上總目錄,一個頁面寫上子目錄。把總目錄的頁面上的「+」號設定成超級連結,在「Link」欄中添上子目錄頁面的位址。把子目錄的 頁面上的「-」號設定成超級連結,在「Link」欄中添上總目錄頁面的位址。具體效果可看一看Dreamweaver的幫助文件,在這幫助文件裡也是按一 下總目錄,跳出子目錄,按下子目錄上的總目錄則返回到總目錄,只是沒用「+」、「-」表示而已。你再看一下該文件的源代碼就一目瞭然了。
**********************************************************
**********************************************************
42. 在Dreamweaver中輕鬆設定行間距
用層疊型態表(CSS)來實現,在Dreamweaver中編輯層疊型態表不用編寫代碼,具體動作方法如下:
(1)在快速啟動欄中點擊層疊型態表按鈕(就是把滑鼠放上去顯示「show css styles」的那個按鈕),在跳出的CSS Styles面板上按兩下(none);
(2)此時,可看到跳出的Edit Style Sheet 面板,在該面板上按New按鈕;
(3)再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示),再在Tag中選取「body」標示後按OK按鈕;
(4) 這時可看到跳出的Style dehinition for body 的對話框,在此對話框中可以設定「body」標示的許多屬性,你可以按你的意願設定,但我們這裡主要是要設定行距,所以我們在line屬性輸入框中填上行 距的像素點數,現在流行的九號字,行距一般用12,按OK按鈕返回到Edit Style Sheet 面板,此時已把「body」的行距設定好了;
(5)由於「body」中定義的行距對表格不起作用,所以我們再在Edit Style Sheet 面板上再按New按鈕;
(6)再在跳出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標示)再在Tag中選取「td」標示後按OK按鈕;
(7)在跳出的Style dehinition for td 的對話框中設定td的行距,按OK按鈕返回到Edit Style Sheet 面板;
(8)在Edit Style Sheet 面板上再按Don按鈕,至此所有設定結束,你在Dreamweaver的源代碼檢視窗中將看到在與之間如下所示的代碼:style type="text/css"
!--
body { line-height: 12pt; font-size: 9pt}
td { font-size: 9pt; line-height: 12pt}
-→
style
有了這段代碼,你在該網頁上的所有文字的行距都確定好了,若不滿意,可修改設定。

43. 如何設計能使瀏覽者在瀏覽時對網頁字型大小的設定不起作用
用CSS層疊型態表對字型進行強制性控制(像素)。
**********************************************************
**********************************************************
44. 實現網頁每過五分鐘刷新一次的效果
在Dreamweaver 的功能面板上選取「head」功能群組面板,在這面板上點擊「Refresh」功能圖示,在跳出的「Insert refresh」對話框中,在「Delay」中輸入要刷新的間隔時間,以秒計,例:隔五分鐘刷新一次,則輸入300即可。再在該對話框上選取 「Refresh This Document」(刷新目前視窗),按OK,大功告成。當你再次瀏覽該網頁時,它將自動地隔五分鐘刷新一次。
**********************************************************
**********************************************************
45. 解決用IE預覽標準的連結網頁,上傳到網站卻看不見的現象
把 網頁的所有檔案名統一成小寫(或大寫),再上傳就行了。因為很多伺服器使用的是UNIX動作系統,它對大小寫是很敏感的,也就是說大寫的檔案名和小寫檔案 名它認為是兩個檔案,你在上傳時必須注意大小寫。另外要注意:超級連結要使用相對路徑,不要用絕對路徑,也不要用中文檔案名。
**********************************************************
**********************************************************
46. 製作新開一個視窗開啟網頁的超級連結(即原來的網頁不被覆蓋)
在Dreamweaver中,在該連結的屬性面板上把「target(目的)」設定為「_blank」即可。

47. 隱藏不必要的標籤
當 使用者在網頁中插入了不可見的元素時,Dreamweaver會自動在頁面上加入一個與之相應的元素標籤,以便於使用者選取不可見元素。但這並不全是件好 事,比如你在一個有很多層的頁面中的第一行便插入一個表格,就會發現由於首行排序了太多的層元素標籤而使得表格自動退到了頁面的第二行,雖然在瀏覽時並不 影響效果,但這確確實實會阻礙你的工作。所以當你覺得某個元素標籤礙手礙腳時,就索性將之屏蔽掉。方法是按Ctrl+U開啟Preferences面板, 在Category中選中Invisibel Elements,在面板的右邊將會出現所有的元素標籤。只要將你討厭的元素標籤前的勾去掉,以後它就保證不會再出現了。
**********************************************************
**********************************************************
48. 解決表格緊貼左上方的問題
對這個問題有幾種解決方法。
(1)按下Ctrl+J,跳出Page Properties,將Left、 Top、 Margin Width、 Margin Height 全部設為0。
(2)把下面一段代碼加到你的body中:topmargin="0" leftmargin="0" ,這個方法只適用於IE。
(3)加入下面代碼:body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" ,這個方法適用於Netscape

49. 在Dreamweaver中將圖設為透明alpha設定
html
head
title css /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type=text/css
.pic{filter:alpha(opacity=50)}
/style
/head
body bgcolor="#FFFF00" text="#000000"
img src="0008.jpg" width="303" height="385" class="pic"
/body
/html
**********************************************************
**********************************************************
50. 設定表格虛線
(1)作一個1X2的圖,半黑半白,再利用表格做成線。
(2) 在css裡面設:在css面板裡新增一個style,選取「redefine HTML Tag」,再在下拉選單裡選「table」,在接下來的面板裡,category裡選取border。在border裡,將top、left、 right、bottom都設成1像素,彩色設成你將來想要的邊框的彩色。到style下拉選單裡選取dashed就可以了,只是所有的表格都會用虛線做 邊框了。
(3)若果你只想讓某一個表格邊框是虛線的話就在html裡設。在表格的html裡加上這個:
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"。彩色是十六位代碼,你可以自己設。方法2、3只能在IE瀏覽器裡用,到了Netscape裡一點用處都沒有,除非你用做好的底圖填充。
**********************************************************
**********************************************************
51. 在Dreamweaver中使插入的FLASH透明
選中插入的swf檔案,開啟原代碼視窗,在object前輸入param name="wmode"
**********************************************************
**********************************************************
52. Dreamweaver4中設定表格亮邊框和暗邊框
做一個像素寬度有彩色的表格線
(1)將表格邊框 border設定為0,Cell space設定為0,Cell padding設定為0。
(2)開啟型態面板新增一個型態。選取Border設定邊框屬性 。
(3)選中整張表格套用這個型態即可。
**********************************************************
**********************************************************
53. 隱藏表格的分隔線
table border rules=cols cellspacing=0 align=left可以隱藏橫印的分隔線
table border rules=rows cellspacing=0 align=right可以隱藏直印的分隔線
table border rules=none cellspacing=0 align=center可以隱藏橫印和直印的分隔線
**********************************************************
**********************************************************
54. 如何選取被遮蓋或隱藏的層
當層被重疊使用時,大層會把小層遮蓋住;當選取了層的隱藏屬性,該層就看不見了。當你想對這些層動作時,怎麼辦?按F11鍵顯示層面板,所有層號均在上面,要哪層選取哪層就行了
**********************************************************
**********************************************************
55. 在層(或表格中)上編輯文字時自動換行
層 在用Dreamweaver設計網頁時被大量採用,但當你在層上輸入大段文字時發現不會自動換行,無論你怎樣設定層的寬度均無濟於事,當然你可以用按 「SHIFT+ENTER」來換行。但是這樣當你調整層的寬度時又不得不一個一個地去刪除它,再又在另一位置加上它,其實有三種方法可以解決這個問題:
(1)在層疊式樣表*.CSS中「DIV」的式樣定義中加上字型的定義;
(2)在網頁源代碼的層定義中加上字型的定義;
(3)選取該段文字,在文字的屬性面板上定義字型。
上述三種方法任選一種都行,但以第一種較好,因為只要改動一次,此後只要是呼叫該層疊式樣表的網頁中的所有層都有能自動換行了,豈不是一勞永逸。表格同樣存在上述問題,解決方法相同,只是在層疊式樣表中在「TD」的式樣定義中加上字型的定義。
**********************************************************
**********************************************************
56. 在Dreamweaver中輸入上下標
若果只是要上下標的話,可以用SUB /SUB 和SUP /SUP。 手動加進去就可以了。
**********************************************************
**********************************************************
57. 去掉連結的下劃線
將以下代碼加入head /head之間
style type="text/css"
!--
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
-→
/style

星期三, 十二月 13, 2006

特殊html字元對照表

特殊html字元對照表
&lsquo; ‘ left single quote
&rsquo; ’ right single quote
&sbquo; , single low-9 quote
&ldquo; “ left double quote
&rdquo; ” right double quote
&bdquo; " double low-9 quote
&dagger; + dagger
&Dagger; ++ double dagger
&permil; 0/00 per mill sign
&lsaquo; < single left-pointing angle quote
&rsaquo; > single right-pointing angle quote
&spades; ? black spade suit
&clubs; ? black club suit
&hearts; ? black heart suit
&diams; ? black diamond suit
&oline;  ̄ overline, = spacing overscore
&larr; ← leftward arrow
&uarr; ↑ upward arrow
&rarr; → rightward arrow
&darr; ↓ downward arrow
&trade; ^(TM) trademark sign
&#00;-
&#08; unused
&#09; horizontal tab
&#10; line feed
&#11; unused
&#32; space
&#33; ! exclamation mark
&quot; &#34; " double quotation mark
&#35; # number sign
&#36; $ dollar sign
&#37; % percent sign
&amp; &#38; & ampersand
&#39; ' apostrophe
&#40; ( left parenthesis
&#41; ) right parenthesis
&#42; * asterisk
&#43; + plus sign
&#44; , comma
&#45; - hyphen
&#46; . period
&frasl; &#47; / slash
&#48;-
&#57; digits 0-9
&#58; : colon
&#59; ; semicolon
&lt; &#60; < less-than sign
&#61; = equals sign
&gt; &#62; > greater-than sign
&#63; ? question mark
&#64; @ at sign
&#65;-
&#90; uppercase letters A-Z
&#91; [ left square bracket
&#92; \ backslash
&#93; ] right square bracket
&#94; ^ caret
&#95; _ horizontal bar (underscore)
&#96; ` grave accent
&#97;-
&#122; lowercase letters a-z
&#123; { left curly brace
&#124; | vertical bar
&#125; } right curly brace
&#126; ~ tilde
&#127;-
&#149; unused
&ndash; &#150; – en dash
&mdash; &#151; — em dash
&#152;-
&#159; unused
&nbsp; &#160; nonbreaking space
&iexcl; &#161; ? inverted exclamation
&cent; &#162; ¢ cent sign
&pound; &#163; £ pound sterling
&curren; &#164; ? general currency sign
&yen; &#165; ¥ yen sign
&brvbar; or &brkbar; &#166; ? broken vertical bar
&sect; &#167; § section sign
&uml; or &die; &#168; ‥ umlaut
&copy; &#169; (c) copyright
&ordf; &#170; ^(a) feminine ordinal
&laquo; &#171; ? left angle quote
&not; &#172; ? not sign
&shy; &#173; ? soft hyphen
&reg; &#174; ? registered trademark
&macr; or &hibar; &#175; ¯ macron accent
&deg; &#176; ° degree sign
&plusmn; &#177; ± plus or minus
&sup2; &#178; ^(2) superscript two
&sup3; &#179; ^(3) superscript three
&acute; &#180; ′ acute accent
&micro; &#181; μ micro sign
&para; &#182; ? paragraph sign
&middot; &#183; · middle dot
&cedil; &#184; ﹐ cedilla
&sup1; &#185; ^(1) superscript one
&ordm; &#186; ^(o) masculine ordinal
&raquo; &#187; ? right angle quote
&frac14; &#188; 1/4 one-fourth
&frac12; &#189; 1/2 one-half
&frac34; &#190; 3/4 three-fourths
&iquest; &#191; ? inverted question mark
&Agrave; &#192; A` uppercase A, grave accent
&Aacute; &#193; A' uppercase A, acute accent
&Acirc; &#194; A^ uppercase A, circumflex accent
&Atilde; &#195; A~ uppercase A, tilde
&Auml; &#196; A" uppercase A, umlaut
&Aring; &#197; A* uppercase A, ring
&AElig; &#198; ? uppercase AE
&Ccedil; &#199; C, uppercase C, cedilla
&Egrave; &#200; E` uppercase E, grave accent
&Eacute; &#201; E' uppercase E, acute accent
&Ecirc; &#202; E^ uppercase E, circumflex accent
&Euml; &#203; E" uppercase E, umlaut
&Igrave; &#204; I` uppercase I, grave accent
&Iacute; &#205; I' uppercase I, acute accent
&Icirc; &#206; I^ uppercase I, circumflex accent
&Iuml; &#207; I" uppercase I, umlaut
&ETH; &#208; ? uppercase Eth, Icelandic
&Ntilde; &#209; N~ uppercase N, tilde
&Ograve; &#210; O` uppercase O, grave accent
&Oacute; &#211; O' uppercase O, acute accent
&Ocirc; &#212; O^ uppercase O, circumflex accent
&Otilde; &#213; O~ uppercase O, tilde
&Ouml; &#214; O" uppercase O, umlaut
&times; &#215; × multiplication sign
&Oslash; &#216; ? uppercase O, slash
&Ugrave; &#217; U` uppercase U, grave accent
&Uacute; &#218; U' uppercase U, acute accent
&Ucirc; &#219; U^ uppercase U, circumflex accent
&Uuml; &#220; U" uppercase U, umlaut
&Yacute; &#221; Y' uppercase Y, acute accent
&THORN; &#222; ? uppercase THORN, Icelandic
&szlig; &#223; ? lowercase sharps, German
&agrave; &#224; a` lowercase a, grave accent
&aacute; &#225; a' lowercase a, acute accent
&acirc; &#226; a^ lowercase a, circumflex accent
&atilde; &#227; a~ lowercase a, tilde
&auml; &#228; a" lowercase a, umlaut
&aring; &#229; a* lowercase a, ring
&aelig; &#230; ? lowercase ae
&ccedil; &#231; c, lowercase c, cedilla
&egrave; &#232; e` lowercase e, grave accent
&eacute; &#233; e' lowercase e, acute accent
&ecirc; &#234; e^ lowercase e, circumflex accent
&euml; &#235; e" lowercase e, umlaut
&igrave; &#236; i` lowercase i, grave accent
&iacute; &#237; i' lowercase i, acute accent
&icirc; &#238; i^ lowercase i, circumflex accent
&iuml; &#239; i" lowercase i, umlaut
&eth; &#240; ? lowercase eth, Icelandic
&ntilde; &#241; n~ lowercase n, tilde
&ograve; &#242; o` lowercase o, grave accent
&oacute; &#243; o' lowercase o, acute accent
&ocirc; &#244; o^ lowercase o, circumflex accent
&otilde; &#245; o~ lowercase o, tilde
&ouml; &#246; o" lowercase o, umlaut
&divide; &#247; ÷ division sign
&oslash; &#248; ? lowercase o, slash
&ugrave; &#249; u` lowercase u, grave accent
&uacute; &#250; u' lowercase u, acute accent
&ucirc; &#251; u^ lowercase u, circumflex accent
&uuml; &#252; u" lowercase u, umlaut
&yacute; &#253; y' lowercase y, acute accent
&thorn; &#254; ? lowercase thorn, Icelandic
&yuml; &#255; y" lowercase y, umlaut

星期四, 十二月 07, 2006

A look at Apache modules

最近想要研究一個功能,some web server (maybe apache),the client requests an image from servers if it did not exist, the server will redirect to another url to show this image. Also, it will save this image from the current web server on his own server, so it can direct/send this image to client when other client requested the same image next time. On the other hand, the server will check out this imager is newer if it has been exited on the server !!

i want to use apache dynamic load module, and write a module can do this work.

找到一篇文章,http://www.regdeveloper.co.uk/2006/10/03/apache_modules/

A look at Apache modules
Now for some real Apache code
By Nick Kew → More by this author
Published Tuesday 3rd October 2006 21:03 GMT

Column As I write this, I'm on the Eurostar train, just returning from O'Reilly's OSCon (Open Source Conference) in Brussels. Some fascinating insights there; and even my own talk generated some interesting discussion. Some of the delegates, including O'Reilly himself, are promoting opensource ideas going beyond software and into society more generally. I've touched on that in this very column before now, but a related argument that's new to me is that the open/closed debate in software could become largely sidelined, as the industry focuses on software as a service (such as Google's offerings) more than as a product.

Anyway, I've been meaning for some time to give you an article on writing Apache modules. But first things first. If you're going to write modules, you'll need a proper Apache installation. A safe option is to download the latest release version (currently 2.2.3) from httpd.apache.org, and install it from that. For the adventurous, you could install the current development version from svn.apache.org. If you use a different package such as an rpm or deb, you'll probably need an "apache-dev" package as well as Apache itself.
What is a module?

As I'm sure I've said, Apache has a diverse developer and user profile, and we all have very different uses for it. This approach to serving a wide range of needs is based on a small core, together with a large number of modules. Most of what you get when you install Apache as a package, from apache.org or elsewhere, comprises the modules that perform Apache's standard functions. Even such a simple task as serving an "index.html" file involves various modules: for example, mod_dir to resolve the URL http://www.example.com/ to the file index.html, and mod_mime to determine its MIME type as "text/html" so the browser knows how to render it.

Just as Apache's standard functions are driven by modules, so we can write new modules to change its behaviour, or introduce entirely new capabilities. Some examples of the kind of things we can do with modules include:

* A content generator module takes an HTTP request and generates a response, in the manner of, for example, a CGI or PHP script. The default handler simply serves up a static file from local disc, while others may implement a service such as XML-RPC, do custom processing, or (like mod_cgi) delegate the work to an external script.
* A mapper module runs before content generation, and determines how a request will be processed. For example, mod_negotiation selects amongst different versions of a document (e.g. different languages) according to browser preferences, while mod_alias and mod_rewrite perform rule-based URL manipulation.
* An authentication module ascertains the identity of a user. When used, it is usually accompanied by an authorization module, which determines whether the user is permitted the attempted operation.
* A filter module transforms incoming and/or outgoing data. Filters may be chained arbitrarily, and are the building blocks for sophisticated processing and aggregation applications. They range from simple content manipulation such as server side includes, through compression, to SSL encryption, and include many of the most exciting third-party applications.
* A service module may export an entirely new API and/or service for other modules. For example, mod_dbd manages SQL database connections, and mod_xmlns exports an API for namespace-based processing of XML.

A HelloWorld Module

Conceptually, the simplest type of module is the content generator or handler, whose role in Apache is directly equivalent to a CGI or PHP script. That is to say, it processes a request in whatever manner is required, and generates a response to return to the Client. It is not required to deal with the details of the HTTP protocol, though (as with a script) it may do that, or any number of other things. Usually it's good to keep the content generator simple, and use other types of module for different tasks.

So in the spirit of simplicity, let's take a look at a minimal HelloWorld module. Note that, unlike a script, this doesn't live amongst our web documents, so we can't run it straight from the filesystem. We'll need to configure it using a directive such as SetHandler instead:

LoadModule helloworld_module modules/mod_helloworld.so

SetHandler helloworld

Here's a function to return a HelloWorld page to the client. The prototype is typical: it takes the request_rec (HTTP Request) object as a single argument, and returns an integer status code. The request_rec provides access to everything a handler might need (such as the variables available to a script) and also serves as an I/O descriptor, among other things:

static int helloworld_handler(request_rec *r) {
/* First, some housekeeping. */
if (!r->handler || strcasecmp(r->handler, "helloworld") != 0) {
/* r->handler wasn't "helloworld", so it's none of our business */
return DECLINED;
}

if (r->method_number != M_GET) {
/* We only accept GET and HEAD requests.
* They are identical for the purposes of a content generator
* Returning an HTTP error code causes Apache to return an
* error page (ErrorDocument) to the client.
*/
return HTTP_METHOD_NOT_ALLOWED;
}

/* OK, we're happy with this request, so we'll return the response. */

ap_set_content_type(r, "text/html");
ap_rputs(" .... etc", r);

/* we return OK to indicate that we have successfully processed
* the request. No further processing is required.
*/
return OK;
}

So, that's our handler function. Now we need to hook it in to Apache's processing, so it will be run when we get a request for /helloworld. We use a special function that runs at server startup to register our handler with Apache:

static void helloworld_hooks(apr_pool_t *pool) {
/* hook helloworld_handler in to Apache */
ap_hook_handler(helloworld_handler, NULL, NULL, APR_HOOK_MIDDLE);
}

This hooks function is itself part of the module object. For most modules, this is the only symbol exported and visible to other modules or the core:

module AP_MODULE_DECLARE_DATA helloworld_module = {
STANDARD20_MODULE_STUFF,
NULL,
NULL,
NULL,
NULL,
NULL,
helloworld_hooks
};

And that's all! We have a complete HelloWorld module. We can use apxs, a compiler-wrapper that is part of the Apache installation, to compile and (as root) install it:

$ apxs -c mod_helloworld.c
# apxs -ie mod_helloworld.la

Well, as usual I'm over the 1000 words, so I'll bring this first look at modules to a close. For further information, stay tuned. If you're seriously interested, my book is now in production with the publisher, so for the first time you have a more than just the source code and a handful of ad-hoc materials to help upgrade your LAMP and application server skills!

How to Delete Members from Archives

How to Delete Members from Archives


tar 是在 Linux 上很常用的工具,如果搭配 gzip 那就更好用了!
如果我們要從一個 tar 檔中,直接 刪除一個檔案,我們可以用 --delete 這一個參數。

test.tar 中有三個檔案
# tar --list -f test.tar
test1.txt
test2.txt
test3.txt
# tar --delete -f test.tar test1.txt
# tar --list -f test.tar
test2.txt
test3.txt
#
如果你的 tar 檔中,檔案是有帶路徑,後面的檔案名稱也要全寫哦
# tar --list -f test.tar
backup/test1.txt
backup/test2.txt
backup/test3.txt
# tar --delete -f test.tar backup/test1.txt (這裡連 backup/ 目錄都要寫出來哦)
# tar --list -f test.tar
backup/test2.txt
backup/test3.txt

星期六, 十二月 02, 2006

ImageMagick use convert show chinese on images

ImageMagick 是個很好用的圖檔處理工具,其中的 convert 這個命令可以做出很多圖檔出來,例如可以在圖片中加入文字等功能!實在很好用,也可以產生一個隨機的圖片,可以做出網站上常用的驗證碼等類似功能!但是 convert 這一個工具有一個問題,它在接受中文部份,只接受 Unicode 編碼的中文,不支援直接送 big5 給它。而且你要可以秀出正確的中文還需要有中文字型,這時後的中文字型就不能是一般我們 windows 系統上的 big5 編碼的中文字型,因為你是用 Unicode 編碼送給它!

所以要實現在圖片置入中文的話,第一要有 Unicode 編碼的中文字型,第二要把 big5 中文字轉成 unicode 編碼。

我在兩個網站下載到 unicode 編碼的中文字型
http://www.info.gov.hk/digital21/chi/hkscs/download/ming_uni.ttf.gz
http://www.study-area.org/apt/firefly-font/fireflysung-1.3.0.tar.gz
真是太感謝他們了!

有了中文字型之後,接下來就是字型編碼的轉換了!
perl 有提供一個工具 piconv 可以用來轉換 big5 to unicode 這實在是太棒了!萬事俱備了!
底下的範例,就是一個會產生含有中文字的圖檔! convert 還有很多驚人的功能,有興趣的人可以多加研究!

convert -pointsize 72 -fill white -font fireflysung.ttf -size 500x200 xc:black -draw "text +20+100 '`piconv -f big5 -t utf8 -s '中國'`'" chinese.jpg

http://www.imagemagick.org/ ImageMagick 官網
http://www.imagemagick.org/script/convert.php convert 工具說明



written by 東海大野狼

星期五, 十二月 01, 2006

ImageMagick Install for Linux

東海大野狼部落格

因為需要用到一些圖檔的處理,所以安裝了 ImageMagick,然後再安裝 perl 的 PerlMagick
在解開 ImageMagick 之後,裡頭有一個 README.txt 需要好好看一下!因為你如果要讓你的 ImageMagick 支援一些其它東東,就需要先安裝相關的套件,這樣才可以讓你的 ImageMagick 完整一點!

底下就是我有安裝的一些東東!
ImageMagick 的 configure 之後,會看到你目前系統上,ImageMagick 有找到而可以讓其支援的相關訊息,可以看一下是不是你所需要的,如果不夠就要再去安裝相關套件!進行 make 時,過程相當久,也會出現很多的 warning,但最後似乎也可以進行安裝,我的 server 因為沒有安裝 X-Window ,而有一些套件我認為用不到的也沒裝,所以應該是這樣造成的吧!不過最後裝完 PerlMagick 之後,要的功能都可以用,所以就沒有理那些訊息了!


o ImageMagick requires the BZLIB library from
* http://sources.redhat.com /bzip2/
wget http://www.bzip.org/1.0.3 /bzip2-1.0.3.tar.gz
* it will install bzip2 on system
make
make install
* build shared library libbz2.so.
make -f Makefile-libbz2_so
mv *.so.* /usr/lib

o ImageMagick requires the FreeType software, version 2.0 or above, available as
http://freetype.sourceforge.net
wget http://download.savannah.gnu .org/releases/freetype/freetype -2.2.1.tar.gz
./configure
make
make install
wget http://download.savannah.gnu .org/releases/freetype/freetype -doc-2.2.1.tar.gz

o ImageMagick requires Ghostscript software (version 8.10 recommended) available from
http://www.cs.wisc.edu/~ghost/
wget http://nchc.dl.sourceforge.net /sourceforge/ghostscript /ghostscript-8.54-gpl.tar.gz
./configure
make
make install

o ImageMagick requires html2ps available from
http://www.tdb.uu.se/~jan /html2ps.html
wget http://user.it.uu.se/~jan /html2ps-1.0b5.tar.gz
./install

o ImageMagick requires the Independent JPEG Group's software available via anonymous FTP as
to read the JPEG v1 image format.
ftp://ftp.uu.net/graphics/jpeg /jpegsrc.v6b.tar.gz
./configure --enable-shared --enable-static
make
make test
make install

o ImageMagick requires the JasPer Project's Jasper library version 1.701.0 available via http from
to read and write the JPEG-2000 format.
http://www.ece.uvic.ca/ ~mdadams/jasper/
wget http://www.ece.uvic.ca/ ~mdadams/jasper/software /jasper-1.701.0.zip
./configure
make
make install

o ImageMagick requires the PNG library, version 1.0 or above, from
to read the PNG image format.
http://www.libpng.org/pub/png /pngcode.html
wget http://nchc.dl.sourceforge.net /sourceforge/libpng/libpng-1.2 .14.tar.gz
./configure
make check
make install

zlib
wget http://www.zlib.net/zlib-1.2.3 .tar.gz
./configure
make test
make install

o ImageMagick requires Sam Leffler's TIFF software available via anonymous
to read the TIFF image format. It in turn optionally requires the JPEG and ZLIB libraries.
http://www.remotesensing.org /libtiff/
wget ftp://ftp.remotesensing.org /pub/libtiff/tiff-3.8.2.tar.gz
./configure
make install


Download ImageMagick sources and install
wget ftp://ftp.kddlabs.co.jp /graphics/ImageMagick/ImageMagi ck-6.3.0-7.tar.gz
./configure
make
make install

Download PerlMagick from cpan and install
wget http://search.cpan.org/CPAN /authors/id/J/JC/JCRISTY /PerlMagick-6.29.tar.gz
perl Makefile.PL
make
make install