2013年10月31日星期四

主次操作

一個表單的主要操作(通常是“提交”或“保存”)需要一個比較強的視覺比重(在上面的例子裏用了亮色調、粗字體、背景色等等)。這相當於給用戶一個提示:您已/即將完成填寫表單。   當一個表單有多個操作,比如“繼續”和“返回”,那有必要減輕次要操作的網站排名視覺重量。這可以最小化用戶潛在的操作錯誤的風險。   雖然以上內容可以更好的讓你設計表單,但是組合佈局、視覺化元素以及內容,仍然需要經過用戶的測試以及資料分析(完成度評估、錯誤報告等)。

聽上去不錯

:由於網頁設計公司“標籤左對齊佈局”的優點(方便檢索並且減少垂直高度),嘗試糾正它的主要缺點(標籤和輸入框的分離)就很誘惑人。    一個方案就是增加背景色和分割線,不同的背景色產生了一列垂直的標籤和一列垂直的輸入框,每一組標籤和輸入框利用清晰的水平線分開。雖然這聽上去不錯,但是還是會存在問題。   對比之前的形態(用戶主觀的視覺區分),這增加了15個視覺元素:CMS中間線、一個個有背景色的單格以及一條條的水平線。這些元素會轉移用戶的視線,讓用戶難以聚焦到一些重要的元素上,比如標籤和輸入框。 正如 Edward Tufte 指出的:“資訊本身存在差異,必然產生感官上的不同。”換句話說,任何對佈局無用的視覺元素都會不斷地擾亂佈局。當你試著流覽左側的標籤就可以發現,你的視線總是被打斷,停下來想那些水平線、單格和背景顏色。   當然這並不意味著放棄背景色和線條。它們對於電子商務劃分相關區域資訊還是很有效的。比如一條細水平線或者一個淺淺的背景色,都可以從視覺上組合相關資料。背景色和線條對於區分表單的主要操作按鈕尤其有效。

表單佈局

考慮到用戶完成表單填寫的時間應當盡可能的短,並且收集的資料都是用戶所熟悉的網頁寄存(比如姓名、位址、付費資訊等),垂直對齊的標籤和輸入框可以說是最佳的。每對標籤和輸入框垂直對齊給人一種兩者接近的感覺,並且一致的左對齊減少了眼睛移動和處理時間。用戶只需要往一個方向移動:下。   在這種佈局中,推薦使用加粗的標籤,這可以增加它們視覺比重,提高其顯著性。如果不加粗的話,從用戶的角度講,標籤和輸入框的文字幾乎就一樣了。   如果一個表單上的資料並不為人熟悉或者在邏輯上分組有困難(比如一個位址的多個組成部分),左對齊的網站建設標籤可以很容易的通覽表單的資訊。用戶只需要上下看看左側一欄標籤就可以了,而不會被輸入框打斷思路。但這樣一來,標籤與其對應的輸入框之間的距離通常會被更長的標籤拉長,可能會影響填寫表單的時間。用戶必須左右來回的跳轉目光來找到兩個對應的標籤和輸入框。   於是產生了一種替代的方案,標籤右對齊佈局,使得標籤和輸入框之間的聯繫更緊密。然而結果是左邊參差不齊的空白和標籤讓用戶很難快速檢索表單要填寫的內容。在西方國家,人們習慣于從左至右的書寫,所以這種右對齊的佈局就給網頁設計模板用戶造成了閱讀障礙。

2013年10月30日星期三

幾個發現:

不透明和索引色透明的圖片, png8比gif更加具有優勢。    Alpha透明的圖片,png8比gif顯示效果好,但檔更大。    png24沒有透明效果:包括索引色網站排名透明和Alpha透明。   不同的流覽器,顯示效果不一樣。   Firefox:支援png8的索引色透明度, png8 和png32的alpha透明度。    IE:支援png8的索引色透明度,但不支持png8和png32的alpha透明度。(可用Js+css濾鏡解決)   網頁中使用的照片類圖片,jpg檔一般比png24要小很多。但不排除特殊情況。    SVG 圖像格式   SVG是種一種可縮放的向量圖形。它是基於XML,由W3C聯盟進行開發的。嚴格來說應該是一種開放標準的向量圖形語言,可讓你設計激動人心的、高解析度的Web圖形頁面。   用戶可以直接用代碼來描繪圖像,可以用任何文字處理工具打開SVG圖像,通過改變server3.htm' style='text-decoration:none;' >網頁設計公司部分代碼來使圖像具有交互功能,並可以隨時插入到HTML中通過流覽器來觀看。   SVG提供了目前網路流行格式GIF和JPEG無法具備了優勢:可以任意放大圖形顯示,但絕不會以犧牲圖像品質為代價;   文字在SVG圖像中保留可編輯和可搜尋的狀態;平均來講,SVG檔比JPG和GIF格式的檔要小很多,因而下載也很快。

 特點3:更優化的傳輸顯示。

熟悉gif格式的圖像處理者知道,gif圖像有兩種模式——normal(普通)模式和interlaced(交錯)模式。interlaced模式更適用於網路傳輸。在傳送圖像過程中,流覽者先看到圖像一個大略的輪廓然後再慢慢清晰。png也採取了interlaced模式,使圖像得以水準及垂直方式顯像電郵服務在螢幕上,加快了下載的速度。   特點4:支援圖像透明顯示。   gif格式雖然也支援透明顯示,採用gif格式透明圖像過於刻板,因為gif透明圖像只有1與0的透明資訊、只有透明或不透明兩種選擇,沒有層次;而png提供了α頻段0至255的透明資訊,可以使圖像的透明區域出現深度不同的層次。   png圖像就可以讓圖像覆蓋在任何背景上電子商務都看不到接縫,改善gif透明圖像描邊不佳的問題。   特點5:相容性較好。 png被設計成可以通過網路傳送到任何機種及作業系統上讀取。   文字資料(如作者、出處)、儲存遮罩(MASK)、伽瑪值、色彩校正碼等資訊均可參雜在 png圖像中一起傳輸。

PNG 圖像格式

PNG是一種可攜式網路網頁設計圖像格式。PNG一開始便結合GIF及JPG兩家之長,打算一舉取代這兩種格式。1996年10月1日由PNG向國際網路聯盟提出並得到推薦認可標準,並且大部分繪圖軟體和流覽器開始支援PNG圖像流覽,從此PNG圖像格式生機煥發。   IE流覽器從4.0版本開始支援png圖像流覽。   特點1:兼有gif和jpg的色彩模式。   我們知道gif格式圖像採用了256色以下的index color色彩模式,jpg採用的網站建設是24位元真彩模式。png不僅能儲存256色以下的index color圖像,還能儲存24位元真彩圖像,甚至能最高可儲存至48位元超強色彩圖像。   特點2:png能把圖像檔壓縮到極限以利於網路傳輸,但又能保留所有與圖像品質有關的資訊。   如果你的圖像是以文字、形狀及線條為主,png會用類似gif的壓縮方法來得到較好的壓縮率,而且不破壞原始圖像的任何細節。據國際網路網頁寄存聯盟測算,八位元的png圖像比同位元的gif圖像就小10%到30%。   而對於相片品質一類的壓縮,png則採用類似jpg的壓縮演算法。但是jpg壓縮程度越大、影像的品質越差。因為它的壓縮是採用的是破壞性壓縮法、每次壓縮的同時便多多少少漏掉一些圖元。 png不同於jpg的地方在於:它處理相片類圖像亦是CMS採用非破壞性壓縮,圖像壓縮後能保持與壓縮前圖像品質一樣,沒有一點失真。

2013年10月29日星期二

藍色系分析: (同類色:淺藍色)

主色調HSB數值H顯示200度,色輪度稍向綠色方位傾斜,但是由於從180度到270度基本上給人的視覺呈現還是藍色範疇,因此與視覺上廣義的藍色差別不大。   該頁面中間色較多,主要是在藍色範疇內做明度的變化,所以色度差非常緩和,以致於頁面的色彩呈現非常柔和,甚至稍有些發灰的感覺,好在該頁面還有些較大色塊的淺藍色及白色,拉大了頁面的色階,使得這種灰的感覺減弱不少。   點睛色的HSB數值是258,色輪趨勢是向暖色紫色(相對冷暖色)傾向,變化微妙,是本頁面最溫暖的顏色。藍紫色在色相環中位於藍色和紫色之間,所以它也蘊含著紫色的一些神秘感,加上淺藍色的雅致,所以亮度較高的藍紫色顯得非常高雅。在網頁中,藍紫色通常與CMS藍色一起搭配使用。   結論:    淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質,常用於化妝品、女性、服裝網站。它是最具涼爽,清新特徵的色彩。和白色混合時,能體現柔順,淡雅,浪漫的氣氛。   主色調選擇明亮的藍色,配以白色的背景和灰亮的輔助色,可以使站點乾淨而整潔,給人莊重、充實的印象。   該頁面基本上屬於同類色系,也是最保守穩妥且調和的配色方案。但該種配色看久了容易呈現出平淡乏味的感受。

藍色系分析:(高純度對比:藍色+玫瑰色)

藍色的HSB數值H色相為240度時是正藍色。上圖的HSB模式S數值顯示,所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數值可看出,這兩種顏色在明度上有較大的區別,色相上稍有輕度變化,飽和度相同。RGB模式上看,主色調與輔色調R數值都為0,G綠色的數值和B藍色數值分量的變化,得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色,因此飽和度呈最高值100%。整個頁面配色的飽和度都為100%,頁面整體配色看起來視覺衝擊力異常強烈。   輔助色白色讓頁面上的顏色的特性發揮到極致,是不可缺少的輔助配色。   結論:響亮、強烈刺激的詞語似乎都適用於上圖頁面,源于高純度烘托、微妙的冷暖變化配色上,體現出現代都市張揚時尚的氣息。白色塊面的線型使得這種高純度高強度的配色變得響亮卻也緩和。    輔色調藍色的運用透露出設計師的大膽與魄力,玫瑰色在色輪表裏算是網頁寄存冷色系,但是與藍色廣義上的對比來說是暖色,在這裏與藍色搭配算是絕配了。整個頁面無不體現出特色和個性。

網頁設計配色應用實例剖析——藍色系

eb Design藍色是色彩中比較沉靜的顏色。象徵著永恆與深邃、高遠與博大、壯闊與浩渺,是令人心境暢快的顏色。   藍色的樸實、穩重、內向性格,襯托那些性格活躍、具有較強擴張力的色彩,運用對比手法,同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當,能構成和諧的對比調和關係。   藍色是冷色調最典型的代表色,是網站設計中運用得最多的顏色,也是許多人鍾愛的顏色。    藍色表達著深遠、永恆、沉靜、無限、理智、誠實、寒冷的多種感覺。藍色會給人很強烈的安穩感,同時藍色還能夠表現出和平、淡雅、潔淨、可靠等。   下面我們根據藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的網站建設舉例分析。

2013年10月28日星期一

綠色系分析:(綠色配色:同類綠色+多種點睛色)

主要色調HSB模式H數值顯示75度,依舊是色輪表裏傾向於黃色區域方位邊緣的綠色,呈現出的黃綠色調。輔色調在明度上有些提亮,與主色調形成較強的對比。   點睛色裏所使用的對比色組合有兩組,紅色與綠色,藍色與橙黃色,其中黃色是介於暖色(橙黃、紅色)和冷色(綠色、藍色)的過渡色也是調和色。   結論:    通過上面的分析大家可以看到,該網頁的配色不少,而且電子商務還有兩組對比色在內,但是頁面配色也很協調。原因之一,從下面抽取的色塊可以看出來,是一個過渡柔和的色輪表:以黃色為中界一邊是較淺的黃綠到綠色再到藍色,另一邊是橙黃再到紅色。原因之二,點睛色畢竟是扮演著點睛色的角色,有主色調和輔色調大面積的控制,即便再多些點睛色也不至於很快干擾到頁面的整體配色。   整個頁面保證了協調、不淩亂的步調,但是又能把商業網站的熱鬧氛圍體現得很好的渲染。此種配色方法值得我們學習借鑒。

綠色系分析:(同類色淺綠色)

主色調綠色屬性是明度很高的淺綠色,前面提到過,通常情況下明度高飽和度就降低,飽和度低頁面色彩度就降低,除非顏色本身有自己的特性,加上大面積的輔助色白色,整個頁面看起來很清淡、柔和、寧靜,甚至有溫馨的感覺。   頁面中使用了漸變的CMS淺綠色,使得整個頁面視覺上更加柔和舒適。   儘管點睛色只在主要標誌上出現,按鈕也只有少許一點,但也給整個頁面的色彩帶來些亮筆。尤其是紅色的HSB模式的H數值顯示顏色接近於正紅色,飽和度達到最高值。另一個點睛色中黃色,在頁面視覺上呈綠色與紅色這一組對比色起到緩和視覺的作用。因為在色輪表上,黃色正是在綠色和紅色之間的過渡色。   結論:    淺綠色系有優雅、休息、安全、和睦、寧靜、柔和的感覺。   漸變的效果更能加深這種印象。但頁面配色上淺色過多時,整個頁面容易呈現發 "灰"的感受,這就需要適量的添加純度稍高的顏色例如左下角的輔助色綠色塊,適當的鮮豔的點睛都能很好的解決這一問題。   綠色系分析:(黃綠色+弱對比)    從HSB模式的數值上看,主色調是接近於黃色的基礎上加入了少許綠色在裏面,飽和度和明度電郵服務降低,色彩看起來較柔和。輔色調墨綠色的綠色的傾向稍高,飽和度也較高,只是明度降低,該色看起來踏實沉穩。   點睛色紅色H數值為零度,呈正紅色,但是該顏色飽和度和明度降低,而紅色本身的色度比黃綠色要暗不少,因此顏色穩重。另一點睛色藍綠色,明度飽和度都很低,在頁面配色裏似乎沒有點睛感覺,更多的是呈輔助狀態。   結論:    主色調是相對比較鮮亮的顏色,而輔助色和點睛色是屬於比較沉穩的顏色,頁面通過大小色塊的對比提高視覺的反差力度,增強頁面的感染力。   由於整個頁面的飽和度整體稍微降低,因此該頁面配色較協調、緩和。

綠色系分析: (高純度配色:綠色+對比色組合)

 HSB數值H顯示60度為正黃色,該主、輔色調只向綠色傾斜了一丁點--H為75度。大面積明度稍低的黃綠色為主要色調,飽和度卻非常高,達到了100%,輔助色使用了提高明度的嫩綠色和白色,這兩種輔色除了增加頁面的層次感的同時,還能讓整個頁面配色有透亮的感覺,增強了綠色的特性。背景深褐色無疑把前景的所有純色烘托得都耀眼於舞臺上。   該頁面有兩組小小的對比色,一組是黃綠與橙紅色,一組是橙黃色與天藍色,這兩組配色嚴格的來說不算對比色,因為色彩多少有些偏差。雖然它們的飽和度降低,但在這個頁面中足以構成了最響亮的色調,把整個頁面烘托得非常活躍、鮮明。   結論:    主、輔色調黃綠色大面積使用並不刺目,反而使得頁面看起來很有朝氣、活力。   適當運用不同純度的不是相當嚴格意義上的對比色系組合時,通常能起到的主要作用是網頁設計模板主次關係明確。不 "標準"的對比色系對比特性雖然減弱,頁面色彩看起來容易協調、柔和,但一樣能突出主題。

2013年10月27日星期日

紫色系分析:(淺紫色)

該頁面使用特性最高的紫色提亮為100%高明度的主色調,很容易抓住人們的CMS視線成為聚焦點,是非常大膽又時尚的配色。   輔色調則是使用冷色系代表的深藍色,明度較低。主要是為了烘托左邊導航菜單,凸顯上面的內容資訊,由於人們對網頁已然形成了視覺慣性,也起到了很好的視覺引導作用。   主、輔色的搭配運用構成了較強烈的視覺對比效果。   另一輔色調淺藍色,在主色調淺紫色的烘托下呈現稚嫩的感受,裏面的白色塊起到淺紫的背景和淺藍色調和、明快的作用。   點睛色的使用實際有不少,這裏只選幾種起到主要作用的顏色做舉例分析。中黃色運用得很珍貴,只在左上區域出現,旨在突出主題文字的效果。其他配色主要是根據左下文字字母而來,紅和綠色出現在頁面的淺紫色較為寬敞的位置,小範圍的做色彩對比效果。其他點睛色則極少的零星分佈,既調和呼應又起到活躍於頁面的角色作用,以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。   結論:    在紫色中加入白色,可使紫色略顯沉悶的特徵消失,變得清秀、優雅、嬌氣,並充滿女性的魅力。   白色、粉紫色、天藍色的顏色搭配,是比較稚嫩的配色,同時也是最受少女歡迎的配色方案,這裏運用也較得體。   使用高明度高飽和的主色調非常個性,讓人很容易記住它,但是色彩都有兩面性,此種顏色略顯驕躁感過於刺激視覺,不易於長時間的注目流覽。

紫色系分析:(高純度對比:同類紫色+同類對比色)

紫色的HSB數值H色相為300度時是正紫色。上圖的HSB模式S數值顯示,上組顏色飽和度基本都比較高,加上部分較高的明度組合,使該頁面異常奢華豔麗。   輔色調之一的黃色是紫色強度最高的對比色,主、輔色面積的大小不同是形成視覺衝擊力最大的主要原因。值得一提的是右下腳的淺藍色的運用,它在整個頁面配色上是很謙遜的角色,但卻既突出上面的文字內容,又不張揚的壓抑住其他顏色的配色,屬於豐富於頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍色效果好。   另一輔助色淺紫紅色又稱粉紅色,粉紅色主要用於包含少女在內的女性站點。因為從明亮到淺白色調的粉紅色能夠表現出網頁寄存可愛、乖巧的感覺,這裏只做少量運用。   其他點睛色使用得雖多但面積很小,主要是主色調紫色附近的過渡色,例如群青、青蓮、玫瑰、紅色等點綴,閃亮耀眼,增強頁面的視覺感染力,有渲染出華麗凸顯現代氣息的作用。   結論:    紫色結合紅色的紫紅色是非常女性化的顏色,它給人的感覺通常都是浪漫、柔和、華麗、高貴優雅,特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現出超凡的華麗,而低彩度的粉紅色可以表現出高雅的氣質。   紫紅色並不能隨意在所有的站點中使用,但使用恰當的紫紅色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。   該頁面具有非常強烈的現代奢華感。時尚張揚的配色組合,符合該頁面主題所要表達的環境,讓人容易記住它。

網頁設計配色應用實例剖析——紫色系

 Web Design紫色是一種在自然界中比較少見的顏色。象徵著女性化,代表著高貴和奢華、優雅與魅力,也象徵著神秘與莊重、神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便採用了紫色。   紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時,顯得華麗和諧。紫色中加入少量的黑,沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白,變得優雅、嬌氣,並充滿女性的魅力。   紫色通常用於以女性為物件或以藝術作品介紹為主的站點,但很多大公司的站點中也喜歡使用網站建設包含神秘色彩的紫色,但都很少做大面積使用。   不同色調的紫色可以營造非常濃郁的女性化氣息,在白色的背景色和灰色的突出顏色的襯托下,紫色可以顯示出更大的魅力。   下面我們根據紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。

2013年10月24日星期四

使用動態頁面

本文介紹GOOGLE官方對網站建設方案的一些建議。   Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.   讓網站有著清晰的結構和文本鏈結,所有的頁面至少要有一個靜態文本鏈結入口   批註:儘量不要用圖片和JAVASCRIPT   Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.   為用戶提供一個站點地圖:轉向網站排名的重要部分。如果站點地圖頁面超過100個鏈結,則需要將頁面分成多個頁面。   批註:索引頁不要超過100個鏈結:SPIDER只考慮頁面中頭100個鏈結   Create a useful, information-rich site and write pages that clearly and accurately describe your content.   用一些有用的,信息量豐富的站點,清晰並正確的描述你的CMS資訊。   Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.   想像用戶可能用來找到你的關鍵字,並保證這些關鍵字在server3.htm' style='text-decoration:none;' >網站中出現。   批註:少用“最大”,“最好”之類的形容詞,用用戶最關心的詞,比如:下載,歌星名字,而不是一些抽象名詞。   Try to use text instead of images to SEO display important names, content, or links. The Google crawler doesn't recognize text contained in images.   盡可能使用文本,而不是圖片顯示重要的名稱,內容和鏈結。GOOGLE的機器人不認識圖片中的文字。   Make sure that your TITLE and ALT tags are descriptive and accurate.   保證:頁面的TITLE和ALT標記正確的精確描述server1_A.htm' style='text-decoration:none;' >網頁寄存   Check for broken links and correct HTML.   檢查壞鏈並修正這些HTML錯誤。   If you decide to use dynamic pages (i.e., the URL contains a '?' character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them small.   如果你打算使用動態頁面:鏈結中包含"?",必須瞭解:並非所有的搜索引擎排名的機器人能想對待靜態頁面一樣對待動態頁面,保持動態頁面的參數盡可能的少也會很有幫助。   Keep the links on a given page to a reasonable number (fewer than 100).   讓一個頁面中的鏈結少於100個。

娛樂化

我們看到IBM的柵格與MS的有很大的不同,IBM中還出現了一些差不多大的柵格CMS,但是這裏要注意其實這些柵格是由於底部很小的幾個區塊所產生的,並且這凡個區塊還可以看作是一個橫向的區塊。我們從這裏可以看到IBM的佈局設計是對稱的。但是這種對稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。   我們再來看看ASTRO公司網站,這個網站比起上面兩個公司網站就更娛樂化,更有趣了。   從這三個網站排名中我們可以看到三種不同風格的柵格設計,雖然有所不同,但我們依然可以發現三者都會盡可能的把最重要的資訊放在視覺中心點上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區,得到了足夠的重視!我們的視覺中心也自然盯在了上面!   說到這裏我依然覺得沒能把柵格設計的作用講明白。

依據我對於柵格

網頁設計中的髒、亂、差,是我們在設計過程中常會遇到的問題。通常"髒"是由對色彩使用不當所產生的,而色彩使用不當產生的不好效果也分為:"花、灰",花哨、灰頭土臉也就是這裏所說的"髒"。而"差" 基本上是由於我們的技法上不夠嫺熟所產生的。比如細節上的處理不到位,某個局部的效果製作得粗糙。這可以稱之為"差",特別是在處理帶有2D效果的設計作品時,這種情況常會出現。但是我今天在本文中所要談的是"亂"。   什麼是亂?這裏的亂不是指用色亂,也不是指內容亂,而主要是指網頁佈局亂。以前我有幸接觸了平面設計,並且網站建設從中學到了很多平面設計上的一些知識與技法。其中“柵格設計”就是平面設計中用於處理佈局的一種理論。到目前為止我還在研究"柵格設計"。因為著實沒有什麼比較好的語言可以非常簡潔明瞭的概括這個詞。這更像是需要不斷用實踐去理解的。所以很多時候我們們都無法去講述。但是在設計中這個柵格卻是能幫助我們完成更好作品的一個非常好用的利器。對於柵格設計我也不能說是認識深刻,我這裏只是依據我對於柵格設計的理解,將之用於網頁設計中,希望能給更多的朋友們一點啟示,或許能打開一些朋友的思路。   單純的文字是沒辦法讓設計師們耐心的看下去的,所以網頁寄存還是老辦法,用示圖來作為講解模型。這次我們使用的網頁是微軟、IBM、ASTRO三個公司網站來講解。希望通過分解這三個公司網站設計,能把我所理解的柵格設計傳達出來。看示圖:   我們看到微軟公司server4.htm' style='text-decoration:none;' >網站設計中並沒有什麼明顯的線去區隔不同的區塊,但是當我們把當蒙上一層紗,然後用實線把每個部分都畫出來這時我們發現這個網站其實是處在一個柵格陣列中。那麼這個陣列中的內容已經很明顯了,並且我們從中發現了很多區塊在頁面中的位置居然是那麼的有條理,並且有一些並不在一起的區塊,居然也有一定的規律。當然有人可能會說,都用線畫出來了當然顯得條理,整齊了SEO。問題就在於這裏,我們的網站都可以用縱橫線區分開。但是一些設計得不好的網站的縱橫線可能數量非常的多,縱橫線的數量過多並且都擠在一直,這就說明網站的佈局顯得太亂。或者是過於條理而變得佈局平均,沒有對比,缺乏美感。其實只要用這樣的方法去分析一下自己設計的作品也許就能從中看到問題所在。

2013年10月23日星期三

網頁設計必知的17條原則

網站中有哪些關鍵技巧?有哪些陷阱?在這裏,世界上一流的網站設計專家,讓你共用他們的秘密,告訴你:使Web Design賦予情趣的訣竅、應該避免做什麼、應使用什麼工具軟體以及他們喜愛和厭惡的網站。 01 明確內容 如果你想成為一個網站設計者,並正想建一個網站的話,首先應該考慮網站的內容,包括網站功能和你的用戶需要什麼。你的整個設計都應該圍繞這些方面來進行。 02 抓住用戶 如果用戶不能夠迅速地進入你的網站,或操作不便捷,網站建設就是失敗的。不要讓用戶失望而轉向你的對手的網站。 03 優化內容 內容是核心。大約在兩年以前,企業網站就像一本廣告冊子,更槽糕的是,網站使用了大量的圖片,似乎要幾個世紀才能下載完。 04 快速下載 沒有什麼比要花很長時間下載頁面更槽糕的了。作為一條經驗,一個標準的網頁應不大於60K,通過56K數據機載入花30秒的時間。有的設計者說網頁載入應在15秒內。 05 網站升級 時刻注意網頁設計模板的運行狀況。性能很好的主機隨著訪問人數的增加,可能會運行緩慢。但是,如果你不想失去訪問者的話,一定要仔細計畫好你的升級計畫。 06 堅持基本原則 即使你不懂HTML語言,你只需購買一個有版權的所見即所得的網頁server3.htm' style='text-decoration:none;' >設計工具,如Adobe PageMill 或 Microsoft FrontPage Express,就可以創建一個看起來很合理的網站。但是,在設計時,這些套裝軟體雖然不需要HTML,卻使網站速度下降。為了成功地設計網站,你必須理解HTML是如何工作的。大多數的網站server4.htm' style='text-decoration:none;' >設計者建議網路新手應從有關HTML的書中去尋找答案,用Notepad製作網頁。 07 學習HTML 用HTML設計網站,可以控制設計的整個過程。但是,如果你僅僅是網站設計的新手,你應該尋找一個允許修改HTML 的套裝軟體。HomeSite4是一個很好的Web設計工具。在設計過程中,HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式,以便你在把網站發送到Web之前,預覽你的網站。 08 用筆劃一個網站的框架 聖人雲:筆比劍更強大。在用電腦之前,用筆劃一個網站的框架,顯示出所有CMS網頁的相互關係。計畫好你的用戶如何以最少的時間流覽你的網站。 09 “在電腦上永遠也找不到好的方案”。 ——專家忠告 10 網站地圖 許多設計者把他們的網站地圖放在網站上,這種做法,卻是弊大於利。絕大部分的訪問者上網是尋找一些特別的資訊,他們對於你的網站是如何工作的,並沒有興趣。如果你覺得你的網站需要地圖,那很可能是需要改進你的導航和工具條。 11 “睜大你的眼睛,留意所有的事情。” “對最不相關的東西的觀察可以得到最好的靈感。觀察一個站點的結構和設計。理解站點結構的關鍵元素,確保你的設計是圍繞站點流覽進行的。” ——專家忠告 12 點擊規則 聽說過3次點擊規則嗎?對於小型網站,在你的主頁上,沒有任何一條資訊,需要點擊次數超過3次的。對於大型網站,使用導航和工具條來改善操作。 13 特殊字體的應用 雖然你可以在你的HTML中使用特殊的字體,但是,你不可能預測你的訪問者在他們的電腦上將看到什麼。在你的電腦裏看起來相當好的頁面,在另一個不同的平臺上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性,這雖然允許你使用特殊的字體,但是仍需要一些變通的方法,以免你所選擇的字體在訪問者的電腦上不能顯示。級聯風格表CSS有助於解決這些問題,但是只有最新版的流覽器才支持CSS。 14 “使用切合實際的簡便的命名規則。” ——專家忠告 15 檢查錯別字 好的拼寫是人們一生中重要的技能。但是遺憾的是,許多設計者都缺少這種技能。確保你拼寫正確,並且格外注意平常容易誤寫的錯別字。 16 避免長文本頁面 在一個站點上有許多只有文本的頁面,是令人乏味的,且也浪費Web的潛力。如果你有大量的基於文本的文檔,應當以Adobe Acrobat格式的檔形式來放置,以便你的訪問者能離線閱讀。 17 不要使用卷滾條 人們厭惡在網上使用卷滾條。Trouble網站(www.Trouble.co.uk)是一個典型的設計很差的網站。它基於一個浮動的架構,為了閱讀所有的文本,流覽者不得不使用卷滾條。

 問題2:ASP的Web擴展配置不當(同樣適用於ASP.NET、CGI)

症狀舉例:   HTTP 錯誤 404 - 檔或目錄未找到。   原因分析:   在網頁設計模板中新增了web程式擴展這一選項,你可以在其中對ASP、ASP.NET、CGI、IDC等程式進行允許或禁止,默認情況下ASP等程式是禁止的。   解決方法:   在IIS中的Web服務擴展中選中Active Server Pages,點擊“允許”。   問題3:身份認證配置不當   症狀舉例:   HTTP 錯誤 401.2 - 未經授權:訪問由於伺服器配置被拒絕。   原因分析:IIS 支援以下幾種 Web 身份驗證方法:   匿名身份驗證   IIS 創建 IUSR_電腦名稱 帳戶(其中 電腦名稱 是正在運行 IIS 的伺服器的名稱),用來在CMS匿名用戶請求 Web 內容時對他們進行身份驗證。此帳戶授予用戶本地登錄許可權。你可以將匿名用戶訪 問重置為使用任何有效的 Windows 帳戶。   基本身份驗證   使用基本身份驗證可限制對 NTFS 格式 Web 伺服器上的檔的訪問。使用基本身份驗證,用戶必須輸入憑據,而且訪問是基於用戶 ID 的。用戶 ID 和密碼都以明文形式在網路間進行發送。   Windows 集成身份驗證   Windows 集成身份驗證比基本身份驗證安全,而且在用戶具有 Windows 域帳戶的內部網環境中能很好地發揮作用。在集成的 Windows 身份驗證中,流覽器嘗試使用當前用戶在域登錄過程中使用的 憑據,如果嘗試失敗,就會提示該用戶輸入用戶名和密碼。如果你使用集成的 Windows 身份驗證,則用戶的密碼將不傳送到伺服器。如果該用戶作為域用戶登錄到本地電腦,則他在訪問此域中的網路 電腦時不必再次進行身份驗證。   摘要身份驗證   摘要身份驗證克服了基本身份驗證的許多缺點。在使用摘要身份驗證時,密碼不是以明文形式發送的。另外,你可以通過代理伺服器使用摘要身份驗證。摘要身份驗證使用一種挑戰/回應機制(集成 Windows 身份驗證使用的機制),其中的密碼是以加密形式發送的。   .NET Passport 身份驗證   Microsoft .NET Passport 是一項用戶身份驗證服務,它允許單一簽入安全性,可使用戶在訪問啟用了 .NET Passport 的 Web 站點和服務時更加安全。啟用了 .NET Passport 的站點會依靠 .NET Passport 中央伺服器來對用戶進行身份驗證。但是,該中心伺服器不會授權或拒絕特定用戶訪問各個啟用了 .NET Passport 的站點。   解決方法:   根據需要配置不同的身份認證(一般為匿名身份認證,這是大多數站點使用的認證方法)。認證選項在IIS的屬性->安全性->身份驗證和訪問控制下配置。

網頁設計之伺服器架站無法訪問解決方法

很多朋友在用IIS6架網站的時候遇到不少問題,而這些問題有些在過去的IIS5裏面就遇到過,有些是新出來的,俺忙活了一下午,做了很多次試驗,結合以前的Web Design經驗,做出了這個總結,希望能給大家幫上忙:)   問題1:未啟用父路徑   症狀舉例:   Server.MapPath() 錯誤 'ASP 0175 : 80004005'   不允許的 Path 字元   /0709/dqyllhsub/news/OpenDatabase.asp,行 4   在 MapPath 的 Path 參數中不允許字元 '..'。   原因分析:   許多網站建設頁面裏要用到諸如../格式的語句(即回到上一層的頁面,也就是父路徑),而IIS6.0出於安全考慮,這一選項默認是關閉的。   解決方法:   在IIS中屬性->主目錄->配置->選項中。把”啟用父路徑“前面打上勾。確認刷新

2013年10月22日星期二

GOOGLE官方對網頁設計方案的一些建議

本文介紹GOOGLE官方對網站建設方案的一些建議。   Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.   讓網站有著清晰的結構和文本鏈結,所有的頁面至少要有一個靜態文本鏈結入口   批註:儘量不要用圖片和JAVASCRIPT   Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.   為用戶提供一個站點地圖:轉向網站排名的重要部分。如果站點地圖頁面超過100個鏈結,則需要將頁面分成多個頁面。

下面我們再來看一下IBM的網站的分解圖:

我們看到IBM的柵格與MS的有很大的不同,IBM中還出現了一些差不多大的柵格CMS,但是這裏要注意其實這些柵格是由於底部很小的幾個區塊所產生的,並且這凡個區塊還可以看作是一個橫向的區塊。我們從這裏可以看到IBM的佈局設計是對稱的。但是這種對稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。   我們再來看看ASTRO公司網站,這個網站比起上面兩個公司網站就更娛樂化,更有趣了。   從這三個網站排名中我們可以看到三種不同風格的柵格設計,雖然有所不同,但我們依然可以發現三者都會盡可能的把最重要的資訊放在視覺中心點上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區,得到了足夠的重視!我們的視覺中心也自然盯在了上面!   說到這裏我依然覺得沒能把柵格設計的作用講明白。

從平面柵格Web Design看佈局

網頁設計中的髒、亂、差,是我們在設計過程中常會遇到的問題。通常"髒"是由對色彩使用不當所產生的,而色彩使用不當產生的不好效果也分為:"花、灰",花哨、灰頭土臉也就是這裏所說的"髒"。而"差" 基本上是由於我們的技法上不夠嫺熟所產生的。比如細節上的處理不到位,某個局部的效果製作得粗糙。這可以稱之為"差",特別是在處理帶有2D效果的設計作品時,這種情況常會出現。但是我今天在本文中所要談的是"亂"。   什麼是亂?這裏的亂不是指用色亂,也不是指內容亂,而主要是指網頁佈局亂。以前我有幸接觸了平面設計,並且網站建設從中學到了很多平面設計上的一些知識與技法。其中“柵格設計”就是平面設計中用於處理佈局的一種理論。到目前為止我還在研究"柵格設計"。因為著實沒有什麼比較好的語言可以非常簡潔明瞭的概括這個詞。這更像是需要不斷用實踐去理解的。所以很多時候我們們都無法去講述。但是在設計中這個柵格卻是能幫助我們完成更好作品的一個非常好用的利器。對於柵格設計我也不能說是認識深刻,我這裏只是依據我對於柵格設計的理解,將之用於server4.htm' style='text-decoration:none;' >網頁設計中,希望能給更多的朋友們一點啟示,或許能打開一些朋友的思路。   單純的文字是沒辦法讓設計師們耐心的看下去的,所以網頁寄存還是老辦法,用示圖來作為講解模型。這次我們使用的網頁是微軟、IBM、ASTRO三個公司網站來講解。希望通過分解這三個公司網站設計,能把我所理解的柵格設計傳達出來。看示圖:   我們看到微軟公司網站設計中並沒有什麼明顯的線去區隔不同的區塊,但是當我們把當蒙上一層紗,然後用實線把每個部分都畫出來這時我們發現這個網站其實是處在一個柵格陣列中。那麼這個陣列中的內容已經很明顯了,並且我們從中發現了很多區塊在頁面中的位置居然是那麼的有條理,並且有一些並不在一起的區塊,居然也有一定的規律。當然有人可能會說,都用線畫出來了當然顯得條理,整齊了SEO。問題就在於這裏,我們的網站都可以用縱橫線區分開。但是一些設計得不好的網站的縱橫線可能數量非常的多,縱橫線的數量過多並且都擠在一直,這就說明網站的佈局顯得太亂。或者是過於條理而變得佈局平均,沒有對比,缺乏美感。其實只要用這樣的方法去分析一下自己設計的作品也許就能從中看到問題所在。

2013年10月21日星期一

2.繪製佈局表格

如果你對範本中提供的佈局表格不太滿意,還可以用手工繪製的方法創建一個佈局表格。創建時首先在“新建表格和單格”項中單擊“繪製佈局表格”,隨後將指標移到操作視窗最左端,然後拖動滑鼠即可繪製表格。   3.設定表格內容   插入表格後,還需對表格內容進行設定。在“表格內容”項中設定該表格所需的內容。   提示:在設定表格時,如果要想覆蓋Web Design的預設邊距,並讓佈局表格跨到文檔視窗的邊緣,可以將表格中的各個邊距的內容都設定為0。   在設計框架時經常需要調整某一行或列的內容,這時可以通過表格中列寬和行高的標籤來完成。在操作視窗中單擊佈局表格需要調整的邊框,每一側都會出現顯示列寬和行高的標籤。每個標籤都包括一個下拉箭頭,如更改行高度時,單擊此下拉箭頭彈出一個下拉功能表,選擇“更改行高”命令,在彈出的“行內容”對話方塊中重新輸入該行高度值即可。   FrontPage2003還提供了一個表格自動功能,它可以按照比例自動伸縮,調整表格的寬度和高度,使用時在邊距標籤下拉功能表中選擇“自動伸縮”命令即可快速地對表格的尺寸進行調整,非常方便。

1.創建佈局表格

打開一個空白網頁設計,並切換到“設計”視圖下,單擊“表格”功能表中的“佈局表格和單格”命令,隨後在右側彈出一個任務視窗(圖1),在該任務視窗下面程式提供了多種表格佈局範本,在此單擊其中需要的範本即可將該範本添加到網頁中。

佈局表格

很多朋友對FrontPage2003中增加的網頁設計佈局功能很感興趣,現在我們一起來深入瞭解這一實用功能。   用FrontPage2003的“佈局表格和單格”功能佈局Web Design時,需要通過兩部分來完成。   首先通過“佈局表格”功能來為網頁佈局創建一個框架,然後通過“佈局單格”功能為該框架填充包含有網頁內容(包括文本、圖像、Web部件和其他元素)的區域,也就是單格。   下麵我們就以設定一個單位server3.htm' style='text-decoration:none;' >網站首頁為例來瞭解一下用佈局表格給網頁佈局的過程。

2013年10月20日星期日

一定程度上的分層

網頁是一種超文本。超文本的本質就是無限的鏈結與跳轉。在網頁中點擊預置的鏈結,輕鬆地就可以跳轉到另一個網站或另一個網頁。這個特徵對於網路版的網頁結構有著決定意義。    資訊必須按照便於流覽與查找的方式進行結構化的組織,這是一切成功的資訊系統的起碼要求。報紙印刷版中運用種種手段進行版面分割、設置"引導點",為專輯、專版、專欄等規定某種固定的版次關係,類似的這些做法,都是在為資訊的結構化作努力。由於網頁的超文本特性,一者,網頁尺寸過大的問題可以避免,二者,網頁獲得良好結構化的希望有了邏輯上的堅實基礎,設計高效實用的導航(導覽)系統也有了物理的基礎。    從整體上構思網路版的結構,首先必須考慮一定程度上的分層。最頂層的導航頁就是分層的起點,從這裏讀者流覽全部內容的概況,以便迅速確定下一步的跳轉方向。雖然分層是明晰與簡化結構的好方法,但也必須節制,不可過細、過深。如果從起始頁出發需要點擊(連接)超過三次或四次才看到想要的內容,這對讀者的耐心多少會是一個考驗。    有的報刊印刷版在概念上有較多的層次,如錢江晚報,在日常版面之外另有七個週刊,分別安排在週一至周日,每個週刊各含幾個專版,專版下又含專欄(多數欄目實際一次只含一篇文章)。如果直接照搬上述層次關係,按"起始頁總目(含週刊目錄)->專版目錄->專欄目錄->圖文目錄->圖文"這樣的層次結構,計數箭頭就知道,從頂層頁面到底層內容頁面需要點擊(連接)四次。我們在實際構思中,網頁結構按縮減的"起始頁總目(含週刊目錄)->專版目錄及圖文目錄->圖文"的層次。在第二層的頁面上,右邊是本期週刊全部圖文的目錄(鏈結),它們按專版分區排列,左側是本期週刊的專版目錄(鏈結),各鏈結即指向本頁右邊的各專版圖文目錄區,進入本頁後,既可點擊左側鏈結通過頁內跳轉到達某個專版的圖文目錄區,也可通過滾屏找到該專版的圖文目錄區,隨後找到新聞標題。在這個簡化的層次結構中,從頂層起點擊兩次或三次就可以連接到新聞(重要新聞通過起始頁的導讀區可以一次點擊連到)。

十分"簡單"

報紙的網路版發佈後,與網上讀者直接見面的就是網頁,大致可以說 ,它對應於紙介印刷版的版面。顯然,相對于傳統的版面,網路版的網頁設計意味著新的特徵和新的可能。這些隨網際網路技術發展而不斷擴展的新可能無疑是令人興奮的,但其中也暗藏"陷阱"。確有不少Web Design者情不自禁地在作品中過多地置入自賞或炫技的成份,導致網頁外觀或結構的缺陷,影響了流覽效果。    浙江日報網站籌建經歷數月,我有幸參與其中,組織實施網路版網頁的構思與設計製作。這項富有挑戰性的工作,自然首先是一個學習的過程、創意的過程,但從前述意義來說,倒更是一個不斷抗禦誘惑而趨向堅定和成熟的過程。    1999年元旦上網的浙江日報網路版實際包含浙江日報等六報一刊,這是一個比較複雜的網路版系列。但其網頁總體設計要求卻十分"簡單":在符合各報刊印刷版根本定位與基本風格的前提下,實現高效的結構佈局與清新的視覺效果。    我們曾大量流覽國內外報刊網路版,發現相當多的網頁設計中一味追求華麗的視覺印象。雖然可能某些地方也頗具特色,但這未必使得網頁外觀更加賞心悅目,也未必使得流覽過程更加便捷愉快,因此整體上就不能說是成功的。有鑒於此,又衡量了實際可用的設計時間與設計力量,我們考慮:浙江日報網路版的網頁設計不妨一反通常設計者對於精美別致的追求,只求高效與清新,這樣仍有可能在眾多國內報刊網路版中獨樹一幟,躋身一流行列。    這個要求如何實現?隨著網站設計的展開,逐漸明確了兩個字-簡單。網頁中除內容以外的物件都力求簡單,這最終成了浙江日報網路版網頁設計的原則之一。

站點地圖

現在,互聯網上已經有了成千上萬的網站,如果某類server3.htm' style='text-decoration:none;' >網頁寄存是專門賣電腦的,那麼我可以保證它們的風格一定都是差不多的。將你的網站建設的與眾不同可以讓人們更好地記住你的網站。同樣地,當他們希望獲取的服務恰巧是你的業務範圍之內的,那麼他們肯定會最先考慮你   Normally, web design website forgive visitor the information of product or service or organization. So, if your website was design well, it will make your products or services have the credibility, especially the content that must be clear and easy to read.   通常情況下,網頁設計網站能夠幫助訪問者更好地瞭解產品、服務或組織的資訊。所以,如果你的網站設計得很好,特別是內容清晰易讀,那麼這樣就可以使客戶對你的產品或服務產生一種信賴感。   Nowadays, there are millions of Web Design,and I'm sure that there are not too different in the style of Web Design because they are shown in the same type of computer. Designing your website to be conspicuous will make people remember and think of your website. Also, when they want to use service that is involve your business, they will think of you first.   現在,互聯網上已經有了成千上萬的網站,如果某類網站是專門賣電腦的,那麼我可以保證它們的風格一定都是差不多的。將你的網站設計的與眾不同可以讓人們更好地記住你的網站。同樣地,當他們希望獲取的服務恰巧是你的業務範圍之內的,那麼他們肯定會最先考慮你。   So, this is Tips and Tricks on Effective Web Design    因此,下面我將把有效的網頁設計提示和竅門推薦給你:    Time to Load 15 Seconds per 1 page. If your webpage is loaded more than that, it's too slow. Your visitors may change to see other websites because they don't like to wait. For those who use Dreamweaver can use a tool to check load time.Or you can check at http://www.alexa.com.   下載時間——最好是15秒內下載一頁。如果你的網頁載入時間超過了15秒,那麼這就太慢了。你的訪問者可能會選擇去其他網站,因為他再也不願意等待這麼長的時間。對於使用Dreamweaver開發的人來說,可以使用特定的工具來檢測下載時間。或者,你可以在http://www.alexa.com處檢測。    Match you product For example, If you are selling Mobile phone, design your website in modern style.   匹配你的產品——舉個例子來說,如果你是銷售手機的,網站就應該設計得時尚點。   Layout Think about your layout that must be suitable for your content in website. You may use the table. Tables load very fast because it is HTML code. You can use it everywhere you like: menu, home page, etc.   佈局——好好分析一下你的佈局,這些必須和網站的內容相適應。你可以使用表格來佈局。使用表格可以加快下載速度,因為它是HTML代碼,並且你可以在任何一處使用它,如:菜單、首頁。    Images Images can make your site look good, but it must suite for your content. Also, keep in mind that they take a long time to load, so use few images or thumbnail images per page that link to the bigger ones.   圖像——圖像可以使你的網站看上去感覺非常好,但是它必須和你的內容相符合;同時不要忘了,它會花去很長的載入時間。所以盡可能的使用小圖,然後設定為通過點擊後鏈結到大圖。    Information or Content Make sure that your information is clear and easy to understand. Split things up into paragraphs or sections. Don't make your page too long and avoid lots of text. If your content is very long, split into 2 or 3 pages. Note that people don't read but they skim it.   資訊或內容——確定你的資訊是清晰易懂的,並且將所有的東西拆分成些許段落和片斷。盡可能不要讓你的頁面看上去太大,因此,需要儘量避免使用大篇幅的文章。如果文章的內容確實很長,盡可能把它分成2-3頁顯示,這樣可以暗示閱讀者,如果他們不想讀了,可以把它撇去。    Link Organize your links to be easy for understanding. Try to have a menu to go to other parts of your website in every pages. Don't make your visitors click on Back Button. Also it's look good, if you have a link to the top of page like "Go to Top". Also avoid of the broken link.   鏈結——鏈結也需要通俗易懂。最好在每個頁面上安上一個功能表,訪問者可以通過這個功能表訪問站點中的所有頁面。儘量不要讓訪問者點擊“返回”按鈕;你也可以放上“返回頁首”的鏈結;還有很重要的一點就是:避免出現無效的鏈結。    Logo Design your logo to match your website. Make your logo easy to remember and prominent.   Logo——設計一個與你的網站相匹配的logo。使你的logo看上去清晰可辨、效果凸顯。    Color of Backgrounds and Text A good background is not only a white page but also other colour. Be careful to choose a background and text color that is not overpowering to the eyes. Note that it must be readable.   背景顏色和文本顏色——一個優秀的背景色可以是白色,同樣也可以是其他的顏色。選擇的背景色和字體顏色對比度不能太明顯,不能太刺激視覺。確定它的易讀性。    Community People will like your website if there is something to do on your website. Add something like vote, forum or guest book etc.   社團——如果人們可以在你的網站上做些事情,那麼他們就會非常願意訪問你的網站。因此,你可以在網站上加一些類似於投票、論壇或留言本一樣的功能。    Keep it simple You don't have to use advance technology to your web site. Believe me most of people find free in formation, so you just make your site easy to understand and dynamic content .Also, use simple language in you website.   保持簡單的風格——你不必使用高深的網路技術來創建你的server1_A.htm' style='text-decoration:none;' >網站。相信我,大多數人都對站點的訪問輕鬆自由,因此,你必須使你的網站簡明易懂,適當時,可以加上一些動態的內容。還有就是要在網站上使用簡單的語言。    Site Map, Contact Us Don't leave them. Site Map may help your visitors find pages, when they get lose and it also good for search engine. As for Contact Us page, it's made when people want to contact you for any suggestion, especially you will get visitors' E-mail for E-mail marketing.   站點地圖、聯繫我們——不要放棄它。當人們在網站中迷失方向時,站點地圖將幫助訪問者查找頁面,這同樣對搜索引擎的搜錄也大有好處。如“聯繫我們”頁面,當人們希望為你提出一些意見時,它就派上用場了,特別是你將獲取訪問者的E-mail來瞭解E-mail市場。    Try out CSS Styles Designing website with CSS Styles in your website will reduce the code in your website that can load faster.   使用CSS樣式——使用CSS樣式來設計你的網站將會減少網站中的代碼量,並使你的網站載入速度更快。    Flash Be careful because it's make your website beautiful but search engine don't like Flash and it take long time to load. However, if you really want to use flash, use it within an HTML site and make sure it load fast.   Flash——特別要注意的是,使用flash可以使你的網站看上去更加美觀,但是搜索引擎卻不會搜錄它,而且它也會延緩頁面的載入速度。如果你希望使用flash,盡可能將它用在HTML站點中,並保證載入時間不要太長。    Free Service Give your visitors some free service. It may make your customer impressive your site   免費服務——為你的訪問者提供一些免費服務,這會使訪問者對你的網站留下深刻的印象。

2013年10月18日星期五

不要為圖像加入太長的交互文本

使用“ALT=”為圖像加入交互文本是一個好習慣,因為並不是所 有的人都打開圖像載入開關的,這時候這些交互文本給了用戶一個有用的提示,特別是一些連接。但有部分網頁設計製作者為圖像加入了很長 的交互文本,當用戶載入圖像時,這並不影響結果;但如果用戶不載入圖像,流覽器就會將所有的文本都顯示出來,以致超出了它本來的 寬度、或高度,對網頁原來的排版影響很大。 例如廣州市某免費個人主頁提供商的Web Design,我開始在關閉圖像載 入的情況下訪問,結果該網頁亂七八糟,而且需要使用捲軸才能全部流覽,每個文字連接都被前面的圖像逼得排成兩行,很不順眼!後來我打開圖像載入再去訪問該站時,發現網頁server4.htm' style='text-decoration:none;' >設計原來很整齊。那些用檔案名和長度作為交互文本的圖像只是一些長度、寬度都很小的裝飾圖 案,但因為交互文本太長了,所以才造成了混亂!

一、缺乏統一客戶戰略的典型表現。

其實,在CRM專案實施過程中,企業用戶到底有沒有統一的客戶管理戰略,是很容易看出來的。通過用戶專案中的表現、軟體規劃等等就可以看出企業是否在客戶關係管理上有一個統一的規劃。如以下幾種表示方式就可以說明企業不注重客戶管理戰略,這會給CRM專案帶來負面作用。 表現一:客戶關係管理系統工具眾多但是各自為政。 筆者有一次給一家企業實施CRM項目。在進行前期需求調研的時候,他們給我搬出了一大堆軟體。利用ACCESS資料庫來管理客戶基本資訊;利用進銷存管理軟體來管理客戶的信用額度;利用Excel表格來管理客戶滿意度調查;利用OA系統來管理客戶的開發過程,等等。但是,這些軟體之間相互獨立,各自為政。所以,當企業增加一個新客戶時,需要在這麼多的軟體中去跑一圈。故客戶關係管理,不僅沒有給企業帶來多大的效益,而且還讓銷售人員疲於奔命,抱怨連天。 在現實中這類企業有很多。他們通過一系列軟體已經實現了部分管理的功能。但是,因為他們沒有能夠進行無縫集成或者作為一個整體來考慮。這就直接導致了CRM管理事與願違,無法達到預期的目標。 表現二:公司在CRM專案實施之前無法確認他們的目標。 筆者在實施CRM項目的時候,總會問用戶他們希望使用了CRM System之後能夠達到什麼樣的目標。這有助於筆者瞭解他們對CRM系統的期望度,看看他們是否對CRM軟體有過高的期望。但是,沒有幾個用戶能夠比較有系統的回答這個問題。有些用戶會說能夠幫助他們解決工作中遇到的問題。但當問到他們工作中遇到什麼樣的難題時,他們又模棱兩可了。而有的用戶呢,就只會唱高調。如要新客戶的開發成功率要達到90%。但是,當筆者問他們現在新客戶的成功率有多少時,他們又無語了。 正式由於大部分企業在CRM專案實施之前無法確認他們的具體目標,所以在CRM專案實施的時候,也沒有參考的物件。所以不少企業的項目成員,包括實施顧問,都有得過且過,做一天和尚撞一天鐘的現象。反正做好做壞都一個樣。在這種觀念的影響下,CRM專案的實施效果很難提高上去。 表現三:CRM涉及不深入,效果不明顯。 據筆者瞭解,大部分企業在採用CRM軟體來管理客戶關係的時候,都只是停留在表面上。如只是對客戶交易記錄、客戶情況進行簡單的紀錄。而沒有對CRM軟體的功能進行深層次的挖掘。如沒有利用客戶生命週期管理模型或者金字塔管理模型對客戶進行分級管理;如沒有利用CRM系統對客戶進行利潤貢獻率分析等等。而只是把CRM軟體當作一個記賬工具。如此的話,CRM軟體使用率其實只有10%左右。由於沒有採用CRM軟體的分析工具,故採用了CRM軟體後取得的效果,其實跟手工管理效果差不了多少。只是企業的名聲好聽多了。對外面說說,總算是上了CRM軟體。

如何共用Win XP中的EFS加密檔案

EFS作為一種安全性較高的加密方式一直深受大眾的喜愛。但是在Windows XP以前,EFS加密是不支援共用的,這就意味著被加密的檔案只能由加密操作者或安裝了加密證書的用戶查看,給網路上的共用造成一些不便。 微軟認識到了這個問題,在Windows XP Professional的EFS版本中,加入了共用的特性。要共用一個被EFS加密的檔案,必須由系統管理員或檔案加密操作者操作,否則會在操作過程中出錯。具體操作步驟如下: 1.用管理員組裏面的帳戶或EFS加密創建者帳戶登錄Windows,然後打開被加密的資料夾(因為EFS是對檔案加密,不是對資料夾加密,所以其他用戶也可以打開資料夾),右擊要共用的被加密的檔案,選擇“屬性”,打開檔案屬性對話方塊。 2.在“常規”選項卡中點擊“高級”按鈕,在“高級屬性”對話方塊裏點擊“詳細資訊”按鈕;然後點擊“添加”按鈕,添加另外一個用戶的EFS證書,在用戶證書列表裏面選擇一個證書,然後點擊“確定”按鈕完成添加工作。 注意:該證書只有在第一次使用EFS時才會被創建,因此要讓別的用戶能夠查看被EFS加密的檔案,必須先創建這個證書,也就是說其他用戶必須先使用一次EFS加密。 3.依次點擊“確定”按鈕,退出全部對話方塊即可完成EFS加密檔案的共用操作。 注意: 1.以上操作在Windows XP Professional裏面試驗成功,Windows XP Home Edition不支持EFS,所以是無法操作的。 2.執行前必須確認操作者對於被加密的檔案具有寫操作許可權或修改許可權(對於Office文檔案),否則執行過程中會出現錯誤。 3.使用EFS以後,如果碰到需要重新安裝作業系統、甚至是修復安裝時,都必須事先備份加密證書,否則重新安裝/修復安裝完成以後,以前被加密的檔案將無法打開。 小知識:EFS是加密檔案系統(Encrypting Files System)的英文縮寫,是自Win 2000以來微軟為了提高檔案的安全特性在NTFS檔案系統中引入的一種核心檔案加密技術。EFS對加密該檔案的用戶是透明的,不必在使用前手動解密,可以正常打開和更改檔案。

2013年10月17日星期四

2、活用Format Table命令   

在複雜的Web Design中,表格的應用是最多的,因為利用表格可以自由地控制文本和圖像在網頁上出現的具體位置,從而使整個網頁設計看上去緊湊統一。Dreamweaver在這方面也不甘落後,我們可以使用其中的“Format Table”(格式化表格)命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式,先將游標置於表格的任意一個單格內,再選擇“Command”→“Format Table”命令, 在隨後出現的對話方塊中,從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果,如果不滿意的話,還可以重新設置或者修改部分參數的值,如邊界粗細,背景顏色等等。

1、靈活運用樣式   

熟悉網頁設計的網友就知道,調用Style的方法很多,我們可以單擊滑鼠右鍵選擇Custon Style來調用Style標準,也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣,但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準,在網頁代碼中就生成一個〈span〉標籤,這樣的標籤一多就會使檔十分臃腫而且影響流覽器的解析速度,所以我們應儘量使用狀態欄中的元素列表來調用Style。

快去的也快

在經濟不景氣的時代,客戶總是會比較哪些比較便宜,比較適合自己。目前在網頁設計這項行業裡,因SOHO族的出現,業界價格已出現差異極大的差距。選擇好的Web Design公司幫您製作網頁前,應先注意到下列幾點: 是公司還是個人(工作室)? 全香港從事網頁設計的人或是公司,粗估約有 2000 多家,但真正經營超過1年以上的,卻不到10分之1( 因為一堆學了軟體就自以為可以靠網頁設計網頁寄存 (web Store)維生的人,通常第一年就會被市場淘汰!),經營超過2 年以上的公司,大概不到100分之1 ( 因為僥倖撐過第一年,卻因為管理不當或是擴充太快,或是借錢死撐的人,通常在不可能撐到第3年,因為網頁設計這行,進入容易,深入難;賺錢容易,穩定難 ),所以一般只要撐過 2 年的Web Design公司,其實就算是很穩定的公司,這種廠商的可靠度會比兼職的個人要來的好很多!一般來說,不建議消費者去找個人做網頁設計,因為千萬別以為個人或工作室的價格會比較低喔!因為他可能1、2個月才有一個案子,所以反而容易獅子大開口( 尤其是熟人介紹! ),就算個人用較低的價格來承接您的案子,可是因為錢少、事多,再加上他本身可能還有工作,所以客戶很容易就變成"網站孤兒"!付了錢之後找不到人的情況比比皆是,或是請他改東西要增加費用之類的…造成消費者不愉快的經驗,這也是很多人對網頁設計這行有很深的偏見的主因( 因為很多人被這種惡質的個人工作室騙過!)  例如:本站的作品有超過200件以上,詳見作品集 網頁設計是一門很競爭的行業,很多廠商來的快去的也快,很消費者常常會抱怨,為什麼我找的網頁設計廠商經常會惡性倒閉,找不到人,所以在選擇網頁設計公司的時候,建議不要用價格來做唯一考量,更要考量該公司的穩定性,一般來說,如果在網頁設計業界有超過100件作品的公司,都是相對較可靠的公司,畢竟做過那麼多作品,一定累積了很多經驗及技術,再加上有這麼多作品,相信收入也是很穩定。較小家的工作室或是個人,由於是白天有工作,或是兼職經營所以他的作品量一定不多,收入也不多,所以很容易就放棄從事Web Design,而去另覓其它工作 是否有固定室內電話及地址? 不要懷疑,很多Web Design廠商,他們的網站上你會找不到室內電話或是地址!,通常是個人工作室較多~只留手機的網頁設計廠商,通常是個人兼職(如果是網頁設計公司的話,通常會留公司地址及電話),為什麼只留手機或是只用email聯絡呢?當然是為了惡性倒閉時,讓你找不到@@,或是他留室內電話不留地址~也是一樣的道理,建議你要做網頁的時候,親自去一趟對方公司了解,這樣會比較有保障! 是否有提供全方位的服務?  有相當多半調子的廠商,或是投機的個人,經由一般坊間的電腦補習班洗腦,以為上了他們的課程就能夠來從事網頁設計這行,但這行要懂的技術實在太多,不是能夠在短時間內就讓一般人學得精通的,所以這些廠商本身通常只有提供單一服務,例如只提供美工設計、或是程式設計、或是主機租賃,但也有些廠商不會跟消費者講,而是先承包下來再轉發包出去,使得消費者在無形之中又被多賺了一筆!而事後維護通常會更麻煩,因為不是他負責的部份,他一定不幫客戶維護,是他負責的部份,他也會說不是他的問題,而要客戶再多增加費用

2013年10月16日星期三

JPEG文件的副檔

三、JPEG 圖像檔 JPEG文件的副檔名為.jpg或.jpeg,其壓縮技術十分先進,它用有損壓縮方式去電子商務除冗餘的圖像和彩色資料,獲取得極高的壓縮率的同時能展現十分豐富生動的圖像,換句話說,就是可以用最少的磁碟空間得到較好的圖像品質。 JPEG 2000同樣是由JPEG 組織負責制定的,與JPEG相比,它具備更高壓縮率以及更多新功能的新一代靜態影像壓縮技術。 JPEG2000 作為JPEG的網站排名升級版,其壓縮率比JPEG高約30%左右。與JPEG不同的是,JPEG2000 同時支持有損和無損壓縮,而JPEG只能支援有損壓縮。無損壓縮對保存一些重要圖片是十分有用的。 JPEG2000的一個極其重要的特徵在於它能實現漸進傳輸,這一點與GIF的“漸顯”有異曲同工之妙,即先傳輸圖像的輪廓,然後逐步傳輸資料,不斷提高圖像品質,讓圖像由朦朧到清晰顯示。 此外,JPEG2000還支援所謂的"感興趣區域"特性,你可以任意指定影像上你感興趣區域的網頁設計公司壓縮品質,還可以選擇指定的部份先解壓縮。 使用jpg圖像的注意點:在圖像品質和檔尺寸之間找到平衡點。一般80%的壓縮率是比較合適在網頁中使用的。

GIF 圖像檔

二、GIF 圖像檔 GIF格式的特點是壓縮比高,磁碟空間佔用較少,所以網頁寄存這種圖像在網頁中運用很多。 GIF的兩種版本: GIF87a:只是簡單地用來存儲單幅靜止圖像。 GIF89a:可以同時存儲若干幅靜止圖像進而形成連續的動畫,使之成為支持 2D動畫的格式。可指定透明區域,使圖像具有非同一般的顯示效果,這更使GIF風光十足。目前Internet上大量採用的彩色動畫檔多為這種格式的檔。圖元畫。QQ秀,QQ空間等N多QQ的東西。 GIF圖像格式還增加了漸顯方式,也就是說,在圖像傳輸過程中,用戶可以先看到圖像的CMS大致輪廓,然後隨著傳輸 過程的繼續而逐步看清圖像中的細節部分,從而適應了用戶的 "從朦朧到清楚"的觀賞心理。 由於8位元存儲格式的限制,使其不能存儲超過256色的圖像,適合在圖片顏色總數少於256色的使用。 讓GIF格式達到最佳顯示效果的方法: 如果色系較少,顏色少於256,調色板可以電郵服務選擇為“精確”。 不要選“失真”。 一般情況,調色板選擇“最合適”,最大顏色數選擇“256”。如果色彩稍多於256色,可將抖動設為“100%”。 為防止邊緣出現鋸齒,不需要透明的時候,儘量不透明。 一個小技巧: 如需將網頁切片導出成gif格式的時候,如果色彩較豐富,不宜一起導出,而應該將切片一個一個的導出。

BMP 圖像

一、BMP 圖像檔 BMP圖像檔最早應用於網頁設計Windows作業系統,是Windows作業系統中的標準圖像檔格式,是最簡單的圖像格式。 BMP圖像格式非常簡單,僅具有最基本的圖像資料存儲功能,能存儲每個圖元1位元、4位元、8位和24位的點陣圖。雖然它提供的資訊過於簡單,但是由於 Windows系統的普及以及BMP本身具有格式簡單、標準、透明的特點,BMP圖像檔格式得到了推廣,它一般應用於Windows系統下的網站建設螢幕顯示以及一些簡單圖像系統中。 這種格式的特點是包含的圖像資訊較豐富,幾乎不壓縮,但由此導致了它與生俱生來的缺點--佔用磁碟空間過大。現在很少會在網頁中使用。 一張24位的800×600的bmp格式圖形檔大小: 800×600×3byte=1440000byte≈1440byte≈1.44M