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

Advanced

[作業03] 期末作業首頁篇

[作業03] 期末作業首頁篇

[作業03] 期末作業首頁篇

作業範例:http://jinjin.mepopedia.com/~jinjin/hw/hw03/
期末作業:http://jinjin.mepopedia.com/~jinjin/webdesign-notes/

1. 製作說明



1.請參考以下講義

[作業03講義] 期末作業首頁設計/article/section/table 的步驟製作。

本單元為作業03,為期末作業首頁設計,首頁內容通常包含整個網站的概述與精華內容統整。

設定header中的LOGO設計與導覽列設定,以及main區塊內table表格的基本設定,加入區塊,呈現不同分類主題,設定繞圖排文,並加入圖片,增加網頁的豐富性。綜合期中作業所學,可依期末作業內容,自行設定版面。

設計內容:
1.設計多頁式網站,自行設定主題,針對內容,設定配色及主要風格。
2.可以以主題式網站為主,介紹一個地方文化、特色、美食或喜歡的事物、喜歡的明星、介紹自己,也可延續期中作業主題,使之更完整。
3.準備網站內容所需之圖與文,需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料,需要原創或取得授權。
4.footer請設定個人的專屬版權聲明,並註明『本網頁為作業之用,如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

2. 繳交作業方式



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



第一個作業FTP上的資料夾為:hw03

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

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

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


2. 上傳至FTP



3. 回覆本篇文章



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



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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1055433048
1.製作主題:介紹澎湖
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 首頁index、關於澎湖about、景點推薦attractions、美食推薦food、水上活動推薦water、其他介紹other
4.欲呈現之配色風格:繽紛色彩
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:學到了如何做區塊、表格、數字編號。

行管三A 1055433048 葉珈昀



Edited 3 time(s). Last edit at 06/07/2019 02:42PM by 1055433048.
(編輯記錄)

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

視傳1B 1075445068

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445045/
1.製作主題: 抹茶
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): | 首頁 | 抹茶的由來 | 抹茶甜點 | 抹茶飲料 | 推薦抹茶的影片
4.欲呈現之配色風格: 綠色和深色
5.有無遇到的問題? 無
6.花多少時間製作: 4小時
7.製作心得:深入了解抹茶

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445086/
1.製作主題: 沖繩
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 首頁/index,關於沖繩/about,景點推薦/touristsspots,美食推薦/food,交通工具/transportation,傳統文化/traditionalculture
4.欲呈現之配色風格: 藍色
5.有無遇到的問題? 無
6.花多少時間製作: 2天
7.製作心得:終於會footer頁尾設定了。

視傳1B 1075445086



Edited 2 time(s). Last edit at 06/02/2019 01:27AM by 1075445086.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445023
1.製作主題: 我的攝影作品
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文):風景 動物 旅遊 玩樂攻略 植物
4.欲呈現之配色風格: 藍 黃
5.有無遇到的問題? 改網址後網頁沒辦法顯示
6.花多少時間製作: 1天
7.製作心得:雖然很難,不過幸好有做出來

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445034
1.製作主題: 小時後的零食
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文): 首頁\甜食類\不知到什麼類\其它簡介
4.欲呈現之配色風格: 淡黃色
5.有無遇到的問題?
6.花多少時間製作:
7.製作心得:黑眼圈很重

視傳系 1B 1075445034 鄭詳霖

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1055443132
1.製作主題: MIT
2.網頁類型(活動式/主題式/個人/企業/..): 主题式
3.導覽列分類(網站內容/中英文): 首页、时事新闻、全台天气状况、用词差异、线下产品
4.欲呈現之配色風格: 黑白灰
5.有無遇到的問題? html还算简单,css有的代码不知道在哪了改
6.花多少時間製作: 1week
7.製作心得:伤脑

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445076
1.製作主題: 藝術村介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文):
4.欲呈現之配色風格:黑 白
5.有無遇到的問題? 有些顏色無法改
6.花多少時間製作: 兩小時
7.製作心得:希望能夠更精進
視傳1B 1075445076



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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1045445134
1.製作主題: 都市介紹
2.網頁類型(活動式/主題式/個人/企業/..): 主題
3.導覽列分類(網站內容/中英文): 歷史/地理/文化與生活/交通/旅遊
4.欲呈現之配色風格: 藍色與紅色
5.有無遇到的問題? 沒
6.花多少時間製作: 一天
7.製作心得:看電腦螢幕看到眼睛要脫窗了@@

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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445007/
1.製作主題:偶像
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): | 首頁 | 音樂作品 | 影音作品 | 影視作品 | 個人榮譽
4.欲呈現之配色風格: 白色米色深色
5.有無遇到的問題? 無
6.花多少時間製作: 一天
7.製作心得:做了自己喜歡的偶像很開心

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445004
1.製作主題: jenny的秘密小檔案
2.網頁類型(活動式/主題式/個人/企業/..):個人
3.導覽列分類(網站內容/中英文): 網站內容/中文
4.欲呈現之配色風格:粉色可愛
5.有無遇到的問題? 無
6.花多少時間製作:2天
7.製作心得:做完很棒



Edited 1 time(s). Last edit at 06/09/2019 11:10PM by 1075445004 葉沛妘.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445085
1.製作主題: 東京喰種tokyo ghoul
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 首頁/index,登場人物/character,劇情大綱/outline,特殊設定/settings,電視電影/dramma,遊戲/gmae
4.欲呈現之配色風格: 黑白紅藍、簡潔
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:要想怎麼放內容真的不容易。

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

1075445084 黃章豪



Edited 1 time(s). Last edit at 06/10/2019 08:29PM by 黃章豪.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1055433049
1.製作主題: 介紹美國歌手selena gomez
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文): 首頁/歌手介紹/代言/熱門音樂作品
4.欲呈現之配色風格: 時尚簡單風格
5.有無遇到的問題? 剛開始插入圖片很奇怪,現在好了
6.花多少時間製作: 3天
7.製作心得: 剛開始我想得太複雜,不太會做,還好有朋友教我,現在變得我越來越上手了,我學會如何設計一整頁的主頁跟排版。



Edited 5 time(s). Last edit at 06/10/2019 08:15PM by 1055433049.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445080
1.製作主題: egg
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 中文
4.欲呈現之配色風格: 黃色橘色
5.有無遇到的問題? 圖片不知道如何左右移動
6.花多少時間製作: 1day
7.製作心得:

http://cute.mepopedia.com/~web107b/hw03/hw03-1035461031/
1.製作主題:巴拉望
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 簡介/關於巴拉望/景點推薦/美食推薦/交通介紹
4.欲呈現之配色風格: 間單
5.有無遇到的問題? 無
6.花多少時間製作: 2-3小時
7.製作心得:滿意

1035461031劉貞妏



Edited 3 time(s). Last edit at 06/19/2019 03:04AM by hihi.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445049
1.製作主題: WANNA ONE
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 團體介紹 音樂作品 演唱會 廣告 相關團體
4.欲呈現之配色風格: 藍色
5.有無遇到的問題:換色很難
6.花多少時間製作: 一小時半
7.製作心得:很難非常難

(1).作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445040

(2).請回答以下問題:
1.製作主題: 蛋糕
2.欲呈現之配色風格: 簡單
3.有無遇到的問題? 沒有
4.花多少時間製作: 2小時
5.製作心得:終於做完了

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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445072
1.製作主題:聖鬥士星矢:覺醒
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 首頁、聖鬥士介紹、隊伍推薦、小宇宙說明、戰鬥視頻
4.欲呈現之配色風格:咖啡 黯然銷魂
5.有無遇到的問題? 有但是自己解決了
6.花多少時間製作:1天
7.製作心得:學到了如何做出一個完整網頁

視傳1B朱廷翌

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445027
1.製作主題: Twice
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 首頁/團體介紹/最新專輯/熱門點播/私心收藏
4.欲呈現之配色風格: 粉橘色、黃色、紫色
5.有無遇到的問題? 無
6.花多少時間製作: 6小時
7.製作心得:可以做自己喜歡的團體,還有配色,是件開心的是,希望可以繼續努力。



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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445011
1.製作主題:偶像
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): 成員介紹 音樂作品 演出作品 現在的初代神七
4.欲呈現之配色風格: 粉、藍
5.有無遇到的問題? 無
6.花多少時間製作: 4小時
7.製作心得:眼睛看的好酸



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

file:///C:/Users/User/Desktop/hw03-1075445015/index.html
1.製作主題: 育頡的老公
2.網頁類型(活動式/主題式/個人/企業/..):偶像
3.導覽列分類(網站內容/中英文): 首頁/音樂作品/影視作品/個人榮譽
4.欲呈現之配色風格: 藍紅
5.有無遇到的問題? 全部都是問題
6.花多少時間製作: 6個小時
7.製作心得:想撞豆腐

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445070
1.製作主題: 偶像
2.網頁類型(活動式/主題式/個人/企業/..): 主題
3.導覽列分類(網站內容/中英文): 首頁/index,團體介紹/Idol,成員介紹/about,音樂作品/musicworks,專屬團綜/variety
4.欲呈現之配色風格: 代表色黃色+粉色
5.有無遇到的問題? 無
6.花多少時間製作: 3天
7.製作心得:很有成就感

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

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445029
1.製作主題: pink
2.網頁類型(活動式/主題式/個人/企業/..): 個人式
3.導覽列分類(網站內容/中英文): 中文
4.欲呈現之配色風格: 溫暖清新風。
5.有無遇到的問題? 無
6.花多少時間製作:3個小時
7.製作心得: 覺得網頁是個很深奧的東西,要經由不斷學習才能慢慢懂得。



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

作業網址:file:///Users/xiaoyouhan/Desktop/hw03-1075445025/index.html
1.製作主題:Nat Geo photographer in Taiwan
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 首頁index、主頁home 、關於攝影師About photographer's 、作品Photos、聯絡我contact usr
4.欲呈現之配色風格:簡約色彩
5.有無遇到的問題? 影片及照片致中
6.花多少時間製作:2天
7.製作心得:學到了如何做區塊、表格、數字編號。

視1A 1075445025 蕭有涵

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445062
1.製作主題: 橘子-生活日記介紹
2.網頁類型(活動式/主題式/個人/企業/..): 個人
3.導覽列分類(網站內容/中英文): 個人介紹 / 我的興趣 / 讀書計畫 / 我的經歷
4.欲呈現之配色風格: 橘色
5.有無遇到的問題? 有
6.花多少時間製作: 1天
7.製作心得:很難。



Edited 1 time(s). Last edit at 06/20/2019 02:33AM by 1075445062.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445067
1.製作主題:偶像
2.網頁類型(活動式/主題式/個人/企業/..):主題式
3.導覽列分類(網站內容/中英文): 首頁 音樂 得獎 我的最愛
4.欲呈現之配色風格:咖啡乳白
5.有無遇到的問題? 無
6.花多少時間製作:1天
7.製作心得:
視覺傳達一A李吟芳



Edited 1 time(s). Last edit at 06/20/2019 04:41AM by 1075445067.
(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445029
1.製作主題: pink
2.網頁類型(活動式/主題式/個人/企業/..): 個人式
3.導覽列分類(網站內容/中英文): 中文
4.欲呈現之配色風格: 溫暖清新風
5.有無遇到的問題? 無
6.花多少時間製作: 3個小時
7.製作心得:覺得慢慢做著有了解一些。

作業網址:http://cute.mepopedia.com/~web107b/hw03/hw03-1075445079
1.製作主題: 海綿寶寶
2.網頁類型(活動式/主題式/個人/企業/..): 主題式
3.導覽列分類(網站內容/中英文): | 個人介紹 | 興趣 | 地點 | 職業 | 人際關係
4.欲呈現之配色風格: 橘黃藍
5.有無遇到的問題? 沒有同學幫忙我真的不會qq
6.花多少時間製作: 一天6小時
7.製作心得:沒有同學般忙我真的會死掉

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