前幾天的分享裡有聊到，前端的工作並不僅僅是切版而已，整個web的呈現部分都可以廣意的算在前端頭上，今天就來縮小範圍拉深主題，聊聊切版需要注意些什麼地方，不過因為我是新手嘛，有可能是錯的，如果發現我觀念有錯什麼的，要早點和我說啊!! 首先，拿到版面後第一個要確認的就是各個區塊的功能，一般拿到的版都是PSD的附上簡報或文件說明內容，開始動工之前有可能可以開個會，在拿到版開始做以前，務必要先把整個版的UI及功能從頭到尾模擬一次，對怎麼做大概有個底，不確定的地方一定要詢問，免得江水一去不復返，時程用光還是要重來的慘劇。
HTML5 其實還是HTML，只是像軟體有更新一樣，HTML也更新到HTML5而且有更多的功能，具體的呈現就是出現許多新的 tag標籤。 HTML5裡主要的更新之一就是用語義化的tag取代不具意義的<div>，另一部分是針對新的裝置，像手機觸控、螢幕滑動控制等tag、增進客戶端及驗證表單、影音、多媒體還有最炫的Canvas繪圖區功能等等。 又因為HTML是一種讓瀏覧器看的語言，在舊版瀏覽器裡HTML5有可能沒有被支援，而有些新的HTML5功能又還在討論中，所以本篇就先來談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。
網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下 前端網頁設計的技巧很雜，不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好，否則等到定稿了再來調整就肯定「痛苦太多收獲太少」不然就是牽一髮動全身叫人不想死也難…. 癈話不多說，直接寫心得： 1. HTML元素都是矩型： 首先建立一個我之前也提過的概念，HTML裡的元素其實不管造型如何，都是「正矩形」，先有盒模型的概念，在設計時就比較不會出現天馬行空的「視覺饗宴」了。 2.網頁是活的： 網頁設計和平面設計最大的差異是「網頁是活的」，和平面不同，平面設計時你的元素是固定的，字型設什麼樣子就是那樣，不會隨著印刷品放置的時間和看的人不同字型忽大忽小，或是圖片有時大有時小。 但是很不幸的，網頁會。
現在的網頁設計比較重視語義化的結構，也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品，如果是「是內容」就使用 html的元素來表示，如果單純只是造型，就使用CSS 的元素背景來呈現。 所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代，雖然有一派是主張連字都不要藏，使用所謂的icon-font或是載入字型來美化，不過在英語系國家這麼做問題不太，一個字型檔不會有多大，中文就… 常用字至少要3000個，所以，實用性不高，我們中文使用者還是乖乖的用文字取代吧…淚目。 使用的方法很簡單，一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單 li 浮動後就能做出水平選單 a 設定 block就能採用寬度，設定背景，最後用 text-indent:-9999px 將文字推出可視區域
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性，可以針對元素的盒模型有不同的設定，display 設定了元素的顯示方式以及和其他元素的互動關係，今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則： 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同，元素由上至下，由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層，然後依元素被設定的float方向延著母元素邊界排列，display:block 的元素會被蓋住，如果左右的浮動元素堆到需要換行時，會依原本DOM 樹裡的順序，如果float:left 的元素寫在比較前面就會有優先權，空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時，table會無視float，從設為tabl置開始，做出類似block的行為。 見下圖：
[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID 上一篇簡介了如何在HTML內使用CSS，簡單來說有3種引入CSS的方法： 一是行內，如： <img src=”” style=”border:1px soild red”> 二是頁面插入式： <sytle> E{font-size:14px; color:red;} </style> 三是鍊入式： <link href=”../css.css” rel=”stylesheet” type=”text/css” /> 然後在css.css的檔案裡寫 E{樣式類別:參數;} E2{border: 1px soild red ; color: red;} 可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡，所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式，表示法就變成 E{類別:參數;} 在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。
[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML，版面來比喻，HTML就是不同的元素，而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章，那麼CSS就是用來指定字型、大小、顏色、排版的樣式，所謂的CSS就是樣式表的意思。 同HTML一樣，CSS也是一種網頁設計師用來和瀏覽器溝通用的語言，瀏覽器永遠都會照你給的指示做出呈現，唯一的問題是設計師必需學會怎麼和他們溝通，所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異，其中尤以 IE的解讀方式和其他瀏覽器相差最多，所以在做樣式設計時，一般是以firefox 或 chrome的呈現結果為主，其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言，首先就來介紹CSS的基本語法。 首先，你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element)，這個E 可以是任何一個HTML裡的 tag (標籤)，再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色： <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式，像 <a href=”” alt=””> </a> 裡面的一樣，只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單，造型類別:參數; 結尾用分號分隔。 如上述的標示方法，就叫做行內 CSS, 顧名思義就是把 style 造型寫在 […]
[新手前端]從平面設計前進 HTML 我最早開始做網頁是高中時期，當初還在播接，各校的BBS都還興盛，入口網站是奇摩、蕃薯藤，最大的網路社團是cityfamily。 巴哈姆特還只是個學生做的BBS站。 當年我學會了用右鍵”檢視原始碼” 開始抄寫我分享插畫創作時需要的 <img src=””> 這是我最早接觸到的HTML。 現在回頭看，HTML其實是一種網頁作者用來和瀏覽器溝通的語言。作者用不同的標籤來告訴瀏覽器這些被輸入的內容應該做什麼樣的呈現。 <!–more–> 比如 <a href=””>連結文字來表示鍊出網址 </a> <img src=”表示圖片”> 也就是網頁上面所有構成的元素都是用不同的 tag (標籤)來標示作用讓瀏覽器知道要怎麼呈現。 換句話說，我們人眼看的網頁是瀏覽器看完HTML之後展示出來的結果。 所以常聽到的 IE、firfox、chrome 呈現不一制的問題就是來自於不同瀏覽器對於HTML的解讀有所不同。 在程式底的學習者來說，HTML的理解是以DOM(文件模型)為概念被理解， DOM 樹其實在網頁設計來說可以簡單的理解為… 就是HTML，因為HTML裡面充滿我們標示過的內容，告訴瀏覽器現在應該有什麼行為，網頁在被讀取時會由最上方第一行開始被讀取、解析，就像一根樹由根往上長開枝散葉一樣。 所謂的 DOM 也就是指網頁由 HTML 組成時整個文件本身元素的分佈及組合，而網頁設計的基本就是在一個文件裡不停的增加內容，然後用hTML及其他方式標示用途後交給瀏覽器解析，最後變成我們看到的網頁。 所以在接觸HTML時不用太擔心，就像學語言一樣，只是要知道用什麼詞來表示可以讓瀏覽器知道你現在希望這個內容被怎麼呈現，如此而已。 在實作上，會用到的HTML也沒有想像中多，一開始需要掌握的只有幾個像 <a> 表示錨點 <img> 表示圖片 <div> 表示群組的容器 <table> 表示表格 除了用 tag 能表示該內容的用途之外，每個tag 裡都還可以增加一些參數式的說明來讓瀏覽器理解並做出更多我們需要的行為，比如： <a href=”” title=”” […]
