DM网页制作实验指导书.docx
- 文档编号:5046463
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:28
- 大小:770.14KB
DM网页制作实验指导书.docx
《DM网页制作实验指导书.docx》由会员分享,可在线阅读,更多相关《DM网页制作实验指导书.docx(28页珍藏版)》请在冰豆网上搜索。
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-4Layer与iframe
4-5层和时间轴
4-6窗口和菜单
实验五CSS高级应用
实验目的:
学会CSS样式表的使用
实验步骤:
5-1CSS简单应用
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程序;
交换图像:
实际上是交换图像;
更改办容:
可以改变已经插入的层的内容;
恢复交换图像:
把已经交换的图像恢复过来;
检测插件:
可以检测访问者的浏览器是否己安装浏览网页所必须的插件;
检测浏览器:
检测访问者使用的是什么类型的浏览器;
检查表单:
检验网页中的表单是否合法;
控制Shockwave或Flash:
控制网页中包含的Shockwave或Flash;
转到URL:
跳转到其它页面;
设定图像导航条:
和交换图像差不多;
设置文字:
在特定的地方显示文字;
显示或隐藏层:
设置图层的显示或隐藏;
时间轴:
可以制作更多的动态交果;(以后再说)
跳转菜单:
插入跳转导航菜单;
跳转菜单开始:
控制导航菜单跳到哪个页面;
拖动层:
设定图层是否允许拖动;
预先载入图像:
在网页装载前先预先载入图像;
显示事件:
设定显示IE或NS各个版本的事件;
下载更多的行为事件:
打开网页,去下载更多的事件。
3、选择事件(Events),决定在什么情况下触发响应。
常见的的事件有:
onMouseOver:
鼠标移到目标上;
onMouseUp:
按下鼠标再放开左键时;
onMouseOut:
鼠标移开时;
onMouseDown:
按下鼠标时(不需要放开左键);
onClink:
点击时;
onDblClick:
双击时;
onLoad:
载入网页时;
onUnload:
离开页面时;
onResize:
当浏览者改变浏览窗口的大小时;
onScroll:
当浏览者拖动滚动条的时。
注意:
当你找不到所需要的事件时,选显示更多事件,换取另一个浏览器的件事,或更高版本浏览器的事件
实验七互动效果(行为高级应用)
实验目的:
内置行为的高级设置
实验内容:
一、浮动提示:
1.首先插入一个两行三列的表格,第二行的三个单元格合并起来,边框为0,并填充文字,文字加上应该的链接,第二行的单元格插上一个图层(命名为:
good),如下:
2.选取“品味人生”四个字,按Shift+F3,打开行为面板,点击行为面板上的
,选取设置文本,再选设置层文本,如下图:
3.然后出现对话框如下(在新建HTML里填上需要的文字),然后按确:
4.再点击一次
重复刚才的步骤,不过这次,新建HTML里不填任何文字,然后确定。
行为面板变为下图:
5.把第二次加进的行为onMouseover改为onMouseout,(点onMouseover旁边的
,找到onMouseout后选中它,如果找不到,选显示事件,再选其它版本浏览器,这样就有onMouseout了),如:
6.再选取网易两个字,操作和上面的步骤一样,只不过加入的文字不同。
7.再选取搜狐两个字,操件同理。
8.把网页保存下来,按F2看看你的大作吧,呵呵,也可以看看下面的例子:
↓↓
品味人生
网易
搜狐
[提示:
层是可以定义位置和大小(注意属性面板)的,如果在第2步的时候,设置的不是层文本,是状态条文本,提示将出现在状态条(此做法不必插入图层)]
二、网页中做动画
1.准备一张图片:
2.了解一下Dreamweaver MX中的时间轴。
在下图的方法中你可以找到时间轴(或者按下快捷键ALT+F9):
Dreamweaver的时间轴和FLASH中的时间轴是差不多的,我们的目的是让图片按时间轴上的设定进行运动。
3.点一下对象面板上的
,在网页设计区画出一个图层,在图层里插入刚准备好的图片,调整图层的大小,让其适合于图片:
4.用鼠标选中图层,并将其拖到时间轴的的第1个小格:
然后将第15那个格拉远一些,如拉到40,这样可以让动画放得慢些:
5.再次选中图层,并用鼠标再次把它拖到时间轴,如下图:
用鼠标点一下时间轴上的第55点,并把它拉到第80点:
用鼠标点一下时间轴第40那个格子,然后把目光移动属性面板,把层的左(L),加上300(即让其右移300像素);
用鼠标点一下时间轴第41那个格子,然后把目光移动属性面板,把层的左(L),加上300(即让其右移300像素):
请注意上图带有红色框处,原来为73px,加上300后变为373px。
6.插进两个按钮,第一个的标签(L)为播放,第二个为停止,如下图:
选中播放这个按钮,加上播放时间轴的动作:
选中停止这个按钮,加上停止时间轴的动作:
7.把时间轴上的循环勾上:
大功告成了,按F12就可以看到你的大作了
实验八框架和表单使用
实验目的:
学会使用框架和标单的使用
实验内容:
一、框架使用:
上网时候,经常看到点击左边,内容从右边出来之类的网页,其实就是框架的应用了。
在插入面板(②区),选中框加,将看到:
点击需要的框架样式就可以插进去了(你还可以从菜单栏的文件(F),选择新建(N),建一框架页面),比如点一下第一个,就出现了一个左右式的框架:
中间的细线是可以拉动的,以便调整左右窗口的比例,点一下中间的细线,在属性面板将看到:
其中边框(B)处可以选:
是、否和默认(即是否显示边框),如果你选显示边框的话,还可以设边框的颜色(C)和边框的宽度(W)
还有是左右框架的比例,在上图,我选了80像素,也就是说,左框架为80像素,剩下的是右边框的宽度,当然还可以选百分比和相对的,如下图:
框架的参数就说完了,接着你就可以把鼠标光标移到左边或右边设计网页了。
值得注意的就是链接问题了,比如,在左边填上“链接测试”几个字,并加上链接:
在属性面板的目标(T)处,将看到:
在以前的链接里,只是看到:
_blank,_parent,_self、_top几项的,现在多了mainFrame和leftFrame
mainFrame指的是主框架,也就是右边的,如果链接的目标选了mainFrame,则点击链接时,内容将在右边出现;leftFrame指左边,链接目标为leftFrame则内容在左边出现;如果选_seft刚在本窗口出现;选_parent则在框架窗口出现了(也就是替换整个框架了);选_top将在上级窗口出现,在本例子和选_parent无差别,因为上级窗口就是_parent。
二、表单使用:
在第一章,已经有简单的说明了,如下图:
A为表单;B为文本框;C为隐藏域;D为文本区域;E为多选框;F为单选框;G为单选按钮组;H为列表/菜单;I为跳菜单;J为图像域;K为文本字段;L为按钮;M为标签;N为字段集。
当要在网页中输入内容时就要用到表单了,比如留言板,BBS,网上订单等。
处理表单的内容,要用到网络编程,如asp,php,cgi,jsp等,我们暂时不理会,下面学习制做一个通过电子邮件发送的表单:
1.点一下A插入一个表单,如下图:
2.在表单内插入一个四行两列的表格(边框为0),并填上文字,如下图:
3.把光标移到表格的第一行第二列,点一下B插入一个文本框;光标再移到表格第二行第二列,再插入一个文本框;光标移到第三行第二列,点一下D插入一个文本区域;合并表格第四行的两个单元格,点两下L插入两个按钮;选中第二个按钮,在属性面板把动作设为重设表单(R),如下图:
文本框的参数说明如下:
字符宽度:
可以理解为框的宽度,即为多少个字符的长度;
最大字符数:
框可以填写字符的最大个数;
类型:
单行就是见到的样子,如果选多行就变为文本区域了,如果选了密码,填上去的内容将以*号表示;
初始值:
是表单最初的内容;
按钮的参数说明:
按钮名称:
可以理解为名字;
标签:
就是按钮上显示的字;
动作:
提交表单(提下时发送表单的内容);无(普通按钮);重置表单(按下后表单的内容还原为默认状态)
其它的就不一一细说了,可以自己认真看看,按上面步骤操作后会出现下图的样子:
4.按下SHIFT+F3打开行为面板,选中提交按钮,添加检查表单的行为,如下图:
参数设置如下图所示:
5.选中整个表单,然后在属性面板设置如下图的参数:
动作处填上:
mailto:
你的email地址
目标处,如果需要打开新窗口的方式发送,可选_blank
如果要为发送的表单添加标题,可以在动作处填上:
mailto:
你的email?
subject=这是我的意见
其中把你的email换成你的电子邮件地址,这是我的意见为邮件的标题
做出来的效果如下:
窗体顶端
你的名字
你的E-mail:
你的意见:
窗体底端
关于邮件提交表单的说明:
提交的表单是通过发送电子邮件的软件发送出去的,如outlook,如果电脑上没有装任可类似的软件或者没有设置好,表单将无法发送。
窗体顶端
学员登陆注册系统
用户名:
密码:
确认密码:
真实姓名:
性别:
男
女
出生年月:
年
月
日
证件号码:
地址:
邮编:
电话:
E-mail:
行业:
教师
学生
工作单位:
窗体底端
实验九网页的综合应用
实验目的:
学会综合使用DM制作网页
实验内容:
制作一个网站的主页面
综合运用文字、图片、表格、层、时间轴、表单、框架、按钮、CSS样式表
实验十综合练习
题目:
制作个人网站,主页主题鲜明突出,工具使用恰当,技术规范,站点不少于五个子页面,各种编辑手法均匀使用。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DM 网页 制作 实验 指导书