第7章多媒体创作.ppt

1、多媒体技术与网页设计,主 编 ： 陈 新 龙,第7章 HTML与静态网页制作,本章从Internet基本知识出发，介绍了WWW的起源、含义，介绍了Web网页最主要的组成形式：HTML标记，介绍了FrontPage 2003、DreamWeaver MX 2004 网页制作工具的界面及特点，介绍了网页制作的基本原理与技术路线，介绍了FrontPage 2003工具的制作技巧及实例，最后介绍了Flash动画基础。 本章建议学时数：810学时。,第 1 课,在本次课中，我们将介绍Internet相关概念、组网原理等。,一、Internet的几个概念 1、 Internet的含义 Internet网音

2、译：因特网，它是由许许多多的子网通过 TCP/IP 相互联接而成的网络。 因特网是不同网络之间的相互联接，因此也叫互联网。,2、什么是Intranet 3、互联网的服务 以WWW服务为主体，多种服务形式并存的比较完善的服务体系 4、IP地址 （1）什么是IP地址 IP地址即网际协议地址，是因特网上联网计算机的身份标识，它由32位二进制组成。 在TCP/IP网络中，每台主机都有唯一IP地址。,（2）IP地址的组成与分类 三个部分：类别、网络地址、主机地址 IP地址根据网络ID的不同分为5种类型，具体为：A类地址、B类地址、C类地址、D类地址、E类地址。 （3）IP地址的详细结构 （4）网络掩码(

3、Net Mask)与子网掩码(Sub-Net Mask) 网络掩码的主要作用是告诉计算机如何从IP地址中析取网络标识和主机标识。 子网掩码的作用是将一个过大的IP网络划分为更多的子网络,（5）私有IP地址 为了减少对于有限的IP地址资源的消耗，最初设计者在A、B、C类地址中各自划分了一些地址范围作为私有地址来使用，它们是： A类: 55 B类: 55 C类: 55,（6）不同主机相互访问原则 TCP/IP协议规定，两台具有相同的网络标识和不同的主机标识联网主

4、机可以直接通讯，而具有不同的网络标识的两台主机要想通讯的话必须通过一台中间设备 - 路由器的转发才可实现。,（7）路由器与网关 路由是数据从一个节点传输到另一个节点的过程，路由器是一种连接多个网络或网段的网络设备，它能将不同网络或网段之间的数据信息进行“翻译”，以使它们能够相互“读”懂对方的数据，从而构成一个更大的网络。 顾名思义，网关是一个网络的关卡，从身份角度，是该网络中的一个具体的IP地址，从功能角度，应完成不同网络之间的数据收发等。 习惯上，人们也把TCP/IP网络中的IP路由器称为IP网关,（8）组网原理,（9）DNS与DHCP,【例7.1.1】在如图7-1-1所示的网络示意图中，假

5、定网关已正确设置，各台计算机的IP地址如图，若网络1和网络2中的每台计算机的子网掩码均为，请分析网络设置是否正确？若每台计算机的子网掩码均为24，请分析网络设置是否正确？,三、 IPv6网络 90年代初，人们就开始讨论新的互联网络协议。IETF的IPng工作组在1994年9月提出了一个正式的草案“The Recommendation for the IP Next Generation Protocol”，1995年底确定了IPng的协议规范，称为“IP版本6”（IPv6）。 和IPv4相比，IPv6的主要改变就是地址的长度为128位。,IP

6、v6较好地解决了IPv4网络IP地址短缺的问题，是下一代互联网络的组网基础。必须指出的是，IPv4网络已经有近30年的历史，可以肯定，IPv6网络、IPv4网络将在相当长的一段时间内长期共存。,下 课！,第 2 课,在本次课中，我们将介绍WWW的基本概念、WWW开发工具、HTML语言及其制作工具的使用等等。,一、WWW介绍 （1）WWW简介 WWW是World Wide Web，中文翻译：“全球万维网”。是目前Internet上的主要服务之一。 WWW的目的是实现全球信息互享，其信息载体为Web Page（网页） Web站点： 主页：进入Web站点第一个综合页面,（2）运行环境 以提供Web服

7、务为主要目的的计算机系统称为Web服务器，包括硬件、软件两个部分。 以提供Web服务为主要目的的软件称为Web服务器软件，它是Web站点运行的必须软件。 常用Web服务器软件有PWS（Windows 98、IIS（NT/2000/XP） （3）URL /MAIN.HTM,（4）WWW开发简介 目前，绝大多数网页主要由HTML标记语言组成。 在此基础上，又形成了许多其它标记语言 如：XML（可扩展标记语言 ），XML 主要为数据设计的。 除此以外，为增强网页功能，还出现了许多设计语言（Java、Javascript、Php、Asp等等） 开发主要手段： HTML标记

8、语言可视化设计工具 编程设计语言编写软件 网页制作主要使用HTML标记语言可视化设计工具,二、HTML语言 （1）理解HTML语言的意义 （2）HTML语言结构 其结构如下： 标题名 Web页面内容 （3）常用标记 （4）超链接标记,多媒体演示教学 多媒体演示教学 同学们！大家好！ HTML语言的具体实例 ,三、HTML语言可视设计工具 （1）FrontPage,（2）DreamWeaver,四、网站的规划与建设,五、网页设计的基本原则 主题鲜明 美观大方 运行流畅 操作方便 富有特色,五、网页设计的技术路线 利用表格美化网页 利用链接构成系统 利用框架网页组合页面 利用表单实现交互 利用程序

9、而特色独具,下 课！,第 3 课 FrontPage 2003网页制作（上）,在本次课中，我们将介绍FrontPage 2003静态网页制作初步。,一、建立简单的页面 启动FrontPage，选择“文件”菜单中的“新建”，用户区右边将出现新建网页任务窗格，选择该窗格中的空白网页，FrontPage将自动创建一个空白网页。 必须指出的是，空白网页并不代表该网页文件全部内容为空，只是标记内容为空。,在空白用户区域像使用Word一样输入你想输入的文字，例如输入“建立一个简单的页面”，选择“文件”菜单中的“在浏览器中预览”，保存文件后浏览即可。,二、利用表格美化网页 当网页元素较多时，将网页元素直接放

10、置在正文区将使各元素排列十分凌乱，而且将导致在不同显示方式下浏览效果不同，大大影响网页的美观。 在网页设计中，插入表格的作用分割屏幕，以保证网页中的元素排列整齐。因此，从美观角度，插入表格是网页设计的第一步，掌握制作工具中的表格应用方法及其技巧是网页制作的基础。,插入表格是网页设计的第一步 将插入点放在要插入表格的位置。 在“表格”菜单上，指向“插入”，再单击“表格”。设置所需属性，单击“确认”即可。 表格设置的主要属性有：行数、列数、宽度、高度、对齐方式、边框颜色、背景颜色等。表格的宽度、高度设置有百分比、像素两种单位。 表格中的具体单元称为单元格，除设置表格外，还应设置单元格属性。,同一表

11、格中的单元格具有相同的布局特性，因此，当在表格的不同单元格放置不同的网页元素时，可能因为本单元格放置了较大的图象元素而导致其它单元格中的网页元素排列不整齐，从而使网页不简洁或不美观。此时，可在单元格中进一步插入表格以达到美观的目的。,利用表格分割屏幕的基本方法如下： 首先插入一个大表格用于布局。为保证足够的布局与调整空间，建议读者首先插入一个1列多行、指定宽度单位为像素的表格用于布局设计。 当需要在某1行进一步放置网页元素时，请在该行进一步插入表格用于放置更多的网页元素。当表格中的行（或列）数不够时，可通过拆分单元格进一步分割。,布局表格是为网页布局创建的框架。可使用布局表格和单元格来创建具有

12、专业外观的网页布局。 插入布局表格方法如下： 在“表格”菜单中，单击“布局表格和单元格”。在“布局表格和单元格”任务窗格的“表格布局”模板列表中选择一个布局表格即可。可像设置普通表格一样设置布局表格。,设计实例,（1）插入如下设置的一个表格（边框）： 宽度合适：如400像素、居中、边框粗细为4（颜色自定）、单元格边距、间距为0 可选择表格单击鼠标右键选择表格属性重新设置。 （2）插入一个宽度与（1）相同的表格（用于内容设计）： 400像素、居中、边框粗细为0（颜色为白色）、单元格边距、间距为0,（3）将（2）步中插入的表格拆分为三行（标题、正文、底部）： 可在表格区域单击鼠标右键选择拆分单元格

13、，选择三行。 （4）将第一个单元格设置背景色为喜欢颜色，并输入文字： 电工电子技术网络课程指定参考教材窗口 预览效果不太美观 将（1）制作的表格单元格边距、间距为改为1并选中显示单元格和表格边框。,（5）类似设置底部背景色： 在底部边框插入滚动字幕 在“网页”视图中，单击要创建字幕的位置，或是选择要显示在字幕中的文本。 在“插入”菜单上，单击“Web 组件”。在左边的窗格中，单击“动态效果”。在右边的窗格中，双击“字幕”。 在“文本”框中，键入显示在字幕中的文本行。如果在步骤 1 中选择了网页上的文本，那么“文本”框中就会包含这些选中的文本。 预览效果 适当地调整字体大小和颜色,（6）输入正文

14、 在中间单元格输入文字： 教材名称：电工学（第五版）（上、下） 主 编： 秦曾煌 出 版 社： 高等教育出版社 预览效果 不好看！适当地调整字体大小和颜色及单元格颜色 有所改善，但依旧不是非常美观！ （7）前后插入分割单元格,三、其它美化网页的方法 要做出一个十分美观的网页，应适当地使用一些媒体，如适当地插入一些图片，动画等。 利用表格可使这些网页元素排列更整齐，使页面更为简洁大方。 因此，排除技术因素，一个美观且富有个性的网页，主要取决于设计者的媒体运用水平。,从技术角度，为保证页面的美观、风格统一，可使用样式来美化网页。 样式是由唯一名称标识的格式特征集合。可以使用样式在一个简单的任务中快

15、速设置一组网页元素的格式，可以将样式应用到 Microsoft FrontPage 中的多数网页元素 可以从一组内置样式中选择样式，也可以创建自己的用户定义样式。 用于在多个网页上应用一致的样式信息称为级联样式表 (CSS)。,FrontPage 主要处理两种类型的级联样式表：内嵌式级联样式表和外部级联样式表。 内嵌式级联样式表，是指存储在该网页上的 标记之间的 HTML 标记间的代码集。 外部级联样式表可以附加到多个网页上，可以在整个网站中统一应用相同的样式。 通常，外部级联样式表使用 .css 作为文件扩展名，例如 active.css。,创建外部级联样式表的方法如下： 在“文件”菜单上，

16、单击“新建”。在“新建”任务窗格中，在“新建网页”下，单击“其他网页模板”。 在“样式表”选项卡上，单击要创建的 CSS 类型。Microsoft FrontPage 将创建一个文件扩展名为 .css 的新网页，并将其打开以供编辑（在将 .css 文件链接到网页之前，必须保存它）。,外部级联样式表创建好了以后，可将网站中的所有网页链接到你定义的外部级联样式表，具体方法如下： 打开网页，在“网页”视图中文档窗口的底部，单击“设计”。 在“格式”菜单上，单击“样式表链接”，再单击“添加”。找到并单击外部级联样式表 (CSS) 的 .css 文件，再单击“确定”。若要将外部 CSS 仅链接到当前网页

17、，请单击“所选的网页”。若要将外部 CSS 链接到当前网站中的所有网页，请单击“所有网页”。,样式创建实例,四、超链接的应用 1. 设计有关秦曾煌教授、高等教育出版社 等两个网页。 （1）将前面制作的网页保存为如W0 （2）将前面制作的网页另存为W1 （3）将前面制作的网页另存为W2 修改W1、W2的内容 2. 重新打开WO网页 选择秦曾煌后单击鼠标右键，选择超链接，设置目标页面为W1 类似为高等教育出版社设置超链接页面为W2,超链接标记是一个非常复杂的HTML标记，除上面介绍的超链接具有多种目标类型外，超链接标记本身也具有许多效果参数，适当地设置这些参数，可使网页更加生动，界面更加友好，操作

18、也更加方便。 1.建立超链接的屏幕提示 2.改变超链接目标页面的打开方式 3.向超链接添加字体效果 4.特殊超链接效果的制作,五、框架的应用 1. 框架的含义 2. 创建框架网页 在“网页”视图中，在“文件”菜单上，指向“新建”，再单击“网页或站点”。 在“新建网页或站点”任务窗格中，在“根据模板新建”之下，单击“网页模板”。 单击“框架网页”选项卡。 单击要使用的框架网页模板，再单击“确定”。 适当地设置每个框架的属性。 方法如下：,3. 将W0、W1、W2三个网页应用在框架中 （1）将上部框架初始网页设置为W0 （2）将下部框架初始网页设置为W1 （3）在上部框架网页选择秦曾煌后单击鼠标右

19、键，选择超链接属性，设置目标框架为下部框架 （4）在上部框架网页选择高等教育出版社后单击鼠标右键，选择超链接属性，设置目标框架为下部框架,六、网页模板与主题 网页模板是预先设计的、可以包含网页设置、格式和网页元素的网页。 有三种方法创建网页模板，具体为： 从空白网页创建网页模板 从现有网页中创建网页模板 更改现有模板来创建网页模板,主题是一组统一的设计元素和配色方案，可应用到网页使之具有专业外观。使用主题是使网页视觉一致且具有吸引力的快捷方法。Microsoft FrontPage 包括许多可立即使用的完整主题，当然也可以更改这些主题或创建新主题。 可以将一个主题应用到一个或多个网页或整个网站

20、。如果将主题应用到网站中的所有网页，则将成为此网站的默认主题。,七、表单 1. 表单的含义及应用 表单的主要作用是收集数据、实现不同网页间的数据交互、人机交互等。FrontPage中的表单域元素包括文本框、文本区、选项按钮、复选框、分组框、下拉框和文件上传框等。 2. 应用实例,下 课！,第 4 课 FrontPage 2003网页制作（下）,在本次课中，我们将介绍FrontPage 2003静态网站制作实例。 学时数较少时可将本课内容放在实验教学环节中。,下 课！,第 5 课 Flash 动画基础,在本次课中，我们将介绍Flash MX 2004动画基础,一、概述 Flash是美国Macrome