网页制作教程——使用PS和DW制作拼图游戏
使用Photoshop和Dreamweaver制作拼图游戏：
第一步：选择图片，调整图片大小。
注：图片大小最好调整到小一些，便于拼图的制作。
启动photoshop，打开图片，'图像’菜单——图像大小，调整宽度和高度像素值。
第二步：图片切片。
第三步：保存切片后的图片。
文件——存储为web和设备所用格式——存储，存储后文件夹中有一个网页文件和一个images文件夹。
第四步：制作拼图游戏网页。
A、启动dreamweaver，新建网页。
B、插入——布局对象——层，设置层大小与图像大小一致。此层为背景层。
C、再依次插入4个层，并分别将4张图片插入到每个层中，调整层大小与图像大小相等。
D、将插入图片的4个层拖动到背景层上将4张图片拼成一张，调整好每个层的位置。
第五步：为层添加行为特效，实现拼图效果。
A、单击”窗口”菜单——行为，打开”行为”面板。
B、选中拼图层上的第一张图片（一定注意是选中图片）（确定所在层的层编号），单击行为面板的“加号”，选择“拖动层”行为。 C、在弹出的“拖动层”对话框中进行如下设置。
D、如下图，在行为面板上单击刚刚添加的行为的事件下拉菜单，选择onload事件。
E、（其他3个层上的图片也分别进行C,D两步操作）。 完成以上操作后，再将四个图片所在层，移动到相应位置（即拼图游戏的初始位置）。
最后一步，保存网页，在浏览器中预览，拼图游戏就做好了！试试吧！
dw实训内容
DW实训内容
Dreamweaver（DW）是一款常用的网页制作软件，它可以帮助用户快速地创建和编辑网页。在DW实训中，学生将学习如何使用DW来设计和开发网站，并掌握一些基本的HTML和CSS知识。
一、DW实训的目的
DW实训的目的是帮助学生掌握以下技能：
1. 使用DW创建和编辑网页；
2. 掌握HTML和CSS基础知识；
3. 设计和开发简单的网站；
4. 理解网页设计原则。
二、DW实训的内容
1. DW界面介绍
在DW实训中，首先需要了解DW界面。DW界面分为多个区域，包括工具栏、菜单栏、文件管理器、属性窗口等。学生需要了解每个区域的作用，并熟悉常用工具和功能。
2. HTML基础知识
HTML是网页制作中最基础的语言之一，学生需要了解HTML标签、元素、属性等基本概念，并能够编写简单的HTML代码。在实际操作中，学生将使用DW自动生成HTML代码，并进行修改。
3. CSS基础知识
CSS是控制网页样式和布局的语言，它可以帮助用户美化页面并提高用户体验。在DW实训中，学生需要了解CSS的基本概念和语法，并能够编写简单的CSS代码。同时，学生还需要了解如何将CSS样式应用到HTML元素中。
4. 网页设计原则
网页设计原则是指在设计网站时应该考虑的一些因素，包括布局、颜色、字体等。在DW实训中，学生需要了解这些原则，并尝试应用到自己的网站设计中。
5. 网站开发实践
在掌握了基本的HTML和CSS知识后，学生将开始进行网站开发实践。这包括创建网页、添加文本、图片、链接等元素，并使用CSS样式美化页面。学生还需要考虑页面布局和导航等因素。
6. 网站发布与维护
完成网站开发后，学生需要将其发布到互联网上，并进行维护和更新。在DW实训中，学生将学习如何使用FTP上传网站文件到服务器上，并了解如何定期更新和维护网站。
三、DW实训的要求
1. 学习认真
DW实训是一项需要认真对待的任务，学生应该全神贯注地听课并积极参与讨论。同时，在课下也要认真复习和巩固所学知识。
第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。
一、Dreamweaver8 的操作环境
在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。
新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏
启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia
Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2、菜单栏
Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。
第十三讲 网页中的动感元素
授课日期
班级名称
授课地点
教学课题 第十三讲 网页中的动感元素
课时 2学时
教学目的 （1）了解flash文件的类型。
（2）掌握在网页中插入flash动画和设置其属性的操作方法。
（3）掌握在网页中插入flash按钮和设置其属性的操作方法。
（4）掌握在网页中插入flash文本和设置其属性的操作方法。
知识目标 （1）flash文件的类型。
（2）在网页中插入flash动画和设置其属性。
（3）在网页中插入flash按钮和设置其属性。
（4）在网页中插入flash文本和设置其属性。
能力目标 （1）制作网页的动感效果
素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。
重点 插入Flash动画、按钮、文本
难点 插入Flash动画、按钮、文本
课型 讲授型＋操作型
教学方法 以案例教学为主，讲练结合
教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社
教学环节
及
板书设计 时间安排
(分钟)
1．复习提问
使用模板和库有哪些优点？ 2
2．新课引入
在网页中除了可以使用文本和图像元素表达信息外，还可以向其中插入Flash动画、JavaApplet小程序、ActiveX控件等多媒体元素，以丰富网页的效果，使网页更加生动。 3
3．项目展示
插入了flash动画的网页浏览效果 5
4．知识技能目标说明 5
5．详细讲解各知识点
45
6．问题探讨
除了使用Flash元素实现网页动感效果，还有没有其他方法实现网页动感效果？怎样设置网页过渡效果？ 10
7．课堂实践
10
8．疑难解析
5 9.课堂小结
网页中可以插入多种形式的多媒体对象，包括flash动画、flash按钮、flash文本、flash视频和Shockwave影片等，这些对象都为网页增加动感效果，吸引浏览者眼球。Dreamweaver
