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

Advanced

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

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

[color=#990000][期中作業] 以單欄為主的網站設計[/color]



1. 一、製作說明:


1.請參考期中之前教過的做法及講義,製作以單欄為主的網站

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名) 1001445ooo

3.題目自訂

4.需自行設計圖片,製作網站內容

5.需以DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等

6.至少完成兩頁的內容,若內容完整,且全部頁面完成,最多加6分。

[color=#993300]7.若真的不會做,可下載附檔,參考老師的檔案,加以修改完成,但圖片及文字內容不可一樣。
(附檔有兩組:
一組是以圖片按鈕為主,需自行製作圖片
一組是以導覽列為主(色彩編排),請選擇一組參考製作)[/color]

8.製作完成上傳至FTP

9.本次作業的重點在於:

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]



2. 二、評分標準與製作檢核


1.        HTML的正確架構(DIV的使用) 20%
2.        整體設計美感(CSS運用,風格及配色,字體設定、圖片製作) 30%
3.        導覽列的正確性(含導覽超連結)10%
4.        h1或h2的使用 5%
5.        class(類別)的運用 5%
6.        HTML Title的設定 5%
7.        Footer的版權宣告 5%
8.        內容完整的兩頁(至少)的連結 10%
9.        製作說明 10%

加分:
1.內容完整度,連結頁面全部做完最多加6分,最多100分。


3. 三、繳交作業方式


[color=#CC0066]1.製作完成後,檔案命名方式:[/color]

[color=#669900]期中作業FTP上的資料夾為:midtern

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

資料夾內含:
(1).首頁命名為index.html
(2).其他頁面請自行命名,但需注意命名為則,不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < midterm-學號 > 的資夾內[/color]


[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]

[color=#0066CC]前置作業[/color](10/19)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:



[color=#0066CC]完成品[/color](11/08前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間


[color=#CC0066]4.請務必在11/08前回覆,否則為遲交[/color]


4. 四、期中作業進度參考


第七週 10/19 前置作業,題目確定,資料蒐集與分析等
第八週 10/26 決定排版形式、尺寸、圖片製作
第九週 11/02 HTML DIV與CSS設定
第十週 11/09 11/8之前將期中作業上傳繳交



5. 五、同學常見問題之注意事項



隨時補充:

1.網頁圖檔不宜太大,否則網頁開啟速度會變慢,請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡,修改圖檔的大小至100KB以下,100KB會佔1Mb頻寬(每秒鐘),以此類推。

2.有文字出現的區塊,要記得設定padding,文字才不會跟邊框黏在一起。

3.導覽列的超連結


請記得先將第一頁所有的連結都先設定好,再以另存新檔的方式,存成其他檔案,如此就不用每次都要設定超連結。

4.亂碼問題,放在 <head> </head> 之間
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 編碼方式記得存utf-8

5.CSS檔案的路徑,放在 <head> </head> 之間
<link rel="stylesheet" href="style.css" media="screen" />
6.檔案宣告,在HTML檔最前面放 <!DOCTYPE html>
7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

9.使用進階語法,需注意若直接以Dreamweaver製作,彈性較小,會比較難修改。

10.檔案被刪除的問題非常嚴重,尤其是B班,請再仔細檢查有無被刪檔,若有麻煩再上傳

=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================



Edited 12 time(s). Last edit at 11/02/2011 08:32AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - midterm-sample.rar (3.1 MB)
完成品

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445042

(2).
1有無遇到的問題:發現用"DW"做出來效果有時跟預覽出來不一樣,還蠻困擾的

2.製作感想 :很好玩,能一頁一頁把網頁做出來真的很有成就感,希望老師能教更多東西,讓我們能學更多

3.製作作業的時間 :沒在算耶,開心時就把它開出來看一下修一下


[hr]


(1)網站主題: 用童話風格設計一個個人網站。
(2)製作動機: 一直以來都很喜歡關於童話的故事,想藉此向大家推廣,且另外衍生自己專屬的二次創作,也把之前創作的東西發表於此。

(3)製作內容:關於此網站和作者、你不知道童話背後、人物介紹、相關作品。

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.po-wen.com/index.asp

一進去的版面還蠻有趣的,也讓人很清楚的知道他的繪畫風格。

◎相關網站列表與分析: :http://98.to/niki420/
這是我蠻喜歡的一個繪者的網站,一樣是ALICE的愛好者。
網頁一開始進去後視整個版面的,要在點進去才是網站內容,這個方是我蠻喜歡的,有很多網站也都是這樣設計,他話的圖都很可愛,只是網站版面有點小,且我在Google只能看到他一開始的版面就不能再按進去的樣子(?



Edited 1 time(s). Last edit at 11/04/2011 06:25PM by JinJin.
(編輯記錄)

完成品

http://mepopedia.com/~web100b/midterm/midterm-1001445049/

在DREAMWEAVER裡複製貼上文字或打字都覺得它跑好慢,要等好久。

自己獨立完成一個網頁很有成就感,還可以使用自己最喜歡的顏色做排版設計,覺得很開心。

6天中斷斷續續製作完成。(沒仔細算過花多少時間,但常常花了很多時間才只做好一點點東西……)


♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥


(1)網站主題:日本北海道。
(2)製作動機:很喜歡日本北海道,一直希望能有機會去北海道玩雪,親眼目睹美麗的花海,藉此機會向大家推薦,一起認識北海道。
(3)製作內容:以日本北海道為中心,介紹北海道的歷史故事、地理位置、觀光景點、美食……等。
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.pac-group.net/new/hokkaido/?OVRAW=%E5%8C%97%E6%B5%B7%E9%81%93&OVKEY=%E5%8C%97%E6%B5%B7%E9%81%93&OVMTC=advanced&OVADID=50595409541&OVKWID=781312318041&OVCAMPGID=876815541&OVADGRPID=26794005429
按鈕設計充分表現出日本特色與風格。

◎相關網站列表與分析:
http://www.tomamu.com.tw/eWeb_tomamu/html/index.htm
右上角使用書籤的方式表現換頁很特別,整體配色淡雅舒適,內容介紹許多北海道景點。



Edited 1 time(s). Last edit at 11/08/2011 09:37PM by lilac.
(編輯記錄)

完成品

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445057

PS:重新請老師再傳一次了

(2).
1有無遇到的問題:後來傳到作業上面的時候又和原本做的不太一樣了..........圖片都亂掉,不知道是不是路徑的關係....

2.製作感想 :剛開始覺得很複雜研究很久...但是做出來的時候很感動,但最後好像又是失敗的,因為排版全亂掉

3.製作作業的時間 :沒有算欸...花了蠻多時間的

*我已經合併了,可是不知道如何把沒有合併的留言刪掉
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------


(1)網站主題: 我家的狗
(2)製作動機: 我很喜歡狗,想從我家的狗延伸到各種品種的狗來製作網頁
(3)製作內容: 介紹狗的種類等等
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.j-period.com/jp/
網頁表現出淡淡的日本味以及極簡舒適感

◎相關網站列表與分析:
http://www.doctordog.org.tw/
設計上表現出狗狗歡樂的樣子,以及各種連結還蠻實用的



Edited 1 time(s). Last edit at 11/09/2011 02:35PM by Lovry.
(編輯記錄)

MEPOERs said:
HP: 同學,你推薦的 j-period 網站很不錯,很有風格也很有質感。我已經bookmark在我的瀏覽器了!而且裡面的 CSS 的用法也很值得學習。
期中作業完成網頁
http://mepopedia.com/~web100b/midterm/midterm-1001445063

1.想加入一些音樂!但未成功
2.做完2頁之後~就不知不覺的就想把其他瀏覽頁面做完!雖然沒有純熟的技巧,但總算可以自己製作一個網頁了!而且字字句句幾乎都是自己想的!雖然過程繁複!但感覺很有收穫
3.加總約18個小時吧?

[hr]

(1)網站主題: 台灣流浪動物之家
(2)製作動機:流浪動物的一生不易被社會大眾看見,流浪動物即使被送到相關單位收養,卻還是有可能面臨安樂死的下場。藉由網頁設計的製作,希望能將流浪動物的相關訊息傳達給大家。
(3)製作內容: 台灣各地流浪動物之家的位置及聯絡方式+流浪動物的生命故事+急需被認養的動物資料照片+如何照顧寵物+愛心捐款的辦法+……
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.doghome.org.tw/phpbb2/indexnew.php
這個網站運用柔柔淡淡的顏色,讓我可以舒緩難過的情緒。各式連結也整理得很清晰,讓我可以一目瞭然地找到想要瀏覽的業面。呼籲語”以領養代替購買 以結紮代替撲殺”也充分表達愛護動物的理念。

◎相關網站列表與分析:
http://www.hsapf.org.tw/
http://www.tnadc.gov.tw/collecting/index.html
http://animal.coa.gov.tw/html2/index.php
這些網站都能夠清楚的找到需要被認養的動物資料和照片,相關的捐款辦法、最新活動都能在此找到瀏覽頁面,這些網頁不但提醒我們要愛護動物,更能為流浪動物發聲。



Edited 1 time(s). Last edit at 11/08/2011 11:26PM by 陳醬子.
(編輯記錄)

MEPOERs said:
JinJin: 內文字的設定再小一點會更有質感喔!
陳醬子: 嗯嗯!因為製作時選用的字體看起來還可以,但許多電腦似乎沒有,所以剛剛也嚇到!too big~我下次會多加注意!謝謝
網站成品:

(1) http://mepopedia.com/~web100b/midterm/midterm-1001445123/

(2).
1有無遇到的問題
1.老師,為什麼我已經上傳了 可是網址打開卻什麼都看不到?
2. footer的背景都出不來... 試了好幾次都不行 ... 怎麼會這樣勒..?
3.首頁的圖片要怎麼對齊.. 按鈕那個部份如果用靠右他會變成下一行... ?
2.製作感想
好像越來越上手了,也很喜歡!!! 希望能學更多更多 !!!
3.製作作業的時間
5 .6個小時


[hr]


(1)網站主題: 復古式餐廳
(2)製作動機: 想幫自己家的餐廳做網頁
(3)製作內容: 介紹自己家的餐廳
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.tdwa.com/index.html

◎相關網站列表與分析: http://www.windcitymoon.com.tw/
我覺得排版有點亂..... 連結也有些問題....



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

MEPOERs said:
JinJin: 我看到的是正常的!而且做得很好喔!
完成品

(1)作業網址: http://mepopedia.com/~web100b/midterm/midterm-1001445008/
(2).
1有無遇到的問題 無
2.製作感想 : 很辛苦要花很多時間慢慢仔細去做,很有成就感,也覺得很有趣 smiling smiley
3.製作作業的時間 : 2 天

前置作業

(1)網站主題: 顏色        
(2)製作動機: 身為視傳的一份子, 顏色是不可或缺的,想做多ㄧ點了解                
(3)製作內容: 介紹5種顏色
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.6th-aunt.com.tw/story.asp 很有傳統文化的感覺 而且排版整齊明瞭

◎相關網站列表與分析:
http://zh.wikipedia.org/zh-hant/%E7%BA%A2%E8%89%B2 各種顏色的涵義和代表象徵都有說明



Edited 1 time(s). Last edit at 11/08/2011 06:02PM by 1001445008.
(編輯記錄)

MEPOERs said:
JinJin: 有趣的主題,內文再小一點,質感會更好!
1001445008: 內文在原檔是用別個字體和大小,沒有想到別的地方會顯示不出來.下次會注意~謝謝 ^口^
完成

作業網址: http://mepopedia.com/~web100b/midterm/midterm-1001445010

沒甚麼問題

第一次做這樣完整的一個網站很開心

4小時

((下面的PO文可以刪掉@@))




(1)網站主題:我的喵喵樂園

(2)製作動機:我想幫我家的貓做一個網站

(3)製作內容:介紹家裡三隻貓咪的個性

(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
http://www.moncoeur.com.tw/
這網站一進去就可以看到一座美麗的大門
把門點開就可以進入主要網站很有趣
http://www.lavendercottage.com.tw/onlineshop/00.html
很可愛的板面 按鈕很有自己的風格

◎相關網站列表與分析:
http://www.crazymomi.com.tw/
這是很棒的參考網站



Edited 2 time(s). Last edit at 11/08/2011 06:13PM by free236.
(編輯記錄)

MEPOERs said:
JinJin: 很開心你找到了樂趣!不過字小一點質感會更好喔!
網站主題:黑夜森林

製作動機:以神祕的黑夜帶入西方神話的唯美故事,森林樹與藤的漩渦進入神話中愛戀的真締…

製作內容:神話故事由來、神話愛情故事、神話復仇故事、神話戰爭故事……

http://fairyland.lager.com.tw/event/halloween/
以可愛的圖片吸引年輕人的目光停留

http://www.domtar.com/arbre/english/
以插圖方式作為點選的按鈕

----------------------------------------------------------

http://mepopedia.com/~web100b/midterm/midterm-1001445030

1. 有遇到很多問題,像是放圖片或是圖片的設計,都有點讓人頭痛,但是我會把老師上課講的內容,在腦袋思考如何變通,呈現在網站上面:)

2. 每一次想到一個構想就想去嘗試,研究每個步驟,去尋找變通方式,一次的失敗雖然會造就自己的放棄,但是靜下心來思考,就想到如何用所學的東西,應用在上面,讓畫面更吸引人,有種不同的呈現。還有每次的嘗試,失敗與成功的喜悅,帶來最終的成果。

3. 5H,光是找資料就花很多時間。



Edited 1 time(s). Last edit at 11/09/2011 01:37PM by 貝珼.
(編輯記錄)

完成品~
http://mepopedia.com/~web100b/midterm/midterm-1001445075/

1.問題:連結有時按下去會沒反應 ,為甚麼??

2.感想:很開心終於自己完成了一個網頁!

3.時間:約一小時~


(1)網站主題:生態與環境

(2)製作動機:希望大家更重視環境保護~

(3)製作內容:介紹生物多樣性、綠色飲食、空氣汙染等....

(4)設計優良網站: http://www.meomi.com/

可愛卡通製造工廠,造型簡單、愉悅,當滑鼠移到某些圖上會有小動畫 !

相關網站列表與分析 http://www.necoast-nsa.gov.tw/bio/

介紹龜山島,內容豐富詳細,網頁很有大自然的氣息~



Edited 1 time(s). Last edit at 11/08/2011 07:07PM by sintp23.
(編輯記錄)

老師~ 我已經從新用好 給學姊上傳嚕攸!!
麻煩妳看看了 spinning smiley sticking its tongue out





(1)網站主題: 攝影風格
(2)製作動機: 我很喜歡攝影 拍照等戶外取景等
(3)製作內容: 介紹自身攝影作品
(4)資料蒐集分析
◎相關網站列表與分析:
http://www.photo.org.tw/default.aspx
介紹很多攝影有關作品 及相機用法等等




Edited 1 time(s). Last edit at 11/09/2011 02:24PM by 吳蓓蓓.
(編輯記錄)

完成品:http://mepopedia.com/~web100b/midterm/midterm-1001445002

(2).
1有無遇到的問題 圖片檔和製作黨一開始分開放無法連結 所以又重做一次
2.製作感想 做得比較順手了 但還是有些小地方會忘記
3.製作作業的時間 .....太混 其實可以早點做完 可是都在作別的事 最快3天吧= =



(1)網站主題:
個人文圖創作
(2)製作動機:
用文字或圖片抒情是我的興趣.想和大家分享我一直以來的創作.也想做出一個屬於自己的網站
(3)製作內容:
繪畫與圖片集錦,短文小說....等等
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://liouxhin.wolflord.com/
http://liouxhin.wolflord.com/immoral.htm
柳宮燐長久以來一直是我最喜歡的繪家.而他的網站正如同他的作品他的人.展現專屬於自己的風格!!spinning smiley sticking its tongue out
◎相關網站列表與分析:
http://www.suncolor.com.tw/event/husband/index.html
希望有一天我也會有自己的小說專欄網站thumbs up



Edited 3 time(s). Last edit at 11/09/2011 01:42PM by 1001445002.
(編輯記錄)

(1)網站主題: 攝影作品
(2)製作動機: 想做一個關於自己的攝影作品集網站
(3)製作內容: 放許多自己拍的照片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://www.jennifermaestre.com/index.php
用簡單的排版介紹自己的作品

◎相關網站列表與分析:

http://www.ninamika.com/en/index.html
用照片做背景的方式,讓整個網站充滿色彩

-

(1)作業網址:
  http://mepopedia.com/~web100b/midterm/midterm-1001445022
(2).
 1. 有無遇到的問題 :
    沒有遇到什麼問題,老師講解的都很仔細。
    問題都能夠迎刃而解。
 2. 製作感想:
    這是我第一次用 DIV + CSS 做出一個網站,心情很好。
    我做了兩個網站,一個是現在繳交的這個,單欄式網頁
    另外一個是自己在玩的雙欄式網頁。
    我覺得其實老師講得很仔細,只要有用心學,要活用就很方便了。
    內文有一大半都是自己寫出來的,要思考那些內容真的不太容易‥
    尤其網路上有許多無法填滿自己的網頁時,就需要靠自己來填滿這些網站。
    很希望我這次做出來的網頁是有質感的。
 3. 製作作業的時間:
    五、六個小時

-

(1)網站主題: 東方神起
(2)製作動機: 想讓更多人認識東方神起
(3)製作內容: 東方神起相關事物
(4)資料蒐集分析
 ◎ 設計優良網站(風格)列表與分析: http://www.ying-shan.com/
   ‧ 版面色系簡單優美,固定式的版面讓人覺得舒服
 ◎ 相關網站列表與分析:http://www.normandieshutters.com/
   ‧ 同一間公司所製作的網頁,其實大同小異,但風格都很對味
    就是喜歡這種簡單又舒服的感覺。

-



Edited 5 time(s). Last edit at 11/09/2011 02:48AM by hughero1314.
(編輯記錄)

MEPOERs said:
JinJin: 很認真!也謝謝你的肯定啦!質感的細節我們可以再討論!也可以分享你另一個完的雙欄網頁喔
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445026/index.html
(2).
1有無遇到的問題 以前學校教的JAVA語法用的不順
2.製作感想 老師教得很細也有網站講義可以事後作的時候看跟參考,超級方便!
3.製作作業的時間 兩個小時,因為有概念滿容易做!

(1)網站主題:攝影
(2)製作動機:喜歡攝影,想做關於自己的網站
(3)製作內容:用我的鏡頭去記錄生活
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.elenakalisphoto.com/#home
很有一系列,喜歡乾淨編排
◎相關網站列表與分析:
http://www.eikimori.com/
http://kawashimakotori.com/
有想法,也懂得去捕捉畫面



Edited 1 time(s). Last edit at 11/09/2011 01:39PM by 1001445026.
(編輯記錄)

1.以自己的作品製作一個屬於自己的網站
2.因為可以和人分享
3.自己的作品、自己的經歷、喜歡的作品
4.設計優良網站http://www.tgifridays.com.tw/AIU/include/main.php?Page=0
喜歡它熱鬧的氣氛


相關網站列表與分析http://www.aerc.nhcue.edu.tw/4-0/art/s09/dance.htm

可以更改一下背景
_____________________________________________________________


完成品

http://mepopedia.com/~web100b/midterm/midterm-1001445016



1.還是有點不熟

2.很有成就感

3.不確定耶~一天一點點,有時很多



Edited 1 time(s). Last edit at 11/09/2011 01:39PM by best151515.
(編輯記錄)

老師我更新過了喔
回家修改後發現原來資料夾裡的CSS不是我連結裡的,真正所用的CSS其實再另一個資料夾
這路徑折騰我整節課!!!!
再也不想犯這種錯誤!!!!
P.S 文繞圖仍然很難...

網址:http://mepopedia.com/~web100b/midterm/midterm-1001445006/

1有無遇到的問題: 很多超多多到爆!嗚嗚嗚~老師...為何用DW瀏覽時,header跟footer是正常的,但上傳後點出來看卻沒顯示,而且東西也會亂跑....還有還有!!!上課沒講到的東西整個就不會用了...試了文繞圖,結果瀏覽出來都會變...整個試到吐血...

2.製作感想 :我真的超想學起來的啦!!!但真的是超難的....

3.製作作業的時間 :8小時

前置作業(10/19)
(1)網站主題:
簡約生活日記

(2)製作動機:
自己做的部落格比較酷不是?

(3)製作內容:
包含攝影,短文

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://stylebubble.typepad.com/
雖然版型是一般的那種,但利用了圖形與背景的特色製造出輕鬆藝術風的感覺


◎相關網站列表與分析:

http://www.mariellamelie.com/
這是一位攝影師的網頁,極檢風格卻不失質感
欄裡也很清楚的寫出歷年作品與相關資訊
但配色的部份就只有黑白比較空虛一點



Edited 2 time(s). Last edit at 11/09/2011 11:07PM by Key.
(編輯記錄)

老師不能上傳,怎麼辦??
我可以星期三帶去給你打分數嗎???
這篇刪掉!!

MEPOERs said:
JinJin: OK
完成品

(1) 作業網址 : http://mepopedia.com/~web100b/midterm/midterm-1001445109/
(2)
1有無遇到的問題 : 其實本來不是很會連結圖片,但後來去問同學就會了,因為是第一次自己建立一個網頁,所以並不是很會,上課時覺得某些部
分講解的有點快。

2.製作感想 : 只是改編並不是很困難,但主要是要自己打程式碼的部分時會有點搞混,打錯一個部份就會錯,覺得有點難。

3.製作作業的時間 : 大概花了5個小時製作


前置作業

1.喜愛的偶像
2.自己做感覺很特別
3.介紹. 歷程...等等
4.其他官網:
http://punk0711.pixnet.net/blog/post/25830698-%E5%BC%B5%E6%A0%B9%E7%A2%A9%E5%AE%98%E7%B6%B2%E7%95%99%E8%A8%80-%E5%A4%A7%E5%AE%B6%E8%BE%9B%E8%8B%A6%E4%BA%86
我喜歡這種網站的感覺



Edited 1 time(s). Last edit at 11/09/2011 02:05PM by coxxd01217.
(編輯記錄)

(1)網站主題: 插畫,塗鴉風格
(2)製作動機: 覺得這種風格很可愛
(3)製作內容: 豐富的色彩和一些插圖和塗鴉
(4)資料蒐集分析 http://shop.boompa.ca/
◎設計優良網站(風格)列表與分析: 塗鴉風格 有很多小插圖。裡面有很多可以參考的塗鴉插畫作品
◎相關網站列表與分析:http://www.bootb.com/en/
深色背景利用淺色作出塗鴉的按鈕、底圖,我覺得很可愛

(內容移到下面有期中作業網址的地方了)



Edited 1 time(s). Last edit at 10/26/2011 12:48PM by 1001445036.
(編輯記錄)

這篇可刪!!


(1)網站主題:介紹石牌
(2)製作動機: 因為想把我家附近介紹給大家
(3)製作內容:介紹附近的美食.風景.好玩的景點
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://kpopn.com/

◎相關網站列表與分析:
http://zh.wikipedia.org/wiki/%E7%9F%B3%E7%89%8C_(%E5%8C%97%E6%8A%95)



Edited 1 time(s). Last edit at 11/09/2011 01:39PM by 李佳玟.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445004/index.html
(2).
1有無遇到的問題 :無
2.製作感想 :有點困難
3.製作作業的時間:3小時
後來網頁改成作韓國團體2NE1


(1)網站主題:介紹石牌
(2)製作動機: 因為想把我家附近介紹給大家
(3)製作內容:介紹附近的美食.風景.好玩的景點
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://kpopn.com/

◎相關網站列表與分析:
http://zh.wikipedia.org/wiki/%E7%9F%B3%E7%89%8C_(%E5%8C%97%E6%8A%95)



Edited 1 time(s). Last edit at 11/09/2011 01:38PM by 李佳玟.
(編輯記錄)

[size=x-large][color=#CC0066]完成品請編輯到前面資料蒐集那一頁,以方便瀏覽與評分[/color][/size]



Edited 1 time(s). Last edit at 11/04/2011 06:24PM by JinJin.
(編輯記錄)

MEPOERs said:
HP: 網頁作得很完整。有一個建議是,對你作的五個網頁分別寫上不同的網頁標題 <title> 會更好。例如 index.html 可以寫「Happy Cat - 觀迎到童話與夢想的小店」,about.html 可以寫「Happy Cat - 關於貓樂」等。這樣也許過一陣,你從搜尋引擎上就可以搜尋到了!
骸蒼Aoi: 謝謝~已經修改囉!!
JinJin: 做得很好,可是成品要編輯,把這頁的東西貼到前面資料蒐集那頁,整合在一起,這頁的內容要放在資料蒐集前面,我先幫你編輯到前頁喔
Re: [期中作業] 以單欄為主的網站設計

有關你提到的「發現用"DW"做出來效果有時跟預覽出來不一樣,還蠻困擾的」。這也是為什麼老師要用原始碼教你們 DIV + CSS 作法的原因。

這樣才不會過於依賴 Dreamweaver,造成出了問題和預覽不一樣而不會解決的狀況。希望大家能體會啊!

另外,你的期中作業作得非常好,老師應該會給你非常高的分數。而且,上次和寫給你的「動態圖片置換」的方法你都有完整地作到與修改,其實不容易。而且也加上置中的排版,看起來更協調。



Edited 1 time(s). Last edit at 11/03/2011 06:40PM by HP.
(編輯記錄)

MEPOERs said:
骸蒼Aoi: 謝謝你教的那個做法!!真的很好用,不過我想問為什麼音樂沒有CSS與法呢?一定要一個一個網頁放語法嗎?
老師我發現你上傳的資料夾名稱打錯了耶?midterm你打midtern.......(?

MEPOERs said:
HP: 我剛剛已經改了。謝謝提醒!
[size=x-large][color=#CC0066]完成品請編輯到前面資料蒐集那一頁,以方便瀏覽與評分[/color][/size]



Edited 1 time(s). Last edit at 11/04/2011 07:56PM by JinJin.
(編輯記錄)

MEPOERs said:
JinJin: 你的網址打成 http://mepopedia.com/~web100b/midterm/midtern-1001445123/
JinJin: #footer的底圖連結應為 images/footer.jpg
JinJin: 這頁我先幫你移到前面的網站企劃和資料蒐集那頁
完成品


(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445032


(2).
1有無遇到的問題:用DW做出來效果在預覽時出的來,=但上傳後點開網頁卻沒套用到......

2.製作感想 :因為時間不夠的關係做的不夠精細,跟班上其他同學的作品比起來相形見絀(汗
之後有時間一定要做出更有個人風格也更精細的網站!


3.製作作業的時間 :邊做邊打瞌睡.......總共耗時5小時吧

前置作業

(1)網站主題:燃燒的靈魂--梵谷
(2)製作動機:看到老師做的莫內的網頁,不禁讓我想做我最喜歡的畫家-梵谷的介紹網站
(3)製作內容:梵谷介紹/梵谷故事

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://www.twowin.com.tw/others/fg_picture/

雖然整體而言有些單調,但介紹了很多梵谷畫作的故事,我滿喜歡

◎相關網站列表與分析:

http://www.csie.ntu.edu.tw/~b4506010/gogh.html

這是另一個介紹梵谷的網站,整體而言更是單調且無裝飾,但他有把畫作與梵谷的一生做結合介紹,也讓我更了解梵谷

http://mepopedia.com/~web100b/midterm/midterm-1001445055

風格:母親的部落格
動機:之前媽咪想做一個獨一無二的無名,藉由這次機會嘗試做。
內容:整體有點偏向無名 但整體還不是很成熟 之後想一直以這主題更深入。
資料蒐集分析:之前有去看無名的語法 但是其實很雜亂 大概是擺的東西很多
語法有點亂之類的 所以都是以課堂上教的嘗試居多。
設計優良網站(風格)列表與分析:其實我之前看過香奈兒的官網 我覺得做得很美
國外也有很多很棒的網頁作品 值得我們學習 其中我看到一個很可愛的網頁
他比較偏向動畫之類的 跟現在我們做的平版的網頁不同
http://www.exit10.com/ 希望我也可以這麼厲害 thumbs up
花了5個小時 途中重做 再做一次 所以比較慢 ~

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445077

1有無遇到的問題 一開始忘記繞圖排文的方法上網找了一下論壇之後都能做的順手
2.製作感想 做自己喜歡的人事務會比較容易樂在其中 這次一次就做了好多頁但都很值得
3.製作作業的時間 5~7小時



(1)網站主題: 少女時代
(2)製作動機: 介紹少女時代造成全球炫風的原因
(3)製作內容: 以文字圖片和影音拼湊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.designanddesign.com/ 利用簡單清楚的方式介紹出所要介紹的對象
◎相關網站列表與分析:http://kpopn.com/ 這網站充分的介紹了每個偶像的資訊 是這個主題的主要參考來源



Edited 1 time(s). Last edit at 11/09/2011 06:33AM by 大內密探.
(編輯記錄)

請刪掉 謝謝



Edited 4 time(s). Last edit at 11/09/2011 01:38PM by best151515.
(編輯記錄)

MEPOERs said:
JinJin: 有些作品圖檔太大~要再瘦身喔!
http://mepopedia.com/~web100b/midterm/midterm-1001445045/
做完的時候很有成就感 很開心自己架了一個網站
做的時候遇到的小問題也已經問過老師 都一一解決了
製作時間加加減減大約五個小時

MEPOERs said:
JinJin: 無論是網站或作品都不錯喔!
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445036/index.html
(2).
1有無遇到的問題 - 再dreamweaver做的時候沒問題,在網頁瀏覽也沒問題,但是上傳後圖片不見了
2.製作感想 - 看到自己的作品還蠻開心的!但是上傳後有點問題
3.製作作業的時間 - 上課兩小時 還有陸陸續續修改應該總共有超過5小時

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445024
(2).
1有無遇到的問題 沒有
2.製作感想 對於三欄式網頁有更深的了解
3.製作作業的時間 六個小時

(1)網站主題:埃及
(2)製作動機:對埃及有些許的興趣
(3)製作內容:介紹關於埃及的旅遊和歷史
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.converse.com/
網頁很簡單,主要強調商品的內容
◎相關網站列表與分析:
http://www.kingtut.org/
利用埃及特色-木乃伊當背景,讓人有想要一探究竟的感覺

MEPOERs said:
JinJin: 還不錯喔!
完成品

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445069/

(2).
1有無遇到的問題
  首頁有一張圖片! 但打不開 =(
2.製作感想
  累` 但完成的感覺很好!
3.製作作業的時間
  整晚.


前置作業
(1)網站主題:
  星座分析
(2)製作動機:
   星座這樣的主題是多數人會有興趣了解的! 在了解自己的同時也可以多多觀察身邊不同星座的人是否有分析裡的特質! 你將會發現很多有趣的事情~
(3)製作內容:
  十二星座終極分析
(4)資料蒐集分析
  google和yahoo 感謝他們再度相助!

MEPOERs said:
JinJin: 你說的是哪一張圖?不過你主要的問題是要在#content再加上padding,增加內距,字需不需要這麼粗?也可以再增加行距line-height,看起來排版會更舒服喔! 連結的語法有空會再教,改變之後會更有設計感
完成品
(1)作業網址 :http://mepopedia.com/~web100b/midterm/midterm-1001445012/


(2).
1有無遇到的問題:用"DW"做出來效果有時跟預覽出來不一樣,好煩喔= =



3.製作作業的時間 :沒算,只知道一坐就停不下來,還會做到生氣= =



--------------------------------------------------------------------------------



(1)網站主題: 田馥甄
(2)製作動機: 一直很想擁有專屬田馥甄的網頁,放上自己喜歡的內容,真的很喜歡

(3)製作內容:關於田賦真的一切

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
沒去作調查
因為我做不出來
程度也不到
有了能力
我會去看看那些網頁的構成!




ps我不小心用到同學的帳號了
請老師幫我刪掉 謝謝!!

MEPOERs said:
JinJin: 拍拍,不要氣了,其實大致做得還不錯呀,希望能慢慢體會網頁給你的成就感,圖片出不來的地方是因為你有資料夾取了中文名稱,改過來就好了
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445095

(2)
1有無遇到的問題:有些語法還是看不懂,自己在那邊亂拼湊,幾乎從老師的原始碼改寫成自己的網頁

2.製作感想 :很有成就感,終於可以靠自己的能力完成一個網頁,謝謝老師的講義 smiling smiley

3.製作作業的時間 :沒在算耶,只是一直邊看老師講義邊做網頁



--------------------------------------------------------------------------------



(1)網站主題: 皮克斯動畫王國
(2)製作動機: 一直以來都很喜歡關於皮克斯的動畫,想藉此向大家推廣。

(3)製作內容:關於皮克斯、歷年創作的動畫、皮克斯的影音、相關作品。

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.pixar.com/
一進去的版面還蠻有質感的,也讓人很清楚的知道他的風格。

◎相關網站列表與分析: : http://disney.lovesakura.com/index.htm
我想以兒童的角度去設計一個俏皮的網頁

MEPOERs said:
JinJin: 你應該是套用改得最徹底的了!這樣也很厲害了!(拇指)
(1)網站主題:
想呈現帶有復古、神祕感的"文字"網站
(2)製作動機:
自古以來,無數朝代的興起衰弱,都在時間的浪潮下,只剩下寥寥無幾的殘骸;
而文字,便是替現代以及後代見證先祖的存在軌跡。
(3)製作內容:
以復古的色彩為基調,隱隱約約為文字散布而下。
(4)資料蒐集分析:
http://www.wolong.com.tw/
很欣賞整個網站有濃厚的中國風味,無論是在中國代表尊華的龍,還是喜氣的紅,
"中國的拖把"毛筆也穿梭在其中!

http://www.redwall.com.tw/
以烽火連天的戰爭場景為底,和大部分溫馨、和樂的網站大不相同。

-------------------------------------------------------------------------------我是分界線---------------------------------------------------------------------------
(1)作業網址:
http://mepopedia.com/~web100b/midterm/midterm-1001445034
(2).
1有無遇到的問題:
當機真是件有前途的事。

2.製作感想:
更加期待!((憧憬的眼神

3.製作作業的時間:
4h



Edited 3 time(s). Last edit at 11/09/2011 01:55PM by 傀.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445020

1連結得時候有點困難 不過後來有問同學 就略懂些 smiling smiley
2.很開心第一次自己製作完成網頁設計 雖然一路上不是作的很順 但是經驗累積才是最重要的
3.製作作業的時間 上課作一些 之後斷斷續續的完成
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

(1)網站主題: 畢卡索
(2)製作動機: 因為自己本身很崇拜畢卡索
(3)製作內容: 介紹畢卡索溜smiling smiley
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.zanotta.it/

◎相關網站列表與分析: Zanotta的設計網站Designers可以查詢設計師和其設計作品



Edited 1 time(s). Last edit at 11/09/2011 02:27PM by Nina Lin.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445091

(2)

1有無遇到的問題:無太大問題smiling smiley

2.製作感想:很有成就感!!!

3.製作作業的時間:8 hrs

MEPOERs said:
JinJin: 很開心你的成就感!不過路徑還是有問題~明天再討論囉!
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445113

1有無遇到的問題:目前是沒有 本來想做繞圖排文 但忘了怎麼做了

2.製作感想:能做出來的感覺很好~~~ 希望下次可以做更多更好的

3.製作作業的時間:大概兩三個小時

作業網址:http://mepopedia.com/~web100b/midterm/midterm-1001445129

1.沒有太大的問題!
2.網頁設計真的很難!我已經盡力做到最好了!還是需要多多練習!
3.總共大概4個小時多

重新上傳一次了

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445036/index.html
(2).
1有無遇到的問題 - 上次上傳不知到為什麼背景圖片都出不來所以在家重做一次!但是家裡的dreamweaver是英文版所以要平記憶做,因為已經做過一次所以沒什麼問題也很快就重新做完了!
2.製作感想 - 一開始上傳作品失敗有點失望!但是重做一次後看到自己的成品很開心!!
3.製作作業的時間 - 上次失敗重新再做一次大概1小時多

------------------------------------------------------------------------------------------------------

(1)網站主題: 插畫,塗鴉風格
(2)製作動機: 覺得這種風格很可愛
(3)製作內容: 豐富的色彩和一些插圖和塗鴉
(4)資料蒐集分析 http://shop.boompa.ca/
◎設計優良網站(風格)列表與分析: 塗鴉風格 有很多小插圖。裡面有很多可以參考的塗鴉插畫作品
◎相關網站列表與分析:http://www.bootb.com/en/
深色背景利用淺色作出塗鴉的按鈕、底圖,我覺得很可愛



Edited 1 time(s). Last edit at 11/09/2011 01:41PM by 1001445036.
(編輯記錄)

完成品

(1) 作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445107

(2)
1. 有無遇到的問題 : 看著講義先做,不懂的部分問同學 confused smiley
不確定是否有上傳成功sad smiley

2. 製作感想 : 終於能做一個網頁 : )
在做的時候還是覺得有點複雜

3. 製作作業的時間: 沒有算多久~
自己做圖片花較久的時間 tongue sticking out smiley


前置作業

(1) 網站主題: Disney

(2) 製作動機: 一直以來都非常喜歡迪士尼的風格

(3) 製作內容: 迪士尼網站 迪士尼系列動畫 華特.迪士尼

(4) 資料蒐集分析

◎設計優良網站(風格)列表與分析: http://www.nipponblue.com/
◎相關網站列表與分析: http://home.disney.com.tw/tv/
http://www.pixar.com/

MEPOERs said:
JinJin: 沒上傳成功喔!沒看到檔案!
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445047

1有無遇到的問題:沒有

2.製作感想:感覺有越來越適應了~

3.製作作業的時間:大概4.5個小時

前置作業

(1) 網站主題: 玩具總動員系列介紹

(2) 製作動機: 我很喜歡玩具總動員這部3D系列動畫

(3) 製作內容: 玩具總動員系列 / 皮克斯和迪士尼介紹 幕後特輯

(4) 資料蒐集分析

◎設計優良網站(風格)列表與分析:http://toystory.disney.com.tw/#/characters
◎相關網站列表與分析:
http://w.hudong.com/0446b28670284579ae452020e37d3df0.html
http://a2z.fhl.net/movie/movie21.html

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445083

(2)
1有無遇到的問題:想放音樂檔在上面,但研究了好久還是不會sad smiley 希望老師可以教我們如何放影片檔和音樂檔在自己的網站上smiling smiley
2.製作感想 :覺得做了一個自己喜歡的網站給自己,很有成就感thumbs up

3.製作作業的時間 :8hr

(1)網站主題: 韓國團體 BIGBANG介紹
(2)製作動機: 喜愛韓國團體,對她們大有了解
(3)製作內容:關於BIGBANG,介紹成員,音樂,BIGBANG的照片,年表
(4)資料蒐集分析
設計優良網站(風格)列表與分析:
http://yessbmx.com/
滑鼠拖曳的效果令人有新鮮感
相關網站列表與分析:
http://www.ygbigbang.com/popup_frame.asp
此團體的韓國官方網站

blue1818 Wrote:
-------------------------------------------------------
> 作業網址:
>
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445053

(2)
1有無遇到的問題:一開始header的圖片一直無法預覽,在設計時都沒問題但到網頁上就是不行
2.製作感想 能做一個字記的網頁感覺很好,很有成就感,雖然比起外面簡單許多,不過步驟確有點複雜,感覺很不一樣並不是這麼容易的,以後要再加油,花掉好多時間

3.製作作業的時間 :5hr

(1)網站主題: 懶懶熊介紹
(2)製作動機: 國中就蠻喜歡它了再加上之前7-11的集點送熊熊
(3)製作內容:簡單大方的表現出啦啦熊的可愛, 每支介紹
(4)資料蒐集分析 :
http://danny86300.blogspot.com/2010/10/blog-post_19.html

主要都是在這個網址上的內容

圖片都是在GOOGLE找的

完成品
(1)作業網址:http://mepopedia.com/~web100b/midterm/midterm-9711443098/
(2).
1有無遇到的問題:1)滑鼠變換影像,index.html可以正常執行,但在works.html卻無法執行,不曉得為什麼。 2)想學不同排列DIV的製作方法。
2.製作感想:很有趣,但會得很少,所以沒什麼變化。
3.製作作業的時間:約4個小時

前置作業
(1)網站主題: 自己的攝影集
(2)製作動機: 想要做出有別於各大網路平台的攝影相簿,要非常非常的簡單
(3)製作內容: 首頁和內頁共兩頁
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.scottradke.com/art.htm,除了簡單、好用外,也很舒服

作業網址:http://mepopedia.com/~web100b/midterm/midterm-1001445133

1.沒有什麼太大的問題!
2.網頁設計很難
3.兩個小時左右

(1)網站主題: 攝影作品
(2)製作動機: 想做一個關於自己的攝影作品集網站
(3)製作內容: 放許多自己拍的照片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://www.jennifermaestre.com/index.php
用簡單的排版介紹自己的作品

◎相關網站列表與分析:

http://www.ninamika.com/en/index.html
用照片做背景的方式,讓整個網站充滿色彩
[hr]
(1)作業網址:http://mepopedia.com/~web100b/midterm/midterm-1001445079/index.html
(2).
1有無遇到的問題:無
2.製作感想:做完後很有成就感
3.製作作業的時間:4hr



Edited 1 time(s). Last edit at 11/09/2011 01:49PM by 1001445079.
(編輯記錄)

MEPOERs said:
HP: 頂圖設計得頗有意思,仔細一看,和你的攝影風格很一致。不過,內容好像少了一點。
完成品

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445057

(2).
1有無遇到的問題:後來傳到作業上面的時候又和原本做的不太一樣了..........圖片都亂掉,不知道是不是路徑的關係....

2.製作感想 :剛開始覺得很複雜研究很久...但是做出來的時候很感動,但最後好像又是失敗的,因為排版全亂掉

3.製作作業的時間 :沒有算欸...花了蠻多時間的

MEPOERs said:
JinJin: 連結photo.HTML,要改成photo.html,大致還不錯,設一下padding會好很多!
HP: 其實我看大家作得都很不錯,只學半學期幾乎超過一半的同學都頗有樣子,其實很不錯的呢!
http://mepopedia.com/~web100b/midterm/midterm-1001445105


1.有無遇到的問題: 小問題
2.製作感想: 不夠熟悉 一些細節的地方有點麻煩
3.製作作業的時間: 2~3小時

MEPOERs said:
HP: #footer 的部份不是每一頁都有哦!另外, #footer 裡面你設的 background-image 的圖片不存在,所以會有一個小 M。我想你可能沒有要用圖片,就請把 background-image 這個屬性刪除就可以了。
(1)作業網址
http://mepopedia.com/~web100b/midterm/midterm-1001445089

(2).
1有無遇到的問題:在DW裡做的真的會跟網頁上看的排版有差,所以就會一邊做一邊用網頁檢視。然後還是沒辦法弄懂框架的設定,所以再做得當中一直找不到滿意的排版方式。

2.製作感想:很想做出自己心中理想的網站,但光他們的位置就能讓我懊惱的要命。

3.製作作業的時間:時間斷斷續續的,不過也花了好幾個小時。



Edited 1 time(s). Last edit at 11/29/2011 01:38AM by Carol Chen.
(編輯記錄)

MEPOERs said:
JinJin: 你的圖片資料夾取成中文名稱,要改喔!連結也要改過!不然很多圖片會無法呈現
JinJin: 以上回錯,請略過,你的網址應該是 http://mepopedia.com/~web100b/midterm/midterm-1001445089/,你的寬度設在body,所以要在body設左右的margin:auto;才會置中喔!
JinJin: 慢慢來,網站本來就是比較繁複的設計工作,有開始就會慢慢進步和熟悉的!
HP: 雖然語法上看得出來有些問題,但可能感覺到是個有設計感的網頁,我覺得不錯。另外,老師提的作業網址要記得改哦。
http://mepopedia.com/~web100b/midterm/midterm-1001445030

1. 有遇到很多問題,像是放圖片或是圖片的設計,都有點讓人頭痛,但是我會把老師上課講的內容,在腦袋思考如何變通,呈現在網站上面:)

2. 每一次想到一個構想就想去嘗試,研究每個步驟,去尋找變通方式,一次的失敗雖然會造就自己的放棄,但是靜下心來思考,就想到如何用所學的東西,應用在上面,讓畫面更吸引人,有種不同的呈現。還有每次的嘗試,失敗與成功的喜悅,帶來最終的成果。

3. 5H,光是找資料就花很多時間。


以合併於上方

作業網址:http://mepopedia.com/~web100b/midterm/midterm-1001445099/midterm-sample/
1.有無遇到的問題: 有同學教 所以還好
2.製作感想: 覺得很有趣 越來越喜歡網頁設計
3.製作作業的時間: 3小 時

完成品
(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445115/
(2).
1有無遇到的問題
  圖片我不會置中,所以我用字把它推到中間。
2.製作感想
  小累,但有成就感。
3.製作作業的時間
  兩天,約6小時.


前置作業
(1)網站主題:
  線上遊戲
(2)製作動機:
  因為我喜歡射擊類遊戲,想為此作自己的網站
(3)製作內容:
  關於我遊戲中軍團的內容
(4)資料蒐集分析
  全部自己來

完成品 http://mepopedia.com/~web100b/midterm/midterm-1001445040



(1)網站主題:
我的,傳承。
(2)製作動機:
大家能更了解我
(3)製作內容:

關於我的作品和介紹
(4)資料蒐集分析
我的高中作品及照片

◎設計優良網站(風格)列表與分析:http://newweb.renoirpuzzle.com.tw/ 唯美
◎相關網站列表與分析:
http://newweb.renoirpuzzle.com.tw/
我喜歡他們的產品

1有無遇到的問題
有!!!!無法連結 結果是多一個#
2.製作感想
很高興我做完了也很有成就感,我喜歡我的作品
3.製作作業的時間
3小時以上

MEPOERs said:
HP: 我很喜歡你的網站,還有你的內容!還有就是,首頁底下的 inheritance 拼錯了,可以改一下哦。
完成品
(1).作業網址:http://mepopedia.com/~web100b/midterm/midterm-1001445065
(2).
1.有無遇到問題:有很多的問題 不過還好已經有同學教我了
2.製作感想:不會做的真的要去問 其實沒有想像中困難
3.製作作業時間:3 ~ 4 小時

==================================================================
前置作業
(1)網站主題:外星人
(2)製作動機:因為看了關鍵時刻!!
(3)製作內容:外星人相關的事件
(4)資料蒐集分析:
設計優良網站(風格)列表與分析:
http://www.vipcase.net/html/front/bin/home.phtml
我很喜歡它的按鈕很可愛
還有它的LOGO會跳 !! 真的很可愛


相關網站列表與分析:
http://www.grammyclinic.com/html/front/bin/home.phtml
我很喜歡它中間大圖字會自己飛進來 好棒!!

完成品

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445081

(2).
1有無遇到的問題:一開始很困難可是有好心的同學幫助我讓我度過那些討厭的文字難關
真的非常謝謝那些同學我真的很感恩他們我愛他們真的真的
現在很喜歡網頁製作 因為有了那些同伴們還有用心的老師
老師我愛你!

2.製作感想 :一開始很崩潰但是謝謝朋友們的不離不棄讓我做完
3.製作作業的時間 :一節課半

MEPOERs said:
HP: 不好意思,沒有看到你的網頁與上傳的資料夾。可否再上傳一次呢?
我上課那天有交到老師電腦去我回家還要上傳一次嘛?

JINJIN好 老師好~~~~

(1)作業網址 http://mepopedia.com/~web100b/midterm/midterm-1001445061/


1.有無遇到的問題: 連結上有時候忘記怎麼弄,但之後有問同學,同學也很熱心的幫我

2.製作感想 : 自己半夜在那慢慢的摸索,會遇到些小麻煩,不過蠻好玩的,弄完會有點小小的成就感,老師你教的很好,希望我都能全部吸收。

3.製作作業的時間 : 大概3小時

--------------------------------------------------------------------------------

網站主題: 用喜歡的樂團設計的網站。

製作動機: 一直以來都很喜歡這個樂團也很支持著蘇打綠,想和大家分享蘇打綠,
用單一的色調來製作,自己覺得沒有做得很好,之後還要再修改才行。

製作內容:關於蘇打綠----人物介紹、歷年專輯作品。

設計優良網站(風格)列表與分析: http://www.mogu.com.tw/

蘑菇----- 是個有趣可愛的網頁,有許多可愛的手繪圖和蘑菇所販賣的商品連接,
都很易懂,容易點選還提供了有三種語言的分析,非常吸引我,
希望我以後也能做出像蘑菇一樣的優質網頁。

MEPOERs said:
HP: 不好意思,沒有看到你的網頁與上傳的資料夾。可否再上傳一次呢?
好像又可以了老師~~
我是11/9號上課的時候用隨身碟給你的!

(1)作業網址http://mepopedia.com/~web100b/midterm/midterm-1001445119
(2).
1有無遇到的問題 還好 都走過來了
2.製作感想 費了一番功夫 做完真是別有一番成就smileys with beer
3.製作作業的時間 兩三天 大概4-5小時吧cool smiley

(1)網站主題:我的設計網站
(2)製作動機: 以我的畫作作品為主 想介紹自己
(3)製作內容: 都是我的想法與畫作結合 也介紹我的繪畫歷程spinning smiley sticking its tongue out
(4)資料蒐集分析 這幾年的作品thumbs up 還有我自己的想法
◎設計優良網站(風格)列表與分析:[MOMA服飾] http://www.momaclub.com.tw/moma/news.aspx
簡單確有設計味~! 黑白為主
◎相關網站列表與分析: http://www.johanku.com/
設計師網站 聰分做出自己風格 與介紹自己