第四章使用Dreamweaver制作网页
4.1 Dreamweaver简介
1．主要功能与特色
Dreamweaver 是Macromedia公司推出的可视化的网页设计和站点工具，用户可以不用编写HTML代码就可以生成跨平台、跨浏览器的网页，它支持动态HTML和CSS样式，采用了Roundtrip HTML技术（可以同时进行可视化设计与源代码设计），页面设计过程中自动生成的源代码简练，通过对象的属性控制面板可以很方便地完成各种属性的设置。最新版的Dreamweaver MX在站点管理和动态网页编辑方面的功能更加强大，是目前最为流行的网页设计工具。
2．用户界面
（1）主窗口：包括菜单栏（实现几乎所有功能）、工具栏（常用操作）、工作区（网页编辑区）、状态栏（各种提示信息）。
（2）浮动的控制面板：在网页设计过程中，随着选中的对象不同，属性面板的内容自动更新，通过它可以完成各种属性设置、建立链接、编辑代码等。
（3）站点管理窗口：用类似于资源管理器的方式对站点中的所有文件进行管理，如：重命名、移动（并自动更新所有链接）、复制、删除文件；新建/打开文件夹、文件；可以直接上传（put files）或下传(get files)文件等。
4.2 Dreamweaver中的基本操作
1．建立站点
站点是存储所有Web网站文件的地方。用Dreamweaver创建网站前，应该先在资源管理器中建立一个文件夹，以便今后保存所有站点文件。在Dreamweaver中创建网站时，需要给出站点名称（最好直接用网站的中文名字，该名称可以更改）和一个本地文件夹（就用资源管理器中刚建的那个）。
建好站点后，再从站点管理窗口建立起各个栏目的子文件夹以及用于保存公共文件的分类文件夹，如放图片的images、放样式的CSS。
特别提示：在Dreamweaver中建立文件夹和文件时，应该采用英文字符/数字命名，不要用汉字，以免有时候上传之后不能正常显示。
2．建立网页
（1）设置页面总体属性：从“修改”（Modify）菜单中选择“页面属性”（Page Properties），可以设置网页的标题、背景图片、背景颜色、超级链接各状态的颜色、页面边距等。
（2）编辑文本：和Word中的操作基本相同，先输入文字，然后通过属性面板设置字体、字号、
颜色、对齐方式等效果。输入时注意：
关于空格：系统默认字符之间可以通过空格键输入1个字符的空隙，如果想加大空隙，需按组合键：Ctrl+Shift+空格，或从代码窗口输入专门的空格符 否则按空格键无效。
关于换行：输入文字时，若超过窗口显示宽度，系统可自动换行；需要分段时直接按Enter键即可，两段之间空一行。可以按Shift+Enter键实现不分段的手动换行。
关于字体：系统默认的中文字体是一般是宋体，字号为3，颜色为黑色。如果想换成其它字体，第一次进行此操作时需要添加所需要的汉字字体。一般正文字号用2显得比较秀气，太大
不好看，标题文字可以设为3或4。文字颜色尽量与背景色对比鲜明。
（3）插入图片
从“插入”（Insert）菜单里选择“图片”（Image），从对话框里找到所需要的图片并确定之。
注意：1）插入图片前应该先保存网页，否则系统提示用带File的本地路径；
2）如果所插图片不在站点文件夹中，系统会提示是否复制到站点文件夹，应该选择“是”，
否则设计时可以看得到图片，等上传到网上后就找不到该资源了！故最好先把所需要
的图片从资源管理器的其它文件夹中复制或移动到站点文件夹中。
3）插入进来的图片可以通过属性面板改变其尺寸（数字加粗则表示改变了）、对齐方式、提示文字、建立常规链接和热点图链接等。
（4）插入轮替图片：从“插入”（Insert）菜单里选择“轮替图片”（Interactive Images），从对话框里找到所需要的图片1和图片2，并确定之。这样当鼠标移动到图片1上时就会出现图片2，
并且可以出现提示文字。
（5）插入其它对象
可以通过插入菜单插入其它各种网页元素，如：表格（Table）、图层（Layer）、框架（Frame）、
表单（Form）、超级链接（Hyperlink）、锚（Named Anchor）（也叫书签）、多媒体控件（Media）、
水平线（Horizontal Rule）、特殊字符（Special Characters）、导航条（Navigation Bar）、日期（Date）、
脚本程序（Script Objects）等。
3．建立超链接
利用超级链接可以实现在文档之间或文档中的跳转。链接由源端点和目标端点及一个方向构成，链接的目标端点可以是任意的网络资源，如一个页面、一幅图画、一段音乐、一段程序，或者是页面中的某个位置。可以利用文字也可以通过图片等建立超级链接。
链接的一般标记是：链接源端点
超级链接分三类：
内部链接：在同一个站点内的不同页面之间相互联系的链接
锚点链接：可以链接到网页中某个特定位置的链接
外部链接：把网页与Internet 中的目标相联系的链接
（1） 用文字建立链接
建立链接时，先选中用做链接的那部分文字，单击属性面板中Link 栏边上的浏览图标，从对
话框中选择需要的文件，也可以直接输入其URL ，然后选择其目标显示位置（Target ）。
文字链接的HTML 标记示例：
Target 的取值范围及意义
（2） 用图片建立链接
1） 用整张图片做一个链接：选中该图片，在属性面板的链接栏中给出目标端点的URL ，并选
择目标的显示位置。
图片链接的HTML 标记示例：
2） 用一张图片做多个链接——建立热点图链接：选中该图片→单击属性面板上的热点选择形状
之一 →在图片上特定位置画出热点链接区 → 在Link 栏中给出目标端点的URL （也可以用
指向文件图标拖到所需文件，或单击浏览图标从对话框中选择所需文件）→ 选择目标的显示位置，完毕。
热点图链接的HTML 标记示例：
（3） 添加E-mail 链接 E —mail 链接是一种特殊链接，单击它会启动本地计算机上默认的e —mail 程序，可以写邮件，
并发到指定的地址。
创建步骤：选中要作为超级链接的文字→从插入菜单中选择“E —mail Link ”（E —mail 链接）
→在E —mail 文本框中输入需要的e-mail 地址并确定之。或者是选中文字后，直接在属性面
板的Link 栏中输入：mailto:e-mail 地址 如：mailto:sj_lfg@https://www.doczj.com/doc/759742358.html,
E-mail 链接的HTML 标记示例：
矩形的对角坐标
热点区形状：rect （矩形）、circle （圆形）、poly （多边形）
（4）建立命名锚链接
利用命名锚可以在文档中指定的位置上创建链接的目标端点，通过命名，直接跳转到目标文
档（可以是另一个页面或当前页面）相应的命名位置上。最适合长页面的定点浏览。
定义锚：将插入点放到要命名锚的位置或选中做命名锚的文字→从插入菜单中选择“Named
Anchor”（命名锚）→在对话框中输入锚的名称（若先选了文字，则出现该文字），并确定之。
插入锚的另一种更快的方法是：按组合键Ctrl+Alt+A。
需要改变锚的位置时，选中它，用鼠标象拖动文本一样使其在文档中移动；需要改名时，可
以在属性面板中修改。
注意：定义锚相当于确定了链接的目标端点，只是完成了链接的一半，还需要创建相应的源端点。
链接锚：链接锚的方法是：选中要作为链接的文字，在属性面板的Link栏里输入前缀#和锚
名，假设前面定义的锚名为study，则填入：#study。如果链接的是其它页面中的锚，
则在前缀前面加上文件名，如：course.htm#study（即URL#锚名）
命名锚链接的HTML标记示例：
链接锚：学习园地
（5）添加下载文件的链接
需要提供文件下载功能时，可以建立下载文件超链接。
方法：在站点窗口中，找到需要链接的目标文件，然后选择网页中需要建立超链接的文字，
按住Shift键并拖动鼠标到站点窗口中的目标文件即可。
（6）添加空链接
空链接就是没有经过指派目标端点的链接，利用它可以激活文档中链接对应的对象或文本，
然后为之添加一个行为，以实现当鼠标移动到链接上时进行图象切换或显示分层等操作。
添加方法：选中要链接的文本、图象或其它对象，在属性面板的Link栏中输入#即可。
使用示例1——鼠标移动到链接上时自动播发音乐：
使用示例2——鼠标移动到链接上时自动弹出快捷菜单，并可以通过菜单链接到其它页面：
（7）添加脚本链接
脚本链接是一种特殊形式的链接，通过单击带有脚本链接的文本或对象，可以运行相应的
JavaScript脚本或函数，从而实现相应的功能。
方法：先在文档窗口中选中要创建链接的文本、图象或其它对象，然后在梳洗面板的Link
栏中输入javascript:JavaScript代码或函数
脚本链接的HTML代码示例：
（8）删除超链接
选定建立了超链接的对象，将光标定位在属性面板的Link栏中，删除其中所有的内容。
4.3表格设计
1．创建表格
（1）插入新表格：方法一：从插入菜单中选择表格命令；
方法二：使用组合键Ctrl+Alt+t
方法三：将对象面板调整到Common类上，单击插入表格按钮（2）设置表格基本属性：行数（rows）、列数(columns)、表格宽度(width, 单位可用象素或百分比表示)、边框宽度(border)、单元格间距(cell spacing)、单元格中的内容与边框之间的间隙(cell padding)。
（3）选定表格：与Word中的操作基本相同
（4）添加行/列：将光标置入需在其前面插入行的单元格中，右击→表格→插入行/列。
（5）删除行/列：将光标置入需删除的单元格中，右击→表格→删除行/列。
2．编辑表格
（1）调整行高/列宽：方法一：用类似于Word中表格操作，直接用鼠标拖动到需要的高/宽。
方法二：选中所需要的行/列，在属性面板上的height/width框中输入所需要的数值。
（2）合并/拆分单元格：与Word中操作类似，先选中该单元格，然后单击属性面板上的合并/拆分按钮，再从对话框中给出需要的数值即可。或者选中目标后，右击，从菜单中选择Merge
Cells(合并)/Spilt Cell（拆分）命令.
3．修饰表格
（1）设置表格边框的颜色：先选中表格，然后单击属性面板上的BrdrColor颜色框，在弹出的调色板上选择自己需要的颜色，或直接在颜色框里输入十六进制的颜色值。注意：表格宽度不可为0，
否则看不到效果。
（2）设置表格的背景：1）设置背景颜色：先选中整个表格，再单击属性面板上的Bg Color颜色框，在弹出的调色板上选择自己需要的颜色，或直接在颜色框里输入十六进制的颜色值。
2）设置背景图片：先选中整个表格，再单击属性面板上的Bg Image文本框，在其中输入图片的路径和文件名，或单击其后的文件夹图标，从打开对话框中选择需要的图片文件。
（3）套用表格样式：系统提供了一些设计好的表格样式，可以直接套用其中的某个样式，以提高设计效率。方法：先选择表格，从命令（Command）菜单中选择格式化表格（Format Table）命令，从对话框中选择一个需要的样式，如果不满意其给定的颜色，还可以在对话框中进行适当调整。4．表格的其它操作
（1）表格的嵌套
在表格中可以再插入一个完整的表格。选中单元格后，直接从插入菜单里单击表格即可。
（2）导入表格数据文件
可以把其它应用程序（如Excel、Access）建立的表格数据假如到网页中。
方法：先将表格数据文件转换成文本文件，并且每行数据要带分隔符（如逗号、分号、冒号）然后选择文件→导入→导入表格数据。或从插入菜单中选择表格数据命令。
（3）用表格进行页面布局
用表格可以对页面上的多个对象进行复杂的排版。注意：在进行页面布局设计时，表格的边框（border）一定要设置为0，这样设计中可以看到表格的虚线框，而浏览是没有任何痕迹，否则比较难看。另外，浏览器在下载网页时，先下载整个表格，然后再下载表格中的内容，所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下载速度。
4.4框架设计
1．创建框架
框架的作用是把浏览器窗口分成若干个区域，让每个区域显示不同的网页。创建框架时，系统会生成一个独立的包含各框架页的框架集文件，对有三个框架的文件，需要保存成四个文件。在对框架文件进行保存时，系统默认保存的是光标当前所在页面。可以通过框架窗口指定所保存的页面。
（1）使用对象面板来创建框架
将光标置于页面中，将对象面板切换到Frames类下，从中单击一个需要的形式，框架即被添
加到页面中。
（2）手动创建框架
从插入菜单中插入框架，或者将光标移动到左右或上下页框上，待鼠标变成左右（将页面分成
左右框架）或上下（将页面分成上下框架）箭头时，按住Shift键并拖动光标移到合适的位置
放手，即可看到页面中的框架。注意：要先通过视图菜单使得页面的边框可见。
（3）删除框架
将鼠标移动到框架边框上，待鼠标指针变成左右或上下箭头时，按住Shift键，拖动边框直到
贴近待删除框架页的边框，被遮的框架就被删除了。
（4）拆分框架
在需要拆分的框架页面中，将光标移动到左右或上下页框上，待鼠标变成左右（将页面分成
左右框架）或上下（将页面分成上下框架）箭头时，按住Shift键并拖动光标移到合适的位置
放手，即可看到拆分了的框架。
（5）框架页的保存
对框架页需要逐个保存，并需要把整体框架集作为一个独立的文件保存。注意：文件名要与
内容、位置对应起来，千万不要互相覆盖掉！初始保存时，不主张用“Save All Frames”命
令，因为特别容易造成互相覆盖。
2．设置框架属性
框架和框架集的属性可以通过Frames面板和属性面板进行设置。在属性面板中可以设置框架的名称、框架源文件、是否有滚动条、是否有边框、是否可以重定义框架的尺寸、边框颜色、框架边距。
对多框架页面，可通过Frames面板来切换框架对象。
框架在HTML文档中的标记是在 和
之间插入：noFrames
3．编辑框架页
（1）在框架中打开指定文件：设定整个框架集在初始打开时各框架中的页面。
（2）框架页面的编辑：与正常页面相同。
（3）编辑非框架内容：目的是为了在不支持框架的浏览器中显示提示信息或关于网页说明。
方法：选中框架集，单击修改菜单→框架集→编辑非框架集内容。
4.5 层的使用
1．层的作用与特性
在Dreamweaver中，通过层（Layer）可以对文档内容实现精确的绝对定位。层相当于网页内的一种容器，凡是可以放到网页上的对象几乎都可以放在层中，如：文本、图象、表格、表单等，层中还可以包含层。层可以重叠，可以控制隐藏或显示其中的任何一个，通过设置行为可以使其交替出现，以产生动态效果。在HTML中，层用
创建：从插入菜单中选择层命令，即可插入一个默认大小的层（200x115）。需要改变其大小时，可以直接用鼠标拖动边框上的控制块，或用从属性面板中修改其高度（H）和宽度（W）。
属性设置：通过属性面板可以控制层的可见性（Vis）、溢出处理（Overflow）、背景颜色、背景图片、距网页左边距/顶边距（Left、Top）、层中可见区域大小（Clip）
3．层的基本操作
包括激活、选择、移动、调整大小等，其操作与Word中的文本框操作类似。
4.5表单设计
1．表单的作用
表单是Internet服务器和浏览者之间的桥梁，它不仅可以向浏览者提供信息，还可以把浏览者反馈的信息收集起来送到服务器，经过服务器端应用程序的处理，把结果再传回到浏览者的计算机上。
表单中的对象可以是文本框、文本编辑框、复选框、单选按钮、列表框、列表菜单、普通按钮等，可以是一个对象，也可以是多个对象。几乎所有的表单对象都包含在表单域中，表单域在HTML文档中由：
标记构成。2．插入表单控件
方法：先从插入菜单中先选择表单，插入表单域；再将光标置入表单域中，从插入菜单中插入表单对象，从中选择需要的表单控件；然后在属性面板上设置相关属性。
（1）插入文本域（textarea）
文本域插入之后，通过属性面板可以给文本框取名（TextField）；可以使其成为单行的文本框(single line)、单行的密码框(password)或多行的文本编辑框(multi line)；可以设置字符宽度（Char Width）和最大字符/行数（Max Chars/Num Lines）；对多行编辑框可以设置是否自动换行（Wrap）；可以设置文本框初始值（Init Value）。
在表单域中插入一个文本框的HTML代码是：
（2）插入单选钮（radiobutton）和复选框（checkbox）
单选钮用于从成组的多个选项中挑选其中的一个；复选框的作用是对成组的多个选项中选其中的一个或多个。它们的属性都比较简单，就是设置其初始状态（Initial State）是选中的（Checked）还是没有选中（Unchecked）。
在表单域中插入一个单选钮和复选框的HTML代码是：
（3）插入普通按钮（Button）
从插入菜单插入普通按钮后，通过属性面板可以设置行为（Action），让按钮具备不同的功能：递交表单（Submit Form）：单击按钮可以将表单域中所有表单控件中的内容发送到服务器中。
表单复位（Reset Form）：单击按钮可以将表单域中的值恢复为初始值。（常作清空用）
无（None）：不指定系统内置的行为，设计时可以将按钮同一个脚本或应用程序相关联，单击按钮时执行相应的脚本或程序。
在表单域中插入三个不同按钮的HTML代码是：
（4）插入下拉列表框与菜单列表（List/Menu）
列表框和菜单列表都是以列表的方式显示一组选项，根据设置的不同，用户可以在其中选择一项或多项。插入之后，需要通过属性面板上的List Values按钮添加各列表项目的名称和值，并可以决定是以列表形式还是以下拉方式显示所有的项目。可以通过Initially Selected文本框设定首次载入列表时出现的值。
在表单域中插入下拉列表与菜单列表的HTML代码是：
（5）插入文件域（FileField）
文件域通常用于从磁盘选择文件，并将文件上载到服务器上。但在使用之前，要确保服务器
允许文件的匿名上载。
在表单域中插入文件域的HTML代码是：
3．为表单链接行为
表单需要通过Action属性链接上可以在服务器端执行的程序才能真正起到作用。在Windows系统下可以用ASP来编制服务器端程序，实现起来比较简单。
举例：
4.6 动态效果设计
1．行为的使用
（1）行为与事件的概念
行为（Behavior）就是在网页中进行的一系列动作，通过这些动作可以实现用户同网页的交互或执行某个任务。一个行为一般由一个事件（event）和一个动作（action）所组成。动作
通常由一段JavaScript代码所组成。如：用鼠标单击某图象对象，使得几幅图象交替出现。在
Dreamweaver中可以使用其内置的行为来往页面上添加JavaScript代码，不需要自己编写。（2）常用事件
事件通常由浏览器定义，在大多数浏览器中的超级链接上都会发生onMouseOver、onMouseOut、onClick事件。当鼠标移动到链接上，就发生onMouseOver事件；当鼠标移动到
链接之外，就发生onMouseOut事件；当单击链接，就发生onClick事件。当载入文档或图象时，
会发生onLoad事件。
（3）应用行为
步骤：1）在文档窗口中选中要附加行为的对象；
2）单击行为面板上的+按钮，打开动作菜单，选择需要的行为，如果灰化，则表明当前状态不支持该行为；
3）在对话框中进行相应的设置，并确定；
4）行为列表中出现所需行为，如果不要，可以按-按钮，将其删除重设。
常用的行为：跳转到URL 编辑跳转菜单打开浏览器窗口播放声音弹出消息对话框预载图象、显示/隐藏层、控制替换图象。
2．时间轴的使用
(1)时间轴的功能
使用时间轴（Timeline，也称时间线）可以让Dreamweaver在没有Flash的情况下在网页中制作出动画。利用时间轴构建动态网页最大的好处是：它纯粹是通过往文档中添加JavaScript代码来实现网页的动态效果，不需要任何ActiveX控件、不需要任何插件、也不需要任何Java小程序，具有极好的兼容性。
时间轴功能：1）改变层的位置、大小、可见性、层叠性；2）改变图象源文件；3）在特定时间执行相应行为。
（2）创建时间轴动画
步骤：1）插入层并在层中插入要移动的对象
2）将层移动到动画的起始位置，即设置起始的关键帧；
3）选中要制作动画的层；
3）单击时间轴面板上的三角按钮，选择“Add Object”命令，即可在动画通道中添加此层的动画条，也可以直接将层拖到时间轴面板的动画通道的起始位置；
4）拖动动画条最右端的关键帧标记至需要的长度；
5）按住Crtl键并单击动画条上的相应帧位置，在动画条的中间位置添加关键帧；
6）逐个选中关键帧，移动层到需要的各个位置；
7）在Play按钮上按住鼠标左键即可预览动画效果。可以改变Fps（帧/秒）属性来控制动画的播放速度。可以让其循环播放或自动播放。
（3）在时间轴上附加行为
在时间轴附加行为可以实现在动画执行到某个帧位置时，自动执行该行为对应的动作。
步骤：1）在时间面板中，选择要附加行为的时间轴；
2）单击行为通道上要附加行为的帧位置；
3）打开时间轴面板菜单，选择“Add Behavior”命令，在行为面板中，单击“+”按钮；
4）按照正常添加行为的方法添加行为；
5）附加行为后，会在行为通道上的相应位置出现行为标记，以一个浅兰色方块显示；
6）在面板上设置为自动播放，即可以看到其效果。
还可以通过其它对象上的动作来播放时间轴或停止时间轴。
Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） -------- 网页文件开始标签
------- 头部元素开始标签一、填空： (40分，每空 1 分) 1、网页三剑客中 Dreamweaver 是(网页)的软件； Fireworks 是(图像）的软件；Flash8 是(动画)的软件。 2、 Dreamweaver8的视图窗口有三种，即(代码)视图、 (拆分)视图和(设计)视图。 3、在开发网页之前，首先应建立一个(站点)来管理网页及图像等内容。 4、网页文件默认的扩展名是(.html)， Flash 源文件的扩展名是(.swf)。 5、在网页设计中，要使表格边框在浏览器中不可见，应将边框粗细设为(0 像素)。 6、通过 Dreamweaver定义站点的方法有(基本)和(高级)两种。 7、站点地图是整个站点的(结构图)，它以(层次结构)显示站点中各网页的链接关系。 8、单元格边距是指(单元格内容与边框)之间的距离；单元格间距是指(单元格)之间的距离。 9、 www 国内称之为广域网，是英文(WORLD)、(WIDE)、(WEB)的缩写，其信息资源主要就是由一篇篇使用(HTML)语言编写的 Web 文档组成。 10、通常用于网络中的图像格式有三种，即(JPG)、 (GIF)和(PNG)格式。 11、使用(放缩)工具可以放大或缩小文档；使用(抓手)工具则可以拖动页面。 12、网页中表格的宽度单位一般以(像素)为单位，也可用(百分比)来表示。 13、表格背景效果有两种设置，分别是(背景颜色)和(背景图案)。 14、跟踪图像用于辅助页面设计，可在(查看)对话框中设置。默认情况下，跟踪图像在 Dreamweaver编辑窗口是(可见)，在浏览器中永远(不可见)。 15、标准表格又称为(html表格)，它是用于 HTML页上显示(文字)以及(图像)和(表格数据)进行布局的强有力的工具。 16、 Dreamweaver 为用户提供了(左对齐)、 (右对齐)、 (居中对齐)、(两端对齐)四
《Dreamweaver网页设计》综合练习题（二）及解答一、选择填空题（每空2分，共20分） 1．HTML 2．URL 3．ICP 4．SGML 5．CSS （_____）网络内容服务商 （_____）网络内容服务商 （_____）标准通用标记语言 （_____）统一资源定位符 （_____）超文本标识语言 答案： （___3_）网络内容服务商 （__5_）网络内容服务商 （__4_）标准通用标记语言 （___2__）统一资源定位符 （___1_）超文本标识语言 1．标签