Dreamweaver01

1、第第1 1章章 走进走进 Dreamweaver Dreamweaver 网页基本概念网页基本概念 认识认识DreamweaverDreamweaver 网页的构成元素网页的构成元素 网页的设计与规划网页的设计与规划本章学习知识点本章学习知识点上上一一张张下下一一张张返返回回1.1 1.1 第一个主页：基本操作第一个主页：基本操作 本章内容目录本章内容目录1.2 1.2 学生成绩表：表格的应用学生成绩表：表格的应用 1.3 1.3 学生成绩分类汇总学生成绩分类汇总: :表格综合应用表格综合应用 1.4 1.4 图片应用：网上花店图片应用：网上花店 1.5 1.5 小说封面：图像映射小说封面：图

2、像映射 1.6 1.6 层的使用：使用层的使用：使用层层编排网页编排网页 1.7 1.7 框架技术：星座介绍框架技术：星座介绍 1.8 1.8 插入插入Java AppletJava Applet：焰火晚会：焰火晚会 1. 9 1. 9 插入插入FlashFlash：在线游戏：在线游戏 本章内容目录本章内容目录1.10 1.10 插入视频和声音插入视频和声音 1.11 1.11 本章小结本章小结1.12 1.12 本章习题本章习题1.1 1.1 基本操作基本操作 1.1.1 网页的基本概念网页：通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像来提供图画，网页要透过网页浏览

3、器来阅读。 HTML语言：HTML的全称是Hyper Text Markup Language，中文翻译为“超文本标记语言”。它的特点是用语言来设计网页，但是其实质和通过Dreamweaver可视化软件设计页面是一致的。 示例：北京航空航天大学图书馆主页HTML代码结合可视化设计超文本标记“容器”页头“容器”这对标签之间是该超文本文档文档头。对该超文本文档的定义、说明、描述等都在这部份。主体部份“容器”这对标签之间是该超文本文档的具体内容。该网页要传送的信息基本上都在这一部份。1.1.2 第一个网页的制作Hello World! 1 2 31. 启动Dreamweaver2. 新建网页文档3.

4、 在编辑窗口中输入文字4. 按F12键观察效果1.2 学生成绩表学生成绩表 1.2.1 表格的基本概念1.2.2 插入表格的三种方法表格是网页中最重要的工具之一。作为一个基本的网页构成应该以表格为基础，搭配其他的辅助排版工具，使页面达到最佳的设计效果。 1.2.3 表格的属性设置1.2.4 制作学生成绩表通过设置输入表格对话框来制作一个表格 在表格内的各个单元格内，插入文本，并且选择居中对齐 1 2 1.3 1.3 学生成绩分类汇总学生成绩分类汇总1.3.1 基本概念和操作v增加行和列单击一个单元格，执行菜单 修改-表格-插入行，则在光标所在行的上面插入新的一行。同样，执行 修改-表格-插入列

5、，则在光标左侧插入新的一列增加多行或者列v执行 修改-表格-插入行或列 v在弹出对话框中设置无论文本、图像、动画等，一切在网页中可以插入的对象，在表格或者单元格中都可以插入。插入方法基本相同，将光标置于表格或者单元格中，就可以执行相应的操作所插入的对象，同样可以在属性面板中进行编辑表格的嵌套可插入对象的类型vDreamwaver8 内置了多种基于颜色搭配的表格样式，可以从中选择合适的样式来使用。v执行菜单 命令-格式化表格制作格式化表格1.3.2 制作成绩列表首先插入一个7行6列的表格将第一行的单元格合并设置表格的颜色第一行设置颜色为黄色，RGB值为#FFFF00 第一行一下设置颜色为绿色，R

6、GB值为#CCFF00 插入表格内容删除行高和列宽1.4 1.4 网上花店网上花店图像是网页设计中不可或缺的重要组成部分。但作为网页设计人员应该考虑到网页的大小，从而照顾到各种用户的需求。下面这个例子就来介绍如何对网页图像进行处理，使得在保持图形美丽与网站风格搭配的基础之上，力求图片能够变得更小。 设置图像大小 设置图像超链接 设置图像对齐方式 设置图像替换 低分辨率载入 1.4.1 基本概念新建表格，并将光标置于某一个单元格内。在属性面板中，单击浏览文件按钮，弹出选择文件对话框。选择插入图片。当插入的图片不在站点根目录或者其子目录中，则软件会提示是否需要复制一份拷贝文件到相应的根文件夹中。1

7、.4.2 上机操作 进行图文混排的时候，也就是需要选择在表格同一单元格内，既要插入图片，也要插入文字，选择其两者之间的对齐方式。加入文本替换，可以实现当浏览者把鼠标定位于某个网页元素上的时候，自动弹出说明文本，帮助浏览者理解。最终完成的网页效果图1.5 1.5 小说封面小说封面图像映射：一种在页面上局部区域链接的功能。这些形状区域可以称作“热点”或“热区”。当用户单击某个“热点”时，就完成指定的任务，这个任务可以是进入超链接地址，也可以是激发某中网页行为。 虚拟连接：在网页设计的初期，往往并不需要真正实现某些标题或者图片的连接，仅仅提示设计者在后续的工作中需要实现此功能。在属性面板的链接文本框

8、内插入字符“#”即可。1.5.1 基本概念插入图片，并且为图片中的某一个区域绘制对应的“图像映射”，也就是热区。1.5.2 上机操作绘制后的效果1.6 1.6 层的使用层的使用1.6.1 基本概念层相当于一个容器，可以包含所有在HTML文件中出现的元素。这里要注意和Photoshop的层不是一个概念。用户可以随便将这个容器放置在页面的任何位置，从而使层中的元素在页面中的地位达到像素级的精确度。层还可以与许多高级特性相连。例如，时间轴动画功能就必须用到层；行为控制层的显示和隐藏，也可以对层进行操作和控制，熟练使用这些功能可以做出生动有趣的效果。 1.6.2 上机操作鼠标在编辑窗口的背景上，单击鼠

9、标右键，弹出右键菜单，选择页面属性。插入多个层，注意连续绘制多个层的技巧：按下Ctrl键，并画出层。在编辑窗口的左上角对应地显示层的图标。在各个层内插入对应的图像文件，完成制作。1.7 1.7 星座介绍星座介绍框架主要用于将浏览器划分为多个窗口，在各个窗口中显示多个不同的HTML文档。通过设定这些文档之间的相互关系，从而实现文档导航和文档操作的目的。1.7.1 基本概念框架技术主要有两种类型的元素：一是框架集，另外一个是框架。 基于框架技术制作的BBS1.7.2 上机操作制作一个基本框架框架在框架的左侧插入12行1列的表格，在右侧插入2行1列的表格在左侧的表格中插入星座图片和文字在右侧插入文字

10、内容，并且保存框架各个部分。1.8 1.8 焰火晚会焰火晚会Java是一种程序设计语言，Java Applet（Java程序）是在Java的基础上形成的，它通过写入HTML语句中，在网页中执行一定的任务。Java Applet可看作是媒体的一种，所以可以用插入媒体的方式写进网页。 1.8.1 基本概念Java Applet在Dreamweaver中的显示形式在编辑窗口中插入一个1行1列的表格，并且在表格内插入Java Applet。插入的方法：将光标置于表格单元格内，并且切换到“代码视图”在代码视图中插入JavaScript语句,注意插入的位置不要随意更换。1.8.2 上机操作将本例需要的声音

11、文件，以及实现Java Applet所以需要的一些文件拷贝到对应的网页目录中。实现后的效果如图所示。用户如果需要在黑夜中的焰火效果，请修改此代码：将其改变为1.9 FLASH1.9 FLASH游戏游戏1.9.1 基本概念Flash是网络矢量动画的领跑者。文件小巧，速度快，特效精美，支持流媒体和强大的交互功能，成为网页中最流行的动画格式。Flash源文件：（*.fla）该文件类型是使用flash制作软件创建的项目源文件，这种文件只能在flash制作软件中打开，具有再次编辑的功能。Flash电影文件：（*.swf）一种导出的flash文件，这种文件能够在浏览器中直接播放，但是不能够再次编辑。Dre

12、amweaver中可以制作一些简单的Flash文件并且插入到网页对象中，但是还是建议读者能学习使用FlashMX来制作更为专业的Flash文件。1.9.2 上机操作绘制表格，并且在第一个单元格内插入一个Flash按钮。 在其右侧插入Flash文本。插入Flash游戏文件制作好的Flash游戏网页1.10 1.10 插入音频和视频插入音频和视频v网页中插入的主要音频格式vMidi或Mid ，Musical Instrument Digital interface直译为“乐器数字接口”，为大多数浏览器支持，且不需要插件。声音品质很好，且文件较小。但是Mid文件不可以被录制，且必须使用特殊的硬件和软

13、件在计算机上合成。vWav较高的声音质量，能够为大多数浏览器支持，且不需要插件。但文件较大。vAif或aiff较高质量，和wav相近。1.10.1 基本概念v视频常见格式Mpeg或Mpgv一种压缩比例较大的活动图像和声音的视频压缩标准，也是VCD光盘所使用的标准。Aviv一种MS windows操作系统所使用的多媒体文件格式WmvvWindows操作系统自带的媒体播放器Windows media player所使用的文件格式RmvReal公司推广的一种多媒体文件格式，具有很好的压缩性能，网络中应用最广泛的格式之一。MovvApple公司推广的多媒体文件格式1.10.2 上机操作插入音频文件以类

14、似的操作插入视频文件，并且按下F12进行预览1.11 总结提高总结提高本章是Dreamweaver学习的基本章节，重点是介绍了Dreamweaver软件，以及插入图片、文本、表格、层、框架、Java小程序以及灵活多样的Flash文件。这些网页的基本零件在各个实例的制作过程中遇到过，通过这些训练，大家就可以尝试着制作自己的个人主页等简单的网页。 但是由于缺少了CSS样式排版，缺少了ASP支持，缺少了数据库的连接，这里制作出的网页还只是一个静态的没有支持的简单网页。如何使用上面提到的知识进一步提升大家的网页制作水平，就需要读者认真地学习后续章节。在此，笔者鼓励读者在课余多多浏览观察制作的好的网页，

15、并且多练习，多模仿。 1.12 本章习题本章习题 一、填空题1创建超链接地址可以链接到不同的目标，在网页中创建超链接的目标有： _、 _、 _、 _等。 2在网页中使用的图像格式主要有_、 _、 _、 3种。3若要在调整图像尺寸时保持其宽高比，在拖动图像右下角点的同时，按住_键。 4表格一般被划分为_、 _、 _ 3部分。5框架是由两种元素_和_组成。 二、选择题1创建虚拟链接使用的符号是：_A.B.#C.$D.* 2GIF格式的图像的有点有_A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色 3单元格中可以插入的对象有_ 文本B. 图像 C. Flash动画 D. Java Applet4两个命名围巾Layer1和Layer2的层完全叠加在一