第7章 网站设计

1、本章着重介绍网站规划、设计、与发布，其目的是通过本章着重介绍网站规划、设计、与发布，其目的是通过学习使读者对网站的制作有一个基本的了解和认识。学习使读者对网站的制作有一个基本的了解和认识。7.1 7.1 网站设计的基本步骤与原则网站设计的基本步骤与原则7.2 7.2 网页设计基础网页设计基础HTMLHTML7.3 7.3 网页的制作网页的制作7.4 7.4 站点发布站点发布7.5 7.5 网页脚本语言网页脚本语言JavaScriptJavaScript1 1、首先在、首先在InternetInternet网上网上申请网站的主页空间和域名申请网站的主页空间和域名。在很多门户网。在很多门户网站都提

2、供免费的服务，但代价是要在你的主页上留有该网站的广站都提供免费的服务，但代价是要在你的主页上留有该网站的广告。告。2 2、然后在自己的计算机上、然后在自己的计算机上设计出网页设计出网页。可以利用一些网页的制作工。可以利用一些网页的制作工具。如：网页编辑软件具。如：网页编辑软件FontPageFontPage 、DreamwaveDreamwave ；图片处理软件，；图片处理软件，如如PhotoShopPhotoShop；动画的制作软件，如动画的制作软件，如FlashFlash等等。等等。3 3、通过、通过FTPFTP（文件传输）软件或站点发布软件，将网页、有关的图文件传输）软件或站点发布软件，

3、将网页、有关的图片文件、动画文件以及相关文件片文件、动画文件以及相关文件传到网网站传到网网站。4 4、登记搜索引擎登记搜索引擎。为自己所做的网站进行宣传，让广大的。为自己所做的网站进行宣传，让广大的InternetInternet网络用户能够知道你的存在，否则你所做的网站就毫无意义，因网络用户能够知道你的存在，否则你所做的网站就毫无意义，因为别人无法知道你的网页。为别人无法知道你的网页。1 使用者优先的观念；使用者优先的观念；2 内容第一；内容第一；3 着手规划、确定特色、锁定目标；着手规划、确定特色、锁定目标；4 重视首页、合理分类；重视首页、合理分类；5 考虑网站的互动性；考虑网站的互动性

4、；6 应用图形技巧；应用图形技巧；7 选取合理的背景底色；选取合理的背景底色；8 避免滥用技术；避免滥用技术；9 及时更新维护。及时更新维护。 网页的学名称作网页的学名称作HTMLHTML文件，是一种可以在文件，是一种可以在WWWWWW网上传网上传输，并被浏览器认识和翻译成页面显示出来的文件。输，并被浏览器认识和翻译成页面显示出来的文件。 WWWWWW是是“World Wide Web”World Wide Web”的缩写；的缩写；HTMLHTML的意思则的意思则是是“Hypertext Markup Language”Hypertext Markup Language”，中文翻译为中文翻译为

5、“超文超文本标注语言本标注语言”。“超文本超文本”就是指页面内可以包含图片、就是指页面内可以包含图片、链接、甚至音乐、程序等非文字的元素。一般，一个网链接、甚至音乐、程序等非文字的元素。一般，一个网站是由很多的站是由很多的WebWeb网页组成，其中有一个比较特殊的网页组成，其中有一个比较特殊的WebWeb网页，它是当网页，它是当InternetInternet网络用户访问这个网站时所显示网络用户访问这个网站时所显示的第一个的第一个WebWeb网页，称作网页，称作主页主页（Homepage Homepage 或或Home PageHome Page）。）。HTMLHTML（超文本标记语言）是一种

6、描述文档结构的标注语言超文本标记语言）是一种描述文档结构的标注语言，它，它使用一些约定的标记对使用一些约定的标记对WWWWWW上的各种信息进行标注。当用户上的各种信息进行标注。当用户浏览浏览WWWWWW上的信息时，浏览器会自动解释这些标记的含义，上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。并按照一定的格式在屏幕上显示这些被标记的文件。HTMLHTML的的优点是其优点是其跨平台性跨平台性。即任何可以运行浏览器的计算机都能阅。即任何可以运行浏览器的计算机都能阅读并显示读并显示HTMLHTML文件，不管其操作系统是什么。文件，不管其操作系统是什么。HTM

7、LHTML文件是标准的文件是标准的ASCIIASCII文件文件，且其后缀名为，且其后缀名为htmhtm或或htmlhtml的文件。的文件。HTMLHTML文件看起来象是加入了许多被称为链接签（文件看起来象是加入了许多被称为链接签（tagtag）的特的特殊字符串的普通文本文件。殊字符串的普通文本文件。大部分的标签形式是：大部分的标签形式是： 相应内容相应内容/ 华中科技大学华中科技大学 BODY = yellow 这是一这是一HTMLHTML的测试文件的测试文件 超文本链接指针超文本链接指针是是HTMLHTML最吸引人的优点之一，可以这样最吸引人的优点之一，可以这样说，如果没有超文本链接指针，就

8、没有万维网。使用说，如果没有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度超文本链接指针可以使顺序存放的文件具有一定程度上上随机访问的能力随机访问的能力，这更加符合人类的跳跃思维方式。，这更加符合人类的跳跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文超文本链接指针是指把并不连续的两段文字或两个文件联系起来。件联系起来。该类标签用于建立具有文本、标题和列表的该类标签用于建立具有文本、标题和列表的HTMLHTML页面。页面。：括住整个括住整个HTMLHTML文档（文件的开头和结文档（文件的开头和结尾）尾）：括住括住HTMLHTML文档的页头（描述文件的

9、信文档的页头（描述文件的信息）息）：括住括住HTMLHTML文档的主体（文本、标签和文档的主体（文本、标签和正文内容）正文内容）：用于设定文档的标题用于设定文档的标题（1 1）六级标题标签）六级标题标签： 1 1级标题级标题 ： 2 2级标题级标题： 3 3级标题级标题 ： 4 4级标题级标题： 5 5级标题级标题 ： 6 6级标题级标题（2 2）标题对齐）标题对齐 （“?”?”对应标题的对应标题的六级六级1-61-6）（3 3）区段）区段（4 4）区段对齐区段对齐（5 5）引文区段引文区段（显示时通常内缩）显示时通常内缩）（6 6）强调）强调 （通常以斜体显示）通常以斜体显示）（7 7）强烈

10、强调）强烈强调 （通常以黑体显示）通常以黑体显示）（8 8）引用语句）引用语句 （通常以斜体显示）通常以斜体显示）（9 9）大字）大字（7 7）小字小字（1 1）段落）段落：普通段落（结束标签普通段落（结束标签是可选的）是可选的）（2 2）文字对齐方式）文字对齐方式（3 3）强迫转行强迫转行：换行换行（4 4）指定段后起点）指定段后起点（5 5）水平线水平线 （6 6）水平线位置水平线位置（7 7）水平线宽度（向下）水平线宽度（向下） （以（以pixelpixel为单位）为单位）（8 8）水平线长度（向右）水平线长度（向右） （以（以pixelpixel为单位）为单位）（9 9）水平线比例宽度

11、）水平线比例宽度 （与页宽相比）与页宽相比）（1010）实线）实线 （无立体效果）无立体效果）（1111）不可断行）不可断行：使中间的文本在页面中不换行使中间的文本在页面中不换行（1212）可断行处）可断行处 （视需要可在此断行）视需要可在此断行） （1 1）显示图形）显示图形 （2 2）图形位置图形位置 （3 3）图形尺寸图形尺寸 （以（以pixelpixel为单位）为单位）（4 4）链接标签）链接标签表示方法为：表示方法为：，其中包含其中包含HREFHREF属性是建立到另一个文档或属性是建立到另一个文档或站点的链接；包含站点的链接；包含NAMENAME属性时可生成一个被链接的站点。属性时可

12、生成一个被链接的站点。 ： 有序（编号）列表有序（编号）列表： 无序（圆点）列表无序（圆点）列表：菜单式列表菜单式列表：目录列表，目录长度一般小于目录列表，目录长度一般小于2020个字符个字符 6 6其他元素其他元素（1 1）下标字）下标字（2 2）上标字上标字（3 3）指定字型指定字型FONT FACE=（4 4）文字居中文字居中（中间的所有内容都居中）中间的所有内容都居中）（5 5）作者地址）作者地址（用于文档作者的签名和其他信息）用于文档作者的签名和其他信息）（6 6）闪烁）闪烁（在（在NetscapeNetscape浏览器中使标签之间的文本不断闪浏览器中使标签之间的文本不断闪烁）烁）（

13、7 7）改变字号、颜色等）改变字号、颜色等（8 8）说明说明 （必须放在头部区段内）必须放在头部区段内）（9 9）注解）注解!- - （浏览器不会显示出来）（浏览器不会显示出来）标记标记说明说明BgcolorBgcolor设置网页背景颜色设置网页背景颜色TextText设置网页非可链接文字的颜色设置网页非可链接文字的颜色LinkLink设置网页可链接文字的颜色设置网页可链接文字的颜色AlinkAlink设置网页正被点击的可链接文字的颜色设置网页正被点击的可链接文字的颜色VlinkVlink设置网页已经点击的可链接文字的颜色设置网页已经点击的可链接文字的颜色BackgroundBackgroun

14、d设置网页背景图案设置网页背景图案ImageURLImageURL设置网页背景图案的设置网页背景图案的URLURL地址地址# #代表颜色代表颜色RGBRGB值（格式为值（格式为rrggbbrrggbb）。）。它是用它是用1616进制的红进制的红- -绿绿- -蓝（蓝（red-green-bluered-green-blue，RGBRGB）值来表示。各种常见的颜色的值来表示。各种常见的颜色的RGBRGB值如表值如表9-29-2所示。所示。颜色颜色RGBRGB颜色颜色RGBRGB黑色（黑色（BlackBlack）000000000000橄榄色（橄榄色（OliveOlive）808000808000

15、红色（红色（RedRed）FF0000FF0000深表色（深表色（TealTeal）008080008080绿色（绿色（GreenGreen）008000008000灰色（灰色（GrayGray）808080808080蓝色（蓝色（BlueBlue）0000FF0000FF深蓝色（深蓝色（NavyNavy）000080000080白色（白色（WhiteWhite）FFFFFFFFFFFF浅绿色（浅绿色（LimeLime）00FF0000FF00黄色（黄色（YellowYellow）FFFF00FFFF00紫红色（紫红色（FuchsiaFuchsia）FF00FFFF00FF银色（银色（Silv

16、erSilver）C0C0C0C0C0C0紫色（紫色（PurplePurple）800080800080浅色（浅色（AquaAqua）00FFFF00FFFF茶色（茶色（MaroonMaroon）8000008000001 1 手工编写；手工编写；2 2 利用网页编辑软件（利用网页编辑软件（FlashFlash、FrontPageFrontPage、DreamweaverDreamweaver）；）；3 3 通过格式转换工具；通过格式转换工具；4 4 由由WebWeb服务器动态生成（语言服务器动态生成（语言 .NET .NET 、 ASPASP、PHPPHP、JSPJSP、CGICGI）。）。

17、我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问 ； ；我的 ； ；第一个主页!（1）链接到其它站点）链接到其它站点 在在HTML文件中用链接指针指向一个目标。其基本格式文件中用链接指针指向一个目标。其基本格式为：为： zzz 其中其中zzz可以是文字

18、或图片并显示在网页中，当用户单击可以是文字或图片并显示在网页中，当用户单击它时，浏览器就会显示由它时，浏览器就会显示由href属性中的统一资源定位器属性中的统一资源定位器（URL）所指向的目标，实际上这个所指向的目标，实际上这个ZZZ在在HTML文件中文件中充当指针的角色，它一般显示为蓝色。充当指针的角色，它一般显示为蓝色。href中的中的h表示超表示超文本，而文本，而ref表示表示“访问访问”或或“引用引用”的意思。例如：的意思。例如：华中科技大学华中科技大学 用户用鼠标单击用户用鼠标单击“华中科技大学华中科技大学”，即可看到华中科技，即可看到华中科技大学的主页内容。在这个例子中，大学的主页

19、内容。在这个例子中， 充当指针的是充当指针的是“华中科华中科技大学技大学”。我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!华中科技大学（2 2）同一个文件中的链接）同一个文件中的链接 超链可以指向自己的计算机中的某一个文件这种链接超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。指向的目标。 标识一个目标的方法为：标识一个目标的方法为：.A NAME NAME属性将放

20、置该标记的地方标记为属性将放置该标记的地方标记为“KKK”KKK”，KKKKKK是一个全文唯一的标记串，是一个全文唯一的标记串，和和 之间的内容可之间的内容可有可无。这样，就把放置标记的地方做了一个叫做有可无。这样，就把放置标记的地方做了一个叫做“KKK”KKK”的标记（如果对的标记（如果对Microsoft WordMicrosoft Word很熟悉的话，很熟悉的话，这就相当于在这就相当于在WordWord中的定义中的定义“书签书签”）。做好标记后，）。做好标记后，可以用下列方法来指向它。可以用下列方法来指向它。a = #KKK转向下一处转向下一处 这时就可以点击这时就可以点击“转向下一处转

21、向下一处”这段文字，浏览这段文字，浏览器就从标记名为器就从标记名为KKKKKK的部分开始显示此的部分开始显示此HTMLHTML文件的内容文件的内容了。了。我的第一个主页我的第一个主页! ! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页!转向下一处 A 在在HTML文件中显示图像文件中显示图像在浏览器上显示的图像必须有特定的格式，目前使用的在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持浏览器通常支持GIF和和JPEG格式的图像。在格式的图像。在HTML网网页中加图像是通过页中加图像是通过标记实现的，它有几个较为标记实现的，它有几个较为重要的属性。其中：重要的属性。其中

22、：SRC属性：指明图形的属性：指明图形的URL地址；地址；HEIGHT属性：决定图形的高度；属性：决定图形的高度；WIDTH属性：决定图形的宽度；属性：决定图形的宽度；BORDER属性：决定边框线的宽度，属性：决定边框线的宽度，0-表示无边框；表示无边框；ALT属性：指明图像显示的备用文本；属性：指明图像显示的备用文本；我的第一个主页! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页! B 在在HTMLHTML文件中利用图像建立链接文件中利用图像建立链接如果在链接标记如果在链接标记和和的中间放置一个的中间放置一个标记，标记，这个图像将会成为一个可击点，产生一个链接。例如：这个图像将会

23、成为一个可击点，产生一个链接。例如： IMG SRC=”images/center1.gif ” ALIGN=LEFT 当用户单击这个图像后，浏览器就会显示当用户单击这个图像后，浏览器就会显示“default.asp”default.asp”这个文件的内容了。这个文件的内容了。我的第一个主页我的第一个主页! ! 数控中心欢迎您!我是数控中心的一员欢迎访问我的第一个主页! 我的第一个主页我的第一个主页! 学校有如下管理机构：教务处科研处财务处我的第一个主页我的第一个主页! ! 表格示例一数学语文英语788778 我的第一个主页我的第一个主页! ! 成绩单数学语文 英语788778框架能够将页面分

24、成数个独立变化的窗口，每个窗口可以显示不同的框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同的WebWeb页面，页面，并可以不断更换显示的对象。使用框架结构，可以使屏幕的信息量增大，使并可以不断更换显示的对象。使用框架结构，可以使屏幕的信息量增大，使WebWeb网页更加吸引读者。有关框架内容的网页更加吸引读者。有关框架内容的HTMLHTML语法为：语法为： 其中其中 . 中的内容显示在不支持分框的浏览器中的内容显示在不支持分框的浏览器窗口中，因而这里指向一个普通版本的窗口中，因而这里指向一个普通版本的HTMLHTML文件，以便使用不支持分框浏览文件，以便使用不支持分框浏览器的用户阅读

25、。器的用户阅读。 分框由分框由指定，并且可以嵌套，分区中各部分显示的内容指定，并且可以嵌套，分区中各部分显示的内容用用指定。需要说明的是，指定。需要说明的是，frameframe是一个新出现的元素，许多浏览器是一个新出现的元素，许多浏览器不支持它。分框可以将窗口横向分成几个部分，不支持它。分框可以将窗口横向分成几个部分，框架结构标记可以嵌套，用以实现大框架中的小框架。框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个属性：它主要有两个属性：ROWS和和COLS，它们可以将浏它们可以将浏览器页面分为览器页面分为N行行M列，当然也可以各自独立使用。列，当然也可以各自独立使用。标记有以下主

26、要属性：标记有以下主要属性：SRC属性属性 指定框架单元的指定框架单元的URL源，如第源，如第6行中指出的是行中指出的是当前主机当前目录下的当前主机当前目录下的“a.htm”文件。即在此框中显文件。即在此框中显示示“a.htm”的内容。的内容。NAME属性属性 为该框架单元起个标识名，主要用来为将为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。来改变框架内容提供入口。SCROLLING属性属性 设置框架是否使用滚动务。有设置框架是否使用滚动务。有YES、NO和和AUTO三个值，分别表示强制使用滚动条，禁止三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。使用滚动条

27、和自动判断使用滚动条。华中科技大学华中科技大学 （1）所制作的网站内容要有自己的特点。这里所说的特点指的是网）所制作的网站内容要有自己的特点。这里所说的特点指的是网站的站的内容要有新意内容要有新意，否则所制作的站点将会淹没在茫茫的，否则所制作的站点将会淹没在茫茫的Internet大海里。大海里。（2）所制作的网站一定要）所制作的网站一定要便于维护和更新便于维护和更新。因为如果网站发布到网。因为如果网站发布到网上，上，Internet网络用户第一次浏览觉得还有新鲜感，过了一段时网络用户第一次浏览觉得还有新鲜感，过了一段时间再次访问此网站，而网站毫无变化，此网站就会因此而失去吸间再次访问此网站，而

28、网站毫无变化，此网站就会因此而失去吸引力。引力。（3）在）在Web页面上的页面上的颜色搭配，美术效果等等一定要合理颜色搭配，美术效果等等一定要合理。有些初。有些初学者所制做的网页采用深色背景和浅色文字，但由于网速的原因，学者所制做的网页采用深色背景和浅色文字，但由于网速的原因，在深色的背景还没有调入时，浅色的文字往往非常难以辩认。在深色的背景还没有调入时，浅色的文字往往非常难以辩认。（1）在制做的每一个）在制做的每一个Web网页上都应加上一个网页上都应加上一个“返回主页返回主页”的超级链接，的超级链接，这样能使这样能使Web网页构成一个环路。网页构成一个环路。（2）在制作）在制作Web网页时，

29、一个网页时，一个Web网页最好不要过长。如果某一个网页最好不要过长。如果某一个Web网网页内容很多，最好把它们分成多个，这样做的好处是不致于使页内容很多，最好把它们分成多个，这样做的好处是不致于使Web网页网页由于网络速度的问题，而影响用户的浏览。由于网络速度的问题，而影响用户的浏览。（3）在）在Web网页上适当地使用一些动画，增加网页的动感和趣味。网页上适当地使用一些动画，增加网页的动感和趣味。（4）在主页上还应加上一个计数器，以便能够了解目前已经有多少人访问）在主页上还应加上一个计数器，以便能够了解目前已经有多少人访问过网站。过网站。（5）在网站中还应有联系方式。如电话、通讯地址或）在网站

30、中还应有联系方式。如电话、通讯地址或E-mail地址以及联系地址以及联系人等等，这样可建立与浏览者联系和交流的桥梁。人等等，这样可建立与浏览者联系和交流的桥梁。（6）如果在）如果在Web网页中有比较大的图像，要想办法进行处理，加快网页显网页中有比较大的图像，要想办法进行处理，加快网页显示的速度。否则即使制做的示的速度。否则即使制做的Web网页很好看，用户也没有耐心等待整个网页很好看，用户也没有耐心等待整个图片下载完毕。图片下载完毕。1新建一个站点新建一个站点 2站点的基本操作站点的基本操作 1插入文字插入文字将网站放到将网站放到Web服务器上服务器上网点发布的基本步骤网点发布的基本步骤:1 申

31、请申请Web服务器空间服务器空间 （ 自建自建 、 ISP 、 免费）免费）2 提供网站信息提供网站信息 （Web地址、地址、IP地址、用户名及密码）地址、用户名及密码）3 上传文件上传文件1选择免费网页空间的原则选择免费网页空间的原则（1）首先要估计一下自己所制作的网站大致要多少存贮空间，然后）首先要估计一下自己所制作的网站大致要多少存贮空间，然后到相应的站点去申请。到相应的站点去申请。（2）所选择的网站附带的免费服务越多越好，最好能提供计数器、）所选择的网站附带的免费服务越多越好，最好能提供计数器、留言板、电子信箱等等。留言板、电子信箱等等。（3）所申请的网站最好支持）所申请的网站最好支持

32、ASP（动态服务网页）或动态服务网页）或PHP，并且还并且还可以外挂数据库，这样就可以按照自己的要求，亲自设计有一定可以外挂数据库，这样就可以按照自己的要求，亲自设计有一定特殊要求的反馈表单。特殊要求的反馈表单。（4）访问速度越快越好。要了解一下）访问速度越快越好。要了解一下ISP与与Internet的连接带宽（连的连接带宽（连接带宽越宽越好），因为这会影响到今后用户访问网站的速度。接带宽越宽越好），因为这会影响到今后用户访问网站的速度。（5）一定要选择能用）一定要选择能用FTP方式上传网页文件的站点，以便于今后的方式上传网页文件的站点，以便于今后的维护。维护。（6）稳定程度。最好选择那些信誉

33、度高的免费服务站点。否则自己）稳定程度。最好选择那些信誉度高的免费服务站点。否则自己辛辛苦苦制作的网站，未获任何事先通知，一夜之间就被清理得辛辛苦苦制作的网站，未获任何事先通知，一夜之间就被清理得干干净净。干干净净。2如何查找提供免费个人网页的站点如何查找提供免费个人网页的站点可以利用搜索引擎来查找提供免费个人网页的站点。例如，在浏览可以利用搜索引擎来查找提供免费个人网页的站点。例如，在浏览器的地址栏中输入器的地址栏中输入http:/ ”的顺序依次单击，就出现如图的顺序依次单击，就出现如图8-2所示的用搜狐查找到的提供免费网页空间的站点。所示的用搜狐查找到的提供免费网页空间的站点。3申请免费网

34、页空间申请免费网页空间下面以在下面以在我要安家我要安家申请一个免费网页空间为例来具体说明如何在申请一个免费网页空间为例来具体说明如何在Internet网上进行申请。网上进行申请。我要安家我要安家能提供能提供7天试用的免费网页空间，天试用的免费网页空间，申请过程的步骤如下：申请过程的步骤如下：（1）注册通行证）注册通行证 ，即注册成为，即注册成为我要安家我要安家的会员；的会员； （2）登录）登录我要安家我要安家；（3）在注册了用户名以后，并不能立刻得到提供的免费空间，还要）在注册了用户名以后，并不能立刻得到提供的免费空间，还要再次对再次对我要安家我要安家的空间进行申请。的空间进行申请。上传个人网

35、页就是把在本地计算机做好的网页传到已申请网页空间上传个人网页就是把在本地计算机做好的网页传到已申请网页空间的服务器上，这样即使网页的主人不开机，其它人也能看到此网的服务器上，这样即使网页的主人不开机，其它人也能看到此网页。用于上传的软件很多，这里以页。用于上传的软件很多，这里以CuteFTP为例来说明。为例来说明。CuteFTP软件在很多提供软件下载的网站都可以得到，它是一个软件在很多提供软件下载的网站都可以得到，它是一个功能丰富、性能稳定的功能丰富、性能稳定的FTP软件，它有很多实用的功能，软件，它有很多实用的功能， 假设用户已经在本地计算机上成功地安装了假设用户已经在本地计算机上成功地安装

36、了CuteFTP，那么就可以那么就可以开始一步一步地学习使用它了。开始一步一步地学习使用它了。 在上传网页文件时注意以下几个方面的问题：在上传网页文件时注意以下几个方面的问题：（1）设计的网站包含的）设计的网站包含的所有文件全部要上传所有文件全部要上传（包括图片文件等）。（包括图片文件等）。（2）网页文件在进行超级链接时一定要）网页文件在进行超级链接时一定要使用相对路径使用相对路径。（3）务必将个人网页的）务必将个人网页的主页文件名主页文件名设为设为ISP所指定的文件名，通常所指定的文件名，通常为为index.htm或或default.htm，具体是哪一个请仔细查阅具体是哪一个请仔细查阅ISP

37、的站点的站点说明，说明，ISP将以其作为默认主页。另外需要特别强调的是在给网将以其作为默认主页。另外需要特别强调的是在给网页、图片和动画文件起名时，最好全部用英文名字，否则如果用页、图片和动画文件起名时，最好全部用英文名字，否则如果用中文名，当把它发布到网上后，可能出现用户找不到该文件的错中文名，当把它发布到网上后，可能出现用户找不到该文件的错误。误。 在对网页进行更新和维护时，其操作步骤与上传网页的操作基本上在对网页进行更新和维护时，其操作步骤与上传网页的操作基本上完全相同，不同之处就是维护或更新网页时，只须上传那些修改完全相同，不同之处就是维护或更新网页时，只须上传那些修改过的网页文件，那

38、些没有变化的网页文件则无须重传。也可以删过的网页文件，那些没有变化的网页文件则无须重传。也可以删除那些不再需要的网页文件，以便节约存贮空间。此外，应该在除那些不再需要的网页文件，以便节约存贮空间。此外，应该在规定的期限内上传或更新网页，否则有的规定的期限内上传或更新网页，否则有的ISP会收回网页的帐号。会收回网页的帐号。还应该将新建的整个网页在自己的硬盘上做一个备份，以免在发还应该将新建的整个网页在自己的硬盘上做一个备份，以免在发生意外时可以重新上传。生意外时可以重新上传。在在Internet网络世界里，网站很多，如果不做自我宣传的话，恐怕辛网络世界里，网站很多，如果不做自我宣传的话，恐怕辛苦

39、制作的个人网站最终仍是无人知晓。究竟如何宣传自己的网站，苦制作的个人网站最终仍是无人知晓。究竟如何宣传自己的网站，才能提高访问率，下面介绍一种方法。才能提高访问率，下面介绍一种方法。一般在存放网页的服务商的网站上，会通过它的网站进行宣传，但一般在存放网页的服务商的网站上，会通过它的网站进行宣传，但这毕竟力量有限。所以最好的自荐方法就是在网上的一些这毕竟力量有限。所以最好的自荐方法就是在网上的一些搜索引搜索引擎上登记擎上登记，几乎所有的搜索引擎都允许访问者加入链接，如，几乎所有的搜索引擎都允许访问者加入链接，如yahoo!、搜狐、新浪等。另外要在自己主页中多加上一些方便搜搜狐、新浪等。另外要在自

40、己主页中多加上一些方便搜索引擎查找的索引擎查找的“关键字关键字”。1利用利用FTP上传文件发布主页上传文件发布主页2利用利用FrontPage自带的发布功能发布主页自带的发布功能发布主页3在线上传在线上传 Windows 2000操作系统操作系统 1安装安装IIS 5.07.5 7.5 网页脚本语言网页脚本语言JavaScriptJavaScript什么是脚本语言什么是脚本语言 脚本语言是一种简单的描术性语言，它是针对脚本语言是一种简单的描术性语言，它是针对HTML语言不能很语言不能很好地解决动态交互这个缺点而引入的，它能对好地解决动态交互这个缺点而引入的，它能对Web页面中的元素页面中的元素

41、进行控制。一般来说，脚本语言是通过一个进行控制。一般来说，脚本语言是通过一个的标记嵌入到的标记嵌入到HTML文档中，并可以被浏览器解释执行，插入的脚本语言就如文档中，并可以被浏览器解释执行，插入的脚本语言就如同子程序一样被同子程序一样被HTML元素所调用，成为元素所调用，成为HTML的一部分。目前的一部分。目前比较流行的脚本语言有网景公司（比较流行的脚本语言有网景公司（Netscope）的）的JavaScript和微软和微软公司（公司（Microsoft）的）的VBScript。 1、简单、易学、易用；、简单、易学、易用； 2、跨平台；、跨平台；IE、Navigator 3、符合、符合ECMA

42、（欧洲计算机制造协会）标准，可移植；（欧洲计算机制造协会）标准，可移植； 4、事件驱动式的脚本程序设计思想；、事件驱动式的脚本程序设计思想； 5、动态、交互式的操作方式。、动态、交互式的操作方式。 1、交互式操作；、交互式操作； 2、表单验证；、表单验证； 3、网页特效；、网页特效； 4、Web游戏游戏 5、服务器脚本开发等。、服务器脚本开发等。JavaScriptJavaScript的编程工作复杂与否和的编程工作复杂与否和HTMLHTML文档所提供的功能大小密切文档所提供的功能大小密切相关，下面用一个简单的例子来介绍它的编程特点相关，下面用一个简单的例子来介绍它的编程特点 。 我的第一个主页

43、我的第一个主页! ! document.write(Hellodocument.write(Hello World!); World!); 1 1、JavaScriptJavaScript区分大小写；区分大小写； 2 2、JavaScriptJavaScript脚本程序须嵌入在脚本程序须嵌入在HTMLHTML文件中；文件中； 3 3、JavaScriptJavaScript脚本程序中不能包含脚本程序中不能包含HTMLHTML标记代码；（双引标记代码；（双引号）号） 4 4、每行写一条脚本语句；、每行写一条脚本语句； 5 5、语句末尾可以加分号；、语句末尾可以加分号； 6 6、JavaScrip

44、tJavaScript脚本程序可以独立保存为一个外部文件，但脚本程序可以独立保存为一个外部文件，但其中不能包含其中不能包含标签。标签。 JavaScript源代码被嵌在一个源代码被嵌在一个HTML文档中，而且它可以出现在文档文档中，而且它可以出现在文档头部（头部（HEAD节）和文档体部节）和文档体部 (BODY节节 )。SCRIPT标记的一般标记的一般格式为：格式为： . 或或 . . SCRIPT标记可声明一个脚本程序，标记可声明一个脚本程序，LANGUAGE属性声明该脚属性声明该脚本是一个用本是一个用JavaScript语言编写的脚本。在语言编写的脚本。在和和之间的任何内容都视为脚本语句，

45、会被浏览器解释执行。在之间的任何内容都视为脚本语句，会被浏览器解释执行。在JavaScript脚本中，用脚本中，用“/”作为行的注释标注。作为行的注释标注。JavaScript有以下几种基本的数据类型：有以下几种基本的数据类型：（1）数字类型）数字类型如如: 34，3.14表示为十进制数；表示为十进制数；034表示为八进制数，用十进行表示其值为表示为八进制数，用十进行表示其值为28；0 x34表示为十六进制数，用十进行表示其值为表示为十六进制数，用十进行表示其值为52。（2）字符串类型）字符串类型如：如：“Hello!”；（3）逻辑值类型）逻辑值类型其取值仅可能是其取值仅可能是“真真”或或“假

46、假”，用，用 True或或False来表示。来表示。 （4）空值）空值当你定义一个变量后未赋初值时，则该变量为空值。例如：当你定义一个变量后未赋初值时，则该变量为空值。例如： var ch1; /此时此时ch1就为空值，它不属于任何一种数据类型。就为空值，它不属于任何一种数据类型。 它的定义要求与它的定义要求与C C语言相仿，例如以字母或下划线开始语言相仿，例如以字母或下划线开始 ，变量不能是，变量不能是保留字（如保留字（如intint，varvar等），不能使用数字作为变量名的第一个字母等等。等），不能使用数字作为变量名的第一个字母等等。但它的定义方法与但它的定义方法与C C语言有很大的差别

47、。语言有很大的差别。 C C语言的变量定义格式为：语言的变量定义格式为： intint a=1; float f1=3.14 a=1; float f1=3.14 而而JavaScriptJavaScript的变量定义格式的变量定义格式: :VarVar 变量名；变量名； 或者或者 VarVar 变量名变量名= =初始值；初始值； JavaScript JavaScript 并不是在定义变量时来说明变量的数据类型，而是并不是在定义变量时来说明变量的数据类型，而是在在给变量赋初始值时来确定该变量的数据类型给变量赋初始值时来确定该变量的数据类型；JavaScriptJavaScript对字母的大小

48、对字母的大小写是敏感的。如写是敏感的。如VarVar my my； VarVar My My，JavaScriptJavaScript认为这是两个不同的变认为这是两个不同的变量。量。 说明：在使用变量之前，最好对每个变量使用关键字说明：在使用变量之前，最好对每个变量使用关键字VARVAR进行变量进行变量声明，防止发生变量的有效区域冲突的问题。声明，防止发生变量的有效区域冲突的问题。全局变量：省略全局变量：省略varvar，或在函数外声明，或在函数外声明 局部变量：在函数内声明局部变量：在函数内声明 全局变量可在整个脚本中被使用，可在不同的窗口中相互引用（指全局变量可在整个脚本中被使用，可在不同

49、的窗口中相互引用（指定窗口名）定窗口名） 例如：例如：varvar langJSlangJS = JavaScript; / = JavaScript; /langJSlangJS是全局变量是全局变量test(); test(); function test() function test() varvar langVBSlangVBS = VBScript; / = VBScript; /langVBSlangVBS是局部变量是局部变量 document.writedocument.write( + ( + langJSlangJS);); document.writedocument.wr

50、ite( + ( + langVBSlangVBS); ); document.writedocument.write( + ( + langJSlangJS););document.writedocument.write( + ( + langVBSlangVBS););变量作用域变量作用域 JavaScriptJavaScript常量分为常量分为4 4类：整数、浮点数、布尔值和字符串。类：整数、浮点数、布尔值和字符串。（1 1）整数常量）整数常量在在JavaScriptJavaScript中，整数可以表示为：中，整数可以表示为：十进制数：即一般的十进制整数，它前面不可有前导十进制数：即一般

51、的十进制整数，它前面不可有前导0 0。例：。例：7575。八进制数：以八进制数：以0 0为前导，表示八进制数。例：为前导，表示八进制数。例：075075。1616进制数：以进制数：以0 x0 x为前导，表示为前导，表示1616进制数。例：进制数。例：0 x0F0 x0F。（2 2）浮点数常量）浮点数常量浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表示。示。例如：例如：7.543437.54343，3.0e9 3.0e9 （ 3 3）布尔型常量）布尔型常量布尔型常量只有两个值：布尔型常量只有两个值：True True 和和 F

52、alseFalse。（4 4）字符串常量）字符串常量字符串常量是用单引号或双引号括起来的字符串常量是用单引号或双引号括起来的0 0个或多个字符组成。个或多个字符组成。例如：例如：“ “ Test String”Test String”，”12345”12345” 转义字符转义字符意义意义bb退格（退格（BackspaceBackspace）ff换页（换页（Form feedForm feed）nn换行（换行（New lineNew line）rr返回（返回（Carriage returnCarriage return）tt制表符（制表符（TabTab）单引号（单引号（ ）双引号（双引号（ ）反

53、斜线（反斜线（ ）（5 5）含转义字符的字符串常量）含转义字符的字符串常量document.writedocument.write(我爱我爱JavaScript) JavaScript) document.writedocument.write(文件文件在在c:windowsc:windows下下) ) document.alertdocument.alert(密码密码不对不对nn请重新输入！请重新输入！) ) 在在JavaScriptJavaScript的语法规则中，每一条语句的最后必须使用一的语法规则中，每一条语句的最后必须使用一个分号，例如：个分号，例如：document.write(“

54、kkkdocument.write(“kkk”); /”); /此语句的功此语句的功能在浏览器中输出能在浏览器中输出“kkkkkk”字符串字符串 在编写在编写JavaScriptJavaScript程序时，一定要有一个良好的习惯，最好程序时，一定要有一个良好的习惯，最好是一行写一条语句，如果使用复合语句块时，注意把复合语句块是一行写一条语句，如果使用复合语句块时，注意把复合语句块用大括号括起来，并且根据每一句作用范围的不同，应有一定的用大括号括起来，并且根据每一句作用范围的不同，应有一定的缩进。另外一个好的编程风格是要适当加一些注释。缩进。另外一个好的编程风格是要适当加一些注释。SCRIPT

55、LANGUAGE=JavaScriptSCRIPT LANGUAGE=JavaScript varvar SUM , P , i; SUM , P , i;SUM=0;SUM=0;/初始化累加和初始化累加和P=1;P=1; FOR (i=1; i70; i+) FOR (i=1; i70; i+) SUM+=i;/ SUM+=i;/求累加和求累加和 P P* *=i;=i; /SCRIPT/SCRIPTJavaScriptJavaScript拥有一般编程语言（如语言）的运算符，包括算术运拥有一般编程语言（如语言）的运算符，包括算术运算符、比较运算符、连接运算符算符、比较运算符、连接运算符 （1

56、 1）算术运算符）算术运算符用于连接运算表达式的各种算术运算符如表用于连接运算表达式的各种算术运算符如表1 1所示。所示。运算符运算符运算符定义运算符定义举例举例说明说明+加法符号加法符号X=A+B-减法符号减法符号X=A-B*乘法符号乘法符号X=A*B/除法符号除法符号X=A/B%取模符号取模符号X=A%BX等于除以所得的余数等于除以所得的余数+ 加加A+A的内容加的内容加1-减减1A-A的内容减的内容减1（2 2）位运算符）位运算符 位操作运算符对两个表达式相同位置上的位进行位对位运算。位操作运算符对两个表达式相同位置上的位进行位对位运算。JavaScriptJavaScript支持的位操

57、作运算符如表所示。支持的位操作运算符如表所示。运算符运算符运算符定义运算符定义举例举例说明说明 按位求反按位求反X=A 左移左移X=B 右移右移X=BA(A为移动次数，右边移入为移动次数，右边移入0)无符号右移无符号右移X=BA (A为移动次数，右边移入符号位为移动次数，右边移入符号位)& 位位“与与”X=B & A 位位“异或异或”X=B A | 位位“或或”X=B | A （3 3）复合赋值运算符）复合赋值运算符复合赋值运算符执行的是一个表达式的运算。在复合赋值运算符执行的是一个表达式的运算。在JavaScriptJavaScript中，合中，合法的复合赋值运算符如表法的复合赋值运算符如表

58、3 3所示。所示。运算符运算符运算符定义运算符定义举例举例说明说明+= += 加加X+=AX+=AX=X+AX=X+A-= -= 减减 X-=AX-=AX=X-AX=X-A* *= = 乘乘 X X* *=A=AX=XX=X* *A A/= /= 除除 X/=AX/=AX=X/AX=X/A%= %= 模运算模运算 X%=AX%=AX=X%AX=X%A= = 左移左移X=AX=AX=XAX=X= = 右移右移 X=A X=A X=XA X=XA = = 无符号右移无符号右移 X=AX=AX=XAX=XA&= &= 位位“与与”X&=A X&=A X=X&A X=X&A = = 位位“异或异或”X

59、= A X= A X=XA X=XA |= |= 位位“或或”X|=A X|=A X=X|A X=X|A （4 4）比较运算符）比较运算符比较运算符用于比较两个对象之间的相互关系，返回值为比较运算符用于比较两个对象之间的相互关系，返回值为TrueTrue和和FalseFalse。各种比较运算符如表。各种比较运算符如表8-48-4所示。所示。运算符运算符运算符定义运算符定义举例举例说明说明 =等于等于A=BA等于等于B时为真时为真 大于大于AB A大于大于B时为真时为真 小于小于A=大于等于大于等于A=BA大于等于大于等于B时为真时为真 =小于等于小于等于A=BA小于小于 等于等于B时为真时为真

60、 ? :条件选择条件选择 E？A：BE为真时选为真时选A，否则选否则选B（5）逻辑运算符）逻辑运算符逻辑运算符返回逻辑运算符返回True和和False，其主要作用是连接条件表达式，其主要作用是连接条件表达式，表示各条件间的逻辑关系。各种逻辑运算符如表表示各条件间的逻辑关系。各种逻辑运算符如表5所示。所示。运算符运算符运算符定义运算符定义举例举例说明说明& & 逻辑逻辑“与与”A & BA & BA A与与B B同时为同时为TrueTrue时，结果为时，结果为TrueTrue! ! 逻辑逻辑“非非”!A !A 如如A A原值为原值为True,True,结果为结果为FalseFalse| | 逻辑