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

Advanced

[作業03] HTML與CSS練習-1.資料整理--以DIV製作表格效果。 2.其他頁面完成

1. 請以以下兩個講義完成至少兩頁


請參考
[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果:
http://mepopedia.com/forum/read.php?804,44612

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探:
http://mepopedia.com/forum/read.php?804,44848

[hr]

1. 作業說明

1.延續作業02,繼續完成至少另兩頁,
2.製作:(1)完成首頁,(2)設定滑鼠移過的效果,其他頁面將陸續完成。(3)適當加入CSS3的效果

[hr]

2. 作業步驟

1.參考範例
http://mepopedia.com/~jinjin/web/hw04a/works.html
http://mepopedia.com/~jinjin/web/hw05a/link.html
2.延續作業02的內容
3.請以設計質感與創新設計為主要考量
4.將HTML與CSS語法分別貼上後,修改HTML與CSS語法。
5.將資料夾命名為 hw03-學號,以FTP上傳至hw03資料夾 ,請延續作業二之內容存放於同意資料夾,至少共三個html檔案。
作業網址為http://mepopedia.com/~css105-2c/hw03/hw03-1045445XXX/works.html (此檔名可自行設定)

並請回覆:

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445XXX
(2)本頁設計重點:
(3)製作心得:
學號

[hr]
請於規定時間準時繳交作業,逾期不後。
[hr]

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445117

(2)網頁設計重點:這次將版面稍做更改,想嘗試不同風格,因此在頁面上力求簡潔,頂圖色彩配合
內容而有所改變,不同頁面使用對應色彩,使網頁分明,色彩豐富,利用背景留白, 並搭上希臘景
點照片,用照片凸顯主題,增添畫面豐富性,因應不同風格,將文字改為英文, 藍圖白字,整體呈
現舒服和諧的氛圍。

(3)製作心得:因上次的練習,這次修改較為順手,比起上次風格,顯得簡潔許多,拿掉裝飾後,就
想說單純用顏色玩版面,一樣的版型,一樣的內容,頂圖和導覽列就足以使頁面有不同變化, 同樣
的主題,不同的嘗試,也挺有意思,但是我希望能將之前的中文網頁和這個網頁互相連結, 做成中
英模式,只是不太清楚要如何連結,有上網找過臺灣博物館的網頁,試了幾次未達效果, 還請老師
指導,謝謝您。



Edited 4 time(s). Last edit at 03/24/2017 11:04PM by 松本.豪.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445018
(2)本頁設計重點: 可愛繽紛的兒童感
(3)製作心得: 第二頁用了一個晚上結果才發現那麼簡單哈哈哈

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445189
(2)本頁設計重點: 這次我把其他頁面完成了,然後加了一些小裝飾性的元素,讓我的網頁不會因為沒有底圖變得太無聊。活動花絮的表格是用圖+字去完成的,看起來也比較豐富一些。
(3)製作心得: 這次沒有遇到什麼大問題,但是我發現如果圖太大會跑不出來,還有用同一個detail_box clearfix 的話滑鼠轉換影像會離家出走,幸好我的智慧解決這一切哈哈哈哈哈!spinning smiley sticking its tongue out

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445212
(2)本頁設計重點:設定滑鼠移過的效果,當滑鼠碰到標題時可以換個圖案,讓人印象深刻。
(3)製作心得:這次的比第二次作業還簡單很多,所以沒什麼困難。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445102/index.html
(2)本頁設計重點: 有趣的豆豆先生,用綠色來做配色
(3)製作心得:有趣好玩。



Edited 1 time(s). Last edit at 04/04/2017 06:06PM by 1045445102.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445015
(2)本頁設計重點: 上次做完三頁 這次把剩下的兩頁給做完~~~加了一些基本的元素還有自己喜歡的模式 使整體一致 更為舒暢。
(3)製作心得:作業3比作業2簡單很多 也學到了一些不同的技巧 也使畫面美感更加舒適。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445201
(2)本頁設計重點:設定現代服飾進步的感覺
(3)製作心得:沒什麼困難。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445036
(2)本頁設計重點:把上次沒做好的連結跟內容弄完整了,把其他頁面弄齊
(3)製作心得:
這次又把一些小細節弄好,把其他頁面弄齊,
希望自己能更細膩一點,找個顏色可以跟紫色搭或者讓畫面變豐富一點,
個人覺得現在還很單調,自己有些不喜歡拉,期中前會把它改完美!smiling bouncing smiley

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445180
(2)本頁設計重點: 介紹蔬菜一下 想不到要做啥
(3)製作心得: 看了這麼久的菜蠻可怕的

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445105
(2)本頁設計重點: 主要是以介紹美食為主 因為那家餐廳的名稱叫做粉雪 所以我喜以它的名稱跟設計一起做相對地呼應,整體帶給人舒適,輕柔的感覺,海有做些許的雪花碎片來拼湊成背景.
(3)製作心得: 雖然過程中遇到了許多困難,有種想那藝設計但卻執行不了的那種感覺,但最終還是完成了這項艱難的挑戰!做完的那一刻再來看看自己的成果真的會很有成就感!
謝謝老師那麼有耐心及細心的一步一步指導我們!

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445033

(2)本頁設計重點:將課程進度完成~(重點) 繼續我的可愛風....

(3)製作心得: 說實在的不難,只不過時間要花多一點,畢竟需要新增2頁了,繼續加油~

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445069
(2)本頁設計重點:
天外奇蹟劇情的介紹,有劇照唷~

(3)製作心得:
做網頁,耐心很重要!
我做完了 我好棒!

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1025445061
(2)本頁設計重點:
蠟筆小新的作品說明和角色介紹
(3)製作心得:
雖然遇到一些小困難但堅持著做完了,覺得很開心

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445141
(2)本頁設計重點:
twitch嗯這樣

(3)製作心得:
嗯還可以大概吧

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445045

(2)網頁設計重點:結合專輯的顏色與配色,而製作出這個網頁
(3)製作心得:經過這幾次的作業練習,網頁變得沒有想像中的那麼困難,也慢慢看得懂一些與法但還是有些小地方不知道怎麼改。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445009
(2)本頁設計重點:
介紹主要人物喔~
裡面有正太萌妹跟大帥哥~
(3)製作心得:
超級開心的拉
雖然做完作業二 就完全不想動作業三
但是做完作業二之後覺得 挖賽 這次怎麼這麼快!!
我還來回檢查了一下 是不是有沒用到的 嚇死我ㄌ

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445081
(2)本頁設計重點:
介紹水墨畫
(3)製作心得:
開始上手了 做的速度開始變快囉~ 排版還要再加強

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445084/link.html
(2)本頁設計重點:讓大家多了解多肉植物
(3)製作心得:覺得很有趣!!



Edited 1 time(s). Last edit at 04/05/2017 05:05PM by 1045445084.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445135

(2)網頁設計重點:這次嘗試和服的主題,用了以前從沒用過的藍 紫色調,
整體上算是偏向簡單的風格,因為有使用了和服的花樣,所以不會過於單調.
我覺得還不錯?

(3)製作心得: 這次的作業有比以前都難許多,讓我花了許多時間在修改上面,
因為想要做別的圖片呈現方式,所以有上網找語法,成功用好的時候真的很感動~
真的覺得很有挑戰性! 謝謝老師的教學.

(1)作業網址: http://mepopedia.com/~web104-2c/hw03/hw03-1031045445195
(2)本頁設計重點:绍兴的建制改革,因为实在想不出做什么
(3)製作心得:开始以为会很难,实际做起来感觉其实还可以也不是很难。



Edited 1 time(s). Last edit at 04/12/2017 11:30PM by 1045445195.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445003

(2)本頁設計重點:
紅黑配色為主調,傳達出一種恐怖血腥的氛圍

(3)製作心得:
突然發覺之前一步一步慢慢學到的東西比想像得多,很慶幸當時在老師教學時有按部就班的學習,感謝老師ヾ(*´∇`)ノ

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445042

(2)本頁設計重點: 讓頁面看起來更舒適

(3)製作心得: 如果沒有講義感覺做不出來xDD
雖然很複雜很繁瑣...但還是滿有趣的,謝謝老師的教導!

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445198
(2)本頁設計重點: 文字照片
(3)製作心得: 無
學號 1045445198

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445174
(2)本頁設計重點:把其他頁面完成,並且放熱影片和表格
(3)製作心得: 這次不算難>grinning smiley<

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445108
(2)本頁設計重點:黑白
(3)製作心得: 難
學號 1045445108

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445057
(2)本頁設計重點:主要登場角色的介紹
(3)製作心得:其實一邊回味自己愛看的動畫一邊作網頁還不錯,只是用不好的時候真的會很想扁人,整體來說目前對自己做的蠻滿意的!

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445217/
(2)本頁設計重點: 整體以藍色為主,配合主角這次的專輯顏色來做搭配
(3)製作心得: 越做越順手了耶太棒了~~~~

1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445051/index.html

(2)網頁設計重點:版面更改為大整體,訂定方向,方便簡潔。

(3)製作心得:一次次的練習,使我對網頁的了解更上一成樓。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445138
(2)本頁設計重點: 用黑色當基底色,粉紅色當配襯
(3)製作心得: 有點複雜但不難



Edited 1 time(s). Last edit at 04/13/2017 04:17AM by 1045445138.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445162

(2)本頁設計重點:
照片的質感跟帶給人有設計風格的網站、而不是單純放圖解決了事。

(3)製作心得:
因為對版面編排跟圖片擺放方式一直拿不定,所以時間都琢磨在修改CSS版面和調整協調度還有找放的內容花了很多時間><><><
希望這不只是一個作業還是一個拿得出去給別人看的''作品!''

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445030
(2)本頁設計重點:一慣的粉嫩色調
(3)製作心得: 這次花了許久時間完成,但是不知道為甚麼字一直跑掉,找不到是哪裡錯了><

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445120
(2)本頁設計重點: 可愛繽紛的兒童感
(3)製作心得: 希望可以學到更多網頁的東西♥

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445027
(2)本頁設計重點: 簡單簡潔的音樂介紹,含有片頭跟片尾曲
(3)製作心得: 音樂這頁用了作業3的表格去用,看起來很簡潔,讓我做的時候沒花多少時間。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445150

(2)本頁設計重點:黑藍色調

(3)製作心得:比起作業2,這個做的比較順手

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445099

(2)本頁設計重點: 單元劇系列-介紹每一齣戲劇的故事大綱,另外設定錨點超連結。
演員陣容-主要的演員和精彩客串兩部分

(3)製作心得: 一開始想到要做五個頁面就覺得很煩燥,不過越做越上手

學號 :1045445099

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445072
(2)本頁設計重點:修正一些沒做好的小bug
(3)製作心得:
思考排版位子,還有配色得處理................得心應手啊!
只是每次都被CSS搞得快發瘋!為何就不能聽話一點置中呢?

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1025445159
(2)本頁設計重點: 為這位傳奇搖滾人物作介紹
(3)製作心得: 其實做完這個作業之後 更了解這位歌手之外 也學了一些網頁的程式及編排
學號 1025445159

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445186
(2)本頁設計重點:替這位歌手作完整的說明
(3)製作心得: 做得辛苦 但還不夠完整
學號 1045445186

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445019

(2)本頁設計重點:背景有音樂、背景透明、下方影片

(3)製作心得: 研究音樂怎麼放花了一些時間,背景透明的效果我蠻滿意的,整體想要營造出簡潔乾淨感

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445129
(2)本頁設計重點:將上次沒做完的都做完了~~~新增了許多重要資訊
(3)製作心得:比作業2簡單很多!這次很快就完成了。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1015445216
(2)本頁設計重點: 以黑灰白的色系去對應遊戲給人的感覺
(3)製作心得: 用自己有玩的遊戲去整理,特別的開心



Edited 1 time(s). Last edit at 04/20/2017 02:05AM by sp39678910.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445177
(2)本頁設計重點:上一次的半成品部分補齊
(3)製作心得:比之前的簡單了啦~~~~~~~~~~~

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445006
(2)本頁設計重點: 多加了些喜歡的風格及樣式,雖然變化不多,但是以自己喜歡的風格做出來的,暗色系的風格非常唯美
(3)製作心得:雖然做出來的樣式有點一成不變,但是因為很努力完成這項作業,所以覺得非常有意義,比起第一樣作業困難很多,但是還是完成了,我學到了很多,也覺得網頁雖然很麻煩,但是做完時卻有異常的成就感,也學到很多架設網站的技巧...

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445144
(2)本頁設計重點:把上次一些不太懂的地方弄好,整個頁面弄整齊,繼續完成剩下頁面!!
(3)製作心得:
製作的時候遇到有語法沒注意到而跑掉,找了好久才找出問題,結果只是多打了一個div
,頓時覺得....好笨阿!語法真是博大精深阿!一個東西打錯就會有東西跑掉。還好至少找出問題了~~這次做的也有比上次順暢!棒棒~

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1055999320
(2)本頁設計重點: 讓每一頁的排版都盡量不一樣。
(3)製作心得: 這幾頁表格效果挺費腦的,因為如果每一頁的排版做的一樣看起來就很單調,所以光想排版就要想很久。

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445075
(2)本頁設計重點: 用了他專輯圖片襯托背景
(3)製作心得:希望可以再做精緻點

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445114/midterm-1045445114/works.html
(2)本頁設計重點: 電影分享網頁
(3)製作心得:終於做完了哈哈

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445153

(2)網頁設計重點:簡約的風格,讓來的人們可以感受到溫,跟享受這裡的一切。

(3)製作心得:能夠自己從頭到尾都自己來,沒有尋求別人的幫助把它完成,好有成就感。