当前位置:首页 >> IT/计算机 >>

dreamweaver8.0入门图文教程1


※dreamweaver8.0 入门图文教程: Dreamweaver 8 操作环境

第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一 起来了解 Dreamweaver8 的操作环境,完成站点的创建。 一、Dreamweaver8 的操作环境 在首次启动 Dreamweaver8 时会出现一个“工作区设置”对话框,在对话框左侧是 Dreamweaver8 的设计视图,右侧是 Dreamweave 8 的代码视图。Dreamweaver8 设计视图布局 提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。 在 Dreamweave 8 中首先将显示一个起始页,可以勾选这个窗口下面的“不在显示此对 话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3 个方便实用的项目,建议大家保留。 新建或打开一个文档,进入 Dreamweaver8 的标准工作界面。Dreamweaver8 的标准工作 界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、 属性面板和浮动面板组。

1、标题显示栏 启动 Macromedia Dreamweave 8 后,标题栏将显示文字 Macromedia Dreamweave 8.0, 新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。

2、菜单栏 Dreamweave 8 的菜单共有 10 个,即文件、编辑、视图、插入、修改、文本、命令、 站点、窗口和帮助。其中,编辑菜单里提供了对 Dreamweaver 菜单中[首选参数]的访问。

文件:用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。 编辑:用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。 查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。 插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。 修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其 对象等。 文本:用来对文本操作,例如设置文本格式等。 命令:所有的附加命令项 站点:用来创建和管理站点 窗口:用来显示和隐藏控制面板以及切换文档窗口 帮助:联机帮助功能。例如按下 F1 键,就会打开电子帮助文本 3、插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组 其实就是图像化了的插入指令,通过一个个的按钮,可以很容易的加入图像、声音、多媒体 动画、表格。图层、框架、表单、Flash 和 ActiveX 等网页元素。

4、文档工具栏 “文档”工具栏包含各种按钮,它们提供各种“文档”窗口视图(如“设计”视图和 “代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。

5、标准工具栏 “标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮:“新建”、 “打开”、 “保存”、 “保存全部”、 “剪切”、 “复制”、 “粘贴”、 “撤消”和“重做”。

6、文档窗口 当我们打开或创建一个项目,进入文档窗口,我们可以在文档区域中进行输入文字、插 入表格和编辑图片等操作。 “文档”窗口显示当前文档。 可以选择下列任一视图: “设计”视图是一个用于可视化 页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中,Dreamweaver 显示文 档的完全可编辑的可视化表示形式, 类似于在浏览器中查看页面时看到的内容。 “代码”视 图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手 工编码环境。 “代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图 和“设计”视图。 7、状态栏 “文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。 标签选择器显示环 绕当前选定内容的标签的层次结构。 单击该层次结构中的任何标签以选择该标签及其全部内 容。单击 <body> 可以选择文档的整个正文。

8、属性面板 属性面板并不是将所有的属性加载在面板上, 而是根据我们选择的对象来动态显示对象 的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。 例如, 当前选择了一幅 图像,那么属性面板上就出现该图像的相关属性;如果选择了表格,那么属性面板会相应的 变化成表格的相关属性。

9、浮动面板 其它面板可以同称为浮动面板,这些面板都浮动于编辑窗口之外。在初次使用 Dreamweave 8 的时候,这些面板根据功能被分成了若干组。在窗口菜单中,选择不同的命 令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其它面 板组。 终于把 Dreamweave 8 的基本工作界面介绍完了,你是否已经了解它?从现在开始,让 我们一起来建造一座小房子。

※dreamweaver8.0 入门图文教程: Dreamweaver 8 本地站点的搭建与管理

要制作一个能够被大家浏览的网站, 首先需要在本地磁盘上制作这个网站, 然后把这个 网站传到互联网的 web 服务器上。放置在本地磁盘上的网站被称为本地站点,位于互联网 web 服务器里的网站被称为远程站点。Dreamweaver 8 提供了对本地站点和远程站点强大的 管理功能。 1、规划站点结构 网站是多个网页的集合,其包括一个首页和若干个分页,这种集合不是简单的集合。 为了达到最佳效果,在创建任何 Web 站点页面之前,要对站点的结构进行设计和规划。决 定要创建多少页,每页上显示什么内容,页面布局的外观以及各页是如何互相连接起来的。 我们可以通过把文件分门别类的放置在各自的文件夹里, 使网站的结构清晰明了, 便于 管理和查找。 2、创建站点 在 Dreamweave 8 中可以有效的建立并管理多个站点。搭建站点可以有两种方法,一是 利用向导完成,二是利用高级设定来完成。 在搭建站点前,我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。 (1)选择菜单栏——【站点】——【管理站点】,出现“管理站点”对话框。点击“新 建”按钮,选择弹出菜单中的“站点”项。

在打开的窗口上方有“基本”和“高级”两个标签, 可以在站点向导和高级设置之 间切换。下面选择“基本”标签。

在文本框中,输入一个站点名字以在 Dreamweaver8.0 中标识该站点。这个名字可 以是任何你需要的名字。单击“下一步”。出现向导的下一个界面,询问是否要使用服务器 技术。

我们现在建立的是一个静态页面,所以选择“否”。

点下一步,在文档框设置本地站点文件夹的地址。

点下一步,进入站点定义,我们将在站点建设完成后在与 FTP 链接,这里选择 “无”。

单击“完成”按钮,结束“站点定义“对话框的设置。

单击“完成”按钮,文件面板显示出刚才建立的站点。

到此,我们完成了站点的创建。 3、搭建站点结构 站点是文件与文件夹的集合,下面我们根据前面对 xmweb 网站的设计,来新建 xmweb 站点要设置的文件夹和文件。 新建文件夹, 在文件面板的站点跟目录下单击鼠标右键, 从弹出菜单中选择“新建文件 夹”项,然后给文件夹命名。这里我们创建新建 8 个文件夹,分别命名为:img、med、swf、 txt、css、js、moan 和 fy。

创建页面, 在文件面板的站点跟目录下单击鼠标右键, 从弹出菜单中选择“新建文 件”项,然后给文件命名。首先要添加首页,我们把首页命名为 index.html,再分别新建 01.html、02.html、03.html、04.html 和 05.html。

4、文件与文件夹的管理 对建立的文件和文件夹,可以进行移动、复制、重命名和删除等基本的管理操作。单击 鼠标左键选中需要管理的文件或文件夹,然后单击鼠标右键,再弹出菜单中选“编辑”项, 即可进行相关操作。

※dreamweaver8.0 入门图文教程: Dreamweaver 8 页面的总体设置
我们已经描绘了小屋的蓝图, 从现在开始, 为我们的小屋添砖加瓦吧。 打开 index.html, 制作一个图文混排的简单页面。 一、页面的总体设置 1、 设置页面的头内容: 头内容再浏览器中是不可见的, 但是却携带着网页的重要信息, 如关键字、描述文字等,还可以实现一些非常重要的功能,如自动刷新功能。 鼠标左键单击插入工具栏最左边按钮旁的下拉小三角, 在弹出菜单中选择“HTML”项, 出现“文件头”按钮,点开下拉菜单,就可以进行头内容的设置了。

设置标题,网页标题可以是中文、英文或符号,显示在浏览器的标题栏中。我们直 接在设计窗口上方的标题栏内输入或更改,就可以完成网页标题的编辑了。 插入关键字, 关键字用来协助网络上的搜索引擎寻找网页。 要想让更多的人看见你的网 站,这项要好好填哦^_^单击上图所示的“关键字”项,弹出“关键字”对话框,填入关键 字即可。

插入 META,META 标记用于记录当前网页的相关信息,如编码,作者,版权等,也 可以用来给服务器提供信息。 单击上图所示的“META”项, 弹出“META”对话框, 在“属性” 栏选择“名称”属性,在“值”文本框中输入相应的值,可以定义相应的信息。 author—作者信息,copyright—版权声明,generator—网页编辑器。

2、设置页面属性 单击页面下方的“属性栏”中的“页面属性”按钮,打开的“页面属性”对话框。

设置外观, “外观”是设置页面的一些基本属性。 我们可以定义页面中的默认文本 字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为 0。

设置链接,“链接”选项内是一些与页面的链接效果有关的设置。 “链接颜色”定义超链接文本默认状态下的字体颜色; “变换图像链接”定义鼠标放在链接上时文本的颜色; “已访问链接”定义访问过的链接的颜色; “活动链接”定义活动链接的颜色; “下划线样式”可以定义链接的下划线样式。

设置标题,“标题”用来设置标题字体的一些属性。如下图所示,在左侧“分类” 列表中选择“标题”, 这里的标题指的并不是页面的标题内容, 而是可以应用在具体文章中 各级不同标题上的一种标题字体样式。 我们可以定义“标题字体”及 6 种预定义的标题字体 样式,包括粗体、斜体、大小和颜色。按自己的喜欢的风格设置吧。

※dreamweaver8.0 入门图文教程: Dreamweaver 8 文本的插入与编辑
1、 插入文本 要向 Dreamweaver 文档添加文本,可以直接在 Dreamweaver“文档”窗口中键入文 本,也可以剪切并粘贴,还可以从 word 文档导入文本。 用鼠标在文档编辑窗口的空白区域点一下,窗口中出现闪动的光标,提示文字的起始 位置,将 01.rar 中的文字素材复制/粘贴进来。 2、编辑文本格式 网页的文本分为段落和标题两种格式。 在文档编辑窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段 落”把选中的文本设置成段落格式。 “标题 1”到“标题 6”分别表示各级标题, 应用于网页的标题部分。 对应的字体由大 到小,同时文字全部加粗。 另外,在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。 3、设置字体组合 Dreamweaver8 预设读的可供选择的字体组合只有 6 项英文字体组合, 要想使用中文字 体,必须重新编辑新的字体组合,在“字体”后的下拉列表框中选择“编辑字体列表”, 弹出“编辑字体列表”对话框:

4、文字的其它设置 文本换行, Enter 键换行的行距较大 按 (在代码区生成<p></p>标签) 按 Enter+Shift , 键换行的行间距较小(在代码区生成<br>标签)。 文本空格, 我们选择编辑/首选参数, 在弹出得对话框中左侧的分类列表中选择“常规”

项, 然后在右边选“允许多个连续的空格”项, 我们就可以直接按“空格”键给文本添加空 格了。

特殊字符,要向网页中插入特殊字符,需要在快捷工具栏选择“文本”,切换到字 符插入栏,单击文本插入栏的最后一个按钮,可以向网页中插入相应的特殊符号。

插入列表,列表分为两种,有序列表和无序列表,无序列表没有顺序,每一项前边 都以同样的符号显示, 有序列表前边的每一项有序号引导。 在文档编辑窗口中选中需要设置 的文本,在属性面板中单击 列表。 ,则选中的文本被设置成无序列表,单击 则被设置成有序

插入水平线,水平线起到分隔文本的排版作用,选择快捷工具栏的“HTML”项,单击 HTML 栏的第一个按钮 ,即可向网页中插入水平线。选中插入的这条水平线,可以在属性

面板对它的属性进行设置。 插入时间,在文档编辑窗口中,将鼠标光标移动到要插入日期的位置,单击常用插入栏 的“日期”按钮,在弹出的“插入日期”对话框中选择相应的格式即可。

※dreamweaver8.0 入门图文教程: Dreamweaver 8 插入图像
目前互联网上支持的图像格式主要有 GIF、JPEG 和 PNG。其中使用最为广泛的是 GIF 和 JPEG。 1、插入图像 在制作网页时,先构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然 后存放在站点根目录下的 img(或 image)文件夹里。 插图图像时, 将光标放置在文档窗口需要插入图像的位置, 然后鼠标单击常用插入栏的 “图像”按钮。

弹出的“选择图像源文件”对话框,选择 img/001.jpg,单击“确定”按钮就把图 像 001.jpg 插入到了网页中。

注意:如果我们在插入图片的时候,没有将图片保存在站点根目录下,会弹出下图 所示的对话框,提醒我们要把图片保存在站点内部,这时单击“是”按钮,

然后选择本地站点的路径将图片保存,图像也可以被插入到网页中。 (此时如果选 择“否”,那么图片不在站点文件夹内,站点发布,或者更换站点文件夹位置后,图片将 不能显示)

2、设置图像属性 选中图像后,在属性面板中显示出了图像的属性,如下如所示。

在属性面板的左上角,显示当前图像的缩略图,同时显示图像的大小。在缩略图右 侧有一个文本框,在其中可以输入图像标记的名称。 图像的大小是可以改变的, 但是在 DW 里更改是极不好的习惯, 如果我们的电脑安装了 FW 软件,单击属性面板的“编辑”旁边的 ,即可启动 FW 对图像进行缩放等处理。当图

像的大小改变时, 属性栏中“宽”和“高”的数值会以粗体显示, 并在旁边出现一个弧形箭 头,单击它可以恢复图像的原始大小。 “水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距 离。 “边框”文本框时用来设置图像边框的宽度,默认的边框宽度为 0。 “替代”文本框用来设置图像的替代文本,可以输入一段文字,当图像无法显示时, 将显示这段文字。

单击属性面板中的

对齐按钮,可以分别将图像设置成浏览器居左对齐、居中

对齐、居右对齐。 在属性面板中, “对齐”下拉列表框时设置图像与文本的相互对齐方式, 共有 10 个选 项。通过它我们可以将文字对齐到图像的上端、下端、左边和右边等,从而可以灵活的实现 文字与图片的混排效果。 3、插入其它图像元素 在我们单击常用插入栏的“图像”按钮时,可以看到,除了第 1 项“图像”外,还有 “图像占位符”、“鼠标经过图像”、“导航条”等项目。 插入图像占位符,在我们布局页面时,如果要在网页中插入一张图片,可以先不制作 图片,而是使用占位符来代替图片位置。单击下拉列表中的“图像占位符”,打开“图像占 位符”对话框。按设计需要设置图片的宽度和高度,输入呆插入图像的名称,即可。

鼠标经过图像,鼠标经过图像实际上由两个图像组成,主图像(当首次载入页时显 示的图像)和次图像(当鼠标指针移过主图像时显示的图像)。这两张图片要大小相等,如 果不相等,DW 自动调整次图片的大小跟主图像大小一致。

图片与文本一样,是网页中最常用到的内容,其变化相对较少,要想排出精致美 观的网页,下一节课的内容可是必不可少的哦,继续努力吧^_^

※※dreamweaver8.0 入门图文教程: Dreamweaver 8 插入并编辑表格
表格是网页设计制作不可缺少的元素,它以简洁明了和高效快捷的方式将图片、文本、 数据和表单的元素有序的显示在页面上, 让我们可以设计出漂亮的页面, 使用表格排版的页 面在不同平台、 不同分辨率的浏览器里都能保持其原有的布局, 而在不同的浏览器平台有较 好的兼容性,所以表格是网页中最常用的排版方式之一。 一、插入并编辑表格 1、插入表格 在文档窗口中, 将光标放在需要创建表格的位置, 单击“常用”快捷栏中的表格按钮弹 出的“表格”对话框,指定表格的属性后,在文档窗口中插入设置的表格。

“行数”文本框用来设置表格的行数。 “列数”文本框用来设置表格的列数。 “表格宽度”文本框用来设置表格的宽度, 可以填入数值, 紧随其后的下拉列表框用来 设置宽度的单位,有两个选项——百分比和像素。当宽度的单位选择百分比时,表格的宽度 会随浏览器窗口的大小而改变。 “单元格边距”文本框用来设置单元格的内部空白的大小。 “单元格间距”文本框用来设置单元格与单元格之间的距离。 “边框粗细”用来设置表格的边框的宽度。 “页眉”定义页眉样式,可以在四种样式中选择一种。 “标题” 定义表格的标题。

“对其标题”定义表格标题的对齐方式。 “摘要” 可以在这里对表格进行注释。

2、选择单元格对象 对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。 选择整个表格的方法是把鼠标放在表格边框的任意处,当出现 这样的标志时单击即

可选中整个表格,或在表格内任意处单击,然后在状态栏选中<table>标签即可;或在单元 格任意处单击,点鼠标右键在弹出菜单菜单中选择“表格——选择表格” 要选中某一单元格,按住 Ctrl 键,鼠标在需要选中的单元格单击即可;或者,选中状 态栏中的<td>标签。 要选中连续的单元格, 按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的 方向拖动。 要选中不连续的几个单元格,可以按住 Ctrl 键,单击要选择的所有单元格即可。 要选择某一行或某一列, 将光标移动到行左侧或列上方, 鼠标指针变为向右或向下的箭 头图标时,单击即可。 3、设置表格属性 选中一个表格后,可以通过属性面板更改表格属性。

“填充”文本框用来设置单元格边距,“间距”文本框用来设置单元格间距。 “对齐”下拉列表框用来设置表格的对齐方式,默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本框用来设置表格的背景颜色。 “边框颜色”用来设置表格边框的颜色。 在“背景图像”文本框填入表格背景图像的路径,可以给表格添加背景图像。也可以

如下图所示给文本框加上链接路径。还可以单击文本框后的“浏览”按钮,查找图像文件。 在“选择图像源”对话框中定位并选择要设置为背景的图片,单击“确认”按钮即可。

4、单元格属性 把光标移动到某个单元格内,可以利用单元格属性面板对这个单元格的属性进行设置。

“水平”文本框用来设置单元格内元素的水平排版方式,是居左、居右或是居中。 “垂直”文本框用来设置单元格内的垂直排版方式, 是顶端对齐、 底端对齐或是居中对 齐。 “高”、“宽”文本框用来设置单元格的宽度和高度。 “不换行”复选框可以防止单元格中较长的文本自动换行。 “标题”复选框使选择的单元格成为标题单元格, 单元格内的文字自动以标题格式显示 出来。 “背景”文本框用来设置单元格的背景图像。 “背景颜色”文本框用来设置表格的背景颜色。 “边框”文本框用来色设置但愿格边框的颜色。 5、表格的行和列 选中要插入行或列的单元格,单击鼠标右键,在弹出菜单中选择“插入行”或“插入 列”或“插入行或列”命令。

如果选择了“插入行”命令,在选择行的上方就插入了一个空白行,如果选择了 “插入列”命令,就在选择列的左侧插入了一列空白列。

如果选择了“插入行或列”命令, 会弹出“插入行或列”对话框, 可以设置插入行还是 列、插入的数量,以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。

要删除行或列, 选择要删除的行或列, 单击鼠标右键, 在弹出菜单中选择“删除行” 或“删除列”命令即可。 6、拆分与合并单元格 拆分单元格时,将光标放在待拆分的单元格内,单击属性面板上的“拆分”按钮,在弹 出对话框中,按需要设置即可。

合并单元格时,选中要合并的单元格,单击属性面板中的“合并”按钮即可。

※※dreamweaver8.0 入门图文教 程:Dreamweaver 8 嵌套表格
表格之中还有表格即嵌套表格。 网页的排版有时会很复杂, 在外部需要一个表格来控制总体布局, 如果内部排版的细节 也通过总表格来实现,容易引起行高列宽等的冲突,给表格的制作带来困难。其次,浏览器 在解析网页的时候,是将整个网页的结构下载完毕之后才显示表格,如果不使用嵌套,表格 非常复杂,浏览者要等待很长时间才能看到网页内容。 引入嵌套表格,由总表格负责整体排版,由嵌套的表格负责各个子栏目的排版,并插入 到总表格的相应位置中,各司其职,互不冲突。 另外,通过嵌套表格,利用表格的背景图像、边框、单元格间距和单元格边距等属性可 以得到漂亮的边框效果,制作出精美的音画贴图网页。 创建嵌套表格的操作方法,先插入总表格,然后将光标置于要插入嵌套表格的地方,继 续插入表格即可。 1、将光标放置在文档窗口要插入表格的位置,单击常用插入栏“表格”按钮,插入一 个 1 行 1 列的表格一,宽度 500 像素,高度 100%,边框为 0,单元格间距为 0,单元格边 距为 12 像素。背景图像选择 beij/003.gif。 2、将光标放置在表格一内,插入表格二,1 行 1 列,宽度 100%,高度 100%,边框为 0,单元格间距为 0,单元格边距为 12 像素。背景图像选择 beij/002.gif。 3、将光标放置在表格二内,插入表格二,1 行 1 列,宽度 100%,高度 100%,单元格 间距和单元格边距都为 8 像素, 边框为 10, 边框颜色为#FEE4ED。 背景图像选择 beij/005.gif。 4、将光标放置在表格三内,选择单元格的背景图像为 beij/006.gif。添加文字“恭贺 新禧”,字号 68px,字体为隶书,颜色为#A51008。

三、表格的格式化 做好的表格可以使用 DW 提供的预设外观, 可以提高制作效率, 保持表格外观的同一性, 同时样式提供的色彩搭配也比较美观。 插入一个 5 行 6 列的表格,表格的宽为 500 像素,高为 300 像素,边框、单元格间距和 边距全为 0 。

选择表格,居中对齐表格后,执行命令/格式化表格,弹出“格式化表格”对话框,我 们选择 AltRows red 格式,单击“确定”表格的样式就设定好了。

m 这里,还可以自己设定相应的参数值。

dreamweaver8.0 入门图文教程:插入 Flash 动画
通过前面三课的学习,相信你已经能制作出一个简单的网页了,很有成就感吧^_^ 不过,一个优秀的网站应该不仅仅是由文字和图片组成的,而是动态的、多媒体。为了 增强网页的表现力,丰富文档的显示效果,我们可以向其 Flash 动画、Java 小程序、音频 播放插件等多媒体内容。 一、插入 Flash 动画 1、插入 Flash 为了合理的安排这一课的页面元素, 在插入 Flash 动画之前, 让我们先来复习一下表格 布局吧^_^ 打开 03.html,设置页面属性,在弹出的“页面属性”对话框中,“外观”项设置字体 为“宋体”,字号为 16px,文本颜色为#F282A8,背景图像为 img/008.JPG,上边距为 50px、 下、左、右的边距都为 0。 “链接”项选择始终无下划线,链接颜色为#F282A8,已访问链 接为#F5E458。 现在我们开始布局~^_^~ (1)插入一个 1 行 1 列的表格(表格 1),表格的宽度为 726px,边框粗细为 0,单元 格边距为 0、单元格间距为 1,背景颜色为#892321,将表格居中对齐。 (2) 插入一个 3 行 2 列的表格(表格 2),表格的宽度为 100%,边框粗细为 0,单 元格边距和单元格间距都为 0,背景颜色#6DCFF6。设置第一行左边单元格的宽为 173px,高 为 137px,设置第二行的高为 238px,将第三行的两个单元格合并,高度为 50px。在第一行 左侧单元格插入图片 img/102.gif,在右侧单元格插入图片 img/101.jpg。 在第三行将光标水 平居中,输入文字“版权所有?闪客启航” (3)在表格 2 第二行左侧单元格插入一个 6 行一列的表格(表格 3),表格宽度为 95%, 边框和单元格边距为 0,单元格间距为 5,将表格居中对齐。第一行高度为 15,其余各行高 度都为 40。 (4) 在表格 2 右侧单元格插入一个 1 行 2 列的表格(表格 4),表格宽度为 550px。边 框、单元格边距和间距都为 0。 好啦~我们完成了页面的布局,开始插入页面元素。 将光标放置在表格 4 右侧单元格中, 单击常用快捷栏中的媒体按钮, 然后在弹出的列表 中选择 Flash。

弹出“选择文件”对话框,选择 swf 文件夹中的 huaduo.swf 文件。单击“确定” 按钮后, 插入的 Flash 动画并不会在文档窗口中显示内容, 而是以一个带有字母 F 的灰色框 来表示。 在文档窗口单击这个 Flash 文件,就可以在属性面板中设置它的属性了。

勾选“循环”复选框时影片将连续播放,否则影片在播放一次后自动停止。 通过勾选“自动播放”复选框后,可以设定 Flash 文件是否在页面加载时就播放。 在“品质”下拉列表中可以选择 Flash 影片的画质,以最佳状态显示,就选择“高品 质”。 “对齐”下拉列表用来设置 Flash 动画的对齐方式, 为了使页面的背景在 Flash 下能够衬托出来, 我们可以使 Flash 的背景变为透明。 单击 属性面板中的“参数”按钮,打开“参数”对话框,设置参数为 wmode,值为 transparent。

这样在任何背景下,Flash 动画都能实现透明背景的显示。 2、插入 Flash 文本 我们将光标放置在表格 3 第二行的单元格中,用 Flash 文本制作导航栏目。单击常用 快捷栏的媒体按钮, 在列表中选择 Flash 文本, 弹出“插入 Flash 文本”对话框, 字体随意, 大小 22px,颜色设置为#F5E458,转滚颜色为#54C994,文本为“图片素材”,背景颜色 #6DCFF6, 选择自己需要的路径链接。 同样方法我们分别在表格 3 的第 3、 5、 行制作“代 4、 6 码素材”、“Flash 动漫”、“精美壁纸”和“音频视频”等栏目。 3、插入 Flash 按钮 我们在将光标放置于插入 Flash 按钮的位置, 单击常用快捷栏的媒体按钮, 在列表中选 择 Flash 按钮,弹出“插入 Flash 按钮”对话框。

“样式”用来选择按钮的外观; “按钮文本”用来输入按钮上的文字; “字体”和“大小”用于设置按钮上文字的字体和大小, 字号变大, 按钮并不会跟着改 变。 “链接”用于输入按钮的链接,可以是外部链接,也可以是内部链接。 “目标”用来设置打开的链接窗口。 如果需要修改 Flash 按钮对象, 可以先选中它, 然后在属性面板中单击“编辑”按钮, 会自动弹出刚才的“插入 Flash 按钮”对话框,更改它的设置就可以了。 4、插入 FlashPaper 我们还可以在网页中插入 Macromedia FlashPaper 文档。在浏览器中打开包含 FlashPaper 文档的页面时,浏览者能够浏览 FlashPaper 文档中的所有页面,而无需加载 新的 Web 页。也可以搜索、打印和缩放该文档。 在“文档”窗口中,将光标放放在页面上想要显示 FlashPaper 文档的位置,然后选 择“插入”>“媒体”>“FlashPaper”。 在“插入 FlashPaper”对话框中,浏览到一个 FlashPaper 文档并将其选定。 如果需要,通过输入宽度和高度(以像素为单位)指定 FlashPaper 对象在网页上的尺 寸。 FlashPaper 将缩放文档以适合宽度。 单击“确定”在页面中插入文档。 由于 FlashPaper 文档是 Flash 对象, 因此页面上 将出现一个 Flash 占位符。 如果需要,在属性检查器中设置其他属性。 5、插入 Flash 视频

dreamweaver8.0 入门图文教程:插入声音
声音能极好的烘托网页页面的氛围,网页中常见的声音格式有 WAV、MP3、MIDI、AIF、 RA、或 Real Audio 格式。 1、添加背景音乐 在页面中可以嵌入背景音乐。这种音乐多以 MP3,MIDI 文件为主,在 DW 中,添加背景 音乐有两种方法,一种是通过手写代码实现,还有一种是通过行为实现。 在 HTML 语言中, 通过<BGSOUNG>这个标记可以嵌入多种格式的音乐文件, 具体步骤是: 我们将 01.mid 音乐文件存放在 med 文件夹里。 打开 03.html 网页,我们为这个页面添加背景音乐 切换到 DW 的“拆分”视图,将光标定位到</body>之前的位置,在光标的位置写下下 面这段代码:<bgsound src="med/01.mid">,如下图所示。

按下 F12 键,在浏览器中查看效果,我们可以听见背景音乐声。 如果希望循环播放音乐,将刚才的源代码修改为以下代码即可: <bgsound src="med/01.mid" loop="true"> 2、嵌入音频 嵌入音频可以将声音直接插入页面中, 但只有浏览者在浏览网页时具有所选声音文件的 适当插件后,声音才可以播放。如果希望在页面显示浏览器的外观,可以使用这种方法。 打开 02.html 网页,将光标放置于我们想要显示播放器的位置。 单击快捷栏上的“媒体”按钮,从下拉列表中选择“插件”。 弹出“选择文件”对话框,在对话框中 02.wma 音频文件。

单击确定按钮后,插入的插件在文档窗口中以下图所示图标来显示。

选中该图标,在属性面板中可以对播放器的属性进行设置:

要实现循环播放音乐的效果, 单击属性面板中的“参数”按钮, 然后单击“+”按 钮,在“参数”列中输入 loop,并在“值”列中输入 true 后,单击“确定”按钮。

要实现自动播放,可以继续编辑参数,在参数对话框的“参数”列中输入 autostart,并在值中输入 true,单击“确定”按钮。

按下 F12 键,打开浏览器预览,这个页面实现了嵌入音乐的效果,在浏览器里显示 了播放插件。

※※dreamweaver8.0 入门图文教程:创建链接关 系
链接是一个网站的灵魂, 一个网站是由多个页面组成的, 而这些页面之间依据链接确定 相互之间的导航关系。 超级链接是指站点内不同网页之间、 站点与 Web 之间的链接关系, 它可以使站点内的网页成为有机的整体, 还能够使不同站点之间建立联系。 超级链接由两部 分组成:链接载体和链接目标。 许多页面元素可以作为链接载体,如:文本、图像、图像热区、动画等。而链接目标可 以是任意网络资源,如:页面、图像、声音、程序、其他网站、Email 甚至是页面中的某个 位置 -- 锚点。 链接的类型 如果按链接目标分类,可以将超级链接分为以下几种类型: * 内部链接:同一网站文档之间的链接。 * 外部链接:不同网站文档之间的链接。 * 锚点链接:同一网页或不同网页中指定位置的链接。 * E-mail 链接:发送电子邮件的链接。 ※1、关于链接路径 绝对路径,为文件提供完全的路径,包括适用的协议,例如 http、ftp,rtsp 等。 ftp://202.136.254.1/ 相对路径,相对路径最适合网站的内部链接。如果链接到同一目录下,则只需要输入要 链接文件的名称。要链接到下一级目录中的文件,只需要输入目录名。然后输入“/“,再 输入文件名。如链接到上一级目录中的文件,则先输入”../“再输入目录名,文件名。 根路径:是指从站点根文件夹到被链接文档经由的路径,以前斜杠开头,例如, /fy/maodian.html 就是站点根文件夹下的 fy 子文件夹中的一个文件(maodian.html )的 根路径。 2、创建外部链接 不论是文字还是图像, 都可以创建链接到绝对地址的外部链接。 创建链接的方法可以直 接输入地址也可以使用超级链接对话框。 (1)直接输入地址 打开 02.html 页面,输入并选中文字“闪客启航网页技术区”。 在属性面板中,“链接”用来设置图像或文字的超链接,“目标”用来设置打开方式。 我们在“链接”文本框直接输入外部绝对地 http://www.wangyeba.com ,在“目标” 项的下拉列表中选择_blank(在一个新的未命名的浏览器窗口中打开链接)。如下图所示。

(2)使用超级链接对话框 打开 03.html 页面,选中文字“闪客启航”。 单击常用快捷栏中的“超级链接”按钮。

弹出“超级链接”对话框,我们进行以下各项的设置: “文本”文本框用来设置超级链接显示的文本。 “链接”用来设置超链接连接到的路径。 “目标”下拉列表框用来设置超链接的打开方式,有四个选项。 “标题”文本框用来设置超链接的标题。 设置好后,单击“确定”按钮,向网页中插入超链接。 3、创建内部链接 创建内部链接有 3 种方法: a) 在文档窗口选中文字,单击属性面板“链接”后的 按钮,弹出“选择文件”对 话框,选择要链接到的网页文件,即可链接到这个网页。 b) 我们也可以拖动“链接”后的 按钮到站点面板上的相应网页文件,则链接将指 向这个网页文件。 c) 此外,我们还可以直接将相对地址输入到“链接”文本框里来链接一个页面。 4、创建 E-mail 链接 单击常用快捷栏中的“电子邮件链接”按钮, 弹出“电子邮件链接”对话框, 在对话框 的文本框那输入要链接的文本,然后在 E-mail 文本框内输入邮箱地址即可。 5、创建锚点链接 所谓锚点链接,是指在同一个页面中的不同位置的链接。 打开一个页面较长的网页, 将光标放置于要插入锚点的地方, 单击常用快捷栏的“命名 锚记”按钮,插入锚点。再选中需要链接锚点的文字,再属性面板中拖动链接后的 到锚 点上即可。 6、制作图像映射 打开 03.html 文件,选中 102.gif 图片,在属性面板中,有不同形状的图像热区按钮, 选择一个热区按钮单击。 然后在图像上需要创建热区的位置拖动鼠标,即可创建热区。此时,选中的部分被称着 图像热点。 选中这个图像热点,在属性面板上可以给这个图像热点设置超链接即可。 现在,请发挥你的想象力,巧妙运用各种页面元素来丰富你的网页,把它装扮的更加生 动和精彩!

※dreamweaver8.0 入门图文教程:创建 CSS 样式
CSS(Cascading Style Sheet)层叠样式表是一系列格式设置规则,它们控制 Web 页面 内容的外观。 使用 CSS 设置页面格式时, 内容与表现形式是相互分开的。 页面内容 (HTML 代 码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样 式表)或 HTML 文档的另一部分(通常为 <head> 部分)中。使用 CSS 可以非常灵活并更 好地控制页面的外观,从精确的布局定位到特定的字体和样式等。 术语【层叠】是指对同一个元素或 Web 页面应用多个样式的能力。例如,可以创建一 个 CSS 规则来应用颜色,创建另一个规则来应用边距,然后将两者应用于一个页面中的同 一文本。所定义的样式“层叠”到您的 Web 页面上的元素,并最终创建您想要的设计。 CSS 样式表的创建,可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效 果。在 Dreamweaver 8 中 CSS 样式的设置方式有了很大的改进,更为方便、实用、快捷。 一、创建 CSS 样式 1、选中菜单“窗口”>“CSS 样式”。打开 CSS 样式面板。

2、 单击“CSS 样式”面板右下角的“新建 CSS 规则”按钮, 打开“新建 CSS 规则” 对话框。

在“选择器类型”选项中,可以选择创建 CSS 样式的方法包括以下三种: 类: 我们可以在文档窗口的任何区域或文本中应用类样式, 如果将类样式应用于一整段 文字,那么会在相应的标签中出现 CLASS 属性,该属性值即为类样式的名称。 标签(重新定义特定标签的外观):重新定义 HTML 标记的的默认格式。我们可以针对 某一个标签来定义层叠样式表,也就是说定义的层叠样式表将只应用于选择的标签。例如, 我们为<body>和</body>标签定义了层叠样式表, 那么所有包含在<body>和</body>标签的内 容将遵循定义的层叠样式表。

高级(ID、伪类选择器等):为特定的组合标签定义层叠样式表,使用 ID 作为属性, 以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式,常用的有 4 种: a:link 设定正常状态下链接文字的样式。 a:active 设定鼠标单击时链接的外观。 a:visited 设定访问过的链接的外观。 a:hover 设定鼠标放置在链接文字之上时,文字的外观。 3、为新建 CSS 样式输入或选择名称、标记或选择器,其中: 对于自定义样式,其名称必须以点(.) 开始, 如果没有输入该点, DW 回自动添加上。 则 自定义样式名可以是字母与数字的组合,但.之后必须是字母。 对于重新定义 HTML 标记,可以在“标签”下拉列表中输入或选择重新定义的标记。 对于 CSS 选择器样式,可以在“选择器”下拉列表中输入或选择需要的选择器。 4、在“定义在”区域选择定义的样式位置,可以是“新建样式表文件”或“仅对该文 档”。单击“确定”按钮,如果选择了“新建样式表文件”选项,回弹出“保存样式表文件 为”对话框,给样式表命名,保存后,回弹出“CSS 规则定义”对话框。如果选择了“仅对 该文档”,则单击“确定”后,直接弹出“CSS 规则定义”,在其中设置 CSS 样式。

5、“CSS 规则定义”对话框中设置 CSS 规则定义。主要分为类型、背景、区块、 方框、边框、列表、定位和扩展 8 项。每个选项都可以对所选标签做不同方面的定义,可以 根据需要设定。定义完毕后,单击“确定”按钮,完成创建 CSS 样式。

※dreamweaver8 使用 CSS 样式美化页面
在“CSS 规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位 和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个 CSS 样式的时候,不需要对 每一个项都进行设置,需要什么效果,选择相应的项进行设置就可以了。 1、文本样式的设置 新建 CSS 样式, “选择器类型”为类,名称为 “style1”定义在“仅对该文档”。保 存至站点根目录下的 CSS 文件夹内,弹出“CSS 规则定义”对话框,默认显示的就是对文本 进行设置的“类型”项。 字体:可以在下拉菜单种选择相应的字体。 大小:大小就是字号,可以直接填入数字,然后选择单位。 样式:设置文字的外观,包括正常、斜体、偏斜体。 行高:这项设置在网页制作种很常用。设置行高,可以选择“正常”,让计算机自动调 整行高,也可以使用数值和单位结合的形式自行设置。需要注意的是,单位应该和文字的单 位一致,行高的数值是包括字号数值在内的。例如,文字设置为 12pt,如果要创建一倍行 距,则行高应该为 24pt。 变量:在英文中,大写字母的字号一般比较大,采用“变量”中的“小型大写字母”设 置,可以缩小大写字母。 颜色:设置文字的色彩。 2、背景样式的设置 在 HTML 中, 背景只能使用单一的色彩或利用图像水平垂直方向的平铺。 使用 CSS 之后, 有了更加灵活的设置。 在 CSS 规则定义”对话框左侧选择“背景”项, 可以在右边区域设置 CSS 样式的背景格 式。 背景颜色:选择固定色作为背景。 背景图像:直接填写背景图像的路径,或单击“浏览”按钮找到背景图像的位置。 重复:在使用图像作为背景的时,可以使用此项设置背景图像的重复方式,包括“不重 复”、“重复”、“横向重复”、和“纵向重复“。 附件:选择图像做背景的时候,可以设置图像是否跟随网页一同滚动。 水平位置:设置水平方向的位置,可以“左对齐“右对齐”、“居中”。还可以设置数 值与单位结合表示位置的方式,比较常用的是像素单位。 垂直位置:可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示 位置的方式。 3、区块样式设置 在 CSS 规则定义”对话框左侧选择“区块”项, 可以在右边区域设置 CSS 样式的区块格 式。 单词间距“英文单词之间的距离,一般选择默认设置。 字母间距:设置英文字母间距,使用正值为增加字母间距,使用负值为减小字母间距。 垂直对齐:设置对象的垂直对齐方式。 文本对齐:设置文本的水平对齐方式。 文字缩进:这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体 的数值,然后选择单位。文字的缩进和字号要保持统一。如字号为 12px,像创建两个中文 自的缩进效果,文字缩进就应该为 18px。 空格:对源代码文字空格的控制。选择“正常”,忽略源代码文字之间的所有空格。选

择“保留”,将保留源代码中所有的空格形式,包括由空格键、Tab 键、Enter 键创建的空 格。 显示:制定是否以及如何显示元素。选择“无”则关闭它被制定给的元素的显示。在实 际控制中很少使用。 4、方框样式的设置 在前面我们设置过图像的大小、 设置图像水平和垂直方向上的空白区域、 设置图像是否 有文字环绕效果等。方框设置进一步完善、丰富了这些设置。 在 CSS 规则定义”对话框左侧选择“方框”项, 可以在右边区域设置 CSS 样式的方框格 式。 宽:通过数值和单位设置对象的宽度。 高:通过设置和单位设置对象的高度。 浮动:实际就是文字等对象的环绕效果。选择“右对齐”、对象居右。文字等内容从另 外一侧环绕对象。选择“左对齐”。对象居左,文字等内容从另一侧环绕。“无”取消环绕 效果。 清除:规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”,选择不允许 出现层的一侧。如果在清除层的一侧有层,对象将自动移到层的下面。“两者”是指左右都 不允许出现层。“无”是不限制层的出现。 “填充”和“边界”: 如果对象设置了边框, “填充”是指边框和其中内容之间的空白 区域;“边界”是指边框外侧的空白区域。 5、边框样式设置 边框样式设置可以给对象添加边框,设置边框的颜色、粗细、样式。 在 CSS 规则定义”对话框左侧选择“边框”项, 可以在右边区域设置 CSS 样式的边框格 式。 样式设置边框的样式,如果选中“全部相同”复选框,则只需要设置“上”样式,其它 方向的样式与“上”相同。 宽度:设置 4 个方向边框的宽度。可以选择相对值:细、中、粗。也可以设置边框的宽 度值和单位。 颜色:设置边框对应的颜色,如果选中“全部相同”复选框,则其他方向的设置都与 “上”相同。 6、列表样式设置 CSS 中有关列表的设置丰富了列表的外观。 CSS 规则定义”对话框左侧选择“列表” 在 项,可以在右边区域设置 CSS 样式的列表格式。 类型:设置引导列表项目的符号类型。可以选择圆点、圆圈、方块、数字、小写罗马数 字、大写罗马数字、小写字母、大写字母、无列表符号等。 项目符号图像:可以选择图像作为项目的引导符号,单击右侧的“浏览”按钮,找到图 像文件即可。选择 ul 标签可以对整个列表应用设置,选中 li 标签可对单独的项目应用。 位置:决定列表项目缩进的程度。选择“外”,列表贴近左侧边框,选择“内”,列表 缩进。这项设置效果不明显。 7、定位样式设置 “定位”项实际上是对层的设置,但是因为 DW 提供了可视化的层制作功能,所以此项 设置在实际操作中几乎不会使用。 8、扩展样式的设置 CSS 样式还可以实现一些扩展功能,这些功能集中在扩展面板上。这个面板主要包括 3 种效果:分页、光标和过滤器。在 CSS 规则定义”对话框左侧选择“扩展”项,可以在右边

区域设置 CSS 样式的扩展格式。 分页:通过样式来为网页添加分页符号。允许用户指定在某元素前或后进行分页。分页 的概念是打印网页种的内容时在某指定的位置停止, 然后将接下来的内容继续打印在下一页 纸上。 光标:通过样式改变鼠标形状,鼠标放置于被此项设置修饰的区域上的时,形状会发生 改变。具体的形状包括:Hand(手)、crosshair(交叉十字)、text(文本选择符号)、 wait (Windows 的沙漏形状) default 、 (默认的鼠标形状) help 、 (带问号的鼠标) e-resize 、 (向东的箭头)、ne-resize(指向东北方的箭头)、n-resize(向北的箭头)、nw-resize (指向西北的箭头)、w-resize(向西的箭头)、sw-resize(向西南的箭头)、s-resize (向南的箭头)、se-resize(向东南的箭头)、auto(正常鼠标)。) 过滤器: 使用 CSS 语言实现过滤器 (滤镜) 效果。 单击“过滤器”下拉列表框旁的按钮, 可以看见有多种滤镜效果可供选择。
滤镜效 果 Alpha Blru Chroma DropSh adow FlipH FlipV Glow Graysc ale 将色彩、饱和度以及亮度值完全反转建立底片 Invert Light Mask Shadow Wave Xray 效果 设置灯光投影效果 设置遮罩效果,Color 指定遮罩的颜色 设置阴影效果 设置水平方向和垂直方向的波动效果 设置 X 光照效果 水平反转 垂直反转 为对象的外边界增加光效 降低图片的彩色度 设置透明效果 设置模糊效果 把指定的颜色设置为透明 设置投射阴影 描述

dreamweaver8 的 CSS 样式表的其他操作
单击 CSS 样式面板右上方的扩展按钮,弹出下图所示的菜单。CSS 的相关操作都是通过 这个菜单上的项目来实现的。

1、编辑 CSS 样式 选中需要编辑的样式类型,选择上图中的“编辑”项或直接单击“编辑样式”按钮 , 在弹出的“CSS 规则定义”对话框中修改相应的设置。编辑完成后单击“确定”按钮,CSS 样式就编辑完成了。 2、应用 CSS 自定义样式 鼠标右键单击在网页中被选中的元素,在弹出的快捷菜单中选择“CSS 样式”,在其子 菜单中选择需要的自定义样式。 3、附加样式表 选择“附加样式表”项, 打开“链接外部样式表”对话框, 可以链接外部的 CSS 样式文 件。 “文件/URL”设置外部样式表文件的路径, 可以单击浏览按钮, 在浏览窗口中找到样式 表文件。 “添加为”选择“链接”, IE 和 Netscape 两种浏览器都支持的导入方式。 这 “导入” 只有 Netscape 浏览器支持。

设置完毕后单击“确定”按钮,CSS 文件即被导入到当前页面。

※※dreamweaver8 的 CSS 样式表滤镜实例
1、制作模糊文字效果 1、新建 05.html 的文件插入一个 1 行 1 列的表格,边框和边 距全部设置为 0。然后在表格中输入要修饰的文字。 2、打开 CSS 样式面板,创建一个 CSS 样式,在弹出的“新建样式对话框”做如下设置。 3、设置完成后,单击“确定”按钮弹出“CSS 样式定义”对话框,在类型设置区域中 设置:大小:60,字体:黑体,粗细:粗,颜色:#FF9900。 4、要产生文字特效,最重要的是在扩展设置区域中进行特殊设置。 Blur 滤镜产生像被风吹一样的模糊效果。打开滤镜选项的下拉菜单,对 Blur 滤镜进行 设置: Blur(Add=?, Direction=?, Strength=?) Add 参数是一个布尔值,一般来说,当滤镜用于图片时取 0,用于文字时取 1。 “Direction=?”模糊方向,以 45 度为单位改变,“0”为垂直向上,“45”向右上, “90”水平向右,“135”向右下,以依次改变。这里我们设置 Direction=90。 Strength 代表模糊移动值,单位为像素。我们设置 Strength=180。 设置完成后,点击“确定”。 5、在文档编辑区选中文字所在单元格,在属性面板设置文字的样式为.test。 保存文件,按 F12 预览效果。 在只有 HTML 的时代,只能实现简单的网页效果。有了 CSS 样式,网页排版发生了翻天 覆地的变化,在 Dreamweaver8 里,使用 CSS 样式是如此的简单,而制作出来的效果可以如 此的炫目。

※※dreamweaver8 创建模板
在我们制作网站的过程中,为了统一风格,很多页面会用到相同的布局、图片和文字元 素。为了避免大量的重复劳动,可以使用 Dreamweaver8 提供的模板功能,将具有相同版面 结构的页面制作为模板,将相同的元素(如导航栏)制作为库项目,并存放在库中可以随时 调用。 一、创建模板 模板的创建有三种方式。 1、直接创建模板 选择“窗口/资源”命令,打开“资源”面板,切换到模板子面板,如下图所示。

单击模板面板上的“扩展”按钮, 在弹出菜单中选择“新建模板”这是在浏览窗口 出现一个未命名的模板文件,给模板命名。

然后单击“编辑”按钮,打开模板进行编辑。 编辑完成后,保存模板,完成模板建立。

2、将普通网页另存为模板 打开一个已经制作完成的网页,删除网页中不需要的部分,保留几个网页共同需要的 区域。 选择“文件/另存为模板”命令将网页另存为模板。 在弹出的“另存模板”对话框中,“站点”下拉列表框用来设置模板保存的站点,可 选择原有站点,也可选择其他站点。“现存的模板”选框显示了当前站点的所有模板。“另 存为”文本框用来设置模板的命名。 单击“另存模板”对话框中的“保存”按钮, 就把当前 网页转换为了模板,同时将模板另存到选择的站点。

单击“保存”按钮,保存模板。系统将自动在根目录下创建 Template 文件夹,并 将创建的模板文件保存在该文件夹中。 在保存模板时,如果模板中没有定义任何可编辑区域,系统将显示警告信息。我们可 以先单击“确定”,以后再定义可编辑区域。 3、从文件菜单新建模板 选择“文件/新建”命令,打开“新建文档”对话框,然后再类别中选择“模板页”, 并选取相关的模板类型,直接单击“创建”按钮即可。”

模板 2
一、建立模板

1、创建模板页面

最简单的办法是将一个网页另存为模板文件, 通过执行命令: File→Save as Template, DreamWeaver 会在网站根目录中建立一个模板文件夹——Templates 来保存该模板。

当然,也可以新建一个模板:Window→Templates,会出现的 Templates 面板,单击右 下角的 New Template 按钮, 输入文件名, 就建立了一个空模板;再单击 Open Template 按钮 打开该模板,保存后自动存放于网站模板文件夹 Templates 中。

新建、 打开的模板页面和普通的网页没什么两样,同样可以加入表格、层、图片、 动画、 脚本,设置页面属性等。

举例:这里以制作一个模板为例来说明。在该页面中,我们希望左侧的网站标识图和底 部的导航图出现在每个页面中。 其中标识图由两幅图片叠加而成, 导航图上的文字“最近更 新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件,它们在每个 页面中都不变。 右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。 为 了保持页面整洁,我们用表格来布置这些元素。

准确地说它只是一个没有可编辑区域的“准模板”,下面再设定可编辑区域。

2、设定可编辑区域

设定模板可编辑区域,一般来说有两种方法。

新建可编辑区域:选择命令:Modify→Template→New Editable Region。在某一空白 区域中单击后执行该命令即可将该区域变为可编辑区域。

标记某一区域为可编辑区域:选择命令: Modify→Template→Mark Selectin as Editable Region。 如果某区域已经有一些文字, 并 且希望在以后新建的超文本文件中部分保留其内容,先选中该区域再执行标记命令即可。

取消可编辑状态:选择命令:Modify→Template→Unmark Editable Region。执行该命 令后会弹出一个对话框,其中有当前已有的可编辑区域列表,选中要取消的区域名称,确认 即可。

举例:在大片空白区中随便单击一下,执行 Modify→Template→New Editable Region 命令,在弹出对话框中输入名称:Main;选中左下角本页说明下面的文字,执行 Modify→Template→Mark Selectin as Editable Region 命令,输入名称:exp。可以看到 可编辑区显示为浅蓝色,保存即完成模板制作。

二、使用模板

1、根据模板新建页面

命令:File→New From Template。弹出对话框,从模板列表中选取模板,出现的新页 面中除可编辑区外均有淡黄色背景,是不能进行修改的部分。空白的 Main 编辑区可直接进 行插入表格、文字、图片等操作,Exp 编辑区保留有原来的文字,修改或重新编辑均可。

2、对一个已经有内容的页面应用模板

命令: Modify→Template→Apply Template to Page。 选择模板后还会弹出一个对话框, 让您选择现有的孤立内容保存到哪个可编辑区域 (Choose Editable Region for Orphaned Content)。 要是不想保留则可以选择“(none)”。

举例:我们先新建一个普通页面,输入:“CIW 电脑工作室”,执行 Modify→Template→Apply Template to Page 命令,选择模板 test,现有内容保存区域选 择 Main, 确认后可看到页面自动变成了模板页的形式, 而“CIW 电脑工作室”这一行字就出 现在主编辑窗口中。

3、更新模板以全面更新站点

基于某一模板建立了一些页面后, 对模板进行修改后保存时, 就会自动弹出一个对话框, 列出所有使用了该模板的页面,询问是否要更新。

另外一种方法是执行 Modify→Template→Update Pages 命令。 Update Pages 对话框 从 中选择一个站点或站点的某一种模板(同一站点中可以使用多个模板),单击右侧的 Start 按钮,软件会自动搜索与模板相关联的网页并进行更新。非常方便!

举例:Test 模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之 上的,现在不想要它,同时还想将所有页面中的该图片均删除。就可以打开模板 test.dwt, 删除该图层,保存模板,单击右侧的“Update”按钮即可。

注意:新建和使用模板前需定义站点。方法是,执行命令:Site→Define Sites;指定 站点名称和本地根目录(Local Root)。 模板使用的是相对路径, 如果没有指定网站在本地的

位置,软件就不能准确找到并保存模板文件;并且应用模板新建和更新页面时,页面中的超 链接也不能随页面文件保存位置的不同而相应变化。

※※dreamweaver8 定义可编辑区域
模板创建好后,要在模板中建立可编辑区,只有在可编辑区里,我们才可以编辑网页内 容。可以将网页上任意选中的区域设置为可编辑区域,但是最好是基于 HTML 代码的,这样 在制作的时候更加清楚。 在文档窗口中,选中需要设置为可编辑区域的部分,单击常用快捷栏的“模板”按钮, 在弹出菜单中选择“可编辑区域”项。

在弹出的“新建可编辑区域”对话框中给该区域命名, 然后单击“确定”按钮。 新添加 的可编辑区域有蓝色标签,标签上是可编辑区域的名称。 如果希望删除可编辑区域, 可以将光标置于要删除的可编辑区域内, 选择“修改/模板/ 删除模板标记”命令,光标所在区域的可编辑区即被删除。 这样模板文件就创建好了。 三、其他模板区域 模板中除了可以插入最常用的“可编辑区域”外, 还可以插入一些其他类型的区域, 分 别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。 1、可选区域 可选区域是模板中的区域,用户可将其设置为在基于模板的文件中显示或隐藏。 当要为在文件中显示的内容设置条件时,即可使用可选区域。 2、重复区域 重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区 域通常用于表格,也可以为其他页面元素定义重复区域。 3、可编辑可选区域 是可选区域的一种,可以设置显示或隐藏所选区域,并且可以编辑该区域中的内 容。 四、创建基于模板的页面 1、打开素材 csslianxi.html 文件,选择菜单栏的文件>另存为模板命令。 2、在弹出的另存为模板对话框中,在“站点”文本框选择“xmweb”,在“另存 为”给模板命名为 mo1,点击确定。 3、弹出是否更改链接的提示,选择“是”。此时,在站点内自动生成一个名为 “Templates”的文件夹,名称为 mo1.dwt 的模板文件被保存在该文件夹中。

4、鼠标在网页表格的最下一行空白处单击一下,选中状态栏的<table>标签,选 择菜单栏的插入>模板对象>可编辑区域命令。 5、弹出“可编辑区域”对话框,点击“确定”。这样我们就完成了模板的制作。 6、新建 06.html 文件,选择菜单栏>窗口>资源命令,打开资源面板。 7、点击资源面板的“模板”按钮,在资源面板我们就可以看见 mo1.dwt 文件,选 中 mo1.dwt, 按住鼠标左键直接拖拽到 06.html 的文档窗口中。 即可将该模板应用到 06.html 中。

Dreamweaver 8 创建层
层是 CSS 中的定位技术,在 Dreamweaver 中对其进行了可视化操作。文本、图像、表格 等元素只能固定其位置, 不能互相叠加在一起, 而层可以放置在网页文档内的任何一个位置, 层内可以放置网页文档中的其他构成元素,层可以自由移动,层与层之间还可以重叠,层体 现了网页技术从二维空间向三维空间的一种延伸。 一、创建层 1、创建普通层 (1)插入层 选择菜单栏>插入>布局对象>层命令,即可将层插入到页面中去。

使用这种方法插入层,层的位置由光标所在的位置决定,光标放置在什么位置,层 就在什么位置出现。选中层会出现六个小手柄,拖动小手柄可以改变层的大小。 (2)拖放层 打开快捷栏的“布局”选项,单击“绘制层”按钮,单击鼠标左键,并且按住不放,拖 动图标到文档窗口中,然后释放鼠标,这是层就会出现在页面中了。

(3)绘制层 打开快捷栏的“布局”选项,单击“绘制层”按钮,在文档窗口内鼠标光标变成十字 光标,然后按住鼠标左键,拖动出一个矩形,矩形的大小就是层的大小,释放鼠标猴层就会 出现在页面中。 2、创建嵌套层 创建嵌套层就是在一个层内插入另外的层。 方法一:将光标放才某层内,选择菜单栏>插入>布局对象>层命令,即可在改层内插入 一个层。

方法二:打开层面板,从中选择需要嵌套的层,此时按住 Ctrl 键同时拖动改层到 另外一个层上,直到出现如下图所示图标后,释放 Ctrl 键和鼠标,这样普通层就转换为嵌 套层了。

Dreamweaver 8 设置层的属性
选中要设置的层,就可以在属性面板中设置层的属性了。

层编号:给层命名,以便在“层”面板和 JavaScript 代码中标识该层。 左、上:指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。 宽、高:指定层的宽度和高度。如果层的内容超过指定大小,层的底边缘(按照在 Dreamweaver 设计视图中的显示)会延伸以容纳这些内容。(如果“溢出”属性没有设置为 “可见”,那么当层在浏览器中出现时,底边缘将不会延伸。 Z 轴:设置层的层次属性。在浏览器中,编号较大的层出现在编号较小的层的前面。 值可以为正,也可以为负。当更改层的堆叠顺序时,使用“层”面板要比输入特定的 z 轴 值更为简便 可见性:在“可见性”下拉列表中,设置层的可见性。使用教本语言如 JavaScrip 可 以控 制层的动态显示和隐藏。有四个选项: Default——选择该选项,则不指明层的可见性。 Inherit——选择该选项,可以继承父层的可见性。 Visible——选择该选项, 可以显示层及其包含的内容,无论其父级层是否可见。 Hidden——选择该选项,可以隐藏层及其包含的内容,无论其父级层是否可见。 背景颜色:用来设置层的背景颜色。 背景图像——用来设置层的背景图像。 溢出——选择当层内容超过层的大小时的处理方式。有四个选项: Visible(显示):选择该选项,当层内容超出层的范围时,可自动增加层尺寸。 hidden(隐藏): 选择该选项,,当层内容超出层的范围时,保持层尺寸不变,隐藏 超出部分的内容。 scroll(滚动条): 选择该选项,则层内容无论是否超出层的范围,都会自动增加滚 动条。 auto(自动): 选择该选项,,当层内容超出层的范围时,自动增加滚动条(默认) 剪辑:设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素 值。层经过“剪辑”后,只有指定的矩形区域才是可见的。 类:在类的下拉列表中,可以选择已经设置好的 CSS 样式或新建 CSS 样式。 注意: 位置和大小的默认单位为像素 (px)。 也可以指定以下单位: (pica)、 (点) pc pt 、 in(英寸)、mm(毫米)、cm(厘米)或 %(父层相应值的百分比)。缩写必须紧跟在值之 后,中间不留空格: 使用层制作特效我们在创建网页的时候,可以发现层可以在网页上随意改变位置,在 设定层的属性的时, 可以知道层有显示隐藏的功能, 通过这两个特点可以实现很多令人激动 的网页动态效果。

//Dreamweaver 8 使用库
所谓库项目, 实际上就是文档内容的任意组合, 可以将文档中的任意内容存储为库项目, 使它在其它地方被重复使用。 1、创建库 在文档窗口中选择需要保存为库项目的内容。 单击资源面板“库”分类中右下角的“新建库项目”按钮。 一个新的项目出现在资源面板“库”分类的列表中,预览框中显示预览的效果, 还可以给该项目键入新名称。这样,一个库项目就创建好了。 2、插入库 将光标方在网页中需要插入库文件的位置,在资源面板“库”分类中选择需要插 入的库项目,直接拖动到光标所在位置即可。 3、更改库 如果修改了库文件,选择“文件/保存”命令,弹出“更新库项目”对话框,询问 是否更新网站中使用了该库文件的网页。 单击“更新”按钮, 将更新网站中使用了该库文件 的网页。

Dreamweaver 8 制作框架网站
框架是网页中经常使用的页面设计方式, 框架的作用就是把网页在一个浏览器窗口下分 割成几个不同的区域,实现在一个浏览器窗口中显示多个 HTML 页面。使用框架可以非常方 便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。利用框 架最大的特点就是使网站的风格一致。 通常把一个网站中页面相同的部分单独制作成一个页 面,作为框架结构的一个子框架的内容给整个网站公用。 一个框架结构有两部分网页文件构成: 框架(Frame):框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部 分中所显示内容无关的网页文件。 框架集(Frameset):框架集也是一个网页文件,它将一个窗口通过行和列的方式分割 成多个框架, 框架的多少根据具体有多少网页来决定, 每个框架中要显示的就是不同的网页 文件。 一、创建框架 在创建框架集或使用框架前,通过选择“查看/可视化助理/框架边框”命令,使框架 边框在文档窗口的设计视图中可见。 1、使用预制框架集 (1)、新建一个 HTML 文件,在快捷工具栏选择“布局”,单击 “框架”按钮,在弹出 的下拉菜单中选择“顶部和嵌套的左侧框架”。

(2)、使用鼠标直接从框架的左侧边缘和上边缘向中间拖动,直至合适的位置,这样顶 部和嵌套的左侧框架就完成了。

2、鼠标拖动创建框架 (1)、新建普通网页,命名后将其打开。 (2)、把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框,可以垂直或水平分 割网页。 二、、保存框架 每一个框架都有一个框架名称, 可以用默认的框架名称, 也可以在属性面板修改名称, 我们采用系统默认的框架名称 topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。 选择菜单栏>文件>保存全部, 将框架集保存为 index.html, 上方框架保存为 07.html, 左侧框架保存为 08.html,右侧框架保存为 09.html。 这个步骤虽然简单,但是很关键,只有将总框架集和各个框架保存在本地站点根目录 下,才能保证浏览页面时显示正常。 三、 编辑框架式网页 虽然框架式网页把屏幕分割成几个窗口,每个框架(窗口)中放置一个普通的网页, 但是编辑框架式网页时, 要把整个编辑窗口当作一个网页来编辑, 插入的网页元素位于哪个 框架,就保存在哪个框架的网页中。框架的大小可以随意修改。 1、 改变框架大小 用鼠标拖拽框架边框可随意改变框架大小。 2、 删除框架 用鼠标把框架边框拖拽到父框架的边框上,可删除框架。 3、设置框架属性 设置框架属性时,必须先选中框架。选择框架方法如下: 选择菜单栏>窗口>框架,打开框架面板,单击某个框架,即可选中该框架。 在编辑窗口某个框架内按住 Alt 键并单击鼠标,即可选择该框架。当一个框架被选择 时,它的边框带有点线轮廓 2. 设置框架属性 选中框架,在属性面板上可以设置框架属性:框架名称、源文件、空白边距、滚动条、 重置大小和边框属性等。 需要注意的是:1、框架是不可以合并的。2、在创建链接时要用到框架名称,所以我 们要很清楚的知道每个框架对应的框架名。 四、在框架中使用超级链接 在框架式网页中制作超级链接时,一定要设置链接的目标属性,为链接的目标文档指 定显示窗口。链接目标较远(其他网站)时,一般放在新窗口,在导航条上创建链接时,一 般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。 “目标”下拉菜单中的选项: * _blank 放在新窗口中。 * _parent 放到父框架集或包含该链接的框架窗口中。 * _self 放在相同窗口中(默认窗口无须指定)。 * _top 放到整个浏览器窗口并删除所有框架。

在我们保存有框架名为 mainFrame、leftFrame、topFrame 的框架后,在目标下拉菜单 中,还会出现 mainFrame、leftFrame、topFrame 选项: * mainFrame 放到名为 mainFrame 的框架中。 * leftFrame 放到名为 leftFrame 的框架中。 * topFrame 放到名为 topFrame 的框架中。 五、制作框架页面 1、选择菜单栏>窗口>框架,打开框架面板,选中整个框架集,如下图所示:

在属性面板中,将行的值设置为 100,单位为像素,如下图所示:

2、选择菜单栏>窗口>框架,打开框架面板,选中子框架集,如下图所示:

在属性面板中,将列的值设置为 200,单位为像素,如下图所示:

这样,我们就完成了对整个框架的布局。下面我们来布局各个框架页面。 3、鼠标在 topFrame 框架中的空白处点击一下,我们会看见文档窗口上方的文件名变 为了 07.html。在页面属性中将上、下、左。右边距全部设为 0。 插入一个 1 行 2 列的表格,宽度为 100%,高度为 100px,左单元格宽度为 382px 并插 入背景图片 img/103.jpg, 设置表格的背景颜色为 103.jpg 图片右边缘的绿色 (用吸管吸取) 。 4、 鼠标在 leftFrame 框架中的空白处点击一下, 我们会看见文档窗口上方的文件名变 为了 08.html,在页面属性中将上、下、左。右边距全部设为 0。 插入一个 6 行 1 列 的表格,表格宽度为 95%,居中对齐。将第一个单元格的高度设

为 20px,选中其余单元格将高度设置为 50px。分别输入文字设置导航栏目。 分别对各个导航栏目建立链接关系,链接路径指向要链接到的网页,目标选择 mainFrame 框架。 5、 鼠标在 mainFrame 框架中的空白处点击一下, 我们会看见文档窗口上方的文件名变 为了 09.html,在页面属性中将上、下、左。右边距全部设为 0。 自己设置一个欢迎页面。 至此,我们完成了一个框架网站的制作。

Dreamweaver 8 时间轴及创建时间轴动画
时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面, 在时 间轴中包含了制作动画时所必须的各种功能。 1、时间轴的各项功能

(1)时间轴弹出菜单:表示当前的时间轴名称。 (2)时间轴指针:在界面上显示当前位置的帧。 (3)不管时间轴在哪个位置,一直移动到第一帧。 (4)表示时间指针的当前位置。 (5)表示每秒显示的帧数。默认值时 15 帧。增加帧数值,则动画播放的速度将加快。 (6)自动不放:选中该项,则网页文档中应用动画后自动运行。 (7)LOOP(循环):选中该项,则继续反复时间轴上的动画。 (8)行为通道:在指定帧中选选择要运行的行为。 (9)关键帧:可以变化的帧。 (10)图层条:意味着插入了“层”等对象。 (11)图层通道:它是用于编辑图层的空间。 2、在 DW8 中显示时间轴 选择菜单栏的窗口/时间轴或按快捷键 Alt+F9,则显示时间轴。 四、创建时间轴动画 时间线只能移动分层对象,如果想移动文本或图像之类的对象,可以将其放在层中。 1、打开 09.html 文件, 把光标放到页面左上方的位置,在插入面板选择布局>绘制层,创建六个层。分别输入 文字“小”、“木”、“web”、“欢”、“迎”、“你”,将图层排列在适当的位置。 2、打开时间轴。选择层 1 后,拖动到时间轴的第一行上。 3、用同样的方法,把包含有其它文字的层也根据文字的顺序拖动到时间轴的第 2-6 行上。 4、为了减慢文字移动的速度,把时间轴中的 15 帧全部扩展为 25 帧。 5、在时间轴中选择 Layer1 的第一帧,在属性面板的顶端坐标值(T)中输入(-50), 这样,可以把文字放置到上侧。 6、用同样的方法选择其余层的第一帧后,把顶端坐标值(T)统一设定为(-50)。 7、为了每个一段时间下落一个文字,从第二个动画条开始向后移动 5 帧。勾选“自动 播放选项”。 8、按 F12 浏览效果。

Dreamweaver 8 利用行为制作动态页面
一般说来, 动态网页是通过 JaveScript 或基于 JaveScript 的 DHTML 代码来实现的。 包 含 JaveScript 脚本的网页,还能够实现用户与页面的简单交互。但是编写脚本既复杂又专 业需要专门学习,而 Dreamweaver 提供的“行为”的机制,虽然行为也是基于 JaveScript 来实现动态网页和交互的,但却不需书写任何代码。在可视化环境中按几个按钮,填几个选 项就可以实现丰富的动态页面效果, 实现人与页面的简单交互。 行为是事件与动作的彼 此结合。 例如, 当鼠标移动到网页的图片上方时, 图片高亮显示, 此时的鼠标移动称为时间, 图片的变化称为动作, 一般的行为都是要有事件来激活动作。 动作时由预先写好的能够执行 某种任务的 JavaScript 代码组成,而事件是由浏览器前用户的操作相关,如单击鼠标、鼠 标上滚等。 一、了解行为 “行为”可以创建网页动态效果,实现用户与页面的交互。行为是由事件和动作组成 的,例如:将鼠标移到一幅图像上产生了一个事件,如果图像发生变化(前面介绍过的轮替 图像),就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。 1. 对象(Object) 对象是产生行为的主体, 很多网页元素都可以成为对象, 如图片、 文字、 多媒体文件等, 甚至是整个页面。 2. 事件(Event) 事件是触发动态效果的原因,它可以被附加到各种页面元素上,也可以被附加到 HTML 标记中。一个事件总是针对页面元素或标记而言的,例如:将鼠标移到图片上、把鼠标放在 图片之外、单击鼠标,是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、 onClick)。 不同的浏览器支持的事件种类和多少是不一样的, 通常高版本的浏览器支持更多 的事件。

Dreamweaver 8 认识表单对象
使用表单,可以帮助 Internet 服务器从用户那里收集信息,例如收集用户资料、获取 用户订单,在 Internet 上统也同样存在大量的表单,让用户输入文字进行选择。 1、通 常表单的工作过程如下: (1)访问者在浏览有表单的页面时,可填写必要的信息,然后单击“提交”按钮。 (2)这些信息通过 Internet 传送到服务器上。 (3)服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求 纠正错误。 (4)当数据完整无误后,服务器反馈一个输入完成信息。 2、一个完整的表单包含两个部分: (1)一个是在网页中进行描述的表单对象。 (2)二是应用程序,它可以是服务器端的,也可以是客户端的,用于对客户信息进行 分析处理。 二、认识表单对象 在 Dreamweaver 中,表单输入类型称为表单对象。可以通过选择“插入”>“表单对 象”来插入表单对象, 或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插 入表单对象。

1、表单 “表单”在文档中插入表单。任何其他表单对象,如文本域、按钮等,都必须插入表单 之中,这样所有浏览器才能正确处理这些数据。 2、文本域 “文本域”在表单中插入文本域。 文本域可接受任何类型的字母数字项。 输入的文本可 以显示为单行、多行或者显示为项目符号或星号(用于保护密码)。 3、复选框 “复选框”在表单中插入复选框。 复选框允许在一组选项中选择多项, 用户可以选择任 意多个适用的选项。 4、单选按钮 “单选按钮”在表单中插入单选按钮。 单选按钮代表互相排斥的选择。 选择一组中的某 个按钮,就会取消选择该组中的所有其他按钮。例如,用户可以选择“是”或“否”。 5、单选按钮组 “单选按钮组”插入共享同一名称的单选按钮的集合。 6、列表/菜单 “列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项 值,并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值,而且只 允许用户选择一个选项。

7、跳转菜单 “跳转菜单”插入可导航的列表或弹出式菜单。 跳转菜单允许您插入一种菜单, 在这种 菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。 8、图像域 “图像域”使您可以在表单中插入图像。 可以使用图像域替换“提交”按钮, 以生成图 形化按钮。 9、文件域 “文件域”在文档中插入空白文本域和“浏览”按钮。 文件域使用户可以浏览到其硬盘 上的文件,并将这些文件作为表单数据上传。 10、按钮 “按钮”在表单中插入文本按钮。按钮在单击时执行任务,如提交或重置表单。可以为 按钮添加自定义名称或标签,或者使用预定义的“提交”或“重置”标签之一。 11、标签 “标签”在文档中给表单加上标签,以<label></label>形式开头和结尾。 12、字段集 “字段集”在文本中设置文本标签。 认识了表单, 那么创建和使用表单时就可以根据需要进行选择。 表单时动态网页的灵魂。

Dreamweaver 8 创建表单
在 Dreamweaver 中可以创建各种各样的表单,表单中可以包含各种对象,例如文本域、 按钮、列表等。 1、插入表单 在网页中添加表单对象,首先必须创建表单。表单在浏览网页中属于不可见元素。在 Dreamweaver8 中插入一个表单。当页面处于“设计”视图中时,用红色的虚轮廓线指示表 单。 如果没有看到此轮廓线, 请检查是否选中了“查看”>“可视化助理”>“不可见元素”。 (1)将插入点放在希望表单出现的位置。选择“插入”>“表单”,或选择“插入”栏 上的“表单”类别,然后单击“表单”图标, (2)用鼠标选中表单,在属性面板上可以设置表单的各项属性。

在“动作”文本框中指定处理该表单的动态也或脚本的路径。 在“方法”下拉列表中,选择将表单数据传输到服务器的方法。表单“方法”有: POST 在 HTTP 请求中嵌入表单数据。GET 将值追加到请求该页的 URL 中。默认 使用 浏览器的默认设置将表单数据发送到服务器。 通常, 默认方法为 GET 方法。 不要使用 GET 方 法发送长表单。URL 的长度限制在 8,192 个字符以内。如果发送的数据量太大,数据将被 截断,从而导致意外的或失败的处理结果。而且,在发送机密用户名和密码、信用卡号或其 他机密信息时,不要使用 GET 方法。用 GET 方法传递信息不安全。 在“目标”弹出式菜单指定一个窗口, 在该窗口中显示调用程序所返回的数据。 如果命 名的窗口尚未打开,则打开一个具有该名称的新窗口。目标值有: _blank,在未命名的新 窗口中打开目标文档。 _parent, 在显示当前文档的窗口的父窗口中打开目标文档。 _self, 在提交表单所使用的窗口中打开目标文档。 _top,在当前窗口的窗体内打开目标文档。此 值可用于确保目标文档占用整个窗口,即使原始文档显示在框架中。

Dreamweaver 8 表单的应用
1、 一个简单的提交留言页面 新建 11.html 网页文件,选择表单插入栏,插入表单,将光标放置在表单内,插入一个 5 行 2 列的表格,将第 1、5 行合并。分别在第 2、3 行插入文本字段,在第 4 行插入文本区 域,在第 5 行插入两个按钮。 文本域是用户在其中输入响应的表单对象。有三种类型的文本域: 单行文本域通常提供单字或短语响应,如姓名或地址。 多行文本域为访问者提供一个较大的区域, 供其输入响应。 可以指定访问者最多可输入 的行数以及对象的字符宽度。 如果输入的文本超过这些设置, 则该域将按照换行属性中指定 的设置进行滚动。 密码域是特殊类型的文本域。 当用户在密码域中键入时, 所输入的文本被替换为星号或 项目符号,以隐藏该文本,保护这些信息不被看到。

页面布局效果如下:

2、制作网页跳转菜单 打开一个建立好的网页文件, 把鼠标的光标放置在需要插入跳转菜单的位置。 选择表单 插入栏中的“跳转菜单”命令,在网页中插入一个跳转菜单。

在弹出的“跳转菜单”对话框中,根据提示输入相应内容:

点击确定,按 F12 预览效果。 3、运行代码实例 新建文件 12.html。 打开 12.html,插入表单,在表单中插入一个文本区域,在回车,再插入一个按钮。 选中文本区域,在属性面板中,设置文本区域的文本宽度为 50,行数为 8。 选中按钮,在属性面板中,将按钮的值设为“运行代码”。 选中 form 表单, 在属性面板中, 单击动作文本框旁的“浏览按钮”, 选择指向 13.html, 目标选择_blank。 在 11.html 的代码区复制整个代码, 在打开 12.html 文件, 在设计视图中选中文本区域, 转到代码区,将光标放置在<textarea name="textarea" cols="50" rows="8"></textarea> 的“><”之间,按住 Ctrl+V 粘贴 11.html 页面的代码。

保存后, F12 预览。 按

网页表格深层探密
网页制作中表格扮演了很重要的角色。你是否知道,表格还有很多的秘密呢?通过与 Javascript、CSS 等的结合,表格还有很多巧妙的用处。 1、用表格做流动分割线 我们知道, 在网页中可以用<hr>标识来做分割线, 也可以把表格设置为 1 个象素高或宽 充当分割线。现在,我们将表格与 Javascript 结合,可以做出更生动的分割线——流动的 分割线。加入以下代码,你就可以看到一条分割线,颜色在不断的流动。 <script> l=Array(6,7,8,9,'a','b','b','c','d','e','f') t="<table height=2 width=60% cellspacing=0 cellpadding=0><tr>" for(x=0;x<40;x++){t+="<td id=a_mo"+x+"></td>"} document.write(t+"</tr></table>") function f1(y){for(i=0;i<40;i++){c=(i+y)%20;if(c>10)c=20-c document.all["a_mo"+(i)].bgColor="'#00"+l[c]+l[c]+"00'"}y++ setTimeout('f1('+y+')',1)}f1(1) </script> 在上面的代码中, 我们可以通过修改<table>标识中的 height 和 width 设置分割线的高 度和长度。 2、带滚动条的表格 看看图一的效果,可千万不要以为是 IFRAME,这可是地地道道的表格!其实,这是表 格和 CSS 结合的效果。当网页上有大段文字要显示,而又没有足够的空间时,这就派上用场 了。虽然用文本框也可以实现类似效果,但却远没有用表格灵活。代码很简单,只要在单元 格<td>标识后加上如下代码就可以了: <div style="overflow:auto;height:200;"> 当然,对应的在单元格结束</td>标识前加上</div>。我们可以更改 height 的值,来修 改显示文段区域的高度。如以下的示例,就实现了图示的效果。 <table width="260" border="0"> <tr><td bgcolor="#999999"><font color="#FFFFFF"><b>标题</b></font></td></tr> <tr><td bgcolor="#CCCCCC"> <div style="overflow:auto;height:160;"> 这里输入文段的内容。 </div> </td></tr> </table> 3、带标题的表格 看看图二的效果。通常,我们要给表格加标题,不是用单元格的方法就是用图片,很麻 烦。其实,我们可以只用很一些很简单的 HTML 标识,就可以轻松实现给表格加标题了。这

个标识似乎已被人遗忘,很少看到使用,不过它实现的效果还是很不错的。下面就来看看如 何实现: <fieldset style="width:220" align="center"> <legend>这里是表格的标题</legend> 这里添加表格中的内容 </fieldset> 几行代码就可以搞掂了!修改 width 值可以设置表格宽度。<legend>和</legend>之间 是表格的标题,你可以设置表格标题的颜色、大小等,甚至是加上个链接。</legend>标识 之后,就可以任意添加表格中的内容了,同样也可以添加任意的内容,如文字、表格、图片 等。

在 Dreamweaver 中编写 CSS 需要的技巧
由于“可视化”和操作简便, DreamWeaver 中编写 CSS 的朋友很多, 在 今天我们介绍一 些在 Dreamweaver 中编写 CSS 的“最佳习惯”,希望对大家有所帮助。 CSS 正在改变网站设计的进程。为迎合不断增长的倾向于 CSS 的设计人员的需求, Macromedia DW MX 引进了一些新的及改善过的 CSS 相关的特性。有了这些新的特性,你可 以为未来的更新作好计划,开发与 W3C 标准更加兼容的站点。本文讨论在 DW MX 中使用 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 样式的 javascript 来改变一个对象的 属性。

Embedded CSS: 它也不是最理想的, 因为它只能对当前页面施加影响。 在更新的过程中, 如果某一个页面丢失,将会使站点的风格不一致;另外,当用户浏览你的站点时,每一页都 要下载一次样式表信息。 External CSS:这是你的第一选择。External CSS 可以让所有连接到它的页面保持一 致的外观风格;提纲挈领,更改一次,轻松更新所有相关页面;让你的页面体积更小,浏览速 度更快。其他的一些最佳习惯将在下文分析具体的 CSS 特性时提及。 在 DW MX 中创建 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)或是要在客户端通过 javascript 来存取的开发者来说,设计时间样式表同样有用。服务器端样式表也是处理客 户端浏览器对 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 中应用 CSS 的技巧
Dreamweaver 是集网页制作和管理网站于一身的所见即所得网页编辑器。由于 DW 的功 能之强大,所以可以在他里面直接定义 css(样式表),而就是这 css 给我出了个小难题。 事情是这样的, 我用 css 主要是改变一下我的超级连接的颜色和下划线的有无。在 DW 里定义 css 的确很方便,里面的参数他都为你设置好了,只要你点鼠标就行了。正是由于他 的简单,而使他带来了一个小问题(就我自己认为):
以下为引用的内容: < style type="text/css"> < !-a:hover { color: #FF3333; text-decoration: underline} a:link { color: #3333FF; text-decoration: none} a:visited { color: #3333FF; text-decoration: none} --> < /style>

以上就是 DW 生成的 css 源码,这段源码的意思就是去掉超级连接的下划线,鼠标移上 去的进候改变颜色并添加下划线,连接后的颜色不变为蓝色。我本意也是如此,可是在 IE 里浏览的结果告诉你,不是这样的。而是有一点点小改变,就是连接了之后,当鼠标再次移 上去的时候,本来是有下划线的,变成没有了。这是什么原因呢,一般来说是有的呀!那是 为什么了, 接着我从别的网站找了一个和我定义的差不多的 css, 分析一下他们的 css 源码, 差不多呀(就颜色不同和多了一些其它参数),其它多的参数很快被我排除,因为那些参数 我用不着,就停在颜色上,刚开始我还以为我是色盲呢!但是还是很快就又否定了,我把找 到的 css 放到我的主页上很正常,并把颜色改成我的颜色,还是很正常。这也不是,那也不 是,那为什么了。为什么一样的代码会有两种效果?为什么? 就在我准备上网求助的时候,突然我的眼睛一亮,该不会是这个原因吧!原来那个我找 来的代码和我自己的代码, 只有一点点不同就是---顺序不同, 因为我想顺序不是很重要吧! 就没有注意。接下来就是改了,再一试,哇,成功!唉看来以后定义 css 只有手写的或在 DW 里定义了再改。真麻烦,我还以为有 DW 就变简单呢,没想到还是要手定代码。如果那位 高手还有好办法请来信告之!以下是改了的代码:(是不是不容易注意啊!)
以下为引用的内容: < style type="text/css"> < !-a:link { color: #3333FF; text-decoration: none} a:visited { color: #3333FF; text-decoration: none} a:hover { color: #FF3333; text-decoration: underline} --> < /style>

Dreamweaver 中应用 CSS 的技巧到此结束,希望对大家有所帮助.

Dreamweaver 套用源格式命令应用技巧
我们在 IE 看网站,查看源文件的时候。看到有些网站的代码很整齐,有 些网站代码很乱。 一般做网站写前端代码都是在 Dreamweaver 上写的, DW 上看代码很整齐。 在 可在 IE 上查看源文件的时候就很乱,让别人看上去显的很不专业。 如图:

不知道怎么整齐化代码, 不知道是自己笨还是不肯去钻研解决, 过了许久后, 才得知解决办法。 在 DW 的命令菜单里面有个套用源格式选项(我的是 DW8.0 版本, 其他版本可 能不叫这个名字,应该也比较好找),一点就整齐化代码了。

Dreamweaver 常用技巧
1> 在 Dreamweaver 中,如何输入一个空格呢?

输入空格的问题,在 DW 似乎已成了一个老生常谈的问题,我们可能在许多 介绍 DW 使用方面的书籍或文章中看到过 N 次。 DW 中对空格输入的限制是针对“半角”文字状态而言的,因此通过将输入 法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能 ABC 为例),按 Shift+Space 切换到全角状态,现在应该没问题了。 此外, 你还可以通过许多“变通”的方法达到录入空格的目的,比如常用的 是: 直接在源代码中加入代表空格的 HTML 代码“&nbsp”; 输入一定长度的文字 对象后, 然后调整文字的颜色与当前的背景颜色相同等等,不过注意的是后者在 一些浏览器中可能显示上有点问题。 2> 如何在浏览器地址栏前添加自定义的小图标? 你是不是记得有时在浏览网易网站的首页时, 在地址 WWW.163.COM 前会显示 一个“易”字样的小图标。而默认情况下,这个图标是一个 IE 浏览器的指定图 片。 其实这也不是什么高深技术,只不过在网站目录下添加了一个特定文件而 已。 这时,我们需要预先制作一个图标文件,大小为 16*16 像素。文件扩展名为 ico,然后上传到相应目录中。在 HTML 源文件“<head></head>”之间添加如下 代码: <Link Rel="SHORTCUT ICON" href="http://图片的地址(注意与刚才的目 录对应)"> 其中的“SHORTCUT ICON”即为该图标的名称。当然如果用户使用 IE5 或以 上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别! 3> 为什么,我本来设计很好的网页,在浏览器窗口最小化时会变的丑陋难 堪? 这应该是个很值得大家注意的问题,也就是说,在全屏状态下浏览网页内容 时, 一点问题也没有。 当我们使用窗口的最小化命令或手动的调整窗口的大小时, 问题就慢慢出现了。 网页内容会把当前窗口作为显示范围, 依次下挫。 举个例子, 和在记事本中有“自动换行”和“没换行”的差别是完全一样的。 解决这个问题,我们必须从网页的布局说起,一般情况下,网页内容的定位 大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。 请看表格的属性面板显示: 你可能已经注意到了, 在表格的高宽设定选择上提供了两种不同的类型,百 分比和像素。 其中百分比的使用将会产生前面说到的那个毛病,将其全部更正为 Pixels 单位的实际大小就可以了。

4> 如何改变网页显示时,最顶部的提示信息? 浏览网页时, 顶部的提示信息往往代表了网页内容的关键所在,有助于访问 者提前了解网页内容。在 DW4 前,没有在功能上直接提供该操作,我们往往通过 在源代码中应用“title”属性来完成。进入 DW4 就简单多了。 直接在编辑窗口最上方的“title”输入框内键入所需要的文字信息即可。 5> 怎么样,才能为图片添加指定颜色的边框? 对于没有边框的图片而言,直接插入到网页中,在显示效果上是相当差的。 记得在微软的 FP 中要给图片添加满意的边框还是相当麻烦的。 不过在 DW 中就显得容易多了,因为这里有一个“Border”属性,可以让你 直接设置边框的宽度。 宽度设好了, 你一定会问, 颜色呢?面板上并没有提供颜色的选择呀! 呵呵, 其实这里有一个技巧问题,用鼠标选择图片对象,注意不是点击选中,而是拖动 选择。象设定文字颜色一样进行就可以了。 6> 如何添加图片及链接文字的提示信息? 在我们浏览网页时, 当鼠标停留在图片对象或链接上时,在鼠标的右下有时 会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是 很重要的。 下面先看看图片提示信息的添加,选中图片对象,在属性面板里你会发现有 个“Alt”输入框。默认情况下,该输入框是空白的。在这里录入需要的提示内 容就可以了。 那么链接提示的制作就没这么简单了。因为 DW 中没有直接提供该功能,因 此我们需要通过添加 HTML 代码来实现。 在<a href=“” >中添加“title”属性。title=提示内容即可。 7> 如何把自己的 ZIP 或其他类型的文件供别人下载? 在不少初级网页制作者看来,好象通过鼠标单击完成下载是件很"神秘"的事, 实际上远非如此.在 DW 中凡是不被浏览器识别的格式文件 (HTM,HTML,ASP,PHP.PERL,SHTML 等以外的)作为链接目标时,默认的操作都是下 载. 这时你只需要,把要浏览者下载的文件名写好,然后制作一个到目标文件的 链接.注意目录一定不要搞错. 8> 怎样才能够保证网页中文字不跟随浏览器字体大小设置而变动? 大家都知道,在 IE 浏览器的功能设置中, 有一个可以自由设置窗口内容字体 大小的功能, 这样由于不同访问者的习惯问题,呈现在他们面前的网页有时也会 不同。 比如你可能本来设计时用的是 2 号字体,结果由于用户对浏览器的额外设 定,变的更大了,这时显示效果上就出问题了。 那么解决的办法就是将网页内容定性的强制在某个合适的大小上。 即不容许 他变化。通过 CSS 样式表对字体进行强制性控制就可以实现这个要求了。

9> 以新窗口的形式打开目标链接? 以新窗口打开,顾名思义,也就是在不覆盖当前窗口的前提下,另外打开一 个浏览器窗口。你可以直接在连接代码中<a href="" >加入“Target=_blank”。 如果你的 HTML 比较差的话,在 DW 属性面板上同样提供了这个设置,当你在 Link 输入框中键入 WWW 网址时,后面的 Target 下拉框同时也被激活了。 选择最上的“blank”就可以了。 10> 如何让网页载入时,象许多商业网站那样,弹出一个广告窗口 这在不少大型商业网站中,是时常见到的。在 DW 中可以轻松通过 Behavior 行为实现。 既然是载入时,我们可以把整个网页内容视为事件对象。在 DW 编辑窗口中 鼠标点击左下角的“<body>”标签,这时你能注意到全部网页内容已经选中了。 单击“快速启动板”中的“Behavior”按钮,进入行为面板, 选择“Open Browse Window”项,这时你还可以对窗口样式进行自定义,比 如大小,工具按钮的保留等等。另外还有一点就是别忘了对应的事件是 “Onload”. 11> 我的快速启动板中没有"Timelines",怎么办? DW 从升级到 4 版本后,在快速启动板中增添了几个新的项目,比如 Assets 等等。这时原来在上面的 Timelins(时间线)按钮被挤了下去。 当然如果你急于现在就使用它的话,仍然可以通过菜单 “Windows”-“Timelines”找到。不过毕竟不如放在启动板中方便,这时我们 能通过设置把它添加进来! “Edit”-“Preference”进入窗口,在左边的项目列表中选择“panels” (面板),单击上面的“+”号按钮,从下拉列表中选择“Timelines”。这时时 间线已经自动添加到当前的“Show in Launcher”列表内容里,OK。更改后的 “Launcher”面板 同时你还可以根据自己的需要自由的选择面板中出现的按钮选项, 以提高 工作效率。 12> 作一个网页让它可以每隔 5 分钟自动刷新一次,如何实现? 上网浏览时,我们经常会遇到一些网页。在隔一段时间没有响应时,它会自 动刷新一次。除了可以起到提醒访问者的目的外,当新的刷新地址不是当前 URL 时,实现的就是自动跳转的功能。 无论是重复刷新,还是自动跳转。在网页设计中,都是相当实用的操作。下 面我们来介绍下它们的制作方法。 选择 DW“Object”面板的“Head”部分, 注意默认情况下, 显示的是 Common 的“内容”。 单击上面的“Refresh”按钮,

其中“Delay”输入框中键入刷新延迟的时间(单位:秒),“Action”为 刷新指定的目标 URL。因为现在是刷新当前页面,直接选单选项“Refresh This Document”即可。 13> 如何定义网页的关键字(Keyname)? 当用户使用搜索引擎 search 合适内容的网页时,关键字起着一个不容忽视 的作用。大多的搜索服务器会每隔一段时间自动探测网络中是否有新网页产生, 并把他们按关键字进行记录,以方便用户查询。 你当然想让你的网页出现在搜索引擎的查询返回列表中了, 这时关键字的定 义就尤为重要了。 同样在“Head”面板部分, 单击“Keywords”按钮, 录入需要逐个定义的关键字即可,注意每个关键字以“;”号隔开,数目没 有限制。 14> 如何在编辑窗口中,隐藏一些不必要的标签? 当用户在网页中插入了太多的不可见元素时, 在编辑窗口的最上面就会显示 一排相应的标示标签, 用来方便用户随时能找到它们。虽然这些标签本身并不影 响浏览器里的显示效果,但多了以后,往往使网页内容不得不错位,从而一定程 度上妨碍网页视觉上的调整,那么怎么样才能把这些东东去掉呢? 进入“Preperence”面板,列表中选择“Invisibel Elements”, 勾掉你不想显示的项目前的“对号”即可,比如 Scripts 等 15>安排不支持“框架”的浏览器的显示内容? 我们知道, 目前的浏览器类型很多,因此我们设计网页时最先考虑到的往往 是“这个东西是不是在不同的浏览器中都能显示好呢?”。框架就是一个例子! 不过避免开这点,很简单,你只需要在源代码中加入下面的内容就可以了。 < BODY><noframes> ---本网页中包含有框架结构,如果您不能正常显示的 话,请下载新的浏览器版本或更换主流浏览器--- < /noframes></ BODY> 16> 如何避免别人把你的网页放在框架中? 一些居心不良的人, 经常偷着窃取别人的劳动成果,比如把别人精心制作的 网页以子页的形式放到自己的框架中。 那么怎样避免自己的网页内容被“盗用”呢? 你只需要在网页源代码的<head></head>之间加入以下代码内容: <script language=“javascript”><!-if (self!=top){top.location=self.location;} -->< /script> 17> 怎样加入注释内容? 注释内容, 顾名思义只是作为说明内容出现的,因此在浏览时不会出现在网 页中。 它的作用是对某些重要或复杂代码进行必要的标示, 以更方便快捷的找到。

进入“Object”面板的“Invisibel”部分(即不可见元素),选择插入 “Comment”按钮, 在“Comment”中键入必要的信息。这时如果你返回到源代码中,会看到这 些操作添加的不过是下面格式的一段代码: <!--这是需要填写的注释内容--> 18> 水平线,为什么不能设置颜色? 在 DW 中,当通过菜单“Insert”-“Horizonal Rule”插入水平线时,在 属性面板中你会发现并没有提供关于水平线颜色的设置,因为最早 NC 中不支持 标签<hr>(水平线的 HTML 代码)的 COLOR 属性,所以 DW 也没有关于它的设置。 看来需要的话,我们只能直接进入源文件更改了。 <hr color="对应颜色的代码"> 19> 如何设置可以关闭当前窗口的功能? 这里我们可以先输入用来标示的文字“关闭窗口”,用鼠标拖动选中它,在 “Link”输入框中键入“/”,同时切入源代码窗口,在链接代码中键入该事件 -onclick=“javascript:window.close(); return false;”。 完整的代码为:< a href=“/”onclick=“javascript:window.close(); return false;”>关闭窗口< /a> 当然你也可以将文字“关闭窗口”换成其他的对象,比如图片,按钮等等! 20> 定时自动关闭的窗口又是怎样的呢? 上面提到了个关闭窗口的功能,那么现在的自动关闭又是怎么实现的呢? 在源代码<body>后加入下面的代码: < script LANGUAGE=“javascript”> <!-setTimeout('window.close();', 10000); --> < /script> 其中的 set Timeout 是一个用来设定延迟时间的函数,这里 10000 表示 10 秒钟。 21> 如何更改浏览器中鼠标的"形状"? 一般情况下, 鼠标在浏览器中以“箭头”的样式出现,那么我们能不能把它 更改为自己喜欢的其他样式类型呢? 改变鼠标形状在 DW 中是通过“CSS 样式表”来实现的。 菜单“文字 (Text) ”-“CSS 样式表 (CSS style) ”-“Edit style sheet”, 弹出样式表的编辑窗口,也可以单击快速启动板中的 CSS style 按钮找到,单击 “New”按钮,选择默认的“Make custom style”,同时在下面的 Define 中使 该样式只应用到当前网页文档,“This document only”。在“样式定义”窗口 的左边列表项中选择“Extensing” (扩展项) 相应右边设置在“Cursor” , (鼠

标)中,下拉选择合适的形状即可,确定后返回,按 F12 在浏览器中观察效果, 不满意的话,还可以对样式进行修改。 22>如何去除掉链接文字下面的下划线? 在我们完成链接制作后,链接文字内容往往被自动在下面添加一条下划线, 用来标示该内容包含超级链接。 当一个网页中链接比较多时,就显得有些杂乱的 感觉了, 其实我们可以很方便的把它去掉。同样进入“Edit style sheet”窗口, 单击“New”确立新样式, 这里的 Type (类型) 需要选择的是“Redefine HTML 中, Tag”,同时在具体的标记 Tag 中选中代表超级链接的“a”,单击 OK。 编辑该样式,左边列表中选“Type”,勾取“Decoration”(修饰)中的 “None”复选框,这时所有网页中的链接文字下划线都被清除掉了。

23> 怎样让鼠标在链接文字上方“悬停”时,产生变色,变形等效果? 访问网站时,我们遇到的最平常不过的一种效果就是“鼠标悬停响应”了, 所谓的“鼠标悬停响应”表现在链接文字上,就包括改变颜色,修饰效果(下划 线,中划线)等多种选择。 由于这种效果很好的起到了对目标内容的强调作用, 因此无论是个人网站还 是一些大的商业网站(如新浪,搜狐,网易等)都有应用。 在上个问题中,你已经知道了去除掉链接下划线的方法,这里不再赘述。下 面的问题将是如何添加鼠标响应事件的过程。 同样进入“Edit style sheet”窗口,单击“New”确立新样式,不同的是 现在的 Type 类型中选择最后的一项-“Use CSS selector”,“Selector”选单 中选择“a:hover” OK,进入编辑样式窗口,设定“Type”项中的文字颜色为 “红色”,当然你还可以添加鼠标悬停时出现下划线的效果。 24>如何让网页的背景图片不跟随内容滚动? 背景图片是很多网页设计者经常添加的东西,当网页内容超出一屏时,拉动 滚动条背景图片会与内容相对静止的一起滚动,那么能否锁定背景不跟随滚动 呢?当然可以进入“Edit style sheet”窗口, 单击“New”确立新样式, TYpe 在 中选择“Redefine HTML Tag”,同时 Tag 选单选中“Body”,在左边列表中选 择“Background”。 设定“Attachment”(附件)为“fixed”。其中 scroll 代表默认使用的滚动显示。

25> 背景音乐你一定知道吧,怎么添加呢? 在微软的网页工具-Frontpage 中,有关于背景音乐的设置功能,那么 DW 显 然没有做到这点,因此要使用的话,只能在源代码中手动添加了。 在使用前,提醒大家一点,使用背景音乐一定要注意网页文件的大小,不能 顾此失彼。代码如下: < EMBED src=”music.mid”autostart=“true”loop=“2”width=“80”height=“30 ”> 其中 src 指定音乐文件的位置,autostart 为音乐文件上传后的动作,true 表示自动开始播放,false 不播放(默认值)。 27> 如何自动加入网页更改后的日期? 只需要在源文件<body></body>之间添加如下代码即可。 < Script Language=“javascript”><!-document.write(“Last Updated:”+document.lastModified); -->< /Script> 在浏览器中的显示样式为:“Last Updated:2001/8/19” 28> 怎样控制弹出 POPUP 信息? 有时,当我们点击链接时,会出现一些着重性说明的提示信息,也就是弹出 信息。 比如当某个链接还没有完成目标内容页的制作时,就可以应用 POPUP 信息 解释一下。 在网页中合适位置输入链接文字,选中,在属性面板中制作链接。在仍保持 选中状态的前提下,单击快速启动板中的“Behavior”按钮, 点击左上的“+”号,从列表中选中“Popun message”,在随后的窗口中输 入需要提示的信息, 设定该动作的鼠标事件(Events)为点击(onclick)。在浏览器中预览效 果如下 29> 隐藏浏览器中状态栏的 URL 地址信息的方法? 浏览网页, 当鼠标停留在链接上方时,在下面的状态栏中会自动显示该链接 目标地址,考虑到安全方面的问题,有时我们需要把它重置为“零”,即设为空 白。 现在只需要在链接代码中作些手脚就可以实现了, < a href=http://tech.163.com/school onMouseOver="window.status='none';return true">网易学院< /a> 30>如何改变状态栏里的提示文字? 默认情况下,当网页被载入时,在状态栏里将显示该网页的地址等信息。想 不想让它变的更有魅力呢?

在 DW“Behavior”行为板中,单击“+”号选择“Set Text Set”下的 “Text Of Status Bar”选项, 在“Set Text of Status Bar”窗口中输入类似“欢迎你光临本网站--网管 留言”等 Message 信息。 31> 如何建立电子邮件的表单处理方式? 表单应该是网页交互功能中必不可少的元素,表单的功能缘于信息的交互, 因此表单的处理往往涉及到网络高级编程语言的使用,你或许说,哇!我不会编 程呀!没关系,其实对于一些简单的表单内容处理靠电子邮件也可以实现。 先看下面的代码: <form name="content" method="post" action="需要使用的处理程序 " ></form> 上面是一个典型的表单的 HTML 源代码,其中 METHOD 决定采用方式,包括 POST 和 GET 两种。ACTION 也就是咱们上面说的处理程序,一般可通过 ASP/PHP/CGI 实现。 那么用电子邮件怎么实现呢?action=mailto:XXX@163.com,这样当点击提 交按钮后, 就会弹出一个提示窗口,单击“确定”表单内容会发送到指定的邮箱 中。 32> 怎样制作规范的电子邮件链接? 所谓的“电子邮件链接”即是当我们点击它时, 浏览器会自动调用默认使用 的邮件客户端程序发送电子邮件。 输入“有问题 MAIL ME”字样,鼠标拖拉选中,切换到属性面板,在 LINK 输入框中键入如下命令: Mailto:XXX@163.com?Subject=网友来信&bc=其他电子邮件地址&bcc=其 他电子邮件地址。其中 Mailto 为邮件链接的协议,Subject 为邮件的标题,bc 是同时抄送的邮件地址,bcc 代表的也就是暗送了。 33> 如何制作“空链接”? 空链接也就是,没有链接对象的链接,在空链接中,目标 URL 是用“#”来 表示的。也就是说制作链接时,只要在属性板的 LINK 输入框中录入#标记,它就 是个空链接了。 空链接的出现涉及到多方面的因素,比如一些没有定期完成的页面,又为了 保持页面显示上的一致(链接样式与普通文字样式的不同),就可以使用它了。 34> 点击空链接时,页面往往重置到页首端,如何处理? 在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而 影响用户正常的阅读内容,我们当然希望它能保持不动了。 这时, 你能够用代码“javascript:void(null)”代替原来的“#”标记,回 头看看,这个问题已经解决了。 35> 如何定制可自由在页面内跳转的链接?

如果你经常在网上订阅一些免费的电子杂志, 一定对这种“标签链接”不陌 生了,通过一个类似目录的列表,可方便的跳转到页面内的任何部分,无疑它的 使用是专门为“超长内容”网页设计的。 先确定链接指向的位置, 即屏幕跳转后停留的位置。进入“Object”面板的 “Invisibles”部分,选中目标文本,单击“Insert Named Anchor”按钮,在 “Anchor Name”中键入标签名称,OK,这时在文本下面会自动出现红色虚线以 区别开普通的文本内容,注意它们在浏览器中不会出现。 然后就可以制作链接了,在属性板的 LINK 输入框录入“#nchor Name(刚才 的名字)”。当然如果你想指向另外一页中的某个位置,也是可以的,把这个小 尾巴放过去就行了。 36> 同时在一个图片上,作很多个链接,怎么办? 这个问题也就是我们平常说的“图片热点”(Image HOT)了,当然在 DW 里还有另外一个名字叫“图象热区域”。 选中图片,这时在属性面板左下的位置,有一个“Map”工具栏,其右边是 三个用来圈定不同区域的按钮,以其中的矩形工具为例,选中后,鼠标停留在图 片上会以一种“+”的形状显示出来,代表可以左右拖拉,完成后依次你可以完 成多个热点区域的链接制作。注意各区域不可重叠。 37> 怎样制作可以响应鼠标事件的翻转图片? 在许多网页中,我们经常会看到一些栏目标题,当鼠标滑过时,能变成另外 的样子。 其实它们中很多是通过两张不同的图片来实现的,也就是所谓的“翻转 图片”效果。 当然首先你要提前准备两张大小完全一样的图片, 以确保翻转时不会有什么 视觉上的不适,单击“Object”面板上的“Rollover Image” 弹出“翻转图片 设置”窗口,分别单击“Browse”按钮确定“Original image”和“Rollover image”的地址,注意一定要选中下面的“Preload Rollover image”复选框, 否则在鼠标滑过的瞬间,会产生一定的下载延迟而影响效果。 38> 如何制作“漫天飞舞”的图片? 在许多大型商业网站的首页中,你经常会看到不少来回飘来飘去的广告图 片,点击后可以链接到指定的地址,在 DW 中这点是通过 Timelines 来实现的。 首先在网页中插入目标图片,同时选中它,单击快速启动板中的 “Timelins”按钮进入“时间线”窗口,在时间轴 1frame 的位置鼠标右击,选 择“Add Object”,这时时间轴上会出现一兰色色条(默认 1-15frame),将镜 头停在 15frame 处,同时移动页面内图片到运动的终点位置。 现在一个简单的运动动画已经完成了,你可以通过在中间添加 keyframe 的方法调整路径的曲折度。单击上方的右箭头按钮预览效果。 39> 怎样制作在页面中“静态悬浮”的图片? 所谓的“静态悬浮”也就是图片总是试图停留在网页中的某个位置,因此 在视觉上有种跟着页面“走”的感觉,象悬浮着一样。

该效果的实现是通过 javascript 来完成的,一般要求有一定的编程能力。 好在 DW 提供了制作该效果的固定插件,因此就显得简单多了。 首先你必须先下载 stav 插件,将里面的两个文件(其中包括图片文件 Cross Browser Static Division.gif 和网页文件 Cross Browser Static Division.htm) 都拷贝到 DW 安装目录 Configuration\Objects\Common 下。 重新启动 DW,在 Object(对象)面板中,你会看到最底部已经多了 SI 项,选中 它在弹出的窗口中设定浮动层到上边和左边的距离,然后在图层中插入指定的内 容(这里为图片)即可。 40> 如何使文字和图片内容共处? 我们都知道,在 DW 中,图片对象往往是独占一行的,那么文字内容只能在 与其平行的一行的位置上,怎么样才可以让文字围绕着图片显示呢? 选中图片,在属性面板的右上方你能看到一个“Align”的属性选单,选择 “Left”,这时你会发现文字已经均匀的排列在图片的右边了。 41> 实现多个窗口的连接? 面板设计一直是 DW 的一大特色,到了 DW4 版本,所用到的面板已经相当多 了,那么我们如何才能更高效的利用它呢? “窗口连接”就是一种方便大家自 定义的技术功能, 简单的说, 就是可以根据需要将两个或更多个面板放到一个窗 口中来。 鼠标点击拖动一个面板的 Tab 栏到两一个面板上,当你看到一个黑色 边框时,松开鼠标,这时两个面板已经合二为一了。 42> 如何制作一条宽度为 1 的细线? 在 DW 中,尽管水平线是以“Line”形式出现的,但在制作细线时,它表现 的并不尽如人意,主要是过粗,没有需要的细腻感! 那么我们可以采取变通的方法以表格的应用来实现。 在网页中插入一个 1 行 1 列的表格,将表格的 “cellpadding”“cellspacing”都设置为“0”, 同时将单元格的“bgcolor” 设定为红色,当然你也可以使用其他的颜色来代替,“Height”设定高度为 1。 还有最关键的一步,查看源代码,将< td>< /td>中的“ ”去掉即可。 43>如何制作一个边框为 1 的方格? 很明显,我们现在还是要通过表格的设置来完成。 或许你会说,这还不简单嘛!建立一个 1 行 1 列的表格,然后将它的 “Border”值设为 1 不就可以了。实际上,用这种方法制作的表格根本不是所说 的边框为 1 的方格,而是要“粗”的多! 同样先插入一个 1 行 1 列的表格,将表格的“border”、“cellpadding” 设置为“0”, “cellspacing”设置为“1”。 设定表格的“bgcolor”为红色 (即 为边框的颜色),同时设定单元格“bgcolor”为白色(即同背景色),OK 了。 44> 怎样设置根据不同的浏览器,返回不同的页面?

浏览器不同, 它所支持的技术和效果也不同。因而我们所设计的网页并不是 在所有的浏览器中都能正常显示或最佳显示。 这时一个判断浏览器的跳转就很必 要了。 当用户用不同类型或版本的浏览器打开时,可以返回不同的页面,以保证用 户的正常浏览。 单击快速启动板中的“Behavior”按钮,点“+”号,在下拉列 表中选择“Check Browse”。 45> 网页中可以随便拖动的对象是怎么建立的? 访问网站时,经常能见到不少可以用鼠标拖动的元素,其中以图片居多,比 如, 一张广告图片挡住了你想浏览的内容,你完全可以用鼠标选中把它扔到一边 去! 制作这种效果是通过图层的“Drag Layer”行为实现的,单击 Behavior 面 板中“+”号,选择“Drag Layer”,当然之前你必要保证目标图层处于选中状 态,进行简单设置后就 OK 了。

设计表单的标签和输入区
有一些元素,看着很简单,设计起来却很头疼。往往这样的元素都具有一个共同的特点 ——变化多,表单的设计就是如此。你说见过 20、30 种以上不同的表单,我并不惊讶,产 品需求、风格不同,必然五花八门。当然,换了设计师,表单的样式也可能会不同。然而, 不能让这种情况继续下去,表单不是艺术展。不要让你的才华阻碍了别人的前进。 表单就是一扇门 古有大禹, 三过家门而不入; 今有用户, 看到表单犯糊涂。 难道大禹遇到的是这样的门? 表单,尤其是注册表单,就像一扇门,穿过他才能看到完整的产品。所以千万别做这种 门,自己费事不说,用户也不会买账。这个设计最糟糕之处,就在于它有悖常理。好的设计 应当遵循于其自然规律,这样一来符合人们预期,使用起来也就顺畅。 表单中标签与输入区的 4 种对齐方式 ? 标签垂直顶对齐
? ?

标签水平右对齐 ? 标签水平左对齐 ? 标签在输入区内部 《Web Form Design》一书中对标签和输入区组合进行了一些研究,我整理了一份数据 比较的表格:

标签垂直顶对齐 标签和输入区垂直依次排列, 从而降低了对页面宽度的要求。 如果你的页面没有富裕的 空间用于标签和输入区的横向排列,这种组合是个不错的选择。

眼动轨迹表明,用户自上而下的扫描表单,焦点多集中在左侧一列,且跳动较小。

标签水平右对齐 标签右对齐和输入区水平排列, 从而降低了对页面高度的要求。 但与标签垂直顶对齐相 比,由于标签文字左侧参差不齐,对问题的认知和扫描时间变的更长。

眼动轨迹表明,用户花了更多时间在看问题,输入框对他们来说很简单。

标签水平左对齐 标签左对齐和输入区水平排列, 同样降低了对页面高度的要求。 标签左对齐有利于用户 对问题标签的扫描,但不利于填写答案,因为标签距离输入区较远,要重新定位到右侧输入 框,确实要消耗一点时间。

眼动轨迹表明, 用户花在定位输入区上的时间比看清标签更长, 从而影响了整个表单的 完成时间。

标签在输入区内部 这种方式虽然具备垂直组合的优点, 但仍应谨慎使用。 当焦点移入输入区后, 标签消失, 看不到问题,可能会忘记要回答什么,很郁闷,不得不清掉输入好的字,把“问题”还原出 来。这种组合比较适合只有一两个输入框的简短表单,而且人们对他很熟悉,不用费力去记 住标签提出的问题,比如:搜索框。

当你真的选择用这种表单的时候,注意,让标签和真实内容区分开来,一些约定俗成的 做法是减淡标签字色,在后面打上“?”;下拉菜单则在默认选项两侧打上“-”,以示区 别:

设计要有一条主线,贯穿于整个产品,别让人用着感觉像是几个设计师干的事。认真思 考一遍,就会有新一层的理解,这对我的工作有极大的帮助。

网页制作技巧:从切图到网页生成全攻略
鉴于很多朋友问到如何切图这个问题, 又鉴于这个问题可大可小, 一两句话是绝对讲不 清楚的,所以今天有空闲.就举一个简单的例子来说明这个问题吧!OK,让我们开始: step1:在 PhotoShop 中打开设计稿,如下图

选择工具板上的 slice 切片工具,先大刀阔斧的切上一番! 技巧: 大面积的色块单独切成一块, 尽可能的保持在水平线上的整齐(这个问题你们在 后面的制作页面中深有感触) step2:在 PhotoShop 中选择 file-save for web...来输出,这里要注意一些参数的选 择: 我们来看看红线所标识的 1,2,3 部分,将 1 所示的切片工具选中,然后点选 2 所示 的图片,在 3 所示的地方选择色值,如果色彩单一可以选择尽量小的色值位;(为什么要这 样??)答案:这样会大大减小文件的大小,同时又能比较好的保持图片的色彩;设置好后 点 OK 输出文件,这里的文件包括了一个 htm 和 images 文件夹,如图:这里候你的页面才算 完成了一半,接下来在 Dreamweaver 里建立站点: 定义站点 在图示左边的 site name 中为站点起一个名字,如 example 然后在下面的 local root folder 中选择我们刚才导出的站点所以的文件夹; 站点建好后在 site map 中我们看到:(为什么要建立站点?)建立站点可以使我们养成一种很好的习惯, 就是把一个网站所包含的文件, 文件夹有条理的放在一起, 同时我们很容易的将这个站点移 动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求 你,我在事际工作中就遇到这样的同事,没有习惯为页面建立站点,当然后果的要麻烦少少 了)

step4:重新制作页面表格(为什么?)通常在 photoshop 中直接导出的 htm 文件是不可以 直接使用的,因为有些地方在实际运用时要作调整,比如有动态文字的地方,我们需要在页 面中输入页不是使用图片, 那么图片就要把它拿走, 如果你在直接生成的 htm 中拿走不想要 的图片再加上你想要的东西, 你们发现页面将变得惨不忍睹, 整个页面可能完全乱了套! 好 了,先来分析一下导出的 htm 文件吧: 根据这个页面表格所示,我们在新的页面中建立一个三行一列的表格

注意,把 cellpadding,cellspacing,border 三项值设为 0,这个很重要;因为图片中 我们不希望看到空隙和错位; 然后再在第一行中插入一个三行两列的表格, 并合并左边三列 的表格,如图:

插入表格的时个要注意对比原 htm 文件中的内容,思考为什么这样做; 接下来在第二行中插入一个二行二列的表格, 按上面的方法合并左边的格子, 并在右边格子 的第一行插入一个一行五列的表格如图示:

最 后 在 下 面 一 行 插 入 一 个 三 行 二 列 的 表 格 , 并 将 图 示 中 1,2 外 分 别 合 并 :

最后得到的页面应该是这样的:好了,现在我们的任务就是往表格里面加图加内容了! 这里就不再赘述了。 还要提醒大家注意的是在加图片和内容时,表格单元格的 align,valign 这两个属性非 常重要,要不遗余力的运用它们来帮你做事!OK,自己实践一下!

网页切图处理与技巧(1)
一,概述 1,网页切图,是指经过切图后输出为 Html 的页面。 2,网页切图处理,主要是指处理输出后的 Html 页面,经过 Html 格式的编辑后,使其能够 满足实际要求(可以自由伸缩等等) 3, 处理网页切图的工具可以有 Frontpage 或 Dreamweaver, 一般来说建议使用 Dreamweaver 。 二,网页切图处理 1,处理过程一般为: 1)使用 Dreamweaver 软件打开输出后的 html 页面。 2)去掉 Html 中多余的图片(Html 格式输出后,切片均变为了图片) 3)将需要随页面大小自动伸缩的部分的图片变为背景,并设置背景以某种方式自动延伸。 4)某些部分可能不要自动伸缩,但需要在这些部分上面显示文字,这时也要将这部分图片 变为背景,只是背景不做任何方式的延伸。 5)在前面我说过“块”的概念,这个概念在网页切图处理过程中非常重要。 6)切图软件在将切图以 Html 格式输出成网页后,该网页的 Html 代码结构一般不是我们所 要的,因为里面有大量的 rowspan 和 colspan 结构,这极大限制了网页的自由伸缩。 7)解决办法:将整个页面放在一个 table 中,其中每个块是一个子 table,然后在每个子 table 里面再细分,甚至会出现子子子 table(复杂的页面有这种情况),然后将相应的图 片放置到我们做的 table 结构中。而后在进行上面的第 2、3、4 步骤。

网页设计切图技巧(2)
做网站必须先形成一个框架,即使用笔在纸上勾画一下。那也免不了最后 用作图工具 PS 等处理。 所以最好用 PS 做出效果图,然后切。 那么切的要领是什么呢? 一、原则:NO1、图切的越小越好 NO2、图切的越少越好。那对于一整张图 来说,同时达到这两个目标自然是矛盾的。所以这种一点,差不多一个网页切成 20-30 个图加载速度是不受影响的。 二、技巧: NO1、一行一行的切。 NO2、背景的切成小条; NO3、不能分开的不分好了;选行的时候要注意怎么样合理。 NO4、切的时候要放大,一次移动一个像素就非常明显,否则肯定是不能达 到原图与网页的一致! 别的经验在切中慢慢积累吧。


赞助商链接
相关文章:
dreamweaver8.0入门图文教程:Dreamweaver 8 操作
入门图文教程: dreamweaver8.0 入门图文教程: Dreamweaver 8 操作 环境 第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来 了解 ...
dreamweaver入门图文详细教程
入门图文教程: dreamweaver8.0 入门图文教程: Dreamweaver 8 操作 环境 第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来 了解 ...
dreamweaver8.0入门图文教程
dreamweaver8.0入门图文教程_IT认证_资格考试/认证_教育专区。Dreamweaver 8 操作...一、Dreamweaver8 的操作环境 在首次启动 Dreamweaver8 时会出现一个“工作区...
dreamweaver8.0入门图文教程
dreamweaver8.0入门图文教程dreamweaver8.0入门图文教程隐藏>> Dreamweaver 8 操作环境一、界面认识: 在首次启动 Dreamweaver8 时会出现一个“工作区设置”对话框,在...
Dreamweaver8初学教程
Dreamweaver8初学教程_互联网_IT/计算机_专业资料。Dreamweaver8 初学教程 Dreamweaver8.0 本地站点的搭建与管理要制作一个能够被大家浏览的网站, 首先需要在本地...
(1)dreamweaver8.0入门图文教程
dreamweaver8.0 入门图文教程: Dreamweaver 8 操作 环境 第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来 了解 Dreamweaver8 的...
8Dreamweaver8.0入门图文教程创建CSS样式
8Dreamweaver8.0入门图文教程创建CSS样式_互联网_IT/计算机_专业资料。Dreamweaver...我们可以针对 某一个标签来定义层叠样式表,也就是说定义的层叠样式表将只应用...
dreamweaver8[1].0入门图文教程
dreamweaver8[1].0入门图文教程_计算机软件及应用_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 dreamweaver8[1].0入门图文教程_计算机软件及应用_IT/...
Dreamweaver8教程_(一)
暂无评价|0人阅读|0次下载|举报文档Dreamweaver8教程_()_计算机软件及应用_IT...进入文档窗口,我们可以在文档区域中进行输入文字、插入表 格和编辑图片等操作。 ...
基础教程 Dreamweaver8.0
基础教程 Dreamweaver8.0_IT/计算机_专业资料。Dreamweaver8.0 教程1...图 1-8 最大化文档窗口按钮 (2)文档编辑窗口的标题栏 当文档窗口有一个标题...
更多相关标签: