[作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 1. 網頁基礎複習2. 課堂範例3. 作業說明4. 上課影音請同學先複習基礎的網頁設計概念 以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！ 1. 網頁基礎複習 [url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url] [hr] 2. 課堂範例 http://mepopedia.com/~jinjin/ex/hw01/ [hr] 3. 作業說明 參照講義 [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] 4. 上課影音 [練習一] 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/ http://mepopedia.com/forum/read.php?2759,88463,88463#msg-88463 Tue, 28 Jul 2026 11:58:45 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2759,88463,88865#msg-88865 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88865#msg-88865 2.設計概念與製作心得：我覺得跟上學期學得很不一樣
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何? 希望以後的工作能用的到]]> 1065445019 107-1《中國》竹視傳二C-進階網頁設計 Thu, 10 Jan 2019 12:01:49 +0800 http://mepopedia.com/forum/read.php?2759,88463,88858#msg-88858 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88858#msg-88858 1.網址:http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445018
2.設計概念與製作心得：以自己喜歡的歌手作為主題,再以自己最喜歡的歌曲歌詞作為內容,覺得對網頁有更進一步的瞭解了!
3.何謂HTML、DIV及CSS: HTML是基本的架構、DIV是劃分區塊、CSS是風格化，
4.附上至少一個覺得設計很有質感的網站，並說明原因
http://www.holongglitters.com/glitter-manufacturer
整體的視覺效果很統一,網站封面會給人一種震撼的感學,很容易吸引人的目光
5.期待這門課的學習成果與收穫為何?
雖然我覺得網業真的很難,但是製作的過程滿有趣的,也滿有成就感的。]]> 洪嬿婷 107-1《中國》竹視傳二C-進階網頁設計 Thu, 10 Jan 2019 10:27:47 +0800 http://mepopedia.com/forum/read.php?2759,88463,88758#msg-88758 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88758#msg-88758 2.設計概念與製作心得：增加透明度跟圓角之後整個網站給人的感覺又不一樣了
3.何謂HTML、DIV及CSS:
HTML:建構網頁基本架構
DIV:建立網頁區塊
CSS:增加更多變化 使畫面更有質感
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://chidoriashi-sake.com/
介紹酒的網站 ，利用黑色的動態背景襯出產品，非常有質感的網站
5.期待這門課的學習成果與收穫為何?
希望自己在用軟題時可以更上手，也希望可以學到更多關於製作網頁的技巧，將來用在專題及工作上]]> LRY 107-1《中國》竹視傳二C-進階網頁設計 Thu, 20 Dec 2018 13:34:36 +0800 http://mepopedia.com/forum/read.php?2759,88463,88673#msg-88673 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88673#msg-88673 2.設計概念與製作心得 ： 我很喜歡魏斯安德森導演的作品，就做了一個有關電影影評的網頁。
在上課過程老師講解很詳細，雖然都一步一步解析，但是輪到自己實際操作的時候，真的是自信心受挫，哈哈哈。
3.何謂HTML、DIV及CSS : DIV是劃分區塊、 HTML是基本的框架、CSS是讓網頁更加統一。
4.附上至少一個覺得設計很有質感的網站，並說明原因 ：http://www.toolstoliveby.com.tw/tw/brand/atoma/網站頁面很乾淨，規劃良好。
5.期待這門課的學習成果與收穫為何? 希望自己網頁運用可以更加熟練。]]> 4c1045445114 107-1《中國》竹視傳二C-進階網頁設計 Thu, 29 Nov 2018 01:09:09 +0800 http://mepopedia.com/forum/read.php?2759,88463,88623#msg-88623 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88623#msg-88623
2.設計概念與製作心得：自從聽了One Direction一世代的音樂就喜歡他們到現在，就算現在休團但還是很喜歡他們，所以就找了關於他們的資料來跟大家介紹，但用製作網頁形式介紹有點難，因為一個結束的括號沒打造成之後的設定無法顯示讓我搞了很久也很感謝老師的指導 。

3.何謂HTML、DIV及CSS: HTML是一種標示語法 。DIV:劃分區塊 。CSS:可以讓文章增加效果，例如換字體或是改顏色

4.附上至少一個覺得設計很有質感的網站，並說明原因 ((http://g-marchen.com/)) 一年級做網頁的時候參考版面設計看到的，因為我喜歡這種版面設計，而且他標示得很清楚。

5.期待這門課的學習成果與收穫為何? 期待自己能做更的比現在更好，收穫是比起一年級更能知道語法的意思。]]> 陸憶庭 107-1《中國》竹視傳二C-進階網頁設計 Mon, 12 Nov 2018 23:08:54 +0800 http://mepopedia.com/forum/read.php?2759,88463,88618#msg-88618 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88618#msg-88618 2.設計概念與製作心得：做這個主題是因為阿姨是在服飾店當老闆，他也有在網路上賣東西，想說替他做一個網頁讓大家對這家店更加了解。
3.何謂HTML、DIV及CSS: HTML是基本的架構、DIV是劃分區塊、CSS是風格化，能讓網頁變得更完整。
4.附上至少一個覺得設計很有質感的網站，並說明原因 :https://www.minerva.kgi.edu/ ----- 個人蠻喜歡極致黑的，覺得很有質感，加上這個網頁簡約易懂。
5.期待這門課的學習成果與收穫為何?之前在大一雖然有修網頁，但還是沒有很了解，但大二老師非常有細心且會用最輕鬆簡單的教學方式教我們，讓我對網頁設計有了更進一步的了解。]]> 洪嬿婷 107-1《中國》竹視傳二C-進階網頁設計 Sat, 10 Nov 2018 02:55:22 +0800 http://mepopedia.com/forum/read.php?2759,88463,88615#msg-88615 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88615#msg-88615 2.設計概念與製作心得：
用藍莓的顏色營造舒適安穩的感覺，就跟藍莓本莓一樣。
3.何謂HTML、DIV及CSS:
後端程式、區塊標籤、前端設計
4.附上至少一個覺得設計很有質感的網站，並說明原因
http://www.sick-game.com/sickPuzzle/
效果很搶眼印象深刻
5.期待這門課的學習成果與收穫為何?
能完整的做出一個網站]]> tp631621 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 22:58:19 +0800 http://mepopedia.com/forum/read.php?2759,88463,88613#msg-88613 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88613#msg-88613 2.設計概念與製作心得：半夜很想吃牛排的牛牛介紹🐂，結果反而是找牛的部位資料最麻煩（倒地不起）
3.何謂HTML、DIV及CSS：HTML是基本骨架 DIV是標籤架構 CSS是風格化
4.附上至少一個覺得設計很有質感的網站，並說明原因：
https://everylittled.com/
一個在介紹生活事物的新聞媒體網站，統一色調與one page設計讓人覺得有設計感又舒服
5.期待這門課的學習成果與收穫為何？
再做一個有趣的網頁]]> 1045440044 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 16:15:57 +0800 http://mepopedia.com/forum/read.php?2759,88463,88605#msg-88605 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88605#msg-88605 2.設計概念與製作心得： 剛好看到類似這種文章就以這個主題來做了(`・ω・´)
3.何謂HTML、DIV及CSS: HTML是網頁的架構語法,CSS是網頁外觀語法,DIV標籤是標籤語法,用來標示一個網頁區塊
4.附上至少一個覺得設計很有質感的網站，並說明原因 :http://yamazaki-r.co.jp/
網頁風格走清新風格,而在動態互動設計上讓這網站質感增加了許多
5.期待這門課的學習成果與收穫為何?
學習做了一個完整網頁]]> 1065445010 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 11:12:32 +0800 http://mepopedia.com/forum/read.php?2759,88463,88592#msg-88592 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88592#msg-88592 2.設計概念與製作心得：
3.何謂HTML、DIV及CSS: DIV你可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版 可以浮動陰影等做變化
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?]]> magooo 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 10:10:35 +0800 http://mepopedia.com/forum/read.php?2759,88463,88591#msg-88591 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88591#msg-88591 2.設計概念與製作心得：網頁設計交語法找照片上網資料圖庫網頁設計貼照片。
3.何謂HTML、DIV及CSS:HTML網頁架構，CSS是網頁內容設計美化版面設定。
4.附上至少一個覺得設計很有質感的網站，並說明原因 http://koshiki-stay.jp/
畫面感覺是我喜歡的天氣和鄉下的質感，讓我一定要去日本玩一趟。
5.期待這門課的學習成果與收穫為何?上的課程網頁設計會怎麼樣，表示我上課會很困難，值得事情的問題來回答，是課程有網頁圖庫只是這在這裡是只為了了解。]]> 1065445003 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 09:23:01 +0800 http://mepopedia.com/forum/read.php?2759,88463,88590#msg-88590 Re: [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88590#msg-88590 2.設計概念與製作心得： 蠻喜歡喝茶，就做了一個茶有關的網頁。老師上課的時候講解很詳細、好懂，但是輪到自己實際操作的時候，還不是很熟練，還需要多加練習。
3.何謂HTML、DIV及CSS: HTML是基本的框架、DIV是劃分區塊、CSS是讓網頁更加統一，可以改變字體字形大小等等。
4.附上至少一個覺得設計很有質感的網站，並說明原因 ：https://pedromeca.myportfolio.com/illustration 非常有創意，網站頁面很簡潔。
5.期待這門課的學習成果與收穫為何? 希望可以學到更多製作網站的知識，軟件方面運用的更加熟練。]]> 是很聰明呀 107-1《中國》竹視傳二C-進階網頁設計 Thu, 08 Nov 2018 09:22:48 +0800 http://mepopedia.com/forum/read.php?2759,88463,88463#msg-88463 [作業01] DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2759,88463,88463#msg-88463
  1. 1. 網頁基礎複習
  2. 2. 課堂範例
  3. 3. 作業說明
  4. 4. 上課影音
請同學先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

1. 網頁基礎複習


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

[hr]

2. 課堂範例


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

[hr]

3. 作業說明


參照講義
[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]

4. 上課影音



[練習一] 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-進階網頁設計 Wed, 26 Sep 2018 12:43:41 +0800