1、Dreamweaver理论知识三 理论知识（一） Dreamweaver 8 基础1. 网页相关知识（1） www站点我们可以将WWW看作Internet上的一个大型图书馆，“WWW站点”、“Web站点”或网站就像图书馆里的一本本书，而Web页或网页则是书中的某一页，主页是一个站点的起始页，相当于书的封面或目录。每个web页都拥有一个被称为“统一资源定位器”（URL）的唯一地址。（2） 统一资源定位器URL（Uniform Resource Locator）URL提供了互联网上资源的准确位置，它描述WWW浏览器请求和显示某个特定资源所需的全部信息，包括传输协议，如HTTP，提供WWW服务的主机
2、名、HTML文档在远程主机上的路径及文件名，以及客户与远程主机连接时使用的端口号。例如：:80/product/default.html，其中http为传输协议，为使用的远程主机名，80为使用的端口号，product/default.html为HTML文档的路经和文件名。综合起来简单说，就是我们上网时看到的网站的地址。我们后面作网页的超链接时所说的URL地址。（3） 超级链接我们网页与网页之间要联系起来，就要通过超级链接来实现。不管是在内部实现的链接还是接到WWW网上，都需要超链接作桥梁。（4） 静态网页和动态网页静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和不可交互的网页。静
3、态网页，动态网页主要根据网页制作的语言来区分，静态网页使用HTML（超文本标记语言）语言，网页地址的后缀一般为.htm、.html、.shtml、.xml等形式；而动态网页一般使用HTMLASP或HTMLPHP或HTMLJSP 等语言，网页地址的后缀为.aspx.asp、.jsp、.php、.perl、.cgi等形式。静态网页与动态网页之间区别的重要标志是程序是否在服务器端运行。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Fl
4、ash、JavaScript、VBScript等等，它们是永远不变的。（5） Html与XhmtlHTML（HyperText Markup Language），超文本标记语言，是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。XHTML（eXtensible HyperText Markup Language），可扩展超文本置标语言，是一种置标语言，表现方式与超文本置标语言（HTML）类似，
5、不过语法上更加严格。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。2. Dreamweaver 8简介Macromedia Dreamweaver 8 是一款专业的HTML 编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，您可以快速地创建页面而无需编写任何
6、代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加 Macromedia Flash 对象，从而优化您的开发工作流程。Dreamweaver 还提供了功能全面的编码环境，其中包括代码编辑工具，以及有关层叠样式表CSS、JavaScript 和 ColdFusion 标记语言等参考资料。Dreamweaver 还使您可以使用服务器技术（如 CFML、ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持的 Web 应用程序。
7、3. Dreamweaver中使用的文件Dreamweaver中可以使用多种文件类型。但最主要的文件类型是 HTML 文件。HTML 文件（或超文本标记语言文件）包含基于标签的语言，负责在浏览器中显示 Web 页面。可以使用 .html 或 .htm 扩展名保存 HTML 文件。Dreamweaver默认情况下使用.html 扩展名保存文件。在使用Dreamweaver制作网页时可能会用到以下一些常见文件类型。（1） CSS层叠样式表 CSS层叠样式表（Cascading Style Sheet）文件，文件保存为外部样式表时扩展名为.css。主要用于设置HTML内容的格式并控制各个页面元素的位
8、置使用，CSS可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。（2） GIF图像文件GIF图形交换格式（Graphics Interchange Format）文件，文件保存的扩展名为.gif。GIF格式是用于卡通、徽标、具有透明区域的图形、动画的常用 Web 图形格式。GIF最多包含256种颜色。（3） JPEG图像文件JPEG联合图像专家组（Joint Photographic Experts Group）文件，根据创建该格式的组织命名，文件扩展名为.jpg。通常用以保存照片或色彩较鲜明的图像。JPEG格式最适合用于数码照片或扫描的照片、使用纹理的图像、具有渐变
9、色过渡的图像以及需要256种以上颜色的任何图像。（4） XML文件XML可扩展标记语言（Extensible Markup Language）文件，文件扩展名为.xml。它们包含原始形式的数据，可使用XSL设置这些数据的格式。（5） XSL文件XSL可扩展样式表语言（Extensible Stylesheet Language）文件，扩展名为.xsl 或 .xslt。它们用于设置要在Web页中显示的XML数据的样式。（6） CFML文件CFML ColdFusion 标记语言（ColdFusion Markup Language）文件，扩展名为.cfm。它们用于处理动态页面。（7） ASPX文
10、件ASP.NET 文件，扩展名为.aspx。它们用于处理动态页面。（8） PHP文件PHP超文本处理器文件，扩展名为.php。它们用于处理动态页面。（二） Dreamweaver 8文档的工作环境Dreamweaver 提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。可以在Dreamweaver 工作区中查看网页文档和网页元素的相关属性。工作区还将许多常用操作放置于工具栏中，使您可以快速更改文档。Dreamweaver的工作环境如图1-8-1（a）所示。插入工具栏位于菜单栏下方，该工具栏分成【常用】、【布局】、【表单】等八个类别
11、。插入工具栏下方为文档工具栏， 【属性】检查器默认情况下出现在文档的底部，面板组位于右侧，文档窗口出现在应用程序的中心。图1-8-1（a） Dreamweaver 8工作环境1. 文档窗口首次启用Dreamweaver时，会弹出【工作区设置】对话框，对话框中提供【设计器】和【编码器】两种工作区的布局风格。【设计器】的文档窗口默认为【设计】视图，工作流程非常形象和直观，适合初学者使用；【编码器】的文档窗口默认为【代码】视图，适合手工编码人员使用。如果需要切换工作区的布局风格，在Dreamweaver中选择【窗口】|【工作区布局】，在弹出的子菜单中选择即可。启动Dreamweaver后出现如图1-
12、8-1（b）所示的起始页文档窗口，此时Dreamweaver的工具栏和【属性】检查器面板等尚未激活，因而无法使用；打开或新建文档后则出现如图1-8-1（a）所示的文档窗口，此时工具栏等均可使用。图1-8-1（b） Dreamweaver 8 起始页文档窗口起始页文档窗口中包含三栏选项：【打开最近项目】、【创建新项目】和【从范例创建】。（1） 【打开最近项目】栏中列出了最近使用过的文档，移动鼠标到文档名称上单击即可在Dreamweaver中打开该文档。（2） 【创建新项目】栏中列出了可以创建的文档类型，单击其中一项即可创建新文档。（3） 【从范例创建】栏为范例页面类型，单击其中一项可以选中某一范
13、例页面来创建新文档。2. 插入工具栏插入工具栏中包含用于创建和插入如表格、层和图像等对象的按钮。当鼠标指针移动到这些按钮上时会出现该工具按钮的名称提示。这些按钮组织到【常用】、【布局】、【表单】等八个类别中，单击【常用】右侧的向下箭头，在弹出的菜单中可以选择进行工具栏的切换。工具栏中各按钮的名称及功能参见附录四。插入工具栏有【显示为菜单】和【显示为制表符】式两种显示形式。插入工具栏如图1-8-2所示（默认显示【常用】类别工具按钮）。图1-8-2 插入工具栏【常用】类别插入工具栏的工具按钮具有弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作，每当从弹出菜单中选择一个新选项
14、时，该按钮的默认操作都会改变。（1） 【常用】类别中可以选择插入图像、媒体、表格、超级链接等常用网页元素的工具。（2） 【布局】类别中可以插入表格、div 标签、层和框架等用以页面布局的元素，选择【布局】模式后可以使用 Dreamweaver 【绘制布局单元格】和【绘制布局表格】布局工具绘制表格或单元格进行页面框架的布局，还可以从【标准】（默认）、【扩展表格】和【布局】三个按钮中选择表格视图。（3） 【表单】类别包含用于创建表单和插入表单元素的按钮。（4） 【文本】类别中可以插入各种文本格式设置标签和列表格式设置标签，如 b、em、p、h1 和 ul等。（5） 【HTML】类别中可以插入用于水
15、平线、头内容、表格、框架和脚本的 HTML 标签。（6） 【服务器代码】类别仅适用于使用特定服务器语言的页面，这些服务器语言包括 ASP、ASP.NET、CFML Basic、CFML Flow、CFML Advanced、JSP 和 PHP。这些类别中的每一个都提供了服务器代码对象，并可以将这些对象插入【代码】视图中。（7） 【应用程序】类别中可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。（8） 【Flash 元素】类别可以插入 Macromedia Flash 元素。（9） 【收藏】类别可以将【插入】栏中最常用的按钮分组和组织到某一常用位置。3. 文档工具栏文档工具栏中包含
16、【代码】视图、【设计】视图、同时显示【代码】和【设计】视图的拆分视图按钮，单击这些按钮可以在文档的不同视图间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-8-3所示。图1-8-3 文档工具栏（1） 显示设计视图仅在【文档】窗口中显示【设计】视图。（2） 服务器调试显示一个报告，帮助您调试当前ColdFusion页。该报告包括您的页面中的错误（如果有的话）。（3） 文档标题允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。（4） 没有浏览器/检查错误使您可以检查跨浏览器兼容性。（5） 验证标
17、记允许您验证当前文档或选定的标签。（6） 文件管理显示【文件管理】弹出菜单。（7） 在浏览器中预览/调试允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。（8） 刷新设计视图当您在【代码】视图中进行更改后刷新文档的【设计】视图。在执行某些操作（如保存文件或单击该按钮）之前，您在【代码】视图中所做的更改不会自动显示在【设计】视图中。（9） 视图选项允许您为【代码】视图和【设计】视图设置选项，其中包括对哪个视图显示在上面进行选择。（10） 可视化助理允许您使用不同的可视化助理来设计页面。4. 状态栏图1-8-4 状态栏（1） 状态栏放置在【文档】窗口的底部，显示标签检查器等信息。如图1-
18、8-4所示。（2） 标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。（3） 选择手形工具单击文档，可以将文档拖到【文档】窗口中。单击选取工具可禁用手形工具。（4） 缩放工具和【设置缩放比率】弹出式菜单允许您为文档设置缩放级别。（5） 【窗口大小】弹出菜单（仅在【设计】视图中可见）允许您将【文档】窗口的大小调整到预定义或自定义的尺寸。（6） 页面（包括全部相关的文件，如图像和其它媒体文件）的文档大小和估计下载时间。（三） Dreamweaver 8文档的基本操作1. Dreamweaver 8文档的新建使用Drea
19、mweaver可以创建新空白文档，或者创建基于Dreamweaver 设计文件的空白文档或模板，以及使用模板定义文档外观并设置文档可中以编辑的部分。创建新空白文档的基本操作如下。（1） 选择【文件】|【新建】（快捷键Ctrl+N），打开【新建文档】对话框。选定【常规】选项卡；（2） 在【类别】列表中选择【基本页】、【动态页】、【模板页】、【其他】或【框架集】类别，并在右侧列表中选择要创建的文档的类型，如图1-8-5所示；（3） 单击【创建】按钮，创建新的文档，并在【文档】窗口中打开。图1-8-5 【新建文档】对话框2. Dreamweaver 8文档的保存创建新文档或者修改已有的文档后需要进行
20、保存。保存文档的操作步骤如下。（1） 保存新文档时，选择【文件】|【保存】（快捷键Ctrl+S），在打开的对话框中选择文件保存到的目标文件夹；（2） 如果需要换名保存已修改的文档，则选择【文件】|【另存为】（快捷键Ctrl+Shift+S），在打开的对话框中选择文件保存到的目标文件夹；（3） 在【文件名】文本框中输入文件的名称，单击【保存】按钮如图1-8-6所示。（4） 如果要一次保存多个打开的并被修改过的文档，则选择【文件】|【保存全部】。图1-8-6 【另存为】对话框小提示：输入的文件名称避免使用中文、空格和特殊符号，也不要以数字开头，应使用英文单字或者汉语拼音来命名。文件保存前应先创建站
21、点，然后将文件保存在创建的站点中。3. Dreamweaver 8文档的打开使用Dreamweaver打开已有的网页文档后，可以在Dreamweaver工作环境中选择【文件】|【打开】（快捷键Ctrl+O），在弹出的对话框中选择需要打开的文件，单击【打开】按钮进行打开；在安装了Dreamweaver软件后，也可以右键单击需要打开的网页文件，从弹出的快捷菜单中选择Dreamweaver软件进行打开。4. Dreamweaver 8文档的页面属性设置使用Dreamweaver新建或打开网页文档后，可以打开 【页面属性】对话框来指定布局和格式设置属性。在【页面属性】对话框中可以设置页面字体和字体大小
22、、背景颜色、边距、链接样式以及网页文档标题和编码等。也可以打开网页文档后单击【属性】检查器面板中的【页面属性】按钮，打开对话框来设置。【页面属性】设置的基本操作如下。（1） 选择【修改】|【页面属性】， 打开 【页面属性】对话框，或者单击【属性】检查器面板中的【页面属性】按钮，打开页面属性设置的对话框；（2） 【外观】类中可以设置页面文字字体、大小，页面背景色和背景图，页面边距，如图1-8-7所示；图1-8-7 【页面属性】对话框（3） 【链接】类中设置页面超级链接的链接、变换图像链接、活动链接、已访问链接颜色和下划线样式，如图1-8-8所示；（4） 【标题/编码】类设置文档标题和编码格式。（
23、5） 设置完后单击【确定】按钮。图1-8-8 【页面属性】对话框默认情况下，Dreamweaver使用 CSS（层叠样式表）设置文本格式。可以选择【编辑】|【首选参数】，打开【首选参数】对话框来更改 HTML 格式设置的页面格式设置首选参数。使用CSS页面属性时，Dreamweaver对在【页面属性】对话框的【外观】、【链接】和【标题】类别中定义的所有属性使用CSS标签。定义这些属性的CSS标签会嵌入到页面的 head 部分中。（四） Dreamweaver中基本元素的插入1. 插入文本元素在Dreamweaver文档添加文本时，可以选择直接在Dreamweaver文档中输入文本，也可以从其他
24、文档中复制后粘贴到Dreamweaver文档中，从其他文档中复制文本并粘贴到Dreamweaver文档中时，将插入点定位在【文档】窗口的【设计】视图中，选择【编辑】【粘贴】或【编辑】|【选择性粘贴】操作。【选择性粘贴】命令允许您以不同的方式指定所粘贴的文本的格式，如果要从Word文档中复制带格式的文本并粘贴到Dreamweaver文档，但是想要去掉所有格式设置，以便能够向所粘贴的文本应用自己的CSS样式表，则先在Word中选择文本，将它复制到剪贴板，然后使用【选择性粘贴】命令选择只粘贴文本的选项。文本插入后选中文本，在【属性】检查器面板中可以设置和更改字体及字体样式、字体大小及颜色等属性。若要
25、更改字体，则在【属性】检查器或【文本】|【字体】子菜单中选择字体组合。选择【默认】删除先前应用的字体；【默认】对所选文本应用默认字体（或者是浏览器的默认字体，或者是在 CSS 样式表中指定给该标签的字体）。若要更改字体样式，则单击【属性】检查器中的【粗体】或【斜体】，或者从【文本】|【样式】子菜单中选择字体样式。 若要更改字体大小，则在【属性】检查器或【文本】|【大小】子菜单中选择大小，HTML 字体大小是相对而不是特定的点数。若要确保页面中字体大小一致，则可以使用 CSS 样式并且以选定字体大小和大小单位来设置。若要更改文本颜色，单击【属性】检查器中的颜色选择器，从调色板中选择一种颜色。 或
26、者选择【文本】|【颜色】，弹出系统颜色选择器对话框，选择一种颜色，然后单击【确定】。 也可以直接在【属性】检查器字段中输入颜色名称或十六进制数字。文本的【属性】设置面板如图1-8-9所示。图1-8-9 文本【属性】设置面板2. 插入图像元素（1） 插入图像将图像插入 Dreamweaver 文档时，Dreamweaver 自动在 HTML 源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver 会询问您是否要将此文件复制到当前站点中。插入图像的基本操作如下：1） 将插入点放置在您要显示图像的地方；2） 在工具栏的
27、【常用】类别中，单击图像按钮图标；3） 或者将图像按钮图标拖入文档窗口中；4） 或者选择【插入】|【图像】，浏览以选择您要插入的图像或内容源。；5） 单击【确定】按钮，此时将显示【图像标签辅助功能属性】对话框，如图1-8-10所示；图1-8-10 【图像标签辅助功能属性】对话框6） 在【替代文本】和【详细说明】文本框中输入信息，然后单击【确定】。7） 在【属性】检查器中，可以设置该图像的属性，图像【属性】设置面板如图1-8-11所示。图1-8-11 图像【属性】面板小提示：如果正在一个未保存的文档中工作，则 Dreamweaver 会生成一个对图像文件的 file:/ 引用。将文档保存到站点中
28、的任何位置后，Dreamweaver 将该引用转换为文档相对路径。在插入图像操作中单击【取消】时，该图像将出现在文档中，但 Dreamweaver 不会将它与辅助功能标签或属性相关联。（2） 调整图像大小1） 选择该图像元素，在图像元素的底部、右侧及右下角出现调整大小控制点。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。2） 拖动右侧的选择控制点调整元素的宽度；动底部的选择控制点调整元素的高度；顶角的选择控制点同时调整元素的宽度和高度。 3） 若要在调整元素尺寸时保持元素的比例（其宽高比），则在按住 Shift 键的同时拖
29、动顶角的选择控制点。 要将元素的宽度和高度调整到更小的大小或者设置精确的宽度和高度，则在如图1-8-11所示的【属性】检查器的宽和高框中输入具体的数值。4） 若要将已调整大小的元素返回到原始尺寸，则在【属性】检查器中删除【宽】和【高】文本框中的值，或者单击【重设大小】按钮。小提示：在 Dreamweaver 中以可视方式调整图像大小有助于看到不同尺寸的图像对布局的影响情况。以可视方式调整图像大小不会将图像文件缩放到指定的比例。如果在 Dreamweaver 中以可视方式调整了图像的大小，但是没有使用图像编辑应用程序（例如 Macromedia Fireworks）将图像文件缩放到所需大小，则在
30、载入页面时用户的浏览器必须缩放图像。这可能会导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示，应使用图像编辑应用程序先缩放图像，再插入到网页文档中。（3） 在 Dreamweaver 中编辑图像图像重新取样：图像重新取样添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小图像文件的大小，其结果是下载性能的提高。重新取样图像以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。对图像进行编辑时，选中图像，然后在图像【属性】检查器面板的【编辑】处单击各按钮进行编辑。【裁剪】：裁剪可让通过减小图像区域编辑图像。通过裁剪图像以强调图像的主题，并删除图像中强调部分周围不需要的部分。【亮度/对比度】：修改图像中像素的亮度或对比度。修正过暗或过亮的图像时通常使用【亮度/对比度】。【锐化】：可通过增加图像中边缘的对比度来调整图像的焦点。扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这可以防止特别精细的细节从组成数码图像的像素中丢失。不过，要显示数码图像文件中的细节，经常需要锐化图像，从而提高边缘的对比度，使图像更清晰。（4） 使用 Fi
