（中职）网页设计与制作模块1 初识网页.ppt

《（中职）网页设计与制作模块1 初识网页.ppt》由会员分享，可在线阅读，更多相关《（中职）网页设计与制作模块1 初识网页.ppt（97页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF正版可修改PPT（中职）网页设计与制作模块1 初识网页模块模块1 初识网页初识网页万维网万维网(World Wide Web,WWW)是是Inter net上应用最广泛的上应用最广泛的一种服务。为了与传统的网络相区别，人们将一种服务。为了与传统的网络相区别，人们将WWW简称为简称为web或或3 W.Web上具有共同主题、性质相关的一组资源就是上具有共同主题、性质相关的一组资源就是web站点。站点。web，直译为，直译为“网网”，其含义是指通过超链接将各种文档组，其含义是指通过超链接将各种文档组合在一起，形成一个大规模的信息集合。合在一起，形成一个大规模的信息集合。下一页模块模块1 初识网

2、页初识网页1.1 认识网站网页认识网站网页1.2 结识网页制作工具结识网页制作工具1.3 网站制作流程网站制作流程1.4 HTML基础基础1.1 认识网站网页认识网站网页1.1.11.1.1 WebWeb的特点的特点浏浏览览WebWeb时时所所看看到到的的文文件件称称为为WebWeb页页，又又称称为为网网页页。网网页页可可以以将将不不同同类类型型的的多多媒媒体体信信息息(例例如如文文本本、图图像像、声声音音和和动动画画等等)组组合合在在一一个个文文档档中中。由由于于这这些些文文档档是是用用超超文文本本标标记记语语言言(Hyper(Hyper text text Markup Markup La

3、nguage,HTML)Language,HTML)表表示示的的，其其文文件件名名一一般般以以.htm.htm或或.html.html结结尾尾，因因此此又又称称为为HTMLHTML文文档档或或超超文文本本。超超文文本本可可以以给给浏浏览览者者带带来来视视觉觉和和听听觉觉的的享享受受，所所以以webweb技技术术又又称称为为超超媒媒体体技技术术。一一个个webweb站站点点由由一一个个或或多多个个webweb页页组组成成，这这些些webweb页页相相互互连连接接在在一一起起，存存放放在在webweb服服务务器器上上，以以供供浏浏览览者者访访问问。浏浏览览者者通通过过webweb页页可可以以进进行

4、行跳跳跃跃式式的的查查询询与与浏浏览览，可可以以在在世世界界各各地地的的计计算算机机之之间间自自由由、高高效效率率地地选选择择和和收收集集各各种种各各样样的的信信息息，而不必知道所浏览的信息来自于哪台计算机。而不必知道所浏览的信息来自于哪台计算机。返回下一页上一页1.1 认识网站网页认识网站网页webweb所所包包含含的的是是双双向向信信息息。一一方方面面，浏浏览览者者可可以以通通过过浏浏览览器器浏浏览览他他人人的的信信息息；另另一一方方面面，浏浏览览者者也也可可以以通通过过webweb服服务务器器建建立立自己的网站并发布自己的信息。自己的网站并发布自己的信息。1.1.21.1.2 WebWe

5、b的结构的结构由由图图1-11-1可可以以看看出出，WebWeb站站点点并并不不是是孤孤立立存存在在的的，它它包包括括了了多多个个页页面面与与多多种种元元素素。一一个个真真正正的的网网站站是是由由许许多多页页面面和和超超链链接接组组成成的的，并并由由服服务务器器发发布布。浏浏览览者者可可以以通通过过浏浏览览器器对对WebWeb站站点点进行浏览。进行浏览。WebWeb页页包包括括的的主主要要元元素素有有：文文本本、图图像像、超超链链接接、导导航航栏栏、表表格、表单、多媒体及特殊效果等。格、表单、多媒体及特殊效果等。返回下一页上一页1.1 认识网站网页认识网站网页1.1.文本文本文文本本是是人人类

6、类最最重重要要的的信信息息载载体体和和交交流流工工具具，网网页页的的主主体体一一般般以以文文本本为为主主。在在制制作作网网页页时时，可可以以根根据据需需要要设设置置文文本本的的字字体体、字号、颜色以及所需要的其他格式。字号、颜色以及所需要的其他格式。2.2.图像图像图图像像在在网网页页中中可可以以起起到到提提供供信信息息、展展示示作作品品、美美化化网网页页以以及及体体现现风风格格等等功功效效。图图像像可可以以用用作作标标题题、网网站站标标志志(Logo)(Logo)、网网页页背背景景、链链接接按按钮钮、导导航航栏栏、网网页页主主图图等等。浏浏览览者者可可以以在在网网页中使用多种图像文件格式，使

7、用最多的是页中使用多种图像文件格式，使用最多的是JPEGJPEG和和GIFGIF格式。格式。网页中的图像不宜太多，否则将影响网页的传输速率。网页中的图像不宜太多，否则将影响网页的传输速率。返回下一页上一页1.1 认识网站网页认识网站网页3.3.导航栏导航栏导航栏是网站设计者在规划网站结构时必须考虑的一个问题。导航栏是网站设计者在规划网站结构时必须考虑的一个问题。设设置置导导航航栏栏的的目目的的是是使使浏浏览览者者能能够够顺顺利利地地浏浏览览网网页页，避避免免迷迷失失方方向向。导导航航栏栏能能使使浏浏览览者者方方便便地地返返回回主主页页或或继继续续下下一一页页的的访访问问。导导航航栏栏可可以以是

8、是按按钮钮、文文本本或或图图像像的的样样式式。站站点点的的每每个个网网页页上上均均应应设设置导航栏，并且应将其放置在网页中比较明显的位置。置导航栏，并且应将其放置在网页中比较明显的位置。4.4.超链接超链接超超链链接接是是网网页页中中最最有有用用的的功功能能之之一一。超超链链接接是是从从一一个个网网页页指指向向另另一一个个网网页页的的链链接接，该该链链接接既既可可以以指指向向本本地地网网站站的的另另一一个个网网页页，也也可以指向世界各地的其他网页。可以指向世界各地的其他网页。当当浏浏览览者者单单击击超超链链接接时时，其其指指向向的的网网页页的的内内容容将将显显示示在在浏浏览览者者的的WebWe

9、b浏览器中。不论是文字还是图像，都可以设置为超链接。浏览器中。不论是文字还是图像，都可以设置为超链接。返回下一页上一页1.1 认识网站网页认识网站网页超链接一般包括两种类型超链接一般包括两种类型:站内链接和站外链接。站内链接和站外链接。5.5.表格表格网网页页中中的的表表格格是是一一种种用用于于控控制制网网页页页页面面布布局局的的有有效效方方法法。为为了了达达到到理理想想的的视视觉觉效效果果，通通常常不不显显示示表表格格的的边边框框。使使用用表表格格辅助布局，可以体现网页横竖分明的风格。辅助布局，可以体现网页横竖分明的风格。6.6.表单表单表表单单是是一一种种特特殊殊的的网网页页元元素素，通通

10、常常用用于于收收集集信信息息或或实实现现一一些些交交互互式式的的效效果果。表表单单的的主主要要功功能能是是接接收收浏浏览览者者在在浏浏览览器器端端的的输输入入信信息息，然然后后将将这这些些信信息息发发送送到到服服务务器器端端。例例如如，中中请请电电子子邮邮箱箱就就需需要要填填写写一一系系列列的的表表单单。在在图图1-11-1所所示示的的页页面面中中，用用户登录的登录名、密码、搜索引擎等都是表单。户登录的登录名、密码、搜索引擎等都是表单。返回下一页上一页1.1 认识网站网页认识网站网页7.7.多媒体及特殊效果多媒体及特殊效果为为了了吸吸引引更更多多的的浏浏览览者者，许许多多网网页页还还包包含含声

11、声音音、动动画画、视视频频等等多多媒体元素以及悬停按钮、媒体元素以及悬停按钮、JavaJava控件、控件、ActiveXActiveX控件等特殊效果。控件等特殊效果。1.1.3 URL1.1.3 URL统统一一资资源源定定位位符符(Uniform(Uniform Resource Resource Locator,Locator,URL)URL)是是文文件件名名的的扩扩展展，是是互互联联网网上上资资源源的的地地址址。在在单单机机系系统统中中，定定位位一一个个文文件件需需要要路路径径和和文文件件名名，对对于于遍遍布布全全球球的的InternetInternet，显显然然还还需需要要知知道道文文件

12、件的的存存放放位位置置。在在单单机机系系统统中中，所所有有的的文文件件都都由由统统一一的的操操作作系系统统管管理理，不不必必给给出出访访问问该该文文件件的的方方法法;而而在在InternetInternet上上，各各个个网网络络、各各台台主主机机的的操操作作系系统统都都不不尽尽相相同同，所所以以必必须须指指定定访访问问该该文文件件的的方方法。法。返回下一页上一页1.1 认识网站网页认识网站网页1.URL1.URL包含的内容包含的内容URLURL包含以下包含以下3 3个部分个部分:(1)(1)在在WebWeb上传输资源所使用协议的名称。上传输资源所使用协议的名称。(2)(2)数据所在的主机名称。

13、数据所在的主机名称。(3)(3)资源本身的路径。资源本身的路径。2.URL2.URL的格式的格式URLURL的的格格式式:protocol:/machine_name:port:protocol:/machine_name:port/directory/filename/directory/filename其中各部分的含意如下。其中各部分的含意如下。1)Protocol1)ProtocolProtocolProtocol是是访访问问该该资资源源所所采采用用的的协协议议，即即访访问问该该资资源源的的方方法法，它它可以是以下几种方法中的任意一种。可以是以下几种方法中的任意一种。返回下一页上一页1.

14、1 认识网站网页认识网站网页(1)HTTP(1)HTTP(超文本传输协议超文本传输协议):):该资源是该资源是htmlhtml文件。文件。(2)FTP(2)FTP(文件传输协议文件传输协议):):用用ftpftp文件访问该资源。文件访问该资源。(3)Gopher(3)Gopher协议协议:该资源是该资源是gophergopher文件，表明该资源是网络新闻。文件，表明该资源是网络新闻。(4)News:(4)News:该资源是网络新闻。该资源是网络新闻。2)machine name2)machine namemachine machine namename是是存存放放该该资资源源服服务务器器的的域

15、域名名系系统统(DNS(DNS主主机机名名或或IPIP地址），通常以字符形式出现，如地址），通常以字符形式出现，如.3)port3)portportport是是在在该该主主机机所所使使用用的的服服务务器器端端口口号号，一一般般情情况况下下端端口口号号不不需需要要指指定定，只只有有当当服服务务器器所所使使用用的的端端口口号号不不是是默默认认端端口口时时才才需需要指定。要指定。返回下一页上一页1.1 认识网站网页认识网站网页4)directory4)directory和和filenamefilenamedirectorydirectory和和filenamefilename是是该该资资源源的的路路

16、径径和和文文件件名名。例例如如，某某网网址址(信信息息所所在在位位置置)的的表表示示如如下下:http;/www.:http;/www.mm/xyz/filel.mm/xyz/filel.htmhtm。与与单单机机系系统统绝绝对对路路径径、相相对对路路径径的的概概念念类类似似，统统一一资资源源定定位位符符也也有有绝绝对对URLURL和和相相对对URLURL之之分分。上上文文所所述述的的是是绝绝对对URLURL，相相对对URLURL是是相相对对于于用用户户最最近近访访问问的的URLURL。比比如如用用户户正正在在访访问问一一个个URLURL为为http;/ 认识网站网页认识网站网页1.1.41.

17、1.4网页的分类网页的分类根据网页的交互性，又可将网页分为静态网页与动态网页。根据网页的交互性，又可将网页分为静态网页与动态网页。(1)(1)静静态态网网页页:网网站站提提供供的的最最基基本本的的内内容容，使使用用HTMLHTML描描述述，它它包包括括文文本本、表表格格、图图像像以以及及其其他他内内容容，不不同同用用户户访访问问时时内内容容均均相相同同。静静态态网网页页只只要要将将放放在在网网站站服服务务器器上上的的文文件件授授权权用用户户访问即可。访问即可。(2)(2)动动态态网网页页:网网页页内内容容随随不不同同用用户户、不不同同访访问问的的需需求求而而发发生生变变化化，网网页页中中不不仅

18、仅包包含含HTMLHTML代代码码，同同时时也也包包含含在在WebWeb服服务务器器端端执执行行的的脚脚本本程程序序代代码码。用用户户可可以以访访问问服服务务器器端端的的资资源源，服服务务器将用户请求的资源，通过浏览器呈现给用户。器将用户请求的资源，通过浏览器呈现给用户。返回下一页上一页1.1 认识网站网页认识网站网页1.1.51.1.5网页、网站和主页的关系网页、网站和主页的关系上上面面讲讲到到Web,Web,URLURL等等概概念念，与与网网页页、网网站站、主主页页又又有有什什么么关关系呢系呢?1.Web1.Web页面页面WebWeb页面就是在浏览器里看到的网页，是一个单一的文件。页面就是

19、在浏览器里看到的网页，是一个单一的文件。2.2.网页网页网网页页是是人人们们用用HTML(HTML(Hyper Hyper text text Markup Markup Language,Language,超超文文本本标标记记语语言言)所所编编写写的的内内容容丰丰富富的的页页面面。网网页页里里不不仅仅有有原原来来的的文文本本内内容容，也也可可以以有有超超出出文文本本以以外外的的内内容容，如如图图像像、链链接接、声声音音以以及及视视频频等等。每每一一个个网网页页都都是是磁磁盘盘上上的的一一个个文文件件，可可以以单单独独浏览。浏览。返回下一页上一页1.1 认识网站网页认识网站网页3.3.网站网站

20、网网站站:由由大大量量内内容容相相关关的的网网页页通通过过超超链链接接的的形形式式组组织织成成一一个个逻逻辑上的整体。网站的组成部分如下。辑上的整体。网站的组成部分如下。(1)(1)硬件硬件:连接到网络的计算机，包括各种服务器。连接到网络的计算机，包括各种服务器。(2)(2)软软件件:在在服服务务器器上上运运行行的的网网络络操操作作系系统统、webweb服服务务器器、应应用用程序服务器软件等。程序服务器软件等。(3)(3)各各种种信信息息服服务务的的文文件件资资源源，如如网网页页文文件件、图图像像文文件件、声声音音文件、数据库等。文件、数据库等。(4)(4)对网站进行管理和维护的网站管理人员和

21、开发人员等。对网站进行管理和维护的网站管理人员和开发人员等。返回下一页上一页1.1 认识网站网页认识网站网页4.4.主页主页主主页页(或或首首页页)是是网网站站中中的的第第一一页页。与与一一般般网网页页不不同同之之处处在在于于，主主页页是是各各个个子子网网页页的的集集合合，是是网网站站的的出出发发点点。在在主主页页中中有有网网站站的的导导航航栏栏、链链接接到到网网站站内内各各分分页页的的地地址址、图图片片、动动画画等等。主主页页总总是是与与一一个个网网址址(URL)(URL)相相对对应应，可可以以带带领领用用户户走走进进一一个个网网站。站。图图 1-11-1为为 网网 站站 http;/htt

22、p;/的的 主主 页页，主主 页页 名名 称称 为为index.html,index.html,读读者者可可以以在在IE(Internet IE(Internet Explorer)Explorer)浏浏览览器器地地址址栏栏输输入入http;/ 认识网站网页认识网站网页在在主主页页里里，应应该该给给出出这这个个站站点点的的基基本本信信息息和和主主要要内内容容，使使浏浏览览的的用用户户看看到到后后就就可可以以知知道道该该站站点点的的基基本本内内容容，知知道道这这里里的的信信息息是是否否可可用用，是是否否继继续续浏浏览览下下去去。因因此此，主主页页的的作作用用比比其其他他网网页页更更为为重重要要，

23、在在设设计计和和制制作作时时必必须须仔仔细细考考虑虑。如如果果把把WWWWWW视视为为一一个个图图书书馆馆，那那么么网网站站就就是是图图书书馆馆中中的的书书，网网页页则则相相当当于书的某一页，首页就是书的封面。于书的某一页，首页就是书的封面。返回下一页上一页1.1 认识网站网页认识网站网页1.1.6 HTML1.1.6 HTMLWWWWWW上上的的文文档档称称为为页页(Web(Web页页或或网网页页)，它它用用HTMLHTML编编写写，并并使使用用URLURL进进行行标标识识，在在HTTPHTTP协协议议下下将将文文件件在在节节点点间间进进行行传传输输。用用户户可可通通过过浏浏览器来浏览网页。

24、览器来浏览网页。超超文文本本标标记记语语言言(HTML)(HTML)是是一一种种用用来来制制作作超超文文本本文文档档的的简简单单标标记记语语言言。用用HTMLHTML编编写写的的超超文文本本文文档档称称为为HTMLHTML文文档档，它它独独立立于于各各种种操操作作系系统统平平台台(如如UNIX,UNIX,WindowsWindows等等)。超超文文本本(Hypertext)(Hypertext)是是相相对对于于文文本本而而言言的的，之之所所以以称称为为超超文文本本，是是因因为为它它的的内内容容不不仅仅仅仅包包括括纯纯文文本本，还还可可以以加加入入图图片片、声声音音、动动画画、视视频频等等内内容

25、容，并并包包含含与与其其他他文文档档的的链链接接，即即实实现现从从一一个个文文档档跳跳转转到到另另一一个个文文档档。网网页页文文件件的的扩扩展展名名一一般般为为.html.html或或.htm.htm.超超链链接接(Hyperlink)(Hyperlink)可可以以从从一一个个网网页页跳跳转转到到另另一一个个网网页页，或或是是从从网网页页的的某某一一部部分分引引导导到到另另一一部部分分。超超链链接由特殊的文字或图像来体现，点击它就可以实现链接。接由特殊的文字或图像来体现，点击它就可以实现链接。返回上一页1.2结识网页制作工具结识网页制作工具1.2.11.2.1网页编辑工具网页编辑工具1.Dre

26、amweaver1.DreamweaverDreamweaverDreamweaver是是网网页页制制作作工工具具，它它使使用用所所见见即即所所得得的的界界面面，亦亦有有HTMLHTML编编辑辑的的功功能能。DreamweaverDreamweaver支支持持ActiveX,ActiveX,JavaScript,JavaScript,Java,Java,Flash,Flash,ShockWaveShockWave等等，而而 且且 它它 还还 支支 持持 动动 态态 HTML HTML(Dynamic(Dynamic HTML)HTML)的的设设计计，使使页页面面在在没没有有安安装装插插件件的的

27、情情况况下下也也可可以以在在NetscapeNetscape和和IEIE浏浏览览器器中中正正确确地地显显示示页页面面的的动动画画，同同时时它它还还提提供供了了自自动动更更新新页页面面信信息息的的功功能能。DreamweaverDreamweaver的的开开放放式式设设计计是是其其最最显显著著的的特特点点，它它使使任任何何人人都都可可以以轻轻易易扩扩展展它它的的功功能。能。返回下一页1.2结识网页制作工具结识网页制作工具2.FrontPage2.FrontPageFrontPageFrontPage是是微微软软OfficeOffice系系列列软软件件之之一一，继继承承了了OfficeOffice

28、系系列列软软件件的的界界面面通通用用、操操作作简简单单等等特特点点，用用户户可可以以像像在在WordWord中中一一样样直直接接进进行行编编辑辑，编编辑辑的的内内容容也也将将由由FrontPageFrontPage自自动动生生成成HTMLHTML网网页页代代码码。因因此此，FrontPageFrontPage一一个个很很大大的的好好处处就就是是与与OfficeOffice系系列列软软件件的的一一致致性性，特特别别适适合合初初学学者者。但但是是FrontPageFrontPage也也存存在在部部分分缺缺点点，如如兼兼容容性性差差、生生成成的的垃垃圾圾代代码码多多、对对动动态态网网页页支支持持差差

29、等。等。要要想想成成为为一一名名优优秀秀的的网网页页设设计计师师，建建议议最最好好在在学学习习完完DreamweaverDreamweaver后后，再再研研究究一一下下FrontPageFrontPage软软件件，只只要要会会用用DreamweaverDreamweaver，自自然然就就会会用用FrontPageFrontPage，利利用用两两种种互互补补的的功功能能，方可制作优秀、复杂的网页。方可制作优秀、复杂的网页。返回下一页上一页1.2结识网页制作工具结识网页制作工具1.2.21.2.2网页图像与动画制作工具网页图像与动画制作工具现现在在的的网网页页通通常常具具有有丰丰富富多多彩彩的的图

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

31、会会因因为为缩缩放放而而导导致致影影像像失失真真，因因此此在在WebWeb上应用广泛。上应用广泛。2.Fireworks2.FireworksFireworksFireworks是是MacromediaMacromedia公公司司专专门门设设计计的的webweb图图形形工工具具软软件件，它它可可以以用用较较少少的的步步骤骤生生成成较较小小但但质质量量很很高高的的JPEGJPEG和和GIFGIF图图像像，并并且且这这些些图图像可以直接用于网页上。像可以直接用于网页上。FireworksFireworks是是WebWeb图形工具的首选软件。图形工具的首选软件。返回下一页上一页1.2结识网页制作工具

32、结识网页制作工具3.Photoshop3.PhotoshopPhotoshopPhotoshop是是由由AdobeAdobe公公司司开开发发的的著著名名图图形形图图像像处处理理软软件件。它它能能够够实实现现各各种种专专业业化化的的图图像像处处理理，是是专专业业图图像像创创作作的的首首选选软软件件。以以上上软软件件能能相相互互无无缝缝合合作作。通通常常网网页页制制作作的的顺顺序序，是是先先在在FireworkFirework中中绘绘制制主主页页图图片片，然然后后进进行行切切片片，再再将将切切片片导导出出到到DreamweaverDreamweaver中中，在在DreamweaverDreamwe

33、aver中中编编辑辑修修改改，添添加加链链接接，最最后后再导入用再导入用FlashFlash制作的动画。制作的动画。20052005年年，AdobeAdobe公公司司收收购购了了MacromediaMacromedia公公司司，并并于于20072007年年推推出出了了Adobe Dreamweaver,Firework,FlashAdobe Dreamweaver,Firework,Flash的的C”C”版本。版本。返回上一页1.3网站制作流程网站制作流程 网网页页的的功功能能强强大大，内内容容丰丰富富。做做一一个个网网页页是是简简单单的的，但但要要做做好好一一个个网网站站则则是是非非常常复复

34、杂杂、困困难难的的工工作作。开开发发一一个个优优秀秀的的网网站站并并不不能能随随心心所所欲欲，必必须须遵遵循循一一定定的的工工作作流流程程，网网站站制制作作流流程程一一般般分分为为3 3个个阶段，如阶段，如图图1-21-2所示。所示。1.3.11.3.1网站规划网站规划1.1.确定网站的主题与名称确定网站的主题与名称网网站站主主题题是是指指建建立立的的网网站站所所要要包包含含的的主主要要内内容容。例例如如，旅旅游游、娱娱乐乐休休闲闲、体体育育、新新闻闻、教教育育、医医疗疗、时时尚尚等等。其其中中每每一一大大类类又又可可进进一一步细化为若刊、类。一般来说，确定网站主题应遵循以下原则步细化为若刊、

35、类。一般来说，确定网站主题应遵循以下原则:(1)(1)主主题题鲜鲜明明。一一个个网网站站必必须须有有一一个个明明确确的的主主题题，在在主主题题范范围围内内做做到内容全而精。到内容全而精。(2)(2)明确设立网站的目的。明确设立网站的目的。返回下一页1.3网站制作流程网站制作流程(3)(3)体体现现个个性性。把把自自己己的的兴兴趣趣、爱爱好好尽尽情情地地发发挥挥出出来来，突突出出自自己的个性，创建出具有自己特色的网站。己的个性，创建出具有自己特色的网站。在在个个人人主主页页中中，网网站站的的名名称称起起着着很很重重要要的的作作用用，它它在在很很大大程程度度上上决决定定了了整整个个网网站站的的定定

36、位位。一一个个好好的的名名称称必必须须有有概概括括性性、简洁、有特色、容易记，还要符合自己主页的主题和风格。简洁、有特色、容易记，还要符合自己主页的主题和风格。2.2.搜集材料搜集材料确确定定网网站站主主题题后后，要要围围绕绕主主题题搜搜集集材材料料，作作为为自自己己制制作作网网页页的的素素材材。搜搜集集的的材材料料越越多多，制制作作网网站站越越容容易易。材材料料既既可可以以从从图图书书、报报纸纸、光光盘盘、多多媒媒体体上上获获得得，也也可可以以从从网网上上搜搜集集。对对搜集到的材料应去粗取精，去伪存真。搜集到的材料应去粗取精，去伪存真。返回下一页上一页1.3网站制作流程网站制作流程3.3.规

37、划网站规划网站规规划划网网站站就就像像设设计计师师设设计计大大楼楼一一样样，只只有有图图纸纸设设计计好好了了，才才能能建建成成一一座座漂漂亮亮的的楼楼房房。规规划划网网站站时时，首首先先应应把把网网站站的的内内容容列列举举出出来来，然然后后根根据据内内容容列列出出一一个个结结构构化化的的蓝蓝图图，再再根根据据实实际际情情况况设设计计各各个个页页面面之之间间的的链链接接。规规划划网网站站的的内内容容应应包包括括栏栏目目的的设设置置、目目录录结结构构、网站的风格网站的风格(即颜色搭配、网站即颜色搭配、网站LogoLogo、版面布局、图像的运用、版面布局、图像的运用)等。等。4.4.主题栏的设置主题

38、栏的设置在设计网站的主题栏与板块时应注意以下几个问题在设计网站的主题栏与板块时应注意以下几个问题:(1)(1)突突出出主主题题。把把主主题题栏栏放放在在最最明明显显的的地地方方，让让浏浏览览者者快快速速、明明确地知道网站所表现的内容。确地知道网站所表现的内容。(2)(2)设设计计一一个个“最最近近更更新新”栏栏目目，让让浏浏览览者者能能够够一一目目了了然然地地知知道道更新内容。更新内容。返回下一页上一页1.3网站制作流程网站制作流程(3)(3)栏目不要设置太多，一般不超过栏目不要设置太多，一般不超过1010个。个。5.5.目录结构设计目录结构设计目录结构设计一般应注意以下问题目录结构设计一般应

39、注意以下问题:(1)(1)按栏目内容建立子目录。按栏目内容建立子目录。(2)(2)每每个个目目录录下下分分别别为为图图像像文文件件创创建建一一个个子子目目录录image(image(图图像像较较少少时时可不创建可不创建)。(3)(3)目录的层次不要太深，主要栏目最好能直接从首页到达。目录的层次不要太深，主要栏目最好能直接从首页到达。(4)(4)尽量使用意义明确的非中文目录名称。尽量使用意义明确的非中文目录名称。6.6.颜色搭配颜色搭配合合理理地地使使用用色色彩彩是是非非常常关关键键的的，不不同同的的色色彩彩搭搭配配会会产产生生不不同同的的效效果果，并并能能影影响响浏浏览览者者的的情情绪绪。网网

40、页页选选用用的的背背景景应应与与页页面面的的色色调调相相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。协调，色彩搭配要遵循和谐、均衡、重点突出的原则。返回下一页上一页1.3网站制作流程网站制作流程7.7.网站网站LogoLogoLogoLogo最最重重要要的的作作用用就就是是表表达达网网站站的的理理念念、便便于于人人们们识识别别，它它广广泛泛地地应应用用于于站站点点的的链链接接和和宣宣传传中中。如如同同商商标标一一样样，LogoLogo是是站站点点特特色色和和内内涵涵的的集集中中体体现现。如如果果是是企企业业网网站站，最最好好在在企企业业商商标标的的基基础础上上设设计计，以保持企业形象的整体

41、统一。以保持企业形象的整体统一。设设计计LogoLogo的的原原则则是是:以以简简洁洁的的、符符号号化化的的视视觉觉艺艺术术把把网网站站的的形形象象和和理念展示出来。理念展示出来。8.8.版面布局版面布局网网页页页页面面的的整整体体布布局局是是不不可可忽忽视视的的。要要合合理理地地运运用用空空间间，使使网网页页疏疏密密有有致致，井井井井有有条条。版版面面布布局局一一般般应应遵遵循循的的原原则则是是:突突出出重重点点、平平衡衡和和谐谐，将将网网站站LogoLogo、主主菜菜单单等等较较为为重重要要的的模模块块放放在在突突出出的的位位置置，然然后后再再排排放放次次要要模模块块(例例如如搜搜索索、友

42、友情情链链接接、计计数数器器、版版权权信信息息、E-mailE-mail地址等地址等)。返回下一页上一页1.3网站制作流程网站制作流程此此外外，其其他他页页面面的的设设计计应应与与首首页页保保持持相相同同的的风风格格，并并有有返返回回首首页的链接。页的链接。9.9.图像的运用图像的运用网网页页上上应应适适当当地地添添加加一一些些图图像像，使使用用图图像像一一般般应应注注意意以以下下几几个个问题问题:(1)(1)图像是为网页内容服务的，不能让图像喧宾夺主。图像是为网页内容服务的，不能让图像喧宾夺主。(2)(2)图图像像要要兼兼顾顾大大小小和和美美观观。图图像像不不仅仅要要好好看看，还还应应在在保

43、保证证图图像像质质量量的的情情况况下下尽尽量量缩缩小小图图像像的的大大小小(即即字字节节数数)。图图像像过过大大将将影影响网页的传输速率。响网页的传输速率。(3)(3)合合理理地地采采用用JPEGJPEG和和GIFGIF图图像像格格式式。颜颜色色较较少少的的(256(256色色以以内内)图图像像，可可处处理理为为GIFGIF格格式式;色色彩彩比比较较丰丰富富的的图图像像，最最好好处处理理为为JPEGJPEG格式。格式。返回下一页上一页1.3网站制作流程网站制作流程1.3.21.3.2网站制作网站制作1.1.制作网站制作网站制作网站主要包括以下几个步骤制作网站主要包括以下几个步骤:(1)(1)建

44、建立立本本地地站站点点。建建立立站站点点根根文文件件夹夹，用用于于存存放放首首页页、相相关关网网页页和网站中用到的其他文件。和网站中用到的其他文件。(2)(2)在在站站点点根根文文件件夹夹下下创创建建子子文文件件夹夹。为为了了使使文文件件安安排排比比较较清清晰晰，应将页面文件和图像文件分开存放。应将页面文件和图像文件分开存放。(3)(3)向站点添加所需要的空网页。向站点添加所需要的空网页。(4)(4)设计网页尺寸。设计网页尺寸。(5)(5)设设置置网网页页属属性性，包包括括页页面面标标题题、背背景景图图像像、背背景景颜颜色色、链链接接颜颜色、文字颜色等。色、文字颜色等。(6)(6)向网页中插入

45、文本、图形图像、动画等对象。向网页中插入文本、图形图像、动画等对象。返回下一页上一页1.3网站制作流程网站制作流程(7)(7)建立所需要的超级链接。建立所需要的超级链接。(8)(8)预览和保存网页。预览和保存网页。2.2.上传与测试上传与测试测试与正式上传是不可分割的两项工作。测试与正式上传是不可分割的两项工作。制制作作完完毕毕的的网网页页，必必须须进进行行测测试试。测测试试主主要要包包括括上上传传前前的的兼兼容容性性测测试试、链链接接测测试试和和上上传传后后的的实实地地测测试试。完完成成上上传传前前所所需需要要的的测测试试后后，利利用用FTPFTP工工具具将将网网页页发发布布到到所所中中请请

46、的的主主页页服服务务器器上上。网网站站上上传传之之后后，继继续续通通过过浏浏览览器器进进行行实实地地测测试试，发发现现问问题题，及及时时修改，然后再上传测试。修改，然后再上传测试。1.3.31.3.3网站后期维护网站后期维护将将所所有有的的网网页页制制作作完完成成后后，就就可可以以将将网网站站发发布布到到InternetInternet上上，并进入后期的更新维护。此项工作主要应考虑以下两个方面。并进入后期的更新维护。此项工作主要应考虑以下两个方面。返回下一页上一页1.3网站制作流程网站制作流程1.1.测试并发布网站测试并发布网站检检查查网网页页的的显显示示细细节节(有有无无图图片片显显示示不不

47、出出来来现现象象)、页页面面上上的的超超级级链链接接(有有无无链链接接错错误误或或没没有有链链接接现现象象)等等。待待测测试试没没有有问问题题后后，就就可可以以将将网网站站中中所所有有的的文文件件及及文文件件夹夹上上传传到到InternetInternet的服务器上，以便让全世界的浏览者都能够浏览。的服务器上，以便让全世界的浏览者都能够浏览。2.2.更新维护更新维护随随着着网网站站的的发发布布，根根据据访访问问者者的的建建议议，不不断断修修改改或或者者更更新新网网站站中中的的信信息息，并并从从浏浏览览者者的的角角度度出出发发，进进一一步步完完善善网网站站。这这时时网网站站建建设设工工作作又又返

48、返回回到到流流程程中中的的第第一一步步，这这样样周周而而复复始始就就构成了网站的维护过程。构成了网站的维护过程。返回上一页1.4 HTML基础基础1.4.1 HTML1.4.1 HTML的基本概念的基本概念HTMLHTML称称为为超超文文本本标标记记语语言言。使使用用HTMLHTML编编写写的的超超文文本本文文档档称称为为HTMLHTML文文档档。任任何何网网页页页页面面都都是是以以HTMLHTML语语言言为为核核心心和和基基础础的的。例例如如，图图1-11-1所所示示的的是是一一个个标标准准的的网网站站页页面面，单单击击浏浏览览器器窗窗口口菜菜单单栏栏中中的的“查查看看”菜菜单单，选选择择“

49、源源文文件件”选选项项，打打开开的的即即是是网网页页页页面面的的源源代代码，如码，如图图1-31-3所示，该源代码就是使用所示，该源代码就是使用HTMLHTML语言编写的。语言编写的。1.4.2 HTML1.4.2 HTML网页的编写方法网页的编写方法1.H1.H下下MLML网页文件的命名规则网页文件的命名规则(1)(1)允允许许使使用用汉汉字字、英英文文字字母母、数数字字和和下下划划线线，不不能能包包含含空空格格与与特特殊符号。殊符号。(2)(2)名称区分大小写。名称区分大小写。返回下一页1.4 HTML基础基础(3)(3)网站主页文件名一般为网站主页文件名一般为index.htmindex

50、.htm或或index.html.index.html.2.2.使用使用HTMLHTML编写网页编写网页(1)(1)手手工工编编写写。这这是是最最传传统统的的编编写写方方法法。只只要要装装有有WindowsWindows系系统，使用统，使用“记事本记事本”即可编写出即可编写出HTMLHTML网页。网页。(2)(2)使使用用可可视视化化的的HTMLHTML编编辑辑软软件件，这这是是最最方方便便的的编编写写方方法法。例例如，如，FrontPage,DreamweaverFrontPage,Dreamweaver等。等。(3)(3)通通过过编编写写程程序序，由由PhPh服服务务器器实实时时、动动态态