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

Advanced

[作業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/~css106-2b/hw03/hw03-105xxxxxxx

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

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



2. 上傳至FTP

3.回覆本篇文章

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

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

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

(1) 作業網址: http://mepopedia.com/~css106-2b/hw03/hw03-1055445068
 
(2) 主題 / 風格設定:魔物獵人WORD(世界)
 
(3) 有無遇到的問題 :時間被排滿了...要升天了(頭頂冒煙

(4) 製作感想:很讚啊...想到以前高中弄的鬼東西

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

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

(2) 主題 : HUNG CHI CHENG ( 介紹自己 )

(3) 風格設定 ( 色彩設定部份 ) : 以藍白為主,風格簡單文青感 cool smiley cool smiley cool smiley

(4) 有無遇到的問題 : 曾有圖放上去無法連結,但最後問了同學也完成它了

(5) 製作感想 : 我覺得我做了這個網站可以讓更多人認識我是誰 !! thumbs upthumbs upthumbs up

(6) 製作作業的時間 : 2 至 3 天



Edited 1 time(s). Last edit at 11/16/2017 01:30AM by 1055445056.
(編輯記錄)

(1)http://mepopedia.com/~css106-2b/hw03/hw03-1055445146

(2) 主題 / 風格設定:本田重機
 
(3) 有無遇到的問題 :期中周超忙所以網頁很晚才做

(4) 製作感想:對本田重機很有興趣所以不錯

(5) 製作作業的時間:106/11/16凌晨2點



Edited 1 time(s). Last edit at 11/16/2017 11:53AM by kevin613.
(編輯記錄)

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

(2) 主題 / 風格設定:航海王One Piece / 以"大海"的藍為主色系,搭配簡單淡藍為區域色,以及檸檬黃作為襯托的底色。

(3) 有無遇到的問題 :關於連結的部分需要多注意(..//

(4) 製作感想:小細節要更加注意,以免發生重改的小悲劇,不過經由老師詳細的說明,許多問題都解決了~對於製作自己喜愛主題的網頁,真的很開心!

(5) 製作作業的時間:每天2小時左右,3天完成



Edited 1 time(s). Last edit at 11/16/2017 12:51PM by 1055445086.
(編輯記錄)

作業網址: http://mepopedia.com/~css106-2b/hw03/hw03-1055445026

 (2) 暖暖色彩鮮明的歡樂毛毛毯

 (3) 後來全部重做就沒事了

 (4) 窩截了我在網頁上預覽的圖給朋友看.他以為是真的在賣毛毛毯網想要買.窩覺得很開心

 (5) 非常之久久久



Edited 2 time(s). Last edit at 11/16/2017 12:29PM by 1055445026.
(編輯記錄)

(1) 作業網址: http://mepopedia.com/~css106-2b/hw03/hw03-1055445095
 
(2) 主題 / 風格設定:globe/復古電音
 
(3) 有無遇到的問題 :目前尚無。

(4) 製作感想:雖然很複雜,但還是有他的樂趣呢!

(5) 製作作業的時間:不含課堂時間約3小時。

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

(2) 主題 / 風格設定(色彩設定部份) 想呈現有質感的閱讀空間/大理石 簡潔風

(3) 有無遇到的問題 字尾沒有辦法對齊(眼神死

(4) 製作感想 很開心但是找不到原因的時候會很煩躁XD

(5) 製作作業的時間 前前後後改了快一個禮拜...

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

(2) 主題/風格設定(色彩設定部份):認識貓咪/穩重色調

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

(4) 製作感想:很棒

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

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

(2) 主題 / 風格設定
恐懼集散地 / 黑暗

(3) 有無遇到的問題

(4) 製作感想 越做越上手

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

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

(2) 主題 / 風格設定:鬼門圖文

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

(2) 主題 / 風格設定:鄧紫棋官方網站

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

(4) 製作感想:我覺得有影片跟講義可以看,做起來很容易上手,而且可以做自己想做的主題,讓我能夠很愉快的享受製作網頁的過程

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



Edited 1 time(s). Last edit at 11/22/2017 11:18PM by SCY.
(編輯記錄)

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

 (2) 主題 / 風格設定:天月 niconico 歌手

 (3) 有無遇到的問題 :看著影片做大部分都ok,小部分會卡關。

 (4) 製作感想 :容易打錯就悲劇了,做完之後很棒

 (5) 製作作業的時間 :好幾天的凌晨(夜貓子)



Edited 1 time(s). Last edit at 11/23/2017 04:57AM by jolin82145.
(編輯記錄)

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

 (2) 主題 / 風格設定:歌手まふまふ/主要以灰白為主

 (3) 有無遇到的問題 :常常打錯程式碼導致錯誤發生

 (4) 製作感想 :做完之後很有成就感

 (5) 製作作業的時間 :超過20hr

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

(2) 主題 / 風格設定:我的頻道官方網站

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

(4) 製作感想:很有趣,也能介紹我的頻道

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

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

(2) 主題 : B1A4 /

(3) 風格設定 ( 色彩設定部份 ) : 沉穩、冷靜感

(4) 有無遇到的問題 : 應該沒問題吧

(5) 製作感想 : 很有趣

(6) 製作作業的時間 : 2~3天

(1) 作業網址: http://mepopedia.com/~css106-2b/hw03/hw03-1055445176/
 
(2) 主題 / 風格設定:我的旅遊館
 
(3) 有無遇到的問題 :創舞拖到了

(4) 製作感想:很讚啊...很好玩 但是一堆英文

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

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

(2) 主題 / 風格設定:因為主題是巧克力,使用黑色與金色為主比較有質感

(3) 有無遇到的問題:連結全錯...改得好麻煩

(4) 製作感想:越來越長,眼睛看得更花了

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

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

(2) 主題 / 風格設定:抹茶小館

(3) 有無遇到的問題 :網址點進去沒有圖片

(4) 製作感想:有影片跟講義做起來比較容易,但每次做作業的時間很長

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



Edited 3 time(s). Last edit at 11/28/2017 01:42AM by 1055445023.
(編輯記錄)

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

 (2) 主題 :動畫介紹

 (3) 有無遇到的問題 :重作之後問題就修改好了

 (4) 製作感想 :還蠻有趣

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

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

 (2) 主題:muse 樂團的介紹 / 灰階(色彩設定部份)

 (3) 問題:有,但都解決了

 (4) 製作感想:感覺不錯

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



Edited 1 time(s). Last edit at 11/25/2017 03:30PM by onfriend.
(編輯記錄)

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

 (2) 主題 :京都散步

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

 (4) 製作感想 :比較熟悉

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

 



Edited 1 time(s). Last edit at 11/27/2017 05:48PM by 湯劭崴.
(編輯記錄)

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

(2) 主題 : 陳奕迅

(3) 風格設定 ( 色彩設定部份 ) : 以黑白灰為主,風格簡單簡約乾淨
(4) 有無遇到的問題 : 無

(5) 製作感想 : 我覺得我做了這個網站可以讓更多人認識陳奕迅 多支持他

(6) 製作作業的時間 :4天

http://mepopedia.com/~css106-2b/hw03/hw03-1055445092
(2) 主題 / 風格設定:可愛
 
(3) 有無遇到的問題 :很多

(4) 製作感想:好玩

(5) 製作作業的時間:有點久.

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

 (2) 主題 :南方公園

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

 (4) 製作感想 :比較熟悉

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

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

 (2) 主題 :我們這一家

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

 (4) 製作感想 :比較熟悉

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

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

 (2) 主題 :飛天小女警

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

 (4) 製作感想 :比較熟悉

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

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

 (2) 主題 / 風格設定(色彩設定部份) :真珠美人魚/藍色/海洋

 (3) 有無遇到的問題 :作好久好累

 (4) 製作感想 :同上

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

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

 (2) 主題 / 風格設定(色彩設定部份) 五月天

 (3) 有無遇到的問題

 (4) 製作感想 不太会做

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

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

(2) 主題/風格設定(色彩設定部份):醜比頭主題/配色

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

(4) 製作感想:目前為止最有成就感的作業

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

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

(2) 主題/風格設定(色彩設定部份):故宮

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

(4) 製作感想:看的頭都痛了

(5) 製作作業的時間 :好幾天 有時後摸好久 也沒有進度 最後只好又關了

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

 (2) 主題 / 風格設定 樂團 /黑藍白

 (3) 有無遇到的問題 解決了

 (4) 製作感想 ps的設定有點麻煩

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

(1).作業網址 :

http://mepopedia.com/~css106-2b/hw03/hw03-1055445176


1.網頁主題:菇菇巢穴

配色與風格設定: 遊戲

2.有無遇到的問題?


3.製作感想

4.製作作業的時間 讚