進階網頁設計教學網站

網頁設計基礎與趨勢

設計的⼤⽅向將繼續趨於⽤⼾體驗，⽽如果你的設計在實⽤性上尚不⾜的話，再炫再酷也不會引來更多⼈的興趣

【講義】淺談2017網頁設計與網路行銷趨勢

Web Design and Internet Marketing Trends

【講義】視覺設計師從事網頁設計工作所需學習與具備的能力

The ability of visual designers to learn and possess the web design work

HTML與CSS複習

以色塊為主的基本單欄網頁版型（新增CSS3練習）

1.網頁基礎複習

[講義] HTML & CSS網頁基礎複習整理

2.課堂範例

CSS3初探--以色塊為主的基本單欄網頁版型

3.學生作業展示

106-2視傳二Ｂ

106-2視傳二Ｃ

可參考 適當加入CSS3效果

4.講義下載

【講義01】DIV與CSS複習-以色塊為主的基本單欄網頁版型-新增CSS3練習

5.參考網站

可參考CSS3 Maker網站，適當加入CSS3效果

6.補充說明

1.圓角：border-radius: 20px; （請自行放入適當位置並改變數值）
2.區塊陰影：box-shadow:5px 5px 5px #000000;（請自行放入適當位置並改變數值）
3.文字陰影：text-shadow: 1px 1px 1px #000000;（請自行放入適當位置並改變數值）
4.透明度： rgba(102,153,255,0.5)
5.RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
6.透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
7.線性漸層：background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
8.放射漸層：background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
9.漸層語法講義

上課影音（一）

CSS3基礎語法練習

上課影音（二）

作業一課堂講解

EDM電子報製作

以html+css製作電子報

1.EDM電子報製作講義

[講義] EDM/Newsletter製作（線上）

[講義] EDM/Newsletter製作（pdf下載）

2.課堂範例

(1) EDM電子報(中科大規院電子報1)

(2) EDM電子報(中科大規院電子報2)

(3) EDM電子報 (2018年全國校際設計行銷創意競賽活動)

3.學生作業展示

106-2視傳二Ｂ

106-2視傳二Ｃ

4.EDM/Newsletter免費版型

1.Free newsletter templates

2.Free Newsletter Templates

上課影音

[講義] EDM:Newsletter製作

本課程基於上學期網頁設計的基礎，衍伸更進一步進階級動態網頁的設計，透過CSS3的認識，編修進階語法，側重於對網頁編輯語言 html及 css的基礎學習，製作出符合現今流行的RWD網站，充實學生之基本網頁應用技術的能力，可製作出專題性網站。

OnePage網頁製作

集中設計易於瞭解、跨平台設計、更有效率、易於分享

【講義】RWD-OnePage設計-概念篇

⼀頁式網頁的好處在於瀏覽方式單純而直覺

線上講義

【講義】使用圖示字體(icon font) Font Awesome

Font Awesome

線上講義

【講義】OnePage網頁實作解析1/語系/輪播圖/格線系統

html lang / meta tag / Flexslider / Jumbotron / Grid system

線上講義

【講義】OnePage網頁實作解析2/幻燈相簿/地圖

prettyPhoto/map

線上講義

上課影音

1.使用圖示字體(icon font)- Font Awesome

2.OnePage網頁實作/slider /Grid system /相簿/地圖

RWD多頁網站製作

響應式網頁設計(Responsive Web Design)簡稱RWD，這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站

【講義】RWD多頁網頁編輯 (一)/導覽列/影片

【講義】RWD多頁網頁編輯 (二) 列表頁 / 文章頁

【講義】Google Fonts 中文網路字型應用

【講義】RWD首頁-Slider輪播與animation微動畫

【講義】RWD-相簿設定

【講義】RWD-聯絡我們- 地圖設定

學生作品觀摩

藉由觀摩學長姐的作品，學習更多製作技巧

  • 網頁設計作品
  • HTML+CSS初探
  • 電子報
  • RWD-OnePage期中作業
  • RWD-多頁期末作業