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

Advanced

Re: [作業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-2c/hw03/hw03-102xxxxxxx

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

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



2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-103xxxxxxx

 (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/

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



Edited 2 time(s). Last edit at 10/21/2015 09:36PM by JinJin.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445129

 (2) 風格設定:這次主題以卡通海綿寶寶為主,顏色以黃色快樂、希望的感覺帶出。

 (3) 有無遇到的問題:目前問題已經解決,謝謝同學教導我。

 (4) 製作感想:作業三學習到的東西也愈來愈多,所以要更認真聽講及做筆記,每次的作業都是很棒的學習。

 (5) 製作作業的時間:第一部分大概花上兩個小時。

學號:1035445129

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445035

 (2) 風格設定為灰黑色為主,有參點綠色概念,營造墨水的感覺(加分)

 (3) 有無遇到的問題? 從瀏覽器看會有亂碼

 (4) 製作感想? 好難

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

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445171/

 (2) 風格設定:主題內容是認識倉鼠,用老公公鼠的配色來做。

 (3) 有無遇到的問題:標題圖片IE好像不能開。

 (4) 製作感想:主題自己有興趣,所以做很開心。

 (5) 製作作業的時間:圖標45分鐘 整體1小時半。

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445006

 (2) 風格設定(色彩設定部份)(加分):用一種柔和且女性的感覺,來象徵雷諾瓦的畫風,不搶戲但卻難人尋味。

 (3) 有無遇到的問題:在學校切片互換是沒問題的,但一帶回家用家裡的電腦,切片完全讀不出來,於是重做就好了也很順利的可以切換。

 (4) 製作感想:跟著老師的腳步,一步一腳印,穩扎穩打,有問題老師也能快速衝向我替我解決。

 (5) 製作作業的時間 :因為切片的問題,還有一些文字上以及段落錯誤,所以全部重做花了五小時。

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445147

 (2) 風格設定:用老師的素材~

 (3) 有無遇到的問題:繞圖排文

 (4) 製作感想:感恩老師的影片

 (5) 製作作業的時間:兩小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445102

 (2) 風格設定
主題是咻咻熊插畫家的介紹 ,插畫圖主色幾乎都用青綠色,看起來符合插畫的風格,我也喜歡這個淡淡的綠色看了很舒服

 (3) 有無遇到的問題
有,每次設定完一些東西,去網頁看都顯示不出來,也不知道是哪設錯,設定一直跑掉,又檢查不太出來,可能還不夠熟悉怎麼設定

 (4) 製作感想
做完後艇有成就感的,雖然中途有很多次想要崩潰放棄,但花時間慢慢一個個來,多點耐心就可以完成了!

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445054

 (2) 風格設定(色彩設定部份)(加分)
我創作的主體是卡通辛普森家庭,所以我用了他們的代表色黃色當整體的主軸。

 (3) 有無遇到的問題
沒有很大的問題,照著講義去做就好了

 (4) 製作感想
很有趣,尤其是在切片的部分,成功了很有成就感

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445033

 (2) 風格設定(色彩設定部份)(加分) : 以淡色為主,因為挑選幾張幾米的都是淡色 讓整體看起來舒服比較不會太突兀

 (3) 有無遇到的問題 :切片地方有卡在儲存的問題,但摸索之後就好許多了

 (4) 製作感想 : 覺得越來越厲害的感覺,上課老師仔細的講解,隨著教的東西越來越多,感覺未來可以自己完成一個網頁

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

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445159

 (2) 風格設定:用老師的素材~

 (3) 有無遇到的問題:繞圖排文的問題,已解決~

 (4) 製作感想:謝謝老師這麼有耐心TAT

 (5) 製作作業的時間:兩小時

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1015448006

 (2) 風格設定:用老師的素材~

 (3) 有無遇到的問題:無困難

 (4) 製作感想:老師人很好

1015448006 簡國榮

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445162

(2) 風格設定(色彩設定部份)(加分)
老師給的素材。

(3) 有無遇到的問題
老師給的講義照著做就沒甚麼問題。

(4) 製作感想
很有趣。

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

學號:1035445162

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445141
 (2) 風格設定 和畫面統合色系

 (3) 有無遇到的問題 有 但室友很厲害 幫我很多

 (4) 製作感想 蠻難的 需要仔細了解哪個連接到甚麼程式碼才能找出問題

 (5) 製作作業的時間 2個半多
視傳一c 1035445141 林佳陵

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445219

 (2) 風格設定:老師的範例

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

 (4) 製作感想:上課有聽幾乎都會,有忘記的地方看網站上也可以知道怎麼做

 (5) 製作作業的時間:沒計算

學號:1035445219



Edited 1 time(s). Last edit at 11/05/2015 12:19PM by 1035445219.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445168

 (2) 風格設定 老師給的素材

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

 (4) 製作感想 當每個步驟成功時 就會很有成就感

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445057

 (2) 風格設定 老師給的素材

 (3) 有無遇到的問題 還可以

 (4) 製作感想 遇到不會的時候就看老師的講義 真的講得很清楚 也可以順便複習smiling smiley

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445186

 (2) 風格設定(色彩設定部份)(加分)
用英雄聯盟風格,連結圖案參考官網,自己做一個

 (3) 有無遇到的問題
不熟練的時候問題較多
多做幾次就Ok

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

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1025445189

 (2) 風格設定:
  老師的上課教學

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

 (4) 製作感想:
  覺得驚奇

 (5) 製作作業的時間
  利用課堂跟著老師的步驟完成

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445060

 (2) 風格設定:仿老師的範例

 (3) 有無遇到的問題: 目前沒有太大的問題

 (4) 製作感想 : 語法容易搞混,不過做完後就比較清楚

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445072

(2) 風格設定:老師的素材

(3) 有無遇到的問題:無太大問題

(4) 製作感想:好玩!有成就感~

(5) 製作作業的時間:跟著老師的步驟完成

作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445048

 (2) 風格設定(色彩設定部份)(加分) : 星空色調

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

 (4) 製作感想 : 覺得做完蠻有成就感的非常感動,老師上課越來越仔細不會像以前一樣那麼快,雖然害老師進度趕不上

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445090

 (2) 風格設定:水果繽紛的感覺

 (3) 有無遇到的問題 :不知從哪去更改選項等等

 (4) 製作感想:謝謝老師耐心的教導跟同學的幫助~~~

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445051

 (2) 風格設定(色彩設定部份):我是用滴管工去在上面圖片選色顏色,在做深淺改變

 (3) 有無遇到的問題 :

 (4) 製作感想 :從選定主題到找資料和整理,花了一點時間。完成的那一瞬間,非常非常的開心歐耶~

 (5) 製作作業的時間 :大概3個小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445105

 (2) 風格設定(色彩設定部份)(加分) : 以紅色米色為主,營造像電影湯屋的色調

 (3) 有無遇到的問題 :從一出生我就知道我有問題了

 (4) 製作感想 : 我快看見太陽了

 (5) 製作作業的時間 :大概可以吃一個便當加一杯珍奶再跑兩次廁所重複做個3次的時間 smileys with beersmileys with beer

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445066

 (2) 風格設定:ㄏㄏ ㄏ小花花
 (3) 有無遇到的問題:鳩咪

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445078

 (2) 風格設定:哈哩嚕呀風
 (3) 有無遇到的問題:嗡嗡嗡

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445084

 (2) 風格設定:用老師的素材

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

 (4) 製作感想:謝謝老師這麼有耐心

 (5) 製作作業的時間:兩小時

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445108
 (2) 風格設定(色彩設定部份)老師素材
 (3) 有無遇到的問題 無

 (4) 製作感想 很難

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445180
 (2) 風格設定(色彩設定部份)老師素材
 (3) 有無遇到的問題 無

 (4) 製作感想 很難

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445123

 (2) 風格設定:青春的藍色
 (3) 有無遇到的問題:很大的問題,圖片出不來。

 (4) 製作感想:老師回答得非常的清楚。

 (5) 製作作業的時間 :不久

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445030
 
(2) 風格設定:主題為布丁狗 以橘.黃.咖啡色為主 想表現可愛感

(3) 有無遇到的問題:有向老師提出了

(4) 製作感想:這次有慢慢了解怎麼做了

(5) 製作作業的時間:

學號:1035445030

作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445042

 (2) 風格設定(色彩設定部份)(加分) : 血紅色調

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

 (4) 製作感想 : 覺得做完有成就感雖然不太完美,謝謝老師認真教學。

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

1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445189

 (2) 風格設定:用老師的素材

 (3) 有無遇到的問題:繞圖排文

 (4) 製作感想:剛開始放錯地方,難怪圖片一直沒出來,還好有老師的耐心教導和同學的指導才順利完成~

 (5) 製作作業的時間:兩小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445093/

(2) 風格設定_以嚕嚕米為主題 以較為可愛色系做配色

(3) 有無遇到的問題_有時候字會跑掉 有點無助 但老師教學影片講解清楚真的太方便了

(4) 製作感想_做完真的還蠻有成就感的 覺得厲害

(5) 製作作業的時間_4-5h

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445183/

(2) 風格設定(色彩設定部份): 日系風格 簡約風 顏色淡色調柔色調都有 森林系

(3) 有無遇到的問題: 沒有,老師影片講得很清楚

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

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

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445207
(2) 風格設定(色彩設定部份)老師素材
(3) 有無遇到的問題 很多語法記不起來
(4) 製作感想:太難了已經瀕臨崩潰邊緣
(5) 製作作業的時間 2小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445153

 (2) 風格設定 小小兵的主色黃色

 (3) 有無遇到的問題 無

 (4) 製作感想 網頁設計超好玩!!!

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



Edited 1 time(s). Last edit at 11/18/2015 04:59PM by 1035445153.
(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445195

 (2) 風格設定:這次主題以我最喜歡的少女時代為主,顏色使用粉紅色調 。

 (3) 有無遇到的問題:問題很多,總是覺得很難懂,同學教才能完成。

 (4) 製作感想:就是一直覺得跟不上進度好難懂。

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

學號:1035445195

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445027

 (2) 風格設定:這次主題是怪獸大學,學校應該給人一種清爽沒有壓力快樂學習的地方。

 (3) 有無遇到的問題:目前問題已經解決,謝謝同學教導我。

 (4) 製作感想:作業三學習到的東西也愈來愈多,所以要更認真聽講及做筆記,每次的作業都是很棒的學習。

 (5) 製作作業的時間:第一部分大概花兩個小時。

學號:1035445027

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445018

 (2) 風格設定:這次主題以龍貓為主,顏色以藍色輕快

 (3) 有無遇到的問題:有一點亂 設定的東西比較不懂 都看影片解決問題

 (4) 製作感想:作業三真的可以學到很多

 (5) 製作作業的時間:三至四個小時

學號:1035445018

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1025445115

 (2) 風格設定:想做關於柴犬的網站

 (3) 有無遇到的問題:複雜多多

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

 (5) 製作作業的時間:兩個小時左右

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445024

(2) 風格設定(色彩設定部份)
黑灰色案冷色系加一點湖水綠有絕境中看到希望的感覺
(3) 有無遇到的問題
還可以無大礙
(4) 製作感想
很有成就感
(5) 製作作業的時間
三小時

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445009

 (2) 風格設定:灰色&藍色 簡單

 (3) 有無遇到的問題:繞圖排文

 (4) 製作感想:謝謝老師的影片不然都部會做

 (5) 製作作業的時間:切片用了很久的時間合計3~4小時
1035445009

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445081

(2) 風格設定 大英雄天團 杯麵的紅白風

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

(4) 製作感想 雖然做網頁很耗時間,但做完的成果真的很棒

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



Edited 1 time(s). Last edit at 11/19/2015 03:27AM by 1035445081.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445201

(2) 風格設定(色彩設定部份)
向李榮浩的音樂風格一樣簡單
(3) 有無遇到的問題
還可以無大礙
(4) 製作感想
很有成就感
(5) 製作作業的時間
三小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445216

 (2) 風格設定:以清新男朋友的風格製作

 (3) 有無遇到的問題?起初覺得很有障礙

 (4) 製作感想?做完看到完成品感覺很棒!!

 (5) 製作作業的時間?製作期中作業的第一業

(1) 作業網址:http://mepopedia.com/~web104-2c/midterm/midterm-1035445087/
 (2) 風格設定(色彩設定部份)(加分)

像在夢境裡的粉紫色
 
(3) 有無遇到的問題

光是製作切片就看了影片三次才做完 其實我很認真在看但是就是做的很怪

 (4) 製作感想

太難了 我果然還是程式碼障礙患者

 (5) 製作作業的時間

一天 也許再多個看教學影片的時間

(1) 作業網址:http://mepopedia.com/~web104-2c/hw03/hw03-1035445096

 (2) 風格設定:這次主題以電影魔鏡夢遊為主,表現出神秘&有趣的故事感覺

 (3) 有無遇到的問題:目前問題已經解決,謝謝同學教導我。

 (4) 製作感想:作業三學習到的東西也愈來愈多,所以要更認真聽講及做筆記,每次的作業都是很棒的學習。

 (5) 製作作業的時間:花上兩個小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445156

 (2) 公主粉紅風~

 (3) 我的理解能力有待加強.... 要慢慢來

 (4) 好麻煩的作業阿 但是越做越上手就ok了

 (5) 3~4小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445111
 (2) 風格設定(色彩設定部份)
黑白簡單調

 (3) 有無遇到的問題
文繞圖難以理解
 (4) 製作感想
越做越順手
 (5) 製作作業的時間
一個晚上

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445145

 (2) 風格設定 :海底總動員 用海洋的藍色以主題

 (3) 有無遇到的問題 :很多細節都不太清楚 後來看影片才了解內容

 (4) 製作感想 :覺得自己可以做好一個網站很開心,因為是製作自己喜歡的東西所以很有興趣,雖然有點困難,
但是我還是很努力的完成。

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

1005445160 - 王思博

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1005445160

(2) 風格設定(色彩設定部份)(加分) : 舒適溫和的顏色

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

(4) 製作感想 : 老師講解細微,教學教材專業又迅速,做久了就能領悟訣竅

(5) 製作作業的時間 : 幾小時

回錯



Edited 1 time(s). Last edit at 01/07/2016 02:36AM by 1035445120.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445087

 (2) 風格設定(色彩設定部份):紫色和粉紫色調

 (3) 有無遇到的問題:還好
 
(4) 製作感想:切來切去有點麻煩

 (5) 製作作業的時間 :1小時

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445150

 (2) 風格設定:LanaDelRey

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

 (4) 製作感想:很累但做完有成就感

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

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw04/hw04-1035445075/

 (2) 風格設定(色彩設定部份): 使用包大山個人風格的藍綠色

 (3) 有無遇到的問題 我忘記了....

 (4) 製作感想 越做越快

 (5) 製作作業的時間 沒有計算

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445075

 (2) 風格設定(色彩設定部份)還是依然使用包大山的插畫來做配色

 (3) 有無遇到的問題 mac沒有中文版==使用的非常痛苦 尋找插入滑鼠變換影像找了很久

 (4) 製作感想 看到滑鼠滑過去就變壞影像的那一剎那心花朵朵開

 (5) 製作作業的時間 6hr

http://mepopedia.com/~web104-2c/hw03/hw03-1035445192

 (2) 風格設定:嘗試了粉色系風格

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

 (4) 製作感想 :花時間就會做好

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



Edited 3 time(s). Last edit at 01/12/2016 08:16PM by chu8566.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1035445063

 (2) 風格設定:青藍,紫藍,黃色

 (3) 有無遇到的問題 :一切順利

 (4) 製作感想 :做完了很開心

 (5) 製作作業的時間 :兩小時多

(1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1045445201

 (2) 風格設定 這次是用星際大戰來呈現此次作業

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

 (4) 製作感想 我覺得作業三還滿實用的跟前面比

 (5) 製作作業的時間 11/27

 (1) 作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1031045445075
 (2) 風格設定 已無彩色作為本次網頁設計配色 希望用簡潔俐落的手法打造有設計感的設計

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

 (4) 製作感想 還滿好玩的 希望以後有機會可以深入探討

 (5) 製作作業的時間 大概2個多小時