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

Advanced

[作業03 ]利用Div標籤與CSS建立基本網頁版型- 圖片篇

[作業03] 利用Div標籤與CSS建立基本網頁版型--圖片篇



1. 一、製作說明:



1.請參考 [講義03] 利用Div標籤與CSS建立基本網頁版型
的步驟製作

2.下載附件
(或以自己設定的主題與圖片製作)
可從這個作業開始,製作期中作業的第一頁
請選定自己喜歡的主題及相關資料

3.每個同學記得在title的部分打上"自訂的主題"
在#footer 註明 Designed by 某某某(可自行取名)

4. 在#wrapper寬度上打上 px的數值

5. #content內,自行打入不同的內容文字,自行隨意設定

6. 以本單元的架構下,文字、圖片及設定,可依講義或自行發揮

7.本作業的的重點為:新增圖片按鈕,頂圖及內文圖。可依參考檔製作,或自訂主題製作(加分)


2. 二、繳交作業方式



1.製作完成後,檔案命名方式:

第三個作業FTP上的資料夾為:hw03

每位同學請將自己的資料夾命名為:hw03-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw03/hw03-102xxxxxxx

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw03-學號 > 的資夾內



2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-104xxxxxxx

 (2) 主題 / 風格設定(色彩設定部份)

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間



範例參考網站:
http://mepopedia.com/~jinjin/web/hw03/

作業參考
(1) http://mepopedia.com/~jinjin/web/hw03/
(2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/
(3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/
(4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/
(5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/
(6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html

http://mepopedia.com/~web100-a/hw03/hw03-1006445010/

http://mepopedia.com/~web100b/hw03/hw03-1001445006/

===========================================
若經發現作業為直接複製同學檔案以零分計
===========================================

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1035443110

(2) 主題 / 風格設定(色彩設定部份)
蘇打綠/清新、簡潔

(3) 有無遇到的問題
一些比較複雜的東西設定很久,像是header的部分跟連結列

(4) 製作感想
我覺得連結列的部分最好玩,雖然最花時間,但設定出來後很有成就感。
(5) 製作作業的時間
差不多三四個小時左右。

作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445008

主題:魔法奇緣
風格設定(色彩設定部份) :風格是公主系列,淡淡的粉色水藍色,淺色系,讓人看起來心暖暖

有無遇到的問題:細細看著說明做,解釋得很清楚所以沒什麼問題

製作感想:這可能可以打100多個字吧哈哈哈!!我覺得這次花的時間比較久,真的是越後面越多要做藥劑的東西,應該說程序上都還可以,只是會花比較多時間去想要怎麼配色跟白板啦!!不過做完還是很開心~~~更是期待下一堂課要做的東西!!因為做完真的很有成就感!!

製作作業的時間:製作的時間總共加起來大概4~5小時有!!希望之後可以更進步

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445014

(2) 主題:我和我的十七歲

風格設定:因為這部是在講青春愛情故事,所以整體配色我都是以暖色調的粉嫩顏色去做搭配

(3) 有無遇到的問題

覺得這次作業的東西又比上次更多更複雜,而且因為語法都是英文所以還是會有些搞混哪個是改哪裡的,
但問完老師後有比教清楚知道一些,然後很多地方都需要注意不然一不小心語法哪裡打錯,就無法改正。

(4) 製作感想

經過一次又一次的作業,有越來越了解一些語法的結構,雖然剛開始有很多地方容易搞混,
研究很久,但其實用懂之後就能越做越快,也藉由做這個作業可以訓練自己排版的美感,做
完也很有成就感,也謝謝老師這麼用心的教導,讓我們學到很多!

(5) 製作作業的時間

3~4小時

(1)        作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445062

(2) 主題:日本神道教

風格設定:簡單、潔白

(3) 有無遇到的問題

上課筆記加上老師的講義,就沒有什麼問題了thumbs upsmiling smiley

(4) 製作感想

這次增加了按鈕選項比較花時間製作,每一個按鈕都需要一個個連結其實很快就聯結好了cool smiley

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445089

 (2) 主題 / 風格設定(色彩設定部份) :飲料店,歡樂暖色系為主spinning smiley sticking its tongue out

 (3) 有無遇到的問題 :要放圖片在內容不知道怎麼移動位置confused smiley

 (4) 製作感想 :這次作業學了很多新的功能,發現一個新的問題又有另一個問題出現eye popping smileyeye popping smiley還有圖檔位置真的很重要不然會整個亂掉spinning smiley sticking its tongue outspinning smiley sticking its tongue outspinning smiley sticking its tongue out

 (5) 製作作業的時間 :2~3小時

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445017

(2) 主題 / 風格設定(色彩設定部份)
主題:The song of the night
風格設定:介紹關於能在夜晚聽的音樂,所以整體用冷色調,主圖則是星空加上音樂符號,帶給人祥和的感覺。

(3) 有無遇到的問題

只要有不懂的地方,就會看老師的教學影片,所以沒有問題。

(4) 製作感想

老師上課時教得很詳細,都能夠吸收,雖然有時會忘記一些步驟,但只要看教學影片,就能馬上瞭解了,而比較需要
注意的是關於色彩的搭配,思考如何呈現才會有美感,所以我在選擇主題上花較多的時間,最後我選擇用夜晚的音樂
來做,這樣以後隨時都能夠開啟這個網頁來聽聽歌,且看著自己做出的網頁,也會很開心。

(5) 製作作業的時間

5~6小時

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445095

(2) 主題 / 風格設定(色彩設定部份)
主題:迪士尼米老鼠
風格設定:歡樂的 迪士尼樂園的配色

(3) 有無遇到的問題

我的軟體怪怪的,我之後會補做完整一點。

(4) 製作感想

老師上課聽得懂,但自己操作有點困難,而且久沒做真的都忘了....
但老師網站上都教得很詳細。

(5) 製作作業的時間

2~3小時

 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445152

主題 / 風格設定(色彩設定部份) :全能天后-楊丞琳/魅力

 有無遇到的問題 :容易在編輯css把div與一般的搞混 (ex.會把p前面不小心加上# ......)
 製作感想 : 越來越複雜,花的時間也更多。也會犯比較多錯誤,但是也能從中學習,之後就不會錯了。覺得網頁設計依然很神奇,很有趣。spinning smiley sticking its tongue out

製作作業的時間 :3-4小時


(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445170

(2) 主題 / 風格設定:張韶涵/乾淨、清新

(3) 有無遇到的問題 :老師的講義寫得很清楚,沒有遇到什麼太大的問題。

(4) 製作感想 :這次以為會做很久,結果比想像中的快很多欸,所以這是有熟練了嗎?!

(5) 製作作業的時間:三小時吧。

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445182

(2) 主題 / 風格設定(色彩設定部份)
主題:櫻桃小丸子
風格設定:桃紅色黃色的風格

(3) 有無遇到的問題

看老師的影片很清楚!棒棒

(4) 製作感想
覺得做網頁設計真的是很好玩 研究過後完成就很有成就感
而且做了會一直想要做下去

(5) 製作作業的時間

5小時以上

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445125

(2) 主題 / 風格設定(色彩設定部份)
主題:神力女超人
風格設定:新潮

(3) 有無遇到的問題
問老師之後就清楚理解了thumbs upthumbs upthumbs up

(4) 製作感想
有一點複雜hot smiley

(5) 製作作業的時間 3小時

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445149

(2) 主題 /maroon5

(3) 有無遇到的問題
字如何置中
影片怎麼直接用MV模式

(4) 製作感想
很有成就感。
(5) 製作作業的時間
5Hr

1 網址
http://mepopedia.com/~web105-2b/hw03/hw03-1045445122

2 主題/風格設定(色彩設定部份)
主題: Gogoro S
風格: 低調卻也不低調,整體採黑色對比出紅色的狂野。

3 問題
圖片設定不在900,無法置中。

4 製作感想
很多html的部分都是請C班的朱盈穎同學教我做的,很多東西都忘了怎麼做,而且自己電腦是裝CC版,介面有點不一樣,很多地方也卡很久...

5 製作作業的時間: 3天



Edited 2 time(s). Last edit at 11/10/2016 12:00PM by 1045445122.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445155
 (2) 主題 / 風格設定(色彩設定部份)
小魔女doremi
粉色可愛風

 (3) 有無遇到的問題
一開始不太會做,感謝我的朋友教我~

 (4) 製作感想
會做網頁以後越做越順手
 (5) 製作作業的時間
3小時

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-104445119

 (2) 主題 / 風格設定
野良神/神明的故事(藍色調) 簡單俐落的感覺

 (3) 有無遇到的問題
有遇到很多問題,但問老師跟朋友就成功了

 (4) 製作感想
覺得還是有一點難度,但至少都有練習,練習後就都比較會了

 (5) 製作作業的時間
3、4小時吧 總之很久拉哈哈

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445119

 (2) 主題 / 風格設定
野良神/神明的故事(藍色調) 簡單俐落的感覺

 (3) 有無遇到的問題
有遇到很多問題,但問老師跟朋友就成功了

 (4) 製作感想
覺得還是有一點難度,但至少都有練習,練習後就都比較會了

 (5) 製作作業的時間
3、4小時吧 總之很久拉哈哈

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445002
 (2) 主題 / 風格設定(色彩設定部份)
黑執事/黑暗、華麗的風格及色調(配合作品內容)

 (3) 有無遇到的問題
語法錯誤的話要找很久@@

 (4) 製作感想
自己做出來的網頁很有成就感

 (5) 製作作業的時間
2~3小時吧

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445053

 (2) 主題 / 風格設定 :月歌。(ツキウタ。) 音樂、CD、廣播劇。
風格 :舞台效果、閃亮

 (3) 有無遇到的問題: CSS語法還不太熟悉

 (4) 製作感想: 雖然每次做都要花滿久的時間,但是做完後就會有成就感XD
 (5) 製作作業的時間:3~4小時

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445080

 (2) 主題 / 風格設定(色彩設定部份) :
畢書盡/奇幻簡單風
 (3) 有無遇到的問題 :
要花點時間看懂一些語法

 (4) 製作感想 :
因為這個作業的圖都是自己製作所以花在修圖的時間會比較多,而現在越學越多就可以製作比較完整的網頁形式了,很期待之後期中作業完的 成果。

 (5) 製作作業的時間:
2天



Edited 1 time(s). Last edit at 11/15/2016 12:19AM by 1045445080.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445146

(2) 主題 / 風格設定(色彩設定部份)
歌手–薛之謙/低調、簡單

(3) 有無遇到的問題
上課會將老師教的進度、步驟拍下來,結果才過了幾天就幾乎忘了怎麼做,還好仔細回想了一下並搭配老師的講義,就又重拾記憶了

(4) 製作感想
其實作業三也就只是多增加了圖片和按鈕而已,實質上做法還是和作業二差不多,所以我還能消化繼續吸收,看著自己一步一步地將網頁慢慢完成,覺得很有成就感

(5) 製作作業的時間
一至兩天

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445092

 (2) 主題 / 風格設定(色彩設定部份)
主題:王詩安( Diana Wang )
風格設定:以簡約清新帶點時尚的風格來表現出王詩安的MV風格。

 (3) 有無遇到的問題
在做的過程中有遇到一些讓人頭痛小狀況,但之後也都有找到解決方法,雖然花了一些時間去研究了這些狀況,之後也知道問題出在哪 裡,也會多多的去注意。

 (4) 製作感想
老師上課時都有聽懂,但自己在做的時候總是遇到很多問題,而且在做網頁設計時自己的腦袋都要很清晰,不然都會被自己做的東西給搞 混,然而看了老師的教學影片後照著步驟去做就會比較了解了。
但在配色與排版方面就花了較多的時間去思考,也花了不少時間去解決各種小狀況,但看到是自己設計的網頁就有小小的開心。

 (5) 製作作業的時間
5~6小時



Edited 1 time(s). Last edit at 11/16/2016 10:22PM by 1045445092.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445074

 (2) 主題 / 風格設定(色彩設定部份)
主題:蔡依林 Jolin Tsai / 大膽 有趣的配色 表現 Jolin 勇於自我挑戰的樣子.

 (3) 有無遇到的問題
經過問同學,以及老師詳細的影片,慢慢都了解了.

 (4) 製作感想
有時候腦袋比較不清晰時,看原始碼很容易混亂,好像腦袋打結了一樣,最後解決辦法了後,
看著自己做出來的網頁,真的還蠻開心的.

 (5) 製作作業的時間
7~8小時

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445188

(2) 主題 / 風格設定(色彩設定部份)

主題:一個義大利藝術家 Agnes-Cecile
色彩設定:白色,因為這名畫家多數作品背景都會大量留白,來凸顯主題,
所以我視覺主題也是用白色比較符合她的作品風格。

(3) 有無遇到的問題
要記的東西變多了,大部分還可以吸收,有問題就看講義吧

(4) 製作感想
突然變得有點難,但還算ok,上課要更仔細聽才行,有時候看到一堆語法會忘了那是甚麼,
所以腦袋要更專注。

(5) 製作作業的時間
8~9小時

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445161

(2) 主題 / 風格設定(色彩設定部份)
荼蘼花開有兩種意思,花季結束,花季會再來。
因為荼蘼給我的感覺是神祕的,因此配色也偏暗系神秘走向。

(3) 有無遇到的問題
1在設置按鈕的時候會比較錯亂一點

2 因為有動到照片的位子,導致從家裡帶過來的檔案到學校
圖片會跑掉,要重新設置,這是這次作業遇到最困擾的地方

3 英文的部分,因為常常操作的關係,就算是英文也就看的懂了。

(4) 製作感想
越來越深奧,也越做越有成就感。

(5) 製作作業的時間
1天半



Edited 3 time(s). Last edit at 11/17/2016 11:34AM by 1045445161.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445173

 (2) 主題 / 風格設定: 你的名字/ 整體色系以觀看舒適為底

 (3) 有無遇到的問題 :沒有


 (4) 製作感想:@_@

 (5) 製作作業的時間: 課後

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445110

(2) 主題 / 風格設定(色彩設定部份)
以勵志名言為主題,主要是偏理性而能讓心情平靜的藍紫色,

(3) 有無遇到的問題
再css的設定會容易感到很複雜,再加上按鈕的那些設定,
必須一個一個檢查問題的所在

(4) 製作感想
視感覺有點死板,不過越來越熟悉语法後,相信能更順手的去運用

(5) 製作作業的時間
5~6小時

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445086/

 (2) 主題 / 繽紛的大自然感覺

 (3) 有無遇到的問題 按鈕會一直跑掉

 (4) 製作感想 網頁好難

 (5) 製作作業的時間 2小時

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445056

 (2) 主題 / 風格設定:super junior介紹 / 用糖果色系呈現可愛的感覺

 (3) 有無遇到的問題:有,平台上傳不成功,後來有去問老師,解決了。

 (4) 製作感想:製作網頁真的很麻煩,一點點的小細節都要用好,不然會錯得很明顯,像我就修改了很多次才好。

 (5) 製作作業的時間:一個禮拜(中間有持續修改)

作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445195
 (2) 主題 / 風格設定(色彩設定部份) 白敬亭

 (3) 有無遇到的問題 有時候會發現跟不住老師的進度,而且有時候做出來的東西很奇怪

 (4) 製作感想 第三個作業和前兩個相比,稍微增加了一點難度

 (5) 製作作業的時間 我是都一起做的,用了差不多好幾天,但每天都沒做多少

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445131
(2) 主題:ONE OK ROCK

風格設定:偏黑色系

(3) 有無遇到的問題

看了老師的講義,就沒有什麼問題了

(4) 製作感想

做網頁還蠻有趣的

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445077

(2) 主題 / 風格設定:向陽處的她/溫暖、簡單、明亮

(3) 有無遇到的問題 :還好

(4) 製作感想 :是還可以,可是用IE瀏覽還是會有問題
(5) 製作作業的時間:三小時吧。

(1) 作業網址:http://mepopedia.com/~web105-2b/hw03/hw03-1045445068

(2) 主題 / 風格設定:W兩個世界/簡單、粉色系

(3) 有無遇到的問題 :沒什麼大問題

(4) 製作感想 :一開始覺得很難,經過老師的影片慢慢製作就覺得還好沒什麼問題。

(5) 製作作業的時間:5-7小時。

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445071
 (2) 主題 / 風格設定(色彩設定部份)
蠟筆小新 /簡潔俐落
 (3) 有無遇到的問題
小複雜
 (4) 製作感想
做完很有成就感
 (5) 製作作業的時間
4天

(1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445065
 (2) 主題 / 風格設定
深色黑暗的風格
 (3) 有無遇到的問題

 (4) 製作感想
很有趣
 (5) 製作作業的時間
休閒

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445044

 (2) 主題 / 風格設定(色彩設定部份) 粉紅

 (3) 有無遇到的問題 還好 因為是跟期中作業一起

 (4) 製作感想 很累但鰻有成就感

 (5) 製作作業的時間 2小時

作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1025445119

主題 / 風格設定:清新和乾淨
有無遇到的問題 :無
製作感想:想帶出蘇打綠瘋瘋的感覺所以另外做了圖,比較花時間
製作作業的時間 :三個多小時

 (1) 作業網址: http://mepopedia.com/~web105-2b/hw03/hw03-1045445050

 (2) 主題 / 風格設計 NBA 運動風

 (3) 有無遇到的問題 沒有

 (4) 製作感想 很有成就感

 (5) 製作作業的時間 2小時