因特网技术基础第三

关于因特网技术基础第三第一页，共三十八页，2022年，8月28日第三章Dreamweaver的基本使用3.1网页设计概述3.2网页元素的创作与编辑工具3.3Dreamweaver基础知识第二页，共三十八页，2022年，8月28日3.1网页设计概述

3.1.1手工编码方式

网页是由HTML（HYPERTEXTMARKUPLANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（WorldWideWeb）发展的初期人们制作网页是通过直接编写HTML代码来实现的。手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂，因此，对大多数网页设计人员来说采用这个方式比较困难。但手工编码可以灵活地制作出丰富的网页效果。

第三页，共三十八页，2022年，8月28日3.1.2可视化工具方式

随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如要在网页上显示表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。

第四页，共三十八页，2022年，8月28日3.1.3编码和可视化工具结合方式

编码和可视化工具结合是一种比较成熟的网页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。除了上面三种基本的网页设计制作方式外，我们还可以通过修改已有的网页代码生成自己的网页。在网页编辑制作过程中具体采用何种方式要根据个人的具体情况而定，每必要拘泥于某种固定的模式。

第五页，共三十八页，2022年，8月28日3.2网页元素的创作与编辑工具

3.2.1网页图像制作工具

1.FireworksFirework是目前最流行的网页图像制作软件。只有将Dreamweaver的默认图像编辑器设为Fireworks，那么在Fireworks中制作完成网页图像后将其输出就会立即在Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDraw矢量图的功能，而且提供了大量的网页图像模板供用户使用。。其最方便之处是，它可以将图像切割，图像映射，悬停按钮，图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。2.Photoshop第六页，共三十八页，2022年，8月28日3.2.2动画制作工具

1.FlashFlash

是目前最流行的矢量动画制作软件。与其它的动和软件相比，它具有一些优点：制作的是矢量图像。只有用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像不会随浏览器窗口大小的改变而改变画面质量。使用插件方式工作。提供了一些增强功能。例如，支持位图，声音，渐变色和Alpha透明等。拥有了这些功能，用户就完全可以建立一个全部由Flash制作的站点。

Flash影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下做到本地在观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。2.DirectorDirector是Macromedia公司推出的多媒体开发工具，它为广大多媒体制作人员提供了建立交互式应用的强大功能。用户可以在友好的界面下通过使用Director制作出令人满意的多媒体作品。Director是一个简单且直观的软件，即使是首次使用该软件的用户也能编出优秀的程序。而且，Director又是一个高度面向对象的工具，非常适合图像设计者使用。

第七页，共三十八页，2022年，8月28日3.2.3网页编辑工具

1.FrontPage FrontPage是MicrosoftOffice家族中的一员，FrontPage的界面，功能与Word都非常相似。FrontPage提供了相当数量的模版和向导，使初学者能够非常容易的设计出美观实用的网页。FrontPage最强大之处，是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，FrontPage便会跟踪用户编辑过的文件，在发布时，自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送。2.DreamweaverDreamweaver和Fireworks、Flash一起，被人们喻为“网页制作三剑客”。同FrontPage一样，Dreamweaver也是“所见即所得”的网页编辑软件。它能够很好的支持ActiveX,JavaScript,Java,Flash和Shockwave等，而且还能通过鼠标拖动的方式从头到尾制作动态的HTML效果。Dreamweaver还采用了RoundtripHTML技术，使用这些技术，网页可以在Dreamweaver和HTML代码编辑器之间进行自由转化，而HTML语法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到“所见即所得”带来的方便。第八页，共三十八页，2022年，8月28日3.3Dreamweaver基础知识

Dreamweaver的工作界面第九页，共三十八页，2022年，8月28日3.3.2站点的管理 Dreamweaver站点由三部分组成，具体取决于开发环境和所开发的Web站点类型：（1）本地文件夹：是您的工作目录。Dreamweaver将该 文件夹称为“本地站点”。此文件夹可以位于本地计 算机上，也可以位于网络服务器上。这就是为 Dreamweaver站点所处理的文件的存储位置。（2）远端文件夹：是存储文件的位置，这些文件用于 测试、生产、协作等，具体取决于开发环境。 Dreamweaver在“文件”面板中将该文件夹称为“远 端站点”。一般说来，远端文件夹位于运行Web服 务器的计算机上。（3）测试服务器文件夹：是Dreamweaver处理动态页 的文件夹。第十页，共三十八页，2022年，8月28日3.3.3页面操作(创建、调试、保存、打开、页面属性、文档元素、其他查看)

页面标题、背景图像和颜色、文本和链接颜色以及边距是每个Web文档的基本属性。用户可以使用“页面属性”对话框设置或更改页面属性。第十一页，共三十八页，2022年，8月28日3.3.4文本对象的插入和格式化3.3.5图像的使用（插入、属性、动态[图像热点]、[轮替图像]、[占位图像]）3.3.6链接和导航（跳转菜单）第十二页，共三十八页，2022年，8月28日3.3.7网页布局1、表格应用（表格属性设置、表格自动格式化、1像素细线表格）2、利用表格进行页面布局3、利用Firework进行页面布局4、层排版第十三页，共三十八页，2022年，8月28日1、表格应用（表格属性设置、表格自动格式化、1像素细线表格）

表格广泛地应用于网页设计中，无论在数据显示方面还是在定位排版方面都起着不可替代的作用，下面就详细介绍如何在网页中创建表格。

在文档中创建表格的步骤如下：（1）在Dreamweaver8.0中单击“插入”—“表格”菜单命令，弹出属性设置窗口，对所要插入的表格进行初步定义。（2）在参数设置窗口中根据需要设置参数。（3）单击窗口中的“确定”按钮之后，即可在文档中光标所做位置插入一个表格。第十四页，共三十八页，2022年，8月28日 对于表格总体属性的设置，主要是通过属性面板来完成。第十五页，共三十八页，2022年，8月28日设置单元格，行和列的属性按照前面介绍的方法，选中某一个单元格，或者是某一行、某一列。单元格的属性面板

行的属性面板

列的属性面板

第十六页，共三十八页，2022年，8月28日 单击已经创建好的表格的边框，以选中该表格，然后选择“命令”|“格式化表格”菜单项，弹出“格式化表格”对话框。第十七页，共三十八页，2022年，8月28日创建1像素细线表格（1）、将表格的边框设置为0；（2）、设置表格的单元格边距为0，单元格间 距为1；（3）、设置表格的背景色与所有单元格的背景 色（颜色不同）。第十八页，共三十八页，2022年，8月28日常用页面布局形式第十九页，共三十八页，2022年，8月28日第二十页，共三十八页，2022年，8月28日2、利用表格进行页面布局

在“布局”下，我们可以在网页中直接画出表格与单元格，还可以自由拖动。利用“布局”来对网页定位非常方便。“布局视图”的具体用法如下所示：（1）将对象面板切换到“布局”面板组，单击“布局”按钮进入“布局模式”。（2）在“布局”面板上许多以前不可用的按钮变为可用状态。其中有两个按钮，一个是“布局表格”按钮，允许用户像绘图一样在页面里绘制表格，进行表格布局；另一个是“绘制布局单元格”按钮，可以用于在表格中直接绘制单元格。第二十一页，共三十八页，2022年，8月28日 绘制完成后，在“布局”对象面板中按下“标准模式”按钮，则刚刚绘制的布局会全部转换成表格。我们可以任意调整表格，也可以回到“布局模式”中继续绘制。第二十二页，共三十八页，2022年，8月28日3、利用Firework进行页面布局（1）、将设计好的网页模板（图像）利用Firework的切片工具进行裁切；（2）、导出html文件。第二十三页，共三十八页，2022年，8月28日第二十四页，共三十八页，2022年，8月28日裁切要点：（1）、对要插入文字或图片的区域进行裁切；（2）、对大面积空白区域进行裁切（颜色一致）；（3）、裁切区域尽量不要交叉。第二十五页，共三十八页，2022年，8月28日4、层排版 “层”是一个容器,就像一个包含内容的框架，可以将它放在所需要的位置。利用Dremweaver中的“层”，可以对网页内的元素的位置进行“精确”的定位。 在Dremweaver中可以使用div或span标记插入“层”。第二十六页，共三十八页，2022年，8月28日绘制层工具2个层层面板层属性第二十七页，共三十八页，2022年，8月28日3.3.8CSS样式简介

CSS是CascadingStyleSheets（层叠样式表）的简称。更多的人把它称为样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在我们丰富的想象力下千变万化。 层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML代码）位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件（外部样式表）或HTML文档的另一部分（通常为<head>部分）中。使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。第二十八页，共三十八页，2022年，8月28日 术语“层叠”是指对同一个元素或Web页面应用多个样式的能力。例如，可以创建一个CSS规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的Web页面上的元素，并最终创建出我们想要的设计。第二十九页，共三十八页，2022年，8月28日CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如P、H1、类名称或ID）的术语，而声明则用于定义样式元素。在下面的示例中，H1是选择器，介于大括号({})之间的所有内容都是声明：H1{

font-size:16pixels;

font-family:Helvetica;

font-weight:bold;

}声明由两部分组成：属性（如font-family）和值（如Helvetica）。上述示例为H1标签创建了样式：链接到此样式的所有H1标签的文本都将是16像素大小并使用Helvetica字体和粗体。第三十页，共三十八页，2022年，8月28日在Dreamweaver中可以定义以下规则类型：

自定义CSS规则（也称为“类样式”）使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点(.)开头。例如，您可以创建称为.red的类样式，设置规则的color属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。

HTML标签规则重定义特定标签（如p或h1）的格式。创建或更改h1标签的CSS规则时，所有用h1标签设置了格式的文本都会立即更新。

CSS选择器规则（高级样式）重定义特定元素组合的格式，或其它CSS允许的选择器形式的格式（例如，每当h2标题出现在表格单元格内时，就应用选择器tdh2）。高级样式还可以重定义包含特定id属性的标签的格式（例如，由#myStyl