网页设计基础课件.pptx

1、廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系本章学习要点：本章学习要点：8了解网页制作常识了解网页制作常识对网页艺术设计有一定的见解对网页艺术设计有一定的见解熟悉熟悉网页制作与网站开发的流程网页制作与网站开发的流程了解网页设计的各种应用技术以及相关软件了解网页设计的各种应用技术以及相关软件配置配置网站服务器网站服务器管理管理Dreamweaver站点站点配置配置远端服务器远端服务器廊坊师范学院计算机科

2、学与技术系1.1网页制作常识网页制作常识9网页的设计是一种综合能力的体现，网页的设计是一种综合能力的体现，其考验到网页设计师在多种领域中的能其考验到网页设计师在多种领域中的能力，包括网络技术、图像设计艺术、网力，包括网络技术、图像设计艺术、网页设计软件操作、浏览器兼容性知识以页设计软件操作、浏览器兼容性知识以及程序开发能力等。在网页设计之前，及程序开发能力等。在网页设计之前，应首先了解一些基础知识。应首先了解一些基础知识。廊坊师范学院计算机科学与技术系1.1.1网络技术基础网络技术基础10计算机网络是由无数的计算机以及计算机网络是由无数的计算机以及各种相关的数码设备，根据有线或无线各种相关的数

3、码设备，根据有线或无线设备连接而成的网络。网页（设备连接而成的网络。网页（Web页）页）则是基于这种网络的一种超文本则是基于这种网络的一种超文本（HyperText）的多媒体交互平台。在）的多媒体交互平台。在设计网页之前，有必要对网络技术进行设计网页之前，有必要对网络技术进行一些简单的了解。一些简单的了解。廊坊师范学院计算机科学与技术系111互联网协议互联网协议互联网是由各种计算机和数码设备连接互联网是由各种计算机和数码设备连接而成的通信网络，在各种设备进行数据传输而成的通信网络，在各种设备进行数据传输和交换时，必然要遵循统一的标准，以实现和交换时，必然要遵循统一的标准，以实现互联互通。互联互

4、通。2服务器与客户机服务器与客户机服务器的作用是管理大量的资源，并为服务器的作用是管理大量的资源，并为多种用户提供相关的服务。客户机是相对于多种用户提供相关的服务。客户机是相对于服务器的概念，即服务于本地计算机用户，服务器的概念，即服务于本地计算机用户，调用服务器服务的计算机。调用服务器服务的计算机。3超链接与超链接与URL路径路径URL（Uniform/UniversalResourceLocator，统一资源定位符）路径是一种互联，统一资源定位符）路径是一种互联网中标准的资源位置标识方式。网中标准的资源位置标识方式。廊坊师范学院计算机科学与技术系 http:/127.0.0.1/XNML/

5、01/MYhomepage.html http:/localhost/XNML/01/MYhomepage.html localhost指你所在的计算机本身。指你所在的计算机本身。在在windows系统它成了系统它成了127.0.0.1的别名的别名，一定程序上使用一定程序上使用localhost比比127.0.0.1要快要快一些。一些。廊坊师范学院计算机科学与技术系1.1.2Web浏览器浏览器13Web浏览器是一种用于浏览网页的浏览器是一种用于浏览网页的软件，其可以从互联网中获得网页文档软件，其可以从互联网中获得网页文档及相关的文档，并将其展示给用户。及相关的文档，并将其展示给用户。1Inte

6、rnetExplorerInternetExplorer（简称（简称IE）是目前全世界最流）是目前全世界最流行的网页浏览器。行的网页浏览器。2MozzillaFirefoxMozzillaFirefox浏览器是由浏览器是由Mozzilla基金会与基金会与开源社区共同开发的一种免费开源的开源社区共同开发的一种免费开源的Web浏览器，是浏览器，是在全世界范围内市场占有率仅次于在全世界范围内市场占有率仅次于IE的的Web浏览器。浏览器。3OperaOpera是挪威出品的一款老牌是挪威出品的一款老牌Web浏览器。浏览器。廊坊师范学院计算机科学与技术系1.1.3IDC技术基础技术基础IDC（Intern

7、etDataCenter，互联网数，互联网数据中心，又称服务器农场），是用户存放计算据中心，又称服务器农场），是用户存放计算机服务器设备，并为其提供各种电力保障、网机服务器设备，并为其提供各种电力保障、网络通信、环境控制的设备或设备集群。通常意络通信、环境控制的设备或设备集群。通常意义上讲，义上讲，IDC技术涵盖了网络服务器运营的整技术涵盖了网络服务器运营的整个体系，是互联网中个体系，是互联网中Web或其他服务发布的基或其他服务发布的基础。典型的础。典型的IDC体系包括四个主要部分。体系包括四个主要部分。141服务器系统服务器系统2电力保障系统电力保障系统3数据传输保障系统数据传输保障系统4环

8、境控制系统环境控制系统廊坊师范学院计算机科学与技术系1.2网页设计理论网页设计理论网页的设计是一种艺术性的创作，网页的设计是一种艺术性的创作，设计出的网页需要符合绝大多数用户的设计出的网页需要符合绝大多数用户的审美观念，同时又需要有一定的独创性审美观念，同时又需要有一定的独创性内容。总的说，设计网页时最难掌握的内容。总的说，设计网页时最难掌握的两个要点就是网页的色彩搭配艺术和内两个要点就是网页的色彩搭配艺术和内容布局艺术。容布局艺术。15廊坊师范学院计算机科学与技术系1.2.1网页配色艺术网页配色艺术网页设计是一种特殊的视觉设计，是平网页设计是一种特殊的视觉设计，是平面设计的一个分支，和其他平

9、面设计类似，面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩设计同时还对色彩都有较大的依赖性。色彩设计同时还是网站风格设计的决定性因素之一，是网页是网站风格设计的决定性因素之一，是网页上上“看的见看的见”的视觉元素。的视觉元素。161三原色的概念三原色的概念2色彩的属性色彩的属性3色彩模式色彩模式4216网页安全色网页安全色5网页配色方法网页配色方法廊坊师范学院计算机科学与技术系颜色的使用在网页制作中起着非常关键颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作令人过目不忘。但是对于刚

10、开始学习制作网页的人来说，往往不容易驾驭好网页的网页的人来说，往往不容易驾驭好网页的颜色搭配颜色搭配.廊坊师范学院计算机科学与技术系网页颜色原理和象征意义网页颜色原理和象征意义我们所有网页上颜色，在我们所有网页上颜色，在HTML下看到的是以下看到的是以颜色英文单词或者十六进制的表示方法（如颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。含义，给人各种丰富的感觉和联想。红色：热情、奔放、喜悦、庄严红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黄色：高贵、富有、灿烂、活泼黑色：严肃、夜

11、晚、沉着黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净白色：纯洁、简单、洁净蓝色：天空、清爽、科技蓝色：天空、清爽、科技绿色：植物、生命、生机绿色：植物、生命、生机灰色：庄重、沉稳灰色：庄重、沉稳紫色：浪漫、富贵紫色：浪漫、富贵棕色：大地、厚朴棕色：大地、厚朴廊坊师范学院计算机科学与技术系网页颜色的使用风格网页颜色的使用风格不同的网站有着自己不同的风格，也有着自己不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型：不同的颜色。网站使用颜色大概分为几种类型：1、公司色公司色在现在企业中，公司的在现在企业中，公司的CI形象显得尤其重要，形象显得尤其重要，每一个公司的每一

12、个公司的CI设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如新浪网新浪网的主色调是一种介于的主色调是一种介于浅黄和深黄浅黄和深黄之间的颜之间的颜色，同时形象宣传、海报、广告使用的颜色都和色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调网站的颜色一致。再比如国富投资公司的主色调是是C：100%，M：60%，Y：0%，K：0%。这。这样的颜色使用到网站上显得色调自然、底蕴深厚。样的颜色使用到网站上显得色调自然、底蕴深厚。廊坊师范学院计算机科学与技术系网页颜色的使用风格网页颜色的使用风格2、风格色风格色许多网站使用颜色秉承的是公司的风格。比如许多网站使用颜

13、色秉承的是公司的风格。比如海尔海尔使用的颜色是一种中性的绿色，即充满朝气使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多较多，大公司使用蓝色的较多这些都是在突这些都是在突出自己的风格。出自己的风格。3、习惯色习惯色这些网站的颜色使用很大一部分是凭自己的个这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因

14、此这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。种类型称为习惯色。廊坊师范学院计算机科学与技术系设计用色十例设计用色十例 以下我将分别介绍十个配色较好的网站，以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。敏感以及独到的审美能力。廊坊师范学院计算机科学与技术系1）这是个大型的）这是个大型的NBA网站。通常我们经常网站。通常我们经常看到的此类网站以看到的此类网站以白色为背景白色为背景，但是这个，但是这个网站却用网站却用灰黑色灰黑色RGB为（为（48，48，48/#333333）（以下颜色都用）（以

15、下颜色都用RGB表示），表示），文章标题用色为文章标题用色为RGB为（为（203，201，153/#CCCC99），菜单使用的），菜单使用的RGB为为（112，119，112/#707770）。这样的配）。这样的配色可以显示独特的个性，又不失大型网站色可以显示独特的个性，又不失大型网站的风采。如图的风采。如图1廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系 2）下面是一个娱乐类的综合性网站）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为他的配色方案是背景色为黑色黑色RGB为（为（0，0，0）中嵌套）中嵌套RGB（0，0，82），字体），字体白白色色RGB（255,25

16、5,255）,菜单为菜单为RGB（77,114,159）。这样的虽以）。这样的虽以黑蓝为主色黑蓝为主色调调，但是配以漂亮的图片，给人的感觉是，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。生机盎然，充满了互动色彩和青春气息。如图如图2。廊坊师范学院计算机科学与技术系 3）下面的这个网站是大名鼎鼎的）下面的这个网站是大名鼎鼎的微软公司网站微软公司网站，微，微软不仅软件做的好，连网页制作也是世界一流。他软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背

17、看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用景颜色使用蓝色蓝色RGB为（为（0，151，254），菜单为），菜单为黑色黑色RGB（0，0，11），菜单为），菜单为灰色灰色RGB（200，200，200），字体为），字体为黑色黑色RGB（0，0，0），如图），如图3。廊坊师范学院计算机科学与技术系 4)现在介绍的网站相对简单，但是她的用现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体色也别具匠心，现在我们来看一看，整体上使用的是上使用的是白色白色RGB（255，255，255），辅助色为），辅助色为RGB（79，88，95），），菜单色为菜单色为RGB（48，64

18、，64）和）和RGB（0，81，111）字体使用的是）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常）。虽然简单，但颜色搭配非常的科学合理。如图的科学合理。如图4廊坊师范学院计算机科学与技术系 5）下面的网站采用）下面的网站采用黄色黄色调为主，很体现公调为主，很体现公司的个性，现在我们就来看一看她的颜色司的个性，现在我们就来看一看她的颜色搭配。搭配。主色调为黄色主色调为黄色RGB为（为（255，199，48/#FFC730），辅助色调为），辅助色调为RGB（49，102，46）字体为）字体为棕色棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十），中间再配以抽

19、象的图片，显得个性十足但又不单调。如图足但又不单调。如图5廊坊师范学院计算机科学与技术系 6）橘红色橘红色如果运用得当的话是一种非常使用如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为常著名的例子。他的主色调为RGB（255，151，0）辅助色调为）辅助色调为RGB（255，103，4），），菜单菜单RGB为（为（252，200，0）。字体使用黑色）。字体使用黑色RGB为（为（0，0，0）。此种配色显得主人较为）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图前卫，色彩热烈，给人的震慑力较强。如

20、图6廊坊师范学院计算机科学与技术系 7）鲜红色鲜红色也是一种震撼感很强的颜色，如果搭也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用），配以抽象的图形，文字使用的是的是RGB（213，229，167）显得美观而不失）显得美观而不失独特，大气而不逼人。如图独特，大气而不逼人。如图7廊坊师范学院计算机科学与技术系 8）下面介绍的这种色调

21、是我们制作网页）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的到你的网页中，肯定会给人耳目一新的感觉。他的主色调为感觉。他的主色调为RGB（144，151，97）辅助色调为）辅助色调为RGB（173，168，112）边饰为边饰为黑色黑色RGB（0，0，0）字体为黑色）字体为黑色RGB（0，0，0）。这样的搭配显得风格）。这样的搭配显得风格独特，颜色和谐而庄重。如图独特，颜色和谐而庄重。如图8廊坊师范学院计算机科学与技术系 9）下面的设计更加的简单化，但是颜色）下面的设计更加的简单化，但是颜色的使用使网页并不

22、呆板，反而让人感觉到的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，美丽和爱中。他的主体是由两种颜色构成，分别是分别是RGB（239，200，161）和）和RGB（201，254，200）。如此简单，但是却）。如此简单，但是却栩栩如生，跃然网上。如图栩栩如生，跃然网上。如图9廊坊师范学院计算机科学与技术系 10）下面举出这个例子是想证明一个道）下面举出这个例子是想证明一个道理理只要你有足够的想象力，你就能够只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行设计出漂亮的网页。目前在网

23、上非常流行一句话就是网页的搭配不要超过四种主要一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了下面这个例子的菜单就使用了7种颜色，种颜色，但是我们看到的网页并不杂乱，相反感觉但是我们看到的网页并不杂乱，相反感觉作者很有创意。如图作者很有创意。如图10廊坊师范学院计算机科学与技术系1.2.2网页布局艺术网页布局艺术网页元素是网页最基本的组成部分，这网页元素是网页最基本的

24、组成部分，这些网页元素如何在网页中组合，将直接影响些网页元素如何在网页中组合，将直接影响到网页设计方案的优劣。因此，掌握网页布到网页设计方案的优劣。因此，掌握网页布局艺术对于一个网页设计师而言是不可缺少局艺术对于一个网页设计师而言是不可缺少的技能。网页布局可以从两方面理解，一种的技能。网页布局可以从两方面理解，一种是结构布局，另一种是艺术布局。是结构布局，另一种是艺术布局。331结构布局结构布局网页结构布局是根据网页中各种元素的网页结构布局是根据网页中各种元素的位置结构划分来设计的，最常见到的结构布位置结构划分来设计的，最常见到的结构布局方式包括局方式包括国字型、拐角型、上下框架和左国字型、拐

25、角型、上下框架和左右框架右框架等类型。等类型。廊坊师范学院计算机科学与技术系342艺术布局艺术布局在网页设计时，往往还广泛地应用了平在网页设计时，往往还广泛地应用了平面构成的原理。通过平面构成原理，可以使面构成的原理。通过平面构成原理，可以使网页更富有艺术气息，更加吸引用户的注意网页更富有艺术气息，更加吸引用户的注意力。力。廊坊师范学院计算机科学与技术系1.3网页标准化技术网页标准化技术网页是一种承载多媒体数据信息的、网页是一种承载多媒体数据信息的、跨平台的媒体。在制作这种媒体时，必须跨平台的媒体。在制作这种媒体时，必须依照统一的技术标准，遵循严格的技术规依照统一的技术标准，遵循严格的技术规范

26、。目前网页的技术规范主要包括三种，范。目前网页的技术规范主要包括三种，即即XHTML语言、语言、CSS样式表以及样式表以及ECMAScript脚本语言。这三种技术规范分别实现了脚本语言。这三种技术规范分别实现了网页的标准化结构、标准化表现以及标准网页的标准化结构、标准化表现以及标准化的行为，形成了三位一体的网页标准化化的行为，形成了三位一体的网页标准化体系。体系。35廊坊师范学院计算机科学与技术系1.3.1XHTML语言语言XHTML（eXtensibleHyperTextMarkupLanguage，可扩展的超文本标记，可扩展的超文本标记语言）是一种基于语言）是一种基于XML（eXtensi

27、bleMarkupLanguage，可扩展的标记语言）与，可扩展的标记语言）与HTML（HyperTextMarkupLanguage，超文本标记语言）的新型标记语言和结构超文本标记语言）的新型标记语言和结构语言。语言。361XHTML语言简介语言简介2结构与表现的分离结构与表现的分离3XHTML文档类型文档类型廊坊师范学院计算机科学与技术系1.3.2CSS样式表样式表CSS（CascadingStyleSheets，层叠样式，层叠样式表）表）是一种由是一种由W3C定义的数据表格式，其作用是为定义的数据表格式，其作用是为XML、HTML以及以及XHTML等结构化的文档添加样等结构化的文档添加样

28、式描述，从而实现对文档中内容的排版和美化。式描述，从而实现对文档中内容的排版和美化。在传统的网页文档中，在传统的网页文档中，HTML语言以混合结构语言以混合结构与表现的方式显示内容，由于没有统一的样式管理，与表现的方式显示内容，由于没有统一的样式管理，每个页面即使是相同的标记都必须一一进行更改，每个页面即使是相同的标记都必须一一进行更改，从而大大增加了维护的时间、成本及效率。随着网从而大大增加了维护的时间、成本及效率。随着网站内页面的不断更新、扩展，需要一种技术对站内页面的不断更新、扩展，需要一种技术对页面页面布局、字体、颜色、背景和其它图文效果的实现提布局、字体、颜色、背景和其它图文效果的实

29、现提供更加精确的控制，这种技术就是供更加精确的控制，这种技术就是CSS。37廊坊师范学院计算机科学与技术系1.3.3ECMAScript脚本语言脚本语言ECMAScript脚本语言是由脚本语言是由NetScape（网景）（网景）公司和公司和Sun（升阳）公司开发，最终由（升阳）公司开发，最终由ECMA（EuropeanComputerManufacturersAssociation，欧，欧洲计算机制造商协会）国际（一个国际性信息和电信洲计算机制造商协会）国际（一个国际性信息和电信标准组织）进行标准化完善而成的、面向对象编程的标准组织）进行标准化完善而成的、面向对象编程的脚本程序设计语言标准。脚

30、本程序设计语言标准。ECMAScript并非具体的脚本编程语言，而是吸并非具体的脚本编程语言，而是吸收多种脚本语言的特点和规范，制订的一种标准。符收多种脚本语言的特点和规范，制订的一种标准。符合该标准的脚本编程语言都可被称作合该标准的脚本编程语言都可被称作ECMAScript。例如，由例如，由MozillaFireFox浏览器支持的浏览器支持的JavaScript和微软和微软InternetExplorer支持的支持的Jscript等，都是符等，都是符合合ECMAScript的子集、具体实现或扩展。的子集、具体实现或扩展。38廊坊师范学院计算机科学与技术系1.4动态网页开发技术动态网页开发技术

31、动态网页开发技术的本质，就是通过编程动态网页开发技术的本质，就是通过编程语言编写的程序与用户进行交互，并将交互所语言编写的程序与用户进行交互，并将交互所需的数据以及反馈的结果存储到数据库中。动需的数据以及反馈的结果存储到数据库中。动态网页开发技术与一般用于网页特效的脚本语态网页开发技术与一般用于网页特效的脚本语言最大的区别在于，脚本语言所反馈的信息是言最大的区别在于，脚本语言所反馈的信息是固定的，基于网页本身的。而动态网页开发技固定的，基于网页本身的。而动态网页开发技术反馈的信息则是从数据库中调用的。术反馈的信息则是从数据库中调用的。39廊坊师范学院计算机科学与技术系1.4.1ASP技术技术A

32、SP（ActiveServerPages，动态服务，动态服务网页）是微软公司开发的一种由网页）是微软公司开发的一种由VBScript脚本脚本语言或语言或JavaScript脚本语言调用脚本语言调用FSO（FileSystemObject，文件系统对象）组件实现的，文件系统对象）组件实现的动态网页技术。动态网页技术。ASP技术必须通过技术必须通过Windows的的ODBC与与后台数据库通信后台数据库通信，因此只能应用于，因此只能应用于Windows服务器中。服务器中。ASP技术的解释程序包括两种，即技术的解释程序包括两种，即Windows9X系统的系统的PWS和和WindowsNT系统系统的的I

33、IS。在。在Windows系统中，必须安装其中一系统中，必须安装其中一种解释程序，才能使用种解释程序，才能使用ASP技术。技术。40廊坊师范学院计算机科学与技术系1.4.2ASP.net技术技术ASP.NET是一种已经编译的、基于是一种已经编译的、基于.NET的环境，可的环境，可以使用任何与以使用任何与.NET兼容的语言（例如兼容的语言（例如C#、VB.NET等）等）构造构造Web应用程序。应用程序。ASP.NET可以很好地与可以很好地与HTML编辑编辑器和器和VS.NET编程语言一起工作。编程语言一起工作。ASP.NET也是微软公司提供的开发动态网页的技术。也是微软公司提供的开发动态网页的技

34、术。ASP.NET相对于相对于ASP是一个革命性的创新。从运行机制是一个革命性的创新。从运行机制上来说：上来说：ASP属于解释型的编程框架，它的核心是属于解释型的编程框架，它的核心是VBScript和和JavaScript脚本语言，这两种脚本语言决定脚本语言，这两种脚本语言决定了了ASP的先天不足，这两种脚本语言无法像传统的编程的先天不足，这两种脚本语言无法像传统的编程语言那样进行底层操作，所以有时不得不借助于其他语言语言那样进行底层操作，所以有时不得不借助于其他语言编写的组件。而编写的组件。而ASP.NET是一种编译型的编程框架，它是一种编译型的编程框架，它的核心是的核心是.NETFrame

35、work。它可以运用。它可以运用VS.NET编程序编程序语言开发，这样它就不需要借助于其他的组件来完成底层语言开发，这样它就不需要借助于其他的组件来完成底层操作。操作。41廊坊师范学院计算机科学与技术系1.4.3PHP技术技术PHP（PersonalHomePages）是一种在服务器）是一种在服务器端运行的，端运行的，HTML文档中嵌入的脚本语言。它借鉴文档中嵌入的脚本语言。它借鉴C语语言、言、Java语言和语言和Perl语言的语法，同时具有自己独特语言的语法，同时具有自己独特的语法，可以运行于多种平台。这种语言的目的是让的语法，可以运行于多种平台。这种语言的目的是让WEB开发人员能够快速高效

36、地写出动态生成的页面。开发人员能够快速高效地写出动态生成的页面。PHP是嵌入到是嵌入到HTML语言中的脚本语言，能够执语言中的脚本语言，能够执行一定的功能。如果要将嵌入在行一定的功能。如果要将嵌入在HTML文档中的文档中的PHP脚脚本程序与其他语言区分开，如本程序与其他语言区分开，如CSS，JavaScript等，等，就要把嵌入的就要把嵌入的PHP脚本语言放置到特定的并且成对的脚本语言放置到特定的并且成对的标记内。这样当解析一个标记内。这样当解析一个PHP文件时，会寻找相应的文件时，会寻找相应的开始和结束标记，这些标记告诉开始和结束标记，这些标记告诉PHP解析器开始和停解析器开始和停止的位置。

37、此种解析方式可以使止的位置。此种解析方式可以使PHP嵌入到各种不同嵌入到各种不同的文档中。在一对开始和结束标记之外的内容会被的文档中。在一对开始和结束标记之外的内容会被PHP解析器忽略。解析器忽略。42廊坊师范学院计算机科学与技术系1.4.4JSP技术技术JSP是一种专门用于在服务器端编译、执是一种专门用于在服务器端编译、执行的行的Web技术，实现普通静态技术，实现普通静态HTML和动态页和动态页面输出混合编码的技术，其脚本语言采用面输出混合编码的技术，其脚本语言采用Java语言。借助内容和外观表现的分离，语言。借助内容和外观表现的分离，Web页面页面制作的任务可以方便地划分给页面设计人员和制

38、作的任务可以方便地划分给页面设计人员和程序员，并方便地通过程序员，并方便地通过JSP来合成。相比来合成。相比ASP和和PHP，JSP具有支持线程、安全、高效等性具有支持线程、安全、高效等性能。能。43廊坊师范学院计算机科学与技术系1.5网页设计软件网页设计软件网页的设计并非简单输入文本的过程，网页的设计并非简单输入文本的过程，而是一个从处理图像、制作动画到编写网而是一个从处理图像、制作动画到编写网页代码和脚本的完整过程。在这一过程的页代码和脚本的完整过程。在这一过程的各种阶段中，需要使用不同类型的软件。各种阶段中，需要使用不同类型的软件。这些软件可以极大地提高网页设计的效率。这些软件可以极大地

39、提高网页设计的效率。本节将介绍网页设计时使用的本节将介绍网页设计时使用的3种主要软件，种主要软件，又被称作网页三剑客的又被称作网页三剑客的Fireworks、Flash以及以及Dreamweaver。44廊坊师范学院计算机科学与技术系1.5.1FireworksCS4在各种图像处理软件中，在各种图像处理软件中，Fireworks是最贴近网是最贴近网页设计需求的图像处理软件之一。目前页设计需求的图像处理软件之一。目前Fireworks的最的最新版本为新版本为CS4（10.0.3）版本，在该版本中，采用了全）版本，在该版本中，采用了全新的界面，并增强了与新的界面，并增强了与Flash、Dreamw

40、eaver等软件等软件的集成性能，并提供了基于的集成性能，并提供了基于CSS的布局，允许用户设的布局，允许用户设计图像并导出以计图像并导出以XHTML文档和文档和CSS样式结合的网页，样式结合的网页，支持将图像导出为支持将图像导出为PDF，并新增了动态样式等功能。，并新增了动态样式等功能。45廊坊师范学院计算机科学与技术系1.5.2FlashCS4Flash是目前应用最广泛的网页动画设计工具。是目前应用最广泛的网页动画设计工具。其具备了从动画的绘制、动作的实现、编程控制以及其具备了从动画的绘制、动作的实现、编程控制以及最后动画的输出等一整套实用的功能，可以完全满足最后动画的输出等一整套实用的功

41、能，可以完全满足用户的动画创意、动画设计、动画制作以及动画发布用户的动画创意、动画设计、动画制作以及动画发布所有的要求。使用所有的要求。使用FlashCS4，不仅可以快速地制作，不仅可以快速地制作各种网页动画，还可以编辑一些专业的动漫作品，甚各种网页动画，还可以编辑一些专业的动漫作品，甚至开发基于互联网的跨平台应用程序。至开发基于互联网的跨平台应用程序。46廊坊师范学院计算机科学与技术系1.5.3DreamweaverCS4Dreamweaver是目前最流行的网页设计工具。其是目前最流行的网页设计工具。其既具有所见即所得的网页设计界面，同时也具有强大的既具有所见即所得的网页设计界面，同时也具有

42、强大的代码编写功能。无论初学者，还是自身的网页程序员，代码编写功能。无论初学者，还是自身的网页程序员，都可以使用都可以使用Dreamweaver制作出精美的网页，甚至编制作出精美的网页，甚至编写出各种复杂的网页应用程序。写出各种复杂的网页应用程序。47廊坊师范学院计算机科学与技术系1.6网站建设流程网站建设流程随着网站建设的分工越来越细，网随着网站建设的分工越来越细，网站的制作逐渐发展成为一个由网页界面设站的制作逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程计、网页制作、数据库开发和动态应用程序编写等一系列工作集成的系统工程。同序编写等一系列工作集成的系统工程。同时，建设一个

43、网站投入的各种前期和后期时，建设一个网站投入的各种前期和后期工作也越来越繁重。了解网站建设的流程，工作也越来越繁重。了解网站建设的流程，可以有效地进行网站建设的规划，提高网可以有效地进行网站建设的规划，提高网站建设的效率。站建设的效率。48廊坊师范学院计算机科学与技术系1.6.1网站策划网站策划49在网站的建设工作进行之前，首先在网站的建设工作进行之前，首先要对网站所采用的内容、提供的服务等要对网站所采用的内容、提供的服务等重要的信息进行策划，为网站中页面设重要的信息进行策划，为网站中页面设计提供必要的前期数据和参考，提高网计提供必要的前期数据和参考，提高网站在建设完成后的用户任何程度。策划站

44、在建设完成后的用户任何程度。策划是一个重要的步骤，直接关系到网站的是一个重要的步骤，直接关系到网站的运营成果。运营成果。廊坊师范学院计算机科学与技术系1.6.2方案实施方案实施50方案实施是网站具体建设的过程。方案实施是网站具体建设的过程。在方案实施过程中，需要根据网站策划在方案实施过程中，需要根据网站策划步骤中中得到的各种数据，规划网站的步骤中中得到的各种数据，规划网站的栏目和版块，同时确定网站所使用的各栏目和版块，同时确定网站所使用的各种技术。最后，在根据这些技术和内容，种技术。最后，在根据这些技术和内容，设计和制作网站。设计和制作网站。廊坊师范学院计算机科学与技术系1.6.3后期维护工作

45、后期维护工作51后期维护工作是在网站建设完成后后期维护工作是在网站建设完成后必须进行的工作。一个网站后期工作进必须进行的工作。一个网站后期工作进行的顺利与否，直接影响到网站的点击行的顺利与否，直接影响到网站的点击率、赢利以及网站的生存。后期维护工率、赢利以及网站的生存。后期维护工作包括网站的测试、发布、推广以及维作包括网站的测试、发布、推广以及维护等工作护等工作廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境IIS是微软公司的专业是微软公司的专业Web服务器。服务器。Windows2000捆绑了捆绑了IIS5.0，WindowsXP捆绑了捆绑了IIS5.1，而对于，而对于Win

46、dowsNTServer，则可以单独下载。下面我们将介，则可以单独下载。下面我们将介绍在绍在WindowsXP环境下设置环境下设置ASP运行环运行环境的方法和步骤。境的方法和步骤。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境1）安装）安装IIS5.1“控制面板控制面板”“添加或删除程序添加或删除程序”“Windows组组件向导件向导1”对话框对话框选中选中“Inernet信息服务信息服务(IIS)”复复选框选框2）测试）测试IIS5.1打开浏览器，在地址栏中输入打开浏览器，在地址栏中输入http:/localhost或或http:/ComputerName；如果；如果IIS

47、5.1安装成功，安装成功，就可以打开就可以打开IIS5.1的默认站点中的默认页面的默认站点中的默认页面“localstart.asp”http:/localhost/localstart.asp廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境3）主目录）主目录什么是什么是“主目录主目录”？每个每个Web站点都有一个唯一的主目录。主目录站点都有一个唯一的主目录。主目录是是Web站点上发布文件的站点上发布文件的中心位置中心位置，也是访问者的，也是访问者的起始点起始点，主目录及其子目录中的所有文件将自动对，主目录及其子目录中

48、的所有文件将自动对访问者可用。默认访问者可用。默认Web站点的默认主目录是站点的默认主目录是C:InetPubwwwroot。“主目录主目录”与域名之间的关系与域名之间的关系主目录主目录与与网站的域名网站的域名/服务器名服务器名存在一一对应存在一一对应的映射关系。的映射关系。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境3）主目录）主目录设置设置“主目录主目录”？“控制面板控制面板”管理工具管理工具Internet信信息服务息服务”右击右击“默认网站默认网站”单击单击“属性属性”“默认站点默认站点属性属性”对话框。对话框。选中选中“主目录主目录”选项卡选项卡廊坊师范学院计算机

49、科学与技术系说明：说明：IIS运行环境运行环境4）虚拟目录）虚拟目录什么是什么是“虚拟目录虚拟目录”？虚拟目录是虚拟目录是物理上未包含在主目录物理上未包含在主目录中的中的目录，但浏览器却认为该目录包含在主目目录，但浏览器却认为该目录包含在主目录中，一个网站中可以有录中，一个网站中可以有若干若干个虚拟目录。个虚拟目录。浏览虚拟目录？浏览虚拟目录？虚拟目录具有虚拟目录具有别名别名，浏览器可以使用，浏览器可以使用虚拟目录的别名来虚拟目录的别名来访问访问该目录。该目录。廊坊师范学院计算机科学与技术系 例如例如 如果如果服务器域名服务器域名：localhost 主目录主目录：C:InetPubwwwro

50、ot 虚拟目录虚拟目录的物理位置：的物理位置：F:XNML 别名别名：XNML浏览器将用浏览器将用URL地址：地址：http:/localhost/XNML来访问来访问“F:XNML”中的文件。中的文件。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境4）虚拟目录）虚拟目录使用使用虚拟目录虚拟目录的优势？的优势？可在一个站点下浏览可在一个站点下浏览多个文件夹多个文件夹中的文中的文件。件。设置设置“虚拟目录虚拟目录”“Internet信息服务信息服务”对话框对话框右击待创右击待创建虚拟目录的建虚拟目录的Web站点站点“新建新建”菜单菜单“虚拟目录虚拟目录”命令命令虚拟目录创建向虚