《第1章 网页设计基础》由会员分享，可在线阅读，更多相关《第1章 网页设计基础（65页珍藏版）》请在金锄头文库上搜索。
1、廊坊师范学院计算机科学与技术系1第第1章章初识初识DreamweaverCS4网网络络的的兴兴起起及及快快速速发发展展，已已经经渗渗透透到到各各行行各各业业。尤尤其其，促促进进商商业业网网络络化化的的发发展展，如如改改变变了了产产品品的的销销售售方方式式，业业务务多多渠渠道道联联系系方方式式，加加快快信信息息的的获获取取方方式式。诸诸如如这这些些与与网网站站离离不不开开的的，因因为为网网站站是是发布这些信息的平台。发布这些信息的平台。而而在在开开发发网网站站过过程程中中，Dreamweaver可可以以以以“所所见见即即所所得得”的的特特点点，快快速速创创建建网页，是组建网站和设计网页的专业工具
2、。网页，是组建网站和设计网页的专业工具。廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系本章学习要点：本章学习要点：9了解网页制作常识了解网页制作常识对网页艺术设计有一定的见解对网页艺术设计有一定的见解熟悉熟悉网页制作与网站开发的流程网页制作与网站开发的流程了解网页设计的各种应用技术以及相关软件了解网页设计的各种应用技术以及相关软件配置配置网站服务器网站服务器管理管理Dreamweaver站点站点配置配置
3、远端服务器远端服务器廊坊师范学院计算机科学与技术系1.1网页制作常识网页制作常识10网页的设计是一种综合能力的体现，其考验到网网页的设计是一种综合能力的体现，其考验到网页设计师在多种领域中的能力，包括网络技术、图像页设计师在多种领域中的能力，包括网络技术、图像设计艺术、网页设计软件操作、浏览器兼容性知识以设计艺术、网页设计软件操作、浏览器兼容性知识以及程序开发能力等。在网页设计之前，应首先了解一及程序开发能力等。在网页设计之前，应首先了解一些基础知识。些基础知识。廊坊师范学院计算机科学与技术系1.1.1网络技术基础网络技术基础11计算机网络是由无数的计算机以及计算机网络是由无数的计算机以及各种
4、相关的数码设备，根据有线或无线各种相关的数码设备，根据有线或无线设备连接而成的网络。网页（设备连接而成的网络。网页（Web页）页）则是基于这种网络的一种超文本则是基于这种网络的一种超文本（HyperText）的多媒体交互平台。在）的多媒体交互平台。在设计网页之前，有必要对网络技术进行设计网页之前，有必要对网络技术进行一些简单的了解。一些简单的了解。廊坊师范学院计算机科学与技术系121互联网协议互联网协议互联网是由各种计算机和数码设备连接互联网是由各种计算机和数码设备连接而成的通信网络，在各种设备进行数据传输而成的通信网络，在各种设备进行数据传输和交换时，必然要遵循统一的标准，以实现和交换时，必
5、然要遵循统一的标准，以实现互联互通。互联互通。2服务器与客户机服务器与客户机服务器的作用是管理大量的资源，并为多服务器的作用是管理大量的资源，并为多种用户提供相关的服务。客户机是相对于服种用户提供相关的服务。客户机是相对于服务器的概念，即服务于本地计算机用户，调务器的概念，即服务于本地计算机用户，调用服务器服务的计算机。用服务器服务的计算机。3超链接与超链接与URL路径路径URL（Uniform/UniversalResourceLocator，统一资源定位符）路径是一种互联，统一资源定位符）路径是一种互联网中标准的资源位置标识方式。网中标准的资源位置标识方式。廊坊师范学院计算机科学与技术系h
6、ttp:/127.0.0.1/XNML/01/MYhomepage.htmlhttp:/localhost/XNML/01/MYhomepage.htmllocalhost指你所在的计算机本身。指你所在的计算机本身。在在windows系统它成了系统它成了127.0.0.1的别名的别名，一定程序上使用，一定程序上使用localhost比比127.0.0.1要要快一些。快一些。廊坊师范学院计算机科学与技术系1.1.2Web浏览器浏览器14Web浏览器是一种用于浏览网页的软件，其可浏览器是一种用于浏览网页的软件，其可以从互联网中获得网页文档及相关的文档，并将其展以从互联网中获得网页文档及相关的文档，
7、并将其展示给用户。示给用户。1InternetExplorerInternetExplorer（简称（简称IE）是目前全世界最流）是目前全世界最流行的网页浏览器。行的网页浏览器。2MozzillaFirefoxMozzillaFirefox浏览器是由浏览器是由Mozzilla基金会与基金会与开源社区共同开发的一种免费开源的开源社区共同开发的一种免费开源的Web浏览器，是浏览器，是在全世界范围内市场占有率仅次于在全世界范围内市场占有率仅次于IE的的Web浏览器。浏览器。3OperaOpera是挪威出品的一款老牌是挪威出品的一款老牌Web浏览器。浏览器。廊坊师范学院计算机科学与技术系1.1.3ID
8、C技术基础技术基础IDC（InternetDataCenter，互联网数，互联网数据中心，又称服务器农场），是用户存放计算据中心，又称服务器农场），是用户存放计算机服务器设备，并为其提供各种电力保障、网机服务器设备，并为其提供各种电力保障、网络通信、环境控制的设备或设备集群。通常意络通信、环境控制的设备或设备集群。通常意义上讲，义上讲，IDC技术涵盖了网络服务器运营的整技术涵盖了网络服务器运营的整个体系，是互联网中个体系，是互联网中Web或其他服务发布的基或其他服务发布的基础。典型的础。典型的IDC体系包括四个主要部分。体系包括四个主要部分。151服务器系统服务器系统2电力保障系统电力保障系统
9、3数据传输保障系统数据传输保障系统4环境控制系统环境控制系统廊坊师范学院计算机科学与技术系1.2网页设计理论网页设计理论网网页页的的设设计计是是一一种种艺艺术术性性的的创创作作，设设计计出出的的网网页页需需要要符符合合绝绝大大多多数数用用户户的的审审美美观观念念，同同时时又又需需要要有有一一定定的的独独创创性性内内容容。总总的的说说，设设计计网网页页时时最最难难掌掌握握的的两两个个要要点点就就是是网网页页的的色色彩彩搭搭配配艺艺术术和和内内容布局艺术。容布局艺术。16廊坊师范学院计算机科学与技术系1.2.1网页配色艺术网页配色艺术网页设计是一种特殊的视觉设计，是平网页设计是一种特殊的视觉设计，
10、是平面设计的一个分支，和其他平面设计类似，面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩设计同时还对色彩都有较大的依赖性。色彩设计同时还是网站风格设计的决定性因素之一，是网页是网站风格设计的决定性因素之一，是网页上上“看的见看的见”的视觉元素。的视觉元素。171三原色的概念三原色的概念2色彩的属性色彩的属性3色彩模式色彩模式4216网页安全色网页安全色5网页配色方法网页配色方法廊坊师范学院计算机科学与技术系颜色的使用在网页制作中起着非常关键颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学
11、习制作令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的网页的人来说，往往不容易驾驭好网页的颜色搭配颜色搭配.廊坊师范学院计算机科学与技术系网页颜色原理和象征意义网页颜色原理和象征意义我们所有网页上颜色，在我们所有网页上颜色，在HTML下看到的是以下看到的是以颜色英文单词或者十六进制的表示方法（如颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。含义，给人各种丰富的感觉和联想。红色：热情、奔放、喜悦、庄严红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黄色：高贵、
12、富有、灿烂、活泼黑色：严肃、夜晚、沉着黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净白色：纯洁、简单、洁净蓝色：天空、清爽、科技蓝色：天空、清爽、科技绿色：植物、生命、生机绿色：植物、生命、生机灰色：庄重、沉稳灰色：庄重、沉稳紫色：浪漫、富贵紫色：浪漫、富贵棕色：大地、厚朴棕色：大地、厚朴廊坊师范学院计算机科学与技术系网页颜色的使用风格网页颜色的使用风格不同的网站有着自己不同的风格，也有着自己不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型：不同的颜色。网站使用颜色大概分为几种类型：1、公司色公司色在现在企业中，公司的在现在企业中，公司的CI形象显得尤其重要，形象
13、显得尤其重要，每一个公司的每一个公司的CI设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如新浪网新浪网的主色调是一种介于的主色调是一种介于浅黄和深黄浅黄和深黄之间的颜之间的颜色，同时形象宣传、海报、广告使用的颜色都和色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调网站的颜色一致。再比如国富投资公司的主色调是是C：100%，M：60%，Y：0%，K：0%。这样。这样的颜色使用到网站上显得色调自然、底蕴深厚。的颜色使用到网站上显得色调自然、底蕴深厚。廊坊师范学院计算机科学与技术系网页颜色的使用风格网页颜色的使用风格2、风格色风格色许多网站使用颜色秉承的是
14、公司的风格。比如许多网站使用颜色秉承的是公司的风格。比如海尔海尔使用的颜色是一种中性的绿色，即充满朝气使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多较多，大公司使用蓝色的较多这些都是在突这些都是在突出自己的风格。出自己的风格。3、习惯色习惯色这些网站的颜色使用很大一部分是凭自己的个这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这色、紫色、黑色等，在做网站的时候就倾向于这种颜色。
15、每一个人都有自己喜欢的颜色，因此这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。种类型称为习惯色。廊坊师范学院计算机科学与技术系设计用色十例设计用色十例以下我将分别介绍十个配色较好的网站，以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。敏感以及独到的审美能力。廊坊师范学院计算机科学与技术系1）这是个大型的）这是个大型的NBA网站。通常我们经常网站。通常我们经常看到的此类网站以看到的此类网站以白色为背景白色为背景，但是这个，但是这个网站却用网站却用灰黑色灰黑色RGB为（为（48，48，48/#333
16、333）（以下颜色都用）（以下颜色都用RGB表示），表示），文章标题用色为文章标题用色为RGB为（为（203，201，153/#CCCC99），菜单使用的），菜单使用的RGB为为（112，119，112/#707770）。这样的配）。这样的配色可以显示独特的个性，又不失大型网站色可以显示独特的个性，又不失大型网站的风采。如图的风采。如图1廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系2）下面是一个娱乐类的综合性网站）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为，他的配色方案是背景色为黑色黑色RGB为为（0，0，0）中嵌套）中嵌套RGB（0，0，82），），字体字体白
17、色白色RGB（255,255,255）,菜单为菜单为RGB（77,114,159）。这样的虽以）。这样的虽以黑蓝为黑蓝为主色调主色调，但是配以漂亮的图片，给人的感，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气觉是生机盎然，充满了互动色彩和青春气息。如图息。如图2。廊坊师范学院计算机科学与技术系3）下面的这个网站是大名鼎鼎的）下面的这个网站是大名鼎鼎的微软公司网站微软公司网站，微，微软不仅软件做的好，连网页制作也是世界一流。他软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、
18、作风，以及雄厚的实力。背看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用景颜色使用蓝色蓝色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），），菜单色为菜单
19、色为RGB（48，64，64）和）和RGB（0，81，111）字体使用的是）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非）。虽然简单，但颜色搭配非常的科学合理。如图常的科学合理。如图4廊坊师范学院计算机科学与技术系5）下面的网站采用）下面的网站采用黄色黄色调为主，很体现公调为主，很体现公司的个性，现在我们就来看一看她的颜色司的个性，现在我们就来看一看她的颜色搭配。搭配。主色调为黄色主色调为黄色RGB为（为（255，199，48/#FFC730），辅助色调为），辅助色调为RGB（49，102，46）字体为）字体为棕色棕色RGB（153，103，0），中间再配以抽象的图片，显得个
20、性十），中间再配以抽象的图片，显得个性十足但又不单调。如图足但又不单调。如图5廊坊师范学院计算机科学与技术系6）橘红色橘红色如果运用得当的话是一种非常使用于如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为著名的例子。他的主色调为RGB（255，151，0）辅助色调为）辅助色调为RGB（255，103，4），菜单），菜单RGB为（为（252，200，0）。字体使用黑色）。字体使用黑色RGB为（为（0，0，0）。此种配色显得主人较为前卫，）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图色彩热烈，给
21、人的震慑力较强。如图6廊坊师范学院计算机科学与技术系7）鲜红色鲜红色也是一种震撼感很强的颜色，如果搭也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字），配以抽象的图形，文字使用的是使用的是RGB（213，229，167）显得美观而）显得美观而不失独特，大气而不逼人。如图不失独特，大气而不逼人。如图7廊坊师范学院计算机科学与技术系8）下面
22、介绍的这种色调是我们制作网页）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。你的网页中，肯定会给人耳目一新的感觉。他的主色调为他的主色调为RGB（144，151，97）辅）辅助色调为助色调为RGB（173，168，112）边饰）边饰为为黑色黑色RGB（0，0，0）字体为黑色）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，）。这样的搭配显得风格独特，颜色和谐而庄重。如图颜色和谐而庄重。如图8廊坊师范学院计算机科学与技术系9）下面的设计更加的简单化，但是颜色）下面的设计更加的简单化，但是颜色的
23、使用使网页并不呆板，反而让人感觉到的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，美丽和爱中。他的主体是由两种颜色构成，分别是分别是RGB（239，200，161）和）和RGB（201，254，200）。如此简单，但）。如此简单，但是却栩栩如生，跃然网上。如图是却栩栩如生，跃然网上。如图9廊坊师范学院计算机科学与技术系10）下面举出这个例子是想证明一个道理）下面举出这个例子是想证明一个道理只要你有足够的想象力，你就能够设只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一计出漂亮的
24、网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了面这个例子的菜单就使用了7种颜色，但种颜色，但是我们看到的网页并不杂乱，相反感觉作是我们看到的网页并不杂乱，相反感觉作者很有创意。如图者很有创意。如图10廊坊师范学院计算机科学与技术系1.2.2网页布局艺术网页布局艺术网页元素是网页最基本的组成部分，这网页元素是
25、网页最基本的组成部分，这些网页元素如何在网页中组合，将直接影响些网页元素如何在网页中组合，将直接影响到网页设计方案的优劣。因此，掌握网页布到网页设计方案的优劣。因此，掌握网页布局艺术对于一个网页设计师而言是不可缺少局艺术对于一个网页设计师而言是不可缺少的技能。网页布局可以从两方面理解，一种的技能。网页布局可以从两方面理解，一种是结构布局，另一种是艺术布局。是结构布局，另一种是艺术布局。341结构布局结构布局网页结构布局是根据网页中各种元素的网页结构布局是根据网页中各种元素的位置结构划分来设计的，最常见到的结构布位置结构划分来设计的，最常见到的结构布局方式包括局方式包括国字型、拐角型、上下框架和
26、左国字型、拐角型、上下框架和左右框架右框架等类型。等类型。廊坊师范学院计算机科学与技术系352艺术布局艺术布局在网页设计时，往往还广泛地应用了平在网页设计时，往往还广泛地应用了平面构成的原理。通过平面构成原理，可以使面构成的原理。通过平面构成原理，可以使网页更富有艺术气息，更加吸引用户的注意网页更富有艺术气息，更加吸引用户的注意力。力。廊坊师范学院计算机科学与技术系1.3网页标准化技术网页标准化技术网网页页是是一一种种承承载载多多媒媒体体数数据据信信息息的的、跨跨平平台台的的媒媒体体。在在制制作作这这种种媒媒体体时时，必必须须依依照照统统一一的的技技术术标标准准，遵遵循循严严格格的的技技术术规
27、规范范。目目前前网网页页的的技技术术规规范范主主要要包包括括三三种种，即即 XHTML语语 言言 、 CSS样样 式式 表表 以以 及及ECMAScript脚脚本本语语言言。这这三三种种技技术术规规范范分分别别实实现现了了网网页页的的标标准准化化结结构构、标标准准化化表表现现以以及及标标准准化化的的行行为为，形形成成了了三三位位一一体体的的网网页标准化体系。页标准化体系。36廊坊师范学院计算机科学与技术系1.3.1XHTML语言语言XHTML（eXtensibleHyperTextMarkupLanguage，可扩展的超文本标，可扩展的超文本标记语言）是一种基于记语言）是一种基于XML（eXt
28、ensibleMarkupLanguage，可扩展的标记语言），可扩展的标记语言）与与HTML（HyperTextMarkupLanguage，超文本标记语言）的新型标，超文本标记语言）的新型标记语言和结构语言。记语言和结构语言。371XHTML语言简介语言简介2结构与表现的分离结构与表现的分离3XHTML文档类型文档类型廊坊师范学院计算机科学与技术系1.3.2CSS样式表样式表CSS（CascadingStyleSheets，层叠样式，层叠样式表）表）是一种由是一种由W3C定义的数据表格式，其作用是为定义的数据表格式，其作用是为XML、HTML以及以及XHTML等结构化的文档添加样式等结构化
29、的文档添加样式描述，从而实现对文档中内容的排版和美化。描述，从而实现对文档中内容的排版和美化。在传统的网页文档中，在传统的网页文档中，HTML语言以混合结构语言以混合结构与表现的方式显示内容，由于没有统一的样式管理，与表现的方式显示内容，由于没有统一的样式管理，每个页面即使是相同的标记都必须一一进行更改，每个页面即使是相同的标记都必须一一进行更改，从而大大增加了维护的时间、成本及效率。随着网从而大大增加了维护的时间、成本及效率。随着网站内页面的不断更新、扩展，需要一种技术对站内页面的不断更新、扩展，需要一种技术对页面页面布局、字体、颜色、背景和其它图文效果的实现提布局、字体、颜色、背景和其它图
30、文效果的实现提供更加精确的控制，这种技术就是供更加精确的控制，这种技术就是CSS。38廊坊师范学院计算机科学与技术系1.3.3ECMAScript脚本语言脚本语言ECMAScript脚本语言是由脚本语言是由NetScape（网景）（网景）公司和公司和Sun（升阳）公司开发，最终由（升阳）公司开发，最终由ECMA（EuropeanComputerManufacturersAssociation，欧洲计算机制造商协会）国际（一个，欧洲计算机制造商协会）国际（一个国际性信息和电信标准组织）进行标准化完善而成的、国际性信息和电信标准组织）进行标准化完善而成的、面向对象编程的脚本程序设计语言标准。面向对
31、象编程的脚本程序设计语言标准。ECMAScript并非具体的脚本编程语言，而是吸并非具体的脚本编程语言，而是吸收多种脚本语言的特点和规范，制订的一种标准。符收多种脚本语言的特点和规范，制订的一种标准。符合该标准的脚本编程语言都可被称作合该标准的脚本编程语言都可被称作ECMAScript。例如，由例如，由MozillaFireFox浏览器支持的浏览器支持的JavaScript和微软和微软InternetExplorer支持的支持的Jscript等，都是符等，都是符合合ECMAScript的子集、具体实现或扩展。的子集、具体实现或扩展。39廊坊师范学院计算机科学与技术系1.4动态网页开发技术动态网
32、页开发技术动态网页开发技术的本质，就是通过编程动态网页开发技术的本质，就是通过编程语言编写的程序与用户进行交互，并将交互所语言编写的程序与用户进行交互，并将交互所需的数据以及反馈的结果存储到数据库中。动需的数据以及反馈的结果存储到数据库中。动态网页开发技术与一般用于网页特效的脚本语态网页开发技术与一般用于网页特效的脚本语言最大的区别在于，脚本语言所反馈的信息是言最大的区别在于，脚本语言所反馈的信息是固定的，基于网页本身的。而动态网页开发技固定的，基于网页本身的。而动态网页开发技术反馈的信息则是从数据库中调用的。术反馈的信息则是从数据库中调用的。40廊坊师范学院计算机科学与技术系1.4.1ASP
33、技术技术ASP（ActiveServerPages，动态服务，动态服务网页）是微软公司开发的一种由网页）是微软公司开发的一种由VBScript脚本脚本语言或语言或JavaScript脚本语言调用脚本语言调用FSO（FileSystemObject，文件系统对象）组件实现的，文件系统对象）组件实现的动态网页技术。动态网页技术。ASP技术必须通过技术必须通过Windows的的ODBC与与后台数据库通信后台数据库通信，因此只能应用于，因此只能应用于Windows服务器中。服务器中。ASP技术的解释程序包括两种，即技术的解释程序包括两种，即Windows9X系统的系统的PWS和和WindowsNT系统
34、系统的的IIS。在。在Windows系统中，必须安装其中一系统中，必须安装其中一种解释程序，才能使用种解释程序，才能使用ASP技术。技术。41廊坊师范学院计算机科学与技术系1.4.2ASP.net技术技术ASP.NET是一种已经编译的、基于是一种已经编译的、基于.NET的环境，可的环境，可以使用任何与以使用任何与.NET兼容的语言（例如兼容的语言（例如C#、VB.NET等）等）构造构造Web应用程序。应用程序。ASP.NET可以很好地与可以很好地与HTML编辑编辑器和器和VS.NET编程语言一起工作。编程语言一起工作。ASP.NET也是微软公司提供的开发动态网页的技术。也是微软公司提供的开发动
35、态网页的技术。ASP.NET相对于相对于ASP是一个革命性的创新。从运行机制是一个革命性的创新。从运行机制上来说：上来说：ASP属于解释型的编程框架，它的核心是属于解释型的编程框架，它的核心是VBScript和和JavaScript脚本语言，这两种脚本语言决定脚本语言，这两种脚本语言决定了了ASP的先天不足，这两种脚本语言无法像传统的编程语的先天不足，这两种脚本语言无法像传统的编程语言那样进行底层操作，所以有时不得不借助于其他语言编言那样进行底层操作，所以有时不得不借助于其他语言编写的组件。而写的组件。而ASP.NET是一种编译型的编程框架，它的是一种编译型的编程框架，它的核心是核心是.NET
36、Framework。它可以运用。它可以运用VS.NET编程序语编程序语言开发，这样它就不需要借助于其他的组件来完成底层操言开发，这样它就不需要借助于其他的组件来完成底层操作。作。42廊坊师范学院计算机科学与技术系1.4.3PHP技术技术PHP（PersonalHomePages）是一种在服务器）是一种在服务器端运行的，端运行的，HTML文档中嵌入的脚本语言。它借鉴文档中嵌入的脚本语言。它借鉴C语语言、言、Java语言和语言和Perl语言的语法，同时具有自己独特语言的语法，同时具有自己独特的语法，可以运行于多种平台。这种语言的目的是让的语法，可以运行于多种平台。这种语言的目的是让WEB开发人员能
37、够快速高效地写出动态生成的页面。开发人员能够快速高效地写出动态生成的页面。PHP是嵌入到是嵌入到HTML语言中的脚本语言，能够执语言中的脚本语言，能够执行一定的功能。如果要将嵌入在行一定的功能。如果要将嵌入在HTML文档中的文档中的PHP脚脚本程序与其他语言区分开，如本程序与其他语言区分开，如CSS，JavaScript等，等，就要把嵌入的就要把嵌入的PHP脚本语言放置到特定的并且成对的脚本语言放置到特定的并且成对的标记内。这样当解析一个标记内。这样当解析一个PHP文件时，会寻找相应的文件时，会寻找相应的开始和结束标记，这些标记告诉开始和结束标记，这些标记告诉PHP解析器开始和停解析器开始和停
38、止的位置。此种解析方式可以使止的位置。此种解析方式可以使PHP嵌入到各种不同嵌入到各种不同的文档中。在一对开始和结束标记之外的内容会被的文档中。在一对开始和结束标记之外的内容会被PHP解析器忽略。解析器忽略。43廊坊师范学院计算机科学与技术系1.4.4JSP技术技术JSP是一种专门用于在服务器端编译、执是一种专门用于在服务器端编译、执行的行的Web技术，实现普通静态技术，实现普通静态HTML和动态页和动态页面输出混合编码的技术，其脚本语言采用面输出混合编码的技术，其脚本语言采用Java语言。借助内容和外观表现的分离，语言。借助内容和外观表现的分离，Web页面页面制作的任务可以方便地划分给页面设
39、计人员和制作的任务可以方便地划分给页面设计人员和程序员，并方便地通过程序员，并方便地通过JSP来合成。相比来合成。相比ASP和和PHP，JSP具有支持线程、安全、高效等性具有支持线程、安全、高效等性能。能。44廊坊师范学院计算机科学与技术系1.5网页设计软件网页设计软件网页的设计并非简单输入文本的过程，网页的设计并非简单输入文本的过程，而是一个从处理图像、制作动画到编写网而是一个从处理图像、制作动画到编写网页代码和脚本的完整过程。在这一过程的页代码和脚本的完整过程。在这一过程的各种阶段中，需要使用不同类型的软件。各种阶段中，需要使用不同类型的软件。这些软件可以极大地提高网页设计的效率。这些软件
40、可以极大地提高网页设计的效率。本节将介绍网页设计时使用的本节将介绍网页设计时使用的3种主要软件，种主要软件，又被称作网页三剑客的又被称作网页三剑客的Fireworks、Flash以及以及Dreamweaver。45廊坊师范学院计算机科学与技术系1.5.1FireworksCS4在在各各种种图图像像处处理理软软件件中中，Fireworks是是最最贴贴近近网网页页设设计计需需求求的的图图像像处处理理软软件件之之一一。目目前前Fireworks的的最最新新版版本本为为CS4（10.0.3）版版本本，在在该该版版本本中中，采采用用了了全全新新的的界界面面，并并增增强强了了与与Flash、Dreamwe
41、aver等等软软件件的的集集成成性性能能，并并提提供供了了基基于于CSS的的布布局局，允允许许用用户户设设计计图图像像并并导导出出以以XHTML文文档档和和CSS样样式式结结合合的的网网页页，支支持将图像导出为持将图像导出为PDF，并新增了动态样式等功能。，并新增了动态样式等功能。46廊坊师范学院计算机科学与技术系1.5.2FlashCS4Flash是目前应用最广泛的网页动画设计工具。是目前应用最广泛的网页动画设计工具。其具备了从动画的绘制、动作的实现、编程控制以及其具备了从动画的绘制、动作的实现、编程控制以及最后动画的输出等一整套实用的功能，可以完全满足最后动画的输出等一整套实用的功能，可以
42、完全满足用户的动画创意、动画设计、动画制作以及动画发布用户的动画创意、动画设计、动画制作以及动画发布所有的要求。使用所有的要求。使用FlashCS4，不仅可以快速地制作，不仅可以快速地制作各种网页动画，还可以编辑一些专业的动漫作品，甚各种网页动画，还可以编辑一些专业的动漫作品，甚至开发基于互联网的跨平台应用程序。至开发基于互联网的跨平台应用程序。47廊坊师范学院计算机科学与技术系1.5.3DreamweaverCS4Dreamweaver是目前最流行的网页设计工具。其是目前最流行的网页设计工具。其既具有所见即所得的网页设计界面，同时也具有强大的既具有所见即所得的网页设计界面，同时也具有强大的代
43、码编写功能。无论初学者，还是自身的网页程序员，代码编写功能。无论初学者，还是自身的网页程序员，都可以使用都可以使用Dreamweaver制作出精美的网页，甚至编制作出精美的网页，甚至编写出各种复杂的网页应用程序。写出各种复杂的网页应用程序。48廊坊师范学院计算机科学与技术系1.6网站建设流程网站建设流程随着网站建设的分工越来越细，网随着网站建设的分工越来越细，网站的制作逐渐发展成为一个由网页界面设站的制作逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程计、网页制作、数据库开发和动态应用程序编写等一系列工作集成的系统工程。同序编写等一系列工作集成的系统工程。同时，建设一个网站投入
44、的各种前期和后期时，建设一个网站投入的各种前期和后期工作也越来越繁重。了解网站建设的流程，工作也越来越繁重。了解网站建设的流程，可以有效地进行网站建设的规划，提高网可以有效地进行网站建设的规划，提高网站建设的效率。站建设的效率。49廊坊师范学院计算机科学与技术系1.6.1网站策划网站策划50在网站的建设工作进行之前，首先在网站的建设工作进行之前，首先要对网站所采用的内容、提供的服务等要对网站所采用的内容、提供的服务等重要的信息进行策划，为网站中页面设重要的信息进行策划，为网站中页面设计提供必要的前期数据和参考，提高网计提供必要的前期数据和参考，提高网站在建设完成后的用户任何程度。策划站在建设完
45、成后的用户任何程度。策划是一个重要的步骤，直接关系到网站的是一个重要的步骤，直接关系到网站的运营成果。运营成果。廊坊师范学院计算机科学与技术系1.6.2方案实施方案实施51方案实施是网站具体建设的过程。方案实施是网站具体建设的过程。在方案实施过程中，需要根据网站策划在方案实施过程中，需要根据网站策划步骤中中得到的各种数据，规划网站的步骤中中得到的各种数据，规划网站的栏目和版块，同时确定网站所使用的各栏目和版块，同时确定网站所使用的各种技术。最后，在根据这些技术和内容，种技术。最后，在根据这些技术和内容，设计和制作网站。设计和制作网站。廊坊师范学院计算机科学与技术系1.6.3后期维护工作后期维护
46、工作52后期维护工作是在网站建设完成后后期维护工作是在网站建设完成后必须进行的工作。一个网站后期工作进必须进行的工作。一个网站后期工作进行的顺利与否，直接影响到网站的点击行的顺利与否，直接影响到网站的点击率、赢利以及网站的生存。后期维护工率、赢利以及网站的生存。后期维护工作包括网站的测试、发布、推广以及维作包括网站的测试、发布、推广以及维护等工作护等工作廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境IIS是微软公司的专业是微软公司的专业Web服务器。服务器。Windows2000捆绑了捆绑了IIS5.0，WindowsXP捆绑了捆绑了IIS5.1，而对于而对于WindowsN
47、TServer，则可以单独下载。下面我们将介则可以单独下载。下面我们将介绍在绍在WindowsXP环境下设置环境下设置ASP运行环运行环境的方法和步骤。境的方法和步骤。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境1）安装）安装IIS5.1“控制面板控制面板”“添加或删除程序添加或删除程序”“Windows组组件向导件向导1”对话框对话框选中选中“Inernet信息服务信息服务(IIS)”复复选框选框2）测试）测试IIS5.1打开浏览器，在地址栏中输入打开浏览器，在地址栏中输入http:/localhost或或http:/ComputerName；如果如果IIS5.1安装成功
48、，安装成功，就可以打开就可以打开IIS5.1的默认站点中的默认页面的默认站点中的默认页面“localstart.asp”http:/localhost/localstart.asp廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境3）主目录）主目录什么是什么是“主目录主目录”？每个每个Web站点都有一个唯一的主目录。主目录站点都有一个唯一的主目录。主目录是是Web站点上发布文件的站点上发布文件的中心位置中心位置，也是访问者的，也是访问者的起始点起始点，主目录及其子目录中的所有文件将自动对，主目录及其子目录中的所有文件将自
49、动对访问者可用。默认访问者可用。默认Web站点的默认主目录是站点的默认主目录是C:InetPubwwwroot。“主目录主目录”与域名之间的关系与域名之间的关系主目录主目录与与网站的域名网站的域名/服务器名服务器名存在一一对应的存在一一对应的映射关系。映射关系。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境3）主目录）主目录设置设置“主目录主目录”？“控制面板控制面板”管理工具管理工具Internet信信息服务息服务”右击右击“默认网站默认网站”单击单击“属性属性”“默认站点默认站点属性属性”对话框。对话框。选中选中“主目录主目录”选项卡选项卡廊坊师范学院计算机科学与技术系说
50、明：说明：IIS运行环境运行环境4）虚拟目录）虚拟目录什么是什么是“虚拟目录虚拟目录”？虚拟目录是虚拟目录是物理上未包含在主目录物理上未包含在主目录中的中的目录，但浏览器却认为该目录包含在主目录目录，但浏览器却认为该目录包含在主目录中，一个网站中可以有中，一个网站中可以有若干若干个虚拟目录。个虚拟目录。浏览虚拟目录？浏览虚拟目录？虚拟目录具有虚拟目录具有别名别名，浏览器可以使用虚，浏览器可以使用虚拟目录的别名来拟目录的别名来访问访问该目录。该目录。廊坊师范学院计算机科学与技术系例如例如如果如果服务器域名服务器域名：localhost主目录主目录：C:InetPubwwwroot虚拟目录虚拟目录
51、的物理位置：的物理位置：F:XNML别名别名：XNML浏览器将用浏览器将用URL地址：地址：http:/localhost/XNML来访问来访问“F:XNML”中的文件。中的文件。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境4）虚拟目录）虚拟目录使用使用虚拟目录虚拟目录的优势？的优势？可在一个站点下浏览可在一个站点下浏览多个文件夹多个文件夹中的文中的文件。件。设置设置“虚拟目录虚拟目录”“Internet信息服务信息服务”对话框对话框右击待右击待创建虚拟目录的创建虚拟目录的Web站点站点“新建新建”菜单菜单“虚拟目录虚拟目录”命令命令虚拟目录创建向导虚拟目录创建向导廊坊师范
52、学院计算机科学与技术系说明：说明：IIS运行环境运行环境5）默认文档）默认文档什么是什么是“默认文档默认文档”？默认文档是指站点访问者请求中默认文档是指站点访问者请求中没有指定没有指定，但，但服务器自动执行服务器自动执行的的Web文档。例如，当访问者在浏文档。例如，当访问者在浏览器中输入览器中输入“http:/”时，尽时，尽管没有输入文件名管没有输入文件名，但也会打开，但也会打开Microsoft主页主页“index.asp”，这是因为这是因为Web服务器对于所有不包服务器对于所有不包含文件名的请求都用默认文档作响应。含文件名的请求都用默认文档作响应。最常用的默认文档名称是最常用的默认文档名称
53、是index.htm、index.asp、default.htm和和default.asp等。等。廊坊师范学院计算机科学与技术系说明：说明：IIS运行环境运行环境5）默认文档）默认文档设置设置“默认文档默认文档”“Internet信息服务信息服务”对话框对话框右击右击“默认网站默认网站”选择选择“属性属性”命令命令“默默认网站认网站属性属性”对话框对话框选中选中“文档文档”标签标签选中选中“启用默认文档启用默认文档”复选框复选框单击单击“添加添加”按钮按钮“添加默认文档添加默认文档”对话框对话框输入要添加文件名输入要添加文件名单击单击“确定确定”按钮按钮廊坊师范学院计算机科学与技术系虚拟目录虚拟目录与与站点站点的区别？的区别？虚拟目录虚拟目录就是你在就是你在IE地址栏里面看到的地址栏里面看到的路径所指向的目录。而你路径所指向的目录。而你站点实际目录站点实际目录就就是你本地电脑的路径目录。是你本地电脑的路径目录。访问者通过虚拟目录经由服务器的转换访问者通过虚拟目录经由服务器的转换再找到你的实际目录来进行访问。（为了再找到你的实际目录来进行访问。（为了安全）安全）廊坊师范学院计算机科学与技术系本章结束本章结束谢谢谢谢!
