網頁設計相關文章

以往網頁設計常見使用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中，許多常用的功能有了自己的標籤，例如＜audio＞＜/audio＞和＜video＞＜/video＞標記，使插入聲音和影片變得更簡單，使用的語意標籤取代不具意義的 所構成的HTML文件，來協助我們做到更好的語義架構，讓開發者更容易閱讀，也更容易讓搜尋引擎能快速了解網頁的重點。     HTML4標籤 HTML5標籤 說明     ＜header＞ ＜/header＞ 位於網頁頁面頂部，放置網站的LOGO、大標題或主要資訊     ＜nav＞＜/nav＞ 放置網站的連結或選單     ＜section id="”main”"＞＜/section＞ 文章內容可以有很多個＜section＞＜/section＞，用於章節或標題的段落區分     ＜aside＞＜/aside＞ 放置側邊攔     ＜footer＞＜/footer＞ 位於網頁頁面的底部，大多用於顯示著作權、作者或相關資訊等    

   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   中國大陸的網頁設計網站，由於該網站使用的是簡體中文，相較於其他眾多外國網站，對我們而言，在閱讀和搜尋方面親切易懂許多。搜尋類別以內容、技術、顏色、國家為主。  

 4.Best Web Gallery http://bestwebgallery.com/ 網站以黑底白字作搭配，讓觀者可以很舒服地瀏覽，精緻的花紋壓底加上簡單大方的排版，使得整體的視覺設計上相當有質感，選單種類除了「TOP10」與「Best of」以外，另有UI設計等等。   5. IEESAI http://www.ikesai.com/  收集日本最新網頁設計作品的網站，分類主要是以產業、配色等作依據，每個網頁會用小型縮圖的形式以方便瀏覽，風格十分多元化。   6. Css Winner http://www.csswinner.com/ 此網站是評選全球最佳網頁設計作品的競賽平台，每個作品右邊都有各項目的評分，分為「DESIGN」、「FUNCTIONALITY」、「USABILITY」、「CONTENT」等項目，每個月都會評選出優秀的CSS網站作品，使用介面乾淨明瞭。

1.Free Template http://www.freewebsitetemplates.com/  此網站提供超過百種的免費網站設計，也有許多版型可以下載，還貼心地提供PSD原始檔，適合初學者練習切版等基本功。排版偏簡潔俐落，並使用豐富照片搭配為主。   2.WIX http://www.wix.com/website/templates/html/most-popular  WIX提供上百種免費模版和圖庫可供使用，就算不會網站設計也可輕鬆架設網站，風格已分類好可供選擇，使用上十分方便，風格相當多樣化，設計師也可多做參考。   3.WEBデザインリンク集 http://gooddesignweb.com/  介紹許多日本當地優秀的網頁設計作品，特別的是選單上包括網站主顏色、子顏色、排版版型等等，豐富並清楚明瞭的Tag和種類讓搜尋上更便利。