整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
軟開發的網頁設計工具Expression Web，作為網頁設計工具FrontPage的替代品，在功能以及可擴展性方面都有了很大提升，它徹底解決了以前FrontPage會產生不標準網頁代碼的缺點，現在用Expression Web可以創建完全符合標準的網站，同時支持最新的CSS和層，具有強大的CSS功能，Expression Web支持asp.net2.0和XML，具有強大的數據庫操作功能。通過這些新特性，Expression Web擺脫了以前FrontPage給設計人員造成的一種“玩具”印象，逐步走進了專業網頁設計人員的視野。
Expression Web啟動畫面
下面我們就來了解一下這個網頁設計工具的使用方法。
Expression Web是一個強大的網頁編輯和網站設計工具，在編輯具體的網頁之前，我們首先要對自己的網站有一個總體的規劃，設計網站的結構，然后再進行具體的網頁編輯操作。在網站規劃方面，我們既可以自己手工操作，也可以用Expression Web提供的模板來自動創建。
（一）建立普通站點
單擊“文件→新建→網站”命令，打開“新建”網站對話框，在左邊的窗口中選擇“常規”，在右邊的窗口中顯示出要創建的網站類型。
只有一個網頁的網站：創建只有一個單獨的空白網頁的新網站。
空白網站：創建一個沒有內容的新網站。
單擊“指定新網站的位置”右邊的“瀏覽”按鈕，可以選擇網站保存的位置，最后單擊“確定”按鈕，一個新網站就建立好了。
（二）使用導入向導建立站點
這種方式可以創建一個網站，并將一個已建立的網站或某個文件（目錄）導入到當前網站中，它采用向導式的操作，一步步引導用戶完成網站的創建。
單擊“文件→新建→網站”命令，打開“新建”網站對話框，在左邊窗口中選擇“常規”，在右邊窗口中選擇“網站導入向導”，然后單擊“瀏覽”按鈕，選擇新網站的位置；單擊“確定”按鈕，出現“導入網站向導”對話框，用戶可以選擇導入文件的方式，有Http、Ftp、WebDAV、 FrontPage Server Extensions、文件系統五種方式，這里我們選擇從本機上導入文件，所以選擇“文件系統”，然后單擊“瀏覽”按鈕選擇要導入的文件目錄，單擊兩次“進一步”按鈕，最后單擊“完成”，出現“本地網站”和“遠程網站”窗口，單擊“遠程網站”下部的“發布網站”按鈕，將遠程網站中的文件發布到本地網站中，在“文件夾列表”中就可以看到導入的文件內容。
（三）使用模板建立站點
Expression Web內置了多種站點模板，用戶可以非常方便地用它創建一個自己需要的網站。
單擊“文件→新建→網站”命令，打開“新建”網站對話框，在左邊窗口中選擇“模板”，在右邊窗口中列出了模板網站的類型，有個人、單位、小型企業，選中某種類型，就可以在右邊的預覽區查看它的外觀樣式，單擊“瀏覽”按鈕，選擇網站保存的位置，然后單擊“確定”按鈕，一個新網站就建好了。對模板中的各個頁面適當修改就可以變成自己的網站，非常簡單。如果用戶創建的是單位或個人的小型站點，用這種方法最方便快捷。
單擊“文件→新建→網頁”命令，打開“新建網頁”對話框，Expression Web可以創建“常規”、“asp.net”、“ css布局”、“樣式表”、“框架網頁”4種類型的文件，每種文件又包含很多種類型，在左邊的窗口中選中一種類型，在中間的窗口中列出詳細的分類，右邊的窗口是預覽區，可以預覽一些網頁的外觀樣式，選中要創建的網頁類型，單擊“確定”按鈕即可。一般常用的文檔類型在“常規”分類中都可以找到。
創建新網頁
另外，單擊工具欄“新建文檔”右邊的下拉按鈕，在彈出菜單中選擇“網頁”選項，也可以打開“新建網頁”對話框，當然也可以直接在彈出的菜單中選擇要創建的網頁類型，如HTML、ASPX、CSS。
可以通過以下方法隨時預覽編輯的網頁，注意在預覽前一定要先保存網頁。
方法一：單擊“文件→在瀏覽器中預覽”命令，然后在展開的子菜單中選擇瀏覽器和窗口大小。
方法二：單擊工具欄中的“預覽”按鈕，或者單擊按鈕旁的箭頭，在下拉框中選擇瀏覽器和窗口大小。
方法三：直接按F12鍵。
超鏈接既可以是文字也可以是圖片，既可以鏈接到網站內的網頁，也可以鏈接到其他的網站、文件、程序或電子郵件。
1、選中要建立超鏈接的文本或圖片，如果沒有選擇文本或圖片，則目標URL顯示為超鏈接文本。
2、單擊“插入→超鏈接”命令或工具欄中的“插入超鏈接”按鈕，彈出“插入超鏈接”對話框。
3、設置超鏈接的參數內容：
在“要顯示的文字”框中輸入超鏈接要顯示的文本內容。
單擊“屏幕提示”按鈕，在彈出的對話框中輸入屏幕提示文字，當你將鼠標移到超鏈接上時將顯示該文字內容。
如果要鏈接到網站中的某個網頁，請在“當前文件夾”列表中選中一個網頁，如果要鏈接到外部網站，請在“地址”框中輸入網站的網址。
單擊“目標框架”，在彈出的窗口中可以設置網頁的打開方式，如果希望在新瀏覽窗口中打開超鏈接，請選擇“新建窗口”。
如果要鏈接到電子郵件地址，請選擇“電子郵件地址”，然后在右邊的窗口中輸入“電子郵件地址”和郵件主題。
4、 設置完畢，單擊“確定”按鈕。
將光標移到網頁中要插入圖片的位置，單擊“插入→圖片→來自文件”命令或直接單擊工具欄中的“插入文件中的圖片”按鈕，打開“圖片”對話框，選中所需要的圖片文件，單擊“插入”按鈕，出現“輔助功能屬性”對話框，在“替代文本”框中，輸入在下載圖形、找不到圖形或網站訪問者將鼠標移到圖形上時為圖形所顯示的文本，若要添加較詳細的說明，請單擊“瀏覽”按鈕，并選擇一個文件，再單擊“打開”按鈕，當然你也可以選擇不在“輔助功能屬性”對話框中輸入內容，單擊“確定”按鈕，圖片就插入到網頁中。
在Expression Web中有兩種方法創建表格。
（1）使用工具按鈕插入表格
將插入點移到網頁中要插入表格的位置，單擊工具欄中的“插入表格”按鈕，彈出一個表格窗口，向右下方拖動鼠標，表格框中就會顯示表格的大小，表格大小滿足要求時單擊鼠標就會在網頁中插入一張空表格。
（2）使用菜單命令輸入表格
將插入點移到網頁中要插入表格的位置，單擊“表格→插入表格”命令，出現“插入表格”對話框，輸入表格所需的“行數”和“列數”，然后在“布局”、“邊框”、“背景”中設置好表格的其他參數，單擊“確定”按鈕，一個表格就出現在網頁中。
框架網頁是一種特殊的網頁，它本身并不包含可見內容，它只是一個窗口，里面包含多個框架，每個框架都可以顯示一個獨立的網頁，多個框架之間還可以設置超鏈接，這些框架的集合，就稱為框架網頁。
單擊“文件→新建→網頁”命令，打開“新建”網頁對話框，在“網頁”選項卡中單擊“框架網頁”，在右邊的列表中就可以看到程序內置的十種框架網頁模板以及預覽圖，選擇一種模板，單擊“確定”按鈕，就可以創建一個框架網頁。
新創建的框架網頁還沒有任何內容，用戶需要給每個框架來填充網頁內容，有兩種方法：
如果已經在網站中編輯了網頁，可以單擊框架中的“設置初始網頁”按鈕，打開“插入超鏈接”對話框，在文件列表中選中一個網頁文件，也可以直接在“地址”欄中輸入網址，單擊“確定”按鈕，就可以將網頁插入到框架中。
如果還沒有建立網頁，需要給框架新建網頁內容，請單擊框架中的“新建網頁”按鈕，開始新網頁的編輯。
利用Expression Web可以非常方便地創建樣式表，用來設置網頁及其內容的格式。
（1）創建外部樣式表
單擊“文件→新建→CSS”命令，新建一個樣式表文件，然后單擊“應用樣式”任務窗格中的“新建樣式”按鈕，打開“新建樣式”對話框，在“選擇器”中選擇要定義的標記，在“定義位置”下拉列表中選擇“現有樣式表”，在下面的“類別”區設置好各項參數，單擊“確定”按鈕，一個樣式表就建好了，將它保存起來，以后就可以使用了。
（2）創建內部樣式表
首先打開要創建內部樣式表的網頁，然后單擊“應用樣式”任務窗格中的“新建樣式”按鈕，在“新建樣式”對話框的“定義位置”下拉菜單中，選擇“當前網頁”，在“選擇器”中選擇要定義的標記，同時在下面設置好各項參數，單擊“確定”按鈕，樣式表就自動插入到網頁中的<head></ head>標記之間，我們可以轉換到“代碼”視圖模式進行查看。
單擊“任務窗格→層”命令，將“層”任務窗格顯示在右下方的面板中，然后在網頁中，將光標移到要插入層的位置，單擊“插入→HTML→層”命令或在“層”任務窗格中單擊“插入層”按鈕，就可以在網頁中插入一個層。
也可以在“層”任務窗格中單擊“繪制層”按鈕，然后用鼠標在網頁中拖動就可以畫出一個層。
為了使網頁充滿活力，富于變化和吸引力，我們往往需要給網頁添加上一些聲音、動畫、彈出窗口、網頁過渡效果等特效，在Expression Web中我們可以不用寫一句代碼，就能輕松實現這些特效。
1、添加交互式按鈕
將光標移到要添加按鈕的位置，單擊“插入→交互式按鈕”命令，打開“交互式按鈕”對話框，進行如下設置：
在“按鈕”選項卡的“按鈕”列表中，單擊選擇按鈕樣式，在“文本”框中，輸入要顯示在按鈕上的文本，單擊“鏈接”旁邊的“瀏覽”按鈕，在打開的“編輯超鏈接”對話框中找到并單擊希望鏈接到的文件、URL或電子郵件地址。
在“字體”選項卡上，可設置各種按鈕狀態下文本的字體、樣式、對齊方式及顏色。
在“圖像”選項卡上，可設置要創建的圖像的大小以及是否創建對應于各種按鈕狀態的圖像。
各種參數設置完畢，單擊“確定”按鈕，一個交互式按鈕就會出現在網頁中。
2、添加網頁過渡效果
Expression Web可以通過動態HTML技術讓網頁之間的轉換變成動態的，當用戶瀏覽網站時，從一個網頁切換到另一個網頁將出現淡入、淡出、擦除等不同的效果。
向網頁添加過渡效果的具體操作是：打開要添加過渡效果的網頁，單擊“格式→網頁過渡”命令，打開“網頁過渡”對話框，在“事件”下拉菜單中選擇要應用效果的事件，在“持續時間”中輸入過渡效果持續的時間，在“過渡效果”列表中單擊所需的過渡效果類型，最后單擊“確定”按鈕。
3、向頁面元素添加行為
我們可以對整個頁面、圖像、文字、鏈接或者頁面中的一個或多個元素添加行為，具體操作如下：
首先單擊“格式→行為”命令，在右下角的面板中打開“行為”任務窗格，然后在網頁中選中要添加行為的網頁元素，如文本或圖形，在“行為”任務窗格中，單擊“插入”按鈕，彈出下拉菜單，單擊所需的操作，彈出設置對話框，對于不同的操作，對話框的內容不同，設置完畢，單擊“確定”按鈕。若要選擇不同的事件，請在“事件”之下，單擊默認事件右邊的下拉箭頭，在彈出的菜單中選中所需的事件即可。
在發布網站之前，用戶首先要申請網站空間，獲得網站空間的ftp地址以及用戶名和密碼。
1、打開要發布的網站。
2、單擊 “網站→遠程網站”命令切換到遠程網站視圖。
3、在“遠程網站”視圖，單擊“遠程網站屬性”按鈕。
4、打開“遠程網站屬性”對話框，在“遠程網站”選項卡中選擇一種服務器類型。由于大多數網站都是采用FTP方式上傳文件，所以我們選擇“FTP”，然后在“遠程網站位置”中輸入FTP地址，在FTP目錄中輸入上傳的目錄，不輸入目錄時將默認上傳到網站的根目錄下。
5、單擊“確定”按鈕，輸入網站的用戶名和密碼。
6、單擊“確定”按鈕，打開遠程網站。在“遠程網站”中選中要發布的目錄，雙擊可以打開它。
7、在“遠程網站”窗格中的“發布所有更改過的網頁”之下，選中“本地到遠程”選項。
8、在“本地網站”窗格中，右鍵單擊不希望發布的每個文件，在彈出的快捷菜單中再單擊“不發布”命令。
9、單擊“發布網站”按鈕。
如果想快速在本地網站和遠程網站之間移動文件，也可以單擊某個文件并將其拖放到目標網站中即可。
1.閱后如果喜歡，不妨點贊、評論和關注一下。
2.如果喜歡玩軟件，請關注本頭條號閱讀相關文章。
3.在學習中有什么問題，歡迎與我溝通交流，號搜索：微課傳媒，我在這里等你喲！
、選擇題（1-18題各3分19-36題各2分，共92分）
1.在HTML的<TD>標簽中，align 屬性的取值是（ C ）
A. top ; B. middle ; C. center ; D. bottom
<table border="1">
<tr>
<td width="100px">姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>20齡</td>
</tr>
</table>
2. CSS樣式表根據所在網頁的位置，可分為（ B ）
A.行內樣式表、內嵌樣式表、混合樣式表; B.行內樣式表、內嵌樣式表、外部樣式表;
C.外部樣式表、內嵌樣式表、導入樣式表; D.外部樣式表、混合樣式表、導入樣式表
行內樣式：
<html>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
-----------------------------------------------------------------
內嵌樣式：
<html>
<head>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
--------------------------------------------------------------
外部樣式：
<html>
<head>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
---------------------
css文件
#div{width:100px;height:100px;background:red;}
#和.區別
.點是使用class引用的，多個控件可以同時使用一個class，一個控件上也可以使用多個class，比如
.tdRed{border:solid 1px red;}
.tdBKBlue{background-color:blue;}
<td class="tdRed" />
<td class="tdRed tdBKBule"/>
而ID是在一個頁面中唯一的
總得來說class表示泛性的，id表示個性的
比如你所有的按鈕都是一個顏色的
.normalButton{background-color:blue;border:solid 0px black;}
對于提交按鈕會要做的大一點
#submit{width:100px;height:100px;}
那么你的按鈕就是
<input type="button" id="submit" class="normalButton" value="提交" />
普通的按鈕就是
<input type="button" id="abcdefg" class="normalButton" value="普通按鈕" />
3. 在插入圖片標簽中，對插入的圖片進行文字說明使用的屬性是（ D ）
A.name; B.id; C.src; D. alt
4. 對于<FORM action=″URL″ method=*>標簽，其中*代表GET或（ C ）
A.SET; B. PUT; C. POST ; D. INPUT
Get和post區別
安全性：POST比GET安全；
編碼方式：POST方式提交時可以通過HTML文檔中的<META>元素設置實體部分的編碼方式，而GET方式提交時URI默認的編碼方式為ISO-8859-1，不可以在頁面中設置；
傳輸文件大小：POST方式提交文件放在實體部分傳輸，大小無上限，而GET方式提交文件內容放在URI部分傳輸，最大為2KB;
請求速度：GET比POST快。
數據傳輸方式：GET：查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的。
5. 下列標簽可以不成對出現的是（ B ）
A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉
<p>是段落標簽。
在HTML4.01中某些標簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對出現，但是不推薦。在現在的瀏覽器里，都會“兼容”這些單標簽。瀏覽器解釋<p>標簽后，碰到一個不對應的標簽時，會自動填補</p>。所以<p>標簽可以單標簽使用，但不推薦。
在HTML5中規定了元素必須始終關閉，也就是標簽必須成對出現。
6. 對于標簽〈input type=*〉，如果希望實現密碼框效果，*值是（ C ）
A. hidden; B.text ; C. password ; D. submit
7. HTML代碼<select name=“name”></select>表示？（ D ）
A. 創建表格 ; <table>
B. 創建一個滾動菜單; <marquee>
C. 設置每個表單項的內容;
D.創建一個下拉菜單
8. BODY元素用于背景顏色的屬性是（ C ）
A. alink ; B. vlink ; C. bgcolor; D. background
9. 在表單中包含性別選項，且默認狀態為“男”被選中，下列正確的是（ A ）
A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>
C.<input type=checkbox name=sex checked>男；
D.nput type=checkbox name=sex enabled>男
性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男
<input type="radio" value="2" name="sex"/>女
角色（下拉框）：<select name="role">
<option value="1" selected="selected">教師</option>
<option value="2">學生</option>
</select>
10. 在CSS中下面哪種方法表示超鏈接文字在鼠標經過時，超鏈接文字無下劃線？（ B ）
A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};
C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }
11. JavaScript代碼： 'abcdefg'.indexOf('D') 結果是（ B ）
A：0 B：-1 C：3 D：4
Js常用方法
1.substr
substr(start,length)表示從start位置開始，截取length長度的字符串。
var src="images/off_1.png";
alert(src.substr(7,3));
彈出值為：off
2.substring
substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。
var src="images/off_1.png";
alert(src.substring(7,10));
彈出值為：off
3.indexOF
indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置（從左向右）。沒有匹配的則返回-1，否則返回首次出現位置的字符串的下標值。
var src="images/off_1.png";
alert(src.indexOf('t'));
alert(src.indexOf('i'));
alert(src.indexOf('g'));
彈出值依次為：-1,0,3
4.lastIndexOf
lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值（與indexOf相反）
var src="images/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
彈出值依次為：6,15
5.split
將一個字符串分割為子字符串，然后將結果作為字符串數組返回。
以空格分割返回一個子字符串返回
var s, ss;
var s="1,2,3,4";
ss=s.split(",");
alert(ss[0]);
alert(ss[1]);
12. <img src="name">的意思是？（ A ）
A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;
C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊
13. 點擊按鈕，在ID為“Link”的DIV標簽內顯示東軟實訓超鏈接, 下面對該按鈕的onClick事件函數描述正確的是：C
A. Link.innerText='<a ;
B. Link.outerText='<a ;
C. Link.innerHTML='<a ;
D. Link.outerHTML='<a
innerHTML 設置或獲取位于對象起始和結束標簽內的
HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位于對象起始和結束標簽內的文本
outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本
14.(“24.7” + 2.3 ) 的計算結果是（ C ）
A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7
15. （ B ）事件處理程序可用于在用戶單擊按鈕時執行函數
A. onSubmit; B. onClick; C. onChange; D. onExit
屬性當以下情況發生時，出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面
16. 用戶更改表單元素 Select 中的值時，就會調用（ D ）事件處理程序
A. onClick; B. onFocus; C. onMouseOver; D. onChange
17.onMouseUp 事件處理程序表示（ A ）
A. 鼠標被釋放; B. 鼠標按下; C. 鼠標離開某個區域; D. 鼠標單擊
18. 下列哪一項表示的不是按鈕（ C ）
A. type="submit"; B. type="reset"; C. type="image"; D. type="button"
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />
19.下面哪一項是換行符標簽？（ C ）
A. <body>; B. <font>; C. <br>; D. <p>
font規定文本字體、大小和顏色：
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
20. 下列哪一項是在新窗口中打開網頁文檔。（ B ）
A. _self; B. _blank; C. _top; D. _parent
_blank在新窗口中打開被鏈接文檔；
_self是指在本身這個網頁窗口來打開新的網頁鏈接；
_top表示在頂層窗口打開網頁鏈接，即在整個窗口中打開被鏈接文檔；
_parent表示在父窗口打開網頁鏈接；
<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"21. 下面說法錯誤的是( D )
A. CSS樣式表可以將格式和結構分離;
B. CSS樣式表可以控制頁面的布局;
C. CSS樣式表可以使許多網頁同時更新;
D. CSS樣式表不能制作體積更小下載更快的網頁
CSS樣式表能為我們實現些什么樣的功能?
1、你可以將格式和結構分離。
2、你可以以前所未有的能力控制頁面布局。
3、你可以制作體積更小下載更快的網頁。
4、你可以將許多網頁同時更新，比以前更快更容易。
5、瀏覽器將成為你更友好的界面
將格式和結構分離
HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和各要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。 但是網頁設計者要求的更多。所以當 Netscape推出新的可以控制網頁外觀的HTML標簽時，網頁設計者無不歡呼雀躍。 我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格 產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內容迅速加到網頁中變得越來越難。 串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。
以前所未有的能力控制頁面的布局
<FONT SIZE>能使我們調整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現在，樣式表使這一切都成為可能。
可以制作出體積更小下載更快的網頁還有更好的消息：
樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減 少表格標簽及其它加大HTML體積的代碼， 減少圖象用量從而減少文件尺寸。
可以更快更容易地維護及更新大量的網頁
沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網頁。即便站點用數據庫提供服務，我仍然需要更新所有的模板， 而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結構分離。 利于樣式表，我可以將站點上所有的網 頁都指向單一的一個CSS文件，我只要 修改CSS文件中某一行，那么整個站點 都會隨之發生變動。
瀏覽器將成為你更友好的界面
不象其它的的網絡技術，樣式表的代碼 有很好的兼容性，也就是說，如果用戶 丟失了某個插件時不會發生中斷，或者 使用老版本的瀏覽器時代碼不會出現雜 亂無章的情況。 只要是可以識別串接樣式表的瀏覽器就 可以應用它。
22. 要使表格的邊框不顯示，應設置border的值是( B )
A. 1; B. 0; C. 2; D. 3
23. 如果要在表單里創建一個普通文本框，以下寫法中正確的是( A )
A. <INPUT>; B. <INPUT type="password">;
C. <INPUT type="checkbox">; D. <INPUT type="radio">
24. 以下有關按鈕的說法中，錯誤的是( B )
A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;
C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。
<input type="image" src="pic.jpg" onclick="fangfa();"/>
function fangfa(){
document.formname.submit();
document.formname.reset();
}
.引用相關頭文件
引入CSS：
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
引入JS：
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
因為jqGrid3.6及以后的版本集成了jQuery UI，所以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載，否則會出問題。
2.將jqgrid加入頁面中
根據jqGrid的文檔，要想生成一個jqGrid，最直接的方法就是：
$("#list").jqGrid(options);
其中list是頁面上的一個table：<table id="list"></table>
下面是一個簡單的例子：
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },
{ name: 'Name', index: 'Name', width: 100, align: "center" },
{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }
],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),
rowNum: 5,
altclass: 'altRowsColour',
//width: 'auto',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
})
二、 jqgrid的重要選項
具體的options參考，可以訪問jqGrid文檔關于option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：
2.1 prmNames選項
prmNames是jqGrid的一個重要選項，用于設置jqGrid將要向Server傳遞的參數名稱。其默認值為：
prmNames : {
page:"page", // 表示請求頁碼的參數名稱
rows:"rows", // 表示請求行數的參數名稱
sort: "sidx", // 表示用于排序的列名的參數名稱
order: "sord", // 表示采用的排序方式的參數名稱
search:"_search", // 表示是否是搜索請求的參數名稱
nd:"nd", // 表示已經發送請求的次數的參數名稱
id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱
oper:"oper", // operation參數名稱
editoper:"edit", // 當在edit模式中提交數據時，操作的名稱
addoper:"add", // 當在add模式中提交數據時，操作的名稱
deloper:"del", // 當在delete模式中提交數據時，操作的名稱
subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal
}
2.2 jsonReader選項
jsonReader是jqGrid的一個重要選項，用于設置如何解析從Server端發回來的json數據，如果Server返回的是xml數據，則對應的使用xmlReader來解析。jsonReader的默認值為：
jsonReader : {
root: "rows", // json中代表實際模型數據的入口
page: "page", // json中代表當前頁碼的數據
total: "total", // json中代表頁碼總數的數據
records: "records", // json中代表數據行總數的數據
repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來自于colModel中的name設定。
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
假如有下面一個json字符串：
{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}
其對應的jsonReader為：jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注：cell、id在repeatitems為true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以適用另一種json結構。援引文檔中的例子：
repeatitems為true時：
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
json結構為：
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持對應
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems為false時：
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});
json結構為：
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數據中需要各列的name，但是可以不按列的順序
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要選項
colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這里先只說說最基本的。
三、 注意事項
1. 動態改變Add Form或者Edit Form中的select的內容，如：改變下圖中的Comparator下拉中的內容。
$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},
{
checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,
beforeInitData:function(formid){
initComparator();
},
beforeShowForm: function(formid){
$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});
$('#tr_Name', formid).hide();
}
}，//edit
{},//add
{}//del
）
beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開，2項之間用分號隔開。注意：把recreateForm設為true，否則'setColProp'只在第一次調用時有效。
2. var rowNum=parseInt($(this).getGridParam("records"), 10); 得到數據條數。
3. jQuery("#list_d").clearGridData();清空數據。
4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete：中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 對于像1中的可編輯的字段，可以設定rule，參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 修改Option，以URL為例
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
