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

Advanced

Re: [作業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.下載附件
(或以自己設定的主題與圖片製作)
[color=#CC0033]可從這個作業開始,製作期中作業的第一頁
請選定自己喜歡的主題及相關資料[/color]

3.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名)
[color=#CC0033]版權聲明部分請標註:本網站僅為作業之用,如有侵犯版權敬請告知。[/color]

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

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

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

7.本作業的的重點為:新增圖片按鈕,頂圖及內文圖。可依參考檔之作法製作,本頁請以自定主題設定為期中作業第一頁。


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



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

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

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

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

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


2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-105xxxxxxx

 (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]
===========================================

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445097

 (2) 主題 / 風格設定:GO GO little ant! / 可愛風趣

 (3) 有無遇到的問題 :有很多英文..有點辛苦

 (4) 製作感想 :還不錯~挺開心的

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445034

 (2) 主題 / 風格設格:自己/偏藍色的藝術風

 (3) 有無遇到的問題:btn設錯地方

 (4) 製作感想:設定變多容易設錯地方,但問題都有解決了

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445076

(2) 主題 / 風格設格:小王子 / 溫暖、柔和、夢幻

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

(4) 製作感想:看著講義做滿快的

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445190

 (2) 主題 / 風格設定 : 拉拉熊 / 拉拉熊聖誕風格

 (3) 有無遇到的問題 : 不太會用PS所以PS嘗試很久

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

 (5) 製作作業的時間 : 大約5個多小時

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445064

(2) Sherlock / 簡易黑白主調

 (3)網頁開啟問題

 (4) 學到的東西越來越多了

 (5)幾個小時......吧?!

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445148

 (2) 主題 / 風格設定(色彩設定部份) :簡單明瞭,黑色、黃色、白色。

 (3) 有無遇到的問題 :圖片大小跟裁切。

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

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1035443128

 (2) 主題 / 風格設定(色彩設定部份) :簡單明瞭,黑色、深藍色、白色。

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

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

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

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445004

 (2) 主題 / 風格設定(色彩設定部份) 清新 藍白為主

 (3) 有無遇到的問題 文字排版出問題需上課時發問解決

 (4) 製作感想 雖然很多東西都搞不太清楚 不過研究了很多學長姐不同網頁的不同寫法 自己解決問題的成就感很棒

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445160

(2) 主題 / 風格設定(色彩設定部份) :白色黃色可愛的色系/可愛夢幻

(3) 有無遇到的問題:在圖片放置上研究久

(4) 製作感想:看到按鍵會動很感動

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



Edited 1 time(s). Last edit at 11/23/2017 09:08AM by 1055445160.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445204

 (2) 主題 / 風格設格:小飛俠衣服的顏色

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

 (4) 製作感想:設定變多容易設錯地方

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

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445103

 (2) 主題 / 風格設定(色彩設定部份) :bts/溫和

 (3) 有無遇到的問題 :圖片跑位,不過我解決了

 (4) 製作感想 :比之前的還難所以花了比較多時間

 (5) 製作作業的時間 :3-4小時

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445052

 (2) CHIH HSIN 小寧 / 可愛插畫tongue sticking out smiley

 (3) 滿多的,但是後來慢慢看講義有比較了解~smileys with beer

 (4) 越來越上手 thumbs up

 (5) 我分許多天做所以不知道幾小時grinning smiley

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445085

 (2) 主題 / 風格設定 終極一班/熱血

 (3) 有無遇到的問題 按鈕設定

 (4) 製作感想 按鈕的地方讓我搞了 一段時間才弄好,雖然麻煩不過因為是自己喜歡的主題做得非常開心。

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445082
(2) 主題 / 風格設定:奧斯卡/穩重有質感 drinking smiley
(3) 有無遇到的問題 :圖片置入後沒出現在網頁上,經老師的協助後找到了我的floatleft多設了hight 0,不能夠設高度,不然圖片會不見 smiling bouncing smiley
(4) 製作感想:製作中有比以前快很多,也越來越上手了hot smiley
(5) 製作作業的時間:2小時smileys with beer



Edited 1 time(s). Last edit at 11/23/2017 09:44AM by 1055445082.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445178
 (2) 主題 / 風格設定(色彩設定部份) 用煮圖片顏色白.粉.藍

 (3) 有無遇到的問題 細節調整

 (4) 製作感想 用PS用的很累做網頁真難

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

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445043

 (2) 暗色系、金色

 (3) 我的底色一直調不出顏色, 那裏摸很久,後來全部重貼一次,就好了!

 (4) 做完十分有成就以及眼睛快瞎了

 (5) 六個小時

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445181

 (2) 主題 / 風格設定:屁桃 很有特色 才選的

 (3) 有無遇到的問題 :有很多英文.

 (4) 製作感想 :很好玩

 (5) 製作作業的時間:忘了

作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445007
主題 / 風格設定 : 插畫師介紹 / 簡潔
有無遇到的問題 :沒有
製作感想 :會想學更多更進階的
製作作業的時間 :7小時

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445106

 (2) 主題 / 風格設格:刺青文化/黑暗

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

 (4) 製作感想:越來越複雜需要時間思考

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

(1) 作業網址:http://mepopedia.com/~css106-2a/hw03/hw03-1055445169
 (2) 主題 / 風格設定:跳躍吧! 時空少女 / 青春活潑
 (3) 有無遇到的問題 :只有一點點打錯字的小錯誤
 (4) 製作感想 :學到很多東西
 (5) 製作作業的時間:2個小時

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445091

 (2) 神隱少女

 (3) 很多

 (4) 需要花多一點時間在這個科目

 (5) 2天

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445088

 (2) 主題 / 風格設定: 深海水族館

 (3) 有無遇到的問題 :滑鼠案件一直無法顯示

 (4) 製作感想: 做法繁複

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445016

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

 (3) 有無遇到的問題 沒

 (4) 製作感想 很難

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445088

 (2) 主題 / 風格設定 深海水族館

 (3) 有無遇到的問題 : 按鈕不能轉換

 (4) 製作感想 : 越來越難

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445112
 (2) 主題 / 風格設定 黑白灰

 (3) 有無遇到的問題 有點多

 (4) 製作感想 難啊

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



Edited 1 time(s). Last edit at 11/29/2017 04:44PM by aok15958.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445109

 (2) 主題 / 風格設定(色彩設定部份) tongue sticking out smileyokemon Go/藍白

 (3) 有無遇到的問題 :影像切換的按鈕一開始用不成功,後來順利完成

 (4) 製作感想 :看似很難但照著老師步驟都可以完成

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



Edited 1 time(s). Last edit at 11/29/2017 08:48PM by a5253141.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445055

 (2) 主題 / 風格設定(色彩設定部份) 湖水綠簡單不失設計感

 (3) 有無遇到的問題:有些程式碼沒有印象,要靠中文翻譯
 (4) 製作感想:一開始覺得很難又很麻煩,但做完後還蠻有成就的
 (5) 製作作業的時間 5小時

作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055440074
主題 / 風格設定 : 名柯南介紹 / 卡通
有無遇到的問題 :沒有
製作感想 :會想學更多
製作時間 :3小時



Edited 1 time(s). Last edit at 11/30/2017 09:19AM by 石佳紘.
(編輯記錄)

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445037

 (2) 主題 / 風格設定(色彩設定部份)蠟筆小新介紹/可愛風趣


 (3) 有無遇到的問題 一般有問題都問同學了

 (4) 製作感想 覺得有成就

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445193/

(2) 主題 / 風格設格:KAKAO FRIENDS

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

(4) 製作感想:眼睛很酸

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445010

 (2) 主題 / 風格設格:單色調為主

 (3) 有無遇到的問題:字體轉換很難找

 (4) 製作感想:設定變多容易設錯地方

 (5) 製作作業的時間:一整晚

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445157

(2) 主題 / 風格設格:遊戲討論
(3) 有無遇到的問題:講義慢慢做

(4) 製作感想:好難
(5) 製作作業的時間:1小時快2小時

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445100

(2) 主題 / 風格設定:咖啡廳/咖啡色系

(3) 有無遇到的問題 :上傳作業不太會用

(4) 製作感想 :邊看講義邊做,做完之後超有成就感!!!

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445094

 (2) 主題 / 風格設定:泛藍(輕鬆舒適)

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

 (4) 製作感想 :好...好玩

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

 (1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445046

 (2) 主題 / 風格設定 勞力士手錶/高端

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

 (4) 製作感想 :很累

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

(1) 作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055445196

 (2) 主題 / 風格設定:框影咖啡 可愛

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

 (4) 製作感想 :累死

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