DM网页制作实验指导书.doc

DREAMWEAVER 8基础安装好Dreamweaver 8中文版后,运行，选择Dreamweaver 8工作区后，将看到下面的画面：一、 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S). CTRL+U其中CTRL+U是该选项的快捷键,如下图所示：在这里，你可以把自己的DREAMWEAVER MX设置为自己喜欢的样式，一般使用默认就可以了，如下图：为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难看了（当然也可以选自己喜欢的）。如果你浏览网页时使用的不是IE的话，请选中在浏览器中预览这一项（以后制作网页的时候要用到），点一下那个“”添加你使用的浏览器程序。二、 是插入项目选择工具(插入面板)，在 选中了某个项目， 中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：锚点用于网页中的定位，如网页的上、中、下等；图像点位符是用于动态交换图片的，后面再说；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。在 中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如下图：在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。在 中选中文本一项，可以对文本进行格式化，如下图：A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。在 中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：A 为表单；B 为文本框；C 为隐藏域；D 为文本区域；E 为多选框；F 为单选框；G 为单选按钮组；H 为列表/菜单；I 为跳菜单；J 为图像域；K 为文本字段；L 为按钮；M 为标签；N 为字段集。（详细的使用方法后面将说到）在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在 中选中字符可以插入一些特殊的字符，如：，其中BR为换行符（快捷键为CTRLENTER，此项与ENTER有所不同，可以自己试试），其它的可以自己试试。在 中选中媒体，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在 中选中文本头，将出现下面的画面：关键字为网页的关键词，可以让搜索引擎搜索到；说明为网页的说明，如作者、介绍等；刷新可以设定多长时间后刷新网页或跳转到其它网页；基础为网页的基本链接，如插入一个目标为_blank基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。在 中选中脚本，可以插入各种Javascript、Vbscript或其它脚本。在 中选中ASP（编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的标签。在 中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。三、对 区的详解如下图：在上图中，点击带有向下小箭头的工具，会弹出更多选择。四、 区为网页设计区，你所设计的网页或代码将出理在该区。五、 区为属性区(属性面板)，在该区可以对选中的对象进行一些设置（后面将有详细讲解）。六、 区如下图所示，详细的使用将在后面的章节详细讲述。操作举例题目：用DREAMWEAVER 8制作一个简单网页实验操作步骤：1 打开DM 8，点击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与iframe4-5 层和时间轴4-6 窗口和菜单实验五CSS高级应用实验目的：学会CSS样式表的使用实验步骤：5-1 CSS简单应用5-2超链接式样5-3另类链接5-4改变鼠标样式5-5彩色滚轴5-6文字阴影实验六互动效果(行为应用)实验目的：学会使用Dreamweaver内置行为设置实验内容：互动效果一：在网页上经常看到这样的效果，当鼠标移到一张图片上的时候，原来的图片就切换为另一张图片，鼠标移开后，又恢复原来的模样，是怎么做的呢？Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在，我们就利用Dreamweaver制作这个最简单的互动效果变换图片。 准备两张大小相同的图片，一张是鼠标还没有移上的状态，另一张是鼠标移上去后的图片，例如以下两图：点击对象面板上的 （ 区选中常用，在 区可找到），看到如下的对话框：A 图像名称(Image Name)：变换图片效果的标记名称，Dreamweaver会自动分配；B 原始图像 (Original Image)：指定原始的图片，（例如这里是左图）C 鼠标经过图像(Rollover Image)：指定鼠标移上去后的图片（例如这里是右图）；D 按下时，前往的URL：图片的链接网址(也可以是站点内的文件，点后面的浏览可以选择)；例如按照上图的设置完毕后，按下OK，然后可以按F12(F12为预览网页的快捷键)预览一下效果了。做出来的效果：小提示：细心的朋友会发现，做出来的链接不会弹出新窗口的，你可以选中刚做好的鼠标经过图像，在属性面板里的目标(T)选_blank互动效果二：按下一按钮时，弹出一个问候的窗口。在插入面板（ 区），切换到表单 ,插入一个按钮，如遇到对话框，选否就行了。选中刚插入的按钮，在属性面板把标签（L）改为请点击我展开 区，再展开设计窗口，切换到行为窗口，也可以从区（菜单栏）里的窗口（W），再选行为其中Shift+F3为该操作的快捷键点一下行为窗口上的“”，再选弹出信息，如下图：如果你发现弹出信息这一项为灰色的，不可选时，不用急，先选显示事件，接着IE 5.0(选IE 5.5 或IE 6.0也是可以的)，如下图：接着再按上一步的去操作，选中弹出信息后会出现下面的对话框：填上你喜欢的消息，按下确定就OK了，再按下F12就可以看到你的大作了。下面的是做出来的效果：在Dreamweaver中，更复杂的效果是通过一个叫行为（Behaviors）的功能实现的，我们又称为事件的响应。通过网页元素的变化，如鼠标的移动、点击等“事件” (Events)，触发弹出窗口，关闭页面等“响应”（Actions），就是一个事件的响应。而值得高兴的是，“行为”的制作过程几乎是傻瓜式的，下面讲述行为的用法：按Shift+F3，打开行为面板(上面已经说过)；1、选取产生行为的元素，例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现效果，可以选择状态栏上的标签弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。 效果说明本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 17-1 和图 17-2 所示。弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。 创作思想本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单。 操作步骤 （ 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.了解一下DreamweaverMX中的时间轴。在下图的方法中你可以找到时间轴（或者按下快捷键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和leftFramemainFrame指的是主框架，也就是右边的，如果链接的目标选了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），如下图：文本框的参数说明如下：字符宽度：可以理解为框的宽度，即为多少个字符的长度；最大字符数