Download presentation
Presentation is loading. Please wait.
1
2.2 Web界面设计 信息工程系 向模军 Tel: Email: QQ:
2
1 任务引入 任务分组 学生自由组合,四个左右学生组成一个任务组,每个任务组选出一名组长。组长除参加任务外,负责组员间的分工协调、必须认真、如实填写学生任务执行报告。并上传提交任务报告等。 布置任务 参照腾讯QQ免费申请过程,利用Dreamweaver设计出类似Web页面。具体要求另外有二:①外联CSS统一控制页面样式;②利用JavaScript验证表单数据。 2/10
3
2 任务讨论 HTML是否有必要学习? 制作工具:FrontPage?DreamWeaver? 格式控制:CSS?
表单验证:JavaScript?AJAX? 3/10
4
3.1 HTML HTML(Hypertext Markup Language)即超文本标记语言,是 一种描述 Web 文档的内容的语言。
<HEAD>标头区开始 <TITLE>...</TITLE> 标题区 …[CSS] …[JavaScript] </HEAD>标头区结束 <BODY>正文区开始 …网页内容 </BODY> 正文区结束 </HTML> 文件结束 4/10
5
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
6
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
7
3.4 Dreamweaver表单设计 7/10
8
4 任务实施 登录页面截图 密码修改页面截图 注册页面截图 8/10
9
5 任务点评 任务执行情况 未完成原因分析 总体评价
Web界面设计任务,学生完成情况比较良好,10个任务组中,9个任务组基本完成了本任务,但总体感觉不是很好,主要是页面布局和美工处理等方面不够完美。1个任务组未完成相关Web页面设计。 未完成原因分析 原因有二:①Dreamweaver软件运用不够熟练;②可能过于追求美工,参照网络资源花费了太多时间。经该组下来的业余时间的“加班”,经指导调试,全部通过测试。 总体评价 任务执行情况良好,达到了预期目标,为下一个任务的顺利执行做好了必要的铺垫。 9/10
10
Thank You !
Similar presentations