Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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/