DM网页制作实验指导书.docx
- 文档编号:29894409
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:19
- 大小:1.36MB
DM网页制作实验指导书.docx
《DM网页制作实验指导书.docx》由会员分享,可在线阅读,更多相关《DM网页制作实验指导书.docx(19页珍藏版)》请在冰豆网上搜索。
DM网页制作实验指导书
DREAMWEAVER8基础
安装好Dreamweaver8中文版后,运行,选择Dreamweaver8工作区后,将看到下面的画面:
一、①为菜单区,和其它的软件一样,该软件所有的操作命令都可以从这一个区内找到,举个例子,选中该区编辑(E)中的参数选择(S)...CTRL+U[其中CTRL+U是该选项的快捷键],如下图所示:
在这里,你可以把自己的DREAMWEAVERMX设置为自己喜欢的样式,一般使用默认就可以了,如下图:
为了使用的方便,选中字体这一项目,把参数设置为上图所示的样子,因为默认的时候实在太难看了(当然也可以选自己喜欢的)。
如果你浏览网页时使用的不是IE的话,请选中在浏览器中预览这一项(以后制作网页的时候要用到),点一下那个“+”添加你使用的浏览器程序。
二、②是插入项目选择工具(插入面板),在②选中了某个项目,③中会出现相应的插入项目,下面详细介绍,选中常用这一项后如下图:
锚点用于网页中的定位,如网页的上、中、下等;图像点位符是用于动态交换图片的,后面再说;FireworksHTML为用Fireworks软件切割出来的图片;交换图像为鼠标移上去时变为另一图片,增强动感;表格数据可以将其它文件的数据转化为表格,插进网页;标签选择器可以插入其它不常用的HTML标签。
在②中选中布局一项,共有标准视图和布局视图两种视图,如下图所示:
在标准视图下,可以插入表格和在网页制作区画图层。
切换到布局视图下,如下图:
在布局视图下,可以在网页制作区描绘布局视图下的表格和单元格,描绘好之后,再切换到标准视图后,可以转化为表格,这个比较好用,可以用来排版网页,后面将说到。
在②中选中文本一项,可以对文本进行格式化,如下图:
A可以对字体进行全面的格式;B可以将字体变为粗体;I为斜体;S为加强字体;这些比较简单,可以自己一项一项慢慢试试,看看字体有什么变化。
在②中选择表单(表格和框架两项后面再说),可以插入各种按钮,如下图:
A为表单;B为文本框;C为隐藏域;D为文本区域;E为多选框;F为单选框;G为单选按钮组;H为列表/菜单;I为跳菜单;J为图像域;K为文本字段;L为按钮;M为标签;N为字段集。
(详细的使用方法后面将说到)
在②中选中模版可以使用模版制作网页或自己创建模版,做起网页更加方便快捷。
在②中选中字符可以插入一些特殊的字符,如:
?
?
?
,其中BR为换行符(快捷键为CTRL+ENTER,此项与ENTER有所不同,可以自己试试),其它的可以自己试试。
在②中选中媒体,可以插入FLASH FLASH按扭 FLASH文本 Applet 等插件。
在②中选中文本头,将出现下面的画面:
关键字为网页的关键词,可以让搜索引擎搜索到;说明为网页的说明,如作者、介绍等;刷新可以设定多长时间后刷新网页或跳转到其它网页;基础为网页的基本链接,如插入一个目标为_blank基础,网页中的一切默认链接都将打开新窗口;其它比较少用不再详细讲述。
在②中选中脚本,可以插入各种Javascript、Vbscript或其它脚本。
在②中选中ASP(编辑ASP网页时用到,新手可不必理会),可以插入各种ASP编程里用到的标签。
在②中选中应用程序(编辑动态网页时候用到,新手可不必理会),可以对数据库进行操作。
三、对④区的详解如下图:
在上图中,点击带有向下小箭头的工具,会弹出更多选择。
四、⑤区为网页设计区,你所设计的网页或代码将出理在该区。
五、⑥区为属性区(属性面板),在该区可以对选中的对象进行一些设置(后面将有详细讲解)。
六、⑦区如下图所示,详细的使用将在后面的章节详细讲述。
操作举例题目:
用DREAMWEAVER8制作一个简单网页
实验操作步骤:
1.打开DM8,点击Insert插入工具栏表格按钮,在弹出对话框中设置表格属性。
2.设置行为5,列为1,宽度width为700像素
3.在表格第一行中输入文本的标题
4.点击菜单window------properies修改,打开属性面板。
5.鼠标点击表格第二行,在属性面板中点击“bg”背景后的颜色框,如图,设置表格背景为深蓝色,代码为“003366”
6.第三行为空
7.第四行输入文本内容,回车,点击insert工具栏图片按钮,选择一个图片插入表格中。
8.设置居中,再回车输入几个文字,也设置居中。
9.鼠标点击表格第二行,点击Insert工具栏图片按钮,插入一个1*1像素大小的透明图片。
10.设置表格高度为1,单元格成为一条直。
11.写上网页的标题。
12.完成本页制作,按F12键预览网页效果。
实验二 图文并茂
实验目的:
学会使用图像和直线的做法
一、
直线问题
二、图像排列
三、图文环绕
四、项目列表
五、移动文字
实验三 表格应用
实验目的:
学会表格在网页中的用法
实验内容:
3-1图片的叠字问题
3-2表格的背景
3-3表格的边框
3-4表格的直线问题
3-5多样的表格
3-6表格的随意拆合
3-7随意表格
3-8表格应用
实验四 层的应用
实验目的:
学会使用层的用法
实验步骤:
4-1
层的定位
4-2浮动的图层
4-3
双背景图片
4-4
Layer与iframe
4-5层和时间轴
4-6窗口和菜单
实验五 CSS高级应用
实验目的:
学会CSS样式表的使用
实验步骤:
5-1 CSS简单应用
5-2 超链接式样
5-3 另类链接
5-4 改变鼠标样式
5-5 彩色滚轴
5-6 文字阴影
实验六 互动效果(行为应用)
实验目的:
学会使用Dreamweaver内置行为设置
实验内容:
互动效果一:
在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?
Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。
现在,我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。
准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以下两图:
点击对象面板上的
(②区选中常用,在③区可找到),看到如下的对话框:
A图像名称(ImageName):
变换图片效果的标记名称,Dreamweaver会自动分配;
B原始图像(OriginalImage):
指定原始的图片,(例如这里是左图)
C鼠标经过图像(RolloverImage):
指定鼠标移上去后的图片(例如这里是右图);
D按下时,前往的URL:
图片的链接网址(也可以是站点内的文件,点后面的浏览可以选择);
例如按照上图的设置完毕后,按下OK,然后可以按F12(F12为预览网页的快捷键)预览一下效果了。
做出来的效果:
[小提示:
细心的朋友会发现,做出来的链接不会弹出新窗口的,你可以选中刚做好的鼠标经过图像,在属性面板里的目标(T)选_blank]
互动效果二:
按下一按钮时,弹出一个问候的窗口。
在插入面板(②区),切换到表单,插入一个按钮,如遇到对话框,选否就行了。
选中刚插入的按钮,在属性面板把标签(L)改为请点击我
展开⑦区,再展开设计窗口,切换到行为窗口,也可以从 ① 区(菜单栏)里的窗口(W),再选行为[其中Shift+F3为该操作的快捷键]
点一下行为窗口上的“+”,再选弹出信息,如下图:
如果你发现弹出信息这一项为灰色的,不可选时,不用急,先选显示事件,接着IE5.0(选IE5.5或IE6.0也是可以的),如下图:
接着再按上一步的去操作,选中弹出信息后会出现下面的对话框:
填上你喜欢的消息,按下确定就OK了,再按下F12就可以看到你的大作了。
下面的是做出来的效果:
在Dreamweaver中,更复杂的效果是通过一个叫行为(Behaviors)的功能实现的,我们又称为事件的响应。
通过网页元素的变化,如鼠标的移动、点击等“事件”(Events),触发弹出窗口,关闭页面等“响应”(Actions),就是一个事件的响应。
而值得高兴的是,“行为”的制作过程几乎是傻瓜式的,下面讲述行为的用法:
按Shift+F3,打开行为面板(上面已经说过);
1、选取产生行为的元素,例如图片、带链接的文字、层等。
如果需要在页面一载入就开始出现效果,可以选择状态栏上的
标签弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很好。
效果说明
本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图17-1和图17-2所示。
弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很好。
创作思想
本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用DreamweaverMX2004自带的行为制作弹出菜单。
操作步骤
(1)输入文字并设置超链接。
在网页中输入文字,因为单独的文本文字是无法添加行为的,按照Dreamweaver中的约定,将文字的超链接设置为“javascript:
;”才能够添加行为。
所以将文字的超链接设为“javascript:
;”,并执行【显示弹出式菜单】行为,如图17-3所示。
(2)设置菜单项和子菜单项,并为菜单设置超链接,然后安排好各个菜单的次序,如图17-4所示。
(3)设置页面元素。
将菜单设置为垂直菜单,并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态,如图17-5所示。
(4)设置【高级】标签。
在【高级】标签选项中设置菜单的延迟时间,以及是否显示菜单边框。
然后设置边框的宽度、颜色、阴影、高亮,如图17-6所示。
2、按
按钮选择一种响应(不同的元素,对应的响应也有所不同),并在随后的对话框中设置此响应的属性;以下是可以供选择的响应说明:
播放声音:
可以为网页加入声音;
打开浏览窗口:
可以打开一个小窗口(和网上的弹出窗口一样);
弹出信息:
可以弹出一条警告信息;
调用JavaScript:
调用网页中包含的Javascript程序;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DM 网页 制作 实验 指导书
![提示](https://static.bdocx.com/images/bang_tan.gif)