2016年10月19日 星期三

span跟section跟div差異

span跟div差異

span=同軸(同行文字用)
div=區塊
也就是說span是用來定義較小範圍,而div則是描述較大的區塊。
兩個span並列會顯示在同行,但兩個div並列則會自動換行
且div可以包含span,但是span不可以包div


section跟div差異

section=並不等於一般容器,section用於具有主題的群組內容,section代表的是章節、它可以代表的是一個欄位中不同的頁籤,或是一系列中帶有數字區分前後的區塊,像首頁被區分為介紹、最新消息聯絡資訊區塊等等。

div=(並不帶有多餘意義的)區塊
如果要用css來定義區塊視覺外觀,以撰寫div為優先(=不要把css寫在section上)

用純css編寫基礎的lightbox效果

晚點再打

2016年10月11日 星期二

圖片縮放與排列

每張圖片分隔成一個一個+

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>
CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

2016年10月10日 星期一

div與nav的差異

在寫自身網頁最上方橫幅產生的疑問,div元素跟nav是否能混用?如果不行的話那差異為?
google後得到答案如下。

解答來源:
http://stackoverflow.com/questions/18628097/whats-the-difference-between-using-nav-and-div-around-bootstrap-3-navbars

Q:In examples for the latest Bootstrap 3 navbars, I found various examples on the web where the outer navbar markup is
<div class="navbar navbar-default navbar-static-top">...</div>
and other examples are using
<nav class="navbar navbar-default" role="navigation">...</nav>
All the examples perform OK, and the documentation calls for NAV. Which leaves me wondering if a lot of examples on the web are version 2 leftovers that were not rewritten for version 3, or it is OK to use either surrounding markup.
A:
<nav> is the semantic HTML5 container element for you main navigation elements.
The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links.
from http://learn.shayhowe.com/html-css/elements-semantics
If you are using HTML5 then you should use nav.
-----------------------------------------------------------------------------------------------

nav是用來描述主要頁面導覽的html5區塊元素,並非所有連結都能放在nav中。
nav能放的

  1. 網頁最主要的頁面連結
  2. 網頁目錄
  3. 導覽路徑標示(Breadcrumbs)

如果在html5環境編寫,則應該使用在上述場合使用nav標籤,而div本身就沒有這些特殊意義,雖然使用div一樣也可以執行類似功能。

導覽路徑標示(Breadcrumbs):

讓訪客清楚自己身在哪一個層級/頁面,以及要如何回到上層/依循原路回訪的標示。
以下是關於Breadcrumbs的訊息

  • 放在網頁頂端

網頁導覽路徑標示放在網頁的頂端齊左,就像書本頁碼,導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移,就有可能和其他的導覽要素混淆。

  • 用>區分層級
經過trial and error顯示,最佳區隔符號是大於符號(>);雖然冒號(:)和斜撇(/)也都有人用,因為>符號本身就有方向在。
Flickr用斜撇(/)來區分層級。字體則是藍字與紅色。

  • 用較小字體


字體稍小,可以明確區分主從。


  • 貼上" You are here"

大部分的使用者都知道導覽路徑標示是什麼,貼上" You are here"更直接。

  • 最後一項字體加粗或變色

最後一項應該是所在網頁的網頁名稱,用粗體字,更明顯。
About.com是用黑體子標示You ar here:,用藍字顯示各層,以紅字標示現在所在。

  • 不要用導覽路徑標示來取代網頁名稱

有些網站會把最後一項字體放大,同時充當網頁名稱。這種設計不見得好用,因為使用者通常會期待網頁名稱直接出現在網頁的中央或齊左。

2016年5月16日 星期一

Word of the Day: 網頁設計的每日一字:Parallax scrolling 視差捲動

Parallax scrolling_視差捲動

定義:
當滾動滑鼠滾輪時,多層背景會以不同速度移動(常見的情況為後層慢前層快),使平面網頁產生空間與層次感的一種手法。

網頁上的視差捲動在2011年左右開始變的盛行,雖然視差滾動可以帶來視覺上的滿足,但並不一定能提高整體的使用者經驗(user experience)。
而這個將背景做分層的技術早在1930年代就開始使用在傳統動畫中。

下為維基百科上關於視差捲動的範例圖。


參考資料:
The Effects Of Parallax Scrolling On User Experience And Preference In Web Design 學術論文

2016年3月17日 星期四

基本中的基本_問答


  • Q1:開啟.js的程式?
A1:.js只是一種程式編碼的類型,基本上由文字構成,所以可以用文字編輯工具來開啟。
像是Adobe dreamweaver, Microsoft visual studio, word pad, 記事本...(文字編輯工具)
  • Q2:想往前端學習,需要學些什麼技能?
A:Javascript, java, html5, css3, jQuery....見下圖顯示


  • 線上課程
https://www.mokoversity.com/course/html5

  • jquery
http://jquery.com/

https://www.youtube.com/watch?v=gqOEoUR5RHg

  • bootstrap
https://kkbruce.tw/bs3/Gettingstarted
  • Android app教學相關網站
http://readandplay.pixnet.net/blog/post/140001110-%E7%AC%AC%E4%B8%80%E6%94%AFandroid-app%E7%A8%8B%E5%BC%8F%E6%95%99%E5%AD%B8

◎基礎設計概念
1.多媒體概論及市場現況介紹
2.網頁色彩學、設計創意思考
◎視覺影像處理與UI設計
1.數位影像處理(Photoshop)
2.Illustrator繪圖與UI 設計
◎動態影音圖像表達
1.靜態資訊圖像表達(Infographic)
2.資訊圖表的故事性
3.動態圖像資訊表達(Motion Graphic)
◎新一代網頁設計標準
.HTML基礎
2.Dreamweaver網頁設計
3.網頁切板網頁技術使用分析
4.CSS基
5.Parallax捲動頁面RWD頁面設計
◎前端網頁動態技術
1.CSS3網頁動態效果
2.Sublime Text 前端程式編輯器
3.JQuery網頁動態效果
4.JavaScript網頁動態效果
◎網站規劃與行銷
1.網站定位分析、網站架構規劃
2.分組討論與規劃
3.網站視覺與UX規劃、與網路行銷
4.網站媒體行銷規劃與宣傳
◎UI/UX實務流程
1.UI/UX流程說明
2.使用者行為、介面行為、系統行為差異
3.用戶體驗地圖(User Experience Map)
4.用戶體驗流程驗證
◎網站建置與後台資料庫
1.PHP網站程式設計
2.資料庫建置
3.Web後端程式及MySQL資料庫設計
4.各類API以及 Ajax
◎專題實務整合
1.網站企劃書及網站簡報檔
2.專題觀摩及發表
3.專題指導

2016年3月16日 星期三

(置底)雜七雜八的資源網址

中文資源
http://www.inside.com.tw/2011/07/31/html5-tutorial-for-beginners

sublime相關
http://blog.miniasp.com/post/2014/01/06/Useful-tool-Sublime-Text-3-Quick-Start.aspx

外文資源
html相關
http://www.html5rocks.com/en/

bootstrap外語教學影片
https://www.youtube.com/watch?v=gqOEoUR5RHg
DM v.s VS
http://www.bitts.co.in/visual-studio-vs-dreamweaver-which-one-to-use-for-your-website/