网页设计与制作 课件[精]
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
22
图形 这里的图形概念是广义的，它可以是普通的绘制图形，
可以是各种图像，还可以是动画。一幅优秀的网页除了有 能吸引浏览者的文字形式和内容外，图形的表现功能是不 能低估的。网页上的图形格式一般使用JPEG和GIF，这两 种格式具有跨平台的特性，可以在不同操作系统支持的浏 览器上显示。图形在网页中通常有如下应用。 1．菜单按钮
15
网页空间：用来存放网页的存储空间，位于 提供相关服务的网络服务器上。
16
从事网页设计相关的程序语言
HTML ： HTML 是 “ HyperText Markup Language”的缩写，中文翻译为“超文本标 记语言”。 XML ： XML 是 “ Extensible Markup Language”的缩写，中文翻译为“可扩展标 记语言”。
4
1.运行浏 览器阅读 Web文件
Web 文件
2.浏览器向服 务器要求超链
接的文件
Web 客户端 网络连接 Web 服务器端
3.服务器将 HTML文件传给 浏览器，译成
Web 文件
图1-2 5
网页上面有什么？
文字 图片 超链接 特殊组件
8
什么是超链接
一种与其它文件的链接，当用户点 击后，所链接的信息就能显示出来。
网页设计与制作
1
第一部分 网页制作初识
通过本部分的学习，应该掌握以下内容：
认识网页 构成网页的基本要素 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤 网页执行原理 网页运行的软件支撑环境
2
World Wide Web 的诞生
World Wide Web 又称WWW、W3、Web，中文 名称叫做“全球信息网”。
从事网页设计所需要的软、硬件
硬 件 ： 一 台 配 备 64MB 内 存 的 Pentium 计 算 机就够了，最多是再加上调制解调器，好将 设计完毕的网页上传至Internet。 网页编辑软件：网页编辑软件可以分成两种， 一种是类似记事本，另一种则是可视化 (Dreamweaver)网页编辑程序。
21
3．字型 在网页适当的位置采用不同的字体字型，也能使
网页产生吸引人的效果。应该注意的是在报刊上变换 字体字型非常普遍，它可以在不同的地方使用不同的 字型。但在网页制作上却要慎重。因为有些美丽的字 型在制作网页的计算机上有，但将来别人浏览你的网 页时，浏览者的计算机上未必装有这种字体。这样浏 览者就无法得到你预想的浏览效果，甚至适得相反。 如果只是标题或少量的文字，可以将采用的特殊字体 制作成图形方式，就可避免其他浏览者看不到的尴尬 局面了。当文本内容较多时，可以利用表格形式来实 现。
协议 URL所连接的服务 http:// Web服务 ftp:// 文件传输服务 mailto: 传送E-Mail给特定用户
实例
http://www.ratvu.com ftp://ftp.nctuccca.edu/
mailto:wjy@ratvu.com
注：mailto:服务的前面都没有两条斜线 12
20
1．标题 一个网页通常都有一个标题，表明本网页的主 要内容。标题是醒目，是吸引浏览者能否注意的 一个关键，因此对标题的设计是很重要的。标题 出现在浏览器的标题栏。 2．字号
网页中的文字不能太大或太小。太大会使得 一个网页信息量变大，太小又使人们浏览时感到 费劲。一个优秀网页中的文字，应统筹规划，大 小搭配适当，给人以生动活泼之感觉。
17
浏览器端的Script(描述语句)：Script是一 段嵌在HTML原始代码内的小程度。
18
服务器端的Script(描述语言)：
目前常见的服务器端 Script有ASP程序和 CGI 程 度 两 种 。 ASP 是 “ Active Server Pages”的缩写，中文翻译为“动态服务器 网 页 ” 。 CGI 是 “ Common Gateway Interface”缩写，中文翻译为“通用网关接 口”，
19
一、一个网站实例
二、网页的基本要素 文字 文字是网页发布信息所用的主要形式，由文字制作 出的网页占用空间小，因此，当用户浏览时，可以很 快的展现在用户面前。另外，文字性网页还可以利用 浏览器中“文件”菜单下的“另存为”功能将其下载， 便于以后长期阅读，也可对其进行编辑打印。但是没 有编排点缀的纯文字网页，又会给人带来死板不活泼 的感觉，使得人们不愿意再往下浏览。所以，文字性 网页一定要注意编排，包括标题的字型字号，内容的 层次样式，是否需要变换颜色进行点缀等等。
CENT 和MIT 于1994年7月成立World Wide Web Consortium(简称W3C、W3协会)，负责管理 Web相关事务及协议(http://www.w3.org/)。
3
何谓主从式结构？ Web 属于主从式结构吗？
Web 采用的是一种主从式结构(ClientServer Module)。
9
URL(Universal Resource Locator,全球资 源定位法)，URL所代表的正是Web服务器的 网址。
10
我们先看个例子再做说明：
http://www.happywin.com:8001/Windows/project.html
通Baidu Nhomakorabea
服
通文
文
讯
务
讯件
件
协
器
端夹
议
名
口
称
11
表1-2 URL所链接的服务
网页上的菜单按钮有一些是由图形制作，通常有横排 和竖排两种形式，由此可以转入不同的页面。
23
2．背景图形 为了加强视觉效果，有些网页在整个网页的底
层放置了图形，称作背景图。背景图可以使网页更 加华丽，使人感到界面友好。但由于这是一个比较 大的图形，需要占据较大的空间，致使网页的显示 速度明显变慢，所以，近期的网页以及比较著名的 访问量比较大网站一般都不设置背景图形。 链接标志 链接是网页中一种非常重要的功能，是网页中最重要、 最根本的元素之一。通过链接可以从一个网页转到另 一个网页，也可以从一个网站转到另一个网站。链接 的标志有文字和图形两种。制作一些精美的图形作为 链接按钮，使它和整个网页融为一体。
13
图像动画处理软件：常见的影像处理软件有 Adobe PhotoShop 、 Macromedia Flash 、 Director、CorelDraw、Ulead PhotoImpact、 Apple QuickTime VR、QuickDraw 3D等。
14
浏览器软件：目前常见的浏览器有Netscape Communicator 及 Microsoft Internet Explorer。
图形 这里的图形概念是广义的，它可以是普通的绘制图形，
可以是各种图像，还可以是动画。一幅优秀的网页除了有 能吸引浏览者的文字形式和内容外，图形的表现功能是不 能低估的。网页上的图形格式一般使用JPEG和GIF，这两 种格式具有跨平台的特性，可以在不同操作系统支持的浏 览器上显示。图形在网页中通常有如下应用。 1．菜单按钮
15
网页空间：用来存放网页的存储空间，位于 提供相关服务的网络服务器上。
16
从事网页设计相关的程序语言
HTML ： HTML 是 “ HyperText Markup Language”的缩写，中文翻译为“超文本标 记语言”。 XML ： XML 是 “ Extensible Markup Language”的缩写，中文翻译为“可扩展标 记语言”。
4
1.运行浏 览器阅读 Web文件
Web 文件
2.浏览器向服 务器要求超链
接的文件
Web 客户端 网络连接 Web 服务器端
3.服务器将 HTML文件传给 浏览器，译成
Web 文件
图1-2 5
网页上面有什么？
文字 图片 超链接 特殊组件
8
什么是超链接
一种与其它文件的链接，当用户点 击后，所链接的信息就能显示出来。
网页设计与制作
1
第一部分 网页制作初识
通过本部分的学习，应该掌握以下内容：
认识网页 构成网页的基本要素 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤 网页执行原理 网页运行的软件支撑环境
2
World Wide Web 的诞生
World Wide Web 又称WWW、W3、Web，中文 名称叫做“全球信息网”。
从事网页设计所需要的软、硬件
硬 件 ： 一 台 配 备 64MB 内 存 的 Pentium 计 算 机就够了，最多是再加上调制解调器，好将 设计完毕的网页上传至Internet。 网页编辑软件：网页编辑软件可以分成两种， 一种是类似记事本，另一种则是可视化 (Dreamweaver)网页编辑程序。
21
3．字型 在网页适当的位置采用不同的字体字型，也能使
网页产生吸引人的效果。应该注意的是在报刊上变换 字体字型非常普遍，它可以在不同的地方使用不同的 字型。但在网页制作上却要慎重。因为有些美丽的字 型在制作网页的计算机上有，但将来别人浏览你的网 页时，浏览者的计算机上未必装有这种字体。这样浏 览者就无法得到你预想的浏览效果，甚至适得相反。 如果只是标题或少量的文字，可以将采用的特殊字体 制作成图形方式，就可避免其他浏览者看不到的尴尬 局面了。当文本内容较多时，可以利用表格形式来实 现。
协议 URL所连接的服务 http:// Web服务 ftp:// 文件传输服务 mailto: 传送E-Mail给特定用户
实例
http://www.ratvu.com ftp://ftp.nctuccca.edu/
mailto:wjy@ratvu.com
注：mailto:服务的前面都没有两条斜线 12
20
1．标题 一个网页通常都有一个标题，表明本网页的主 要内容。标题是醒目，是吸引浏览者能否注意的 一个关键，因此对标题的设计是很重要的。标题 出现在浏览器的标题栏。 2．字号
网页中的文字不能太大或太小。太大会使得 一个网页信息量变大，太小又使人们浏览时感到 费劲。一个优秀网页中的文字，应统筹规划，大 小搭配适当，给人以生动活泼之感觉。
17
浏览器端的Script(描述语句)：Script是一 段嵌在HTML原始代码内的小程度。
18
服务器端的Script(描述语言)：
目前常见的服务器端 Script有ASP程序和 CGI 程 度 两 种 。 ASP 是 “ Active Server Pages”的缩写，中文翻译为“动态服务器 网 页 ” 。 CGI 是 “ Common Gateway Interface”缩写，中文翻译为“通用网关接 口”，
19
一、一个网站实例
二、网页的基本要素 文字 文字是网页发布信息所用的主要形式，由文字制作 出的网页占用空间小，因此，当用户浏览时，可以很 快的展现在用户面前。另外，文字性网页还可以利用 浏览器中“文件”菜单下的“另存为”功能将其下载， 便于以后长期阅读，也可对其进行编辑打印。但是没 有编排点缀的纯文字网页，又会给人带来死板不活泼 的感觉，使得人们不愿意再往下浏览。所以，文字性 网页一定要注意编排，包括标题的字型字号，内容的 层次样式，是否需要变换颜色进行点缀等等。
CENT 和MIT 于1994年7月成立World Wide Web Consortium(简称W3C、W3协会)，负责管理 Web相关事务及协议(http://www.w3.org/)。
3
何谓主从式结构？ Web 属于主从式结构吗？
Web 采用的是一种主从式结构(ClientServer Module)。
9
URL(Universal Resource Locator,全球资 源定位法)，URL所代表的正是Web服务器的 网址。
10
我们先看个例子再做说明：
http://www.happywin.com:8001/Windows/project.html
通Baidu Nhomakorabea
服
通文
文
讯
务
讯件
件
协
器
端夹
议
名
口
称
11
表1-2 URL所链接的服务
网页上的菜单按钮有一些是由图形制作，通常有横排 和竖排两种形式，由此可以转入不同的页面。
23
2．背景图形 为了加强视觉效果，有些网页在整个网页的底
层放置了图形，称作背景图。背景图可以使网页更 加华丽，使人感到界面友好。但由于这是一个比较 大的图形，需要占据较大的空间，致使网页的显示 速度明显变慢，所以，近期的网页以及比较著名的 访问量比较大网站一般都不设置背景图形。 链接标志 链接是网页中一种非常重要的功能，是网页中最重要、 最根本的元素之一。通过链接可以从一个网页转到另 一个网页，也可以从一个网站转到另一个网站。链接 的标志有文字和图形两种。制作一些精美的图形作为 链接按钮，使它和整个网页融为一体。
13
图像动画处理软件：常见的影像处理软件有 Adobe PhotoShop 、 Macromedia Flash 、 Director、CorelDraw、Ulead PhotoImpact、 Apple QuickTime VR、QuickDraw 3D等。
14
浏览器软件：目前常见的浏览器有Netscape Communicator 及 Microsoft Internet Explorer。