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

Advanced

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

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



1. [color=#663300]一、製作說明:[/color]



1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件
(或以自己設定的主題與圖片製作)

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

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

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

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

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


2. [color=#663300]二、繳交作業方式[/color]



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

[color=#669900]第三個作業FTP上的資料夾為:hw03

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

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

存放在 < hw03-學號 > 的資夾內[/color]


2. 上傳至FTP

3.回覆本篇文章

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

 (2) 風格設定(色彩設定部份)(加分)

 (3) 有無遇到的問題

 (4) 製作感想

 (5) 製作作業的時間



[color=#CC3300]範例參考網站:[/color]
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/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================



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小時