制作交互功能的网页—表单网页的制作
HTML网页设计(表单元素)
HTML网页设计(表单元素) 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在
结束标签之间。2.表单元素 在
格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中 4. 将光标停放到表单域中,选择常用面板上的图12-3 在页面中插入表格和文本 在第2行第1 个单元格中输入文字"用户名:",然后单击表单面板中"文本字段插入文本框. 选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name", 在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数
图12-6 单选按钮属性设置 说明初始状态有两个选择,“已勾选”和“未选取中”。单选按钮是在众多选 16. 按钮,在“省份:”旁边插入“列表 菜单”框,单击属性能面板上的按钮,打开“列表值” 黑龙江等,单击按钮可增加项目,单击按钮可删除项目,右边的两个按钮,可用来调整项目的上下位置。如
图12-7 “单选按钮组”对话框图12-8 “列表/菜单”列表值设置 18. 单击“确定”按钮,返回属性面板,在“初始化时选取定”文本框中出现了刚才设置的项目标签。然后在“列表/菜单”下面的文本框中输入“ 图12-9 “列表/菜单”属性设置 图12-10 文件域属性设置 文件域是用来选择本地硬盘上文件夹目录地址,其后面跟着按
着单击表单面板上的“复选框”按钮,分别在各选取项前面插入复选取框。 钮,使表格中的内容都靠左对齐。如图 行,然后单击表单面板上的“文本区域”按钮,插入文本域。 图12-11 选中表格单击“左对齐”按钮 26. 选中文本域,打开属性面板,在“文本域”下输入名称content,在“字符宽度”文本框中输入40,在“行数”中输入5,在“类型”选项中选择“多行”单选取按钮。参数设置如图12-12所示。 图12-12 “文本域”属性设置
信息技术题库——网页制作(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.主页
制作表单网页
制作表单网页说课稿 尊敬的各位评委、专家: 大家好!今天我说课的内容是《制作表单网页》。 一、说教材 网页设计是我校计算机应用技术专业的一门选修课,使用教材是航空工业出版社的《网页设计案例教程》。今天我说课的内容是第7章表单在网页中的应用,讲述了表单元素在网页中的操作与应用。 表单用来收集用户信息,使网页具有交互功能,因此广泛使用。由于表单元素比较多,用法各不相同,有一定难度。因此,我把课本的知识进行了分解与重组,由易到难,设计成三个任务,各有侧重点。 二、说教学重点与难点 教学重点:1.创建表单。 2.掌握各表单元素 教学难点:熟练应用各表单元素 关键点:表单元素属性的设置 三、说教学目标 (一)知识目标 掌握表单的基本构成要素,了解表单设计及制作流程,理解、掌握并熟练运用表单各知识点。
(二)技能目标 1.根据场合灵活制作表单。 2.培养学生使用Dreamweaver 软件的综合能力,提高应用水平。 (三)情感目标 1. 培养学生的自主学习能力、自我探究能力; 2. 增强学生的审美意识、组织能力和团结协作的精神; 四、说学情 我所教授的对象是大专二年级计算机专业的学生。他们学习能力参差不齐,学习不主动。但他们具备了一定的分析能力和探究意识,同时会带着问题投入到课程学习当中,具有强烈的好奇心和求知欲。 五、说教法 根据对教材、学生情况、教学目标的认真分析,我确定使用以案例教学法、小组合作法、任务驱动法为主并辅以演示、辅导等其他教学方法。 1.任务驱动下的案例教学法:从生活中常见的表单网页例子,比如常用的淘宝注册页面,游戏注册界面等,引入本节课的学习,吸引学生的好奇心。 2.演示法:通过多媒体演示关键的知识点和关键步骤,或使用课件演示。这种方法比较直观,还可活跃课堂气氛。激起学生学习兴趣,
制作网站——表格布局网页
制作网站——表格布局网页(第3-4课时) 教学目标: 1.知识与技能 (1)了解网页设计中表格的作用。 (2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能 够在单元格中正确插入文字和图片。 (3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。 2.过程与方法 (1)掌握软件学习中的对比学习法,培养学生迁移学习的能力。 (2)通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多 样性,培养学生的发散思维能力。 (3)通过自主探究,使学生掌握软件的使用规则,由摸索、探究性学习到形成性学习,培 养学生学会学习,驾御学习的能力。 3.情感态度与价值观 (1)通过对比学习使学生体验软件学习的一般方法及规律,提高学生自主学习信息技术的 能力。 (2)通过运用表格布局网页对象活动(各人根据网站主题,设计网页),进一步掌握各种 不同对象的属性设置方法和规律,体验创造的快乐。 (3)通过“动物——人类的朋友”表格页的设计与制作,再次激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。 教学重点、难点: 1.教学重点: (1)了解表格在网页设计中的重要作用和功能。 (2)掌握插入、编辑表格的方法及表格的属性设置方法。 (3)掌握单元格的修饰与属性设置。 2.教学难点: 表格的嵌套设计在网页设计中的应用。 教学方法: 对比教学法、探究学习法、模仿学习法。 教学准备: 各自制作的站点文件夹,整理、归类相关素材并按要求摆放。 教学过程: 1.复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入,学 生认真回顾,回答教师提问。为本节课教学做一定铺垫。 2.引入 (1)观看两个页面并进行比较:一个使用表格布局,但表格边框隐藏(看不出表格痕迹),其页面工整,文本、图片摆放对称,具有一定规律;另一个页面凌乱,图文混杂,摆放杂乱。你更喜欢怎样的页面布局? 提出问题:有什么办法可以达到第一个页面的效果? (2)观察第三个页面,内容与第一个页面相同,显现页面的表格边框。 学生讨论,交流,回顾Word中学习过的表格,明白表格在FrontPage中的作用。
网页表单设计实例技巧五则
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"为控制在弹出窗口打开。
用表格做网页
用表格做网页,表格在网页制作中有着举足轻重的地位,很多网站的页面都是以表格为框架制作的,这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能,灵活、熟练地使用表格,会使你在网页制作中如虎添翼。 插入第一个表格 我们看一下这个网页,虽然看起来很复杂,但主要是利用表格制作的。去掉文字和图形,可以看到其表格框架为下面这个样子。 下面我们就利用表格制作这个网页。启动Dreamweaver后,自动产生一个空文档。我们先来定义网页尺寸,不同的分辨率所查看的网页最终结果是不一样的,为了照顾更多的上网者,我们设置640×480分辨率(图3),单击状态栏上的窗口尺寸箭头,在弹出的列表中选择“600×300 (640×480),Maximized”,窗口就小了,做出的网页在640×480分辨率下会显示正常,编辑区大小为600×300,我们编辑的网页宽度就定为600,高度可以大些,在浏览器中显示时会有竖直滚动条。设置页面尺寸我们看一下网页的布局,共有三个主要表格,最上面的表格放置logo图标和banner广告条,中间的表格为主要栏目切换条,最下面的表格为网页正文。根据网页布局,我们先来制作最上面的表格。单击“对象面板”中的插入表格图标,弹出“Insert Table”对话框。设置行数(Rows)为1,列数(Columns)为2,表格宽度(Width)为590Pixels,表格线宽度(Border)为0,另两个选项“Cell Padding”表示表格内文本与表格线的距离,“Cell Spacing”表示表格单元格之间的距离,这里我们不做设置,单击“OK”,表格就插进来了。 “插入表格”对话框 将光标定位在表格的第一个单元格内,可以看到状态栏左侧的标签选择器处显示为 “{body}{table}{tr}{td}”,其中table表示表格,tr表示表格中的行,td表示单元格,现在td被加粗显示,说明光标处在单元格内。单击一下{table},标签选择器处显示为“{body}{table}{tr}{td}”(图5),再看编辑区内的表格,表格周围为一圈黑线,表示表格被选中了,四周还有几个黑色的小方块,是表格拖放手柄,可以用来改变表格的大小。用标签选择器选择表格选中表格后,我们查看一下属性面板,可以看到刚刚设置的一些表格属性,行数(Rows)为1,列数(Cols)为2,表格宽度(W)为590Pixels。以后要改变表格的属性,就可以在属性面板中进行了。 表格的属性面板 按Ctrl+S,将此文件保存在D盘myweb文件夹下。 接下来我们在表格中插入图形。在第一个单元格内单击,然后按下Ctrl+Alt+I键,弹出插入图片对话框,选择事先做好的logo图片,单击“Select”,图片就插到第一个单元格中了。
网页表单实验报告
信息科学与技术学院实验报告 一、实验综述 1、实验目的及要求 1.掌握表单技术基础,学会插入文本域。 2.掌握表单及表单元素的创建与修改。 3.通过表单技术,了解网页的制作。 2、实验仪器、设备或软件 PHOTOSHOP软件 Dreamweaver CS4软件 二、实验过程(实验步骤、数据记录) 1.将光标置于表单内,然后在【插入】面板中单击【文本字段】按钮,打开【输入标签辅助功能属性】对话框,设置文本字段的属性,在【输入标签辅助功能属性】对话框中,用户可以为文本字段的表单对象添加标签文本,同时设置标签文本显示的位置。在完成【输入标签辅助功能属性】的设置后,单击【确定】按钮,插入文本字段。然后,即可在【属性】检查器中定义文本字段的各种属性。 2.创建文本区域有两种方法。一种是先为表单插入一个文本字段的对象,然后在【属性】检查器中设置【类型】为多行;除此之外,也可以单击【插入】面板中的【文本区域】按钮,在设置【输入标签辅助功能属性】对话框中的各种属性后,同样也可以插入一个文本区域对象。 3.先将光标置于表单的容器中,在【插入】面板中单击【字段集】按钮,在弹出的字段集对话框中输入字段集的名称,然后单击【确定按钮,将字段集添加到网页文档中。然后,将光标置于字段集之后,在【插入】面板中单击【复选框】按钮,在弹出的【输入标签辅助功能属性】对话框中设置复选框的属性后,即可将其添加到网页中。
日志页面 第一篇日志
第二篇日志 三、结论 1、实验结果 本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果,间距的作用主要在于表现这种颜色差异。要充分地理解这两种单位表示的意义才能正确地进行选择,否则就不能达到自己想要的效果,设置错误就会严重影响实验效果。 2、分析讨论 实验结束后我们可以看到页面的背景变成了我们插入的图像,并且要鼠标经过的时候会变成另一个图像,这就是鼠标经过图像的效果。 在插入复选框时应注意,复选框的名称只允许使用字母下划线和数字。其中,只允许以字母和下划线作为开头。 四、指导教师评语及成绩: 评语:
网页设计好看的表单代码
1、只有下划线的文本框: 2、软件序列号式的输入框: ————— 3、软件序列号式的输入框(完整版): ————— 4、输入框景背景透明: 5、鼠标划过输入框,输入框背景色变色: 6、输入字时输入框边框闪烁(边框为小方型):