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

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

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


2. 上傳至FTP

3.回覆本篇文章

 (1) 作業網址: http://mepopedia.com/~web104-2b/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-2b/hw03/hw03-1035445209
(2) 風格設定(色彩設定部份):主體是Mandora蔓陀蘿,所以都用Mandora的圖片,顏色設定在深咖啡色。
(3) 有無遇到的問題:無
(4) 製作感想:加了音樂感覺就像是在Mandora的世界裡,希望可以再學到更多。
(5) 製作作業的時間:2小時左右

作業網址: [url=http://mepopedia.com/~web104-2b/hw03/hw03-1035445176/]http://mepopedia.com/~web104-2b/hw03/hw03-1035445176/[/url]

風格設定:主題是美國實境秀Top model,所以我想大部分以黑白灰當作網頁色彩,有簡潔俐落時尚的感覺

有無遇到的問題:無

製作感想:更進一步學會了網頁設計,從老師的講義裡摸索學習到怎麼用按鈕連接到下一頁,嘗試後也順利地可以點及按鈕連到下一頁~非常有成就感~

製作作業的時間:3小時

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445155
(2) 風格設定(色彩設定部份):主體是淺灰當背景,圖片是用卡通的圖片
(3) 有無遇到的問題:對於有些內文的設計還是比較不熟
(4) 製作感想:感覺內文的部分變的比較難了,製作時有花比較多的時間比較難,
但看過老師的影片後就可以完成,完成後也覺得非常的有成就感。
      
(5) 製作作業的時間:課外在加3,4 小時左右

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445107
(2) 風格設定:顏色設定是黃色。
(3) 有無遇到的問題:無
(4) 製作感想:又學習到了一項,覺得可以再進一步。
(5) 製作作業的時間:2.5小時左右

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445194
(2) 風格設定:我選用黑白灰三色。大面積的白色配上少量黑色,既大方又美觀。
(3) 有無遇到的問題:無
(4) 製作感想 :加入圖片感覺很豐富,對之後的課程也很期待
(5) 製作作業的時間 :約2個半小時



Edited 1 time(s). Last edit at 11/04/2015 11:07AM by 1035445194.
(編輯記錄)

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

 (2) 風格設定(色彩設定部份)(加分)
這次主體用比較舒服的咖啡色系+米色來做設定

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

 (4) 製作感想
感覺快要完成一個完整的網頁了很高興

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

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445068/
(2) 風格設定(色彩設定部份):人物是可愛活潑又鮮豔的色調配合人物色調以溫馨的橘色做為主體色
(3) 有無遇到的問題: 放的圖片出不來
(4) 製作感想: 看到自己做出一個自己喜歡的網頁覺得好開心很有成就感,會有動力想繼續學習並把網頁做得更好。
(5) 製作作業的時間:4小時左右

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

 (2) 風格設定(色彩設定部份)(加分) :以我家的寵物花紋作為設計依據,呈現出可愛風格
 
(3) 有無遇到的問題 :如何將圖片置中

 (4) 製作感想 :我覺得很有趣,網頁放了圖片之後就更完整了

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

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445125/
(2) 風格設定(色彩設定部份):主體是馬來摸插畫,顏色設定在黑白色之間色。
(3) 有無遇到的問題:無
(4) 製作感想:平常在看網頁的時候都沒想這麼多製作網頁的辛苦,而今天體驗到製作網頁的過程。
(5) 製作作業的時間:3小時左右

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445104
(2) 風格設定(色彩設定部份):顏色設定在深藍色與棗紅色。
(3) 有無遇到的問題:無
(4) 製作感想:越來越有完整網頁的樣子了,希望能再多學一些其他的功能。
(5) 製作作業的時間:2.5小時左右

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1045245001
(2) 風格設定:用白灰營造現代感,清新簡潔,主題:動畫,家庭教師
(3) 有無遇到的問題:很多
(4) 製作感想:很難,但成功後很有成功感
(5) 製作作業的時間:4小時左右



Edited 1 time(s). Last edit at 11/04/2015 05:48PM by 1045245001.
(編輯記錄)

(1) 作業網址:
http://mepopedia.com/~web104-2b/hw03/hw03-1045245002
(2) 風格設定:
背景改用了較繽紛的老鼠圖案,不過主版面仍然保持使用跟老鼠的毛色較接近的灰藍色系。
(3) 有無遇到的問題:
最主要還是header那條空白消除不了,已經設定了header的css font size為0,而在網頁上似乎也看不到了,可是如果在Dreamweaver中打開,則仍然有大概1px的空白位置。
(4) 製作感想:
很喜歡製作網頁,在遇到問題又解決時很有成功感,現在唯一問題只有那條白邊讓我非常苦惱,雖然在網頁上看不到(chrome, firefox, IE),但是我沒能試完所有的瀏覽器,所以不知道會否在其他瀏覽器中看到那條白邊。
(5) 製作作業的時間:
3個小時



Edited 1 time(s). Last edit at 11/04/2015 06:32PM by 1045245002.
(編輯記錄)

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

(2) 風格設定(色彩設定部份):主體是(插畫家;田中shen),顏色設定選擇以墨綠色搭配相近的灰階層次。

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

(4) 製作感想:在製作過程當中雖然很難,但也體驗到過程中的樂趣與學習。

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

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445056
(2) 風格設定(色彩設定部份):這次的主題是一部中國戲劇<古劍奇譚>它的色彩基本為藍青色,淡色系為主,所以使用了一些淺色的色調。
(3) 有無遇到的問題:無
(4) 製作感想: 做自己喜歡的主題很棒,我很喜歡這一部作品,盈滿中國古代的氣息,不過對於一些設定上還是有點懵懂,希望能快點變通。
(5) 製作作業的時間:1小時半左右

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

(2) 風格設定 :以純白為底色襯出宮崎駿作品的多彩與單純的童真,其中邊框與按鈕選用的綠色(#779c57)
是他的動畫中最常出現的、大自然的綠色(顏色吸取自圖片中的樹)

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

(4) 製作感想 :內文的部分變複雜了,製作時有遇到小困難,但看過講義後就可以完成,完成後也很有成就感。
      而且完成按鈕後更有成就感。

(5) 製作作業的時間 :上課時間外加1-2小時

3.回覆本篇文章

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

 (2) 風格設定動漫風,以藍色為主
(色彩設定部份)(加分)

 (3) 有無遇到的問題
1.body內的文字設定好之後,h1、h2、h3就只會有大小的改變,顏色改不了?
2.網頁至中後,兩側白色的區塊設定是否在weppen調整?
 (4) 製作感想 爽

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

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

(2) 風格設定:以黑色襯托MINI車子本身的鮮豔色彩

(3) 有無遇到的問題:剛開始圖片在設定尺寸時沒有注意到單位

(4) 製作感想:比前兩個作業要更加的困難、複雜,但完成這項作業讓我更期待接下來的作業!

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

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


(2) 風格設定:因為看了"你看起來很好吃"這個卡通之後覺得很可愛,所以選擇用它來當主題
因為恐龍生存在大自然裡面,所以風格選用藍、綠色調來搭配


(3) 有無遇到的問題:有,可是都解決了 grinning smiley

(4) 製作感想:剛開始做這個作業的時候覺得好複雜,
但是一步一步慢慢做,弄好的時候看到自己的作品有一點小小成就感

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

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

(2) 風格設定:以衣服的風格和主題熊來呈現

(3) 有無遇到的問題:剛開始圖片在設定尺寸時沒有注意到單位

(4) 製作感想:比之前作業難了一些,但完成這項作業讓我發覺這是個能發揮自己創意的作業!

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

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

 (2) 風格設定 黑魔女這部電影的色彩給我的感覺是黑色與藍色

 (3) 有無遇到的問題 圖片置入不太懂
背景圖片的大小不會訂

 (4) 製作感想 語法變多了很容易看錯行
常常放錯語法

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

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

 (2) 風格設定 我是用宮崎駿的動漫去呈現,整體偏用藍色調。

 (3) 有無遇到的問題 按鈕對不了格子

 (4) 製作感想 比之前多了很多語法,但網頁也越來越像一般在網路上看到的那樣了


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

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445086
(2) 風格設定(色彩設定部份):以傳統日式風格為主,主體是以浮世繪來呈現的,內容也主要在介紹浮世繪的起源,作品等等。
(3) 有無遇到的問題:無
(4) 製作感想:感覺有很多細節要自己去發現,雖然過程中出了很多狀況,但幸好最後還是有弄出來。
(5) 製作作業的時間:3小時半



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

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

 (2) 風格設定:以黑白為主

 (3) 有無遇到的問題 :語法方面

 (4) 製作感想 :剛開始花了很多時間做,結果還是做錯,可是慢慢就習慣了,也慢慢明白了。

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

1035445131

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

(2) 風格設定:因為這是在介紹一個關於鞋子的品牌,所以header和footer的部分就用他們鞋子的材質表現,
整體顏色的部分運用他們經典褐色款的鞋子做搭配。

(3) 有無遇到的問題: 在做的過程中,都有一些小問題,不是語法打錯就是少打,中間花了一些時間在檢查。

(4) 製作感想: 在這次的作業當中,學習到了很多讓網頁美化的語法,越做越有成就感,從中發現很多樂趣!

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

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

 (2) 風格設定 時尚 normcore風格

 (3) 有無遇到的問題圖片剛開始不能置中

 (4) 製作感想 還有很多語法想學,可以做一個真正的網頁


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

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

(2) 風格設定 : 我使用黑白與深咖啡,乾淨簡潔的感覺
(3) 有無遇到的問題 : titile_bar 的style 設定總是出問題
(4) 製作感想 : 把自己所喜歡的東西製作成網頁很有成就感,雖然製作過程有點辛苦~
(5) 製作作業的時間 : 3小時

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

(2) 風格設定:先照老師所說的做。

(3) 有無遇到的問題:有,因為不是很明白該如何去做,所以花了很長的時間。

(4) 製作感想:就是"哇!怎麼變得這麼難啊!"

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

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445098
(2) 風格設定: 我選擇了歐洲各個景點,想要一一介紹各個景點,整個網站的顏色取湖水綠及天藍色,想要有一種無憂無慮的感覺。
(3) 有無遇到的問題:無
(4) 製作感想 :看到自己的網站慢慢的建造出來很有成就感。
(5) 製作作業的時間 :3小時半

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445191
(2) 風格設定:像本身卡通的一樣,能有簡單又可愛的感覺,因為圖片色彩已經很豐富了,所以其餘的字以及線框部分則是用簡單的黑白色。
(3) 有無遇到的問題:沒有
(4) 製作感想 : 非常有趣,和前兩個作品完全不一樣,有了圖片真的豐富很多,雖然因此製作的難度和時間增加了,但做完非常有成就感!
(5) 製作作業的時間 :約5個半小時

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

(2) 風格設定(色彩設定部份):主體是小王子,顏色設定選擇以小王子還有深卡其色。

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

(4) 製作感想:雖然有一部份亂到自己不知道在幹嘛,但是做完之後覺得很有成就感。

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

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

(2) 風格設定(色彩設定部份):主體是魔髮奇緣,顏色設定紫色為主。

(3) 有無遇到的問題:不知道如何放遊戲在網頁上直接玩還有在切片的時候一直出現問題,不過後來整個重作就好了(怪?)

(4) 製作感想:背景的透明度突然自己摸索到覺得很開心

(5) 製作作業的時間:差不多5個小時(加上摸魚 spinning smiley sticking its tongue out

劉郁婕 1035445170

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445014
(2) 風格設定(色彩設定部份):主要是以黑白色為主,風格想用一種空軍的感覺。
(3) 有無遇到的問題: 有時會忘記那一個英文是對應那一區塊。
(4) 製作感想: 覺得做完很有成就感,因為覺得滿難的,只是配色方面覺得有待加強。
(5) 製作作業的時間:3小時左右

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

 (2) 風格設定 主要以黑跟紅為主,主題是魍魎之匣

 (3) 有無遇到的問題 忘記標題色塊那部分

 (4) 製作感想 還有些要研究下

 (5) 製作作業的時間 沒在計


1035445065

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445152
(2) 風格設定(色彩設定部份):黑白和酒紅色,配合照片的顏色
(3) 有無遇到的問題:文繞圖的地方
(4) 製作感想:很有趣
(5) 製作作業的時間:3-4小時

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

(2) 風格設定:主要以詼諧的顏色,來襯托低調的品味風格,跟有型的Nick大叔做個呼應。

(3) 有無遇到的問題: 遇到很多問題,會少做一點步驟,然後又要花時間再去捉摸,快做好的時候電腦又當掉。

(4) 製作感想: 做這個作業的時候想很多,起步比較困難,但做完相當有成就感。

(5) 製作作業的時間 : 4至4.5個小時


1035445032 林以真

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

(2) 風格設定(色彩設定部份):想要以介紹某品牌商品爲主

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

(4) 製作感想:目前正處於構思自己設定主題網頁的基本構架,準備進入下一階段的大綱設計及資料收集

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

作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445059/

風格設定:主題是美國WWE 使用比較美式的方式去做。

有無遇到的問題:無

製作感想:做起來非常好玩,也學會很多東西。

製作作業的時間:3小時

(1) 作業網址:http://mepopedia.com/~web104-2b/hw03/hw03-1035445050/#
(2) 風格設定:我的童年─真珠美人魚
(3) 有無遇到的問題:背景圖片的大小設定好難抓尺寸
(4) 製作感想:最近忙於校慶拉拉舞,所以這次作業做得很粗糙,還請老師見諒,我會趕上的~~~~
(5) 製作作業的時間:三小時

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

 (2) 風格設定 簡潔俐落的黑白色

 (3) 有無遇到的問題 有很多w 有時候設定好很多東西跑掉 在改就亂掉了
很長重做Q_Q

 (4) 製作感想 感動得要哭了 做出來了...

 (5) 製作作業的時間 保守估計10小時 (零零散散因該不只...

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1035445074
(2) 風格設定(色彩設定部份):主體是草間彌生,顏色設定在紅白。
(3) 有無遇到的問題:有
(4) 製作感想:
一開始不知道如何製作按鈕 還有怎麼連結
最後搞清楚了
也製作好了
滿有成就感的
(5) 製作作業的時間:3小時左右

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

 (2) 風格設定(色彩設定部份)(加分) 以咖啡色為主

 (3) 有無遇到的問題 在標題設定卡了很久

 (4) 製作感想 這次把主要卡到的問題解決了,下次一定可以做得更順利

 (5) 製作作業的時間 四、五個小時

1035445071 陳郁琳

(1) 作業網址:http://mepopedia.com/~web104-2b/hw03/hw03-1035445071
(2) 風格設定:童趣、溫馨
(3) 有無遇到的問題:無
(4) 製作感想:因為要與後面作業做連結,主題內容思考了很久,風格也是一改再改,拖延蠻多時間的。
(5) 製作作業的時間:大約2.3小時



Edited 3 time(s). Last edit at 11/19/2015 03:00AM by 1035445071.
(編輯記錄)

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

 (2) 風格設定(色彩設定部份)因照片色彩鮮明引人注目,利用黑白灰來配色。(加分)

 (3) 有無遇到的問題 :其他的那一欄一直無法貼齊右邊

 (4) 製作感想 :完成度有越來越高了很有成就感,但有時候還是會卡住

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



Edited 1 time(s). Last edit at 01/08/2016 12:17AM by yung yi.
(編輯記錄)

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

 (2) 風格設定(色彩設定部份)
這次主體用府和龍貓身上大部的灰色來作主色調

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

 (4) 製作感想
感覺越來越熟悉網頁了,很感動

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

1015445276 - 王星宇

(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-1015445276
(2) 風格設定:灰色
(3) 有無遇到的問題:無
(4) 製作感想:可以再多加學習
(5) 製作作業的時間:幾個小時左右