《网页设计与制作》第10章：创建表单网页
《网页设计与制作》习题及答案
第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>）是水平线标签，可以在页面生成一条水平线。
网页设计与制作第10章
第10章制作一个完整的网站一、知识要点1、制作一个完整网站的过程2、结合Firewors、FLASH制作网页图片和动画3、CSS样式4、使用模板制作与更新大量网页二、例题分析例10.1：5Dmedia步骤一：定义站点：设置本地站点1、在D或E盘上新建一个文件夹“5dname”，在该文件夹中再建一个文件夹“pictrue”。
（注意：文件夹名、文件名（不管是图片还是网页）必须为英文字母或数字，不能为汉字）2、在“站点”菜单中选择“新建站点”，即会出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡，则单击“基本”。
出现“站点定义向导”的第一个屏幕，要求您为站点输入一个站点名称“5D多媒体”。
3、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问您是否要使用服务器技术。
选择“否，我不想使用服务器技术”选项指示目前该站点是一个静态站点，没有动态页。
4、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问要如何使用文件。
选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。
在“您将把文件存储在计算机中的什么位置？”文本框中输入“D:/5dname”，或者通过浏览指定。
5、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问如何连接到远程服务器。
现在，从弹出菜单中选择“无”。
单击“下一步”进入下一个步骤。
该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。
6、单击“确定”，“站点”面板现在显示当前站点的新本地根文件夹，同时显示一个图标允许您以分层树视图查看所有本地磁盘。
7、点击菜单“站点/编辑站点”或点击站点面板的站点选项卡上“站点/编辑站点”。
都会出现编辑站点对话框，选中“5D多媒体”站点，再点击“编辑”按钮，即会出现“站点定义”对话框，单击“高级”选项卡，在“默认图像文件夹”的对话框中输入“D:/5dname/pictrue”或者通过浏览指定，先点击“确认”按钮后再点击“完成”按钮。
《网页设计与制作》课程标准
营销型网站建设实训课程标准课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分一、课程定位1.课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。
围绕电子商务专业的培养目标，该课程的定位为：.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。
.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。
.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。
2.课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。
通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。
知识目标：•熟悉和掌握静态网页设计与制作的基本知识；•掌握Web国际标准基础知识；•了解和熟悉HTML语言；•掌握静态网页设计与制作的知识；•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；•坚持手写代码，形成良好的代码规范编写习惯。
能力目标：•具备信息收集、处理、准备、加工的能力；•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。
网页设计与制作任务驱动式教程单元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个单选按钮，默认包含两行。“标签”列用来设置单选 按扭旁边的说明文字，“值”列用来设置选中单选按钮后提交的值。
网页设计与制作教程-目录
1.6 CSS技术
1.6.1什么是CSS
1.6.2在网页中使用CSS
1.6.3 CSS样式定义
1.6.4 CSS属性
1.6.5 CSS过滤器简介
1.7 JavaScript技术
1.7.1 JavaScript脚本嵌入HTML文档的方法
1.7.2使用客户端脚本
习题一
第2章DreamweaverCS6网页设计基础
5.5.5嵌套的框架集
5.5.6框架的编辑
习题五
第6章表单的应用
6.1创建表单
6.2添加表单对象
6.2.1插入文本域
6.2.2插入单选按钮/单选按钮组
6.2.3插入复选框/复选框组
6.2.4插入选择框（列表/菜单）
6.2.5插入文件域
6.2.6插入按钮
6.3表单的提交
6.4应用表格布局表单实例
习题六
11.1.7利用形状绘制工具绘制图像
11.1.8图像修饰工具的应用
11.1.9调色命令的高级应用
11.1.10图层样式
11.1.11文字图层
11.1.12滤镜
11.2页面设计与制作
11.2.1整体页面的制作
11.2.2制作导航栏
11.2.3制作网页内容板块
11.2.4制作网页页脚
习题十一
第12章网页制作工具集成及网页制作综合实训
网页设计与制作教程
第1章网页设计与制作概述
1.1网络的基础知识
1.1.1 TCP/IP协议
1.1.2 IP地址
1.1.3域名地址
1.1.4统一资源定位器
1.2图形图像的基础知识
1.2.1位图与矢量图
1.2.2常用的图像格式
《网页设计与制作》教学课件
1.1 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.5 学习任务：HTML标识语言基础 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.6 应用实例——制作一个简单的网页 1.7 实训
1.1学习任务：网页和网站基本知识
根据提供服务的不同，通常把提供网页服务的服务 器称为Web服务器，相关网站称为Web站点。一个 Web站点由一个或多个Web页组成，这些Web页相 互连接在一起，存放在Web服务器上，以供浏览者 访问。 网站是提供各种信息和服务的基地，如用户熟悉的 搜狐、新浪、雅虎等。网站是由很多网页链接在一 起组成的。用户浏览到一个网站时看到的第一个页 面叫做主页。从主页出发，可以访问到本网站的每 一个页面，也可以链接到其他网站，方便地共享网 站资源。
<b>标签的内容</b> 标签的内容</b </
起始标签 结束标签
标签可以有属性，赋值的时候用“ ， 标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开 属性要写在开始标签里，并且标签符号和<>中间不可以有空格， <>中间不可以有空格 img>是 属性要写在开始标签里，并且标签符号和<>中间不可以有空格，如< img>是 错误的 结束的标签一定要加“ 结束的标签一定要加“/”
topmargin、leftmargin属性：用于设置网页 主体内容与网页顶端、左端的距离。例如， <body topmargin=0 leftmargin=2>。
上机作业：完成 作业1.txt 中的操作
13. Dreamweaver CS4简介
网页设计与制作项目十 表单
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动十 表单
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动十 表单
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
详细地址后面插入“文本区域”，在插入选项卡的“表单”中的“文本区域”点击， 弹出对话框，点击“确定”，如图
文化程度后面添加“列表/菜单”单击会弹出对话框，然后点击“确定”，如图
选中列表，在属性面板中添加列表值，点击“ ”，添加列表值。点击 添加选项，点击确定，添加后如图所示
意见和建议与详细地址一栏相同，同样添加文本区域，添加后如图
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动十 表单
1 主 要 教 学 环 节 2 3 4 5
项目背景） 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动十 表单
1 主 要 教 学 环 节 2 3 4 5
把行数改为“9”，列数改为“2”，然后点击“确定”按钮，
在表格的第一列填写以下内容，也可以按照需要填写，如图所示
5.依次插入表单各个元素。 在第一行的第二列中插入“文本字段”，单击插入选项卡中的“表单”中的“文本 字段”，如图所示。
修改“联系电话”的“文本字段”的大小，选中“区号”的“文本字段”在属性面板中 修改字段大小，修改为“5”，电话号码文本字段改为“10”，手机号的文本字段的 长度改为“12”，如图
网页设计与制作项目13 表单──制作注册网页
任务一
创建表单
任务二
验证表单
任务一 创建表单
【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后将“项目 素材”文件夹中的内容复制到站点根文件夹下面，并打开网 页文件“index.htm”。 2.将鼠标光标置于第2行单元格中，然后在菜单栏中选择【插入】 ／【表单】／【表单】命令，或在【插入】／【表单】面板 中单击（表单）按钮插入一个空白表单，如图所示。
9.将鼠标光标置于“出生年月：”后面的单元格内，然后在菜单栏中 选择【插入】／【表单】／【列表／菜单】命令，插入两个 【列表／菜单】域，分别代表“年”、“月”，如图所示。
10.选定代表“年”的表单域，在【属性】面板中单击 按钮，打 开【列表值】对话框，添加【项目标签】和【值】，如图所示。
11.在【属性】面板中将名称设置为“dateyear”，如果有必要还可以 设置初始化选项，这里不进行设置，如图所示上接着添加下图所示的代码，
8.保存网页后再次预览网页，两次输入相同的3位密码，也会出现警 告窗口，如图所示。验证表单的工作至此就完成了。
3.打开网页文件“index2.htm”。将其中的表格及其内容复制粘贴到网
页文件“index.htm”的表单中，如图所示。
4.将鼠标光标置于“会员昵称：”右侧单元格中，然后在菜单栏中选 择【插入】／【表单】／【文本域】命令，如果弹出【输入标 签辅助功能属性】对话框，单击下面的链接，在弹出的【首选 参数】对话框中修改首选参数，取消对【表单对象】复选框的 勾选，这样再插入表单对象时就不会弹出【输入标签辅助功能 属性】对话框而是直接插入表单，如图所示。
4.在表单中右键单击按钮，在弹出的菜单中选择【编辑标签〔E〕 <input>】命令，打开【标签编辑器－input】对话框，如图所示。
《网页设计与制作》
插入表单对象，并通过“属性”面板设置其属性。
最后利用Dreamweaver内部行为验证表单。
反馈表单效果图如图6.26所示。
4. 课时安排：2课时
精选课件ppt
27
19
6. 文件域 “文件域”的作用是用户在表单中选择文件，然后 将选中的文件内容发送到服务器。例如：用户在撰 写电子邮件时，采用文件域的方式，附加文件作为 附件传送。 单击“插入栏”｜“表单”选项｜“文件域”按钮， 或选择“插入”菜单｜“表单”｜“文件域”命令。 单击“文件域”对象，将其选中，在“属性”面板 中设置“文本域”的属性：文本域的名称、字符宽 度、最多字符数等，如图所示。
13
（2）文本区域
文本区域同样也是用来输入文本信息的，当 文本字段的类型选择为多行时，即是文本区 域。其属性与文本字段相同。
单击“插入”栏｜“表单”选项｜“文本区 域”按钮，或选择“插入”菜单｜“表 单”｜“文本区域”命令，即插入“文本区 域”对象。
精选课件ppt
14
2. 复选框
复选框是指从一组选项中选择多个选项。操作步 骤如下：
单击“插入”栏｜“表单”选项｜“单选按钮组”按钮， 或选择“插入”菜单｜“表单”｜“单选按钮组”命令， 弹出 “单选按钮组”对话框。
精选课件ppt
17
4. 列表／菜单 “列表”和“菜单”可以在有限的空间内为用户提
供更多的选项。“列表”在滚动条中显示选项 值，并可允许用户在列表中选择多个选项。 “菜单”在下拉式菜单中显示选项值，只允许 用户选择一个选项。操作步骤如下： 单击“插入”栏｜“表单”选项｜“列表／菜单” 按钮，或选择“插入”菜单｜“表单”｜“列 表／菜单”命令，即插入“列表或菜单”。 单击“列表／菜单”，将其选中，在“属性”面板 中设置“列表／菜单”的属性，如图所示。
网页设计与制作(Dreamweaver)《插入网页基本要素之表单》
通常，一个完整的表单包括表单对象（如单选按钮、复 选框、文本字段以及按钮等）和应用程序两个基本组件。
工作原理：一般将表单设置在一个HTML文档中，访问 者填写相关信息后提交表单，表单内容会自动从客户端 的浏览器传送到服务器上，经过服务器上的ASP或CGI 等程序处理后，再将访问者所需的信息传送到客户端的 浏览器上。
表单“属性”面板中各选项含义如下： 表单ID：是<from>标签的name参数，用于标志表单的名称，每个表单的名称都不能相同。命名表单后，用户就可以使用 JavaScript或VBScript等脚本语言引用或控制该表单。 动作：是<from>标签的action参数，用于设置处理该表单数据的动态网页路径。用户可以在此选项中直接输入动态网页的 完整路径，也可以单击选项右侧的“浏览文件”按钮，选择处理该表单数据的动态网页。
插入网页基本要素之表单
添加表单对象
表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，所以在添加文本域、 按钮等表单对象之前，要先插入表单。 向表单中插入表单对象的方法有如下几种： 将光标置于表单边界内（即红色虚线框内）的插入点，从“插入→表单”级联式菜单中选择需要的对象。 将光标置于表单边界内的插入点，在“插入”面板“表单”标签中选择并单击表单对象按钮。 在“插入”面板“表单”标签中，选中需要的表单对象按钮，按下鼠标左键将其直接拖曳到表单边界内的插入点位置。
插入网页基本要素之表单
设置表单属性
需要注意的是，页面中的红色虚线框表示创建的表单，这个框的作用仅方便编辑表单对象，在浏览器中不会显示。另外， 可以在一个页面中包含多个表单，但是，不能将一个表单插入到另一个表单中（即标签不能交迭）。
网页设计与制作项目教程 单元6 表单网页的制作
图6-4 最简单的表单01
图6-5 最简单的表单02
请注意在地址栏中显示的内容： file:///D:/Unit06-1_login.html?username=tzh&email=abcd% 这是因为表单的提交方式method = get，所以Unit06-1.html把用户填写的数 据附加在url后面，传送给Unit06-1_login.html。 读者可以把表单的提交方式method改成post，再看看执行结果。 这里在表单的action属性中定义的处理程序是Unit06-1_login.html。
在上面的语法中，<input />标记为单标记，type属性为其最基本 的属性，其取值有多种，用于指定不同的控件类型。 除了type属性之外，<input />标记还可以定义很多其他的属性， 具体解释如下。 （1）type。 ● text：单行文本输入框。 ● password：密码输入框。 ● radio：单选按钮。 ● checkbox：复选框。 ● button：普通按钮。 ● submit：提交按钮。
6.1 表单的构成与创建 6.1.1 认识表单
简单地说，“表单”是网页上用于输入信息的区域，它的主要功 能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用 户的沟通。 一个完整的表单通常由表单控件（也称为表单元素）、提示信息 和表单域3个部分构成，对它们的具体解释如下。
（1）表单控件：包含了具体的表单功能项，如单行文本输入框、密码 输入框、复选框、提交按钮、重置按钮等。 （2）提示信息：一个表单中通常还需要包含一些说明性的文字，提示 用户进行填写和操作。 （3）表单域：它相当于一个容器，用来容纳所有的表单控件和提示信 息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到 服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服 务器。
《网页设计与制作》-实训指导书
目录实训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、设置网页的页面属性。