Hus,Ching-Chiech 的部落格

Re: [ 作業8] Free templates 試做

週四, 六月 1. 2017

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

(2) 參考之版型網址：http://www.free-css.com/free-css-templates/page211/bocor

(3) 設計主題 / 風格：簡約的南寮風情以及介紹

(4) 遇到之問題：眼花撩亂....==光找個顏色改個檔案就花了不少時間，有點累人哈哈

(5) 製作時間：大約3小時不間斷的話

(6) 製作心得：挺累的，至於感想其實沒太大的想法哈哈，只能說做出這些網頁的人真的好猛...挺佩服他們的眼睛

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 01:25 | 迴響 (0) | 引用 (0)

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

週四, 五月 18. 2017

(1)作業網址：http://mepopedia.com/~css105-2c/hw07/hw07-1045445033

(2)製作心得：多災多難~總之順利解決了

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 12:09 | 迴響 (0) | 引用 (0)

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

週二, 五月 2. 2017

(1)作業網址：http://mepopedia.com/~css105-2c/hw06/hw06-1045445033
(2)製作心得：不難...只是找主題花了不少時間，整體算滿意~

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 01:39 | 迴響 (0) | 引用 (0)

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

週四, 四月 27. 2017

(1)作業網址： http://mepopedia.com/~css105-2c/midterm/midterm-1045445033
(2)製作心得：還蠻簡單的,效果又不錯滿合胃口的

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 10:10 | 迴響 (0) | 引用 (0)

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype

週四, 四月 13. 2017

作業網址：http://mepopedia.com/~css105-2c/hw04/hw04-1045445033/hw04-1045445033.html

1.須修改網站:http://www.dark.com.tw/page.aspx?id=1
修改地方:
●東西雖然棒，但版面大大降低質感
●字體稍微有點大，看起來很吃力
●首頁讓人感覺雜亂...
●整體看不到統一性....
●太直白，有點強迫堆銷的感覺，讓人有些畏懼
●最後...其實圖片拍的還不賴XD

2.優良網站名稱及網址：
http://www.diehlgroup.com/
風格明確，時尚不失格調，讓人覺得有點帥XD基本都以幾何以及線條表現，非常的乾淨不多餘。

https://www.kentisburygrange.com/
個人都偏愛這種的，各個不分明確且優美，簡單歸簡單的版型卻給人龐大的吸引力。

https://www.designweekportland.com/#
這款讓人感覺有點點夢幻，很有意思的沒有主色調，這樣不論甚麼圖放上都不會讓人覺得排斥，十分有意思。

https://www.wallercreek.org/about/
【清新自然】這4個字幾乎就代表了他的全部，這是在我選的網站之中最平凡的，但不是很差的那種，一種麻雀雖小五臟俱全非常有內涵的網站。

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 22:09 | 迴響 (0) | 引用 (0)

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

週三, 四月 5. 2017

(1)作業網址：http://mepopedia.com/~css105-2c/midterm/midterm-1045445033
(2)網站主題：角落生物すみっコぐらし

(3)導覽列選項/分類項目：

●index：(首頁) 我使用很清楚的可愛風格及顏色，給人第一印象的視覺感，刺激觀賞著的興趣。

●about：(人物) 簡單並醒目的呈現，以非常基礎不花的方式,無負擔的讓觀賞者品味每個可愛的腳色們。

●tourism：(周邊) 互動式的吸引手法，使人有衝動購買的念頭，可愛的圖示之外還貼心地分享app供大家在第一時間了解新資訊。

●video：(宣傳) 各式新商品宣傳都在這裡，特地的尋找左上可供人選擇的按鍵，增加便利性以及多樣的選擇性，除此之外心動的觀賞者們皆可點擊下方萌物商品進一步的了解以及購買。

●story：(相關) 內容有サンエックス株式会社的詳細資料外，我也在其中提供桌布.貼圖以及最新成員等最新消息，讓角落迷們更加地為它瘋狂，如有喜歡サンエックス株式会社其他系列的觀賞者們，我也在此提供相關資訊福利歐!!

(4)設計對象：大人小孩男女老少 (大眾)

(5)色彩計畫：

可愛風格多數以(粉色)系為主，
在此我加入了需多中間色調(灰色)，
也些字體則採用咖啡色(角落生物的邊線色)非常融洽不排斥的視覺感，
細小字使用藍色及灰色兩色互相搭配，具有統一感，個人認為非常適合

(6)風格設定、預期成效：一定就是大大的分享這可愛的小東西，風格文字方面以簡單為主，背景花費的不少時間編排及控制平衡，希望觀賞者們多多的支持以及看見我付出的這些努力搂~

(7)製作心得：不斷不斷的練習之後，逐漸的越來越清楚使用的方法以及各個設定，在尋找過程中是最不容易的，我尋找了許多網站找了日本的官網後，花了許多時間解讀，從她每項按鍵以及網站各個物件都瀏覽過後，做出了這項作品，除此之外單單編排我就花了很長的時間，一直不斷地儲存刪除儲存在刪除，單單一個頁面就花費了許多小時修正，並請他人給意見再修正...一直重複，真的挺累人的，對於成果我還算滿意，希望老師及觀賞著們也注意到我的用心。

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 21:34 | 迴響 (0) | 引用 (0)

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

週四, 三月 30. 2017

(1)作業網址：http://mepopedia.com/~css105-2c/hw03/hw03-1045445033

(2)本頁設計重點：將課程進度完成~(重點) 繼續我的可愛風....

(3)製作心得：說實在的不難,只不過時間要花多一點,畢竟需要新增2頁了,繼續加油~

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 11:12 | 迴響 (0) | 引用 (0)

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

週三, 三月 22. 2017

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

(2)網站主題/網站名稱：角落生物 Sumikko Gurashi

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

首頁ホーム初步介紹,選單按鈕等等可愛小物件

人物キャラクター人物方面更深入讓大家了解

周邊周辺推廣商品讓大家愛不釋手

宣傳プロパガンダ發揚角落~傳播角落~

相關関連しました角落的相關訊息都在這裡

(4)對象：大眾

(5)色彩計畫：使用較為可愛的色調加上圖片支援,使整體感覺舒適且想閱讀它～

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

風格設定：淡色系發展,可愛且具有活力感

網頁看點：吸引人對於萌萌物的喜愛

預期成效：發揚角落讓更多人認識～入這深深的角落坑

(7)製作心得：
這真的是男生做的...這真的是男生做的...這真的是男生做的...想製作這主題全權是為了女朋友的喜愛,時常都會為了這些萌物傷了不少荷包錢XD希望其他男生(有女友的)也遭受迫害~嘿嘿嘿ㄟ,製作這網站頁面大約花了3-4小時摸清楚,滿簡單的只是會一直找不到東西和搞混,總之過程都滿順利的~

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 11:49 | 迴響 (0) | 引用 (0)

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

週四, 三月 9. 2017

1.網址 : http://mepopedia.com/~css105-2c/hw01/hw01-1045445033

2.設計概念與製作心得：

LEGO樂高,應該沒有人不認識樂高吧~對於許多兒童,成年人都是一段回憶吧~

3.何謂HTML、DIV及CSS:

HTML 網頁架構
DIV 文字、圖片、任何東西包起來作為標籤，就會被瀏覽器視為物件
CSS 網頁美化

4.附上至少一個覺得設計很有質感的網站，並說明原因

https://x.company/

非常的簡單,並且讓人理解又乾淨,使人非常喜愛

5.期待這門課的學習成果與收穫為何?

又是一個新的開始,期許自己能夠跟得上進度以及盡快的了解,又要請老師多多指教了

作者許敬杰發佈於 105-2《中國》竹視傳二C-進階網頁設計時間 10:26 | 迴響 (0) | 引用 (0)

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

週三, 一月 11. 2017

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445033/links.html
(2).請回答以下問題：
1.網頁主題：配色與風格設定：主要配色灰、紅兩色搭配，搭配主題(酸黃瓜先生)
2.有無遇到的問題?尚可，腦子到這裡還算能繼續運轉
3.製作感想偶爾有些搞混...但大致上這單元還不算太難
4.製作作業的時間半小時吧~

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 11:11 | 迴響 (0) | 引用 (0)

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

週五, 一月 6. 2017

(1).作業網址：http://mepopedia.com/~web105-2c/final/final-1045445033

(2).請回答以下問題：

1.導覽列配色與風格設定：

《Mr. Pickles》
這次的主題比較偏向恐怖風格~他是一隻撒旦養過的牧羊犬，
卡通隱含(其實都很明刀明槍)了太多撒旦教、光明會和神秘學的訊息，
和每集必有的血腥殺人或惡魔祟拜鏡頭，
所以很快就吸引了數以萬計的陰謀論者的愛戴和觀看。
背景就放跟牧羊犬相似的配底~
一開始也是因為純黑色對於眼睛太過刺激，
所以用比較緩和的灰色~~~~
希望觀看的人都跟我一樣喜愛他~

2.有無遇到的問題?

對於到現在雖然網頁設計基本上是沒有太大的困難，
但真的好亂...時常會忘記要做甚麼然後開始放空...哈哈
但是一有問題同學就是最好的維基百科，
真的很謝謝他~

3.製作感想

這次用我一直很喜歡的國外限制級動畫，
《Mr. Pickles》絕對是一部兒童不宜的動畫，
充斥各種噴血、猥褻的畫面，
隨著劇情發展每每都有一種「God！我到底看了什麼！」的感覺，
雖然獵奇到不行，但這樣的美式幽默真的很舒壓呢！

4.製作作業的時間

大概1~2天，扣除吃喝玩樂

(3).導覽列架構設定

(4).尺寸與架構設定

(5).製作內容：

A.(檔名:index.html)

第一頁主要是開頭，
希望藉由此頁心讓大家初步了解《Mr. Pickles》。

B.(檔名:works.html)

第二頁則是介紹《Mr. Pickles》動畫中幾位基本重要腳色。

C.(檔名:video.html)

第三頁展示出每篇作品的大綱介紹，
讓人不知道內容但可以稍微的看一下，
知道對於此篇有沒有興趣。

D.(檔名:links.html)

第四頁也就是貼心的超連接，
基本上我設計這網站的風格都差不多，
因為他很單純，雖然看似簡單色調，
但我在視覺方面做了不少努力以及調整。

E.(檔名:story.html)

最後就是整理，
還有對於這個作品的看法和推薦的內容。

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 16:22 | 迴響 (0) | 引用 (0)

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

週五, 十二月 23. 2016

(1).作業網址：http://mepopedia.com/~web105-2c/hw06/hw06-1045445033
(2).請回答以下問題：

1.網頁主題：
Mr.Pickles
2.有無遇到的問題?
暫時沒有
3.製作感想:
有同學真好
4.製作作業的時間:
1小時

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 10:09 | 迴響 (0) | 引用 (0)

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

週三, 十二月 14. 2016

(1).作業網址：http://mepopedia.com/~web105-2c/hw05/hw05-1045445033

(2).請回答以下問題：

1.網頁主題：配色與風格設定：跟上一個作業相同歐~!

2.有無遇到的問題? 忘了老師說過fb必須都上網才開得起來，花了一下時間，除此之外都順順的~

3.製作感想還滿有趣的，只是每次都看的眼睛好花啊~~~

4.製作作業的時間 20分鐘左右~

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 11:11 | 迴響 (0) | 引用 (0)

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

週三, 十二月 7. 2016

(1).作業網址：http://mepopedia.com/~web105-2c/hw04/hw04-1045445033

(2).請回答以下問題：
1.導覽列配色與風格設定：

《Mr. Pickles》
這次的主題比較偏向恐怖風格~他是一隻撒旦養過的牧羊犬，
卡通隱含(其實都很明刀明槍)了太多撒旦教、光明會和神秘學的訊息，
和每集必有的血腥殺人或惡魔祟拜鏡頭，
所以很快就吸引了數以萬計的陰謀論者的愛戴和觀看。
背景就放跟牧羊犬相似的配底~
一開始也是因為純黑色對於眼睛太過刺激，
所以用比較緩和的灰色~~~~
希望觀看的人都跟我依樣喜愛他~

2.有無遇到的問題?

中間有些設定小失意的一下，大致上沒有太多的困難~(目前

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

這次用我一直很喜歡的國外限制級動畫，
《Mr. Pickles》絕對是一部兒童不宜的動畫，
充斥各種噴血、猥褻的畫面，
隨著劇情發展每每都有一種「God！我到底看了什麼！」的感覺，
雖然獵奇到不行，但這樣的美式幽默真的很舒壓呢！

4.製作作業的時間

大概1~2小時

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 10:19 | 迴響 (0) | 引用 (0)

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

週二, 十一月 22. 2016

(1)網站主題：蠟筆小新
http://mepopedia.com/~web105-2c/midterm/midterm-1045445033

(2)製作動機：

其實跟第三次作業想法差不多，
基本想法是由童年而設計，
童年時因為從小是由外公.外婆帶大，
所以大部分的時間不是在家裡附近玩耍不然就是自己一個人看電視，
可以說小時候都是這些卡通帶著我成長，
算是一個無法抹滅的回憶，
我十分的珍惜，
但也因為現在的進步，
很少小朋友看卡通.玩玩具都把時間花在3C上，
實在非常可惜，
變得卡通和玩具已經落伍，
也希望能做做這主題來回味我的童年吧，
也實在看到有些捨不得，
時間過得很快很快。

(3)製作內容：

風格用最最引小朋友且同樣色系的方式呈現，
蠟筆小新雖然很色很懶惰，
但看過他許多影片.卡通後就會發現，
他是個十分有正義感，
又熱心助人的小朋友，
看他的作品有時熱血，
有時感傷，但大多數他帶給許多人歡笑，
雖然這些比較偏理念，
但在設計時，
我還是以簡約，大眾，鮮明為主要搭配。

1.首頁 (檔名:index.html)
2.主角 (檔名:protagonist.html)
3.人物 (檔名:character.html)
4.作品 (檔名:works.html)
5.歌曲 (檔名:music.html)

最後的問題還是在英文這方面...受到些微阻礙，但實際上做得滿順手的，大概花了1天吧~中間摸了不少下XD

(4)資料蒐集分析

◎相關網站列表與分析：
基本上都是參考維基和google居多，
其實參考這些就很足夠了，
方便方便又快速也很清楚製作方向。

作者許敬杰發佈於 105-1《中國》竹視傳二C-網頁設計時間 22:01 | 迴響 (0) | 引用 (0)