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