Archive for the ‘Dreamweaver相关’ Category

体验Adobe Dreamweaver CS3新特性

 GoLiver和Dreamweaver同为网页设计工具,目前Adobe 发布了Dreamweaver CS3新版本,让我们看看加入Adobe大家庭的Dreamweaver有什么新特性。

  Dreamweaver 8的CSS设计工具对于那些没有任何编程经验,设计背景出身的用户而言仍然遥不可及。Dreamweaver CS3则修正了这些问题,对于没有太多编程经验的人来说,上手起来也比较容易。然而由于CSS和Ajax自身所含有的复杂因素等问题,导致使用这两种技术绝非像使用老掉牙的HTML进行网页设计那样简单。

和Fireworks一样,Adobe公司并没有对Dreamweaver的界面进行升级,这导致Dreamweaver成为Adobe与Macromedia的众多联合设计软件中最易使用户手忙脚乱的软件之一。

  适合于 Ajax 的 Spry 框架
  使用适合于 Ajax 的 Spry 框架, 以可视方式设计、开发和部署动态用户界面。 在减少页面刷新的同时, 增加交互性、速度和可用性。

  Spry 数据
  使用 XML 从 RSS 服务或数据库将数据集成到 Web 页中。集成的数据很容易进行排序和过滤。

  Spry 窗口组件
  借助来自适合于 Ajax 的 Spry 框架的窗口组件, 轻松地将常见界面组件 (如列表、表格、选项卡、表单验证和可重复区域) 添加到 Web 页中。

  Spry 效果
  借助适合于 Ajax 的 Spry 效果, 轻松地向页面元素添加视觉过渡, 以使它们扩大选取、收缩、渐隐、高光等等。

  Adobe Photoshop 和 Fireworks 集成
  直接从 Adobe Photoshop CS3 或 Fireworks CS3 复制和粘贴到 Dreamweaver CS3 中以利用来自您的已完成项目中的原型的资源。

  浏览器兼容性检查
  借助全新的浏览器兼容性检查, 节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与 CSS 相关的问题的报告, 而不需要启动浏览器。

  CSS Advisor 网站
  借助全新的 CSS Advisor 网站 (具有丰富的用户提供的解决方案和见解的一个在线社区), 查找浏览器特定 CSS 问题的快速解决方案。

  CSS 布局
  借助全新的 CSS 布局, 将 CSS 轻松合并到您的项目中。在每个模板中都有大量的注释解释布局, 这样初级和中级设计人员可以快速学会。可以为您的项目自定义每个模板。

  CSS 管理
  轻松移动 CSS 代码: 从行中到标题, 从标题到外部表, 从文档到文档, 或在外部表之间。清除较旧页面中的现有 CSS 从未像现在这样容易。

  Adobe Device Central CS3
  使用 Adobe Device Central (现在已集成到整个 Adobe Creative Suite® 3 中), 设计、预览和测试移动设备内容。

Dreamweaver编写CSS应该学会的技巧

在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于”可视化”和操作简便,使用的朋友依然很多,今天罗列一些“最佳习惯”,希望对这些朋友有所帮助。

  CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW 8引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DW 8中使用CSS以及突出某一特定CSS特性时的一些建议。

  一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:

  代码式(Inline):写入到代码中的一次性的样式。

  内嵌式(Embedded):可控制一个页面中所有元素的样式表

  外联式(External):可控制许多页面中的元素的样式表

  事实上,许多站点都根据需要把这三种方式结合起来使用。

  在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外,你还要意识到还有很多其他的浏览器,比如听力浏览器,基于电视的浏览器以及Palm pilot和TTY(teletypewriter,远程打字机)一类的手持设备。

  最佳习惯是指什么?

  大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告分离开来。这样做的好处在于:

  1:增加站点的寿命

  不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。

  2:让你的站点对所有的用户以及浏览器都适用。

  有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备,比如听力浏览器,对CSS规范性要求极其严格。

  3:让站点更新和维护更加轻松。

  使用方式得当的话,CSS可让你在一个页面中的调整快速应用到所有页面中去。

  你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时,对不同样式表的分析如下:

  Inline CSS:简单地说,你应该尽量避免使用。除了一些其他的缺点之外,使用Inline CSS意味着你并没有利用到CSS的真正优点,即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”),或者为了使用某个DHTML特效,它需要使用Inline 样式的&#106avascript来改变一个对象的属性。

  Embedded CSS:它也不是最理想的,因为它只能对当前页面施加影响。在更新的过程中,如果某一个页面丢失,将会使站点的风格不一致;另外,当用户浏览你的站点时,每一页都要下载一次样式表信息。

  External CSS:这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领,更改一次,轻松更新所有相关页面;让你的页面体积更小,浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。

  在DW 中创建CSS样式表

  在DW MX中创建CSS样式表时(Text 》CSS Style 》New style sheet),在弹出的对话框中,你有两个选择:新样式表文档(New Style Sheet File) 和只用于当前页(This Document Only)。选中“New Style Sheet File ”你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项,This Document Only,则会直接把相关代码写入到页面的部分。

  你也可以在“新样式(New style)”对话框中选择一个现存的样式表来编辑或添加新的定义。

应该连接到External CSS还是导入?

  创建外部样式表以后,你需要把它附加在每个页面上(或是模板)。要这样做,可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽,此时会弹出连接外部样式表 (Link External Style Sheet)对话框,在上面可以浏览到你的目标样式表的名字,找到以后,你可以选择连接(link) 或者导入(import )此外部样式表。

  连接是最常用的方式,选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记:

  所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到”这个样式表的话,就要采用下面的方法。

  如果你选择“导入”选项,所用的标记为:

  NetSscape4会完全忽略导入的CSS,而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能,不必担心浏览器的兼容性问题了。

  CSS属性检查器

  在DW MX的属性检查器中可以轻易切换到CSS模式。缺省情况下,属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”,你就可以看到目前可用的CSS样式表,而不是字体标签列表。

  同时,你也可以轻松切回到HTML模式。

  现成的CSS样式表

  DW MX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File > New,在弹出的新文档对话框中选择选中CSS style sheets,在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯,选择一个标记为“Accessible”的。

  将文档保存在站点文件夹内,然后就可以用上述的方法来把CSS附加在你的文档中了。

  设计时间样式表(Design Time style sheets)

  DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面,让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲,这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述),附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时,你可以轻松更改为另一个样式表。

  对于要将CSS应用于服务器端(比如ASP, PHP, or ColdFusion)或是要在客户端通过&#106avascript来存取的开发者来说,设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中,这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果,所以你可在DW MX中以可视界面工作。另外一个好处就是当你上传站点文件时,你不必再检查整个站点寻找冗余的样式表了。

  验证

  无论你是自己创建样式表还是编辑现有的样式表,验证可以确保你不会误用不标准的标签或错误的代码。DW MX本身不包含CSS验证程序,你可以使用W3C站点提供的验证服务。在DW MX内你可以验证HTML 或DHTML标签( File > Check Page > Validate Markup (for HTML) 或 File > Check Page > Validate as XML for XHTML.)。在开发基于CSS的站点时,DW MX提供了很多辅助工具。有了MW MX的帮助,再加上对CSS良好的理解,你就可以开发出能经受时间考验的站点了。

Dreamweaver快捷键大全(2)

处理层

  选择层         Ctrl Shift 点击

  选择并移动层      Shift Ctrl 拖动

  从选择中添加或删除层  Shift 点击层

  以象素为单位移动所选层 上方向键

  按靠齐增量移动所选层  Shift 方向键

  以象素为单位调整层大小 Ctrl 方向键

  以靠齐增量为单位调整层大小  Ctrl Shift 方向键

  将所选层与最后所选层的顶部/底部/左边/右边对齐  Ctrl 上/下/左/右方向键

  统一所选层宽度     Ctrl Shift [

  统一所选层高度     Ctrl Shift ]

  创建层时切换嵌套设置  Ctrl 拖动

  切换网格显示      Ctrl Shift Alt G

  靠齐到网格       Ctrl Alt G

  处理时间轴,图象

  添加对象到时间轴    Ctrl Alt Shift T

  添加关键帧       Shift F9

  删除关键帧       Delete

  改变图象源文件属性   Double 点击图象

  在外部编辑器中编辑图象 Ctrl 双击图象

管理超链接

  创建超链接(选定文本) Ctrl L

  删除超链接        Ctrl Shift L

  拖动并投放以从文档创建超链接 选取文本,图象或对象,然后Shift 拖动选择到[站点]窗口中的文件

  拖动并投放以使用[属性]检查器创建超链接 选取文本,图象或对象,然后拖动[属性]检查器的指向文件图表到[站点]窗口的文件

  在Dreamweaver打开链接文档  Ctrl 双击链接

  检查选定链接      Shift F8

  检查整个站点中的链接  Ctrl F8

  在浏览器中定位和预览

  在主浏览器中预览    F12

  在次要浏览器中预览   Ctrl F12

  在浏览器中调试

  在主浏览器中调试    Alt F12

  在次要浏览器中调试   Ctrl Alt F12

  站点管理和FTP

  创建新文件       Ctrl Shift N

  创建新文件夹      Ctrl Shift Alt N

  打开选定        Ctrl Shift Alt O

  从远程FTP站点下载选定文件或文件夹  Ctrl Shift D或将文件从[站点]窗口的[远程]栏拖动到[本地]栏

  将选定文件或文件夹上载到远程FTP站点  Ctrl Shift U或将文件从[站点]窗口的[本地]栏拖动到[远程]栏

  取出          Ctrl Shift Alt D

  存回          Ctrl Shift Alt U

  查看站点地图      Alt F8

  刷新远端站点      Alt F5

站点地图

  查看站点文件      F8

  刷新本地栏       Shift F5

  设为根         Ctrl Shift R

  链接到现存文件     Ctrl Shift K

  改变链接        Ctrl L

  删除链接        Delete

  显示/隐藏链接      Ctrl Shift Y

  显示页面标题      Ctrl Shift T

  重命名文件       F2

  放大站点地图      Ctrl (plus)

  缩小站点地图      Ctrl – (hyphen)

  播放插件

  播放插件        Ctrl Alt P

  停止插件        Ctrl Alt X

  播放所有插件      Ctrl Shift Alt P

  停止所有插件      Ctrl Shift Alt X

  处理模板

  创建新的可编辑区域   Ctrl Alt V

  插入对象

  任何对象(图象,Shockwave影片等)  文件从[资源管理器]或[站点]窗口拖动到[文档]窗口

  图象          Ctrl Alt I

  表格          Ctrl Alt T

  Flash影片        Ctrl Alt F

  Shockwave和Director影片  Ctrl Alt D

  命名锚记        Ctrl Alt A

历史纪录面板

  打开[历史纪录]面板   Shift F10

  开始/停止录制命令    Ctrl Shift X

  播放录制好的命令    Ctrl P

  打开和关闭面板

  对象          Ctrl F2

  属性          Ctrl F3

  站点文件        F5

  站点地图        Ctrl F5

  资源          F11

  CSS样式         Shift F11

  HTML样式        Ctrl F11

  行为          Shift F3

  历史纪录        Shift F10

  时间轴         Shift F9

  代码检查器       F10

  框架          Shift F2

  层           F2

  参考          Ctrl Shift F1

  显示/隐藏浮动面板    F4

  最小化所有窗口     Shift F4

  最大化所有窗口     Alt Shift F4

  获得帮助

  使用Dreamweaver[帮助主题]   F1

  参考           Shift F1

  Dreamweaver支持中心   Ctrl F1

Dreamweaver快捷键大全(1)

文件菜单

  新建文档        Ctrl N

  打开一个 HTML文件   Ctrl O或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中

  在框架中打开       Ctrl Shift O

  关闭           Ctrl W

  保存           Ctrl S

  另存为         Ctrl Shift S

  检查链接        Shift F8

  退出          Ctrl Q

  编辑菜单

  撤消          Ctrl Z

  重复          Ctrl Y 或 Ctrl Shift Z

  剪切          Ctrl X 或Shift Del

  拷贝          Ctrl C 或Ctrl Ins

  粘贴          Ctrl V 或Shift Ins

  清除          Delete

  全选          Ctrl A

  选择父标签       Ctrl Shift <

  选择子标签       Ctrl Shift >

  查找和替换       Ctrl F

  查找下一个       F3

  缩进代码         Ctrl Shift ]

  左缩进代码       Ctrl Shift [

  平衡大括弧       Ctrl ’

  启动外部编辑器     Ctrl E

   参数选择        Ctrl U

页面视图

  标准视图        Ctrl Shift F6

  布局视图        Ctrl F6

  工具条         Ctrl Shift T

  查看页面元素

  可视化助理       Ctrl Shift I

  标尺          Ctrl Alt R

  显示网格        Ctrl Alt G

  靠齐到网格       Ctrl Alt Shift G

  头内容         Ctrl Shift W

  页面属性        Ctrl Shift J

  代码编辑

  切换到设计视图     Ctrl Tab

  打开快速标签编辑器   Ctrl T

  选择父标签       Ctrl Shift <

  平衡大括弧       Ctrl ’

  全选          Ctrl A

  拷贝          Ctrl C

  查找和替换       Ctrl F

  查找下一个       F3

  替换          Ctrl H

  粘贴          Ctrl V

  剪切          Ctrl X

  重复          Ctrl Y

  撤消          Ctrl Z

  切换断点        Ctrl Alt B

  向上选择一行      Shift Up

  向下选择一行      Shift Down

  选择左边字符      Shift Left

  选择右边字符      Shift Right

  向上翻页        Page Up

  向下翻页        Page Down

  向上选择一页      Shift Page Up

  向下选择一页      Shift Page Down

  选择左边单词      Ctrl Shift Left

  选择右边单词      Ctrl Shift Right

  移到行首        Home

  移到行尾        End

  移动到代码顶部     Ctrl Home

  移动到代码尾部     Ctrl End

  向上选择到代码顶部   Ctrl Shift Home

  向下选择到代码顶部   Ctrl Shift End

编辑文本

  创建新段落       Enter

  插入换行

  Shift Enter

  插入不换行空格     Ctrl Shift Spacebar

  拷贝文本或对象到页面其他位置   Ctrl 拖动选取项目到新位置

  选取一个单词      双击

  将选定项目添加到库   Ctrl Shift B

  在设计视图和代码编辑器之间切换   Ctrl Tab

  打开和关闭[属性]检查器 Ctrl Shift J

  检查拼写         Shift F7

  格式化文本

  缩进          Ctrl ]

  左缩进         Ctrl [

  格式>无         Ctrl 0 (零)

  段落格式        Ctrl Shift P

  应用标题1到6到段落   Ctrl 1 到 6

  对齐>左对齐       Ctrl Shift Alt L

  对齐>居中        Ctrl Shift Alt C

  对齐>右对齐       Ctrl Shift Alt R

  加粗选定文本      Ctrl B

  倾斜选定文本      Ctrl I

  编辑样式表       Ctrl Shift E

查找和替换文本

  查找          Ctrl F

  查找下一个/再查找    F3

  替换          Ctrl H

  处理表格

  选择表格(光标在表格中) Ctrl A

  移动到下一单元格    Tab

  移动到上一单元格    Shift Tab

  插入行(在当前行之前) Ctrl M

  在表格末插入一行 在最后一个单元格    Tab

  删除当前行       Ctrl Shift M

  插入列         Ctrl Shift A

  删除列         Ctrl Shift – (连字符)

  合并单元格       Ctrl Alt M

  拆分单元格       Ctrl Alt S

  更新表格布局(在“快速表格编辑”模式中强制重绘)  Ctrl Spacebar

  处理框架

  选择框架        框架中Alt 点击

  选择下一框架或框架页  Alt 右方向键

  选择上一框架或框架页  Alt 左方向键

  选择父框架       Alt 上方向键

  选择子框架或框架页   Alt 下方向键

  添加新框架到框架页   Alt 从框架边界拖动

  使用推模式添加新框架到框架页  Alt Ctrl 从框架边界拖动

网页基本编辑——滚动列表

2959d9e24051b95c071d18a1ff72ef17

实例目标:

  滚动列表可以再有限的空间内为用户提供多项选项。滚动列表提供了一个滚动条,它使用户可以浏览很多项,并进行多重选择。
制作步骤:

1.新建一个网页文档,单击属性面板上页面属性按钮,打开页面属性对话框,单击背景图像文本框右侧的浏览按钮,为网页设置一副背景图像,完成后单击确定按钮。
2.执行插入|表单|表单命令,或者将快捷插入面板切换至表单面板,单击表单按钮,插入一个表单。
3.将光标放置到表单中需要插入滚动列表的位置。单击表单面板上的列表/菜单按钮,在光标处插入一个列表框。
4.选中插入的列表框,在属性面板上选择列表单选项。
5.在列表/菜单下方的文本里输入插入的列表/菜单唯一的名称。
6.在高度文本框中输入一个数值,制定该列表将显示的行(或项)叔,如果指定的数字小于该列表包含的选项数,则出现滚动条。如果允许用户选择该列表中的多个项,请选中下面的允许多选复选框。
7.单击列表值按钮,将光标放置于项目标签区域中后,输入要在该列表中显示的文本,在值区域中,输入在用户选择该项时将发送到服务器的数据。若要向选项列表中添加其他项,请单击+按钮,然后重复上面的步骤,若想删除项目,则可以单击—按钮,就是在列表值对话框中添加项目的情形。
8.设置完成后,单击确定按钮,创建的列表项目显示在初始化时选定列表框中。
9.滚动列表设置完成,保存文件,按下【F12】键浏览网页。

                                                                                                                                                                   来源:王磊  酷创意

网页的基本编辑——密码域

20090722160756_872

实例目标:

密码域是特殊类型的文本域。当用户在密码域中输入文本时,所输入的文本被替换为星号

或圆点以隐藏该文本,保护这些信息不被看到。

制作步骤:

1.新建一个网页文档,单击属性面板上的页面属性按钮,打开页面属性对话框,单击背景

图像文本框右侧的浏览按钮,为网页设置一幅背景图像,完成后,单击确定按钮。

2.执行插入|表单|表单命令,或者将快捷插入面板切换至表单面板,单击表单按钮,插入

一个表单。

3.将光标放置到表单中需要插入密码域位置。

4.单击表单面板上的文本字段I按钮,此时在光标处插入一个文本字段,然后在文本字段

前输入文本“密码:”。

5.选中插入的文本字段,打开属性面板,在属性面板上类型区域中,选中密码单选项。

6.按下【Enter】键换行,然后按照同样的方法插入一个文本字段,并在插入的文本字段

前输入文本“确认密码”,最后选中插入的文本字段,打开属性面板,在属性面板上类型

区域中,选中密码单选项。

7.保存文件,按下【F12】键浏览网页,在文本框中输入文本时,将以圆点代替。

                                                                                                                                                        来源:王磊 酷创意

在框架中载入其他的页面

dw0501161_9

实例目标:

如果需要在网页中载入另一网页,可以使用“转到URL”动作。现在我就介绍一个“转到URL”动作的使用办法。

制作步骤:

1.新建一个网页文档,将快捷插入面板切换至布局面板,单击框架按钮右侧的下来按钮,选择右侧框架,插入框架。
2.将光标防止到左侧框架中,执行修改|页面属性命令,打开页面属性对话框,为其设置一幅背景图像。
3.单击行为面板的+按钮,在打开的动作快捷菜单中选择“转到URL”命令,打开“转到URL”对话框,在“打开在”列表中选择框架RIGHTFRAME选项,在“URL”文本框中输入设置连接的URL地址,这里输入:www.wanglei.cc
4.设置完成后单击确定按钮,确认操作。在行为面板上选择“ONLOAD”事件。
5.保存页面,按下【F12】键预览效果。

                                                                                                                                                                     来源:王磊 酷创意

网页基本编辑——电子邮件链接

image143
实例目标:

电子邮件链接的设置方法与其他链接的设置方法很相同。其唯一的区别就是,电子邮件链接并不是移动到特定的站点或者网页文档,而是直接调用可发送邮件的程序。

制作步骤:
1.新建一个网页文档,单击属性面板上的页面属性按钮,打开页面属性对话框,单击背景图像文本框右侧的浏览按钮,为网页设置一幅背景图像。完成后单击确定按钮。
2.将光标放至需要插入邮件地址的位置。执行插入|电子邮件链接命令,打开电子邮件链接对话框。
3.在【文本】文本框中输入邮件链接要显示在页面上的文本,在E-mail文本框中输入要链接的邮箱地址。
4.单击确定按钮,邮件链接就加到了当前文档中。

那么,电子邮件链接到这一步,就设置完成了。

                                                                                                                                                   来源:王磊 酷创意

网页基本编辑—网站相册

19_010_a实例目标

在Dreamweaver中可创建网站相册。它能自动生成一个Web站点,该站点展示位于指定文件

夹中图像的“相册”。Dreamweaver使用fireworks来为该文件夹中的每个图像创建一个缩

影图和一个较大尺寸的图像。然后,Dreamweaver创建一个Web页,它包含所有缩略图以及

指向较大图像的链接。
若要创建“网站相册”,用户的系统上必须安装有Dreamweaver和fireworks的软件。

制作步骤

1.将要在相册上显示的所有图像放置在一个文件夹中。该文件夹不必位于站点中。另外,

确保图像文件包含以下任意一个扩展名:.gif,.jpg,jpeg,.png,.psd,.tif,或者.tiff。

带有无法识别的文件扩展名的图像不会包含在相册中。
2.在文档中执行命令|创建网站相册命令。
3.在相册标题文本框中输入一个标题。该标题将显示在包含缩略图的页面的顶部灰色矩形

中。如这里在相册标题文本框中输入“王磊 酷创意”。
4.如有需要,可以在副标信息和其他信息文本框中输入最多两行附加文本。该文本将直接

在标题下显示。这里在副标信息文本框中输入“王磊 fireworks CS4 互动视频教学”。
5.单击源文件文件夹文本框右侧浏览按钮,选择要在相册上显示的所有图像的文件夹。
6.单击目标文件夹文本框右侧的浏览按钮,选择(或创建)一个目标文件夹,用以放置所

有导出的图像和网页文件。
7.从缩略图大小弹出菜单中选择缩略图图像的大小。图像将按比例缩放,以创建适合具有

指定像素尺寸的方框的缩略图。若要在相应的缩略图下显示每个原始图像的文件名,请选

择显示文件名复选框。
8.在【列】文本框中输入显示缩略图的表的列数,这里输入5.(提示:创建网站相册时,

一定要设置缩略图图像的大小,而不是使用图像的原始尺寸,因为除GIF和JPEG之外的原

始文件格式可能无法在所有浏览器中正确显示。)
9.设置完成后,单击确定按钮以创建网站相册的图像与网页文件。(提示:fireworks启

动并创建缩略图和大尺寸图像,如果说包含的图像文件数目较多,这可能会需要几分钟的

时间。当完成处理后,Dreamweaver将再次处于活动状态并创建包含缩略图的网页。)
10.但完成这一步,出现对话框,单击确定按钮。
11.到了这一步,网站相册已经建好,按下【F12】键浏览网站相册,在首页中单击任意一

副图片,进入网站相册子页。
12.在网站相册子页中,单击“前一个”“下一个”按钮能在各个图像文件页面之间跳转

,那么这样就可以随意的浏览网页中的相片了。

                                                                                                                                    来源:王磊 酷创意

Dreamweaver图像占位符

 2008112800592352

实例目标:

当我们在制作网页时,在页面中某个位置需要插入一幅图片。但一时找不到自己喜欢的,

合适的图片,这时候就需要用到Dreamweaver的图像占位符功能了。插入图像占位符后,

我们就可以随时都可以将其替换为真正的图像。
图像占位符并不是在浏览器中显示的最终图像,它只是一种临时的,替补的图形。我们不

仅可以设置图像占位符的大小和颜色,还可以为图像占位符提供文本标签。

制作步骤:

1.将光标放置到页面中要插入图像占位符的位置,单击常用面板上的图像,按钮,在弹出

的下来菜单中选择图像占位符命令。
2.弹出图像占位符对话框,在名称文本框中,输入要作为图像占位符的标签文字显示的文

本,如“Banner”。名称必须以字母开头,并且只能包含字母和数字。不允许使用空格和

高位ASCII字符。
3.在宽度和高度文本框中,以像素为单位输入数字以设置图像大小,这里分别输入500与

100.
4.在颜色文本框中为图像占位符设置颜色,如我们选择蓝色(#66CC00)
5.在替代文本中,输入描述该图像的文本。完成后单击确定按钮,插入图像占位符。
6.在页面属性对话框中将网页的背景颜色设置为深红色(#993333),完成后单击确定按

钮。
7.在图像占位符下方输入文本。
8.通过图像占位符的属性面板可以将图像占位符替换为真正的图像,选中文档页面中的图

像占位符,其属性面板就会出现。
9.在源文件文本框中指定图像的源文件,对于占位符图像,此文本框为空。单击文本框右

侧的浏览按钮来为占位符图像选择替换图像。也可直接在文本框里输入源文件的路径。
10.在链接文本框中为图像添加超级链接,单击文本框右侧的浏览按钮来为图像选择要链

接的文件,也可直接在文本框里输入连接文件的路径。
11.设置完成之后,图像占位符就被替换为真正的图像来,保持文件,按下【F12】键预览

就可以了。

                                                                                                                          来源:王磊 酷创意