2009年10月20日 星期二

多媒體排版製作與數位化設計班

政府補助的電腦課程又來囉!台科大推廣教育部多媒體排版製作與數位化設計班正在招生中,站長擔任的是網頁設計之觀念與應用、Dreamweaver 網頁設計與網站管理這兩門課的講授!

本設計班搭配業界盛行之專業軟體 Photoshop、Illustrator、Word、InDesign、Flash、3ds Max、Dreamweaver,含括四大方向的專業訓練,含括影像處理、排版編輯、動畫設計與網頁設計,皆為資訊數位化傳播領域上之重要課程,以求學員們對於資訊數位化傳播領域,有著通透融合的體悟,並激發學員們能培養學習心、綻露成就感、重拾自信心與實現新專長,隨即能應用於職場之中,進而能符合業界對人才的期望值。


詳細報名資訊請直接到http://cec.ntust.edu.tw/CourseInfo.aspx?id=574


教學內容:

課程名稱

課程大綱

時

電腦軟體之操作實務

Ø 軟體共通的基本操作法、操作軟體的效率觀念、數種多媒體軟體的高效操作法

6

影像處理之觀念與應用

Ø 影像處理導論、小畫家之操作與影像編輯、影像檔的瀏覽、轉檔與壓縮

9

Photoshop 影像處理之基礎與進階

Ø 影像合成之觀念與實務、平面設計之基礎與實務、視覺處理之觀念與實務

45

Illustrator 插畫設計

Ø 點陣圖與向量圖的觀念與運用、影像形狀之路徑與填色的運用、筆畫、筆刷與鋼筆工具的運用

33

排版編輯之觀念與應用

Ø 排版編輯導論、多種排版軟體之認識、Office Word 之排版實作

6

InDesign 排版編輯之基礎與進階

Ø 版面之觀念、配置與管理、版面之出血設定之觀念與實務、版面內之各種物件的樣式與格式

33

多媒體設計之觀念與應用

Ø 多媒體導論、認識各類型之多媒體軟體、操作多種多媒體編輯處理的自由軟體

9

Flash 多媒體動畫設計

Ø 動畫內各種元件與物件之觀念與實務、補間動畫與形狀動畫之觀念與實務

33

3ds Max 動畫設計

Ø 立體動畫製作之原理與應用、人物表情製作之原理與實作、場景空間、質感、氣氛與特效之觀念與實作

99

網頁設計之觀念與應用

Ø 認識網頁實現網站之基本架構與技術、瀏覽與了解網頁內各種多媒體物件

6

Dreamweaver 網頁設計與網站管理

Ø 軟體環境之介紹與選單操作、網頁版型之觀念與實務、網頁資訊架構之4規劃之實作

60

專題製作

Ø 本課程設計之用意在透過團隊合作的方式,整會各科學習成果,同時累積系統開發經驗與程式設計能力。

48

業界見習

Ø 到資訊業界參訪,瞭解實務上的應用

6

專題演講

Ø 邀請業界人士分享職場上的需求與趨勢。

15


師資說明:

師資姓名

學歷

學(經)歷

授課科目

課目

時數

柯盈宏

碩士

中山大學資訊工程研究所

文魁資訊股份有限公司產品經理

電腦軟體之操作實務

6

多媒體設計之觀念與應用

9

Flash多媒體動畫設計

33

蔡行健

碩士

世新大學

圖文傳播暨數位出版系

2009嘉義縣觀光旅遊局 發現嘉義導覽書(中、英、日)美術設計

2008總統府前國慶遊行 台北縣政府花車視覺設計

2006 TIVAC台北國際視覺藝術中心「情感‧信仰‧烏托邦」攝影個展

2005台南縣虎頭埤水與綠嘉年華 藝術總監

2004彰化花卉博覽會 平面設計暨會場指示標誌規劃設計

2004行政院勞委會 友善女性企業獎座設計

2003國安會 VIS視覺系統規劃設計

2000台中縣交通旅遊局 VIS視覺系統規劃設計

1999台北市燈節 總統府前四大主燈規劃設計

影像處理之觀念與應用

9

Photoshop 影像處理之基礎與進階

45

甘貴新

光武工專電子工程科

台灣微軟技術支援處 / 工程師及顧問講師

中國文化大學推廣教育部 / 電腦講師

Illustrator插畫設計

33

排版編輯之觀念與應用

6

InDesign排版編輯之基礎與進階

33

蘇東偉

大華工商專科學校

資策會資訊科學展示中心上班族電腦班特約講師

菱通科技電腦訓練中心一般課程與企業包班特約講師

網頁設計之觀念與應用

6

Dreamweaver網頁設計與網站管理

60

邱國祿

加拿大Infocast Institute of Digital Arts數位多媒體所

3D動畫設計:3ds max, maya, softimage3D, Bryce,Poser

2D美術設計:PhotoShop, Illustrator, Deeppaint 3d特效美術 Illusion

後製剪接:After Effects, Premiere, ombustion2, 3D遊戲,動畫製作

Discreet Autodesk 3ds max 種子教師研習營講師

Discreet Autodesk 3ds max 認證考試命題講師

行政院勞委會職訓局多媒體講師

宇峻科技遊戲美術設計師

中華網龍遊戲美術設計師

3ds Max動畫設計

99

蔡承恩

真理大學

台灣文學系

文魁資訊股份有限公司 產品經理

城邦出版集團 DIGIPHOTO雜誌社 攝影叢書編輯

時兆出版社 時兆月刊 特約編採記者

永和社區大學 地方文史社 顧問講師

臺北縣政府 台北縣民俗及有關文物普查計畫 專案攝影

臺北縣社區營造成果專輯出版計畫 專案執行

專題製作

18

梅光宇

碩士

中正大學

中文所

文學創作、翻譯、遊戲企劃等

專題製作

18

陳尚彥

碩士

北台灣科學技術學院

機電整合研究所

北台科技有限公司互動式教學白板研發部專案經理

元平行實業有限公司ERP顧問

專題製作

18

劉念雲

臺灣大學社會學系

工作傷害受害人協會

職場安全與職災權益面面觀

3

黃敏裕

碩士

台北大學企業管理系

國立中興大學企研所管理顧問師認證培訓班結業

提升職能英文─電腦科技人接軌國際的必備利器

3

陳美雪

碩士

銘傳大學國際企業學系

新世紀形象管理學院專業講師

求職就業衝衝衝

3

袁凡芸

Mercer University

Service Management

寬宇科技有限公司人力資源經理

建立優越的職場人際關係

3

駱思安

碩士

中國文化大學資訊管理所

知諸網科技股份有限公司 董事長兼執行長 (2008/07 ~ NOW )

 富格國際股份有限公司 執行顧問 (2009/01 ~ NOW ) 

98年中華軟協合格之中小企業 網路行銷顧問 (2009/05 ~ NOW ) 

98年政府機關網站健檢計畫 計畫主持人(2009/01 ~ 2009/05 )

 研華科技股份有限公司產學合作案 專案負責人 (搜尋引擎優化、產學媒合平台) (2008/04 ~ 2009/05)

 中華民國資訊軟體協會 資安顧問 (2007/05 ~ 2009/05)

 瑞百通股份有限公司 資安顧問 ( 2007/05 ~ 2009/05 )

 國立台北商業技術學院資訊管理系 兼任講師 ( 2008/07 ~ NOW )

 中國文化大學資訊管理系 兼任講師 ( 2007/02 ~ NOW )

 華夏技術學院電子工程系 兼任講師 ( 2007/02 ~ 2008/08 )

 景文科技大學資訊管理系 兼任講師 ( 2007/07 ~ 2008/06 )

 教育部北區英語教學中心 程式設計師 ( 2006 ~ 2008/06 )

 國立台灣科技大學資訊管理系學分班 資料探勘與知識開發教學助理 ( 2005、2007 )

 陽明山通運公司 電腦顧問 (開發公司前端和後端資訊系統) ( 2003 ~ 2005 )

 國科會中科院計畫 兼任助理 (計畫名稱:互動式規則分析引擎之研究) ( 2004 ~ 2005 )

網路創業停看聽

3


適合對象:

1、一般國民(年滿15歲至65歲)有就業意願之失業者。
2、就業保險被保險人之失業者或特定對象之失業者。
3、經政府核准立案之國內外公私立大專校院暨專科以上學歷畢業,且具失業身分者優先。
4、性別:不限
5、依法服畢兵役、免服兵役者或由服役機關提出相關證明可參與受訓者。
6、學員參訓須以結訓後直接就業為目標,無就業意願或有升學計畫者不予錄訓。


 


報名資訊:

簡章下載 

 


一、學員一律上網下載簡章並填寫報名表。
http://cec.ntust.edu.tw/UploadFiles/FormDownload/091105.pdf


二、寄送報名審查表件時請將下列資料依編號順序,由上而下整理齊全,用迴紋針夾在左上角,平放裝入信封袋內,於報名截止日前掛號寄至「國立臺灣科技大學-推廣教育中心10607台北市基隆路四段43號 國際大樓2樓205-1室」,請註明【報名多媒體排版製作與數位化設計班】,報名繳交之影本證件一概不予退還。

 
(一)學員報名表:填寫「國立臺灣科技大學多媒體排版製作與數位化設計班報名表」;貼1吋相片一張,另一張以迴紋針別在右上角。(附表一)

(二)身份證正反面影本

(三)學歷證件影本

(四)申請日期為98/10/5以後的「勞保資料明細表」,以下兩種格式擇一檢附。
(1)「勞工保險被保險人投保資料表」及「勞工保險被保險人投保資料表(明細表)」(簡稱『勞保明細表』)需攜帶身分證親至勞保局各地辦事處辦理(http://www.bli.gov.tw/)。
(2) 以「自然人憑證」登入勞保局網頁-「網路申辦」列印「勞工保險異動」。
【註:若經錄訓於開課後一周內需再檢附申請日期為開訓後日期的勞保明細表,以證明在訓期間為失業無勞保加保狀態。】

(五)非自願性失業者持公立就業服務中心開立之推介單影本(以及生活津貼給付收據影本,若符合資格)

(六)特定對象失業者請附相關證明文件 (請見附錄1)

(1)獨立負擔家計者

(2)中高齡失業者

(3)身心障礙失業者

(4)原住民失業者

(5)生活扶助戶中有工作能力之失業者

(6)長期失業者

(7)其他經中央主管機關認定者

三、本中心將於收到審查資料後,於一週內通知報名學員,再請學員於於職訓e網(http://www.etraining.gov.tw)登錄線上報名資料。

四、報名學員所填寫及檢附之各項報名資料如經查有虛偽不實情形者,取消報名資格。

五、本中心保有開班與否及異動師資與課程內容之權利。



上課資訊:

起迄時間:2009/11/10-2010/02/05
上課時數:408


學雜費:NT$0


上課時段:周一至周五 早上09:00~12:00 下午13:00~17:00
報名費:NT$0

備註:

時程注意事項:

一律採通訊報名

11/02 截止收件

11/05 甄試

11/07 放榜公佈於推廣中心網頁,並以e-mail方式通知錄取學員,未錄取者不另通知。

甄選錄訓方式:

1、考試科目:
筆試(60%):電腦概論
基本資料審查(22%):參訓歷史、參訓身份、最近一次失業期間
口試(18%):工作經驗、學習目標、就業意願…
2、總成績70分以上為合格,再依下列身份別依序錄訓。
第一錄訓順位:持有推介單的就業保險被保險人之失業者
第二錄訓順位:特定對象之失業者
第三錄訓順位:其他一般身份依成績高低依序錄取
3、正取40名,另備取10名。

諮詢專線:

02-2730-3663 莊先生



2009年10月18日 星期日

微軟網路行銷暨最佳工具-Expression上手篇免費研討會

這是10月28日(星期三)在台北市松仁路7號7樓的台灣微軟7B會議室,一共是4個小時的免費研討會,站長負責上午2個小時的課程解說,有興趣的朋友歡迎前往線上報名參加!

http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032426893&culture=zh-TW

11月5號還有另外一場免費研討會,您若有興趣也可以先前往報名!


2009年9月29日 星期二

網頁程式設計入門學士學分班課程照片花絮

喝!最近剛好一些班級的課程陸續結訓,所以照例又要來個結訓後花絮記錄!這次是每個星期六上午與下午的網頁程式設計入門學士學分班課程照片花絮,請聽我娓娓道來.....

由於這次大家想再中秋節前結訓(因為中秋節是星期六,而再下個星期六又是雙十國慶日),學員們怕後面隔兩週再考試會忘記,經全班表決通過後面開始每次上8個小時(上午3小時下午5小時),所以這一次課程後面幾週都是每週六史無前例的每次8個小時慘烈抗戰,教到我快痛哭流淚,ㄚ不是感動,而是已經很久沒有一天內教8個小時的課程了(以前一天最多教6小時),講到我快「燒聲」的咧!真的是從天亮上到天黑上,不過大部分同學們都還蠻有毅力參與完啦,下圖是我在跟學員討論指導時,被助教拍到的畫面!
討論指導

下圖則是學員們再最後一堂課時做測驗專注的神情(我只能在後面傻笑等待囉)!這一班算是比較小班制,畢竟週六假期願意來學程式設計這種比較枯燥的課程的人較少(雖然我是盡量講簡單有趣一些,以免讓大家睡著),再此先給他們拍拍手鼓勵一下!
學員們正在專心做作業

測驗實作時大家的表情都變得比較專注認真呦!其實測驗的項目都是我們之前上課有教到的,只是要做整合起來時,學員們才有發現好像不是如想像的那般容易,會覺得時間怎麼過得那麼快,導致測驗時間我有多給延後一些!之後有留一點時間做解答說明以及提供範例下載!
因為這是最後一天的結訓考試,所以大家有點小緊張!

最後每次不能免俗的還是來個結訓大合照!
結訓大合照1

希望來參與本班的學員,能夠了解程式設計並非是短時間內一蹴可及的,畢竟這只是個基礎入門班,未來若有機會走向程式設計這條路還有很長的學習充實才行!也希望來參與本班的學員們本次所學真能對你們工作上有所幫助,並祝他們職場工作上一切順利囉!
結訓大合照2


2009年9月28日 星期一

網際網路資料庫設計班課程照片花絮

站長有參與職訓局委託臺科大推廣教育中心「網際網路資料庫設計班」的課程教學,這是一班總時數為600小時的超長班(約4.5個月才上完),我負責的是「網際網路原理與應用」、「Dreamweaver網頁設計」、「專題製作」等單元科目,上週終於整個上完結束了,照例來個課程花絮與照片分享囉!

這班的上課科目如下圖,一個課程有兩種時數是表示上課(學科)與實作(術科)的分配狀況。比較有趣的是,我應該算是本班正式課程的第一堂講師,而最後一堂課專題製作恰巧也是我教的,我應該算是另類的「有始有終」參與啦,笑~! p

說實在的來學習這種長時間的課,是要蠻有毅力的,下圖是學員認真上課的狀況,在此也恭喜絕大多數學員都有順利完成全部課程的學習直到最後,畢竟4個多月要學習這樣多的課程科目,也是需要花費很大心力的,尤其這班的學員原本已經有在社會上有工作經驗,不同背景的一群人能夠回到校園變成進行專職學習真的是一件不容易的事情。
認真上課


下圖是我第一組專題指導的「幫幫忙社區互助服務網」的網站製作小組成員。

幫幫忙社區互助服務網小組成員


下圖是我第二組專題指導的「
Puppy Dorm 寵物民宿
」的網站製作小組成員。
Puppy Dorm 寵物民宿小組成員


下圖是拍照時我想說比個OK手勢之外閉個單眼裝一下可愛,雖然這把年紀裝可愛是有點噁啦(羞)!
Puppy Dorm 寵物民宿小組成員

好啦言歸正傳!下兩張圖是最後一天上課時集合有到的學員拍的群照!稍有美中不足的是有些學員因為已經開始上班沒來得及拍結束照!有些學員很努力有跟我提及之後想要創業並且繼續參加專題比賽,有些學員是要近期接著去任職上班,有些則是要繼續學習其他班級課程或考證照,也有些學員表示雖然學了這一班但還是會回到原本老本行(不過多了些專長技能應也是有加分的)。
全班合影
全班合影

參與這一班的教學工作,對我來說也是一項新的體驗,因為我很少教像這樣同一班長期的課程(而且還前後算有參與到),我自己在準備授課科目時與學員的互動,也算是教學相長,自己也學習成長了不少。雖然整個課程編排順序等仍有些瑕疵,也比較抱歉內疚的是,對於我帶領的兩組專題組員沒能幫到他們太多,這些都是未來若我有機會再教到類似班級時可以再改進之處。

這班的課因為實在蠻久且我有參與的課程實數還蠻多的,其實學員們大都還蠻有人情味,有些私下也有都會跟我聊聊,不過學習往往真的是「學然後知不足」,雖然或許感覺學了不少科目,但在這短期間內要能夠把所學吸收並融合貫通也不是太容易,且每個科目往下專研都是有更深的內容,上課只是帶領學員跨過入門門檻,並有個循序漸進的教材整理與學習的氣氛,真的要學得好與深仍是要靠學員後續自己努力用心才行。

資訊相關行業大多更新是很快速且競爭的,需要保持自己有個持續學習上進的心才能長期站得穩站得好,其他行業e化程度也是逐漸提昇,電腦相關技能也是很重要,在此也祝福此班的學員,未來尋找新的工作或有其他學習發展方向時,都能一切順利,開拓出屬於自己的一片新領域。而在這幾個月相處建立的友誼與人脈,未來也可以再持續聯繫,也許彼此就是可以幫對方提攜一把的貴人!


2009年9月11日 星期五

修圖合成精修學士學分班

沒有拍攝觀念?太深奧的軟體操作或理論課程聽不懂?總弄不好漂亮的圖?本課程講師以多年教學經驗,帶領學員輕鬆學習但能深入精進細節的操作技巧,實際拍攝小商品後進行修飾合成處理,讓編輯出來圖檔也能達到商業網站瀏覽的水準。

本課程台科大介紹網址:http://cec.ntust.edu.tw/CourseInfo.aspx?id=489

預計課程單元名稱時數
簡易色彩美學與圖檔格式介紹3
圖層與PhotoImpact各類物件屬性觀念3
初階數位暗房~影像修片技巧3
室內外拍攝技巧與構圖實務3
進階數位暗房~影像合成處理9
立體造型繪製~路徑繪圖製作6
文字特效處理3
實做與成果驗收6


地點:台灣科技大學推廣教育中心國際大樓11樓電腦教室
每周四18:00-21:00,共36小時

2009年10月22日開始~2010年1月14日結束(2009年11月12日星期四國父誕辰紀念日休假順延一週)

適合參加族群:想學習影像合成設計者、創業SOHO族、中小企業人員、網拍業
參加學員需具備的基礎能力:會上網、會使用Winoows與Word等電腦基本操作能力者皆可報名,無設計經驗者可參加。


2009年9月7日 星期一

評估關鍵字熱門程度


介紹幾個選擇關鍵字的方法...

一、使用Yahoo!奇摩關鍵字建議工具
http://tw.emarketing.yahoo.com/ysm/guide/index101.html 、 http://tw.emarketing.yahoo.com/ysm/30_hotkey_search_form.php 查詢你想要的關鍵字在台灣Yahoo奇摩內被搜尋的熱門程度,以利你做關鍵字行銷評估的參考依據。

二、使用Google關鍵字工具
https://adwords.google.com/select/KeywordToolExternal?defaultView=2 ,即能查詢多個關鍵字與同義字在Google被搜尋的熱門程度,也能加入排外的字詞,並起可以選擇語系與國家地區等選項,也可以將結果匯出關鍵字清單檔案供進一步使用,功能上算是蠻完整的。
https://adwords.google.com/o/Targeting/Explorer?__u=1000000000&__c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none

三、全球商機搜尋器
http://translate.google.com/globalmarketfinder/index.html?locale=zh_TW

四、使用Google趨勢
利用Google趨勢 http://www.google.com.tw/trends ,可以查詢到指定關鍵字搜量的變化情況(但有些搜尋量較低或未被Google列入到資料庫中的字詞則無資料),也可以檢視這個關鍵字在不同國家(地區)裡的搜尋量變化,如果需要同時有多個關鍵字查詢,則在每個關鍵字中專以半型逗號做區隔 ,一樣也可以將結果匯出成清單檔案供進一步使用。

五、觀看相近且排名較佳的同業網站下關鍵字
您也可以到比較知名或排名比較前面的競爭同業的網站觀看,看對方標題、 meta、網站結構、內容等是有注重在哪些關鍵字上,以利參考評估。以IE瀏覽器為例,您可以連到參考網站後,在瀏覽器工具列上,選擇檢視/原始檔,觀看對方網頁內的title、keywords、description等標籤內的寫法做為參考。

六、關鍵字排名查詢工具
http://dir.twseo.org/keywordrank.php



Enhanced by Zemanta


2009年8月29日 星期六

透過IE8瀏覽器做本機端檔案上傳時會產生錯誤的調整方式

最近開始可能有些人會發現,到很多網站的前後台使用檔案上傳時,或者是到自家原有的網站系統做檔案上傳的功能,都會出現錯誤變成無法使用,如果您有出現這樣的問題,請先確認一下是否瀏覽器有使用或升級到Internet Explorer8,如果是使用IE8,則很有可能是因為IE8考量安全性之類的問題,而將使用瀏覽器把本機端檔案上傳到網站的功能預設成關閉,所以造成的狀況,如何解決請參考下列步驟。

1

開啟IE8瀏覽器,在功能表列上選擇「工具」/「網際網路選項」
2

在「安全性」的頁面標籤裡,選擇「網際網路」,按下「自定等級」按鈕。
3

在「雜項」裡,把「將檔案上載到伺服器時包含本機目錄路徑」由原本的停用狀態改選擇成「啟用」,並按下「確定」鈕。
4

上述設定完成後,記得要將IE8瀏覽器關閉後再重新開啟原本系統的檔案上傳功能做測試,應該上傳功能就可以順利使用了。

補充說明,最近發現好像作業系統有做更新修補後,連IE7都會發生檔案上傳的問題,修正方式跟上面的IE8修正步驟一樣,都是把「將檔案上載到伺服器時包含本機目錄路徑」由停用狀態改選擇成「啟用」即可解決!


2009年8月28日 星期五

如何使用SuperPreview功能做網頁視覺診斷

這是一篇站長幫台灣微軟官方撰寫的Expression Web 3 新功能系列文章之一,主要是講述Expression Web 3 裡面新增加的一個新成員:SuperPreview,除了有刊載在Microsoft Expression官網之外,也同步放在此部落格上供您瀏覽參考!

Expression Web 3 SuperPreview是Microsoft新推出的網頁視覺診斷軟體,可在一台電腦上同時觀看多個不同瀏覽器下的呈現狀態,裡面的快照預覽(Snapshot Preview)則提供高逼真度的瀏覽器預覽功能。但安裝前請記得先確認您的電腦已經有安裝Internet Explorer8.0以及Mozilla Firefox瀏覽器(建議為3.0以上版本),屆時SuperPreview安裝時才會偵測到,之後執行SuperPreview裡面才會顯示出「IE6」、「IE8降級為IE7相容性檢視模式」、「IE8」、「Firefox」這四種瀏覽器模式,後續也才能夠有選項可以做挑選比對(否則若您電腦沒有安裝瀏覽器,裝完SuperPreview裡面預設瀏覽器則只會有IE6可供使用)。
以下筆者將SuperPreview的介面操作、特點優勢與相關資料條列出來供您參考:
  1. SuperPreview可當做一個獨立軟體操作,亦可結合Expression Web 3做運用:
    例如您可以開啟SuperPreview,在「位置」裡直接輸入網址,輸入完直接按下鍵盤上的Enter鍵(或按下介面上的「重新整理」鈕),即可讀取 http:// 或 https:// 這樣的遠端的網頁內容,也可以按下「瀏覽檔案」鈕,直接開啟您電腦本機端裡的網頁內容。
    1

    當然您也可以從Expression Web使用SuperPreview,將在Expression Web「資料夾清單」介面裡的網頁點選後(或開啟目前編輯的網頁),在選單列上選擇「檔案」/「顯示在SuperPreview中」(或直接按下鍵盤上的Shift與F12鈕),即可將被選擇到的網頁傳送到SuperPreview進行查測與比較。
    2
  2. SuperPreview的基本操作:
    一開始進入SuperPreview後,預設值應該是會呈現左右分割視窗的比對畫面如下圖所示,您可以在左邊視窗各瀏覽器圖示中選擇新增一款瀏覽器,例如選擇為IE8,接著請再選擇右方視窗另一款瀏覽器圖示,例如選擇IE6。
    3 
    如果您想要選擇好幾款瀏覽器觀看狀況,可以按下「新增」鈕,逐步將其它款瀏覽器也加入到瀏覽清單中,預設值左邊是顯示設定的「基準線」瀏覽器(只能選擇一個),右邊則是顯示「比較」為要對照比對的瀏覽器(可以加入多個)。
    4 
    例如下圖的畫面,左邊是顯示IE8,右邊清單中加入了三款瀏覽器,目前是顯示在Firefox呈現的狀態,這樣呈現的方式稱之為快照預覽(Snapshot Preview) ,提供接近真實狀況的瀏覽器預覽,可以模擬不同瀏覽器在不同解析度下的狀況,能協助當有變更程式碼時在不同瀏覽器間的模擬,以節省您測試調整的工作時間。
    5 
    若選擇「選取模式」與「方塊醒目提示模式」,點選網頁上的物件區域時,會顯示出該物件相關設定數值。例如下圖點選產品資訊這個區域,就可以看得出此區域在IE8與Firefox裡的Left數值解析起來有差異。
    6 
    若選擇「選取模式」與「局部醒目提示模式」,點選網頁上的物件區域時,除點選的物件區域之外,其他的區域畫面會變暗,以突顯觀看效果,一樣也會顯示出該物件相關的設定數值。
    7 
    選擇「取景模式」則會滑鼠游標會變成手掌的圖示,您可以在網頁畫面上按著滑鼠左鍵不放,拖曳畫面調整到想要的位置。
    8 
    選擇「水平分割版面配置」,則可以讓分割畫面變成上下垂直排列的狀態。例如下圖就是上面視窗為「基準線」的IE8瀏覽器比對下方的「比較(1)」IE6瀏覽器。
    9 
    選擇「單一版面配置」,則可以變成單畫面呈現。例如下圖就是IE8降級為IE7的相容性檢視模式時,使用單個畫面的呈現狀態。
    10 
    選擇「切換縮圖可見性」,則右下角會出現一個整個畫面的縮圖,如此您就可以很清楚知道目前瀏覽的區域是屬於在這個網頁的哪個部分,也可以使用滑鼠左鍵在右下角縮圖進行快速移動,這些功能在瀏覽的網頁範圍很大時,就會顯得很好用。
    11 
  3. SuperPreview的特殊功能:
    選擇「重疊版面配置」,這是個非常特別的功能,能夠將兩個不同版本瀏覽器上顯示的網頁疊在一起做整個畫面的差異比對(可以想像成把一張圖變成半透明疊在另外一張圖上面)。例如下圖模糊的狀態不是畫面壞掉有問題,而是將「基準線」模式的IE8瀏覽器跟「比較(3)」模式的Firefox瀏覽器使用重疊版面配置功能進行差異比對所產生的畫面,可以看到這兩個瀏覽器呈現出來的畫面裡各個物件的落差。
    12 
    另外還有另一種方式,可以做兩個畫面之間的比較方式,就是採用「切換尺規可見性」與「切換輔助線可見性」,SuperPreview會開啟尺規的介面與格線的功能,這有點類似像一些影像處理或繪圖軟體裡會有的操作介面,可以在尺規上面按著滑鼠左鍵拖曳出參考線。
    13 
    您可以拖曳出多條參考線,如此就比較容易進行兩個畫面的各區域物件位置判別比較,也可以再次按下「切換輔助線可見性」,就可將參考線暫時隱藏。
    14

    筆者覺得Overlay Layout以及Toggle Ruler  Visibility、Toggle Guide Visibility的設計思維,真的是一項很棒的功能,在以前沒有使用SuperPreview這套軟體時,設計師就算想辦法安裝不同的瀏覽器做測試(可能還要分不同台電腦),也還是一件相當麻煩的事情,即使有其他第三方廠商推出的軟體能做數個瀏覽器整合,多半也僅能純做開啟瀏覽器觀看測試,若是需要做畫面誤差比對,往往也還是必須擷取抓圖後貼到其他軟體去拉輔助線做比對,一旦網頁有做調整變動畫面就得重抓,實在是一件很浪費人力時間的苦差事,現在善用SuperPreview就可以輕鬆解決這些麻煩事了。

    經過了上述的操作教學,現在您應該可以使用SuperPreview的各種工具進行不同瀏覽器間的差異比對,但建議您還可以開啟SuperPreview右下角的「DOM」功能,檔案物件模型(Document Object Model,簡稱DOM),是W3C組織推薦用來處理可擴展置標語言的標準編程介面,在SuperPreview的DOM裡面所顯示HTML等相關網頁碼,可以讓您更了解在不同瀏覽器解析處理的情形,能夠成為網頁修正的輔助判斷利器。
    15 
    SuperPreview右下角還有一個「瀏覽器大小」的下拉式選單功能,可以讓您在此挑選呈現畫面的解析度,或者選擇「自定大小」可讓您自行設定畫面寬與高的尺寸像素數值。
     16 17
  4. 搭配使用IE8的開發者工具: 若您電腦上有安裝Internet Explorer8瀏覽器,其實IE8裡面有內建一個好用的開發者工具,您可以在IE8的功能表列上選擇「工具」/「開發者工具」,裡面有相當豐富的各類分析功能,也可以挑選以IE7或IE8等模式作為測試標準,您可以用此工具搭配SuperPreview,相信可以解決或偵錯修正您許多網頁設計上的問題。
    a
  5. 關於IE7與IE8網頁相容的小技巧: 文章最後在此提供一個HTML語法小技巧,若您有以前設計的舊網頁在IE8顯示上有不正常的情況時,或者是為了考慮各瀏覽器相容性問題時,其實您可以使用Expression Web開啟網頁,切換到網頁的<head>與<head>之間,輸入下述meta標籤語法,即可讓使用IE8瀏覽器瀏覽網頁時,自動預設以IE7解析模式運行,語法為:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    b

    如果您網頁上有使用此語法,原本在IE8瀏覽器上會有的「相容性檢視」按鈕會隱藏起來,而只以IE7解析模式觀看此網頁。不過筆者還是要建議您,若是開發全新網站的網頁時,盡量還是以IE8為主要瀏覽測試環境,畢竟這還是未來的趨勢主流。
    c
作者:創意眼資訊 蘇東偉,任職於網頁設計公司,並兼職為教育中心講師與圖書作者
Web:http://www.eyeshop.com.tw/、http://www.webspace.com.tw/
Blog:http://webok.tw/
Mail:eyeshop@url.com.tw


Related Posts Plugin for WordPress, Blogger...

訂閱RSS