Transcript CH13 CCS樣式效果

第十三章 CSS樣式效果CSS樣式規畫
課前指引
CSS樣式是網頁排版的重要核心，它讓我們從頁面效果的困擾
中得到了一個新的出口。雖然它是一套語法，但是在Dreamwea
ver的環境下，使用CSS與設定文字格式一樣的輕鬆自在，不需
記憶語法及寫程式，只要從視窗畫面中設定即可。
章節大綱
13-1 CSS的概念
13-5 樣式的其他操作
13-2 內部CSS效果
13-6 樣式使用技巧
13-3 外部樣式表連結
13-7 應用範例-CSS樣式規畫
13-4 設計階段樣式表
備註：可依進度點選小節
13-1 CSS的概念
CSS的全名是Cascading Style Sheets，
一般稱之為串聯式樣式表，其作用主要是
為了加強網頁上的排版效果。
因為在網頁設計初期，由於HTML語法上
的不足，使得網頁上的排版效果一直無法
達到令人滿意的境界，也因為這個緣故，
才會在HTML之後繼續開發CSS語法。
3
由於CSS是用來補充HTML的格式效果，
而非用來取代HTML，因此CSS的所有功
能，都是擺放在網頁畫面的效果設計，讓
HTML語法只單純負責頁面的內容結構。
所以各位在頁面上進行內容編輯時（包含
文字、表格、頁框及表單），都還是使用
HTML語法來建立頁面的內容結構，等到
需要套用一些樣式效果時才使用CSS。
4
13-2 內部CSS效果
建立全新的CSS樣式
樣式的建立方式
1.開啟「CSS樣式面板
2.按此鈕新增CSS規則
<範例檔：13_01.html>
5
4.按此鈕確定
1.先選擇「類別」
2.輸入樣式名稱
3.點選「僅此文件」
6
1.先設定樣式中的文字顏色
2.按此鈕確定格式
7
顯示樣式中所設定的格式內容
8
套用樣式效果
1.先選取要套用樣式
的文字範圍
2.點取此箭頭清單
3.下拉選此項
9
選取文字以套用上CSS樣式
<範例檔：13_01ok.html>
10
修改樣式內容
1.先點取要修改的樣式名稱
2.再點取修改樣式圖示
11
1.重新修改樣式
2.按此鈕確定離開
12
1.由此切換到「目前」
也可以由此選擇
尚未設定屬性作
加入的動作
2.滑鼠指標設定在該樣式上
3.由此下拉修改即可
13
設定HTML標籤樣式
4.按此鈕確定
1.先點取「標籤」
2.從標籤清單中選擇h2
3.點選「僅此文件」
<範例檔：13_02.html>
14
1.重新修改文字的背景顏色
2.按此鈕確定
15
剛加入的樣式名稱
顯示H2標籤的格式內容
16
1.先點取此段文字
2.由此切換到「HTML」
3.套用「標題2」格式
17
套用樣式的文字效果
<範例檔：13_02ok.html>
18
樣式的刪除及取消(1)
單純刪除樣式時的結果
1.先點取「
.ColorText」樣式
名稱
2.再點取刪除樣
式鈕
<範例檔：13_03.html>
19
文字上的樣式效果會全
部取消
20
1.再新增一個同名但
不同格式內容的樣式
2.樣式效果又會自動
呈現
21
樣式的刪除及取消(2)
取消樣式的套用
1.先點取要取消樣式的文字
範圍
2.從樣式清單中選擇「移除
類別」
22
13-3 外部樣式表連結
外部樣式的觀念
所謂的「外部樣式」就是將設計的樣式效果
儲存成一個獨立檔案﹙副檔名為CSS﹚，樣
式檔完成以後，再對於需要此樣式效果的頁
面，將此樣式檔以「連結」的方式把樣式效
果置入到頁面之中。
往後只要樣式檔的內容有修改，那當初連結
此樣式檔的頁面效果也會跟著更新，所以在
管理及設計樣式效果時，就可以很單純的只
針對樣式檔而不用去管整個套用樣式效果的
頁面範圍。
23
建立外部樣式表
1.先點取「類別」
4.按此鈕確定
2.輸入樣式名稱
3.點選「新增樣式表
檔」
24
1.選擇樣式表檔的儲存位置
2.輸入存檔檔名
3.按此鈕儲存
25
1.在設定畫面中調整樣式的格式內容
2.按此鈕確定
26
點取此標籤可觀看樣式效果的桯
式碼
檔案面板中會多出一個樣式檔
27
連結外部樣式表
1.開啟網頁檔目前CSS樣式面板上無任何樣式設定
2.點取此圖示
<範例檔：13_05.html>
28
1.按此鈕找到剛才新增的外部樣式檔
2.按下「確定」鈕
29
這是套用H2樣式的效果
瞧！樣式表檔已顯示在此
<範例檔：13_05ok.html>
30
修改外部樣式表
開啟之後的外部樣式檔內容
1.將滑鼠放在要修改的位置上
2.重新修改外部樣式檔的格式
內容後儲存
目前與其餘套用樣式效果的
頁面都會自動更新
31
13-4 設計階段樣式表
僅於設計階段時顯示的樣式
先點取此圖示
<範例檔：13_06.html>
32
1.選擇範例檔案中的
note1.css外部樣式檔
2.按此鈕確定
33
按此鈕確定
連結進來的外部樣式檔﹙會註明「設計」二字﹚
34
由此將樣式套用
於頁面文字中
<範例檔：13_06ok.html>
35
在預覽時不會呈
現樣式內容
36
設計階段時隱藏的樣式(1)
連結外部樣式檔及套用
這是連結「
note2.css」的外部
樣式檔，並將樣式
套用於頁面文字上
的效果
<範例檔：13_07.html>
37
設計階段時隱藏的樣式(2)
新增隱藏設計階段時的樣式
2.按此鈕確定
1.點取此圖示將
剛才的note2.css
連結進來
<範例檔：13_07.html>
38
Note2.css的樣
式名稱後面會
出現「隱藏」
文字
之前設定的樣
式現在都看不
見了
<範例檔：13_07ok.html>
39
在瀏覽器預覽時則會
出現樣式效果
40
設計階段時隱藏的樣式(3)
二者同時使用時
2.按此鈕確定
1.同時設定二種設
計階段樣式
<範例檔：13_08.html>
41
會產生設計與預覽
時不同的樣式結果
<範例檔：13_08ok.html>
42
13-5 樣式的其他操作
調整樣式面板的顯示模式
樣式面板左上方的「全部」與「目前」二個按鈕
，可用來切換顯示「目前頁面上樣式的使用狀態
」。點取「全部」時會列出目前頁面中的所有樣
式，點取「目前」時會列出目前滑鼠所在位置的
樣式。
43
使用樣式的功能指令(1)
1.在樣式名稱上點取滑鼠右鍵
2.再從清單中選擇要執行的指令
名稱
44
使用樣式的功能指令(2)
各項常用的功能指令說明如下：
前往程式碼：會以「程式碼」模式顯示頁面內
容，同時將滑鼠游標移到樣式所在的位置。
開新檔案：建立新的樣式。
輯：啟用樣式編輯視窗。
複製於原位：將所選取的樣式複製一份在面板
中。
重新命名類別：變更樣式名稱。
移動CSS規則：可將樣式設定移到特定或新的
樣式表中。
45
套用：套用樣式於選取範圍。
刪除：刪除不要使用的樣式。
附加樣式表：連結或匯入外部樣式檔案。
設計階段：開啟「設計階段樣式表」視窗。
46
樣式呈現
各項指令名稱及作用說明如下：
47
13-6 樣式使用技巧
設計導覽列的分隔線
首先利用CSS樣式來設計頁面中的導覽列效
果。請自行新增一個空白網頁，接著再建立
下列內容（二條水平線及中間的超連結文字
﹚，本小節中要使用CSS來設計導覽列中的
分隔線效果。
<範例檔：
13_09.html>
48
修改水平線樣式
2.按此鈕確定
1.在新增樣式時選
擇「hr」語法標籤
49
1.先點取樣式中的
邊框類型
2.設定如畫面所示
3.按此鈕確定
50
設定完成的樣式效果
<範例檔：13_09ok.html>
51
設計導覽列的按鈕效果
1.開啟範例檔
2.按此鈕新增規則
<範例檔：13_10.html>
52
3.按此鈕確定
1.點選「複合」選項
2.再從清單中選擇要設定
的樣式名稱
53
1.先點取「字型」
2.設定此種格式內容
54
1.先點取「背景」
2.設定此種格式內容
55
1.選擇「邊框」
2.設定此種格式內容
3.按此鈕確定
56
使用瀏覽器預覽的效果
<範例檔：13_10ok.html>
57
置中對齊的背景圖片
屬性面板按下「頁面屬性」鈕，使進入此視窗
先設定如畫面上所示的效果﹙影像檔案在範例光碟中﹚
58
1.點選此項
2.按此鈕對此樣式進行編輯
59
1.先點取「背景」
<範例檔：13_11ok.html>
2.水平位置設定置中
3.按此鈕確定
60
影像特效
1.開啟範例檔
2.按此鈕新增CSS規則
61
2.按此鈕確定
1.先新增「imgefect
」樣式名稱
62
1.先點取「擴充功能」
2.在篩選器中選擇「Gray」﹙Gray是灰階效果﹚
3.按此鈕確定
63
1.點選圖片
2.由此套用
樣式
<範例檔：13_12ok.html>
64
套用樣式後的影像
圖片
65
項目符號的樣式
1.先點取此位置
<範例檔：13_13.html>
2.按此鈕新增樣式
66
3.按此鈕確定
1.選此項重新定義
HTML標籤
2.會自動選用「li」
語法標籤進行修改
67
1.先點取「清單」
2選擇範例檔案中的「icon1301.jpg」
3.按此鈕確定
68
修改完成的樣式效果
69
13-7 應用範例-CSS樣式規畫
設計「最新消息」的頁面效果
設計「更新日期」所使用的樣式
2.按此鈕確定
1.樣式類型如畫面上
所示
70
1.切換到「字型」
2.設定顏色
71
1.切換到「背景」
2.選定背景色
3.按此鈕確定
72
設計「標題文字」所使用的樣式
2.按此鈕確定
1.樣式類型如畫面上
所示
73
1.切換到「字型」
2.設定顏色
74
1.切換到「背景」
2.選定背景色
75
1.切換到「定位」
2.設定寬度
3.按此鈕確定
76
設計「重點文字」所使用的樣式
2.按此鈕確定
1.樣式類型如畫面上所示
77
1.切換到「字型」
2.設定顏色
78
1.切換到「邊框」
2.設定樣式及顏色
3.按此鈕確定
79
設計「水平線」所使用的樣式
2.按此鈕確定
1.樣式類型如畫面上
所示
80
1.切換到「邊框」
2.設定樣式及顏色
81
1.切換到「定位」
2.設定寬度
3.按此鈕確定
82
設定完成後，按右鍵執行「套用」指令，將樣式一一套用到網頁中
83
完成如上設定，網頁效果將顯示如圖：
84
本章結束
Q&A討論時間
85