1、怎麼提高網站的設計感
一、 色調
到這幾乎差不多已經完成調整了,但如果你夠細心的話會發現按鈕以及導航菜單的顏色還是 Bootstrap 默認的藍色系。在有著設計師存在網站,設計師都會負責進行網站色調的調整,為了保證網站的一致性,所有按鈕和導航一般是三到四種顏色。
在這里,雖然不可能像大公司網站那樣取色嚴謹,但還是有一些快速的方法使網站看起來很搭配的。
使用 GIMP 的取色器讀取背景圖片的主題顏色,確認其 GBR 十六進制值;
使用 Color Scheme Designer 確認與差異大但同時又互補的顏色;
最後根據確定的顏色來制定按鈕,可以用[Bootstrap Buttons][]等在線直接生成。
這樣首頁上那個大大的注冊按鈕就搞定了,接下來是修改導航菜單的顏色,這個比較簡單,寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。
二、 字體
修改網頁字體是讓網站看起來更有特色、有現代感的捷徑,我們可以去谷歌的字體服務(免費正版)中隨意挑選自己喜歡的字體,但是要注意字體間的搭配,在這里我們選擇由 DesignShack 推薦的谷歌字體搭配中的一種:Cardo(用於標題) 和 Nobile(用於主體內文)。
在網頁頭部中加入此代碼:
在 CSS 樣式表 custom.css 中加入以下代碼:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完後刷新即可查看效果了,現在我們的網站樣式已經變成下面這樣了,看起來比默認好多了。
此外,除了谷歌的字體服務外還可以使用像 Fontdeck 或 Typekit 字體服務,它們的字體更多,更多的字體搭配方案可以參考 Type Connection。
三、 CSS3
將上面都搞定後接下來要做的就是再加點 CSS3 特效了,如果時間不夠的話簡單的添加上盒陰影 box-shadow 和字體陰影 text-shadow 就可以讓網站增色不少,CSS 代碼如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如果時間足夠的話還可以添加一個放射漸變填充效果,可以讓標題的顯示效果更重一些,如下面對比圖所示。(如果想要更多 CSS 效果的話可以去學習一下 CodeSchool 的在線教程)
四、jQuery
其實到這里了話網站看起來已經很不錯了,但為了讓它更加個性化,還需要再添加上一張背景圖片。對很多程序員來說這一步是比較難以進行的,那麼應該如何選擇一張設計師可能會使用的圖片呢?答案就是去 iStockPhoto 或類似的付費圖庫中去尋找。
這里我們將使用 Winter Sun 這張照片,為了讓網站保持自適應布局,還需要使用 Backstretch 這個 jQuery 插件讓背景圖可以隨時自動調整大小。
首先需要付費下載背景圖片,然後放到 /img/ 文件目錄中去。
將此圖片設置為的背景圖(background-image): $.backstretch ("/img/winter.jpg");
加入背景圖後網頁主題部分會產生遮擋,所以可以讓其透明,這樣網站效果看起來會更加現代、有設計感。這里可以使用這個技巧將網站變得透明,代碼見右邊,.container-narrow {background: url (/img/cream_st_transparent.png) repeat 0 0;}
五、 紋理
知道如何讓一個網站看起來更加高雅優雅一些嗎?是的,紋理。就像 24WAY 的背景紋理一樣。
但是這些紋理效果應該去哪裡尋找呢?設計師 Atle Mo 的 Subtle Patterns 網站是個不錯的去處,我們接下來就使用這個網站上的 Cream Dust 紋理。點擊下載,將紋理圖片保存到本地,然後放到根目錄下的 /img/ 目錄文件夾中,最後到 CSS 樣式表中加入代碼 body { background: url (/img/cream_st.png) repeat 0 0;} 即可。
六、 圖標
這里的圖標並不是指那些透明的 PNG 圖片圖標,而是圖標字體,其載入方式和字體一樣,由 CSS 樣式控制,比起圖片圖標來說這種圖標字體載入速度更加,對資源的消耗也更低。在去年 24WAY 曾經有一篇如何在網站中使用圖標字體的文章。
對於 Bootstrap 框架來說,整合的圖標字體是 Font Awesome (Shifticons 也是一個不錯的選擇),和谷歌的字體服務一樣也是免費開源的。要使用它只需將其下載下來,然後在根目錄下創建 /fonts/ 文件夾,將其放進去。然後再將 font-awesome.css 文件放到 /css/ 目錄文件夾。
接著將引用寫入網頁頭部中,代碼為 ,這時候我們可以隨時在網站上任意地方自由使用這些圖標字體了,如要想將一個卡車圖標添加到注冊按鈕的話只需聲明一下就可以,Sign up today。同時為了防止加入圖標字體後引起按鈕拉伸變形,還需要一點點額外的工作,將按鈕寬度加大一點(.jumbotron .btn i { margin-right: 8px; })。
2、如何讓一個網站看起來高大上?或者更有設計感
哈哈,那就得靠你自己進行建設了啊 高大上不一樣適合歐 ,要根據自己的網站定內位而定。而且是什麼風格的啊
是那容種的?
建議你自己慢慢琢磨,或者根據網上的相關視頻進行學習。設計的時候要有思想,可以在設計的時候弄個框架布局看看
3、請問有誰知道哪些網站的網頁好看,設計感要強一些的
這個就說不清楚的,自己看了好看就是了
4、誰知道哪些網站上有設計感很強的圖?
不知道你需要哪方面的圖,我這里介紹的網站是平面設計方面,
「亞洲CI論壇」http://bbs.asiaci.com/index.php
「中國包裝設計網」http://www.chndesign.net/subject/
「魅惑之都」http://www.fanci.cn/bbs/index.php
「圓點視線」http://www.apoints.com/
「盤古視覺」http://www.cgpk.com/
「中國商業插畫師聯盟」http://www.cgpk.com/
「設計在線」http://cn.dolcn.com/
「韓國設計網」http://www.artglim.com/kr/
5、怎樣培養設計感
工業設計專業
專業前景 本專業是隨著社會發展、科學進步,人類進入現代生活而發展起來的一門新興學科。隨著物質生活條件的改變,人們的審美品位在逐步提高,設計出性能優良、美觀大方、具有強烈時代感的產品,是企業提高產品市場競爭力的迫切需求。本專業旨在開展工業設計的理論研究和推廣工作,培養出一批高水平的工業設計人才。
培養目標 本專業培養具有較強的創新意識和設計思維能力,具有良好的機械工程技術素質、計算機技術應用素質和造型藝術素質,掌握現代設計理論與方法,能夠從事工業產品開發設計和人—計算機交互設計的應用型高級工業設計人才,側重培養產品策劃、設計、宣傳、廣告等方面高級專業人才。
培養特色 致力於培養學生的設計思維能力,特別是創新思維能力;培養學生具有一定的美學修養、較強的審美能力和設計的表現能力;培養學生適應以人為中心,以產品為對象,在「人—產品—環境—社會」系統中進行最優化的產品開發與創新設計。
主幹課程 設計素描、色彩設計、造型藝術、工程制圖、工程力學、電工電子學基礎、平面設計、立體設計、產品三維形態設計、多媒體設計表達、設計思維與戰略、三維圖形學、技術美學、產品設計程序與方法學、產品計劃與價值分析、產品創新設計、計算機輔助工業設計、人因工程學、工業產品設計等。
所授學位 工學學士
就業方向 畢業後可到傳統工業、IT產業、科研單位和高等學校從事工業產品設計、人—計算機交互設計、視覺傳達設計等方面工作。
機械設計專業簡介
培養目標:培養從事機械設計製造、CAD/CAM技術應用的高技能應用型人才。
主要就業方向:機電設備的操作、保養、維護和設備管理崗位;機械製造;現代製造技術應用(含CAD/CAM軟體應用);數控機械及其它產品製造部門的生產、管理、銷售等技術崗位。
主要專業課程:信息技術基礎;液壓與氣動;機械設計;電機與控制;自動化技術基礎;測試技術;機械CAD/CAM;數控技術應用;電氣控制;模具設計基礎等。
6、怎樣培養設計感和色感?
WordPress 博客,建議你去用一下,這是一個注重美學 和 css標準的開源博客系統,跟他們這些人交流以及看他們博客的配色等,,,我想會好點的...
找一些配色,怎麼配比較好看..
7、如何讓一個網站看起來高大上?或者更有設計感
讓一個網站看起來高大上的方法很多,我們可以從內容上,觀感上,體驗等各個方面入手。當然,做容易實現的一種方法當然還是從觀感入手,因為這既不需要有很高的文化底蘊,也不需要有很高的技術水平,只需要自己細心的琢磨一下就可能會有很好看的一個頁面呈現在別人面前,或許更簡單只需要下載幾個插件就行。
當然,從觀感上入手也有各種不同的方向,有走簡潔路線的,有走炫技路線的。。實現手法各不相同。
具體可以看一下:http://browser.qq.com/?adtag=SEM1 這個就是很多炫酷的特效
也可以看一下:https://www.apple.com/cn/ipad/ 這個就是簡潔風格,白黑灰的主旋律搭配也意外的讓人覺得很好看。
或者你也可以去bootstrap中文網去看看網站實例,雖然只是簡單的使用bootstrap來做了一下,但是 效果也還是很不錯的。
8、如何提高網站的設計感
確認風格,這是最重要的。
什麼行業,就選一種什麼風格,想好自己網站的主要作用,是展示企業文化,還是企業產品,還是招聘介紹企業,想好了就容易多了,另外,一白遮百丑,如果沒有特殊的想法,可以借鑒。
9、如何讓一個網站看起來高大上?或者更有設計感
使用響應設計,才有html5語言來寫
建議參考一些高大上的網站或者頁面即可