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

Advanced

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

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

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



1. 一、製作說明:


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

2.題目自訂,可以延續期中作業的主題,也可以是全新的主題。

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

4.需以Float浮動的方式建立雙欄(多欄)、DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等。

5.至少需包含(1).Table:表格→匯整資料,(2)Float→繞圖排文,(3)臉書、噗浪等推文設定,(4)圖片跳窗連結,(5)導覽列設定。


6.製作完成上傳至FTP

2. 作業設計重點



(1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁



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


1.雙欄的製作(Float的使用),不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定,Footer的版權宣告
7.內容的完整性
8.製作說明


4. 三、繳交作業方式


1.製作完成後,檔案命名方式:

期中作業FTP上的資料夾為:final

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

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

存放在 < final-學號 > 的資夾內



2.全部完成後上傳至FTP

3.依進度回覆本篇文章

5. 回覆說明



完成品
請將這項放置於文章最前面
(1)作業網址:
(2).
1.製作作業的時間:
2.有無遇到的問題:
3.製作心得與感想:





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

範例參考:
http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg

(3)尺寸與架構設定

範例參考:
http://i556.photobucket.com/albums/ss1/whc915/web-layout.jpg

(4)風格設定:
(5)主色調,輔助色調:
(6)製作動機:
(7)製作目的:
預期效果:

(8)資料蒐集分析

◎設計優良網站(風格)列表與分析
請參考:http://mepopedia.com/forum/read.php?804,18412


◎相關網站列表與分析:



6. 四、期末作業進度參考


第十六週06/08 圖片製作,內容建構
第十七週06/15 完成與上傳,檢討與修正
第十八週06/22 成績確認與最後修改


=================================================
※期末作業無論如何請一定要繳交,否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※

=================================================



Edited 1 time(s). Last edit at 06/22/2012 08:55PM by JinJin.
(編輯記錄)

(1)作業網址:

http://mepopedia.com/~web100-a/final/final-1006445001/

(2).

1.製作作業的時間:3小時
2.有無遇到的問題:網頁亂碼問題(已解決)
3.製作心得與感想:製作網頁蠻好玩的,按圖索驥蠻容易懂的

(3)網站主題:

MARVEL-驚奇漫畫

(4)風格:

漫畫風格

(5)主色調:

紅色

輔助色調:

白色

(6)製作動機:

從小就喜歡這些英雄電影,最近又看到電影復仇者聯盟,所以就以它為主題

(7)資料蒐集分析:

維基百科 http://zh.wikipedia.org/zh-tw/Wikipedia:%E9%A6%96%E9%A1%B5



Edited 2 time(s). Last edit at 06/23/2012 01:07AM by 朱少華.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445014/

1.製作時間:4小時
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的,大部分都能理解

3.製作心得與感想:
擁有自己的網頁蠻棒的,有了基本版型未來若真的要放別的內容也很方便

4 風格設定:
加入了電音,現代感,艷麗色彩,夜店元素

5 主色調,輔助色調:
主色調:暗色系.黑色.暗灰色
輔助色調:亮色系,亮粉紅,黃色

6 製作動機:
我想製作有個性的網頁,
剛好本身也很喜歡聽電子音樂,
風格上搭起來應該不錯。

7 製作目的:
讓大家了解夜店與電音密不可分的文化(主要是國外)

8 資料蒐集分析:
關於電子音樂:http://zh.wikipedia.org/zh-tw/%E9%9B%BB%E5%AD%90%E9%9F%B3%E6%A8%82

(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445018/
(2).
1.製作作業的時間:4小時
2.有無遇到的問題:沒問題講義很實用
3.製作心得與感想:做好後很有成就感
(4)風格設定:灰色調的介紹網頁
(5)主色調,輔助色調:(主)淺灰色,(輔)深灰色、白色
(6)製作動機:介紹貓咪的資訊
(7)製作目的:我想養ˊ_>ˋ
預期效果:乾淨俐落

(8)資料蒐集分析
http://st.popo.idv.tw/~aids/pp/Untitled-3.htm
http://www.oscar-pet.com.tw/webnews/view.php?SN=1157
http://happy2000.idv.tw/NEW_PAGE_13.HTM



Edited 2 time(s). Last edit at 06/22/2012 09:16PM by 黃正綱.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web100-a/final/final-9822445040

(2).
1.製作作業的時間:一天
2.有無遇到的問題: 已向老師問清楚
3.製作心得與感想:
非常有成就感
太棒了!!!!!
我愛你dw


(1)網站主題: 甜在心舔
(2)導覽列架構設定
首頁
中式,西式,法式,日式

(3)尺寸與架構設定
950px
header
使用photoshop用刀叉湯匙說明這是食物的網站
粉粉的底色來表現女生喜愛的甜美風格
button
用五個連結各種不同形式的甜點
content
使用我認為可愛的圓花圖案看到就會開心
content-L
180PX
用多個連結敘述情人節可自製的甜食
conter-R
以文字敘述食譜
footer
以更淺的粉紅色跟PHOTOSHOP修圖
(4)風格設定:甜美女生最愛的甜甜甜風
(5)主色調,
C:0
M:29
Y:14
K:0
輔助色調:
C:0
M:74
Y:28
K:0
(6)製作動機:為了喜歡自己動手做美食的我(7)製作目的:可以更快速找到我愛吃的食譜

預期效果:有達到我想要的感覺
但不知道顏色是否符合

(8)資料蒐集分析
http://www.christinesrecipes.com/ (簡易食譜中西個式)
http://icook.tw/ (icook愛料理)
http://food.tank.tw/default.asp (食譜大權)
http://www.meishij.net/hongpei/tianpindianxin/(甜品點心做法)
http://dessertfmtv.pixnet.net/blog(用點心做點心)
http://www.wretch.cc/blog/EmilyHH/11222329(美式甜點)
http://happymcy.blogspot.com/2011/07/black-forest-cake.html(The tree hole)
http://www.wretch.cc/blog/HappySewing&category_id=13521880(維多利亞廚房)
http://mypaper.pchome.com.tw/berrynini/category/4/1(點心製作)
http://www.wretch.cc/blog/mitong/22956215(甜蜜小點心)
http://www.masa.tw/(簡易點心食譜)
http://loveafternoontea.pixnet.net/blog/category/1828945(美味食譜)
http://blog.yam.com/homeeconomics/category/1679846(周老師點心)
http://blog.sina.com.cn/s/articlelist_1278045382_3_1.html(甜點
http://sweetmilk0429.pixnet.net/blog/category/286913(烘培甜點)



Edited 1 time(s). Last edit at 06/22/2012 09:23PM by 官佳霖.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445022/
(1)網站主題:色色世界
1.製作作業時間:一天
2.有無遇到的問題:
製作過程,有很多都不是很懂,利用電話詢問同學.看看瀏覽~做的不是很完整
3.製作心得與感想:
這門課讓我有學到東西,也讓我嘗試到網頁製作的過程~還不錯
(4)風格設定: 加入色彩繽紛的色票,以大自然的底來襯托
(5)主色調,輔助色調:藍天主色調,黑色.綠色.輔助色調
(6)製作動機:因為本身自己喜歡色彩.從小對色彩有興趣
(7)製作目的:想讓大家了解色彩的美.色彩分析
(8)資料蒐集分析:http://content.edu.tw/vocation/art/ks_hc/htm/content/ch06/newpage1.htm

作業網址:http://mepopedia.com/~web100-a/final/final-9621471158/

1. 網站主題:紅貴賓介紹
2. 製作作業時間:兩天
3. 有無遇到的問題:
看了很多遍講義很多部分還是不清楚,沒有做得很完整...
4. 製作心得與感想:
從完全不會做網頁到至少可以做出基本東西出來,很有成就感
5. 風格設定:以白色簡單為主
6. 主色調,輔助色調:白色、藍色
7. 製作動機:養一年多紅貴賓,介紹一下
8. 製作目的:紅貴賓雖然可愛其實缺點也不不少 ex毛打結、很愛吃人類食物、過動
9. 資料蒐集分析:http://teddy.34c.cc/teddydogdetial.php

MEPOERs said:
JinJin: 如果多來上幾次課~應該可以做得更完整喔!持續加油囉
(1)作業網址:http://mepopedia.com/~web100-a/final/final-9822445020

1.製作時間:1星期
2.有無遇到的問題:
跟著老師的講義做其實蠻容易的,大部分都能理解,不過還是有些不太能理解。

3.製作心得與感想:
就是學會說要如何做一個網頁以及架設網站
4 風格設定:
深色帶點復古感

5 主色調,輔助色調:
主色調:黑色.
輔助色調:紅色
6 製作動機:
因為自己很喜歡這個品牌,所以我就設計一個自己喜歡的網站。
7 製作目的:
就是推廣品牌讓大家都能看見
8 資料蒐集分析:
http://www.istayreal.com/blog/

MEPOERs said:
JinJin: 進步很多!要持續練習喔!加油!
作業網址:http://mepopedia.com/~web100-a/final/final-1006445013/

1.製作作業的時間:2.5hr
2.有無遇到的問題:最後一頁還是一樣
3.製作心得與感想:做到最後有點亂
(4)風格設定:用 Hello kitty 身上的顏色作為我的網頁風格
(5)主色調,輔助色調:紅色 藍色 黃色 白色 黑色

MEPOERs said:
JinJin: 我看到的是沒問題的耶!
(1)作業網址:http://mepopedia.com/~web100-a/final/final-9822445048

1.製作時間:1星期
2.有無遇到的問題:
跟老師講議製作.跟同學討論

3.製作心得與感想:
趣味性製作.蠻寫真的一堂課

4 風格設定:
加入自己喜愛車系.動力寫真.以黑色風格製作

5 主色調,輔助色調:
主色調:黑色.灰色
輔助色調:亮紅.亮黃.

6 製作動機:
本身是車隊業餘跑車手.也熱愛速度.

7 製作目的:
架設屬於自己的網站

8 資料蒐集分析:

http://www.galant.club.tw/forum.php

MEPOERs said:
JinJin: 進步很多!要持續練習喔!加油!
(1)作業網址:http://mepopedia.com/~web100-a/final/final-9822445046

1.製作時間:1星期
2.有無遇到的問題:
看老師的講義 部會的問同學

3.製作心得與感想:
還蠻頭大的 但是幸好做完了!!

4 風格設定:
喜歡糖果的色彩

5 主色調,輔助色調:
主色調:粉紅色 粉綠色
輔助色調:白色 紫色

6 製作動機:
應為現在馬卡龍非常火紅 色彩又很可愛~

7 製作目的:
我太愛甜點了~好吃又可愛

8 資料蒐集分析:

http://www.ytower.com.tw/prj/prj_317/p1.asp



Edited 1 time(s). Last edit at 06/22/2012 09:54PM by 范姜慈賢.
(編輯記錄)

MEPOERs said:
JinJin: 進步很多!要持續練習喔!加油!
(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445010

1.製作時間:因陸續在做,沒有ㄧ定的時間。

2.有無遇到的問題:先前Header歪歪的,和老師詢問已經解決!

3.製作心得與感想:網頁真的很需要有細膩的心,不然很容易因為小小的錯誤就會讓整體看起來很不順。
ㄧ開始製作時,因為Header歪歪的、整體看起來很失敗,弄得很不開心。後來詢問老師修正後就有比較好,現在弄到一個段落,雖然很簡單,但還滿有成就感的。學這堂課我覺得很開心!

4 風格設定:因為一開始找的圖就是藍色的天、藍色的海,所以整體的顏色就是深淺不同的藍色系為主。可以給人ㄧ種舒服的感覺。


5 主色調,輔助色調:
 主色調:藍色
 輔助色調:白色

6 製作動機:
喜歡幾米的作品

7 製作目的:
嘗試架構一個自己設計的網站

8 資料蒐集分析:
http://www.jimmyspa.com/
http://www.facebook.com/jmy.spa

MEPOERs said:
JinJin: 不錯!要持續練習喔!
(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445002

1.製作時間:沒去計算時間,只知光很多時間在上面。

2.有無遇到的問題:網頁做到越後面越複雜,不懂得地方有詢問同學,也從老師您那邊得到解答。

3.製作心得與感想:網頁真的要常練習才行,一兩個星期沒用就可忘光光,好險有老師的講義和自己做的筆記,另外還和同學互相討論,
不然真的是"一顆頭兩顆大",學會真的很有成就感,原來網頁是這樣做出來的,也謝謝老師這麼努力得教導。

4 風格設定:認識Teddy Bear---->介紹主題的事由
幸運月份---------->表格放入圖片介紹
限量典藏---------->表格放入圖片介紹
主題餐廳---------->雙欄介紹關於Teddy餐廳
博物館------------>加入連結語法

5 主色調,輔助色調:
 主色調:茶色
 輔助色調:黃色、粉膚色

6 製作動機:會製作Teddy Bear這想法是在網頁上看閱到的,最主要原因是當初是要做藝術風格的,因為自己的不小心把圖片全部存成中文字,
要修改太麻煩又加上沒有這麼多時間,所以就放棄了。跟大家說聲不好意思,無法介紹藝術風格給你們分享,希望你們會喜愛Teddy Bear。

7 製作目的:Teddy Bear不管是大人、小孩都超喜愛的,連我也不例外。所以製作網頁分享給大家認識。

8 資料蒐集分析: http://www.teddy-family.com.tw/product-list.asp?page=1&id=992&brand=Hermann-G
http://www.vrwalker.net/tw/scenery_view.php?tbname=scenerys&serno=193

MEPOERs said:
JinJin: 加油!要持續下去才不會忘記喔!
老師:我的圖還是跳掉了..><"
我查不出原因來...老師SOS
我上傳我最原始的資料hw03-1006445002

感謝同學幫我解決問題,也謝謝老師>grinning smiley<




林綺欣 Wrote:
-------------------------------------------------------
> 老師:我的圖還是跳掉了..><"
> 我查不出原因來...老師SOS
>
> 我上傳我最原始的資料hw03-1006445002



Edited 1 time(s). Last edit at 06/23/2012 01:21PM by 林綺欣.
(編輯記錄)

MEPOERs said:
JinJin: 恭喜解決!
(1)作業網址:

http://mepopedia.com/~web100-a/final/final-1006445006/

(2).

1.製作作業的時間:兩天
2.有無遇到的問題:圖片沒有顯示出來(以解決)
3.製作心得與感想:剛開始什麼都不會,也不懂,本來想完蛋了我,後來有詢問同學,東弄西弄就弄出來了,本來一直想
我可能做不出來了,後來有做出來還覺得滿不可思議的說!!

(3)網站主題:

奶茶世界

(4)風格:

樸素
(5)主色調:

紅色

輔助色調:

白色 -咖啡色

(6)製作動機:

因為很喜歡喝奶茶,有興趣想去多了解一些奶茶的東西,也因為這份作業讓我多認識它不少

MEPOERs said:
JinJin: 加油!還是最出來了!不過要注意內文content padding的部分喔!
(1)作業網址:http://mepopedia.com/~web100-a/final/final-1006445019/
(2).
1.製作作業的時間:3小時
2.有無遇到的問題:跟著老師的講義做,內容很清楚,不會的地方以詢問過同學解決了
3.製作心得與感想:雖然沒有完全做完但製作網頁中,還滿有趣的。


(4)風格設定:以白色簡單為主
(5)主色調:白色 輔助色調:天空藍 黑色
(6)製作動機:很喜歡這個卡通人物
(7)製作目的:想嘗試做一個敵一無二的網站設計