搜档网
当前位置:搜档网 › 网页表单提交方式详细汇总

网页表单提交方式详细汇总

网页表单提交方式详细汇总
网页表单提交方式详细汇总

网页表单提交方式详细汇总

用户提交按钮或图像按钮时,就会提交表单。使用input 或button都可以定义提交按钮,只要将其特性的值设置为submit即可,而图像按钮则是通过input的type特性值设置为image来定义的大家先来看看表单提交的几种方式:

1、

2、

提交

3、

说明:用户提交按钮或图像按钮时,就会提交表单。使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。

4、阻止表单提交

只要在表单中存在上面列出的任何一种按钮,那么相应表单控件拥有焦点的情况下,按回车键就可以提交表单。如果表单里没有提交按钮,按回车键不会提交表单。

以这种方式提交表单时,浏览器会在将请求发送给服务器之

前触发submit事件。这样,我们就有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例如,下面代码会阻止表单提交:复制代码代码如下:

var EventUtil = {

addHandler: function (element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent("on" + type, handler);

} else {

element["on" + type] = handler;

}

},

getEvent: function (event) {

return event ? event : window.event;

},

preventDefault: function (event) {

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

}

};

var form = document.getElementById("myForm"); EventUtil.addHandler(form, "submit", function () {

//取得事件对象

event = EventUtil.getEvent(event);

//阻止默认事件

EventUtil.preventDefault(event);

}); 调用preventDefault()方法阻止了表单提交。一般来说,在表单数据无效而不能发送给服务器时,可以使用这一技术。

5、在JavaScript中,以编程方式调用submit()方法也可以提交表单。

这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。来看一个例子:

var form = document.getElementById("myForm");

//提交表单

form.submit();

在以调用submit()方法的形式提交表单时,不会触发submit 事件,因此要记得在调用此方法之前先验证表单数字据。提交表单时可能出现的最大问题,就是重复提交表单。在第

一次提交表单后,如果长时间没有反映,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。结果往往很麻烦(因为服务器要处理重复请求),或者造成错误(如果是下了订单,那么可能会多定好几份)。

解决这一问题的办法有两个:

在第一次提交表单后就禁用提交按钮;

利用onsubmit事件处理程序取消后续的表单提交操作。

接下来将详细介绍通过form提交的几种方法

方法一:利用form的onsubmit()函数(经常使用),代码如下:复制代码代码如下:

function validateForm(){

if(document.reply.title.value == ""){ //通过form名来获取form alert("please input the title!");

document.reply.title.focus();

return false;

}

if(document.forms[0].cont.value == ""){ //通过forms数组获取form

alert("please input the content!");

document.reply.cont.focus();

return false;

}

return true;

}

注意:

1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回

2.validateForm一定要返回一个boolean类型的返回值

3.提交按钮要写成submit类型的方法二:利用input类型为submit组件的onclick()函数

将上面form标签中的onsubmit="return validateForm()"属性,去掉。

为“提交”按钮添加onclick事件,如下:

方法三:利用button组件的onclick()函数,手动提交,代码如下:复制代码代码如下:

function modifyItem() {

if (trim(document.getElementById("itemName").value) == "") { alert("物料名称不能为空!");

document.getElementById("itemName").focus();

return;

}

with (document.getElementById("itemForm")) {

method = "post";

action =

"item.do?command=modify&pageNo=${itemForm.pageNo}"; submit();

}

}

//返回

function goBack() {

window.self.location =

"item.do?command=list&pageNo=${itemForm.pageNo}";

}

注意:

1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。以上代码具体实现可以参考如下:https://www.sodocs.net/doc/b014065570.html,/zhshlist.aspx

https://www.sodocs.net/doc/b014065570.html,/huixiaolist.aspx

https://www.sodocs.net/doc/b014065570.html,/daililist.aspx

菜鸟小结:

对form中的组件验证时,前两个使用的是name属性,包括form自身的。

如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。

《信息技术》教案-网页表单

备课时间:2004/03/22 课题:第五章网页制作第六节网页表单教学目的:①表单的建立 ②表单资料的收集和处理 ③搜索表单的建立 教学重点:①表单资料的收集和处理 ②搜索表单的建立 教学方法: 边讲解边演示 教学过程: 〈引言〉:直接进行操作演示 〈教授新课〉:网页表单 [板书] 第六节网页表单 一、表单的建立 在FrontPage 2000中,单击“插入(I )”菜单中的“表单(M)”命令, 其下拉菜单中列出了所有的字段,单击其中的一种,即可插入相应的字段。 [例5-6-1] 建立如图5-25所示的表单网页,取名为guestbook.htm。 图5-25 操作步骤: (1)单击“新建”按钮,建立新页面,首先创建一个2×1表格,并在表格的第一行插入标题动画(look.gif、liuyan.gif)。 (2)右击表格的第二行,在弹出的快捷菜单中单击“拆分单元格…”,打开“拆分单元格”对话框,选择“拆分为列”,并输入列数:3,将该单元格拆分分三列,分别定义两侧单元格的背景色为浅紫色。 1

(3)将插入点移到中间的单元格后,依次单击“插入(I)”菜单中的“表单(M)”“单行文本框(T)”命令,页面上出现一个单行文本框和两个按钮,分别是“提交”和“复位”按钮,将插入点移到文本框左侧,接着输入“姓名:”,然后将插入点移到文本框右侧。 (4)输入“年龄:”,然后依次单击“插入(I)”菜单中的“表单(M)”“单行文本框(T)”命令,产生第二个单行文本框,按回车键。 (5)输入“性别:”,然后依次单击“插入(I)”菜单中的“表单(M)”“单选按钮(R)”命令,输入“女”。再用同样的方法插入另一个单选按钮,并在其右侧输入“男”,然后,双击各选项按钮,分别设置它们的属性,其中“组名称”必须相同,表示这两个按钮在同一个单选按钮组,最后按回车键。 (6)输入“爱好:”,然后依次单击“插入(I)”菜单中的“表单(M)”“复选框(C)”命令,输入“音乐”。用同样方法制成其余复选框。 (7)输入“职业:”,依次单击“插入(I)”菜单中的“表单(M)”“下拉菜单(D)”命令。 (8)双击下拉式菜单,出现如图5-26所示的“下拉菜单属性”对话框。 (9)单击“添加”按钮,添加一个“学生”菜单项,重复操作,添加其余菜单后,再单击“确定”按钮,并按回车键。 (10)输入“您对本网页的建议:”后,按回车键。 (11)依次单击“插入(I)”菜单中的“表单(M)”“滚动文本框(S)”命令,在网页编辑区将出现一个滚动文本框,调整文本框的大小,使其大小合适。 (12)保存网页,取名为guestbook.htm。 二、表单资料的收集和处理 表单的作用在于帮助收集资料,对于访问者来说,填完资料后,单击“提交”按钮,就可以将信息传送到服务器上。对于网站管理员来说,更重要的是对这些资料进行处理,将它们变成所需要的资料形式,比如在上例中,当访问者填写完表单并发送回来后,网站管理员应该对这些资料进行分析,对某些读者提出的问题进行个别解答,并及时改进网站。为了方便资料的整理,在制作表单时就应该有意识地将表单的结果输出到某一个HTML文件或纯文本文件中以文件的形式存放。将鼠标指针放置在表单域所在的虚线范围内右击,在弹出的快捷菜单中单击“表单属性”,打开“表单属性”对话框,如图5-27所示。 在默认情况下,表单的结果会发送到当前网站中,以form_result.txt为文件名存储起来。也可以修改文件名和文件的路径,或者以电子邮件的形式发送到指定的信箱中。当然,这些信息只有管理员才能看到,为了让访问者能够看到自己和别人的留言,以便彼此交流,还可以直接将表单的处理结果返回到指定的网页中。 2

表单_基础知识

表单 表单form是Internet和服务器之间进行信息交流的一种重要工具。包括按钮、文本框、单选按钮、复选按钮等,它们被称之为表单对象。表单的使用包括两部分:一是用户界面,提供用户输入数据的元件;另一部分是处理程序,可以是客户端程序而在浏览器执行,也可以是服务器程序,处理用户提交的数据,返回结果。 一.可插入的表单对象 Dreamweaver中,在“插入”面板中,有一个“表单”分类,选择该分类,可插入的表单对象快捷按钮就会出现。如下图: 可插入的对象,从左至右,包括: ?表单 ?文本字段 ?隐藏域 ?文本区域 ?复选框 ?单选按钮 ?单选按钮组 ?列表/菜单 ?跳转菜单 ?图像域 ?文件域 ?按钮 1.插入表单域 要在网页中插入表单对象,首先应该插入一个表单域,否则服务器将无法处理用户填写的信息。操作步骤如下: 步骤1:“插入”面板中,选择“表单”分类,单击左边第1个“表单”按钮,随即插入到网页中一个表单域,表单域在设计视图中显示为一个红色虚线框的范围。如图所示: 如果没有红色虚线框,执行菜单栏“查看/可视化助理/不可见元素”命令即可。 步骤2:设置表单域属性。使用鼠标单击虚线的边框,此时虚线框内出现黑色区域,表示该表单域被选中,属性面板如下: 表单域属性面板包括:

?表单名称:标识表单的唯一名称。 ?动作:指定处理该表单的动态页或脚本的路径。可以键入完整的路径,也可以单击“浏览文件”按钮指定到同一站点中包含该脚本或应用程序页的相应文件夹。如果没有相关程序支持的话,也可以使用E-mail的方式来传输表单信息,这种方式在动作文本框中键入:“mailto:电子邮件地址”。表示提交的信息将会发送到作者的邮箱中。比如 ?方法:用于选择表单数据传输到服务器的方法。可选择速度快但携带数据量小的GET方法,或者数据量大的POST方法。一般使用POST方法。 ?目标:指定打开窗口的方式。 ?MIME类型:指定对提交给服务器进行处理的数据使用MIME编码类型。 ?类:定义好的CSS样式。 2.插入文本域 当浏览者浏览网页需要输入文字资料时,像姓名、地址、E-mail或稍长一些的个人介绍等栏目,在制作时就可以使用文本域,它在浏览器中将显示为一个文本框。 具体操作如下: 步骤1:插入文本域前请确定首先插入了一个表单域,并且将光标放入表单域中。如果在表单域外插入文本域,Dreamweaver会弹出提示框,是否创建一个表单域。 步骤2:在“插入”面板中,选择“表单”分类,单击左边第2个“文本字段”按钮,随即插入到网页中一个文本域。可以在文本域前加入说明的文字,如“用户名”,告知浏览者需要填入的内容的类型。 步骤3:单击文本域,对文本域的属性面板进行设置: 文本域:输入文本字段的名称,该名称在该网页中是唯一的名称。名称不能包含空格或 特殊字符,可以使用字母数字字符和下划线的任意组合。 字符宽度:设置文本域中最多可显示的字符数。 最多字符数:设置单行文本域中所能输入的最多字符数。如果是空白,则可以输入任意 数量的文本。(最好对不同内容的文本域进行不同数量的限制,防止个别浏览者恶意输入大量数据,维护系统的稳定性。) 初始值:输入文本域中默认状态时显示的内容,当浏览者键入资料时初始文本被替代。 类型:显示了当前文本域的类型,包括“单行”、“多行”和“密码”。其中, ---单行是默认选项,只显示一行文本。 ---多行表示插入的文本可显示多行(如图)。

个人网页制作全过程

个人网页制作全过程 [日期:10-12] 来源:作者:[字体:大中小] 如何制作个人网页全过程,送给刚学做网页的朋友们 第一讲网页的基本知识和FrontPage入门 一、网页的基本知识 1、网站与网页 我们在因特网上浏览时,看到的每一个页面,称为网页,很多网页组成一个网站。一个网站的第一个 网页称为主页。主页是所有网页的索引页,通过单击主页上的超链接,可以打开其他的网页。正是由于主 页在网站中的特殊作用,人们也常常用主页指代所有的网页,将个人网站称为“个人主页”,将建立个人网 站称为“网页制作”。 2、怎么建立个人网站? 要建立一个个人网站,必须经过网页制作、网站(页)发布和网站维护三个阶段 1)网页制作 一个网站和一本杂志一样,都是展示信息的载体,只有能提供他人需要信息(内容)的网站才能吸引 他人访问。这些都要靠制作有内容的网页来完成。确定网站主题和后,制作网页是建立个人网站的首要工作。 每个网页基本上都是一个HTML(Hyper Text Markup Language,即超文本标识语言)文件,所以网页文件的扩展名一般是.HTM或.HTML。主页文件的文件名字index.htm或index.html。 一般在电脑上写文章使用Word、Wps等文字处理软件,而制作网页则可使用Frontpage等网页制 作工具。 2)网页发布 做好的网页必须发布到因特网上,才能被大家看到。所谓发布到因特网上实际上就是将网页文件放到 始终与因特网联机的计算机上,这种计算机被称为“服务器”。实际上家里的PC机安装相应的服务器软件 且有固定的IP地址也可以做服务器,但一般都借用单位网站的服务器或租用一些空间提供商的服务器空间。这就和你要开商店必须租用一个场地一样。 3)网站维护 网页发布后就可供大家访问了,不管在什么地方,只要是与和因特网相连的计算机都可以访问到你的 网页。但这没有万事大吉。就和报纸、杂志一样,总是老内容,也就没人来访问了。需要经常更新,补充 新内容。另外网页上的错误也需要及时改正。实际上网站维护是网站建设的主要工作量。 2、什么软件可以做网页? 假如,你熟悉文字处理的相关软件,你不用专用软件,也可以作出网页来。比如,用Word,用Wps,甚至用你计算机附件自带的记事本也行。不过用Word做出来的网页体积太大,用记事本做网页则要会用一些HTML语言,而用HTML来制作网页是一件非常麻烦的事。FrontPage等网页制作工具则使我们可 以不必和这些难记、难懂的HTML代码打交道就作出较好的网页来。 初学的人,用微软公司的frontpage比较好,它的优点是易学易懂,上手快。FrontPage是微软公 司Office系列办公软件中的一个,它很好地实现了主页制作者与HTML的分离。就像在Word中编辑文 本一样,我们只需要在编辑器中输入文本或图片,并设置好格式,很快就可以作出一个简单的网页了。 除了Frontpage以外,还有许多制作网页的软件,如Hotdog等,其中最著名的是Macromedia公司的“网页三剑客”即Dreamweaver(网页制作工具)、Flash(动画制作工具)和Fireworks(图像编 辑工具)。 假如,你有了一定基础,还是用“网页三剑客”好。它们是专用的网页制作软件,用它们制作的网页, 体积小,占用资源少,兼容性好。 所以本讲座也从FrontPage入手学习网页制作。大家先学好FrontPage,打好基础,如果将来准备

HTML网页设计(表单元素)

HTML网页设计(表单元素) 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在

标签在。一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内) Form标签 设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在标签和
结束标签之间。

2.表单元素 在

标签中,可以包含以下5个标签。 Input标签 对于大量通常的表单内元素,可以使用标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。当然,根据指定的比哦啊单元素类型,也可以设置一些其

可以使用标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。 范例代码:

密码域 将type属性值设置为password,就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。 范例代码: 文件域(file) 复选框(checked) 单选框(ridio) 普通按钮(button) 设置普通按钮(button)代码: 重置按钮(Reset) Textarea标签 作为表单的一部分,

?name:给定表单名称,表单命名之后就可以用脚本语言(如JavaScript 或VBScript)对它进行控制。 ?action:指定处理表单信息的服务器端应用程序。 ?method:用于指定表单向服务器提交数据的方法,method的值可以为get或是post,默认方式是get。 (1)get方法,使用get方法提交数据,浏览器将把表单中的各个值添加 到action指定的URL后(这两者之间用问号进行分隔)并向服务器发 送get请求,每个值之间用符号“&”链接。 (2)post方法,如果采用post方法,浏览器将首先与action属性中指定 的表单处理程序建立联系,一旦建立连接之后,浏览器就会按分段 传输的方法将数据发送给服务器。 (3)get将表单中的数据按照“变量=值”的形式,添加到action所指向 的URL后面,并且两者使用“?”连接,而各个变量之间使用“&” 连接;post是将表单中的数据放在表单的数据体中,按照变量和值相 对应的方式,传递到action所指向的URL。 (4)get是不安全的,post的所有操作对用户来说都是不可见的。 (5)post可以传输大量的数据,所以在上传文件时只能使用post。 (6)get是表单的默认方法。 2 输入 是个单标记,它必须嵌套在表单标记中使用,用于定义一个用户的输入项。 格式:

网页制作基础教程

网页制作基础教程 一、什么是HTML HTML(超文本标记语言)是网页中使用的语言,他能被网页浏览器(IE或Netscape)解释,从而显示出丰富多彩的信息(图片、文字、声音、影象、动画等)。 制作网页前首先要弄懂什么是HTML。 在IE中点击"查看"→"源文档",就能看到该网页的HTML代码。下面是个网页文档(model.htm)的HTML代码: 这里是标题

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码,命名为test1.htm,存于D盘,然后双击打开看看。 标记一般是成对出现的,#FFFFFF表示使用的颜色是白色。 ...

... ...之间是该网页的标题 charset=gb2312表示语言字符集信息是中文简体,如big5则是中文繁体。 ...之间是网页的正文内容 表示网页的背景色是白色,默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字 ...之间的文字为红色 HTML是一套国际标准,其标记有几百种,您并无需全部了解他们,只要记住其中常用的十几种,就能够做出很漂亮的网页来。 常用的标记举例:

信息技术题库——网页制作(50题)

初中信息技术过关考试题库(“网页制作”部分) 1、在制作网页时,通常用( D )进行页面布局。 A.表单B.图片C.文字D.表格 2、下列各选项中,专门用来制作网页的软件是( C ) A.EXCEL B.Flash MX 2004 C.Microsoft FrontPage D.WORD 3、在网页中,()可以建立超链接。D A、文字 B、图片 C、动画 D、以上都可以 4、FrontPage 的主要功能是( C )。 A. 文字处理 B. 表格处理 C. 网页制作 D. 网络通讯 5、网页背景音乐的格式中,可包括( B ) A..bmp B..mp3. C. .txt D..doc 6、在frontpage2000中,使页面出现水平滚动字幕,可使用( A ) A. 滚动字幕 B.计数器 C.悬停按钮 D.图片 7、网页中可供我们进行选择浏览的叫( D ) A. 文字 B.图片 C.声音 D.超链接 8、在网页中最为常用的两种图像格式是( A )。 A、JPEG和GIF B、GIF和BMP C、JPEG和PSD D、BMP和PSD 9、网页中可以插入( D ) A.图片B.声音C.动画D.以上都可以 10、在网页制作过程中,给页面取名字,后缀名为(B ) A、.doc B、.htm C、.hmt D、.txt 11、文字建立链接后,通常在文件下方会产生( B ) A.波浪线B.下划线C.圆圈D.以上都不正确 12、在网页制作中,对网站内部而言,超级链接的作用是( D) A、把各个网页连起来 B、可以把相关的图片链起来 C、可以使访问页面更快捷 D、以上都是 13、在网页制作中,关于超级链接说法不正确的是(B ) A、可以链网页 B、不可以链邮件地址 C、可以链下载文件 D、可以链音乐文件 14、frontpage是一个制作( c )的软件 A 图 B 动画 C 网页 D 文字 15、在网页中观察超链接存在与否,最直接的方法是(a)。 A.观察文字是否有下划线 B.观察图片是否加框 C.将指针指向文字或图片,观察指针是否变成手形 D.观察文字的颜色 16、在FrontPage 2000中,我们想在浏览器中的不同区域同时显示几个网页,可使用下列(b )方法。 A.表格 B.框架 C.表单 D.单元格 17、在FrontPage2000中,要建立同一个网页内的链接点,让你点选某一链接后,迅速跳到同一网页内的另一个特定位置,应采用(c )链接。 A.单元格 B.表单 C.书签 D.表格 18、使用浏览器访问网站时,第一个被访问的网页称为(D )。 A.网页 B.网站 C.HTML语言 D.主页

怎样制作网页制作网页详细操作步骤

怎样制作网页制作网页详细操作步骤 怎样制作网页制作网页详细操作步骤 制作网页主要有以下一些工具 Frontpage:office自带的一个工具,操作简单,实用,学起来 比较轻松,功能不咋地,我不太喜欢。 Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可 以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具,例如写字本、EditPlus等, 这些工具主要编辑asp等动态网页。 大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。 总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了! 网站设计八步骤 由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一 行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为 什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢 大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵 循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站

那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的 特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要 是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围 内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸 引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站 就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可 以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为 自己制作网页的素材。 三、规划网站 一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座 漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只 有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有 吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。四、选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制 作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民 选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool3d、GifAnimator等;还有网页特效 工具,如有声有色等,网上有许多这方面的软件,你可以根据需要 灵活运用。

制作表单网页

制作表单网页说课稿 尊敬的各位评委、专家: 大家好!今天我说课的内容是《制作表单网页》。 一、说教材 网页设计是我校计算机应用技术专业的一门选修课,使用教材是航空工业出版社的《网页设计案例教程》。今天我说课的内容是第7章表单在网页中的应用,讲述了表单元素在网页中的操作与应用。 表单用来收集用户信息,使网页具有交互功能,因此广泛使用。由于表单元素比较多,用法各不相同,有一定难度。因此,我把课本的知识进行了分解与重组,由易到难,设计成三个任务,各有侧重点。 二、说教学重点与难点 教学重点:1.创建表单。 2.掌握各表单元素 教学难点:熟练应用各表单元素 关键点:表单元素属性的设置 三、说教学目标 (一)知识目标 掌握表单的基本构成要素,了解表单设计及制作流程,理解、掌握并熟练运用表单各知识点。

(二)技能目标 1.根据场合灵活制作表单。 2.培养学生使用Dreamweaver 软件的综合能力,提高应用水平。 (三)情感目标 1. 培养学生的自主学习能力、自我探究能力; 2. 增强学生的审美意识、组织能力和团结协作的精神; 四、说学情 我所教授的对象是大专二年级计算机专业的学生。他们学习能力参差不齐,学习不主动。但他们具备了一定的分析能力和探究意识,同时会带着问题投入到课程学习当中,具有强烈的好奇心和求知欲。 五、说教法 根据对教材、学生情况、教学目标的认真分析,我确定使用以案例教学法、小组合作法、任务驱动法为主并辅以演示、辅导等其他教学方法。 1.任务驱动下的案例教学法:从生活中常见的表单网页例子,比如常用的淘宝注册页面,游戏注册界面等,引入本节课的学习,吸引学生的好奇心。 2.演示法:通过多媒体演示关键的知识点和关键步骤,或使用课件演示。这种方法比较直观,还可活跃课堂气氛。激起学生学习兴趣,

网页制作技术形成性考核作业

网页制作技术形成性考核作业 成绩: 一、填空题 1.Dreamweaver MX有____两__种工作界面。 2.在站点中建立新的网页文件,其默认的文件扩展名为__htm______。 3.打开站点面板时,可执行____窗口______菜单中的“站点”命令。 4.如果不想在段落间留有空行,可以按_shift+Enter_________组合键。 5.为了让浏览者快速了解图像的概况,在Dreamweaver MX提供了设置__________的功能。6.单元格内间距是指单元格内的对象与单元格___边框_______之间的距离。 7.单元格间距是指单元格与___单元格_______之间的距离。 8.为了使所设计的表格在浏览网页时,不显示表格的边框,应把表格的边框宽度设为_____0__。 9.在表格的___单元格_______中可以插入另一个表格,这称为表格的嵌套。 10.表格的嵌套是指在一个表格中插入另一个表格,表格的平铺是指将不同的表格放置在网页的______同一行中______。 11.为了加快下载速度,尽量_不要将______整个网页的内容放在一个大的表格中。12.在_____布局____视图中,可以使用拖动鼠标的方法在页面中绘制布局单元格。13.在_________视图中,可以使用拖动鼠标的方法移动单元格的位置。 14.在Dreamweaver MX中,可以插入文本框的类型有单行文本框、多行文本框和__________。 15.在网页种插入文本框、单选框、多选框或跳转菜单时,要先插入空白的___表单域______。16.在表单中可以插入的按钮包括提交按钮、重置按钮和___________。 17.在包含框架的页面中,每个框架都显示一个________。 18.保存包含框架的页面时,如果页面中包含四个框架,要保存全部页面信息,共需要保存______个文件。每个文件的扩展名都为htm。 19.在保存框架文件时,框架的文件名必须以字母开头且________大小写。 20.浏览器在第一次装载文框架网页时,如果需要指定该框架所显示的网页文件,则要设置该框架的______________属性。 21.如果链接的目标文件在本地站点中,可以使用绝对URL或相对URL,如果要链接站点

教你制作静态网页的方法

教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。

网页制作动态流程简介

实训13 FrontPage网页制作 1.实训目的 掌握FrontPage网页制作的基本方法。 掌握设置网页超链接、滚动字幕、悬停按钮等操作方法。 掌握网页浏览的方法。 2.实训内容 FrontPage的启动与关闭。 制作简单的网页。 对制作的网页进行编辑和修饰,效果如图11-34所示。 图11-34 效果图 3。实训步骤 (1)创建网页 启动FrontPage应用程序,单击“文件”下拉菜单中“新建”命令,弹出“新建”任务窗格,选择“新建网站”选项区的“由一个网页组成的网站…”,弹出“网站模板”对话框,选择“常规”选项卡中的“只有一个网页的网站”模板,如图11-35所示。 单击“确定”。

图11-35 “网站模板”对话框 (2)保存网页 单击“文件”菜单中的“另存为”命令,打开“另存为”对话框。 选择保存位置“我的文档\我的个人网站”,在“文件名”文本框中,输入“index”,在“保存类型”下拉列表框中,选择“网页”选项。单击“更改标题”按钮,将网页标题改为“我的个人主页”,单击“保存”按钮。 (3)插入滚动字幕 将光标定位于网页第一行位置。 单击“插入”菜单下的“Web组件”命令,弹出“插入Web组件”对话框,选择“动态效果”中的“字幕”,单击完成。 弹出“字幕属性”对话框,在“文本”框中输入“欢迎光临我的个人网站”,单击“样式”按钮,弹出“修改样式”对话框,再单击“格式”按钮,选择“字体”选项。 弹出“字体”对话框,设置字体为隶书、加粗、36pt、紫红色,然后按“确定”返回。 单击“预览”视图,可观看字幕效果。 (4)插入水平线 回到“设计”视图后,换行将鼠标指针置于第二行位置。 单击“插入”菜单下的“水平线”命令。 双击水平线,打开“水平线属性”对话框。 设置宽度为100%,高度为5像素,水平居中对齐方式,颜色为紫色。 (5)插入表格 将鼠标指针置于水平线的下一行,单击“表格”菜单中的“插入”“表格”命令,弹出“插入表格对话框。 在“大小”选项组中,设置表格的行数为4,列数为3。 在“布局”选项组中,设置表格的对齐方式为“居中”,边框粗细为1,单元格间距为1,指定宽度为650像素,指定高度为500像素。 单击“确定”按钮,一个表格便插入了网页中。 选中表格第一列,单击右键,弹出一快捷菜单,选择“合并单元格”命令。 在合并后的单元格中单击右键,再弹出的“快捷菜单”中选择“单元格属性”,在弹出的“单元格属性”对话框中作如下设置:对齐方式为居中,指定宽度为100像素,指定高度为550像素,行跨距为4,列跨距为1,背景颜色为粉色。

网页制作步骤

网页制作步骤 一、确定网站主题网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。二搜集材料明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。三、规划网站一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。四、选择合适的制作工具尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。五、制作网页材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。六、上传测试页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP 功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。七、推广宣传网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。八、维护更新网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者 在做我的个人网页这段时间里,我学到了好多东西,对网页有了一定的了解,当初上网,打开网页浏览时,从不去想这网页是怎么做的,我只是去看它的内容,网页做的好不好很少去问,只要有自己要的内容就行了。然而现在不一样了,现在自己要去学着做自己的网页了,这时候我才意识到,去看别人做的网页,不能光看内容了,它的布局,它的设计,对我的网页是有帮助的,我一定要去看,学习别人的特长。从此,不管上什么样的网站,看什么样的网页,我都不光去看它们的内容了,我还会去看它们的布局,看它们的代码,有的布局如此巧妙让我难以想像,这里面蕴涵了太多太多的技巧。好的网页我都迫不及待的把它们下载下来,以便日后为我所用。 制作过程中,有时碰到一个自己不怎么会的技巧,真的很着急,热锅上的蚂蚁一样,但蚂蚁

网页表单设计实例技巧五则

1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到<textarea> 中,一切就会变得简单多了,如:以下为引用的内容: <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea> 类似的,可以加入代码到<input>。 2、表单输入单元点击删除:本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如: 以下为引用的内容: <input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''"> 点击输入单元后,提示信息会删除,是不是很方便。 3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如: 以下为引用的内容: <input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8"> 其中"style=***"为左右上下和背景色设置,适用于其它单元。 4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如: 以下为引用的内容: <input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px > 其中"style=***"为字体和字大小设置。 5、修改表单属性为弹出窗口:大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如: 以下为引用的内容: <form method=POST action=url target=_blank> 其中"target=_blank"为控制在弹出窗口打开。

表单multipart(form-data)

Java中,当表单含有文件上传时,提交数据的如何读取 当提交表单里包含文件上传的时候,即Form的enctype属性值为multipart/form-data时,后台是无法像普通表单那样通过request.getParameter来获取用户提交的数据的。(说实话,我经常因为忘记这个问题而浪费好多调查时间。) 1.// 判断enctype属性是否为multipart/form-data 2.boolean isMultipart = ServletFileUpload.isMultipartContent(request); 3. 4.// Create a factory for disk-based file items 5.DiskFileItemFactory factory = new DiskFileItemFactory();

7.// 当上传文件太大时,因为虚拟机能使用的内存是有限的,所以此时要通过临时文件来实现 上传文件的保存 8.// 此方法是设置是否使用临时文件的临界值(单位:字节) 9.factory.setSizeThreshold(yourMaxMemorySize); 10. 11.// 与上一个结合使用,设置临时文件的路径(绝对路径) 12.factory.setRepository(yourTempDirectory); 13. 14.// Create a new file upload handler 15.ServletFileUpload upload = new ServletFileUpload(factory); 16. 17.// 设置上传内容的大小限制(单位:字节) 18.upload.setSizeMax(yourMaxRequestSize); 19. 20.// Parse the request 21.List items = upload.parseRequest(request); 22. 23.Iterator iter = items.iterator(); 24.while (iter.hasNext()) { 25.FileItem item = (FileItem) iter.next(); 26. 27.if (item.isFormField()) { 28.//如果是普通表单字段 29.String name = item.getFieldName(); 30.String value = item.getString(); 31.... 32.} else { 33.//如果是文件字段 34.String fieldName = item.getFieldName(); 35.String fileName = item.getName(); 36.String contentType = item.getContentType(); 37.boolean isInMemory = item.isInMemory(); 38.long sizeInBytes = item.getSize(); 39....

相关主题