之前設計嵐分享了如何在進行網頁設計時,利用CSS語法將圖片加上拍立得的外框效果,對於學習網頁設計的人來說是個好用的技巧,(相關文章請參閱:[教學]成為CSS高手之路(八)~製作拍立得相片效果);而今天設計嵐再更進一步針對Blog經營者,介紹如何在blog文章圖片也加上拍立得相片效果外框,讓各位格友們不需要透過美工軟體就可以讓圖片有不同效果喔!
把部落格圖片變成拍立得相片風格
我們常常在網頁或是Blog中放置內容圖片,只是純粹放入圖片,有時候會覺得在視覺效果上略顯單調,但是如果想要針對圖片加點設計效果,往往又需要使用美工軟體進行編輯才可以做到,所以今天設計嵐來分享一個簡單的手法,利用CSS語法在圖片上製作具有拍立得效果的外框,瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔!
利用CSS製作拍立得相片效果
成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法,今天來介紹一個更實用的技巧~文繞圖的設定,這個技巧之所以重要,原因有二:1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法,網頁設計師必備技能!!
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇,經過前面五篇的基本功訓練,有閱讀並且練習的人應該對於CSS有了基本的認識,接著開始我們正式進入實際運用的介紹,當然,我們還是要由淺入深,先從最簡單的圖片效果開始介紹,慢慢的再進展到更進階的CSS設定。
CSS在圖片效果上的套用
今天來分享一個實用的技巧~GIF動畫圖檔製作,這種格式的動畫可以應用於廣告Banner、Logo、貼紙等等的設計,製作簡單又具有動態效果,相當受歡迎,實作上有許多軟體都可以完成,像是早期很流行的Ulead Gif Animator或是PhotoShop早期版本有一個ImageReady的附屬程式都可以製作。由於今天有學生問了如何使用PhotoShop製作GIF,所以本文就以PhotoShop作教學示範吧!
今天系列文章之五所要介紹的套用外部CSS檔案的方式,是先將CSS的格式語法寫在一個獨立的檔案中,並且儲存成CSS格式的檔案,然後再將此檔案以連結或匯入的方式套用在不同的網頁中,讓這些網頁同時擁有相同的CSS格式設定,相當方便快速,而且日後有需要,只要修改CSS檔就可以同時更新所有的網頁格式設定了,這對於需要統一格式設定以及同時管理大量網頁的設計師來說,是個省時簡便的好方法。
今天設計嵐來分享一個超實用的免費英文字型下載網站,這對於許多需要常常面對不同主題與設計風格的設計師來說很好用,大家不妨參考一下。
今天『成為CSS高手之路』系列文章之四,繼續針對『整頁套用的CSS規則』作後半段的說明,能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)』所提到的設定方法之外,還有其他幾種設定方式,其影響範圍也都是一整個頁面的。
這周美國網路界默默流傳一個關於知名但不怎成功的網站「Mahalo」的消息。七月份,Mahalo開了好多張支票送出去,一共付出了2萬元M幣(1元M幣是1元美金,因此這形同2萬美元)。其中有四~五位「頁主」(等一下再解釋是何意思),七月份的所得超過1500元M幣(台幣5萬元),如這位、這位、這位網友。 天啊,這是做什麼事,這麼好賺?
這期的《經濟學人》透露一個才剛剛開的網站,這個網站其實是一個新的「學術期刊」。這本學術期刊名叫《Rejecta Mathematica》,中文就翻作《數學被拒絕期刊》吧。 顧名思義,這本期刊,竟然是專門收集「被其他學術期刊拒絕的論文」! 它可是很嚴格的喔,想來這邊投稿,必須要曾經被拒絕過,才能來投!論文作者必須告訴此期刊,當時為何被拒絕,從被拒絕後到現在還做過什麼調整的努力?為何你認為這篇論文還有價值?
這篇文章是鎖定有心想要架設一個網站但不知如何著手的人,以及對一些網站規劃以及設計的要點做提醒,因為有許多由實體業務想要切入電子商務的虛擬世界時,正因為這些因素導致了大量用戶的流失,這點是非常可惜的,而這樣子的案例即使層出不窮…
這些都是網站設計在用戶體驗上的要點,在這些原則之下,把網站的企劃專案做出來,才不致因為前期規劃不當,而導致了一個沒有吸引力、沒有重點的網站誕生,關於網站企劃的其他概念,後續慢慢跟大家分享…
以Flash技術為基礎的混搭服務提供網站,可藉由內建的元件,將網路上的內容合為一個Widget,使用者可嵌入到網路上使用。
提起一個名字,許多網路公司可能對她是又敬又怕,一方面很怕自己公司的網站被她抓到小辮子,馬上就會在網路圈引起宣然大波,但她的批評與建議又往往一針見血、言之有物,讓人不得不感到發自內心的佩服。本周,就讓我們來歡迎網路上最有名的揭弊天后、QC專家──Xdite。
呵 不客氣的收下了 可真多啊....慢慢玩吧
為了打破「鐵幕」,一直以來,只有財力雄厚的西方國家電台才會設置中文網頁,提供大陸讀者另一扇觀看自己與世界的窗戶。但近期以來,基於商業理由,包含英國「金融時報」、美國「華爾街日報」、英國「路透」通訊社等,也先後開設中文網頁。
無論網站設計或是部落格門面, 總是需要一些圖案, button, 或是logo的. 用過幾個工具, 感覺還不錯, 有線上設計button, email icon, 小貼紙等工具, 順便整理了過去介紹過的 web2.0 style 的logo產生器.
Find out what a site is built with.
你也是網站開發者嗎,或只是好奇某個網站用了什麼技術架設。 只要把網址輸入,馬上就可以知道某個網站是用什麼技術實做的。 包含伺服器、使用語言、套件、外部服務、編碼和framework, 統統展示在你的面前:)
CSS樣式表提供了許多優勢,你沒有在表佈局上,首先是嚴格區分佈置,或設計新的一頁,與信息,對提交的頁面.
很有用的CSS技術
AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScript和XML),是一種創建互動式網頁應用的網頁開發技術。
全球性譯者 是能動態地 翻譯您的 blog 在以下十三種不同語言的一個自由和開放來源Wordpress 插入式: 英語, 法語, 義大利語, 德語, 葡萄牙語, 西班牙語, 日語, 韓國語, 漢語, 阿拉伯, 俄語, 希臘語, 荷蘭語。
「CSSVista」就是一個能夠同時支援 IE 及 Firefox 的 CSS 編輯軟體, 你可以即時的在「CSSVista」中預覽這兩種瀏覽器呈現頁面的結果
RoundedCornr 是一個能幫助使用者,經過幾步簡單的設定後就可以產生圓角圖形或是含有圓角邊框的內容盒 (rounded corner box) 的網站。
這些模板都是由許多熱愛設計的高手所創作,而這些創作都有一個特點,就是精美。所以就算是不懂網頁設計的人也可以很容易的套用模板然後做出一張美美的網頁。
隨著自由欄位的越來越五彩繽紛、五花八門之後,網頁載入的速度也越來越慢。為了提示讀者耐心等候,特別加了個「載入中」的小框,就像AJAX技術常見的樣式一般。以下說明我在 Xuite 裡達成的方法與步驟。首先在顯示在最上面的自由欄位裡加上如下HTML標籤:border:3px bluesolid