Dreamweaver入门2

教你Dreamweaver中框架的使用技巧在Dreamweaver中应用框架是非常容易的事情，下面我们就来看看具体的应用。增加新框架要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。其操作如下：（1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。（2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。删除框架若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。改变框架属性在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下：（1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。（2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。（3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。（4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。（5）单击“框架网页”按钮，则弹出“网页属性”对话框。（6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。（7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置。Dreamweaver进阶:标签选择器的妙用Dreamweaver作为优秀的可视化网页编辑工具，为我们提供了一整套可视化网页制作平台，让你的网站开发效率得到极大提升。今天我们来讲讲“标签选择器”的应用，通过Dreamweaver内置的强大标签库，你会发现自己将远离枯燥的代码书写了。“标签选择器”带来的最直接好处，就是我们不必熟记那么多纯代码的参数定义了，别人需要手工大量书写代码才能实现的效果，我们通过它就能轻松完成。插入iframeiframe框架，虽然在浏览器兼容性上谈不上非常友好，但它的应用的确广泛。我们可以将它嵌在网页中的任意部分，这样对于提高网页排版的灵活性还是非常有好处。当然，iframe相关代码的书写还是令许多人头痛的，今天我们就通过Dreamweaver的标签选择器来插入一个iframe框架，不需要你手工写一句代码的方法。点击菜单“插入”→“标签”，进入“标签选择器”。鼠标在左侧标签分类列表中依次选择“标记语言标签”→“HTML标签”→“页元素”，在右侧标签列表中选择“iframe”，点击“插入”按钮完成，如图1。图1系统会自动转入“标签编辑器”，接下来，忘记烦人的手工书写代码吧，你要做的就是根据提示填写所需的iframe参数。如果你对于某些选项还不是非常熟悉，可以点击对话框下的“标签信息”，软件内容详尽的标签帮助应该可以给你权威的解释，如图2。图2熟练使用“标签编辑器”的好处是显而易见到，只要是标准的HTML标签都能找到，虽然程序没有做到所有的插入标签都采用可视化操作，不过我们可以通过下面介绍的“标签检查器”来弥补。快速定义水平线Dreamweaver还提供了一个强大的标签参数设置功能——“标签检查器”面板。下面我们就来实际体会一下“标签检查器”的用处，我们来定义水平线的值。在Dreamweaver中插入水平线是非常容易的，不过软件提供的默认属性设置实在有限，连水平线的颜色都不能自由设置，难道还需要我们手工添加代码吗？当然不必这么麻烦，鼠标在编辑区选择水平线，打开“标签检查器”面板（快捷键F9调用），切换到“属性”选项卡。“属性”选项卡提供的资料类似于“属性面板”，不过可比它强大了许多。软件提供了这样一些基本定义：“常规”、“浏览器特定的”、“CSS/辅助功能”、“未分类”。我们选择不同的网页标签，“属性”中的参数是完全不同的，都是针对每一个标签的定义参数。本例，选择了一个水平线，我们可以在“属性”的“浏览器特定的”下找到color参数，这不是颜色设置吗？呵呵，赶紧通过内置的颜色选择器为水平线设置所需颜色吧，如图3。图3我们上面说过了“标签检查器”可以作为“标签编辑器”的有益补充，例如我们制作滚动字幕经常用到的“marquee”标签，我们使用“标签编辑器”插入“marquee”标签，系统并不会如“iframe”标签那样提供可视化的参数设置界面，仅仅在代码中插入简单的代码“”，呵呵，令人抓狂吧。其实不必担心，现在“标签检查器”就派上用场了，选中“marquee”标签后，“标签检查器”会提供详细的设置参数供选择，如图4。图4用Dreamweaver批量做web网页做网站，麻烦在更新，特别是大规模更新，工作量非常大。真不知那些创意不断而又勤奋的“站长”，隔三岔五将网站来个“大换血”，是怎么忙过来的。告诉你这个秘密吧，他们很多是在“批发”网页，并且你的机器中也有这样的“批发站”呢!这个好东东就是——模板。常见的网页制作工具：FrontPage、DreamWeaver中都有这项功能。如用DreamWeaver3.0制作网站时，使用模板就能减少大量的重复劳动。一、建立模板1、创建模板页面最简单的办法是将一个网页另存为模板文件，通过执行命令：File→SaveasTemplate，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。当然，也可以新建一个模板：Window→Templates，会出现的Templates面板，单击右下角的NewTemplate按钮，输入文件名，就建立了一个空模板;再单击OpenTemplate按钮打开该模板，保存后自动存放于网站模板文件夹Templates中。新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布置这些元素。准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。2、设定可编辑区域设定模板可编辑区域，一般来说有两种方法。新建可编辑区域：选择命令：Modify→Template→NewEditableRegion。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标记某一区域为可编辑区域：选择命令：Modify→Template→MarkSelectinasEditableRegion。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。取消可编辑状态：选择命令：Modify→Template→UnmarkEditableRegion。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域名称，确认即可。举例：在大片空白区中随便单击一下，执行Modify→Template→NewEditableRegion命令，在弹出对话框中输入名称：Main;选中左下角本页说明下面的文字，执行Modify→Template→MarkSelectinasEditableRegion命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。二、使用模板1、根据模板新建页面命令：File→NewFromTemplate。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。2、对一个已经有内容的页面应用模板命令：Modify→Template→ApplyTemplatetoPage。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域(ChooseEditableRegionforOrphanedContent)。要是不想保留则可以选择“(none)”。举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify→Template→ApplyTemplatetoPage命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。3、更新模板以全面更新站点基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。另外一种方法是执行Modify→Template→UpdatePages命令。从UpdatePages对话框中选择一个站点或站点的某一种模板(同一站点中可以使用多个模板)，单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。非常方便!举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即可。注意：新建和使用模板前需定义站点。方法是，执行命令：Site→DefineSites;指定站点名称和本地根目录(LocalRoot)。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件;并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而相应变化。Dreamweaver网页设计技巧1、灵活运用样式熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择CustonStyle来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用CustonStyle来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。2、活用FormatTable命令在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“FormatTable”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“FormatTable”命令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply”键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。3、同时链接到两个网页我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“GoToURL”JavaScript行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“GoToURL”。我们会注意到Dreamweaver会在“GoToURL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。4、不给文件起中文名称大家在制作好了网页后