DW网页制作—交换图像
- 格式:pdf
- 大小:757.25 KB
- 文档页数:6
80040e10 - COUNT 字段不正确当您在 Web 浏览器中预览包含“插入记录”服务器行为的页并尝试使用它在Microsoft Access 数据库中插入记录时,此错误会出现。
您可能试图将记录插入字段名中包含问号 (?) 的数据库字段。
对于某些数据库引擎(包括 Microsoft Access),问号是特殊字符,不应将它用于数据库表或字段的名称。
打开数据库系统并从字段名中删除问号 (?),然后更新页上引用该字段的服务器行为。
设置图像属性此“属性”检查器允许您设置图像的属性。
如果您没有看到下面屏幕抓图所示的所有图像属性,请单击右下角的扩展箭头。
若要设置图像属性,请执行以下操作:1.使用缩略图下面的文本框设置名称,以便在使用Dreamweaver 行为(例如“交换图像”)或脚本撰写语言(例如JavaScript 或VBScript)时可以引用该图像。
2.设置以下任一选项:宽和高以像素为单位指定图像的宽度和高度。
当您在页中插入图像时,Dreamweaver 自动用图像的原始尺寸更新这些文本框。
如果您设置的“宽”和“高”的值与图像的实际宽度和高度不相符,则该图像在浏览器中可能不会正确显示。
(若要恢复原始值,请单击“宽”和“高”文本框标签,或单击用于输入新值的“宽”和“高”文本框右侧的“重设图像大小”按钮。
)注意您可以更改这些值来缩放该图像实例的显示大小,但这不会缩短下载时间,因为浏览器在缩放图像前会下载所有图像数据。
若要缩短下载时间并确保所有图像实例以相同大小显示,请使用图像编辑应用程序缩放图像。
源文件指定图像的源文件。
单击文件夹图标以浏览到源文件,或者键入路径。
有关动态图像源文件的信息,请参见将图像动态化。
链接指定图像的超级链接。
将“指向文件”图标拖到“站点”面板中的某个文件,单击文件夹图标浏览到站点上的某个文档,或手动键入 URL。
有关创建链接的信息,请参见创建链接。
对齐对齐同一行上的图像和文本。
怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件,被广泛应用于网页设计师的日常工作中。
它是一款视觉化网页开发工具,可以轻松制作出跨越平台和浏览器限制的充满动感的网页。
在本文中,我们将为您介绍如何使用Dreamweaver制作网页。
一、定义站点1.在任意一个根目录下创建一个文件夹(例如E盘),并为其命名(例如MyWeb)。
2.打开Dreamweaver,选择“站点-新建站点”,在对话框中输入网站名称和本地根文件夹路径(E:web),然后确定。
此时再次打开Dreamweaver,会自动找到刚才设立的站点。
二、创建页面1.在本地文件夹E:\MyWeb下,右键点击空白处,选择“新建文件”,建立一个页面。
默认的文件名为untitled.htm,将其改名为index.htm。
2.双击index.htm进入该页面的编辑状态。
在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。
在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。
3.在页面中添加文字,可用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如果需要选取字体,则选择字体中的最后一项“编辑字体列表”,在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
三、为页面添加图片在页面中添加图片,可用菜单“插入/图片”,选择本地图片路径,然后将其拖拽到页面中即可。
Dreamweaver是一款非常强大的网页制作软件,通过本文的教程,相信您可以轻松上手制作出精美的网页。
1、在本地文件夹E:\MyWeb下新建文件夹,用于存放图片,可更名为tu、pic或images。
2、打开对象面板,选择“插入图像”,在对话框中选择要插入的图片。
若出现对话框“是否将该文件复制到根文件夹中?”,需选择“是”,并保存到刚建立的文件夹中。
第十二课Dreamweaver MX2004 实例教学(实例11--实例20)实例11 创建交换图 (1)实例12 跳转菜单 (4)实例13 插入FLASH文本 (6)实例14 插入FLASH按钮 (8)实例15 插入FLASH动画 (10)实例16 插入视频 (12)实例17 显示弹出式菜单 (14)实例18 框架的使用 (17)实例19 创建网站相册集 (20)实例20 插入按钮 (22)实例11 创建交换图制作”创建交换图”效果的网页.如右图所示.本例主要讲述交换图的创建过程,用来交换的图必须和原图大小相同. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”创建交换图”的网页,如图1.8.1所示.图1.11.1 ”创建交换图”的网页建立(3) 选择插入(I)→表格(T)…Ctrl + Alt命令,出现表格对话框,如图1.11.2所示,(4) 在表格对话框中,输入行数和列数都为1.按确定插入网页中,并调整表格的大小,使其居中,效果如呼1.11.3所示.(1)单击表格里面,选择插入(I)→图像对象(G)→鼠标经过图像(R)命令,出现对话框.如图1.11.4所示.(2)在后的文本输入原始图像的路径,或单击选择一个图片为原始图像.图1.11.2 表格对话框图1.11.3 插入表格后的网页图1.11.4 插入鼠标经过图像的对话框(3)同样为选择一个图片作为鼠标经过的图像.最后按确定.效果如图1.11.5所示.图1.11.5 插入图像后的效果(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.11.6所示.当鼠标经过图像时的效果如图1.11.7所示.图1.11.6 图1.11.7实例12 跳转菜单制作”跳转菜单”效果的网页.如右图所示.本例主要应用跳转菜单呈菜单或者列表的形式制作,当用户选择其中的项目时,会自动从当前页面跳转到相应页面中. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”跳转菜单”的网页,如图1.12.1所示.图1.12.1 ”跳转菜单”的网页的建立(3)选择插入(I)→表单(F)→跳转菜单(J)命令,出现”插入跳转菜单”对话框,如图1.12.2所示.(4) 在”插入跳转菜单”对话框中的后面输入要跳转菜单名,在后面输入该跳转菜单的地址,再按添加其它的菜单.(如图1.12.3),按确定.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.12.4所示.图1.12.2 ”插入跳转菜单”对话框图1.12.3 ”插入跳转菜单”的设置图1.12.4 在浏览器中的效果实例13 插入FLASH文本制作”插入FLASH文本”效果,使网页具有动态美感.如右图所示.本例主要学习如何插入FLASH文本技术. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH文本”的网页,如图1.13.1所示.图1.13.1 ”插入FLASH文本”的网页建立(3)选择插入(I)→媒体(M)→FLASH文本(L)命令,打开FLASH文本对话框,如果系统提示要保存的话,你就先保存网页,如图1.13.2所示.(4) 输入你想要写的文字,并改变字体的大小,格式,颜色,位置等设置,最终效果如图1.13.3所示.按确定.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.13.4所示.图1.13.2 “FLASH文本”对话框图1.13.3 “FLASH文本”对话框的设置图1.13.4 在浏览器中的效果实例14 插入FLASH按钮制作”插入FLASH按钮”效果的网页.如右图所示.本例主要学习如何插入FLASH按钮技术. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH文本”的网页,如图1.14.1所示.图1.14.1 ”插入FLASH文本”的网页的建立(3) 选择插入(I)→媒体(M)→FLASH按钮(F)命令,打开FLASH按钮对话框, 如果系统提示要保存的话,你就先保存网页,如图1.14.2所示.(4) 在FLASH按钮对话框的后面可以选择按钮的样式,在后面输入”播放”或者其它,点击后面的选择所要链接文档的URL地址,可以不设置,在下拉表框中指定所要链接文本的打开方式,可以不设置.其它的就可以按自己的意愿设置,按确定.(如果在文本框中指定的SWF格式的文件名路径或文件名中含有中文字符,系统会弹出要求你重新输入的提示框)图1.14.2 FLASH按钮对话框(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.14.3所示.图1.14.3 在浏览器中的效果实例15 插入FLASH动画制作”插入FLASH动画”效果.如右图所示.本例主要应用FLASH动画的矢量动画制作完成,它下载速度快,在网页中经常应用,本例学习如何插入FLASH动画. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH动画”的网页,如图1.15.1所示.图1.15.1 ”插入FLASH动画”的网页建立(3) 选择插入(I)→媒体(M)→FLASH (F)命令,打开FLASH对话框,如图1.15.2所示.选择要插入的FLASH按确定.(4) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.15.3所示.图1.15.2 FLASH对话框图1.15.3 在浏览器中的效果实例16 插入视频制作”插入视频”效果.如右图所示.本例主要学习如何插入视频,即在网页中可以观看视频文件. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH动画”的网页,如图1.16.1所示.图1.16.1 ”插入FLASH动画”的网页建立(3) 选择插入(I)→媒体(M)→插件(P)命令,打开插件对话框,如图1.16.2所示.选择要插入的视频文件按确定.(4) 在网页中调整播放窗口的大小和位置,如图1.16.3所示.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.16.4所示.图1.16.2 插件对话框图1.16.3 调整播放窗口图1.16.4 在浏览器中的效果实例17 显示弹出式菜单制作”显示弹出式单”效果.如右图所示.本例主要运用”显示弹出式菜单”的技术,这种技术虽然不是在很多网页中能看到,但它也有它独特的用处,比如说网中的栏目太多而放不下时,就可以进行归类应用这种技术,从而使网页清洁好看. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”显示弹出式菜单”的网页,如图1.16.1所示.图1.17.1 ”显示弹出式菜单”的网页(3)按上几例所学知识,在网页中插入一个3行1列的表格,并在每个单元表格内输入文字,调整文字的大小和位置,效果如图1.17.2所示.(4) 选择表格内的”电影欣赏”,在下面的后面文本框里输入”* “以表示”电影欣赏”是具有超链接的.(5) 选择窗口(W)→行为(E)…Shift + F3命令,打开行为面板,如图1.17.3所示(6) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示弹出式菜单命令,打开显示弹出式菜单对话框,如图1.17.4所示.图1.17.2 插入表格后网页图1.17.3 行为面板图1.17.4 ”显示弹出式菜单”对话框(7) 在后面写上菜单名,在后面填上路径,在后面可不设置,然后再按增加按钮增加其它的菜单,还可以在外观,高级,位置改变设置,按确定最终效果如图1.17.5所示..图1.17.5 ”显示弹出式菜单”对话框的设置(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.17.6所示.图1.17.7 在浏览器中的效果实例18 框架的使用制作”框架的使用”效果.如右图所示.本例主要运用”框架的使用”的技术,这种技术虽然不是十分流行,但在一定条件下用到这种技术却是非常之好的. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”框架的使用”的网页,如图1.18.1所示.图1.18.1 ”框架的使用”的网页建立(3)选择插入(I)→HTML→框架(S)→上方及左侧嵌套(O)命令,插入后可以用鼠标对框架进行调整,或者按住键盘的ALT键,再点击其中一个框架就会出现这个框架的属性,必要时可修改,最终效果如图1.18.2所示.(4) 在框架中输入文字,并调整大小和位置,最终效果如图1.18.3所示.(5) 选择框架中的文字”动画欣赏”,按右键选择创建链接(L),打开选择文件对话框(见图1.18.4所示),选择要链接的文件,按确定退出.(6) 在下面的下拉菜单中mainframe.其它可不设置.图1.18.2 插入框架后的网页图1.18.3 框架中插入文字的网页图1.18.4 选择文件对话框(7) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,当点击”动画欣赏”观看在浏览器中的效果.如图1.18.5所示.图1.18.5 当点击”动画欣赏”观看在浏览器中的效果实例19 创建网站相册集制作”创建网站相册集”效果.如右图所示.本例主要应用”创建网站相册集”命令创建一个电子相同,单击页面中的某一张相片,可打开该相片的效果图. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”显示弹出式菜单”的网页,如图1.19.1所示.图1.19.1 ”显示弹出式菜单”的网页建立(3)选择命令(C)→创建网站相册(C)…命令,弹出创建网站相册对话框,完成该对话框的设置,如图1.19.2所示,单击确定按钮.(创建过程是同Dreamweaver MX启动Fireworks来自动完成的,所以系统中必须安装Fireworks软件,才可以实现机册的创建)(4) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.19.3所示.图1.19.2 创建网站相册对话框实例20 插入按钮制作”插入按钮”效果.如右图所本例主要学习如何插入按钮,特别在动态网态中,按钮是不可缺少的,因此必须掌握. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入按钮”的网页,如图1.20.1所示.图1.20.1 ”插入按钮”的网页建立(3) 选择插入(I)→表单(F)→文本区域(A)命令,并可以在下面改变其的大小等等,效果如图1.20.2所示.(4) 在”文本区域”下面再插入二个按钮,选择插入(I)→表单(F)→按钮(B)命令, 并可以在下面改变其的大小,按钮名等等,设置完成如图 1.20.3所示.(当插入”重置”按钮时,在后面应选择)(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.20.4所示.图1.20.2 插入文本区域图1.20.3 插入按钮图1.20.4 观看在浏览器中的效果。
课程实训报告二、实训拓扑三、实训项目过程(包括主要步骤和说明)【实训步骤】任务一:制作“Apple中国”主页1、在驱动盘下新建文件夹,建立index主页这里不再赘述2、根据跟踪图像,在index插入6X4表格,宽度980,居中3、合并表格第一行,并插入“16.swf”动画,居中显示任务二:图片编辑1、合并表格第二行,插入“1.jpg”,并在该图片的属性检查器中进行如下设置其中,ID是用来建立交换图像效果使用的,链接处“#”表示为空链接。
2、合并表格第三行,并对第三行进行如下设置3、平均分布第四行各列,并在每个单元格中插入1行1列的嵌套表格,如下图所示这里第四行原本有4列,第四行总宽度980,自行进行平均分布各列,加入嵌套表格后,设置每个嵌套表格为水平居中对齐,然后插入相应图片4、分别为四张插入的图片进行属性检查器ID命名,为交换图像效果做准备,设置如下5、交换图像制作教程选中img1,在右侧面板组中找到“标签检查器”,选择行为,点击下面的“+”号,添加“交换图像”行为,如下图所示在弹出的“交换图像”对话框中,选择“img5”,如下图所示这里要说明为什么选择“img5”,根据给定的“交换图像”参考视频,上图是原始效果交换图像效果请仔细观察,当我们把鼠标放置在图片“img1”,也就是上图椭圆标识的图片上,发生变化的是红色区域的图片“img5”,所以在交换图像对话框中选择“img5”,说明它是需要变换的目标,然后在“设定原始档”选项中选择你想要img5变化的图片,(注意,要变换的图片必须与img5是尺寸相同或者相差不大的,交换图像效果只支持变换为同尺寸大小的图片,如果你选择的图片与img5相差太大,则变幻后图片会严重比例失调),如下图所示,我们选择14.jpg为变换图像。
我们会发现在“img5”选项上会出现“*”号标记,说明该图片存在交换图像特效行为其中,“预先载入图像”以及“鼠标划开时恢复图像”两个选项请打勾。
dw怎么做鼠标经过换图
Adobe Dreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,下面是店铺带来的关于dw怎么做鼠标经过换图的内容,欢迎阅读!
dw怎么做鼠标经过换图?
在网站文件夹放入两种图片,一张是之前显示的图片,一张是鼠标经过后显示的另一张图片。
打开Dreamweaver,新建一个新的html文件,点击插入菜单下的图像对象\鼠标经过图像。
打开对话框。
在对话框的原始图像选择需要刚开始在网页上显示的图像,在鼠标经过图像选择需要变化的图像。
在替换文本中输入显示的文本,在前往的url输入网址,即点即图像的连接网址。
按f12查看显示效果,鼠标经过时的效果,以及点击图像后的效果。
FW和DW小结1.FW 交互行为效果:①.使用补间动画打开图层面板新建一个图层,在里面绘制出所要图形,将不动画面图样放置在统一组层中,点右键选在状态中共享层。
然后使用补间动画来完成图像的变化。
点击修改菜单下得元件——选择转化为元件,打开文档库的按钮我们就可以找到制作好的图像元件。
最后将图像全选,选择修改——元件——选择补间实例,分散到状态。
在这里大家要记得是所有的动画都是由这一元件构成的因此如果我们修改这个原件所有的动画也就修改了。
②.制作简单的网页按钮交互动画全选做好的按钮与文字,使用修改——元件——转化为元件——转化为按钮元件。
这时会发现在这个按钮的边缘上就会多了一些红色的线,这些线叫切片边线。
然后我们直接双击它进入元件的编辑界面。
在这里我们可以打开窗口——文档库,也可以双击进入我们的原件编辑面板。
在属性面板里面我们进入到状态,选择划过——点选复制弹起时的图形。
这样就把我们做好的按钮复制进来了,接着我们改变按钮的颜色,在滤镜当中选择——调整颜色——色相饱和度。
接着选择按下的状态,点选复制划过的图形,点击滤镜直接调一下色相就可以。
就可以完成简单的按钮交互。
③.网页交互设计打开状态面板,在这里应该考虑到它应该有两个不同的状态帧数。
因此,添加一个新的状态,这时你会发现左右的内容都不见了,回到状态1中,来分析这个页面中我们有些状态是不需要改变的,有些局部是需要变化的。
在前面讲过,所有不需要动得把他放置在一个层中。
先把所有需要动的内容全部框选中,接着回到图层面板,在图层面板中其实大家已经可以看到有两个图层,点击涂层二右边的小圆点,这样就把我们所选中的图层添加到了图层二中,此时图层一里面就是所有不需要改变的内容。
然后我们将图层一点右键在状态中共享图层,共享完了之后为了避免你的操作失误,将它全部锁住。
接着切换到状态面板中来,点击状态二,将素材文件夹打开,将每一个所对应的清晰的按钮选中,直接拖到FW里面来。
课程实训报告
二、实训拓扑
三、实训项目过程(包括主要步骤和说明)
【实训步骤】
任务一:制作“Apple中国”主页
1、在驱动盘下新建文件夹,建立index主页这里不再赘述
2、根据跟踪图像,在index插入6X4表格,宽度980,居中
3、合并表格第一行,并插入“16.swf”动画,居中显示
任务二:图片编辑
1、合并表格第二行,插入“1.jpg”,并在该图片的属性检查器中进行如下设置
其中,ID是用来建立交换图像效果使用的,链接处“#”表示为空链接。
2、合并表格第三行,并对第三行进行如下设置
3、平均分布第四行各列,并在每个单元格中插入1行1列的嵌套表格,如下图所示
这里第四行原本有4列,第四行总宽度980,自行进行平均分布各列,加入嵌套表格后,设置每个嵌套表格为水平居中对齐,然后插入相应图片
4、分别为四张插入的图片进行属性检查器ID命名,为交换图像效果做准备,设置如下
5、交换图像制作教程
选中img1,在右侧面板组中找到“标签检查器”,选择行为,点击下面的“+”号,添加“交换图像”行为,如下图所示
在弹出的“交换图像”对话框中,选择“img5”,如下图所示
这里要说明为什么选择“img5”,根据给定的“交换图像”参考视频,
上图是原始效果
交换图像效果
请仔细观察,当我们把鼠标放置在图片“img1”,也就是上图椭圆标识的图片上,发生变化的是红色区域的图片“img5”,所以在交换图像对话框中选择“img5”,说明它是需要变换的目标,然后在“设定原始档”选项中选择你想要img5变化的图片,(注意,要变换的图片必须与img5是尺寸相同或者相差不大的,交换图像效果只支持变换为同尺寸大小的图片,如果你选择的图片与img5相差太大,则变幻后图片会严重比例失调),如下图所示,我们选择14.jpg为变换图像。
我们会发现在“img5”选项上会出现“*”号标记,说明该图片存在交换图像特效行为
其中,“预先载入图像”以及“鼠标划开时恢复图像”两个选项请打勾。
这样就完成了一个交换图像效果的设置,再次点击img1,右侧面板组会显示该图像添加的行为,如下图所示
其中“onMouseOver”是“当鼠标经过”的意思,“onMouseOut”是“当鼠标移开”的意思。
根据以上教程,结合给定的视频,请为img1----img4添加交换图像效果。
6、平均分布第5行各列,并在每个单元格插入1行1列的嵌套表格,嵌套表格边框设置“1”,设置为水平居中。
7、根据演示视频,在第5行各嵌套表格内插入鼠标经过图像。
8、合并表格第6行,并加入相应版权信息,设置为“水平居中对齐”,其中“用条款”和“客户隐私政策”加入空链接。
,并在“页面属性”中“链接(CSS)”进行如下设置
其中“使用条款|客户隐私政策”中间的竖线,可以从此处复制粘贴得到。
9、index.html的标题是“Apple-苹果中国”
10、
如上图,请将版权信息中的“苹果中国”替换为自己的名字。
版权信息字体大小为“14”。
11、完成该网页制作,并将以下文件和文件夹打包压缩提交。