《JavaSE项目实践》教案Word格式文档下载.docx
- 文档编号:20893245
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:17
- 大小:1,008.80KB
《JavaSE项目实践》教案Word格式文档下载.docx
《《JavaSE项目实践》教案Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《《JavaSE项目实践》教案Word格式文档下载.docx(17页珍藏版)》请在冰豆网上搜索。
演示利用HTML写的网页的效果;
讲解每一步的实现过程;
让学生自己使用HTML实现网页效果;
对学生的练习进行辅导。
四、实训注意事项
1、HTML标签的配对与嵌套
2、把记事本文件存为网页形式需注意后缀为“htm”或“html”
五、实训内容及步骤
1、打开记事本,新建一个文件,另存为“1.htm”;
2、输入HTML结构,然后在InternetExplorer中查看;
3、在网页中使用表格(在body中使用标签生成表格)
<
tablewidth="
90%"
border="
1"
>
tr>
tdcolspan="
3"
align="
center"
现有商品<
/font>
/td>
/tr>
td>
商品名称<
单价<
现有数量<
P4处理器3.0G<
850.00元<
10台<
LG17寸彩显<
1050.00元<
3台<
/table>
网页效果
4、在网页中使用其它标签
1)换行<
br>
2)产生水平线<
hr>
3)段落<
p>
.......<
/p>
4)设置文本属性
<
fontcolor="
#990066"
size="
face="
华文行楷"
......<
5)设置文本样式
·
加粗<
b>
/b>
·
倾斜<
i>
/i>
6)图像
<
imgsrc="
xk.jpg"
width="
300"
height="
200"
7)、超链接
<
ahref="
"
target="
_blank"
网易<
/a>
#"
kk.jpg"
六、实训结果提交与成绩评定
1、提交一个用HTML标签书写的网页
七、实训小结
HTML是网页制作的基础,给学生展示代码建立网页,主要让学生理解网页的基础,使学生掌握网页制作与Office办公软件的区别。
第2周周二3—8、周三3—4、周四5—10、周五1—2
讲解利用Dreamweaver进行静态页面的制作
1、掌握使用Dreamweaver建立新站点的方法
2、掌握站点的管理方法
3、掌握站点的发布
通过对工具软件Dreamweaver的操作,制作出完整的静态页面
了解静态网页的含义
实训2:
使用Dreamweaver建立和管理站点
连接着Internet的计算机、Dreamweaver8.0、LeapFTP、示例站点
演示站点的优点;
讲解站点建立、管理与网站发布的过程;
让学生自己站点建立、管理与网站发布;
四、实训注意事项
1、展示现成的网站(),并讲解实现的基本步骤,让学生对网站有一个初步的认识。
2、使用Dreamweaver创建站点。
使用(站点新建站点),顺着步骤一步一步设置,并讲解第一步的选项的意义,完成后让学生自己练习,每人建立一个站点。
3、在站点目录中,拷贝一个现成的站点,讲解站点的优势。
在站点的界面下修改文件名,站点自动更新链接。
4、申请网页空间。
对于学生来讲,租用空间和域名需要出钱,所以可以申请免费空间,让学生学会管理网站。
利用现有的提供免费空间的站点,演示站点的申请并让学生自己申请()。
5、上传站点。
利用免费申请获得的用户名和密码,使用FTP上传站点,首先采且传统的FTP的方法(说明该方法的缺点:
伟输速度慢、不支技断点续传),然后使用LeapFTP工具来上传站点。
6、查看网站最终效果。
1、使用Dreamweaver创建MyWeb站点。
2、申请免费空间,绑定个性域名,并用LeapFTP上传示例站点,查看最终效果。
建立了站点,对以后的学习会带来很大的方便,比如链接,站点内的链接,会自动变成相对路径,而且有了站点,对于引用站点里的资源会带来很大方便等等。
有了免费空间后,学生可以上传自己完成的网页,对于资料的收集、整理,个人作品的展示很有意义。
第2周周六1—6、周日1—8
14
通过设置表格的宽度、高度和比例大小等属性,把不同的网页元素分别固定在不同的单元格之中以达到页面的平衡。
1、掌握网页设计的一般流程
2、掌握使用表格布局网页的方法
3、通过分析制作网页,提高对表格在排版中的应用能
学会分析网页中各表格的结构,并能学着制作相似的网页
表格中图片保存
实训3:
使用表格布局网页
Dreamweaver,网页效果图
“演示、讲解、练习、辅导”相结合:
演示页面最终效果;
讲解页面元素的功能和实现方法;
让学生自己实现页面效果;
使用表格做网页布局时,应该把网页的表格单元格边距、单元格填充和边框参数都设置为0,
内嵌表格的宽度一般设置为百分比。
1、演示网页最终效果
2、讲解网页设计步骤
✧设计网页效果图
✧把效果图做切片
✧使用表格把切片布局为网页(一般把图片做成表格背景)
✧使用表格布局控制网页内容元素的位置
3、利用Photoshop制作网页效果图并做切片
4、利用表格把切片布局成网页
5、使用内嵌表格控制页面元素位置,制作完整的网页
具体代码如下:
HTML>
HEAD>
METAhttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
TITLE>
小结编程3<
/TITLE>
/HEAD>
BODY>
TABLEwidth="
600"
0"
TR>
TDwidth="
rowspan="
2"
IMGsrc="
images/logo.gif"
250"
40"
/TD>
100"
images/banner_1.gif"
51"
24"
images/banner_2.gif"
images/banner_3.gif"
73"
/TR>
TDcolspan="
left"
您好,欢迎来淘宝!
Ahref="
[免费注册]<
/A>
/TABLE>
/BODY>
/HTML>
设计或下载一个网页效果图,切片后,利用表格布局并添加页面元素,制作成网页并提交
表格布局是网页设计中最常用的方法,使用表格布局网页效果图,可以制作出风格统一、精美的网页
第3周周二3—8、周三3—4、周四5—10、周五1—2
16
1、创设情况课堂引入
2、表单网页的形式
3、如何制作表单网页
1、掌握网页中表单的使用
2、学会根据实际情况使用表单中各种元素
1、表单网页的概念
2、表单网页的制作方法
对页面添加表单
实训4:
使用交互式表单
Dreamweaver
动态网站技术很多需要使用到表单,在做表单实训时,不仅需要使用鼠标操作,还需要学会使用代码实现。
在表格布局中,要把行高调小时,需要删除表格行代码中的:
&
nbsp;
1、演示使用表单制作的注册页面
2、新建一个静态网页,使用“插入表单表单”或表单面板中的相应按钮,插入一个表单
3、使用表格布局,并插入表单元素,建立如下的网页:
表单小结<
BODYbgcolor="
#FFCCFF"
center>
Palign="
FONTsize="
5"
申请表<
/FONT>
/P>
FORMname="
form1"
method="
post"
action="
姓名:
INPUTtype="
text"
BR>
密码:
password"
21"
感兴趣的职位:
radio"
name="
CONTROL1"
value="
checked>
Web设计
>
Web开发<
其他要求:
TEXTAREAname="
CONTROL3"
cols="
26"
rows="
包括薪水待遇、工作地点等。
/TEXTAREA>
INPUTname="
CONTROL4"
type="
checkbox"
发送确认信息<
经验:
SELECTname="
CONTROL2"
OPTION>
无经验<
/OPTION>
3年<
/SELECT>
&
submit"
submit1"
提交"
reset"
reset1"
重置"
/FORM>
/center>
提交用户注册网页
表单的开发分为两部分:
一是具体在网页上制作的表单项目,这一部分称为前端,主要在Dreamweaver中制作;
另一部分是编写处理表单信息的应用程序,这一部分称为后端,如:
ASP、PHP、JSP等。
本实训制作的是前端的设计,后台的开发将在网络程序开发中具体介绍。
第3周周六1—6、周日1—8
1、CSS样式的功能
2、三种类型样式的基本操作
3、利用样式表的导出和链接来设计网站的所有网页
1、掌握CSS的基本写法
2、掌握使用CSS改变图片的整体效果的方法
3、掌握使用CSS制作动感的链接效果的方法
4、掌握使用CSS制作数字水印的方法
1、运用三种类型的样式设计网页
2、掌握样式表的导出和链接,并在网站设计中的运用
理解三种类型CSS样式的区别,灵活应用
对已做好的静态页面进行美化
实训5:
使用CSS制作网页特效
2、掌握使用CSS改变图片的整体效果的方法(灰度图与彩图的转换)
3、掌握使用CSS制作动感的链接效果的方法
4、掌握使用CSS制作数字水印的方法
5、掌握使用CSS改变网页浏览鼠标光标的方法
1、CSS的类名定义和使用区分大小写(但CSS的属性和值不分大小写)
2、涉及到颜色值时需要加“#”
3、CSS语句间用“;
”分隔(最后一个分号可以省略)
4、CSS属性的数值和单位间不能有空隔
5、属性值尽量不加双引号
6、多个属性值共存(复选)时,用空格分开
1、使用CSS改变图片的整体效果
新建一个网页,插入多张彩色图片
修改<
img>
样式表
styletype="
text/css"
!
--
img{
filter:
gray();
}
-->
/style>
使用图片所有图片变成灰度图:
2、使用CSS制作动感的链接效果
新建一个页面,制作两个超级链接,在CSS面板中新建高级样式,分别对a:
link、a:
visited、a:
hover、a:
active做简单的字体颜色和修饰,每个采用不同的效果,然后浏览页面。
CSS中的代码可以参考:
a:
link{
font-size:
14px;
color:
#0000FF;
text-decoration:
none;
visited{
#CC6633;
hover{
font-weight:
bold;
#FF0000;
underline;
active{
#999900;
3、使用CSS实现数字水印效果
使用Photoshop制作水印图片,命名为“1.jpg”
把图片文件“1.jpg”拷贝到Images中,新建一个网页,输入一些文本内容,在网页代码中加入重定义body:
body{
background-attachment:
fixed;
background-image:
url(Images/1.jpg);
background-repeat:
no-repeat;
background-position:
centercenter;
浏览网页时会发现水印图片一直作为背景停留在页面中间。
4、使用CSS改变网页浏览鼠标光标
新建一个网页,输入一些文本内容,在C:
\Windows\Cursor中拷贝一个光标文件“1.ani”放在Images中,在网页代码中加入重定义body,
body
{
cursor:
url("
Images/1.ani"
)
浏览网页时会发现鼠标光标发生了变化。
注意:
鼠标光标支持的文件格式有:
ico、cur、ani。
1、提交使用CSS改变图片效果的页面
2、提交使用CSS制作的动感链接的页面
3、提交使用CSS制作的水印效果的页面
4、提交使用CSS制作的改变网页浏览鼠标光标效果的页面
本次实训中,通过四个实验项目,使学生掌握CSS的常用功能。
灵活的运用CSS样式,可以设计站点的不同风格。
第4周周二3—8、周三3—4、周四5—10
1、为什么要学习JavaScript
2、JavaScript的基本语法
3、自定义函数
1、掌握脚本的基本结构
2、熟悉JavaScript语言的基本语法
3、熟练掌握高级语法-自定义函数function
1、JavaScript的基本语法
2、自定义函数的使用
自定义函数的参数传递
页面中加入动态效果
实训6:
在网页中插入JavaScript
1、掌握JavaScript的基础知识
2、掌握在网页中插入JavaScript的方法
1、JavaScript不容易调试,在写代码时需格外注意
2、JavaScript区分大小写
1、演示在网页中插入JavaScript的网页效果。
2、在HTML中嵌入JavaScript
新建一个普通网页,在<
body>
/body>
中嵌入如下的JavaScript代码:
scriptlanguage="
javascript"
document.write("
Hello,JavaScript"
);
window.alert("
欢迎光临!
/script>
网页效果如下:
3、链接脚本文件
新建一个Javascript文件,命名为text.js,输入以下内容:
新建一个基本的HTML页面,在<
中使用:
scripttype="
text/javascript"
src="
test.js"
4、在标记内添加脚本
新建一个页面,在页面中插入表单,然后插入一个按钮,在按钮中添加JavaScript代码:
onClick=“JavaScript:
window.alert(‘欢迎光临’)”
提交三种在网页中插入JavaScript的页面
JavaScript是一种能让网页更加生动活泼的描述语言,也是目前网页设计中最容易学又最方便的语言。
用户可以利用JavaScript轻易地设计出亲切的欢迎信息、漂亮的数字时钟,有广告效果的跑马灯及简单的选举票单,还可以显示浏览器停留的时间。
..
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaSE项目实践 JavaSE 项目 实践 教案