网 页 制 作 DREAMWEAVERMX 2004
内容提要 网页与网站 网页和网站制作的基本步骤 网站创建的基本方法 认识Dreamweaver MX 2004 管理和组织网页 网页编辑 基本网页编辑 图形的插入和图形格式 创建超链接（超链接、书签、热点） 网页的布局（表格和框架） 创建和使用表单
内容提要（续） 制作导航栏 层、时间轴、行为及其应用 样式表 动态 gif 图像的制作 网页特效制作 PhotoImpact 本次大课的目的：快乐、轻松地学习 了解这门课程的教学目的 了解这门课程的教学形式 了解这门课程的教学内容 因各自的起点不一样，同样的一门课程对每一位同学的负担不一样 Ulead GIF Animator
网页与主页 浏览器与Web服务器之间 是以页为单位来传送信息。 网页 ( Web Page ) 主页 ( Home Page ) http://www.tsinghua.edu.cn/docs/cindex.html 这里强调网页和主页之间的差别及它们之间的关系。 主页（Homepage）与页面（Page）：万维网中文件信息被称作页面。每一个WWW服务器上存放着大量的页面文件信息，其中默认的封面文件称为主页。浏览器与Web服务器之间的信息传送是以页为单位的，每次传送一页，这里的页可能是浏览器的一屏也可能是多屏，这里页的实质就是一个文件。 一个网站是由众多的网页组成的，它们存储在某一个Web服务器上，而浏览者连接到一个Web站点后传过来的第一个网页文件就是这个站点的主页，网页和主页的书写方式不同，对于网页，要写上完整的URL，而对于主页，只要写上协议名和服务器的名字就可以把主页传过来了，这是因为Web服务器都有自己默认的主页名称，不同的服务器系统默认的主页名称也不同，常见的有index.htm（index.html） 或default.htm（default.html）。 主页 ( Home Page ) http://www.tsinghua.edu.cn
网页与网站 Web服务器 网页通常成组出现，并且这组网页 之间通过超链接相互组织成为反映 某个主题的网站。 …… 提高下载速度 （1）将每个网页存放在单独文件中使得下载的单元更小，同时提高了下载速度。 （2）可以方便地引用超文本地址，到某个网页的链接只需要简单地指向相应的文件名。 （3）Web页没有固定的长度，因此不需要每隔一个显示屏幕尺寸就设置一个分页符。 Web页通常成组出现。创建仅包含一个网页的站点就如同制作只有一张幻灯片的演示文稿，不仅让人觉得枯燥乏味，而且对丰富的传播媒介也是一种浪费。 提高下载速度 超文本地址引用方便 Web页没有固定的长度
网页的制作工具 可利用任何一种文字处理软件编辑Web文档（推荐：记事本）Web文档以纯文本格式存放，取名为*.html或*.htm。 其中插入的HTML语言只有用浏览器才能被解释翻译，最终在浏览器窗口中呈现为图文并茂的网页。 NOTEPAD
超文本标记语言HTML HyperText Markup Language 样 例 HTML特点 <HTML> <HEAD> <TITLE>欢迎光临无名的主页</TITLE> </HEAD> <BODY> <H1>欢迎光临无名的主页</H1> </BODY> </HTML> 样 例 标记需要放在<尖括号>中 标记中有很多是成对出现，一头 一尾（结束标记前要加“/”）所有 标记中的字母不区分大小写 通常以“.html”或“htm”为文件后缀 标记的书写格式如下： <标记名>文件内容</标记名> HTML特点
直接使用HTML编写网页 <HTML> <HEAD> <TITLE>简单的HTML例子</TITLE> </HEAD> <BODY BGCOLOR=“#000000” TEXT=”FFFF00”> <P>欢迎光临无名的主页</P> 这就是我 <IMG SRC=“images/wuming.gif”> <P>我常去的网站， <A href=“http://yahoo.com”> Yahoo! </A> </P> </BODY> </HTML>
HTML在浏览器中被解释 <HTML> <HEAD> <TITLE>简单的HTML例子</TITLE> </HEAD> <BODY BGCOLOR=“#000000” TEXT=”FFFF00”> <P>欢迎光临无名的主页</P> 这就是我 <IMG SRC=“images/wuming.gif”> <P>我常去的网站， <A href=“http://yahoo.com”> Yahoo! </A> </P> </BODY> </HTML> 一个HTML文件总是由文件头（HEAD）和文件体（BODY）两部分组成。标记<HTML>和</HTML>用来说明本文件是一个HTML文件。
“所见即所得”的网页编辑工具 FrontPage易学易用，适合于网页设计的初学者； Dreamweaver强调的是更强大的网页控制、设计能力及创意的完全发挥，适合专业的制作人员使用。
“所见即所得”的网页编辑 设计：“页面视图”，所见 即所得的编辑环境； 代码： “源代码视图”，直 接通过修改HTML标记命 令编辑网页； 拆分：代码视图和设计视图同时显示。
网站制作步骤 选择主题 规划网页（结构与链接关系） 组织素材 选择视觉外观 设计有效的页面布局 制作具体网页 发布网站信息 选择主题：一个网站一定要有一个明确的主题，如公司的网站是用于介绍公司的产品、技术公告、支持服务；而个人站点，可以把个人简历，兴趣爱好等个人信息发布到网上，展现个人风采，结交朋友。不同的主题，规划方法也不同。 规划网页：根据主题来构造网站结构，在导航视图中实现网站结构。 组织素材：有目的地收集素材，进行整理、筛选、加工，来决定放在网站上的内容。 选择视觉外观：一个网站中的所有网页的外观要协调统一，这包括相同的文字字体、相同的网页色调、一致性的导航超链接等。 设计有效的页面布局：根据实际情况来决定使用何种页面布局，如使用表格或框架布局页面。 制作具体网页：下面会具体讲 发布网站信息：下面会具体讲 前5个步骤要在本幻灯片中较详细地讲解，步骤6～7将在以后的幻灯片中全面讲解。教材参考10.7节内容。 设计有效的页面布局 制作具体网页 发布网站信息
网站基本结构 网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站 线性网站：一页连接一页 树状网站：分层排列 网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站。 线性网站：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。 树状网站：类似目录系统的树型结构，由网站的主页开始，依次划分为一层标题、二层子标题……逐级细化，直至提供给浏览者具体信息。在这种结构中，主页是对整个网站的概括，同时提供了与下层的链接。 非线性网站：通常网站的结构是线性网站和树状网站的结合，这样可以充分利用两种结构各自的特点，使网站具有条理，并可同时满足设计者和浏览者的要求。 非线性网站：上述两种网站的结合
网页制作步骤 可利用任何一种文字处理软件编辑Web文档（推荐：记事本） Web文档以纯文本格式存放，取名为*.html或*.htm。 其中插入的HTML语言只有用浏览器才能被解释翻译 在浏览器中使用文件菜单打开命令，可在本地机浏览 Web文档，完成编辑后，可利用FTP将文件及其所用到的媒体素材文件传送到某台公共Web服务器 人人均可在浏览器中URL处，键入具体命令，实现异地浏览该Web文档 一旦对该Web文档内容进行更新，须更新它所在Web服务器上的相关文档 事实上，网络上形形色色的网页都是基于HTML语言编写而成的，网页本身都是普通的文本文件（也称之为HTML文件），因此可以用任何一种文本编辑程序直接编写和修改HTML代码，如Windows的写字板、记事本，DOS的Edit。经过Web浏览器对HTML语言的解释和处理后，网页显示在用户面前的就是一个多媒体的超文本文件。 我们以记事本程序为例，简单介绍如何直接编写和修改HTML代码。 演示，打开记事本，写如下代码： <html> <body> 这是我的第一个网页！</body> </html> 保存，指定保存位置，文件名，后缀一定要写成htm或 html，如first.htm。 打开浏览器，选择文件菜单的打开命令，点浏览按钮，找到first.htm，单击确定按钮，即可在本地浏览该网页文件。下面再添加背景、插入图片、插入超链接，插入水平线并修改水平线的属性。 选择查看菜单的源文件命令，就打开记事本，显示本网页的源文件，下面是添加后的源文件，可分成5步添加，每添加一步，保存，刷新。假设嵌入的文件和first.htm在一个文件夹中。 <html> (1)<body background=“bg.jpg”> 这是我的第一个网页！ (2)<img src=“2000y.gif”> (3)<A href=“card.html”>圣诞节</A> (4、5)<hr color=“red” size=5> </body></html> 本幻灯片的目的是让学生了解直接写源代码编网页的过程。
网页的基本分类 以网页的角度来看,一个网站中的众多网页 主要可以分成下列两层: 导航层 …… 内容层 个人主页 兴趣爱好 个人收藏 个人相册 导航层： 这层中的网页一般是一个网站的主页或目录网页，是对整个网站信息的一个导航，其目的是能使浏览者快速找到需要的网页。 常见的网页种类有： 1）主页：进入网站的第一个网页，也是通往其他网页的入口。 2）目录网页：网站中的某一页作为目录网页，通过这一网页，通往其他网页。 3）框架网页：将浏览窗口分成几部分，某一框架网页作为目录网页，提供到其他网页的链接，其他的框架网页可显示具体的网页内容。 内容层： 这层中的网页是网站的具体内容。 1）内容网页：这类网页最多，根据主题划分，将不同的内容组织到相应的网页中。 2）联络网页：提供网站的管理者和浏览者联系的方式，如电子邮件地址。 3）说明网页：网站自我介绍、版权说明等。 …… 内容层 兴趣爱好 个人收藏 个人相册
网站创建的基本方法 将本地机中的某个文件夹定义为Dreamweaver站点，利用Dreamweaver管理这些网页 …… 网站创建的基本方法： 直接在网页视图中制作每一个网页文件，保存的时候，把所有的网页文件保存在同一个文件夹（如某某的网站）下的相应的子文件夹中（如主题1文件夹、主题2文件夹）。嵌入的图片或其他素材文件要事先拷贝到相应的子文件夹中（如图片素材文件夹）。 将本地机中的某个文件夹指定为FrontPage站点，选择文件菜单中的新建命令，选择站点，可选择一种主题模板，创建网站。这样就可在导航视图中进一步修改网站结构，网站结构创建好之后就可双击选定的网页，进行具体的网页编辑。这种方法的好处在于保存网页文件时嵌入的素材文件也会自动导入到站点中。 可在安装有FrontPage 2000的机器上安装Web服务器，它们是网站设计的最佳组合，这个Web服务器既可作为FrontPage的测试平台，也可以作为实际的网站发布服务器。 幻灯片中呈现的网站结构图是一个按素材内容分门别类整理存放的参考结构，当网站庞大，文件数目众多时，这样的结构设计可对网站的制作和维护起很大作用。
网站创建步骤举例（1） 在本地磁盘上新建站点文件夹，如d:\openlab 执行 “站点|管理站点”命令，弹出“管理站点”对话框 执行“新建|站点”命令 导航视图从宏观的角度记录网站的结构，即网站内各网页的层次结构图。你可以在该视图中添加新网页，并确定新网页在整个网站的位置及与其他网页之间的关系。使用这种方法可创建和修改网站的整体内容结构。 演示：建立如图所示的网站结构。 新建一个站点，选择只有一个网页的站点，建在本地的一个文件夹下，如 d:\example； 按幻灯片中的举例新建9个网页，并按图中网页的名称进行重命名。 利用导航视图中记录的网站结构信息，可以在网页中创建帮助访问者浏览网站内容的导航栏。
网站创建步骤举例（2） 设置站点名称：开放实验室 不使用服务器技术 设置开发过程中,使用文件的方式和文件的存储位置 设置无远端服务器连接
网站创建步骤举例（3） 在文件面板上新建网页文件和图片素材文件夹
网站创建步骤举例（4） 切换到“站点地图”视图 创建的站点结构
网站创建步骤举例（5） 双击某个网页文件名 进入具体网页的编辑
认识Dreamweaver界面 插入各种对象 网页间切换标签 视图按钮 网页编辑窗口 文件面板 标签选择器 属性面板
基本网页编辑 添加文本和插入素材文件 新建、打开、保存网页 既可以在站点中创建新网页，也可以创建独立的网页。Dreamweaver 内置的各类模板可以帮助我们创建不同类型的网页。 添加文本和插入素材文件 本幻灯片讲解新建网页和输入文本、插入素材 新建网页的方法有很多种，在FrontPage的几种视图方式下都可以在站点中创建新的网页。FrontPage 还提供多种网页模板，使我们能快速地创建具有各种布局和功能的网页，只要选“文件” /“新建”命令，选择合适的网页模板，就可创建出具有专业外观的网页。例如可以创建两列式的网页或带有搜索表单的网页。当然，也可以创建孤立的网页。 打开网页继续进行编辑或查看。如果网页在当前站点中，可在任何视图中双击网页的图标或文件名来打开网页；如果网页是在其他的站点中，或是在本地文件系统上，选择“文件” /“打开”菜单，在打开文件对话框中选择想打开的文件，再单击 “打开”按钮。 保存网页：对于新建的网页，第一次保存时，选择“文件” /“保存” 或“文件” /“另存为”菜单命令 ，或点击格式工具栏的保存按钮，效果是一样的，都弹出“另存为”对话框，在保存位置处选择新网页的保存位置；在文件名中输入新网页的文件名称；在保存类型下拉列表框中选定新文件的保存类型。FrontPage 2000中可以保存的文件类型有5种：网页文件(.htm)、FrontPage模板文件（.tem）、ASP文件（.asp）、超文本模板文件（.htt）、超文本样式文件 （.css）。其中网页文件最常用。 插入素材网页视图中进行文本的录入和word类似，这里不再赘述。也可以在网页中插入任何一种基于文本的文件，包括 .htm 文件、.asp 文件、.rtf 文件和 .txt 文件，以及任何 Microsoft Office 文档。只要选择“插入” /“文件”命令，然后选择要插入的文件即可。 设计视图中进行文本的录入和word类似，也可以在网页中插入任何一种基于文本的文件，包括 .htm 文件、.asp 文件、.rtf 文件和 .txt 文件，以及任何 Microsoft Office 文档。
基本网页编辑 设置文本格式 插入特殊网页元素 在 Dreamweaver 中，可以在属性面板上设置文本格式，如更改字体、大小、样式、颜色等. 设置文本格式的方法有两种： 1) 使用格式工具栏的“常用的字体修饰”按钮，可改变字体、大小、加粗、倾斜、加下划线，改变字体颜色。 演示：选择一段文本，设置文本格式。 2) 使用格式菜单的字体命令，可设置更多的文本效果。它有两个选项卡，字体选项卡和字符间距选项卡。字体选项卡除了字体修饰功能之外，还有更多的字体效果；字符间距选项卡中可设置字符间距和字符位移的位置。 演示：使用“格式” /“字体”命令，设置文本格式。 插入特殊网页元素 演示四种特殊元素的插入（换行符 、水平线 、符号 和注释 ），使用“插入”菜单中的相应命令。 参考教材10.3.2节内容。 插入特殊网页元素 Dreamweaver的插入菜单可以插入换行符、水平线、特殊字符和注释等多种类型的特殊元素.
基本网页编辑 使用“页面属性”对话框设置网页标题、背景色或背景图片、文本颜色、超链接颜色和样式等。 使用项目符号和编号 项目符号和编号是组织数据的工具，它可以使数据层次分明、重点突出。 演示：项目和符号列表的使用，多级列表和和折叠大纲的使用。 由于不同的浏览器默认的背景色不一样，所以创作网页时要自己指定一种背景色，这样不致于因浏览器不同而看不到文字。 演示：“格式” /“背景” ，选择背景标签，可设置网页的背景色或背景图片；选择“常规” ，可设置网页的背景音乐。 在FrontPage 的网页视图中的预览窗口中看到的是网页发布后的大致样式，而且用户使用的浏览器不同,看到的效果也不同，所以在发布之前，要查看同一个网页在不同的浏览器中的效果。计算机中最好要安装两大主流浏览器：IE和Netscape。
认识图形格式 G R B GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形） 可用颜色数 16777216 16777216 4294967296 每幅图像的颜色 256 16777216 256-4294967296 压缩 无损 有损 无损 透明 单色 否 Alpha通道 半透明 否 否 Alpha通道 动画 是 否 否
GIF格式图像举例 GIF（Graphics Interchange Format）是作为一个跨平台图形标准而开发的、与硬件无关的8位彩色图形格式，也是在因特网上使用最早、应用最广泛的图像格式，包含87A和89A两种格式。 2cm×2cm 2K 4cm×3.6cm 8K 5cm×14cm 47K 256色的调色板 导致色滩出现， 色彩层次感差。
JPEG格式图像举例 JPEG格式（简称JPG）是一种流行的图像文件压缩格式，通常，JPEG可将图像文件的长度缩短成原来的50%到2%不等。在保证对图像质量的前提下，获得较高的压缩比。摄影图像通常采用JPEG格式存储和显示，大多数数字相机拍摄的图像都经过了JPEG压缩处理。 低压缩比 8cm×6cm 116K 高压缩比 15cm×20cm 43K
图形的插入和简单编辑 HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 <IMG SRC=“图像文件存放位置/图像文件名.扩展名”> 图形的插入：执行“插入|图像” 菜单命令 直接拖拽来改变图片的大小 大图像不能通过减小该图像尺寸以达到减少 其文件大小和下载时间的目的。 使用属性面板设置图片属性 重新取样图片 演示 图形的插入：使用“插入” /“图片”命令，可插入剪贴画库中的图片，本地磁盘的图片文件、网上的图片、站点中的图片。 直接拖拽来改变图片的大小：单击图形，然后单击并拖动图形上的控点来调整其大小。要调整图形大小和保持它的比例（纵横比），可拖动角部的控点。拖动侧边控点时，该图形将会变形。 使用“图片属性”对话框来设置图片的替代文字、图片边框：可以指定图片的替代文字，即当图形不能显示在 Web 浏览器时，代替图形显示的文本。某些 Web 浏览器在下载图形时，或站点访问者在图形上移动鼠标光标时也显示图片的替代文字。 使用图片工具栏编辑图片：主要功能有：在图片上添加文本、图片旋转、增加/减少对比度、增加/减少亮度、裁剪、设置透明色、图片的绝对定位和图片的层叠。
网页中图片不能正常显示问题 原因1：图片没有保存到网站中 原因2：图片保存到网站中，但保存的路径不正确。 网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。网页中的路径有相对路径和绝对路径，在应该使用相对路径的地方使用了绝对路径，或相对路径的引用不正确都会导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。
绝对路径与相对路径(1) 绝对路径：文件在硬盘上的真正路径 D:/myweb/wuming.html D:/myweb/images/wm.gif 如果在wuming.html网页中 插入wm.gif图片，使用绝对 <IMG SRC=“D:/myweb/images/wm.gif"> 路径，那么在本地电脑中将一切正常，因为在D:/myweb/images路径下的确存在wm.gif这个图片。但你将它们拿到另一台机器上或传到网站服务器上后，就会出错，因为要到当前的机器的D:/myweb/images路径下找wm.gif文件。
绝对路径与相对路径(2) 相对路径：当前网页相对目标文件的位置 / 根目录 ../ 上一级 ../../ 上两级 / 根目录 ../ 上一级 ../../ 上两级 例1：D:/myweb/wuming.html D:/myweb/images/wm.gif 相对路径： <IMG SRC=“images/wm.gif”> 例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif 相对路径： <IMG SRC=“../img/wm.gif”>
绝对路径与相对路径(3) 例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/wm.gif 相对路径： <IMG SRC=“../../img/images/wm.gif”> 把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分忽略,只考虑他们不同之处。 为了避免在制作网页时出现路径错误，我们可以使用Frontpage或dreamweaver的站点管理功能来管理站点。站点中的网页保存时将把图片保存到站点中并自动把绝对路径转化为相对路径，并且当你在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改。
建立超链接 超链接的实现方法：将某个文本串或某幅图像和其他 网页的地址（URL）联系在一起。 <A HREF SRC=“网页地址/网页文件名.html”> 单击此处</A>可获得某某信息。 创建超链接： 超链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页或同一网页中的其他位置，也可以是一幅图片、一个电子邮件地址、一个文件（如多媒体文件或者 Microsoft Office 文档）或者一个程序。 当一个站点访问者单击超链接时，目的端将显示在 Web 浏览器上，并根据目的端的类型来打开或运行。例如：指向一个 AVI 文件的超链接被单击后，该文件将在媒体播放器中打开；如果是指向一个网页的超链接，则它将显示在 Web 浏览器上。 超链接的创建：在网页视图模式下，选中用作超链接的文本或图片，然后选择“插入” /“超链接”命令，弹出创建超链接对话框，在此对话框中设置： 其他Web服务器上的网页文件：在URL处输入具体的地址，或者单击 “使用Web 浏览器来选择网页或文件” 按钮，启动浏览器浏览需要的网页，然后按 Alt+Tab 切换回FrontPage，那么刚刚访问过的网页的地址将会被自动填入在 “URL” 框中。 本地机器中网页文件：选择“制作一个指向你计算机上文件的超链接”， 从你的局域网上浏览你要的网页或文件，然后选择该文件。 同一个网页文件的书签：书签是网页中被标记的位置或被标记的选中文本。 可以将书签用作超链接的目的端，也可以使用一个或多个书签在网页上定位。如果一个位置（不是文本）被标记为书签，则该书签将标记为 。如果文本被标为书签，文本就会以下划线显示。 创建书签超链接的方法： 在网页视图模式下，将插入点定位在想要创建书签的地方，或者选择想要指定为书签的文本。 在 “插入” 的菜单中，单击 “书签”。 在 “书签名称” 文本框中，键入书签的名称 (空白也接受)。 在网页视图模式下，键入将其用作超链接的文本然后选中它。 单击 “插入” / “超链接” 命令。 选择包含书签的网页。 在 “书签”列表框上，单击您要将其作为目的端的书签。 其他Web服务器上的网页文件 本地机器中网页文件 同一个网页文件中（书签）
图像地图 图像地图是另一种形式的超链接，允许将不同的URL指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做“热点”，每一个热点与一个超链接相对应。 如下图汽车生产商的站点可以用新车的图像地图：当站点访问者单击“车子”时，就会显示详细说明车子的网页。 演示： 浏览有图像映射的网页，清华大学网站 http://www.tsinghua.edu.cn 中文版中后勤网站的校园地图，其中有20个热点，对应着每一部分的放大图。 图像映射的制作方法：在 FronPage中，有矩形、圆形和多边形三种热点。 1）选中要做图像映射的图像 2）在图片工具栏中选择一种热点形式：矩形、圆形或多边形 3）鼠标移到图像上，鼠标指针变成一支笔，这样就可用这支笔在图像上画区域，当区域闭合时，会弹出一个创建超链接的对话框，在这个对话框中设置热点区域的超链接。 4）单击“确定”按钮 查看一幅图像中设置了多少个热点 选择图片，然后单击图片工具栏上的突出显示热点按钮，图片消失，只剩下这幅图片上设置的热点区域。
网页布局（表格）
网页布局（表格）
表格布局举例补充 利用单元格的合并与拆分 ，创建不规则的表格。 单元格的不同填充色、边框线颜色分割区域。 设置单元格属性，单元格内对象的排版方式。 设置表格属性，整个表格的排版方式。
表格单位的设置 表格有两种度量单位：像素和% 像素是绝对单位，不随浏览器窗口尺寸变化而变化。 %是相对单位，随着浏览器窗口尺寸变化而变化。 绝对单位范围 0-显示器分辩率值 相对单位范围 0%-100%
表格布局补充 要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。 大多数网页布局采用了带有不可见边框的表格。 本幻灯片上有三个使用表格布局网页的样例，左上图为一1×2表格，放置一幅图片和图片的说明文字，且设置了背景图片；左下图为一2 ×4表格，第1行的第2、3列单元格已合并，用来放置类别，并设置了背景色；右图为一3 ×3表格，第一列的两行单元格已合并，用来放置说明文字，其余的四个单元格中用来放置图片。 正是由于表格的引入，才使得网页的制作者能够随心所欲地控制网页的外观。表格的缺点是不能动态地更新表格中的内容，对于需要动态更新网页局部区域内容的布局，要使用框架工具。 在使用表格进行页面布局时，我们一般去掉表格的边框线，即将边框线的粗细设置为0。
框架布局 框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。 框架名称 初始网页 banner 页头.html Main 柠檬寝室.html contents 菜单.htm 框架集vivaband.htm 本幻灯片介绍框架布局功能。 我们在网上浏览时，会发现有一些网页分成几个窗口，有的窗口是可以改变的，而有的窗口内容始终不变，如幻灯片中的样例，当单击左边窗口的超链接时，会在右下窗口显示相应的网页，而右上窗口的内容始终不变，这就是框架结构。 创建这个网页需要四个网页文件：1个“框架集”文件和3个网页文件，“框架集”文件用于定义框架区域，为每个框架定义位置、大小、名称和初始网页，而该文件本身并不包含可见内容。每个框架各有一个网页文件提供内容，网页文件由“初始网页”的属性指定。
认识框架集网页 框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。 vivaband.htm <html> <head> <title>VIVABAND</title> </head> <frameset rows="139,*"> <frame name="banner" scrolling="no" noresize target="contents" src="页头.htm"> <frameset cols="158,*"> <frame name="contents" target="main" src="菜单.htm" scrolling="auto"> <frame name="main" src="柠檬寝室.htm" target="_self"> </frameset> <noframes> <body> <p>此网页使用了框架，但您的浏览器不支持框架。</p> </body> </noframes> </html> vivaband.htm
框架网页的创建（1） “文件|新建”命令
框架网页的创建（2） 分别为不同的框架设定初始网页文件 banner 页头.html Contents 菜单.htm Main 柠檬寝室.html 分别为不同的框架设定初始网页文件
框架网页的创建（3） 在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。
框架网页的保存 需要分别保存每一个框架对应的网页文件，并要保存“框架集”文件本身。 执行“文件|保存全部”命令,保存所有的框架和框架集,以虚框突出显示的框架就是当前需要保存的框架。 本幻灯片主要讲解框架的创建和保存。 框架的组成： 1）边框：每个框架都有一个边框与相邻的框架分隔开。 2）滚动条：是框架窗口中用来滚动网页内容的一种工具。 3）网页：设计框架网页时，必须为每个框架都指定一个网页，否则该框架就是空的。 新建框架页 使用“文件” /“新建” /“网页”命令，弹出“新建”对话框，选择“框架网页”标签，这里有14种框架网页的模板，可以选择一种建立基本框架。演示：选择“横幅和目录模板”新建框架页。 在框架中加入网页：有两种方法， 1）单击“新建网页”按钮，新建一个空白网页，可直接进行网页编辑。也可单击鼠标右键，从弹出的快捷菜单中选择“在新窗口中打开”命令，就打开了一个大的窗口进行网页编辑，编辑完毕，选择“文件” /“关闭”命令，编辑好的网页自动显示在原来的框架中。 2）单击“设置初始网页”按钮，弹出“选择文件”对话框，选择设置为初始网页的文件。 演示：新建两个空白网页，在新窗口中打开编辑，设置一个初始网页。 保存框架页：需要分别保存每一个框架网页，并且要保存框架集文件本身。使用“文件” / “另存为”命令，演示保存创建好的框架网页。
框架之间的超链接 指定超链接目的网页出现在哪个框架中。 在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。 本幻灯片讲解框架网页之间超链接的设置方法。 在框架中设置超链接功能，和普通网页之间超链接有一个重要的不同点是要指定该超链接指向的网页将出现在哪个框架中，而这个框架被称为超链接的目标框架。演示：设置框架网页间的超链接。 选中要设置超链接的文本串或图像 选择“插入” / “超链接”命令，弹出“创建超链接”对话框，在URL框中指定超链接的目标网页 单击“目标框架”中“更改目标框架”按钮，弹出“目标框架”对话框，在 这个对话框中设置目标框架，有两种方法：第一种方法是直接单击左侧框架示意图中的不同框架，第二种方法是选择右侧的公共目标区来指定超链接出现的框架，有五种： 1）网页默认值：当前框架中网页默认的目标框架，在一个框架网页中，所有框架中的网页都只有一个默认值，这是由框架网页模板决定的，可由设置为网页的默认值来改变框架的默认值。 2）相同框架：使用与目前超链接所在的相同框架。 3）整页：使用完整网页画面显示。 4）新建窗口：使用新窗口显示此超链接。 5）父框架：此框架的上一层框架。
网页背景音乐处理 Dreamweaver本身没有提供设置背景音乐的命令，需要在代码视图中<head>…</head>之间直接输入代码。 <bgsound src="images/back.mid" loop="-1"> 尽量使用mid格式的音乐文件，避免产生慢速网页。
网页背景音乐处理 设置开启新窗口的超链接 如何让主页音乐贯穿整个网站？
利用框架使网页背景音乐连贯 1. 把index.htm重命名为index-content.htm 2. 新建一个 “上方固定”框架网页 3. 下框架设置初始网页为index-conten.htm
利用框架使网页背景音乐连贯 4. 取消index-content网页的背景音乐设置 5. 保存框架集网页为index.htm,上框架网页为index-top.htm 6. 在index-top.htm网页中设置背景音乐 7. 设置上框架属性: 框架高度为1像素, 不显示边框。
创建和使用表单 表单能够向网页中添加文本框、 单选按钮、复选框、按钮等用 户界面控件。 每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。 表单中必须有一个元素作为 “提交”按钮。 表单是用来收集站点访问者信息的域集。站点访问者填表单的方式是输入文本、单击单选按钮与复选框，以及从下拉菜单中选择选项。在填好表单之后，站点访问者便送出所输入的数据，该数据就会根据制作者设置的表单处理程序，以各种不同的方式进行处理。 演示，首都在线上电子邮件地址的申请，一些站点上调查问卷都是使用表单。 可以在网页上现有表单外的任何位置创建表单。 FrontPage 会插入一个矩形虚线框区域，可以添加文本和表单域，例如文本框、单选按钮、复选框、下拉菜单以及按钮。 表单中也会包含一个提交按钮和一个重置按钮。站点访问者在填好表单后单击提交按钮，而他们所输入的数据就会被提交到制作者所设置的表单处理程序。在默认情况下，表单结果会被保存为文本文件。站点访问者可以单击重置按钮，将他们所输入的所有文本删除并清除所有做过的选择，恢复到表单的默认状态。 在 “插入” 菜单中，选择 “表单”，然后单击 “表单”。 演示：创建本幻灯片上的表单，用电子邮件发送。 单击“提交”按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。
应用图像作网页背景 选择适于作背景的图像文件 选择平铺效果具有整体感的图像作背景
使用导航条 在Dreamweaver中，所有网页中使用的图像文件 都必须保存在一个已经定义好的本地站点中。 交互式按钮 执行“插入|图像对象|导航条”命令 交互式按钮 普通状态 鼠标经过状态 鼠标按钮状态 在Dreamweaver中，所有网页中使用的图像文件 都必须保存在一个已经定义好的本地站点中。
创建交互式按钮 PhotoImpact
导出交互式按钮图像
设计各种网页部件 图标 横幅 按钮 按钮栏 Rollover按钮 分隔条 部件对象： 为网页创建单独的按钮，横幅等对象是制作网页最有趣的一部分。PhotoImpact的部件设计器可帮你快速轻松地创建高品质的Web部件，直观方便的操作界面可用三个简单步骤就能完成一个部件的制作。即选取部件，自定义部件，然后将它导出。 图标 横幅 按钮 按钮栏 Rollover按钮 分隔条
层的使用 网页中的元素，如文本、图像，都可以放置到层中，层不仅具有表格的平面布局网页对象的功能，而且可以使网页中的对象在空间垂直方向（Z轴）上互相重叠，再配合时间线（Timeline）的应用可以做出很多效果，使网页动感十足，还可以配合行为（Behaviors），使得网页在某种事件发生时显示隐藏的指定层等。 绘制层按钮 用鼠标拖动的方法画出一个任意尺寸大小的层。
层的编辑 激活图层：单击图层中任一位置，图层只有被激活后 才可以插入对象。 图层标记 闪烁插入光标 黑色的图层边框 选取图层：单击图层边框或单击文档窗口状态栏左侧 层标记<div#图层名>图标 ，或单击图层图标 。 选中的图层四周出现8个黑色的小方块。
层的编辑 移动层 ：选中层时，可用鼠标拖动层的边框移动图层的位置，或者在“层”属性面板中精确设置图层的新位置（左和上的值）。 改变图层尺寸 ：选中图层时，可用鼠标拖动图层四周的小方块调整图层的尺寸，或者在“层”属性面板中精确设置图层的宽高尺寸（宽和高的值）。
时间轴 时间轴是一条贯穿时间的轴线,时间轴动画是把动画对象放置在不同的层中,通过改变层的位置、大小、可见性和叠放顺序等属性来创建动画 执行“窗口|时间轴”命令，调出时间轴面板
制作时间轴动画 步骤: 1.插入一个层 2.在层中插入对象 3. 使用“窗口|时间轴”命令打开时间轴面板 4.将层拖到时间轴的第1帧上 5.选中第1帧,将图层拖到动画开始位置 6.选中第15帧,将图层拖到动画结束位置 7.选中自动播放复选框
行为 行为是在网页中进行的一系列动作,通过这些动作实现用 户与页面的交互,使用Dreamweaver内置的行为(实质是 JavaScript代码), 用户不需编写代码,就可以实现交互和 控制功能. 行为由事件和动作组成,事件是动作被触发的条件,动作 是用于完成特定任务预先编好的JavaScript代码.
使用行为 步骤: 1.执行“窗口|行为”命令,打开行为面板 事件菜单 2.选中要添加行为的对象, 单击加号按钮 3.在弹出的动作菜单中选择某个动作 4.根据所选的动作,在参数窗口中设置参数 5.在事件菜单中为动作选择触发事件 动作菜单
利用图层实现下拉菜单（1） 图层默认为隐藏状态 步骤一： 分别为各个菜单项 创建对应的下拉菜 单图层。
利用图层实现下拉菜单（2） 指定行为动作： 当鼠标指向菜单项时， 隐藏的指定图层将被 显示，当鼠标移开菜单 项时，显示的指定图层 重被隐藏。 同理应用于下拉菜单图层 步骤二： 分别为各个菜单项 和下拉菜单图层指 定行为动作。
让图层中的对象沿路径动起来 “修改|时间轴|录制层路径”命令
让图层中的内容动起来（1） 嵌套图层的创建： 创建图层，如layer7 选中该图层，按住 Alt键的同时，在其中创建其嵌套图层。
让图层中的内容动起来（2） 选中图层Layer8，执行“修改|时间轴|录制层路径”命令，制作该图层从图层Layer7底部移动到图层Layer7顶部的运 动效果——滚动看板。 起始帧 结束帧
调整多个图层的叠放顺序 选中图层Layer7，直接用鼠标将其拖拽到相应层次。
CSS样式 CSS（Cascading Style Sheet ）层叠式样式表，是国际组织W3C制定的扩展HTML功能的标准，CSS样式广泛适用于文本、图形等网页元素的格式化工作，方便网页的制作和维护，还能产生半透明图像等特殊效果。 “窗口|CSS样式”命令
CSS样式 外部样式表：将CSS样式保存为单独的一个文件(.css)，网页中可以创建对某个现成样式表的链接，而且多个网页可以使用同一个样式表的样式. 嵌入式样式表:对某个具体的网页定义的样式,它的表现形式是直接将样式插入到网页的HTML代码中，定义的样式自动应用到网页中。 局部应用样式表：也是对某个具体的网页定义的样式,定义的样式显示在样式表面板中,可以选择某段文本或图像使用所定义的样式。
去除超链接的下划线 嵌入式样式表 选择新建CSS样式命令 直接将样式插入到网页的HTML代码中
定义文字样式 局部应用样式表 选择“导出”命令，导出为外部样式表，在其它的网页中可应用此样式表的样式
动画原理与制作 动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，从而造成不同的动画显示速度。 当要制作一张动画时，可使用有支持GIF格式的绘图软件来制作图像(或扫描进来的影像)，将这些构成动画的连续数张图像分别储存成不同档名的GIF文档，然後再使用动画制作软件，如GIF Construction Set或Ulead GIF Animator动画制作软件来整合这些图像，针对每张图像设定相关的属性(如显示的停滞时间)，以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示。
动态Gif图片的制作（1） 工作窗口 对象管理器 帧窗格 Ulead GIF Animator
动态Gif图片的制作（2） 使用向导快速制作动画： 在启动ulead gifanimator 程序时，会显示一个启动向导来引导我们创建动画。
使用动画向导制作动画(1) 将一系列静态图片连接生成动画 步骤2:选择文件 步骤1:设置画布尺寸 步骤3:设置帧延迟时间
使用动画向导制作动画(2) 编辑模式下的显示 步骤4:在预览模式下观看动画效果 步骤5:输出gif动画:
制作横幅文字(1) 先创建一个空白的动画文档，然后在 “帧”菜单中选择 “添加横幅文本” 在文本标签中设置字体、字号、颜色、阴影等效果
制作横幅文字(2) 设置文字动画效果 设置帧画面的延迟时间 添加霓虹效果 最终效果
渐变动画（1） 工作区（画布） 帧窗格 对象管理器 延时
渐变动画（2） 添加图像 改变画布大小 选定范围工具：魔术棒 自动创建 手动创建
用视频片段制作 GIF 动画 1. 创建一个新的空白动画。 2. 单击标准工具栏上的 “添加视频”按钮，打开 “添加视频文件”对话框。 3. 找到要用的影片文件并选中后，单击Duration按钮。 4. Duration对话框打开后，有两个属性需要定义:要使用的起始和结束的视频段, Mark in和Mark out。 通过预览窗口和视频控件，决定起始帧和结束帧的帧号, 在Mark in和Mark out中分别输入. 5. 单击OK。Duration对话框关闭，返回到“添加视频文件”对话框。再单击OK，选择的帧就被加载到 GIF Animator 中了。
网页特效 所谓“特效”是指用某种编辑语言编写，或用特效软件编制的，实现某种网页特殊效果的一段编程代码。 JavaScript是一种扩展到HTML的脚本设计语言,它使网页开发者可以更有效地控制页面,并能对用户触发事件作出即时响应,诸如单击鼠标、表单操作等,而且这些都不需要客户机与服务器的交互通信,既为用户提供了更快速的操作,又减小了服务器端的负担。JavaScript不能脱离HTML而独立存在,只有在支持JavaScript的浏览器中,它才能作为HTML页面的一部分起作用,但它增强了网页的表现力。
网页特效制作 许多网页的特殊效果都是用Javascript来装点的。不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的Javascript模式程序，呼吸主页秀就属于这类软件。 呼吸主页秀包含了窗口、鼠标、文字、菜单等九类共350种特效。 为了便于用户的使用,既可以先对已生成的代码进行效果预览，也可以直接修改代码。修改完成后复制到剪切板上，就可以插入到目标页面中了。
网页中插入特效代码 使用DreamWeaver： 在编辑状态下按F10即弹出源代码窗口，将特效代码粘贴进去即可。 使用FrontPage： 点击编辑窗口左下角的“HTML”选项卡即出现源代码窗口，将特效代码粘贴进去即可。 直接使用“记事本”等编辑器： 直接用这些编辑器打开网页文件，出现的就是源代码，将特效代码粘贴进去即可。
在什么地方插入代码? 一般来说，在网页源代码的<body>与</body>之间的任何地方插入代码都可以, (除非特别指明，例如要求插入到<head>与</head>之间）。 如何修改代码？ 插入代码之后，可以把代码中的文本文字替换成你自己的内容。 注意：为避免出错， 不改动文本文字之外的代码，否则程序可能会不能运行！ 可修改文字内容 欢迎光临
可动图片特效(1) 1.图片保存在网页文件所在的文件夹下 2.生成代码后就可以把代码复制到剪贴板中
可动图片特效(2) 3.把代码粘贴到网页的源代码中 4.把要替换的图片复制到网页所在文件夹下,在代码中替换原图片名 dragon.gif 1.jpg 3.把代码粘贴到网页的源代码中 4.把要替换的图片复制到网页所在文件夹下,在代码中替换原图片名 dragon.gif
简单的Javascript样例1 <html> <head> <title></title> <script language="javascript"> <!-- today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html>
简单的Javascript样例1 <html> <head> <title></title> <script language="javascript"> <!-- today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html> 嵌入的javascript以<script language=“javascript”>开头，以</script>结束。 <!-- 和 -->符号用于使脚本跳过没有脚本处理能力的浏览器。 today=new Date() 创建日期对象 document.write(“今天是…) 输出“今天是…” getDate()是Date对象的一种方法，其功能是获得当前的日期。
简单的Javascript样例2 <html> <head> <script language="javascript"> function message(){ alert("欢迎光临!"); } </script> </head> <body onload="message()"> </body> </html>
简单的Javascript样例2 function 函数名(参数列表) { 函数体 } alert() 以对话框显示信息 <html> <head> <script language="javascript"> function message() { alert("欢迎光临!"); } </script> </head> <body onLoad="message()"> </body> </html> function 函数名(参数列表) { 函数体 } alert() 以对话框显示信息 Javascript的方法 onLoad 元素装载 javascript的事件 事件是浏览器响应用户操作的机制，如单击链接按钮时，便产生一个事件。浏览器总在等待事件发生，并在发生事件时，进行相应的处理。处理的过程称为事件处理，进行这种处理的代码称为事件处理器。