JinJin 的視覺設計專區 - 108-1《中國》竹視傳二A-進階網頁設計

JinJin 的視覺設計專區 - 108-1《中國》竹視傳二A-進階網頁設計 http://mepopedia.com/forum/list.php?2813 Wed, 29 Apr 2026 10:21:51 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2813,90195,90195#msg-90195 [期末作業] 專題網站設計 (7 replies) http://mepopedia.com/forum/read.php?2813,90195,90195#msg-90195

1. 作業說明
1.1 參考網址
2. 期末範例
3. 參考講義
4. 進度規劃
5. 企劃大綱
6. 說明
7. 製作完成後回覆項目
8. 評分標準
9. 網頁架構參考
10. 上課影音

[期末作業說明] 專題網站製作[hr]

1. 作業說明

請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽為例

1. 參考網址

2019年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.cpmah.org.tw/2019/announcement-2019app.html

2019網頁設計比賽得獎名單
https://www.cpmah.org.tw/2019/20190911.html?showall=&start=2

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]

請設計自己有興趣的主題或與台灣有關的主題
如：景點，小吃，行業，廟宇，風俗，文化，故事....等。

2. 期末範例

上課期末作業範例線上瀏覽
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
2.[講義] RWD多頁網頁編輯 (二) 圖片列表頁 / 文章頁
3.[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定
4.[講義] RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們
5.[講義] Google Fonts 網路中文字型應用

持續新增...

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源
[color=#CC0066]＊未依照要求，期末作業不及格＊[/color]

4. 進度規劃

第十一週11/20　RWD網頁實作 navigation/dropdown/sub-menu/video
第十二週12/27　RWD網頁實作/列表頁/內容頁/
第十三週12/04　RWD首頁-Slider輪播與animation微動畫/Google Fonts網路中文字型應用
第十四週12/11　RWD-相簿設定【繳交企劃大綱】
第十五週12/18　RWD多頁網站製作/案例分析/問題討論
第十六週01/25　期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十七週01/01　1/1(三)開國紀念日放假
第十八週01/08　期末考週-期末檢討-分數確認
[hr]

5. 企劃大綱

請於第十四週12/11前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱(導覽列/中文/檔名)：
3.主要對象(分析)：
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）
8.資料分析

[hr]

6. 說明

盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主，設計頁數請盡量至少以十頁以上為主
設計上若有困難，請找老師討論

每週上課確實依照進度製作，期末即可完成期末作業

[color=#CC0066]第十六週上課前製作完成，課堂報告評分
＊期末若未出席及繳交作業，期末成績以零分計算＊[/color]

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

[hr]

7. 製作完成後回覆項目

製作完成後，請在企劃內容前編輯加入以下內容：

1.作業網址：
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

2.網站主題：
3.內容描述：
4.風格設計：
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
6.個人製作心得：

(請編輯於企劃之前)

[hr]

8. 評分標準

1.視覺美感、創意
2.內容技巧，是否有應用所學技巧
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.網頁內容完整性、原創性
5.工作分配之項目

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> [hr]

9. 網頁架構參考

[img]http://i.imgur.com/0j9UKzY.jpg?1[/img]

● 大溪-街角遇見博物館-公有館網頁架構圖

● 大溪-街角遇見博物館-街角館網頁架構圖

10. 上課影音

[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE
]]> JinJin 108-1《中國》竹視傳二A-進階網頁設計 Mon, 13 Jan 2020 00:27:51 +0800 http://mepopedia.com/forum/read.php?2813,90104,90104#msg-90104 Re: [作業01] DIV與CSS3練習--基本單欄網頁版型 (no replies) http://mepopedia.com/forum/read.php?2813,90104,90104#msg-90104 2.設計概念與製作心得：喜歡的偶像所寫的詞曲。很累!但做完有成就
3.何謂HTML、DIV及CSS:HTML網頁的底，DIV標籤，CSS設計
4.附上至少一個覺得設計很有質感的網站，並說明原因:
https://www.ndc.co.jp/cn/works/mm-package_201809/
排版簡單.有質感.也不花俏。
5.期待這門課的學習成果與收穫為何?
可以學習網頁設計相關知識。]]> 1075445015 1A 108-1《中國》竹視傳二A-進階網頁設計 Wed, 23 Oct 2019 15:59:29 +0800 http://mepopedia.com/forum/read.php?2813,90056,90056#msg-90056 [期中作業]RWD-OnePage網頁實作/slider/Grid system/相簿/地圖 (10 replies) http://mepopedia.com/forum/read.php?2813,90056,90056#msg-90056

1. 作業說明
1.1 參考網址
2. 期末範例
3. 參考講義
4. 進度規劃
5. 企劃大綱
6. 說明
7. 製作完成後回覆項目
8. 評分標準
9. 網頁架構參考
10. 上課影音
11. 參照  [講義] RWD-OnePage網頁實作解析(一)輪播圖-Grid System格線系統
12. 作業說明
13. 製作進度
14. 參考範例
15. 課程影片

11. 參照  [講義] RWD-OnePage網頁實作解析(一)輪播圖-Grid System格線系統

 [講義] OnePage網頁實作解析(一)輪播圖-Grid System格線系統

[hr]

https://youtu.be/BrslTed-BB4

]]> JinJin 108-1《中國》竹視傳二A-進階網頁設計 Fri, 15 Nov 2019 16:04:53 +0800 http://mepopedia.com/forum/read.php?2813,90050,90050#msg-90050 [作業02] jQuary與Font Awesome圖示字體練習 (9 replies) http://mepopedia.com/forum/read.php?2813,90050,90050#msg-90050

16. 作業說明

為使大家在進入期中作業RWD OnePage網站之前，了解何謂jQuery及JavaScript動態語法以及圖示字體(icon font) Font Awesome，加入前導練習。

請延續作業一內容，參考以下兩份講義：
[講義] jQuery講義
[講義] 使用圖示字體(icon font) Font Awesome

將適當的jQuery及Font Awesome圖示字體加入作業一中，做為前導練習。

17. 作業範例

http://mepopedia.com/~jinjin/ex/hw02-jquary

18. 繳交方式

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址: http://file.mepopedia.com/~css108a/hw02/hw02-107544XXXX
2.製作心得：
3.遇到的問題及製作時間:]]> JinJin 108-1《中國》竹視傳二A-進階網頁設計 Tue, 12 Nov 2019 22:39:58 +0800 http://mepopedia.com/forum/read.php?2813,89978,89978#msg-89978 [作業01] DIV與CSS3練習--基本單欄網頁版型 (14 replies) http://mepopedia.com/forum/read.php?2813,89978,89978#msg-89978 本週請同學複習基礎的網頁設計概念，重新練習html與css
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

[hr]

19. 課堂範例

http://mepopedia.com/~jinjin/ex/hw01/

[hr]

20. 作業說明

參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色

1. DIV架構與尺寸分析

1.以DIV建構網頁基本架構

以下為最基本的網站排版架構

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

2. HTML的架構語法

[color=#663300]範例內容僅供參考，主題及內文請自行設定後填入，不要跟範例內容一樣，後續風格與配色請以主題為主，設計出具有質感之相對應網頁[/color]

<!DOCTYPE html> <html> <head> <title>網頁主題請自行更改</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="網頁設計筆記。"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1> 單純色塊的講解 </div> <div id="content"> 利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議 <h3>一、Div標籤與CSS</h3> 在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。 <h3>二、單欄版型的範例</h3> 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 <h3>三、DIV架構與尺寸分析</h3> 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址：新竹校區：303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br> │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by </div> </div> </body> </html>

3. CSS基礎語法

body { margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ background-color:#212663; /*背景色設定*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ font-family: "微軟正黑體", Arial, Helvetica, sans-serif; color: #C6C6C6; /*文字顏色設定*/ border: 6px solid #003; /*網頁做外框的設定*/ } #header{ background-color:#069; height: 110px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/ padding:20px; /*內距設定*/ } #content { /*可不用設定寬度和高度，由文字來決定高度*/ background-color:#D7E1FF; /*背景色設定*/ font-size: 14px; /*字體大小*/ line-height: 2em; /*字體行間為兩個字距*/ color:#666; /*文字顏色設定*/ padding: 30px; /*文字與#content間的內距*/ } #footer { /*可不用設定寬度和高度，由文字來決定高度*/ background-color:#069; font-size: 12px; /*文字尺寸設定*/ line-height: 1.5em; /*文字行高設定為1.5字高*/ color: #FFF; /*文字顏色設定*/ padding: 20px; /*內距設定*/ } h1{ font-size:30px; color:#FFF; } h3{ font-size:18px; color:#5B63C4; }
由以上雛形，加入CSS3效果

參考http://www.css3maker.com/
適當加入CSS3效果

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

[hr]

1. CSS 動畫

只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。
1.設定 CSS 動畫
2.使用 @keyframes 設定動畫關鍵影格
animation-duration：設定整個動畫播放一次的時間長度。
animation-name：設定 @keyframes at-rule 所使用的動畫名稱。
在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式，0% 代表動畫一開始播放的起始點，而 100% 則代表動畫的結尾

若若於練習中加入h1滑入的動畫，可加入以下CSS語法練習：

h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

[hr]
更多CSS動畫說明可參考：
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

[hr]
Google語法補充
思源黑體
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

font-family: 'Noto Sans TC', sans-serif;

圓體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

font-family: ‘cwTeXYen’, sans-serif;
[hr]

4. 加入 CSS3效果之語法參考（請務必修正為符合主題之設計）

@charset "UTF-8"; /* CSS Document */ @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); font-family: 'Noto Sans TC', sans-serif; body { font-family:"Noto Sans TC", sans-serif; margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/ background-color:#C5305D; background-image: url(img/back.jpg) } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ color: #C6C6C6; /*文字顏色設定*/ border: 20px solid #F46A8D; border-radius: 20px 0px 50px 10px; } #header{ background-color:#F46A8D; height: 110px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/ padding:20px; /*內距設定*/ } #content { background-color: rgba(247,239,241,0.7); font-size: 14px; /*字體大小*/ line-height: 2em; /*字體行間為兩個字距*/ color:#000; /*文字顏色設定*/ padding: 30px; /*文字與#content間的內距*/ border-radius: 20px 0px; margin:20px; box-shadow:3px 3px 10px #333; } #footer { /*可不用設定寬度和高度，由文字來決定高度*/ background-color:#F46A8D; font-size: 12px; /*文字尺寸設定*/ line-height: 1.5em; /*文字行高設定為1.5字高*/ color: #FFF; /*文字顏色設定*/ padding: 20px; /*內距設定*/ } h1{ font-size:30px; color:#FFF; text-shadow: 1px 1px 1px #000000; animation-duration: 1s; animation-name: slidein; } @keyframes slidein { from { padding-left: 100%; width: 300%; } to { padding-left: 0%; width: 100%; } } h3{ font-size:18px; color:#C5305D; } img{ border-radius: 20px 0px; } .box{ width: 150px; background: rgba(69,90,56,1.00); padding: 30px; font-size: 20px; color: aliceblue; -webkit-animation: cssAnimation 3.2121s 7 ease; -moz-animation: cssAnimation 3.2121s 7 ease; -o-animation: cssAnimation 3.2121s 7 ease; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); } to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } } @-moz-keyframes cssAnimation { from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); } to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } } @-o-keyframes cssAnimation { from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); } to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } }
補充說明：
目前的瀏覽器幾乎都支援CSS3，因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下：
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

5. 作業上傳與回覆

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/

[hr]

21. 上課影音

[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型（2018/09/27課堂版本）
https://youtu.be/vSpHaQFZANs

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc

完整講義專頁
https://mepopedia.com/~jinjin/webdesign/]]> JinJin 108-1《中國》竹視傳二A-進階網頁設計 Sun, 03 Nov 2019 17:23:23 +0800