整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
软开发的网页设计工具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 href="http://www.jb-aptech.com.cn">东软实训</a>';
B. Link.outerText='<a href="http://www.jb-ptech.com.cn">东软实训</a>';
C. Link.innerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>';
D. Link.outerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</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 href="http://www.w3school.com.cn/" 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小时内与您取得联系。
