⑴ 網頁設計之怎麼搭配顏色,學會這一招,你就是別人家的
藍色:商務流行色。最安全的web顏色。受設備偏色影響較小,搭配效果較好。
紅色:熱情、沖動、刺激、勇氣、恐怖、暴力、血腥、殘忍。
粉紅色:浪漫、幸福、迷茫、困惑。
桃紅:緋聞、挑逗、時尚、明亮。
暗紅:神秘、深奧、穩健、深沉。
黃色:有多個變種,每個變種很容易與其他顏色搭配,但同一種黃色在不同環境中所表現出來的視覺和心理效應往往有很大差別。
橙色:快樂、時尚、溫馨、感動。有紅色熱情奔放的特點,但又不像紅色那樣光彩奪目。有黃色明快爽朗的一面,而又不容易產生平庸帶澀之感。視覺和心理效應最穩定,不會有太大起伏和變化。
紫色:浪漫、優雅、高貴、深沉、憂郁、神秘。
白色:白色、灰色、黑色、沒有明顯感情色彩或心理傾向,稱為中性色。可以營造出強烈視覺效果。
灰色:大面積灰色背景可以讓白色、紅色、前景信息更加醒目,可以讓整個網頁充滿現代氣息。用灰色過渡可以讓極難搭配的顏色變得容易搭配。
8
黑色:可以輕松從其他顏色中凸現出來,讓其他顏色更加惹眼。黑白紅可以構成簡潔明快的布局。可以和綠、紫色描繪陰森恐怖的氣氛。
⑵ 如何在設計中應用顏色搭配技巧
作為專業的設計師必定對顏色的使用十分敏感,不管是設計網頁,平面圖,標志等。我們都會使用各種不同的顏色。那麼,如何在設計中應用顏色搭配技巧呢?
1、一些經典配色(如黑紅、藍白、黃紫、黃黑、黑金……)
你腦海中要有籠統的概念,至少要對該配色的常見用途做到心中有數。如黑金搭配常用來表達高貴,奢侈品愛這么用,再比如藍白搭配傾向於表達青春、文藝,海魂衫、校服常這么用。不一一贅述。
2、配色之前,先定主色調。
一張畫面的主色調最好不超過三種(黑白灰除外),如果色彩不夠用,就用同類色和黑白灰來補。像主色調,是綠和橙的互補色。綠色用了不同深淺的同類色來表達層次。大膽使用同類色,可以讓色彩富有層次,又不會喧賓奪主。
3、活用工具,但不盡信工具。
傳圖配色 http://www.topve.com/color/imgcolor/
這是一個根據上傳圖片自動生成配色方案的在線調色軟體,使用它您可以很輕松的完成網頁配色的顏色搭配和色彩搭配輕松提取想要的顏色代碼,從中學習顏色搭配技巧
顏色代碼http://www.topve.com/color/
顏色代碼是一款在線的web前端開發利器,聚合眾多實用的在線調色軟體,精心整理了眾多優秀顏色搭配方案、顏色的英文、顏色表等顏色大全,使用顏色代碼進行色彩搭配是你進行前端開發中網頁配色的不二之選!
色彩搭配http://www.topve.com/color/match.html
很多同學不知道一個顏色怎麼進行色彩搭配,這里我們整理了一些常見的顏色搭配問題的配色方案與技巧!
⑶ UI設計的顏色搭配方式!
想學習更多UI設計相關知識,從軟體開始,附贈教程點擊(UI設計)獲取
⑷ 網站設計如何搭配顏色
我們常常遇到的問題其實主要是背景顏色和字體顏色的搭配問題:達到既不顯得呆板,又不至於過於亮麗而造成過強刺激的視覺效果。 色彩是人視覺最敏感的東西。不同色彩之間的對比會有不同的效果,當兩種顏色同時在一起時,這兩種色各自走向自已的極端,例如紅色與綠色對比,紅的更紅,綠的更綠,黑色與白色對比,黑的更黑,白的更白。由於人的視覺的不同,對比的效果通常會有不同。當大家長時間的看一種純色,例如紅色,然後再看看周圍的人,你會發現周圍的人臉色會成綠色,正是因為紅色與周圍的對比,形成了對我們視覺的刺激 ! 色彩的對比會受很多因素影響,例如色彩的面積、時間、亮度等等。 明度 談到明度,宜從無彩色人手,因為無彩色只有一維,好辯的多。(圖)最亮是白,最暗是黑.以及黑白之間不同程度的灰,都具有明暗強度的表現。若按一定的間隔劃分,就構成明暗尺度。有彩色即靠自身所具有的明度值,也靠加減灰、白調來調節明暗。 日本色研配色體系(P.C.C·S·)用九級,門塞兒則用十一級來表示明暗,兩者都用一連串數字表示明度的速增。物體表面明度,和它表面的反射率有關。反射的多,吸收得少,便是亮的;相反便是暗的。只有百分之百反射的光線,才是理想的白,百分之百吸收光線,便是理想的黑。事買上我們周圍沒有這種理想的現象,因此人們常常把最近乎理想的白的硫化鎂結晶表面,作為白的標准。在P.C.C.S.制中,黑為』1,灰調順次是2.4.3.5、4.5. 5.5、 6.5、 7.5、 8.5,白就是9.5。越靠向白,亮度越高,越靠向黑,亮度越低。通俗的劃分,有最高、高、略高、中、略低、低、最低七級。在九級中間,如果加上它們的分界級,即 2、 3、 4、 5、 6、 7. 8、 9,便得十七個亮度級。 有彩色的明暗,其純度的明度,以無彩色灰調的相應明度來表示其相應的明度值。明度一般採用上下垂直來標示。最上方的是白,最下方是黑,然後按感覺的發調差級,排入灰調。『這一表明明暗的垂直軸,稱無彩色軸,是色立體的中軸。 立體色標 我們把以上在白光下混合所得的明度、色相和彩色組織起來,選由下而上,在每一橫斷面上的色標都相同,上橫斷面上的色標較下橫斷面上色標的明度高。再由黑、白、灰作為中心軸,中心而外,·使同一圓柱上,色標的純度都相同,外圓柱上的比內圓柱上的純度高。再隊中心軸向外,每一縱斷面上色標的色相都相同,使不同縱斷面的色相不同的紅、橙、黃、綠、青、藍、紫等色相自環中心軸依時針順序而列,這樣就把數以千計的色標嚴整地組織起來,成為立體色標。目前影響較大的立體色標是奧斯特華色標和門塞爾色標。 彩度 一種色相彩調,也有強弱之分。拿正紅來說,有鮮艷無雜質的純紅,有澀而像干殘的「凋玫瑰」,也有較淡薄的粉紅。它們的色相都相同,但強弱不一,一般稱為(Sa+ura+lOn)或色品。彩度常用高低來指述,彩度越高,色越純,越艷;彩度越低,色越澀,越濁。純色是彩度最高的一級。 表示彩度,一般用水平橫軸.以無彩色豎軸為點,在色相環某一色相方向伸展開去,按彩度由低至高分作若干級, P、 C、 C、 S制便分九級,以S為其標度單位。最低為IS。 最高為g S。越靠近無彩豎軸,彩度便越低。無彩軸上沒有一點兒彩調,可說彩度為O S。離無彩軸遠則彩度高,端點便是純色,亦即是光譜上該色之色相。 彩度是這樣分級的:按純度的亮度,尋找其對應的灰調,分九等份(依感覺),逐一加入純色中,同時逐一扣去約色的一份。於是便得到純色的八個連續的彩度。 5 S是扣去4/9純色加入了4/9的灰量;ISG是扣去8/9純度,加入了8/9純色,加入了8/9灰量。 通俗的分法,與九級彩度相對應。用高、略高、中、略低、低五級來標示。 色相 有彩色就是包含了彩調,即紅、黃、藍等幾個色族,這些色族便叫色相。 最初的基本色相為:紅、橙、黃、綠、藍、紫。在各色中間加插一兩個中間色,其頭尾色相,按光譜順序為:紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫。紅和紫中再加個中間色,可制出十二基本色相。 這十二色相的彩調變化,在光譜色感上是均勻的。如果進一步再找出其中間色,便可以得到二十四個色相。如果再把光譜的紅、橙黃、綠、藍、紫諸色帶圈起來,在紅和紫之間插入半幅,構成環形的色相關系,便稱為色相環。基本色相間取中間色,即得十二色相環。再進一步便是二十四色相環。在色相環的圓圈裡,各彩調按不同角度排列,則十二色相環每一色相間距為30度。二十四色相環每一色相間距為15度。 P.C.C.s制對色相製作了較規則的統一名稱和符號。其中紅、橙、黃、綠、藍、紫,指的是其「正」色。正色用單個大寫字母表示,等量混色用並列的兩個大寫字母表示,不等量混色,主要用大寫字母,到色用小寫字母。唯一例外的是藍紫用V而不用BP。V是紫羅蘭的首字母,為色相編上字母作為標記,便於正確運用而又便於初學記憶。 網站設計的色彩處理得好,可以錦上添花,達到事半功倍的效果。色彩總的應用原則應該是「總體協調,局部對比」,也就是:主頁的整體色彩效果應該是和諧的,只有局部的、小范圍的地方可以有一些強烈色彩的對比。
⑸ web 中的綠色什麼顏色搭配好看
綠色可以搭配米白色,整體可以襯托出綠色的干凈。
也可以搭配白色,或是米色、黑色、暗紫色、灰褐色、灰棕色都很好看。
⑹ 網頁配色的三種顏色是什麼意思
三原色 你不會說的色調吧?
"但光憑感覺也不能夠得到好的結果,如果說好的設計等於感覺加一個未知數,那麼這個未知數應該就是可以說服其他人的科學合理的理論體系" 他意思就是這三種顏色 大致可以給人什麼感覺,他都給的三種顏色組合,面實際建站時,顏色也大致三種左右,太少單調,太多給人感覺很雜。大致色調定位後,就圍繞這幾種顏色去搭配就行了
⑺ 如何進行網頁配色
網頁調色板.[值得收藏]
做網頁的好幫手.
flash RGB getor
http://www.it365cn.com/bbs/upload/200911231360930.swf
color palette creator
這是我收藏之一,通過基本色調生成10種不同灰度的相同色,並且能生成png文件。
http://slayeroffice.com/tools/color_palette/
4096 Color Wheel Version 2.1
非常漂亮的自然色抓取工具,用滑鼠點取顏色,非常方便。
http://www.ficml.org/jemimap/style/color/wheel.html
technicolor
用滑鼠拖動滑桿,再根據基色生成系統推薦的色調,最棒的是還能根據你選擇的顏色生成標準的css文件。
http://www.themaninblue.com/experiment/Technicolor/
color scheme generator 2
這也許是至今為止最專業的調色板了。不但能根據選擇的基色生成相關的配色方案,還有根據顏色的飽和度,明亮度等等只有在photoshop里看見的調節功能,系統還提供推薦方案,有專門為色盲和色弱者推薦的顏色方案。
http://wellstyled.com/tools/colorscheme/index-en.html
colr.org
從網站Url就能看出這也是一個專業的color site。color.org最酷的就是應用了tag,你可以輸入forest(森林)這個詞,系統自動根據你給出的詞生成相關的顏色方案,輸入love後我得到的大多是粉紅基色調,很准確吧!系統有11000多種顏色tag和20000種顏色方案、7000多個調色板。當然,這個tag。。這個tag不支持中文的…
http://colr.org/
color blender
這個也是一個很有特色的調色板。輸入兩種截然不同的顏色,系統根據這兩種顏色生成漸變色帶。
http://www.meyerweb.com/eric/tools/color-blend/
color schemer v2
這個是color scheme generator 2的另一個版本
http://www.colorschemer.com/online.html
visibone color lab
這是第一個根據網頁安全色製作的調色板,使用簡單,滑鼠不停的點,直到碰上讓你感覺滿意的效果。
http://www.visibone.com/colorlab/
RGB color charts
基於RGB原理的,不過系統生成的顏色很舒服。
http://lodestone.org/people/maria/design/colors.html
full screen picker
這是一個基於瀏覽器的顏色拾取器,想必下,這種工具還是使用客戶端的程序比較方便些。
http://milov.nl/iambald/24.html
colormixers
一邊拉滑桿,一邊看顏色的變化,相當方便。
http://colormixers.com/mixers/cmr/
以下也是一些color tools的相關鏈接:
http://www.colormatch.dk/
http://slayeroffice.com/tools/color_palette/
http://kohaistyle.com/scripts/quickcolor
http://www.easyrgb.com/harmonies.php
http://www.stcsig.org/usability/topics/colorblind.html
http://color.twysted.net/
http://www.coolhomepages.com/cda/color
http://www.masternewmedia.org/2003/04/30/
http://dev.sessions.e/ilu/ilu_1.html http://www.technetguru.com/design
http://www.mundidesign.com/webct
http://graphicdesign.about.com/library/color/blweb2.htm
http://www.pourpre.com/chromograf/en/
http://www.webwhirlers.com/colors/wizard.asp
http://www.colorcoordinator.com/colorCoordinator.php
當前最熱門的十種顏色:
Moroccan blue :#081b55
Glazed ginger:#da4912
American beauty:#d31112
Ruby wine:#780e1a
Atmosphere:#c4a47b
Burnt olive:#565d10
Gloxinia:#530752
Rattan:#ffdc28
Moss:#a9a40c
Burnt orange:#fe690d
⑻ 在網頁製作中,內容布局,字體,設置,顏色選擇應遵循哪些規則
先聲明,我這是轉發過來的,不是為了拿分,是希望幫到你
做網站,首先必須要解決的就是網站內容問題,即確定網站的主題。美國《個人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網站的十類題材:第1類:網上求職;第2類:網上聊天/即時信息/ICQ;第3類:網上社區/討論/郵件列表;第4類:計算機技術;第5類:網頁/網站開發;第6類:娛樂網站;第7類:旅行;第8類:參考/資訊;第9類:家庭/教育;第10類:生活/時尚。我們可以參看上面的分類,繼續細分。如果自己在某些方面有興趣,或掌握的資料較多,也可以做一個自己感興趣的東西,一者,你可以有自己的見解,做出自己的特色;二者,在製作網站時不會覺得無聊或者力不從心。興趣是製作網站的動力,沒有創作熱情,很難設計製作出優秀的作品。
對於內容主題的選擇,要做到小而精,主題定位要小,內容要精。不要去試圖製作一個包羅萬象的站點,這往往會失去網站的特色,也會帶來高強度的勞動,給網站的及時更新帶來困難。記住:在互聯網上只有第一,沒有第二!
要領二:選擇好域名
域名是網站在互聯網上的名字。一個非產品推銷的純信息服務網站,其所有建設的價值,都凝結在其網站域名之上。失去這個域名,所有前期工作就將全部落空。
目前,做個人網站的很多都依賴免費個人空間,其域名也是依賴免費域名指向,如網易的虛擬域名服務,其實這對個人網站的推廣與發展很為不利,不光是它「適時」開啟的窗口妨礙了瀏覽者的視線和好感,讓人一看就知道是個人網站,而且也妨礙了網頁的傳輸速度。所以,就我個人觀點來說,首先花點錢去注冊一個域名,獨立的域名就是個人網站的第一筆財富,要把域名起得形象、簡單、易記。
要領三:掌握建網工具
網路技術的發展帶動了軟體業的發展,所以用於製作Web頁面的工具軟體也越來越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動網頁製作工具,各種各樣的Web頁面製作工具,下面是幾款具有代表性的網頁製作器:
(1)HTML編輯器。雖然HTML代碼復雜,編輯和調試要花費大量的時間,但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果,仍受高級網頁製作人員的青睞。就目前來說,有眾多的編輯器供選擇,這些編輯器廣泛支持復雜頁面創建及高級HTML規范,使用較為普遍的有Hotdog等專業HTML編輯器。
(2)所見即所得的網頁編輯器。其中以Microsoft Frontpage為代表,它具有如Word一樣的操作界面,熟知Word功能的操作者,只要稍加培訓就能輕松編制網頁。而且,Frontpage還能解析網頁的HTML源代碼,並提供了預覽支持。但Frontpage的一些特殊顯示功能並不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁製作人員使用的工具軟體。
(3)現在非常流行的 Macromedia公司出品的Flash互動網頁製作工具。這是是一款功能非常強大的互動式矢量多媒體網頁製作工具。能夠輕松輸出各種各樣的動畫網頁,它不需要特別繁雜的操作,也比JAVA小巧精悍!但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash動畫中封裝Mp3音樂、填寫表單等;並且由於Flash編制的網頁文件比普通網頁文件要小得多,所以大大加快了瀏覽速度。這是一款十分適合動態Web製作的工具。
另外,個人網站製作者還需了解W3C的HTML4.0規范、CSS層疊樣式表的基本知識、javascript、VBScript的基本知識。對於常用的一些腳本程序如ASP、CGI、PHP也要有適當了解,還要熟練使用圖形處理工具和動畫製作工具以及矢量繪圖工具,並能部分了解多種圖形圖像動畫工具的基本用法,熟練使用FTP工具以及擁有相應的軟硬體和網路知識也是必備的。
當然,互聯網還是一個免費的資料庫。編制網頁需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成,既浪費時間又浪費金錢,而且還需要強大的圖形、圖片製作技術。所以,為了省卻這些麻煩,網站製作者完全可以從網上下載各種精美實用的圖片、按鈕、背景等網頁素材。
要領四:確定網站界面
界面就是網站給瀏覽者的第一印象,往往決定著網站的可看性,在確定網站的界面時要注意以下三點:
①欄目與板塊編排
構建一個網站就好比寫一篇論文,首先要列出題綱,才能主題明確、層次清晰。網站建設初學者,最容易犯的錯誤就是:確定題材後立刻開始製作,沒有進行合理規劃。從而導致網站結構不清晰,目錄龐雜混亂,板塊編排混亂等。結果不但瀏覽者看得糊里糊塗,製作者自己在擴充和維護網站也相當困難。所以,我們在動手製作網頁前,一定要考慮好欄目和板塊的編排問題。
網站的題材確定後,就要將收集到的資料內容作一個合理的編排。比如,將一些最吸引人的內容放在最突出的位置或者在版面分布上占優勢地位。欄目的實質是一個網站的大綱索引,索引應該將網站的主體明確顯示出來。在制定欄目的時候,要仔細考慮,合理安排。在欄目編排時需要注意的是:
●盡可能刪除那些與主題無關的欄目;
●盡可能將網站內最有價值的內容列在欄目上;
●盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢;輔助內容,如站點簡介、版權信息、個人信息等大可不必放在主欄目里,以免沖淡主題。
另外,板塊的編排設置也要合理安排與劃分。板塊比欄目的概念要大一些,每個板塊都有自己的欄目。舉個例子:ENET矽谷動力(www.enet.com.cn)的站點分新聞、產品、游戲、學院等板塊,每個板塊下面又各有自己的主欄目。一般來說,個人站點內容較少,只要分個欄目也就夠了,不需要設置板塊。如果有必要設置板塊的,應該注意:
●各板塊要有相對獨立性;
●各板塊要有相互關聯;
●各板塊的內容要圍繞站點主題;
②目錄結構與鏈接結構
網站的目錄是指建立網站時創建的目錄。例如:在用Frontpage建立網站時都默認建立了根目錄和Images子目錄。目錄的結構是一個容易忽略的問題,大多數站長都是未經規劃,隨意創建子目錄。目錄結構的好壞,對瀏覽者來說並沒有什麼太大的感覺,但是對於站點本身的維護,以後內容的擴充和移植有著重要的影響。所以建立目錄結構時也要仔細安排,比如:
●不要將所有文件都存放在根目錄下。有網站製作者為了方便,將所有文件都放在根目錄下。這樣就很容易造成:文件管理混亂,搞不清哪些文件需要編輯和更新,哪些無用的文件可以刪除,哪些是相關聯的文件,影響工作效率;上傳速度變慢,伺服器一般都會為根目錄建立一個文件索引,如果將所有文件都放在根目錄下,那麼即使只上傳更新一個文件,伺服器也需要將所有文件再檢索一遍,建立新的索引文件,很明顯,文件量越大,等待的時間也將越長。
●按欄目內容建立子目錄。子目錄的建立,首先按主欄目建立。友情連接內容較多,需要經常更新的可以建立獨立的子目錄。而一些相關性強,不需要經常更新的欄目,例如:網站簡介、站長情況等可以合並放在一個統一目錄下。所有程序一般都存放在特定目錄,例如:CGI程序放在cgi-bin目錄,所有提供下載的內容也最好放在一個目錄下,便於維護管理。
●在每個主目錄下都建立獨立的Images目錄。一般來說,一個站點根目錄下都有一個默認地Images目錄。將所有圖片都存放在這個目錄里很是不方便,比如在欄目刪除時,圖片的管理相當麻煩。所以為每個主欄目建立一個獨立的Images目錄是方便管理的。原因很簡單,就是方便維護與管理。
其它需要注意的還有:目錄的層次不要太深,不要超過3層;不要使用中文目錄,使用中文目錄可能對網址的正確顯示造成困難;不要使用過長的目錄,太長的目錄名不便於記憶;盡量使用意義明確的目錄,以便於記憶和管理。
網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上,但可以跨越目錄。形象的說:每個頁面都是一個固定點,鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接,也可以和多個點連接。更重要的是,這些點並不是分布在一個平面上,而是存在於一個立體的空間中。一般的,建立網站的鏈接結構有兩種基本方式:
●樹狀鏈接結構(一對一),這類似DOS的目錄結構,首頁鏈接指向一級頁面,一級頁面鏈接指向二級頁面。這樣的鏈接結構瀏覽時,一級級進入,一級級退出,條理比較清晰,訪問者明確知道自己在什麼位置,不會「不知身在何處」,但是瀏覽效率低,一個欄目下的子頁面到另一個欄目下的子頁面,必須回到首頁再進行。
●星狀鏈接結構(一對多),類似網路伺服器的鏈接,每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便,隨時可以到達自己喜歡的頁面。但是由於鏈接太多,容易使瀏覽者迷路,搞不清自己在什麼位置,看了多少內容。
因此,在實際的網站設計中,總是將這兩種結構混合起來使用。網站希望瀏覽者既可以方便快速地達到自己需要的頁面,又可以清晰地知道自己的位置。所以,最好的辦法是:首頁和一級頁面之間用星狀鏈接結構,一級和二級頁面之間用樹狀鏈接結構。關於鏈接結構的設計,在實際的網頁製作中是非常重要一環,採用什麼樣的鏈接結構直接影響到版面的布局。
③進行形象設計
網站的設計可以從以下幾點出發:
●設計網站標志(LOGO)。LOGO是指網站的標志,標志可以是中文、英文字母,也可以是符號、圖案等。標志的設計創意應當來自網站的名稱和內容。比如:網站內有代表性的人物、動物、植物,可以用它們作為設計的藍本,加以卡通化或者藝術化;專業網站可以以本專業有代表的物品作為標志。最常用和最簡單的方式是用自己網站的英文名稱作標志,採用不同的字體、字母的變形、字母的組合可以很容易製作好自己的標志。
●設計網站色彩。網站給人的第一印象來自視覺沖擊,不同的色彩搭配產生不同的效果,並可能影響到訪問者的情緒。「標准色彩」是指能體現網站型象和延伸內涵的色彩,要用於網站的標志,標題,主菜單和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用,但應當只是作為點綴和襯托,絕不能喧賓奪主。一般來說,一個網站的標准色彩不超過3種,太多則讓人眼花繚亂。適合於網頁標准色的顏色有:藍色,黃/橙色,黑/灰/白色三大系列色。
●設計網站字體。和標准色彩一樣,標准字體是指用於標志,標題,主菜單的特有字體。一般網頁默認的字體是宋體。為了體現站點的「與眾不同」和特有風格,可以根據需要選擇一些特別字體。製作者可以根據自己網站所表達的內涵,選擇更貼切的字體。需要說明的是:使用非默認字體只能用圖片的形式,因為很可能瀏覽者的計算機里沒有安裝特別字體,那麼辛苦設計製作便可能付之東流了。
●設計網站宣傳語。也可以說是網站的精神、主題與中心,或者是網站的目標,用一句話或者一個詞來高度概括。用富有氣勢的話或詞語來概括網站,進行對外宣傳,可以收到比較好的結果。
要領五:確定網站風格
「風格」是抽象的,是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI(標志,色彩,字體,標語)、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素,網站可以是平易近人的、生動活潑的也可以是專業嚴肅的。不管是色彩、技術、文字、布局,還是交互方式,只要你能由此讓瀏覽者明確分辨出這是你網站獨有的,這就形成了網站的「風格」。
風格是有人性的,通過網站的色彩、技術、文字、布局、交互方式可以概括出一個站點的個性:是粗獷豪放的,還是清新秀麗的;是溫文儒雅的,還是執著熱情的;是活潑易變的,還是墨守成規的。
總之,有風格的網站與普通網站的區別在於:在普通網站上你看到的只是堆砌在一起的信息,你只能用理性的感受來描述,比如信息量多少,瀏覽速度快慢等;在有風格的網站上你可以獲得除內容之外的更感性的認識,比如站點的品位,對瀏覽者的態度等。
在明確自己想給人以怎樣的印象後,要找出網站中最有特色的東西,就是最能體現網站風格的東西。並以它作為網站的特色加以重點強化、宣傳。總之,風格的形成不是一次定位的,你可以在實踐中不斷強化、調整、改進。
要領六:有創意的內容選擇
好的內容選擇需要有好的創意,作為網頁設計製作者,最苦惱的就是沒有好的內容創意。網路上的最多的創意即是來自於虛擬同現實的結合。創意的目的是為了更好的宣傳與推廣網站,如果創意很好,卻對網站發展毫無意義,那麼,網站設計製作者也應當放棄這個創意。另外,主頁內容是網站的根本之所在,如果內容空洞,即使頁面製作地再怎樣精美,仍然不會有多少用戶。從根本上說,網站內容仍然左右著網站流量,內容為王(Content Is King)依然是個人網站成功的關鍵。
要領七:推廣自己的網站
網站的營銷推廣在個人網站的運行中也占著重要的地位,在推廣個人網站之前,請確保已經做好了以下內容:網站信息內容豐富、准確、及時;網站技術具有一定專業水準,網站的交互性能良好。一般來說,網站的推廣有以下幾種方式:
(1)搜索引擎注冊與搜索目錄登錄技巧
注冊著名的搜索引擎站點是在技術上推廣網站的第一步。注冊搜索引擎有一定的技巧,像AltaVista、搜索客這樣的搜索引擎,它自動收錄提交的網址。另外,注意Meta的使用,不要提交分欄Frame頁面,大部分搜索引擎不識別Frame,所以一定要提交有內容的Main頁面。
而像Yahoo、搜狐等搜索目錄網站採用手工方式收錄網址,以保證收錄網站的質量,在分類查詢時獲得的信息相關性比搜索引擎站點(靠Spider自動搜索的)更強。由於搜索目錄網站收錄網站的人為因素相對較多,因此在提交網站時要注意遵守規則。如Yahoo要求注冊站點描述不超過25個單詞。在此要注意:將網址提交到最合適的目錄下面,要認真詳細的介紹網站,千萬不要有虛假、誇張的成分。
(2)廣告交換技巧
很多個人站點在相互廣告交換時都提出了幾個條件:第一,訪問量相當;第二,首頁交換。顯而易見,這種做法是為了充分利用廣告交換。以很多個人網站的經驗,當與一個個人站點交換鏈接時,對方把網站的LOGO放到了友情連接一頁,而不是首頁時,很少有訪客會來自那裡。通常在首頁,廣告交換才會有很好的效果。
(3)目標電子郵件推廣
使用電子郵件宣傳網址時,主要有如下技巧:可以使用免費郵件列表來進行,只要你申請了免費郵件列表服務,你就可以利用郵件列表來推廣你的網站;可以通過收集的特定郵件地址,來發送信息到特定的網路群體,在特定網路群體中推廣自己的網站;發送HTML格式的郵件,即使其內容與接收者關系不大,也不會被被當作垃圾信件馬上刪掉,人們至少會留意一下發送者的地址。不過,在進行郵件推廣的時候要注意網路道德。
要領八:支撐網站日常運行
當個人網站做到某一程度,就必須把賺錢提到議事日程上來,通常來說,個人網站獲取資金通常有以下兩個渠道:
(1)銷售網站的廣告位
要銷售網站的廣告位,一般來說,每日的流量少於1萬人次的網站在目前是不會吸引廣告主的。網站的專業性及商用性,以往的廣告經驗,技術以及設計要求等也會影響到廣告的銷售。
一般來說,WEB廣告的收費有三種方式:
①CPM (Cost Per Million/Thousand)
放一個廣告,它按每1,000人次來訪問站點收費。這方法對網站經營者最為合適,只要有人瀏覽該網頁,就得錢,不管訪問者對廣告有無反應——是否會看或點擊該廣告。
②點透(Click-through)
通過Banner廣告點到了廣告商的站點,這才算數,廣告商青睞這個,他只為對自己廣告感興趣的人「套錢「。網站經營者就不合適了,據一些調查資料表明,只有3%的訪問者會去「CLICK」廣告。
③提成 (Commission)
根據訪問者點擊位於你站點上廣告所帶來的銷售收入,從中跟做廣告的廠商分成,這種方法對於網站的經營者來說,比上面兩個都更加冒險。
通常的,個人網站的廣告收費方法往往是第一、第二種方法的結合,站點和廣告商都可少冒點險。
(2)與大型網站合作
另外,通過與大型網站合作,獲取經費,也可以維持個人網站的日常運行。不過,個人網站很容易會成為商業網站的附屬品。
有時間和充沛的體力,再加上對新技術和技巧的學習和應用,你就能為自己在網上建一個家了。
⑼ 網頁配色技巧
網頁調色板.[值得收藏]
做網頁的好幫手.
flash RGB getor
http://www.it365cn.com/bbs/upload/200911231360930.swf
color palette creator
這是我收藏之一,通過基本色調生成10種不同灰度的相同色,並且能生成png文件。
http://slayeroffice.com/tools/color_palette/
4096 Color Wheel Version 2.1
非常漂亮的自然色抓取工具,用滑鼠點取顏色,非常方便。
http://www.ficml.org/jemimap/style/color/wheel.html
technicolor
用滑鼠拖動滑桿,再根據基色生成系統推薦的色調,最棒的是還能根據你選擇的顏色生成標準的css文件。
http://www.themaninblue.com/experiment/Technicolor/
color scheme generator 2
這也許是至今為止最專業的調色板了。不但能根據選擇的基色生成相關的配色方案,還有根據顏色的飽和度,明亮度等等只有在photoshop里看見的調節功能,系統還提供推薦方案,有專門為色盲和色弱者推薦的顏色方案。
http://wellstyled.com/tools/colorscheme/index-en.html
colr.org
從網站Url就能看出這也是一個專業的color site。color.org最酷的就是應用了tag,你可以輸入forest(森林)這個詞,系統自動根據你給出的詞生成相關的顏色方案,輸入love後我得到的大多是粉紅基色調,很准確吧!系統有11000多種顏色tag和20000種顏色方案、7000多個調色板。當然,這個tag。。這個tag不支持中文的…
http://colr.org/
color blender
這個也是一個很有特色的調色板。輸入兩種截然不同的顏色,系統根據這兩種顏色生成漸變色帶。
http://www.meyerweb.com/eric/tools/color-blend/
color schemer v2
這個是color scheme generator 2的另一個版本
http://www.colorschemer.com/online.html
visibone color lab
這是第一個根據網頁安全色製作的調色板,使用簡單,滑鼠不停的點,直到碰上讓你感覺滿意的效果。
http://www.visibone.com/colorlab/
RGB color charts
基於RGB原理的,不過系統生成的顏色很舒服。
http://lodestone.org/people/maria/design/colors.html
full screen picker
這是一個基於瀏覽器的顏色拾取器,想必下,這種工具還是使用客戶端的程序比較方便些。
http://milov.nl/iambald/24.html
colormixers
一邊拉滑桿,一邊看顏色的變化,相當方便。
http://colormixers.com/mixers/cmr/
以下也是一些color tools的相關鏈接:
http://www.colormatch.dk/
http://slayeroffice.com/tools/color_palette/
http://kohaistyle.com/scripts/quickcolor
http://www.easyrgb.com/harmonies.php
http://www.stcsig.org/usability/topics/colorblind.html
http://color.twysted.net/
http://www.coolhomepages.com/cda/color
http://www.masternewmedia.org/2003/04/30/
http://dev.sessions.e/ilu/ilu_1.html http://www.technetguru.com/design
http://www.mundidesign.com/webct
http://graphicdesign.about.com/library/color/blweb2.htm
http://www.pourpre.com/chromograf/en/
http://www.webwhirlers.com/colors/wizard.asp
http://www.colorcoordinator.com/colorCoordinator.php
當前最熱門的十種顏色:
Moroccan blue :#081b55
Glazed ginger:#da4912
American beauty:#d31112
Ruby wine:#780e1a
Atmosphere:#c4a47b
Burnt olive:#565d10
Gloxinia:#530752
Rattan:#ffdc28
Moss:#a9a40c
Burnt orange:#fe690d
⑽ webstorm怎麼配置一般界面顏色
新建Scheme + 修改字體
ctrl+alt+s打開Settings界面,Editor > Colors&Fonts > Font。
Default scheme是亮色調,但我想定製一套暗背景的環境,所以在右側Scheme name下拉框中選擇Monokai,以此作為修改的基礎,然後點擊Save as,給自己新建的Scheme起個名字吧,如下圖:
這裡面可以設置字體(我一般選擇Consolas),字體大小,行間距。
自定義語法高亮
用ctrl+alt+s打開Settings界面,Editor > Colors&Fonts。
不同語言有各自的語法高亮規則,但有一部分是通用的(General),我們首先來設置General,然後再根據需要設置不同語言的語法高亮。
General的設置
普通文本:default text
折疊文本: Folded text
游標: Caret
游標所在行: Caret row
行號: Line number
TODO: TODO default
游標下變數高亮:Search result
搜索結果:Text search result
匹配的括弧:Matched brace
不匹配的括弧:Unmatched brace
未使用的符號:Unused symbol
左邊空隙(行號,斷點):Gutter background
選中的文本背景色:Selection background
選中的文本前景色:Selection foreground
區分語言的設置
舉例來說,如果要更改Javascript的語法高亮,就在上圖中選擇Javascript,然後再進行詳細設置。具體設置項就不贅述了。
顯示行號 + 自動換行
如果用Vim編程,行號是非常必要的輔助。WebStorm默認是不顯示行號的,沒關系,顯示行號非常的容易。
只要在代碼左側的gutter區域點右鍵,就會出現下圖的菜單:勾選上Show Line Numbers即可。
另外,勾選上圖中的Use Soft Wraps就啟用了WebStorm的自動換行的功能,即過長的代碼行不會超出屏幕,不會出現橫向的滾動條。
值得一提的是,標準的Vim,jk是移到上一行下一行,如果代碼自動換行了,被分割成的兩行雖然看起來是兩行,但其實是一個邏輯行,這時候用jk是上移下移一個邏輯行。這種情況下,如果要從同一邏輯行的「第一行」移動到「第二行」,需要按gj,即先按g再按方向。雖然Vim提供了這個方法,但還是經常按錯。
好消息是,啟用了Use Soft Wraps的WebStorm不需要這樣,直接按j就可以從同一邏輯行的「第一行」移動到「第二行」。
導入導出設置
File > Export Settings導出用戶設置。如下圖,你可以選擇要導出哪些類型的設置,也可以選擇導出到哪個目錄下。
導出後的配置以jar包的形式存在,導入也同樣簡單,File > Import Settings,選擇jar包導入成功後,重啟WebStorm就大功告成了。