tag:blogger.com,1999:blog-8696209957267598912011-12-05T20:08:18.646-08:00三木聊網頁前端設計三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.comBlogger151100tag:blogger.com,1999:blog-869620995726759891.post-4951969610385730702011-09-21T21:00:00.000-07:002011-09-21T21:07:32.496-07:00前端工程師(F2E)所需具備的能力 - 職場需求採集資訊：104人力銀行
職位名稱：前端工程師(F2E)
採集時間：2011/09/22
採集樣本：永慶房屋、紅谷資訊、愛比科技、村田三治網路、雄獅科技、春樹科技、龍邦國際
採集原因：希望藉由這篇文章讓其他人能更了解此職位的工作內容與專精的領域。
工作內容
工作內容無須執行設計/美編相關任務。
能和設計部合作將靜態設計內容轉化成動態網頁。
具備跨部門溝通能力，能與美術設計與程式開發人員溝通無礙。
可和各程式語言開發人員討論溝通其程式與排版邏輯，加速辦公合作效率。
了解企劃與美術所要求的web UI設計，並設計出友善的UI動態視覺效果。
基本具備條件
符合W3C網頁標準，並熟悉 HTML、CSS等前端開發技術，了解自己的HTML內容是具有結構和語義性的。例H1為標題屬性 ul li為列表屬性。
網頁佈局可兼容各瀏覽器，並了解各瀏覽器所常見的CSS BUG。
了解Javascript、三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com2tag:blogger.com,1999:blog-869620995726759891.post-51906043866082270602011-08-22T17:37:00.000-07:002011-08-23T02:37:59.941-07:00高雄市家教-網頁設計適合對象
網頁設計或美術設計師
想投入前端設計行業的前端設計師
想當SOHO兼差的上班族或學生
課程大綱
DIV + CSS網頁設計
網頁兼容各瀏覽器的相容性設計
jquery基礎應用與教學
了解程式工程師套程式邏輯
架站與購買虛擬主機、網址流程
使用CSS美化局部元素(表單、按鈕)
無障礙網站建置流程
善用網頁工具軟體，加速網頁排版效率(FireBug、IE Developer Toolbar)
HTML標籤的應用教學
CSS & XHTML 網頁標準化
與各部門的溝通與相處之道
課程簡介與資訊第一堂課免費試聽，之後便以小時計費。
課程可針對您想了解的需求來客制化。
聯絡與家教地點資訊家教地點：高雄市中華路家樂福內的無線上網區，無需自備筆電。家教姓名：三木Mail：gonsakon@gmail.comMsn：sfismy@hotmail.com
三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-13200089615639170042011-01-17T21:22:00.001-08:002011-01-17T21:22:10.033-08:00js與jquery資料懶人包三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-80585282820790956002011-01-17T21:21:00.001-08:002011-01-17T21:21:44.681-08:00CSS工具與技術懶人包三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-27423541126485871002010-07-24T20:34:00.000-07:002010-07-24T20:41:24.835-07:00【CSS HACK】解決各瀏覽器相容的語法。body{
color:blue; /*Firefox文字變藍色*/
color:black \9; /*IE8 文字變藍色*/
*color:green; /*IE7 文字變綠色*/
_color:red; /*IE6 文字變綠色*/
}
我相信這些CSS HACK有些朋友看了已經知道其程式碼的寫法了，這裡我就提供一些個人使用上的心得與經驗。
1、IE8的 \9 其實不是單獨只針對IE8的偵錯，而是全IE。所以如果要只單獨偵錯IE8的話,你除了寫 \9外，同時也必須對IE7以下的瀏覽器也要寫偵錯語法來判斷。譬如這樣↓
.body{
text-align:center \9;
*text-align:right; /*在語法前打”*”字號便是針對IE7以下的語法來偵錯*/
2、瀏覽器的偵錯是有先後順序的，越高級的就必須放到越上面，否則會容易出錯。三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com1tag:blogger.com,1999:blog-869620995726759891.post-39061949176108024682010-07-24T00:02:00.000-07:002010-07-24T00:14:12.918-07:00讓PNG透明能在IE6在運作的方法前言
有的時候排網頁時，會遇到需要背景透明化的圖片以達成設計的要求。這部分其實gif便已經擁有圖片透明的功能，但礙於它支援的色彩過少，導致圖片處理能力不佳，譬如圖片陰影、柔邊、邊緣銳利化等等。最後png-24出來後 才逐漸符合各設計的排版要求。 但偏偏IE6不支援PNG，而原廠也已經停止更新IE6了，無奈之餘只能自力救濟找方法來解決OTZ。以下方法是我研究很久後所找出的解決之道。除了能有效處理png圖片與背景外，同時也是我從各方法中找出最能降低網頁處理速度的辦法。提供各位參考。
iepngfix相信網頁設計師在處理IE6的PNG透明時，也知道有這套程式，但網路上的教學說法眾多紛紜，導致頻頻碰壁而放棄這套程式。這裡就提供我的流程出來,以及我自己使用心得的延伸教學。
一、到IEPNGFIX官網下載程式，位置就在該網頁上的標題為Download內的iepngfix.zip，三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-13853257735691667662010-07-23T07:34:00.000-07:002010-07-25T06:16:19.228-07:00網頁設計師應具備的排版觀念 前言 以前我還是菜鳥的時候，一直被美術設計師嫌棄說她轉交給我的設計稿切出來都亂七八糟。再加上我是數位多媒體科系出身，對於設計美感、網頁調色都是鴨子聽雷，設計一個小小的按鈕都像要我命似的，所以剛入社會那年常常被美工盯得很慘orz 所以這裡分享下一些網頁排版的基礎觀念，而這些觀念都是我這幾年的工作經驗慢慢摸索出來的基本功，就算沒有美術底子出身的也可以輕易理解的東西，希望能帶給大家一些幫助。
一、對齊 如果網頁與圖片內容毫無對齊，便會導致畫面排得亂七八糟。 在網頁排版的時候，最切忌網頁文字與圖片的排列中沒有對齊，這樣會給人感覺不夠專業。整體的觀感也會下降。
二、階層性 當妳的網頁有許多元素要垂直呈現時，必須讓它們擁有階層性，而不是直落落的垂直排下來，會讓人感覺呆板、無變化性。
三、字句和段落的重要性 絕對不要把字弄得過小，且都擠在一起，這樣會讓閱讀者感到吃力傷眼，建議使用Css三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-18259701911220541622010-07-21T02:01:00.000-07:002011-09-20T21:31:31.627-07:00網頁前端設計師的等級表 來看看自己的等級在哪，這裡僅針對HTML、CSS、Javascript的等級區分來撰寫。同時也是自己成長的過程，提供大家參考。有問題可以再留言交流 J
一顆星：
1、網頁佈局為TABLE+CSS，僅以頁面排版順利為考量，沒有考慮程式套版邏輯，且沒有下注解供程式設計師參考。2、CSS都寫在HTML的局部元素裡面。3、過度依賴網頁編輯軟體，導致對於HTML語法一知半解。4、Javascript是什麼？能吃嗎？5、不曉得圖片格式的差異與使用時機(jpg、gif、png)。6、相容瀏覽器僅符合單一瀏覽器。
二顆星
1、網頁佈局為TABLE+CSS，TABLE的數量也變得較少，且有和程式設計師合作經驗。2、CSS寫在HTML裡的head的style標籤裡面。3、對於HTML已有一定的認知，並了解H1、2、3標題、ul li序列等等的實際運用。4、了解Javascript是網頁腳本的一種，三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com10tag:blogger.com,1999:blog-869620995726759891.post-47523118665234196582010-07-17T19:08:00.000-07:002010-07-17T19:08:12.979-07:002010 全國 慈善/科技/人文 網頁設計比賽 活動連結
參加了這個網頁設計比賽，會想參加的動機主要是想把這幾年學到的東西做個整理。
希望能持之以恆努力下去嘍！三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-82526371510440864592010-07-16T01:24:00.000-07:002010-07-16T01:28:36.271-07:00網頁設計師與程式設計師的友善溝通橋樑之道（三） 所謂術業有專攻，當一個人投入該領域有段時日的時候，思考邏輯也會跟著改變。譬如當人看一棵樹的時候，畫家腦裡會想著該如何描繪這棵樹才比較好看，木工師傅則是想著這棵樹的材質是否適合拿來建造房屋。
所以當網頁設計師在切版的時候，最好可以先畫個基本架構的草圖出來，先和程式設計師討論過後再行切版。或許很麻煩，但為了避免你切的版不適合套程式而被程式設計師打槍必須重套的話，建議還沒和程式設計師養成良好默契錢，此舉還是不要省略的好。
這裡就拋磚引玉的舉出一些常見的程式頁供大家參考。
此圖是擷取lativ的消息程式模組，你可以從此圖看到說，該圖片的消息列表是由ul li來產生的。以程式設計師的邏輯來說，他們會先找出該模組區塊中的重複重複迴圈的語法，當找到語法後再下重複迴圈的程式語法就好。
舉例來說，上方圖片是ul li的架構在跑，每個消息都寫在li裡面的話，那程式設計師就可以將li三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com2tag:blogger.com,1999:blog-869620995726759891.post-21806268822380206552010-07-15T00:09:00.000-07:002011-04-18T20:19:07.442-07:00網頁設計師與程式設計師的友善溝通橋樑之道（二）相信很多網頁設計師將切好的板給程式設計師套程式後，問題便跟著接踵而來。
譬如說網頁畫面岔開、破圖、文字顏色跑掉、在其他瀏覽器畫面不一 巴啦巴啦族繁不及備載～
而且套了程式後，程式又分成一個區塊一個區塊的程式檔，不管你是要改css或者是程式檔都會比你未套版前花上更多的時間來修改。所以事前的檢查是一定要的，以避免後續又一直重工在修改同樣的東西。
那麼該如何避免這些突發狀況呢？這裡提供一些撇步給大家參考。
一、務必確認各瀏覽器畫面皆正常。
有的時候或許妳再IE7、8看起來正常，正當你認為一切ok，興高采烈的給工程師套完程式以後才發現火弧的畫面其實慘不忍睹！運氣好一點或許改css就好，但如果沒辦法改過來就必須重構HTML，那程式設計師又必須重新再套一次程式。如此重工下來，耗費的時間與人力成本便很可觀嘍。所以在套程式前，至少在IE6、7、8與火狐和google三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-9736845934851117212010-07-14T00:41:00.000-07:002010-07-15T00:46:42.987-07:00網頁設計師與程式設計師的友善溝通橋樑之道（一）標題好冗長(誤
首先,得先給各位一個認知，人與人之間的合作，是必須不斷的溝通再溝通才有辦法讓效率更加精進。
不管你的網頁排版有多麼整齊，HTML+CSS建構的頁面有多麼精簡，如果沒有經過溝通，讓程式設計師了解你排版的邏輯與建構性的話，那麼程式設計師就必須花更多時間來了解你的切版。
這裡就提供個人與程式設計師合作幾年來的經驗供大家參考。
良好的註解有助於閱讀
不論你切版寫的HTML是用table還是div，或者是兩者混搭使用，都會寫出很多的div和table、tr、td。如果沒有良好的註解來解釋你這個區塊的功用性的話，那程式設計師就得花時間逐步研究你的研究碼。
Html的註解語法如下↓
下列程式碼範例,就是sidebar的div包了選單menu與廣告模組banner的語法，而為了方便工程師套程式，所以特地將廣告模組的前後區塊的語法都註解起來。這樣他們就會曉得該從哪裡開頭與結尾，三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-42339160979528637872010-07-11T23:13:00.000-07:002010-07-21T20:20:46.405-07:00DFP廣告管理系統今天在逛別人網站時，發現別人的code裡面含有這些script。研究一下才發現是google服務裡面得其中一項服務，也就是DFP廣告管理系統
深入了解後發現這廣告系統做得還真不錯，這裡就劃下些重點好了。
省成本，不必支付廣告放送、代管、維護或頻寬的相關費用。
功能多，可省去不少開發時間。含有多元的相關設定（譬：曝光排程與調整、匯出報表、多種廣告定價）
擁有詳細的介紹簡介。
有機會的話希望也可以實際操作一次，感覺還蠻強大的，在此紀錄一下。
延伸閱讀：如何使用Google dfp新增廣告單元？
Google升級廣告服務平台 可望提高出版商獲利
三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-2535031169185201442010-07-08T19:19:00.000-07:002010-07-21T19:11:46.088-07:00如何將js特效套到網頁上有些人到論壇上不免會看到些別人分享出來的特效資源範例檔，但抓下來後要套到自己網頁上時，卻發現功能無法成功的show出來。這裡提供一些該注意的撇步供大家參考。
1.注意內所引用的js、css檔。如果顯示出來的畫面有破圖,那表示images內的圖片沒有放到自己網頁的資料夾內。
2.要留意body內是否還有引入其他的
。3.如果是在國外論壇找到的資源，可以用google瀏覽器來瀏覽，儘管你不懂英文，該瀏覽器跳到國外論壇時也會自動跳出『是否翻譯該網頁』的視窗提供翻譯，非常的簡易方便。
三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0tag:blogger.com,1999:blog-869620995726759891.post-38266716039737760162010-07-06T01:29:00.000-07:002010-07-16T00:11:10.752-07:00回應坊 如果您有任何需要網頁設計的需求，個人有提供下列的洽詢，如有您所要的需求還請再mail連絡。
sfismy@hotmail.com
提供各種div+css，table網頁排版
各瀏覽器畫面符合一致(IE6、7、8、9、goolge、firefox)
與後端程式設計師溝通合作等經驗談
HTML切版顧問
無障礙網站實作經驗
三木http://www.blogger.com/profile/04531561787318465641noreply@blogger.com0