文档介绍：本文由du66208642贡献
Author: seo
巧用 DW 制作拼图游戏
字数:1727 字号:大中小
?
?
摘要:Dreamweaver 是集网页制作和管理网站于一身的所见即所得的网页编辑器,利用 Dreamweaver 可轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。本文就利用 Dreamweaver 这个经典利器来制作拼图游戏。关键词:网页制作层拼图游戏
中图分类号: 文献标识码:B 文章编号:1002-2422(2010)02-0104-02
在浏览网页时, 经常发现网页上的某些图片(或文字)可以用鼠标随意拖动, 特别是一些拼图类简单游戏,更增添了网页无穷乐趣。下面就用 DW 来制作一个简单的拼图游戏,相信
Author: seo
Author: seo
你跟着做完后,会发出这样的感叹:制作是如此简单啊。
准备阶段
准备图片若干张(能拼成一张大图),如没有可用 PS 进行切片操作,操作步骤如下: (1)启动 PS,打开一张图片,如图 1 所示。选切片工具,右击图片,选“划分切片”命令,将水平、垂直各划分为三等分,如图 2 所示。
(2)单击“确定”按钮,如图 3 所示。再单击“文件一存储为 WEB 和设备所用格式”命令,如图 4 所示。弹出“文件一存储为 WEB 和设备所用格式”对话框,如图 5 所示。在对话框中,选择预设类型,如“JPG 高”,再单击“存储”按钮,弹出“将优化结果存储为”对话框,如图 6 所示。选择保存类型“HTML 和图像”,选择好存储位置并输入文件名,最后单击“保存”按钮,即可完成图片切片工作。
制作阶段
(1)启动 DW,新建一网页文档,根据切片图片的大小和数量建立表格(本题为 3 行 3 列, 单元格大小为 117×96 象素), 同时将一张切片图片插入到表格合适位置(本题为左上角, 主要用于图片的定位),如图 7 所示。为显示其他切片图片,需要再制作一表格,为便于布局,
Author: seo
Author: seo
建议将两表格制作成一表格(本题表格为 3 行 8 列, 大小为 850×288 象素, 存放图片的单元格大小为 117x96 象素,单元格间距、边距、边框均为 0),如图 8 所示。
(2)制作活动图形。为便于说明,将用于显示活动图片的位置编号,如图 9 所示(因使用拖动层命令,建议使用 DW 8)。在单元格编号为“1”的位置插入层(名称“Lay-erl”,大小为 117×96 象素,位置与单元格重叠), 如图 10 所