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

週四, 六月 8. 2017

1.作業網址:http://mepopedia.com/~css105-2b/final/final-104544053

2.網站主題: 三峽老街
3.內容描述: 關於三峽老街的一切。
4.風格設計: 有點古早味帶點現代感。
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
026 : 照片修圖
053 : 內容、CSS
119 : 地圖規劃、交通資訊


6.團體製作心得:CSS好難找喔!!!(升天)

-----

1.網站主題: 三峽老街
參考版型 ─ http://shimabalife.jp/
2.內容大綱:
index : 關於三峽老街
delicacy : 店家與美食的推薦
attractions : 景點
map : 地圖

3.主要對象(分析):三峽老街觀光客

4.網頁架構圖(樹狀圖):
[img]http://i.imgur.com/xMMELyF.jpg[/img]



5.網頁版型設計圖
[img]http://i.imgur.com/mfSI12j.jpg[/img]





6.色彩規劃: 秘密♥

7.歷屆得獎分析(至少三組)
頭城老街:
http:[/url]//toucheng.yibnb.com/scenic.htm
呈現出小清晰又帶點溫馨感,
用了一些跨圖的排版格式和淡入的特效,
介紹住宿的內容皆採用幻燈片的方式,方便瀏覽,
顛覆了老街首頁的呆板印象。

7.歷屆得獎分析(至少三組)
頭城老街:
http://toucheng.yibnb.com/scenic.htm
呈現出小清晰又帶點溫馨感,
用了一些跨圖的排版格式和淡入的特效,
介紹住宿的內容皆採用幻燈片的方式,方便瀏覽,
顛覆了老街首頁的呆板印象。


內灣老街:http://163.29.3.94/neiwanrailline/Travel.html
打開首頁就有大自然芬多精圍繞在四週的感覺,
整體感受是環境美好空氣清晰,
設定幻燈片的方式瀏覽圖片,
每頁都有詳細的交通導覽資訊。

鶯歌老街:http://yingge.tw/
以鶯歌最主要的陶瓷特色為首頁的重頭戲,
作品排列整齊,作者及景點特別分為左右欄,
但還是有待加強QQ



8.組員名單(學號)
1045445026 王怡蘋
1045445053 陳雅琳
1045445119 蔡雨澄

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

週一, 六月 5. 2017

。1. 網站主題:鶯歌陶博館
參考版型:作業七
2.網站架構(導覽列名稱與檔名)
首頁
本館建築
藝術園區
公共藝術
外部連接


3.內容大綱:
介紹臺灣第一座以陶瓷為主題的專業博物館。
4.主要對象(分析):
大眾、設計人。

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



6.網頁版型設計圖wireframe:



7.色彩規劃:
背景圍藍色色調與青花瓷的圖騰


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

聽見,福 爾 摩沙 http://listento.tw/
用很特別的手法,用聲音去體會台灣傳統的風情與文化。
大山北月http://www.bighillnorthmoon.tw/cafe/
背景搭配悠閒音樂,讓人有悠閒的感覺,整體很有一致性。
和風北投‧行腳踏查 http://imagetaiwan.net.tw/link.html
圖文並茂,看完這個網頁能更了解北投文化,而排版也很舒適。

9.組員名單:
鄒家昕1045445002
張家瑄 1045445095

Re: [作業8] Free templates 試做

週四, 五月 25. 2017

作業網址:http://mepopedia.com/~css105-2b/hw08/hw08-1045445095
(1) 參考之版型網址:http://www.templatemo.com/(忘了哪頁了)
(2) 設計主題 / 風格: 回憶/ 清爽
(2) 遇到之問題: 有好多語法看不懂
(3) 製作時間: 6小時
(4) 製作心得: 我的媽呀!好多連結好多小細節的配色,覺得自己改很多了,但還沒改完...
但感覺有點成果很不錯!

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

週三, 五月 10. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445095


(2)製作心得:找圖想主題真的蠻費時的,而在放圖跟加文字一直看到重覆的語法印象會加深。

學號:1045445095

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

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw06/hw06-1045445095

(2)製作心得:覺得這特效蠻好玩的,但想再加一頁發現不知道怎麼加~~~

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

週三, 四月 26. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/midterm/midterm-1045445095

(2)製作心得:jQuery有好多有趣的語法喔! 用這個又很方便~


學號:1045445095

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

週三, 四月 19. 2017

作業網址
http://mepopedia.com/~css105-2b/midterm/midterm-1045445095。

(2)網站主題: LEGO
(3)導覽列選項/分類項目(對應檔名): 首頁 歷史介紹 電視電影 相關影片 外部連結
(2)設計對象: 大眾 &所有熱愛樂高族群
(3)色彩計畫: 鮮豔 活潑
(4)風格設定、預期成效:
以色塊呈現
預期讓別人能更了解它的歷史和最近的活動
(5)製作心得: 覺得這次最難的是配色與排版,如何讓畫面看起來更活潑有趣,又讓人好閱讀。
但認識蠻多語法的:)

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

週四, 四月 13. 2017

http://mepopedia.com/~css105-2b/hw04/hw04-1045445095
(1) 原網站名稱及網址:
三峽金牛角: http://www.xn--ehq777a47psovn2i.tw/front/bin/home.html
(2) KLG炸雞店 http://www.klgclub.com/?f=HegemonWorld
修改的原因:
●舊式的網頁版面
●很多flash無法觀看

(2)參考網站名稱與網址:
麥當勞 https://www.mcdonalds.com.sg/
肯德基 https://www.kfc.com/menu/meals/kids-meals
參考的原因:
●導覽列很清楚
●畫面很有整體性


(3)色彩計畫:以紅色為背景,以肯德基的色調。

(4)風格特色:簡約、活潑。

(5)製作時請特別注意以下數值,並比較與平面排版之差異:
字體設定(font-family)
導覽列:20px
內文級數:16px(內文)
網站寬度:960px

(6)製作心得:用ps排版蠻好玩的,終於做出來了~~~

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

週四, 四月 6. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw03/hw03-1045445095
(2)本頁設計重點: 可以了解樂高的創業歷史和最近上映不久的動畫電影。
(3)製作心得:覺得編排還是有點卡卡的,而配色有調整後有臂上一個作業進步。
學號 1045445095

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

週四, 三月 23. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445095
(2)網站主題/網站名稱:樂高
(3)分類項目(導覽列): 首頁 歷史介紹 電視電影 影片連結
(4)對象: 所有熱愛樂高族群
(5)色彩計畫:鮮豔 活潑
(6)風格設定、網頁看點、預期成效:
色塊 簡單
https://www.lego.com/en-us/life


(7)製作心得:本來以為改一些風格就好,發現蠻難的。

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

週四, 三月 16. 2017

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445053
2.設計概念與製作心得:
以藍色調為主,配合背景的插圖。心得:過程中有些忘記上學期的教學,翻了翻筆記。但做得很開心,很喜歡宮崎駿的作品^^
3.何謂HTML、DIV及CSS:
HTML:整體架構,編排語法
DIV:包覆網頁的語法
CSS: 美化網頁

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.lemonadela.com/
一頁形式的網站,黃色調且簡單明瞭,
畫面很可愛,很舒適~按鈕也設計成水果的樣子。
5.期待這門課的學習成果與收穫為何?
可以學到更多不一樣的地方~吸收更多的知識~

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

週二, 三月 7. 2017

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-1045445095


2.設計概念:
想到三月是油桐花開的季節,加上新竹苗栗一帶都為客家人居多。
製作心得:
過了一個寒假真的有些語法都忘了啦~但還號有筆記跟老師的網站~~
發現有時候要拿捏好整個畫面,不多特效不一定好看。

3.何謂HTML:HTML為網頁的整體架構,負責編排網頁上的語法
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://hakka.mmhot.tw/
有做很多連結,在文字圖片的分配是很舒服的。

5.期待這門課的學習成果與收穫為何?
希望能在css這塊能更熟練,而在學習不同版型的語法。

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

週二, 一月 10. 2017

(1)作業網址: http://mepopedia.com/~web105-2b/final/final-1045445095
(2).
1.製作作業的時間:4~5個小時
2.有無遇到的問題:有些文字間距問題,像是LINKS那頁文字就不會調整。
3.製作心得與感想:
因為這次和期中是完全不同的主題,風格比上次難掌握,所以在設計上花了比較多的心思,也查了許多網路上的教學,做了各種嘗試,希望能讓整體看起來比較符合主題的感覺
4.本學期於網頁設計課程上的收穫:
一開始完全不懂,到後來持續漸進的學會了語法構造,要怎麼編排設計,而在當製作的時候忘了什麼步驟也能很快在講義找出問題,雖然對網頁不算已經專精但至少會基本的操作了。
前置作業
(1)網站主題: 美國小天后Selena gomez
(2)導覽列架構設定



(3)尺寸:






(4)主要瀏覽族群: 15~30之間
(5)風格設定: 簡約風
(6)主色調,輔助色調: 暖色調,輔助色調黃色褐色
(7)製作動機: 喜歡這位偶像
(8)製作目的: 讓想了解這位偶像的人
預期效果: 大至上和自己想做的樣子差不多,但有些文字間距蠻有問題的。

(8)資料蒐集分析
http://rose86321.pixnet.net/blog
https://www.google.com.tw/search?client=ms-android-htc-rev&hl=zh-Hant-TW&oe=utf-8&safe=images&q=gomezselena+skyrock+com&source=browser-suggest&qsubts=1484037333350&action=devloc

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

週二, 一月 10. 2017

(4)主要瀏覽族群: 15~30之間
(5)風格設定: 簡約風
(6)主色調,輔助色調:暖色調
(7)製作動機:好像找的網頁資料以這為主題的都以繽紛為主
(8)製作目的: 在找的資料裡很少是介紹電影和連結,而大都是放一個照片或文章
預期效果:還算完整,但在連結那一頁,文字置中試了很多次還是沒有解決到。

(8)資料蒐集分析 http://rose86321.pixnet.net/blog 右欄有放置影片跟問卷是目前沒學過的

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

週四, 一月 5. 2017

(1).作業網址:http://mepopedia.com/~web105-2b/hw07/hw07-1045445095

(2).請回答以下問題:
1.網頁主題:美國小天后Selena
配色與風格設定:暖色調
2.有無遇到的問題?一開始座浮動一直不知道怎麼做css
3.製作感想:後來看了兩三次影片就清楚多了
4.製作作業的時間:2~3小時