slider

網頁設計筆記

Web Design

首頁/網頁設計講義

初探網頁設計前置準備篇

Welcome

歡迎來到網頁設計的世界，網頁設計是現代設計人須具備的基本技能，他比一般的平面設計更為複雜一點，需要大家投入更多的時間練習，請大家跟著我們的步伐，你也可以成為很棒的網頁設計師，讓自己更擁有更具優勢的能力，來面對未來的職場。為了讓大家更快的進入這門課程，更好的學習網頁設計，請大家在一開始先完成以下任務！

逛逛網頁設計教學網站與記錄優秀網站

除了上課的學習外，請多多利用圖書館或網路資源，來獲取更多網頁設計新知，從事網頁設計工作，各種技術日新月異，需要隨時充電，獲取不同的技術及最新趨勢。多充實新知，讓自己更加的強大！

瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異，多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考。

老師的教學網站
  1. 網頁設計筆記
  2. 網頁設計作業列表
網路上的網頁設計教學網站
  1. W3CSchool
    2. W3CSchool是目前內容最豐富，資料最完整的網頁教學平台，裡面所提供的網頁技術也相當的完整，從基礎的HTML、CSS到jQuery、PHP應有盡有，而該平台也有提供中文版語系，是所有學習網頁必備的網站之一。
  2. MDN 的「學習專區（Learning Area）｜ 學習該如何開發 Web｜MDN web docs(HTML、CSS)
    3. MDN裡面都以網頁前端技術為主，同時是由知名瀏覽器Mozilla Firefox公司所成立的，雖然資料相當完整，但中文翻譯的部分，還尚未很完整。
  3. CodePen
    4. 構建、測試和發現前端代碼的最佳場所。
    CodePen 是一個面向前端設計人員和開發人員的社交開發環境。構建和部署網站，展示您的工作，構建測試用例以學習和調試，並尋找靈感。
  4. jQuery
    5. jQuery是目前相當主流的Javascript Framework，在官網的文件中，就會針對每個可用的屬性，有盡細的解說，甚至也有提供教學範例可參考，透過jQeury可讓網頁變得更炫、更活潑。
  5. Bootstrap(RWD CSS)
    6. Bootstrap是目前相當受歡迎的RWD元件之一，透過Bootstrap可以快速的設計出RWD網頁，同時內建了許多網頁互動特效可使用，像是滾動頁籤、廣告輪播、漢堡選單….，在網站中，也有各元件的範例以及網格系統的應用。
  6. 網頁程式設計入門，一文讀懂 HTML、CSS
  7. 網站架設 ：17 個教學設計（網頁製作＋建置費用）
  8. 網站開發流程
  9. 如何架設網站呢?做網站必學8大主題教學
網頁設計賞析
  1. awwwards
    2. 網頁設計得獎作品的線上展示平台，這個平台裡每個得獎作品網站都有四個評分項目，分為整體設計、易用性、創意度、內容，是由眾多設計師進行評選。
  2. WebDesignClip
    3. WebDesignClip是日系風格網站的精選網站，日本網站數量較多，如果網站的風格主體想找些偏日系清亮的風格的或者沈穩低調來參考，這裡會是一個好選擇。
  3. WebDesignClip
    4. WebDesignClip是日系風格網站的精選網站，日本網站數量較多，如果網站的風格主體想找些偏日系清亮的風格的或者沈穩低調來參考，這裡會是一個好選擇。
  4. WebDesigneer
    5. WDR網頁設計庫 - 這裡收集超過上百個網頁設計範例作品、網站版型、參考案例
  5. 網頁設計資源彙整

安裝軟體

除了上課的學習外，也要多逛逛不同的教學網站，多充實新知，讓自己更加的強大！
  1. FileZilla
    2. 免費好用的FTP軟體 下載網址： https://filezilla-project.org/

    FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體，內建44種語言的多國語系介面，且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外，還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式，是個相當穩定而好用的免費軟體。

    本課程的作業，將藉由FileZilla上傳至雲端伺服器，請每位同學都須下載並學會使用！

    詳見FileZilla安裝說明
    學校FTP空間
    • 中國科大個人伺服器空間: http://my.cute.edu.tw/
    • 主機名稱: my.cute.edu.tw
    • 使用者: 學號
    • 密碼: 單一入口密碼
  2. Notepad++
    3. 下載網址： http://notepad-plus-plus.org/

    實用的免費文字編輯軟體 - Notepad++，是旅法台灣人作品，體積輕巧不佔系統記憶體，支援多分頁功能，是一套用來取代Windows記事本的工具，他的操作方式與記事本完全相同。

    具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能，支援ANSI、UTF-8（支援檔首無BOM）、UCS-2...等格式的編譯及轉換，是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色，而且還有半透明視窗的效果，是撰寫程式的好幫手。

    缺點：只有PC版。

  3. Sublime Text
    4. 下載網址： https://www.sublimetext.com/3

    Sublime Text是一套跨平台的文字編輯器，支援基於Python的外掛程式。Sublime Text是專有軟體，可透過套件擴充功能。大多數的套件使用自由軟體授權釋出，並由社群建置維護。

    優點：有PC和MAC版。 缺點：只有英文版。

  4. Dreamweaver
    5. Dreamweaver官網與試用下載

    視覺設計師常用的網頁設計軟體，不過不宜太依賴內建的功能，先了解網頁背後的結構與語法才是王道。

    Adobe Dreamweaver是Adobe公司的網站開發軟體。它使用所見即所得的介面，亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。原本由Macromedia公司所開發。

作業網站註冊

112-2竹視傳網頁設計作業網站

請在這裡註冊喔！

註冊帳號建議為『學號』，每位同學都必須註冊，以順利繳交作業，網頁設計本為公開展示之作品，藉由作業發表，使同學彼此觀摩更激勵成長，有任何註冊問題請隨時反應。

若有註冊問題，可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。

網頁設計課前問答

在進入網頁設計之前，請大家先仔細想想網頁設計與自己的關係，你對這門課的期許，你覺得學習網頁設計對你有什麼幫助？現階段你對於網頁設計的認識有多少？

是否準備好要進入網頁設計的學習行列了？請依據校區點選問卷，每位同學皆須作答喔！
112-2竹視傳網頁設計問卷