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

Advanced

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

[期中作業] 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.製作心得:



Edited 1 time(s). Last edit at 04/22/2019 10:11AM by JinJin.
(編輯記錄)

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



Edited 2 time(s). Last edit at 05/24/2019 02:06PM by 1075445002-1.
(編輯記錄)

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.製作心得:因為想說自己手打才會記憶深刻,但打錯要改卻不知從哪下手,花了蠻長的時間,絕望。



Edited 3 time(s). Last edit at 06/05/2019 01:13AM by 1055440119.
(編輯記錄)

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



Edited 4 time(s). Last edit at 05/24/2019 12:50PM by 1075445012.
(編輯記錄)

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



Edited 3 time(s). Last edit at 05/24/2019 12:59PM by 1075445010.
(編輯記錄)

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



Edited 3 time(s). Last edit at 05/24/2019 12:48PM by 1075445066.
(編輯記錄)

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

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



Edited 2 time(s). Last edit at 05/24/2019 01:05PM by 1075445018.
(編輯記錄)

(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.製作心得:自己摸索製作出來,很有成就感



Edited 2 time(s). Last edit at 05/15/2019 10:58PM by 1075445050.
(編輯記錄)

作業網址: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.製作心得:置中滿難調的,重複看影片就理解了,最後語法有比較了解!!也發現單聽老師講課會聽不懂,一定要實際操作才更佳明白。



Edited 2 time(s). Last edit at 05/24/2019 12:56PM by 1075445024.
(編輯記錄)

作業網址: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.製作心得:很累 想內容很難



Edited 1 time(s). Last edit at 05/28/2019 02:38PM by 悅嘉.
(編輯記錄)

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



Edited 1 time(s). Last edit at 05/29/2019 09:50PM by 1075445061 1A.
(編輯記錄)

作業網址: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.製作心得:真的有點難ㄟ



Edited 2 time(s). Last edit at 05/31/2019 02:00PM by 1075445048.
(編輯記錄)

作業網址: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.製作心得:慢慢了解語法~