用DW制作网页时怎样在页面中加入搜索栏

用DW制作网页时怎样在页面中加入搜索栏,第1张

1、新建一个asp页面,保存为“sousuojieguo.asp”。

2、打开之前制作过的"jiluji.asp“。

3、把鼠标指针放在表格的最左边,按回车键,把鼠标指针往上移,然后点击菜单栏的:插入-->表单-->表单,插入一个表单。

4、在表单里边输入”搜索:“,然后点击菜单栏:插入-->表单-->文本域,插入一个文本框。

5、鼠标点击刚刚插入的文本框,然后在下方把id改成"sousuo"。

6、然后把鼠标放到文本框的后边,插入一个按数腊钮,并把按钮上的显示文字改成"搜索“,切换到刚刚新建的”sousuojiesuo.asp“页面,打开”绑定“面板,点击”+“,选择”记录集(查询)“。

7、在d出的界面如图所示设置:筛选设置成:xingming-包含-表单变量-sousuo。

8、把鼠标放到搜索结斗裤果页面上输入“搜索结果:“,然后回车,在点击菜单栏:插入-->表格。插入一个2行4列的表格。

9、 然后在表格第一行一次输入如图所示文字。

10、然后把绑定面板中刚刚新建的记录集依次拖入表格第二行对应的位置。

11、把鼠标指针放到第二行的任意位置,然后点击界面下方的<tr>标签,选中第二行。

12、打开”服务器行为“面板,点击”+“,选择”重复区域“。

13、在d出的界面中选择”空毕简所有记录“,然后点击”确定“。

14、切换到”jiluji.asp",把鼠标指针放到搜索框所在表单中,点击界面下方的<form#form1>,选中整个表单。

15、在属性面板中点击动作方框右边的“文件夹”按钮,在d出的界面中选择”sousuojieguo.asp“。选择完成后,下方的方法选择"post"。

16、保存所有文件,然后按F12就可以在浏览器中浏览效果了。

需要用到css+div,创建一个文本域吧,好久没做忘记了,然后创建相应的css样式,设置长宽,再创建一个搜索按钮,这时你做出来的,只是一个普通的文本框,和按钮,你如果想做到图片中的效果,你需要在绝橡链ps里面做好图片,然后切片,把切好的并孙图片放在dw里,再文本框,和搜索按钮的css样式里面设置就可以了,如果你有什么不明白,请留个QQ

如有帮助,望采纳如胡

————平面家族————

<!DOCTYPE html PUBLIC "-//W3C//销胡厅DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"做歼>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>CSS美化的漂亮搜索框</title>

<style type="text/css">

body{

font: normal 100% 'Arial','Helvetica','Verdana',sans-serif

color: #333

}

p {

padding: 12px 0

margin: 0

font-size: .8em

line-height: 1.5

}

form {

margin: 0

}

#search_box {

width: 201px

height: 31px

}

#search_box #s {

float: left

padding: 0

margin: 6px 0 0 6px

border: 0

width: 159px

background: none

font-size: .8em

}

#search_box #go {

float: right

margin: 3px 4px 0 0

}

</style>

<亏隐/head>

<body>

<div id="search_box">

<form id="search_form" method="post" action="#">

<input type="text" id="s" value="Search" class="swap_value" />

<input type="text" width="27" height="24" id="go" alt="Search" title="Search" />

</form>

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11987341.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存