文章專區

網頁設計相關文章

在作網頁設計時常常需要嵌入youtube影片,但一碰到RWD網頁時,影片就會遇上無法隨著螢幕縮放的問題!這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了,因此我們需要修改以讓影片能跟著RWD一同縮放。 步驟相當簡單: 1.首先在CSS列表中新增以下CSS .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;} padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來,9除以16=0.5625換算高度比0.5625=56.25% padding-top: 30px:用於修正的高度,可用25px或30px 2.在youtube提供的iframe原始碼加入<div class="video-container"></div> EX: <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/9CjvlhJMkcc" frameborder="0" allowfullscreen></iframe></div>   影片實例: 可以縮放視窗看看實際效果唷! 以上,就可以使youtube影片100%自動縮放瞜!這是在RWD設計裡相當實用的基本技巧。
html提供許多特殊符號可使用,像是星星、金錢、箭頭.....等等,在作網頁設計時,這樣的話就不用切成圖片,而是能直接寫成html碼了! 而Mausr是個能直接透過手畫找到你想要的符號的搜尋器,十分便利。   1.Draw a symbol - Mausr:http://www.mausr.com/ 進入網頁後,左邊的框框內為繪製區,可以自由地繪出你需要的符號大致輪廓。   2.繪出圖案後網站會自動幫你搜尋類似的符號,其上會提供html碼,只要複製即可運用。   只要畫出大致形狀就會跳出相似圖形的搜尋結果。     除了用繪製區尋找外,還提供了符號列表可供查找。   Mausr辨識效果相當強大,對於網頁設計師來說是不可多得的好工具。  
以往網頁設計常見使用jpg、png、gif等圖片檔,但因為皆屬點陣圖模式,由於RWD(自適應網頁設計)可以隨著螢幕作放大縮小,所以若切成一般圖片格式易造成模糊失真的問題,而SVG會是不錯的解決方法。 SVG(Scalable Vector Graphics)是一種可縮放式向量圖形,是W3C所制定的開放性網路標準之一,此圖片格式能讓網頁設計師在網頁中以向量格式呈現圖片。可以在illusrator中畫好向量圖形,另存成SVG檔,運用方式就跟一般用jpg、png、gif等圖片檔一樣,但不同的是並不會因尺寸的改變而失真,日後欲修改時也可直接開啟檔案修改,相當方便,在網頁設計領域中,SVG的使用已越來越普及。   step.1:開啟製作的AI檔   step.2:另存新檔->SVG檔   step.3:保持預設選項不變,按「確定」   SVG檔在原始碼的寫法如下: 1.跟一般圖片寫法img一樣 <img src="001.svg" /> 2.直接用svg元素寫法 <svg width="800" height="800" version="1.1" xmlns=" http://www.w3.org/2000/svg " xlink:href="001.svg" ></svg> width、height:定義svg的寬高 version:指出此文件遵循的svg語言版本  xmlns:為SVG命名空間 xlink:指出SVG檔案路徑   另外,可直接用SVG標籤繪製圖形,以下介紹三個基本屬性。 圓形:circle 可設定圓心的座標(cx,cy)  r:半徑 fill:填滿色 stroke:線條顏色 線條寬度: stroke-width ex: <svg><circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="5"/></svg>   線條:line 從(x1,y1)到(x2,y2)的線條 ex: <svg><line x1="20" y1="20" x2="50" y2="50"/></svg> 矩形:rect 以(x,y)作為左上角的座標繪製 <svg><rect x="20" y="25" width="40" height="40"/></svg>   SVG除了可以先繪製圖形再置入,亦可直接寫原始碼繪製圖形,是網頁設計師可善加利用的工具!
 nth-child是CSS新增的偽類選擇器(不寫在html裡,而是寫在CSS),標準的語法是:nth-child(n),括弧中的n可以是奇數「odd」,或是偶數「even」,也可以自訂數列應用。此功能能夠有效減少多餘的class與id,十分方便,應用上也非常彈性與廣泛。   1. :nth-child(odd)選取奇數 ex: .list_1 li:nth-child(odd){ background:#311D1E; color:#fff;}   設定只選取列表中的奇數項目。因此位於第一與第三列的001與003會被選取。   2. :nth-child(even)選取偶數 ex: .list_2 li:nth-child(even){ background:#4E5996; color:#fff;} 同理,even設定偶數,所以位於偶數列的項目會被選取。   3. :nth-child(n)選取特定的數字 ex: .list_4 li:nth-child(5){ background:#61AA72; color:#fff;} n數值設定為5,因此只選定第五項被選取。   4. :nth-child(an+b)自訂數列 裡面的「n」從0數起,a與b為自訂數值。 ex: .list_3 li:nth-child(2n+1){ background:#4CB0D4; color:#fff;} n的值從0算起,因此數列計算如下: 2X0+1=1 2X1+1=3 2X2+1=5 ......以此類推。   CSS3 的:nth-child(n)在網頁設計上十分實用,初學者可以多加應用看看。
   HTML本身是一個網頁頁面的架構,是超文件標示語言(HyperText Markup Language,簡稱為HTML),它具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性。  隨著網路環境的快速發展及行動裝置的出現,因此網站的結構也不斷的演進,Html5與html最大的差異在於寫法的改變,新增許多元素加強文章結構的明確性,例如以往版本的HTML4有 這樣的表示方式,主要是利用 區分文件各個部分,然而HTML5中,許多常用的功能有了自己的標籤,例如和標記,使插入聲音和影片變得更簡單,使用的語意標籤取代不具意義的 所構成的HTML文件,來協助我們做到更好的語義架構,讓開發者更容易閱讀,也更容易讓搜尋引擎能快速了解網頁的重點。     HTML4標籤 HTML5標籤 說明     位於網頁頁面頂部,放置網站的LOGO、大標題或主要資訊     放置網站的連結或選單     文章內容可以有很多個,用於章節或標題的段落區分     放置側邊攔     位於網頁頁面的底部,大多用於顯示著作權、作者或相關資訊等    
   19.Template Monster http://www.templatemonster.com/    Template Monster是全球知名的版型套用網站,版型應有盡有,分類也相當詳細,每個範本內容提供完整,包括PSD、字型等原始檔案。也可以對每件作品評分並加入收藏。   20.Duda https://www.dudamobile.com/responsive-website/templates   Duda是一款為專家與小企業服務的網站建立平台,網頁設計簡單明亮,提供的版型有企業、餐廳、一頁式等多項類別,也能以顏色作搜尋。       21.Jimdo http://www.jimdo.com/templates/   Jimdo是自助建站服務,讓不懂網頁的人也能輕鬆建立屬於他的個人網站,高品質的作品對於設計師來說也是啟發靈感的優良來源。網站上方以醒目的精美大圖搭配,類別有商店、企業、個人網頁等等。
 16.Squarespace http://www.squarespace.com/templates/   Squarespace是熱門的自助建站系統,版型設計都相當漂亮有質感,若有喜歡的可以點作品名前的愛心圖樣,會收集於左側欄的My Favorites裡,每個作品都有提供在不同的尺寸下的展示效果可供預覽。除了網頁版型以外,還提供許多樣式的平面圖樣讓你可以線上快速設計LOGO。   17.One Page Love https://onepagelove.com/templates/free-templates 作品以大量豐富的一頁式網頁設計為主,網站以灰為底色,各版型會標明免費跟需付費的價格,分類多樣化。   18.SF http://www.strangefruits.nl/   SF art&design portal是阿姆斯特丹一家網站工作室創立的網頁設計網站,整體版面乾淨俐落,可以用樣式、顏色、國家等類別來搜尋。
13.Creative Market https://creativemarket.com/templates/websites/popular Creative Market是一個提供設計資源的線上販售平台,每周會提供六個素材免費下載,除了網頁版型以外,還有其他如icon、照片、字型、筆刷、圖樣等素材,分類多元而豐富,不管是參考設計樣式還是付費使用素材都很方便。   14.CSS Clip http://cssclip.com/  CSS Clip網站的版面相比其他網站較為陽春,較特別的是網頁設計作品排版是以直排為主,有點類似pinterest,以彩度低的藍為底色,給予人沉穩印象,左方的色環可以自由選擇欲搜尋的網頁色調,相當便利。   15.Css Design Awards http://www.cssdesignawards.com/wotd-award-winners  Css Design Awards是網頁設計競賽平台,網站導覽列以黃紫強烈對比色作搭配,整體搶眼有力,評分項目有「創意與設計」、「程式與功能」、「可用性與內容」三大類。
10.Awwwards http://www.awwwards.com/websites/responsive-design/ Awwwards是一個內容豐富且十分知名的網頁設計線上評分平台,會邀請來自世界各地專業的設計師們組成評審團,對網站作品進行共同評分,因此經過評分的網站設計是相當具有參考價值的。   11.Web Design Clip http://www.webdesignclip.com/ 日本的網頁設計網站,以淺灰為底色,搜尋種類繁多,特別的是有以主色調、副色調、layout為主的類別,點進該網站截圖即可前往該網站或可選擇看詳細資料。右欄另有以各主題蒐集的網頁設計作品,以及介紹設計上好用的CSS等資料,非常方便。   12.CSS Drive http://www.cssdrive.com/ CSS Drive是一個色版產生器的網站,會分析各網站或圖片並製作出一個調色板,只要一滑到該網站截圖便會出現用色表,設計師可以藉由這些網站的用色啟發配色靈感。另外還提供了壓縮CSS的功能,使得寫出來的CSS更簡潔,是相當好用的工具。
 7.Shopify https://themes.shopify.com/?price=&sortby=date+desc Shopify是相當著名的電子商務平台網站,操作容易且快速的開店系統,加上提供了千變萬化的網頁設計範本,為賣家打造具有完整功能且設計美觀的電子商店,設計師可從中學習到購物網站的視覺設計元素與編排,例如高質感照片的使用與適當的排版留白等等。   8. W-Finder http://w-finder.com/ 日本的網頁設計網站,右欄排滿各式各樣的作品截圖,只要一點擊便可直接進入該網站,截圖右下角置有愛心圖示,若喜歡該作品的話可點擊收藏,收藏的作品會集中於左欄的「favorite」中。搜尋分有「種類」、「產業」、「風格」、「顏色」四大類。   9. 品網 http://bbs.blueidea.com/pages.php   中國大陸的網頁設計網站,由於該網站使用的是簡體中文,相較於其他眾多外國網站,對我們而言,在閱讀和搜尋方面親切易懂許多。搜尋類別以內容、技術、顏色、國家為主。