厦门理工学院：《网页设计》培训课件教学资源（PPT课件）

及門理字 XIAMEN UNIVERSITY OF TECHNOLOGY 厦门理工学院教师发展中心网页设计培训 REE到,感 主讲人:信息中心周杰 时间:2013.04 www.xmutedu.a

厦门理工学院教师发展中心网页设计培训 www.xmut.edu.cn 主 讲 人：信息中心 周杰 时 间：2013.04

01网页设计基础知识 02 CreamWare使用技巧 03HTML常用代码 04常见编辑器 05Fash技术处理 副)及理x字优 AAEN UNIVERSITY OS TECHNOLOG

01 02 03 04 05 网页设计基础知识 DreamWare使用技巧 HTML常用代码 常见编辑器 Flash技术处理

网页设计与基础知识 令网页的基本概念及构成要素 令网页制作开发工具 网站建设的基本流程 令网页版式与风格设计 及理x字

网页设计与基础知识 ❖网页的基本概念及构成要素 ❖网页制作开发工具 ❖网站建设的基本流程 ❖网页版式与风格设计

网页的基本概念及构成要素 ◆ Internet:一个全球性的计算机互联网络,中文名 称为“因特网”或“国际互联网”,它集现代通信 技术和现代计算机技术于一体,是计算机之间进行 国际信息交流和实现资源共享的良好平台。 令由于互联网具备同时传送文字、动画、图形、声音、 视频等多媒体的能力,使之成为当今最流行的媒体。 而形式各异、内容繁杂的网页是这些信息的载体。 ◆那么什么是网页?什么是网站?网页与网站究竞有 哪些异同?网页包含哪些基本构成要素? 带着几个问题来回顾 些基础知识 )理2享优 AAEN UNIVERSITY OS TECHNOLOG

4 网页的基本概念及构成要素 ❖Internet：一个全球性的计算机互联网络，中文名 称为“因特网”或“国际互联网”，它集现代通信 技术和现代计算机技术于一体，是计算机之间进行 国际信息交流和实现资源共享的良好平台。 ❖由于互联网具备同时传送文字、动画、图形、声音、 视频等多媒体的能力，使之成为当今最流行的媒体。 而形式各异、内容繁杂的网页是这些信息的载体。 ❖那么什么是网页？什么是网站？网页与网站究竟有 哪些异同？网页包含哪些基本构成要素？ 带着几个问题来回顾 一些基础知识

orld Wide Web,全球信息网 俗称万维网)是 nternet I基于客户服务器 体系结构的分布式多平台的超文本超媒体信 息服务系统,它是是一个基于超文本 ( Hypertext)方式的信息检索服务工具, 将 Internet上各种类型的信息(文本、声音、 图形、动画、视频等)集合在一起,用户通 过“超级链接”可以快速访问。 WWW系统已在教育、科学技术、商业 广告、公共关系、大众媒体和娱乐等多 方面起着愈来愈重要的作用。 WW的应用成为 Interne上最受欢迎 的应用之一,它的出现极大的推动了 nternet的推广。 WWW获得成功的秘诀在于它制定了 套标准的、易于人们掌握的超文本开 发语言HTML、信息资源的统一定位格 式URL和超文本传送通信协议HTTP, 用户掌握后可以很容易地建立自己的网 站 副)及理x字优 AAEN UNIVERSITY OS TECHNOLOG

WWW（World Wide Web，全球信息网， 俗称万维网）是Internet上基于客户/服务器 体系结构的分布式多平台的超文本超媒体信 息服务系统，它是是一个基于超文本 （Hypertext）方式的信息检索服务工具， 将Internet上各种类型的信息（文本、声音、 图形、动画、视频等）集合在一起，用户通 过“超级链接”可以快速访问。 WWW系统已在教育、科学技术、商业 广告、公共关系、大众媒体和娱乐等多 方面起着愈来愈重要的作用 。 WWW的应用成为Internet上最受欢迎 的应用之一，它的出现极大的推动了 Internet的推广。 WWW获得成功的秘诀在于它制定了一 套标准的、 易于人们掌握的超文本开 发语言HTML、信息资源的统一定位格 式URL和超文本传送通信协议HTTP， 用户掌握后可以很容易地建立自己的网 站

HTML:是 Hypertext Markup Language的英文缩写,即超文本 标记语言,由很多标记组成的一种文本文件,它是构成Web页 面(Page)的主要工具,HTML标记可以说明文字、图形、动 画、声音、表格、链接等 令使用HTML语言描述的文件,能独立于各种操作系统平台(如 UNIX, WINDOWS等),访问它只需要一个WWW浏览器,我 们所看到的网页,是浏览器对HTML文件进行解释的结果 令HTTP:HypertextTransferProtoco,超文本传输协议 令URL:统一资源定位器( Uniform resource locator,URL)用于 描述 Internet上资源的位置和访问方式。 l:http://news.163.com/special/00012q9l/baogaojiedu100306.html http://img9.tianyacn/photo/2011/3/2/3510776026257400.ipg 副)及理x字优 AAEN UNIVERSITY OS TECHNOLOG

❖ HTML：是Hypertext Markup Language的英文缩写，即超文本 标记语言，由很多标记组成的一种文本文件，它是构成Web页 面（Page）的主要工具，HTML标记可以说明文字、图形、动 画、声音、表格、链接等 。 ❖ 使用HTML语言描述的文件，能独立于各种操作系统平台（如 UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我 们所看到的网页，是浏览器对HTML文件进行解释的结果。 ❖ HTTP： Hyper text Transfer Protocol，超文本传输协议 ❖ URL：统一资源定位器(Uniform Resource Locator，URL)用于 描述Internet上资源的位置和访问方式。 如：http://news.163.com/special/00012Q9L/baogaojiedu100306.html http://img9.tianya.cn/Photo/2011/3/2/35107760_26257400.jpg

网页网站与首页 ·网站 网站( Web site)是一个存放网络服务器上的完整信息的集合体。它包 含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整 体,用来描述一组完整的信息或达到某种期望的宣传效果。有的网站 内容众多,如新浪、搜狐等门户网站;有个网站只有几个页面,如个 人网站。 网页 网页( Web page)是按照网页文档规范编写的一个或多个文件,网页 经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个 链接,由浏览器翻译并显示出来的就是一个网页 网页( Web pages)是网站的组成部分,制作者可以将需要公布的信息 按照一定的方式分类,放在每个网页上,网页里可以有文字、图象、 声音及视频信息等。 )理2享优 AAEN UNIVERSITY OS TECHNOLOG

7 • 网站 –网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包 含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整 体，用来描述一组完整的信息或达到某种期望的宣传效果。有的网站 内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个 人网站。 • 网页 –网页（Web Page）是按照网页文档规范编写的一个或多个文件，网页 经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个 链接，由浏览器翻译并显示出来的就是一个网页。 –网页(Web pages)是网站的组成部分，制作者可以将需要公布的信息 按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、 声音及视频信息等。 网页网站与首页

网页的基本构成要素 ◆虽然网页种类繁多,形式内容各有不同。但网页的基本构成 要素大体相同,包括标志(Logo)、导航、广告、按钮、文 本、图片、动画、超链接、表单、音视频等,如下图所示, 网页设计就是要将上述构成要素有机整合,表达出美与和谐 国戏三月就 技上只船法1送山参 中国互动出版网 自中让上2【(1Es1 果a)购物车 经管理书店 外语书店 地点快握 数材考试书店 门m的到 人文社科书店 是 生活保书店 00 进口面书店 国费 志CD0 孕狗成形 本书能打 China-Pub U 活书 字文化品得 北的以要制二 尤两电子书新品荐 话动高品离 云罐:深健 白料字字木着作一们学·让冒发挥没 ph全因发园书 电子技术牌者+日二)巴草特篇力 工住应任国口 热店热品 0Q年折中户排 计算机用书 +0年品居读物评洗获某线 及可理x字佻 AAEN UNIVERSITY OS TECHNOLOG

8 网页的基本构成要素 ❖ 虽然网页种类繁多，形式内容各有不同。但网页的基本构成 要素大体相同，包括标志（Logo）、导航、广告、按钮、文 本、图片、动画、超链接、表单、音视频等，如下图所示， 网页设计就是要将上述构成要素有机整合，表达出美与和谐

文本 网页中的信息也以文本为主。与图片相 比,文字虽然不如图片那样能够很快引起浏 览者的注意,但却能准确地表达信息的内容 和含义。文本的属性包括:字体、颜色、样 式、大小及特效等。 2.图片 用户在网页中使用的图片格式主要包括 GF、JPEG和PNG等,其中使用最广泛的 是G|F和JPEG两种格式。 3.超级链接 超级链接技术是WW流行起来的最主 要的原因。它是从一个网页指向另一个目的 端的链接 副)及理x字优 AAEN UNIVERSITY OS TECHNOLOG

1. 文本 网页中的信息也以文本为主。与图片相 比，文字虽然不如图片那样能够很快引起浏 览者的注意，但却能准确地表达信息的内容 和含义。文本的属性包括：字体、颜色、样 式、大小及特效等。 2. 图片 用户在网页中使用的图片格式主要包括 GIF、JPEG和PNG等，其中使用最广泛的 是GIF和JPEG两种格式。 3. 超级链接 超级链接技术是WWW流行起来的最主 要的原因。它是从一个网页指向另一个目的 端的链接

4.动画 在网页中为了更有效地吸引浏览者的 注意,许多网站的广告都做成了动画 网页中的动画主要有两种:GF动画和Fash 动画。其中G|F动画只能有256种颜色,主 要用于简单动画和图标。 5.声音和视频 声音是多媒体网页的一个重要组成部 分。用于网络的声音文件的格式非常多,常 用的有MD、WAV、MP3和AF等。很多浏 览器不要插件也可以支持MDl、WV和AF 格式的文件,而MP3和RM格式的声音文件 需要专门的浏览器播放。 视频文件的采用使网页变 得精彩而富有动感。视频文件的格式也非常 多,常见的格式有RM、MPEG、A和Dvx 等 6.导航栏 导航栏的作用就是引导浏览者游历站 点。事实上,导航栏就是一组超级链接,这 组超级链接的目标就是本站点的主页以及其 他重要网页。 副)及理x字优 AAEN UNIVERSITY OS TECHNOLOG

4. 动画 在网页中为了更有效地吸引浏览者的 注意，许多网站的广告都做成了动画形式。 网页中的动画主要有两种：GIF动画和Flash 动画。其中GIF动画只能有256种颜色，主 要用于简单动画和图标。 5. 声音和视频 声音是多媒体网页的一个重要组成部 分。用于网络的声音文件的格式非常多，常 用的有MIDI、WAV、MP3和AIF等。很多浏 览器不要插件也可以支持MIDI、WAV和AIF 格式的文件，而MP3和RM格式的声音文件 则需要专门的浏览器播放。 视频文件的采用使网页变 得精彩而富有动感。视频文件的格式也非常 多，常见的格式有RM、MPEG、AVI和DivX 等。 6. 导航栏 导航栏的作用就是引导浏览者游历站 点。事实上，导航栏就是一组超级链接，这 组超级链接的目标就是本站点的主页以及其 他重要网页