网站建设与网页制作复习.ppt

1、网站建设与网页制作阎菲阎菲E-mail: 学习内容 网站建设概述网站建设概述 网页界面设计艺术网页界面设计艺术 HTML语言简介语言简介 织网工具织网工具Dreamweaver 动态网页技术动态网页技术教学要求了解一定的网页制作的高级部分，包括用来实现前台交互、制作动感网的DHTML和实现后台交互、制作动态网页的ASP。掌握网页界面设计的方法和要素，版式设计、文字编排、图形和动画的应用、色彩的应用等。掌握网页制作各项基本技能，包括HTML语言、可视化网页制作工具（Dreamweaver）具有较强的自主设计与制作网页的基本素质具有较强的自主设计与制作网页的基本素质与能力。与能力。课程特点网页建设

2、与网页制作是一门以实际技能训练为主要教/学内容与目标的实践性课程，知识学习与技能训练的有机结合贯穿于整个教/学过程。最终将以学习者是否以学习者是否具有独立设计并建设网站的基本能力与实具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准。践结果作为考核的主要评判标准。学习方法 3P一体化，即 Principle、Practice、Product(原则)、(实践)、(作品)考试与实验说明出勤 10%实验(网站设计)20%期末笔试 70%考试课程体系结构以电子商务、网页制作为中心的多元化授课体系以电子商务、网页制作为中心的多元化授课体系网站建设概述网站建设概述HTML语言基础语言基础网页

3、网页制作制作工具工具网页网页美化美化工具工具网络网络新领域、新领域、新技巧新技巧网站网站建设建设网页制作网页制作第1章 网站建设概述第一节第一节 WWW基础知识基础知识第二节第二节 网页界面构成要素网页界面构成要素第三节第三节 网站开发常用工具网站开发常用工具第四节第四节 网站建设与规划网站建设与规划第1节 www基础知识 WWW服务的基本概念服务的基本概念 WWW服务的特点服务的特点 WWW服务的工作方式服务的工作方式 WWW服务的常用术语服务的常用术语 1.WWW服务的基本概念 WWW（World Wide Web，全球信息网）全球信息网）是以超文本标记语言（是以超文本标记语言（HTML,

4、HyperText Markup Language）与超文本传输协议与超文本传输协议（HTTP，Hyper Text Transfer Protocol)为基为基础，提供面向础，提供面向Internet服务、具有一致的用户界服务、具有一致的用户界面的信息浏览系统。面的信息浏览系统。2.WWW服务的特点(1)超媒体特性。在WWW中可以多媒体（如文本、图像、声音、动画、影像等）的形式传递信息，从而更吸引人的注意力；使传播的信息更易于接受和理解，从而达到更好的传播效果。(2)以超文本（Hypertext）方式组织多媒体信息。Web中含有指向其它Web页或其本身内部特定位置的超级链接(HyperLin

5、k)，可理解为“指针”。任何文字、图片、图标等都可被指定为一个超链接。当你选择链接，只要用鼠标在链接上单击一下，就会跳转到链接的内容并显示在你的计算机上。(3)用户可以在世界范围内任意查找、检索、浏览信息。(4)网点间可以互相链接，以提供信息查找和漫游的透明访问。3.WWW服务的工作方式WWW浏览器软件安装在用户的计算机上，用户必须通过浏览器来查看服务器上的内容。当客户通过浏览器向服务器发送一个查询请求时，服务器负责对来自客户机的请求做出回答，找到信息和传递文件给用户；当客户机接收到文件，浏览器软件解释该文件在客户机上，用户才能在屏幕上看到。WWW系统的结构采用系统的结构采用客户机客户机/服务

6、器服务器模式。模式。4.WWW服务的常用术语1.URL（统一资源定位符）统一资源定位符）Internet中使用URL(UniformResourceLocators)来定位信息资源所在位置。URL格式由三部分组成，描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下：http:/ 网站界面的基本要素文字图像声音视频与动画超级链接表格表单导航栏1.文字文字是人类最重要的信息载体与交流工具，网页中的信息也以文字为主要表现形式。与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。网页中的文字主要有标题文字和说明性文字。

7、此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。可以对网页中的文字赋予字体、字号、颜色等属性。由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。2.图像一个优秀的网页，除了有吸引浏览者的文字形式和内容外，图像的表现功能是不能低估的。图像能将信息传达的更生动、形象、直观，增强了网页的宣传力、号召力、感染力。1.链接按钮链接按钮网页上的链接按钮有一些是由小图片取代文字制作，具有直观、形象的特点，可使网页更加美观。2.背景图像背景图像为了加强视觉效果，有些网页在整个网页的底层放置了图像（称作背景图）来衬托主题来衬托主题。但是一个比较大的图像，需要占据较

8、大的空间，致使网页的显示速度明显变慢。3.主图主图在网页中，通常会放置一些图片来突出网页主题。主图与背景图不同，背景图是衬托主题，而主图是突出主题、表现主题主图是突出主题、表现主题。网页中使用的图像格式网页中常用的图像文件格式为GIF,JPEG(JPG),PNG，其中使用最广泛的是GIF和JPEG两种格式。GIF是GraphicsInterchangeFormat的简写，用来存储Indexed-Color模式的图像。它是采用无损压缩方式压缩的图像文件格式。它的GIF89a格式，能储存成背景透明化的形式，并且可以将多张图片保存在同一个GIF文档中，而且能以默认播放的顺序显示这些图片，用来创造动画

9、的效果。普通普通GIF文件文件 背景透明背景透明GIF89A文件文件 动画动画GIF89A文件文件JPEG是其制定组织JointPhotographicExpertsGroup的简称，其压缩的方法属于一种失真的处理方式，可以依所需的压缩比率调整图片品质，以得到最小的图片尺寸。PNG是PortableGraphicsNetwork的简称，在1996年才由W3C(WorldWideWebConsortium)所制定的Web标准图片格式。它采用的是一种无损压缩方式，PNG格式也可生成透明背景。目前没有普遍应用于网页设计。3.声音声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用

10、的有MIDI、WAV、MP3、RM等。很多浏览器不要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。在网页中使用声音有两种方式，一是使用声音文件作为背景音乐，这时应尽量使用MIDI格式，否则会影响网页下载的速度。另一种方式是在网页中设置一个打开声音文件的链接，让音乐播放变得可以控制。4.视频与动画视频视频文件的格式也非常多，网页中常用的有Ram、AVI等。Ram格式需使用专门的播放器播放。网页中使用的动画动画通常为gif和swf两种动画文件类型。swf格式需要使用flash播放器。视频和动画的采用让网页变得精彩而有动感。5.超级链接超级链接超级链接

11、是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文本。6.表格在网页中表格用来控制网页中信息的布局方式

12、。这包括两方面：一是使用行和列的形式把许多相互关联的信息集中起来，便于用户分析、比较；二是可以利用表格来控制各种网页元素在网页中布局定位，对网页进行排版。利用表格利用表格进行排版进行排版7.表单网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框

13、，以及从下拉列表框中选择选项等。8.导航栏导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览导航栏的作用就是引导浏览者游历站点者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。9.框架页面 一一般般情情况况下下都都是是一一个个浏浏览览器器窗窗口口显显示示一一个个的的WebWe

14、b页页面面，这一类页面简单、直观制作方便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了。这时，我们就必须运用框架技术来解决问题。框框架架的的作作用用就就是是把把浏浏览览器器窗窗口口划划分分为为若若干干个区域，每个区域显示不同的网页。个区域，每个区域显示不同的网页。提示提示:网页界面重要的网页界面重要的一个元素一个元素课程体系结构以网页制作为中心的多元化授课体系以网页制作为中心的多元化授课体系网站建设概述网站建设概述HTML语言基础语言基础网页网页制作制作工具工具网页网页美化美化工具工具网络网络新领域、新领域、新技巧新技巧网站网站建设建设第2章 网站开发常用

15、工具一、网页开发工具二、网页美化工具三、网页动画工具网页制作基础-HTML语言vHTML语言的一些基本概念；语言的一些基本概念；vHTML语言的语法；语言的语法；vHTML文本的基本结构；文本的基本结构；vHTML语言的标记及其用法；语言的标记及其用法；vHTML实例；实例；这里是网页标题这是我的第一个网页这是用HTML语言编写的，以后还要学习网页编著工具。以下是一个网页的源代码：这是显示结果：HTML语言的一些基本概念 1.什么是HTML？HTML：Hypertext Marked Language，即超文本标记语言，即超文本标记语言,是一是一种用种用 来制作超文本文档的简单标记语言。用来制

16、作超文本文档的简单标记语言。用HTML编写的超文本编写的超文本文档称为文档称为HTML文档，它能独立于各种操作系统平台（如文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。等）。超文本超文本：因为它可以加入图片、声音、动画、影视等内容，因为它可以从一因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接个文件跳转到另一个文件，与世界各地主机的文件连接。2.HTML语言的构成HTML文件由标记、代码和注释组成。标记：HTML中用来控制文字、图形等显示方式的符号。如 网页上面的标记里面包含了属性和值注释：HTML语言的语法规则扩展名为：扩展名为：*.htm或或*.html。HTML不区分大小写。不区分大小写。多数多数HTML标记可以嵌套，但不可以交叉。标记可以嵌套，但不可以交叉。HTML文件一行可以写多个标记，一个标记可文件一行可以写多个标记，一个标记可分多行书写，不用任何续行符。分多行书写，不用任何续行符。HTML文件中换行、回车和空格的表示方法分文件中换行、回车和空格的表示方法分别是别是,和和 .HTML文本结