《Dreamweaver CS6网页设计与制作》第1章网站设计基础 刘敏娜 主编

37
37
Banner
Banner为网页中的广告条，又被称作旗帜、网幅或横幅， 是一种可以由文本、图像和动画相结合而成的网页栏目。 国际广告联盟的“标准与管理委员会”联合广告支持信 息和娱乐联合会等国际组织，推出了一系列网络广告宣传物 的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准 的Banner尺寸。 名称 Banner面积 在设计Banner时，既可遵循以上标准，以方便网站的广 摩天大楼形 120px×600px 告用户设计广告。同时，也可灵活根据网页的版式对其尺寸 中级长方形 300px×250px 正方形弹出 250px×250px 进行调节，以符合网页整体的风格和布局 。
3
WWW

万维网WWW (World Wide Web)并非某种 特殊的计算机网络。万维网是一个大规模 的、联机式的信息储藏所，英文简称为 Web。下图说明了万维网提供分布式服务 的特点。
4
WWW
5
WWW

万维网是一个分布式的超媒体(hypermedia)系统，
它是超文本(hypertext)系统的扩充。
7
静态网页与动态网页

静态网页
纯粹HTML格式的网页 每个网页都有一个固定的URL，网页URL
以.htm、.html、.shtml等常见形式为后缀，且不含有 “?” 也可以出现各种动态效果

动态网页
以数据库技术为基础，随不同客户、不同时间，返回
不同的网页 后缀通常是asp、aspx、jsp、php等，并且通常在URL 中带有”？”
• real格式是RealNetworks公司网络音频和视频解决方案，具有很高的 压缩比，使用流式（streaming）播放媒体技术，从而使人们能够在 网上实时收听音频及收看视频。
19
音频
20
视频
• 在网页中添加视频文件可以大大增加站点的可读性，已成为站点多媒 体特性的重要体现。现在，能够在网络上运行的视频文件类型也日益 丰富。 • AVI（.AVI）是音频视频交错（Audio Video Interleaved）的英文缩写， 它是Microsoft公司开发的一种符合RIFF文件规范的数字音频与视频 文件格式。 • MPEG文件（.MPEG/.MPG/.DAT）是运动图像压缩算法的国际标准， 它采用有损压缩方法减少运动图像中的冗余信息，同时保证每秒30帧 的图像动态刷新率，已被几乎所有的计算机平台共同支持。
21
了解网页制作工具
常用的网页编辑软件有FrontPage和Dreamweaver等。 Dreamweaver因其功能全面、操作灵活、专业性强，而 受到网页制作人员的青睐。 在制作网页时，经常使用的图像处理软件有Fireworks 和Photoshop。 Flash是目前最常用的网页动画制作软件。用Flash制 作的动画文件小，利于网上发布，而且还能制作出具有交 互功能的动画，并能很方便地与网页建立链接。
28
29
网页页面与版块
布局的设计通常需要注意网站的页面大小以及各种版块的安排 1．网页页面大小 合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。 目前国内的上网者习惯使用是微软公司的Internet Explorer浏 览器（简称IE浏览器）。 在屏幕分辨率为1024×768时，不同版本的IE浏览器的屏 幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。

32
网页版面布局原则
主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得意彰

33
版面布局的步骤
草案：在白纸上将景象画上去 粗略布局：将功能模块安置到页面上 定案：将粗略布局精确化，具体化

34
Logo
Logo是企业或网站的标志，其作用是标识网站的名称，并为用户提 供 识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而 言是唯一的。
网页设计
授课教师:
1
主要学习内容 网站设计基础知识 Dreamweaver、Fireworks html语言 如何学习这门课程 多实践，多动手 多参考优秀网站：如网易，sohu

2
1.1网页设计相关知识

www 网页的概念 超文本(Hypertext) 网站的概念 网页浏览原理 网页组成要素 网页编辑工具 网页布局 网页的页面与版面
8
静态网页
/cartoon.htm
9
动态网页
/qhdwzy/zsxx.jsp
10
MSN中国网站的首页
11
超文本(Hypertext)
超文本(Hypertext)：具有超级链接功能 的文本文件叫超文本。超文本文件中的某 些字、符号或短语起着“热链路” （Hotlink）的作用，在显示出来时其字体 或颜色发生变化或者标有下横线、以区别 于一般的正文.
七、468×60，应用最为广泛的广告条尺寸，用于页眉或页脚。
八、88×31，主要用于网页链接，或网站小型LOGO。
36
1.2.2 导航条
导航条是网站的重要组成元素。其可以索引网站内容，帮助用户快 速访问网站功能。 导航条内包含的是网站功能的按钮或链接，其项目的数量不宜过多。 通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的 导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条 也会与banner结合使用，通过图像增强导航条的表现力。
14
网页包含的元素
文本 图像 动画 音频 视频

15
文本
文本是非常重要的网页元素之一，是网页中信息的主要载体。 文字、字母、数字和符号等都可以称为文本。与漂亮的图像、优 美的动画、悦耳的声音和有声有色的视频相比，文本在网页中似 乎是最普通不过了，但文本却是用户创建网页应该考虑的关键因 素，因为文本是表述信息的最完备的方式，绝大多数信息都是通 过文本传递给浏览者的。
18
音频
• MP3具有压缩程度高、音质好的特点，是目前最为流行的一种音乐 文件，在网上有很多可以在线收听或下载MP3的站点。 • ASF和WMA都是Microsoft公司针对Real公司开发的新一代网上流式 数字音频压缩技术，同时兼顾了保真度和网络传输需求，所以具有 一定的先进性。 • WAV是Microsoft Windows系统提供的音频格式，由于Windows本身 的影响力，这个格式已经成为了事实上的通用音频格式。
12
网站的概念
网站：WWW服务器上相互链接的一系列 网页组成一个网站（Web Site）。网站是 WWW上的一个结点。如果输入地址时仅指定 WWW服务器域名或IP地址，而不加路径信息， 则将打开网站默认的首页（Home Page）， 也称为主页。首页是一个网站中最重要的 网页，通常包含最重要的信息以及指向各 分栏目的超链接。

万维网以客户服务器方式工作。 客户程序向服务
器程序发出请求 ，服务器程序向客户程序返回客
户所要的万维网文档 。在一个客户程序主窗口上
显示出的万维网文档称为页面(page)。
6
网页的概念

网页(Web Page)：是通过WWW发布的包含有文本、图片、声音、动画 等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机 地集合在一起就组成了网站。 网页的主要类型 HTML(HyperText Markup Language)全称超文本标记语言，利用标记 （tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任 何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本 质上的区别。 ASP (Active Server Pages )中文名为动态服务器主页 ,它是一种 应用程序环境，可以利用 VBscript 或 Java Script 语言来设计， 主要用于网络数据库的查询与管理。 JSP(Java Server Page)JSP 与 ASP 非常相似。不同之处之一在于 ASP 的编程语言是 VBScript 之类的脚本语言， 而 JSP 使用的 Java 。
16
图像
图像是站点中比较重要的元素，网页的设计和创意都离不开图像 的使用和处理。一个欣赏性较好的站点应有清新悦目的画面，能够吸 引读者有兴趣浏览下去。同时，图像可以传递文字所无法表达的特定 的信息，在Web上的大多数网页都使用图像来图文并茂地对内容加以 介绍。网页中的图像既有简单的彩色背景，也有实物的真实照片。总 之，根据不同的需要，配备不同的图像加以说明，但从做网页的角度 来讲，网页上的图像可以分为两大类。 一类纯粹是网页本身的需要，起 增添网页色彩的作用，它并不传 给读者特定的信息，如某些网页 背景图像、表格背景图像等。另 一类是行文的需要，配合文本向 读者传递信息，这就是所说的图 文并茂，或者利用图像单独向读 者传递信息，如图片新闻。
22
网页布局类型
国字型 匡字型 三字型 川字型 其他类型
23
国字型
国字型也称同字型，即最上面是网站的标题以及横幅广告条，接下 是 主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。 这是使用最多的一种结构类型。
24
匡字型
匡字型也称拐角形，这种结构与国字型结构很相近，上面是标题及 广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也 是一些网站的辅助信息。
17
动画
动画是现代网站的重要特色，是网页制作技术的重要组成部 分。在网页中，常见的动画类型有GIF动画、Flash动画等，使 用编程的方法也可以制作动画。目前，网页中最流行的动画是 Flash动画。Flash动画一般具有文件容量小、传输速度快、不失 真、边下载边播放的特点，还具有交互性优势。Flash动画具有崭 新的视觉效果，已经成为一种流行的艺术表现形式。
30
网页页面与版块
2．网页版块构成 网页是由各种版块构成的。Internet中的网页内容各异。 然而多数网页都是由一些基本的板块组成的，包括Logo、 导航条、Banner、内容版块、版尾等。