Re: [期末作業]專題網站設計

週四, 六月 22. 2017

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445144
2.網站主題:台灣本土劇
3.內容描述:介紹台灣本土劇
4.風格設計:簡約風格,白色為底用圖片增加豐富性
5.組員名單:1045445144黃湘涵
6.個人製作心得:
一邊做一邊看了好多本土劇,做一做自己都想笑,第一頁是用本土劇的梗圖做成的,笑了好久,雖然過程遇到了很多困難,但是的很開心!!!


1.網站主題: 台灣本土劇

2.內容大綱: 本土劇的起源,常播本土劇的電視台、常出現的演員

3.主要對象(分析):大眾

4.網頁架構圖(樹狀圖):




5.網頁版型設計圖
版型參考: https://html5up.net/uploads/demos/big-picture/

6.色彩規劃:簡約的風格搭配許多圖來豐富畫面。底色以白色為主。


7.歷屆得獎分析(至少三組)

1.大山北月- http://www.bighillnorthmoon.tw/cafe/
他的一些細節方面我覺得很好看,還有加上他自己的插畫配音樂,整個感覺很舒服。

2.夜色台北 - http://www.taiwanonly.tw/index.html
很喜歡這種用影片呈現網頁的感覺,很少見,彷彿讓人也很貼近生活的感覺。

3. HiIsland 純淨之島-http://www.hiisland.idv.tw/#
我覺得他的風格非常可鰻吸引人的,裡面的圖都很精巧有趣,但是標誌不太明顯,可能看的人會不知道哪裡有標誌。


8.組員名單(學號) 104544144黃湘涵

Re: [ 作業8] Free templates 試做

週四, 六月 22. 2017

(1) 作業網址:http://mepopedia.com/~css105-2c/hw08/hw08-1045445144

(2) 參考之版型網址:https://html5up.net/uploads/demos/big-picture/

(3) 設計主題 / 風格:台灣本土劇,以期末作業的主題進行試作,介紹台灣本土劇的起源,和本土劇的電視台,走簡約的感覺。

(4) 遇到之問題:css的檔案夾很多,文字和背景....等有些東西好難找啊 ! 研究這個網頁花了好久時間,後來是都有改成功。

(5) 製作時間:所有完成時間約10小時

(6) 製作心得: 自己修改版型好難啊,密密麻麻的字看了好久頭超痛的,改圖片的時候,一張圖片大小沒注意尺寸,
整個版面就會跑掉, 遇到超多困難,需要的就是耐心跟時間阿,不過因為找的這個版型我很喜歡,所以做完蠻滿意的!!

Re: [作業07] HTML/CSS/jQuery 物件小動畫、燈箱效果

週三, 六月 21. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445144
(2)製作心得: 這個作業的製作時間比較長覺得難阿~~但也因此學到了很多新的東西,自己做物件小動畫蠻有趣的!!

Re: [ 作業06] jQuery動態換頁效果

週二, 六月 20. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw06/hw06-1045445144
(2)製作心得: 覺得真的很喜歡動態,動態的效果讓網頁更有趣,又學到一個東西了,謝謝老師!

Re: [作業05] jQuery動態網頁初探-fadein

週二, 六月 20. 2017

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445144
(2)製作心得: 這個效果我覺得很好用,讓網頁能更豐富的感覺

Re: [期中作業] HTML與CSS應用--網站實作

週四, 四月 20. 2017

回覆:
(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445144

(2)網站主題:
飛天小女警
(3)導覽列選項/分類項目(對應檔名):
飛天首頁 index.html 飛天小女警歷史由來,還有放了連結能讓大家點進去直接看到飛天小女警的特展。
劇情介紹 plot.html 介紹飛天小女警的劇情
登場角色 who.html 大致角色介紹,有主要角色和親友角色和反派角色,介紹人物的底色分別用三種顏色區分開來,讓人看得更清楚明白~
影片連結 video.html 提供飛天小女警的電影大家看,還有懷舊的主題曲及片尾曲~
相關連結 link.html 飛天小女警特展的連結,和官方網站、周邊商品網站,還放了其他有趣的相關網站!!

(2)設計對象: 大眾(有看過的沒看過的小孩大人老人看了都會覺得可愛又有趣!!)

(3)色彩計畫:
粉紅+白+黃 為主要色系,粉紅色最多,想讓人覺得看起來很可愛,再加點黃色與白色襯托,就能在顯得更加活潑,整個就是充滿明亮,少女心的網頁阿~

(4)風格設定、預期成效:
對於這個卡通大家的想到的應該就是可愛、有趣、活潑、角色鮮明,雖然我本身喜歡可愛的東西但是卻不偏愛粉紅色,不過講到飛天小女警就覺得她好適合粉紅色阿~~不知不覺就用了粉紅色為主視覺!!配色方面也希望大家看了會喜歡!
(5)製作心得:
覺得好玩啊~~第一頁還很痛苦的做著,可是做到後面反而會想越放越多東西,想多多介紹飛天小女警給大家看,做到後面真的覺得蠻有趣的~這次作業感覺更有成就感了,過程中都是小問題蠻順利的,最煩的是我的電腦做到一半會突然當機太恐怖了!還好已經習慣做一點存一點了!!

Re: [作業03] HTML與CSS練習-1.資料整理--以DIV製作表格效果。 2.其他頁面完成

週四, 四月 20. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw03/hw03-1045445144
(2)本頁設計重點:把上次一些不太懂的地方弄好,整個頁面弄整齊,繼續完成剩下頁面!!
(3)製作心得:
製作的時候遇到有語法沒注意到而跑掉,找了好久才找出問題,結果只是多打了一個div
,頓時覺得....好笨阿!語法真是博大精深阿!一個東西打錯就會有東西跑掉。還好至少找出問題了~~這次做的也有比上次順暢!棒棒~

Re: [作業02] HTML與CSS練習 --首頁實作篇

週三, 四月 19. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw02/hw02-1045445144

(2)網站主題/網站名稱: 飛天小女警

(3)分類項目(導覽列):

飛天首頁 
劇情介紹 
登場腳色 
影片連結 
相關連結 

(4)對象: 大眾

(5)色彩計畫: 整體用粉紅色及一點點黃色點綴,呈現小女警活潑可愛的感覺

(6)風格設定、網頁看點、預期成效:

風格設定:粉紅色黃色白色,呈現活潑可愛的感覺

網頁看點:讓看過或沒看過這個卡通的人點進來都會洗換上飛天小女警

預期成效:讓大家了解這個卡通的劇情、認識可愛的腳色

(7)製作心得:
做首頁真的總是花了我非常久的時間,前置作業還要找非常多資料,前前後後可能就10個小時,我真的做得很慢吧!css設定超容易搞混的!!
但是做完第一頁就有很開心的乾覺雖然好累!滿有成就感的~~

Re: [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型(新增CSS3練習)

週一, 四月 17. 2017

1.作業網址: http://mepopedia.com/~css105-2c/hw01/hw01-1045445144
2.網頁主題:飛天小女警

3.設計概念與製作心得:

設計概念-用卡通主角作為底圖,這次教的圓角設計我很喜歡,可以讓死板的方框變成有點可愛圓角造型。標題用陰影來強化它;裡面的框是使用白色,調整透明度可以看到背景遮住的地方。整體可愛色彩豐富。

製作心得-不會很難也有很多東西可以玩玩看,與之前的作業2比起來不同的是--多了圓角及陰影及透明度,背景還放了底圖,使網頁會更加豐富。

4.何謂HTML、DIV及CSS:
●HTML:是網頁的架構
●DIV:是區塊的標籤可以將文字圖片包成物件
●CSS:可以美化網頁的程式語言,創造文字樣式,版
面,色彩,各種效果,字體大小等。

5.附上至少一個覺得設計很有質感的網站,並說明原因:
http://www.species-in-pieces.com/#
這個叫 In Pieces 的美麗網站為你介绍了地球上 30 種美麗濒危動物,有一次不小心看到了這個網站,非常驚艷!他用網站做出的動畫效果真的好美~ 裡面有30 種動物组成的輪盤,還可以看到這些動物在自然界的生存状况,它所受到的威協,快點進去看就知道了!!


6.期待這門課的學習成果與收穫為何:
希望這學期盡量可以跟上進度,我網頁做得不很好也做很慢,但是希望以後可以架設很美的網頁!

Re: [期末作業] 以雙欄為主的網站設計

週三, 一月 11. 2017

(1)作業網址:
(2) http://mepopedia.com/~web105-2c/final/final-1045445144/moomin.html
1.製作作業的時間:24小時以上
2.有無遇到的問題:非常多
3.製作心得與感想:很累 但也很有成就感
4.本學期於網頁設計課程上的收穫: 學到很多網頁設計的排版方式,和css設定的建構


前置作業
(1)網站主題:嚕嚕米
(2)導覽列架構設定





(3)尺寸:


(4)主要瀏覽族群:喜歡嚕嚕米 看動畫的人
(5)風格設定:繽紛活潑可愛
(6)主色調,輔助色調: 亮色、黃色白色淡灰為主、其他粉色系為輔(框線及字)
(7)製作動機:很喜歡嚕嚕米,想介紹給大家知道,所以想做有關嚕嚕米的網站。
(8)製作目的:讓大家更了嚕嚕米的相關資訊
預期效果:讓更多人了解嚕嚕米並喜歡我做的網站

(8)資料蒐集分析
http://www.yoshi850.com/pages/%E8%8A%AC%E8%98%AD%E7%B2%BE%E9%9D%88%EF%BC%9A%E5%9A%95%E5%9A%95%E7%B1%B3

http://anita6426.pixnet.net/blog/post/42325297-%E3%80%90%E5%B1%95%E8%A6%BD%EF%BC%8E%E5%8F%B0%E5%8C%97%E3%80%91%E4%BE%86%E8%87%AA%E8%8A%AC%E8%98%AD%E6%9C%80%E6%BA%AB%E6%9A%96%E4%BA%BA%E5%BF%83%E7%9A%84%E5%9A%95%E5%9A%95%E7%B1%B3

http://jessie73319.pixnet.net/blog/post/427418234-moomin%E5%9A%95%E5%9A%95%E7%B1%B3%E7%B2%BE%E9%9D%88%E7%89%B9%E5%B1%95

Re: [期末作業] 以雙欄為主的網站設計

週三, 一月 11. 2017

(1)作業網址:
(2) http://mepopedia.com/~web105-2c/final/final-1045445144/moomin.html
1.製作作業的時間:24小時以上
2.有無遇到的問題:非常多 ,但同學都很熱心幫助我幫我找出問題我很感謝他們
3.製作心得與感想:很累 但也很有成就感
4.本學期於網頁設計課程上的收穫: 學到很多網頁設計的排版方式,和css設定的建構,練習自己排版,
能夠自己做出一個網頁是我以前不可能會的事,而且對於未來很有幫助 ,收穫良多。


前置作業
(1)網站主題:嚕嚕米
(2)導覽列架構設定

[img]http://i.imgur.com/6w0mm6d.jpg[/img]




(3)尺寸:

[img]http://i.imgur.com/5Y9KbKl.jpg[/img]

(4)主要瀏覽族群:喜歡嚕嚕米 看動畫的人
(5)風格設定:繽紛活潑可愛
(6)主色調,輔助色調: 亮色、黃色白色淡灰為主、其他粉色系為輔(框線及字)
(7)製作動機:很喜歡嚕嚕米,想介紹給大家知道,所以想做有關嚕嚕米的網站。
(8)製作目的:讓大家更了嚕嚕米的相關資訊
預期效果:讓更多人了解嚕嚕米並喜歡我做的網站

(8)資料蒐集分析
http://www.yoshi850.com/pages/%E8%8A%AC%E8%98%AD%E7%B2%BE%E9%9D%88%EF%BC%9A%E5%9A%95%E5%9A%95%E7%B1%B3

http://anita6426.pixnet.net/blog/post/42325297-%E3%80%90%E5%B1%95%E8%A6%BD%EF%BC%8E%E5%8F%B0%E5%8C%97%E3%80%91%E4%BE%86%E8%87%AA%E8%8A%AC%E8%98%AD%E6%9C%80%E6%BA%AB%E6%9A%96%E4%BA%BA%E5%BF%83%E7%9A%84%E5%9A%95%E5%9A%95%E7%B1%B3

http://jessie73319.pixnet.net/blog/post/427418234-moomin%E5%9A%95%E5%9A%95%E7%B1%B3%E7%B2%BE%E9%9D%88%E7%89%B9%E5%B1%95[code]

Re: [作業07] 以Float:浮動,製作雙欄網頁

週三, 一月 11. 2017

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445144/moomin.html

(2).請回答以下問題:
1.網頁主題:j嚕嚕米介紹
配色與風格設定: 配色以繽紛的色彩來配色,風格可愛又活潑~
2.有無遇到的問題:有,雙欄調整了好久,需要花比較久時間
3.製作感想 :雙欄網頁讓我有點難而且需要花很多耐心去用,但是這個功能可以把本來很長的頁面簡化成瀏覽比較方便的網頁,很不錯!錨點連結的設定蠻方便的~能讓看我們網頁的人覺得更快更方便~
4.製作作業的時間 :6小時

Re: [作業06 ]表格的製作美化與資料整理

週三, 一月 11. 2017

(1).作業網址 :http://mepopedia.com/~web105-2c/hw06/hw06-1045445144/draw.html

(2).請回答以下問題:
1.網頁主題:嚕嚕米
配色與風格設定: 繽紛的顏色豐富版面
2.有無遇到的問題? 還可以
比之前做的順利了一點
ˇ但複製推紐時一直失敗,臉書跑不出來
3.製作感想 : 做自己喜歡的角色很有趣很開心
4.製作作業的時間 : 4小時

Re: [作業05] 繞圖排文與推文按鈕的應用

週二, 一月 10. 2017

(1).作業網址 :http://mepopedia.com/~web105-2c/hw05/hw05-1045445144/who.html

(2).請回答以下問題
1.網頁主題:嚕嚕米moomin
配色與風格設定:以繽紛色系為主,彩色系列

2.有無遇到的問題? 推紐一開始不太會用,最後研究出來了哈哈
然後我的FB點不出來

3.製作感想 :每次作業我都做好久而且都會有一些障礙,但做我喜歡的腳色我很喜歡
4.製作作業的時間:4小時左右

Re: [作業04] 以CSS製作網頁導覽列

週二, 一月 10. 2017

(1).作業網址 :http://mepopedia.com/~web105-2c/hw04/hw04-1045445144/moomin.html
(2)
1.導覽列配色與風格設定:
這次我做的是嚕嚕米
配色是以繽紛的風格,整體活潑可愛,跟夢幻的嚕嚕米一樣可愛

2.有無遇到的問題:

導覽列會一直跑掉,還好有強大的同學幫助後來終於做好了

3.製作感想(你認為導覽列的意義為何?)

可以讓別人知道你的網頁有什麼資料
能夠很淺顯易懂的瀏覽自己的網頁
這次做我很喜歡的嚕嚕米,我也找了很多資料想分享給大家
真的超可愛的,很開心


4.製作作業的時間
5~6個小時
哈哈哈哈找資料花蠻久時間!