网页设计多媒体之Dreamweaver教程.docx

网页设计多媒体之Dreamweaver教程.docx

《网页设计多媒体之Dreamweaver教程.docx》由会员分享，可在线阅读，更多相关《网页设计多媒体之Dreamweaver教程.docx（56页珍藏版）》请在冰豆网上搜索。

网页设计多媒体之Dreamweaver教程

网页设计多媒体之Dreamweaver教程

一、网站概述

1、网站与网页的概述

网页可以包括文字、图片、动画、视频、音频等元素，网站是众多网页的集合。

2、网页的基本元素

①文本和图片：

构成网页的最基本元素。

②超级链接：

分为两种，一种是文字链接，一种是图片链接。

③动画：

常见的有两种，一种是GIF动画，只可以表现200多种颜色，常见的制作软件有Fireworks、ImageReady，另一种是Flash动画，有极好的显示连贯性，体积小，还可以加入声音。

④表单：

实现互动的重要元素，收集浏览者的信息，并与其交互，比如搜索引擎、论坛、电子邮件等。

⑤音频和视频：

通过在网页中插入音视频插件实现，两种格式比较流行，一是MediaPlay，二是Real，两者都采用压缩算法和流媒体格式进行传送。

3、网页的布局

根据网站的类型设计，不同的网站有不同的风格，但以下的基本布局元素是必须的：

①页面标题：

用来标识和说明网页的性质与内容，显示在浏览器的标题栏中。

②网站标识（logo）：

安放在网页中最显眼的位置，代表网站形象，经过精心设计。

③页眉：

是网页中最显眼的部分，用来放置网站最希望浏览者观看的内容。

④导航：

提供网站栏目的索引，合理的导航会使网页使用更方便。

⑤内容：

是网站的精神所在。

⑥页脚：

提供网站拥有者的相关信息，如版权信息、联系方式等

4、网页配色原则

设计网页时要注意色彩的搭配与风格的设计，网站的风格是给浏览者的整体感觉，网页设计者多是根据人们对色彩的联想来决定用哪些颜色或色系的。

举例说明人们对色彩的联想：

①红色：

力量的来源，给人带来的联想有震撼、热烈、激情、喜庆、高贵、刺激、上进。

②灰色：

最好的背景色，给人压抑、平易、暧昧，内向，消极、失望、抑郁的感觉。

③蓝色：

给人清凉、开朗、理智、沉稳、深远、哀伤、安静的感觉。

5、网页代码与渲染

①HTML代码

打开一个网页，单击菜单栏中的查看—源文件，会出现一个文本文件，里面的文字就是网页的组成部分，即HTML代码，显示了网页的标题名、网页的字体、图片和插件安放的位置等信息。

②渲染

浏览器从远程服务器或本地磁盘读取这些代码，并根据代码上的标记将其显示成一个网页，叫做渲染。

③任何网页都有代码

浏览器显示的所有内容都有其代码，输入不存在的网址，会出现找不到服务器的页面，通过查看源文件，会发现这个页面同样由代码组成，输入about_blank打开空白页，源文件中同样有代码。

二、制作工具（Dreamweaver2004）

1、文档使用

新建文档：

通过文件—新建，打开新建文档对话框，单击类别下的基本页，选择创建即可。

输入文本：

在新建文档中输入文字并进行各种设置

保存文件：

文件—保存，打开另存为对话框，输入文件名，选择保存路径。

打开文件：

文件打开，找到路径，选择要打开的文件。

2、工作区结构

（1）插入栏：

包含用于创建和插入对象（如表格和图象）的按钮

（2）文档工具栏：

提供各种文档窗口视图、各种查看选项和一些常用操作

①代码视图：

就是编辑和显示代码的地方。

②拆分视图：

显示代码视图和设计视图，在代码视图中修改后，点击设计视图会立即刷新，在设计视图修改，代码视图会立即刷新。

③设计视图：

显示设计视图。

④标题：

显示在浏览器的标题栏中

⑤浏览错误检查器：

检查代码与浏览器的兼容性

⑥文件管理：

管理文件

⑦预览/调试：

在浏览器中预览或调试网页

⑧刷新设计视图：

在代码视图中修改内容，点此按钮刷新视图。

⑨视图选项：

对代码视图和设计视图进行设置

（3）文档窗口：

显示代码视图、拆分试图、设计视图内容的地方。

（4）面板组：

设置CSS样式、管理文件等

（5）标签选择器：

显示各种标签的地方。

（6）属性检查器：

查看和更改所选对象或文本的各种属性。

3、菜单概述

文件：

包含对文件的各种操作，如新建、打开、保存、导入、导出等

编辑：

包含了对文件的拷贝、粘贴、查找与替换、快捷键、首选参数等命令

查看：

查看文档的相关内容，如代码，显示标尺与网格。

插入：

用于将对象，如图象、表格、表单、超级链接等插入到文档中。

修改：

更改选定页面元素的属性。

文本：

设置文本的格式，如段落格式、字体、颜色等。

命令：

提供对各种命令的访问，如录制、播放、设定网页配色方案。

站点：

用于管理站点以及上传和下载文件，管理站点中可以新建站点和编辑已有站点。

窗口：

提供对Dreamweaver中的所有面板、窗口和检查器的访问。

帮助：

提供了对Dreamweaver文档的访问，如入门和教程，创建DW扩展功能的帮助系统。

4、常用工具栏的使用

①超级链接：

创建一个文本链接，点击时从一个页面跳转到另一个页面。

电子邮件链接：

用来链接电子邮件。

命名锚记：

用来实现网页内容在同一个页面中的跳转。

选中一段文字B，点击命名锚记，给其命名，再选中另一段文字A，在属性下面的链接中输入#锚记名，当点击文字A时，便会跳转到文字B。

②表格：

对文本和图形进行布局，可以在表格中输入文字、插入图片以固定他们在网页中的位置。

图像：

用于在文档窗口中插入图像，插入的图片最好和网页保存在同一个文件夹。

媒体：

在文档窗口中插入Flash影片、Flash按钮等。

日期：

在窗口中插入当前日期。

注释：

用于在html代码中插入描述性文本，文本不会显示在浏览器中。

③模板：

在文档窗口中创建模板，插入重复表格会自动转换为模板。

标签选择器：

选择标签，插入在代码中。

5、布局工具栏的使用

①表格：

插入图片和文字，固定位置

②插入Div标签：

创建布局的内容块

③描绘层：

层可以放在视图中任何一个位置。

④标准模式：

网页在文档中的标准样式

⑤扩展模式：

又称扩展表格模式，可以向临时文档中的所有表格添加单元格、边距和间距。

⑥布局模式：

使用布局表格和布局单元格对页面进行布局，包括布局表格、绘制布局单元格、在上面插入行、在下面插入行、在左边插入列、在右边插入列。

⑦框架：

显示文档的容器，任何一个框架都可以显示任意一个文档，可以插入上下左右的框架。

⑧表格数据：

把另一个应用程序的表格数据导入DW中，并设置为表格的格式。

6、表单工具栏的使用

①表单：

所有表单域对象都必须放在表单中

②文本字段：

接受文本的空白块，可输入文本、字母和数字等信息

隐藏域：

内容不显示在表单上，但传送给服务器。

文本区域：

即多行的文本字段，可输入更多文本，属性中设置宽度、行数等。

③复选框：

一组选项内选择一个或多个选项。

单选按钮：

一组选项内选择一个。

单选按钮组：

一次性插入多个单选按钮。

④列表/菜单：

从一系列选项中选择适当的选项，属性中切换菜单格式或列表格式。

跳转菜单：

设置一个或多个选项，每个选项都指向一个网页。

⑤图像域：

使用图像代替提交按钮的使用。

文件域：

使用户浏览本地计算机中的文件或文件夹。

按钮：

单击按钮时执行标准任务，如提交表单、重制表单等，按钮上的标签可在属性面板中自定义。

⑥标签：

用于设置表单对象辅助功能选项，附加标签标记，使文本和按钮关联起来。

字段集：

为表单增加注释方框。

7、文本工具栏的使用

①字体标签编辑器：

对输入文字的字体、颜色、大小等进行设置。

粗体：

使文字加粗斜体：

使文字倾斜加强：

效果同粗体强调：

效果同斜体

②段落：

对格式统一的文本，在文档窗口每输入一段文字，按回车键，生成一个段落。

块引用：

实现页面文字段落缩排

已编排格式：

称为预格式化，保留文字在源代码中的格式，页面显示的格式与源代码中的相同。

③标题：

分为标题1（一级标题）、标题2（二级标题）、标题3（三级标题），用来强调段落所要表现的内容，标题1字号最大，标题2、标题3次之。

④项目列表、编号列表、列表项

⑤定义列表：

一种两个层次的列表，用于解释名词的定义。

定义术语：

也称名词，定义列表中的第一层次

定义说明：

也称解释，定义列表中的第二层次，一个名词可以有多个解释。

8、HTML工具栏的使用

①水平线：

用于组织信息，分隔文本和对象。

②文件头：

包含在网页代码标记之间，用于定义网页元素基本信息的代码。

③脚本编制：

用于在代码中添加表格标记，制作表格

④框架：

用于在代码中添加框架标记，制作框架。

⑤脚本：

实现一些HTML不能实现的功能

9、Flash元素工具栏

①图像查看器：

设置一个文件名和保存路径，文档中出现一个flash元素，可以调整大小。

imageURLS中添加图片，imageLinks中为每张图片添加一个链接地址，imageCaptions中为图片设置标题。

10、收藏夹工具栏的使用

在工具栏上右键单击选择自定义收藏夹，选择最常用的工具栏和对象，添加到收藏夹中，利用添加分隔符将收藏夹中的对象分组。

这样收藏夹工具栏就有了常用工具。

11、设计面板组的使用

①CSS样式：

可以引用外部样式表附加到文档，也可以创建、编辑和删除CSS样式

②层：

可以改变Z轴数值（数值大的在最顶层）、显示/隐藏层、防止重叠。

12、代码面板组

①代码片断：

提供文本、导航、页眉、页脚等代码可供插入，还可以新建代码片断。

②参考：

可以选择参考书籍、标签，标签中会列出名称、使用方法和实例。

13、标签检查器面板组

（1）属性：

①标签库编辑器中列出了绝大部分各种语言所用到的标签以及属性参数。

②在代码视图中单击标签名称或其内容中的任何地方，可使用标签检查器编辑属性。

在设计视图中选择一个对象，可用属性检查器编辑属性。

③显示类别视图是按类别组织的属性，显示列表视图是按字母排序在列表中显示的属性。

（2）行为

为文档中的对象附加行为，并能够方便的管理和修改这些行为。

有两种显示状态，显示设置事件：

只显示指定的动作；显示所有事件：

显示所有适用于所选对象的事件。

（3）相关CSS

改变文档中引用CSS样式对象的相关属性。

三、HTML

1、HTML概念

HTML语言是超文本标记语言（HyperTextMarkupLanguage）的缩写，是因特网用于编写网页的主要语言。

2、HTML实例

HTML代码分为三部分：

文件的开始和结束部分、头部内容、主体内容

开始

头部内容

主体内容

结束

如：

我的网易博客开张拉，上面一定有你想看的内容，欢迎光临，多多捧场~！

3、HTML头部标记

包含页面基本描述，当前文档的有关信息，如标题、关键字等，不直接显示在网页上

常用的头部标记：

①当前文档的url全称（基底网址）：

②设定基准的文字字体、字号和颜色

③

④表明该文档是一个可用于检索的网关脚本，由服务器自动建立。

⑤有关文档本身的元信息，例如用于查询的关键词，用于获取该文档的有效期等

⑥