Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Re: [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型(新增CSS3練習)

經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

1. 網頁基礎複習


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



2. 課堂範例


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



3. 作業說明


參照講義
利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

自行選擇主題,製作以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://mepopedia.com/~web106-2b/hw01/hw01-105xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?



作業參考
(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/





4. 上課影音



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


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





Edited 3 time(s). Last edit at 03/10/2018 12:25AM by JinJin.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2c/hw01/hw01-1055448122
2.設計概念與製作心得: 森林 大自然的感覺
3.何謂HTML、DIV及CSS: 文本 可以直接顯示於網頁上、給css使用的標籤?、讓html變得有規劃 不會雜亂無章
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.cssdesignawards.com/woty2016/ 很有趣的互動
5.期待這門課的學習成果與收穫為何? 可以運用到專題上

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445097
2.設計概念與製作心得:可愛的日式甜點,甜蜜的感覺 / 越來越複雜阿阿阿阿
3.何謂HTML、DIV及CSS: 製作網頁的好工具
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://www.lebledor.com/ 給人視覺上感到非常舒適
5.期待這門課的學習成果與收穫為何?
對將來或是專題很有幫助

1055445076 李珮瑄

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445076
2.設計概念與製作心得: 最喜歡透明度 可以讓畫面多加層次感
3.何謂HTML、DIV及CSS: div 可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版
網頁創建和其它可在網頁瀏覽器中看到的信息 設計的一種標記語言
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.anonymoushamburger.com/ 我覺得他的動畫很有質感 畫面簡約易讀
5.期待這門課的學習成果與收穫為何? 可以學到更多有關網頁設計的相關知識跟技能



Edited 1 time(s). Last edit at 03/22/2018 08:24AM by ukiss52007.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445148
2.設計概念與製作心得:最近期待的電影第二部
3.何謂HTML、DIV及CSS: 製作網頁的
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://www.squarespace.com/ 很乾淨舒服
5.期待這門課的學習成果與收穫為何?
對將來工作或很有幫助 也很有趣

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445007
2.設計概念與製作心得:想主題很累
3.何謂HTML、DIV及CSS: 讓製作網頁能更分的清楚
4.附上至少一個覺得設計很有質感的網站,並說明原因 :http://simsim.fouroom.co/ 因為很可愛
5.期待這門課的學習成果與收穫為何? 希望學到更多精緻的網頁設計

1.網址: http://mepopedia.com/~web106-2b/hw01/hw01-1055445052
2.設計概念與製作心得:新的一學期不知道是太久沒碰網頁還是~一開始做的時候超卡整個腦袋斷線eye popping smiley 後來慢慢找回手感~
3.何謂HTML、DIV及CSS: 更容易製作網頁?????
4.https://udesign.udnfunlife.com/mall/Cc1a00.do?gclid=Cj0KCQjw7Z3VBRC-ARIsAEQifZQdjY-IzrPoVs6c4t9kAnbJqA5cAkGgC5QUxDe-ubg2UJbm65mgV9saAvRsEALw_wcB&gclsrc=aw.ds 喜歡簡潔簡單的感覺~
5.期待這門課的學習成果與收穫為何? 希望可以學到更多製作網頁的技巧~這樣可以替自己的品牌設計一個專屬的網站!!



Edited 4 time(s). Last edit at 03/15/2018 08:26AM by 1055445052.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445082
2.設計概念與製作心得: 以橘色為主色調,讓人充滿著食慾感。在製作過程中有些差錯,但有自己嘗試著將網頁變得有質感些。smiling bouncing smiley
3.何謂HTML、DIV及CSS:
HTML, DIV 標籤用法,現在直接用來做網頁排版。drinking smiley
CSS為自訂網頁風格網頁設計者所表現出的整體風格,有不會因為其瀏覽者的瀏覽器設定不同而改變。drinking smiley
4.附上至少一個覺得設計很有質感的網站:https://www.design-hu.com/about-us 此網頁不會有視覺上的壓迫感。smileys with beer
5.期待這門課的學習成果與收穫為何? 期望自己能夠將學到的內容,在未來的職場上有幫助。hot smiley



Edited 1 time(s). Last edit at 03/15/2018 08:27AM by 1055445082.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445185
2.設計概念與製作心得:柔美的感覺,還不錯。
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何? 可以學到許多。



Edited 2 time(s). Last edit at 03/15/2018 09:11AM by 1055445185.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445146
2.設計概念與製作心得:主要是呈現偏遊戲網的風格 一開始還真的會忘記一些東西還要翻以前做過的網頁來看
3.何謂HTML、DIV及CSS: ((離線
4.附上至少一個覺得設計很有質感的網站,並說明原因 :
5.期待這門課的學習成果與收穫為何? 希望可以更熟悉所有操作和獨立製作自己的網站

網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445191
設計概念:以亮色和粉色為主
期待這門課的學習成果與收穫:對未來工作有幫助

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445137
2.設計概念與製作心得:比之前的簡單很多
3.何謂HTML、DIV及CSS: (HTML網站)(DIV標籤)(網站的呈現方式.設計)
4 https://www.feeling18c.com/index_no_animaiton.php
5.期待這門課的學習成果與收穫為何? 做出多樣性的網站

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445071
2.設計概念與製作心得:以日式風格營造出一個人走在京都的感覺
3.何謂HTML、DIV及CSS: 標籤?
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://mugenmusou.com/
配色美 簡約但不失質感
5.期待這門課的學習成果與收穫為何? 能做出具有深度的網頁
有圖片ㄌ~~~~



Edited 2 time(s). Last edit at 03/15/2018 08:31AM by Chen pinrong.
(編輯記錄)

更改~~~~~~~~~~~~~~~~~~~~~~~

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445104
2.設計概念與製作心得: 初期回復記憶 666
3.何謂HTML、DIV及CSS: 很酷的架構 很酷的標籤 很酷的設計設定
4.附上至少一個覺得設計很有質感的網站,並說明原因

http://www.2121designsight.jp/

有親訪此處 並認為網站美感與地區相符
5.期待這門課的學習成果與收穫為何?
變猛猛噠



Edited 1 time(s). Last edit at 03/22/2018 12:35AM by MEATBALL HONG.
(編輯記錄)

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445095
2.設計概念與製作心得:新的課程充滿希望。
3.何謂HTML、DIV及CSS: 網頁製作及修飾的工具。
4.附上至少一個覺得設計很有質感的網站,並說明原因: http://www.cute.edu.tw/
支持學校--功能及特效許多。
5.期待這門課的學習成果與收穫為何?
能獨立完成有專業感的網站。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445014
2.設計概念與製作心得:j2/4
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何? 不錯。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445008
2.設計概念與製作心得:厭。
3.何謂HTML、DIV及CSS: 網頁的架構及色彩的運用呈現出具有質感的網頁。
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何? 不錯。

1.網址 : http://mepopedia.com/~web106-2b/hw01/hw01-1055445056
2.設計概念與製作心得 : 覺得進階網頁課程會很有挑戰力~~
3.何謂HTML和DIV及CSS : 網頁製作不可或缺的重要工具
4.有質感的網站 : https://www.cadch.com/modules/news/
(說明原因) : 整體看起來非常時尚 ; 風格舒適thumbs upthumbs upthumbs up
5.期待這門課的學習成果與收穫為何 ? 知識能更上一層樓的感覺 !!

1055445103林容渝

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445103
2.設計概念與製作心得: 調背景大小比較困難外,其他都沒問題
3.何謂HTML、DIV及CSS: HTML網頁 DIV標籤 CSS設計
4.附上至少一個覺得設計很有質感的網站,並說明原因 https://www.pinterest.com/ 簡潔明瞭
5.期待這門課的學習成果與收穫為何? 希望可以做出有質感的網頁

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445190
2.設計概念與製作心得:以拉拉熊的顏色代表來製作。
3.何謂HTML、DIV及CSS: DIV 可以把他視為標籤 這個標籤給他名稱之後用CSS去做排版
網頁創建和其它可在網頁瀏覽器中看到的信息 設計的一種標記語言 。
4.附上至少一個覺得設計很有質感的網站,並說明原因 :http://www.sanm-in.com/index.php?type=top&arem=108 因為整體感看起來很可愛很舒服
5.期待這門課的學習成果與收穫為何? 可以學到許多讓我網頁更進步。

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445178
2.設計概念與製作心得:感覺不錯
3.何謂HTML、DIV及CSS: 架構 標籤 設定
4.附上至少一個覺得設計很有質感的網站,並說明原因 https://vimeo.com/ 厲害!
5.期待這門課的學習成果與收穫為何? 網頁能做得很厲害

http://mepopedia.com/~web106-2b/hw01/hw01-1055445002

2.設計概念與製作心得:玩樂風格
3.何謂HTML、DIV及CSS: 製作網頁的好工具
4.期待這門課的學習成果與收穫為何?
對將來或是專題很有幫助

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445092
2.設計概念與製作心得:
是以宮崎駿的借物少女艾莉緹來做的
3.何謂HTML、DIV及CSS:
我卡住
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://aeru-studio.com/
簡單美美的
5.期待這門課的學習成果與收穫為何?
我相信可以學到更多

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445197
2.設計概念與製作心得: 加入了動畫,網頁變得豐富了很多
3.何謂HTML、DIV及CSS: 做網頁用的工具,div為標簽,css美化文本
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://issuu.com/ (多圖與排版)
5.期待這門課的學習成果與收穫為何?
學到更多有關網頁的知識與流行的基本構架

1.網址 : http://mepopedia.com/~web106-2b/hw01/hw01-1055445068

2.設計概念與製作心得 : 一直忘記要回復這邊...sorry

3.何謂HTML和DIV及CSS : 解釋完太長了@w@...HTML是身體CSS是衣服跟裝飾品這樣吧

4.有質感的網站 : https://www.apple.com/tw/mac-pro/
這種動畫效果應該很難吧...沒什麼好挑惕的啊啊啊

5.期待這門課的學習成果與收穫為何 ? :之後應該會去研究購物車之類的東西吧...好像常常被問到這東西,然而目前手上沒這技能

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-1055445038

2.設計概念與製作心得:

設計概念是探討憂鬱症的人,不見得是你看到當下的那麼快樂,有可能下一秒會發生讓人痛心的是,所以要好好陪伴,因為其實每個人都會憂鬱,只是嚴不嚴重而已,多多關心周遭的人,珍惜當下,或許可能因為關懷或許能幫助一些人走出來!

3.何謂HTML、DIV及CSS:

HTML div 標籤是網頁中的重要基礎元素,DIV 可以創造各個不同的區塊,每個區塊內還可以增加更小的區塊,每組 HTML div 標籤都是一個區塊級元素,基本會占用掉一整行的空間~

一組標準的 HTML div 區塊是由一個開頭
標籤與一個結束
標籤所組成,其間背包起來的部份就是區塊內容,文字、圖片、影片、框架 也就是 style 的部份。

CSS DIV 可以讓整體程式碼更為乾淨整潔,修改上非常便利,而且兩欄式網頁可以說是非常普遍的設計方式,主要原因是網頁配置比起單欄式設計有更多的區塊空間可以使用。

4.附上至少一個覺得設計很有質感的網站,並說明原因
https://linkinpark.com/news,很容易找到要找的東西~

5.期待這門課的學習成果與收穫為何?
學習到更多種類的網頁類型~感覺比之前做更有趣了~希望我不要再請假了....~