網(wǎng)頁制作圖標
提問問題
列表
-
網(wǎng)頁設(shè)計尺寸與PSWEB文件尺寸
查看答案>>
-
誰知道怎么做網(wǎng)頁標簽前面上加這個小圖標啊
查看答案>>
-
為什么網(wǎng)頁中的圖標常用16px，24px，32px 這些尺寸
查看答案>>
-
網(wǎng)站前面的圖標是怎么弄的？？
查看答案>>
-
怎么把一個網(wǎng)站制作成手機桌面上的一個圖標？是手機終端嗎？怎么弄？
查看答案>>
-
ico網(wǎng)站標題圖標的大??？
查看答案>>
-
怎樣用CSS給網(wǎng)站title加小圖標？
查看答案>>
-
制作網(wǎng)頁如何做出“返回頂部”圖標并固定在頁面右下的位置？
查看答案>>
-
怎樣用CSS給網(wǎng)站title加小圖標？
查看答案>>
-
html 怎么添加ico小圖標
查看答案>>
網(wǎng)頁設(shè)計尺寸與PSWEB文件尺寸
網(wǎng)頁設(shè)計在初始要界定出網(wǎng)頁的尺寸大小。就像繪畫給出一塊畫版來。這樣才能方便設(shè)計。 網(wǎng)頁的尺寸受限于兩個因素：一個是顯示器屏幕。顯示器現(xiàn)在種類很多，以17寸為主流， 正在朝19寸及寬屏的方向發(fā)展。但目前也有為數(shù)不少的15寸顯示器。另一個是瀏覽器軟件，就是我們常用的IE,遨游，F(xiàn)riefox等?！ 「叨龋骸 「叨仁强梢韵蛳卵诱沟模砸话銓Ω叨炔幌拗?。 對于一屏來說，一般沒有一個固定值，因為每個人的瀏覽器的工具欄不同，我見過有的瀏覽器工具欄被插件占了半個屏幕，所以高度沒有確切值。 寬度： 1、在IE6.0下，寬度為顯示器分辨率減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0（或更低）無論你的網(wǎng)頁多高都會有右側(cè)的滾動條框?！ ?、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005 3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001 注：Firefox或Opear在內(nèi)容少于瀏覽器高度時不顯示右側(cè)滾動條?！ ∷匀绻?024的分辨率，你的網(wǎng)頁不如設(shè)成1000安全一點。設(shè)成900兩側(cè)空白更大，視覺上更舒服一點。也方便做一些浮動層的設(shè)計?！ ∪绻?00的分辨率一般都設(shè)成770。但也有設(shè)成760的?！ ∵@些需要明白并且牢記，不然很可能做出來不符合瀏覽器要求，不過一般我們都回設(shè)定的再稍微小一點，應(yīng)為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的分辨率一般設(shè)定760左右，1024的設(shè)定990左右?！ 【W(wǎng)頁設(shè)計標準尺寸： 1、800*600下，網(wǎng)頁寬度保持在778以內(nèi)，就不會出現(xiàn)水平滾動條，高度則視版面和內(nèi)容決定?！ ?、1024*768下，網(wǎng)頁寬度保持在1002以內(nèi)，如果滿框顯示的話，高度是612-615之間。就不會出現(xiàn)水平滾動條和垂直滾動條。 3、在ps里面做網(wǎng)頁可以在800*600狀態(tài)下顯示全屏，頁面的下方又不會出現(xiàn)滑動條，尺寸為740*560左右 4、在PS里做的圖到了網(wǎng)上就不一樣了，顏色等等方面，因為WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣，所以自然會有失色的現(xiàn)象。 頁面標準按800*600分辨率制作，實際尺寸為778*434px 頁面長度原則上不超過3屏，寬度不超過1屏 每個標準頁面為A4幅面大小，即8.5X11英寸 全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px 另外120*90，120*60也是小圖標的標準尺寸 每個非首頁靜態(tài)頁面含圖片字節(jié)不超過60K，全尺寸banner不超過14K 標準網(wǎng)頁廣告尺寸規(guī)格 一、120*120，這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故??！ 《?20*60，這種廣告規(guī)格主要用于做LOGO使用?！ ∪?、120*90，主要應(yīng)用于產(chǎn)品演示或大型LOGO?！ ∷摹?25*125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告?！ ∥濉?34*60，這種規(guī)格適用于框架或左右形式主頁的廣告鏈接。 六、392*72，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳?！ ∑?、468*60，應(yīng)用最為廣泛的廣告條尺寸，用于頁眉或頁腳。 八、88*31，主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60（必須用gif） 7K 215*50（必須用gif） 7K 通欄 760*100 25K 靜態(tài)圖片或減少運動效果 430*50 15K 超級通欄 760*100 to 760*200 共40K 靜態(tài)圖片或減少運動效果 巨幅廣告 336*280 35K 585*120 豎邊廣告 130*300 25K 全屏廣告 800*600 40K 必須為靜態(tài)圖片，F(xiàn)LASH格式 圖文混排 各頻道不同 15K 彈出窗口 400*300（盡量用gif） 40K BANNER 468*60（盡量用gif） 18K 懸停按鈕 80*80（必須用gif） 7K 流媒體 300*200（可做不規(guī)則形狀但尺寸不能超過300*200） 30K 播放時間 小于5秒60幀（1秒/12幀） 網(wǎng)頁中的廣告尺寸 1.首頁右上，尺寸120*60 2.首頁頂部通欄，尺寸468*60 3.首頁頂部通欄，尺寸760*60 4.首頁中部通欄，尺寸580*60 5.內(nèi)頁頂部通欄，尺寸468*60 6.內(nèi)頁頂部通欄，尺寸760*60 7.內(nèi)頁左上，尺寸150*60或300*300 8.下載地址頁面，尺寸560*60或468*60 9.內(nèi)頁底部通欄，尺寸760*60 10.左漂浮，尺寸80*80或100*100 11.右漂浮，尺寸80*80或100*100
誰知道怎么做網(wǎng)頁標簽前面上加這個小圖標啊
將以下代碼加入html代碼中的head中<link href="/images/favicon.ico" rel="shortcut icon" />/images/favicon.ico是圖標的路徑！備注，網(wǎng)頁是有緩存的，如果修改之后沒有效果請清空網(wǎng)頁緩存文件，重試！
具體插在什么位置啊 直接在head下面嗎
只要在head中就可以<head><link href="/images/favicon.ico" rel="shortcut icon" /></head>
加了 還是沒用啊 是不是這樣的 <head><link href="/images/favicon.ico" rel="shortcut icon" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首頁</title><link href="head.css" rel="stylesheet" type="text/css" /></head>我圖片 路徑偶讀正確啊
為什么網(wǎng)頁中的圖標常用16px，24px，32px 這些尺寸
提到圖標設(shè)計，似乎每個設(shè)計師都有話說，但是要做好圖標設(shè)計真的那么容易么?今天這篇文章針對網(wǎng)頁設(shè)計領(lǐng)域的圖標設(shè)計進行了相對全面的梳理，從設(shè)計技巧到設(shè)計資源一應(yīng)俱全，但愿能幫上你!
圖標是每一個現(xiàn)代UI中不可或缺的組成部分，它們不僅能協(xié)助UI布局組織內(nèi)容，而且輕量級的圖標融入界面也不會喧賓奪主。不僅手機和平板的APP UI中會大量用到各種圖標，而且iPod和智能手表的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力。
在網(wǎng)頁設(shè)計剛剛興起的時代，小圖標就已經(jīng)被早期的網(wǎng)頁設(shè)計師和開發(fā)者投入使用了。這些圖案和標識通常是常見的、易于接受的、功能型的圖形(文件夾、打印機、鼠標、箭頭等)，在隨后的20多年間，這些圖標逐漸發(fā)展成約定俗成的一套圖形語言。在接下來的設(shè)計指南中，我想分享一些網(wǎng)頁設(shè)計中圖標使用的技巧，以及一些實用的免費圖標素材合集，希望你能喜歡!
圖標設(shè)計樣式
我們通常所說的“圖標設(shè)計”其實覆蓋了相當大的一個范圍。小到網(wǎng)頁中那些純色扁平小標識，大到PS和AI精雕細琢的擬物風APP圖標，都在圖標設(shè)計的范疇內(nèi)。每個圖標設(shè)計項目都有著不同的設(shè)計需求和圖標風格，這些不同造就了圖標設(shè)計的差異化。
目前所流行的極簡風和扁平化設(shè)計，已經(jīng)在全世界設(shè)計師中擁有了無數(shù)的擁簇。而之前一直不溫不火的線性圖標也已經(jīng)成為了目前iOS系統(tǒng)的首選圖標，其他的移動操作系統(tǒng)也正在逐步跟進。從風格上來說，圖標并無對錯之分，只能說是各自選擇和偏向不一樣罷了。
在我看來，扁平化設(shè)計和擬物化設(shè)計之間的競爭對比，對于網(wǎng)頁設(shè)計而言是一件無比美妙的事情。這也對圖標設(shè)計產(chǎn)生了影響，許多藝術(shù)領(lǐng)域的概念被引入到圖標設(shè)計中來，比如光影變化，深度，等等。作為設(shè)計師的你如果更傾向于扁平化設(shè)計，那么你需要學習創(chuàng)建紋理，控制陰影，讓你的設(shè)計看起來富有真實感。為此你需要進行大量的練習，但是這絕對是值得的。
企業(yè)品牌設(shè)計
雖然品牌設(shè)計看起來是顯而易見的事情，但是它依然值得一提，因為那些優(yōu)秀的網(wǎng)站通常有著優(yōu)秀得令人難以置信的品牌設(shè)計。一個優(yōu)秀的圖標能向用戶傳達出品牌的理念和情感。當你為一個企業(yè)或者網(wǎng)站進行品牌設(shè)計的時候，品牌的圖標、吉祥物或者符號應(yīng)該讓品牌和它的用戶之間形成獨特的情感聯(lián)系。
當然，你也可以為品牌設(shè)計一系列不同的圖標，每個圖標包含不同的效果，傳達不同的理念。圖標設(shè)計的可能性是如此之多，你甚至可以設(shè)計出以個圖標大合集，讓所有不同的圖標擁有相同的風格。由于每個圖標都是獨特的存在，但是風格又如此一致，當它們運用到網(wǎng)頁中的時候，可以讓整個網(wǎng)頁擁有獨特的氣質(zhì)，足以從諸多設(shè)計中脫穎而出。
MailBakery 就是這樣一個典型的案例，它使用了個大圖來宣傳它們的服務(wù)。當光標移動到下方每一個圖標上的時候，上方的大圖內(nèi)容會被替換成相應(yīng)的圖片內(nèi)容，這樣的圖標+圖片的組合在設(shè)計上保持著高度的一致性。
這些圖標所對應(yīng)的圖片可以說是專門為網(wǎng)站定制的，但是這些圖標卻是某個免費圖標集的一部分。你可以在幾十個不同的網(wǎng)站上看到這些相同的圖標，也就是說，這些圖標作為潛在品牌設(shè)計的獨特性，已經(jīng)被忽略掉了，他們其實可以做的更好。
也正是因此，我常常建議有報復的圖標設(shè)計師去學習為界面單獨定制成套的圖標集。對培養(yǎng)品牌、客戶以及項目而言，這都是更為長遠更有價值的事情。
導航鏈接
在過去，網(wǎng)頁上的圖標常常用作內(nèi)容導航，也就是說，圖標的內(nèi)容和含義，同圖標所指向的頁面內(nèi)容/性質(zhì)高度相關(guān)或者一致。今天，F(xiàn)acebook上的導航也遵循著同樣的原則。
雖然你不會一直遵循這樣的設(shè)計方式，但是有必要且值得了解它。下拉菜單鏈接通常非常實用，因為用戶會主動去了解每一個菜單的名稱。但是如果在橫向或者縱向上有十幾個導航鏈接的話，通過圖標來識別是比較可靠的方案。
視覺內(nèi)容識別
在網(wǎng)頁設(shè)計中使用業(yè)內(nèi)圖標最主要的原因是用來區(qū)分內(nèi)容。圖標可以從視覺上更清晰地傳達信息，能夠平衡包含大量文本的布局，所以，如何通過一個簡單的圖標來準確傳達信息是設(shè)計師的必修課。
我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應(yīng)的圖標，為你說明這以塊是干啥的。
值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統(tǒng)一設(shè)計的一整套圖標。更重要的是，每一個圖標都明確直觀地描述了它所在區(qū)塊的內(nèi)容。文字內(nèi)容足以描述清楚細節(jié)，但是圖標能高度概括地闡明信息。
你可以在 Glazed & Infused 的首頁看到類似的設(shè)計效果。文字小區(qū)塊詳細地描述了他們的服務(wù)、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內(nèi)容的性質(zhì)，更重要的是，這三個圖標迅速地抓住了用戶的眼球。
矢量背景
從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情。對網(wǎng)站背景的處理方式，已經(jīng)遠不止于平鋪紋理那么單一了。通過矢量圖形來創(chuàng)建覆蓋整個背景的場景已經(jīng)很容易了。
矢量圖形可以很輕松地縮放，但是很難創(chuàng)造出逼真的效果。想制作出復雜樣式的矢量圖形并不容易，你需要通過大量的練習來熟悉在圖形上構(gòu)建圖形的技巧，不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具：Bota Iusti。
設(shè)計教程
跟蹤學習在線的設(shè)計教程是提高圖標設(shè)計技能的重要方式。想要精通設(shè)計技能沒有捷徑，唯有不斷學習，堅持練習。
雖然圖標設(shè)計是一個廣泛的領(lǐng)域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設(shè)計中去。
16×16 px Icons
Weather Line Icons
Flat Social Icon
Tab Bar Icons
Bat Icon
Gem Icons
Water Pistol
Mail Alert
Notebook
Almost Flat
免費圖標
40 Flat Icons
Mini Icons
Colorful Iconset
Simple Flat
Sport & Fitness
Chat & Email
Atitel Icons
Tab Bar Icons
Simple Lines
Flatified
Web Design Iconset
iOS Settings Icon
Colorful Switch
Synthesizer
Book App Icon
網(wǎng)站前面的圖標是怎么弄的？？
網(wǎng)站前面的圖標是叫favicon.ico圖標，也是顯示一個自己個性的標志。你可以制作一個ico圖標，并命名為favicon.ico。操作步驟：第一、百度一下“.ico圖片制作”，就能找到很多.ico圖片制作軟件。第二、點擊.ico圖片制作軟件，第三、選擇一張圖片，任意圖片都可以，不過還是建議：用正方形圖片，圖片中標志盡量占據(jù)絕大部分，這樣生成的.ico圖片才能更加清晰。第四、上傳成功后，需要選擇.ico圖片的尺寸大小，這個可以按照自己的需求來選擇，一般選擇48*48的比較好，這樣的會比較清晰一些。第五、.ico圖片制作軟件生成一個.ico圖標，但是要傳到網(wǎng)站上，必須修改圖片的名稱為favicon.ico，這是固定格式，然后用FTP將favicon.ico圖片上傳到網(wǎng)站根目錄下即可。
怎么把一個網(wǎng)站制作成手機桌面上的一個圖標？是手機終端嗎？怎么弄？
一個是通過手機的瀏覽器，保存書簽在桌面一個是通過將網(wǎng)站做成app來放在桌面，難度取決于網(wǎng)站內(nèi)容，架構(gòu)，如果是一般的展示型網(wǎng)站，可以使用現(xiàn)在的簡網(wǎng)，百度移動什么，或者搜索免費app制作一類的網(wǎng)站生成
怎樣用CSS給網(wǎng)站title加小圖標？
先制作好icon,然后再在<head>里面插入<link rel="Shortcut Icon" href="icon地址" type="image/x-icon">
制作網(wǎng)頁如何做出“返回頂部”圖標并固定在頁面右下的位置？
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
var goToWhere = function (where)
{
var me = this;
clearInterval (me.interval);
me.site = [];
var dom = !/.*chrome.*/i.test (navigator.userAgent) ? document.documentElement : document.body;
var height = !!where ? dom.scrollHeight : 0;
me.interval = setInterval (function ()
{
var speed = (height - dom.scrollTop) / 16;
if (speed == me.site[0])
{
clearInterval (me.interval);
return null;
}
dom.scrollTop += speed;
me.site.unshift (speed);
}, 16);
};
</script>
</head>
<body>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
<div id="back-up" onclick="goToWhere(0)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回頂部</div>
<div id="back-up" onclick="goToWhere(1)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>
怎樣用CSS給網(wǎng)站title加小圖標？
先制作好icon,然后再在<head>里面插入<link rel="Shortcut Icon" href="icon地址" type="image/x-icon">
html 怎么添加ico小圖標
你可以在線制作的你ICO筱圖標，如果你覺得清晰度不夠的話，你可以用制圖軟件制作ICO小圖標，上傳到你的服務(wù)器上；在你想要的網(wǎng)頁上加入代碼 <link href="ICO的圖標地址" rel="shortcut icon" />刷新你的網(wǎng)站就能顯示了；
熱門問答
