网页设计与制作实践 第7章 表格与表单
HTML5网页设计与制作教学课件第七章使用表格
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
《网页设计》教学大纲
课程名称：网页设计课程代码：总学分：4总学时：54适用专业：计算机专业的本科先修课程和后续课程先修课程：计算机基础、图像类设计软件、计算机类语言后续课程：一、课程的性质、目的与任务课程性质：本课程是计算机网络技术、软件技术、电子信息技术、计算机系统与维护、电子商务技术等专业的技术基础课，属于必修课范畴。
课程目的：通过本课程学习，使学生了解网页制作的基础知识、基本流程。
熟悉并掌握HTML语言，WEB服务器的配置，CSS，JA V ASCRIPT并能熟练使用Dreamweaver网站的设计、制作与维护更新，为动态网页设计打下基础。
课程任务：本课程结合实例，详细介绍了HTML标记语言、CSS样式表的应用、JA V ASCRIPT程序设计等知识。
通过本课程的学习，使学生能够掌握网页设计与制作的基本技能，并轻松地创建出具个性化的静态网站等。
二、教学的基本要求以理论够用为度注重技能的培养。
在掌握主要概念和基本操作后，进行专项和综合训练。
通过课堂学习、课后练习和上机实验，使基本技能的训练得到加强，培养学生实际操作的能力。
（一）理论知识方面主要达到：1．掌握网页设计相关常识，熟悉网页制作的基本技术；2．了解网站设计制作的常用工具与基本流程，了解不同网站类型不同的设计与制作要求，了解网站的整体结构规划；3．掌握HTML语言；4．掌握利用CSS构建网站；5. 掌握利用表格或者CSS 进行网页布局5．理解脚本语言以及掌握JA V ASCRIPT（二）能力方面主要达到：1．熟练掌握使用手工编写HTML代码的方式编写网页；2．熟练掌握利用CSS+DIV方式进行网页设计；3．熟练掌握Macromedia Dremweave的基本操作；4．了解网页设计稿文件的切片与优化输出；了解网页图像的优化技巧；5．掌握JA V ASCRIPT编写一些简单的交互程序；6．掌握网站的测试、发布、推广与维护；三、课程教学内容、重点与难点第1章网页与网站基础知识1网页与网站的概念2网页的设计3网页版式和布局4网站的策划与创建原则●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点网页设计中的若干术语●教学难点网页设计中的若干术语第2章html基础1 html文档结构2 html基本语法●教学基础要求标记对与格式标记的使用●教学重点格式标记的使用●教学难点HTML基本语法第3章文字与段落1文字内容2文字样式3文字修饰4段落●教学基础要求了解标题元素,掌握字体,上下标,及特殊字符的标记●教学重点网页中特殊符号的输入●教学难点特殊符号对应的标记第4章列表1列表简介2无序列表3有序列表4嵌套列表5定义列表6菜单列表和目录列表●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点定义列表●教学难点菜单列表第5章超链接1超链接简介2创建超链接3链接对象●教学基础要求掌握超级链接标记的使用●教学重点字体、图片和超级链接标记的使用●教学难点理解书签超级链接的意义第6章表格1表格2表格标记3表格属性修饰4设置行的属性5设置单元格的属性6表格嵌套●教学基础要求掌握简单表格的制作表格中单元格的合并以及表格嵌套和叠加操作●教学难点理解表格属性rowspan与colspan的含义以及表格嵌套实现第7章框架1框架简介2框架的设置3子窗口的设置4浮动框架●教学基础要求掌握框架的制作●教学重点框架的嵌套使用●教学难点理解框架属性name、target的意义第8章表单1表单2输入3多行文本输入框4下拉列表框●教学基础要求掌握框架的使用●教学重点表单元素标志与属性●教学难点理解表单中相应元素对应标志及属性的含义第9章使用CSS格式化网页1样式表的定义与使用2定义选择符3文字与排版式的使用4背景与颜色的使用5美化网页与超链接的设置6矩形模块的概念与使用7列表●教学基础要求在网页中掌握CSS的运用方法●教学重点样式的定义CSS准确应用第10章javascript基础1javascript起步2javascript程序3标识符和变量4运算符和表达式5javascript程序控制结构6常用对象7事件编程●教学基础要求掌握JavaScript在网页开发中的程序设计●教学重点JavaScript函数、BOM对象的处理、DOM对象的处理●教学难点BOM对象的处理、DOM对象的处理、CSS2Properties对象的处理第11章web设计基础1web设计原则2网站结构规划3网页布局4内容设计5色彩设计●教学基础要求掌握WEB设计的原则●教学重点网页布局●教学难点网页规划第12章页面布局技术1.表格布局方法2.div+css布局方法3.页面导航布局方法●教学基础要求掌握网页设计中布局方法●教学重点div+css布局●教学难点div+css布局样式的定义与应用四、 课时安排建议（列简表） 序号 内容或章节 讲授学时安排作业 备注1 第1章 网页与网站基础 3 浏览网站，查看源文件2 第2章html 基础3 使用HTML 手工编写网页3 第3章文字与段落 34 第4章列表 35 第5章超链接 36 第6章表格 37 第7章框架 38 第8章表单3 9 第9章css 格式化网页 12 利用CSS 控制网页元素的风格和样式10 第10章javascript 基础 12 编写客户端脚本，与网页元素进行动态交互 11 第11章web 设计基础 3 制作综合网页12第12章 页面布局技术3合计 54五、 选用的教材和课件 教材：《网页设计与开发—html 、css 、javascript 实例教程》 课件：自作六、 考核方式和成绩评定 考核方式：综合设计作品成绩评定：平时成绩：30% ，考试（考核）：70%七、 主要教学参考书(注明：著者、书名、版本、出版者、出版年)执笔人： 审定人： 系（部）主任：。
网页设计与制作
第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。
一般流程如下：1.建设网站前进行必要的市场分析。
2.明确建设网站的目的及功能定位。
3.制定网站技术解决方案。
4.根据网站的目的确定网站内容、网站结构和网站功能。
5.进行网页设计，并根据技术方案实施网站建设。
6.做出经费预算。
7.网站测试。
8.网站发布及推广。
9.网站维护。
第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。
●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。
●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。
●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。
●基本构成元素：文字、图像、超级链接。
●阅读方式：浏览器。
●类型：以不同的后缀代表不同类型的网页文件。
通常分为静态页面、动态页面。
动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。
也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。
一般文件名均以htm、html、shtml等为后缀。
术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。
网页设计与制作任务驱动式教程单元7制作表单网页
3．在网页中插入表格
（1）在网页0701.html中插入表格1
（2）在网页0701.html中插入表格2
（3）在网页0701.html中插入表格3 （4）在表格3中插入表格3-1
① 插入4行1列表格3-1
② 在表格3-1第1行的单元格中插入表格3-1-1 ③ 在表格3-1第3行的单元格中插入表格3-1-3 ④ 在表格3-1第2行的单元格中插入表格3-1-2 ⑤ 在表格3-1第4行的单元格中插入表格3-1-4
（4）保存网页，预览其效果。
【任务实施】
2．插入文本区域
（1）将光标置于“您的建议：”一行（表格3-1-4的第5行）的第2 个单元格中。 （2）单击【插入】面板“表单”工具栏中的【文本区域】按钮，在 弹出的【输入标签辅助功能属性】对话框的“ID”文本框中输入该文 本框的标识“suggest”，其他属性保持默认值不变，然后单击【确定】 按钮，在光标插入1个多行文本域。 （3）设置多行文本域的属性 在文本域【属性】面板的“字符宽度”文本框中输入“80”，“行数” 文本框中输入“4”，“换行”下拉列表框中选择“实体”。 （4）保存网页，预览其效果。
使用单选按钮组，可以一次插入一组单选按钮。 （1）将光标置于“您的年龄：”一行（表格3-1-2的第4行）的第2
个单元格中。
（2）单击【插入】面板“表单”工具栏中的【单选按钮组】按钮， 弹出【单选按钮组】对话框。 在【单选按钮组】对话框中“名称”文本框中输入该单选按钮组的 名称“age”，插入单选按钮组的好处就是使同一组单选按钮有统一的 名称；中间的列表框中列出了单选按钮组中所包含的所有单选按钮， 每一行代表1个单选按钮，默认包含两行。“标签”列用来设置单选 按扭旁边的说明文字，“值”列用来设置选中单选按钮后提交的值。
网页设计与制作 单元7 表格化网页布局-任务7.2
任务7.2 使用表格布局“图书资源网”首页
7.2.2 插入与编辑表格 （1）新建网页文件。 （2）插入表格。选择“插入→Table”菜单命令，设置行数为“8”， 列为“2”，表格宽度为“730像素”，边框粗细为“0”，其他为默认 值。 （3）合并单元格。选中第1行的两个单元格，将其合并为一个 单元格；选中第2行的两个单元格，将其合并为一个单元格；选中最 后一行的两个单元格，也将其合并为一个单元格。
任务7.2 使用表格布局“图书资源网”首页
（8）用同样的方法，创建.text1类别选择器 （9）第4行左侧单元格中输入的文字，在“属性”面板中的“类”列表中选择 text1，为文字添加样式；选中插入的图片，为图片添加样式，完成图文混排效果 设置。然后在该单元格的下侧插入一条水平线。 （10）将光标置于第3行右侧的单元格中，输入“新书快递”。 （11）插入嵌套的表格。将光标置于第4行右侧的单元格中，插入一个2行3列、 “表格宽度”的百分比为100、“边框粗细”为1像素的嵌套表格。 （12）在嵌套表格的6个单元格中分别插入图片。 （13）将光标置于第5行左侧的单元格中，输入“购书指南”；将光标置于第6 行左侧的单元格中，输入与“购书指南”相关的文字，并为输入的文字添加text1 样式。
任务7.2 使用表格布局“图书资源网”首页
7.2.4 导入表格式数据
在拆分的单元格中输入文本内容，添加项目列表符号 制作网页页尾
任务7.2 使用表格布局“图书资源网”首页
7.2.5 进一步美化旅游信息网主页
通过CSS样式进一步编辑美化图书资源网，请在Drea.2 使用表格布局“图书资源网”首页
7.2.3 在表格中插入网页元素 （4）插入图像。在第1行的单元格中，选择“插入→Image”菜单命 令。 （5）用同样的方法，在表格的第2行插入导航图像。 （6）将光标置于第3行左侧的单元格中，输入“近期热点”；将光 标置于第4行左侧的单元格中，输入与“近期热点”相关的文字，并插 入图片。 （7）选择“窗口→CSS设计器”菜单命令，在面板中定义类选择 器.tu1
《网页设计与制作教程与实训》全套PPT电子课件教案-第七章 模板和库
新建好以后，我们就可以打开文档，对它的可编辑区进行编辑了。 如图18所示：
2）使用新网页后再应用模板 选择“文件”新建一个网页文档，然后在“资源”面板的模板中选 定将要使用的模板，点击“应用”，就可以把此模板应用到新建 的文档中去。 当然，我们也可以对已经存在的网页使用模板，具体操作如下： （1 1） 打开要应用模板的网页 （2 2） 选择【修改】|【模板】|【应用到模板】在弹出的模板中 选择一个模板到网页里面。于是我们就可以在网页里对其进行编 辑了。当然了，我们只能对其的可编辑区域进行操作。 我们在应用模板时，为了满足网页需要，可以对模板的页面属性作 设定。但是不能对文档的页面属性作修改。操作如下： 1)选择【修改】|【页面属性】，打开“页面属性”对话框以后，就 可以对其作设定了。如图19所示
此外，对一个已经创建好的模板，我们可以在文档窗口的下拉菜单 中选择【窗口】|【资源】命令，打开“资源”面板，从中选择创 建好了的模板，单击底部的 按钮，即可打开 它对它进行编辑。 或者我们直接在“资源”面板里双击需要编辑的模板，也可对它 进行修改。
7.3 应用模板
有了模板，我们就可以高效，快速的设计出风格一致的网页。在需 要的时候，也可以通过修改模板来自动更新使用模板创建的网页， 使网页的维护变得非常轻松。 下面我们再来学习一下如何用模板来创建新的网页和应用模板于已 存在的网页里。 应用模板创建新的网页有两种操作方法： 1）1） 直接从模板中创建网页 选择【文件】|【从模板新建】，在弹出的对话框中选择一个模板就 可以了。 如图17所示：
3)设定好以后，按“确定”按钮就可以把其运用于模板里了。 除此之外，我们还可以定义模板的可编辑区和锁定区的高亮显示。 操作如下： 1)选择【编辑】|【首选参数】，然后在弹出的对话框中选择“标记 色彩”如图20所示：
Web习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
网页设计与制作07
操作实例7-1 在网页中按图7-1所示建立课程表 操作步骤：
①在本地站点新建网页或打开指定的网页。
②在“修改”菜单中选择“页面属性”选项，将网页标题设 置为“表格的应用”。
③设置标题：在“文档”窗口的第一行输入标题文字 “00111G班课程表”，并在属性面板中设置其属性为 “隶书”、大小为“极大”、“居中对齐”。
单击选择一种框架。 2．打开框架面板 操作实例7-14 打开框架面板 操作步骤： 执行下列操作之一，打开框架面板。 ·在“窗口”菜单选择“框架”选项。 ·按快捷键Shift + F2。
3．选择框架与框架集 （1）直接在文档窗口中选择 ·按住Alt键在框架内单击鼠标，选中框架。 ·在框架的边框上单击鼠标，选中框架集。 （2）使用框架面板进行选择 ·在框架面板中单击指定框架，选中该框架。 ·在“框架”面板中单击环绕框架的边框，
·没有眼睛图标：该层继承其父层的可见性，如图 7-18所示。
4．对齐层 （1）对齐两个或多个层 ①按住Shift键，依次选中需要对齐的层，最后被
选中的层以黑色高亮显示，并作为基准位置。
②在“修改”菜单选择“对齐”选项中的一个对 齐方式。
（2）将层对齐到网格
①打开网格显示：在“查看”菜单选择“网格”、 “显示网格”选项。
的任何一处选中整个表格。 ②在属性面板中的“对齐”下拉列表中选择“居中对齐”，完成
表格的居中设置。
（3）选中行或列并设置行或列文本的居中对齐
①将鼠标移动到一行的左边界或一列的顶部，当出 现选择箭头时单击选中行或列。
②在属性面板中的“水平”下拉列表中选择“居中 对齐”；在“垂直”下拉列表中选择“居中”。 也可单击属性面板中的“居中对齐”按钮完成。
7.2.2 设置层的属性
网页设计与制作(Dreamweaver)《插入网页基本要素之表单》
通常，一个完整的表单包括表单对象（如单选按钮、复 选框、文本字段以及按钮等）和应用程序两个基本组件。
工作原理：一般将表单设置在一个HTML文档中，访问 者填写相关信息后提交表单，表单内容会自动从客户端 的浏览器传送到服务器上，经过服务器上的ASP或CGI 等程序处理后，再将访问者所需的信息传送到客户端的 浏览器上。
表单“属性”面板中各选项含义如下： 表单ID：是<from>标签的name参数，用于标志表单的名称，每个表单的名称都不能相同。命名表单后，用户就可以使用 JavaScript或VBScript等脚本语言引用或控制该表单。 动作：是<from>标签的action参数，用于设置处理该表单数据的动态网页路径。用户可以在此选项中直接输入动态网页的 完整路径，也可以单击选项右侧的“浏览文件”按钮，选择处理该表单数据的动态网页。
插入网页基本要素之表单
添加表单对象
表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，所以在添加文本域、 按钮等表单对象之前，要先插入表单。 向表单中插入表单对象的方法有如下几种： 将光标置于表单边界内（即红色虚线框内）的插入点，从“插入→表单”级联式菜单中选择需要的对象。 将光标置于表单边界内的插入点，在“插入”面板“表单”标签中选择并单击表单对象按钮。 在“插入”面板“表单”标签中，选中需要的表单对象按钮，按下鼠标左键将其直接拖曳到表单边界内的插入点位置。
插入网页基本要素之表单
设置表单属性
需要注意的是，页面中的红色虚线框表示创建的表单，这个框的作用仅方便编辑表单对象，在浏览器中不会显示。另外， 可以在一个页面中包含多个表单，但是，不能将一个表单插入到另一个表单中（即标签不能交迭）。
《网页设计与制作》教案-第7讲 布局技术之一-表格一
第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。
1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。
无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。
它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。
对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。
标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。
二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。
表格的格式控制能力使设计者可以使用表格来构造网页的框架。
先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。
使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。
0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。
网页设计与制作第7章表单精品PPT课件
属性
值
描述
action
URL 规定当提交表单时，表单域数据的接收地址。
method
get post
规定如何发送表单域数据。
name
文本 规定表单域的名称。
2010网页设计与制作
第7章
4
7.3 输入标签
基本格式：<input /> 作用：标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形
基本格式：
<form>
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
</form>
作用：label不会向用户呈现任何特殊效果。不过，当用户 选择该标签时，浏览器就会自动将焦点转到和标签绑定的表 单元素上。
表单域标签中必须设置enctype="multipart/formdata"来保证文件被正确编码。另外，表单的传送方式必须 设置为post。
属性
值
描述
accept
文件类型值 规定提交的文件类型。
2010网页设计与制作
第7章
10
7.3.6 隐藏域
基本格式：
<input type="hidden" />
作用： 定义隐藏字段。隐藏字段对于用户 是不可见的。隐藏字段通常会存储一个默认 值。
2010网页设计与制作
第7章
11
7.4.1 表单元素分组
基本格式：
<form> <fieldset>
网页设计与制作实践 第7章表格与表单
实验1 表格
4 实验分析 结构分析： 创建表格首先要分析表格有多少行列，表格的行列以最大数算，
然后通过合并单元格，制作出各种效果的表格。本例从效果图可以分 析出，表格有7列，10行，中间的空白行可通过合并一行单元格制作出 来，“卖家信用”和“买家信用”所占单元格是通过纵向合并单元格 就可以制作出来。
实验2 宝贝发布表单
3 实验内容及要求 请做出以下效果：
要求： （1）要求运用表格和表单组织页面。 （2）跟根需要录入的信息特点，选择对应的控制制作。
实验2 宝贝发布表单
4 实验分析 结构分析： 从效果图可以看出界面整体包在一个大盒子中，内容分可以分为上面的标题和
下面的表单两部分。其中表单部分排列整齐，由左右两部分构成，左边为提示信息， 右边为对应的表单控制。表单部分可以表格来布局，需要定义一个7行2列的表格。
样式分析： （1）设置表格的样式进行整体控制，需对表框的宽度、外边距 样式进行设置。 （2）设置表题的背景及单元格的边框、文字对齐样式。 （3）设置中间行无边框，制作出空行。
实验2 宝贝发布表单
1 考核知识点 表单<form>、<input>控件、<textarea>控件 、<select>控件、用CSS控制表单及 表单元素的样式。 2 练习目标 ●掌握表单的构成。 ●掌握<form>标签的用法及相关属性的设置。 ●掌握input控件中的单行文本输入框、密码输入框、复选框、文件域、按钮 的属性设置及使用方法。 ●掌握<textarea> 、<select>等控件的属性设置及使用方法。 ●掌握<label>标签的属性设置及使用方法。 ●熟悉表格布局的。
《网页设计与制作》-实训指导书
目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级链接的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介"网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与网站管理实训17 网站开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。
实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或128M ;硬盘不小于 500M ； VGA 彩显,带鼠标器。
操作系统：Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材.实训课时2学时实训内容创建站点：创建网站目录结构：创建栏目文件夹:创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创建主页文件index。
htm，并正确命名，掌握设置网页的页面属性的方法.实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放网站中所要用到的图片。
2、定义站点：设置”站点名称”，命名为 "博客人";设置本地根文件夹，指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost.3、创建网站目录结构及栏目文件夹（如下图）：4、E盘下的bookman文件夹创建主页文件index。
htm5、设置网页的页面属性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
性兼容问题严重。
7.1 表格标记
• 7.1.4 <td>标记的属性
– 在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这 时就可以为单元格标记<td>定义属性，其常用属性如下表所示。
属性名 width height align valign
7.1 表格标记
• 7.1.1 创建表格
• 在上面的语法中包含三对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，他们是 创建表格的基本标记，缺一不可，下面对他们进行具体地解释。
<table></table>：用于定义一个表格。 <tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>
第七章 表格与表单
表格的创建 表单样式的控制 表单相关标记
表格样式的控制
7.1 表格标记
• 7.1.1 创建表格
• 在HTML网页中，要想创建表格，就需要使用表格相关的标记。创建表格的基本语法格式如 下：
<table> <tr> <td>单元格内的文字</td> ... </tr> ...
</table>
预定义的颜色值、十六进制#RGB、 rgb(r,g,b)
backgroun d
设置行背景图像
url地址
7.1 表格标记
• 7.1.3 <tr>标记的属性
– 值得一提的是，学习<tr>的属性时需要注意以下几点： <tr>标记无宽度属性width，其宽度取决于表格标记<table>。 可以对<tr>标记应用valign属性，用于设置一行内容的垂直对齐方
7.1 表格标记
• 7.1.3 <tr>标记的属性
– 制作网页时，有时需要表格中的某一行特殊显示，这时就可以为 行标记<tr>定义属性。
属性名
含义
height
设置行高度
align
设置一行内容的水平对齐方式valign来自设置一行内容的垂直对齐方式
bgcolor 设置行背景颜色
常用属性值 像素值 left、center、right top、middle、bottom
改表格的尺寸，就需对其应用宽度属性width或高度属性height。
注意: 当为表格标记<table>同时设置width、height和cellpadding属性时， cellpadding的显示效果将不太容易观察，所以一般在未给表格设置宽高的 情况下测试cellpadding属性。
7.1 表格标记
7.1 表格标记
• 7.1.2 <table>标记的属性
– <table>标记的属性如下表所示。
属性名 border
含义 设置表格的边框（默认border="0"无边框）
cellspacing 设置单元格与单元格边框之间的空白间距
常用属性值 像素值 像素值（默认为2像素）
像素值（默认为1像素） cellpadding 设置单元格内容与单元格边框之间的空白间距
含义 设置单元格的宽度 设置单元格的高度 设置单元格内容的水平对齐方式 设置单元格内容的垂直对齐方式
bgcolor
设置单元格的背景颜色
常用属性值 像素值 像素值 left、center、right top、middle、bottom
<table border=“20” cellspacing=“20”>
7.1 表格标记
• 7.1.2 <table>标记的属性
3、cellpadding属性 cellpadding属性用于设置单元格内容与单元格边框之间的空白间距
，默认为1px。代码如下：
<table border=“20” cellspacing=“20” cellpadding=“20”>
• 7.1.2 <table>标记的属性
1、border属性 在<table>标记中，border属性用于设置表格的边框，默认为0。代
码如下：
<table border=“20”>
2、cellspacing属性 cellspacing属性用于设置单元格与单元格边框之间的空白间距，默
认为2px。代码如下：
width height align
bgcolor
设置表格的宽度 设置表格的高度 设置表格在网页中的水平对齐方式
设置表格的背景颜色
像素值
像素值
left、center、right 预定义的颜色值、十六进制#RGB、 rgb(r,g,b)
background 设置表格的背景图像
url地址
7.1 表格标记
• 7.1.2 <table>标记的属性
5、align属性 align属性用于定义元素的水平对齐方式，其可选属性值为left、
center、right。值得一提的是，当对<table>标记应用align属性时， 控制的为表格的水平对齐方式，单元格中的内容不受影响。 7、bgcolor属性 在<table>标记中，bgcolor属性用于设置表格的背景颜色。 7、background属性 在<table>标记中，background属性用于设置表格的背景图像。
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离， cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子模型 的内外边距理解cellpadding与cellspacing的不同。
7.1 表格标记
• 7.1.2 <table>标记的属性
4、width与height属性 默认情况下，表格的宽度和高度靠其自身的内容来支撑。要想更
中包含几对<tr></tr>，就有几行表格。 <td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几
对<td></td>，就表示该行中有多少列（或多少个单元格）。
7.1 表格标记
• 7.1.1 创建表格
注意: 学习表格的核心是学习<td></td>标记，他就像一个容器，可以容纳所有 的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中 只能嵌套<td></td>，直接在<tr></tr>标记中输入文字的做法是不被允许 的。