网页表单的编辑
FrontPage2003网页制作
返回
任务二：网页布局及发布、表单的创建 创建表格网页
创建方法如下：
使用菜单命令“插入”——“表格”，弹出如图8—14所 示，可以对插入的表格进行精确的设置，包括行和列的数目、 边框尺寸以及单元格宽度等。王君根据实际情况，选择了大 小为4行1列，和背景颜色为水绿色的的表格。然后在插入的 表格中输入文字，并最后在表格属性中调整表格，完成后的 表格页面如图8—15所示。
网页制作软件
FrontPage 2003
任务一 制作简单网页
任务二：网页布局及发布、表 单的创建
任务一 制作简单网页
任务引入
我们很多人都喜欢上网冲浪，甚至于梦想着 有一天自己也能拥有一个个人网站，可是， 怎样制作网站呢？我们可能还从未曾真正的 知道,而FrontPage就可以帮助我们完成我们 的小小愿望。
返回
任务一 制作简单网页
预览和保存网页： 切换到预览视图可以 查看网页的效果。制 作完成后，保存网页 为“历届奥运吉祥物 .htm"，注意设置合 适的网页标题。保存 后，在浏览器中打开 并浏览该网页。
返回
任务一 制作简单网页
在窗口左侧的文件夹列表中，双击网页文件“index.htm”，打开并 编辑该网页文件。输入标题“历届奥运会吉祥物”，利用“格式” 工具栏中的“样式”将其设置为“标题一”，并设“对齐方式”为 “水平居中”。
返回
任务二：网页布局及发布、表单的创建 创建表格网页
图8—14表格属性图
图8—15 表格设计完成图
返回
任务二：网页布局及发布、表单的创建 创建表格网页
创建表格还有以下2种方法： （1）可以使用“常用”工具栏中的“插入表格”按钮，快 速地插入表格。 （2）从“表格”菜单中选择“手绘表格”命令，手动绘制 表格。
第6章 网页制作软件FrontPage 2003
图6-3 编辑器的四种视图模式(a 设计视图 )
图6-3 编辑器的四种视图模式(b 代码视图)
图6-3 编辑器的四种视图模式(c 拆分视图 )
图6-3 编辑器的四种视图模式(d 预览视图 )
6.1 FrontPage 2003简介
制作网页的一般步骤
单击“文件”菜单下的“新建”命令，建立 一个空白网页。 编辑网页，如同在Word中编辑文字一样对文 字进行编辑、排版等操作。 插入各种网页元素，如：图片、表格、图表、 控件、脚本等。 保存所创建网页。
图6-7 字体的设置
图6-8字符间距的设置
6.3 网页中文本的编辑
6.3.1 设置文本格式
正文部分用同样的方法设置，“字体”选择 “宋体”，“字形”选择“常规”，“大小” 选择“24磅”，“颜色”选择“蓝色”。设置 第一回的标题字体格式，“字体”选择“宋 体”，“字形”选择“加粗”，“大小”选择 “24磅”，“颜色”选择“黑色”，水平居中。 保存网页，字体格式设置完后的效果如图6-9 所示。
图6-14插入图片
图6-15 “图片属性”对话框
图6-16图片调整后的效果
6.4网页的修饰
6.4.3 应用超链接
超链接是FrontPage中很重要的概念，可以说 整个网站中的网页在超链接的作用下才得以有 效的组织起来，浏览者利用超链接才能方便、 快捷地浏览到相关的信息。 1. 在文本中应用超链接 2. 在图片中应用超链接 (1) 直接为图片插入超链接 (2) 通过绘制热点插入超链接
图7-19 框架的使用
6.2 网页的基本操作
6.2.1 网页的创建
创建网页的四种途径： 空白网页 文本文件 根据现有网页 其他网页模板
6.2 网页的基本操作
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
tab用法 -回复
tab用法-回复Tab键是计算机键盘上的一个按键，通常位于键盘底部中间，其图标为两个并排的箭头。
在文本编辑、表单填写和其他一些应用程序中，Tab键通常被用来创建空格缩进、在输入框之间切换以及其他一些特定功能。
在本文中，我们将详细介绍Tab键的用法，以及如何正确地使用它在文本编辑中进行缩进和其他操作。
第一部分：Tab键的基本用法Tab键最常用的功能是在文本编辑中进行缩进。
通过按下Tab键，我们可以在文档中创建一定数量的空格来实现缩进。
这对于编写代码、创建清单和制作报告等任务非常有用。
下面是Tab键在文本编辑中的一些基本用法：1. 插入缩进：在编辑文本时，将光标放置在需要缩进的行的开头位置，然后按下Tab键。
这将在当前行的开头插入一定数量的空格。
按下Tab键多次将在当前行插入更多的空格。
2. 删除缩进：如果想要删除已经插入的缩进，可以将光标放置在缩进行的开头，然后按下Shift + Tab键。
这将删除一定数量的空格，使文本回到左边界。
3. 制表位（Tab stop）：默认情况下，Tab键在文本编辑器中的制表位为每隔8个字符一个。
这意味着按下Tab键时，光标会移动到下一个制表位。
但是，也可以通过修改编辑器设置来更改制表位的间距。
第二部分：Tab键的其他用途除了在文本编辑中进行缩进之外，Tab键还有一些其他用途。
下面是一些常见的例子：1. 表单填写：在网页上填写表单时，可以使用Tab键在输入框之间快速切换。
按下Tab键将使光标跳转到下一个可编辑字段，从而提高输入速度。
2. 菜单导航：在使用某些应用程序时，可以使用Tab键在不同的菜单选项之间进行导航。
按下Tab键可以在不切换鼠标的情况下切换焦点，快速选择需要的选项。
3. 编辑软件配置：在某些软件中，可以使用Tab键在设置菜单中的不同选项之间切换，并进行适当的编辑和修改。
第三部分：使用Tab键的注意事项在使用Tab键时，需要注意以下几点：1. 与空格不同：尽管Tab键在视觉上看起来与空格相同，但它们在功能上是不同的。
Dreamweaver1网页制作
Dreamweaver1⽹页制作1.站点1.1 创建站点点击菜单栏中站点进⾏站点创建，输⼊站点名称，路径1.2 设置图像⽂件夹1.3 站点管理站点的编辑、复制、删除2.页⾯属性栏2.1 外观1.设置页⾯整体的字体、⼤⼩、颜⾊2.背景颜⾊，背景图像，图像是否重复，怎么重复3.页⾯边距2.2 链接1.链接的字体、⼤⼩、颜⾊2.链接颜⾊：链接颜⾊：本⾝颜⾊变换图像链接：⿏标经过链接时的颜⾊ 已访问链接：已访问之后的颜⾊ 活动链接：⿏标点击时的颜⾊2.3标题1.能分为六层标题2.设置标题字体、颜⾊2.4 标题/编码1.⽹页名称2.5 跟踪图像跟踪图像”是Dreamweaver⼀个⾮常有效的功能，它允许⽤户在⽹页中将原来的平⾯设计稿作为辅助的背景。
这么⼀来，⽤户就可以⾮常⽅便地定位⽂字、图像、表格、层等⽹页元素在该页⾯中的位置了。
跟踪图像的具体使⽤是这样的：⾸先使⽤各种绘图软件作出⼀个想象中的⽹页排版格局图，然后将此图保存为⽹络图像格式（包括gif、jpg、jpeg和png）。
⽤Dreamweaver打开你所编辑的⽹页，在菜单中选择“修改>页⾯属性”，然后在弹出的对话框中的“跟踪图像”项中输⼊刚才创建的⽹页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度，OK。
这样你就可以在当前⽹页中⽅便地定位各个⽹页元素的位置了。
使⽤了跟踪图像的⽹页在⽤Dreamweaver编辑时不会再显⽰背景图案，但当使⽤浏览器浏览时正好相反，跟踪图像不见了，所见的就是经过编辑的⽹页（当然能够显⽰背景图案）。
3.制作⽹页基本操作3.1 ⽂本3.11 添加⽂本直接编辑、复制粘贴、其他⽂件导⼊3.12 添加空格1.默认只能添加⼀个空格2.通过插⼊菜单 —— HTML —— 特殊字符 —— 插⼊空格3.Ctrl+shift+空格3.13 添加⽇期插⼊菜单进⾏操作3.14 插⼊⽔平线.通过插⼊菜单 —— HTML —— ⽔平线3.15 添加特殊字符.通过插⼊菜单 —— HTML —— 特殊字符3.16设置⽂本格式字体、⼤⼩、颜⾊3.17 分段与换⾏分段：enter换⾏：shift+enter3.18 设置段落格式1.对齐⽅式：2.列表变编号3.缩进3.2 图像3.21 常⽤图⽚格式1.GIF：特点：图⽚数据量⼩、可带动画信息、可透明背景显⽰，最⾼只⽀持265种颜⾊ ⽤途：⽹站logo、⼴告条、⽹页背景图像2.JPEG：特点：可⾼效的压缩图⽚的数据量、图⽚变⼩却不会丢失颜⾊画质 ⽤途：显⽰照⽚等颜⾊丰富的图像3. PNG：特点：融合了GIF能做透明背景的特点，⼜具有JPEG处理精美图像的特点 ⽤途：绘制⽹页效果图3.22 插⼊图像3.23 设置图像基本属性图像名称、宽、⾼、源⽂件、替代、边框3.24 图⽂混排1.边距2.对齐3.25 编辑图像1.裁剪2.锐化3.对⽐度、亮度4.重新采样5.优化（为图⽚瘦⾝）3.26 ⿏标经过更换图⽚特效插⼊菜单栏完成4.超链接4.1 内部链接——同个⽹站中的其他⽹页4.2 外部链接——不同站点或本站点以外的⽹页1.链接中输⼊链接地址2.⽬标中选择打开位置 _blank ：每点击⼀次链接创建⼀个新的窗⼝ _self ：会在当前窗⼝、框架页⾯中打开 _new ：会在同⼀个刚创建好的窗⼝中打开 _parent ：如果是嵌套框架，会在⽗框架中打开 _top ：会在完整的浏览器窗⼝中打开4.3 链接样式参考2.24.4 锚点链接——到⽹页中某⼀特定位置1.选中要命名的锚点点击锚点，对该锚点命名2.选择链接点，当前页⾯：在链接中输⼊ #锚点名其他⽹页：⽹页地址#锚点名4.5 E-mail电⼦邮件链接选中需要连接部分，点击电⼦邮件链接，输⼊链接地址4.6 下载链接1.当⽂件是exe⽂件、zip、rar类型问件时浏览器⽆法直接打开，便会提⽰下载4.7 空链接1.在链接中输⼊#2.⼀般导航栏中⾸页位置就是⼀个空链接4.8 图像热区链接在图像中绘制⼀块区域，创建链接4.9 图像导航条图像超链接4.10 跳转菜单选中表单中的跳转菜单，进⾏编辑4.11 脚本链接——通过触发脚本命令在链接中输⼊脚本代码1. 添加到收藏夹：javascript:window.external.addFavorite('⽹址','名称')2. 表⽰关闭窗⼝：javascript:window.close()3. 表⽰弹出⼀个提⽰对话框：javascript:alert('hello!')4. 设置为默认主页：（需通过空链接#,触发onClick事件）在链接中输⼊#选中链接点，在代码中#后输⼊onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('⽹址')"4.12 超链接的管理1.连接路径： 绝对路径：链接中使⽤完整URL地址 相对于⽂档的路径：../ 表⽰上⼀层⽂件夹 相对于站点根⽬录的路径：/ 表⽰根⽬录2. ⾃动更新链接：⽂件位置变动，⾃动更新⽹页中链接路径3. 检查连接5.表格5.1插⼊表格，进⾏设置5.2 选定表格、单元格进⾏设置5.3 表格嵌套在单元格中插⼊表格5.4 应⽤表格布局页⾯5.41 类型：1.国⼦型2.拐⾓型3.标题正⽂型4.左右框架型5.上下框架型6.综合框架型7.封⾯型8.flash型9.变化型5.42 页眉通常放置logo，⼴告条5.43 页脚放置版权信息、联系电话、⽹站介绍、备案信息等5.44 导航栏双倍单元格，空⼀格放⼀个信息，设置⾼度，内容位置5.45 信息栏6.框架6.1 框架⼀个框架就是⼀个区域，可以单独打开⼀个HTML⽂档，多个框架就组成了框架集6.2 创建框架选择框架结构，创建框架6.3保存框架有多少个框架就要保存多少次，再加最外层6.4 作⽤1.做⽹页的布局，将⽹页分成不同的部分2.简化⽹页的编写：⽹页之间相同的内容，只需要编写⼀次3.加快⽹页的浏览：每次⽹页只需要更新变化的那个框架的内容6.5设置框架集和框架属性⿏标单击框架边框，对框架进⾏设置6.6⾃定义框架1.拖动编辑窗⼝的边框：⿏标位于编辑窗⼝的边框，对边框进⾏拖动，创建新的框架2.按住 alt 键时拖动7.多媒体元素7.1多媒体元素flash多媒体元素⾳频多媒体元素视频多媒体元素7.2 插⼊flash多媒体元素7.21 flash动画插⼊flash动画⽂件，扩展名为 .swf7.22 插⼊flash按钮Dreamweaver⾃⾝带有⼀些flash按钮，也可⾃⼰做，⽂件扩展名为 .swf7.23插⼊flash⽂本7.24插⼊图像查看器7.25插⼊flash paper7.26插⼊flash视频7.3 插⼊⾳频多媒体元素8.AP DIV元素8.1. APAP：绝对定位元素，称为层，定位灵活8.2 创建AP DIV1.点击布局中的绘制层，直接在页⾯中绘制2.按住绘制层，拖动⾄页⾯中，这样的层⼤⼩⼀定，颜⾊⼀定，可设置8.3 编辑AP DIV点击层左上⾓，在属性栏中设置8.4 层的可见性设置在窗⼝菜单中打开层，即可对层可见性进⾏设置8.5 层的嵌套将光标置于层中，进⾏绘制8.6 与表格的转换下修改菜单中，选择转换，将层转换为表格，或表格转换为层9.⾏为特效9.1.添加在窗⼝菜单中（或 shift+F4）打开⾏为，选择所要添加⾏为的部分，进⾏添加，添加后选择事件启动⾏为步骤：选择对象、添加动作、调整事件9.2 事件1.常见事件OnMouseOver ：⿏标经过OnMouseOut ：⿏标移开OnLoad ：页⾯打开OnUnLoad ：页⾯关闭其他：onClick ：单击onDbclick ：双击onKeyDown ：当按下任意键的同时产⽣。
0702【任务7-2】创建用户注册的表单网页0702.html
9
《网页设计与制作任务驱动教程（第3版）》
在网页文档0702.html中插入表单及表单控件，添 加必要的HTML标签，并设置表单和表单控件的属性， 完整的HTML代码如表7-4所示。
序号 HTML代码 01 <section class="ec-s-reg"> 02 <h2>用户注册</h2> 03 <div class="w-m"> 04 <form id="regForm" name="regForm" onsubmit="return Validator.Validate(this,2)" 05 action="" method="post" class="form-m"> 06 <ul> 07 <li> 08 <label> </label> 09 <i class="radiolabel"> 10 <input type="radio" name="radioButton" id="regForm_radioButton0" 11 checked="checked" value="0"/> 12 <label for="regForm_radioButton0">手机号注册</label> 13 <input type="radio" name="radioButton" id="regForm_radioButton1" value="1"/> 14 <label for="regForm_radioButton1">邮箱注册</label> 15 </i> 16 </li> 17 <li class="userInfo"> 18 <label id="userTitle">手机号：</label> 19 <input type="text" name="ername" size="40" maxlength="50" 20 value="" id="user" class="input" /> 21 <i id="errorusername" class="inputMsg" msg="请使用大陆手机号注册"> 22 请使用大陆手机号注册，系统严格保密</i> 23 </li>
《信息技术》教案-网页表单
《信息技术》教案-网页表单一、教学目标1. 让学生了解网页表单的概念和作用。
2. 让学生掌握网页表单的基本组成和常用元素。
3. 让学生学会使用网页表单进行信息提交和数据交互。
4. 培养学生动手实践能力和团队协作精神。
二、教学内容1. 网页表单的概念和作用2. 网页表单的基本组成和常用元素3. 表单域类型及属性4. 表单控件类型及属性5. 表单提交和数据交互三、教学重点与难点1. 网页表单的基本组成和常用元素2. 表单域类型及属性的应用3. 表单控件类型及属性的应用4. 表单提交和数据交互的方法四、教学方法与手段1. 讲授法：讲解网页表单的概念、基本组成和常用元素。
2. 案例分析法：分析实际案例，展示网页表单的应用。
3. 动手实践法：学生动手编写代码，创建网页表单。
4. 问答法：解答学生提出的问题。
五、教学过程1. 引入新课：通过展示一个简单的网页表单，引发学生对网页表单的兴趣。
2. 讲解网页表单的概念和作用，介绍基本组成和常用元素。
3. 讲解表单域类型及属性，示例演示如何使用。
4. 讲解表单控件类型及属性，示例演示如何使用。
5. 讲解表单提交和数据交互的方法，示例演示如何实现。
6. 学生动手实践：分组编写代码，创建具有实际应用意义的网页表单。
7. 问答环节：解答学生在实践过程中遇到的问题。
9. 布置作业：让学生课后完善所创作的网页表单，提高实践能力。
10. 课后反思：教师对本节课的教学效果进行反思，为下一节课做好准备。
六、教学评价1. 评价学生对网页表单的概念和作用的理解程度。
2. 评价学生对网页表单的基本组成和常用元素的掌握情况。
3. 评价学生对表单域类型及属性的应用能力。
4. 评价学生对表单控件类型及属性的应用能力。
5. 评价学生对表单提交和数据交互的实现方法。
七、教学资源1. 网页表单相关教材或教学参考书。
2. 网络资源，如在线教程、案例分析等。
3. 编程环境，如文本编辑器、网页浏览器等。
网页设计 第三讲 表格的使用
你们准备好迎接Table的挑战了吗 你们准备好迎接Table的挑战了吗！！ 的挑战了吗！！
一、基本语法
1、表格的结构体： 表格的结构体：
<table> <tr> <td></td> </tr> </table>
2、表行：<tr></tr> 表行： 3、表项（单元格）：<td></td> 表项（单元格）： ）：<td></td> 一个表由<table>开始 </table>结束 表的内容由<tr>和 一个表由<table>开始，</table>结束，表的内容由<tr>和 开始， 结束， <td>定义和组成的 <tr>指明了表的一个行 <td>定义和组成的。<tr>指明了表的一个行，表有多少行就有 定义和组成的。 指明了表的一个行， 多少个<tr>；表有多少个“格子”就有多少个<td>。 多少个<tr>；表有多少个“格子”就有多少个<td>。 表格重要的基本标记不多，但每个标记都有很多的属性， 表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一 下子把这些属性都列出来，可能让初学者感到无从下手， 下子把这些属性都列出来，可能让初学者感到无从下手，所以我们 还是从表格的外观(即浏览器中显示的表格的样式) 还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的 属性。 属性。
二、格属性的定义
<table>标签属性： <table>标签属性： 标签属性 1、border：表格边框线粗细，值为数字，单位是像素。 border：表格边框线粗细，值为数字，单位是像素。 2、bordercolor：表格边框线颜色，值为颜色代码。例子六 bordercolor：表格边框线颜色，值为颜色代码。 3、bordercolorlight：表格亮边框颜色，值为颜色代码。例子二 bordercolorlight：表格亮边框颜色，值为颜色代码。 4、bordercolordark：表格暗边框颜色，值为颜色代码。例子二 bordercolordark：表格暗边框颜色， 值为颜色代码。 5、width：表格宽度，值为数字或百分比数字，单位是像素或百分比。 width：表格宽度，值为数字或百分比数字，单位是像素或百分比。 6、height：表格高度，值为数字或百分比数字，单位是像素或百分比。 height：表格高度，值为数字或百分比数字，单位是像素或百分比。 7、align：表格放置的位置，值为Left、Center、Right。例子五或六 align：表格放置的位置，值为Left、Center、Right。 8、bgcolor：表格背景颜色，值为颜色代码。例子六 bgcolor：表格背景颜色，值为颜色代码。 9、background：表格背景图像，值为图像存放的路径。 background：表格背景图像，值为图像存放的路径。 10、cellspacing：表项与表项之间的空白，值为数字。例子三 10、cellspacing：表项与表项之间的空白，值为数字。 11、cellpadding ：表项中的内容与表项边框之间的空白，值为数字。例子四 11、 表项中的内容与表项边框之间的空白，值为数字。