Dreamweaver.CS4.完全自学教程7
Dreamweaver CS4案例教程 第7章
案例2 案例2 改变表格或单元格的宽度与高度
使用属性面板可以非常方便地改变表格和单元格的宽 度与高度，也可取消宽度与高度的设置。 度与高度，也可取消宽度与高度的设置。
通过拖动表格的边框，也可轻易改变表格的宽度与高 通过拖动表格的边框， 度。
案例3 拆分与 案例3 拆分与合并单元格
1．拆分单元格 所谓拆分单元格， 所谓拆分单元格，就是将一个单元格拆分为几行或几 列。
案例6 案例6 制作精美的圆角表格
在做网页时为了美化页面，常常要把表格制作成圆角 在做网页时为了美化页面， 表格，这样可以使整个页面看起来更加柔和、美观。 表格，这样可以使整个页面看起来更加柔和、美观。
7.2 上机实践——用表格布局主页 上机实践——用表格布局主页
接下来我们以下面的实例来讲解利用表格布局网页的 方法（具体操作见视频７ 方法（具体操作见视频７-２）。
2．选择框架和框架集
在文档窗口中选择框架的方法为，按住【Alt】键，然后 在文档窗口中选择框架的方法为，按住【Alt】 在要选择的框架内单击即可，被选中的框架边线为虚线。 在要选择的框架内单击即可，被选中的框架边线为虚线。
被选中的框架
如要选择框架集，则单击该框架集上的任意框架即可，选 如要选择框架集，则单击该框架集上的任意框架即可， 中的框架集所有边框都呈虚线显示。 中的框架集所有边框都呈虚线显示。 利用“框架”面板选择框架时，直接在面板中单击即可。 利用“框架”面板选择框架时，直接在面板中单击即可。 选择框架集时，在面板中单击框架集的边框即可。 选择框架集时，在面板中单击框架集的边框即可。
2．排序表格内容 表格作为一种常见的数据处理形式， 表格作为一种常见的数据处理形式，免不了要对其中 的数据进行排序。 的数据进行排序。
Dreamweaver学习教程 看完基本掌握
第一课基础知识部分一、学习前的准备工作∙准备好一个笔记本（没有准备此物者就不用参加）。
∙准备好一本教材。
∙测试和熟悉所有的软硬件环境。
∙有一个良好的心态和坚持下去的决心，网页设计不难但要设计出优秀的网页也不容易。
二、学习方法和要求∙记录老师讲的每一个知识点，特别是自己没有听懂的内容。
∙每次学习完成以后写好总结，分别总结自己没搞懂的和掌握的两方面的内容（不需要写一些如以后认真啊，很好玩啊之类的废话）。
∙老师会检查你们的学习笔记。
∙网页制作并不是一门单纯的技术，是一门集美术、设计、编程与一体的综合性技能。
所以你在学习之余还要自学PS、Flash等等之类的课程。
∙英语基础不好的同学还要花一定的时间去记忆一些关键的英语单词。
三、文件和目录∙计算机基础课程里面讲述的文件目录和文件的概念。
∙所有出现在网页中的素材和文件以及目录请使用英文名，不要使用中文名。
∙文件的扩展名的意义，你可以随意改变文件名，但不能随便改变文件的扩展名。
∙记住网页文件的扩展名。
o每一个网站都必须有的首页文件名：文件名---Default或Index 扩展名---asp或htm或html或aspxo在DM的文件标签中，利用文件名前面的图标来区别目录和文件的类型。
如下图oo首页与其他页面之间的连接关系如下图o四、网站的制作基本步骤∙在本机建立自己的工作目录（A---在有还原系统的机房上机每次都应该做这个步骤）。
∙打开DM，执行“站点”--“新建”，建立自己的站点，并且保证能够用正确的用户名和密码与远程网站联通（A）。
∙下载远程网站上的文件到本地进行编辑，然后将编辑好的文件保存(注意文件被修改以后的状态标记--有星号)，再上传到网站进行浏览测试。
o建议：测试的时候请在桌面建立一个测试的快捷方式，避免多次输入测试的URL地址而浪费时间，也可以直接在测试窗口中单击右键进行刷新。
提醒：不要直接在文件上双击测试，当你网页中有执行代码的时候就无法正常显示）。
Dreamweaver_cs4_网站制作
Dreamweaver cs4 网站制作入门网站制作实例一： Cafe TownsendCafe Townsend一、创建工作目录工作目录就是你建立站点时所要使用的本地文件夹，Dreamweaver 将此文件夹称为本地站点。
本地文件夹通常是你的计算机硬盘上的一个文件夹，例如：D:\mywebsites 。
1、在D：盘上创建名为mywebsites 的新文件夹。
2、下载所需素材。
cafe_townsend.rar3、将下载得到的素材解压缩到mywebsites 文件夹中。
你将使用D:\mywebsites\cafe_townsend 文件夹作为站点“cafe townsend” 的根文件夹（主文件夹）。
二、定义本地文件夹您必须为创建的每一个新Web 站点定义Dreamweaver 本地文件夹。
本地文件夹是您在硬盘上用来存储站点文件的工作副本的文件夹。
如果不定义本地文件夹，Dreamweaver 中的某些功能可能无法正确运行。
如果定义了本地文件夹，您还可以管理文件，并使用一些文件传输方法在本地与Web 服务器之间传输文件。
1、启动Dreamweaver，选择“站点”>“管理站点”。
2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。
3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。
4、在“站点名称”文本框中，输入Cafe Townsend 作为站点名称。
5、在“本地根文件夹”文本框中，指定在上一节中复制到D:\mywebsite 文件夹中的cafe_t ownsend 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。
6、在“默认图像文件夹”文本框中，指定cafe_townsend 文件夹中已有的images 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。
Dreamweaver_CS4_课件与自学教程 6共7
第5章 Dreamweaver与网络课件
1．插入AP Div ．插入 AP元素通常是绝对定位的Div标签，它是分配有绝对位 置的HTML网页元素，在Dreamweaver CS4中可以轻松地创 建AP Div。在网页中插入AP Div的操作比较简单，只需在 【插入】工具栏的【布局】标签中单击 按钮，然后按住
CSS是层叠样式表的简称，它是一组格式设置规则，用 于控制网页内容的外观。使用CSS可以非常灵活地控制页面 的外观，可以控制许多文本属性，如字体、大小、粗体、下 划线、文本阴影等，还可以确保在多个浏览器中以更加一致 的方式处理页面外观。除此之外，CSS还可以控制网页中块 级别元素的格式与定位，这将涉及到DIV标签。DIV标签是 用来定义网页内容中的逻辑区域的标签，使用DIV标签可以 将内容居中、创建列效果、创建不同的颜色区域等，另外还 可以绝对定位，这时的DIV标签视为AP元素。AP Div元素与 以前版本中的图层有一定的相似性，可以用于绝对定位网页 元素。
第5章 Dreamweaver与网络课件
■选择【不能调整大小】复选框时，浏览者在浏览页面 时不能通过拖曳框架边框改变框架大小。 ■ 【边框】：用于设置是否显示框架的边框。选择 “是”选项时，将显示框架的边框；选择“否”选项时，将 隐藏框架的边框；选择“默认”选项时，将显示默认的框架 边框。 ■ 【边框颜色】：用于设置框架边框的颜色。该颜色 将覆盖框架集的边框颜色。 ■ 【边界宽度】：用于设置框架中的内容距框架左右 边界之间的空白宽度。 ■ 【边界高度】：用于设置框架中的内容距框架上下 边界之间的空白宽度。
第5章 Dreamweaver与网络课件
图5-65 【网格设置】子菜单
第5章 Dreamweaver与网络课件
■选择【显示网格】命令，可以在编辑窗口中显示网格。 ■选择【靠齐到网格】命令，可以使要移动的AP Div自 动吸附到网格线上。 ■选择【网格设置】命令，可以打开【网格设置】对话 框，如图5-66所示。在该对话框中可以设置网格线的颜色、 网格线的间隔大小以及网格线的显示方式等选项。
dreamweaver cs4
一、Dreamweaver cs4基础知识二、HTML基础知识三、文本的处理与控制四、建立超级链接五、在网页中使用图像六、在网页中使用多媒体八、使用AP Div布局页面九、使用框架布局页面三、网站的创建与管理二、HTML基础知识1．概念：HTML是HyperText Mark-up Language的缩写，即超文本标记语言，是用来制作网页的一种计算机语言。
HTML是一种信息组织方式，使浏览者可以自行选择阅读路径，浏览感兴趣的内容。
HTML也被称为标记语言，它对文件各部分功能进行分类的主要途径是通过特定的标记来完成，在HTML中，每个用来标记的符号都可以看作是一条命令，告诉浏览器应该如何显示文件的内容，HTML代码显示在浏览器中就是我们看到的“网页”。
2．元素HTML是由元素组成的，用于组织文件的内容和指导文件的输出格式。
大多数元素具有起始标记“<”和结尾标记“>”，在起始链接标签和结尾链接标签中间的部分就是元素体，如<body>…</body>。
每一个元素都有名称和可选择的属性，在起始链接标签内标明。
如，<body background=” background.gif”><h2>内容</h2>另一个内容<p></body>“<”表示起始链接标签，”body”是元素的名称，“<” 与”body”之间不能有空格，元素名称不分大小写，“background”是属性名，用来指明用什么方式填充背景，“=”指的是属性值，” background.gif”表示用文件” background.gif”来填充背景，完整的属性：属性名=”属性值”，一个元素可以有多种属性，各个属性用空格分开，“>”表示链接标签结束，第二三行是“body”元素的元素体，</body>是“body”元素的结尾标签链接，以” </”开始+元素名称，以“>”结束，一个元素体内可以有另外的元素（<h2>…</h2>标题元素，<p>分段元素）。
Dreamweaver_cs4_入门
Dreamweaver cs4 入门网页与网站：从城市到乡村，到老人到小孩，“上网”正在或者即将成为人们生活的一部分。
当我们输入一个网站的网址时，我们将在浏览器中看到各种各样的文字、图片、动画甚至视频，或者听到动听的音乐。
而承载这些内容的便是“网页”。
而“网站”，就是由各种各样的网页构成的一个集合。
网站的大小千差万别，大的网站包含成千上万个网页，如“新浪”、“网易”、“搜狐”等门户网站，小的网站则可能只包含几个甚至一个页面。
在这些网页中，有一个特殊的页面，它是我们输入某个网站的网址后看到的第一个页面，叫做这个网站的“主页”或者“首页”（Homepage)。
网页虽然看上去千姿百态，但是就其本质而言都是由HTML (Hypertext Markup Languag e)，即超文本标记语言构成的。
当用户浏览一个网页时，要先把该页面对应的源文件从提供这个文件的计算机（Web服务器）中，通过Internet网络传送到该用户的计算机中，然后，再由Web浏览器翻译成用户能看懂的“网页”。
网页的编辑：如果我们熟悉HTML语言，并且有足够的耐心，我们完全可用用最简单的文本编辑工具“记事本”来进行网页的制作与编辑。
而要进行网站不起来的高效开发，没有合适的工具显然是不行的。
网页制作的工具很多，如微软的Frontpage，Adobe公司的Golive、Macromedia 公司的D reamweaver等。
Dreamweaver cs4 是Adobe 公司开发的集网页制作与网站管理于一身的网页编辑软件。
它以强大的功能和友好的操作界面倍受广大网页设计者的欢迎，已经成为网页制作的首选软件。
Dreamweaver 与flash、Fireworks 三个软件被称之为网页制作三剑客。
范例与制作一、建立站点步骤1：打开“我的电脑”，在任意一个根目录下创建好一个文件夹，如D:\myweb1 用来存放网站文件，然后再在其中建立一个子文件夹D:\myweb1\images 用来存放图像文件。
DreamweaverCS4教学与自学教程
框，其中显示了用户的设置概要，如图5-14所示。
7) 单击
站点。
按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面
板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名 称以及本地站点的文件夹等选项，如图5-15所示。 现在我们已经创建了一个教学站点，不过，目前为止这 个站点还是空的，没有实际内容，因此必须向站点中添加相 关的内容。
第5章 Dreamweaver与网络课件
图5-15 【文件】面板
第5章 Dreamweaver与网络课件
2．添加网页文件与站点文件夹
新建的站点是空白的，其中没有任何内容。根据站点的 规划，需要向其中添加网页文件或站点文件夹。网页文件即 上网时浏览的HTML文件；站点文件夹则用于管理站点内容， 因为站点中会有很多文件，为了有效地管理文件，可以将它 们分门别类地存放在文件夹中，如图像文件夹可以专门用于 存放图像、动画等。
第5章 Dreamweaver与网络课件
图5-4 【文档】工具栏
第5章 Dreamweaver与网络课件
【文档】工具栏中的前三个按钮用于切换视图模式。单
击 按钮可以进入代码视图，这是一个用于编写和编辑 按钮 HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标 记语言)以及其他类型代码的手工编码环境。单击 可以进入代码视图与设计视图，在该视图中，窗口被分成上、 下两部分，顶部窗口用于编写HTML代码，底部窗口用于可 视化编辑网页。单击 按钮可以进入设计视图，这是一 个用于可视化页面布局、可视化编辑和快速应用程序开发的 设计环境。在该视图中，Dreamweaver中显示的文档处于可 视化编辑状态，页面效果类似于在浏览器中查看页面时看到 的内容。
Dreamweaver_CS4_课件与自学教程 7共7
便于以后修改超链接时作为参考。
第5章 Dreamweaver与网络课件
3．在浏览器中测试网页的正确性 ． 通过在浏览器预览网页的方法来测试网页是一个非常有 效的途径，这种方法可以贯穿于整个网页设计和创建过程中， 通过它可以及时发现网页中存在的错误，避免重复出现相同 的错误，也有利于及时纠正不妥之处。 在Dreamweaver中，可以在任何时间通过目标浏览器预 览网页，而不必首先保存文档，这时浏览器中的所有功能都 将发挥作用，包括JavaScript、相对链接、绝对链接、 ActiveX控件等。使用这种方法测试网页的最大好处是可以及 时地改正网页中存在的错误。
下拉菜单中选择【设置】命令，则弹出【目标浏览器】对话 框，如图5-76所示。
第5章 Dreamweaver与网络课件
图5-76 【目标浏览器】对话框
第5章 Dreamweaver与网络课件
3) 在对话框中选择要测试的浏览器，然后单击 按钮。 4) 单击菜单栏中的【文件】\【检查页】\【浏览器兼容 性】命令，则打开【浏览器兼容性】面板，如图5-77所示。 5) 在【浏览器兼容性】面板中罗列了浏览器不支持的功 能，并且显示了标记所在的行。根据面板中显示的检测结果， 可以更改页面中相应的内容。修改之后再进行测试，直到没 有错误为止。
第5章 Dreamweaver与网络课件
■单击AP元素的Z轴值，输入新的Z值，可以改变其叠 放顺序。 ■在【AP元素】面板中按住AP元素的名称拖曳鼠标， 可以改变其位置。 ■如果按住Ctrl键的同时将一个AP元素拖曳到另一个AP 元素位置处，则可以将被拖曳的AP元素变为子级。
第5章 Dreamweaver与网络课件
第5章 Dreamweaver与网络课件
图5-80 【管理站点】对话框
Dreamweaver_CS4_课件与自学教程 2共7
框，如图5-13所示。该对话框询问用户如何连接到远程服务 器，这里从下拉列表中选择“无”。
第5章 Dreamweaver与网络课件
图5-12 第三个向导对话框
第5章 Dreamweaver与网络课件
图5-13 第四个向导对话框
第5章 Dreamweaver与网络课件
6) 单击 按钮，进入站点定义向导的第五个对话
框，其中显示了用户的设置概要，如图5-14所示。 7) 单击 站点。 按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面 板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名 称以及本地站点的文件夹等选项，如图5-15所示。 现在我们已经创建了一个教学站点，不过，目前为止这 个站点还是空的，没有实际内容，因此必须向站点中添加相 关的内容。
第5章 Dreamweaver与网络课件
●单击 按钮，可以打开【CSS样式】面板。
● 【字体】：用于选择所需的字体。如果字体列表中 没有所需的字体，可以选择列表中的【编辑字体列表】选项， 这时将打开【编辑字体列表】对话框，如图5-22所示。在对 话框的【可用字体】列表框中选择所需的字体后单击 将其添加到【字体列表】中，单击 将出现在【属性】面板的字体列表中。 按钮，
按钮，则该字体
第5章 Dreamweaver与网络课件
图5-22 【编辑字体列表】对话框
第5章 Dreamweaver与网络课件
●【大小】：用于设置文本的字号大小。 ●单击文本颜色块 文本的颜色。 ●单击 斜。 ●分别单击 按钮，可以使光标所在的段落 按钮和 按钮，可以将所选文本加粗和倾 ，在弹出的颜色列表中可以选择
《中文DreamWeaverMX 网页制作教程》课件第7章
7.3.1 创建文字超链接
下面以本书配套电子文档中的chap/chap07-1.htm文件 为例，讲解文字超链接的创建方法：
方法一：在网页中输入“梦衣裳购物流程”文字， 选中文字后，单击在“属性”面板中“链接”旁边的 按钮(如图7-1所示)，在弹出的“选择文件”对话框中选 择需要链接的文件“dinggou.htm”，如需要将文本直接链 接到某个网站，可在“链接”中直接输入网址，如 。注意http://不能省略。
所谓超链接的路径，是指从当前位置到目标位置的 路径，它既可以是一个在线的URL，也可以是本地文件 的路径。超链接的路径有三种：绝对路径、根目录相对 路径和文档相对路径。下面我们就逐一分析这三种路径：
绝对路径是指网页文件在服务器中的绝对位置，一 个完整的URL是一个绝对路径，如“http://www.szhqzx. net/index.html”，而对于本地的网页，网页文件在硬盘里 的真正路径就是绝对路径，如“file:///G|/chap/chap071.htm”表示的是链接到G盘下的chap文件夹中的chap071.htm，这个路径是chap07-1.htm在硬盘中真正所在的位置。 使用绝对路径的链接，路径与网页的源文件无关，网页 源文件的位置可以随意改变，只要链接的路径中的文件 存在，链接就有效，因而具有一定的稳定性，但是绝对 路径不利于网页站点的移植，如将网页源文件从一台计 算机拷贝到另外一台计算机时，绝对路径就失效了，因 此，建议初学者不要使用绝对路径。
图7-5 图像热点区域
为图像建立热点链接的方法是：首先选中图像，在
“属性”面板中单击
(矩形热点工具、
椭圆形热点工具、多边形热点工具)中的一个，在“地图”
中输入热点区域的名称，然后在图像上拖动鼠标，即可
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
17.2.1 在Fireworks 中创建弹出菜单
• 在Fireworks CS4中通过鼠标操作就可以直接创建应用在网页上的弹 出菜单。具体操作步骤如下：
17.2.2 在Dreamweaver中插入Fireworks HTML
• 本小节来学习如何将Fireworks CS4制作完成的弹出菜单插入到 Dreamweaver CS4中。具体操作步骤如下：
第17章 Dreamweaver与Fireworks的完美结合
• Dreamweaver CS4和Fireworks CS4是Adobe公司的网页制作利器，它 们之间具有强大的兼容性，这种无缝结合的特性大大减少了网页设 计者进行软件切换的时间，使网页制作和图像处理的效率得到了有 效的提高。本章将主要介绍在Dreamweaver中编辑Fireworks图像、 插入更新Fireworks HTML，将Fireworks文件导出到Dreamweaver库， 以及创建网站相册等内容。
17.1 在Dreamweaver中编辑Fireworks图像
• 在Dreamweaver中编辑Fireworks图像，省去了切换软件和保存图像 文件的麻烦。系统会自动保存更新修改过的图像。具体操作步骤如 下：
17.2 在Dreamweaver中编辑Fireworks HTML
• 在20.1节中详细介绍了在Dreamweaver CS4中编辑Fireworks图像。 由Fireworks CS4创建的HTML文档，如弹出菜单、热区、切片等，与 Dreamweaver CS4也具有很好的兼容性。下面以弹出菜单为例，来学 习如何在Fireworks CS4中创建弹出菜单，在Dreamweaver CS4中插 入和更新Fireworks CS4生成的HTML文档。
17.2.3 在Dreamweaver中更新Fireworks HTML
• 当在Fireworks CS4中对弹出菜单进行修改后，可以直接更新 Dreamweaver CS4中的弹出菜单。具体操作步骤如下：
17.3 将Fireworks文件导出到Dreamweaver库
• 在Fireworks CS4中可以将图像源文件直接导出到Dreamweaver CS4 的库中，方便在制作网页ห้องสมุดไป่ตู้调用。这样以来，省去了在不同软件之 间切换的麻烦。具体操作步骤如下：