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

Advanced

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

1. 製作OnePage網頁




2. 參照期中前講義製作




3. 作業說明


1.請以個人網站、作品集或自己有趣的主題製作,✷站內容與作品須原創✷,不可使用他人作品,✷如需使用他人作品須取得授權✷。

2.請以老師上課版型製作,或者參照免費版型,挑選一適合期中作業主題的版型,結合選擇之版型製作。
DreamTemplate
http://www.dreamtemplate.com
tooplate 
http://www.tooplate.com/free-templates
templatemo 
http://www.templatemo.com/page/1
Free CSS Free CSS Templates, CSS Layouts & More! 
http://www.free-css.com/free-css-templates
HTMLl5UP 
https://html5up.net
W3.CSS Templates 
https://www.w3schools.com/w3css/w3css_templates.asp
Free Responsive HTML5 CSS3 Website Templates 
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9
https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

3.需完成之製作項目:
(1)製作個人favicon
(2)使用圖示字體(icon font) Font Awesome。
(3)製作輪播圖
(4)了解網頁格線概念,並進行修改。
(5)製作作品分類,並進行修改。

4.製作完畢請上傳FTP,midterm資料夾。

請回覆於作業文章

(1) 作業網址 :
A班:http://ftp.mepopedia.com/~css107a/midterm/midterm-106xxxxxxx
C班:http://ftp.mepopedia.com/~css107c/midterm/midterm-106xxxxxxx
(2) 參考之版型網址:
(3) 設計主題 / 風格:
(4) 導覽列項目:
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

[hr]

4. 製作進度


11/08  OnePage網頁實作/使用圖示字體(icon font) Font Awesome
11/15  OnePage網頁實作/slider /Grid system
11/22  OnePage網頁實作/相片輪播 /
11/29  期中作業繳交/OnePage網頁製作

[hr]

5. 學長姐範例


http://mepopedia.com/forum/read.php?2723,87776
http://mepopedia.com/forum/read.php?2722,87777

[hr]

6. 課程影片


https://youtu.be/aGO1GQxbwTI



[hr]

https://youtu.be/BrslTed-BB4





Edited 2 time(s). Last edit at 11/07/2018 04:55PM by JinJin.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445141
(2) 參考之版型網址: 老師上課的範例版型
(3) 設計主題 / 風格: 個人網站(介紹攝影作品)
(4) 導覽列項目: 首頁 是很聰明呀 家庭成員 作品集 其他 聯絡方式
(5) 遇到之問題: 排版的時候,圖片排完的位置不是自己理想中的樣子
作品想分類的時候一開始不知道怎麽分類
添加視頻后,只有點開才能看到
(6) 製作時間: 一周左右
(7) 製作心得:感覺自己學習到了很多,也會看了很多句子,網站做的比上學期的高大上了許多哈哈哈,很有成就感,終於有了一個介紹自己的網站啦。



Edited 1 time(s). Last edit at 12/03/2018 02:41PM by 是很聰明呀.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445003/onepage/
(2) 參考之版型網址: 老師上課的範例版型
(3) 設計主題 / 風格: 個人作品集 / 小清新
(4) 導覽列項目: 首頁 關於我 攝影集 繪畫集 內心畫
(5) 遇到之問題: 功能不熟
(6) 製作時間: 一個月
(7) 製作心得:是美好的感覺,我覺得有一陣子的詳細研究,進步很多。

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445010/
(2) 參考之版型網址: 老師上課的範例版型
(3) 設計主題 / 風格: 作品集
(4) 導覽列項目: 首頁 關於我 作品集 聯絡我
(5) 遇到之問題: 圖片排完的位置不是自己理想中的樣子 ,或者圖片網址不見等等
(6) 製作時間: 三周...
(7) 製作心得:做完一個One page的網頁真的很開心,也很有成就感,以前看到語法會很頭痛....雖然現在還會,但有感覺到慢慢克服中



Edited 1 time(s). Last edit at 12/06/2018 11:29AM by 1065445010.
(編輯記錄)

(1) 作業網址 : http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445121
(2) 參考之版型網址:老師上課提供的版型
(3) 設計主題 / 風格:個人 生活創作分享/歡樂風
(4) 導覽列項目: 首頁/關於我自己/專業領域/作品欣賞/個人分享/聯絡資訊
(5) 遇到之問題: 在style裡面,很難找到要更改的地方,內容全部都要是自己的,要絞盡腦汁想文字是最難的
(6) 製作時間: 五天的晚上
(7) 製作心得: 看著一大堆程式碼,頭就很痛,會沒有幹勁做作業,為了成績還是要完成,但做完的時後心情會蠻愉悅的,感覺上完成了之前做不到的事



Edited 2 time(s). Last edit at 12/06/2018 11:12AM by 1065445121.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107c/midterm/midterm-1045445021
(2) 參考之版型網址: 老師提供的
(3) 設計主題 / 風格: 簡單可愛
(4) 導覽列項目: 首頁、關於、商品
(5) 遇到之問題: 找不到東西在哪
(6) 製作時間: 7小時
(7) 製作心得: 崩潰

(1) 作業網址 :
A班:http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445127

(2) 參考之版型網址:https://uideck.com/products/helium-ui-kit/
(3) 設計主題 / 風格: 簡單、作品集
(4) 導覽列項目: 首頁、關於、作品、聯絡
(5) 遇到之問題: 滿多的,像是找不到要改的東西在哪等等...。
(6) 製作時間: 兩晚ㄅ?
(7) 製作心得: 可能是因為不是自己的東西,也可能是因為找的版型太複雜的關係,找不到語法或是想改語法卻因為它是鎖死的而作罷,整體來說是滿開心的。



Edited 1 time(s). Last edit at 12/06/2018 10:58AM by 小肥蚊.
(編輯記錄)

1) 作業網址 : http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445021/
(2) 參考之版型網址:老師給的範例在做更改
(3) 設計主題 / 風格: 清新簡約/自然風格
(4) 導覽列項目: 首頁 關於我 我的專長 作品集 聯絡我
(5) 遇到之問題: 置入圖片刪到語法,導致圖片無法顯示效果....但我把他找回來了
(6) 製作時間: 7~8小時
(7) 製作心得: 做完只想躺者睡覺!!!!快暴斃了!!!!但我做完很有成就感,還好有花時間做



Edited 1 time(s). Last edit at 12/06/2018 10:07AM by 陸憶庭.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445135
(2) 參考之版型網址: 老師上課的範例版型
(3) 設計主題 / 風格: 個人作品集
(4) 導覽列項目: HOME ABOUT SERVICE PORTFOLIO CONTACT
(5) 遇到之問題: 眼睛花掉 常忘記語法
(6) 製作時間: 一周多
(7) 製作心得:完成有種成就感 有屬於自己網頁的fu

(1) 作業網址 : http://ftp.mepopedia.com/~css107c/midterm/midterm-1045445114

(2) 參考之版型網址: 老師上課給的網址範例
(3) 設計主題 / 風格: 個人網站(紀錄攝影作品)
(4) 導覽列項目: home、about、photos、email
(5) 遇到之問題: 連結一直有問題卻找不太到問題。confused smiley
(6) 製作時間: 兩周左右
(7) 製作心得:因為網頁才能小小紀錄日本九州之旅。



Edited 1 time(s). Last edit at 12/06/2018 10:19AM by 4c1045445114.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445001
(2) 參考之版型網址: https://templatemo.com/live/templatemo_500_fluid_gallery
(3) 設計主題 / 風格:彩色分類的作品集
(4) 導覽列項目: 繪圖作品、攝影作品、其他作品、關於我、聯絡我
(5) 遇到之問題: 花很久時間才了解怎麼換點進去之前瀏覽的照片
(6) 製作時間: 3天(我花太多時間修圖了)
(7) 製作心得:其實很好玩,只是有些地方花比較久時間去理解,未來會繼續用這個版型來更新我的作品集。



Edited 1 time(s). Last edit at 12/06/2018 10:40AM by 1065445001.
(編輯記錄)

OnePage-個人網頁製作

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445100
(2) 參考之版型網址: 老師你的
(3) 設計主題 / 風格: 個人作品
(4) 導覽列項目:
(5) 遇到之問題: 完全看不懂講義
(6) 製作時間: 幾小時
(7) 製作心得: 不斷的翻講義 然後發現我還是不會做



Edited 1 time(s). Last edit at 12/06/2018 11:44AM by wr00239754.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445043
(2) 參考之版型網址: 老師上課的範例版型 。
(3) 設計主題 / 風格: 個人網站 。
(4) 導覽列項目: 首頁 作品呈現。
(5) 遇到之問題: 太多問題就不一一說了 。
(6) 製作時間: 一天或是一週大概八。
(7) 製作心得:文字碼看得我頭好痛。



Edited 1 time(s). Last edit at 12/06/2018 11:56AM by 王鳴志.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445064
(2) 參考之版型網址: 老師上課的網站找到的範例版型
(3) 設計主題 / 風格: 個人網站(介紹插畫及設計作品)
(4) 導覽列項目: 主頁 關於我 作品集 CONTOCT
(5) 遇到之問題: 動到一個程式碼就整個出錯 ...
作品想分類卻不知道怎麽分類 想放更多作品上來填版面但是不知道要怎麼做
(6) 製作時間: 邊看程式碼邊想辦法做了1天左右
(7) 製作心得:.有種沒有做完的感覺.剛看到還覺得OK 但是往下點開看就會發現一堆問題跟不需要卻沒有刪除的程式碼
刪掉又發現好像把重要的東西也一起刪掉.又回到原本的樣子.看到程式碼出錯讓我感到煩躁
很累的感覺 覺得網頁設計是一件很不容易的事.

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445067
(2) 參考之版型網址:老師的
(3) 設計主題 / 風格:咖啡
(4) 導覽列項目: 首頁 關於我 介紹 聯繫我
(5) 遇到之問題: 很難 不會 花了比較久的時間去了解程式碼
(6) 製作時間: 1個禮拜
(7) 製作心得:熬夜很累 很想睡

(1) 作業網址 :
A:http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445139
(2) 參考之版型網址: 某one page版型網站
(3) 設計主題 / 風格: 個人介紹;簡約清新
(4) 導覽列項目: 個人介紹、攝影作品
(5) 遇到之問題: 照片的放置、icon使用以及一些細節調整
(6) 製作時間: 6-7小時
(7) 製作心得: 做網頁無趣又有趣,上課認真的話收穫會很大

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1045445123
(2) 參考之版型網址: https://onepagelove.com/strata
(3) 設計主題 / 風格:幫家裡行銷賣的橘子
(4) 導覽列項目: 果園
(5) 遇到之問題: 自身吸收太慢
(6) 製作時間: 好幾個小時......
(7) 製作心得:看起來很簡單,做起來不簡單....

(1) 作業網址 : http://ftp.mepopedia.com/~css107c/midterm/midterm-1045440044/
(2) 參考之版型網址:https://html5up.net/big-picture
(3) 設計主題 / 風格: 日本樂團 lucky tapes / 清爽風
(4) 導覽列項目:Intro、Who are they、22、Discography、and...
(5) 遇到之問題: youtube的背景影片一直秀抖 據說現在瀏覽器有設定自動播放就要靜音 沒靜音就不自動播放
(我只是想要我的作業會唱歌QQ
(6) 製作時間: 兩個晚上
(7) 製作心得: 做網頁很好玩

(1) 作業網址 :
C班:http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445009
(2) 參考之版型網址: https://templatemo.com/tm-481-elevate
(3) 設計主題 / 風格: 極簡 攝影
(4) 導覽列項目: 主頁 照片 關於 聯繫
(5) 遇到之問題: 搞不定老師的版型所以換單純一點的
(6) 製作時間: 2天
(7) 製作心得: 製作完成自己的網頁很有成就感,但是眼睛快壞掉了_(´ཀ`」 ∠)_

(1) 作業網址 :
http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445013
(2) 參考之版型網址:https://www.free-css.com/free-css-templates/page214/aironepage
(3) 設計主題 / 風格:自己的作品集
(4) 導覽列項目: 繪圖作品、攝影作品、包裝
(5) 遇到之問題: 花很久時間才了解怎麼換點進去之前瀏覽的照片
(6) 製作時間: 一個星期(就一點一點的慢慢做
(7) 製作心得:其實遇到困難自己突破的時候會很開心,只是花了不少時間去理解



Edited 1 time(s). Last edit at 12/13/2018 11:37AM by 1065445013.
(編輯記錄)

(1) 作業網址 :
C班:http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445078
(2) 參考之版型網址: https://templatemo.com/tm-481-elevate
(3) 設計主題 / 風格:極簡.插圖.照片
(4) 導覽列項目:照片 插圖
(5) 遇到之問題: 一直跳掉.
(6) 製作時間: 1天
(7) 製作心得: 看到成品很棒 wwwwwwwwwwwwwsmiling smiley



Edited 1 time(s). Last edit at 12/13/2018 11:27AM by 1065445078.
(編輯記錄)

(1) 作業網址 :
http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445051
(2) 參考之版型網址:https://templatemo.com/tm-506-tinker
(3) 設計主題 / 風格: 個人作品集網站
(4) 導覽列項目:首頁 關於我 我的作品 美食天堂
(5) 遇到之問題: 插入icon font的時候位置跑掉用了好久
(6) 製作時間: 一周
(7) 製作心得: 做完很有成就感,是自己的網頁啊!

http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445111

(1) 作業網址 : http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445111
(2) 參考之版型網址: 老師上課的範例版型
(3) 設計主題 / 風格: 個人的攝影作品
(4) 導覽列項目: 首頁 關於我 攝影作品 我的日常 天空 日記
(5) 遇到之問題: 過程中都做得很順,只是在最後完成的時候,圖片竟然跑掉了QQ....
(6) 製作時間: 2~3天
(7) 製作心得: 覺得學到非常多東西,其實做網站也沒有想像中的難,有個自己的網站真的很棒,很有成就感。

(1) 作業網址 :
C班:http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445019
(2) 參考之版型網址:
(3) 設計主題 / 風格: 作品集
(4) 導覽列項目:
(5) 遇到之問題: 沒有
(6) 製作時間: 兩三個禮拜
(7) 製作心得:希望這堂課能過

吳瑜宣
(1) 作業網址 :
C班:http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445018
(2) 參考之版型網址: https://www.cakemail.com/templates/
(3) 設計主題 / 風格:簡單,極簡
(4) 導覽列項目: 主業 攝影 日常生活 聯絡資訊
(5) 遇到之問題: 滿多問題的 文字顏色不知道窯如何改
(6) 製作時間: 1個禮拜
(7) 製作心得: 我覺得難的 因為早八所以常常遲到 有痕多都沒聽到 所以有很多不會的 希望以後可以準時起床 好好把網頁弄懂