《多媒体制作技术 教学课件 PPT 作者 周德富 dmt008》由会员分享，可在线阅读，更多相关《多媒体制作技术 教学课件 PPT 作者 周德富 dmt008（39页珍藏版）》请在金锄头文库上搜索。
1、第八章 多媒体在网页中的实现,多媒体制作技术,1掌握网页制作工具的基本使用方法和技巧。 2了解HTML语言的基本结构。 3理解动态网页的制作流程和方法。 4掌握声音、动画、视频等多媒体在网页中的实现方法。 5能完整地制作包含多种媒体元素的网页作品。,学习目标：,学习导航：,本章的主要学习内容及在多媒体制作技术中的位置,8.1 知识准备,8.1.1网页设计的基础知识,1网页设计的常用术语 （1）超链接 超链接是互联网上的一种链接技术，通过它可以从一个网页链接到另一个网页。超链接指站点内不同网页之间、站点与Web之间的链接关系，由链接载体（源端点）和链接目标（目标端点）两部分组成，可以使站点内的网
2、页成为有机的整体，还能够使不同站点之间建立联系。,8.1.1网页设计的基础知识,1网页设计的常用术语 （2）URL URL英文全称是“Uniform Resource Locator”，中文名称为“统一资源定位器”，它用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置。URL用来指明通信协议和地址的方式，如http:/就是一个URL。“http:/”形式的URL用于表示网页的Internet位置，它是提供一种在Internet上查找任何信息的标准方法。,8.1.1网页设计的基础知识,1网页设计的常用术语 （3）浏览器 浏览器是用于阅读网页中信息的
3、一种软件工具。 （4）IP IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。,8.1.1网页设计的基础知识,1网页设计的常用术语 （5）域名 域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。,2网页设计的常用软件 （1）网页布局软件 微软的办公软件office家族成员之一的FrontPage是一种所见即所得的网页制作软件，由于其使用简单（与一般文本软件使用方法类似）并且软件容易获得
4、，很受初学者的欢迎。 Dreamweaver是Macromedia公司推出的可视化网页制作工具，是较受网页设计人员欢迎的软件之一，是网站建设不可缺少的工具之一。 此外文本文档、word也是常用的网页代码编辑软件。,8.1.1网页设计的基础知识,2网页设计的常用软件 （2）美化设计软件 为了丰富网页的内容，增加网页美观性，网页制作中经常还需要应用各种图片、动画，这些图片、动画需要用专门的处理软件来设计。 常用的处理和制作静态图片的软件有：Photoshop、Fireworks、CoreDraw、Illustrator、Freehand等； 处理和制作动态图片的软件有：Image Ready、Gi
5、f Animator等； 常用的动画制作软件有：Flash等。,8.1.1网页设计的基础知识,3网页制作的基本流程 （1）网站主题与构思 在制作网页之前，首先要做好规划，确定网页的主题，并收集、整理资料，构思网页的结构和风格。经过系统、全面构思的网站会为网页制作打好基础，达到事半功倍的效果。,8.1.1网页设计的基础知识,3网页制作的基本流程 （2）设计与制作 构思完毕之后，接下来的工作就是规划、创建站点，制作网页，这一过程的关键和重点就是网页的布局与设计。设计时要保证网站中的每个网页色彩基本一致、风格相近，按照设计构思做好网页布局，然后制作每一个网页。,8.1.1网页设计的基础知识,3网页制
6、作的基本流程 （3）测试与发布 网页做好了，链接做好了，就要对网页进行，测试链接是否正确，发现问题及时改正。测试后即可发布网站。 发布就是指把制作好的网页上传到网络上的过程。,8.1.1网页设计的基础知识,3网页制作的基本流程 （4）更新与维护 网站发布后需经常更新网页，增加网页内容，提高网页浏览率，并经常维护，以弥补网站存在的缺陷。,8.1.1网页设计的基础知识,8.1.2 Dreamweaver CS3简介,Dreamweaver CS3工作界面,1.适合于 Ajax 的 Spry 框架 使用适合于 Ajax 的 Spry 框架, 以可视方式设计、开发和部署动态用户界面。 在减少页面刷新的
7、同时, 增加交互性、速度和可用性。 2. Spry 数据 使用 XML 从 RSS 服务或数据库将数据集成到 Web 页中。集成的数据很容易进行排序和过滤。 3. Spry 效果 借助适合于 Ajax 的 Spry 效果, 轻松地向页面元素添加视觉过渡, 以使它们扩大选取、收缩、渐隐、高光等等。,Dreamweaver CS3新增功能,4. Adobe Photoshop 和 Fireworks 集成 直接从 Adobe Photoshop CS3 或 Fireworks CS3 复制和粘贴到 Dreamweaver CS3 中以利用来自您的已完成项目中的原型的资源。 5.浏览器兼容性检查 借
8、助全新的浏览器兼容性检查, 节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与 CSS 相关的问题的报告, 而不需要启动浏览器。 6. CSS Advisor 网站 借助全新的 CSS Advisor 网站 (具有丰富的用户提供的解决方案和见解的一个在线社区), 查找浏览器特定 CSS 问题的快速解决方案。,Dreamweaver CS4新增功能,7. CSS 布局 借助全新的 CSS 布局, 将 CSS 轻松合并到您的项目中。在每个模板中都有大量的注释解释布局, 这样初级和中级设计人员可以快速学会。可以为您的项目自定义每个模板。 8. CSS 管理 轻松移动 CSS 代
9、码: 从行中到标题, 从标题到外部表, 从文档到文档, 或在外部表之间。清除较旧页面中的现有 CSS 从未像现在这样容易。 9. Adobe Device Central CS3 使用 Adobe Device Central (现在已集成到整个 Adobe Creative Suite? 3 中), 设计、预览和测试移动设备内容。,Dreamweaver CS4新增功能,8.2 案例1,网页预览窗口,8.2 案例1,1新建站点； 2创建网页； 3插入文本、图像、声音、动画和视频； 4保存并浏览。,分析思路：,8.2 案例1,1 创建站点 在正式开始制作网页之前，最好先定义一个新站点，这是为了
10、更好地利用站点窗口对站点文件进行管理。创建站点后，用户在站点中编辑网页时，Dreamweaver会自动将链接到站点目录之外的文件复制到站点目录中，所有链接地址均自动采用相对路径，避免发生超链接错误，实现对网站的全局性把握，从而提高网页设计的效率。,技术要点：,8.2 案例1,2将多媒体素材存放于站点目录 在制作网页时，需将所用到的所有多媒体素材都存放于站点目录中，否则在浏览时会发生超链接错误。 3用代码实现对音频、视频的控制 在制作网页时，音频和视频的插入不能通过可视化的文档窗口实现，需通过代码视图内的一定代码来实现。,技术要点：,8.3 案例2,主页浏览效果,8.2 案例1,1创建站点； 2
11、创建、布局网页； 3设计美化网页； 4建立超链接； 5保存、浏览网页。,分析思路：,8.2 案例1,1网站设计规划 在开发网站之前，必须对整个网站的风格、内容有个较详细的规划，整个网站的色彩、风格要保持一致，导航要清晰、明了，界面以简洁为好。,技术要点：,8.2 案例1,2网站布局 网站规划好之后，进行版面设计设计视力之后可以绘制表格或单元格来规划页面布局。 网页布局的常用工具是表格，表格是显示表格数据以及对文本和图像进行布局的强有力的工具。在布局视图中还有布局表格、布局单元格、层的框架等布局工具。在布局视图中，网页制作者可以方便地进行页面的基本设计，将所有页面布局自动转换为表格的形式，方便设
12、计者灵活地控制版面布局。 3妙用模板 为使整个网站的每个网页之间相对比较一致的风格，巧妙使用模板可以大大提高网页制作的效率。,技术要点：,阅读材料,一、HTML语言的基本结构 HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。,阅读材料,HTML语言的基本结构,阅读材料,HTML语言的基本结构,阅读材料,HTML语言的基本结构,阅读材料,HTML语言的基本结构,阅读材料,HTML语言的基本结构,阅读材
13、料,HTML语言的基本结构,阅读材料,HTML语言的基本结构,阅读材料,二、动态网页的基本知识 1静态网页与动态网页 （1）静态网页 静态网页使用语言：HTML（超文本标记语言）； 静态网页的网址形式通常为：以.htm、.html、.shtml、.xml等为后缀的； 运行于客户端，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。,阅读材料,二、动态网页的基本知识 1静态网页与动态网页 （2）动态网页 动态网页使用语言：HTMLASP 或 HTMLPHP 或 HTMLJSP 等； 动态网页的网址形式通常为：以.asp、.jsp、.php、.perl、.c
14、gi等形式为后缀； 运行在服务器端，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。 动态网页一般以数据库技术为基础，采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。,阅读材料,二、动态网页的基本知识 2动态网页实现技术 （1）CGI 早期的动态网页主要采用CGI技术，CGI即Common Gateway Interface(公用网关接口)。可以使用不同的程序编写适合的CGI程序，如Visual Basic、Delphi或C/C等。虽然CGI技术已经发展成熟而且功能强大，但由于编程困难、效率低下
15、、修改复杂，所以有逐渐被新技术取代的趋势。,阅读材料,二、动态网页的基本知识 2动态网页实现技术 （2）PHP PHP 即Hypertext Preprocessor(超文本预处理器)，其语法借鉴了C、Java、PERL等语言，只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。 PHP与HTML语言具有非常好的兼容性，且提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。,阅读材料,二、动态网页的基本知识 2动态网页实现技术 （3）ASP ASP 即Active Server Pages，它是微软开发的一种类似HTML(超文本标识语言)、Scrip
16、t(脚本)与CGI(公用网关接口)的结合体，允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。因此ASP与一般的脚本语言相比，要安全得多。可以直接存取数据库及使用无限扩充的ActiveX控件，以简单的方式实现强大的交互功能。,阅读材料,二、动态网页的基本知识 2动态网页实现技术 （4）JSP JSP 即Java Server Pages，它是由Sun Microsystem公司于1999年6月推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术。 使用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面。JSP页面强调可重用且跨平台的组件，作为Java平台的一部分，JSP拥有Java程序设计语言“一次编写，各处执行”的特点。,
