1、 尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 1这是桂之杰个人的学习笔记，我是从零开始自学的，按照以下的一步一步的学习，相信你很快就会掌握 Dreamweaver8 基本操作。当然要熟练的话就要多多练习咯。坚持到底，宜将剩勇追穷寇，不可沽名学霸王！桂之杰致广大中国青年同志1、 打开 Dreamweaver8，建立一个站点。在某个（如 C 盘）盘里面建一个专门存放网站文件的文件夹，一般用英文命名。然后点击“站点”“新建站点” ，命名站点及输入网址（或不输） ，选择 C 盘中的那个文件夹作为站点。然后再通过窗口右边的文件浮动面板，选中需要建立子文件夹的站点，然后通过右键或
2、者是点“文件”新建文件夹或者文件。2、 Dreamweaver8 编辑文档时，要首行缩进，空格键不起作用，只有将半角输入切换为全角之后空格键才起到空格的作用。也可以点击最左上角“常用”下拉列表选择“文本” ，选择向下的那个箭头一次就是一个空字符。也可以用“ctrl+shift+空格键”来插入空格。也可以设置首选参数来修改，这是最快最方便的方法。3、 在页面中如果是用“Enter”来换行，代码是 P，两行的间距比较大。如果用“shift+ Enter”来强制换行，代码是 br，则行与行之间比较紧密，也可以在最左上角下拉列表的“文本”中选择“换行符” 。4、 站点地图使用站点站点管理编辑高级选中需
3、要管理的站点点击“站点地图布局” （图标标签即站点地图标签，如果用“页面标题”则该显示网页的名称，没有名称则显示为“无标题文档“）确定完成通过“文件”浮动面板下拉列表，点击“地图视图”显示站点地图，或是点击“展示以显示本地和远端站点”来查看站点地图。点击站点图标标签时，如果没有显示链接的灰色图标，则点右键上的“显示/隐藏链接” 。链接可以直接拖动灰色图标，也可以拖动在属性面板上的灰色链接图标到链接的文件实现链接。5、 Dreamweaver8 里面有一些模板，通过点击 “文件”新建点“入门页面”可以选择模板。还有别的格式的模板也可以选择。6、 HTTP 协议，即超文本协议7、 通过“修改”或在
4、文档窗口中点击右键“页面属性” ，可以修改页面的背景色或修改背景图片等等。文字的颜色可以通过点击属性面板中的“文本颜色”文本框，然后出现一个调色板，在所需的颜色单击即可。点击“页面属性”中的“链接”设置“链接颜色” ，可以设置页面未被访问过的超链接的文字颜色；可以点击“已访问链接”设置文档页面中已经访问过的超链接的文字颜色；可以点击“下划线形式”文本框可以设置文档页面中超链接的文字是否有下划线。8、 通过页面属性的分类列表框中选择“标题/编码”属性，修改标题，则浏览页面时，它会出现在浏览器的标题栏上。9、 插入图像后，点击图像，则在属性面板中设置图像属性。在“对齐”下拉列表框中，可以设置在一行
5、中图像和文字的对齐方式；在“垂直方式”和“水平方式”文本框中可以设置图像垂直方向和水平方向上的空白间距；在“边框”文本框中，可以设置图像边框的大小。很多情况下不添加边框，即设置为 0。尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 210、 可以创建文字和图像的超级链接，还可以创建图像热点来设置当鼠标移到图片时显示一些提示信息和对图的注释。单击目标图像，属性面板出现热点属性，可以创建矩形、圆形或多边形热点，例如选定圆形工具，并将鼠标拖至图像上，创建一个圆形热点。热点创建完毕后，选中热点区，属性面板上显示热点“属性” ，对热点进行设置，可以设置热点区的链接。也就是可以选择图
6、片上某一块地方进行链接等。11、 导航条，也称导航栏，是图像超链接在 HTML 文档中的又一种应用。导航条实际上是一系列显示为按钮的图像，每个图像按钮链接到站点中不同的文档上，通过单击图像按钮，就可以实现在站点中的浏览。同时，也可以为这些图像实现翻转效果，或为图像添加更多的动感特性，使网页更生动，如弹起状态和按下状态等。插入图像对象导航条即插入某幅图片当成导航条，可以设置鼠标移到图片上时显示什么，然后点击后又显示什么网页，等等。要编辑导航条，其具体操作如下。(1) 选择【修改】|【导航条 】命令。这时会打开【修改导航条】对话框。(2) 用类似插入导航条的方法设置【修改导航条】对话框中的各选项。
7、2. 利用窗口左边的标签检查器【行为】面板编辑导航条在默认情况下，单击导航条中的元素时，所有导航条中的元素都会自动返回原来默认的状态。要设置被选中图像的上浮或下沉的不同效果，可使用导航条中的高级功能，具体操作如下。(1) 选中需要设置高级属性的导航条，选择【标签】面板中的【行为】选项卡，在【行为】面板中用户可以看到如图 3.43 所示的导航条信息。(2) 单击【行为】面板上的“”按钮，这时会弹出一个动作菜单，在动作菜单中选择【设置导航栏图像】命令，就会打开【设置导航栏图像】对话框。(3) 该对话框中的【高级】选项卡在【当项目“x”显示：】的下拉列表框中，选择【鼠标经过图像或点击时鼠标经过图像】
8、选项，则当鼠标经过图像时显示其上面的图像，有上浮或下沉的效果。在【同时设置图像】列表框中选择要显示的图像。在【按下时，变成图像文件】文本框中设置当鼠标按下时要显示的图像路径。单击【确定】按钮，确定设置。12、 利用超链接可以实现在文档间或文档中的跳转。超链接由两个端点(也称锚) 和一个方向构成。通常将开始位置的端点称作源端点(或源锚) ，而将目标位置的端点称作目标端点(或目标锚)，链接就是由源端点指向目标端点的一种跳转。目标端点可以是任意网络资源，例如，它可以是一个页面、一幅图像、一段声音、一段程序，甚至也可以是页面中的某个位置。13、 根据链接源端点的不同，可以将链接分为两种：超文本和超链接
9、。14、 超文本就是利用文本构建的超链接。在这种链接中，链接的源端点是文本。在浏览器中，超文本一般显示为下方带有下划线的文本，默认显示为蓝色。15、 超链接是利用除了文本之外其他对象构建的链接。在这种链接中，源端点是除了文本之外的其他对象，如一幅图像或一个表单等。为了充分美化网页，利用图像构建超链接成为最常见的手段之一。16、 每个页面都有一个惟一的地址，称为“统一资源定位器”(URL)。17、 3 种类型的链接路径。绝对路径：如果在链接中使用完整的 URL 地址，这种链接路径就称作绝对路径。绝对路径的特点是：路径同链接的源端点无关。例如一般的友情链接就是要绝对路径，否则找不到连接位置。相对路
10、径，如果链接中源端点和目标端点位于一个目录下，则在链接路径中只需要指明目尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 3标端点的文档名就可以了。例如，在站点中，如果希望在 “science”目录的“computer.htm”文档中创建指向“science”目录即文件夹中 “math.htm”文档的链接，可以使用如下的相对路径：math.htm。基于根目录的路径：基于根目录的路径可以看作是绝对路径和相对路径之间的一种折中表示方式。在这种路径表达方式中，所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开
11、始。假设在站点中要创建指向如图 3.47 所示“science”目录中的 “computer.htm”文档的链接，则可以使用如下的基于根目录的路径：/science/computer.htm。如果希望在文档中链接主页，则必须指定主页的名称，如：/index.html 。18、 通过 Dreamweaver 可以使用多种方式创建本地链接(在同一站点的文档间)。用户可以使用站点地图查看、创建、更改和删除链接或在文档窗口中使用【修改】菜单中的【创建链接】命令，选择链接指向的文件；也可以使用【属性】面板来链接文件，单击【浏览文件】图标选择文件，也可以使用【指向文件】图标选择文件或者直接输入文件路径。使
12、用【属性】面板可以方便地为文本或图像添加链接。为这些元素创建链接的具体操作如下。(1) 选中要作为链接的文本或图像等网页元素。(2) 在【属性】面板的【链接】文本框中，输入链接的路径，即目标端点的 URL。(3) 在【属性】面板的【目标】下拉列表框中，可以指定链接文档打开的框架17、Dreamweaver 的管理链接特性当用户在本地站点中移动或重命名文档时，Dreamweaver 可以更新选定文档中或指向选定文档的链接。如果用户将整个站点(或站点的整个自包含部分) 都存放在本地文件夹中时，该特性可以发挥最大的作用。但是 Dreamweaver 并不会对远程站点做任何修改，除非用户向远程服务器存
13、入或取出文件。如果在一个本地站点对文档进行编辑，Dreamweaver 会自动对站点中的链接进行管理。无论用户在本地站点对文档进行重命名操作，还是将文件在站点中移动，Dreamweaver 都会自动维护文档中的链接，确保链接不被中断。18、设置站点缓存可以使用站点缓存使链接的更新操作更快捷、更准确。站点缓存是由 Dreamweaver 创建的缓存文件，其中存储本地站点中所有的链接信息。如果在定义站点的时候激活站点的缓存选项，则在本地站点中，通过 Dreamweaver 对站点中的文件进行添加、删除、移动、复制和重命名等操作时，缓存中会自动记录这些信息，并对链接进行更新。设置站点缓存的具体操作如
14、下。(1) 选择【站点】|【管理站点 】命令，打开【管理站点】对话框。(2) 从站点列表框中，选择要设置缓存的站点“NetBook” ，然后单击【编辑】按钮，打开站点定义对话框来编辑站点。18、更新链接及链接范围当移动或重命名文件时，Dreamweaver 会提示是否要对链接进行更新。用户可以设置Dreamweaver 自动更新所有链接，这时会打开 【更新文件】对话框，提示用户当前的操作需要更新的文件。单击【更新】按钮，则可更新链接。单击【不更新】按钮，则不更新链接。当移动或重命名文件时，Dreamweaver 会提示是否要对链接进行更新。用户可以设置Dreamweaver 自动更新所有链接，
15、这时会打开 【更新文件】对话框，提示用户当前的操作需要更新的文件。单击【更新】按钮，则可更新链接。单击【不更新】按钮，则不更新链尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 4接。(3) 在【更改所有的链接】文本框中，会显示当前在站点窗口中选中的文件 URL，可以对其中的地址进行修改，或单击右边的文件夹按钮，然后从文件夹中选择文件。(4) 在【变成新链接】文本框中，可以输入修改后的链接地址，也可以单击右边的文件夹按钮，然后从文件夹中选择文件。(5) 设置完毕，单击【确定】按钮，确定操作。这时 Dreamweaver 会对站点中的文档进行扫描，查找包含要替换链接的文档。如
16、果找到了包含要替换链接的文档，会打开话框，提示用户更新其链接。(6) 单击【更新】按钮，可更新链接；单击【不更新】按钮，则不更新链接；单击【确定】按钮，确定操作。18、FTP 协议是网络上主机间进行文件传输的用户级协议。用具有 FTP 协议的传输软件帮助我们将已完成的作品上传到互联网上供浏览者访问，或下载到硬盘进行网站的后期维护。超级链接是网络的联系纽带。在网页中超级链接体现最为明显的是导航栏。19、 站点是网页设计人员在制作网页时，为了便于同一个目录下的内容的相互调用而创建的一个文件夹来管理网站内容。20、 测试链接所有链接都已经创建以后，用户需要对这些链接进行一系列的测试，以确保链接的正确
17、和链接设置结果的显示正确。在文档窗口中是无法对链接进行测试的，也就是说，如果在文档中单击链接，并不会在浏览器中打开它所链接的文档。但用户可以利用 Dreamweaver 的预览功能测试链接，也可以在文档窗口中直接打开链接的文档进行编辑。如果希望对链接进行真正的测试，必须在浏览器中进行，用户可以选择【文件】|【在浏览器中预览】命令，然后再选择相应的浏览器；或者按 F12 键使用默认的浏览器打开文档。19、HTML 全名是 Hyper Text Markup Language,即超文本标记语言，是用来描述 Internet 服务器上超文本文件的语言。21、 HTML 文件是一种超文本文件，用文本编
18、辑器（如记事本）来创建和编辑，并保存为 HTML 文件（即将扩展名改为 .htm 或.html） ，然后就可以用浏览器来打开。HTML 标记的一般使用格式为：内容标记符一般要配对使用，前面的表示某种格式的开始，后面的表示这种格式的结束，而这对标记符之间的内容就是被作用的对象了。22、 HTML 语言的功能是通过各种标记来实现的，其中有些标记是 HTML 文件中不可缺少的，一个最基本的网页 HTML 代码格式如下：网页标题网页设计从这里开始23、 基本标记（1）尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 5Hhtml 文件必须包含 html 标记，该标记由和构成，是起始
19、标记，是结束标记。和之间包含所有代码。（2）head 是标记为文件头标记，由和 构成，用来定义文件头信息。（3）之间所包含的就是网页的标题，就是浏览器上方标题栏所显示的内容，将要显示的文字输入在之间就可以了。必须位于之间，否则无效。（4）是 HTML 文档的主体部分，包含表格、超链接、换行、水平线等许多标记。（5）hn 是标题标记，标题的字体都是加粗，文字前后都插入了空行。其中 n 为标题的等级。HTML 总共提供六个等级的标题， n 越小，标题字号就越大：第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题（6）是换行标记， 是单标记。 无论放在什么位置，都能够强制换行。(7)用于使
20、两行隔开一定的距离，且另为一段文件段落的开始使用，是可以省略的，因为下一个 的开始就是意味着上一个 的结束。 标签有一个属性“align” ，用来指明字符显示时的对齐方式。一般有 “center”、 “left”、 “right”三种。 “center”表示居中显示文档内容， “left”表示靠左对齐显示文档内容；“right”则表示靠右显示文档内容。（8）标记可以在屏幕上显示一条水平线，用以分割页面中的不同部分，也是单标记。有四个属性： “size” 、 “width”、 “align”、 “noshade”size：表示水平线的高度width 表示水平线的宽，用占屏幕的百分比或像素值来表示
21、。aligh 表示水平线的对齐方式，有 “center”、 “left”、 “right”三种。noshade 表示线段无阴影，为实心线段。24、 文本标记在 HTML 中关于设置文本的标签有 “”、 “”、 “等标签一、提供设置文字字号大小的是标签，而标签又有“sigze” 、 “face”、“color”等属性。（1） “size”属性通过“size ”属性就能设置字号的大小，而“size ”属性的有效值范围为 17，其中默认值为 3。 “size”属性的语法标签为：可以在 size 属性值之前加上 “+”“”字符，来指定相对于字号初始值的增量或减量。在文本编辑器中输入如下代码：尊严来自实
22、力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 6设置字号的 font 标签这是 size=7 的字体这是 size=6 的字体这是 size=5 的字体这是 size=4 的字体这是 size=3 的字体这是 size=2 的字体这是 size=1 的字体（2） “face”属性设置文字的字体与样式用“face”属性可以设置文字的字体和样式，其属性值可以是本机上的任意字体类型，但只有浏览者的计算机系统中装有相同的字体才可以浏览出现预先设计的字体风格。“face”属性的语法标签为：在文本编辑器中输入以下代码：设置字体欢迎光临欢迎光临欢迎光临欢迎光临Welcome to my hom
23、e page.Welcome to my home page.注意：必须是电脑里面含有的字体，否则代码会错误，显示不了。另外，标点属于英文输入状态。（3） “color”属性设置字体的颜色字体的颜色是通过“color”属性来调整的。文字颜色设置格式如下：,颜色值可以是一个十六进制数（用 “#”作为前缀）的色标值。在文本编辑器中输入以下代码：尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 7字体的颜色各种字体的颜色各种字体的颜色各种字体的颜色各种字体的颜色各种字体的颜色各种字体的颜色各种字体的颜色(4) 其他设置文本的标签：表示将字体显示为粗体：表示将字体显示为斜体：表示将
24、字体显示为加下划线：表示强调，一般为斜体：表示将字体显示为闪烁效果：表示将字体显示为打字机字体：表示将字体显示为大型字体：表示将字体显示为小型字体：表示特别强调，一般为粗体：用于引证、举例，一般为斜体。在文本编辑器中输入以下代码：字体样式黑体字斜体字加下划线闪烁效果WelcomeWelcomeWelcome 25、 表格标记表格是用标记定义的。表格被划分为行（用 标记） ，每行又被划分为数据单元格（用标记） 。td 表示“表格数据” （table data） ，即数据单元格的内容。数据单元可以包含文本、图像、列表、段落、表单、水平线和表格等等。尊严来自实力 福建师范大学 2004 级应用化学桂
25、之杰梅花香自苦寒来 8（1） 表格的基本结构：表示定义表格：表示定义标题：表示定义表行：表示定义表头：表示定义表元即表格的具体数据。在文本编辑器输入如下代码：简单的表格姓名性别 年龄大毛男19(2)表格的标题的位置可由“align ”属性来设置，其位置分别由表格上方和表格下方。设置标题位于表格上方：设置标题位于表格下方：（2） 表格的尺寸设置一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列方式：width 和 height 分别指定表格一个固定的宽度和长度，n1 和 n2 可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示
26、。例如表格的边框尺寸设置表格边框尺寸的设置是用 border 属性来实现的。在文本编辑器中输入以下代码：html表格的边框尺寸 01入库单大米面粉 食用油500 公斤400 公斤200 公斤尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 9（5）表格的间距调整单元格和单元格之间的线为格间线，也称为表格的间距。它的宽度可以使用中的“cellspacing”属性加以调节。格式是n 表示要取用的像素值（6）表格内容与格线之间宽度的设置规定内容与格线之间的宽度在 deamweaver 中称为“填充” 。可以用中设置”cellpadding”属性进行设置，其格式为：n 表示要取用的
27、像素值（7）表格内的数据的布局对齐表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以“align”属性来设置，而上下排列则由“valign”属性来设置。其中左右排列的位置可分为三种：“居左(left)”“居右(right)” “居中(center) ”;而上下排列基本上比较常用的有四种：“上齐 top”、“居中 middle”、 “下齐（bottom） ”和基线“baseline ”。（8）表格的颜色设置在表格中，既可以对整个表格填入颜色，也可以对任何一行、一个表元使用背景色。表格的背景色彩行的背景色彩：表元的背景色彩或这里的颜色值同文本的颜色值设置相同，可以是一个十六进制数（
28、#作为前缀）的色标值。在文本编辑器输入以下代码：表格的颜色设置 网页设计 Flash 动画多媒体制作AB25、链接标记超链接是 HTML 的重要特性之一，通过超链接可以很精确地从一个页面直接跳转到其他的页面、图像或者服务器。超链接使用的是“”标记，其基本格式是：链接文字或图像标记 “”表示一个链接的开始， “”表示链接的技术;属性“herf ”定义了这个链接所指的地方；通过点击“链接文字或图像”可以到达指定的文件。超链接分为本地连接、URL 链接和目录链接。尊严来自实力 福建师范大学 2004 级应用化学桂之杰梅花香自苦寒来 10（1） 本地链接绝对路径表示： 文件的链接相对路径表示：文件的链
29、接链接上一目录中的文件：IP 地址（2） URL 链接URL 意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。URL 链接的形式是：“协议名:/主机.域名/路径/ 文件名”这里的协议包括File：本地系统文件http：WWW 服务器ftp：ftptelnet：基于 TELNET 的协议mailto：电子邮件news： Usenet 新闻组gopher： GOPHER 服务器wais：WAIS 服务器在 HTML 文件中，链接其他主机上的文件时，格式如下：文件的链接（3） 锚链接前面所讲到的链接地址，是链接到一个页面或文件看，如果直接链接到某文件上部、下部或中央部分，就需要用
30、锚链接。制作锚链接需要先在页面或文件中相应的位置建立“锚记” ，即把段落设置为链接位置，格式是：在调用此链接部分的文件，定义链接格式为：链接文字如果是在一个文件内跳转，文件名可以省略不写。26、 一些快捷键Ctrl+F2 可以打开或隐藏“快捷键入 “面板F4 隐藏或显示全部面板Ctrl+F3 隐藏或显示“属性” 面板27、 插入空格的方法一是启动 Dreamweaver8，将输入法切换到全角状态后，按下键盘空格键，即可插入空格。二是将“快捷插入”面板切换到“文本”面板，单击面板上的按钮，也可以插入空格。三是在“首选参数”对话框中进行相关的设置，以使以后每次需要插入空格时能轻松插入。执行“编辑”
31、首选参数命令，打开“首选参数“对话框在“编辑选项”区域中选择“允许多个连续的空格”复选框，这样在网页中按下空格键即可输入多个连续的空格。28、 通过执行“编辑”“快捷键”菜单，在弹出的快捷键对话框中进行自定义的快捷键设置，步骤：启动 Dreamweaver8，执行“ 编辑”“快捷键” ，单击“编辑”菜单，选择“首选参数”命令，单击“+” ，弹出一个对话框，单击“确定” 。将光标放置于“按键”文本框中，按下任意键，如“Ctrl+9” ，完成后单击“更改”按钮，设置的快捷键出现在 “快捷键”文本框中。单击“确定”按钮后，按下“Ctrl+9”即可打开“ 首选参数”对话框。29、 选择【插入】|【表格 】命令，或在【插入】面板上【常用】选项卡中单击【表格】按钮。这时会出现【表格】对话框。可以在对话框中对表格进行设置，也可以在以后的步骤中进行设置。
