JinJin 的視覺設計專區 - 101-1《中國》竹視傳一C-網頁設計

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

oomnindance — Sun, 13 Jan 2013 02:31:53 +0800

(1)網站主題：電影-天外奇蹟
(2)導覽列架構設定
[url=http://www.facebook.com/photo.php?fbid=588881467794782&set=a.588880514461544.151135.100000188037127&type=3&theater]http://www.facebook.com/photo.php?fbid=588881467794782&set=a.588880514461544.151135.100000188037127&type=3&theater[/url]
(4)主要瀏覽族群：有夢想而未完實現的人
(5)風格設定：輕柔童趣
(6)主色調，輔助色調：玫紅/白
(7)製作動機：天外奇蹟真的是一部很好看的動畫
(8)製作目的：讓更多人喜愛
預期效果：

(9)資料蒐集分析：Google很好用

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

1015445271 — Mon, 07 Jan 2013 15:51:25 +0800

作業網址: http://mepopedia.com/~web101c/final/final-1015445271

1)網站主題：幾米／Jimmy

(2)導覽列架構設定
[img]http://i.imgur.com/gboXI.jpg[/img]

(3)尺寸與架構設定
[img]http://i.imgur.com/OQkBs.jpg[/img]

(4)主要瀏覽族群：喜歡幾米，喜歡繪本，喜歡動畫的男女老少

(5)風格設定：輕鬆淡雅，簡單閱讀

(6)主色調，輔助色調：淡藍色，白色

(7)製作動機：有以陣子熱愛幾米，覺得他是個有趣又偉大有想法的圖畫家

(8)製作目的：希望有更多人能了解他，也是台灣的驕傲與光榮

預期效果：輕鬆簡單
(8)資料蒐集分析
http://www.jimmyspa.com/default.aspx

1015445258 (no replies)

1015445258 — Mon, 07 Jan 2013 08:30:24 +0800

(1) 作業網址：

http://mepopedia.com/~web101c/final/final-1015445258

(2).
　1. 製作作業的時間：漫長的兩天徹夜未眠
　2. 有無遇到的問題：問題可大了好複雜需要很清醒才可以...
　3. 製作心得與感想：期末作業真是可怕的東西阿~~真的作的好累好累哦這種東西真的不能臨時趕真的好可怕我以後一定會乖乖上課的老師:(
可是做完還是成就感依舊拉哈哈哈在這裡我要謝謝我爸媽還有曉今老師還有一起趕的同學們還有最重要的凱敬同學是他救了我簡直救世主!!
4.本學期於網頁設計課程上的收穫：能做出自己喜歡的東西的網頁覺得很酷，而且從完全不會到被別人補救然後到自己也可以稍微的救別人，覺得自己很有用很棒!!

-----------------------------------------------------------------------------------------------------------
(1)網站主題：張惠妹
(2)導覽列架構設定
http://imgur.com/9Oo7v
(3)尺寸與架構設定
http://imgur.com/0fbYD
(4)主要瀏覽族群：對張惠妹有興趣了解的人

(5)風格設定：簡約清楚風看起來舒服有質感
(6)主色調，輔助色調：黑灰白紅
(7)製作動機：張惠妹是我的偶像!!!!!!!女神!!!!!!!!
(8)製作目的：我要很誠實的說目的是為了交作業還有自己看了很開心~
預期效果：多重背景(透明背景)+雙欄式網頁+雙導覽列

(8)資料蒐集分析:
http://zh.wikipedia.org/zh-hant/%E5%BC%B5%E6%83%A0%E5%A6%B9
張惠妹維基百科~

[作業07] 以Float：浮動，製作雙欄網頁 (no replies)

1015445271 — Wed, 02 Jan 2013 00:24:35 +0800

(1).作業網址： http://mepopedia.com/~web101c/hw07/hw07-1015445271

1.網頁主題：主題是:幾米但暫時還沒做好,先拿莫內練習完的.

2.有無遇到的問題? 問題大條了,作頁7會做,5和6不會怎麼辦= =

3.製作感想作頁7好像比較難,但是我做出來了5和6卻不會做...

4.製作作業的時間一天半

[作業] 優良設計網站蒐集與分析 (no replies)

1015445271 — Wed, 02 Jan 2013 00:14:43 +0800

1.分析範例網站網址：http://www.jimmyspa.com/default.aspx

2.網站名稱及主題：幾米
關於幾米的作品相關消息,活動宣傳等等.

3.主要消費族群：喜歡幾米,及熱愛繪本,動畫的男女老少和兒童.

4.設計風格：整體以白、淡藍色為主要色調
　　　　　　讓人感覺有簡單,有繪本的味道.
　　　　　　　　　　　　
5.色彩分析：http://i.imgur.com/CYl3s.jpg

6.版面分析：(1) 網站 width：1349px、height：1336px、margin：0、padding：1

7.跨瀏覽器問題與分析
使用IE7 IE8 IE9 FireFox Google Chrome 都可以

學號:1015445271

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

1015445271 — Tue, 01 Jan 2013 23:18:09 +0800

(1) 網站主題：幾米
(2) 導覽列架構設定：http://i.imgur.com/HghYG.jpg

3)尺寸與架構設定：http://i.imgur.com/dX2Tn.jpg

4)主要瀏覽族群：喜歡繪本,動畫,和關於幾米的大人小孩
(5)風格設定：歡樂,童心未免的感覺
(6)主色調：白,藍,黃,綠
(7)製作動機: 幾米繪本超酷,而且又是台灣人
(8)製作目的：想要更了解廖福彬
預期效果：完整ok

(8)資料蒐集分析
http://www.jimmyspa.com/default.aspx

[作業04] 以CSS製作網頁導覽列 (no replies)

1015445242 — Mon, 17 Dec 2012 16:50:25 +0800

(1).作業網址： http://mepopedia.com/~web101c/hw04/hw04-1015445242/

(2).請回答以下問題：
1.導覽列配色與風格設定：紅白+藍白的設計
2.有無遇到的問題? :圖片出不來
3.製作感想(你認為導覽列的意義為何:要調整顏色有些複雜還要換連結後的顏色
4.製作作業的時間:1個小時

[作業07] 以Float：浮動，製作雙欄網頁 (30 replies)

JinJin — Wed, 09 Jan 2013 03:41:35 +0800

1. 一、製作步驟
2. 二、繳交作業方式

請參考

[color=#CC3300][講義07] 以Float：浮動，製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]

的步驟製作，並符合以下條件：

1. 一、製作步驟

1.下載附件的練習檔(或由期中作業修改製作，但必須是全新的內容的一頁，不要與範例內容相同)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS

4.在#content中插入#content-L及#content-R利用Float:浮動屬性，製作雙欄網頁。

5.在#content-L放入垂直檔覽列。

6.將#content-R的資料以表格整理，複習表格的做法。

[hr]

7.在[color=#990033]title的部分打上『自己作業的命名』[/color]

8.在#footer打上自己的版權聲明

9.請每位同學依步驟完成本單元後，上傳至FTP

10.本次作業的重點在於：

[color=#CC0066]（1 ）認識多欄網頁。
（2 ）雙欄網頁製作
（3 ）製作垂直導覽列
（4 ）複習表格的做法
（5 ）利用CSS，做更細緻的網頁美化設定。 ([/color]

[hr]

2. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第七個平時作業FTP上的資料夾為：hw07

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[作業06] 表格的製作美化與資料整理 (34 replies)

JinJin — Thu, 10 Jan 2013 12:48:31 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式

請參考

[color=#CC3300][講義06] 表格的製作
http://mepopedia.com/forum/read.php?804,18062[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw06-ex/[/color]

的步驟製作，並符合以下條件：

3. 一、製作步驟

1.下載附件的練習檔(或由期末(期中)作業修改製作，但必須是全新的內容的一頁，不要與範例內容相同)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考影音步驟，但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko

4.製作並以美化表格，將資料以表格做整理

Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定

http://www.youtube.com/watch?v=3gPx_YYE1yI

[hr]

Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY

[hr]

Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ

[hr]

5.在[color=#990033]title的部分打上『自己作業的命名』[/color]

6.在#footer打上自己的版權聲明

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）表格製作與美化
（2 ）利用CSS，做更細緻的網頁美化設定
（4 ）如何利用表格，將圖片、影音與文字的編排搭配出有質感的網頁。[/color]

[hr]

4. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第六個平時作業FTP上的資料夾為：hw06

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

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

JinJin — Thu, 10 Jan 2013 23:46:20 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式
5. 製作說明：
6. 作業設計重點
7. 評分標準與製作檢核
8. 繳交作業方式
9. 回覆說明
10. 期末作業進度參考
11. 學長姐作品參考
11.1 其他作品

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

[hr]

5. 製作說明：

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

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

3.必須考慮設計風格與質感，並需自行設計圖片，製作網站內容。

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

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

6.製作完成上傳至FTP

[hr]

6. 作業設計重點

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

7. 評分標準與製作檢核

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

[hr]

8. 繳交作業方式

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

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

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

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

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

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

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

[hr]

9. 回覆說明

[color=#0066CC]完成品[/color](1/6前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：
[color=#CC0066]4.請務必在1/6前回覆，否則為遲交[/color]

[color=#0066CC]前置作業[/color](12/17)
(1)網站主題：
(2)導覽列架構設定

範例參考(可下載參考附檔的做法)：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg[/IMG]

(3)尺寸與架構設定

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

(4)主要瀏覽族群：
(5)風格設定：
(6)主色調，輔助色調：
(7)製作動機：
(8)製作目的：
預期效果：

(8)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
http://mepopedia.com/forum/read.php?1173,27997
並將網站分析於12/17前回覆於前述網址[/color]

◎相關網站列表與分析：

[hr]

10. 期末作業進度參考

第十二週11/26　題目及網站架構確定
第十三週12/03　版型、尺寸確定，資料蒐集與網站分析
第十四週12/10　資料蒐集與網站分析、圖片製作，內容建構
第十五週12/17　圖片製作，內容建構
第十六週12/24　檢討與修正
第十七週12/31　(調整放假) 細修、完成與上傳
第十八週01/07　成績確認與最後修改

[hr]
[color=#CC0066]進階參考：ubuntu網頁設計規範手冊 ubuntu Web Design Guidelines[/color]
http://design.ubuntu.com/web
下載：http://design.canonical.com/brand/D.%20Ubuntu%20Web%20Guidelines.pdf
[hr]

11. 學長姐作品參考

-

[size=small](1) 作業網址： http://mepopedia.com/~web100b/final/final-1001445022
(2).
　1. 製作作業的時間：超過二十四小時
　2. 有無遇到的問題：[color=#9999CC]同樣是跨瀏覽器的問題
　　　　　　　　　　還有關於 content 裡面的 L 跟 R 的問題
　　　　　　　　　　就算跟著老師的方法做也一樣不會跟著跑這樣[/color]
　　　　　　　　　　[color=#FF0000]這些問題已經從老師那裡得到解答，解決囉！：）[/color]
　3. 製作心得與感想：雙欄式的網頁真的困難重重
　　　　　　　　　　但很高興我能從這樣的網頁中學會自己克服困難、解決問題
　　　　　　　　　　做完之後很有成就感，很高興：）

-

(1) 網站主題：金在中／東方神起
(2) 導覽列架構設定：
[IMG]http://i.imgur.com/E8uEV.jpg[/IMG]
(3) 尺寸與架構設定：
[IMG]http://i.imgur.com/FUmdw.jpg[/IMG]
(4) 風格設定：簡約、華麗、精緻
(5) 主色調，輔助色調：紅、黑；白、飽和度不依的紅、灰，等
(6) 製作動機：
　　　喜歡一個人不能只是看外表，很多人因為他的長相而喜歡他
　　　哪天他的髮型換了，身材變了，沒有了原本的帥氣，就不喜歡了
　　　最討厭這種人‥
(7) 製作目的：讓更多人認識金在中這個人

預期效果：呈現擁有自我風格的雙欄式網頁[/size]

[hr]

1. 其他作品

http://mepopedia.com/~web100b/final/final-1001445042/
http://mepopedia.com/~web100b/final/final-1001445123/
http://mepopedia.com/~web100b/final/final-1001445004/index1.html
http://mepopedia.com/~web100b/final/final-1001445049/
http://mepopedia.com/~web100a/final/final-1001445021/
http://mepopedia.com/~web100a/final/final-1001445013/
[hr]

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

[作業08] 優良設計網站蒐集與分析 (13 replies)

JinJin — Mon, 07 Jan 2013 16:45:13 +0800

12. 優良網站分析

請每位同學於12/17前，至少選擇一個優良網站分析(越多越好)
以作為期末作業的參考

可下載附加檔案
並請參考以下的範例製作，回覆於此篇文章，註明：

1.分析範例網站網址：
2.網站名稱及主題：
3.主要消費族群：
4.設計風格
5.色彩分析
6.版面分析
[color=#666600](1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：[/color]

7.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)

學號：

[hr]

13. 範例分析

1. 範例網站：

http://www.j-period.com/jp/

2. 網站名稱及主題：J-period

從日本全國嚴選的日式餐具到精美擺飾
融合日本古典美與現代時尚美，提倡全新和風的品牌。不受時代潮流左右的日本之美與精神性，帶領現代生活進入嶄新的舒適生活樣式。

3. 主要消費族群

1.注重生活品味的白領階級
2.喜愛日式及東方品味的族群

4. 設計風格：

簡約的日式風格，以黑灰白為主色調，漢字以細黑體字應為以羅馬字為主，重點輔以粗體，優雅的簡潔的編排，襯托出古典時尚感。

5. 色彩分析

6. 版面分析

富有層次的導覽設計，值得學習，於右上有主要的導覽列，做為整個網站的主要內容架構。

首頁以圖片輪替的FLASH動畫呈現，讓瀏覽者欣賞最新的產品。

進入內容後，則於主導覽列下方出現麵包屑導航，使瀏覽者輕易的了解所處的網頁層級與所在。

離開首頁，進入其他頁面後，左方則彈性的出現垂直導覽列，顯示並連結更細部的訊息或產品介紹頁面，使網站的內容更加豐富與深入。

某些內容較單純的頁面(如：Concept)則無導覽列，僅出現標題及右側主內容。

(1).主頁尺寸與margin設定

#container { width: 860px; position: relative; margin: 0px auto; }

(2).網站雙欄語法
(按F12或於要檢查的部分右鍵檢查元素觀察)：

右上方主導覽列的語法

[IMG]http://i556.photobucket.com/albums/ss1/whc915/webna-1.jpg[/IMG]

雙欄左側垂直導覽列的語法

以

清單項目製作

[IMG]http://i556.photobucket.com/albums/ss1/whc915/webna-2.jpg[/IMG]

附註：
[size=small][color=#CC0066]麵包屑導航(BreadcrumbNavigation)[/color] 的概念來源於童話故事，它的作用是告訴訪問者他們目前在網站中的位置以及如何返回，麵包屑導航的意義在於明確告知用戶目前處於網站的何種位置，方便用戶通過該導航快速達到上級頁面。從用戶體驗角度講，這種導航的設計是建議在當前視窗打開的。

麵包屑導航一般都在導航的下面，形式一般為首頁 > 一級目錄名稱 > 二級目錄名稱 > 目前位置，儘量要把麵包屑導航的層次控制在四層以內，這樣也有利與搜尋引擎蜘蛛一層層往下爬。http://www.seohouse.org/seo-concepts-site-breadcrumbs.html[/size]

7. 跨瀏覽器問題與分析

(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)

於不同瀏覽器觀察無差異。

========================================================================================
[color=#CC0099]※並可參考[WEB] 優良設計網站蒐集與分析：
1.http://mepopedia.com/forum/read.php?804,18412
2.http://mepopedia.com/forum/read.php?804,15323※[/color]
========================================================================================

[作業04] 以CSS製作網頁導覽列 (45 replies)

JinJin — Wed, 03 Dec 2014 00:09:23 +0800

14. 參考講義

[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

15. 製作說明

1.請參考 [講義04] 以CSS製作網頁導覽列的步驟製作，以及使用以下的語法完成。

2.只要做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-101xxxxxxx 資料夾中

4.請每位同學依步驟完成本單元後，上傳至FTP

5.本次作業的重點在於：

（1 ）以清單方式＜ul＞及＜li＞利用CSS製作導覽列
（3 ）熟悉以清單方式＜ul＞及＜li＞製作導覽列的語法，自行修改成設定的風格
（4 ）如何將圖片與色彩搭配出有質感的導覽列。

16. 參考語法

1. 新增index.html檔案，貼上以下語法

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>以CSS製作網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul> </body> </html>
[hr]

2. 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可

[hr]

1. 第一種靠左型

#button { font-weight: bolder; color: #FFF; background-color: #6E6E6E; padding-bottom: 2px; height: 20px; padding-top: 2px; font-size: 14px; margin: 0px; } #button a { display: block; float: left; width: 150px; color: #FFF; text-decoration: none; } #button a:hover{ color: #7CCBDC; } #button li { float: left; list-style-type: none; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; padding-left: 10px; }

2. 第二種置中型

#button { font-weight: bolder; color: #FFF; font-size: 14px; background-color:#6E6E6E; margin: 0px; padding:0px; } #button li { width:178px; text-align:center; list-style-type:none; background-color:#6E6E6E; float:left; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; margin-right:1px; } #button li a { display: block; line-height: 22px; color: #FFF; text-decoration: none; } #button li a:hover{ background-color:#39919F }
[hr]

17. 繳交方式

1.製作完成後，檔案命名方式：

第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web101c/hw04/hw04-10154452XX

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾(非必要)

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想(你認為導覽列的意義維和
4.製作作業的時間

[作業05] 網頁導覽列、繞圖排文與推文按鈕的應用 (43 replies)

JinJin — Thu, 10 Jan 2013 12:43:08 +0800

請參考

[color=#CC3300][講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032[/color]

[color=#CC3300][講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　[/color]

的步驟製作，並符合以下條件：

18. 一、製作步驟

1.下載附件的練習檔(或由期中作業修改製作，但必須是全新的內容的一頁)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text004.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text005.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text006.jpg[/IMG]

4.設定內文的主標題h2，可參考圖示步驟，但不可為一樣的設定
(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10-2.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10.jpg[/IMG]

5.設定類別作者介紹的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text001.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text002.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text003.jpg[/IMG]

6.設定繞圖排文

7.設定臉書、噗浪以及推特的按鈕及分享語法

8.製作圖片跳出視窗的設定

9.在[color=#990033]title的部分打上『自己作業的命名』[/color]

10.在#footer打上自己的版權聲明

11.請每位同學依步驟完成本單元後，上傳至FTP

12.本次作業的重點在於：

[color=#CC0066]（1 ）善用CSS導覽列功能
（2 ）繞圖排文
（3 ）推文設定
（4 ）利用CSS，做更細緻的內文設定
（5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]

[hr]

19. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[整理] 期中作業問題整理 (no replies)

JinJin — Tue, 06 Nov 2012 23:42:57 +0800

連結問題
1.圖片或CSS失連
通常是路徑有誤，常連結到自己本身電腦的某個資料夾裡
請將正確檔案放置同一資料夾中，重新連結正確路徑
否則會產生圖片無法顯現或設計樣式亂掉

圖片無法顯示的問題
1.圖片路徑有誤
2.圖片取成中文名稱(只能取半形的英文或數字以及 - 或 _ )
3.圖片為CMYK格式(應該為RGB格式)

CSS設定問題
1.記得#header、#content、#footer都必須分別設定padding，否則會緊貼邊緣，破壞設計感
2.邊框的設定在#wrapper的邊框設定
3.行間設定為line-height
4,背景圖或背景顏色設定在body，請善用，以做為整體風格的統一

設計美感
1.注意整體的色彩搭配，與欲呈現的風格是否統一?
2.每個區塊的字體大小、字體與顏色是否呈現和諧感?
3.首圖設計請凸顯主圖與風格
4.部分自製圖文字都偏大，宜調整，以符合設計美感與質感

5.直接複製網路上的文字時，尤其是維基百科，請不要把連結一起帶進來，影響視覺美感，也混淆連結意義

陸續補充.....

[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 (47 replies)

JinJin — Sun, 11 Nov 2012 22:09:49 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式
5. 製作說明：
6. 作業設計重點
7. 評分標準與製作檢核
8. 繳交作業方式
9. 回覆說明
10. 期末作業進度參考
11. 學長姐作品參考
11.1 其他作品
12. 優良網站分析
13. 範例分析
13.1 範例網站：
13.2 網站名稱及主題：J-period
13.3 主要消費族群
13.4 設計風格：
13.5 色彩分析
13.6 版面分析
13.7 跨瀏覽器問題與分析
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.2.1 第一種靠左型
16.2.2 第二種置中型
17. 繳交方式
18. 一、製作步驟
19. 二、繳交作業方式
20. 一、製作說明
21. 二、繳交作業方式

20. 一、製作說明

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件

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

4. 在#wrapper寬度上打上 px的數值

5. #content內，自行打入不同的內容文字，自行隨意設定

6. 以本單元的架構下，文字、圖片及設定，可依講義或自行發揮，也可以期中作業的內容開始製作

7. 本次作業的重點在於：

　[color=#CC0000](1) 練習 Dreamweaver 的操作與使用
　(2) 透過 Dreamweaver 的練習，比較藉由 Dreamweaver 輔助與直接編輯「HTML/CSS原始碼」的優缺點。
　(3) 利用圖片設計加上CSS色彩搭配，營造網頁整體風格（加分）[/color]

21. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

每位同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為:http://mepopedia.com/~web101c/hw03/hw03-10154452xx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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

2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址

　(2) 風格設定（色彩設定部份）(也可以期中作業的內容開始製作)（加分）

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間

4.請務必在下次上課前回覆，否則為遲交

[hr]
[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~jinjin/web/hw03/

===========================================
本週補充講義：
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]

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

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

JinJin — Thu, 10 Jan 2013 22:46:14 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式
5. 製作說明：
6. 作業設計重點
7. 評分標準與製作檢核
8. 繳交作業方式
9. 回覆說明
10. 期末作業進度參考
11. 學長姐作品參考
11.1 其他作品
12. 優良網站分析
13. 範例分析
13.1 範例網站：
13.2 網站名稱及主題：J-period
13.3 主要消費族群
13.4 設計風格：
13.5 色彩分析
13.6 版面分析
13.7 跨瀏覽器問題與分析
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.2.1 第一種靠左型
16.2.2 第二種置中型
17. 繳交方式
18. 一、製作步驟
19. 二、繳交作業方式
20. 一、製作說明
21. 二、繳交作業方式
22. 製作步驟及製作說明
23. 二、評分標準與製作檢核
24. 繳交作業方式
25. 回覆本篇文章
26. 期中作業進度參考
27. 參考範例

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

22. 製作步驟及製作說明

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

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

3.題目自訂，選擇自己有興趣的主題，如個人網站或介紹自己喜愛的某個事物

4.可單純以色彩配色或自行設計圖片，製作網站內容

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

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

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

8.製作完成上傳至FTP

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

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

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

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分。

[hr]

24. 繳交作業方式

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

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

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

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

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

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

[hr]

25. 回覆本篇文章

[color=#0066CC]完成品[/color](11/05前)
(1)作業網址：
(2).
1.設計風格：
2.色彩計畫：
3.有無遇到的問題：
4.製作感想：
5.製作作業的時間：

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

26. 期中作業進度參考

第六週　10/15　前置作業，題目確定，資料蒐集與分析等
第七週　10/22　決定排版形式、尺寸、圖片製作
第八週　10/29　HTML DIV與CSS設定
11/02 問題討論
第九週　11/05　11/05之前將期中作業上傳繳交，評分

[hr]

27. 參考範例

http://mepopedia.com/forum/read.php?851,16485

http://mepopedia.com/forum/read.php?855,16484

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (59 replies)

JinJin — Sat, 10 Nov 2012 19:03:39 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式
5. 製作說明：
6. 作業設計重點
7. 評分標準與製作檢核
8. 繳交作業方式
9. 回覆說明
10. 期末作業進度參考
11. 學長姐作品參考
11.1 其他作品
12. 優良網站分析
13. 範例分析
13.1 範例網站：
13.2 網站名稱及主題：J-period
13.3 主要消費族群
13.4 設計風格：
13.5 色彩分析
13.6 版面分析
13.7 跨瀏覽器問題與分析
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.2.1 第一種靠左型
16.2.2 第二種置中型
17. 繳交方式
18. 一、製作步驟
19. 二、繳交作業方式
20. 一、製作說明
21. 二、繳交作業方式
22. 製作步驟及製作說明
23. 二、評分標準與製作檢核
24. 繳交作業方式
25. 回覆本篇文章
26. 期中作業進度參考
27. 參考範例
28. [color=#663300]一、製作說明：[/color]
29. [color=#663300]二、繳交作業方式[/color]

[color=#990000][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/color]

28. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16481][講義] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]的步驟製作，自行選擇一主題，並設定網頁風格。

2.每個同學記得在[color=#990033]title的部分打上"視傳一C-學號-以色塊建構的網頁單欄排版"[/color]

3.在#wrapper寬度上打上 px的數值

4.#header、#content及#footer內，自行打入不同的內容文字，自行隨意設定

5.請每位同學依步驟完成本單元─網頁版面基本架構與背景色及字體設定後，上傳至FTP

6.本次作業的重點在於：

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定設計出具有質感的網頁[/color]

29. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第二個作業FTP上的資料夾為：hw02

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

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔

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

2.上傳至FTP

3.回覆本篇文章

(1).作業網址

(2).請回答以下問題：
1.製作主題
2.欲呈現之配色風格：
3..有無遇到的問題?
4.製作感想

===========================================
[color=#CC0066]請務必在下次上課前回覆，否則為遲交，扣十分[/color]
===========================================

[作業01] 以HTML與CSS完成第一個網頁 (56 replies)

JinJin — Sun, 11 Nov 2012 22:05:30 +0800

1. 一、製作步驟
2. 二、繳交作業方式
3. 一、製作步驟
4. 二、繳交作業方式
5. 製作說明：
6. 作業設計重點
7. 評分標準與製作檢核
8. 繳交作業方式
9. 回覆說明
10. 期末作業進度參考
11. 學長姐作品參考
11.1 其他作品
12. 優良網站分析
13. 範例分析
13.1 範例網站：
13.2 網站名稱及主題：J-period
13.3 主要消費族群
13.4 設計風格：
13.5 色彩分析
13.6 版面分析
13.7 跨瀏覽器問題與分析
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.2.1 第一種靠左型
16.2.2 第二種置中型
17. 繳交方式
18. 一、製作步驟
19. 二、繳交作業方式
20. 一、製作說明
21. 二、繳交作業方式
22. 製作步驟及製作說明
23. 二、評分標準與製作檢核
24. 繳交作業方式
25. 回覆本篇文章
26. 期中作業進度參考
27. 參考範例
28. [color=#663300]一、製作說明：[/color]
29. [color=#663300]二、繳交作業方式[/color]
30. 參考講義
31. 需下載的軟體
32. 繳交作業的方式
33. 參考範例

30. 參考講義

1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以 HTML 與 CSS 完成第一個網頁[/url]
2.[url=http://mepopedia.com/forum/read.php?976,20200][講義] FileZila FTP上傳圖例教學[/url]

[hr]

31. 需下載的軟體

FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
[hr]
好用的免費記事本軟體
Notepad++官方網頁：http://notepad-plus-plus.org/

[hr]

32. 繳交作業的方式

1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web101c/hw01/hw01-101xxxxxxx

2.切勿擅改別人的資料檔案，若經發現則以零分計

[hr]

這禮拜請同學按照講義的步驟及做法，
1.以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定

2.至少兩個可以互相連結的html檔，其中首頁命名為index.html，另一檔案可命名為about.html
3.以及一個命名為style.css的css樣式檔

存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址：

2.有無遇到的問題，製作心得與製作作業的時間

33. 參考範例

1.http://mepopedia.com/forum/read.php?855,15612
2.http://mepopedia.com/forum/read.php?851,15597
3.http://mepopedia.com/forum/read.php?976,20201

JinJin 的視覺設計專區 - 101-1《中國》竹視傳一C-網頁設計

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

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

1015445258 (no replies)

[作業07] 以Float：浮動，製作雙欄網頁 (no replies)

[作業] 優良設計網站蒐集與分析 (no replies)

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

[作業04] 以CSS製作網頁導覽列 (no replies)

[作業07] 以Float：浮動，製作雙欄網頁 (30 replies)

1. 一、製作步驟

2. 二、繳交作業方式

[作業06] 表格的製作美化與資料整理 (34 replies)

3. 一、製作步驟

4. 二、繳交作業方式

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

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

5. 製作說明：

6. 作業設計重點

7. 評分標準與製作檢核

8. 繳交作業方式

9. 回覆說明

10. 期末作業進度參考

11. 學長姐作品參考

1. 其他作品

[作業08] 優良設計網站蒐集與分析 (13 replies)

12. 優良網站分析

13. 範例分析

1. 範例網站：

2. 網站名稱及主題：J-period

3. 主要消費族群

4. 設計風格：

5. 色彩分析

6. 版面分析

7. 跨瀏覽器問題與分析

[作業04] 以CSS製作網頁導覽列 (45 replies)

14. 參考講義

15. 製作說明

16. 參考語法

1. 新增index.html檔案，貼上以下語法

2. 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可

1. 第一種靠左型

2. 第二種置中型

17. 繳交方式

[作業05] 網頁導覽列、繞圖排文與推文按鈕的應用 (43 replies)

18. 一、製作步驟

19. 二、繳交作業方式

[整理] 期中作業問題整理 (no replies)

[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 (47 replies)

20. 一、製作說明

21. 二、繳交作業方式

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

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

22. 製作步驟及製作說明

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

24. 繳交作業方式

25. 回覆本篇文章

26. 期中作業進度參考

27. 參考範例

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (59 replies)

[color=#990000][作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例[/color]

28. [color=#663300]一、製作說明：[/color]

29. [color=#663300]二、繳交作業方式[/color]

[作業01] 以HTML與CSS完成第一個網頁 (56 replies)

30. 參考講義

31. 需下載的軟體

32. 繳交作業的方式

33. 參考範例