第四章 使用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． 建立超链接
利用超级链接可以实现在文档之间或文档中的跳转。链接由源端点和目标端点及一个方向构成，链接的目标端点可以是任意的网络资源，如一个页面、一幅图画、一段音乐、一段程序，或者是页面中的某个位置。可以利用文字也可以通过图片等建立超级链接。
链接的一般标记是：<a  href= ” url ” target = ” ” > 链接源端点 </a>
超级链接分三类：
内部链接：在同一个站点内的不同页面之间相互联系的链接
锚点链接：可以链接到网页中某个特定位置的链接
外部链接：把网页与Internet中的目标相联系的链接
（1） 用文字建立链接
建立链接时，先选中用做链接的那部分文字，单击属性面板中Link栏边上的浏览图标，从对话框中选择需要的文件，也可以直接输入其URL，然后选择其目标显示位置（Target）。
文字链接的HTML标记示例：
<a href="courses/course.htm">学习园地</a>
Target的取值范围及意义
_blank
  表明在新窗口中展开链接指向的页面
_parent
  在当前文档的父级框架集中展开页面
_self
  在当前文档的框架集中展开页面
_top
    在链接所在的完整窗口中展开页面
（2） 用图片建立链接
1） 用整张图片做一个链接：选中该图片，在属性面板的链接栏中给出目标端点的URL，并选择目标的显示位置。
图片链接的HTML标记示例：
<a href="courses/course.htm"><img src="xihu.jpg" width="200" height="113" border="0" ></a>
2） 用一张图片做多个链接——建立热点图链接：选中该图片→单击属性面板上的热点选择形状之一 →在图片上特定位置画出热点链接区 → 在Link栏中给出目标端点的URL（也可以用指向文件图标拖到所需文件，或单击浏览图标从对话框中选择所需文件）→ 选择目标的显示位置，完毕。
热点图链接的HTML标记示例：
<map name="Map"> <area shape="rect"  coords="73,43,120,61"  href="URL"></map>
（3） 添加E-mail链接
E—mail链接是一种特殊链接，单击它会启动本地计算机上默认的e—mail程序，可以写邮件，并发到指定的地址。
创建步骤：选中要作为超级链接的文字→从插入菜单中选择“E—mail Link”（E—mail链接）→在E—mail文本框中输入需要的e-mail地址并确定之。或者是选中文字后，直接在属性面板的Link栏中输入：mailto:e-mail地址  如：mailto:sj_lfg@sohu
E-mail链接的HTML标记示例：
<a href="mailto:sj_lfg@sohu">给我写信</a>
（4） 建立命名锚链接
利用命名锚可以在文档中指定的位置上创建链接的目标端点，通过命名，直接跳转到目标文档（可以是另一个页面或当前页面）相应的命名位置上。最适合长页面的定点浏览。
定义锚：将插入点放到要命名锚的位置或选中做命名锚的文字 →从插入菜单中选择“Named Anchor”（命名锚）→在对话框中输入锚的名称（若先选了文字，则出现该文字），并确定之。插入锚的另一种更快的方法是：按组合键Ctrl+Alt+A。
需要改变锚的位置时，选中它，用鼠标象拖动文本一样使其在文档中移动；需要改名时，可以在属性面板中修改。
网页设计html代码大全空格注意：定义锚相当于确定了链接的目标端点，只是完成了链接的一半，还需要创建相应的源端点。
链接锚：链接锚的方法是：选中要作为链接的文字，在属性面板的Link栏里输入前缀#和锚名，假设前面定义的锚名为study，则填入： #study 。如果链接的是其它页面中的锚，则在前缀前面加上文件名，如：  course.htm#study  （即 URL#锚名）
命名锚链接的HTML标记示例：
命名锚：  <a name="study"></a>
链接锚：  <a href="course.htm#study" target="_self">学习园地</a>
（5） 添加下载文件的链接
需要提供文件下载功能时，可以建立下载文件超链接。
方法：在站点窗口中，到需要链接的目标文件，然后选择网页中需要建立超链接的文字，按住Shift键并拖动鼠标到站点窗口中的目标文件即可。
（6） 添加空链接
空链接就是没有经过指派目标端点的链接，利用它可以激活文档中链接对应的对象或文本，然后为之添加一个行为，以实现当鼠标移动到链接上时进行图象切换或显示分层等操作。
添加方法：选中要链接的文本、图象或其它对象，在属性面板的Link栏中输入#即可。
使用示例1——鼠标移动到链接上时自动播发音乐：
<a href="#" onMouseOver="MM_controlSound('play','document.CS1031972767233','five.mid')">听音乐</a>
<EMBED NAME='CS1031972767233' SRC='five.mid' LOOP=false
AUTOSTART=false MASTERSOUND HIDDEN=true WIDTH=0 HEIGHT=0></EMBED>
使用示例2——鼠标移动到链接上时自动弹出快捷菜单，并可以通过菜单链接到其它页面：
<script language="JavaScript1.2">mmLoadMenus();</script>
<a href="#" name="link1" target="_blank" id="link1"
onMouseOver="MM__menu_0914110533_0,69,13,null,'link1')" onMouseOut="MM_startTimeout();">弹出式菜单</a>
（7） 添加脚本链接
脚本链接是一种特殊形式的链接，通过单击带有脚本链接的文本或对象，可以运行相应的JavaScript脚本或函数，从而实现相应的功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。