图像ie缓存文件夹在哪

第5章用Dreamweaver可视化设计页面如果要细数目前最优秀、最流行的可视化HTML设计工具,那么Dreamweaver应该是其中之一.
在本书第1章已经提到过Dreamweaver的下载和安装的内容,没有安装的读者可以参考第1章中关于Dreamweaver的介绍,在电脑上安装一个Dreamweaver.
本章将介绍Dreamweaver的基础使用知识,了解Dreamweaver操作的一些方法,下一章将介绍如何在Dreamweaver中创建站点.
在后续的网站内容介绍中,还会穿插对该工具的讨论.
5.
1Dreamweaver工作区Adobe的CS系列软件都使用了统一的浮动窗口式布局,将所有的可供使用的操作和属性以浮动面板的方式呈现,既方便用户,也可以根据需要进行折叠来节省屏幕空间.
Dreamweaver的工作区非常灵活,它根据开发人员和设计人员的不同要求对浮动和工具面板进行了一系列默认的设置,一些喜欢经典Dreamweaver工作区布局的用户也可以切换到他们喜欢的窗口工作区.
5.
1.
1工作区布局简介当安装好Dreamweaver之后,每次启动时,都会显示欢迎页面,这是可以设置的.
可以通过主菜单的"编辑|首选参数"菜单项,从弹出的选项窗口中选择"常规"选项,取消勾选第1个选项,如图5.
1所示.
图5.
1首选参数窗口设置欢迎页面取消欢迎页面的显示第5章用Dreamweaver可视化设计页面·151·Dreamweaver根据开发人员和设计人员的不同习惯和工作方式提供了不同的布局排列,比如开发人员习惯于查看和编辑代码,主要是与开发相关的浮动面板的显示,而设计人员关心可视化设计的内容和元素,因此其布局会偏重于设计元素.
Dreamweaver提供了方便在各种不同的工作区面板之间切换的方法.
可以单击菜单栏右侧的下拉列表框选择不同的工作区布局,如图5.
2所示.
图5.
2窗口布局切换面板在本书第1章对Dreamweaver的主界面有过简短的介绍,下面通过创建一个网页来详细地看一下Dreamweaver主界面的各个面板如何协作来完成系统的功能.
打开Dreamweaver,单击主菜单中的"文件|新建"菜单项,Dreamweaver将弹出新建文档窗口,该窗口提供了30多个预置的CSS模板样式,也可以基于现有网站的模板来创建一个新的页面.
在本示例中选择"空白页|HTML|"项,表示不使用任何模板,Dreamweaver将弹出如图5.
3所示的主窗口.
图5.
3Dreamweaver主窗口下面是对这几个界面元素的具体作用的介绍.
应用程序栏:应用程序栏提供了站点管理、扩展管理器、Dreamweaver主菜单及快速帮助内容搜索框.
切换窗口布局文档工具栏插入面板网页设计或编码区域CSS面板折叠起来的面板标签选择器属性面板页面设置工具应用程序栏工作区切换器第2篇网页设计与制作·152·工作区切换器:用来切换到不同的工作区布局的快捷菜单.
文档工具栏:提供各种网页编辑窗口需要的一些工具和选项.
网页设计或编码区域:这里就是网页的主要编辑窗口,可以通过文档工具栏的几个切换按钮在不同的视图之间进行切换.
标签选择器:显示鼠标所在位置的HTML标签,单击某标签可以选中该标签及标签内所有元素.
页面设置工具:在这里可以设置页面的缩放、页面的尺寸.
属性面板:用来动态地显示各种不同的HTML元素的属性,设置不同的属性到HTML元素.
插入面板:这个面板用来插入各种HTML元素,可以单击"常用"右侧的下拉箭头切换到不同的元素插入面板.
CSS面板:提供CSS属性信息和创建工具,在第3章介绍CSS时曾经详细地介绍过这个面板的作用.
灵活运用这些界面元素能显著地提高网站建设的效率,尤其重要的是属性面板,它提供了使用标签选择器选中的标签的详细属性,使得用户可以不用去查阅HTML辞典来了解不同标签的属性,是初学者学习HTML的重要武器.
5.
1.
2使用文档编辑器文档窗口是设计网页与代码编辑的主窗口,基本上是网站建设人员日常工作的地方.
Dreamweaver提供了一个非常有用的特性,就是代码和设计的同步.
当使用设计人员的工作区打开或新建一个文件时,Dreamweaver会使用设计视图,此时可以通过文档工具面板的几个工具栏来切换到代码视图或分割视图.
在文档工具栏中,与文档编辑器切换相关的按钮如下所示.
代码:在文档窗口中显示代码视图,这是开发人员经常使用的视图.
拆分:将文档窗口拆分为代码和设计视图,当在代码编辑窗口中更改了代码时,在设计视图中就可以看到更改呈现的效果;在设计视图中添加了元素,在代码窗口就可以看到元素的HTML代码.
设计:只显示设计视图窗口.
实时视图:允许不用打开浏览器,直接在Dreamweaver的文档窗口看到设计的结果,此时文档不可编辑,只能查看.
拆分视图的功能非常有用,这也是Dreamweaver得以流行的一个因素,但是默认情况下,Dreamweaver的拆分视图是垂直拆分,对于屏幕比较窄的用户来说有些不方便,垂直拆分如图5.
4所示.
由图5.
4中可见,设计视图显得有点窄小,如果设计的内容非常多,而且一些元素是按比较调整大小的,那么在设计视图中显示的内容将显得有点混乱,可以通过取消选中主菜单的"查看|垂直视图"菜单项,将拆分切换为水平视图.
当切换为水平视图后,可以单击主菜单中的"查看|顶部的设计视图"菜单项,将设计视图放在顶部,如图5.
5所示.
第5章用Dreamweaver可视化设计页面·153·图5.
4Dreamweaver的拆分视图图5.
5水平拆分的代码视图文档工具栏还提供了如下的几个有用的工具按钮来帮助网站建设人员开发网页,如下所示.
调整窗口大小工具按钮:该按钮允许根据不同的目标浏览器分辨率调整窗口的大小,以便于设计人员根据指定的窗口大小来设计网页.
该工具按钮被单击后,将弹出一个选择各种不同窗口大小的下拉菜单,单击"编辑|大小"菜单项,将打开首选参数的设置"窗口大小"对话框,在该对话框中,用户可以自定义要使用的窗口大小,如图5.
6所示.
在浏览器窗口预览按钮:或者通过按F12键,将打开默认的浏览器窗口显示当前正在编辑的网页,这个按钮的下拉列表会显示可供使用的浏览器列表,允许用户选择当前系统中安装的浏览器来查看网页.
注意:由于HTML和CSS在不同的浏览器中经常会呈现一些差异,因此切换多个浏览器进行调试查看是非常有用的一个功能.
代码视图设计视图设计视图代码视图第2篇网页设计与制作·154·图5.
6编辑"窗口大小"窗口远程服务器文件管理按钮:用来与远程服务器同步文件,在设置了远程服务器时比较有用,否则这个按钮的下拉项基本上都是灰色.
发送到W3C验证按钮:文档内容被发送到W3C进行验证,验证完成后会显示在如图5.
7所示的验证结果对话框中.
图5.
7W3C验证按钮浏览器兼容性检查按钮:用来检测与浏览器的兼容性,它将打开浏览器兼容性检查面板,在该面板中针对不同的浏览器进行兼容性检查.
可视化助理按钮:主要是针对设计视图中的不可见元素的辅助可视化工具,比如标签默认并不显示具体的呈现效果,但是通过可视化按钮中的可选项,可以在Dreamweaver的设计视图中为其显示一个区域,以便于设计人员更好地编辑,在运行时这些可视化助理是不可见的.
5.
1.
3使用属性面板如果属性面板没有显示在窗口上,可以单击主菜单的"窗口|属性"菜单项,属性面板将固定在文档视图的下方.
属性面板会显示出当前在设计视图或代码视图选中的元素的详细信息,例如选中一个表格标签,属性面板将显示如图5.
8所示的信息.
图5.
8属性面板如果想要将表格的行数更改为20行,那么可以直接在行文本框中输入20,并按回车已经设置的窗口大小列表可以添加和删除窗口大小设置第5章用Dreamweaver可视化设计页面·155·键,Dreamweaver将自动将表格行更改为20,代码视图中的代码也得到了更新.
对于属性面板,比较重要的就是名称和类这两个属性,类来自于CSS中的类选择器,而名称允许为属性指定id值,以便于使用CSS中的id选择器来应用样式.
很多HTML元素还提供了一个CSS子页面,该页面可以用来添加或创建CSS规则,允许快速对当前选中的元素应用CSS,如图5.
9所示.
图5.
9属性面板的CSS子面板5.
1.
4Dreamweaver选项设置如果对Dreamweaver中的一些设置不太清楚,或者想更改一些系统设置,可以通过主菜单中的"编辑|首选参数"来设置Dreamweaver中的一些选项,如图5.
1所示.
如果对代码编辑器中的字体设置不太满意,可以在左侧的分类中选择"字体"项,然后在右侧的设置部分可以设置字体,如图5.
10所示.
图5.
10在选项窗口中设置显示字体在选项分类中列出了Dreamweaver可供设置的方方面面,如果在使用Dreamweaver的过程中觉得有一些设置不太好用,那么可以打开选项窗口来找找看是不是有相关的设置可以更改.
5.
2添加文本和图像在Dreamweaver中添加文本和图像就好像在Word中操作一样,可以直接输入文本,也可以通过复制和粘贴的方式拷贝文本,或者是从Word或Excel中导入文本内容.
接下设置具体的系统选项选项设置的分类在CSS和HTML属性之间切换第2篇网页设计与制作·156·来会介绍如何插入图片.
在网页中既可以插入位于本地磁盘上的图片,也可以插入位于其他远程位置的图片.
5.
2.
1输入文本在Dreamweaver中,可以像在Word编辑器中一样输入文本,网页的文本是网站的核心,如果没有吸引人的文本内容,网页做得再漂亮也会显得太空洞.
在Dreamweaver中,网页文本可以使用如下的几种方式插入:直接通过键盘输入,这是最基本的录入方法.
从Word文档或其他的文件中复制或粘贴.
从其他外部文件中导入.
下面新建一个名为InputWords.
html的文件,然后使用上面所示的3种方式向文件中输入文本内容,如以下步骤所示.
(1)打开Dreamweaver,选择主菜单的"文件|新建"菜单项,从弹出的新建文档中选择空白的HTML文档,单击"确定"按钮,Dreamweaver将在文档窗口中打开新建的文档,按Ctrl+S快捷键或者单击"文件|保存"菜单项,将文件存为InputWords.
html.
(2)在文档工具栏中将网页的标题设置为"文档输入示例",然后单击文档工具栏的"设计"按钮,切换到设计视图,随便输入几行文本.
注意:在Dreamweaver中,当按回车键时,Dreamweaver会创建一个新的段落,如果想在一行文本后面加入一个换行符,需要按Ctrl+回车键.
(3)从Word文档中随便复制一段文本,按Ctrl+V快捷键将文本粘贴到Dreamweaver中,可以看到这两种方式下Dreamweaver都会为文本添加一个段落标记,但是Word文档中文本原有的格式会被清除掉.
可以单击"编辑|选择性粘贴"菜单项,Dreamweaver将弹出如图5.
11所示的"选择性粘贴"对话框.
图5.
11"选择性粘贴"对话框在该窗口中,可以指定粘贴的文本内容是否包含格式,也可以单击"粘贴首选参数"按钮,打开首选参数窗口中的复制/粘贴选项窗口,在该窗口中设置选择性粘贴的默认选项.
在选中了合适的选项后,单击"确定"按钮,可以看到Dreamweaver对Word的格式进行了一些转换,产生了一系列的CSS和格式化代码.
单击这里将打开首选参数窗口第5章用Dreamweaver可视化设计页面·157·注意:尽管Dreamweaver很智能地完成了格式化工作,但是由于自动产生的代码不是非常精炼,因此建议在动态产生的代码基础之上再进行修改.
(4)最后使用导入功能从Word文档中导入文本,单击主菜单中的"文件|导入|Word文档"菜单项,将弹出选择Word文档的窗口,选择本书配套代码下面的"用于导入的Word文档.
doc"或者是读者自己选择的任何Word文档,单击"确定"按钮之后,在Dreamweaver的文档视图中就可以看到新近导入的文档了.
5.
2.
2格式化文本在添加了文本之后,接下来就可以使用Dreamweaver的属性面板对文本进行格式化,属性面板提供了对所选文本的字体、字号和颜色等的格式化设置.
可以使用HTML或CSS来格式化文本.
注意:对格式化文本应用CSS样式是目前的一种标准,因此一般情况下总是建议使用CSS对文本进行格式化.
延续5.
2.
1节中的步骤,格式化文本的实现如以下步骤所示.
(5)选中导入的文本,可以选中某段文本或使用Ctrl+A快捷键选中所有文本,在属性面板中单击CSS图标,将看到CSS选项设置窗口.
在目标规则下拉列表中,首先需要为CSS创建一条新的规则,也可以从下拉列表中选中已有的规则进行添加或更改.
在这里使用默认的""项.
单击"编辑规则"按钮,将弹出"新建CSS规则"窗口.
由于导入的文本是一个被标签包围起来的段落,因此在这里使用标签选择器,指定为p元素应用样式,并且样式保存在当前文档中.
Dreamweaver会弹出样式规则设置窗口,在该窗口中就可以为所有的p元素设置样式了.
(6)一旦设置了一个样式规则(也就是一个选择器)之后,属性面板的格式化设置就会显示该规则的样式,用户就可以在属性面板中直接可视化地更改CSS样式,如图5.
12所示.
图5.
12在属性面板中设置CSS样式可以看到,在此属性窗口中可以设置CSS中的字体、字号、颜色、粗细及对齐等特性,设置完成之后,就可以在样式规则所在的位置(本例中是当前文档中),查看所应用的CSS样式,例如图5.
12中的设置将产生如下所示的CSS代码:输入文档示例p{font-family:"微软雅黑";font-size:12pt;color:#060;样式规则直接在属性面板修改样式规则的CSS属性第2篇网页设计与制作·158·}可以打开CSS面板查看所创建的CSS样式,如果CSS面板没有显示在界面上,可以单击主菜单的"窗口|CSS样式"菜单项,在CSS面板的当前或所有样式规则窗口上,可以看到刚刚创建的CSS样式.
5.
2.
3添加列表项在HTML中,列表分为有序列表和无序列表,在Dreamweaver中创建这两类列表非常简单,下面的步骤介绍了如何在Dreamweaver中创建有序或无序的列表.
(1)新建一个名为List.
html的空白HTML文件,在设计视图中输入几行文本,每一行文本输入结束后使用回车键来自动添加段落符,即标签,产生的代码如下:创建列表项Dreamweaver是建站工具Fireworks是做图工具Flash是动画工具(2)选中body区的这3个段落,可以用鼠标直接在设计视图中拖动选择,在属性面板中,选择HTML面板,单击项目列表工具栏,如图5.
13所示.
图5.
13在属性列表中设置项目编号Dreamweaver将自动根据选择的段落设置列表项,与手工在HTML中编写的一样.
在创建了列表项之后,回到设计视图,在列表项后面继续按回车键就可以添加新的列表项,与在Word中设置项目符号和编号基本一样.
(3)如果要在项目列表的第1项后面添加嵌套的子列表,可以先在第1个列表项后面按回车键,添加一个新的列表项,添加一些列表项文本.
然后单击图5.
13中的按钮将这一项缩进为嵌套子项,此时,Dreamweaver会自动产生如下所示的代码:Dreamweaver是建站工具Dreamweaver中可以创建网站Fireworks是做图工具Flash是动画工具单击这里设置无序列表第5章用Dreamweaver可视化设计页面·159·由上述代码不难发现,Dreamweaver果然已经完美地为用户创建了嵌套的列表项.
因此即便是一个不懂HTML的用户,只要掌握这些基本的操作方法,也可以创造出很多有用的效果.
5.
2.
4输入特殊字符在HTML中,很多字符是不能直接输入的,需要使用特定的字符来替代.
比如在HTML中尖括号表示标签的意思,如果要在元素中使用尖括号,必须使用<和>来替代.
在输入尖括号时,Dreamweaver会自动帮助用户插入这两个替代字符,对于其他的一些特殊字符,Dreamweaver提供了标准的插入面板,允许用户进行选择插入.
要插入特殊字符,在插入面板选择"文本"插入页,单击最下面的字符,从弹出的下拉列表框中可以看到很多特殊的字符,如果单击下拉列表底部的"其他字符"项,将弹出如图5.
14所示的窗口.
图5.
14在Dreamweaver中插入特殊的字符可以看到,各种各样的字符都出现在列表中,选择一个便可以插入到设计视图中,在代码视图中可以观察到这些特殊字符的替代字符串.
注意:在Dreamweaver中,当使用"空格"键插入超过一个以上的空格时,会发现"空格"键不管用,因为Dreamweaver只支持一个空格,超过一个空格需要使用Ctrl+Shift+空格键,Dreamweaver会在需要插入空格的位置插入 .
5.
2.
5插入本地图像在设计网页时,网页中的图像实际上只是一个指向磁盘上其他位置的引用,网站在上传到服务器端时,需要将本地的图像作为网站的资源一起上传到服务器端才能正确显示,由于网页会保存图片的路径,因此为了保证图像路径的正确性,通常要将图像复制到网站项目的images文件夹下,为此一般建议先创建一个网站项目,以便确保图片引用路径的正确性.
下面演示一下在Dreamweaver中如何创建一个站点,然后向站点中插入图片,最后将第2篇网页设计与制作·160·图片插入到网页中,步骤如下所示.
(1)打开Dreamweaver,单击主菜单中的"站点|新建站点"菜单项,Dreamweaver将弹出创建站点对话框,输入站点名称和站点保存位置之后,单击"保存"按钮,一个站点就创建成功了,如图5.
15所示.
图5.
15创建Dreamweaver站点(2)成功创建网站项目后,在Dreamweaver的面板区域将会看到文件面板,文件面板是用来管理Dreamweaver站点的逻辑视图,它会对在第1步中所指定的物理磁盘文件进行管理.
选中站点,右击鼠标,从弹出的快捷菜单中分别创建一个名为Index.
html的HTML文件和一个名为images的文件夹,如图5.
16所示.
图5.
16Dreamweaver的站点管理文件夹(3)双击Index.
html在Dreamweaver的文档窗口中打开文件,切换到设计视图,然后在右侧的插入面板的常规页中找到插入图像按钮.
如果插入面板没有显示,请单击主菜单的"窗口|插入"菜单项以显示插入面板.
单击该按钮后,将显示如图5.
17所示的图像,允许用户从本地硬盘中选择一幅图片.
可以看到这个打开文件的对话框与Windows标准的对话框不同,"选择文件名目"使用默认的"文件系统"单选按钮.
如果要从站点目录中选择一幅图像,可以单击"站点根目录"按钮,笔者浏览到本地硬盘上的一幅图像,Dreamweaver检测到这幅图像不是本地站点根目录中的图片,会弹出如图5.
18所示的对话框.
(4)单击"是"按钮之后,Dreamweaver会弹出一个指定要复制到的目标地址的对话框,在该对话框中选择网站根目录下的images文件夹,如图5.
19所示.
在这里输入站点名称输入站点所要保存的位置站点名称站点文件和文件夹逻辑视图第5章用Dreamweaver可视化设计页面·161·图5.
17从本地磁盘选择图片文件图5.
18图片自动复制确认对话框图5.
19指定保存目标位置(5)在指定了图片保存位置之后,Dreamweaver会将本地硬盘中的图片复制到目标位置,然后弹出一个"图像标签辅助功能属性"设置窗口,如图5.
20所示.
图5.
20图像标签辅助功能属性对话框在该属性框中设置替换文本,也就是当图像不可用时,将要显示在HTML页面上的文本内容,单击"确定"按钮.
Dreamweaver将在设计视图上显示图片,并生成如下所示的代码:Dreamweaver将原本需要手动复制图像、手动插入代码的工作全部自动化,使得用户可以轻松地插入图像.
这个特性非常好用,笔者现在已经习惯了使用这种方式来向网站插入图片.
5.
2.
6设置图像属性在Dreamweaver中插入图像之后,当在设计视图中选中图像时,可以在属性面板对图该按钮可以切换到站点根目录图片的相对路径设置第2篇网页设计与制作·162·像的属性进行进一步的调整,以便使图像的显示符合页面内容的需要.
Dreamweaver提供的图像属性面板如图5.
21所示.
图5.
21图像属性设置面板在属性面板中,可以更改图像的高度和宽度、图片的源文件及替换文本,设置图像链接、图像的边框经对齐方式,为图像添加热点地图等,甚至还可以直接在Dreamweaver中对图像进行编辑.
属性窗口的源文件、链接和原始这三个属性编辑框右侧都有一个小图标,这个图标称为"指向文件图标",可以拖动这个图标到文件面板上的文件,来设置相应的属性.
例如要链接到PicTitle.
html这个网页,如图5.
22所示.
图5.
22使用拖动的方式设置链接可以看到,Dreamweaver的这个指向文件工具确实非常形象化,使得用户可以非常快地进行链接或修改链接.
当在页面中插入图像时,Dreamweaver会自动用图像的原始尺寸更新宽和高文本框,可以在设计视图中拖动图像四周的四个锚点来改变图像的大小,也可以直接在属性窗口中设置图像的宽和高.
在属性面板的图像的宽和高附近有一个锁形图标,它表示锁定图像的宽度和高度的比例.
当在宽度中输入一个值时,为了保持图像的比例,Dreamweaver会自动计算并设置高度值,以便保证图像的比例.
在设置了图像的宽度或高度之后,在高和宽编辑框的右侧会多出两个小图标,分别如下.
图标表示重置为原始的大小,撤销对图像大小的更改.
表示应用对图像大小的更改,Dreamweaver会调整原始图像的大小,一旦调整,图像就被永久的更改了.
鼠标单击这里开始拖动鼠标在文件面板的指定文件上放开第5章用Dreamweaver可视化设计页面·163·当然不一定要单击图标指定图像的大小.
图像将会保持原来的下载大小,但是显示放大或缩小的样式,如果需要通过调整图像的大小来缩短下载的时间,那么可以在图像被缩小之后来应用对图像的更改.
5.
2.
7编辑图像Dreamweaver的图像属性面板中还提供了几个用来编辑图像的按钮,这使得网站设计人员可以简单地对图像做一些修改,而不再单独打开一个Photoshop或Fireworks之类的软件.
图像编辑按钮如下所示.
编辑按钮:启动在首选参数中指定的外部图像编辑软件来编辑当前的图片.
这个图标在设置为Photoshop之后会变成一个的PS图标,可以通过单击主菜单中的"编辑|首选参数"菜单项,从弹出的窗口中设置图像编辑软件,如图5.
23所示.
图5.
23设置外部的图像编辑软件图像优化按钮:单击该按钮将打开图像优化对话框,在该对话框中可以根据选择的图像类型进行一些优化工作.
比如对于JPEG图片,可以设置其压缩比,也可以使用系统内置的预设置来对图像进行压缩.
从源文件更新按钮:如果在属性面板中指定了图像的Photoshop原始文件,并且在属性窗口中对图像进行了尺寸大小的修改,那么可以使用这个按钮从原始的Photoshop更新回原始的图像格式,这个按钮给了用户撤销对图像的编辑的方法.
裁切图像按钮:允许在Dreamweaver中直接裁切图像,单击这个按钮之后,将在设计视图中显示如图5.
24所示的裁切界面.
在设计要裁切的区域后,双击高亮区域即可完成图像的裁切.
重新取样按钮:对已调整大小的图像进行重新取样,取高图片在新的大小和形状下的品质.
调整对比度按钮:将弹出一个对话框,允许用户调整图像的亮度和对比度.
锐化调整按钮:将弹出一个锐化对话框,允许用户拖动进度条来调整图像的锐化.
选择要设置编辑器的图像扩展名使用"设为主要"按钮选择一个主要的编辑器,将被Dreamweaver启动第2篇网页设计与制作·164·图5.
24在Dreamweaver中对图像进行裁切可以看到,这些基本功能的应用可以大大方便设计人员对网页进行调整和优化,而不用来来回回地在图像设计软件和Dreamweaver之间切换,提升了网页设计人员的工作效率.
5.
2.
8插入图像占位符有时,图像是由不同的人来负责收集并处理的,或者是由系统动态生成的,此时没有可用的图像,可以通过插入一个图像占位符来对网页进行排版.
例如下面的步骤将向网页插入1个300*300像素的图像占位符.
(1)在插入面板中单击"图像"下拉箭头,从弹出的下拉菜单中选择"图像占位符"菜单项.
Dreamweaver将弹出如图5.
25所示的图像占位符设置对话框.
图5.
25插入图像占位符设置(2)设置图像的宽度和高度.
这是必填项,选择一个占位符使用的图像的颜色,输入当没有图像显示时的替换文本,单击"确定"按钮,Dreamweaver将在指定的位置产生一个图像占位符.
图像占位符在IE和Firefox中的显示会有些区别,因此应尽可能地使用真正的图像来进行占位,以免因为不同浏览器的兼容性问题导致页面的错乱.
5.
2.
9鼠标经过图像鼠标经过的图像是指当鼠标经过某一幅图像时,由另一幅图像显示在原来的图像位置,提供一种置换的效果,也常常被称为鼠标翻转图像,这通常在一些图像链接中经常使用.
拖动锚点设置要裁切的区域必须填入图像的宽度和高度指定图像占位符的背景颜色第5章用Dreamweaver可视化设计页面·165·注意:随着CSS的应用日益广泛,鼠标翻转图像的功能已经渐渐被CSS样式实现所取代,通过CSS样式更能节省网络流量,提升网页的性能.
要创建鼠标经过的图像,必须要准备两幅图像:主图像,是指加载页面时显示的图像;辅图像,是指鼠标移过时显示的图像.
图5.
26是两幅按钮图片,笔者将分别用来作为主图像与辅图像来实现图像的翻转.
图5.
26鼠标翻转图像的2幅图像在准备好图像之后,单击插入面板的图像下拉列表,选择"鼠标经过的图像"列表项,Dreamweaver将弹出如图5.
27所示的对话框,允许用户选择所要使用的图像.
图5.
27设置鼠标经过的图像以看到,该窗口的大部分选项都比较好理解,在前面的内容中也有过多次的介绍.
在一切都设置可完成之后,单击"确定"按钮.
在代码视图中可以看到Dreamweaver帮助产生了大量的JavaScript代码来实现这个特性,原来它主要使用了链接标签的onmouseover和onmouseout事件,来动态地改变链接中显示的图像,可以看到在body区中添加的代码:由代码可以看到,主要还是利用了Javascript的代码来动态地实现这个翻转操作.
关于JavaScript的使用方法,本书后面的内容中会详细讨论.
按F12键在经浏览器中预览,首先看到的是MasterImg.
.
gif图像,将鼠标放在图片上,可以发现图片果然已被动态地替换了.
主图像MasterImg.
gif辅图像SlaveImg.
gif选中该选项后,在页面加载时会将两幅图像都加载到缓存中以便显示不延迟第2篇网页设计与制作·166·5.
3链接与导航在本书第2章介绍链接标签时,曾经详细地介绍了链接语法,Dreamweaver提供了一些方便的工具用来创建链接.
除了链接的介绍之外,本节还会介绍如何创建Spry框架菜单栏.
Spry是一套JavaScript框架,已经整合到Dreamweaver中,提供了一些封装好的控件,使得用户可以用简单的方式创建出非常漂亮的网页.
5.
3.
1文字链接为了更好地理解在Dreamweaver中如何操作文字链接,下面将新建一个具有层次结构的电子商务网站,其网站组成架构如图5.
28所示.
IntroducesProductsAboutUsAwardsIndex.
htmlIntro.
htmlProducts.
htmlAboutUs.
htmlAwards.
html图5.
28网站结构示意图为了演示Dreamweaver如何方便快捷地创建链接,请依照图5.
28所示的结构创建一个名为CompanySite的网站,下面的步骤演示了这一过程.
(1)打开Dreamweaver,单击主菜单中的"站点|新建站点"菜单项,在弹出的窗口中输入站点名为"公司站点",选择一个文件夹进行保存.
(2)依照如图5.
28所示的结构创建文件和文件夹,可以在文件面板上右击鼠标,从弹出的快捷菜单中选择"新建文件"或"新建文件夹"菜单项来创建文件和文件夹结构,创建后的效果如图5.
29所示.
图5.
29网站文件夹结构图第5章用Dreamweaver可视化设计页面·167·(3)双击打开Index.
html文件,将网站标题更改为"公司网站",然后添加一个项目列表,添加方法可以参考5.
2.
3小节的介绍,也可以直接使用HTML的和标签进行添加,产生的代码如下所示.
首页公司简介产品荣誉关于我们(4)下面将开始使用Dreamweaver来为这些列表项添加链接,在设计视图中选中"首页",然后在属性面板中可以看到链接属性,此时确保文本按钮处于打开状态,拖动图标到文件面板的Index.
html然后放开鼠标,一个链接就被成功建立了,然后在目标下拉框中选择self,就实现了对首页的链接,如图5.
30所示.
图5.
30在属性面板设置链接(5)用同样的步骤分别设置"公司简介"、"产品"、"荣誉"和"关于我们"这几个链接,Dreamweaver自动生成的代码如下所示.
首页公司简介产品荣誉关于我们(6)对于链接的样式,在介绍CSS样式时曾经提到过,需要指定几个伪类选择器.
在Dreamweaver中,这一切都变得非常简单,使用标签选择器选中标签,在属性面板上单击"页面属性"按钮,Dreamweaver将弹出页面设置对话框,选择"链接(CSS)"项,就可以对链接样式进行可视化的设置了,如图5.
31所示.
由图5.
31中可以看到,在这个窗口中不仅可以设置链接在各种状态下的颜色,还可以指定下划线的显示时机.
在设置完成单击"确定"按钮后,Dreamweaver将会产生用于设置样式的CSS代码:指定链接路径指定链接目标第2篇网页设计与制作·168·图5.
31可视化设置CSS链接样式/*指定页面显示的字体*/body,td,th{font-size:9pt;}/*指定默认链接样式*/a{font-size:9pt;color:#060;}/*指定访问之后的链接样式*/a:visited{color:#0F6;text-decoration:none;}/*指定鼠标悬停时的链接样式*/a:hover{color:#06F;text-decoration:underline;}/*指定鼠标单击时的链接样式*/a:active{color:#0C0;text-decoration:none;}/*指定默认的下划线样式*/a:link{text-decoration:none;}可以看到,Dreamweaver自动生成的样式非常规范,即便是对HTML和CSS没有任何经验的用户,只要掌握了Dreamweaver的一些标准操作技巧,也能够快速设计出非常漂亮的网页.
5.
3.
2页面跳转链接在介绍HTML中的标签时,曾经讨论过页面跳转的作用,通常也称为锚定链接,第5章用Dreamweaver可视化设计页面·169·主要用来在页面内部提供快速导览.
这一操作分为两个部分:首先要在需要跳转的位置设置锚定标记,然后在创建链接时指定到这个锚定标记.
Dreamweaver让这一操作变得更加简单.
为了演示在Dreamweaver中如何创建跳转链接,笔者在上一小节创建的CompanySite网站的Intro.
html页面添加一段很长的文本,下面的步骤演示了如何为长段文本添加锚定链接.
(1)将鼠标放在需要跳转的第1个位置,单击插入面板中常规页下面的"命名锚记"按钮,Dreamweaver将弹出一个为锚记取名的窗口,输入友好且唯一的锚记名称,单击"确定"按钮之后,可以看到Dreamweaver会在页面的锚记位置添加一个小图标,如图5.
32所示.
图5.
32锚记小图标(2)使用第1步所示的方法依次在页面上指定部位添加锚记,在页面顶部可以添加一个名为"ReturnTop"的锚记,这样可以在页面底部添加一个"返回顶部"的链接.
(3)在创建了所需的锚记之后,接下来选中所要添加链接的文本,然后单击插入面板的"超级链接"图标,Dreamweaver将弹出如图5.
33所示的链接窗口,在该窗口的链接列表中,就可以看到所插入的锚记列表,选择其中一个即可.
图5.
33添加一个锚记链接在设置好链接的属性之后,依次添加其他两个链接,就完成了锚记链接的设置工作.
可以看到,通过Dreamweaver的可视化的设置工具,添加锚记链按确实非常简单,而且由于在页面上显示了锚记标记,也便于在维护的时候看到具体的锚记位置.
注意:除了以添加超级链接方式添加锚记链接外,还可以在属性面板中使用图标直接拖动到一个锚记上面,这样也可以轻松地实现一个锚记链接.
5.
3.
3创建Spry导航菜单栏导航是一个网站非常重要的部分,可以说是点击率最高的一个部分.
一个漂亮的导航锚记小图标在这里选择所要添加的锚记第2篇网页设计与制作·170·设计往往能吸引很多的用户.
但是要创建一个成功的导航,往往需要花费很多时间与精力,不光要熟练使用HTML、CSS,还要对JavaScript有深刻的理解.
Dreamweaver的最近几个版本提供了Spry框架,使得用户可以非常轻松地创建出相当专业的导航菜单.
下面将使用Spry框架中的导航菜单控件在Index.
html页面上创建一个自定义的导航菜单,实现步骤如下.
(1)在Dreamweaver中打开本章创建的CompanySite网站的Index.
html页面,切换到设计视图,在"插入"面板中切换到"Spry"标签页,可以看到在该页面中提供了Spry封装好的很多控件,如图5.
34所示.
图5.
34Spry面板的所有Spry框架控件在Spry插入页选择"Spry菜单栏",Dreamweaver会弹出一个提示窗口,提示选择"水平"还是"垂直"布局,在这里选择水平布局,马上就可以在Dreamweaver中看到一个导航菜单.
当鼠标悬停在设计视图的菜单栏时,会看到一个蓝色的标签,单击该标签可以选中整个菜单.
(2)现在保存一下Index.
html,此时Dreamweaver会弹出一个对话框,提示要复制Spry的相关JavaScript文件,如图5.
35所示.
单击"确定"按钮之后,Dreamweaver会将这些JavaScript文件复制到网站文件夹下的SpryAssets子文件夹中,如图5.
36所示.
图5.
35复制相关的JavaScript文件图5.
36新添加的图片和JavaScript文件选择插入Spry菜单栏作为导航菜单单击向下箭头切换到Spry标签页第5章用Dreamweaver可视化设计页面·171·(3)使用蓝色标签选中整个Spry菜单,在属性面板中可以添加、修改和删除菜单项,笔者所设置的项如图5.
37所示.
图5.
37Spry菜单属性设置项如果查看菜单所生成的代码,会发现其实就是和的利用,所生成的代码如下:首页进入首页人才策略调薪幅度公司简介公司信息公司概况产品电脑电话电视获奖记录(4)现在可以在浏览器中预览一下所生成的菜单,会发现非常漂亮,如图5.
38所示.
图5.
38导航菜单运行效果示意图如果要控制导航菜单的显示样式,可以在CSS面板中找到SpryMenuBarHorizontal.
css样式,在这个样式中控制和标签的显示样式,因此实际上Spry菜单就是列表+CSS的应用.
通过这个例子也可以了解到CSS目前的功能确实很强大.
第2篇网页设计与制作·172·5.
4添加多媒体内容声音和视频这些多媒体内容使得原来的静态页面变得活色生香,目前主流的动画文件格式是Flash动画文件,Dreamweaver与Flash深度整合,本来它们就是一个公司的产品,所以在网页上应用Flash动画非常方便.
除此之外,还可以向网页中插入音频及一些视频剪辑.
本节将介绍如何在Dreamweaver中操作这些多媒体内容.
5.
4.
1插入Flash动画Flash动画是目前最主流的网页动画格式,它是一种基于矢量图形格式的动画,可以用来表现非常丰富的动画、声音和视频效果,俨然成了Web界的动画标准.
Flash动画的优点是文件的大小非常小,而且使用流式播放形式.
所谓的"流式播放"是指动画一边在后台下载,一边在前台播放,带给用户流畅的视觉和听觉的体验.
Flash动画是使用Adobe动画软件编辑,最终生成一个扩展名为.
swf的文件以供在网页上使用,为此要向网页上插入Flash动画.
先使用Flash软件的发布功能将.
flv格式的编辑文件发布为.
swf文件,就可以在网页上使用了.
下面在CompanySite网站的Products.
html网页中插入一个Flash动画,实现步骤如下所示.
(1)打开CompanySite网站的Products.
html,切换到设计视图面板,从插入面板选择"常规"插入项,然后选择"媒体:SWF"插入项,Dreamweaver将弹出选择SWF文件的对话框,选择一个已发布的.
swf文件,笔者选择了Movie.
swf,如果该文件的位置不在网站文件夹下,则会弹出如图5.
39所示的对话框,单击"是"按钮,Dreamweaver会弹出网站文件夹路径允许用户选择,选择之后会将Flash动画复制到网站文件夹下.
(2)在选择了要保存的目标文件夹之后,Dreamweaver会弹出如图5.
40所示的设置辅助特性对话框.
可以在标题栏中输入当动画不存在时的替换文本,然后单击"确定"按钮,Dreamweaver将会在网页中添加Flash动画,Flash动画在网页中显示一个占位符,表示这个位置插入了1个Flash动画.
图5.
39文件复制提醒对话框图5.
40参数设置对话框(3)现在先保存Product.
html页面,Dreamweaver会弹出如图5.
41所示的对话框窗口,提醒用户将要复制文件到网站文件夹.
在单击"确定"按钮以后,Dreamweaver将会在网站中创建Scripts文件夹,将1个.
swf文件和一个.
js文件复制到该文件夹.
第5章用Dreamweaver可视化设计页面·173·图5.
41复制用于Flash的JavaScript脚本(4)Dreamweaver将在网页上插入Flash文件.
如果切换到HTML的代码视图,可以看到Dreamwever自动产生了如下所示的插入代码:-->此页面上的内容需要较新版本的AdobeFlashPlayer.