Presentation is loading. Please wait.

Presentation is loading. Please wait.

2.2 Web界面设计 信息工程系 向模军 Tel: QQ:

Similar presentations


Presentation on theme: "2.2 Web界面设计 信息工程系 向模军 Tel: QQ:"— Presentation transcript:

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 !


Download ppt "2.2 Web界面设计 信息工程系 向模军 Tel: QQ:"

Similar presentations


Ads by Google