當前位置:首頁 » 網頁前端 » web小圖標裝飾
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web小圖標裝飾

發布時間: 2023-01-20 13:20:40

⑴ 如何讓移動web上的小圖標 更清晰

啊比黃昏還要黑暗者,比血液還要鮮紅者,在時間之流中出現吧,在您的偉大之名下,把阻擋在我前方的所有愚昧之物,集合你我之力,賜予他們平等的毀滅! ——《祈盼琉星語錄》

⑵ phpweb如何改網站小標志例如百度的網頁標志

<link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico" />
在你的網站頁頭找到這個標簽,其中 href="images/favicon.ico"就表示那個圖標的路徑,你把那個圖標找到,然後自己製作一個,修改為自己製作的圖標即可

⑶ web前端什麼是雪碧圖

  1. 雪碧圖被運用在眾多使用了很多小圖標的網站上。

  2. 相對於把每張小圖標以.png格式文件的形式引用到頁面上,使用雪碧圖只需要引用一張圖片,對內存和帶寬更好。

⑷ 請問文件夾內全部為web顯示,怎麼改為大圖標或小圖標顯示

上方工具欄中有一個正方形的小圖標,單擊它從中選擇一個喜歡的方式就行了。
位置:在「文件夾」圖標的後面,點擊出現下拉菜單

⑸ 怎樣點亮Web圖標啊

Webqq其實就是騰訊QQ的網頁版本,這是騰訊公司專門設計的一款給電腦上無法安裝QQ客戶端的用戶使用的一項服務。目前的webQQ發展到了webQQ3.0時代了,並且提供了強大的桌面功能。WebQQ3.0環境下webqq圖標怎麼點亮,其實操作是非常簡單的,只要你的QQ賬號登陸過WebQQ3.0,QQ客戶端上的web圖標就會自動亮起來了

⑹ 如何製作自己的網頁字體圖標

從設計單獨的圖標開始,到把它們轉化成@font-face格式以備嵌入,乃至授權給他人使用,整個過程中我們將僅使用免費軟體和在線服務。感覺怎麼樣呢?你不必依託於任何深奧的知識就可以製作出一套成功的英文字體(包括字母和數字),而只需要眼睛來設計——你面對的可能是非常非常小的東西。

最終,你將會收獲一個製作設計元素的過程(方法),它的意義遠遠在製作出簡單的圖標之上。

在我們繼續之前,首先應該談談,究竟希望通過在設計中使用圖標達到什麼目的,又是什麼使得一個圖標比下一個更成功。先講理論再講應用。為了完成這個任務,我們必須思考圖標作為符號學的一部分,所扮演的角色。

什麼是優秀的圖標?

符號學,從廣義上來說就是研究符號系統,我們如何對它們的形成和維護做出貢獻,它們亦因我們對世界的理解而受到影響。

不論何時,當你從「它象徵著什麼」—— 它向你的觀眾傳達了什麼信息,或者它喚起了他們什麼概念——思考你的某一部分設計工作時,你就是以符號學家的角度來審視你的設計。符號學像其它語言學一樣,的確可以覆蓋一種語言,在一個網站上面,有很多東西不是通過文字表達出來的,例如顏色、字體、形狀(圖標)。每個人都應該注意的是,這些東西所表達的都含有一種很強的文化因素。在中國,紅色可以表示好運氣,而在很多西方國家,它卻意味著危險。
術語「icon」在符號學中有一個特殊的意思。icon是一個神器,通過相似表達某事物。例如,一個標記地圖位置的icon。它擁有一個類似真實的
地圖標記的形狀,因此它可以表示一個位置,反過來,真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念,比如地點;也有不太抽象的概
念,比如這個位置可能在什麼地方。

一些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標,一個點和兩個同心圓弧段,沒有什麼比它更像Really Simple
Syndication 了。構成RSS圖標的形狀通過單獨約定具有象徵意義,對此我們已經達成了共識。不過,一個RSS圖標更適合被稱為RSS標志。
現在,我希望我們已經確定了下面兩項成功的網站icon需要遵循的准則:

要有與真實事物的相似點,例如,一個類似真實列印機的列印圖標。

你的圖標在符號系統中應該是一個熟悉的,可識別的標志。

字體圖標日益受到歡迎

Icon字體,由於其提供了一種圖標速記方式,長期以來被認為是一種加強型UI設計,它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳,使用它可以使你的設計更加亮麗、吸引更多用戶點擊。

與圖片相比,使用icon式字體是一個相對新的主意。然而,與圖片(背景圖片方式)相比,它具備很多固有的優勢,因此它的吸引力正在逐漸增長。早在9月初,我在微博上寫了它的一些好處,Chris Coyier顯然也有類似的想法,幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容,我編寫了這個較為完整的特徵列表:

它們的尺寸能夠輕松調整,並且不會損壞圖像質量(作為矢量圖);

給icon定義顏色和文本一樣簡單。例如,對於一個rss圖標,color:orange;

可以把許多icons排列在一個組中,也就是一個文件中,這樣只需要一次http請求就可以了;

正如Chris所指出的,它們在IE6中也可以借著透明性顯示出形狀(這一點 與PNG圖片不同);

對於那些應該出現在文字附近的圖標,對齊方式和包裝都不是問題(因為它們是文本);

你可以應用CSS3的text-shadow和background-clip:text效果,以便凸顯字型的形狀;

不像SVG,icon字體很容易實現跨瀏覽器兼容;

問題

Chris說過,使用icon字體是一個不錯的主意,我要告訴你。

盡管如此,icon字體的使用現狀並不理想。首先,一些優質的可用字體,如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味著真有兩個問題:

你或許不得不投資一部分錢。

無論你是否需要花錢,你將會被迫接受其他一些人的糟糕設計。

除了自動抓取程序,我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師,我不認為只有我一個討厭依靠別人的作品,使自己的設計思路大打折扣這
種事兒。當然,我更不喜歡那種有支付許可權的想法。我知道自己要使用什麼圖標,並且我知道如何才能使其適合我的整體設計。我想要那種控制力。

經過一些搜索,我想介紹一下Inkscape的svg字體編輯器。通過使用Inkscape和一款在線轉換器(SVG字體到TTF),我製作出了字體「Heyding」,這個字體在 Simurai』s list(由Coyier的文章鏈接到)中有介紹。我不打算將自己的字體賣給你(它是免費的),但是我想它會帶給你一個非常好的概念。

使用Inkscape製作icon字型

啟動Inkscape

我們先從下載和安裝Inkscape開始。你也應該使用我的icon字體啟動器模板,它們被放在這個GitHub倉庫的資源文件夾里(以後這個項目中還會有更多)。一旦你在Inkscape中打開了這個文件,你應該通過在主菜單中打開以下窗口來設置好你的工作空間:

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

TEXT → SVG FONT EDITOR
在SVG字體編輯面板中,點擊「Font」下的「Font1」。現在,你的工作空間看起來應該有點兒像這個截圖:

值得指出的是, baseline不是在畫布的下邊界之下:如果你希望與相鄰的字體共享同一條基線,你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia,Arial和一些網頁字體進行了測試。

製作你的第一個字型

為定義字型,點擊SVG字體編輯面板中的「Glyphs」選項卡,然後點擊面板下方的「Add
Glyh」按鈕。一開始你可能不太清楚,但如果你在你的字形(「字型1」)上點擊,一個欄位將會顯示出來,它要求你輸入你需要的圖標對應的字元。我們首先
要做一個簡單的星形,所以我建議你輸入的字元「s」,「S」或「*」:

現在我們已經定義了字型對應的字元,我們需要製作字型本身。由於這次我們僅僅要製作一個星星,我們應該從Inkscape左邊的工具欄中選擇有用的
Stars and Polygons tool
,然後,在畫布上繪制一個星星。你會發現,這個工具自帶的選項允許您更改星星的外觀。在我的例子中,選擇了角數為5,spoke
ratio為0.5,rounded value為0.1。

使用Align and Distribute panel(可能在SVG Font Editor下面隱藏著)使星星橫向居中,然後鄉下拖動形狀使觸及基線。關閉網格顯示之後,畫布看起來應該像這樣子:

在我們的icon字體中,字型只是形狀,沒有顏色、層級或者漸變的形狀。因此,為了使我們的星星成為一個合格的字體候選者,我們必須將它由一個對象
轉化成基於路徑的圖形。你可以通過在主按鈕上選擇星星,然後是PATH → OBJECT TO
PATH來完成這一任務。現在,選擇了星星之後,我們可以在SVG Font Editor 中,高亮顯示可用的「s」字型,然後點擊 Get
curves from selection按鈕:

當你在Sample Text 區域輸入「s」時,你的星星應該被預覽出來,如下所示:

製作更加復雜的icon

你已經製作出了第一個可擴展的SVG字體字型。通過使用Fill and
Stroke面板上的選項:編輯路徑節點,以及合並對象和筆畫,能夠使你做出更加不凡的icon設計。由於我們還有很多要講,我不想深入完成一個完整的
Inkscape教程,但是遵循下面的簡單規則會給你帶來好處:

堅持使用黑色筆畫和填充,只是為了提醒你:那些icon僅僅是形狀,而非復雜的矢量圖。為icon上色這件工作,我們會在最終產品中使用CSS來完成。

所有對象和筆畫(線條)必須被轉化成路徑(不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH)

當有多個對象和/或筆畫被用來完成一個icon字型時,它們應該被合並起來(使用PATH → COMBINE 或者,在某些情況下,使用 PATH → UNION)

為了在已有的形狀上剪切出想要的形狀,將形狀放置在主形狀上面,選擇兩個形狀,然後選擇 PATH → DIFFERENCE。點擊Get curves from selection ,黑色塊上面的白色區域剔除之後就是你要的形狀。

准備嵌入你的字體

假如你已經重復了很多次我剛才所描述的方法,創建了一些有用的圖標,並且,字體文件被保存為myicons.svg。現在,你將要准備好把這個圖標庫用於網頁中。

把SVG轉化成TTF

你應該採取的第一項措施是,將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時,它還為再轉化成@font-face提供了一個良好的基礎。可以進行字體轉換的在線服務包括: http://onlinefontconverter.com,http://www.fontconverter.org和http://www.font2web.com。然而,我個人最喜歡的,是http://www.freefontconverter.com,因為我不會排隊,也從來沒看到它產生什麼故障。

我想,不需要向你介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳欄位,select元素和巨大的轉換按鈕會讓你迅速抓住重點,真的。

編輯字體信息

既然你已經獲得了一個TTF,我推薦你現在編輯產生的元數據。對字體進行重命名、添加屬性和描述,使它准備好被安裝、嵌入和分發。這也是一種聲明字體為你所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的 Microsoft Font Properties Editor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶,我希望得到你們更好的意見。

重要提示:雖然Microsoft Font Properties
Editor允許您添加作者,描述和許可信息,它似乎並沒有讓你編輯字體名稱、附言名稱等基本數據。這些欄位是被禁用的。如果你想使用這些特殊的功能,你
需要在SVG轉換為TTF之前,在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器(我用Notepad++)中打開原始的SVG,並編輯以下內容:

Font Name:標簽中可以尋找到, font-family 屬性

Postscript Name:標簽中可以尋找到, id屬性

Description:你應該在這個標簽中添加一個描述(作者、許可等)。請注意這與TTF描述文字是不同的,轉換過程中將不會被保留;你還需要為TTF添加單獨的描述信息。

嵌入字體

一旦你在本地系統中安裝了TTF,並且已經預覽過,確定沒有出現意外狀況,你就可以在Font Squirrel的 @font-face generator中運行它了。為了使輸出代碼的效率和效果盡量好,這里有幾個專家模式中的選項值得一提:

Subsetting:該選項允許您只運行需要的字元集(包括字元編碼、類型、語言等選項),減少文件大小。

Remove kerning:您的圖標將幾乎總是單獨出現,所以字距是沒有必要的。據稱,這也將減小文件大小。

WebOnly™:如果你希望您的字體僅僅用於web中,而非桌面- 你可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。

發布字體

如果你有興趣發布你的字體,給它添加許可是一個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們製作圖標時使用的是免費、開源的軟體,發布時也不妨這樣做。

目前,有很多可用的授權選項,而逐一調查研究它們有時是令人費解的一件事。 GNU General Public License是完全可以接受的,但你可能要考慮SIL Open Font License。使用這種許可證的主要優點是,reserved font name:即允許其他設計師修改字體,但他們需要用不同的名字。在實踐中,這意味著,對圖標設計的一些不良行為不能以「你的名字」來進行。

有了這兩種許可,你還應該在一個文本文件中保存版本信息,同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明,請訪問各自的許可證頁面(上面的鏈接)。

CSS spriting的終結者

為什麼要停下使用SVG字體做通用圖標的腳步?有了做圖標的能力,也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS
sprities,所有這些視覺元素都可以保存在一個文件中,減少了伺服器調用http請求的次數;不過,icon字體的元素都可以調整大小,而不必依賴
於位置坐標(背景位置值)才能正確顯示。這使它們更適合於 responsive design。

讓我們假裝要選擇使用一個SVG字體去代替一些我的steampunk般的blog里基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子:

關於這種方式,最好的事情就是通用性。舉例來說,從左邊的第二個齒輪形狀既可作為一個微小的圓點設計,又可以是一個巨大而抽象的背景裝飾。著色很簡
單:color:maroon,但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓你一開始有所啟發,查看this excellent gallery of CSS3-enhanced webfonts。

關於屏幕閱讀器的快速筆記

以這種方式使用字體來顯示視覺元素的一個問題是,在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪,箭頭之類的圖標,但是屏幕閱讀器將堅持讀出指定這些設計的字元。對於使用裝飾性的SVG字體元素,我建議聽取Coyier的建議:為Unicode的Supplementary Private Use Area分配向量。這樣的符號不應該由讀者來讀出。

一個協作式icon web字體

作為我的JavaScript導師,Rupert,有一天向我指出,使用SVG字體來創建圖標集為合作提供了一個有趣的機會。你看,SVG的代碼 - XML的一種形式 - 是高度標准化而且輕松可讀的。正是源碼的順序讓我覺得,icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。

這個想法契合了我想要的符號含義:如果一個圖標是由很多人協商之後一致確定的,那麼它的形成過程中也存在一定的「共識」。通過我們的圖標標識系統設計出來的,一定是最典型的圖標。我們應該創建一種屬於社區的icon詞彙,並且它對於需要的人來說是有意義的。

為了發展這個想法,我創建了一個公開的GitHub倉庫Community Icon Font,這個倉庫的文件結構並不復雜:仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為你解答所有的疑惑。如果你是GitHub的新成員,嘗試閱讀它們的幫助頁面,或者問問你附近的技術人員(我正是這樣做的)。

⑺ 我的小web頁面,前面小圖標不能換成我設定的圖片

你可以搜一下ico圖標製作,在線製作一個,然後建議把生成的favicon.ico放在根目錄,添加上代碼就可以了。有的時候游覽器不顯示,沒事的,等你放到伺服器上時,顯示沒問題。

⑻ web.xml 裡面的<icon>用法

如題,<small-icon></small-icon><large-icon></large-icon>的作用表現在icon元素包含small-icon和large-icon兩個子元素.用來指定web站台中小圖標和大

⑼ web小圖標的准確排列,一般用什麼軟體可做到

dreamweaver就可以了啊!! 准確排列?具體一點呢?