引用→http://kav68795.pixnet.net/blog/post/26490122
- 3月 31 週四 201601:19
[教學]成為CSS高手之路(八)~製作拍立得相片效果
引用→http://kav68795.pixnet.net/blog/post/26490122
- 3月 31 週四 201601:16
[教學]成為CSS高手之路(七)~牛刀小試篇(B)-用DIV+CSS製作文繞圖設定
引用→http://kav68795.pixnet.net/blog/post/26116510
- 3月 31 週四 201601:14
[教學]成為CSS高手之路(六)~牛刀小試篇(A)-在圖片上套用邊框以及利用濾鏡將圖片轉灰階
引用→http://kav68795.pixnet.net/blog/post/26103954
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇，經過前面五篇的基本功訓練，有閱讀並且練習的人應該對於CSS有了基本的認識，接著開始我們正式進入實際運用的介紹，當然，我們還是要由淺入深，先從最簡單的圖片效果開始介紹，慢慢的再進展到更進階的CSS設定。
‧CSS相關系列文章請參閱：成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案
系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身，分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果，各位可以試著做做看：
一、在圖片上套用邊框：
1.利用Dreamweaver開啟新頁面並且插入一張圖片。
2.『CSS樣式』面板→新增CSS規則。
3.選用『類別』的選取器類型，並且幫規則命名(ex.imgborder)，然後按下確定。
4.切換至『邊框』分類，分別設定邊框樣式(Style)、粗細(Width)以及色彩(Color)，完成後按下確定。
5.選取欲套用規則的圖片→屬性面板→類別→選擇『imgborder』規則作套用。
6.按下F12使用瀏覽器進行預覽，便會看到圖片周圍出現邊框。
p.s.各位可以隨需求修改規則中的邊框樣式、粗細以及色彩。
7.切換至『分割』模式進行程式碼的確認，畫面如下：
在<style>和</style>之間會出現如上圖紅框的語法，其中.imgborder為類別名稱、border後面則列出所有設定值。
8.而選取圖片後也會看見如下程式碼：
在<img>標籤中會出現上塗紅框處語法表示此圖片套用了imgborder的類別規則。
二、將圖片轉成灰階色彩
1.一樣在Dreamweaver中開啟新頁面並且插入圖片。
2.『CSS樣式』面板→新增CSS規則。
3.選擇『類別』選取器，並且命名規則名稱(ex.imgcolor)，完成按下確定。
4.在『擴充功能』分類中選擇Filter(濾鏡)，選擇Gray(灰階)，並且按下確定。
5.接著選取欲套用規則的圖片→屬性面板→類別→套用imgcolor規則。
6.儲存後按下F12用瀏覽器預覽便會發現影像變成灰階嚕。
7.切換至『分割』模式，會在<style>和</style>之間發現以下語法：
其中.imgcolor為類別名稱、filter代表套用濾鏡，冒號後面則為套用的濾鏡名稱。
8.而選取圖片觀看程式碼則會在<img>標籤中看到以下紅框處語法：
紅框處表示此圖片套用了imgcolor這個類別規則。
以上的示範說明，有使用Dreamweaver製作網頁的人可以直接設定，如果是經營部落格的格主，也可以參考上述的語法，在部落格的樣式設定或是文章內容圖片上作應用喔。
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇，經過前面五篇的基本功訓練，有閱讀並且練習的人應該對於CSS有了基本的認識，接著開始我們正式進入實際運用的介紹，當然，我們還是要由淺入深，先從最簡單的圖片效果開始介紹，慢慢的再進展到更進階的CSS設定。
‧CSS相關系列文章請參閱：成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案
系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身，分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果，各位可以試著做做看：
一、在圖片上套用邊框：
1.利用Dreamweaver開啟新頁面並且插入一張圖片。
2.『CSS樣式』面板→新增CSS規則。
3.選用『類別』的選取器類型，並且幫規則命名(ex.imgborder)，然後按下確定。
4.切換至『邊框』分類，分別設定邊框樣式(Style)、粗細(Width)以及色彩(Color)，完成後按下確定。
5.選取欲套用規則的圖片→屬性面板→類別→選擇『imgborder』規則作套用。
6.按下F12使用瀏覽器進行預覽，便會看到圖片周圍出現邊框。
p.s.各位可以隨需求修改規則中的邊框樣式、粗細以及色彩。
7.切換至『分割』模式進行程式碼的確認，畫面如下：
在<style>和</style>之間會出現如上圖紅框的語法，其中.imgborder為類別名稱、border後面則列出所有設定值。
8.而選取圖片後也會看見如下程式碼：
在<img>標籤中會出現上塗紅框處語法表示此圖片套用了imgborder的類別規則。
二、將圖片轉成灰階色彩
1.一樣在Dreamweaver中開啟新頁面並且插入圖片。
2.『CSS樣式』面板→新增CSS規則。
3.選擇『類別』選取器，並且命名規則名稱(ex.imgcolor)，完成按下確定。
4.在『擴充功能』分類中選擇Filter(濾鏡)，選擇Gray(灰階)，並且按下確定。
5.接著選取欲套用規則的圖片→屬性面板→類別→套用imgcolor規則。
6.儲存後按下F12用瀏覽器預覽便會發現影像變成灰階嚕。
7.切換至『分割』模式，會在<style>和</style>之間發現以下語法：
其中.imgcolor為類別名稱、filter代表套用濾鏡，冒號後面則為套用的濾鏡名稱。
8.而選取圖片觀看程式碼則會在<img>標籤中看到以下紅框處語法：
紅框處表示此圖片套用了imgcolor這個類別規則。
以上的示範說明，有使用Dreamweaver製作網頁的人可以直接設定，如果是經營部落格的格主，也可以參考上述的語法，在部落格的樣式設定或是文章內容圖片上作應用喔。
- 3月 31 週四 201601:11
成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案
引用→http://kav68795.pixnet.net/blog/post/26066542
今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明，如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀，循序漸進的學習效果更好喔！
而今天系列文章之五所要介紹的套用外部CSS檔案的方式，是先將CSS的格式語法寫在一個獨立的檔案中，並且儲存成CSS格式的檔案，然後再將此檔案以連結或匯入的方式套用在不同的網頁中，讓這些網頁同時擁有相同的CSS格式設定，相當方便快速，而且日後有需要，只要修改CSS檔就可以同時更新所有的網頁格式設定了，這對於需要統一格式設定以及同時管理大量網頁的設計師來說，是個省時簡便的好方法。
1.首先設計嵐先準備兩個網頁檔案，並且輸入簡單文字作區分，但是不作任何的格式設定。
◎以下為a1.html畫面：
◎以下為a2.html畫面：
2.在此設計嵐依然是以在Dreamweaver中可以完成設定的步驟作介紹，好讓初學者可以無痛上手。
3.首先設計嵐先在a1.html的編輯畫面中，點選CSS樣式面板→新增CSS規則鍵。
4.然後設定規則名稱以及選取器類型，重點在於下方的『規則定義』的項目中選擇『新增樣式表檔』選項。
5.接著出現儲存畫面，請將CSS檔案儲存在專案資料夾中並且以英文數字命名，然後按下『儲存』鈕。
6.接著出現設定畫面，請依照所需進行相關格式設定，完成後按下確定鍵。
7.由於這個CSS檔是在a1.html編輯畫面下建立的，Dreamweaver會自動載入此檔案，再加上當初設定時，選取器類型設定為『類別』，所以要套用時，請到『屬性』面板→HTML→類別欄位中，就會有剛剛儲存的CSS檔案可供選擇(如下圖紅框處)。
8.套用之後的畫面如下，a1.html就自動套用所有格式嚕。
9.接著針對a2.html頁面套用同樣的外部CSS檔，由於CSS檔案是獨立的一個檔案，所以要先進行附加的動作。『屬性』面板→HTML→類別→附加樣式表。
10.按下瀏覽選擇要連結的CSS檔案。
11.選擇樣式表檔案→確定。
12.附加完成後便可以在選項中選擇要套用的樣式表了。
13.套用完成後a2.html也同樣擁有相同的格式了。
14.切換到程式碼模式下，會看到a1.html的語法如下：
在<head>與</head>標籤中會有一行以<link href="連結的CSS檔案" type="text/css"/>的程式碼，表示這是以『連結』的方式套用進來的CSS樣式表。
而在<body>標籤中則會加入套用的CSS樣式的類別名稱，如<body class="類別名稱">，這是因為當初是以『類別』的方式定義此規則。
15.同樣的在a2.html的程式碼中也會有同樣的程式碼。
16此外，在『CSS樣式』面板，在set.css項目上點兩下可以開啟此外部CSS檔的原始碼畫面，懂語法的人也可以在此修改。
外部CSS檔的程式碼畫面：
17.而在一開始設計嵐有提到此方法最大的好處在於只要針對外部樣式表作修改，所有連結的頁面都會自動更新，如果要修改我們可以在『CSS樣式』面板→類別名稱上連點兩下。
18.進入設定畫面進行修改，完成按下『確定』(在此設計嵐簡單修改網頁背景色)。
19.修改完畢後a1.html和a2.html都會同步作更新喔！
p.s.在步驟10中，如果選擇以『匯入』方式附加樣式表，則程式碼則必須放在<style>和</style>標籤中，且以@IMPORT的指令帶入：(如下)
<head>
<title>頁面標題</title>
<style>
@IMPORT url(set.css);
</style>
</head>
而匯入與連結的差別在於如果CSS的規則設定有衝突時，匯入(@IMPORT)會被優先套用。
以上就是以外部CSS檔案附加的方式進行CSS格式的套用，也是一種常用且重要的CSS基本功喔，有心成為CSS高手的人要熟悉這樣的用法。
今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明，如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀，循序漸進的學習效果更好喔！
成為CSS高手之路(一)~CSS入門QA教室
成為CSS高手之路(二)~認識基本HTML語法
成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)
成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)
而今天系列文章之五所要介紹的套用外部CSS檔案的方式，是先將CSS的格式語法寫在一個獨立的檔案中，並且儲存成CSS格式的檔案，然後再將此檔案以連結或匯入的方式套用在不同的網頁中，讓這些網頁同時擁有相同的CSS格式設定，相當方便快速，而且日後有需要，只要修改CSS檔就可以同時更新所有的網頁格式設定了，這對於需要統一格式設定以及同時管理大量網頁的設計師來說，是個省時簡便的好方法。
1.首先設計嵐先準備兩個網頁檔案，並且輸入簡單文字作區分，但是不作任何的格式設定。
◎以下為a1.html畫面：
◎以下為a2.html畫面：
2.在此設計嵐依然是以在Dreamweaver中可以完成設定的步驟作介紹，好讓初學者可以無痛上手。
3.首先設計嵐先在a1.html的編輯畫面中，點選CSS樣式面板→新增CSS規則鍵。
4.然後設定規則名稱以及選取器類型，重點在於下方的『規則定義』的項目中選擇『新增樣式表檔』選項。
5.接著出現儲存畫面，請將CSS檔案儲存在專案資料夾中並且以英文數字命名，然後按下『儲存』鈕。
6.接著出現設定畫面，請依照所需進行相關格式設定，完成後按下確定鍵。
7.由於這個CSS檔是在a1.html編輯畫面下建立的，Dreamweaver會自動載入此檔案，再加上當初設定時，選取器類型設定為『類別』，所以要套用時，請到『屬性』面板→HTML→類別欄位中，就會有剛剛儲存的CSS檔案可供選擇(如下圖紅框處)。
8.套用之後的畫面如下，a1.html就自動套用所有格式嚕。
9.接著針對a2.html頁面套用同樣的外部CSS檔，由於CSS檔案是獨立的一個檔案，所以要先進行附加的動作。『屬性』面板→HTML→類別→附加樣式表。
10.按下瀏覽選擇要連結的CSS檔案。
11.選擇樣式表檔案→確定。
12.附加完成後便可以在選項中選擇要套用的樣式表了。
13.套用完成後a2.html也同樣擁有相同的格式了。
14.切換到程式碼模式下，會看到a1.html的語法如下：
在<head>與</head>標籤中會有一行以<link href="連結的CSS檔案" type="text/css"/>的程式碼，表示這是以『連結』的方式套用進來的CSS樣式表。
而在<body>標籤中則會加入套用的CSS樣式的類別名稱，如<body class="類別名稱">，這是因為當初是以『類別』的方式定義此規則。
15.同樣的在a2.html的程式碼中也會有同樣的程式碼。
16此外，在『CSS樣式』面板，在set.css項目上點兩下可以開啟此外部CSS檔的原始碼畫面，懂語法的人也可以在此修改。
外部CSS檔的程式碼畫面：
17.而在一開始設計嵐有提到此方法最大的好處在於只要針對外部樣式表作修改，所有連結的頁面都會自動更新，如果要修改我們可以在『CSS樣式』面板→類別名稱上連點兩下。
18.進入設定畫面進行修改，完成按下『確定』(在此設計嵐簡單修改網頁背景色)。
19.修改完畢後a1.html和a2.html都會同步作更新喔！
p.s.在步驟10中，如果選擇以『匯入』方式附加樣式表，則程式碼則必須放在<style>和</style>標籤中，且以@IMPORT的指令帶入：(如下)
<head>
<title>頁面標題</title>
<style>
@IMPORT url(set.css);
</style>
</head>
而匯入與連結的差別在於如果CSS的規則設定有衝突時，匯入(@IMPORT)會被優先套用。
以上就是以外部CSS檔案附加的方式進行CSS格式的套用，也是一種常用且重要的CSS基本功喔，有心成為CSS高手的人要熟悉這樣的用法。
- 3月 31 週四 201601:09
成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)
http://kav68795.pixnet.net/blog/post/25925686
- 3月 31 週四 201601:07
成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)
http://kav68795.pixnet.net/blog/post/25894399
- 3月 31 週四 201601:03
成為CSS高手之路(二)~認識基本HTML語法
http://kav68795.pixnet.net/blog/post/25870612
- 3月 31 週四 201601:00
成為CSS高手之路(一)~CSS入門QA教室
引用→http://kav68795.pixnet.net/blog/post/25869462#comment-61597150
1
紫玫瑰文章 (6)