网页制作基础网页设计第一讲

1、.网站开发基础网站开发基础.学习目标学习目标l理解网页的基本原理，区分静态网页理解网页的基本原理，区分静态网页和动态网页。和动态网页。l掌握掌握HTMLHTML语言的语法规则，掌握基本语言的语法规则，掌握基本的网页标记符和属性。的网页标记符和属性。l了解网页制作的常用工具。了解网页制作的常用工具。l理解网站开发的流程。理解网站开发的流程。.Part 1网页的基本概念网页的基本概念.Internet 与与 WWWl通俗地讲，通俗地讲，Internet 就是许多功能不就是许多功能不同的计算机通过线路连接起来组成的同的计算机通过线路连接起来组成的一个世界范围的网络。一个世界范围的网络。.Intern

2、et 与与 WWWlInternet 提供的服务：提供的服务：WWW服务（网上冲浪）服务（网上冲浪）电子邮件服务（电子邮件服务（Email）文件传输（文件传输（FTP）网络游戏网络游戏即时信息传递（即时信息传递（OICQ）.WWW 与浏览器与浏览器lWWW是由遍布在是由遍布在 Internet 上的称为上的称为 Web 服务器的计算机组成，它将不服务器的计算机组成，它将不同的信息资源有机地组织到一起，通同的信息资源有机地组织到一起，通过浏览器进行浏览。过浏览器进行浏览。.WWW 与浏览器与浏览器.网站与主页网站与主页 l在逻辑上可视为一个整体的一系列页在逻辑上可视为一个整体的一系列页面的有机集

3、合称为网站（面的有机集合称为网站（Web Site或或Site）。）。 l作为一个组织或个人在作为一个组织或个人在 WWW（或其（或其他他Web）上开始点的页面称为主页）上开始点的页面称为主页（Homepage）。）。.HTML 的基本工作原理的基本工作原理lHTML(Hypertext Markup Language) 是一种规范，一种标准，是一种规范，一种标准，它通过标记符（它通过标记符（tag）来标记要显示）来标记要显示的网页的各个部分。的网页的各个部分。.HTML的基本工作原理的基本工作原理l通过在网页中添加标记符，可以告诉通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容

4、的浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围文件），然后根据内容周围的的HTML标记符解释和显示各种内容。标记符解释和显示各种内容。.HTML的基本工作原理的基本工作原理.演示演示HTML的基本原理的基本原理.静态网页与动态网页静态网页与动态网页l一般网页的每一行一般网页的每一行 HTML 代码都是在将页代码都是在将页放置到服务器之前由设计人员编写的。因放置到服务器之前由设计人员编写的。因为为 HTML 在放置到服务器后不发生更改，在放置到服务器后不发生更改，所以这种页称为静态页。所以这种页称为静态页。 例如，

5、大多数的例如，大多数的个人网站。个人网站。l当当 Web 服务器接收到对静态页的请求时，服务器接收到对静态页的请求时，服务器将读取该请求，查找该页，然后将服务器将读取该请求，查找该页，然后将其发送到请求浏览器，如图所示其发送到请求浏览器，如图所示 。.静态网页与动态网页静态网页与动态网页l所谓动态网页，是指根据用户的请求，由所谓动态网页，是指根据用户的请求，由服务器动态生成的网页。例如，服务器动态生成的网页。例如，ASP网页，网页，PHP网页，网页，JSP网页。网页。l当当 Web 服务器接收到对动态页的请求时，服务器接收到对动态页的请求时，它将该页传递给应用程序服务器，它将该页传递给应用程序

6、服务器，它读取它读取页上的代码，根据代码中的指令完成页，页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递一个静态页，应用程序服务器将该页传递回回 Web 服务器，然后服务器，然后 Web 服务器将该页服务器将该页发送到请求浏览器。该过程如图所示。发送到请求浏览器。该过程如图所示。.静态网页与动态网页静态网页与动态网页l应用程序服务器使用户能够使用服务应用程序服务器使用户能够使用服务器端的资源（如数据库）。器端的资源（如数据库）。l动态页可以指示应用程序服务器从数动态页可以指示应用程序服务器从数据库中

7、提取数据并将其插入页的据库中提取数据并将其插入页的 HTML 中。中。 例如，搜索页面，电子例如，搜索页面，电子商务网站等。商务网站等。.Part 2HTML基础基础 .标记符基础标记符基础l在在 HTML 中，所有的标记符都用尖括号括中，所有的标记符都用尖括号括起来。例如，起来。例如，、。lHTML 标记符是不区分大小写的。标记符是不区分大小写的。、和和没有区别。没有区别。l注意：注意：XHTML要求标记符区分大小写！要求标记符区分大小写！养成习惯都用小写。养成习惯都用小写。.标记符基础标记符基础l绝大多数标记符都是成对出现的，包括开绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。

8、某些标记符，例始标记符和结束标记符。某些标记符，例如如，只要求单一标记符号。，只要求单一标记符号。l注意：对于注意：对于XHTML，这样的标记写为，这样的标记写为l开始标记符与结束标记符的区别在于：结开始标记符与结束标记符的区别在于：结束标记符多一个斜杠束标记符多一个斜杠“/”（不是反斜杠（不是反斜杠“”！）！）.标记符基础标记符基础l属性是用来描述对象特征的特性。属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人例如，一个人的身高、体重就是人这个对象的属性。这个对象的属性。l在在HTML中，所有的属性都放置在开中，所有的属性都放置在开始标记符的尖括号里，多个属性之始标记符的尖括号里

9、，多个属性之间用空格分开，通常也不区分大小间用空格分开，通常也不区分大小写。写。 .标记符基础标记符基础l例如，可以用字体标记符和字号属例如，可以用字体标记符和字号属性指定文字的大小。性指定文字的大小。本行字将以较小字体显示。本行字将以较小字体显示。.演示演示属性的作用属性的作用.Web页的基本结构页的基本结构l一个一个 Web 页实际上对应于一个页实际上对应于一个 HTML 文件，文件，HTML 文件以文件以 .htm 或或 .html 为扩展名。为扩展名。l最基本的最基本的HTML文档包括：文档包括：HTML标标记记、首部标记、首部标记和和、以及正文、以及正文。.HTML标记符标记符 l和

10、和 是是WebWeb页的第一个页的第一个和最后一个标记符，和最后一个标记符，Web Web 页的其他所页的其他所有内容都位于这两个标记符之间。这有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他阅读该页两个标记告诉浏览器或其他阅读该页的程序，此文件为一个的程序，此文件为一个WebWeb页。页。.HEAD标记符标记符 l首部标记首部标记和和位于位于 Web 页的开头，其中不包括页的开头，其中不包括 Web 页页的任何实际内容，而是提供一些与的任何实际内容，而是提供一些与 Web 页有关的特定信息。页有关的特定信息。.HEAD标记符标记符 l首部标记中的内容也用相应的标记符首部标记中的内容也

11、用相应的标记符括起来。例如，样式表（括起来。例如，样式表（CSS）定义）定义位于位于和和之间；脚之间；脚本定义位于本定义位于之之间。间。.TITLE 标记符标记符l在首部标记符中，最基本、最常用的在首部标记符中，最基本、最常用的标记符是标题标记标记符是标题标记和和，用于定义网页的标题。，用于定义网页的标题。l当网页在浏览器中显示时，网页标题当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。将在浏览器窗口的标题栏中显示。.演示演示TITLE的作用的作用.BODY标记符标记符 l正文标记符正文标记符和和包包含含Web 页的内容。文字、图形、链页的内容。文字、图形、链接以及其他接以及其他

12、HTML元素都位于该标记元素都位于该标记符内。符内。.BODY标记符标记符 l正文标记符中的文字，如果没有其他正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显标记符修饰，则将以无格式的形式显示。示。l注意：空格、回车这些格式控制在显注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，示时都不起作用，如要使它们起作用，应使用预格式化元素应使用预格式化元素和和 .小节小节 l综上所述，一个不包含任何内容的基综上所述，一个不包含任何内容的基本本 Web 页文件如下所示：页文件如下所示：.背景颜色背景颜色 l在在标记符中使用标记符中使用BGCOLOR属性可以为网页设置背景

13、颜色，属性可以为网页设置背景颜色， TEXT 属性用于设置正文的颜色。属性用于设置正文的颜色。l在在 HTML 中，除了使用颜色名称以中，除了使用颜色名称以外，还可以用格式外，还可以用格式 #RRGGBB 来表来表示颜色。示颜色。.演示演示设置网页背景颜色设置网页背景颜色.背景图案背景图案l使用使用 BODY 标记符的标记符的 BACKGROUND 属性可以设置背景属性可以设置背景图案。图案。HTML语句为：语句为：.演示演示设置网页背景图案设置网页背景图案.演示演示设置网页背景声音设置网页背景声音l在在HEAD中添加：中添加：.添加注释添加注释l不论是编写程序还是制作网页，为所不论是编写程序

14、还是制作网页，为所做的工作添加注释都是一种良好的工做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何开作习惯。实际上，添加注释是任何开发工作必须遵循的规范之一。发工作必须遵循的规范之一。.添加注释添加注释lHTML 的注释由开始标记符的注释由开始标记符 构成。这两个标记符之构成。这两个标记符之间的任何内容都将被浏览器解释为注间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。释，而不在浏览器中显示。.演示演示添加注释添加注释.显示特殊字符显示特殊字符l如果用户需要在网页中显示某些特殊如果用户需要在网页中显示某些特殊字符，例如：字符，例如：（大于（大于号）、号）、”（引号）等，则

15、需使用参考（引号）等，则需使用参考字符来表示，而不能直接输入。字符来表示，而不能直接输入。l参考字符以参考字符以“&”号开始，以号开始，以“；”结结束，既可以使用数字代码，也可以使束，既可以使用数字代码，也可以使用代码名称。用代码名称。.显示特殊字符显示特殊字符例如，要在例如，要在 Web 页中显示以下内容，页中显示以下内容，则需使用参考字符：则需使用参考字符：“12”1<2.演示演示特殊字符的显示特殊字符的显示.演示演示创建与测试网页创建与测试网页Page5.Part 3网页制作工具网页制作工具 .网页编辑工具网页编辑工具lHTML 编辑器编辑器 HomeSiteBBEdit （Mac

16、）CuteHTML.网页编辑工具网页编辑工具lWYSWYG 编辑器编辑器Macromedia DreamweaverMicrosoft FrontPageAdobe GoLive.素材处理与创作工具素材处理与创作工具l图像浏览与处理图像浏览与处理ACDSeePhotoshopFireworksPhotoImpactl矢量图创作工具矢量图创作工具FreeHandCorelDrawIllustrator .素材处理与创作工具素材处理与创作工具l特效制作工具特效制作工具AnfyCool 3DGIF Animatorl多媒体制作工具多媒体制作工具FlashDirectorAuthorwareLiveM

17、otion.Part 4网站开发流程网站开发流程 .概述概述l首先定义开发网站的目的；接下来对首先定义开发网站的目的；接下来对网站的外观进行设计；然后进行实际网站的外观进行设计；然后进行实际页面的制作；然后对所制作的网站进页面的制作；然后对所制作的网站进行测试，以确保它符合最初设定的目行测试，以确保它符合最初设定的目标；最后是将网站发布。在将网站发标；最后是将网站发布。在将网站发布后还需要有维护工作，以便及时更布后还需要有维护工作，以便及时更新网站内容。新网站内容。 .网站规划网站规划l确定建设网站的目标确定建设网站的目标 l分析目标用户对站点的需求分析目标用户对站点的需求 l确定网站风格确定

18、网站风格 l考虑网络技术因素考虑网络技术因素网络速度网络速度浏览器与分辨率浏览器与分辨率及时交互与插件及时交互与插件.网站设计网站设计 l设计页面的布局设计页面的布局 页面设计草图页面设计草图导航系统的设计导航系统的设计l设计原则：通过最少的点击次数得到最多设计原则：通过最少的点击次数得到最多的信息量。的信息量。l保持风格一致，提供页面的位置信息，提保持风格一致，提供页面的位置信息，提供返回上级页面的链接供返回上级页面的链接 .网站设计网站设计l网页中的颜色网页中的颜色红、绿、蓝三原色的数值相同则称为安红、绿、蓝三原色的数值相同则称为安全色，由全色，由“0000、3333、6666、9999、

19、CCCC、FF”FF”组成的颜色值称为标准安全色。组成的颜色值称为标准安全色。设计颜色方案的原则设计颜色方案的原则l保持一致性保持一致性l注意可读性注意可读性 .文字、图像、动画和多媒体文字、图像、动画和多媒体l中文网站中的字体最好使用默认的中文网站中的字体最好使用默认的“宋体宋体”，以及，以及“楷体楷体”、“黑体黑体”等基本字体。建议使用等基本字体。建议使用CSS CSS 样式表对样式表对站点的字体进行统一管理。站点的字体进行统一管理。l使用任何对象时要考虑的一点：是否使用任何对象时要考虑的一点：是否有利于达到站点目标。有利于达到站点目标。 .网页制作网页制作 l根据设计阶段制作出的示范网页

20、，通根据设计阶段制作出的示范网页，通过过 Dreamweaver Dreamweaver 等软件在各个具体等软件在各个具体网页中添加实际内容，包括：文本、网页中添加实际内容，包括：文本、图像、声音、图像、声音、Flash Flash 电影以及其他多电影以及其他多媒体信息。媒体信息。 .网站测试网站测试l对所有影响页面显示的细节因素进行对所有影响页面显示的细节因素进行测试。测试。l测试页面中的超链接是否能够正常跳测试页面中的超链接是否能够正常跳转。将本地站点文件夹在计算机硬盘转。将本地站点文件夹在计算机硬盘中移动位置，是测试超链接能否正确中移动位置，是测试超链接能否正确工作的一种简便方法。工作的一种简便方法。 .网站发布网站发布l用户创建了用户创建了 Web W