2.2 Web界面设计 信息工程系 向模军 Tel: Email: QQ: 13684285460 xmj.cn@163.com 156638267
1 任务引入 任务分组 学生自由组合，四个左右学生组成一个任务组，每个任务组选出一名组长。组长除参加任务外，负责组员间的分工协调、必须认真、如实填写学生任务执行报告。并上传提交任务报告等。 布置任务 参照腾讯QQ免费申请过程，利用Dreamweaver设计出类似Web页面。具体要求另外有二：①外联CSS统一控制页面样式；②利用JavaScript验证表单数据。 2/10
2 任务讨论 HTML是否有必要学习？ 制作工具：FrontPage?DreamWeaver? 格式控制：CSS? 表单验证：JavaScript?AJAX? 3/10
3.1 HTML HTML（Hypertext Markup Language）即超文本标记语言，是 一种描述 Web 文档的内容的语言。 <HEAD>标头区开始 <TITLE>...</TITLE> 标题区 …[CSS] …[JavaScript] </HEAD>标头区结束 <BODY>正文区开始 …网页内容 </BODY> 正文区结束 </HTML> 文件结束 4/10
3.2 CSS CSS是Cascading Style Sheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和JavaScript等浏览器端脚本语言合作做出许多动态的效果。 ①内嵌样式(Inline Style)； <style type="text/css"> /*符合CSS语法结构的CSS语句，例如*/ </style> ②内部样式表(Internal Style Sheet)； <标签 style="符合CSS语法结构的CSS语句"> ③外部样式表(External Style Sheet)。 <link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" /> 5/10
3.3使用JavaScript表单验证 <form name="myfrm" LANGUAGE="javascript" onsubmit="return f_submit()" > <script language="javascript"> function myfrm_submit(){ if(document. myfrm.nick.value==""){ window.alert("对不起，昵称不能为空");//弹出警告提示 document.myfrm.nick.focus(); //光标聚焦在nick表单控件 return false; //返回假，表单不提交 } …//其他表单控件判断 </script> 6/10
3.4 Dreamweaver表单设计 7/10
4 任务实施 登录页面截图 密码修改页面截图 注册页面截图 8/10
5 任务点评 任务执行情况 未完成原因分析 总体评价 Web界面设计任务，学生完成情况比较良好，10个任务组中，9个任务组基本完成了本任务，但总体感觉不是很好，主要是页面布局和美工处理等方面不够完美。1个任务组未完成相关Web页面设计。 未完成原因分析 原因有二：①Dreamweaver软件运用不够熟练；②可能过于追求美工，参照网络资源花费了太多时间。经该组下来的业余时间的“加班”，经指导调试，全部通过测试。 总体评价 任务执行情况良好，达到了预期目标，为下一个任务的顺利执行做好了必要的铺垫。 9/10
Thank You !