[講義] RWD-OnePage設計概念篇

March 28, 2018, 11:22 am

≫ Next: [講義] 使用圖示字體(icon font) Font Awesome

7. OnePage一頁式網頁概述

一頁式的設計越來越多變化，一頁式的好處在於瀏覽方式單純而直覺，使用者只需用滑鼠不斷向下捲動，就可以從頭到尾欣賞完整個網站的內容像在翻閱雜誌的感覺，因為捲動的情境，很多設計師開始加入了有趣的創意，無論是動畫、場景變換、翻頁等效果，都讓一頁式網站的瀏覽體驗變得更加豐富。

1.整個網站只有一頁網頁，類似公司或產品的網路電子型錄，設計簡單、平坦化
2.選單的項目只是捲動到(scroll)這一頁網站的某個區塊，一般都是使用HTML中的錨點(anchor)連結
3.會應用許多特效，多半和捲動(scroll)、燈箱(lightbox)相關的Javascript特效。
4.必定會使用"響應式網頁設計(RWD)，這是指網頁可以依照螢幕解析度，自動調整大小或給定觀看的內容

8. 免費版型資源

在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？
以應用在更多不同的設計上，因應更多的需求。
目前網路上有許多免費的版型可供下載製作。
接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看接下來的主題。
DreamTemplate
 http://www.dreamtemplate.com

tooplate
 http://www.tooplate.com/free-templates

templatemo
 http://www.templatemo.com/page/1

Free CSS Free CSS Templates, CSS Layouts & More!  
http://www.free-css.com/free-css-templates

HTMLl5UP
 https://html5up.net

W3.CSS Templates
 https://www.w3schools.com/w3css/w3css_templates.asp

Free Responsive HTML5 CSS3 Website Templates  
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9

OnePage免費版型資源

https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

9. 免費圖庫資源

https://www.pexels.com
https://pixabay.com
https://visualhunt.com
https://www.pakutaso.com
http://cc0photo.com
https://bossfight.co
https://unsplash.com
http://images.google.com/hosted/life
https://www.flickr.com/photos/britishlibrary/sets/
https://picjumbo.com
http://publicdomainarchive.com
https://mmtstock.com

10. 應用類型

以下是未來可應用的設計型態，期待在畢業專題的設計上能看到大家設計的網頁！

11. favicon介紹

favicon介紹 Favicon是favorites icon的縮寫，亦被稱為website icon（網頁圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將favicon顯示於瀏覽器的位址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。

Favicon線上製作轉換工具
 favico.js http://lab.ejci.net/favico.js/
FavIcon Cheat Sheet https://github.com/audreyr/favicon-cheat-sheet
了解Favicon（2013/1/24新增） http://www.jonathantneal.com/blog/understand-the-favicon/
Favicon＆App Icon Generator - 可以產生多平台的圖標 https://www.favicon-generator.org
favicon.ico Generator -極力推薦！ http://www.favicon.cc/
Favicon線上製作轉換工具 http://tw.faviconico.org/

↧

[講義] 使用圖示字體(icon font) Font Awesome

March 28, 2018, 11:49 am

≫ Next: [講義] OnePage網頁實作解析(一）

≪ Previous: [講義] RWD-OnePage設計概念篇

1. 圖示字體(icon font)

網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之 UI（User Interface - 使用者介面）。
通常網站設計的過程中，由美編人員設計ICON，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：

1.ICON風格都不大一樣，造成美觀上會有落差。
2.製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作。
3.所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢。
4.因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真。

有鑑於此，目前出現了一些將ICON製作成文字字型，解決上述問題，以 Font Awesome 為例，原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS或javascript的技術將圖示ICON呼叫出來，它擁有以下優點：

1.圖示放大、縮小不失真
2.呼叫使用相當簡單，可變化多種模式
3.一個字型卻擁有超過400個圖示ICON
4.免費使用，不必擔心版權問題
5.語法簡單

2. 使用圖示字體(icon font) Font Awesome

Font Awesome
 https://fontawesome.com

FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。

透過 JS 來載入 SVG 圖示
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。

請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在

內：



完整語法，接下來請於body內練習

<meta charset="UTF-8"> <title> Font Awesome </title>

在 HTML 中透過 標籤同時給予不同的 class 就會產生不同的圖示


過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab  分別代表 Solid, Regular, Light 和 Brands

3. Font Awesome基本操作

如果只是要調整基本的樣式，可以在圖示外面的

給一個樣式
<div style="font-size:4em; color:blue"> </div>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：

 </xmp> <xmp> <div class=" fa-3x>

4. Font Awesome5新增樣式

透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：

 
 

 
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：

 
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：

 27

5. FontAwesome CDN

6. 舊版Font Awesome練習

舊版Font Awesome，請以下面網站為例 
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html

搭配
 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示

↧

[講義] OnePage網頁實作解析(一）

April 11, 2018, 10:17 am

≫ Next: [講義] OnePage網頁實作解析(二）

≪ Previous: [講義] 使用圖示字體(icon font) Font Awesome

1. 前置設定html lang / meta tag

1. html lang 語系與字元編碼設定

在HTML5的中可增加lang=來標註網頁的語系，讓瀏覽器能更正確的解析與編碼。
在台灣的完整的寫法就是   其他語言的標示法：
en 英文
zh-Hans 簡體中文
zh-Hant 繁體中文
zh-Hant-TW 臺灣使用的繁體中文

2. 什麼是 meta tag ?

是網頁中的一個標籤，主要是用在 head 的區段，告訴訪問者的瀏覽器關於這個網頁的一些資訊，常見的有：
charset：定義這個網頁的語言，通常繁體中文的網頁是 big5,簡體是 gb2312,但現在常用 UTF-8
description：對這個網頁的敘述，可以寫一段文字來敘述本頁的一些說明。
keywords：關鍵字，與這個網頁相關的關鍵字有哪些。
    <meta charset='“utf-8"'>   語言編碼
    <meta name="viewport" content="width=device-width, initial-scale=1”>  </xmp> 螢幕解析度寬度     <xmp><meta name=" description>  網站描述
    <meta name="author" content='“"'>  作者

2. 輪播圖Flexslider / Jumbotron

1. Flexslider－－方便好用的圖片輪播、滑動切換套件

大圖輪播已經是許多網站的常見功能了，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。
此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到Flexslider官網下載資料夾。
https://woocommerce.com/flexslider/

廣告大屏幕 (Jumbotron) 

 一款輕量極的、靈活的元件，可視情況擴張到整個區域以顯示您網站的關鍵行銷資訊。
請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。

3. Grid system 網格系統

1. Grid system 網格系統概述

Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。

Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。
運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。

超小設備（手機，小於768px） */ Mobile – xs ( < 768px )/* .col-xs-
/* 小型設備（平板電腦，768px 起） */ Tablet – sm ( 768~991px ) .col-sm-
/* 中型設備（筆記型電腦，992px 起） */ Desktop – md ( 992~1200px ) .col-md-
/* 大型設備（大台式電腦，1200px 起） */ Large Desktop - lg ( >= 1200px ) .col-lg-

2. 960 網頁格線排版系統

https://960.gs
PHOTOSHOP
新增【網格】參考線方法 https://tips.zoego.tech/archives/422
ILLUSTRATOR
新增【網格】參考線方法 https://tips.zoego.tech/archives/441

4. Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化

網頁設計的標準（HTML & CSS）是由 W3C 協會所制定的，然而，各大瀏覽器為了展現自身的強大，都自行加入一些有的沒有的設定，造成網頁設計師在排版的時候，就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。
「reset CSS」是世界知名的 CSS 大師「Eric A. Meyer」所整理出來的檔案，該檔案主要是針對各瀏覽器最常發生不一致的樣式進行調整，讓網頁在各瀏覽器的呈現上能有同樣的效果。
下載： http://meyerweb.com/eric/tools/css/reset/reset.css
來源： http://meyerweb.com/eric/tools/css/reset/
只要在寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異了！

↧

[講義] OnePage網頁實作解析(二）

April 18, 2018, 9:03 am

≫ Next: Re: [講義] EDM/Newsletter製作

≪ Previous: [講義] OnePage網頁實作解析(一）

1. 相片分類與燈箱效果

html 

Show All
We Design
Printing
We Development
SEO Optimization

Eligendi optio cumque

webdesign為分類。
col-sm-4為分欄大小，目前為三欄。
準備兩張照片，一為顯示大小550x480，一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片，圖片會隨著螢幕大小縮放。

style.css Ctrl+F 搜尋 Grid 或 workArea    
#workArea ul#Grid li a {  display: block; color: #fff; background: #E67E22; font-weight: 700; text-transform: uppercase;  } #workArea ul#Grid li a:hover img { opacity: 0.2;  }
圖片設定連結後之底色設定：background: #E67E22;
圖片設定連結後，滑鼠移過後所顯示之底色透明度設定： opacity: 0.2;

prettyPhoto-jCarousel和lightbox的混合應用套件

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

jCarousel網站圖片展示
 https://sorgalla.com/jcarousel/ 
https://www.tellustek.com/web-design/163-jquery-slide-jcarousel
lightbox燈箱效果
 http://lokeshdhakar.com/projects/lightbox2/

2. 地圖設定

https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW

html 
  <div style="margin-top:-30px;"> <iframe class="gmap rs-article-iframe-src do-lazy" style="width:100%; height:500px; margin:0px; border:0px;" width="600" height="450" frameborder="0" allowfullscreen data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.367960538061!2d121.05275031483811!3d24.919531849024906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468303d0cc14615%3A0x63a5462452de09bb!2z5Lit5ZyL56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1524065033383" data-srcset=""> </iframe> 地圖區域高度設為500px，寬度100%</div>

↧