高中信息技术 中图版必修一4.3 尝试程序开发(共22张PPT)

(共22张PPT)
尝试程序开发
网页特效
界面设计
交互操作
一、HTML文档的简单编辑
分析一下游戏网页由哪些部分组成及其实现了什么功能？
一个思考：代码和网页有什么关系？
这些代码有什么特点？
问题1
它们有什么共性元素？
问题2
对比两个源文件，并把相同结构摘录下来，存储
到记事本文件“结构”中，并提交文件。
活动1：观察两个源文件，回答两个问题
HTML文档是一种超文本标记语言。
通过查看网页源文件的方式，打开游戏网页的源文件和game.html网页的源文件
，思考下面两个问题
这些代码有什么特点？
问题1
1.都在”<
>”里。
2.大多都是成对出现的。
3.结束标记都比起始标记
多出一个“/”。
它们有什么共性元素？
问题2
html文件的开始
头元素（网页标题）
体元素（网页主题内容）
html文件的结束
HTML文档的基本结构
运用口诀巧记忆
分析game.html界面中存在的问题？
活动2：修改文字、图片设置
了解文字和图片的相关属性代码
任务1：了解文字元素的相关属性代码
任务2：了解图片元素的相关属性代码
启动Dreamweaver
的拆分视图，打开game.html，
完成以下两个任务。
活动3：修改超级链接
了解超级链接的相关属性代码
1.根据学案自学
2.找出超级链接代码
3.修改链接代码的网页地址
4.实现与game1.html的链接
拓展任务
学有余力的同学可以继续修改game1.html和game2.html文件
的文字、图片、超级链接的相关属性代码设计个性网页。
单击网页中文字（
）的任意位置，
找到超级链接的元素（
）
修改代码实现与game1.html的超级链接。
下一关
href=”game.asp“>下一关
HTML元素
含义
文字


“color”
“face”
“size”
字体标记
设置文字的颜色
设置文字的字体
设置文字的大小
图片
src=“
”>
“width”
“height”
插入一个图像文件
设置图片的宽度
设置图片的高度
超级
链接
href=“
”>

链接标记
活动1：回答两个问题
活动2：修改文字、图片
活动3：修改超级链接
HTML文档的基本结构
基本HTML元素及属性
总结与检测
一个思考：代码和网页有什么关系？
网页的本质就是超文本标记语言HTML写成的纯文本文件
。
活动一：赏析网页特效
思考：网页特效在表达中发挥了什么作用？
二、网页特效程序揭秘
我们如何利用技术
网页特效要为主题表达服务
网页是用html语言编写的文档
网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。
Javascript是一种脚本语言,它可以嵌入到Html中,发挥特有的魔力,让我们的网页变得更生动。
活动二：探秘特效程序“小精灵”
自顶向下，逐步求精
顺序结构
language="javascript">
now=new
Date(),hour=now.getHours()
var
chName;var
agent;var
Merlin;
chName="Merlin";
agent=new
ActiveXObject("Agent.Control.2");
agent.Connected
=
true;
agent.Characters.Load(chName,chName+".acs");
Merlin=agent.Characters(chName);
//Merlin出现
Merlin.MoveTo(200,250);
Merlin.Show();
//Merlin问候,时间小于12:00问候
if(hour
<
12)
{Merlin.Speak("上午了~~");}else
{Merlin.Speak("已经下午了~~
")}
//Merlin动作表达
Merlin.Play("Announce");
Merlin.Speak("给你个东东~~");
Merlin.Play("Search");
for(var
i=1;i<=3;i++)
{Merlin.Play("GestureLeft");
Merlin.Speak(“选择页面上的【是】才能送你哦~~
"
);}
//Merlin离开
Merlin.MoveTo(500,250);
Merlin.Speak("哎！走喽~~
你居然没上当！"
);
Merlin.Play("Idle3_1");
Merlin.Hide();

自顶向下，逐步求精
我们日常生活学习中，完成一项任务或是解决一个问题时，也是按照这种方法进行的。将一个复杂问题分解成一个个小的问题，先规划出框架，然后再逐步细化，这种策略很管用。
分支结构
判断
聪明了
按照人的指令执行
if(hour
<
12)
{Merlin.Speak("上午了~~");}else
{Merlin.Speak("已经下午了~~
")}
循环结构
计算机代替人类完成重复性的复杂的工作
for(var
i=1;i<=3;i++)
{Merlin.Play("GestureLeft");
Merlin.Speak(“选择页面上的【是】才能送你哦~~
"
);}
“顺序结构
分支结构
循环结构
”
综合运用这三种结构，可以解决很多复杂的问题。
Javascript是一种程序设计语言
Basic
C
Java
......
谢谢！