XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 06表单的应用与美化.doc

《XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 06表单的应用与美化.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、教学单元6　表单的应用与美化教学单元6　表单的应用与美化【教学要点】（1）熟悉XHTML中常用的表单标签（2）学会使用CSS样式控制表单及表单控件的版式（3）了解表单的布局控制【6.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（3）创建名称为“06表单的应用与美化”的本地站点【任务6-1-1】创建网页0601.html【任务描述】（1）创建样式文件0601common.css和main0601.css，在这些样式文件中定义标签及选择符的样式属性。（2）创建网页文档0601.html，且链接外部样式文件0601co

2、mmon.css和main0601.css。（3）对网页0601.html的页面进行布局设计，在网页中插入表单和表单控件。网页0601.html的浏览效果如图6-1所示。图6-1　网页0601.html的游览效果【实施过程】1．操作准备（1）创建文件夹（2）DreamweaverCS3初始参数设置2．建立公共样式文件0601common.css，定义标签样式属性5教学单元6　表单的应用与美化3．建立样式文件，定义样式4．新建网页文档0601.html5．链接外部样式文件main0601.css6．对网页的页面进行布局7．在网页中插入表单和表单控件在网页0601

3、.html中插入表单、1个单行文本域、1个按钮和2个密码文本域，然后输入相应的文字。8．保存网页9．浏览网页效果【任务6-1-2】创建网页0602.html【任务描述】（1）创建样式文件main0602.css，在该样式文件中定义标签及选择符的样式属性。（2）创建网页文档0602.html，且链接外部样式文件main0602.css。（3）对网页0602.html的页面进行布局设计，在网页中插入表单和表单控件。网页0602.html的浏览效果如图6-5所示。图6-5　网页0602.html的浏览效果【实施过程】1．新建文件夹，准备图像文件2．建立样式文件mai

4、n0602.css，定义样式3．新建网页文档0602.html4．链接外部样式文件main0602.css5．对网页的页面进行布局6．在网页中插入表单和表单控件在网页0601.html中插入表单、菜单、单行文本域和单选按钮，然后输入相应的文字。7．保存网页8．浏览网页效果【任务6-1-3】创建网页0603.html【任务描述】5教学单元6　表单的应用与美化任务6-3为考核评价项目，请独立完成以下操作任务：创建如图6-8所示的网页0603.html。图6-8　网页0603.html的浏览效果【实施过程】1．新建文件夹，准备图像文件2．建立样式文件main0603

5、.css，定义样式3．新建网页文档0603.html4．链接外部样式文件main0603.css5．对网页的页面进行布局切换到“代码视图”，在网页0603.html代码区域的与之间输入表6-13所示的XHTML代码。表6-13　网页0603.html布局结构的XHTML代码行号XHTML代码123