来谈谈：网页制造基本技能表单按钮的利用

只看该作者 · 发表于 2015-1-16 07:39:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
　关于一个交互式表单，按钮是必不成少的。按钮一样平常分为两类，一类自己就具有特定的功效，叫做特别按钮，如Submit（提交按钮）――用于传输用户所填写的信息至服务器、Reset（回复按钮）――扫除所填写的信息以利从头填写；另外一类自己不具特别功效的，叫作一般按钮。特别按钮只能用于表单才干发扬特别的功效。而一般按钮除可在表单中使用外，在网页的别的中央利用也很便利。　　1、制造惯例按钮

登录/注册后可看大图

　　制造按钮十分复杂，在<input>标志中把type参数设置为：type="submit"就取得一个提交按钮，如本例的“提交”按钮；在<input>标志中把type参数设置为：type="reset"就取得一个回复按钮，如本例的“重写”按钮；在<input>标志中把type参数设置为：type="button"就取得一个一般按钮。本例的按钮源代码以下：
<inputtype="submit"name="Submit"value="提交">
<inputtype="reset"name="Reset"value="重写">
<inputtype="button"name="butto11"value="点我尝尝"onclick="alert(感谢您点击！)">
　　按钮的制虽复杂，但在制造按钮时要注重两点：
　　1、关于特别按钮，一样平常不需另加举措，当按下按钮时就有举措产生；而关于一般按钮，必需加上指定的举措并用相就的事务来触发，才会在事务产生时引发举措，不然按下一般按钮，甚么也不产生。在本例的一般按钮上加了一个弹出提醒窗口的举措：alert(感谢您点击！)，并用onclick事务来触发，以是当你在谁人按钮上点击时会弹出一个窗口，并显现“感谢您点击！”这句话。
　　2、按钮上的笔墨是经由过程设置value参数来完成的，其默许值是英文名。
　　2、改动按钮的表面
　　HTML对文本供应了丰厚的色彩设置，惟独对表单按钮默许的则是Windows体系的色彩，显得有点古板，并且也没有供应按钮的色彩设置参数，因而，要改动表单按钮的表面，只能借助于CSS了。请看上面的示例：
　　

登录/注册后可看大图

　　你看！这个按钮是否是变了样，奇怪多了吧？我们来看看它的源代码作了那些改动。按钮源代码：
<inputtype="submit"name="Submit"value="提交"style="font-size:12px;background:#CCCCFF;border-width:thinthinthinthin;border-color:#CCCCFF#CCCCCC#CCCCCC#CCCCFF">
　　从源代码中能够看出，按钮的基础参数设置没变，只是加了一段CSS代码，恰是这段CSS代码改动了按钮的表面作风。在这段CSS代码中，不但从头设置了表单按钮的背景致和字号巨细，并且还对按钮的边框线举行了设置，把上边框线、右边框线设置浅一点的色彩，而把下边框线、右侧框线设置深一点的色彩，其目标是使表单按钮发生平面效果。固然，你能够恣意改动CSS代码中色彩，以使按钮的色彩与地点网页的色彩和谐。
　　若想使表单按钮一改那古板板的老面目面貌，能象网页中别的导航菜单那样具有静态变更款式的效果且仍具其特别地表单按钮功效，使它更具吸惹人的魅力，接纳本文先容的制造办法是个不错的主张。请看上面的示例子。
　1、静态变更文本按钮
　　

登录/注册后可看大图

鼠标不在按钮上
　　

登录/注册后可看大图

鼠标在按钮上
　　你看！这个按钮的效果不错吧？！制造这类效果的思绪是如许的，使用CSS属性能够静态改动的特性，先给按钮界说两种表面款式，再在<input>标志中加上两个事务，即onmu搜索引擎优化ver（鼠标在按钮上）和onmu搜索引擎优化ut（鼠标分开按钮），我们用这两个事务分离挪用分歧的CSS界说的按钮表面款式，从而到达静态变更的效果。为了进步CSS的使用率（如有多个按钮，则可反复利用），把CSS放到<head>与</head>之间，在按钮顶用class挪用CSS格局。本例在<head>与</head>之间的CSS代码是如许的：
<styletype="text/css">

</style>
　　本例按钮的代码以下：
<inputtype="submit"name="Submit"value="提交"onmou搜索引擎优化ver="this.className=style2"onmou搜索引擎优化ut="this.className=style1"class="style1">
　　从下面的代码中可看到，当鼠标移到按钮上，也就是onmu搜索引擎优化ver事务产生，那末按钮将接纳style2甩界说的表面款式；当鼠标移开按钮时，也就是onmu搜索引擎优化ut事务产生，那末按钮就接纳style1所界说的表面款式，从而完成了静态变更的目标。前面谁人class="style1"的感化是当onmou搜索引擎优化ver、onmou搜索引擎优化ut这两个事务都没产生时，接纳style1所界说的表面款式，从而坚持了按钮表面的分歧性。
　　2、静态变更图象按钮

登录/注册后可看大图

鼠标不在按钮上
　　

登录/注册后可看大图

鼠标在按钮上
　　本例与上例在制造思绪和制造办法上均没有多年夜区分，只是接纳了两张图片来作按钮背景，但发生的效果却非统一般。在制造这类效果的按钮时要注重两点：
　　1、作按钮背景的图片最好器具通明背景的gif图片，如许能够做出林林总总外形的按钮，将具有很强的本性；
　　2、背景图片的巨细要与按钮的巨细分歧，不然，因为背景的平展添补，将使按钮改头换面。
　　上面是本例在<head>与</head>之间的CSS代码：
<styletype="text/css">

</style>
　　本例的按钮代码以下：
<inputtype="submit"name="Submit2"value="提交"onmou搜索引擎优化ver="this.className=style4"onmou搜索引擎优化ut="this.className=style3"class="style3">
　　从按钮代码可看出它与例一的按钮代码完整不异，但本例的CSS代码与例一有较年夜的区分，这里要注重：url前面的括号中是按钮背景图片的地点，也就是含路径的图片文件名，你在实践制造时要把它改成图片的实践地点。
　　别的再多讲一句，你如果用图形化网页制造工具（如Dreamweaver)，那末但凡用CSS发生的效果，一样平常在编纂窗中是看不到的，如本文的按钮效果，只要在预览时才干看到，在编纂窗口中看到的还是表单默许的那种模样。
</p>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

只看该作者 · 发表于 2015-1-16 20:26:05

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-1-18 23:26:07

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-1-27 22:19:12

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-2-5 15:46:56

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-12 22:04:53

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-3 11:02:34

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-11 10:45:10

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-18 12:47:31

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-26 05:22:29

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：网页制造基本技能表单按钮的利用

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子