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

Advanced

Re: [期中作業]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/~web107b/midterm/midterm-107xxxxxxx

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

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

2. 上傳至FTP



3. 回覆本篇文章




請回答以下問題/可先於4/26前回覆前三項:

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



Edited 3 time(s). Last edit at 05/16/2019 10:07PM by JinJin.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1055433048
1.製作主題:自我介紹
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文):最新消息news、個人資料information、興趣interest、專長speciality、作品Portfolio
4.欲呈現之配色風格:簡約、現代風
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:學會如何將影片崁入。

1055433048 葉珈昀



Edited 4 time(s). Last edit at 05/21/2019 09:09PM by 1055433048.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1045445134
1.製作主題: 英劇介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 系列劇集/選角/配樂/介紹
4.欲呈現之配色風格:藍色、灰色
5.有無遇到的問題? 照片置中不太會
6.花多少時間製作: 3天
7.製作心得: 看到英文頭眼昏花,好在終於完成了哈哈哈

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445086
1.製作主題: HOMETOWN
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文):最新消息/news,服裝/cloth,關於HOMETOWN/aboutme,聯絡方式/contact
4.欲呈現之配色風格: 橘色,粉紅色,夕陽,夏天
5.有無遇到的問題? 無
6.花多少時間製作: 2天
7.製作心得:雖然很難,但我覺得很有趣

視傳1B 1075445086 比嘉伊津希



Edited 1 time(s). Last edit at 05/19/2019 01:26PM by 1075445086.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445034
1.製作主題: 甜點介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 甜點介紹 店家資訊 教學製作 其它甜點
4.欲呈現之配色風格: 淡黃色、白色
5.有無遇到的問題? 無
6.花多少時間製作:
7.製作心得:

視傳一B 1075445034 鄭詳霖

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445068
1.製作主題: 偶像
2.網頁類型(活動式/主題式/個人/企業/..): 主題
3.導覽列分類(網站內容/中英文): 關於他們/about,出道節目/program,歷代專輯/album,專屬團綜/variety
4.欲呈現之配色風格: 粉、藍
5.有無遇到的問題? 無
6.花多少時間製作: 2.5天
7.製作心得:能製作出來覺得很開心



Edited 1 time(s). Last edit at 05/24/2019 10:59PM by 1075445068.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445062
1.製作主題:自我介紹
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 個人介紹、個性、興趣、才藝、特殊經歷
4.欲呈現之配色風格: 橘色系列和可愛風格
5.有無遇到的問題? 有
6.花多少時間製作: 1天
7.製作心得:比較更了解排版了。



Edited 3 time(s). Last edit at 05/31/2019 11:25AM by 1075445062.
(編輯記錄)

1.作業網址:http://cute.mepopedia.com/~web107b/hw02/hw02-1075445080
(2)回答問題:
1.製作主題: 剷屎官
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文):最新消息 認識鏟屎官 精選照片
4.欲呈現之配色風格: 咖啡色,黃色
5.有無遇到的問題? 背景不會變色
6.花多少時間製作: 2天
7.製作心得:



Edited 1 time(s). Last edit at 05/20/2019 02:35PM by 1075445080.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1055433049
1.製作主題:
2.網頁類型(活動式/主題式/個人/企業/..): ONE PIECE 航海王
3.導覽列分類(網站內容/中英文): 成員介紹 故事介紹 惡魔果實 one piece 航海王劇場版
4.欲呈現之配色風格: 簡單風格
5.有無遇到的問題? 背景不會變色
6.花多少時間製作: 1天
7.製作心得:學到如何排版,然後一直改,學到如何加圖片跟排版



Edited 2 time(s). Last edit at 05/23/2019 09:55PM by 1055433049.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445085
1.製作主題:東京喰種
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文):登場人物 劇情大綱 特殊設定 電視電影 遊戲 舞台劇
4.欲呈現之配色風格:黑色、白色、部分紅色、陰鬱風
5.有無遇到的問題? 無
6.花多少時間製作:2天
7.製作心得:整理的時間有點久,不過做的蠻開心的。

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445072
1.製作主題:傳說對決凱撒霸主
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 中文
4.欲呈現之配色風格: 青綠色
5.有無遇到的問題? 尚無 只是需要動腦
6.花多少時間製作: 一個小時
7.製作心得:頭好痛
視傳1B朱廷翌



Edited 1 time(s). Last edit at 05/27/2019 10:55AM by 1075445072.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445045/
1.製作主題: 寵物狗
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文):關於寵物的檔案
4.欲呈現之配色風格:咖啡色
5.有無遇到的問題? 文字設定有點困難
6.花多少時間製作: 5小時
7.製作心得:css設定有問題!

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445023/
1.製作主題:我的攝影作品
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文):紀錄、風景、動物、植物、天空
4.欲呈現之配色風格:小清新
5.有無遇到的問題? 網址沒辦法改
6.花多少時間製作:1個禮拜
7.製作心得:覺得好難,花了很多時間才做完。



Edited 6 time(s). Last edit at 05/30/2019 10:29PM by 1075445023.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445049
1.製作主題: WANNA ONE介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 團員介紹 團體資料 音樂作品 廣告代言 演唱會
4.欲呈現之配色風格: 可愛簡單
5.有無遇到的問題:改顏色很難
6.花多少時間製作: 兩小時
7.製作心得:可以做自己的偶像很開心 耶比

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445079
1.製作主題: 偶像
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 歌手介紹 個人生活 音樂作品 演唱會 影視作品
4.欲呈現之配色風格: 橘黃色
5.有無遇到的問題? 沒有
6.花多少時間製作: 3跟4小時
7.製作心得:成就感

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445033


1.製作主題:Seventeen
2.網頁類型: 主題式
3.導覽列分類:介紹Seventeen/中文
4.欲呈現之配色風格:Seventeen應援色
5.有無遇到的問題? 影片嵌入格式錯誤
6.花多少時間製作:一個禮拜
7.製作心得:對電腦不是很擅長,所以做的很辛苦很久,但是成就感還是有的。

作業網址:http://cute.mepopedia.com/~web107b/public_html/midterm/midterm-1055443132
1.製作主題: MIT
2.網頁類型(活動式/主題式/個人/企業/..): 主题式
3.導覽列分類(網站內容/中英文): 首页、时事新闻、全台天气状况、用词差异、线下产品
4.欲呈現之配色風格: 黑白灰
5.有無遇到的問題? 有的css不知怎么调到自己预期的样式
6.花多少時間製作: 1week
7.製作心得:眼睛快看花了。。。

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445004
1.製作主題: 自我介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 我的日常、朋友、家人等......
4.欲呈現之配色風格:可愛甜美
5.有無遇到的問題? 圖片格式一直跑掉
6.花多少時間製作: 2天
7.製作心得:一開始根本聽不懂,慢慢會了就很有成就感

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445004
1.製作主題: 自我介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 我的日常、朋友、家人等......
4.欲呈現之配色風格:可愛甜美
5.有無遇到的問題? 圖片格式一直跑掉
6.花多少時間製作: 2天
7.製作心得:一開始根本聽不懂,慢慢會了就很有成就感

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445076

1.製作主題: 桃猿隊
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 棒球隊/職業棒球隊
4.欲呈現之配色風格:藍白 紅
5.有無遇到的問題? 有些字無法改顏色
6.花多少時間製作: 兩小時
7.製作心得:
視傳1B 1075445076



Edited 4 time(s). Last edit at 06/07/2019 10:45AM by 傑宇.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445007/#top
1.製作主題:偶像介紹
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 最新消息 個人簡介 音樂作品 影視作品 個人榮譽
4.欲呈現之配色風格:冷色 暗黑又溫暖的
5.有無遇到的問題? 無
6.花多少時間製作: 一天
7.製作心得:雖然過程中感到眼花撩亂,但做完後成就感很大

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445084
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文): 最新專輯 私人收藏
4.欲呈現之配色風格: 粉紅色 騷
5.有無遇到的問題? 沒有
6.花多少時間製作: 1小時
7.製作心得:愛你沒法度

1075445084 黃章豪

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1035461031/
1.製作主題: 西洋女歌手-亞莉安娜
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文):最新消息 個人介紹 演唱會 音樂作品 個人榮譽
4.欲呈現之配色風格: 黑灰 極簡
5.有無遇到的問題? 無
6.花多少時間製作:2-3小時
7.製作心得:很興奮

1035461031劉貞妏

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445032
1.製作主題: 美食
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文): 中文
4.欲呈現之配色風格:優美
5.有無遇到的問題? 有
6.花多少時間製作: 2小時
7.製作心得:影片連結的問題

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445040
2.網頁類型(活動式/主題式/個人/企業/..): 企業
3.導覽列分類(網站內容/中英文): 首頁 甜點介紹 店家資訊 最新餐點
4.欲呈現之配色風格: 簡單
5.有無遇到的問題? 沒有
6.花多少時間製作: 2小時
7.製作心得:終於做完了

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

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445011
1.製作主題: fgo
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 登場人物 英靈階職 遊戲介紹&玩法 遊戲介面
4.欲呈現之配色風格: 藍 紫色
5.有無遇到的問題? 和hw2的圖片會跳來跳去 只能複製圖片來解決
6.花多少時間製作: 4小時多
7.製作心得:能用喜歡的東西做出來分享感覺不錯

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445006
1.製作主題: 音樂
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文) : news/演唱會. concept/樂團介紹,about/樂團成員, music/影音推薦
4.欲呈現之配色風格: 黑 白 黃
5.有無遇到的問題? 已經解決了!
6.花多少時間製作: 很長
7.製作心得:很累不過好玩

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445027
1.製作主題: 夜市美食
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 台灣夜市/夜市小吃/小吃排行/相關地址
4.欲呈現之配色風格: 橘色、紅色
5.有無遇到的問題? 不太會調整圖片格式。
6.花多少時間製作: 一星期
7.製作心得:覺得這次作業又更難了,製作中很燒腦,一直找不到該要調整的地方。



Edited 1 time(s). Last edit at 06/17/2019 12:19AM by 1075445027.
(編輯記錄)

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445015

1.製作主題:育頡的老公
2.網頁類型(活動式/主題式/個人/企業/..): 偶像
3.導覽列分類(網站內容/中英文):個人簡介/團體/關於公司/演藝生涯/演員
4.欲呈現之配色風格: 粉咖
5.有無遇到的問題? 都是問題
6.花多少時間製作: 2個禮拜
7.製作心得:一直撞牆



Edited 1 time(s). Last edit at 06/18/2019 03:10AM by 1075445015 1A.
(編輯記錄)

作業網址:file:///Users/xiaoyouhan/Desktop/hw02-1075445025/index.html
1.製作主題:StreetSexy photo studio
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文):主頁home、關於about、購物shop、聯絡我們contact us
4.欲呈現之配色風格:簡約、現代風
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:學會如何將影片崁入。

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445067
1.製作主題:偶像
2.網頁類型(活動式/主題式/個人/企業/..):主題
3.導覽列分類(網站內容/中英文):
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:學會很多

作業網址: http://cute.mepopedia.com/~web107b/midterm/midterm-1075445029
1.製作主題:嚇奇驚影院
2.網頁類型(活動式/主題式/個人/企業/..): 企業式
3.導覽列分類(網站內容/中英文): 影院介紹、新嚇上映、嚇奇類別、驚影推薦。
4.欲呈現之配色風格: 讓觀看者的覺得驚悚的。
5.有無遇到的問題? 無。
6.花多少時間製作: 3個小時
7.製作心得:覺得還不賴。



Edited 1 time(s). Last edit at 06/20/2019 07:36AM by 林郁惠.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445060
1.製作主題: 攝影
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): | Home | About | Photo | Story |
4.欲呈現之配色風格: 冷色系
5.有無遇到的問題? 還好
6.花多少時間製作: 2hr
7.製作心得:好累喔

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445069
1.製作主題:自我介紹
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文):
4.欲呈現之配色風格: 清晰
5.有無遇到的問題? css一直跑掉
6.花多少時間製作: 3天
7.製作心得:終於做完很感動

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445077/
1.製作主題: 粄回一城
2.網頁類型(活動式/主題式/個人/企業/..): 高中專題
3.導覽列分類(網站內容/中英文): 研究動機 動畫呈現 包裝設計 成果發展等
4.欲呈現之配色風格: 可愛
5.有無遇到的問題? 無
6.花多少時間製作: 一天
7.製作心得:超級難的!!!



Edited 1 time(s). Last edit at 06/21/2019 11:35AM by 1075445077.
(編輯記錄)

作業網址:作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx
1.製作主題: 天竺鼠
2.網頁類型(活動式/主題式/個人/企業/..): 自由式
3.導覽列分類(網站內容/中英文):
4.欲呈現之配色風格: 綠白
5.有無遇到的問題? 教我的人不會教
6.花多少時間製作: 2h
7.製作心得: