网页制作讲义 大学教师 计算机专业 金博志网址

 

 

金博志网址职业技能培训

 

网

页

制

作

讲

义

 

2005年9月8日

 

 

 

 

目    录

 

第一部分：基础 篇

1.1 Dreamweaver MX 2004简体中文版之新功能简介…………………………………………………4

1.2 Dreamweaver MX 2004简体中文版之窗口布局……………………………………………………6

1.3 Dreamweaver MX 2004简体中文版之菜单概述……………………………………………………10

1.4 Dreamweaver MX 2004简体中文版之常用工具栏…………………………………………………15

1.5 Dreamweaver MX 2004简体中文版之定义站点……………………………………………………18

1.6 Dreamweaver MX 2004简体中文版之创建页面……………………………………………………21

1.7 Dreamweaver MX 2004简体中文版之页面制作……………………………………………………23

1.8 Dreamweaver MX 2004简体中文版之超级链接……………………………………………………29

1.9 Dreamweaver MX 2004简体中文版之表格设计……………………………………………………31

1.10 Dreamweaver MX 2004简体中文版之框架技术………………………………………………… 37

1.11 Dreamweaver MX 2004简体中文版之创建导航条……………………………………………… 44

 

第二部分：进阶 篇

2.1 Dreamweaver MX 2004简体中文版之可视化操作iframe…………………………………………46

2.2 Dreamweaver MX 2004简体中文版之滚动字幕……………………………………………………49

2.3 Dreamweaver MX 2004简体中文版之弹出菜单……………………………………………………58

2.4 Dreamweaver MX 2004简体中文版之Dreamweaver的插件………………………………………60

2.5 Dreamweaver MX 2004简体中文版之弹出窗口……………………………………………………63

2.6 Dreamweaver MX 2004简体中文版之添加背景音乐………………………………………………66

2.7 Dreamweaver MX 2004简体中文版之操作框架……………………………………………………68

2.8 Dreamweaver MX 2004简体中文版之创建模板……………………………………………………71

2.9 Dreamweaver MX 2004简体中文版之应用模板……………………………………………………77

2.10 Dreamweaver MX 2004简体中文版之层及应用………………………………………………… 80

2.11 Dreamweaver MX 2004简体中文版之行为事件………………………………………………… 84

2.12 Dreamweaver MX 2004简体中文版之发布网站………………………………………………… 91

 

第三部分：网站 动 画（选讲）

3.1网站动画设计简介

3.2 网站Flash设计软件――SWiSHmax的使用教程

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第一部分：基础 篇

 

1.1 Dreamweaver MX 2004简体中文版之新功能简介

    Macromedia Dreamweaver MX 2004 （简称DW MX 2004），是Macromedia 最新开发的的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。 DW MX 2004 包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。

    【DW MX 2004 MX 2004 的新功能简介】
    ▲简洁高效的设计和开发界面：界面更易于使用，可使您的工作效率和工作质量均得到提高。
    ▲“插入”栏的改进：简洁高效的新外观，占用更少的工作区空间。还新增加了一个“收藏”类别，您可以对“插入”栏进行自定义，将最常使用的对象放置在该栏上。
    ▲表格编辑可视化：在表格中进行列调整操作时能看到实际效果。
    ▲用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。
    ▲起始页：使您能够访问最近使用过的文件，创建新文件和访问DW MX 2004资源。起始页会在您启动DW MX 2004 或尚未打开文档时显示。
    ▲保存桌面选项：使您可以选择当您重新启动DW MX 2004 时重新打开您上一次使用的文档。
    ▲完全支持 Unicode：DW MX 2004支持 Internet Explorer所支持的所有文本编码方式。您可以使用几乎所有您的系统中安装的语言字体，DW MX 2004 会正确地显示和保存这些字体。
    ▲安全 FTP：使您能够完全加密所有文件传输。
    ▲新式的页面布局和设计环境。
    ▲增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。
    ▲动态跨浏览器验证：在您保存文档时自动检查当前文档的跨浏览器兼容性问题。

　　本教程针对DW MX 2004简体中文版进行讨论，供学习网页制作创建静态网站的朋友们参考。因本人水平有限，不当之处在所难免，欢迎批评指正。　　

　　【图象处理软件】
　　Photoshop：制作图文并茂的网页，需要处理图片， PS 是最好的图象处理软件。最新版为Photoshop CS(俗称8.0)版本。对初学者来说稍微专业了。您可以使用简单易学、功能强大的的 Photoshop Elements（即：PSE），对于网页图片文件制作PSE就足够用了。。
　　Fireworks：最新为 MX 2004版本，网页制作三剑客之一。能和DW无缝链接。该软件请您自行收集下载。
　　Flash： 最新为  MX 2004版本，网页制作三剑客之一。网上最火的动画制作软件。该软件请您自行收集下载。
　　Ulead GIF Animator：友立公司开发的功能强大的GIF动画软件。该软件请您自行收集下载。

　　【其他软件】
　　CuteFTP：是专业的FTP上传软件，用于往服务器端上传文件用。  Dreamweaver MX 2004 有此功能，而且功能强大。但是，不少人还是习惯用专业的FTP软件。该软件请您自行收集下载。

　　最终您还需要有一个网络空间。以便您的大作让更多的人浏览。

 

 

 

 

 

 

 

 

 

1.2 Dreamweaver MX 2004简体中文版之窗口布局

　　Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框（如下图）：

　　您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：

 

　　【栏目说明】

　　“插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。

　　“文档”窗口 显示您当前创建和编辑的文档。

　　“属性检查器”（如下图）： 用于查看和更改所选对象或文本的各种属性。

　　“面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。

　　“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。

　　Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。

 

 

 

 

 

 

 

 

 

 

 

1.3 Dreamweaver MX 2004简体中文版之菜单概述

　　　本节提供 Dreamweaver MX 2004中各菜单的简要说明。下图为菜单条：

　　以下分别叙述菜单选项：

文件菜单	编辑菜单
“文件”菜单　包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。	“编辑”菜单　包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。
查看菜单	插入菜单
“查看”菜单　使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。	“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。
修改菜单	文本菜单
“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。	“文本”菜单使您可以轻松地设置文本的格式。
命令菜单	站点菜单
“命令”菜单　提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。	“站点”菜单　提供用于管理站点以及上传和下载文件的菜单项。
窗口菜单	帮助菜单
“窗口”菜单　提供对 DW中的所有面板、检查器和窗口的访问。	“帮助”菜单　提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。

除了菜单栏菜单外，Dreamweaver 还提供多种右键显示上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击窗口中的某一项。

 

 

 

 

1.4 Dreamweaver MX 2004简体中文版之常用工具栏

　　“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。

　　某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。

　　“插入”栏按以下的类别进行组织：

　　“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。

　　“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。

　　“表单”类别包含用于创建表单和插入表单元素的按钮。

　　“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。

　　“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

　　“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。

　　“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。

　　“Flash 元素”类别使您可以插入 Flash 元素。

　　“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。

文档工具栏

　　文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。

　　工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

　　以下对选项进行说明：

　　显示代码视图　仅在“文档”窗口中显示“代码”视图。

　　显示代码视图和设计视图　在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。

　　显示设计视图　仅在“文档”窗口中显示“设计”视图。

　　标题　允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

　　没有浏览器/检查错误　使您可以检查跨浏览器兼容性。

　　文件管理　显示“文件管理”弹出菜单。

　　在浏览器中预览/调试　在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

　　刷新设计视图　当您在“代码”视图中进行更改后刷新文档的“设计”视图。

　　视图选项　允许您为“代码”视图和“设计”视图设置选项。

状态栏

状态栏提供与您正创建的文档有关的其它信息。

　　标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body> 可以选择文档的整个正文。

　　窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。

　　“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。

 

 

 

 

 

 

 

 

1.5 Dreamweaver MX 2004简体中文版之定义站点

　　Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。

　　请执行以下操作：
　　启动 Dreamweaver MX 2004：
　　选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。出现“管理站点”对话框。
　　在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。
　　如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。

　　在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。
　 单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。

　　选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
　　单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。

　　选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
　　单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。

　　单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。

　　单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。
　　现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。

 

 

 

 

1.6 Dreamweaver MX 2004简体中文版之创建页面

　　本节介绍如何应用Dreamweaver MX 2004创建自己的网页。
　　从头创建自己的页面，可以使用 Dreamweaver MX 2004起始页创建新页，或者可以选择“文件”>“新建”，弹出如下对话框：

　　从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver MX 2004即展开工作区界面（一个空白页）：

　　您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。选择“文件”>“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，保存退出。

 

 

 

 

 

 

 

 

 

 

1.7 Dreamweaver MX 2004简体中文版之页面制作

现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图：

   在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。
　　□网页顶端的标题“我的主页”是一段文字。
　　□网页中间是一幅图片。
　　□最下端的欢迎词是一段文字。
　　□网页背景是一深紫红颜色。
　　知道了这个网页的结构以后我们就来可以制作了。
　　首先启动Dreamweaver MX 2004，确保你已经用站点管理器建立好了一个网站（根目录）。
　　为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。

  　　【插入标题文字】

　　进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。

　　【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。

　　【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

 

　　【设置网页的标题和背景颜色】
　 　点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）

　　请在标题输入框填入标题“我的主页”。
　　设置背景颜色：　网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。

　　设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。　

【插入图像】选择以下任意一种方法：

　　（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：

　　（2）使用插入栏（如下图）：单击插入栏对象按钮>选 按钮，弹出“选择图像源文件”对话框，其余操作同上。

　　（3）使用面板组“资源”面板（如下图）：点 按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。

    注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。
　　 一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。

　　【输入欢迎文字】

　　在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。

　　保存页面。

　　一个简单的页面就这样编辑完毕了。

　　【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。

    【小结】在今天的教程中我们制作了一个简单的网页。
　　　内容有四：
　　　①图片插入和对齐设置；
　　　②文字的格式、颜色和加粗等设置；
　　　③背景颜色的设置；
　　　④预览网页，查看实际效果。
　　　 不仅要掌握还要举一反三反复练习。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1.8 Dreamweaver MX 2004简体中文版之超级链接

　　作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。下边我们就来讨论怎样在网页中创建超级链接。

　　【页面之间的超级连接】
　　在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

　　1、在网页中选中要做超级链接的文字或者图片。
　　2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）

　　3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。
　　〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。
　　如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
　　超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上http://www./那么，单击链接就可以跳转到老小孩网站。

　　【邮件地址的超级连接】
　　在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

　提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
　 （如下图）

　　创建完成后，保存页面，按F12预览网页效果。

 

 

 

 

 

 

 

 

1.9 Dreamweaver MX 2004简体中文版之表格设计

　表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）

　　一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。

　　单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。

　　下面看看我们使用表格制作的页面的实例

　　这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。

　　1、 在插入栏中选择 按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。

　　2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）

　　3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）

然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。

    合并结果如下图。

　　4、 用鼠标拖拽表格的边框调整到适当的大小。

　　5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。
　　6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。

 

　　7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。

　　一个符合要求的页面在表格的帮助下做好了。

　　通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。
　　 表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。

　　下面我们就来看看这些属性面板的区别。

　　表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：

　

　　选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：

对表格操作的几种常用方式：

合并：将选中的连续单元格合并成为一个单元格。

分割：将一个单元格分割成若干单元格。

水平对齐方式：分为（左）（中）（右）三种。

垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）

表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。

　　在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：
　　选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。

　　选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。

　　选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：

　　选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。

　　 我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。

 

 

 

 

 

 

 

 

 

 

1.10 Dreamweaver MX 2004简体中文版之框架技术

　　在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。

　　这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。

　　下面我们就来从头开始制作一个框架。（以左右框架结构为例）

　　1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：

　　或在插入栏>布局>选＂框架：左框架＂如下图：

　　Dreamweaver MX 2004生成一个空白的框架页面，如下图：

　　2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。

　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）

虚线笼罩在右边就是保存框架中右边网页。（如下图）

虚线笼罩在左边就是保存框架中左边的网页：（如下图）

    三个页面保存完毕。

　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图）

　　6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。
　　7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。

框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。

 

 

 

 

 

 

 

1.11 Dreamweaver MX 2004简体中文版之创建导航条

    如果不使用框架，可以在每个页面设置导航条，导航条设一组链接按钮，供浏览者选择使用。按钮有多种形式，下边介绍由鼠标经过图像变换按钮的组成的导航条制作：（导航条在页面顶部）

    “鼠标经过图像”是当访问者用鼠标指针指向该图像时，该图像发生变化。

    “鼠标经过图像”由两个图片组成：页面最初载入时显示的原始图像，访问者将鼠标指针移到原始图像上时显示另一幅图像。

    提示：事先您要制作好按钮图像，确保每个按钮的图像都具有相同的宽度和高度（以像素为单位）。

    请执行以下操作：

    打开主页 (index.htm)

    在“文档”窗口中，将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像（logo），导航条就安排在logo下边的位置。

    选择“插入”>“图像对象”>“导航条”。弹出对话框如下：

    在“插入导航条”对话框中，单击顶部加号“＋”按钮，按照上图所示①②③④⑤对应的文本框，填入相应的文件。即完成了一个按钮的添加。

    然后，单击页面顶部的加号“+”按钮，添加另一个按钮。重复以上步骤，直至您所需的按钮添加完毕。

    勾选“预先载入图像”，在对话框底部的“插入”菜单中，选中“水平”。勾选“使用表格”。

    单击“确定”关闭该对话框，成功创建了导航条。

    保存页面。

    按F12，预览一下你的导航条，如果满意了，可以将该页面多次“另存为”其它页面，分别指定不同的名称。比如：p1.htm、p2.htm.....等。保存多少次视您的按钮数量而定。然后，分别打开其它页面进行编辑。

    【注】：鼠标指针经过按钮，图像变化，只能在浏览器中看到效果。

第一部分：进阶 篇

 

2.1 Dreamweaver MX 2004简体中文版之可视化操作iframe

   iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

    从Dreamweaver MX开始，可以可视化操作iframe，不再需要第三方插件。

插入iframe
1.点击“插入面板”的“标签选择器”

2.在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。

3.在“标签编辑器-Iframe”对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。
源：点击“浏览”按钮，选择要出现在iframe中的网页文件。
名称：输入的名称，将作为这个iframe的标识，其它的链接如果要在这个iframe打开，网页打开“目标”就需要输入此“名称”。
宽度和高度：可以输入象素值，也可以输入100％。
边距宽度和边距高度：设置和外围标签的边距。
对齐：设置对齐方式。
滚动：设置是否允许出现滚动条。
显示边框：选择是否出现边框。

    设置链接在某个iframe中打开
    选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。

基本资料 联系方式 我与网络 发展方向

iframe透明
为了使iframe内容和网页背景相同，需要使iframe透明。

在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。

框架包含应用程序
在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“框架包含应用程序”。

Iframe的替代内容
在某些不支持iframe的浏览器中，iframe将不能显示。这时需要输入替代内容。

在“标签编辑器-Iframe”对话框中，选择“替代内容”选项，在替代内容中输入代码或者文字。

 

2.2 Dreamweaver MX 2004简体中文版之滚动字幕

    在网页中，制作滚动字幕使用marquee标签，如果用手写的方法，实在是太麻烦了。从Dreamweaver MX开始，可以使用“标签选择器”插入各种标签，并且可以使用“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。

使用“标签选择器”插入marquee标签
1.把光标插入点放在需要插入滚动字幕的地方。
2.点击插入面板的“标签选择器 ”
3.选择 marquee标签，点击“插入”按钮。

使用“标签检查器”设置marquee标签的属性
4.转换到代码视图。把光标插入点放在 marquee标签内。

5. 选择“窗口”>“标签检查器”。可以在“标签检查器”中设置标签的各种用法。

设置marquee标签的主要用法
6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。

 

behavior用法
alternate	scroll	slide
内容在相反两个方向滚来滚去	内容向同一个方向滚动	内容接触到字幕边框就停止滚动

7.direction属性设置字幕内容的滚动方向。

 

direction用法
down	left	right	up
向下运动	向左运动	向右运动	向上运动

8.scrollamount属性设置字幕滚动的速度。

 

scrollamount值为1	scrollamount值为50

9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1毫秒。如果要有步进的感觉，就设置时间长一点吧。

 

scrolldelay值为1	scrolldelay值为500

10.width属性设置滚动字幕的宽度。

11.onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。
onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。

 

事件	onMouseOver	onMouseOut
动作	this.stop();	this.start();

 

12.style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。

13.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。

 

loop值为-1	loop值为2

 

一套向上滚动字幕的代码：
<marquee behavior="scroll" direction="up" width="200" height="150" loop="-1" scrollamount="1" scrolldelay="1" style="font:12px;" onMouseOver="this.stop();" onMouseOut="this.start();">
滚动字幕内容</marquee>

 

 

 

 

 

 

 

 

 

 

 

2.3 Dreamweaver MX 2004简体中文版之弹出菜单

    使用Dreamweaver MX的行为，可以直接做出弹出菜单。下面讲解制作一个弹出菜单的具体步骤。
1.可以直接给图片加上弹出菜单。但是不能给文本直接加上弹出菜单。如果需要给文本加上弹出菜单，首先需要把文本变成链接。选中文本，在属性面板的链接项输入“javascript:;”，就给文本加上链接了。

2.文本链接默认的颜色是蓝色，并且有下划线。如果要更改链接文本的外观使它看上去不是一个链接，在代码视图下，打到这个链接的a href 标签，在后面插入“style="text-decoration:none; color:black"”。

3．在添加弹出式菜单之前需要保存网页文件。保存网页之后，打开行为面板，点击+号。

4.在弹出的菜单中点击“显示事件”，选择“4.0 和更高版本浏览器”。

5.点击+号按钮，在弹出的菜单中选择“显示弹出式菜单”。

6．在“显示弹出式菜单”中添加弹出菜单，并做外观和位置的设置。中文版一看就明白，这里不多说了。

7.做好弹出菜单后，按F12预览，在浏览器中的效果如下图。

 

 

 

2.4 Dreamweaver MX 2004简体中文版之Dreamweaver的插件

    使用Macromedia 功能扩展管理器，可以方便的在Macromedia 应用程序中安装和删除功能扩展。

    在这里想提一下，功能扩展管理器有时会因为莫名其妙的原因损坏。这种情况，重新安装功能扩展管理器就可以了。第一次安装和重新安装方法相同。

在Macromedia安装软件目录下，双击功能扩展管理器安装图标。

完成功能扩展管理器的安装。

在扩展管理器中点击“安装新扩展”按钮。

选择并且安装插件。

在Dreamweaver中选择插件。实例中是FlashImage插件。

设置插件。

Macromedia网站也有很多插件下载。
http://www.macromedia.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.5 Dreamweaver MX 2004简体中文版之弹出窗口

    进入 163.com 首页的时候，就会弹出小窗口。本文介绍这种弹出窗口的制作方法。

准备小窗口页面：

1. 打开一个页面，设置页面属性。左边界，顶部边界为 0 ，在标题处输入标题名称。

2. 在页面中插入图片。也可以是文字， Flash 动画等。小窗口页面就准备好了。

给一个页面添加弹出小窗口：

1. 打开需要添加弹出小窗口页面，例如一个网站的首页，在标签选择器中选择“ body ”标签。

2. 打开行为面板，点击“ + ”按钮添加行为。

3. 选择“打开浏览器窗口”。

4. 在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。

5. 按 F12 ，在浏览器中发布的效果如下图。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.6 Dreamweaver MX 2004简体中文版之添加背景音乐

1. 打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。

2. 打开行为面板，点击“＋”按钮添加行为。

3. 选择“播放声音”。

4. 选择声音文件。一个网页的背景音乐就添加好了。

如果要修改背景音乐属性

1. 在文档中选择背景音乐的图标。

2. 在属性检查器中，点击“参数”按钮。

3. 修改参数。

 

 

 

 

2.7 Dreamweaver MX 2004简体中文版之操作框架

    本文介绍操作框架的一些方面：拆分框架，查看和设置框架集属性，设置链接的目标框架。

拆分框架
1.在框架页面中，将插入点放在边框上，出现双向箭头。

2.拖动边框，产生一个新的框架文件。

3.在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。

4.选择“文件”>“保存全部”。
注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住 Alt 键的同时拖动框架边框。

查看和设置框架集属性

选择“窗口”>“其他”>“框架”,打开“框架”面板。
在“框架”面板中单击环绕框架集的边框，选中框架集。
在属性面板上，选中框架区，然后修改框架集属性。
使用类似的方法修改框架文件的属性。

设置链接的目标框架

在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。
_blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。
_parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。
_self 在当前框架中打开链接，同时替换该框架中的内容。
_top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。

如果链接需要在框架页之外打开，使用 target="_top" 或 target="_blank"。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.8 Dreamweaver MX 2004简体中文版之创建模板

当需要制作大量布局基本一致的网页时，使用模板是最好的方法。

本文介绍的是基于一个网页创建模板的方法。

简明步骤：打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。

打开示例站点中已经建好的index.htm文件，打开“文件”，点击“另存为模板”。

选择模板存放的站点，在“另存为”中为模板输入一个唯一的名称，单击保存按钮。

在“插入栏”选择“模板”，然后单击“可编辑区域”。

在“名称”文本框中为该区域输入唯一名称。

建好的模板如下图。

 

重复这个过程。可以再做一些“可编辑区域”。

 

打开“文件”菜单，单击“保存”。一个模板就做好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.9 Dreamweaver MX 2004简体中文版之应用模板

    为了简化制作过程。常常采用先制作出页面，再应用模板的方法。

    简明步骤：打开一个有内容的页面→打开资源面板→点击模板按钮→选择一个模板→点击应用按钮→指定可编辑区域→确定。

1.打开一个填充了内容的网页。

2.打开资源面板，点击“模板”按钮，打开模板类别。

3.选择一个模板，点击应用按钮。

4.将内容移到新区域，按“确定”按钮

5.一个应用模板的页面就做好了。

 

 

 

 

 

 

2.10 Dreamweaver MX 2004简体中文版之层及应用

    层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：

　　我们首先来做一个层

　　1、 在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。

　　2、 在页面中显示一个层。

　　3、 通过周围的黑色调整柄拖动控制层的大小

　　4、 拖动层左上角的选择柄可以移动层的位置。

　　5、 单击层标记可以选中一个层。

　　6、 在层中可以插入其他任何元素包括图片文字链接表格等。

　　一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。

　　这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。

　　层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。　比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。

　　层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。　

　　层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。

　　图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。

　　要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。

　　［层和表格之间转换］

　　由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己的布局，然后将它们转换为表格。

　　 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换”＞“层到表格”。即可显示“转换层为表格”对话框。

·  选择所需的选项。单击“确定”。

    若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。

    选择所需的选项。单击“确定”。

层及应用我们就简单介绍到这里。

 

 

 

 

 

 

 

 

 

 

 

 

2.11 Dreamweaver MX 2004简体中文版之行为事件

    行为是实现网页上交互的一种捷径，Dreamweaver MX 2004 行为将 javascript 代码放置在文档中，以允许访问者与 Web 页进行交互，从而以多种方式更改页面动作或执行某些任务。行为是事件和由该事件触发的动作的组合。

　　下面我们来学习行为的用法。现在，举个例子加以说明。看下图，光标移到图片上面。在它的右侧即显示一段其它内容（动画）。请您用鼠标测试，然后，我们来分析一下这个过程。

    请您操作鼠标在花上移入移出
    这是两个行为：行为一：移入+显示；行为二：移出+隐藏。
    事件是：鼠标移入和移出。动作是：显示和隐藏。
　　具体操作如下：

　　1、 在页面中插入一张图片，本例为菊花图片。

　　2、 在页面中插入一个层，贴入几个动画小人。如下图：

　　在层面板中，将该层设置成为隐藏。打开页面的时候不显示。层面板状态，如下图：

　　3、 单击图片，打开行为面板（「窗口」菜单＞行为）。在行为面板按“+”号，在弹出菜单中选中显示-隐藏层，如下图：

系统弹出显示－隐藏层对话框。单击该层，然后单击“隐藏”按钮。确定。

　　打开“行为”面板，如下图：

　 4、 我们可以在面板中看到事件和行为。需进一步对事件进行设置。单击“onLoad”，在下拉菜单中选择“<A>onMouseOut”，如下图：

　4、上述方法是鼠标移出事件行为的设置，重复以上方法再对鼠标移上事件行为进行设置，把显示－隐藏层设为（显示），如下图：

　　行为事件设置，如下图：

　　设置后的“行为”面板最终结果，如下图：

　　5、 保存页面，预览网页。可以看到光标移动到菊花图片上就出现右侧的内容。

　　下面给出一些常见事件的一些解释

　　onClick 单击

　　onDbclick 双击

　　onKeypress按键

　　onMouseDown鼠标按下

　　onMouseOut鼠标移出

　　onMouseOver鼠标移上

　　onMouseUp鼠标抬起。

　　行为是一个很有用的交互手段。由于行为的门类繁多，也较复杂。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.12 Dreamweaver MX 2004简体中文版之发布网站

    在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站文件进行检查和整理，这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。
　　步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框，如下图：

　　下图是检查器检查出本网站与外部网站的链接的全部信息，对于外部链接，检查器不能判断正确与否，请自行核对。

　　下图是检查器找出的孤立文件，这些文件您的网页没有使用，但是仍在你的网站文件夹里存放，上传后它会占据有效空间，应该把它清除。清除办法是：先选中文件，点Delete键，确定。这些文件就放在“回收站”。

　　如果不想删除这些文件，点保存报告按钮（上图所示），在弹出的对话框中您给报告文件一个保存路径和文件名即可。该报告文件为一个检查结果列表。你可以参照此表，进行处理。

　　纠正和整理之后，您的网站就可以发布了。

    【发布站点操作】

　　如果您是第一次上传文件，您的远程 Web 服务器根文件夹是空文件夹时按以下操作进行。如果不是空文件夹，另行操作附后。

　　服务器根文件夹是空文件夹时，连接到远程站点，请执行以下操作：

　　在 Dreamweaver MX 2004中，选择“站点”>“管理站点”。管理站点对话框中“dwmx2004”是在本教程第5页设置的，如果想回忆一下，请查看“设置站点”。

　　选择一个站点（即本地根文件夹），然后单击“编辑”。

　　单击对话框顶部的“基本”选项卡。在前面“设置站点”时，已填写了“基本”选项卡中的前几个步骤，因此单击几次“下一步”，直到向导顶部高亮显示“共享文件”步骤。如下图：

   在标有“您如何连接到远程服务器？”的弹出式菜单中，选择“FTP”。单击“下一步”，弹出如下对话框：

　　请输入以下选项：

　　输入服务器的主机名；（必须填入）

　　“您打算将您的文件储存在服务器上的什么文件夹中？”（可以留空）

　　在相应的文本框中输入您的用户名和密码。

　　“使用安全 FTP (SFTP)”选项。（可不勾选）

　　单击“测试连接”。

　　如果连接不成功，请检查设置或咨询系统管理员。

　　在输入相应的信息后，单击“下一步”。

　　不要为站点启用文件存回和取出。

    单击“下一步”。

    单击“完成”以完成远程站点的设置。

    再次单击“完成”以退出“管理站点”对话框。

    【上传文件】

    在设置了本地文件夹和远程文件夹（空文件夹）之后，可以将文件从本地文件夹上传到 Web 服务器。

    请执行以下操作：

    在“文件”面板（“窗口”>“文件”）中，选择站点的本地根文件夹。

    单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。

    Dreamweaver MX 2004会将所有文件复制到服务器默认的远程根文件夹。

    多数空间提供商都设置有服务器默认的文件夹，请在此文件夹下创建一个空文件夹，方法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建文件夹”，输入一个名称，用作您的远程根文件夹，名称与您本地根文件夹的名称一致，便于操作。

    为了操作更直观，您也可以最大化“文件”面板。请打开“文件”面板的最右边的“扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容：（注）这是将文件夹展开的示例，便于您观察，供参考。

    点击 ，Dreamweaver MX 2004将所有文件复制到您定义的远程文件夹。

    提示：第一次上传必须搞清楚网络空间服务商指定的服务器默认的存放网页的文件夹，在此文件夹下存放您的站点文件。访问您的网站地址为：http://......./index.htm

    如果你在服务器默认的文件夹下上建立了与本地根文件夹同名的文件夹，那么访问您的网站，需要用这样的地址：http://........./ （您的文件夹名）/index.htm

    上传完毕，请在浏览器中输入浏览地址，测试您上传的结果。

 

 

 

 

 

 

 

 

 

 

 

 

第三部分：网站 动 画

3.1网站动画设计简介

3.2网站Flash设计软件――SWiSHmax的使用