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-2a/hw03/hw03-102xxxxxxx

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

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


2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~web104-2a/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]
===========================================

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

 (2) 風格設定:繽紛彩虹

 (3) 有無遇到的問題:關於按鈕部分研究比較久...會無法作相對應按鍵處理。

 (4) 製作感想:剛開始製作 基本上都算還好 卡在按鈕以及設計大小衡量規格比較久。

 (5) 製作作業的時間:一星期~二星期。

學號:1035445115

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

 (2) 風格設定:白色清淨

 (3) 有無遇到的問題:影片有點看不懂最後有找別的教學影片參考

 (4) 製作感想:這個網頁做很久但做完很有成就感
 (5) 製作作業的時間:8個小時

學號:1035445037

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445217
(2) 風格設定
因為想表達攝影師的專業與神秘感所以選用黑與深咖啡
(3) 有無遇到的問題

(4) 製作感想
光聽課有點不是很懂,但自己做過作業後就有比較熟悉作法
(5) 製作作業的時間
4-5小時



Edited 1 time(s). Last edit at 11/11/2015 10:30PM by 1035445217.
(編輯記錄)

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

(2) 風格設定(色彩設定部份)
清心純樸的感覺,底用綠色代表草地,邊框和字用龍鱗的顏色

(3) 有無遇到的問題 :
放音樂和影片的部分能再說一遍嗎?或用講解or錄個教學影片

(4) 製作感想 :
做完一次後就沒有想像中那麼難,蠻有成就感的

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

學號:1035445214



Edited 1 time(s). Last edit at 11/17/2015 03:48PM by su su.
(編輯記錄)

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

(2) 風格設定



(3) 有無遇到的問題



(4) 製作感想

感覺上跟之前交的差不多,只有一點變化而已。

(5) 製作作業的時間


兩次上課

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

(2) 風格設定(色彩設定部份):清爽的藍色

(3) 有無遇到的問題 :有時有點搞不清楚一些部分如何設定或修改

(4) 製作感想 :可以做自己喜歡的主題覺得比較有趣

(5) 製作作業的時間 :每天做一些

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445127/
 
(2) 風格設定:復仇者

 (3) 有無遇到的問題:割圖很久

 (4) 製作感想:很好玩

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

學號:1035445127

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

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

用主角的顏色來製作,白色也顯得乾淨,藍色也顯得較活潑。

(3) 有無遇到的問題



(4) 製作感想

跟上一個沒有差很多,只是多了圖片的運用。

(5) 製作作業的時間

2個小時



Edited 1 time(s). Last edit at 11/17/2015 01:05AM by 1035445148.
(編輯記錄)

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

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

以黑和暗紅作為主體,表現出較為低調男性的風格。

 (3) 有無遇到的問題

我不會用把選項連結到自己製作的網頁上.....

 (4) 製作感想

用完後覺得很有成就感,可以依自己喜歡的方式進行配置覺得很棒~~

 (5) 製作作業的時間

4~ 5H左右



Edited 1 time(s). Last edit at 11/17/2015 01:09AM by 1035445184.
(編輯記錄)

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

 (2) 風格設定:個人主題顏色設定

 (3) 有無遇到的問題:看影片邊做 還是有一些地方不太了解

 (4) 製作感想:花了一段時間再製作 做完很有成就感
 (5) 製作作業的時間:3個小時

學號:1035445001

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

 (2) 風格設定:簡單

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

 (4) 製作感想:做完時很感動

 (5) 製作作業的時間:五~六

學號:1035445211

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

 (2) 風格設定:霸氣

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

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

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

學號:1035445163

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445025
(2) 風格設定
明亮歡樂活潑
(3) 有無遇到的問題

(4) 製作感想
上課聽不太懂實際做比較有感
(5) 製作作業的時間
7小時

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

 (2) 風格設定:黑白咖啡色 搖滾風

 (3) 有無遇到的問題:不知道為什麼有些東西不能改

 (4) 製作感想:想趕快把一些不能改的部分修好 做更好看

 (5) 製作作業的時間:分開來做蠻久的

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

 (2) 風格設定:黑色優雅

 (3) 有無遇到的問題:遇到不會的部分就參考講義,講義寫的非常清楚

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

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

學號:1035445088



Edited 1 time(s). Last edit at 11/17/2015 02:42PM by 1035445088.
(編輯記錄)

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

 (2) 風格設定:有品味 有趣

 (3) 有無遇到的問題:很難說 其實滿多的 但是還是勉強的做出來了。

 (4) 製作感想:花了很多時間搞好問題好麻煩。

 (5) 製作作業的時間:不知道。

作業網址:
http://mepopedia.com/~web104-2a/hw03/hw03-1035445121

風格設定:
簡單 乾淨

有無遇到的問題:
無問題

製作感想:
很好玩

製作作業的時間:
2小時

學號:1035445121 古茹喩

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

 (2) 風格設定 : 血腥嘔吐

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

 (4) 製作感想 : 很完美很嘔吐

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

 (1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445142/
 (2) 風格設定:熱血

 (3) 有無遇到的問題:很難很複雜
 (4) 製作感想:剛開始製作 基本上都算還好 但後來很多想放棄

 (5) 製作作業的時間:一星期~二星期。

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

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

 (3) 有無遇到的問題 有時圖片跑不出來

 (4) 製作感想 無

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

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

 (2) 風格設定:可愛

 (3) 有無遇到的問題:困難重重,問了很多同學。

 (4) 製作感想:覺得網頁設計真的是一個困難的東西,但又很想做好,之後會越修越好的。

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


1035445061方莉

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

 (2) 風格設定
有點古典的咖啡色當背景 再用亮黃色框框裝飾

 (3) 有無遇到的問題
圖片處理、擺放位置弄了很久,也打了語法不知道是哪裡有問題都弄不好

 (4) 製作感想
覺得變複雜了,需要更多時間,一直有問題,一直修改

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



Edited 1 time(s). Last edit at 11/17/2015 07:40PM by 1035445154.
(編輯記錄)

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

 (2) 風格設定: 乾淨灰的感覺

 (3) 有無遇到的問題: 製作按鈕時一直出錯,以及圖片放置位置一直對不上。

 (4) 製作感想: 雖然過程中很挫折但是經過研究之後就懂了非常有成就感!

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

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

 (2) 風格設定(色彩設定部份):老師範例

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

 (4) 製作感想:有些複雜

 (5) 製作作業的時間: 3~4hr

學號:1035445199

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

(2) 風格設定:玩具總動員 所以顏色都用鮮艷為主

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

(4) 製作感想:有點麻煩,但做完覺得很有成就感

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

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

(2) 風格設定:簡約黑白

(3) 有無遇到的問題:圖片出不來

(4) 製作感想:有點麻煩

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

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

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

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

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

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



Edited 1 time(s). Last edit at 11/24/2015 02:11AM by 張子芸.
(編輯記錄)

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

(2) 風格設定:綠色草原係

(3) 有無遇到的問題:語法分辨困難

(4) 製作感想:學習網頁製作對未來有幫助

(5) 製作作業的時間:一個禮拜

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

(2) 風格設定(色彩設定部份):黑灰紅白

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

(4) 製作感想:抓到訣竅就比較好製作

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

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

 (2) 風格設定: 憂鬱帥氣路線
 (3) 有無遇到的問題:用DW的時候都正常,但做完開往也字都往上跑

 (4) 製作感想: 好難但終於做完還好有老師影片跟同學幫助

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

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

 (2) 風格設定:可愛俏皮

 (3) 有無遇到的問題:語法需多加練習

 (4) 製作感想:做完覺得很有成就感

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

學號:1035445178

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

 (2) 風格設定(色彩設定部份)活潑純樸

 (3) 有無遇到的問題 有

 (4) 製作感想 有些東西還是有點忘記,希望自己快點記起來。

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

學號:1035445169

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

 (2) 風格設定:簡單黃黑

 (3) 有無遇到的問題:一些語法的公式,還有結合PS的切片工具來製作按鈕比較不熟悉。

 (4) 製作感想:一開始作還好,但之後結合了PS來製作按鈕就感覺複雜,再加上一些語法的公式比較記不起來,必須反覆練習才能熟悉。

 (5) 製作作業的時間:一星期~二星期。

學號:1035445070 戰安榮

 (1) 作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035445130/index1.html

 (2) 風格設定:高貴素雅

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

 (4) 製作感想:花了很多時間設計構想,可能因為還不太熟悉,花了很多時間製作。

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

學號:1035445130



Edited 2 time(s). Last edit at 12/01/2015 02:56PM by 1035445130.
(編輯記錄)

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

 (2) 風格設定 還是一樣是黑白簡約風

 (3) 有無遇到的問題 一開始header照片被咖掉,但調整高度就跑出來了

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

 (5) 製作作業的時間

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-103445031
第二網址:file:///G:/wed%20design/hw03-1035445031/index.html
 (2) 風格設定 :黑白都市風格

 (3) 有無遇到的問:圖片大小的問題不好用

 (4) 製作感想:鍾漢良好帥!!!!!!!!!!

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

老師我發現我都沒辦法連耶˙A˙

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

(2) 風格設定:星空

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

(4) 製作感想: 無

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


視傳二A 10354445103

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445160/
 (2) 風格設定(色彩設定部份)(加分)
使用紅白黃,在戰爭中的炮火來勢洶洶,用紅色做基底,黃色代表螢火蟲的亮光,白色代表兄妹兩人的天真

 (3) 有無遇到的問題 變難了按鈕的部分,有另外找教學

 (4) 製作感想 頗累的

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

(1) 作業網址: http://mepopedia.com/~web104-2a/hw03/hw03-1035445055/
(2) 風格設定(色彩設定部份)(加分)
(3) 有無遇到的問題
(4) 製作感想
(5) 製作作業的時間

2.色彩是以暗色和亮色呈現對比的效果,希望能夠給人比較清楚、簡潔明瞭的感覺。
3.經過作業二的練習後製作過程就有比較好。
4.感覺比作業二呈現的畫面更來的清楚許多。
5.製作的時間大概5~6小時左右。

學號:1035445055

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

(2) 風格設定(色彩設定部份):藍色

(3) 有無遇到的問題 :覺得難,打開都開不起來
(4) 製作感想 :要再多加油

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