[講義05] 繞圖排文與推文按鈕的應用 (no replies)

November 15, 2011, 9:16 am

≫ Next: [講義] 透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列 (no replies)

≪ Previous: [CSS] 圖片空隙的起因：圖片標籤(img)是內文元素(inline element)，會有「尾巴」 (no replies)

這次要跟大家詳細的介紹繞圖排文和推文的按鈕設定。
希望大家能夠更徹底的了解Float:浮動，以及Padding:內距的意義，並善用Padding:內距，將文字的排版得更舒適更有設計感。

本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　

20. 一、繞圖排文

網頁設計中編排包含圖片、文字的版面時，由於圖片通常比文字高很多，若將它們排在同一行，則圖片旁邊容易出現過多的留白，使版面看起來很空洞，如圖所示：

http://i1136.photobucket.com/albums/n481/parkparkyang/img-01.jpg

為了讓版面看起來更緊實更有設計感，通常會以「繞圖排文」的方式來排版，也就是將文字排到圖片旁邊的空白處。

http://i1136.photobucket.com/albums/n481/parkparkyang/img-02.jpg

這種做法需透過 CSS 來設定，以下則為「繞圖排文」的步驟：

1. 1.在準備好的文字中插入圖片

http://i1136.photobucket.com/albums/n481/parkparkyang/img-03.jpg

2. 2.新增類別CSS，命名為floatleft

http://i1136.photobucket.com/albums/n481/parkparkyang/img-04.jpg

3. 3.Float浮動設定Left靠左對齊，Padding內距?上右下設定為20px

http://i1136.photobucket.com/albums/n481/parkparkyang/img-05.jpg

4. 4.將圖片設定為靠左的浮動，選取類別中的floatleft

http://i1136.photobucket.com/albums/n481/parkparkyang/img-06.jpg

5. 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離

http://i1136.photobucket.com/albums/n481/parkparkyang/img-07.jpg

6. 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft

http://i1136.photobucket.com/albums/n481/parkparkyang/img-08.jpg

7. 7.Float浮動設定Right靠右對齊，Padding內距?上左下設定為20px

http://i1136.photobucket.com/albums/n481/parkparkyang/img-09.jpg

21. 二、推文按鈕的應用

現在幾乎人人臉書的時代，大家都習慣順手按推或分享，若希望自己設計的網站有更多人參訪，可以加入臉書、噗浪或推特的按鈕，並加入分享的語法，動作很簡單，請跟著以下的步驟來做：

1. 1.插入準備好的臉書、噗浪及推特的按鈕圖片

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-01.jpg

2. 2.替代文字中寫入：將本篇文章推薦到臉書

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-02.jpg

3. 3.為圖像設定類別CSS命名為iconstyle

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-03.jpg

於CSS中加入以下語法

.iconstyle { cursor: pointer; }

4. 4.分享到臉書、噗浪及推特的JavaScript語法

//推到 facebook 臉書// void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)))); //推到 plurk 噗浪// void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')'))); //推到 twitter 推特// void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat (encodeURIComponent(location.href))));

5. 5.點選按鈕，進入行為面板

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-06.jpg

6. 6.點選→行為→呼叫JavaScript

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-07.jpg

7. 7.分別複製語法後貼上

http://i1136.photobucket.com/albums/n481/parkparkyang/fb-08.jpg

8. 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!

22. 三、圖片的彈跳視窗設定

1. 1.點選圖片，進入行為面板

http://i1136.photobucket.com/albums/n481/parkparkyang/ja-001.jpg

2. 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高

http://i1136.photobucket.com/albums/n481/parkparkyang/ja-002.jpg

3. 3.點擊圖片後的效果<

http://i1136.photobucket.com/albums/n481/parkparkyang/ja-003.jpg

↧

[講義] 透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列 (no replies)

November 20, 2011, 8:54 am

≫ Next: [講義06] 表格的製作 (1 reply)

≪ Previous: [講義05] 繞圖排文與推文按鈕的應用 (no replies)

18. 一、透過CSS，以清單 ul 及 li 製作網頁導覽列

導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。

以下為Dreamweaver搭配設計版面與程式碼的分割畫面，大家能更清楚的了解清單導覽列的製作方法

19. 二、以Dreamweaver搭配設計版面與程式碼的分割畫面的製作步驟

1. 1.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目

http://i1136.photobucket.com/albums/n481/parkparkyang/list-01.jpg

2. 2.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目

http://i1136.photobucket.com/albums/n481/parkparkyang/list-02.jpg

3. 3.接著，加入連結的語法

http://i1136.photobucket.com/albums/n481/parkparkyang/list-03.jpg

4. 4.接著設定導覽列的ID名稱為#button，直接設定於＜ul＞

http://i1136.photobucket.com/albums/n481/parkparkyang/list-04.jpg

http://i1136.photobucket.com/albums/n481/parkparkyang/list-05.jpg

http://i1136.photobucket.com/albums/n481/parkparkyang/list-10.jpg

10.

11.

12.

13.

14.

15.

16.

17.

18.

http://i1136.photobucket.com/albums/n481/parkparkyang/list-19.jpg

19.

20.

21.

↧

[講義06] 表格的製作 (1 reply)

February 5, 2012, 4:31 am

≫ Next: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) (no replies)

≪ Previous: [講義] 透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列 (no replies)

本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/

在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。

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

15. 表格的概述

表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。

16. 表格中的標記

最常用的與表格相關的標記為<table>、<tr>、<td>。

<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格

如以下是三列兩欄表格的HTML語法：

表格儲存格	表格儲存格
表格儲存格	表格儲存格
表格儲存格	表格儲存格

另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：

<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。

<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。

例如表格也可以這樣表現：

表格的標題
表格標頭	表格標頭
表格儲存格	表格儲存格
表格儲存格	表格儲存格

各部位如圖所示

17. 表格的邊框

1. 設定儲存格的邊框

border-collapse:collapse;

HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離

以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。

接下來則以實例來解說表格的應用：

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

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

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

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

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

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

↧

[講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) (no replies)

November 29, 2011, 9:34 am

≫ Next: [作業09] 優良設計網站蒐集與分析 (39 replies)

≪ Previous: [講義06] 表格的製作 (1 reply)

8. 雙欄網頁概述

本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/

多欄式的網頁配置，可以透過float：浮動屬性或position：定位屬性來處理。這兩種方法對版塊造成的影響也相當大。

float：浮動屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。

position：定位屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。

9. 雙欄網頁，float：浮動屬性做法概述

本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。

以float：浮動屬性製作多欄網頁的做法有很多種，分別敘述如下：

1. 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動

2. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

3. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

10. 本單元雙欄網頁範例，float：浮動屬性做法概述

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：

HTML的架構語法如下：

<div id="wrapper"> <div id="header"></div> <ul id="button"></ul> <div id="content"> <div id="content-L"></div> <div id="content-R"></div> </div> </div>

CSS的設定如下：

#content-L{ width: 180px; /*#content-L的寬度*/ float: left; /*#content-L設定靠左邊浮動*/ } #content-R{ background-color: #FFF; /*設定底色為白色*/ margin-left: 180px; /*間距設定為180px，(#content-L的寬度)*/ } #content{ background-image: url(images/left-bg.gif); /*設定背景圖片，會顯示在#content-L*/ } #footer{ clear:both; /*清除浮動設定*/ }

11. 雙欄網頁，float：浮動屬性做法步驟

以下則為製作雙欄浮動的圖解步驟：

1. 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊

http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg

2. 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入

http://i556.photobucket.com/albums/ss1/whc915/hw07-03.jpg

3. 新增ID CSS，命名為content-L

http://i556.photobucket.com/albums/ss1/whc915/hw07-04.jpg

4. Float浮動設定Left，靠左對齊；寬度設為?180px

http://i556.photobucket.com/albums/ss1/whc915/hw07-05.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-06.jpg

5. 設定#content-L，Padding:6px

http://i556.photobucket.com/albums/ss1/whc915/hw07-24.jpg

6. 新增ID CSS，命名為content-R

http://i556.photobucket.com/albums/ss1/whc915/hw07-07.jpg

7. Margin：間距，設定180px (#content-L的寬度)

http://i556.photobucket.com/albums/ss1/whc915/hw07-08.jpg

8. #content-R?的字型設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-09.jpg

9. #content-R?背景設為白色

http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg

10. #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服

http://i556.photobucket.com/albums/ss1/whc915/hw07-11.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-12.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-13.jpg

11. #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)

http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-16.jpg

12. 於#content-L?插入影像

http://i556.photobucket.com/albums/ss1/whc915/hw07-17.jpg

13. 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字

http://i556.photobucket.com/albums/ss1/whc915/hw07-18.jpg

14. 選取，設成清單項目

http://i556.photobucket.com/albums/ss1/whc915/hw07-19.jpg

15. Back回上行?Enter段落?成為清單li

http://i556.photobucket.com/albums/ss1/whc915/hw07-20.jpg

16. 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list

http://i556.photobucket.com/albums/ss1/whc915/hw07-21.jpg

17. 新增ID CSS命名為L-list

http://i556.photobucket.com/albums/ss1/whc915/hw07-22.jpg

18. #L-list?的字型設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-23.jpg

19. 將#L-list,清單樣式設為none(無樣式)

http://i556.photobucket.com/albums/ss1/whc915/hw07-27.jpg

20. 將#L-list,Margin、Padding 皆設為0，清除清單預設距離

http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-26.jpg

21. 雙欄式網頁及左側的L-list,清單樣式大致設定完成

12. 表格設定的步驟

1. 於#content-R插入表格

http://i556.photobucket.com/albums/ss1/whc915/hw07-28.jpg

2. 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題

此處改為固定寬度(約小於 650px，視整體寬度而定)

http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg

3. 將資料分別整理至表格之中

http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg

4. 將表格自行命名為monent-table

http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg

5. 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>

http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg

6. 在table下插入表格大標題<caption></caption>

http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg

7. 新增.monent-table tr th 標題CSS樣式

http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-36.jpg

8. 設定表格標題字型、設定表格標題底色

http://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg

9. 新增.monent-table tr td 表格內文CSS樣式

http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg

10. .monent-table tr td 表格內文，Padding內距與邊框底線的設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-42.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg

11. 新增.monent-table caption 表格大標題CSS樣式

http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg

12. .monent-table tr td 表格內文，底色與邊框底線的設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-45.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-46.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-47.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-48.jpg

13. 錨點連結設定的步驟

1. 在標題欄前，插入→命名錨點，並自行命名

http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg

2. 於每個標題前，分別命名錨點

http://i556.photobucket.com/albums/ss1/whc915/hw07-51.jpg

3. 在header標題欄，插入→命名錨點，並自行命名為top

http://i556.photobucket.com/albums/ss1/whc915/hw07-52.jpg

4. 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01

http://i556.photobucket.com/albums/ss1/whc915/hw07-53.jpg

5. 分別設定完成

http://i556.photobucket.com/albums/ss1/whc915/hw07-54.jpg

6. 插入回前一動作#top 的連結│BACK│

http://i556.photobucket.com/albums/ss1/whc915/hw07-55.jpg

7. │BACK│設置靠右對齊

http://i556.photobucket.com/albums/ss1/whc915/hw07-56.jpg

14. 左側清單列按鈕設定的步驟

1. 新增 #L-list li a 左側清單超連結CSS設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-57.jpg

2. 設定#L-list li a ，字型及底部邊框的設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-59.jpg

3. 設定#L-list li a ，的區塊為block

http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-61.jpg

4. 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-62.jpg

5. 設定#L-list li a:hover ，字型、底色、底部邊框的設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-63.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-64.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-65.jpg

6. 設定後，滑鼠移過的效果

http://i556.photobucket.com/albums/ss1/whc915/hw07-66.jpg

7. 設定#L-list li a:hover ，加入底圖的設定

http://i556.photobucket.com/albums/ss1/whc915/hw07-67.jpg

8. 設定#L-list li a:hover 高度

http://i556.photobucket.com/albums/ss1/whc915/hw07-68.jpg

9. 設定後，滑鼠移過的底圖效果

http://i556.photobucket.com/albums/ss1/whc915/hw07-69.jpg

↧

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

January 8, 2012, 12:20 am

≫ Next: [講義10] 以Spry 效果及組件製作動態網頁與 (3 replies)

≪ Previous: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) (no replies)

6. 優良網站分析

請每位同學於12/21前，至少選擇一個優良網站分析(越多越好)
參考範例製作，回覆於此篇文章，註明：

1.分析範例網站：
2.網站名稱及主題：
3.設計風格
4.色彩分析
5.版面分析
(1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：

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

班級：
學號：

7. 範例分析

1. 範例網站：

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

2. 網站名稱：J-period

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

3. 設計風格：

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

4. 色彩分析

5. 版面分析

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

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

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

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

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

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

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

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

右上方主導覽列的語法

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

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

以
<dl>
<dt></dt>
<dd>

<ul>
<li></li>
</ul>

</dd>
</dl>

清單項目製作

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

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

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

6. 跨瀏覽器問題與分析

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

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

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

↧

[講義10] 以Spry 效果及組件製作動態網頁與 (3 replies)

January 3, 2012, 10:31 am

≫ Next: RE:作業九 (no replies)

≪ Previous: [作業09] 優良設計網站蒐集與分析 (39 replies)

本講義整理自

1. Adobe Dreamweaver CS5 & CS5.5使用手冊

http://help.adobe.com/zh_TW/dreamweaver/cs/using/index.html

2. 以視覺化方式建立 Spry 頁面

http://help.adobe.com/zh_TW/dreamweaver/cs/using/WS2442184F-3DF4-4240-96AF-CC6D792E2A62a.html

Spry 架構是一種 JavaScript 圖庫，可以讓網路設計人員有能力建立網頁，為網頁瀏覽者提供更繽紛多彩的使用經驗。有了 Spry，您就能使用 HTML、CSS 和極少量的 JavaScript，將 XML 資料納入您的 HTML 文件，並建立如折疊式和選單列等 Widget，同時為各種頁面元素新增不同的效果。 Spry 架構經過特殊設計，對具有 HTML、CSS 和 JavaScript 基本概念的使用者來說，其標記相當簡單且容易使用。

Spry 架構主要是為了網路設計專業人員或高階的非專業網路設計人員而提供，其主要用途並非做為企業層級網路開發的完整網路應用程式架構 (雖然它可以和其他企業層級的網頁搭配使用)。

選單列 Widget 是一組導覽選單按鈕，會在網頁瀏覽者將游標停留在其中一個按鈕上時，顯示子選單。選單列可讓您在有限的空間中顯示大量導覽資訊，也能使網頁瀏覽者不需瀏覽整個網站，就能快速掌握網站內容。

Dreamweaver 可以讓您插入兩種選單列 Widget：垂直和水平。
下列範例顯示水平的選單列 Widget 及展開第三個選單項目的情形：

選單列 Widget (包含<ul>、<li> 和<a> 標籤)

A. 選單項目具有子選單。B. 子選單項目具有子選單

選單列 Widget 的 HTML 是由外部的 ul 標籤所組成，而此標籤包含代表每個最上層選單項目的 li 標籤。最上層選單項目 (li 標籤) 依序包含 ul 和 li 標籤，可用來定義每個項目的子選單，而子選單同樣可以包含子選單。最上層選單和子選單可以包含任意數量的子選單項目。

如需選單列Widget運作方式的詳細說明，包括選單列Widget程式碼的完整分析，請參閱http://www.adobe.com/go/learn_dw_sprymenubar_tw。

如需有關建立Spry選單列的教學課程，請參閱http://www.adobe.com/go/vid0168_tw。

1. 變更選單項目文字樣式

附加至<a>標籤的CSS 包含文字樣式的相關資訊。
另外還有幾種附加於<a>標籤、與不同的選單狀態相關的文字樣式類別值。

若要變更選單項目的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設值：

2. 變更選單項目背景顏色

附加至<a> 標籤的 CSS 包含選單項目背景顏色的相關資訊。
另外還有幾種附加於<a> 標籤、與不同的選單狀態相關的背景顏色類別值。

若要變更選單項目的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設值：

3. 變更選單項目尺寸

如果您要變更選單項目的尺寸，請變更選單項目的 li 和 ul 標籤的寬度屬性。

1.找出ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則。
2.將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度，並將屬性和值 white-space: nowrap; 新增至規則)。
3.找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
4.將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度)。
5.找出 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 規則：
6.新增下列屬性至規則：float: none; 和 background-color: transparent;。
7.刪除 width: 8.2em; 屬性和值。

4. 定位子選單

Spry 選單列子選單的位置是由子選單 ul 標籤上的邊界屬性所控制。

1.找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
2.將 margin: -5% 0 0 95%; 預設值變更為您所要的值。

標籤面板 Widget 是一組面板，可以將內容儲存在很小的空間中。網頁瀏覽者可以按一下他們要存取的面板標籤，隱藏或顯示標籤面板所儲存的內容。瀏覽者只要按下不同的標籤，就能開啟 Widget 的面板。標籤面板 Widget 同時間只能開啟一個內容面板。下列範例顯示標籤面板 Widget 及展開第三個面板的情形：

http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/sp_tabbed_panels_07.png

A. 索引標籤。B. 內容。C. 標籤面板Widget。D. 標籤面板

標籤面板 Widget 的 HTML 程式碼是由外部的 div 標籤所組成，而此標籤包含了所有面板、標籤清單、用來包含內容面板的 div，以及代表每個內容面板的 div。標籤面板 Widget 的 HTML 也包含位於文件頁首和標籤面板 Widget 之 HTML 標記後面的 Script 標籤。

如需標籤面板Widget運作方式的詳細說明，包括Widget程式碼的完整分析，請參閱 http://www.adobe.com/go/learn_dw_sprytabbedpanels_tw。

選取「插入＞Spry＞Spry 標籤面板」。
備註：您也可以使用「插入」面板中的「Spry」類別來插入標籤面板 Widget。

在「文件」視窗中選取標籤面板 Widget。
按一下「屬性」檢視窗 (「視窗＞屬性」) 中的面板加號按鈕。
(選擇性) 如果您要變更標籤名稱，請在「設計」檢視中選取標籤文字並加以變更。

在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 的「面板」選單中，選取要刪除的面板名稱，並按一下減號按鈕。

4. 開啟面板以進行編輯

請執行下列其中一項作業：
將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方，並按一下標籤右側的眼睛圖示。
在「文件」視窗中選取標籤面板 Widget，然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中，按一下要編輯的面板名稱。

5. 變更面板順序

在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 的「面板」選單中，選取您要移動的面板名稱。
按一下向上或向下箭頭，將面板向上或向下移動。

6. 設定預設開啟的面板

您可以設定當網頁在瀏覽器中開啟時，預設要開啟標籤面板 Widget 的哪個面板。
在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，從「預設」面板彈出式選單中選取您要預設開啟的面板。

「屬性」檢視窗可讓您對標籤面板 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以更改標籤面板 Widget 的 CSS 規則，並依照您所喜愛的樣式建立 Widget。

如需更改標籤面板 Widget 顏色的快速參考資料，請參閱 David Powers 的 Spry 標籤面板、折疊式控制項和可收合面板樣式設計的快速指南。

如需樣式設計工作的進階清單，請參閱 http://www.adobe.com/go/learn_dw_sprytabbedpanels_custom_tw。

下列主題中的所有 CSS 規則都是指 SpryTabbedPanels.css 檔案中的預設規則。每當您建立 Spry 標籤面板 Widget 時，Dreamweaver 都會將 SpryTabbedPanels.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案也包含 Widget 所適用各種樣式的實用註解資訊。

http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/tip_help.png

您可以輕鬆地在隨附的 CSS 檔案中直接編輯標籤面板 Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。

您可以設定整個標籤面板 Widget 容器的屬性，或是個別設定 Widget 組件的屬性，藉此設計標籤面板 Widget 文字的樣式。

若要變更標籤面板 Widget 的文字樣式，請使用下表找出適合的 CSS 規則，然後新增您自己的文字樣式屬性和值：

http://i556.photobucket.com/albums/ss1/whc915/spry01.jpg

若要變更標籤面板 Widget 不同部分的背景顏色，請使用下表找出適合的 CSS 規則，然後依照您的喜好新增或變更背景顏色的屬性和值：

http://i556.photobucket.com/albums/ss1/whc915/spry02.jpg

3. 限制標籤面板寬度

根據預設，標籤面板 Widget 會展開至所有可用空間。不過，您只要設定折疊式容器的寬度屬性，就可以限制標籤面板 Widget 的寬度。

1.開啟 SpryTabbedPanels.css 檔案，找出 .TabbedPanels CSS 規則。這項規則定義了標籤面板 Widget 主要容器元素的屬性。
您也可以選取標籤面板 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中找出這項規則。請確認面板已設定為「目前」模式。

2.為規則新增寬度屬性和值，例如 width: 300px;。

5. TAB實作步驟

1. 插入標籤面板

http://i556.photobucket.com/albums/ss1/whc915/tab-01.jpg

語法對照

http://i556.photobucket.com/albums/ss1/whc915/tab-02.jpg

2. 修改標籤標題，屬性面板對照

http://i556.photobucket.com/albums/ss1/whc915/tab-03.jpg

3. 重新設定標籤外觀的樣式 .TabbedPanelsTab

http://i556.photobucket.com/albums/ss1/whc915/tab-04.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-05.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-06.jpg

4. 文字居中對齊的設定

http://i556.photobucket.com/albums/ss1/whc915/tab-07.jpg

效果顯示

http://i556.photobucket.com/albums/ss1/whc915/tab-08.jpg

5. 設定滑鼠移過時的標籤樣式 TabbedPanelsTabHover

http://i556.photobucket.com/albums/ss1/whc915/tab-18.jpg

效果顯示

http://i556.photobucket.com/albums/ss1/whc915/tab-09.jpg

6. 設定檢視中頁次的標籤樣式 .TabbedPanelsTabSelected

http://i556.photobucket.com/albums/ss1/whc915/tab-10.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-11.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-19.jpg

效果顯示

http://i556.photobucket.com/albums/ss1/whc915/tab-12.jpg

7. 設定整個標籤面板的外觀樣式.TabbedPanels

http://i556.photobucket.com/albums/ss1/whc915/tab-13.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-14.jpg

http://i556.photobucket.com/albums/ss1/whc915/tab-15.jpg

8. 設定標籤內容區的外觀樣式 .TabbedPanelsContentGroup

http://i556.photobucket.com/albums/ss1/whc915/tab-16.jpg

效果預覽

http://i556.photobucket.com/albums/ss1/whc915/tab-21.jpg

9. 設定標籤內容區的樣式重覆右邊的藍線 .TabbedPanelsContent

http://i556.photobucket.com/albums/ss1/whc915/tab-17.jpg

效果預覽

http://i556.photobucket.com/albums/ss1/whc915/tab-20.jpg

↧

RE:作業九 (no replies)

December 20, 2011, 10:27 am

≫ Next: Default style sheet for HTML 4 (no replies)

≪ Previous: [講義10] 以Spry 效果及組件製作動態網頁與 (3 replies)

1.分析範例網站：
http://www.koji-honpo.co.jp/tsubasa/

2.網站名稱及主題：Dolly Wink

3.設計風格:
粉嫩的紫色調系和粉紅色系,和日系甜美的水玉點點復古的英文字體
甜美的版面襯托了化妝品的好感度和可愛感!讓女生們看到了都想要一次擁有所有的東西呢!

4.色彩分析

http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/405615_238781992857644_100001775357795_561444_1383801251_n.jpg

5.版面分析

http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash4/391919_238782296190947_100001775357795_561445_246873875_n.jpg

http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/388130_238784149524095_100001775357795_561454_2037445549_n.jpg

(1).網站width(寬)、height(高)、margin、padding分析

width: 1903px height: 983px margin: 0 padding: 0

(2)網站雙欄語法

我有觀察,但是看不太懂耶.... 妹妹有教過

6.跨瀏覽器問題與分析

使用IE瀏覽器,firefox,googlechrome看這個網站都沒問題唷^^

班級：視傳一A

學號：1001445048

↧

Default style sheet for HTML 4 (no replies)

February 8, 2012, 9:05 am

≫ Next: hw03-1015445262 (no replies)

≪ Previous: RE:作業九 (no replies)

出處：http://meyerweb.com/eric/css/references/css2ref.html

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }

@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

↧

hw03-1015445262 (no replies)

November 5, 2012, 12:31 am

≫ Next: 請問一下Spry問題 (1 reply)

≪ Previous: Default style sheet for HTML 4 (no replies)

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

遇到的問題:關於連結無法顯示出About 但是我卻已經設定好了
麻煩老師幫我看一下謝謝

↧

請問一下Spry問題 (1 reply)

June 20, 2013, 9:40 am

≫ Next: How I Met Your Mother Season 8 DVD UK (no replies)

≪ Previous: hw03-1015445262 (no replies)

各位好

想請問一下Spry問題
我製作了一個Spry下拉式選單,在電腦上看是正常的.
但到了平板電腦,就有時無法下拉.請問是哪出了問題?

http://www.tobei.com.tw/Productgeyser.html

可否請教各位有這破解方法嗎?

PEGGY

↧

How I Met Your Mother Season 8 DVD UK (no replies)

July 16, 2013, 12:21 am

≫ Next: [CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

≪ Previous: 請問一下Spry問題 (1 reply)

I'll really miss How I Met Your Mother Season 8 DVD UK with wedding bells for the impending nuptials of Barney and Robin, but concerns that one or both of them will get cold feet cloud the happy time. Meanwhile, all the matrimonial jitters trigger Ted's memories of Victoria's wedding day and how he insisted that she leave her fiancé a note after deciding to leave him at the altar.Barney's extensive and comprehensive prenup leads the guys to put forth their own relationship principles, which their significant others do not find agreeable. Meanwhile, an incensed Quinn responds with her own prenup.

Related Goods: How I Met Your Mother Seasons 1-7 DVD UK, How I Met Your Mother Season 7 DVD UK
Referral links: dvdsboxsetstore.co.uk

↧

[CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

January 2, 2012, 5:31 am

≫ Next: 請問我這樣排版 HTML CSS有什麼問題呢？ (1 reply)

≪ Previous: How I Met Your Mother Season 8 DVD UK (no replies)

以下為實例整理之格式。

網頁：中國科技大學首頁

網址：http://www.cute.edu.tw/home_page.html

觀察時間：民國100年7月20日

觀察瀏覽器：IE6、IE8、Firefox5、Chrome12

原始碼：見附檔。

摘要
IE6、IE8正常。

Google Chrome：右欄中段之搜尋列高度過大。

Firefox：除右欄中段之搜尋列高度過大外，同區之功能欄(新竹校區、網站地圖等)有排版異常的情況。主要由於功能欄使用之底圖(background=" http://www.cute.edu.tw/images/home_page_18.jpg ")與文字不相匹配，產生重疊。以Firebug觀察後發現原因為多了上下margin各12px，這是由於 Firefox 會將 <p> 前後都加上和「一行文字」同高的 margin，而該<p>段落所指定的font-size就是12px(class="text3")。同時，經檢視文件後發現網頁並無宣告 DOCTYPE，因此被 Firefox 判斷為 Quirks Mode，此為網頁其他部份呈現異常之主因。

此網頁之語法使用為早期常見之設計方式：無任何DOCTYPE宣告，同時使用大量table作為排版及佈局。以Firefox中呈現異常的右側功能欄為例，就是在「第四層」table之中。此種大量而複雜地使用table的作法，不僅網頁維護困難，在開發時單在IE各版本瀏覽器上要求一致性就可能相常困難，更遑論在不同的瀏覽器間維持網頁的相容性。而缺少DOCTYPE的宣告讓網頁進入 Quirks Mode (暫翻作怪異模式)，更讓問題複雜化。另外，此頁在中欄的y方向(垂直方向)和/或x方向(不同瀏覽器效果不同)產生了不必要的 scroll bar，是在網頁語法使用上可以改進的部份。

IE6(效果和IE8類似)

Firefox

↧

請問我這樣排版 HTML CSS有什麼問題呢？ (1 reply)

September 14, 2013, 1:37 am

≫ Next: 請問應該如何點按鈕，換圖片呢？ (2 replies)

≪ Previous: [CSS] 各主流瀏覽器不相容情形之網頁實例整理: IE6、IE8、Firefox、Chrome (2011) (16 replies)

http://sunarts.net23.net/
我在做的網站

↑我用html css寫的網站連結，目前只寫成像圖案下面這樣↓

這是我在做的網站，想要做成像下面這樣
網頁的原始碼對上面的連結按右鍵就有了喔！！

背景會有三條水平線
我最上面的水平線是設成一個div
然後把水平線的圖設成"背景圖"，repeat-x

另外我也需要三條垂直但是會有中斷的線（如圖）

這個我有點不知道該怎麼設好，是一樣用div放背景圖好呢？
不過這樣我的position動來動去的，牽一髮而動全身啊
想請大家指點一下該怎麼做比較好..我後來想想我的div這樣排好不好呢？　↓

不過這樣那些切線就不見了orz
切線真的不知道怎麼排進去

請大家多多指教～～謝謝！！！＞＜

↧

請問應該如何點按鈕，換圖片呢？ (2 replies)

September 25, 2013, 7:27 pm

≫ Next: [講義] 網頁前端設計基本篇-Front-end Fundamental (no replies)

≪ Previous: 請問我這樣排版 HTML CSS有什麼問題呢？ (1 reply)

Hi Hi 大家安安　:)-D
我又來請教專業的大家了...

http://sunarts.net23.net/rendering.html

想請教我應該怎麼用jQuery做到點擊左邊選單，右邊的圖片跟文字會變換的效果呢？

自己研究發現找不太到方法:(
例如我設定點左邊按鈕之後會有的動作：
$("buttom").click(function(){
$("a.jpg").fadeOut();
$("b.jpg").fadeIn();

這樣子寫的話…只有第一行會成功
ｂ圖片它不會出來…
可能是ｂ圖也不知道要從哪裡出來？

然後如果用replaceWith的話，我的ｂ圖片會直接被cut到ａ圖上
這樣等於我的網頁就少了一張圖片…

　請問應該改成怎麼寫比較好呢？
或是沒有這種方法呢？

　懇請多多指點，謝謝！！:)

↧

[講義] 網頁前端設計基本篇-Front-end Fundamental (no replies)

November 15, 2013, 9:18 am

≫ Next: HTML 5.0 關於 css 背景色的設定問題請教高手 (no replies)

≪ Previous: 請問應該如何點按鈕，換圖片呢？ (2 replies)

Instructor: Jude Wang

1. HTML練習

http://codepen.io/pen
http://www.sublimetext.com/3
http://www.w3schools.com/

使用時，請搭配:"Tab"鍵使用

2. 標題

HTML
<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>
CSS
h6{ font-size:60px; color:red; }

3. 圖片-置左置右

http://lorempixel.com

HTML
<h1>New City</h1> <img alt="" style=";height:auto;;position:inherit !important;" indx="16414643" rank="34" irank="794635203" atitle="[講義] 網頁前端設計基本篇-Front-end Fundamental (no replies)" data-src="//lorempixel.com/g/300/200/city/" data-srcset="" class="rs-article-img-src do-lazy"> <p>New Taipei City has vast territories, spanning 2052 square kilometers of 29 District. Within its borders is a wealth of difference, particularly when it comes to a sweeping expanse of mountains and cliffs that form the Taipei Basin walls making for natural resources and a rich array of vistas. The northern face of Taiwan's coastline in New Taipei City is 120 kilometers and it has gorgeous sea brinks and beachheads. In recent years, officials have exerted a great deal of effort to update and continuously clean our coasts so that all visitors can leap in the waves and admire the horizons.</p>
CSS
h1{ font-size:60px; } img{ margin:20px; float:right; }
Front-end Fundamental

4. HTML5

1. 文件型態設定(DOCTYPE)

2. 語意標示語言 (Semantic HTML)

5. 版面編排 / Layout

1. 區塊模型 / Box Model

6. CSS Reset

7. 網格系統 / Grid System

8. Style

1. HTML Tags

2. Navigator

3. 側欄 / Side Bar

4. Box-sizing

6. 按鈕 (Buttons)

9. CSS3 Design Parts

1. 虛擬元素 / pseudo-elements

↧

HTML 5.0 關於 css 背景色的設定問題請教高手 (no replies)

January 4, 2014, 8:07 am

≫ Next: HTML 5.0 關於 css 背景色的設定問題請教神人 (1 reply)

≪ Previous: [講義] 網頁前端設計基本篇-Front-end Fundamental (no replies)

無論怎麼修改 center的背景色都會變成 body的黑色求解

↧

HTML 5.0 關於 css 背景色的設定問題請教神人 (1 reply)

January 4, 2014, 8:58 am

≫ Next: [講義] HTML & CSS網頁基礎複習整理 (no replies)

≪ Previous: HTML 5.0 關於 css 背景色的設定問題請教高手 (no replies)

無論怎麼修改 center的背景色都會變成 body的黑色求解

↧

[講義] HTML & CSS網頁基礎複習整理 (no replies)

February 15, 2014, 5:21 am

≫ Next: [講義] 網頁格線排版系統 (no replies)

≪ Previous: HTML 5.0 關於 css 背景色的設定問題請教神人 (1 reply)

1. 相關網站

1.網頁設計與語法（HTML/CSS）http://mepopedia.com/?page=804
2.手機版網頁設計（CSS/Javascript）http://mepopedia.com/?page=983
3.w3schools http://www.w3schools.com/
4.好用的線上語法撰寫網頁：http://codepen.io/pen
5.圖片網址：http://lorempixel.com/
6.CSS3 Maker http://www.css3maker.com/
7.跨瀏覽器相容性網頁設計 http://mepopedia.com/?page=844

3. 其他推薦教學網站

推薦CSS網站
CSS-TRICKS http://css-tricks.com/
HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

HTML
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp

CSS
CSS語法教學攻略篇　http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫　http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介　http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/

網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm

4. 網頁基本的認識與任務

1. 安裝相關軟體

2. 開始閱讀關於html、css相關書籍與相關資料

建立起基本概念(請多多利用圖書館或網路資源)

基本的網頁是由HTML與CSS所組成

1. 相關認知

HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務

大家在進入網頁設計之前，必須先對html與css有基礎的概念
自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，才能了解網頁內容及設計並能夠與程式設計師做基本的溝通

HTML
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來，你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。

一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種，最原始的方法是用windows內的記事本或各種文書編輯軟體，也有大家覺得較熟悉的編輯軟體如Dreamweaver，編寫完成後儲存成*.htm或*.html 即可。

若想看網頁的HTML檔，只要在IE瀏覽器內按下滑鼠右鍵，再選擇檢視原始檔(view)即可。Chrome則是按右鍵"檢視網頁原始碼"，"檢查元素"可察看更多內容，一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。

HTML的最基本結構

HTML的架構是由<>與>組成裡面還有數個由<>與>組成的區塊只要概念清楚，相信接下來會讓大家更容易對網頁架構有進一步的了解
<title> </title> 您所要在瀏覽器顯示的內容(被與包覆起來)

CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的色彩、文字設定、背景、排版等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。
(5)由於允許同時控制多重頁面的樣式和佈局，CSS 可以稱得上WEB 設計領域的一個突破。

語法

CSS由多組「規則」組成。每個規則由「選擇器」（selector）、「屬性」（property）和「值」（value）組成：
1.選擇器（Selector）:多個選擇器可以半形逗號（,）隔開。
2.屬性（property）:CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
3.值（value）:指屬性接受的設定值，多個關鍵字時大都以空格隔開。
4.屬性和值之間用半形冒號（:）隔開，屬性和值合稱為「特性」。多個特性間用「;」隔開，最後用「{ }」括起來。

選擇器
要針對沒有標籤定義範圍進行樣式設定時，可利用

與標籤於CSS裡現在共有5種基本選擇器（Basic Selectors和2種偽選擇器。

基本選擇器
1.標籤選擇器(套用於HTML標籤)（h1,p等）——elementname
2.類別選擇器（class）——.elementname
3.ID選擇器（ID）——#elementname
4.萬用選擇器——* ns|* *|*
5.屬性選擇器——[attribute]
補充：http://blog.mukispace.com/css-selectors/

3. 請進入教學網站註冊

http://mepopedia.com/forum/register.php?851
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』填寫姓名、學號，不會顯示於頁面，僅供評分用。
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP，並以自己的帳號回覆，以方便登記成績

4. FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用

本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用

官方下載網頁：http://filezilla-project.org/

5. 安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器

Internet Explorer (IE)
特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home

Google Chrome特色：
快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW

Firefox特色：
可以根據使用者的習慣與需要按裝Firefox套件，其功能可以加強瀏覽器實用性與安全性。
假使你正在網站站上發文，一不小心按錯上一頁或者回首頁的按鍵，分頁功能可以讓你救回辛苦打的網頁。
多元的套件雖然可以補足你想要的功能，不過套件安裝太多也會影響其使用的效能。
下載FireFox
http://moztw.org/

6. 瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異

7. 多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考

8. 網設計基本知識

網頁所有檔案命名原則：
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

5. 相關競賽

1.網站新人王
2.「慈善/科技/人文網頁設計比賽」

↧

[講義] 網頁格線排版系統 (no replies)

March 3, 2014, 8:50 am

≫ Next: [講義] 網頁設計的美學原則 (no replies)

≪ Previous: [講義] HTML & CSS網頁基礎複習整理 (no replies)

4. 網頁格線排版系統

網頁格線排版為透過格線的準則設計網頁版面，達到版面的平衡。
這是其中一種可參考的做法，許多網站都採用此種方式配置版面，以方便達到版面平衡的效果。
最常見的為960格線

圖片來源：http://960.gs/

↧

[講義] 網頁設計的美學原則 (no replies)

March 3, 2014, 10:44 am

≫ Next: [講義] 以Photoshop製作網頁版型 (no replies)

≪ Previous: [講義] 網頁格線排版系統 (no replies)

如何設計具有品質與美感又符合網頁特色與屬性的網站，是所有網頁視覺設計師所追求的目標，在培養自己成為優秀的網頁設計師之前，必須了解以下幾件事，並確實練習與執行，才能在不斷的練習當中累積經驗與心得，朝向真正的網頁視覺設計師邁進。

1. 網站設計事前需了解的事

1. 好的網站的元素

1.視覺鮮明
2.主題明確
3.內容豐富
4.版面清晰
6.瀏覽順暢

2. 網站的組成元素

請參考http://mepopedia.com/forum/read.php?804,18412,19400
版面分析

3. 網站的目標

網站屬性?目標對象?期待使用者的使用回饋為何?
網站設計的越吸引人，越能讓瀏覽者花更多時間瀏覽
設計師在設計之前需要花更多時間了解網站的屬性與設計風格的連結，設計適切極具親和力的網站。

4. 網站的架構

先了解架構的基本資訊、再製作網頁結構示意圖與網頁雛形，參考下面網址，此時還不用考慮視覺的層面
http://www.reset-info.com/2009/06/wireframe-prototype.html

架構建立好之後，再行考慮網頁屬性與設計風格的連結，應賦予何種風格氛圍。

5. 網站的內容、資訊及細節

網站細部資訊的取得，互動方式的設計與元素的建立，與程式設計師及設計團隊討論網站設計的方向與配合的細節。
不同的導覽類型：
http://erraticwisdom.com/

2. 網站編排設計需了解的事

1. 版面編排與構圖

1.格線系統

http://960.gs/

透過有格線的準則設計網頁版面，達到版面的平衡。
這是其中一種可參考的做法，許多網站都採用此種方式配置版面，以方便達到版面平衡的效果。
請參考：http://mepopedia.com/forum/read.php?804,42875

網站編排設計與平面設計的原理類似，都是透過排版，以文字、色彩、圖像等元素，有系統地呈現，將複雜的資訊清楚的呈現，達到資訊傳達的效果。
http://vollawn.com/
http://www.thinkradiant.com/

2.版型蒐集與觀察
http://www.flickr.com/photos/elliotjaystocks/sets/72157600210179964/
http://www.flickr.com/photos/elliotjaystocks/sets/72157620451090197/
http://www.flickr.com/photos/elliotjaystocks/sets/72157613154421992/

3.固定尺寸或非固定尺寸
網頁可以自由的調整寬度，但因為每一位使用者使用的螢幕解析度不同，所以只能大約使用一個範圍的尺寸，目前約一半左右的使用者仍然以1024X768為主，所以過定寬度製作通常會將寬度設定小於1000像素，才不會超出螢幕之外，當然也可以設定隨著螢幕寬度縮放，不過並非每一種網站都適合，所以設計時需先行考慮清楚使設定的方式。

說明：http://green-beast.com/blog/?p=199
非固定尺寸：http://www.tylerfinck.com/ http://designdisease.com/
固定尺寸：http://www.housingworks.org/

4.政府網站版型與內容管理規範
網頁組成要素位置示意圖
http://www.webguide.nat.gov.tw/wSite/ct?xItem=36785&ctNode=14475&mp=1
製作政府機關網站，大多須遵循以上排版方式

2. 藝術層面

透過設計師不斷的嘗試與細節美感的追求，網站的精緻度才能大大的提升，這些反覆的嘗試與細節的推敲，是網頁美感提升的最重要因素，也是設計師最大的貢獻與滿足，請大家謹記這點，所有細節都很重要，包含字體的選擇、大小的比例，搭配，行間、間隔、字距等等，以及裝飾的圖示，色彩的協調與否，圖片的製作與選擇是否適當?整體搭配是否符合網站定位與目的?是否讓人眼睛為之一亮?是否會讓人停留觀看?是否可以方便查詢資訊?找到需要的內容?導覽列與操作的便利性是否合宜?這些都是網頁設計師肩負的使命。

http://decor8blog.com/

3. 字型與字體大小

目前的網頁設計幾乎多用實際的文字、CSS的語法等，取代文字LOGO、按鈕圖片等的設計，圖片占較多網路資源，傳輸速率慢、更換不易，以文字透過CSS直接取代圖片的設計，達到最佳的網頁設計效果。
以photoshop設計網頁版面時請務必將單位設為px(像素)，內文字大約15~12px，請注意文字編排大小對比的關係與行間的設定。

http://simplebits.com/
http://ilovetypography.com/

4. 色彩

色彩是影響視覺最重要的因素之一，我們可以利用色彩觸發想像與聯想，建立品牌感與風格確立，使用何種色調?哪種色系?都與欲建立的形象與使用對象有關。

養成時常瀏覽好的網站，並分析其網站配色及風格

色彩分析：http://www.j-period.com/jp/

色彩選擇器：https://kuler.adobe.com/create/color-wheel/

以白底，無彩色層次的影像為主體，搭配綠色的大型導覽色塊即底字，凸顯網站視覺焦點，確立現代質感品牌風格。
http://www.brunetgarcia.com/

以有層次感的咖啡色系，營造網頁的質感，並與咖啡座直接的聯想
並以插圖與照片交互搭配，呈現豐富的視覺畫面
http://www.vermontcoffeeworks.com/

5. 圖形

圖形通常在網頁設計上扮演著畫龍點睛的效果，分為照片與插畫兩類，它可以是重要的元素，也可以是畫面點綴的利器，可以利用圖片處理，增加網站的質感，提升可看性與增加豐富性與道出主題。
照片網站http://www.ucla.edu/
色塊與圖片http://www.risd.edu/
以圖為背景http://matthewsmith.cc/

6. 創新

是否有更好的排版設計與設計形式?可以符合網頁設計需求，又可以跳脫傳統編排設計?並能符合html以及CSS的設計原則?這是設計師需追求與嚐試的目標，多看新的設計，多元嘗試，必能有更創新的風格呈現。

大學網站
http://www.nccu.edu.tw/
http://www.yuntech.edu.tw/
http://www.ntust.edu.tw/home.php

http://www.tut.edu.tw/bin/home.php

http://www.yale.edu/
http://www.risd.edu/
http://www.saic.edu/index.html
http://www.artic.edu/
http://www.ucla.edu/
http://www.mica.edu/

7. 產出

以photoshop編排完網頁之後，就要進入程式排版設計的部分了，部分圖片可能需要切圖製作，但現今的趨勢還是以盡量使用html加css可完成為主，少部分搭配圖片，所以視覺設計師還是需要了解排版與程式之間的關係，簡單的版型以可自行操作為原則，複雜的版型則與程式設計師討論，方便執行為目標。

3. 網站類型

1.Blog 部落格
http://www.veerle.duoh.com/
http://bottledsky.com/
http://www.jrvelasco.com/
http://people2.pixnet.net/blog
http://whiteeyeishere.blogspot.tw/

2.Forum 論壇(討論區)
http://typophile.com/

3.Event 活動
品牌推廣，視覺衝擊，過時的命運
網路行銷
http://marketing.tw.campaign.yahoo.net/emarketing/index.php
http://chinatrust.dc.com.tw/201401_loan_b/index.html?utm_source=yam&utm_medium=yam&AD=10

4.E-Commerce電子商務
http://www.concretehermit.com/

5.Personal個人網站
http://nextbigleap.com/

6.Design Firm設計公司
http://medusateam.com/
http://growstudio.co.uk/
http://www.ashwebstudio.com/

7.Photography攝影集網站
http://georgiew.de/
http://mattholloway.com/
http://littlehellos.com/

8.Portfolio作品集
http://nikkibrion.com/
http://www.helveticbrands.ch/
http://tonick.cz/

9.商業網站
http://store.apple.com/tw
http://www.taipei-101.com.tw/

10政府機關學校團體
政府機關推薦網站：http://web.moi.gov.tw/moisite/p5_102.asp

國內外政府
http://www.whitehouse.gov/
http://www.president.gov.tw/
http://www.state.gov/
http://www.mofa.gov.tw/Official/Home/Index

國內大學網站
http://www.nccu.edu.tw/
http://www.yuntech.edu.tw/
http://www.ntust.edu.tw/home.php

http://www.tut.edu.tw/bin/home.php

國外大學網站
http://www.yale.edu/
http://www.risd.edu/
http://www.saic.edu/index.html
http://www.artic.edu/
http://www.ucla.edu/
http://www.mica.edu/

↧

20. 一、繞圖排文

1. 1.在準備好的文字中插入圖片

2. 2.新增類別CSS，命名為floatleft

3. 3.Float浮動設定Left靠左對齊，Padding內距?上右下設定為20px

4. 4.將圖片設定為靠左的浮動，選取類別中的floatleft

5. 5.圖片靠左浮動，並與內文產生20px的內距，與文字產生一段舒服的距離

6. 6.以類似的方法，設定置右圖片，新增類別CSS，命名為floatleft

7. 7.Float浮動設定Right靠右對齊，Padding內距?上左下設定為20px

21. 二、推文按鈕的應用

1. 1.插入準備好的臉書、噗浪及推特的按鈕圖片

2. 2.替代文字中寫入：將本篇文章推薦到臉書

3. 3.為圖像設定類別CSS命名為iconstyle

4. 4.分享到臉書、噗浪及推特的JavaScript語法

5. 5.點選按鈕，進入行為面板

6. 6.點選→行為→呼叫JavaScript

7. 7.分別複製語法後貼上

8. 8.可以試試看成效囉，不過要上傳到網路後，才能真正分享喔!

22. 三、圖片的彈跳視窗設定

1. 1.點選圖片，進入行為面板

2. 2.點選→行為→開啟瀏覽器視窗，並設定，填入圖片的寬高

3. 3.點擊圖片後的效果<

18. 一、透過CSS，以清單 ul 及 li 製作網頁導覽列

19. 二、以Dreamweaver搭配設計版面與程式碼的分割畫面的製作步驟

1. 1.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目

2. 2.清單文字採用＜ul＞標籤定義清單的範圍，並使用＜li＞標籤定義個別項目

3. 3.接著，加入連結的語法

4. 4.接著設定導覽列的ID名稱為#button，直接設定於＜ul＞

15. 表格的概述

16. 表格中的標記

17. 表格的邊框

1. 設定儲存格的邊框

8. 雙欄網頁概述

9. 雙欄網頁，float：浮動屬性做法概述

1. 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動

2. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

3. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

10. 本單元雙欄網頁範例，float：浮動屬性做法概述

11. 雙欄網頁，float：浮動屬性做法步驟

1. 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊

2. 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入

3. 新增ID CSS，命名為content-L

4. Float浮動設定Left，靠左對齊；寬度設為?180px

5. 設定#content-L，Padding:6px

6. 新增ID CSS，命名為content-R

7. Margin：間距，設定180px (#content-L的寬度)

8. #content-R?的字型設定

9. #content-R?背景設為白色

10. #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服

11. #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)

12. 於#content-L?插入影像

13. 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字

14. 選取，設成清單項目

15. Back回上行?Enter段落?成為清單li

16. 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list

17. 新增ID CSS命名為L-list

18. #L-list?的字型設定

19. 將#L-list,清單樣式設為none(無樣式)

20. 將#L-list,Margin、Padding 皆設為0，清除清單預設距離

21. 雙欄式網頁及左側的L-list,清單樣式大致設定完成

12. 表格設定的步驟

1. 於#content-R插入表格

2. 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題

3. 將資料分別整理至表格之中

4. 將表格自行命名為monent-table

5. 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>

6. 在table下 插入表格大標題<caption></caption>

7. 新增.monent-table tr th 標題CSS樣式

8. 設定表格標題字型、設定表格標題底色

9. 新增.monent-table tr td 表格內文CSS樣式

10. .monent-table tr td 表格內文，Padding內距與邊框底線的設定

11. 新增.monent-table caption 表格大標題CSS樣式

12. .monent-table tr td 表格內文，底色與邊框底線的設定

13. 錨點連結設定的步驟

1. 在標題欄前，插入→命名錨點，並自行命名

2. 於每個標題前，分別命名錨點

3. 在header標題欄，插入→命名錨點，並自行命名為top

4. 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01

5. 分別設定完成

6. 插入回前一動作#top 的連結│BACK│

7. │BACK│設置靠右對齊

6. 在table下插入表格大標題<caption></caption>