Dreamweaver MX讲义.doc

目 录第1章 网页制作基础第2章 Dreamweaver MX入门第3章 网页的布局和定位第4章第5章第6章第7章第1章 网页制作基础1.1什么是网页与网站学习目标 了解什么是网页、什么是网站，网页和网站的关系 了解网页的种类和网页的基本元素 了解什么是HTML语言以及HTML语言的格式 学会使用记事本编写源代码的方式来制作一些简单的网页 学会用源代码方式编写跑马灯效果使用浏览器在Internet上浏览各类网站和网页，已经成为人们通过Internet了解社会的一种重要手段。但什么是网页，什么是网站呢，网页与网站又有什么关系？这就是本节要讲解的内容。1.1.1什么是网页网页是WWW中的基本文档，是用HTML（超文本标记语言）或其他语言（JavaScript、VBScript、ASP）编写的文档，该文档可以用WWW的方式在网上传播，并被浏览器识别、翻译成Web页面形式显示出来。现在的网页一般分为两大类：一类是静态网页（扩展名为htm、html等）；另一类是动态网页（扩展名为asp、aspx、jsp等）。提示：静态网页与动态网页的区别在于网页是否具有应用程序解释器和后台数据库支持，而不是指网页是否有动态效果。使用了应用程序解释器和后台数据库的称为动态网页，反之为静态网页。不管是静态网页还是动态网页，网页一般包含以下几种基本元素：（1） 文本 文本是网页最基本的元素，网页上大量的内容都是用文字来表达的，而且由于文字所占的空间非常小，下载速度非常快，所以在网页中应用非常广泛。网页上的文字可以有大小、字体、颜色以及各种不同的格式变化，灵活地运用这种变化可以使网页看起来生动活泼。另外还可以编写一些脚本语言，使网页上具有各种各样的动态效果。（2） 图像图像是网页中必不可少的另一种元素。图像能给人更为强烈的视觉冲击，产生更深的印象。图像不仅可以直接表达信息，而且还能起到装饰和美化网页的作用。在网页里经常使用的图像格式有GIF和JPEG两种。 GIF采用无损压缩的方式，图像没有细节上的损失，并且解压打开的速度非常快。同时GIF图像还支持透明背景，放在网页中能够和网页背景很好地融合，结合得像一个整体，视觉效果非常协调。另外，GIF还支持动态效果，使网页效果更为生动。但GIF最多支持256种颜色，不适合照片、风景画等颜色丰富的素材的压缩。JPEG使用先进的压缩算法，使文件比GIF格式的图像文件小，因而下载速度更快。JPEG支持高达1670万种颜色，非常适于存储颜色丰富的画面，如风景画、照片等。（3） 多媒体元素网页中的多媒体元素有许多种，常用的有三种：音频、视频和动画。常用的音频文件格式有声音文件WAV和MIDI音乐文件；常用的视频格式有RM、AVI、WMV等格式；常用的动画文件有FLASH动画（SWF格式）和GIF格式。如果一些多媒体要素要在网页上显示、播放、需要安装相应插件才行。（4） 超链接 超链接是网页中最具特色的功能。为了实现在网页之间自由地跳转，可以在网页上的文字或图像中加入目标网页或网站的地址，这就生成了一个超链接。当用户在浏览网页的时候，鼠标经过有超链接的地方时，光标就会变为小手的形状，这时单击鼠标，浏览器就会打开超链接所指向的网页。超链接使网页与网页、网站与网站之间相互成为一个有机的整体，用户只需点击鼠标就可以轻松地转到所需要浏览的网页上。（5） 脚本语言（Script）脚本程序使用于扩充网页功能而能在网页上直接解释的程序语言，常用的有显示访问的时间、让文字在屏幕上滚动等。1.1.2什么是网站简单地说，网站就是许多相关网页有机结合而形成的一个信息服务中心。网站的设计者将要提供的内容和服务制作成许多个网页，并且经过组织规划，让网页互相链接，然后把相关的文件存放在Web服务器上。只要用户连接Internet，就可以使用浏览器访问到这些信息。这样一个完整的结构就称为“网站”，又常被称为“站点”。现在的往回走哪不仅可以向用户发布信息，而且还为用户提供各种各样的网络服务，如电子邮件服务、资源下载、域名服务和主页空间服务等。一个网站一般都有一个首页，常称为主页，指的是用户在浏览器地址栏里输入网址后网站自动打开的默认页面。而且网站的其他页面都会通过超链接与这个主页相连，这些页面通常称为子页面。用户要访问感兴趣的子页面，只要单击主页上相应的超链接就可以了。提示：首页的主名一般定义为index或Default，如果首页类型是静态网页，那么首页名称一般为index.htm或Default.htm；如果首页是动态网页类型并是用ASP语言编写的，那么首页名称为index.asp或Default.asp。主页是用户访问该网站时第一眼所看到的页面，所以主页的设计至关重要。主页既要表达出站点的风格、内容、又要美观醒目、吸引用户的注意力。1.1.3HTML语言简介HTML是Hypertext Markup Language的缩写，意思为“超文本标记语言”。WWW服务中的网页要让使用不同计算机和操作系统的用户都能浏览，就必须有一套统一的编写标准。HTML就是用于编写网页的统一的语言规范。只有采用HTML制作的网页，浏览器才能正确地阅读和运行。用HTML语言制作网页，一般有两种方法：一是使用记事本之类的工具，输入HTML标记和网页的内容进行直接编写，然后保存为以html或htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，根据用户的可视化操作自动生成HTML代码，这样可以使用户在不了解HTML语言的情况下也能做出很好的网页。下面通过Windows操作系统自带的记事本软件来制作一个简单网页，来了解HTML语言的一些基本使用方法，以对组成网页的HTML语言代码有个整体认识。提示：如果想了解某些网页的源代码，可以在用IE浏览器打开相应网页后，执行“查看”菜单下的“源文件”命令，将可以用记事本软件查看到这个网页的源代码文件。跟我学：我的第一个网页执行菜单的【开始】【程序】 【附件】 【记事本】命令。将以下代码完整正确地输入到记事本软件中： 欢迎大家光临 这是我用记事本编写的第一个网页，欢迎光临！ 执行菜单的【文件】 【另存为】命令。将对话框中的文件名改为“1.htm”，注意必须加上扩展名.htm.或html，前面的主名可以随意。然后单击【保存】按钮将文件保存。双击打开刚才保存的文件。现在来分析这段代码，从而学习、了解网页文件中HTML源代码的一些基础知识。1. 标记的写法HTML语言中所有的标记都要用括号括起来，如，括号中的标记字母不用区别大小写，与标记中间不能用空格隔开。2. 标记的类型Html语言中的标记可以分为两类：对称标记和单独标记。对称标记中的HTML标记是对称的，表示方式是：内容。其中称为起始标记，表示某种格式功能的开始，而后面的称为结束标记，表示这种格式功能的结束，如：“上例中的 这是我用记事本编写的第一个网页”。单独标记中的HTML标记是不成对的，表示方法是：。标记中只有起始标记没有结束标记，如：标记的作用是换行，功能相当于Word文档中的回车符。3. 文件标记（1）从上例可以看出，所有的HTML文件都必须用特定的标记起始，表示这是个网页文件，网页内容一直持续到标记结束。（2）网页文件的内容分为两大部分：对称标记称为头部分，主要包含着和网页文件有关的一些头信息，除了标记外，其他内容不会显示在浏览器中：对称标记称为正文部分,里面的内容会显示在IE浏览器中。HTML语言的其他标记都必须写在这两大标记中。（3）网页头部分中的对称标记是标题标记，该标记的作用是在浏览器的标题栏中显示网页的标题。（4）网页正文部分中的对称标记是段落标记，该标记的作用是用来划分段落。在该标记中，可以输入一段文字。4标记参数（1）标记中可以加上参数设定，但参数必须加在起始的标记内，如欢迎光临！。（2）如果一个标记中有多个参数要设定，那么用空格隔开参数，如：欢迎光临！。跟我学：跑马灯效果基本语法 该语法只适用与在IE浏览器中显示，只能放在标记中使用，作用是实现标记中的内容在页面移动的效果。实例1：让网页上显示的文字在网页上从右到左滚动。将以下代码用记事本编辑成2.htm页面： 欢迎大家光临 这是我用记事本编写的第二个网页 实例2：让“我会滚动”几个字在网页上从左到右滚动。将以下代码用记事本编辑成3.htm页面： 欢迎大家光临 这是我用记事本编写的第三个网页我会滚动！ 实例3：让“我会滚动”几个字在网页上来回滚动，并且滚动的宽度是300px。将以下代码用记事本编辑成4.htm页面： 欢迎大家光临这是我用记事本编写的第四个网页我会滚动！实例4：让“我会滚动”几个字在网页中向上滚动，并且滚动的高度是300px，滚动速度是29。将以下代码用记事本编辑成5.htm页面： 欢迎大家光临 这是我用记事本编写的第五个网页我会滚动！第2章 Dreamweaver MX入门2.1 Dreamweaver MX的工作界面和基本操作学习目标 掌握Dreamweaver MX软件的启动方法 熟悉Dreamweaver MX软件的界面 掌握Dreamweaver MX软件的基本操作2.1.1Dreamweaver MX软件的启动启动Dreamweaver MX软件的方法和其他应用软件差不多：【开始】 【程序】 【Macromedia】 【Macromedia Dreamweaver MX】。（如图2-1所示）第一次启动Dreamweaver MX软件，它会让你选择工作界面，共有两种选择，分别适合设计者和代码编写者使用（如图2-2所示）。图2-1启动Dreamweaver MX软件示意图图2-2 Dreamweaver MX的工作区设置提示：切换界面风格的方法：在Dreamweaver MX的主菜单中选择菜单的【编辑】 【首选参数】命令，打开“首选参数”对话框（如图2-3所示）。在对话框中的“分类”列表框中选择“常规”选项，然后单击右边的按钮，再次打开“工作区设置”对话框。在对话框中选择要转换的选项，单击按钮，系统将弹出如图2-4所示的“提示”对话框。重新启动Dreamweaver MX，操作界面将转换为新的风格。图2-4“提示对话框”图2-3“参数选择”的对话框2.1.2 Dreamweaver MX软件的工作界面Dreamweaver MX把它所有的功能都集中成在一个个功能面板上，用户除了可以像其他软件一样通过菜单命令操作外，还可以通过MX界面上的各类面板直接进行操作。菜单栏：与其他Windows软件菜单栏一样，集成了Dreamweaver MX软件的所有功能。用户可以在菜单中找到自己所需要的命令。工具栏：放置常用的工具，主要实现网页“编辑窗口”视图的切换、标题修改等功能。：称为“代码”视图。单击这个工具，“网页编辑窗口”将以源代码方式显示。：称为“设计”视图。“网页编辑窗口”默认显示方式。在这种方式下，用户可以直接看到网页编辑效果，而且网页编辑排版的最终效果与最终浏览器显示的效果一致，即常说的“所见即所得”。：称为“代码和设计”视图。“网页编辑窗口”将分成上下两部分，上半部分显示网页源代码，下半部分以最终效果方式显示。对象面板：由于该面板的主要功能是提供各类对象以供用户方便插入到网页中，所以又称为“插入面板”。用户只要直接单击面板上相应的文字可以打开相应种类的标签，然后从中选取自己所需要的对象。网页编辑窗口：这是设计网页的主窗口。在该窗口中，用户可以对各种网页元素进行编辑和排版。属性面板：用于调整编辑窗口中被选中的各种元素属性。值得注意的是被选中的元素类型不同，面板上的属性也会相应变化。其他各功能面板组：包括了在编辑网页时所需要的一些特定功能，如设计、代码、应用程序、文件等，以方便用户使用。2.2.站点的建立与规划学习目标 掌握建立站点的一般步骤 掌握如何对站点进行管理用户设计的网页和相关素材，一般都要求放在同一个文件夹内，这样方便对网站进行维护和管理，特别是将网站发布到服务器上时，这点尤其重要。我们建立站点的目的也在于此。因此，用户在用Dreamweaver 软件设计制作网页之前，应先将站点建立好，同时将做好的网页全都保存在这一个站点内。Dreamweaver MX软件的站点管理器的功能非常强大，通过它，用户对站点的管理将会非常方便。下面讲解站点管理器的功能。2.2.1站点的建立创建站点，其实就是绑定一个文件夹。通过站点的相关功能，不仅可以常见空白网页和创建各网页之间的相互关系，而且与网页相关的素材都会自动放到这个文件夹中。接下来用一个实例来阐述如何建立一个站点。跟我学：我的家园网站的建立执行菜单的【站点】 【管理站点】命令或者在右侧“文件”功能面板中选择“管理站点”，会出现如图2-4所示的安装向导。图2-4站点定义向导1如图2-4所示，在文本框中输入网站的名称，以便在Dreamweaver中识别站点。站点名称可以是任何名称，用户可以随意取。这里输入“我的家园”，然后点击进入下一步向导，如图2-5所示。图2-5站点定义向导2当站点定义向导2的功能是询问“您是否要使用服务器技术”，选择【否】，表示目前该站点是一个静态站点，没有动态页。选择【是】，则需要进一步选择动态网页类型。这里，我们制作的网站是一个静态网站，所以选择【否】，然后单击进入下一步向导，如图2-5所示。站点定义向导3主要实现两个功能：第一个功能是指网页存放的处理方式：编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）：适合在不连接网络、单机、还没申请WWW服务或网络状态不好的情况下编辑、制作网站。使用本地网络直接在服务器上进行编辑：适合网络状态很好、网速很快的情况下远程修改、制作网站，从而保证网站上的内容实时更新。第二个功能是在文本框内指定站点所指向的位置，即指定“我的网站的网页存放在本地人盘的哪个文件夹内？默认的文件夹一般都是指向“我的文档”内，并建立一个以上一步向导指定的网站名称命名的文件夹，如图2-6所示。也可以在文本框中输入其他文件夹路径来重新修改网站文件夹的位置，或者单击文本框右边的来选择其他的文件夹。指定的文件夹就是你所建立的网站的根文件夹，注意必须是本地盘的文件夹。完成后点击进入下一个向导。站点定义向导4是询问你如何连接到远程服务器，如果没有远程服务器，这里可以选择“无”（如图2-7所示），再单击进入站点定义向导5，出现如图2-8所示的设置概要。单击完成站点的设置。至此，“我的家园”网站的站点已建立，在“站点”面板上会显示站点中所有的文件和文件夹。我们可以通过“站点”面板来新建网页文件和文件夹。当站点中存放在文件时，就可以像使用资源管理器一样来管理网站的文件，如拷贝、粘贴、删除、移动和打开文件等。图2-6站点定义向导3图2-7站点定义向导4图2-8站点定义向导52.2.2站点的管理网站内所有的文件和文件夹都会显示在站点管理器内。所有文件都会放在为网站定义的目录中，这个目录就是网站根目录。而且一个网站建立好后，下次启动Dreamweaver MX时会自动打开这个网站，用户所创建的每一个文件都会保存在这个网站内。通过站点管理器，可以实现网站的大部分功能。下面就用站点管理器来管理网站。跟我学：修改站点信息执行菜单【站点】 【管理站点】命令，出现如图2-9所示的“管理站点”对话框，选择右边的“编辑”命令。弹出如图2-10所示的“高级选项”对话框，在对话框的左边选择相应的选项，右边就会出现相应的信息。修改好后单击保存设置。图2-9“管理站点”对话框图2-10站点的高级选项在“站点名称”文本框中重新定义站点的名称。在“本地根文件夹”文本框中重新定义站点的路径，或单击右侧的图标，重新选择根文件夹。2.2.3创建网站的文件和文件夹上面建的站点就像一个空空的大房子，没有隔间，也没有家具。下面学习如何在网站中建立网页文件和文件夹。建立文件夹的目的是方便对文件进行分类管理。在Dreamweaver MX中创建网页的方法主要有两种：一种是传统的通过文件菜单创建网页文件。执行菜单的【文件】 【新建】命令，或用快捷键【Ctrl】+【N】，便可以打开“新建文档”对话框，如图2-11所示。图2-11“新建文档”对话框“新建文档”对话框包括“常规”和“模板”两个选项卡。通过“常规”选项卡可新建通用的网页，包括基本的HTML网页、动态网页、CSS样式表等Dreamweaver MX支持的基本文件类型。通过“模板”选项卡可以选择模板，并从模板中创建网页。“常规”选项卡又分为“类型”、“基本页”、“预览”三块内容。“首选参数”项相当于执行菜单命令“编辑”菜单下的“首选参数”命令，可以进行有关文件类型的设置。我们只要讲解的是静态网页的制作，因此执行菜单的【类别】 【基本页】 【HTML】命令，最后单击按钮就可以创建出网页。第二种方法是通过站点管理器来新建文件和文件夹。首先，单击站点管理器右角的（展开/折叠）按钮将站点管理器展开。接下来，通过如下实例演示来讲解如何利用站点光力气创建文件和文件夹。跟我学：利用站点管理器新建image文件和网页文件在站点功能面板上用鼠标右键单击刚才新建的站点，弹出如图2-12所示菜单.选择“新建文件夹”就会在站点文件夹下建立一个新的文件夹，如图2-13所示。将这个文件夹取名为image，专门用来存放各类图像文件，与网页存放分开，进行分类管理。 图2-12站点的快捷菜单 图2-13新建的image文件夹及index.htm在站点名称上单击右键，在弹出的快捷菜单中国选择“新建文件”，取名为index.htm，即网站的首页文件，如图2-13所示。按照步骤的方法一次建立网站的其他网页文件：jianjie.htm（个人简介）、jiaxiang.htm（我的家乡）、xuexiao.htm（我的学校）、banji.htm（我的班级）。提示：给网站中的网页文件夹命名（包括以后引入的图片、动画文件名），应该用小写英文字母、阿拉伯数字以及符号的组合，不要用中文名称，否则在显示时会出错，因为很多服务器都不支持中文。此外，文件主名长度要8个字符。2.3网页页面属性的设置学习目标 了解页面属性的各类选项的设置 掌握页面属性中标题、页边距、背景色和背景图的设置方法网站有自己的各种设置和属性，网页亦如此。页面的属性设置很简单，在页面的任何一个空白位置单击鼠标右键，然后在快捷菜单上选择“页面属性”，或执行菜单的【修改】 【页面属性】命令。跟我学：用页面属性给网站首页设置页面标题步骤如下：双击右边站点中的index.htm文件，在“页面编辑窗口”打开index.htm文件。执行菜单的【修改】 【页面属性】命令，打开页面属性对话框。在标题栏中输入“我的个人主页”。单击【确定】结束设置，回到编辑窗口。然后将当前页面保存，按【F12】功能键预览网页，可以看到在IE标题栏上出现“我的个人主页”。相关代码，可以用或视图查看到。提示：也可以通过编辑区上方的标题框直接给网页输入标题。跟我学：用页面属性给网站“个人简介”页面设置背景颜色默认建立的网页背景色是白色，但可以通过“页面属性”给页面更换背景颜色。在编辑区打开jianjie.htm文件，执行菜单的【修改】 【页面属性】命令，打开页面属性对话框。鼠标单击“背景”边上的颜色拾取器，弹出取色面板，如图2-14所示。图2-14颜色拾取器 左上角为选中的颜色，中间为颜色的十六进制代码值。右边三个按钮中：第一个按钮的作用是只使用默认颜色（白色）；第二个按钮的作用是单用户在调色盘内找不到想要的颜色时，跳出调色盘，自定义颜色；点击第三个按钮会弹出子菜单，用于用户选择不用色系的颜色（默认是立方色）。用取色器吸取想作为背景色的颜色，一般用浅色，这里设成浅黄色，也可以在右边方框中输入#FFFFCC。单击【确定】结束设置。执行菜单的【文件】 【保存】将网页文件保存。按【F12】键，可以在浏览器中看到被家了背景色的页面。插入背景色的源代码是：跟我学：用页面属性给网站“我的家乡”页面设置背景图片在编辑区打开jiaxiang.htm文件，执行菜单的【修改】 【页面属性】命令，打开页面设置属性对话框。单击“背景图像”文本框边上的，弹出选择图像对话框。选择所需要的图片，点击【确定】。如果这张图片不在所建网站的目录中，会弹出如图2-15所示的对话框，点击，弹出“复制文件到”对话框，将这张图片保存到网站的image文件夹中。图2-15文件复制提示回到“页面属性”对话框，单击【确定】结束设置。这时可以看到在网页编辑窗口的页面被加上了漂亮的背景图，在执行菜单的【文件】 【保存】命令将网页保存。按【F12】键可以在浏览器中看到被加了背景的页面。插入背景的源代码为：2.4文本格式化学习目标 熟悉文本设置属性面板的各选项功能 熟悉文本设置相关的插入面板各按钮功能 掌握文本格式化的基本操作文字是网页中使用最多的元素，除了因为他们能携带人们所需的更多信息外，还因为它们能通过不同的排版方式、不同的设计风格排列在网页上，给人以美感。所以在网页设计中，对文本的处理占了很大的比重。能否对各类文本灵活运用，是决定网页实际是否美观、有创意以及能否提高工作效率的关键。2.4.1文本的属性面板在编辑区中输入文字或选中文本，“属性面板”都会显示文本的相关属性，如图2-16所示。图2-16 文本的属性面板2.4.2插入面板中与文本相关面板的介绍文本面板在插入面板上单击，可以打开文本面板，如图2-17所示。图2-17 文本面板2.4.3文本的输入与排版使用Dreamweaver MX的“显示设计视图”，用户可以像编辑word文档一样编辑网页文件。跟我学：给“我的家园”网站“个人简介”页面输入文字并排版在站点管理器中找到jianjie.htm文件，双击打开后进行编辑。在光标闪烁处按word软件的输入方法录入个人简介内容。给每个段落首行加入空格：单击空格按钮（或按【Ctrl】+【Shift】+【空格键】），可以在页面文本中插入一个空格，每个空格占一个字节位置，这样如果要在文本首行空两个字，就要插入4个空格。将标题居中：将光标定位到要居中的行上，在单击“属性面板”上的按钮即可。提示：在Dreamweaver MX中直接按回车键【Enter】换行，会在两段间隔外插入一空行，这样就让整个排版太松散。如果不想产生这个空行，可以打开“插入面板”中的“字符”选择符号（或按【Shift】+【Enter】）插入回车符，这样就不会在段与段之间产生空行了。2.4.4文本字体、大小和颜色的设置1、文本字体的设置前面输入的文字都是默认的宋体字，在文字的属性面板中尽管有字体选项，但都是英文字体，显然对中文是不合适的。那么怎样给文字设置中文字体呢？跟我学：给标题“个人简介”的字体设为隶书增加“隶书”字体列表：点击文字的属性面板中“默认字体”右边的，选择“编辑字体列表”选项，弹出图2-18所示的对话框。图2-18“编辑字体列表”对话框拖动对话框中“可用字体”选项右边的滚动条，查找“隶书”并将其选中。单击，“字体列表”中就会出现“隶书”这种字体。单击按钮，这是在字体列表中就出现了“隶书”这种字体了。选中标题 “个人简介”，然后在“字体列表”中选择“隶书”。文字以隶书显示了。提示：同一个字体列表内可以添加多个字体，中间会自动用逗号隔开，网页中被定义了这个字体列表的文字在显示时优先考虑最前面的字体。如果前面的字体在客户端计算机上没有，那么就以第二种字体显示文字，以此类推。如果要增加多个字体列表，可以再增加完一个后，在单击按钮新增一个字体列表，然后重复以上步骤，可以增加新列表。2、文本字号大小的设置文字属性面板中“大小”选项中的阿拉伯数字越大，文字越大。3、文本颜色的设置文字属性面板中也有颜色拾取器，功能与页面属性中的功能相同。2.5图像的插入与设置学习目标 了解网页中常用的几种图像格式 掌握图像插入和文本混排的方法一个优秀的网页设计定是图文并茂的。在网页中适当地插入图片，不仅可以使网页中的内容丰富多彩，还可以使网页显得美观、形象和生动。本节讲解有关图像的相关知识和在Dreamweaver MX中如何处理图像。2.5.1常用的图像类型和格式目前，已知的图像格式有几十种之多，但能在浏览器中显示的图像格式只有GIF、JPEG和PNG三种，而最常用的是GIF和JPEG两种。这几种图片格式的最大好处是在保证图片质量的前提下，能够提供比较理想的压缩比率，能提高包含图片的网页的下载速度。下面介绍一下GIF和JPEG两种图片格式。1、GIF格式GIF格式的英文全称是Graphics Interchange Format，中文意思是“可交换的图像格式”。采用GIF格式的图像最多只能支持256种颜色，最适合用于颜色较少的文本和现行艺术插图。2、JPEG格式JPEG格式的扩展名为“jpg”，它的英文全称名是Joint Photographic Experts Group，中文意思是“联合图像专家组文件格式”。JPEG最多可以支持16.8M种颜色，因此照片、油画和一些细腻、讲求色彩浓淡的图片常用JPEG格式。由于这种格式使用的颜色多，因此它的尺寸比GIF文件尺寸要大。2.5.2图像属性面板介绍用Dreamweaver MX软件打开网页，然后在网页中用鼠标单击网页中的图像，其四周会出现可缩放的手柄表明该图像被选择。同时属性面板中显示出有关图像的属性设置，如图2-19所示。图2-19 图像的属性面板提示：如果属性面板隐藏了，可以通过执行菜单的【窗口】 【属性】命令，打开图像属性面板，然后单击该面板右下角的箭头，打开扩展的属性面板，从而可以看到图像的全部属性。2.5.3图像的插入与相关操作跟我学：在“我的家园”网站的“个人简介”网页中插入图片在插入图片之前，事先要选择好图片。图片是否美观，是否与内容有关联，是否能与页面排版统一，都要考虑清楚，否则不但不美观，反而会给网页版面带来负面影响。在Dreamweaver MX编辑区打开jianjie.htm页面，将光标定位在要插入图片的位置。执行菜单的【插入】 【图像】或单击【插入】 【常用】面板上的按钮，弹出“选择图像源”对话框，如图2-20所示。图2-20 “选择图像源”对话框利用对话框查找到所需的图片，单击【确定】按钮，这时图片就会插入到网页中。如果图片不在网站文件夹中，会弹出类似图2-15所示的文件复制提示，一定要选择“是”，即可将图片复制到网站根文件夹中，并将图片文件保存到image文件夹中。跟我学：调整图片与文字的相对位置单击刚才插入网页的图片，选中它。打开属性面板上的“对齐”选项的下拉列表，在其中选择“右对齐”。这时可以用鼠标拖动它来调整图片与文字的相对位置。提示：图片大小的调整：选中图片后，图片周围出现边框，并在图片右下角出现三个可调节图像大小的小方块，用鼠标拖动这些小方框即可调整图片的大小。2.6超链接的设置学习目标 熟悉超链接的类型和表现形式 掌握在网页中建立各种超链接的方法通过以上几节，已基本上掌握并建立好了一个本地站点和相关的网页文件。接下来就是在这些网页中插入超链接，实现各网页链接，做到能从正在访问的网页跳转到另一任意的网页上。超链接是网页中非常重要的一部分，可以这样说，有了超链接，才有了网页，才有了互联网今天的样子。2.6.1 超链接的类型和表现形式1、超链接的类型（1）绝对超链接。例如：（2）相对超链接。例如：wangyejianjie.htm。如果一个网站中网页的链接对象在其他网站而不在本网站内，建议使用绝对超链接。一个网站内相互的超链接都采用相对地址，以便于网站的迁移和备份，直接把文件夹穿衣过去就可以了，不必修改各个网页内的超链接属性。此外，在网页中插入的图片和其他媒体元素也是采用超链接的方法，并且也要采用相对超链接的形式。一定要把这些网页中链接的元素根据提示拷贝到站点文件夹中，否则网站文件夹的移动和上传会产生错误。2、超链接的表现形式根据使用对象不同，超链接可以分为文本链接、图像链接、锚点链接、电子邮件链接、URL链接和空链接等。Dreamweaver MX提供了各种方便的手段来创建各类超链接。接下来学习各类超链接的制作。2.6.2文本超链接使用文本信息建立链接，是网页中经常采用的超链接方式，而且使用文本做超链接，可以设定鼠标点击超链接前后的不同状态。跟我学：给“我的家园”首页添加文本超链接方法1：在Dreamweaver MX编辑区打开index.htm文件。在图片下方输入文字“请进”，作为链接文字。选中文字，单击【属性】 【链接】右侧的按钮或单击右键，弹出快捷菜单选择“创建连接”选项，打开“选择文件”对话框来选择链接的文件，如图2-21所示。图2-21“选择文件”对话框默认打开的文件夹是网站建立时的文件夹，单击选择“jianjie.htm”文件，然后按【确定】按钮，结束文件的选择。方法2：在Dreamweaver MX编辑区打开index.htm文件。将光标定位到要插入文本链接的位置，单击【插入】 【常用】 （超链接）按钮，弹出“超级链接”对话框，如图2-22所示。图2-22“超级链接”对话框按图所示对各项属性进行设定，通过按钮来选择链接的目标文件（方法同上）。单击【确定】按钮，退出对话框。注意代码，在链接上多了一个属性title，当鼠标停留在连接上时，会出现title内的文字。方法3：在Dreamweaver MX编辑区打开index.htm文件。在图片下方输入文字“请进”，作为链接文字。选中文字，用鼠标单击，然后按住鼠标左键进行拖动，将箭头指向右边站点中的目标链接文件，如图2-23所示。图2-23 用“指向文件”箭头来创建链接跟我学：修改“我的家园”网站首页超链接的颜色在文本设定好链接以后，文本的颜色会自动变成蓝色并在文字下方出现下划线。这是网页默认的超链接的属性。但我们可以通过页面属性来进行修改。超链接有三种状态：一是未被访问过的状态，二是正在访问的状态，三是已经访问过的状态。我们对超链接的各种状态进行设定，可以通过颜色提示来提醒用户哪些超链接已经被访问过，哪些没有，哪些正被访问。执行菜单的【修改】 【页面属性】命令，或者在页面的空白位置单击右键从快捷菜单中选择此命令，打开“页面属性”对话框。链接：未访问过的超链接，用于设置未访问时超链接文本颜色。访问过的链接：用于设置已经访问过的超链接文本颜色。活动链接：用于设置超链接正被访问时的超链接文本颜色。每个文本框前跟一个颜色拾取器，可以打开它来设置颜色，或者直接在文本框中输入数值。2.6.3图片超链接图片超链接就是在图片上加入链接信息，这在网站中应用也极为广泛，许多新闻、广告等都采用图片链接。跟我学：利用首页的图像来创建图片链接在Dreamweaver MX编辑区打开index.htm文件。选中图像，单击【属性】 【链接】右侧的按钮指定链接的文件，或者直接在“链接”的文本输入框中输入链接的路径。按【F12】键预览网页，当鼠标经过带链接的图像时，指针会变成“手”的形状。跟我学：在首页的图像上创建热区链接上面介绍的是利用图像建立超链接的急促方法。使用图像做超链接还有另外的方法，即热区链接，就是用图像的一部分区域来做链接，一部分链接到这个网页，另一部分链接到那个网页。换句话来说，就是把图片划成若干个区域，分别链接到若干个网页。在Dreamweaver MX编辑区打开index.htm文件。选中图像，在属性面板中能看到（图像热区按钮）。箭头光标为选区，其他三项功能是：方形热区圆形热区不规则热区。单击方形热区按钮，在页面的图像上拉出几块方形热区。建立的热区为一个蓝色的半透明方块。单击这个方块选中它，这时属性面板变成如图2-24所示的热区面板。可以在属性面板中设定热区的链接，在链接栏中可以输入链接的路径，也可以单击右侧的图标打开管理器指定连接到的文件。这里分别指定链接到家乡介绍、学校介绍、班级介绍三个页面。图2-24 热区面板提示：如删除热区，可以在选中后直接按【Del】键，修改链接的目标方式可以在“目标”栏中修改，“替代”中可以输入鼠标放在热区上显示的文字。2.6.4 锚点链接锚点链接就是使用在同一个网页内容之间相互跳转的一种超链接。当网页的内容和信息量很多时，就可以用锚点链接来指引浏览者的阅读。锚点链接类似于书的书签，可使浏览者迅速找到自己想要的信息。制作锚点链接，首先要在网页中制作一个锚点，然后创建一个跳转到这个锚点的链接，插入锚点链接的格式是“#锚点名称”，如#top。跟我学：给“我的学校”专业介绍页面创建锚点链接在Dreamweaver MX软件编辑窗口中打开xuexiao.htm文件，可以看到网页非常长，用滚动条查看非常麻烦。此时可以创建一个锚点，自动跳转到页面下方查看相应专业。将光标定位到数控专业的开头位置，单击【插入】 【常用】面板下的按钮。弹出“命名锚记”对话框，在对话框中输入定义的锚点的名称，这里是line01，如图2-25所示。图2-25 “命名锚记”对话框单击【确定】按钮后，就会在第四行开头位置插入一个锚点回到网页顶部，做一个链接，点击后能跳转到锚点所在的位置。在“学校介绍”文字后插入一行，添加文字“数控”。选中文字，在属性面板的“链接”文本框输入#line01，如图2-26所示。用IE预览，单击“数控”，网页就会自动跳转到网页下方。图2-26 锚点链接的创建提示：锚点名称不能包含空格不能用中文命名且锚点不能位于层中。2.6.5 电子邮件超链接在网站上留下电子邮件，可方便访问者对网站提意见或进行其他联系。也可以把这些电子邮件地址做上超链接，让浏览者单击电子邮件链接就会自动打开电子邮件软件，并在收信人地址栏放上网站的电子邮件地址。跟我学：在网页中插入电子邮件链接在Dreamweaver MX软