网页网站制作策划

1《网页设计与制作》课第4单元课程单元教学设计单元名称:__制作表单_所属系部:电子信息工程学院___制定人:唐海和_制定时间:2017.
8日照职业技术学院2《网页设计与制作》课程单元教学设计单元名称制作表单学时6工作任务表单设置交互网页任务描述学习表单的相关知识,并用表单设置交互网页知识目标熟悉表单基本语法各种表单的使用能力目标熟练学习表单知识熟练掌握各种表单的代码熟练制作交互页面教学过程教学实施教学方法实际项目导入新课引入:怎样让在网页交互设疑导入确定任务分析表单的作用及制作方法案例教学法任务实施注册界面的学习案例教学法3登录页面的制作案例教学法注册会员网页制作案例教学法任务检查展示网页作品,互相讨论分析网页中用到的表单知识讨论法任务评估根据网页制作完成情况,学生进行自我评价或同学进行互评分析评价咨询学习(1)了解表单(2)了解交互页面讨论法教学内容【任务4-1】制作用户注册网页【任务描述】(1)在网页文档0401.
html中插入1个表单域.
(2)在表单域中插入1个9行3列的表格.
(3)在表格中插入6个单行文本域.
(4)在表格中插入2个密码文本域.
(5)在表格中插入2按钮.
(6)在表格中插入1个下拉式菜单.
(7)在表格中插入1个单选按钮组.
(8)在表格中插入1个复选框.
(9)在表格中插入1个图像域.
【任务实施】1.
打开网页文档0401.
html直接打开文件夹4-1中的网页文档0401.
html,也可以重新创建1个网页文档0401.
html.
2.
插入表格域3.
设置表单域的属性4.
在网页中插入表格5.
插入单行文本域6.
插入表单按钮7.
插入下拉式菜单8.
插入单选按钮组9.
插入复选框10.
插入图像域11.
保存网页与浏览网页效果4【任务4-2】制作用户登录网页【任务描述】(1)在网页文档0402.
html中插入1个表单域.
(2)在表单域中插入1个3行2列的表格.
(3)在表格中插入1个文本域.
(4)在表格中插入1个Spry验证密码.
(5)在表格中插入1个图像域.
【任务实施】1.
打开网页文档0402.
html直接打开文件夹4-2中的网页文档0402.
html,也可以重新创建1个网页文档0402.
html.
2.
插入表单域3.
在网页中插入表格4.
插入文本域5.
插入Spry验证密码域6.
插入图像域7.
保存网页与浏览网页效果5【任务4-3】美化用户注册网页【任务描述】(1)创建外部样式文件04global.
css,在该样式文件中定义必要的CSS样式.
(2)创建外部样式文件04main.
css,在该样式文件中定义必要的CSS样式.
(3)创建网页文档0403.
html,该网页中所包含的内容与网页0401.
html类似,网页0403.
html主要应用CSS样式对表格、单元格和表单控件进行美化.
(4)编写代码实现以下功能:浏览网页时,当鼠标指针指向"用户名"和"密码"文本框时,该文本框自动获取焦点,并且文本框的背景颜色和边框颜色自动改变.
当鼠标指针离开该文本框,则自动恢复默认的背景颜色和边框颜色.
(5)编写代码实现以下功能:游览网页时,在"字符"文本框中单击时,该文本框获取焦点且背景颜色和边框颜色自动改变.
当该文本框失去焦点时,则自动恢复默认的背景颜色和边框颜色.
【任务实施】1.
创建外部样式文件04global.
css2.
创建外部样式文件04main.
css3.
创建网页文档0403.
html4.
保存网页与浏览网页效果6【任务4-4】美化用户登录网页【任务描述】(1)创建外部样式文件04common.
css,在该样式文件中定义必要的CSS样式.
(2)创建外部样式文件04user_login.
css,在该样式文件中定义必要的CSS样式.
(3)创建网页文档0404.
html,该网页中所包含的内容与网页0402.
html类似,网页0404.
html主要应用CSS样式对表格、单元格和表单控件进行美化.
【任务实施】1.
创建外部样式文件04common.
css2.
创建外部样式文件04user_login.
css3.
创建网页文档0404.
html4.
保存网页与浏览网页效果保存网页0404.
html,然后按快捷键F12浏览该网页,其浏览效果如下图所示.
7