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

Advanced

Re: [期末作業] 以雙欄為主的網站設計

[期末作業] 以雙欄為主的網站設計

[期末作業] 以雙欄為主的網站設計





1. 製作說明:


1.請參考期末之前教過的做法及講義,製作以雙欄(多欄)為主的網站。

2.題目自訂,可以延續期中作業的主題,也可以是全新的主題。

3.必須考慮設計風格與質感,並需自行設計圖片(尤其是頂圖,不可使用現成設計好的圖片),製作網站內容。

4.需以Float浮動的方式建立雙欄(多欄)(不限定每頁都須雙欄)、DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等。

5.至少需包含
(1).Table:表格→匯整資料,
(2)Float→繞圖排文,
(3)臉書、噗浪等推文設定,
(4)圖片跳窗連結,
(5)導覽列設定。


6.製作完成上傳至FTP





2. 作業設計重點



(1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁



3. 評分標準與製作檢核


1.雙欄的製作(Float的使用),不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定,Footer的版權宣告
7.內容的完整性
8.製作說明




4. 繳交作業方式


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

期中作業FTP上的資料夾為:final

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

資料夾內含:
(1).首頁命名為index.html
(2).其他頁面請自行命名,但需注意命名為則,不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

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



2.全部完成後上傳至FTP

3.依進度回覆本篇文章




5. 回覆說明



完成品
請將這項放置於文章最前面
(1)作業網址:
(2).
1.製作作業的時間:
2.有無遇到的問題:
3.製作心得與感想:
4.本學期於網頁設計課程上的收穫:



前置作業
(1)網站主題:
(2)導覽列架構設定
(3)主要瀏覽族群:
(5)風格設定:
(6)主色調,輔助色調:
(7)製作動機:
(8)製作目的:
預期效果:






=================================================
※期末作業無論如何請一定要繳交,否則以期末以零分計。※
※期末考當週請務必出席,無故缺席以零分計。※
※若經發現作業為直接複製同學檔案以零分計※

=================================================

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055440122/index.html
(2).
1.製作作業的時間: 3~4天
2.有無遇到的問題:
配色方面困擾很久,做了好多張背景圖,但是自己都不滿意,
還有表格一開始很難理解....
但後來看教學影片就慢慢會了,老師的教學影片真的很實用!
3.製作心得與感想:
製作自己興趣的主題,更增進對網頁設計的興趣。
4.本學期於網頁設計課程上的收穫:
起初,上課時完全看不懂語法,經過老師耐心的教導與修正,
讓自己更了解網頁設計的架構,現在也慢慢能發現自己錯誤的地方並修正囉!
從html、css、單欄網頁、至雙欄網頁,css的設定也是由易入難,
常常因為忘記收尾而弄得一蹋糊塗,收尾真的很重要!
這學期網頁設計的收穫滿滿!謝謝老師細心的教導 smiling smiley

前置作業
(1)網站主題:新楓之谷
(2)導覽列架構設定 :
首頁(index)
遊戲功能介紹(play)
小樂趣(funny)
職業介紹(guild)
打王趣(boss)
(3)主要瀏覽族群: 不限
(5)風格設定: 動態視覺效果、簡單淡色系風格
(6)主色調,輔助色調:
(7)製作動機: 想做跟自己有關的網站,決定從玩了九年的新楓之谷著手。
(8)製作目的: 保存起來以後拿來懷舊。
預期效果: 希望能比期中更優~



Edited 3 time(s). Last edit at 01/17/2018 12:49AM by Ch2254.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445078/index.html
(2).
1.製作作業的時間: 1~2天
2.有無遇到的問題:

3.製作心得與感想:
網頁設計真的很難,很感謝老師的教導
4.本學期於網頁設計課程上的收穫:
在這學期中我最大的收穫就是看懂網頁程式,真的很謝謝老師
前置作業
(1)網站主題:米奇
(2)導覽列架構設定 :
(3)主要瀏覽族群: 16 - 25 years
(5)風格設定: 黑黃簡單色系風格
(6)主色調,輔助色調: 黃黑
(7)製作動機: 從最喜歡的米奇開始
(8)製作目的: 喜歡迪士尼的一切
預期效果:能比期中更好~



Edited 5 time(s). Last edit at 01/16/2018 10:05PM by 林笠瑄1055445078.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445141/index.html
(2).
1.製作作業的時間:2天
2.有無遇到的問題:無
3.製作心得與感想:雖然真的不簡單但是其實匯了之後還蠻有趣的
4.本學期於網頁設計課程上的收穫:這個學期我學到了很多以前不會的東西,真的對我有很大的幫助
前置作業
(1)網站主題:小美人魚
(2)導覽列架構設定 :
(3)主要瀏覽族群: 10 - 25 years
(5)風格設定: 海洋粉紅色系風格
(6)主色調,輔助色調:粉紅
(7)製作動機:因為喜歡美人魚
(8)製作目的:讓大家更了解小美人魚的故事
預期效果:可以讓人更淺顯易懂

http://mepopedia.com/~css106-2c/final/final-1055445039
1.製作作業的時間:約一天
2.有無遇見問題:有,丟作業這部分一直出問題
3.製作心得與感想:跟著影片一步一步慢慢來,最後看見是自己想要的東西,蠻有成就感的
4.本學期網頁設計課上課收穫:很意外自己會明白程式語言這東西,老師交的很淺顯易懂,讓學生們不覺得程式語言太難,謝謝老師。

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445150/index.html
(2).
1.製作作業的時間: 1天
2.有無遇到的問題:
不小心刪掉之前做的然後存檔了.....害我又重做
3.製作心得與感想:
更增進對網頁設計的了解與實際應用,謝謝老師耐心整理的講義
4.本學期於網頁設計課程上的收穫:
從不會到可以不用一直依賴老師的影片作出一個完整的網頁很有優越感,更期待下學期的進階網頁了

前置作業
(1)網站主題:Ghost in the shell
(2)導覽列架構設定 :跟老師每次作業的一樣
(3)主要瀏覽族群: 12 - 35years
(5)風格設定:現代感,科技感
(6)主色調,輔助色調: 灰藍為主
(7)製作動機: 感覺攻殼機動做起網頁一定很帥
(8)製作目的: 方便有興趣的觀眾能更了解故事劇情大綱
預期效果: 不要刪掉可能就接近完美

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445087/index.html
(2).
1.製作作業的時間:很多天
2.有無遇到的問題:
不小心存錯檔案,過程找不到命名錨點....
3.製作心得與感想:
謝謝老師的教學影片,真的幫忙很多,當然老師上課也很用心地教我們,真的學到了很多關於網頁的基本概念和架構
4.本學期於網頁設計課程上的收穫:
從什麼都不會到可以做出網站的感覺很棒,希望之後能做得更好
(1)網站主題:蠟筆小新
(2)導覽列架構設定 :使用每次作業結合
(3)主要瀏覽族群: 12 - 35years
(5)風格設定:溫馨可愛
(6)主色調,輔助色調: 紅黃暖色系為主
(7)製作動機: 因為很喜歡蠟筆小新的調皮
(8)製作目的: 多多了解蠟筆小新的經典電影
預期效果: 早點完成可能可以改得更好,但真的很喜歡這堂課,收穫很多!謝謝老師用心地教我們!

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055443120
(2).
1.製作作業的時間: 2-3天
2.有無遇到的問題: 有但都通过影片以及讲义解决了
3.製作心得與感想: 累瘫了
4.本學期於網頁設計課程上的收穫: 学会了一些设计网页的知识 已经收集资料图片的能力
前置作業
(1)網站主題:决战平安京 手游介绍
(2)導覽列架構設定 式神录(hellspawn)
(3)主要瀏覽族群: 喜爱手游的人群
(5)風格設定: 玄幻神秘
(6)主色調,紫色 輔助色調:各种亮色
(7)製作動機: 最近刚玩的手游十分的有意思 希望可以分享
(8)製作目的: 分享给大家一起玩
預期效果:希望分数可以有85 做的蛮幸苦的

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445045
(2).
1.製作作業的時間: 3天
2.有無遇到的問題: 雙欄會一直搞混
3.製作心得與感想: 眼睛好酸可是蠻有成就感的畢竟是自己喜歡的偶像
4.本學期於網頁設計課程上的收穫: 對於完全沒有接觸過網頁設計的我 學這半學期收穫可多了
(1)網站主題:B.A.P
(2)導覽列架構設定 : 介紹成員 / mv欣賞/得獎/團體資訊
(3)主要瀏覽族群: B.A.P的粉絲們 / 想認識B.A.P的人
(5)風格設定:灰暗 與新專輯主要配色相同
(6)主色調, 輔助色調: 灰色 深紅 / 白色淺灰
(7)製作動機: 高一的現在的偶像
(8)製作目的: 想讓更多人認識他們
預期效果:只希望部要被當掉 因為我很用腦做了 TT

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445075

(2).
1.製作作業的時間:2~4天
2.有無遇到的問題: 在做作業五的時候,一開始做繞圖排文時,一直無法全部對整齊 但只後知道做繞圖排文時,文字要夠多,才會比較整齊。最後有看講義 也能慢慢的理解
3.製作心得與感想: 讓我了解到做網頁設計的知識,也讓我學習到很多不同的語法。
4.本學期於網頁設計課程上的收穫: 一開始上課完全聽不懂語法,經過老師的耐心教導以及教學影片和講義,後面慢慢的了解語法的意思,也讓自己更加的了解整個網頁設計的架構,做到最後面的作業時,也能自己慢慢發現自己的錯誤並且修改,也很謝謝老師這學期的耐心教導我們,謝謝老師~~

前置作業
(1)網站主題: 玩具總動員 Toy Story
(2)導覽列架構設定 :劇情(index) 人物(people) 電影介紹(about) 製作(making) 影片(video)
(3)主要瀏覽族群:喜歡皮克斯動畫的人們 12~25歲
(5)風格設定: 乾淨 簡單的藍色系列風格
(6)主色調,輔助色調: 主色調是藍色 輔助色調是淡黃色以及淡藍色
(7)製作動機:很喜歡巴斯光年,所以做他演出的電影 玩具總動員
(8)製作目的: 能讓大家了解玩具總動員的電影由來
預期效果: 希望分數不會太低 能順順利利的過關

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445156

(2).
1.製作作業的時間:1~5天
2.有無遇到的問題:很多無解的小細節
3.製作心得與感想: 這次網頁讓自己學到十分多意想不到的知識
4.本學期於網頁設計課程上的收穫: 一開始我對網頁是莫名的害怕,到之後上了老師的網頁後我大大覺得網頁是個容易上癮的技能,謝謝老師不院其煩的教導我們,抓出很多小差錯。

前置作業
(1)網站主題:春艷
(2)導覽列架構設定 :about(index)link(link) mv(mv)photo(photo) album(work)
(3)主要瀏覽族群:喜歡聽饒舌18~30歲
(5)風格設定: 極簡藍色系風格
(6)主色調,輔助色調: 主色調是藍色 輔助色調是黑色以及白色
(7)製作動機:很喜歡春艷,他的個性很酷炫,作品很好聽
(8)製作目的: 能讓大家了解春宴這個饒舌歌手
預期效果: 希望能夠達到老師的水準!

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445156

(2).
1.製作作業的時間:3~7天
2.有無遇到的問題:很多沒注意到的細節,改不完的錯誤
3.製作心得與感想: 讓我學習到了不少高中沒學過的網頁新知
4.本學期於網頁設計課程上的收穫:一開始我完全不了解,直到遇上老師的網頁課後我開始真正體會到網頁設計的新知識,開始做到上癮了

前置作業
(1)網站主題:春艷饒舌歌手
(2)導覽列架構設定 :about(index) work(work) photo(photo) mv(mv) link(link)
(3)主要瀏覽族群:喜歡聽饒舌藝術天分的族群18~30歲
(5)風格設定:極簡冷色調
(6)主色調,輔助色調: 主色調藍色 輔助色調是黑白灰
(7)製作動機:喜歡饒舌歌手春艷的酷炫作品
(8)製作目的:讓大家了解春艷這個歌手
預期效果: 希望能達到老師要求

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445117

(2).
1.製作作業的時間:3~7天
2.有無遇到的問題:很多沒注意到的細節,改不完的錯誤
3.製作心得與感想:讓我學習到了不少高中沒學過的網頁新知
4.本學期於網頁設計課程上的收穫:一開始我完全不了解,直到遇上老師的網頁課後我開始真正體會到網頁設計的新知識,開始做到上癮了

前置作業
(1)網站主題:柯南劇場版
(2)導覽列架構設定:about(index) work( work) photo(photo) mv(mv) link(link)
(3)主要瀏覽族群:喜歡推理類的小說及漫畫
(5)風格設定:極簡藍色調
(6)主色調,輔助色調:主色調藍色輔助色調是黑白灰
(7)製作動機:喜歡推理的作品
預期效果:希望能達到老師要求

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445063
1.製作作業的時間:3~4小時
2.有無遇到的問題: 無
3.製作心得與感想:網頁真的不簡單
4.本學期於網頁設計課程上的收穫: 沒想到自記也能做出一個完整的網頁



前置作業
(1)網站主題: 福山雅治
(2)導覽列架構設定 :關於 生平 獎項 音樂作品 電影作品
(3)主要瀏覽族群: 福山迷
(5)風格設定: 簡約
(6)主色調,輔助色調: 黑灰色 白黃色
(7)製作動機: 欣賞福山雅治
(8)製作目的: 想讓大家更認識他
預期效果:很好

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1045445241/index.html
(2).
1.製作作業的時間: 2天
2.有無遇到的問題: 只會簡單的
3.製作心得與感想: 眼睛很酸,看得很累,心也很累
4.本學期於網頁設計課程上的收穫: 對於完全沒有接觸過網頁設計的我 有點困難 但對網頁更了解了
(1)網站主題:B.A.P
(2)導覽列架構設定 : 紫色姐妹花 / 電影介紹 / 小說介紹 / 得獎紀錄 / 外部連結
(3)主要瀏覽族群: 喜歡得獎電影的人
(5)風格設定:紫色調
(6)主色調, 輔助色調: 紫色深淺
(7)製作動機: 喜歡看有關種族的電影 挑其中一部介紹
(8)製作目的: 讓大家知道好電影
預期效果:希望不要被當 能及格就行><

完成品
(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445129
(2).
1.製作作業的時間:很久我真的忘了....
2.有無遇到的問題: 我有自己上網找資料,然後也有看老師的影片找QQ
3.製作心得與感想: 終於做完了QQ好開心~~~~
4.本學期於網頁設計課程上的收穫: 我終於學會做一個簡單的網頁,有收穫了~~

前置作業
(1)網站主題:my melody
(2)導覽列架構設定 :Story/Data/Video/Works/Links
(3)主要瀏覽族群: 6~18歲左右
(5)風格設定: 甜美風格
(6)主色調,輔助色調: 主色調粉紅;輔助紫、淡橘
(7)製作動機: 想延續我上一個做過的網頁也是童趣可愛風格的,粉嫩粉嫩XDDD
(8)製作目的: 我喜歡粉紅粉紅的網頁,就只是喜歡而已哈哈。
預期效果: 有些還是調的不是那麼好QQ網頁呈現起來覺得普普通通蠻一般的..沒有特別的驚喜感,我是希望能夠每一頁頁面都換,不過美樂蒂圖片顏色幾乎都是粉紅色所以就沒去做改變了,有些地方我自己沒有很滿意。



Edited 2 time(s). Last edit at 01/15/2018 11:10PM by 1055445129.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445096
1.製作作業的時間 : 8天
2.有無遇到的問題: 滿多語法困難的
3.製作心得與感想:網頁真的超級難而且跟老師的程式又有區別
4.本學期於網頁設計課程上的收穫: 沒想過我也能完成一個網站



前置作業
(1)網站主題: 新海誠
(2)導覽列架構設定 :關於 人物 影片 連結 故事
(3)主要瀏覽族群: 新海誠迷
(5)風格設定: 極簡風格
(6)主色調,輔助色調: 黑白色調
(7)製作動機: 欣賞新海誠的所有動畫
(8)製作目的: 想讓大家更認識他
預期效果:感動 很不錯 幸福 質感



Edited 2 time(s). Last edit at 01/16/2018 04:31PM by 吳晉瑋.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445132

(2).
1.製作作業的時間:4~5天
2.有無遇到的問題:很多沒注意到的細節,改不完的錯誤
3.製作心得與感想:讓我學習到了不少高中沒學過的網頁新知
4.本學期於網頁設計課程上的收穫:一開始完全不了解,直到遇上老師的網頁課後我開始真正體會到網頁設計的新知識

前置作業
(1)網站主題:為美好的世界獻上祝福
(2)導覽列架構設定:about(index) work( work ) photo(photo) mv(mv) link(link)
(3)主要瀏覽族群:喜歡搞笑類型,輕鬆類型的人們
(5)風格設定:多彩色調
(6)主色調,輔助色調:主色調黃色輔助色調是粉紫
(7)製作動機:想把喜歡的動畫推薦給大家
預期效果:希望能達到老師要求

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445186

(2).
1.製作作業的時間:1~3天
2.有無遇到的問題:目前還好
3.製作心得與感想: 從甚麼都不懂的網頁設計到現在能夠慢慢地架設簡單的網站的過程中雖然遇到很多很想死的問題,但是能夠一一克服就覺得這些過程都是我們值得學習的地方,也謝謝老師的教導讓我能在網頁設計這一塊領域能夠了解很多東西

前置作業
(1)網站主題:麵包超人
(2)導覽列架構設定 :劇情大綱(index) 人物介紹(character) 電影介紹(movie) 影片介紹(video) 照片欣賞(photo)
(3)主要瀏覽族群:喜歡麵包超人的小朋友大朋友們
(5)風格設定:暖色童趣風格
(6)主色調,輔助色調: 主色調是黃色 輔助色調是淺橘色淺粉色
(7)製作動機:很喜歡日本的卡通,從眾多卡通中選出人物最多的麵包超人來做報告
(8)製作目的:讓大家更能了解麵包超人
預期效果: 希望能夠平平安安地度過期末



Edited 1 time(s). Last edit at 01/16/2018 04:52PM by 施婉晴.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445120

(2).
1.製作作業的時間:4~7天
2.有無遇到的問題:還是有很多沒注意到的細節
3.製作心得與感想:學習到了不少沒學過的網頁新知
4.本學期於網頁設計課程上的收穫:一開始我完全不了解,直到遇上網頁課後開始真正體會到網頁設計的新知識
(1)網站主題:貓咪飼養方法
(2)導覽列架構設定:index(index) feed( feed)adopt(photo)awards(awards) delivery(delivery)
(3)主要瀏覽族群:要養貓的人
(5)風格設定:簡單橘黃色調
(6)主色調,輔助色調:主色調黃輔助色調是淡橘
(7)製作動機:自己有養貓咪 也熱愛了解有關貓咪的知識
預期效果:能達到老師要求!

(1)作業網址:
(2). http://mepopedia.com/~css106-2c/final/final-1055445015
1.製作作業的時間: 一天左右
2.有無遇到的問題:目前還行
3.製作心得與感想: 終於做完了好感動smiling bouncing smiley
4.本學期於網頁設計課程上的收穫:從一開始還不知道到底要怎麼製作網頁,到現在雖然沒有說很厲害,但我覺得我真的學到了好多網頁知識,謝謝老師除了上課認真教學之外,還放上了講義和教學影片可以讓我們複習,對於我這種記憶力不好的人,真是太棒了,謝謝老師,新年快樂smileys with beer



前置作業
(1)網站主題: 救救北極熊吧!
(2)導覽列架構設定 :資訊盡量清楚明瞭
(3)主要瀏覽族群:沒有特定限制 ,闔家觀賞
(5)風格設定: 冷冷的北極風
(6)主色調,輔助色調: 主色為深藍、白色 , 輔助色調:亮水藍色
(7)製作動機: 希望大家可以一起幫幫可憐的北極熊!
(8)製作目的: 大家一起節約能源,讓可愛的北極熊不要滅絕thumbs up
預期效果: 有達到預期效果smiling bouncing smiley

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055443135
(2).
1.製作作業的時間: 好几个星期
2.有無遇到的問題: 问题太多了,双栏做不清楚,而且在软件里看着是对的,在网页里看排版就变了,自己也检查不出来哪里错了,因为自己的网页名字和老师的不一样,链接自己找了半天,而且超级粗心,要交之前最后检查的时候不知道按到什么网页少了一页,又重新做了一页,反正就是很糊涂
3.製作心得與感想: 好难啊,做错了也找不出来,也不知道原因,也不知道在哪里改
4.本學期於網頁設計課程上的收穫: 多多少少学习了一些网页的基本运用方法,重要的是有克服自己的电脑白痴,努力做了每一个作业

(1)作業網址:
(2). http://mepopedia.com/~css106-2c/final/final-1055445036
1.製作作業的時間: 一天左右
2.有無遇到的問題:目前還行
3.製作心得與感想: 耶做完了!每次的風格不一樣做出來的感覺也不一樣喔喔smiling bouncing smiley
4.本學期於網頁設計課程上的收穫:
學習到了很多了~以前看網頁設計的原始碼都快花了,現在看至少看得懂一點點的,不過CC的DW真的好煩阿QQ

前置作業
(1)網站主題:古老黑魔法
(2)導覽列架構設定 :英文要好才看得懂 某些單字
(3)主要瀏覽族群:咒語部分輔導級,不然真的有些小孩試了成功,我可不清楚後果eye rolling smiley
(5)風格設定:黑暗酒紅
(6)主色調,輔助色調: 主色為暗紅 灰 黑 白色字 紅
(7)製作動機: 覺得魔法太神秘了
(8)製作目的: 做網頁時查的資料自己也可以多懂一些
預期效果: 有達到預期效果smoking smileysmoking smiley

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445054

(2).
1.製作作業的時間: 2~3天
2.有無遇到的問題:其實問題很多XDDD 但都解決了~
3.製作心得與感想: 每當我在做網頁的時候,都想創新,想嘗試不同的感覺,但還是長的差不多,沒有甚麼多大變化quq覺得大家做的都好棒
4.本學期於網頁設計課程上的收穫: 其實剛開始上這門課程 真的超級不想上的,但之後的想法又不一樣,總覺得自己應該好好突破,一些語法對我來說記起來真的很困難,所以一定要做筆記寫步驟(我的方法啦),下學期要加油了!!

前置作業
(1)網站主題: 小威老師
(2)導覽列架構設定 :作者介紹(index)漫畫教室(about)歷代作品(works)祕密花園(art img)草圖公開(sketch)
(3)主要瀏覽族群:跟我一樣喜歡看漫畫的宅男宅女們,但不管是不是宅,只要喜歡都可以看
(5)風格設定: 走個華麗路線
(6)主色調,輔助色調: 粉紫色
(7)製作動機: 想把這位國人少女漫畫家分享給大家
(8)製作目的: 了解漫畫家的辛苦 喜歡的話就可以看她之前的作品
預期效果:覺得還不錯

這個作業的網址則為:http://mepopedia.com/~css106-2c/final/final-1035471056

時間:已經數不清多少夜晚
感想:為什麼電子產品這麼傷害眼睛,但是網頁設計還是蠻好玩的 有時候做的想一拳干掉電腦
老師,我覺得有些地方還是期中的方式做比較好看,還有上課能講完一遍后再快速一遍嗎 講一遍有時候走神真的全部聽不懂了 謝謝您
請給我過吧

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445033

(2).

1.製作作業的時間:2~4天

2.有無遇到的問題:在做表格的時候會卡住都在摸索很久才知道問題在哪。

3.製作心得與感想:學了很多關於網頁語法,知道弄一個網頁不是簡單的事。

4.本學期於網頁設計課程上的收穫:學一堆完全不懂語法到會,遇到不會就會看教學影片和講義,後面就懂了操作,也這樣更熟悉,並把錯誤更正。謝謝老師

前置作業
(1)網站主題:探險活寶-老皮
(2)導覽列架構設定: Home( index ) Present( present ) Friends( friends ) About( about ) Other( other )
(3)主要瀏覽族群:喜歡卡通動畫的人群 7~20歲
(5)風格設定:亮色黃與橘與黑系列風格
(6)主色調,輔助色調: 主色調:黃色 輔助色調: 橘色與黑色
(7)製作動機:因為喜歡以前看探險活寶影片 ,尤其喜歡裡面的老皮,所以才做為他主題的網頁。
(8)製作目的:讓大家了解探險活寶的電是卡通劇情與角色 。
預期效果: 很滿意自己設計的網頁。

完成品
請將這項放置於文章最前面
(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445024

(2).
1.製作作業的時間:2-4天
2.有無遇到的問題:大致上都解決了
3.製作心得與感想:CSS越來越多 很容易搞混,我覺得還需要更多時間熟悉,不過大致上都完成了 很有成就感,希望還可以做更好
4.本學期於網頁設計課程上的收穫: 從完全不會到現在看到原始碼些許看懂,謝謝老師認真、用心的教我們網頁,讓我們對網頁設計有些許的了解,每次完成都讓我有成就感!

前置作業
(1)網站主題:oystermusic
(2)導覽列架構設定:Introduction (index)、Album(Album)、Experience(Experience)、Interview(Interview)、Video(Video)
(3)主要瀏覽族群:16~32歲 喜歡獨立音樂、文青型族群
(5)風格設定:簡單明瞭
(6)主色調,輔助色調:主色調:褐色/補助色調:米色、咖啡色
(7)製作動機: 很喜歡張懸
(8)製作目的:讓更多人了解她
預期效果: 大致上都有達到心中想要的樣子,希望老師也喜歡~

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445102
(2).
1.製作作業的時間: 2個禮拜
2.有無遇到的問題: 無
3.製作心得與感想: 淚、累
4.本學期於網頁設計課程上的收穫: 太多了!真的太多了

(1)網站主題:Lady gaga
(2)導覽列架構設定
(3)製作內容:
首頁 [index]
故事 [story]
得獎紀錄 [Awards]
專輯 [Album]
經典歌曲推薦 [songs]
(3)主要瀏覽族群:GAGA粉
(5)風格設定:清新簡單的風格
(6)主色調,輔助色調:淡藍色.粉紅
(7)製作動機:清新簡單的風格
(8)製作目的: 因為我超級喜歡Lady Gaga也因為她的歌讓我更有自信
預期效果: 不會太雜不好閱讀,按鈕正常

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445111
(2).
1.製作作業的時間:半學期?!!每次作業都有跟著進度走所以我也不確定花多少時間 但是整合網頁時間大約是2~3小時

2.有無遇到的問題:
就是那個圖片的部分我的電腦裡找不到行為所以沒辦法開另外一個視窗看大圖........到底在哪裡呢........


3.製作心得與感想:

沒有想那麼多就只是照著老師的步調去做,也參考了很多老師的語法,雖然現在還是搞不清楚那些語法是哪一個www
但是至少在看的時候不會這麼的不熟悉及討厭他xd

4.本學期於網頁設計課程上的收穫:

一開始真的太急著想要把它做好了.....其中的時候為了做出好的作品花了很多心思在排版上
結果完全沒有做完.....(真的是事倍功半qq)
所以這次的作業有照著老師的步調慢慢做,雖然不是很完美但是至少東西是完整的
先求有在求好!!!!這句話真的很重要呢......

總之謝謝老師細心的指導,真的學到很多東西,也奠定了我們的網頁設計的各種知識,相信未來我們如果要自己自學的話,一定不會這麼的陌生xd
祝老師新年快樂ww

前置作業
(1)網站主題:動物之森
(2)導覽列架構設定 :
index
game play
story
news
video
(3)主要瀏覽族群:喜歡任天堂這款遊戲的人 喜歡玩休閒小遊戲的玩家 大約16~30幾不等
(5)風格設定: 綠色的的自然風格
(6)主色調,輔助色調: 一點點的藍白?!
(7)製作動機:從其中後很喜歡這個遊戲在加上這個主題風格明顯就想試試看
(8)製作目的: 上次其中沒有好好做這次想要好好做完他
預期效果:終於有個樣子了qqqqqqq



Edited 2 time(s). Last edit at 01/16/2018 10:56PM by 1055445111.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445042/index.html
(2).
1.製作作業的時間: 3天
2.有無遇到的問題:

3.製作心得與感想:
水喔,做完了
4.本學期於網頁設計課程上的收穫:
指令還是看不懂,寒假多練習
(1)網站主題:刺客教條
(2)導覽列架構設定 :
(3)主要瀏覽族群: 13 years 以上
(5)風格設定: 黑暗簡單色系風格
(6)主色調,輔助色調: 黑灰白
(7)製作動機: 就是想做
(8)製作目的: 就是想做
預期效果:還可以再更好~

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445060
(2).
1.製作作業的時間: 好多天
2.有無遇到的問題: 還好
3.製作心得與感想: 做完很開心
4.本學期於網頁設計課程上的收穫:
讓我發現新天地 感恩老師

前置作業
(1)網站主題:Skrillex
(2)導覽列架構設定 :
歌手介紹(index)知名歌曲(famous)
得獎歌曲(Awards)
歌曲推薦(recommend)
DJ照片(songs)
(3)主要瀏覽族群: 16~30
(5)風格設定: 簡約
(6)主色調,輔助色調: 紅 白 米白
(7)製作動機: 喜歡的DJ
(8)製作目的: 讓更多人知道
預期效果: 還真棒多了

完成品
請將這項放置於文章最前面
(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445177
(2).
1.製作作業的時間:2天
2.有無遇到的問題:連結要連對個很重要
3.製作心得與感想: 覺得做完很有成就感
4.本學期於網頁設計課程上的收穫: 得到惹大量的網頁知識,之前都沒有碰到過網頁相關,然後老師很用心教~



前置作業
(1)網站主題:p714星球
(2)導覽列架構設定 :首頁/繪本/貼圖/作者/商品
(3)主要瀏覽族群:喜歡 p714星球 的人都可以
(5)風格設定: 可愛風
(6)主色調,輔助色調: 淡藍色,深藍色
(7)製作動機: 覺得他是台灣原創然後很可愛
(8)製作目的:項讓更多人知道他是台灣原創
預期效果:希望比期中更進步



Edited 1 time(s). Last edit at 01/16/2018 11:33PM by 1055445177.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445183
(2).
1.製作作業的時間: 久到忘記了
2.有無遇到的問題: 我不懂網頁
3.製作心得與感想: 終於做完了
4.本學期於網頁設計課程上的收穫: 重新認識自己



前置作業
(1)網站主題: mili
(2)導覽列架構設定 :
首頁index:介紹mili這個團體
歷年專輯Album:介紹歷年專輯
歌曲推薦recommend:推薦有趣的歌曲
專輯美術圖Art picture:專輯的美術圖
歌曲試聽Listen:歌曲試聽
(3)主要瀏覽族群: mili粉絲
(5)風格設定: 清新簡單
(6)主色調,輔助色調: 青色
(7)製作動機: 喜歡mili
(8)製作目的: 傳教
預期效果: 好看

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445207
(2).
1.製作作業的時間: 2-3天
2.有無遇到的問題:有
3.製作心得與感想: 很困難 也很多語法很複雜
4.本學期於網頁設計課程上的收穫: 學了很多 之後可以自己製作 感覺很厲害
前置作業
(1)網站主題:barry
(2)導覽列架構設定
(3)主要瀏覽族群: 年輕人
(5)風格設定:黑白
(6)主色調,黑白輔助色調:黃
(7)製作動機: 喜歡他 是才子
(8)製作目的: 分享给大家一起認識他
預期效果:很棒 希望成績不錯

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445003
(2).
1.製作作業的時間:兩個禮拜
2.有無遇到的問題: 有 遇到很多問題
3.製作心得與感想: 就是一直搞懂與搞不懂
4.本學期於網頁設計課程上的收穫: 我覺得很棒



前置作業
(1)網站主題: ONE OK ROCK介紹
(2)導覽列架構設定 可以互相應對
(3)主要瀏覽族群:年輕人
(5)風格設定:溫暖搖滾的感覺
(6)主色調,橘紅 輔助色調: 金
(7)製作動機: 因為喜歡他們也比較熟悉 製作起來比較上心
(8)製作目的:跟同學介紹他們
預期效果: 比我想像中的好

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445135
(2).
1.製作作業的時間: 3~4天
2.有無遇到的問題: 有些還是不太熟悉
但後來看教學影片就慢慢會了
3.製作心得與感想: 無
4.本學期於網頁設計課程上的收穫: 老師講解很詳細 也有網路上的影片教學 很用心!
前置作業
(1)網站主題:玩具總動員
(2)導覽列架構設定 :
首頁(index)
角色介紹(people)
電影歌曲(music)
精采預告(Notice)
精彩劇照(photo)
(3)主要瀏覽族群: 16 - 35 years
(5)風格設定: 塗鴉風格顏色鮮明
(6)主色調,輔助色調:
(7)製作動機: 想做自己喜歡的網站。
(8)製作目的: 保存起來以後拿來懷舊。
預期效果: 希望可以做得不錯



Edited 1 time(s). Last edit at 01/17/2018 12:30AM by stelas0309.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055443126

(2). 製作作業的時間:2~4天

前置作業
(1)網站主題: 我的偶像周杰伦
(2)導覽列架構設定 :首頁 基本信息 圖片欣賞 主要作品
(3)主要瀏覽族群:小公舉的粉絲哈哈哈
(5)風格設定: 簡潔明了
(6)主色調,輔助色調: 主色調是藍色 輔助色調是白色
(7)製作動機:本命杰伦嘛嘿嘿
預期效果: 希望能順利的過關

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1035445036

(2).
1.製作作業的時間:一個多禮拜。

2.有無遇到的問題:製作進度趕不上時間歸畫,有一些做不完圖沒有放,發現連結沒有加#字號沒辦法用,還有沒加綠色的「"微軟正黑體"」五個字的話,正黑體都不正了,還有自己手殘一直打錯程式碼,然後找不到那裡打錯,只好砍掉重練,那時超懊惱,更擔心沒辦法在時間內完成,還好有教學網站和教學影片可以看,不會時可以邊看邊做smiling smiley

3.製作心得與感想:一直做失敗時覺得心好累,不過製作完成的時後很有成就感(花費時間、精神,努力沒有白費94爽),雖然覺得在用打的時覺得是自討苦吃,感覺做不完還會打到掛,但是打過一遍後比較知道哪個是哪個的功用了,當然還是不會的地方有複製老師的,另外一直打錯像是少打#或A之類的,還不知道哪裡少打多打錯打 內心超煩躁 ,尤其覺得CSS直接按左鍵選設定調整感覺最好了,謝謝老師指導~

4.本學期於網頁設計課程上的收穫:原來一些CSS可以按個右邊的按鈕就可以直接設定,知道後覺得開心,很多不知道是什麼的東東可以不用用手打,有打錯的地方也較好找到,感覺終於做對了安心許多,但用打的時真的超累,真心覺得好想複製貼上阿___。


前置作業
(1)網站主題: 海賊王

(2)導覽列架構設定?
首頁___(index)
角色介紹(roles)
故事介紹(story)
影片___(video)
相關連結(links)
頁面很多欄位 放超多東西

(3)主要瀏覽族群:主要青少年,漫畫愛好者

(5)風格設定:本來想做出來看起來簡單簡潔然後好像有點帥的感覺,但加了底圖覺得跟之前相比變可愛了?

(6)主色調,輔助色調:黑灰白、紅色系 (暗紅色 淺紅色)

(7)製作動機:因為海賊王太好看了,不推薦不行,希望能讓更多人看見這麼ㄅ一ㄤˋ的漫畫作品。

(8)製作目的:希望更多人喜歡上這部作品,想看海賊王~。

預期效果:未知,希望看過的人會想去看海賊王。

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445168

(2).
1.製作作業的時間:3~4天
2.有無遇到的問題:有,但都是小問題
3.製作心得與感想:其實很多都是照著老師的做法去做的,但做完了還是很開心
4.本學期於網頁設計課程上的收穫:至少能做出一些簡單的網頁了,還有謝謝老師放了教學影片和講義,因為我有時候會不小心放空沒聽到課

前置作業
(1)網站主題:小熊維尼
(2)導覽列架構設定 :index、character、work、origin、video
(3)主要瀏覽族群:喜愛維尼的族群
(5)風格設定: 紅白色系風格
(6)主色調,輔助色調: 主色調是紅色、輔助是白色
(7)製作動機:從小就很喜歡維尼
(8)製作目的: 覺得可愛
預期效果: 希望可以過

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445144

(2).
1.製作作業的時間:2~5天
2.有無遇到的問題: 從作業五開始我覺得我就有點跟不上了,感謝同學耐心教導
3.製作心得與感想: 網頁好複雜
4.本學期於網頁設計課程上的收穫:雖然很複雜很難跟不上,但一學期的時間還是學會了一些語法,謝謝老師和教我的同學們

前置作業
(1)網站主題: BLACKPINK
(2)導覽列架構設定 :簡介(index) 人物(member) 故事(story) 連結(link) 影片(video)
(3)主要瀏覽族群:喜歡blackpink的人
(5)風格設定:黑 粉 神秘 ,少女
(6)主色調,輔助色調: 主色調是粉色 輔助色調是黑 灰 白
(7)製作動機:喜歡 BLACKPINK的歌
(8)製作目的: 能讓大家了解 BLACKPINK
預期效果: 希望分數不會太低



Edited 1 time(s). Last edit at 01/17/2018 02:20AM by 1055445144.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445021

(2).
1.製作作業的時間: 期中後開始到現在

2.有無遇到的問題: 發現有個同學做出我想要的抽屜式按鈕 很想做 但 不會......哈哈

3.製作心得與感想: 超級開心!最後一頁實在想不出要做什麼,
有想過要做周邊可是覺得跟前面做的差不多所以捨棄,後來就做首頁出來,不過很畫蛇添足。
還有一直糾結back要長這樣嗎...還是用原本的|back|,感覺原本比較適合啊...但既然做了就用吧!
啊然後案按鈕上面的圖有自製小小小動畫

4.本學期於網頁設計課程上的收穫: 學到超多,一開始要上這堂課時覺得我一定完蛋,因為
看到程式碼就不行了哈哈,不過遇到很棒很好的老師細心的教導我們,還錄製影片上傳幫助
上課沒有聽清楚的我們,幫助超大!很高興能上到網頁設計~謝謝老師grinning smiley



前置作業

(1)網站主題: 深町NAKA

(2)導覽列架構設定 :
Home(index) → 首頁,可連結到外部
Debut(debut) → 介紹深町怎麼出道
About(about) → 關於深町的一些報導
Links(links) →連結網路書店,深町的作品

(3)主要瀏覽族群: 喜歡溫馨感的人 大概是 14-25歲左右 主要以女生為主

(5)風格設定: 畫面走簡單風格

(6)主色調,輔助色調: 主色調:粉橘色 輔助色:粉紅、褐色

(7)製作動機: 畫風很吸引我

(8)製作目的: 雖然一開始是為了作業,但做到最後覺得可以當作蒐藏♥

預期效果: 希望可以過這堂課;然後有很多想嘗試的東西,希望以後可以學到~



Edited 4 time(s). Last edit at 01/17/2018 05:54AM by exe99703.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055445159
(2).
1.製作作業的時間:7小時
2.有無遇到的問題:有
3.製作心得與感想:單一製作相較下比較簡單多了,將所有網頁內容整合起來相當複雜
4.本學期於網頁設計課程上的收穫:能夠獨立製作網頁



前置作業
(1)網站主題:Troye Sivan
(2)導覽列架構設定:清單 ul 及 li 製作網頁導覽列
(3)主要瀏覽族群:Fans
(5)風格設定:典雅憂鬱
(6)主色調,輔助色調:Blue
(7)製作動機:介紹明星
(8)製作目的:宣傳效果
預期效果: 擺放影音

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445105/index.html
(2).
1.製作作業的時間: 2天
2.有無遇到的問題:

3.製作心得與感想:
網頁設計真的很難
4.本學期於網頁設計課程上的收穫:
在這學期中我最大的收穫就是學會網頁
前置作業
(1)網站主題:維尼
(2)導覽列架構設定 :
(3)主要瀏覽族群: 16 - 40
(5)風格設定: 黃色為主
(6)主色調,輔助色調: 粉藍
(7)製作動機: 喜歡維尼
(8)製作目的: 喜歡迪士尼
預期效果:能比以前好

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445057/index.html
(2).
1.製作作業的時間: 3天
2.有無遇到的問題:

3.製作心得與感想:
網頁設計真的很難 但做完有成就感
4.本學期於網頁設計課程上的收穫:
能看得懂網頁
前置作業
(1)網站主題:海底總動員
(2)導覽列架構設定 :
(3)主要瀏覽族群: 16 -35
(5)風格設定: 藍色為主
(6)主色調,輔助色調: 深藍淺藍
(7)製作動機: 喜歡尼莫
(8)製作目的: 喜歡迪士尼
預期效果:我能變得更好

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445192/index.html
(2).
1.製作作業的時間3天
2.有無遇到的問題:無
3.製作心得與感想:雖然很困難 一直遇到瓶頸 但好險最後都化險為夷
4.本學期於網頁設計課程上的收穫:學到很多以前不會的
前置作業
(1)網站主題:頑童
(2)導覽列架構設定 :
(3)主要瀏覽族群:青少年
(5)風格設定: 暗黑
(6)主色調,輔助色調: 黑紅
(7)製作動機: 喜歡他們的音樂
(8)製作目的: 期末作業
預期效果:進步

(1)作業網址:http://mepopedia.com/~css106-2c/final/final-1055443122
(2). 1.製作作業的時間:7天
2.有無遇到的問題:還是有遇到挺多問題的
3.製作心得與感想:很傷眼睛 很容易搞混,希望還可以做更好
4.本學期於網頁設計課程上的收穫: 謝謝老師認真、用心的教我們網頁,
前置作業
(1)網站主題:NBA
(2)導覽列架構設定:簡潔的咨訊簡介
(3)主要瀏覽族群:NBA粉絲及想要了解人群
(5)風格設定:熱血hot smiley
(6)主色調,輔助色調:暖色橘黃
(7)製作動機: 希望被越來越多人了解

(1)作業網址: http://mepopedia.com/~css106-2c/final/final-1055445205/index.html

(2).
1.製作作業的時間: 7天

2.有無遇到的問題:
css一直有問題,找不到外框怎麼設定

3.製作心得與感想:
雖然在座作業的時候問題很多,一一解決後,做完就很有成就感。

4.本學期於網頁設計課程上的收穫:
我覺得學了很多,但是因為我自己的電腦,一直無法安裝Dreamweaver,
我都是在圖書館做作業,但是圖書館因為只有開到九點,而且我修的課又
很多,練習網頁作業的時間真的還是不夠,所以無法一直兼顧到每個網頁作業,
但是我真的很喜歡網頁課,所以在作業上我也花了不少時間,雖然成果都
沒有預期的好,但我覺得收穫很多。

前置作業

(1)網站主題:冰雪奇緣

(2)導覽列架構設定 :
首頁(index)
遊戲功能介紹(movie)
小樂趣(love)
職業介紹(open)
打王趣(sony)

(3)主要瀏覽族群: 喜歡冰雪奇緣的大人和小孩。

(5)風格設定:可愛風格

(6)主色調,淺藍,白,淺綠

(7)製作動機:因為很喜歡這個動畫,而且很喜歡雪寶,所以我就做了這個網
頁。

(8)製作目的: 讓更多的認識冰雪奇緣。

預期效果:會很像動畫裡的小鎮艾倫代爾的顏色。