工信版（中职）Internet应用第5章教学课件.ppt

《工信版（中职）Internet应用第5章教学课件.ppt》由会员分享，可在线阅读，更多相关《工信版（中职）Internet应用第5章教学课件.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Internet应用第5章教学课件第第5章网页制作概述章网页制作概述5.1HTML基础基础5.2常用的常用的HTML标记标记5.3结识网页制作工具结识网页制作工具5.4网站制作流程网站制作流程5.1HTML基础基础5.1.1 HTML的基本概念的基本概念HTML称为超文本标记语言。使用称为超文本标记语言。使用HTML编写的超文本文档编写的超文本文档称为称为HTML文档。任何网页页面都是以文档。任何网页页面都是以HTML语言为核心和语言为核心和基础的。在一个标准的网站页面上，如果单击浏览器窗口菜基础的。在一个标准的网站页面上，如果单击浏览器窗口菜单栏中的单栏中的“查看查看”菜单，选

2、择菜单，选择“源文件源文件”选项，打开的即是选项，打开的即是网页页面的源代码，如网页页面的源代码，如图图5-1所示。该源代码就是使用所示。该源代码就是使用HTML语言编写的。语言编写的。5.1.2 HTML网页的编写方法网页的编写方法1.HTML网页文件的命名规则网页文件的命名规则(1)允许使用汉字、英文字母、数字和下划线，不能包含空格允许使用汉字、英文字母、数字和下划线，不能包含空格与特殊符号。与特殊符号。(2)名称区分大小写。名称区分大小写。(3)网站主页文件名一般为网站主页文件名一般为index.Htm或或index.Html.下一页 返回5.1HTML基础基础2.使用使用HTML编写网

3、页编写网页使用使用HTML编写网页的方法有以下几种。编写网页的方法有以下几种。(1)手工编写。手工编写。(2)使用可视化的使用可视化的HTML编辑软件，这是最方便的编写方法。编辑软件，这是最方便的编写方法。(3)通过编写程序，由通过编写程序，由Web服务器实时、动态地生成网页。这服务器实时、动态地生成网页。这属于动态网页的制作方法。属于动态网页的制作方法。使用使用HTML编写网页的操作步骤如下。编写网页的操作步骤如下。(1)生成网页页面。打开生成网页页面。打开“开始开始”菜单，选择菜单，选择“程序程序”“附附件件”“记事本记事本”命令，启动命令，启动Windows系统中的系统中的“记事本记事本

4、”程程序。序。也可以启动也可以启动Dreamweaver，单击文档工具栏中的，单击文档工具栏中的“代码视图代码视图”按钮，显示按钮，显示“代码视图代码视图”窗口。窗口。上一页 下一页 返回5.1HTML基础基础(2)在打开的记事本中输入在打开的记事本中输入图图5-2所示的所示的HTML源代码。源代码。(3)选择选择“文件文件”菜单中的菜单中的“保存保存”选项，在弹出的选项，在弹出的“另存为另存为”对话枢中选择存放位置并输入网页文件名。对话枢中选择存放位置并输入网页文件名。(4)双击打开双击打开“网页网页.htm”文件，显示如文件，显示如图图5-3所示的网页，所示的网页，浏览器标题栏显示浏览器标

5、题栏显示“学习使用学习使用HTML编写网页编写网页”，浏览器窗，浏览器窗口显示口显示“学习学习HTML网页设计第一课网页设计第一课”。3.HTML网页的结构网页的结构(1)网页源代码的基本结构如下网页源代码的基本结构如下:上一页 下一页 返回5.1HTML基础基础(2)元素是元素是HTML语言的基本组成部分，一般成对出现，每一语言的基本组成部分，一般成对出现，每一对元素都有一个开始标记与一个结束标记。对元素都有一个开始标记与一个结束标记。(3)与与标记分别表示标记分别表示HTML文档的开始与结束。文档的开始与结束。任何任何HTML文档都被包含在一对文档都被包含在一对与与标记中。标记中。(4)与

6、与标记之间是网页的头部信息，其中标记之间是网页的头部信息，其中与与标记之间指定了网页的标题。标记之间指定了网页的标题。(5)与与标记之间是网页的主体，在网页中看标记之间是网页的主体，在网页中看到的页面标识一般都包含在到的页面标识一般都包含在与与之间。之间。(6)HTML元素具有自己的相关属性，每一个属性可以赋予元素具有自己的相关属性，每一个属性可以赋予一定的值。元素属性应放在元素的开始标记内，并与元素名一定的值。元素属性应放在元素的开始标记内，并与元素名之间有一个空格分隔，文本属性值应使用双引号括起来。之间有一个空格分隔，文本属性值应使用双引号括起来。上一页 下一页 返回5.1HTML基础基础

7、(7)书写书写HTML源代码时，标记字符不区分大小写，标记之间源代码时，标记字符不区分大小写，标记之间空格的多少不影响网页的显示。空格的多少不影响网页的显示。上一页 返回5.2常用的常用的HTML标记标记5.2.1 HTML的头部标记与主体标记的头部标记与主体标记HTML源代码包括头部和主体两部分。分别对应源代码包括头部和主体两部分。分别对应标标志和志和标志。标志。在在HTML中，中，和和是两个非常重要的标志，是两个非常重要的标志，这是因为所有的这是因为所有的HTML文档都分为两个部分，即文档头和文文档都分为两个部分，即文档头和文档体。使用档体。使用和和标志将文档头包围起来标志将文档头包围起来

8、;使使用用和和标志将文档体包围起来。这样，浏览标志将文档体包围起来。这样，浏览器才能正确地解释器才能正确地解释HTML文档。文档。这里再次提醒读者，这里再次提醒读者，HTML的标志是成对出现的，成对出现的标志是成对出现的，成对出现的标志间的唯一区别是后一个标志比前一个标志多了一个的标志间的唯一区别是后一个标志比前一个标志多了一个“/”符。符。)上一页 下一页 返回5.2常用的常用的HTML标记标记5.2.2标志标志通常情况下，一个通常情况下，一个HTML文档包括以下代码文档包括以下代码:文档标题文档标题将这段代码保存为将这段代码保存为“Templet.htm,读者在书写读者在书写HTML文档文

9、档时直接加载该模板，从而就可以省去每次都重复输入这些必时直接加载该模板，从而就可以省去每次都重复输入这些必需的标志了。使用浏览器打开该文件，如需的标志了。使用浏览器打开该文件，如图图5-4所示。所示。上一页 下一页 返回5.2常用的常用的HTML标记标记5.2.3 HTML的文本标记与链接标记的文本标记与链接标记文本标记分为文本的基本设置与文本的修饰设置。文本标记分为文本的基本设置与文本的修饰设置。1.文本属性的设置文本属性的设置face属性用于设置文本的字体，属性用于设置文本的字体，color属性用于设置文本的颜属性用于设置文本的颜色，色，Size属性用于设置文本的字号。属性用于设置文本的字

10、号。2.文本的修饰设置文本的修饰设置适当地应用文本修饰可以增加网页的美观效果。适当地应用文本修饰可以增加网页的美观效果。1)标题设置标题设置属性用于设置标题的字号大小。属性用于设置标题的字号大小。2)文本的修饰文本的修饰上一页 下一页 返回5.2常用的常用的HTML标记标记3)代码的注释代码的注释可以在可以在HTML文档中插人注释，注释内容在浏览器窗口中不文档中插人注释，注释内容在浏览器窗口中不显示。显示。HTML注释的格式如下注释的格式如下:3.段落标记段落标记1)分段与分行分段与分行 HTML使用使用标记实现段落分段标记实现段落分段;使用使用标记实现换行，标记实现换行，这种换行与浏览器的自

11、动换行基本相同。这种换行与浏览器的自动换行基本相同。标记不是成对标记不是成对出现的。出现的。上一页 下一页 返回5.2常用的常用的HTML标记标记2)文本的对齐文本的对齐HTML使用使用align属性实现文本的对齐。属性实现文本的对齐。标记作为文本的标记作为文本的分区标记，使用方法与分区标记，使用方法与标记相似。此外，使用标记相似。此外，使用标标记也可以完成文本的居中对齐。记也可以完成文本的居中对齐。标记的功能是使所标记的功能是使所标记的字符居中，其作用与使用标记的字符居中，其作用与使用标记中的标记中的align=“center”类似。类似。4.水平线水平线在网页中，可以使用水平线分隔文本。水

12、平线的设置方法如在网页中，可以使用水平线分隔文本。水平线的设置方法如下。下。(1):用于设定线宽。用于设定线宽。(2):用于设定线长。用于设定线长。上一页 下一页 返回5.2常用的常用的HTML标记标记(3):用于设定对齐方式用于设定对齐方式(#为为left或或right)。(4):用于设定线的颜色。用于设定线的颜色。5.列表标记列表标记列表是列表是HTML网页中重要的元素，列表的作用相当于文字处网页中重要的元素，列表的作用相当于文字处理软件中的理软件中的“项目符号与编号项目符号与编号”。HTML规定了多种列表元规定了多种列表元素。列表分为无序列表和有序列表。素。列表分为无序列表和有序列表。1

13、)无序列表无序列表无序列表是由无序列表是由和和元素定义的，它的默认符号是圆点。元素定义的，它的默认符号是圆点。其中，其中，元素包含元素包含type属性，通过定义不同的属性，通过定义不同的type属性可属性可以改变列表的项目符号。以改变列表的项目符号。type属性包括属性包括:disc圆点圆点)、circle圆圆圈圈)、square(方块方块)。上一页 下一页 返回5.2常用的常用的HTML标记标记2)有序列表有序列表有序列表是由有序列表是由和和元素定义的。其中元素定义的。其中元素也包含元素也包含type属性，属性，type属性值有属性值有1,A,a,I,i等。等。元素还可以定义元素还可以定义列

14、表的起始编号，如果希望列表的第一个编号为列表的起始编号，如果希望列表的第一个编号为5，而不是，而不是1，则需要定义，则需要定义元素的元素的start属性。属性。6.链接标记链接标记超链接是整个超链接是整个WWW应用的核心和基础。如果没有超链接，应用的核心和基础。如果没有超链接，那么所有的那么所有的www应用将不复存在。所以，使用超链接具有重应用将不复存在。所以，使用超链接具有重要的意义。要的意义。1)基本链接基本链接上一页 下一页 返回5.2常用的常用的HTML标记标记超链接是由锚元素超链接是由锚元素定义的。定义的。元素包含元素包含href属性与属性与target属性。属性。href属性的值是

15、一个属性的值是一个URL地址或地址或E-mail地址地址;target属属性控制链接的网页在新的浏览器窗口打开。性控制链接的网页在新的浏览器窗口打开。2)锚点链接锚点链接所谓锚点是指网页中的某个位置，单击该位置可实现同一个所谓锚点是指网页中的某个位置，单击该位置可实现同一个网页之内的链接。网页之内的链接。在需要跳转的位置输入如下代码在需要跳转的位置输入如下代码:设置锚点设置锚点al在制作链接的位置输入如下代码在制作链接的位置输入如下代码:链接本页锚点链接本页锚点al 上一页 下一页 返回5.2常用的常用的HTML标记标记5.2.4 HTML的图像标记的图像标记1.图像标记图像标记引用图像必须使

16、用引用图像必须使用标记，标记，标记包含标记包含src属性。属性。src的属性值是所引用图像的的属性值是所引用图像的URL地址，该地址既可以是绝对地地址，该地址既可以是绝对地址，也可以是相对地址。址，也可以是相对地址。2.设置图像标记的属性设置图像标记的属性通过图像属性的设置，可以调整或完善图像在浏览器中的显通过图像属性的设置，可以调整或完善图像在浏览器中的显示。示。1)设置图像的替代文本设置图像的替代文本所谓图像的替代文本是指所谓图像的替代文本是指:当图像不能正常显示时，在图像的当图像不能正常显示时，在图像的所在位置显示一段提示文本，或当鼠标指针移至图像所在位所在位置显示一段提示文本，或当鼠标

17、指针移至图像所在位置时显示替代文本。置时显示替代文本。上一页 下一页 返回5.2常用的常用的HTML标记标记2)设置图像的显示大小设置图像的显示大小可以指定一幅图像在浏览器窗口中显示的大小。可以指定一幅图像在浏览器窗口中显示的大小。3)设置图像的边框设置图像的边框可以为一幅图像加一个边枢以突出显示可以为一幅图像加一个边枢以突出显示.4)设置图像的对齐方式设置图像的对齐方式图片的对齐方式是相对于页面或单元格的。图片的对齐方式是相对于页面或单元格的。(1)定义水平对齐方式。定义水平对齐方式。上一页 下一页 返回5.2常用的常用的HTML标记标记(2)定义垂直对齐方式。定义垂直对齐方式。5)定义图像

18、的间距定义图像的间距显示图像时，应与左右文本之间有一定的间距。定义图像间显示图像时，应与左右文本之间有一定的间距。定义图像间距的方法如下距的方法如下:其中，其中，hspace属性定义水平间距，属性定义水平间距，vspace属性定义垂直间距，属性定义垂直间距，单位是像素。单位是像素。上一页 下一页 返回5.2常用的常用的HTML标记标记3.图像映射图像映射所谓图像映射是指，一幅图像上的不同位置被设置了不同的所谓图像映射是指，一幅图像上的不同位置被设置了不同的超链接，单击图像的不同位置时将打开不同的超链接目标。超链接，单击图像的不同位置时将打开不同的超链接目标。图像映射是由图像映射是由标记定义的。

19、标记定义的。标记包含标记包含name属性，属性，用于为图像映射命名，该名称将被用于为图像映射命名，该名称将被标记的标记的usemap属性属性所引用。因此，图像映射实际上是对所引用。因此，图像映射实际上是对所定义映射的一所定义映射的一个引用。个引用。标记可以定义标记可以定义3种形状的映射，即种形状的映射，即circle圆形圆形),rect(方形方形)、poly(多边形多边形)。5.2.5 HTML的表格标记的表格标记1.表格的编写方法表格的编写方法表格一般用于网页排版，掌握表格的超文本编写方法对于学表格一般用于网页排版，掌握表格的超文本编写方法对于学好好Dreamweave:很有帮助。很有帮助。

20、上一页 下一页 返回5.2常用的常用的HTML标记标记设计一个完整的表格，至少需要以下设计一个完整的表格，至少需要以下3个标记。个标记。(1)元素元素:用于定义一个表格。这是每一个表格必需用于定义一个表格。这是每一个表格必需的元素，每一个表格只有一对的元素，每一个表格只有一对和和标记，但一标记，但一张网页中可以包含多个表格。张网页中可以包含多个表格。(2)元素元素:用于定义表格的行。一个表格可以有多个行，用于定义表格的行。一个表格可以有多个行，因此，对于一个表格来说因此，对于一个表格来说不是唯一的。不是唯一的。(3)元素元素:用于定义一个表格单元。表格的每行可以有用于定义一个表格单元。表格的每

21、行可以有不同数量的单元格，在不同数量的单元格，在和和之间，将出现表格中每一之间，将出现表格中每一个单元格的具体内容。个单元格的具体内容。需要注意的是，上述需要注意的是，上述3个元素必须配对使用，缺少任何一个元个元素必须配对使用，缺少任何一个元素，都无法定义出一个表格。素，都无法定义出一个表格。上一页 下一页 返回5.2常用的常用的HTML标记标记2.表格的属性表格的属性1)表头表头标记用于设置表头。标记用于设置表头。2)表格的外观表格的外观表格的外观包括下列属性。表格的外观包括下列属性。(1)width属性属性:指定表格或某一个单元格的宽度，单位可以指定表格或某一个单元格的宽度，单位可以是百分

22、比或像素。是百分比或像素。(2)height属性属性:指定表格或某一个单元格的高度，单位可以指定表格或某一个单元格的高度，单位可以是百分比或像素。是百分比或像素。(3)borde:属性属性:指定表格边线的粗细。指定表格边线的粗细。上一页 下一页 返回5.2常用的常用的HTML标记标记 (4)bordercolor属性属性:指定表格或某一个单元格的边枢颜色。指定表格或某一个单元格的边枢颜色。(5)bordercolorlight属性属性:指定亮边枢的颜色。指定亮边枢的颜色。(6)bordercolordark属性属性:指定暗边枢的颜色。指定暗边枢的颜色。(7)bgcolor属性属性:指定表格或某

23、一个单元格的背景颜色。指定表格或某一个单元格的背景颜色。(8)background属性属性:指定表格或某一个单元格的背景图片，指定表格或某一个单元格的背景图片，其属性值是一个其属性值是一个URL地址。地址。3)表格的间距表格的间距表格的间距包括下列属性。表格的间距包括下列属性。(1)cellspacing属性属性:用于设置单元格间距。单元格间距是指用于设置单元格间距。单元格间距是指单元格之间的距离。单元格之间的距离。上一页 下一页 返回5.2常用的常用的HTML标记标记(2)cellpadding属性属性:用于设置单元格边距。单元格边距是指用于设置单元格边距。单元格边距是指单元格内部文字与边枢

24、之间的距离。单元格内部文字与边枢之间的距离。4)表格的单元格合并表格的单元格合并表格中的某些单元格需要占据多行或多列，称为表格的跨行表格中的某些单元格需要占据多行或多列，称为表格的跨行与跨列。它包括下列属性。与跨列。它包括下列属性。(1)colspan属性属性:用于设置当前单元格跨越几列。用于设置当前单元格跨越几列。(2)rowspan属性属性:用于设置当前单元格跨越几行。用于设置当前单元格跨越几行。上一页 返回5.3结识网页制作工具结识网页制作工具过去的网页一般是由专业人员利用过去的网页一般是由专业人员利用HTML语言编写实现的。语言编写实现的。目前，已出现多种可视化程度很高的网页制作工具，

25、不需要目前，已出现多种可视化程度很高的网页制作工具，不需要掌握专业的网页制作技术也能创作出富有特色、动感十足的掌握专业的网页制作技术也能创作出富有特色、动感十足的网页。网页。5.3.1网页编辑工具网页编辑工具1.DreamweaverDreamweave:是网页制作工具，它使用所见即所得的界面，是网页制作工具，它使用所见即所得的界面，亦有亦有HTML编辑的功能。编辑的功能。Dreamweave:支持支持ActiveX,JavaScript,Java,Flash,ShockWave等，而且它还支持动态等，而且它还支持动态HTML(Dynamic HTML)的设计，使页面在没有安装插件的的设计，使

26、页面在没有安装插件的情况下也可以在情况下也可以在Netscape和和IE浏览器中正确地显示页面的动浏览器中正确地显示页面的动画，同时它还提供了自动更新页面信息的功能。画，同时它还提供了自动更新页面信息的功能。下一页 返回5.3结识网页制作工具结识网页制作工具Dreamweave:的开放式设计是其最显著的特点，它使任何人的开放式设计是其最显著的特点，它使任何人都可以轻易扩展它的功能。都可以轻易扩展它的功能。2.FrontPageFrontPage是微软是微软Office系列软件之一，继承了系列软件之一，继承了Office系列软件系列软件的界面通用、操作简单等特点，用户可以像在的界面通用、操作简单

27、等特点，用户可以像在Word中一样直中一样直接进行编辑，编辑的内容也将由接进行编辑，编辑的内容也将由FrontPage自动生成自动生成HTML网网页代码。因此，页代码。因此，FrontPage一个很大的好处就是与一个很大的好处就是与Office系列系列软件的一致性，特别适合初学者。但软件的一致性，特别适合初学者。但FrontPage也存在部分缺也存在部分缺点，如兼容性差、生成的垃圾代码多、对动态网页支持差等。点，如兼容性差、生成的垃圾代码多、对动态网页支持差等。上一页 下一页 返回5.3结识网页制作工具结识网页制作工具 5.3.2网页图像与动画制作工具网页图像与动画制作工具现在的网页通常具有丰

28、富多彩的图像和动画。对于网页中的现在的网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，既要求质量高同时还要求文件所占存储空间小。图像和动画，既要求质量高同时还要求文件所占存储空间小。1.FlashFlash是是Macromedia公司专门为制作网页而设计的一款交互性公司专门为制作网页而设计的一款交互性矢量动画设计软件。网页设计者可以使用该软件设计各种动矢量动画设计软件。网页设计者可以使用该软件设计各种动态态Logo(商标、图案商标、图案)、动画、导航条，还可带有动感音乐，、动画、导航条，还可带有动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而以及其他多媒体的各项功能。由

29、于矢量图形不会因为缩放而导致影像失真，因此在导致影像失真，因此在Web上应用广泛。上应用广泛。上一页 下一页 返回5.3结识网页制作工具结识网页制作工具2.FireworksFireworks是是Macromedia公司专门设计的公司专门设计的Web图形工具软件，图形工具软件，它可以用较少的步骤生成较小但质量很高的它可以用较少的步骤生成较小但质量很高的JPEG和和GIF图像，图像，并且这些图像可以直接用于网页上。并且这些图像可以直接用于网页上。Fireworks是是Web图形工图形工具的首选软件。具的首选软件。3.PhotoshopPhotoshop是由是由Adobe公司开发的著名图形图像处理

30、软件。它公司开发的著名图形图像处理软件。它能够实现各种专业化的图像处理，是专业图像创作的首选软能够实现各种专业化的图像处理，是专业图像创作的首选软件。以上软件能相互无缝合作。通常网页制作的顺序，是先件。以上软件能相互无缝合作。通常网页制作的顺序，是先在在Firework中绘制主页图片，然后进行切片，再将切片导出中绘制主页图片，然后进行切片，再将切片导出到到Dreamweaver中，在中，在Dreamweaver 中编辑修改，添加链接，中编辑修改，添加链接，最后再导人用最后再导人用Flash制作的动画。制作的动画。上一页 返回5.4网站制作流程网站制作流程网页的功能强大，内容丰富。做一个网页是简

31、单的，但要做网页的功能强大，内容丰富。做一个网页是简单的，但要做好一个网站则是非常复杂、困难的工作。开发一个优秀的网好一个网站则是非常复杂、困难的工作。开发一个优秀的网站并不能随心所欲，必须遵循一定的工作流程，网站制作流站并不能随心所欲，必须遵循一定的工作流程，网站制作流程一般分为程一般分为3个阶段，如个阶段，如图图5-22所示。所示。5.4.1网站规划网站规划1.确定网站的主题与名称确定网站的主题与名称网站主题是指建立的网站所要包含的主要内容。例如，旅游、网站主题是指建立的网站所要包含的主要内容。例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。其中每一大娱乐休闲、体育、新闻、教育、医疗

32、、时尚等。其中每一大类又可进一步细化为若干小类。一般来说，确定网站主题应类又可进一步细化为若干小类。一般来说，确定网站主题应遵循以下原则。遵循以下原则。(1)主题鲜明。一个网站必须有一个明确的主题，在主题范主题鲜明。一个网站必须有一个明确的主题，在主题范围内做到内容全而精。围内做到内容全而精。下一页 返回5.4网站制作流程网站制作流程(2)明确设立网站的目的。明确设立网站的目的。(3)体现个性。把自己的兴趣、爱好尽情地发挥出来，突出自体现个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，创建出具有自己特色的网站。己的个性，创建出具有自己特色的网站。在个人主页中，网站的名称起着很重要的作用

33、，它在很大程在个人主页中，网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须有概括性、度上决定了整个网站的定位。一个好的名称必须有概括性、简洁、有特色、容易记，还要符合自己主页的主题和风格。简洁、有特色、容易记，还要符合自己主页的主题和风格。2.搜集材料搜集材料确定网站主题后，要围绕主题搜集材料，作为自己制作网页确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对图书、报纸、光盘、多媒体上获得，也可以从网上搜集

34、。对搜集到的材料应去粗取精，去伪存真。搜集到的材料应去粗取精，去伪存真。上一页 下一页 返回5.4网站制作流程网站制作流程3.规划网站规划网站规划网站就像设计师设计大楼一样，只有图纸设计好了，才规划网站就像设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。规划网站时，首先应把网站的内容能建成一座漂亮的楼房。规划网站时，首先应把网站的内容列举出来，然后根据内容列出一个结构化的蓝图，再根据实列举出来，然后根据内容列出一个结构化的蓝图，再根据实际情况设计各个页面之间的链接。规划网站的内容应包括栏际情况设计各个页面之间的链接。规划网站的内容应包括栏目的设置、目录结构、网站的风格目的设置、目

35、录结构、网站的风格(即颜色搭配、网站即颜色搭配、网站Logo、版面布局、图像的运用版面布局、图像的运用)等。等。4.主题栏的设置主题栏的设置在设计网站的主题栏与板块时应注意以下几个问题。在设计网站的主题栏与板块时应注意以下几个问题。(1)突出主题。把主题栏放在最明显的地方，让浏览者快速、突出主题。把主题栏放在最明显的地方，让浏览者快速、明确地知道网站所表现的内容。明确地知道网站所表现的内容。上一页 下一页 返回5.4网站制作流程网站制作流程(2)设计一个设计一个“最近更新最近更新”栏目，让浏览者能够一目了然地知栏目，让浏览者能够一目了然地知道更新内容。道更新内容。(3)栏目不要设置太多，一般不

36、超过栏目不要设置太多，一般不超过10个。个。5.目录结构设计目录结构设计目录结构设计一般应注意以下问题。目录结构设计一般应注意以下问题。(1)按栏目内容建立子目录。按栏目内容建立子目录。(2)每个目录下分别为图像文件创建一个子目录每个目录下分别为图像文件创建一个子目录image(图像较图像较少时可不创建少时可不创建)。(3)目录的层次不要太深，主要栏目最好能直接从首页到达。目录的层次不要太深，主要栏目最好能直接从首页到达。(4)尽量使用意义明确的非中文目录名称。尽量使用意义明确的非中文目录名称。上一页 下一页 返回5.4网站制作流程网站制作流程6.颜色搭配颜色搭配合理地使用色彩是非常关键的，不

37、同的色彩搭配会产生不同合理地使用色彩是非常关键的，不同的色彩搭配会产生不同的效果，并能影响浏览者的情绪。网页选用的背景应与页面的效果，并能影响浏览者的情绪。网页选用的背景应与页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。则。7.网站网站LogoLogo最重要的作用就是表达网站的理念、便于人们识别，它最重要的作用就是表达网站的理念、便于人们识别，它广泛地应用于站点的链接和宣传中。如同商标一样，广泛地应用于站点的链接和宣传中。如同商标一样，Logo是是站点特色和内涵的集中体现。如果是企业网站，最好在企业站点特色和内涵的集中体现。如果

38、是企业网站，最好在企业商标的基础上设计，以保持企业形象的整体统一。商标的基础上设计，以保持企业形象的整体统一。设计设计Logo的原则是的原则是:以简洁的、符号化的视觉艺术把网站的形以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。象和理念展示出来。上一页 下一页 返回5.4网站制作流程网站制作流程 8.版面布局版面布局网页页面的整体布局是不可忽视的。要合理地运用空间，使网页页面的整体布局是不可忽视的。要合理地运用空间，使网页疏密有致，井井有条。版面布局一般应遵循的原则是网页疏密有致，井井有条。版面布局一般应遵循的原则是:突突出重点、平衡和谐，将网站出重点、平衡和谐，将网站Logo、主菜单等

39、较为重要的模块、主菜单等较为重要的模块放在突出的位置，然后再排放次要模块放在突出的位置，然后再排放次要模块(例如搜索、友情链接、例如搜索、友情链接、计数器、版权信息、计数器、版权信息、E-mail地址等地址等)。此外，其他页面的设计应与首页保持相同的风格，并有返回此外，其他页面的设计应与首页保持相同的风格，并有返回首页的链接。首页的链接。9.图像的运用图像的运用网页上应适当地添加一些图像，使用图像一般应注意以下几网页上应适当地添加一些图像，使用图像一般应注意以下几个问题。个问题。上一页 下一页 返回5.4网站制作流程网站制作流程(1)图像是为网页内容服务的，不能让图像喧宾夺主。图像是为网页内容

40、服务的，不能让图像喧宾夺主。(2)图像要兼顾大小和美观。图像不仅要好看，还应在保证图图像要兼顾大小和美观。图像不仅要好看，还应在保证图像质量的情况下尽量缩小图像的大小像质量的情况下尽量缩小图像的大小(即字节数即字节数)。图像过大。图像过大将影响网页的传输速率。将影响网页的传输速率。(3)合理地采用合理地采用JPEG和和GIF图像格式。图像格式。5.4.2网站制作网站制作1.制作网站制作网站制作网站主要包括以下几个步骤。制作网站主要包括以下几个步骤。(1)建立本地站点。建立站点根文件夹，用于存放首页、相建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。关网页和网站中用

41、到的其他文件。(2)在站点根文件夹下创建子文件夹。为了使文件安排比较在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，应将页面文件和图像文件分开存放。清晰，应将页面文件和图像文件分开存放。上一页 下一页 返回5.4网站制作流程网站制作流程 (3)向站点添加所需要的空网页。向站点添加所需要的空网页。(4)设计网页尺寸。设计网页尺寸。(5)设置网页属性，包括页面标题、背景图像、背景颜色、设置网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。链接颜色、文字颜色等。(6)向网页中插人文本、图形图像、动画等对象。向网页中插人文本、图形图像、动画等对象。(7)建立所需要的超级链接。建立

42、所需要的超级链接。(8)预览和保存网页。预览和保存网页。2.上传与测试上传与测试测试与正式上传是不可分割的两项工作。测试与正式上传是不可分割的两项工作。制作完毕的网页，必须进行测试。制作完毕的网页，必须进行测试。上一页 下一页 返回5.4网站制作流程网站制作流程测试主要包括上传前的兼容性测试、链接测试和上传后的实测试主要包括上传前的兼容性测试、链接测试和上传后的实地测试。完成上传前所需要的测试后，利用地测试。完成上传前所需要的测试后，利用FTP工具将网页工具将网页发布到所申请的主页服务器上。网站上传之后，继续通过浏发布到所申请的主页服务器上。网站上传之后，继续通过浏览器进行实地测试，发现问题，

43、及时修改，然后再上传测试。览器进行实地测试，发现问题，及时修改，然后再上传测试。5.4.3网站后期维护网站后期维护将所有的网页制作完成后，就可以将网站发布到将所有的网页制作完成后，就可以将网站发布到Internet上，上，并进入后期的更新维护。此项工作主要应考虑以下两个方面。并进入后期的更新维护。此项工作主要应考虑以下两个方面。1.测试并发布网站测试并发布网站上一页 下一页 返回5.4网站制作流程网站制作流程检查网页的显示细节检查网页的显示细节(有无图片显示不出来现象有无图片显示不出来现象)、页面上的、页面上的超级链接超级链接(有无链接错误或没有链接现象有无链接错误或没有链接现象)等。待测试没

44、有问等。待测试没有问题后，就可以将网站中所有的文件及文件夹上传到题后，就可以将网站中所有的文件及文件夹上传到Internet的的服务器上，以便让全世界的浏览者都能够浏览。服务器上，以便让全世界的浏览者都能够浏览。2.更新维护更新维护随着网站的发布，根据访问者的建议，不断修改或者更新网随着网站的发布，根据访问者的建议，不断修改或者更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到流程中的第一步，这样周而复始就时网站建设工作又返回到流程中的第一步，这样周而复始就构成了网站的维护过程。构成了网站的维护过程。上一页 返回图图5-1源文件窗口源文件窗口返回图图5-2在记事本中输入在记事本中输入HTML程序程序返回图图5-3显示效果显示效果返回图图5-4 templet.htm返回图图5-22网站设计的工作流程网站设计的工作流程返回