《多媒体技术与应用》第8章：网络多媒体技术

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第八章 网络多媒体技术,本章主要介绍,WWW,站点设计的基本知识；,讲解利用,Dreamweaver,8,进行网页制作的方法和过程。,第八章 网络多媒体技术,8.1,网站设计基本知识,8.2,Dreamweaver,8,简介,8.3,本章小结,8.1,网站设计基本知识,8.1.1,Internet,与,Web,技术,8.1.2,网站建设的流程,8.1.1,Internet,与,Web,技术,Internet,是全球范围内的计算机组成的信息网络，又被称为国际互联网。,Internet,的前身是由美国的军用实验网络,APRAnet,（,阿帕网）。,随着,TCP/IP,通信协议的成功研制，使不同品牌、不同操作系统的计算机之间可以实现互联，,目前有上亿台计算机和几十亿个用户在使用,Internet。,8.1.1,Internet,与,Web,技术（续）,Web,是,World Wide Web,的简称，因此又被称为,WWW，,中文译为万维网；,是一个建立在,Internet,基础上的网络化超文本传输系统。,构成,Web,体系结构的基本元素包括：,Web,服务器、,Web,浏览器、,HTTP,协议、,HTML,语言以及,URL,地址。,Web,服务器：这里指一种软件系统，如,Windows 2000,中的,Internet,信息服务（,IIS）Web,服务器对数据进行加工、处理，然后将结果返回给浏览器，浏览器便看到了具体的网页。,Web,浏览器：用于显示网站上的信息。浏览器安装在客户端，能够理解多种协议，如,HTTP、FTP，,也能理解多种文档格式，如,TEXT、HTML、JPEG、XML,等格式的文档。浏览器有许多种，如,Netscape Navigator、Microsoft Internet Explorer（,即,IE）、,Mozilla,Firefox,等等。,8.1.1,Internet,与,Web,技术（续）,HTTP（,超文本传输协议）：是一种在,Web,服务器和,Web,客户之间传输,Web,页面的通信协议，它是一种请求,/,应答式的协议。它是建立在,TCP/IP,之上的应用协议，是,Web,上最常用、最重要的协议。,HTML（,超文本标记语言）：是一种用来制作网络中超级文本文档的简单标记语言。它是在文本文件的基础上加上一系列标记。,URL（Uniform Resource Locator）：,统一资源定位器，即人们常说的网址。它用来指定网上资源所在的位置和获取资源的方式。其统一格式为：协议名称：,/,主机域名或,IP,地址,/,路径,/,文件名。,8.1.2,网站建设的流程,1,、需求分析、确定主题：,需求分析是做好网站设计与规划的前提工作。设计者要了解网站的服务群体，这包括网站的拥有者和访问者。,网站的主题只能有一个，主题的确定应当短小而精要。,2,、域名注册：,注册域名是在因特网上建立任何服务的基础。,域名采用层次结构，每一层构成一个子域名，子域名之间用圆点隔开。,域名的选择要简短、切题、通俗，这样才会给用户留下深刻的印象。,在域名注册之前，应先到,InterNIC,和,CNNIC,查询该域名是否已经被别人抢先注册了。,8.1.2,网站建设的流程（续）,3,、设立主机：,主机必须是一台服务器级的计算机，并且要用专线或其它形式,24,小时与互联网相连。,可以根据投入资金的多少和信息流量的大小选择虚拟主机或服务器托管等方式。,4,、规划网站内容并制作网页：,要先画出网页的设计结构草图。,草图要直观，网站的首页内容、栏目名称以及各栏目网页的数量在草图中一目了然。,根据设计草图，创建网站的基本框架，建立相应的文件夹，设计首页和各栏目页面。,8.1.2,网站建设的流程（续）,5,、网站测试：,当把多张网页整合成网站后，要对整个网站进行测试，看其是否能够正常运行，并将其中的运行错误加以修改。,主要的测试内容包括：功能测试、性能测试、安全性测试、稳定性测试、浏览器兼容性测试、链接测试等。,6,、网站发布与推广：,当网站经过测试可以正常运行后，就可以发布到,Internet,上。,网站发布成功后，还要展开一系列的推广活动，提高网站知名度，提升网站的访问量。,8.1.2,网站建设的流程（续）,7,、网站维护与更新：,网站维护与更新是网站建设中极其重要的部分，也是最容易被忽略的部分。,严格来说，每一个站点都应该由专业人员定期更新维护。,8.2,Dreamweaver,8,简介,8.2.1,Dreamweaver,8,的工作环境,8.2.2,创建本地站点,8.2.3,文档的创建及设置,8.2.4,插入文本,8.2.5,插入表格,8.2.6,插入图像,8.2.7,创建超链接,8.2.8,创建框架,8.2.9,播放多媒体对象,8.2.10,网站的发布与测试,8.2.11,网页制作实例,8.2.1,Dreamweaver,8,的工作环境,图,8-2-1,Dreamweaver,8,操作界面,8.2.1,Dreamweaver,8,的工作环境（续）,1,、标题栏：显示当前正在编辑的网页文档的文件名。,2,、菜单栏：包含,Dreamweaver,8,的所有操作命令。,3,、文档工具栏：提供文档操作的常用命令，,【,代码,】,表示仅在“文档窗口”中显示,HTML,源代码视图，,【,拆分,】,表示同时显示,HTML,源代码视图和设计视图，,【,设计,】,是系统默认设置，表示在“文档窗口”中只显示设计视图，,【,标题,】,用于输入当前网页在浏览器上显示时标题栏中的内容。,4,、插入工具栏：汇集了网页中可以插入的所有元素。,5,、浮动面板组：包括一系列编辑网页时的控制内容。其打开和关闭可以通过执行,【,窗口,】,菜单中的相应命令实现。,8.2.1,Dreamweaver,8,的工作环境（续）,6,、文档窗口：实际编写网页的区域，根据不同的视图形式显示不同的内容。,7,、标签选择器：单击某个标签，可以选择网页中相应的编辑对象。,8,、缩放比例：可以按照一定比例显示,“,文档窗口,”,中的内容。,9,、窗口设置：可以设置网页文档窗口的大小。,10,、下载指示器：显示当前网页文件所占容量，以及网页被下载时所需要的时间。,11,、属性面板：在,“,文档窗口,”,中选择某个元素，显示该元素的相关属性。,8.2.2,创建本地站点,创建本地站点的步骤。（具体参考教材）,1,、创建文件夹，收集网页素材：,2,、打开站点定义对话框：,3,、为站点起名字：,4,、选择服务器技术：,5,、设置站点文件编辑方式：,6,、选择远程服务器连接方式：,7,、进行站点设置总结：,站点定义结束后，,【,文件,】,浮动面板中会显示出当前站点的文件夹及文件信息。,8.2.3,文档的创建及设置,在,Dreamweaver,中编辑的网页通常被称为文档，文档的创建、存储和文档页面属性的设置是制作网页最基本的操作。,1,、创建空白文档，可以采用下面两种方法：,在,【,起始页,】的【,创建新项目,】,一栏中选择要创建的文档类型，,执行菜单,【,文件,】|【,新建,】,命令，选择需要创建的文档类型。,2,、存储文档：,执行菜单,【,文件,】|【,保存,】,命令，或按,【,Ctrl+S】,组合键便可以进行文档存储。,如果要保存的文档为网站的“首页”，则应将文档保存在站点根文件夹下，而且文件名必须为“,index.,htm,”,或“,default.,htm,”,中的一个。,如果保存的文档为网站中的普通页面，可以将文档存放到“,html”,子文件夹下，文件主名可以任意（不能用汉字），文件扩展名应为“,.,htm,”。,8.2.3,文档的创建及设置（续）,3,、文档的页面设置：,执行菜单,【,修改,】|【,页面属性,】,命令，或在,【,属性,】,面板中单击,【,页面属性,】,按钮，可以打开,【,页面属性,】,对话框，对网页进行设置。,8.2.4,插入文本,1,、添加文本：,可以直接在文档窗口中输入文本，也可以粘贴其他网页或,word,文档中的文本。,按,【,回车,】,键会结束一个段落的输入，并且插入一个空行。按,【,shift+,回车,】,组合键会换行但不结束当前段落。,2,、设置文本大小：,在,【,属性,】,面板的,【,大小,】,选项改变文本的大小。,字体默认单位为“像素”。,3,、设置字体：,在,【,属性,】,面板,【,字体,】,下拉列表中可以设置所选文本的字体。,“默认字体”依据操作系统环境而不同，对于简体中文环境，“默认字体”为宋体。,最好不要使用特殊的字体，如果确实需要可以将特殊字体的文字保存为图像格式。,8.2.4,插入文本（续）,4,、改变文本颜色：,网页中的文本颜色采用,RGB,的颜色体系。,5,、对齐文本：,包括四种对齐方式。,6,、段落的格式：,包括已经设置好的段落格式和六种标题格式，以及段落缩进和列表形式。,8.2.5,插入表格,表格不仅可以有序的排列数据，还可以精确地定位文本、图像及网页中的其他元素，成为网页排版布局不可或缺的工具。,1,、表格的组成：,Dreamweaver,中的表格包括,3,个基本组成部分：行、列、单元格。,2,、表格的建立：,执行菜单,【,插入,】|【,表格,】,命令可以插入表格。,【,行数,】、【,列数,】,设置插入表格的行和列的数量。,【,边框粗细,】,设置表格边框线的粗细，以像素为单位。,【,单元格边距,】,设置单元格中的内容与单元格边框线之间的距离，以像素为单位，默认为“,3,像素”。,【,单元格间距,】,设置两个单元格之间的距离，以像素为单位，默认为“,3,像素”。,8.2.5,插入表格（续）,3,、选择表格及表格元素：,（,1,）选择整个表格：单击表格中任意一个单元格的边框线,（,2,）选择行与列：将鼠标置于某行的最左边或某列的最上方的边框线时，单击鼠标。,（,3,）选择单元格：将鼠标指针定位到某个单元格内相当于选中该单元格；按住,【,Ctrl】,键单击欲选择的单元格可以选择不连续的多个单元格。,8.2.5,插入表格（续）,4,、设置表格属性：选中表格之后，可以设置表格的属性。,【,表格,Id】,可以为表格命名，,【行】、【列】,设置表格的行数和列数，,【,填充,】,设置单元格中内容与边框线之间的距离，,【,间距,】,设置单元格之间的距离，,【,边框,】,设置表格边框线的宽度，,【,对齐,】,设置整个表格在页面中的对齐方式，,8.2.5,插入表格（续）,5,、设置行、列、单元格属性：,选中行、列或单元格，可以设置行、列或单元格的属性,【,水平,】、【,垂直,】,设置单元格中的内容水平与垂直方向的对齐方式，,【宽】、【高】,设置行、列或单元格的宽度和高度，单元格宽度和高度的调整会使整列或整行同时调整，,“”按钮可以将所选的多个相邻单元格合并为一个，,“”按钮，可以将一个单元格拆分成多个单元格。,6,、增加或删除行和列：,8.2.6,插入图像,Dreamweaver,8,支持网页中广泛使用的,JPG,和,GIF,格式的图像文件，,这两种格式的文件经过了压缩处理，文件所占空间较小，有利于网上传输。,1,、添加图片：,将光标定位到插入点，然后执行菜单,【,插入,】|【,图像,】,命令，选择要插入的图像。,8.2.6,插入图像（续）,2,、编辑图像：,选择图像，,【,属性,】,面板会显示图像的属性设置：,【,源文件,】,：指定图像的地址，应为相对路径的形式显示。,【,链接,】,：为整张图像输入超级链接的地址。,【,替换,】,：设置图像的提示信息，无法显示图像时可以在图像占位符中显示该信息。,【,地图,】,：可以为图像的不同位置设置不同的超级链接。,【,垂直边距,】、【,水平边距,】,：可以设置图像在垂直方向和水平方向与其他元素之间的空白间距，以像素为单位。,3,、设置背景图像：,执行菜单,【,修改,】|【,页面属性,】,命令，单击其中的,【,背景图像,】,