第5章网页设计.pptVIP

第５章　网页设计 教学目标 本章介绍有关多媒体网页的一些基本概念，利用几个具有代表性的精彩网站，分析网页的整体结构，最后重点介绍网站开发流程和目前较受青睐的工具Dreamweaver的最新版本——Dreamweaver 8，并就这些内容展开全面的论述。 5.1 网页制作的语言和工具 1 网页(Web page)与网站的区别: 网页是通过浏览器在WWW上所看到的每一个画面 网站是网页的集合 网页与网站都是以文件的形式存在的 2. 网页分析 网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。在这个网页中，包含了多种网页媒体元素。 (1) 文本 文本一直是网页内容最常用的表达手段。用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。 (2) 图像 图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。 在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。 (3)动画 动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容更富有动感和情趣。 在网页中经常使用的动画格式包括GIF动画和Flash动画等。 (4) 表单 在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。 表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据就会传送到服务器。 (5) 导航栏 导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问。 导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。 （6）表格 表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格。 （7）框架 框架是网页制作的另外一个布局工具，利用框架布局的网页将显示窗口划分成多个独立的区域。 （8） 其他网页元素 网页中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页操作时的音效、供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。 在网页中可以添加多种多样的元素，但如何制作网站独特的图片和动画，并把网页中各种内容合理地联系起来制作出具有个人风格的网页呢？首先，要选择一个方便、易学、易用的工具。 5.1.2 HTML语言 文本、表格、样式、层、框架等元素的建立都是以HTML语言为基础的。 HTML（hyper text markup language）语言是超文本标记语言，用来描述WWW上的超文本文件。 5.1.1 网页制作语言 HTML ( Hyper Text Maker Language) 是一种超文本标记语言，用来描述WWW上的超文本文件。 HTML文本的基本结构 HTML文本的基本结构 5.1.3 常用网页设计工具 网页设计软件Dreamweaver 8 网络图像处理软件Fireworks 8 网络动画制作软件Flash 8 网页设计软件Dreamweaver 8 Dreamweaver是由美国Macromedia公司推出的“网页制作三剑客”中的网页编辑与制作软件，也是目前较流行的网页编辑制作软件。 网页制作工具之一 5．2 网页制作步骤 5.2.1网站与网页以及制作基本步骤 网站与网页 万维网(WWW)上用浏览器观看的每个屏幕页面都是“网页”； 网站是能够被人用浏览器访问并包含组织好的一组网页，也称为“站点”； 网站一般由硬件和软件两部分组成，我们教材中主要讨论这“组织好的一组网页”的软件部分； 网站与网页 网站需要服务器驱动，网页则只需要服务器空间。 网站支持邮件服务器，网页无法提供该功能。 综上所述网站是以数据为核心，以服务器为基础的浏览者-管理员-系统管理员相互关联、相互促进、有机制约的信息化整体。网页则是静态页面各自为政，仅仅提供链接的HTML文件。 网站的制作流程 网页内容及版面布局的设计 网页内容的设计 HTML文件名： index.htm 网页名称： 网页的设计和制作 网页背景： 带有纹理的灰色大理石 网页上有文字： 计算机应用基础课程 展示自己的风采、显示自己的能力 上面两句话之间插入一张恰当的图形 滚动的字幕内容： 自己制作网页 超级勾链文字： “HTML和网页的关系”