[期中作業] OnePage-網頁製作

[期中作業] OnePage-網頁製作

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/midterm

1. 製作說明

1.請參考以下講義

（1）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-2.html][講義] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table[/url]
（2）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-midterm.html][講義] 期中作業-onepage/main/article/section/圖文編排區塊單元/錨點連結/[/url]

的步驟製作。

期中作業為一頁式網頁（OnePage）

1.設計一一頁式網頁（OnePage)，自行設定主題，針對內容，設定配色及相關風格。

2.準備圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。

3.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

本單元需達成的目標有：

1.header/nav/LOGO設計與導覽列設定
2.main主圖的設定
3.表格的設定
4.article/section/單元的設定
5.圖文編排區塊單元
6.錨點連結
7.footer版權說明設定

2. 教學影片

1.【作業02解析】(一) header/nav/LOGO設計與導覽列設定/main/table-初步設定
https://youtu.be/gGTm3UYMzqE

3. 繳交作業方式

1. 製作完成後，檔案命名方式：

期中作業FTP上的資料夾為：midterm

每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107a/midterm/midterm-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

存放在 < midterm-學號 > 的資夾內
可由作業二資料夾複製修改為midterm

2. 上傳至FTP

3. 回覆本篇文章

(2).請回答以下問題/可先於4/26前回覆前三項：

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-107xxxxxxx
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格：
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445002
1.製作主題： 模型製作 DIY
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）：認識模型 model 模型運用 application 教學影片 video 認識模型的比例 proportion 認識模型的製作 production
4.欲呈現之配色風格： 攝影,文創產業的顏色
5.有無遇到的問題? 製作困難
6.花多少時間製作：1小時
7.製作心得：之後再重新找講義複習



(編輯記錄)

http://cute.mepopedia.com/~web107a/hw02/hw02-1075445035

(2).請回答以下問題：
1.製作主題： 偶像介紹
2.欲呈現之配色風格：活潑糖果色系
3.有無遇到的問題? 無
4.花多少時間製作：3天
5.製作心得：還可以

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1055440119-1
1.製作主題：個人
2.網頁類型：個人式
3.導覽列分類：關於我about me 日常喜好life 作品photo 寶藏男孩 連結link
4.欲呈現之配色風格：白色調配綠色調，簡約風。
5.有無遇到的問題? 找到要改的區塊花很多時間，想要改A卻改到B。
6.花多少時間製作：加加減減3天
7.製作心得：因為想說自己手打才會記憶深刻，但打錯要改卻不知從哪下手，花了蠻長的時間，絕望。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445012
1.製作主題： 歌手介紹
2.網頁類型：主題式
3.導覽列分類（網站內容/中英文）： 歌手介紹(Singer introduction)，得獎紀錄(Winning record)，生活動態(Life dynamics)，創作專輯(Creating album)
4.欲呈現之配色風格：活潑
5.有無遇到的問題? 背景顏色調不攏
6.花多少時間製作： 一天半
7.製作心得：很累，燒腦袋



(編輯記錄)

作業網址： http://cute.mepopedia.com/~web107a/midterm/midterm-1075445010
1.製作主題：個人網站
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：關於/IDOL/原創/商品/
4.欲呈現之配色風格：可愛
5.有無遇到的問題? 會忘記一些語法然後亂掉
6.花多少時間製作：4小時
7.製作心得：還是需要好好的背好語法ＱＱ



(編輯記錄)

作業網址： http://cute.mepopedia.com/~web107a/midterm/midterm-1075445066
1.製作主題： 遊戲
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 遊戲介紹() / 角色介紹() / 遊戲種類() / DLC影片介紹 () / 節日活動 ()
4.欲呈現之配色風格：大地色
5.有無遇到的問題? 無
6.花多少時間製作：4H
7.製作心得：有慢慢比較了解一些語法了



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445018

1.製作主題： 宜蘭旅遊
2.網頁類型：主題式
3.導覽列分類（網站內容/中英文）： 關於宜蘭(about)，旅玩景點(Travel)，美食(Food)，住宿消費(Accom)
4.欲呈現之配色風格：藍色調
5.有無遇到的問題? 無
6.花多少時間製作： 3H
7.製作心得 : 學會了如何把圖片跟文字有區隔



(編輯記錄)

(2).請回答以下問題/可先於4/26前回覆前三項：

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445050
1.製作主題： 我自己
2.網頁類型（活動式/主題式/個人/企業/..)： 個人網頁
3.導覽列分類（網站內容/中英文）： about me關於我 interest我的興趣 like what喜歡什麼 daily日常生活 website">網站
4.欲呈現之配色風格：日本傳統色
5.有無遇到的問題? 導覽列文字不知道怎麼分開
6.花多少時間製作： 3天
7.製作心得：自己摸索製作出來，很有成就感



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445002
1.製作主題：模型製作DIY
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）：中英文(部分再修改)
4.欲呈現之配色風格：文創產業的風格
5.有無遇到的問題? 顏色修改部分困難
6.花多少時間製作：2小時
7.製作心得：目前把期中的作業完成，但是製作的方面有困難。

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445054
1.製作主題： 歌手介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 歌手介紹／演藝經歷／代表作品／演唱會／得獎紀錄
4.欲呈現之配色風格： 暖色系
5.有無遇到的問題? 配色和調整字型大小上花比較多時間
6.花多少時間製作： 一天
7.製作心得：做完自己喜歡的歌手後，很有成就感

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445044
1.製作主題： 柴犬
2.網頁類型（活動式/主題式/個人/企業/..)： 個人介紹
3.導覽列分類（網站內容/中英文）： 個性 興趣 專長 長相
4.欲呈現之配色風格： 暖色悠閒風
5.有無遇到的問題? 沒
6.花多少時間製作： 很快
7.製作心得：學到新的東西

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445024
1.製作主題：cake!
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 蛋糕預告、代表蛋糕、蛋糕變生、蛋糕蛋糕、機密蛋糕
4.欲呈現之配色風格： 謎之風味
5.有無遇到的問題?
6.花多少時間製作： 5小時
7.製作心得：置中滿難調的，重複看影片就理解了，最後語法有比較了解!!也發現單聽老師講課會聽不懂，一定要實際操作才更佳明白。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445022
1.製作主題：偶像韓團
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 個人介紹 經歷 專輯 團體綜藝 粉絲介紹
4.欲呈現之配色風格： 清晰
5.有無遇到的問題? 無
6.花多少時間製作： 5小時
7.製作心得：做完很開心

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445028
1.製作主題： 工作室的秘密2
2.網頁類型（活動式/主題式/個人/企業/..)： 工作室
3.導覽列分類（網站內容/中英文）：工作室介紹 ,工作室團員介紹 ,團員喜愛的影片,周邊商品,想認識更多
4.欲呈現之配色風格： 粉紫色
5.有無遇到的問題? 無
6.花多少時間製作： 很久
7.製作心得：很累 想內容很難



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445061
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）：個人經歷 、主持、 音樂作品、 電影作品 、幕後團隊
4.欲呈現之配色風格： 橘黃色
5.有無遇到的問題?有時候會忘記要幹嘛
6.花多少時間製作： 3小時
7.製作心得：做出屬於自己的網頁，很開心



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1055440093
1.製作主題：雅嘿
2.網頁類型（活動式/主題式/個人/企業/..)：個人式
3.導覽列分類（網站內容/中英文）： 雅嘿about me/興趣interest/日常daily life/作品Portfolio/社群community platform
4.欲呈現之配色風格： 粉色系
5.有無遇到的問題? 區塊圖片編排
6.花多少時間製作： 2天
7.製作心得：要注意順序，有時候可能會忘記結尾

影視3A-1055440093-張雅惠

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445036
1.製作主題： 美食紀錄
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）： news最新食肥 / konwAbout155女孩 / diary豬的肥食記 / Punch豬的踏青 / life豬與老大的生活
4.欲呈現之配色風格： 繽紛好吃
5.有無遇到的問題? 想學怎麼真的在網路上搜尋到自己的網站
6.花多少時間製作： 2天
7.製作心得：很開心能自己學會放影片的程式

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1065445055
1.製作主題： 專題
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格： 極簡風
5.有無遇到的問題? 沒有
6.花多少時間製作： 非常久
7.製作心得：發現學這個對未來有幫助

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445075
1.製作主題： CN星球
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）： NEWS，ABOUT，CN 口袋太陽，星球日常，客製星球/中文
4.欲呈現之配色風格： 怪奇可愛
5.有無遇到的問題? 無
6.花多少時間製作： 2-3hr
7.製作心得：因為一直很想要有自己的網站，所以很喜歡這次的成品

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445038
1.製作主題： 基隆鎖管季
2.網頁類型（活動式/主題式/個人/企業/..)： 企業
3.導覽列分類（網站內容/中英文）：海產
4.欲呈現之配色風格： 海味
5.有無遇到的問題? 配色
6.花多少時間製作： 3小時
7.製作心得：肯努力都值得

作業網址:http://cute.mepopedia.com/~web107a/midterm/midterm-1075445048
1.製作主題：遊戲神魔之塔
2.網頁類型（活動式/主題式/個人/企業/..)： 遊戲
3.導覽列分類（網站內容/中英文）：最新消息 認識神魔之塔 卡片介紹
4.欲呈現之配色風格： 暖色
5.有無遇到的問題? 無
6.花多少時間製作：2小時
7.製作心得：真的有點難ㄟ



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445021
1.製作主題： 日系服飾
2.網頁類型（活動式/主題式/個人/企業/..)：個人企業
3.導覽列分類（網站內容/中英文）：穿搭教學 認是丹寧 品牌形象
4.欲呈現之配色風格： 大地色
5.有無遇到的問題?
6.花多少時間製作：5小時
7.製作心得：覺得很有趣 希望能趕快把網頁做完

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445059
1.製作主題： 漫威英雄介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 漫威系列電影,漫威電影宇宙,初代復仇者成員,主要反派,復仇者聯盟4：終局之戰預告
4.欲呈現之配色風格： 漫威標準色
5.有無遇到的問題：無
6.花多少時間製作： 4hr
7.製作心得：現在對網頁設計有比較熟練了 希望會越來越熟練

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1055445221
1.製作主題： 部落格
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）： 中文
4.欲呈現之配色風格： 粉白清新
5.有無遇到的問題?
6.花多少時間製作： 3小時
7.製作心得：當內容變多變複雜時很容易會出現bug要不斷檢察

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445005
1.製作主題： 韓國女星
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）： 中文
4.欲呈現之配色風格： 橘 綠
5.有無遇到的問題?
6.花多少時間製作：一天
7.製作心得：做到很累

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445026
1.製作主題：第五人格遊戲網頁
2.網頁類型（活動式/主題式/個人/企業/..)： 遊戲
3.導覽列分類（網站內容/中英文）： 蛤?
4.欲呈現之配色風格： 暗黑
5.有無遇到的問題? 問題一堆
6.花多少時間製作： 數不清
7.製作心得：如果我電腦不是3萬5我會想摔

(2).請回答以下問題/可先於4/26前回覆前三項：

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1055445208
1.製作主題：
輕黏土DIY
2.網頁類型（活動式/主題式/個人/企業/..)：
個人
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格：
活潑、可愛
5.有無遇到的問題?
沒有
6.花多少時間製作：
1天
7.製作心得：
做完很開心~

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445037
1.製作主題： 熱門音樂社
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 最新資訊/認識熱音/精彩表演/相關連結/入社報名
4.欲呈現之配色風格： 黑色系
5.有無遇到的問題? 很多
6.花多少時間製作：1天
7.製作心得：嗚嗚

作業網址：http://cute.mepopedia.com/~web107a/midterm/midterm-1075445026
1.製作主題：第五人格遊戲網頁
2.網頁類型（活動式/主題式/個人/企業/..)： 遊戲
3.導覽列分類（網站內容/中英文）： 蛤?
4.欲呈現之配色風格： 暗黑
5.有無遇到的問題? 問題一堆
6.花多少時間製作： 數不清
7.製作心得：如果我電腦不是3萬5我會想摔

作業網址： http://cute.mepopedia.com/~web107a/midterm/midterm_1075445058/index.html
1.製作主題： 個人
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：💕 最新消息 /品牌概念/ 品牌形象 /用心精匠/ 風格 💕
4.欲呈現之配色風格：溫暖
5.有無遇到的問題? 上傳連結網址
6.花多少時間製作：2H
7.製作心得：慢慢了解語法~