教学项目十六 HTML中表单网页设计(二)

《网站建设与维护》课程标准一、课程基本信息《网站建设与维护》课程基本信息，见表表1-1《网站建设与维护》课程基本信息二、课程性质与设计思路（一）课程性质网站建设与维护是网络系统管理专业学生必备的综合职业能力，本课程是网络系统管理专业的核心课程，通过本课程的学习，学生从整体上对网站设计与制作、网站管理与维护工作所需要的知识与技能有全面的认识，培养学生具备一定的网站开发等技能型人才所必需的知识及相关的职业能力，本课程以网页设计与制作、网络操作系统、数据库管理与维护为基础。

通过学习本课程,使学生掌握网站的建设步骤,会规划和设计网站,掌握Web服务器的安装和配置,能综合使用静态网页技术和动态服务器网页技术制作网站,掌握网站的测试和发布方法,熟悉网站的推广和维护技术，能创建和运营淘宝C2C网店，能利用独立网店系统创建独立网店。

通过启发引导项目式教学改革提高学生积极的行动意识和职业规划能力，培养学生的实际网站制作、网店创建、网店运营能力，为后续课程学习作前期准备，为学生顶岗就业夯实基础（二）设计思路本课程是依据“电子商务专业工作任务与职业能力分析表”中的网站建设与网店运营工作项目设置的。

随着互联网技术的不断发展，网站建设与网店运营在企业整体运行中占有越来越大的比重，网站建设与维护也与其紧密相连，因而设置这门课。

课程内容的编排和组织是以企业需求、学生的认知规律、多年的教学积累为依据确定的。

立足于实际能力培养，对课程内容的选择标准作了根本性改革，打破以知识传授为主要特征的传统学科课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体项目的过程中学会完成相应工作任务，并构建相关理论知识，发展职业能力。

经过电子商务与网站建设行业专家深入、细致、系统的分析，本课程最终确定了以下十六个项目：创建网站站点、制作图文混排页面、制作表单网页、制作多媒体展示网页、处理网站图像、制作网站动画、制作网站需求分析报告、制作公司宣传网站、创建C2C网店、拍摄网店商品图片、处理网店商品图片、装修C2C网店、管理C2C网店、创建独立网店、装修独立网店、管理独立网店。

多媒体技术与网页制作第13讲2007年5月修订2013-7-20制作人：马秀麟1说明：由于多数网页要跨平台使用，因此网页文件不支持常用的空格符和换行符号。

大多数网页中采用表格实现定位，即利用表格确定文字和图片的存放位置。

表格可以嵌套，表格中可以嵌套表格。

1、表格用途:(1)展示文字:像Word等文字处理软件一样，利用表格展示特定的文字。

(2)页面布局:对整个页面进行布局，确定页面中各个对象的显示位置。

用于页面布局的表格往往使用无线表格。

2、插入表格直接插入所需行列数的表格：【插入】【表格】。

在对话框中回答表格的行列数。

3、表格操作:在屏幕上绘出表格后，可以利用鼠标拖放的方式移动表格线。

另外系统也会根据表格中文档的大小自动调节表格大小。

或者：选择系统菜单【修改】【表格】，利用子菜单项可以进行表格的拆分、合并、插入、删除等常规操作。

事实上，用得最多的是：当选定表格中的单元格后，桌面底部的属性面板自动变成【单元格】属性面板，此时也可以直接利用属性面板实现表格的各种操作。

4、表格属性:❑选定表格后（单击表格底部600旁的小三角就可以选定整个表格，或者利用【修改】菜单选定表格），底部的“属性”面板自动切换为“表格属性”面板。

(1)表格背景❑打开表格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为表格设置背景等。

(2)表格边框❑打开表格【属性】面板，可设置表格边框宽度。

表格边框宽度为0，表示不显示边框，表格为无线表格。

(3)边框颜色❑打开表格【属性】面板，可设置表格边框颜色。

5、单元格属性❑选定单元格后，底部的“属性”面板自动切换为“单元格”面板。

(1)单元格背景❑打开单元格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为选定单元格设置背景等。

(2)单元格合并❑打开单元格【属性】面板，单击左下角的单元格合并按钮，可合并选定单元格。

(3)单元格拆分❑打开单元格【属性】面板，单击左下角的单元格拆分按钮，可把选定单元格拆分为几个单元格。

简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。

该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。

这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。

- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签：fieldset2、表单元素分为三类：（1）⽂本类型： ⽂本框：text 属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提⽰⽂字）账号：<input type="text"> 密码框：password密码：<input type="password"> 隐藏域：hidden 多⾏⽂本（特殊格式）：textarea<textarea name="" id="" ></textarea>（2）选择类型： 单选：radio 属性有：disabled（不可操作）、checkbox（默认选中的）性别：<input type="radio">男 <input type="radio">⼥ 多选：checkbox爱好：<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉（特殊格式）：select option 属性（option的属性）：selected（默认选中）、multiple（全部显⽰）属性（select的属性）：size（显⽰⼏条）<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>（3）按钮类型： 普通：button<input type="button" value="点我试试"> 提交：submit　<input type="submit" value="提交按钮"> 复位：reset<input type="reset" value="清空">其他：1、autofocus属性（聚焦）实例：2、optgroup定义选项组实例：注意：methon:get传值（键值对，显⽰在⽹页的路径上，路径后⾯加数据）post（⽹络传值) ⼀般都⽤post 格式：<form action="#" method="post" enctype="multipart/form-data"> Html5新增：<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。

html网页表单制作1.表单标签,form,……,/form,语法:,FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”,…,/FORM,Name :定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为:get ; Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序) 2.文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式:,input type=“text” name=“...” size=“...” maxlength=“...” value=“...”,type=“text” 定义单行文本输入框;name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称;size 属性定义文本框的宽度，单位是单个字符宽度;maxlength 属性定义最多输入的字符数。

value 属性定义文本框的初始值3.密码框密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。

格式:<input type=“password” name=“...” size=“...” maxlength= “...” >4. 按钮类型:普通按钮、提交按钮、重置按钮。

1) 普通按钮当type 的类型为button 时，表示该输入项输入的是普通按钮。

语法格式: <input type="button" value="…“ name=“…”>Value: 表示显示在按钮上面的文字。

普通按钮经常和脚本一起使用。

2) 提交按钮通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。

例句: <input type="submit" value="提交">3) 重置按钮当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。

实验二HTML网页设计实验目的：一、熟练了解HTML文档基本结构二、熟练了解HTML常用标记三、熟练掌握HTML的表单标记实验内容：一、创建如图所示的个人资料登记表单。

实验步骤：1、新建一个txt文档，并输入如下代码，代码编写完成后，将文件名定义为form.htm.<html><head><title>表单范例</title></head><body><h3 align="center"><U>请留下个人资料</U></h3><form><table border="0" align="center" width="401"><tr><td width="81" align="right">姓名：</td><td width="306"><input type="text" name="T1" size="15"></td> </tr><tr><td width="81" align="right">电话：</td><td width="306"><input type="text" name="T2" size="20"></td> </tr><tr><td width="81" align="right">E-mail:&nbsp;</td><td width="306"><input type="text" name="T3" size="30"></td> </tr><tr><td width="81" align="right">性别：</td><td width="306"><input type="radio" name="R1" value="男" checked>男&nbsp;&nbsp;<input type="radio" name="R1" value="女">女</td> </tr><tr><td width="81" align="right">年龄：</td><td width="306"><select size="1" name="D1"><option selected>20以下</option><option>20~29</option><option>30~45</option><option>45~60</option></select></td></tr><tr><td width="81" align="right">留言板：</td><td width="306"><textarea rows="3" name="S1" cols="38"></textarea></td> </tr><tr><td width="81" align="right">您的爱好：</td><td width="306"><input type="checkbox" name="C1" value="运动">运动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="C2" value="阅读">阅读<br><input type="checkbox" name="C3" value="音乐">听音乐&nbsp;&nbsp;&nbsp;<input type="checkbox" name="C4" value="旅游">旅游</td> </tr></table><p align="center"><input type="submit" value="提交" name="B1">&nbsp;&nbsp;&nbsp;<input type="reset" value="全部重写" name="B2"></p></form></body></html>2、双击form.htm文件，检验所展示的网页是否正确。

(完整版)《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面,为就业做好准备。

本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks的使用方法,并能够使用这3款软件制作出美观实用的网页。

二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分.（一）知识目标:1.熟悉网页制作的基本元素;2。

掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4。

掌握常见的网页布局方法，学会使用CSS美化网页;5。

掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。

7。

掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。

（二）职业能力培养目标1。

能够根据网站开发需求,去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。

（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2。

具有良好的心理素质和职业道德素质;3。

具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力,同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。

（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”,“网页设计制作员"，“网页设计师”等职业技能证书。

第16讲布局技术-模板、库二1.1教学目标：◆知识目标1.熟练掌握如何在表单网页中插入表单域。

2.检查表单行为的运用。

3.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

4.使用Spry框架组件制作具有验证功能的表单。

◆技能目标1.掌握快速制作表单页面的方法。

2.能够创建不同形式的表单页面来满足用户间的交互。

◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.3 教学难点1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、激趣导入，揭示课题对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。

二、使用表单页面不但要向用户提供信息，而且要与之进行交流。

在页面中，表单充当了信息接收者的角色。

访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮向服务器提交这些信息。

0.1表单概述使用表单可以制作简单的交互式页面，收集来自用户的信息，是网站管理者与浏览者之间沟通的桥梁。

收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。