JinJin 的視覺設計專區 - 107-1《中國》竹視傳二C-進階網頁設計 http://mepopedia.com/forum/list.php?2759 Wed, 29 Apr 2026 10:22:25 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2759,88915,88915#msg-88915 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 (no replies) http://mepopedia.com/forum/read.php?2759,88915,88915#msg-88915 2.設計概念與製作心得： 喜歡貓咪 所以製作貓咪的小知識
3.何謂HTML、DIV及CSS: HTML是基本的框架、DIV是劃分區塊、CSS是讓網頁更加統一，可以改變字體字形大小等等。
4.附上至少一個覺得設計很有質感的網站，並說明原因 ：https://www.dogcatstar.com/product-category/cat/ 很喜歡他使用的色調跟排版♥
5.期待這門課的學習成果與收穫為何? 希望可以做出跟市面上一樣的網站!]]> yu0520 107-1《中國》竹視傳二C-進階網頁設計 Thu, 17 Jan 2019 09:24:31 +0800 http://mepopedia.com/forum/read.php?2759,88910,88910#msg-88910 Re: [作業02] WordPress.com網站製作 (no replies) http://mepopedia.com/forum/read.php?2759,88910,88910#msg-88910 (1) 作業網址 ：https://dingwun.wordpress.com/
(2) 設計主題 / 風格：簡約
(3) 導覽列項目： 貓的介紹
(4) 遇到之問題: 不太會操作
(5) 製作時間: 5小時
(6) 製作心得/線上製作與上機製作的差異性比較: 線上比較不用改程式碼、上機要自己改程式碼
(7) 班級/學號： 1065445032]]> 丁姵文 107-1《中國》竹視傳二C-進階網頁設計 Thu, 17 Jan 2019 01:24:00 +0800 http://mepopedia.com/forum/read.php?2759,88672,88672#msg-88672 07-1《中國》竹視傳二C-進階網頁設計 (no replies) http://mepopedia.com/forum/read.php?2759,88672,88672#msg-88672 2.設計概念與製作心得：
3.何謂HTML、DIV及CSS: DIV你可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版，可以浮動陰影等做變化
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?]]> 4c1045445114 107-1《中國》竹視傳二C-進階網頁設計 Wed, 28 Nov 2018 21:43:30 +0800 http://mepopedia.com/forum/read.php?2759,88587,88587#msg-88587 [作業02] WordPress.com網站製作 (23 replies) http://mepopedia.com/forum/read.php?2759,88587,88587#msg-88587
  1. 1. WordPress.com網站製作
  2. 2. 參照業師授課製作
  3. 3. 作業說明

1. WordPress.com網站製作



2. 參照業師授課製作



3. 作業說明


1.進入https://wordpress.com登入並製作網站
2.以作品集或個人類型內容製作，內容需原創
3.選擇版型進行製作

4.請回覆

(1) 作業網址 ：
(2) 設計主題 / 風格：
(3) 導覽列項目：
(4) 遇到之問題:
(5) 製作時間:
(6) 製作心得/線上製作與上機製作的差異性比較:
(7) 班級/學號：]]> JinJin 107-1《中國》竹視傳二C-進階網頁設計 Thu, 06 Dec 2018 14:46:56 +0800 http://mepopedia.com/forum/read.php?2759,88463,88463#msg-88463 [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 (12 replies) http://mepopedia.com/forum/read.php?2759,88463,88463#msg-88463
  1. 1. WordPress.com網站製作
  2. 2. 參照業師授課製作
  3. 3. 作業說明
  4. 4. 網頁基礎複習
  5. 5. 課堂範例
  6. 6. 作業說明
  7. 7. 上課影音
請同學先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

4. 網頁基礎複習


[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

5. 課堂範例


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

[hr]

6. 作業說明


參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色

可參考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

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

並回覆於此篇文章

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

[hr]
作業參考
http://mepopedia.com/forum/read.php?2722,87650
http://mepopedia.com/forum/read.php?2723,87651
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw01/hw01-1045445117-1/
(4) http://mepopedia.com/~web105-2c/hw01/hw01-1045445189-2/
(5) http://mepopedia.com/~css105-2c/hw01/hw01-1045445036/
(6) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(7) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/



[hr]

7. 上課影音



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


[hr]

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


作業一課堂講解
http://youtu.be/TnaMIVYyf4Y



完整講義專頁
https://mepopedia.com/~jinjin/webdesign/]]> JinJin 107-1《中國》竹視傳二C-進階網頁設計 Thu, 10 Jan 2019 12:01:49 +0800