Change History
Message: [作業00] 網頁設計課前準備與基本認識
Changed By: JinJin
Change Date: September 16, 2014 08:51PM
[作業00] 網頁設計課前準備與基本認識
第一週須完成的任務:
<h2>安裝軟體</h2>
安裝必備軟體
[hr]
<h4>FileZilla</h4>免費好用的FTP軟體
https://filezilla-project.org/
FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體,內建44種語言的多國語系介面,且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外,還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式,是個相當穩定而好用的免費軟體。
安裝說明:http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D
[hr]
<h4>Notepad++</h4>http://notepad-plus-plus.org/
實用的免費文字編輯軟體 - Notepad++,是旅法台灣人作品,體積輕巧不佔系統記憶體,支援多分頁功能,是一套用來取代Windows記事本的工具,他的操作方式與記事本完全相同。
具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能,支援ANSI、UTF-8(支援檔首無BOM)、UCS-2...等格式的編譯及轉換,是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色,而且還有半透明視窗的效果,是撰寫程式的好幫手。
[hr]
<h4>Dreamweaver</h4>
視覺設計師常用的網頁設計軟體,不過不宜太依賴內建的功能,先了解網頁背後的結構與語法才是王道。
[hr]
<h2>閱讀關於html、css相關書籍,建立網頁設計基本概念</h2>
請多多利用圖書館或網路資源
[hr]
<h2>教學網站註冊</h2>
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』至少填寫學號
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
<h2>認識瀏覽器</h2>
安裝目前主流的三個瀏覽器:IE、Google Chrome、FireFox至少三種瀏覽器。
http://gs.statcounter.com/
<h4>Internet Explorer (IE)</h4>
特色:是目前全球使用人口最多的瀏覽器,因為是Microsoft開發的軟體,因為有許多先天的優勢,也因為最多人使用,所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候,有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言,聰明的網頁編輯人員都會在製作網站的時候,根據這三種瀏覽器作為測試的平台,基本上以符合三種瀏覽器使用為原則。 。
缺點:速度慢、網頁編碼方式不符合html發佈的官方寫法,因此較容易出現網頁顯示異常。
<b>下載 Internet Explorer</b>
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
[hr]
<h4>Google Chrome</h4>
快速啟動Google Chrome 瞬間即可啟動。
迅速載入Google Chrome 的網頁載入速度飛快。
高速搜尋直接從網址列搜尋網頁。
<b>下載Google Chrome</b>
http://www.google.com/chrome?hl=zh-TW
[hr]
<h4>Firefox</h4>
Mozilla Firefox是目前市占率第三名的瀏覽器,它有著豐富的擴充套件,可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版,最大的特色在於新設計的界面以及方便的網路同步功能,能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中,比前一版(28.0)更加美觀、直覺、好用
<b>下載FireFox</b>
http://moztw.org/
[hr]
<h2>多觀摩與紀錄優良網站</h2>
1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
3.<b>請將瀏覽過不錯及值得推薦的網站,網站名稱及網址列出,並試著說明及分析。</b>
回覆完畢請註明學號。
範例:
[hr]
<b>網站名稱:Foodsense食品感官
網址:http://foodsense.is/</b>
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/
Changed By: JinJin
Change Date: September 16, 2014 08:50PM
[作業00] 網頁設計課前準備與基本認識
第一週須完成的任務:
<h2>安裝軟體</h2>
安裝必備軟體
[hr]
<h4>FileZilla</h4>免費好用的FTP軟體
https://filezilla-project.org/
FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體,內建44種語言的多國語系介面,且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外,還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式,是個相當穩定而好用的免費軟體。
安裝說明:http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D
[hr]
<h4>Notepad++</h4>http://notepad-plus-plus.org/
實用的免費文字編輯軟體 - Notepad++,是旅法台灣人作品,體積輕巧不佔系統記憶體,支援多分頁功能,是一套用來取代Windows記事本的工具,他的操作方式與記事本完全相同。
具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能,支援ANSI、UTF-8(支援檔首無BOM)、UCS-2...等格式的編譯及轉換,是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色,而且還有半透明視窗的效果,是撰寫程式的好幫手。
[hr]
<h4>Dreamweaver</h4>
視覺設計師常用的網頁設計軟體,不過不宜太依賴內建的功能,先了解網頁背後的結構與語法才是王道。
[hr]
<h2>閱讀關於html、css相關書籍,建立網頁設計基本概念</h2>
請多多利用圖書館或網路資源
[hr]
<h2>教學網站註冊</h2>
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』至少填寫學號
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
<h2>認識瀏覽器</h2>
安裝目前主流的三個瀏覽器:IE、Google Chrome、FireFox至少三種瀏覽器。
http://gs.statcounter.com/
<h4>Internet Explorer (IE)</h4>
特色:是目前全球使用人口最多的瀏覽器,因為是Microsoft開發的軟體,因為有許多先天的優勢,也因為最多人使用,所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候,有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言,聰明的網頁編輯人員都會在製作網站的時候,根據這三種瀏覽器作為測試的平台,基本上以符合三種瀏覽器使用為原則。 。
缺點:速度慢、網頁編碼方式不符合html發佈的官方寫法,因此較容易出現網頁顯示異常。
<b>下載 Internet Explorer</b>
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
[hr]
<h4>Google Chrome</h4>
快速啟動Google Chrome 瞬間即可啟動。
迅速載入Google Chrome 的網頁載入速度飛快。
高速搜尋直接從網址列搜尋網頁。
<b>下載Google Chrome</b>
http://www.google.com/chrome?hl=zh-TW
[hr]
<h4>Firefox</h4>
Mozilla Firefox是目前市占率第三名的瀏覽器,它有著豐富的擴充套件,可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版,最大的特色在於新設計的界面以及方便的網路同步功能,能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中,比前一版(28.0)更加美觀、直覺、好用
<b>下載FireFox</b>
http://moztw.org/
[hr]
<h2>多觀摩與紀錄優良網站</h2>
1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
3.<b>請將瀏覽過不錯及值得推薦的網站,網站名稱及網址列出,並試著說明及分析。</b>
範例:
[hr]
<b>網站名稱:Foodsense食品感官
網址:http://foodsense.is/</b>
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/回覆完畢請註明學號。
範例:
[hr]
<b>網站名稱:Foodsense食品感官
網址:http://foodsense.is/</b>
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/
Changed By: JinJin
Change Date: September 16, 2014 08:46PM
[作業00] 網頁設計課前準備與基本認識
第一週須完成的任務:
<h2>安裝軟體</h2>
安裝必備軟體
[hr]
<h4>FileZilla</h4>免費好用的FTP軟體
https://filezilla-project.org/
FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體,內建44種語言的多國語系介面,且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外,還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式,是個相當穩定而好用的免費軟體。
安裝說明:http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D
[hr]
<h4>Notepad++</h4>http://notepad-plus-plus.org/
實用的免費文字編輯軟體 - Notepad++,是旅法台灣人作品,體積輕巧不佔系統記憶體,支援多分頁功能,是一套用來取代Windows記事本的工具,他的操作方式與記事本完全相同。
具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能,支援ANSI、UTF-8(支援檔首無BOM)、UCS-2...等格式的編譯及轉換,是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色,而且還有半透明視窗的效果,是撰寫程式的好幫手。
[hr]
<h4>Dreamweaver</h4>
視覺設計師常用的網頁設計軟體,不過不宜太依賴內建的功能,先了解網頁背後的結構與語法才是王道。
[hr]
<h2>閱讀關於html、css相關書籍,建立網頁設計基本概念</h2>
請多多利用圖書館或網路資源
[hr]
<h2>教學網站註冊</h2>
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』至少填寫學號
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
<h2>認識瀏覽器</h2>
安裝目前主流的三個瀏覽器:IE、Google Chrome、FireFox至少三種瀏覽器。
http://gs.statcounter.com/
<h4>Internet Explorer (IE)</h4>
特色:是目前全球使用人口最多的瀏覽器,因為是Microsoft開發的軟體,因為有許多先天的優勢,也因為最多人使用,所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候,有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言,聰明的網頁編輯人員都會在製作網站的時候,根據這三種瀏覽器作為測試的平台,基本上以符合三種瀏覽器使用為原則。 。
缺點:速度慢、網頁編碼方式不符合html發佈的官方寫法,因此較容易出現網頁顯示異常。
<b>下載 Internet Explorer</b>
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
[hr]
<h4>Google Chrome</h4>
快速啟動Google Chrome 瞬間即可啟動。
迅速載入Google Chrome 的網頁載入速度飛快。
高速搜尋直接從網址列搜尋網頁。
<b>下載Google Chrome</b>
http://www.google.com/chrome?hl=zh-TW
[hr]
<h4>Firefox</h4>
Mozilla Firefox是目前市占率第三名的瀏覽器,它有著豐富的擴充套件,可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版,最大的特色在於新設計的界面以及方便的網路同步功能,能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中,比前一版(28.0)更加美觀、直覺、好用
<b>下載FireFox</b>
http://moztw.org/
[hr]
<h2>多觀摩與紀錄優良網站</h2>
1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
3.請將本週瀏覽的不錯的及值得推薦的網站,網站名稱及網址列出
範例:
網站名稱:Foodsense食品感官
網址:http://foodsense.is/
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/3.<b>請將瀏覽過不錯及值得推薦的網站,網站名稱及網址列出,並試著說明及分析。</b>
範例:
[hr]
<b>網站名稱:Foodsense食品感官
網址:http://foodsense.is/</b>
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/回覆完畢請註明學號。
範例:
[hr]
<b>網站名稱:Foodsense食品感官
網址:http://foodsense.is/</b>
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/
Original Message
作者: JinJin
Date: September 16, 2014 08:44PM
[作業00] 網頁設計課前準備與基本認識
第一週須完成的任務:
安裝軟體
安裝必備軟體
[hr]
FileZilla
免費好用的FTP軟體
https://filezilla-project.org/
FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體,內建44種語言的多國語系介面,且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外,還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式,是個相當穩定而好用的免費軟體。
安裝說明:http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D
[hr]
Notepad++
http://notepad-plus-plus.org/
實用的免費文字編輯軟體 - Notepad++,是旅法台灣人作品,體積輕巧不佔系統記憶體,支援多分頁功能,是一套用來取代Windows記事本的工具,他的操作方式與記事本完全相同。
具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能,支援ANSI、UTF-8(支援檔首無BOM)、UCS-2...等格式的編譯及轉換,是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色,而且還有半透明視窗的效果,是撰寫程式的好幫手。
[hr]
Dreamweaver
視覺設計師常用的網頁設計軟體,不過不宜太依賴內建的功能,先了解網頁背後的結構與語法才是王道。
[hr]
閱讀關於html、css相關書籍,建立網頁設計基本概念
請多多利用圖書館或網路資源
[hr]
教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』至少填寫學號
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
認識瀏覽器
安裝目前主流的三個瀏覽器:IE、Google Chrome、FireFox至少三種瀏覽器。
http://gs.statcounter.com/
Internet Explorer (IE)
特色:是目前全球使用人口最多的瀏覽器,因為是Microsoft開發的軟體,因為有許多先天的優勢,也因為最多人使用,所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候,有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言,聰明的網頁編輯人員都會在製作網站的時候,根據這三種瀏覽器作為測試的平台,基本上以符合三種瀏覽器使用為原則。 。
缺點:速度慢、網頁編碼方式不符合html發佈的官方寫法,因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
[hr]
Google Chrome
快速啟動Google Chrome 瞬間即可啟動。
迅速載入Google Chrome 的網頁載入速度飛快。
高速搜尋直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW
[hr]
Firefox
Mozilla Firefox是目前市占率第三名的瀏覽器,它有著豐富的擴充套件,可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版,最大的特色在於新設計的界面以及方便的網路同步功能,能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中,比前一版(28.0)更加美觀、直覺、好用
下載FireFox
http://moztw.org/
[hr]
多觀摩與紀錄優良網站
1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
3.請將本週瀏覽的不錯的及值得推薦的網站,網站名稱及網址列出
範例:
網站名稱:Foodsense食品感官
網址:http://foodsense.is/
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/3.請將瀏覽過不錯及值得推薦的網站,網站名稱及網址列出,並試著說明及分析。
範例:
[hr]
網站名稱:Foodsense食品感官
網址:http://foodsense.is/
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/回覆完畢請註明學號。
範例:
[hr]
網站名稱:Foodsense食品感官
網址:http://foodsense.is/
說明:
1.符合響應式設計,為最新的網頁設計技術,符合不同的行動裝置使用。
2.風格清新簡潔,明確的表現出健康蔬食網站的氣質。
補出說明:
1.響應式網頁設計(Responsive Web Design)
[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。 響應式網站如同HTML5一樣,絕對是未來網頁設計的一個重要方向
http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design
2.其他響應式設計網站:
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/
3.其他推薦網站:
http://www.morphix.si/#portfolio
http://www.thefwa.com/