發新話題

[分享] 網頁編輯器 NVU 教學

插入物件

插入線條
使用方法:
插入→水平線
調整水平線屬性:
直接在水平線按兩下或是滑鼠移至水平線按右鍵,產生一屬性選單
水平線HTML語法:
線段設定:<HR align="屬性值" size="n" width="n" noshade>....</HR>   
* 此為作業系統所提供字型,若使用者系統不存在該字型,則以內定字型   
* 屬性:      有下列三種:
          o align:設定排列位置                + left-->靠左                + center-->置中                + right-->靠右
         o size:線段粗細,n值越大,線段越粗,若無設定,則n=1
         o width:線段長度,設定方式有:                + 百分比:相對於瀏覽器                + 點數:實際PIX,換言之長度不會因瀏覽器而變  
         o noshade:不產生陰影,即產生一實線
         o color:設定線條顏色,產生一實線(僅ie可用)

訪客無法瀏覽此圖片或連結,請先 註冊登入會員



插入HTML碼
使用方法:
插入→HTML
若直接選取編輯視窗內物件,將在本視窗內顯示,當然也可以把在其他HTML標籤直接貼在本視窗內。



插入書籤
為什麼要用書籤?
主要用在超連結,不管是在本網頁或是其他網站網頁連結。只要設定書籤就可快速進入設定書籤
使用方法:
插入→書籤
在功能圖示點選 出現如左對話方塊,填入書籤名稱。
在該文字邊出現圖示
如果想直接使用現成文字為書籤命名,可以將該文字圈選後按,插入→書籤,則該段文字即可直接在書籤名稱欄中
書籤HTML語法:

書籤設定:<A name="名稱">....

訪客無法瀏覽此圖片或連結,請先 註冊登入會員



插入圖片
使用方法:
插入→圖片
在功能圖示點選
出現如右位置對話方塊,填入圖片檔名、提示文字、替代文字。
尺寸對話方塊,調整原圖片尺寸。
或是拖曳八個小方塊調整大小。
外觀對話方塊,調整圖片與文字間尺寸。
超連結對話方塊,調整圖片超連結。
調整圖片屬性:點選該圖片,格式→圖片與超連結 進階設定,進入圖片調整,或是按滑鼠右鍵出現一對話方塊,


圖片HTML語法:
圖片設定:<IMG src="URL" height="n" width="n" border="n" hspace="n"  hspace="n" align="屬性值" lowsrc="URL" alt="文字" >   
* src--圖片檔案位置   
* height--圖片高度,可用數字(pix)或百分比表示   
* width--圖片寬度,可用數字(pix)或百分比表示   
* border--圖片邊框厚度,可用數字(pix)或百分比表示   
* hspace--圖片左右留白寬度,可用數字(pix)或百分比表示   
* vspace--圖片上下留白寬度,可用數字(pix)或百分比表示   
* align--相對於文字基準線的水平對齊
          o top----向上對齊
          o middle----置中對齊
          o top----向下對齊
          o right----靠右對齊
          o left----靠左對齊   
* lowsrc--載入低解析圖片檔案位置   
* alt--取代圖片文字

訪客無法瀏覽此圖片或連結,請先 註冊登入會員    



插入PHP碼
PHP碼:為一種伺服器端語言,其與HTML語法式可以並存
使用方法:

插入→PHP Code
插入PHP碼位置會有圖示,修正時則可以直接點選兩下圖示,進入PHP碼編輯畫面,存檔時需要存成php副檔名
訪客無法瀏覽此圖片或連結,請先 註冊登入會員

TOP

插入背景音樂(僅在MS-Window作業系統與Firefox瀏覽器適用)
在多媒體支援,各家瀏覽器有其不同支援方式,底下僅就firefox瀏覽器作說明
檢查瀏覽器Plugins支援:在網址列輸入about:plugins,出現如下圖,檢查是否有QuickTime相關plugin



HTML 語法中,有關背景音樂的標籤有<bgsound>及<embed>,前者式Microsoft特殊格式,僅適用於IE瀏覽器,後者僅Netscape與Mozilla,Firefox支援

安裝iTune: 下載位置:
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
或是:訪客無法瀏覽此圖片或連結,請先 註冊登入會員 搜尋 itune ,並下載。 下載後點選安裝即可

安裝 FireFox 的 bgsound to embed 擴充套件
下載:訪客無法瀏覽此圖片或連結,請先 註冊登入會員 [/url]
安裝套件
用firefox開啟該檔案→選立刻安裝
安裝完成
程式碼撰寫: <embed src="testsound.wav" autostart="true" loop="false" hidden="true">
src:指定音樂來源檔 autostart:在如時自動播放 hidden:隱藏控制介面
訪客無法瀏覽此圖片或連結,請先 註冊登入會員



插入影片
基本上需先安裝Quick time的Plugin,可以用瀏覽器在網址列輸入『about:plugins』查詢安裝Plugin,
另外Firefox需安裝embed使用程式,才可使用<EMBED>標籤。

<EMBED>語法:
src:影片檔名稱 width:顯示寬度 height:顯示高度 autostart:自動播放 loop:播放次數 hidden:隱藏展示位置:需藉助CSS來定位
訪客無法瀏覽此圖片或連結,請先 註冊登入會員



如何插入Java-Script
加入Java-Script

step 1:插入→HTML,開啟編輯視窗
step 2:在視窗內填入如下Script:


<script type="TEXT/JavaScript">stra="小心我扁你!!! ";strb="你要我扁你幾下?";strc="五下";function cc(){document.write("下例是示範算術運算子");}function warn_win(){alert(stra);}</script>
step 3.加入互動按鈕,在按鈕加入互動事件

在按鈕加入互動事件

TOP

表單制作

表單-FORM
使用方法:
插入→表單→設定表單
在功能圖示選取表單
出現如下對話方塊,填入相關值
如果不填Action欄位內容,將出現一方塊提醒您將來不會有反應,不與理會則Action項不會出現
設定完成後在編輯視窗下出現一虛框
一般而言要先設定Form,在製作表單內之內容物,最後再設定送出按鈕,表單內之內容物,會框在虛框內

Form修改,滑鼠移至虛框,按右鍵出現選單,選取表單進階設定,進入表單修改畫面



表單HTML語法:

<FORM method="屬性值" action="URL" enctype="MIME 類型" target="框架名稱">填入input,select,textarea,fieldset,...欄位控制標籤................................................</FORM>   
* 提供一互動功能,利用CGI程式達到伺服端與客戶端互動   
* 所有欄位包括input,select,textarea,fieldset,...都需要在此標籤含遢d圍內   
* method--傳遞方式有post,get兩種方式,若用get在URL後用『?』傳遞變數   
* action--當表單把資料傳遞後,由cgi哪一位置之檔案來做處理   
* enctype--當以post送出時MIME類型,預設為『application/x-www-form-urlencoded』,     但要傳送檔案則要『multipart/form-data』   
* target--將action結果傳入哪一框架   
* 若以mail傳送form,則用<form action="mailto:E-mailaddress">


表單欄位
使用方法:

插入→表單→表單欄位

在功能圖示選取表單右邊向下三角型,出現方塊選表單欄位
一定要填上欄位名稱,如果不填確定按鈕將不會出現
修改欄位屬性,將滑鼠移至該欄位按滑鼠右鍵,出現選單後,選表單欄位進階設定進入作修改。或是選取修正區,在在功能圖示選取表單欄位,進入修改。


表單HTML語法:
<INPUT  type="屬性值" name="屬性值" value="屬性值" size="n" maxlength="n" accesskey="屬性值" checked readonly disabled></INPUT >屬性說明:   
* type指定欄位型態:
         o TEXT---文字輸入欄
         o text可提供一個單行輸入欄位,欄位長度由size控制用maxlength控制最大長度 PASSWORD---密碼欄
         o password--類似text,但輸入文字會以*出現 HIDDEN---隱藏欄
         o hidden--沒有輸入介面,但會將value值送出 RADIO---單選鈕
         o radio--只能做單一選擇,被選取時會出現一黑點 CHECKBOX---多選鈕
         o checkbox--可重複選擇 SUBMIT---送出鈕
         o submit--會將所填入資料送出給action所指定程式處理 BUTTON---按鈕
         o RESET---重置鈕
         o reset--清除所填入資料 IMAGE---圖片欄  
         o image--以圖片為使用者輸入介面,使用者輸入資料成為滑鼠在圖形上之座標值 FILE---檔案欄            file--產生一下拉選單,選取檔案 NAME--設定該欄位名稱  
* * VALUE--該欄位內定值,會出現在該欄位顯示區   
   * SIZE--該欄位顯示寬度,單位是字元,內定為20個字元   
   * MAXLENGTH--該欄位最大輸入長度   
   * ACCESSKEY--設定快速鍵   
   * CHECKED--該欄位為預定選項   
   * READONLY--該欄位只能用來顯示資料   
   * DISABLE--該欄位不可被選取

訪客無法瀏覽此圖片或連結,請先 註冊登入會員


表單欄位

使用方法:
插入→表單→表單欄位


在功\能圖示選取表單右邊向下三角型,出現方塊選表單欄位

一定要填上欄位名稱,如果不填確定按鈕將不會出現

修改欄位屬性,將滑鼠移至該欄位按滑鼠右鍵,出現選單後,選表單欄位進階設定進入作修改。或是選取修正區,在在功\能圖示選取表單欄位,進入修改。




表單HTML語法:


<INPUT  type="屬性值" name="屬性值" value="屬性值" size="n"
maxlength="n" accesskey="屬性值" checked readonly disabled>
</INPUT >
屬性說明:

    * type指定欄位型態:
          o TEXT---文字輸入欄
          o text可提供一個單行輸入欄位,欄位長度由size控制用maxlength控制最大長度 PASSWORD---密碼欄
          o password--類似text,但輸入文字會以*出現 HIDDEN---隱藏欄
          o hidden--沒有輸入介面,但會將value值送出 RADIO---單選鈕
          o radio--只能做單一選擇,被選取時會出現一黑點 CHECKBOX---多選鈕
          o checkbox--可重複選擇 SUBMIT---送出鈕
          o submit--會將所填入資料送出給action所指定程式處理 BUTTON---按鈕
          o RESET---重置鈕
          o reset--清除所填入資料 IMAGE---圖片欄
          o image--以圖片為使用者輸入介面,使用者輸入資料成為滑鼠在圖形上之座標值 FILE---檔案欄
            file--產生一下拉選單,選取檔案 NAME--設定該欄位名稱
  * * VALUE--該欄位內定值,會出現在該欄位顯示區
    * SIZE--該欄位顯示寬度,單位是字元,內定為20個字元
    * MAXLENGTH--該欄位最大輸入長度
    * ACCESSKEY--設定快速鍵
    * CHECKED--該欄位為預定選項
    * READONLY--該欄位只能用來顯示資料
    * DISABLE--該欄位不可被選取



訪客無法瀏覽此圖片或連結,請先 註冊登入會員 多行文字輸入
使用方法:
插入→表單→多行文字輸入
在功能圖示選取表單右邊向下三角型,出現方塊選多行文字輸入
一定要填上欄位名稱,如果不填確定按鈕將不會出現
修改欄位屬性,將滑鼠移至該欄位按滑鼠右鍵,出現選單後,選表單欄位進階設定進入作修改。或是選取修正區,在在功能圖示選取表單欄位,進入修改。



多行文字HTML語法:

產生一塊長方形編輯視窗,可以多行輸入<TEXTAREA  name="屬性值"  wrap="屬性值" cols="n"  rows="n"></TEXTAREA >
屬性說明:   
* name--設定該欄位名稱   
* cols--顯示長度,當使用者超過時,將出現捲軸   
* rows--顯示寬度,當使用者超過時,將出現捲軸   
* wrap--
         o OFF
         o 輸入文字超過欄位寬度時不會自動換行,但出現捲軸 VIRTUAL  
         o 輸入文字超過欄位寬度時會自動換行,送出資料時, 按enter鍵才會換行,其他部份不會自動換行 PHYSICAL            依照螢幕所見方式將資料送出

訪客無法瀏覽此圖片或連結,請先 註冊登入會員

TOP

Fieldset方框
使用方法:
插入→表單→設定Fieldset
在功能圖示選取表單右邊向下三角型,出現方塊選設定Fieldset

修改欄位屬性,將滑鼠移至框線位按滑鼠右鍵,出現選單後,選表單欄位進階設定進入作修改。或是選取修正區,在在功能圖示選取表單欄位,進入修改。



Fieldset語法:


將多個輸入欄位組合在一起,瀏覽器會產生一個方框將其組合在一起利用LEGEND將方框做說明架構如下:<FIELDSET>        <LEGEND>說明文字</LEGEND>        各種欄位..................        .........................</FIELDSET >
訪客無法瀏覽此圖片或連結,請先 註冊登入會員

TOP

框架處理

框架概念
何謂框架?
把視窗分割乘數個小視窗,每一個小視窗賦予不同用途,例如一個專門放置選單,一個放置網頁內容,對整體而言有一致風格。這種小視窗稱為框架(frame),整各視窗稱為框架組(frameset)。

既然分割數個小視窗,當然需要對視窗命名。同時對分割小視窗也要填入網頁內容,所以也要填入網頁名稱。

框架與網頁有何不同?

frameset與body不同
名稱BODYFRAMESET起始標籤<HTML><HTML>文件檔頭<HEAD><HEAD>文件本體<BODY><FRAMESET>文件本體結束</BODY></FRAMESET>結束標籤</HTML></HTML>同一份html文件中是不能同時宣告<BODY>與<FRAMESET>

框架架構
<FRAMESET rows="X1...." cols="Y1..." frameborder="yes|no" border="n" bordercolor="顏色" framespaceing="n">    <FRAME src="URL" name="名稱" scrolling="no|yes|auto" nosize marginwidth="n" marginheight="n" </FRAME></FRAMESET >
屬性說明: frameset部份
  • rows--分割成幾個橫排視窗,若有幾個設定值表示分割幾個橫排視窗 表示方式有:
    • 百分比:相對瀏覽器視窗而言
    • 絕對設定:直接填入數字 rows(20%,*)表示分隔成20%,80%
  • cols--分割成幾個直排視窗,若有幾個設定值表示分割幾個直排視窗 表示方式有:
    • 百分比:相對瀏覽器視窗而言
    • 絕對設定:直接填入數字 cols(120,*)表示分隔成120pix,視窗剩下部份給另一框架
  • frameborder--是否顯示視窗邊界,1 or yes 表示顯示,為內定值,0 or no 表示不顯示
  • border--分界處厚度
  • bordercolor--分割線顏色
  • framespaceing--分界處厚度


frame部份
  • src--讀入框架網頁(html檔)
  • name--為分割框架命名
  • frameborder--指定是否顯示邊界,1→顯示,0→不顯示
  • scrolling--是否出現捲軸 表示方式有:
    • no:永不出現
    • yes:一定要出現
    • auto:視狀況而定
  • nosize--限制調整視窗大小
  • marginwidth--視窗內容與左右邊界距離
  • marginheight--視窗內容與上下邊界距離
<NOFRAMES>---表示當瀏覽器無法顯示分割視窗時顯示文字</NOFRAMES>
訪客無法瀏覽此圖片或連結,請先 註冊登入會員


iframe(Inline Frame)
iframe與frameset不同之處在於iframe是在網頁切割出一塊區域來放置不同網頁,基本上仍在網頁之<body>...</body>之間內。
iframe語法:
<iframe 屬性...>...</iframe>
src:連結網頁名稱name:分割視窗名稱width:分割視窗寬度height:分割視窗高度marginwidth:分割視窗左右邊界marginheight:分割視窗上下邊界scrolling:捲軸
auto:自動 yes:要有捲軸 no:不要有捲軸
frameborder:顯示/不顯示分割視窗邊界
1:顯示 2:不顯示
align:對齊方式(left、right、top、middle、bottom)

訪客無法瀏覽此圖片或連結,請先 註冊登入會員


HTML語法
   
表單產生器form開設   INPUT開設
[td][/td]

下拉式選單開設  文字區塊開設  群組化開設  其他   

TOP

其它功能

網頁驗證
驗證該網頁是否符合W3C格式,該驗證方式是連至網站,所以需要連線。
如何驗證?
Step1:開啟檔案→工具→HTML語法驗證→出現對話方塊,
Step2:開啟驗證對話方塊,
Step3:出現錯誤
Step3:驗證正確



匯出成文字檔
本功能主要是將網頁內容會出成純文字檔,可以用其他文書編輯軟體觀看其內容,相關之HTML標籤在匯出已被惕除。

如何製作方法:
step1:格式→頁面標題及屬性→開啟對話方塊→設定語系(zh-tw)與字元編碼(Big5)

step2:檔案→匯出成文字檔
或是在檔案→儲存並改變字元編碼→開啟對話方塊
step3:設定檔名→存檔




meta網頁相關資料
<meta>標籤
<meta c http-equiv="content-type">
<meta name="author" c>
<meta name="description" c>
範例:
<meta c http-equiv="content-type"><meta c name="author"><meta c name="description">設定方法:格式→頁面標題及屬性

自動切換網頁:<META http-equiv="REFRESH" c >    * http-equiv--refresh 重新載入    * content--經過多久要重讀網頁一次    * url--要載入網頁之URL訪客無法瀏覽此圖片或連結,請先 註冊登入會員



目錄製作
為什麼要目錄製作?
當有一篇內容有訪客無法瀏覽此圖片或連結,請先 註冊登入會員 ,是否可以在最前作個連結,另使用者可以快速進入其想要看內容,基本上這是可行的,
利用書籤方式可達到,但我們可以作成像目錄形式。
原理?
利用h1~h6方式做出相對應書籤連結

如何製作?
先製作格式:訪客無法瀏覽此圖片或連結,請先 註冊登入會員
將滑鼠移至頁首,插入→目錄→插入,得一對話方塊
自動依順序加上數字:產生有數字之架構,
使產生目錄『無法編輯』,勾選此項,當滑鼠在此目錄架構點兩下無法進入編輯選單
如何移除目錄架構?插入→目錄→移除
如何更新目錄架構?插入→目錄→更新
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
訪客無法瀏覽此圖片或連結,請先 註冊登入會員


樣板製作
為什麼要樣板?
如果畫面可以保持一致性,我們只需要更換網頁內容,甚至內容可以事先餵入資料庫,在從資料庫取出,製作網頁不是很方便?

如何製作?
step1.事先製作出一份樣板網頁,訪客無法瀏覽此圖片或連結,請先 註冊登入會員 ,存檔後
step2.開啟新檔

TOP

CSS 概說

CSS簡介
CSS是什麼?
CSS(Cascading Style Sheet 階層樣式表)階層:在HTML文件中引用定義樣式,當數個定義樣式,若彼此間出現衝突,接依照某個順序處理樣式:提供一種經瀏覽器展現出樣式當使用CSS樣式需注意是否在瀏覽器能夠呈現
CSS優點
      使用CSS優點
    * 維護困難
    * 快速下載
    * 強大樣式功能
    * 讓網頁原始檔更容易閱讀
    * CSS-Cascading Style Sheet階層式樣式表
    * 一組樣式可以套用在多個物件上
    * 儘量使用div標籤,因CSS在不同瀏覽器有不同效果

CSS定義方式: 基本樣式
選擇器(selector,或稱為樣式名稱) {性質(property):值(value)}
樣式與樣間需用『;』分開,例如: h1{font-size:24; color=#ff00ff;}
若有多個選擇器需用逗號分開,例如: H1 , H3 { COLOR : RED ; FONT-WEIGHT : BOLD }

指定類型
『*』:所有元素均適用,單獨使用時『*』是不可省,但後面連接#ID名,或是『.類別名稱』則『*』是可省。
指定ID:#ID名,適用所有同ID名稱
指定CLASS:.CLASS名,適用所有同class名稱
指定選擇器#ID:指定某選擇器,同時ID名稱需符合者
指定選擇器.CLASS:指定某選擇器,同時稱需符合CLASS名者
同一網頁可以有數個class名稱,但僅能有一個id名稱
CSS定義類型
行內樣式:Inline (同列)
在文件中直接插入控制標籤
使用HTML標記的STYLE屬性,只於定義的區段有效。
<標籤名稱 STYLE="樣式屬性:屬性值;樣式屬性:屬性值;樣式屬性:屬性值;....."> 在NVU如何加入?
step1:切換至HTML標籤模式
step2:點選標籤
step3:按滑鼠右鍵→出現一對話方塊→進階設定
step4:出現一對話方塊→選CSS→填入屬性與值
訪客無法瀏覽此圖片或連結,請先 註冊登入會員

CSS處理順序
直接定義>自訂內部定義>匯入外部樣式表>連結外部樣式表
製作者樣式表>使用者樣式表>瀏覽器起始設置樣式表
若用《!important》為第一優先
id樣式表>class樣式表>指定元素樣式表

CSS檔案製作
使用NVU之CSS編輯器製作CSS樣式後→重新整理→輸出成CSS檔。



內嵌樣式表(Embedding)
直接在元素內作定義。
例如: <h1 style="background: rgb(0, 255, 255) none repeat scroll 0%; color: rgb(255, 0, 0); font-size: 40px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">個別定義
樣式: <選擇器 STYLE="屬性1:值1;屬性2:值2;...">屬性與值間需加入『:』,各屬性間需用『;』

內嵌樣式表:一個元素定義標籤內屬性
如何處理:
step1:在標籤模式下:按滑鼠右鍵進入進階設定
step2:選取CSS樣式:按滑鼠右鍵進入進階設定
填入CSS語法,如下例:逐一填入border-style: double; background-color: rgb(51, 255, 51); color: rgb(153, 51, 153);
產生結果:
<h2 style="border-style: double; background-color: rgb(51, 255, 51); color: rgb(153, 51, 153);">糗大了!深圳第一大樓炸不倒</h2>



利用CLASS樣式表(類別)
樣式: 格式:    * 單一元素指定:元素名稱.選擇器{類別定義.....}    * 共用格式:*.選擇器{類別定義.....}(『*』是可以省略)範例<STYLE TYPE="TEXT/CSS"><!--(避免瀏覽器不支援CSS用)grjh.aa {color:red;font-size:30px}.bb {color:blue;}........................................................--></STYLE>
在NVU如何加入?
step1:工具→CSS編輯器→出現一對話方塊→點選Style elt.
step2: <style title="我的css樣板" media="abc" type="text/css"> ,本項可以不填
step3:單一元素指定:元素名稱.選擇器,選用第二、三項均可,其餘的步驟如上述
在網頁中如何加入class?
step1:切換置HTML標籤模式→按滑鼠右鍵,出現一對話方塊→進階設定
選HTML屬性→拉出屬性下拉選單,選CLASS→填入屬性值
訪客無法瀏覽此圖片或連結,請先 註冊登入會員


利用ID樣式表(識別字)
樣式:
格式:    #選擇器1{樣式屬性:屬性值;樣式屬性:屬性值;樣式屬性:屬性值;.....}    ID樣式表與CLASS樣式表最大不同是:       (1)ID樣式表僅能套用一次,CLASS樣式表多次套用       (2)ID樣式表以#帶頭,CLASS樣式表以『.』帶頭       (3)ID樣式表使用:          <標籤名稱 ID="ID選擇器名稱">          CLASS樣式表使用:          <標籤名稱 CLASS="CLASS選擇器名稱">範例<STYLE TYPE="TEXT/CSS"><!--(避免瀏覽器不支援CSS用)   #aa {color:red;font-size:30px}   #bb {color:blue;}   ........................................................--></STYLE>在NVU如何加入?
step1:工具→CSS編輯器→出現一對話方塊→點選Style elt.
step2: <style title="我的css樣板" media="abc" type="text/css"> ,本項可以不填
step3:單一元素指定:元素名稱.選擇器,選用第二、三項均可,其餘的步驟如上述
在網頁中如何加入class?
step1:切換置HTML標籤模式→按滑鼠右鍵,出現一對話方塊→進階設定
選HTML屬性→拉出屬性下拉選單,選ID→填入屬性值 訪客無法瀏覽此圖片或連結,請先 註冊登入會員




匯入/出 CSS檔案
匯入外部樣式
# 匯入外部樣式將前述之定義獨立為一檔案,使用時再匯入,換言之,瀏覽器讀取HTML檔時,會將樣式檔複製一份到HTML檔案內<STYLE TYPE="TEXT/CSS">//在此設定呼叫檔案,呼叫方式有下列三種    * @import url("匯入外部樣式檔名");    * @import "匯入外部樣式檔名";    * @import '匯入外部樣式檔名';</STYLE">不要忘記最後『;』
匯入檔案內容:import2.css.aa {color:red;font-size:30px} .bb {color:blue;}
範例: <style type="text/css">
@import "import2.css";
</style>

匯出樣式
step1:開啟CSS編輯器→Style elt.→建立樣式
step2:選取『Export stylesheet and switch to exported version』,輸出至檔案
step3:輸入檔名,建立新檔案
step4:點選『規則』→建立樣式規則→關閉
step5:關閉後在原檔案產生<link rel="stylesheet" href="file:///home/rongshi/c3.css" type="text/css">同時輸出c3.css檔案

TOP

連結外部樣式(Linking)
使用 <LINK>標記 ( 用於HEAD區 ),即將排版樣式分開處理 ,再連結使用。可使用多個<LINK>標記。
# 連結外部樣式將CSS樣式獨立為一檔案,使用時再索取,換言之,瀏覽器讀取『LINK標籤』時,會像所連結樣式檔索取格式:<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="外部樣式檔名">此必須放在 <head>~</head>之間匯入檔案內容:import2.css.aa {color:red;font-size:30px} .bb {color:blue;}
範例:
<link rel="StyleSheet" type="text/css" href="import2.css">

在NVU如何加入?

step1:工具→CSS編輯器→出現一對話方塊→專家模式→點選Link elt.

step2: 填入連結之CSS檔

step3:儲存檔案→才可以看到設定結果

在網頁中如何加入class?

step1:切換置HTML標籤模式→按滑鼠右鍵,出現一對話方塊→進階設定

選HTML屬性→拉出屬性下拉選單,選CLASS→填入屬性值

訪客無法瀏覽此圖片或連結,請先 註冊登入會員





單位與顏色定義

單位
絕對單位
● in(英吋)(1 in=2.54cm)● cm(公分)● mm(公釐)● pt(點)(1pt=1/72 in)● pc(Pica)(1 pica=12pt)
相對單位▲ em:以整個字形高度(font-size)為1單位▲ ex:小寫『x』高度為1單位,但不同字形如『i』『g』『h』...字形高度不一▲ px:像素,螢幕最小點單位,用於電腦螢幕輸出,會隨螢幕解析度而變。▲ %:百分比,依顯示視窗所佔百分比大小
顏色定義
■ 16進位值指定:#RRGGBB■ 10進位值指定:rgb(n,n,n) 0<n<266■ 以百分比指定:rgb(n%,n%,n%) 0<n<101■ 以顏色名稱指定:W3C所定義顏色
顏色名稱顏色名稱
000000Black008000Green
c0c0c0Silver00ff00Lime
808080Gray808000Olive
FFFFFFWhiteFFFF00Yellow
800000Maroon000080Navy
FF0000Red0000FFBlue
800080Purple008080Teal
FF00FFFuchsia00FFFFAqua
螢幕安全色:將RGB每一種顏色分成6部份,即0,51,102,153,204,255,若51以16進位表示為「33」,以百分比表示為20%,因此整個顏色展現為6*6*=216種顏色。
0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF
網頁驗證
驗證該網頁是否符合W3C格式,該驗證方式是連至網站,所以需要連線。
如何驗證?
Step1:開啟檔案→工具→HTML語法驗證→出現對話方塊,
Step2:開啟驗證對話方塊,
Step3:出現錯誤
Step3:驗證正確




CSS繼承
格式:<aa><bb>css繼承</bb></aa><aa>標籤將<bb>標籤包圍,此時<aa>標籤稱為父元素,<bb>標籤稱為子元素
若子元素沒有定義屬性則繼承父元素
若子元素有定義屬性,同時父元素亦有該屬性則以子元素為主,不再繼承父元素
下面例子:<aa>標籤稱為父元素,<bb>標籤稱為子元素<aa>與<bb>同時都定義字體顏色與大小,<bb>則依照自己定義樣式訪客無法瀏覽此圖片或連結,請先 註冊登入會員
組合選擇器
選擇器可以任意組合,再定義其樣式
組合選擇器間每一項選擇器需用空格分開
組合選擇器與共用選擇器定義是有差別
範例       H1 {COLOR:RED}       EM {COLOR:yellow}       產生組合選擇器       H1 EM {COLOR:blue}使用時<H1><EM>產生組合選擇器展示文字樣式</EM></H1>
訪客無法瀏覽此圖片或連結,請先 註冊登入會員

TOP

製作樣式表
規則:
選擇器(selector):決定那些元素會受到影響 宣告:特性:特性值
樣式: 選擇器 {屬性1:值1 ; 屬性2:值2;...}選擇器與宣告間需加入一組『{...}』屬性與值間需加入『:』,各屬性間需用『;』
不同樣式: (1)元素型式或名稱(h1 {color:red;})(2)元素所處情境(h1 em{color:red;})(3)元素class或id        (h1.a1{color:red;})        (div#a1{color:red;})(4)元素擬類別(pseudoclass)(a:link{color:red;})(5)元素特定屬性(a[name]{color:red;})此必須放在 <head>~</head>之間
個別定義
樣式: <選擇器 STYLE="屬性1:值1;屬性2:值2;..."><!--(避免瀏覽器不支援CSS用)選擇器1{樣式屬性:屬性值;樣式屬性:屬性值;樣式屬性:屬性值;.....}選擇器2{樣式屬性:屬性值;樣式屬性:屬性值;樣式屬性:屬性值;.....}........................................................--></STYLE>
在NVU如何加入?
step1:工具→CSS編輯器→出現一對話方塊→點選Style elt.
step2: <style title="我的css樣板" media="abc" type="text/css"> ,本項可以不填
step3:設定規則→點選第三個選項→填入套用元素名稱→建立樣式規則
step4:選取欲建立規則項目→建立規則→建立好後關閉


訪客無法瀏覽此圖片或連結,請先 註冊登入會員



內嵌樣式表:多個元素定義相同屬性(群組)
樣式:
<STYLE TYPE="TEXT/CSS"><!--(避免瀏覽器不支援CSS用)選擇器1,選擇器2,....{樣式屬性:屬性值;樣式屬性:屬性值;樣式屬性:屬性值;.....}.......................................................--></STYLE>在NVU如何加入?
step1:工具→CSS編輯器→出現一對話方塊→點選Style elt.

step2: <style title="我的css樣板" media="abc" type="text/css"> ,本項可以不填

step3:設定規則→點選第三個選項→填入套用元素名稱→建立樣式規則
step4:選取欲建立規則項目→建立規則→建立好後關閉

訪客無法瀏覽此圖片或連結,請先 註冊登入會員

TOP

CSS 篇輯

CSS框線設定:設定某區域框線顯示方式
開啟方式:


加入方式:
在標籤模式下,將滑鼠移至標籤上,按滑鼠右鍵,選進階設定,出現一對話方塊。
屬性欄選取【class】,同時填上屬性值→按下確定。



CSS文字設定
顏色設定:color:顏色值訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體設定:font-family:字形名稱,
字形名稱,字形名稱
可以指定多個字型,若字型名稱有空白
需加雙引號,字型則由左至右尋找符合
字型
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體粗細設定:
font-weight:normal,bold,lighter
,bolder, 100,200,300,
400,500,600,700,800,900
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體大小設定:font-size:...px..
大小單位
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體樣式設定:font-style:normal,italic,oblique
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體裝飾設定:
功能 : 設定文字裝飾 ( 分為 : 無、加底線、加橫線、加頂線 )
font-decoration:none,underline,overline,line-through,blink
可用值有none(不加)、underline(加底線)、overline(加頂線)、line-through(加刪除線)、blink(閃爍)。
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
字體水平位置設定:
功能 :設定調整文字 ( 可設左邊、右邊、置中、整齊 ),決定文句在區塊內的水平對齊方式,可用值有left、right、center、justify。 text-align:right,center,left
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
行距設定:
功能 :
設定文字行列高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
line-height:normal,數值,附單位數值,%
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
大小寫設定:
設定文字改變 ( 可設無、第一個字母大寫、大寫、小寫 )
text-transform:uppercase,
lowercase,capitalize
可用值有 none(不自動轉換)、capitalize(第一個字母自動轉為大寫)、uppercase(全部自動轉換為大寫)、
lowercase(全部自動轉換為小寫)。
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
文字間隔設定:
功能 :
設定字與字的間隔,只需指定一個長度單位給它 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px )
letter-spacing:normal,數值,附單位數值,%
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
文字縮排:
text-ident : ( length )︱( percentage )
功能 : 設定文字縮排 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
這個性質可設定段落的首行縮排(就像作文時一樣,首行要縮排),可指定含單位的長度值,或是百分比值(參照於父元件)。
text-autospace
這是用來調整字距的性質,用來設定是否於特定位置加大空白間距,以增加美觀。
屬性有none(不使用)、ideograph-alpha(於遠東語系與拼音語系間加大空白)、ideograph- numeric(於遠東語系與數字間加大空白)、
ideograph-parenthesis(於遠東語系與括號間加大空白)、ideograph- space(遠東語系之兩旁加大空白)。
一般很少有人用這個性值,通常是text-autospace:none。
text-justify
設定段落中各句如何調整,使段落左右之邊界對齊。
屬性有有 inter-word(利用調整字距)、newspaper(利用調整字距或字母間距)、
distribute(與newspaper很像,但最適用於東亞)、distribute-all-lines(連最後一行也調整至同寬,一般不會用這個值)、inter-ideograph(利用增加或減少字距來調整)、auto(由瀏覽器語系決定)。這個性質要IE5.0以上才能使用,一般都用text-justify:auto。 word-break 設定一行結束時的斷字法,可用值有normal(允麻_字)、break-all(允麻_字,適用於大量中文夾雜少量英文)、keep-all(只允釧颻^文斷字,適用於大量英文夾雜少量中文)。一般用word-break:break-all較適於中文字。

字型統一設定:
font :粗體、粗細、大小、行距、字型名稱設定
如:font: Times New Roman,Times,serif x-large italic;

CSS背景設定(汎指網頁、文字、表單、表格...)
背景顏色設定:background-color:顏色值訪客無法瀏覽此圖片或連結,請先 註冊登入會員
透明度設定:opacity: 0(不透明)~transpant(透明)字形名稱,

訪客無法瀏覽此圖片或連結,請先 註冊登入會員
背景圖設定:
background-image:url(檔案)
背景圖排列方式:background-repeat:排列方法
repeat:全鋪
repeat-x:水平鋪設
repeat-y:垂直鋪設
no-repeat:只鋪一次
背景圖指定位置:background-position:left,right,top,buttom,或是以左上角附單位數值、%
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
背景圖是否固定:
background-attachment:
fixed:固定背景圖
scroll:背景圖與其他內容隨捲軸移動

背景統一設定:
background :color image repeat position attachemt設定
如:background: rgb(255, 255, 0) url(./images/ter.jpg) no-repeat fixed center

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。