计算机辅助设计 Dreamweaver 授课人：曹晏祯 手 机：13700853295.

Presentation on theme: "计算机辅助设计 Dreamweaver 授课人：曹晏祯 手 机：13700853295."— Presentation transcript:

1 计算机辅助设计 Dreamweaver 授课人：曹晏祯 手 机：

2 第1章 网页设计基础 本章学习目标 1、理解网页与网站的区别； 2、了解网页的基本元素； 重点难点 1、熟悉并掌握HTML语言基础知识；
2、理解并掌握网页设计的基本流程。

3 【教学方法】：以课堂面授为主，采用讨论、提 问相结合的教学方法，调动学生学习积极性
【授课时数】：6课时

4 1.认识网页与网站 静态网页，也就是HTML静态页面，它是物理存在的文件，这类网页可以由网页浏览器（如：IE、傲游）直接浏览。
动态网页，它不能由浏览器直接浏览，而必须经过Web服务器软件解释或编译后，以HTML格式将结果输出到客户端浏览器上。

5 2. 网页的基本元素 在学习网页设计的具体内容之前，首 先要了解一下关于网页制作的基础知识。 这些知识包括浏览器、网页中使用的元素 、页面语言，以及各种软件在网页设计中 所起的作用等。通过学习这些基础知识， 可以对网页设计有一个整体上的了解。

6 文本 图像 动画 音频 视频 图1.2 以文本为主体的网页 图1.3 以图像为主的网页

7 2.1 浏览器 1．IE浏览器 IE浏览器的全称是Internet Explorer，它是微软公司发布的免费浏览器。由于直接绑定在Windows操作系统之中，所以无须下载安装。根据发布时间的先后，有IE 5.0，5.5，6.0，7.0等很多版本。目前最新的是IE 9.0版本。如果更改浏览器的设置，则文本的显示效果会相应地改变。单击“查看”菜单，在打开的下拉菜单中选择“文字大小”选项，

8 2.1 浏览器 2．Firefox浏览器 Firefox浏览器又称为火狐浏览器，是Mozilla基金会与众多志愿者所开发的，现在也有很多的使用者。目前使用较多的版本是Firefox 15.0。

9 2.2 文本 1．文本的显示 文本是网页中运用最为广泛的元素之一。在网页设计中，可以通过设置字体、字号、颜色、背景等属性来改变文本的视觉效果。 在网页中直接输入没有定义任何样式与属性的文本内容，其显示效果和浏览器的设置有关。

10 2.2 文本 2．文本的格式 在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等（关于定义文本格式的详细内容，将在后面的章节中详细讲解）。下面是定义文本格式后的显示效果，如图所示。

11 2.3 图像 网页中使用的图像可以分为两个部分：一部分是起修饰作用的图像，一般在页面中起美化作用；另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。 网页支持的图像格式主要有三种： JPEG(包括JPG)、GIF、PNG 在实际应用中网页使用的图像常被分割成多个部分，然后再利用排版技术，将分割的图像拼合在一起，以提高图像在浏览器中的显示速度。

12 矢量图和位图 矢量图是使用数学公式计算来获得的图像格式，其优点在于即使将图像放大，依然能够清晰显示；其缺点在于难于表现色彩丰富的图像内容。在网页中，无法使用单独的矢量格式的图像。矢量图通常使用在Flash动画之中。下面是矢量图像和其放大后的效果和位图图像和其放大后的效果

13 网页设计中常用的图片格式 在网页中通常使用的图片格式有GIF格式和JPEG格式。其他的图片格式也可以在网页中使用，但会受到浏览器以及客户端环境的限制。具体内容如下所示。 1．GIF格式 GIF（Graphics Interchange Format）格式即图形交换格式 2．JPEG格式 使用JPEG格式的图片的好处同样在于各种浏览器都能很好地支持，同时可以很好地压缩图片，改善加载的速度。

14 使用图片 在网页中使用图片一般分为两种情况：一种是图片作为修饰部分；另一种是图片作为内容部分。作为修饰部分的图片，例如导航栏文字后面使用的背景等；作为内容出现的图片，例如网站中展示的产品的图片等。下面分别用实例来说明，作为修饰的图片和作为内容图片的作用和显示效果，具体内容如下所示。 1．作为修饰的图像 2．作为内容的图像

15 在网页中，作为内容的图像一般都有自身的意义。例如用来展示产品的图像，或者用来进行导航的图像等。下面是在一个页面中使用内容图像的示例，其显示效果如图所示。

16 2.4 多媒体 网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。下面进行详细讲解。
2.4 多媒体 网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。下面进行详细讲解。 1．音频多媒体内容 在网页中音频文件可以直接作背景使用（只有IE浏览器支持此属性）。如果要在其他浏览器中使用音频文件，则需要使用播放器（关于多媒体的使用，将在后面的章节中详细讲解）。

17 2.4 多媒体 2．Flash动画 在网页中使用的Flash动画非常多。Flash动画可以用来制作站点的片头、Logo、Banner、页面中的广告等内容（关于片头、Logo、Banner等概念，将在后面的章节中详细讲解）。Flash动画相对于其他格式的音频和视频文件，占用的空间更小，使用起来也更方便灵活。 3．视频多媒体内容 在网页中无法直接播放视频内容（Flash动画除外）。如果要播放视频内容，必须使用相应的播放器。

18 音频 音频格式 主要特点 MP3 能够以较小的比特率以及较大的压缩比达到近乎完美的CD音质。 MIDI 音质较好，不需要安装任何插件。
WAV 文件较大，在加载过程中会增加系统资源的开销。

19 视频 视频格式 主要特点 WMV 独立的编码方式，可本地或网络回放、部件下载、可扩充可伸缩的媒体类型。 RM
实现视频文件在低速网络上的实时传送与播放。 ASF 在压缩率和图像质量上的表现都很出色。 MPEG 采用有损压缩算法减少运动图像中的冗余信息，同时保证每秒30帧的图像动态刷新率。 AVI 一种符合RIFF文件规范的数字音视频文件格式。

20 2.5 结构语言 网页中使用的结构语言，一般为HTML和其升级版本XHTML。使用所见即所得的网页制作软件，例如Dreamweaver等，可以直接生成页面结构语言代码。 结构语言可以在Dreamweaver等软件的“代码”视图中看到，其显示效果如图所示。

21 2.6 脚本 脚本一般在网页中用来实现某种特殊的效果或功能。通常使用的是JavaScript和VBScript。使用Dreamweaver等网页制作软件，可以直接在页面中添加脚本。脚本一般用来完成一个或多个相应动作，例如响应鼠标等。

22 3.超文本标记语言（HTML）基础 3.1 HTML概念
HTML（Hypertext Markup Language，超文本标识语言）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。

23 3.2 HTML的发展历史 1990年，HTML语言同WWW一起诞生于瑞士的GERN实验室。Tim Berners-Lee及其开发小组研究建立了一种以一定格式传输信息的方法，就是众所周知的超文本传输协议HTTP。该协议使用了HTML语言。HTML语言作为一种标识性的语言，由一些特定符号和语法组成，用来制作超文本文档。在超文本中可以加入图片、声音、动画、视频等内容，并且可以从一个文件跳转到另一个文件。

24 用HTML编写的超文本文档称为HTML文档，它在各种操作系统平台(如UNIX，WINDOWS等)都能使用。

25 补充： HTML语言的语法规则 HTML文档扩展名为htm或html，由标记(标签)、代码和注释组成，标记是HTML中用来控制文字、图形等显示方式的符号。标记分单独出现的标记和成对出现的标记两种。大多数的标记是成对出现的，由首标记和尾标记组成。每个标记可以有一个或几个控制属性。 HTML语法的三种基本表达方式如下所示： <标记> <标记>对象</标记>

26 <标记 属性1=”参数1” 属性2=”参数2” …… >对象</标记>
比如有如下代码： <font size=“7” color=“#0000ff”>网页</font> 其中<font>和</font>分别为首标记和尾标记，用来定义“网页”两个字的属性，标记中有size和color两个属性，分别定义“网页”两个字的大小是“7”(36磅)，颜色是“#0000ff”(十六进制RGB颜色代码)，属性的值要加西文引号。

27 1．标记符（规定这是什么信息，例如<BR>换行）
2．属性（描述对象特征的特性，属性与标记符之间用空格分隔，） 为了区分：标记符和属性通常不区分大小写，通常标记符用大写字母表示，属性用小写字母表示

28 3.3 编写第一个网页 HTML文件的编写方法 根据HTML语法写出来的文件称为HTML文件，可以使用任何文本编辑软件创建、编辑HTML文件。 HTML控制资料显示格式的方式，是通过两个一组的HTML标记，将要控制的文字包含于中间。

29 完整的语法为 〈标记名称〉要控制的文字〈/标记名称〉 第二级单标签语法结构如下：
<标签 属性1=属性值1 属性2=属性值2 ……属性N=属性值N> 双标签语法结构如下： <标签>内容</标签> 完整的语法为 〈标记名称〉要控制的文字〈/标记名称〉

30 3.4使用浏览器查看网页效果和源代码 HTML文件在保存时，需保存为纯文本文件，并用.htm或.html作为扩展名。保存后，运行浏览器就可以浏览网页。 如果要查看目前浏览网页的源文件，只要单击查看—源文件，即可将目前浏览的网页，通过记事本打开并浏览其源文件。

31 HTML文件的基本结构 HTML定义了以下3种标记，用于描述页面的整体结构。
<html>……</html>标记：网页文档的开始、结束标记，表示文件声明，让浏览器知道这是一个HTML文件。 <head>……</head>标记：网页文档的头部信息，一般包含标题和主题信息，出现在文档的顶部分。 <body>……</body>标记：网页文档的正文信息，用来指明网页文档的主体区域，网页所要显示的内容都放在这个标记里面。

32 HTML文件是由头和主体两大部分组成。其中头就是文件的标题，以 〈 head 〉开头，以〈/ head 〉结束，两个标记之间用来定义标题的内容；至于主体用〈 body 〉开头，以〈 /body 〉结束，两个标记之间用来放置内容以及相关的文件的格式设定。

33 <HTML> <HEAD> <TITLE> 文本标题 </TITLE>
<BODY> 文本内容 </BODY> </HTML>

34 补充： <html> <!标志该html文档的开始 > <head>
<title>文档标题</title> </head> <body>html文档的主体部分</body> </html> <!标志着html文档的结束> <html>标记是文档标识符，它是成对出现的，首标记<html>和尾标记</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言 (HTML)编写的。

35 该标记不带有任何的属性。事实上，现在所用的浏览器都是自动识别HTML文档的，并不要求有<html>标记的出现，也不对它进行任何的处理。但是，为了提高文档的适用性，还是应该养成用这个标记的习惯。 <head>标记用来定义文档头部分。习惯上把HTML文档分为文档头和文档主体两个部分。文档头用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一些属性，主体部分就是在浏览器窗口中看到的内容。

36 嵌套在<head>标记中使用的子标记主要有<title>，还可以出现其它子标记，如<isindex>，<meta>等，这些子标记都不是必须的。
<title>标记是成对的，用来规定HTML文档的标题。在<title>和</title>之间的内容将显示在Web浏览器窗口的标题栏中。 <body>标记用来定义文档主体部分。在<body>和</body>之间的内容将显示在浏览器窗口内。在<body>标记中可以规定整个文档的一些基本属性。

37 注意：<title></title>标志对只能放在<head></head>标志对之间。
下面是一个综合的例子，说明了HTML文档中最基本标志的使用。 <HTML> <head> <title>显示在浏览器最上边蓝色条中的文本</title> </head> <body bgcolor=”red”text=”blue”> <p>红色背景、蓝色的文本</p> </body> </HTML>

38 HTML语言代码不区分大小写，多数HTML标记可以嵌套，但不能交叉，HTML文件一行可以写多个标记，一个标记也可以分写多行，不用任何续行符。

39 4.超文本标记语言（HTML）基础 文本标签 标题标签 图1.6 标题标签的网页效果

40 4.超文本标记语言（HTML）基础 文本标签 文字控制标签 图1.7 文字控制标签的网页效果

41 4.超文本标记语言（HTML）基础 文本标签 换行标签 图1.8 换行标签的网页效果

42 4.超文本标记语言（HTML）基础 图像标签 图1.9 图像标签的网页效果

43 4.超文本标记语言（HTML）基础 表格标签 图1.10 表格标签的网页效果

44 5.超文本标记语言（HTML）基础 HTML的优点

45 6.网页设计的基本流程 前期策划 CI形象设计 栏目与版块规划 确定网站的目录结构 确定网站的整体风格 版面布局及首页设计 网页模板制作
网站测试 发布网站

46 6.1前期策划 确定网站的主题和名称，一个好的网站必须有个明确、精要、尽量能够体现网站思想的主题。 中国美网

47 6.2CI形象设计 包括LOGO、色彩、广告语等可以作为标志性的东西。CI形象设计要求以得体的颜色和图案体现网站的形象，背景颜色、字体大小及颜色、导航栏、版权信息及布局、标题等都应该做到前后协调、一致。 李宁官方网站

48 6.3栏目与板块规划 栏目的分类可以按主题或性质分类，也可以按组织或人的思考方式分类。
板块的安排应坚持适度的原则，先制作有代表性的页面，再将相应的内容补充完整。 融謦礼品公司

49 6.4确定网站的目录结构 在制作网页前一定要养成画结构图的良好习惯。首页要尽量简洁，一般包括各功能按钮、内容要点提示、友情链接等内容。分支页面内容相对独立，切忌重复，而且要求导航功能完善。 华信学院

50 6.5确定网站的整体风格 网站风格的确定主要针对浏览者以及网站的主题。

51 6.6版面布局及首页设计 页面布局的原则是将一定的内容放在特定的可视块上，内容与定位相关，形成“标准”布局，这有利于网页的浏览和生成。
首页是浏览者对网站的第一印象，是整个网站导航图的入口点。

52 6.7网页模版制作 网页模版里包括所有的网页的公共元素，如LOGO、广告语、导航栏、更新时间、推荐栏目、外接CSS样式表的链接、收藏夹、返回首页、站点地图、 地址、版权信息等。

53 6.8网站测试 最方便的测试方法就是在本机上使用Internet浏览器进行浏览测试，测试内容包括链接、外观、速度、脚本和程序等。

54 6.9发布网站 可以使用Dreamweaver CS5中的“发布站点”功能或者FTP软件，将页面文件上传到指定的网络服务器上。

55 7. 上机实验 — 简单的网页制作 图1.15 简单的页面效果

56 本章小结 本章主要介绍了网页与网站的区别、网页的基本元、HTML语言基础知识以及网页设计的基本流程。由于网页设计既是一项技术性的工作，又是一项艺术性很强的工作，因此在设计过程中应该学会合理地去使用网页的基本元素。同时，HTML语言是一种用来制作网络中超级文本的简单标记语言，是学好动态网页设计的基础语言，因此必须掌握。

57 思考与练习 选择题 （1）我们常说的网页实际上包含了两个概念： 一种是静态网页，另一种是 。
（1）我们常说的网页实际上包含了两个概念： 一种是静态网页，另一种是 。 A. Flash动画 B.视频 C. 动态网页 D. Web应用程序 （2）网站是一个复杂的系统，它不仅包括网页、Web应用程序，还包括与之相关的数据库及各类媒体文件，甚至还包括 、Web服务器软件以及承载网站运行的各类硬件设备等。 A. 操作系统 B.软件 C. Web应用程序 D. 计算机 （3）目前，网页支持的图像格式不包括： 。 A. JPEG B.GIF C. PNG D. PSD （4）下列图格式在网页中支持透明背景图像的是 ？ A. JPEG B.GIF C. BMP D. TIFF

58 思考与练习 填空题 （1）动态网页不能由浏览器直接浏览，而必须经过 解释或编译后，以HTML格式将结果输出到客户端浏览器上。
（2）网页的基本元素主要包括文本、图像、动画、 等。 （3） 是由标签构成，除了极个别标签是单独存在的标签以外，大多数标签是成对出现的。

59 谢 谢！