《Dreamweaver(30课时).doc》由会员分享，可在线阅读，更多相关《Dreamweaver(30课时).doc（9页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver（3课时）第一讲 基本界面、基本工具的使用 Dreamweaver是制作网页的工具，我们平时上网看到的各个网站的网页都是用Dreamweaver编辑的，然后再加入一些动态语句。这些网页都是由Html语言编写生成，而我们在使用Dreamweaver编辑网页的同时，这个软件就已经自动生成这种语言了。 首先，我们先来说说最简单的Html语言。Html语言 Html语言有自己特有的格式：标题正文内容。这就是最基本的格式了，其中.是该语言的基本格式，所有的内容都包含在它们之间，.部分是头的部分，主要是放置标题，而标题就放在.之间，.之间是编辑正文的地方，所有的内容都放在这里。至于其
2、中的一些语句，我们在这里就不再多提。注意事项 Dreamweaver中是有一个相对路径的概念的，我们做网页过程中用到的所有图片和所有的网页文件，还有声音、SWF等等的文件都要放在一个总的文件夹里，而这个文件夹就是我们所说的站点，Dreamweaver中可以建立一个站点，但是现在来讲是非常的抽象的，所以我们先用前面的办法代替，后面再来讲解有关站点的概念。 另外，我们在做网页文件的时候要记得，打开软件后，就先把我们要做的网页文件保存到事先建好的站点里，这样是为了避免你插入图片时出现错误。 最后，站点里的所有文件的名称都不能为汉语名，必须为英文名或者是数字命名的。介绍软件界面 打开Dreamweav
3、er软件，我们会发现它的界面和我们前面学过的软件有些不同。我们先来说说它的界面。首先是标题栏；接着是菜单栏；下面是软件的显示方式，从左到右依次为只显示源文件、源文件和文档窗口同时显示、只显示文档窗口。有两个浮动的面板：一个是工具面板（Window = Object），另一个是工具属性面板（Window = Properties）。其中工具面板可以设置选中对象的属性。设置页面属性 设置整体页面的属性可以选择菜单Modify = Page Properties或者直接在文档窗口里单击鼠标右键选择Page Properties会出现页面设置对话框。其中： Title:标题，设置浏览器标题栏中的内容；
4、 Background Image：设置背景图片的，背景图片是平铺在网页中的； Background：改变整体的背景色； Text：设置一般文字的色彩； Links：设置链接文字的色彩； Visited Links：设置点选过的链接文字的色彩； Active Links：设置点选链接文字时显示的色彩； Left、Top：设置内容距浏览器左边、顶边的距离； 其它的几项不要设置了，使用默认的即可。图片的插入和编辑 插入图片是用工具面板左上角的工具。图片插入后，选中后，可以在属性面板里设置图片的属性。 属性面板的左上方有一个缩略图，右边有Image字样，旁边是图片文件的大小，下方的空格可以键入文件名
5、（只在Html和动态语句中调用的文件名）；W、H可以设置图片的宽度和高度；Src显示的是图片的来源位置；Link：可以设置链接的目标页面；Align：图片旁的文字的排列方式；Alt：图片的注释，就是在浏览器中鼠标放在图片上时，图片的右下角出现的文字；Vspace、Hspace：图片在垂直方向、水平方向上与文字的间距；Target：链接时窗口的弹出方式；Border：图片边框的宽度；Edit：编辑图片；Reset Size：重置图片大小。文字的输入及属性 在文档编辑区直接输入文字就可以了，选中要编辑的文字，在属性面板里设置文字的属性。 属性面板中Format：可以改变字体的大小（整段文字）H1最
6、大，H6最小；Size：可以设置选中文字的大小；右侧的颜色块可以设置文字的颜色；B、I：加粗、倾斜；接着可以设置段落的对齐方式；Link：使者选中文字的链接；Target：设置链接的窗口的弹出方式；后面的按钮可以在文本前创建清单，加项目符号。表格的插入和编辑 插入表格是用工具面板左上角的工具，弹出窗口，可以设置Rows（行数）、Columns（列数）、Width（表格宽度，单位有像素、百分比）、Border（表格边框）、CellPadding（单元格空白区域即内容与格边线距离，默认为1个像素）、Cell Spacing（单元格间距，默认为2像素）。 表格插入后，选中表格，可以在属性面板里设置图
7、片的属性。左上方有一个缩略图，右边有Table Name，可输入名字；Rows：行数；Cols：列数；W、H：表格宽度、高度；Cellpad：单元格空白区域；CellSpace：单元格间距（可以看出：新建表格时设置属性和在属性栏里设置都是一样的）；Align：表格的对齐方式；Border：边框宽度；另外还有清除高、宽；像素、百分比转换；Bg Color：表格内的背景色；Brdr Color：边框颜色；Bg Image：表格内的背景图片。 设置单元格属性。将光标定位于一个单元格上可以设置当前单元格的属性。 其中，属性面板上半部分和文字的属性设置一样，下半部分：cell下面的两个按钮为合并、拆分单
8、元格；Horz：设置单元格内的内容的水平方向的对齐位置；Vert：设置单元格内的内容的竖直方向的对齐位置；W、H：设置当前单元格的宽和高；Bg：设置当前单元格的背景图片；有颜色块的设置当前单元格的背景颜色；Brdr：设置边框的颜色。 第二讲 图层、翻转图、链接的制作 Dreamweaver中的图层不同于其它三个软件的图层，但是Dreamweaver中可以有多个图层，并且各个图层可以重叠，可以编辑，可以隐藏。图层的建立 Insert = Layer，或者选择工具面板中的，在文档中画一区域即可。选中图层，用鼠标按住图层左上角的空心矩形块，可以将图层移动位置。在图层中单击鼠标，将光标定位在图层中，可
9、以编辑图层里的内容，可以进行插入表格、插入文字、插入图片等操作。选中图层可以使用Edit = Copy / Paste，进行图层的复制和粘贴。 选中图层，可以在属性面板里编辑图层的属性，其中Layer ID 是图层的名称；L:图层左边界距浏览器窗口左边界的距离；T：图层上边界距浏览器上边界的距离；W：图层的宽度；H：图层的高度；Z-Index：图层的顺序号；Vis：图层的可见性（继承，可见，隐藏）；Bg Image：图层中的背景图片；Bg Color：图层中的背景颜色；Tag：标签，在Html代码中使用的标记，建议使用Div，它可以同时被IE和Netscape支持；Clip：指定图层的哪一部分
10、是可见的，输入的数值是距离图层4个边界的距离；Overflow：当Tag参数为Div / Span时才出现，当图层内容超过图层大小时的显示方式有4种：Visible，向右、向下扩大图层，使所有内容得以显示；hidden：只显示一部分内容；Scroll：不改变图层大小，但增加滚动条；auto：只在图层不够大时才出现滚动条。 嵌套图层：Window = Layers图层面板。画两个图层，在面板上，按住Ctrl键，同时，用鼠标拖住一个图层的名称向另一个图层上拖拽即可，此时，上面的图层称为下面图层的父层，下面的图层称为子层，拖动子层时，子层自己动，拖动父层时，两个图层都动。在面板里，点前面的眼睛图标，
11、可以显示/隐藏图层，上下位置改变图层显示的上下顺序。 用图层也可以编辑网页，只需要一个一个图层的拼凑即可，但是这样的网页在不同的浏览器里观看时，显示的位置是不一样的，所以一般不采用这样的方法进行网页的制作。当用图层作好一个网页后，我们可以使用Modify = Convert = Layers to Table将图层转化为表格，这样的网页虽然位置固定了，但是会生成很多不必要的表格，所以也不采用这种方法来制作网页。翻转图的制作 Dreamweaver中翻转图的制作有两种方式，一种是当鼠标放在一张图片上时，这张图片自身翻转成另外一幅图片，这样只需要两张图片就可以了，另外一种是当鼠标放在一张图片上时，
12、这张图片自身翻转的同时，控制其它图片的翻转。无论我们用哪种方式制作的翻转图，在网页中看时，都是以正常情况下显示的图片的大小为基准，这样，我们在处理图像时，为了保证每张位图图片在收看时都清晰，我们必须把它们都作成一样大小的。 首先说说第一种翻转图的制作，只需要选择工具面板里的或者Insert = Interactive = Rollover Image，这时会弹出一个对话框：Image Name名称（默认即可）；Original Image初始图片（正常情况下的图片）；Rollover Image替换图片（鼠标移进图片范围时更换的图片）；Preload Rollover Image预装载图片，选
13、中这个选项可以使浏览器在装载页面时就下载更换的图片，而不用等到鼠标移到图片上了再下载，可以避免不连贯的现象；When Clicked,Go to URL单击图片时跳转的链接页面。 另外一种方法属于特效制作，需要用到行为面板Window = Behaviors。在做特效之前，先要把正常情况下显示在网页里的图像都插入进来，然后分别选中这些图像，在属性面板里，将它们的名称改为你自己能够区分开的，注意名称必须为英文字母开头，且不能有汉语出现。选中需要控制翻转的图片，在行为面板里单击“+”，出现下拉列表，选择Swap Image，弹出更换图片的对话框。上部的列表包括了该页面上所有图片的名称，选中需要进行
14、翻转的图片，在Set Source to中选择翻转后的图片，然后返回到上面的列表，选另外一张，在Set Source to中选择翻转后的图片,重复此操作，最后OK确定。这样就给需要控制翻转的图片加上了翻转图的行为，而这个行为已经填加到了行为面板，需要修改，只要在行为面板上双击鼠标即可。简单链接的制作 Dreamweaver中通常是给图片，文字加链接。无论给谁加链接，方法都是相同的，当给图片加链接时，只需要选中图片，同样，给文字加链接时，只需要选中文字即可。选中一个对象后，在属性面板里的Link域里面输入要链接的目标文件，如果是自己站点里的文件，可以直接输入路径和文件名，也可以点击Link域后面
15、的黄色文件夹选择相应的文件，如果链接的是网址，必须在Link域里输入Http:/www.，如果链接的是邮件地址，必须输入mailto:。当链接的是邮件地址时，还有另外一种方法，工具箱中有一个工具，选择后，弹出一个对话框，Text是需要在网页中显示的文字，E-mail是邮件地址，这里只需要直接输入地址就可以，不需要在前面加上mailto:，最后确定就可以了。 当设置完链接后（邮件除外），需要设置一下窗口的弹出方式。在属性面板里的Target域里设置就可以了，其中：_blank目标窗口出现在新窗口，_parent用指向页面替换它外部的帧结构，_self出现在同一帧结构里面，_top跳出所有帧结构，指向的页面直接全屏出现在浏览器中。第三讲 分帧、表单的制作 Dreamweaver中的分帧和Flash、Fireworks里的不同。Dreamweaver里的分帧又称为框架，是一种网页的定位工具，与时间和动画是无关的。分帧把浏览器的显示空间分割为几个部分，每个部分都可
