《工信版（中职）Web前端设计基础 项目五-3电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目五-3电子课件.pptx（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）Web前端设计基础 项目五-3电子课件网页中的表单项目五授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施利用所学的表单知识制作网上银行注册页面，如图所示。captionfont-size:24px;line-height:50px;tdheight:30px;三 项目实施启动Sublime程序，新建并保存文件名称为5-7.html。第一步第二步Head标签内的CSS代码输入如下：设置了表格标题的样式：文字大小为24像素；标题文字行高为50像素。设置了单元格的样式，高为30像素。三 项目实施第三步在
2、body标签中，先插入form表单，再在form表单中插入10行2列的表格，在表格中填写内容。中国XXX银行注册页面 注册卡/账户类型 标准卡/账户闪酷卡创建了一个表单，将所有的表格以及表单元素都放在表单标签中。创建表格标题。表格第一行，第二个单元格中是一个单选按钮组，包含两个单选项。三 项目实施第三步请输入注册卡（账）号注册卡（帐）户密码 手机号码 证件类型身份证军官证表格第二行，第二个单元格中是一个文本框。表格第三行，第二个单元格中是一个密码框。表格第四行，第二个单元格中是一个文本框。表格第五行，第二个单元格中是一个列表框，包含两个列表项。三 项目实施第三步请输入证件号码请留下你的联系邮箱
3、选择您要开通的业务短信提醒信用卡自动还款支付宝表格第六行，第二个单元格中是一个文本框。表格第七行，第二个单元格中是一个email地址输入框。表格第八行，第二个单元格中是一个复选框组，包含三个复选项。三 项目实施第三步个人备注信息您确定注册并开通以上业务吗？表格第九行，第二个单元格中是一个文本框。表格第八行，第二个单元格中是是两个按钮，一个提交按钮，另一个是重置按钮。三 项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展通过项目实施，表单以及表单元素的标签、属性已经基本掌握，如何能让表单在内容完整的同时又能美化一点呢？这就要结合c
4、ss进行样式设置，此项目拓展制作如图所示的调查问卷。四 项目拓展首先要创建一个大的div块，需要给块设置背景和边框，然后创建标题、表单以及具有布局作用的表格。第一步 分析需求第二步Head标签内的CSS代码输入如下：#layoutwidth:700px;margin:0 auto;background-color:#F6F6F6;border:2px solid#8FC629;h1border-bottom:2px solid#8FC629;text-align:center;设置了ID名为“layout”的div块样式，宽为700像素；居中显示；背景颜色灰色；边框为2像素的黄绿色实线边框。设
5、置了标题h1的样式，下边框为2像素的黄绿色实线边框；文本对齐方式为居中对齐。四 项目拓展第二步h3padding:10px;tablewidth:500px;font-size:12px;th,tdpadding:3px;thtext-align:right;.textInputwidth:150px;height:20px;border:1px solid#58805f;.textStyleborder:1px solid#58805f;.submitButwidth:100px;height:25px;margin:10px;font-weight:bold;border:2px soli
6、d#abd8b3;设置了标题h3的样式，内边距为10像素。设置了标题行单元格th，普通单元格的样式td内边距为3像素。设置了标题行单元格th的样式，文本右对齐。设置了表格table的样式，宽为500像素，字号为12像素。设置了类名为.textInput的姓名输入框和email地址框的样式，宽为150像素，高为20像素，边框为1像素的青色实线边框。设置类名为.textStyle的文本框边框为1像素的青色实线边框。设置了类名为.submitBut的按钮的样式宽为100像素；高为25像素；外边距为10像素；文字加粗；边框为2像素的青色实线边框。四 项目拓展第三步 几个有关Web标准的问题 帮助我们更
7、好的了解您对Web标准网页设计的想法与看法 您是否曾使用表格式布局？是 否 您是否开始使用CSS布局？是 否 body标签内的HTML代码输入如下：表格的第一行，第二个单元格中是一个单选按钮组，name值为“c1”。表格的第二行，第二个单元格中是一个单选按钮组，name值为“c2”，包含两个单选项。四 项目拓展第三步 是否订阅CSS邮件？是的 您所从事的行业：设计师 程序员 总监 美术编辑 项目经理 表格的第三行，第二个单元格中是一个复选框。表格的第四行，第二个单元格中是一个下拉列表框。四 项目拓展第三步 请留下您的姓名：请留下您的Email地址：请留下您的建议：表格的第五行，第二个单元格中是
8、一个文本框，用于输入姓名。表格的第七行，第二个单元格中是一个多行文本输入框，用于输入建议。表格的第六行，第二个单元格中是一个email地址输入框。定义了提交按钮。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了银行注册页面和用css样式修饰过的调查问卷页面，学习了HTML中表单、各种表单元素以及一些高级属性的应用，也学习了一些CSS样式的新用法。五 项目小结本项目知识点总结如表所示。标签标签属性属性说明说明formname表单名称action表单提交地址method提交表单的HTTP方法，
9、取值为get或posttarget目标显示方式：_self、_blank、_parent、_topenctype编码方式inputtypetext单行文本框password密码checkbox复选框radio单选按钮button普通按钮submit提交按钮reset重置按钮image图像域file上传按钮hidden隐藏字段URLURL地址输入框emailemail地址输入框date 日期选择框time时间选择框number数字输入框range滑条控件required必填项textarearows文本框的高度cols文本框的宽度selectselected下拉列表选中项value值六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise5.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成项目实施中网上银行注册页面的实例操作。2.上机完成项目拓展中调查问卷的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End