请选择段落导航
1.Dreamweaver网页制作技巧全面接触(1)
2.Dreamweaver网页制作技巧全面接触(2)
Dreamweaver网页制作技巧全面接触(1) 很多朋友使用Dreamweaver一段时间后,开始热衷于寻找各式各样的插件,追求各种各样的特效,而对于Dreamweaver中的基本功能反而不去深入研究,其实在Dreamweaver中有很多有用的技巧,如果你多加运用,不仅能提高效率,而且可以实现很多实用的效果。今天我把工作中常用的一些技巧介绍给大家,希望对大家能有些用途,同时也希望能唤起大家深入研究的愿望。我准备根据工作中的不同阶段分别介绍各种技巧。
一、 规划阶段——站点窗口的技巧
Dreamweavr的站点窗口常常被很多朋友忽视,其实利用站点窗口我们可以方便的完成很多任务。下面我介绍几个实用的技巧。
1、快速添加站点导航。
使用站点窗口中的网站地图可以快速制作网站雏形,并可以方便的在个页面之间加入导航链接。首先按如下图标
打开站点地图窗口;选中index.htm文件;点击并拖动站点导航(Site Navigation)窗口中index.htm文件右上角的小圆圈,将它拖动到左边文件窗口中的某一个文件上,如下图所示;
Dreamweaver会自动将mydesign.htm的链接加入到index.htm文件中,同样执行此操作并分别指向其他相关链接文件后,导航窗口如下图:
此时打开index.htm文件,可以看到相应的连接文字和链接都已经添加好了,我们可以根据需要将他们合理的修改和组织。如图:
2、快速修改文件Title。很多时候我们新建的文件往往忽视设定文件Title的内容,事后需要修改时,常常得打开每一个文件分别修改。其实这个工作可以在站点窗口中方便的完成。打开站点窗口View菜单下的Show Page Titles,可以使站点窗口中的文件显示出文件头,而不是原先的文件名。默认的文件头是Untitled Document我们可以分别两次点击,改变默认的文字为我们需要的文件头。如图:
3、快速生成站点地图。有时我们需要制作一个包含当前站点所有文件结构的站点地图而找不到合适的方法。Dreamweaver本身就带有这个功能,方法如下:打开File—Save Site Map命令,在弹出对话框中输入保存的文件名,Dreamweaver会在当前站点的根目录下自动生成一个.bmp或.png格式的站点图片。
二、 页面布局阶段的技巧
Dreamweaver不仅仅是一个良好的页面制作工具,同时他还可以进行精确的页面排版和布局,这一部分我们介绍几个页面布局方面的技巧。
1、打开辅助表格。搞过设计的朋友都特别希望能精确的定位网页元素,他们喜欢每个元素都能按自己的愿望精确的定位。Dreamweaver自带的Grid功能可以有助于这种希望的实现。执行命令View—Edit Grid打开坐标辅助,可以选择网格状或者是点状显示,同时打开Snap to Grid,以后插入或添加新的元素时,都会按你的设定精确定位。
2、利用表格排版页面技巧。合理利用Dreamweaver中的表格功能,可以方便的达到美化页面的目的,下面我介绍几个技巧。
1)创建1px边框。有些朋友抱怨Dreamweaver无法做出单像素的表格边框,其实仔细利用表格的属性面板即可做出这种单像素表格。首先使用Object面板插入一个表格,定义表格宽、高及行数和列数。此时Dreamweaver中插入表格的默认CellPad和CellSpace、Border都为0。在属性面板中定义表格的Border为0,CellPad为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);CellSpace为1(此项使得单元格之间保持1个项素的间距)。设置表格的背景色为深色(如#999999),设置单元格的背景色为浅色(如#FFFFFF)。在浏览其中观察效果即可。
2)导入数据表格。有时我们需要将一些在Execel文件中创建的表格导入Dreamweaver中,我们可以下将原来的Execel文件另存为带制表符分隔的.txt文本文件。在Dreamweaver中执行Insert—Tabular Date打开如下窗口:
添好各个参数后即可将其中的数据导入Dreamweaver的一个表格中。
3)格式化表格。如果你对重复的设定各个单元格的参数感到厌烦的话,使用Format Table命令可以帮你快速格式化表格,此命令在Command菜单下,此命令内带多种表格配色方案,你可以选择一种,Dreamweaver会自动将色彩方案应用到你选定的表格上。如图:
4、表格和层互转。有的朋友喜欢自由自在的安排他的页面内容,总不喜欢表格的工作方式。其实你完全可以利用灵活的层来安排你的页面内容,当你觉得满意时再将它转换为表格。选中你需要转换的层,执行命令Modify—Convert—Layers to Table。如图:
5、同时更新多个框架页面。有是我们需要在点击一个链接时同时更新另外的两个或多个框架页面内容,这可以通过以下步骤使用Dreamweaver的行为来实现。
1) 选择链接的文字或图片。
2) 打开行为面板(Behaviors),点击加号添加Go to URL行为。
3) 在Go to URL对话框中显示了当前已有的所有框架窗口,我们分别选定一个窗口名称,可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*”号,表示此框架窗口已设定了URL。
4) 完成后点确定即可,我们点此链接,会同时更新多个窗口的内容。
三、 内容篇
如何更快更方便得对内容进行组织,是每个朋友都想了解的,下面这几个技巧也许你知道,也许不知道,但重要的是通过不断的运用,你会发现它的优越性的。
1、快速标签编辑。对于熟悉手写代码的朋友来说,经常需要切换到代码窗口手工添加一些代码。其实利用Dreamweaver的Quick Tag Editor可以快速插入各种HTML标签,一个是点击属性面板的 图标插入,另一种快捷方式是Ctrl+T,这两种方法都会打开快速标签编辑,可以直接从列表中选择需要的源代码标签,如下图:
2、快速添加图片边框。对于插入网页中的许多图片都是没有边框的,有时我们需对图片添加边框,我们不需要打开图像处理软件即可实现。一种方法是选中图片后直接在属性面板定义Border为1px,这会给图片添加1像素的边框;另一种方法是定义一个样式,我们可以将img标签直接定义为四边都为1px的样式,则网页中所有插入的图片都会带有相同的边框。如图:
3、使用拖动方式增加链接。Dreamweaver支持从文档内直接托动链接到站点内的其他文件,我们可以将站点窗口和文档窗口并排放置,如图:
然后选中文档中需要链接的文字,打开属性面版,将链接地址栏后的Point to File指向站点窗口中的目标文件即可,如下图:
4、如何加入背景声音。在Dreamweaver中对于一些多媒体声音文件的插入,很多朋友都感到有些困惑,其实很简单,点击Dreamweaver 工作窗口最左下角的 标签,打开Behavior面板,在弹出的behavior窗口点+号,选择Play Sound,选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识,在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了,如图: