网页基础知识.ppt

《网页基础知识.ppt》由会员分享，可在线阅读，更多相关《网页基础知识.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、21世纪高等院校规划教材网页设计与制作实用技术齐建玲 主编郭铁柱 刘博涛 何丽娟 副主编中国水利水电出版社 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.认识网页认识网页2.构成网页的基本要素构成网页的基本要素3.制作网页的基本工具制作网页的基本工具4.美化网页的基本工具美化网页的基本工具5.网页制作的基本步骤网页制作的基本步骤第第1章章 网页制作初识网页制作初识1.1 一个校园网的制作示例一个校园网的制作示例1.1.1 主要网页画面主要网页画面1.1.2 网页的基本功能网页的基本功能1.2 网页的基本要素网页的基本要素1.2.1 文字文字 文文字字是是网网页页发发布布信

2、信息息所所用用的的主主要要形形式式，由由文文字字制制作作出出的的网网页页占占用用空空间间小小，当当用用户户浏浏览览时时，可可以以很很快快的的展展现现在在用用户户面面前前。另另外外，文文字字性性网网页页还还可可以以利利用用浏浏览览器器中中“文文件件”菜菜单单下下的的“另另存存为为”功功能能将将其其下下载载。但但是是没没有有编编排排点点缀缀的的纯纯文文字字网网页页，又又会会给给人人带带来来死死板板不不活活泼的感觉，使得人们不愿意再往下浏览。泼的感觉，使得人们不愿意再往下浏览。文文字字性性网网页页一一定定要要注注意意编编排排，包包括括标标题题得得字字型型字字号，内容的层次样式，是否需要变换颜色进行点

3、缀等。号，内容的层次样式，是否需要变换颜色进行点缀等。1标题标题 一一个个网网页页通通常常都都有有一一个个标标题题，表表明明本本网网页页的的主主要要内内容容。标标题题是是否否醒醒目目，是是吸吸引引浏浏览览者者能能否否注注意意的的一一个个关关键，因此对标题的设计是很重要的。键，因此对标题的设计是很重要的。网网页页中中的的文文字字不不能能太太大大或或太太小小。太太大大会会使使得得一一个个网网页页信信息息量量变变小小，太太小小又又使使人人们们浏浏览览时时感感到到费费劲劲。一一个个优优秀秀网网页页中中的的文文字字，应应统统筹筹规规划划，大大小小搭搭配配适适当当，给给人以生动活泼之感觉。人以生动活泼之感

4、觉。2字号字号 在在网网页页适适当当的的位位置置采采用用不不同同的的字字体体字字型型，也也能能使使网网页页产产生生吸吸引引人人的的效效果果。应应该该注注意意的的是是在在报报刊刊上上变变换换字字体体字字型型非非常常普普遍遍，它它可可以以在在不不同同的的地地方方使使用用不不同同的的字字型型。但但在在网网页页制制作作上上却却要要慎慎重重。因因为为有有些些美美丽丽的的字字型型在在制制作作网网页页的的计计算算机机上上有有，但但将将来来别别人人浏浏览览你你的的网网页页时时，浏浏览览者者的的计计算算机机上上未未必必装装有有这这种种字字体体。这这样样浏浏览者就无法得到你预想的浏览效果，甚至适得相反。览者就无法

5、得到你预想的浏览效果，甚至适得相反。如如果果只只是是标标题题或或少少量量的的文文字字，可可以以将将采采用用的的特特殊殊字字体体制制作作成成图图形形方方式式，就就可可避避免免其其他他浏浏览览者者看看不不到到的的尴尬局面了。尴尬局面了。3字型字型 1.2.2 表格表格 当当文文本本内内容容较较多多时时，可可以以利利用用表表格格形形式式来来实实现现。表表格格是是在在网网页页上上的的一一行行或或多多行行单单元元格格，用用来来组组织织网网页页的的布布局局或或系系统统地地布布置置数数据据，用用户户可可以以放放置置任任何何东东西西在在表表格格的的单单元元格格中中，包包括括文文字字、图图形形和和表表单单等等。

6、表表格格具具有有容容量量大大、结结构构严严谨谨和和效效果果直直观观等等多多个个优优点点，是是网网页页中中不不可可缺缺少少的的记记录录或或总总结结工具。工具。表表格格还还可可以以用用来来控控制制网网页页中中信信息息的的布布局局方方式式。许许多多大大型型的的网网站站都都是是使使用用表表格格来来进进行行页页面面布布局局的的,使页面看起来更加直观和有条理。使页面看起来更加直观和有条理。1.2.3 图形图形 这这里里的的图图形形概概念念是是广广义义的的，它它可可以以是是普普通通的的绘绘制制图图形形，可可以以是是各各种种图图像像，还还可可以以是是动动画画。一一幅幅优优秀秀的的网网页页除除了了有有能能吸吸引

7、引浏浏览览者者的的文文字字形形式式和和内内容容外外，图图形形的的表表现现功功能能是是不不能能低低估估的的。网网页页上上的的图图形形格格式式一一般般使使用用JPEGJPEG和和GIFGIF，这这两两种种格格式式具具有有跨跨平平台台的的特特性性，可可以以在在不不同同操操作作系系统统支支持持的的浏浏览览器器上上显显示示。图图形形在在网网页页中中通通常有如下应用：常有如下应用：1菜单按钮菜单按钮 网网页页上上的的菜菜单单按按钮钮有有一一些些是是由由图图形形制制作作，通通常常有有横排和竖排两种形式，由此可以转入不同的页面。横排和竖排两种形式，由此可以转入不同的页面。2背景图形背景图形 为为了了加加强强视

8、视觉觉效效果果，有有些些网网页页在在整整个个网网页页的的底底层层放放置置了了图图形形，称称作作背背景景图图。背背景景图图可可以以使使网网页页更更加加华华丽丽，使使人人感感到到界界面面友友好好。但但由由于于这这是是一一个个比比较较大大的的图图形形，需需要要占占据据较较大大的的空空间间，致致使使网网页页的的显显示示速速度度明明显显变变慢慢，所所以以，近近期期的的网网页页以以及及比比较较著著名名的的访问量比较大网站一般都不设置背景图形。访问量比较大网站一般都不设置背景图形。1.2.4 链接标志链接标志 网网页页上上的的菜菜单单按按钮钮有有一一些些是是由由图图形形制制作作，通通常常有有横横排排和和竖竖

9、排排两两种种形形式式，由由此此可可以以转转入入不不同同的的页页面面。链链接接是是网网页页中中一一种种非非常常重重要要的的功功能能，是是网网页页中中最最重重要要、最最根根本本的的元元素素之之一一。通通过过链链接接可可以以从从一一个个网网页页转转到到另另一一个个网网页页，也也可可以以从从一一个个网网站站转转到到另另一一个个网网站站。链链接接的的标标志志有有文文字字和和图图形形两两种种。制制作作一一些些精精美美的图形作为链接按钮，使它和整个网页融为一体。的图形作为链接按钮，使它和整个网页融为一体。1.2.5 交互功能交互功能 InternetInternet区区别别其其他他媒媒体体的的一一个个重重要

10、要标标志志就就是是它它的的交交互互功功能能。网网页页的的交交互互功功能能其其他他媒媒体体是是无无法法比拟的。比拟的。通通常常网网页页的的交交互互功功能能都都是是利利用用表表单单来来实实现现的的。表表单单是是网网页页中中站站点点服服务务器器处处理理的的一一组组数数据据输输入入域域，当当访访问问者者单单击击按按钮钮或或图图形形来来提提交交表表单单后后，数数据据就就会传送到服务器上。会传送到服务器上。1.3 网页制作和美化工具网页制作和美化工具 HTMLHTML（Hypertext Hypertext Markup Markup LanguageLanguage）是是一一种种专专门门用用于于WebW

11、eb页页制制作作的的编编程程语语言言，用用来来描描述述超超文文本本各各个个部部分分的的内内容容，告告诉诉浏浏览览器器如如何何显显示示文文本本，怎怎样样生成与别的文本或图像的链接点。生成与别的文本或图像的链接点。HTMLHTML文文档档由由文文本本、格格式式化化代代码码和和导导向向其其他他文文档的超链接组成。档的超链接组成。1.3.1 网页制作工具网页制作工具 1超文本标识语言（超文本标识语言（HTML）DreamweaverDreamweaver是是由由MacromediaMacromedia公公司司推推出出的的一一款款在在网网页页制制作作方方面面大大众众化化的的软软件件，它它具具有有可可视视

12、化化编编辑辑界界面面，用用户户不不必必编编写写复复杂杂的的HTMLHTML源源代代码码就就可可以以生生成成跨跨平平台台、跨跨浏浏览览器器的的网网页页，不不仅仅适适合合于于专专业业网网页页编编辑人员的需要，同时也容易被业余网友们所掌握。辑人员的需要，同时也容易被业余网友们所掌握。DreamweaverDreamweaver支支 持持 动动 态态 HTMLHTML，并并 采采 用用 了了Roundtrip Roundtrip HTMLHTML技技术术，DreamweaverDreamweaver是是一一种种可可以以满满足足多多层层次次需需求求、功功能能强强大大的的可可视视化化专专业业级级网网页页设

13、设计计及制作工具。及制作工具。2Dreamweaver FrontPageFrontPage是是由由MicrosoftMicrosoft公公司司推推出出的的新新一一代代WebWeb网网页页制制作作工工具具。FrontPageFrontPage使使网网页页制制作作者者能能够够更更加加方方便便、快快捷捷地地创创建建和和发发布布网网页页，具具有有直直观观的的网网页页制作和管理方法，简化了大量工作。制作和管理方法，简化了大量工作。FrontPageFrontPage界界面面与与WordWord、PowerPointPowerPoint等等软软件件的的界界面面极极为为相相似似，为为使使用用者者带带来来了

14、了极极大大的的方方便便，MicrosoftMicrosoft公公司司将将FrontPageFrontPage封封装装入入OfficeOffice之之中中，成成为为OfficeOffice家族的一员，使之功能更为强大。家族的一员，使之功能更为强大。3FrontPage PhotoshopPhotoshop是是由由AdobeAdobe公公司司开开发发的的图图形形处处理理软软件件，它它是是目目前前公公认认的的PCPC机机上上最最好好的的通通用用平平面面美美术术设设计计软软件件，它它功功能能完完善善、性性能能稳稳定定、使使用用方方便便，所所以以在在几几乎乎所所有有的的广广告告、出出版版、软软件件公公司

15、司，PhotoshopPhotoshop都都是是首选的平面制作工具。首选的平面制作工具。1.3.2 网页美化工具网页美化工具 1Photoshop FireworksFireworks是是由由MacromediaMacromedia公公司司开开发发的的图图形形处处理理工工具具，它它的的出出现现使使WebWeb作作图图发发生生了了革革命命性性的的变变化化。因因为为FireworksFireworks是是第第一一套套专专门门为为制制作作网网页页图图形形而而设设计计的的软软件件，同同时时也也是是专专业业的的网网页页图图形形设设计计及及制制作作的的解解决决方方案案。作作为为一一个个图图像像处处理理软软

16、件件，FireworksFireworks能能够够自自由由地地导入多种格式的图像进行处理。导入多种格式的图像进行处理。FireworksFireworks还还能能够够自自动动切切割割图图像像、生生成成光光标标动动态态感感应应的的JavaScriptJavaScript程程序序等等等等，而而且且FireworksFireworks具具有有强强大的动画功能和一个相当完美的网络图像生成器。大的动画功能和一个相当完美的网络图像生成器。2Fireworks FlashFlash是是美美国国MacromediaMacromedia公公司司开开发发的的矢矢量量图图形形编编辑辑和和动动画画创创作作的的专专业业

17、软软件件，它它是是一一种种交交互互式式动动画画设设计计工工具具，用用它它可可以以将将音音乐乐、声声效效、动动画画以以及及富富有有新新意意的的界界面面融融合合在在一一起起，以以制制作作出出高高品品质质的的网网页页动动态态效效果果。它它主主要要应应用用于于网网页页设设计计和和多多媒媒体体创创作作等等领领域域，功功能能十十分分强强大大和和独独特特，已已成成为为交交互互式式矢矢量量动动画画的的标标准准，在在网网上上非非常常流流行行。FlashFlash广广泛泛应应用用于于网网页页动动画画制制作作、教教学学动画演示、网上购物、在线游戏等的制作中。动画演示、网上购物、在线游戏等的制作中。3Flash 1.

18、4 网页制作的基本步骤网页制作的基本步骤 网网站站定定位位要要小小，内内容容要要精精。如如果果要要制制作作一一个个包包罗罗万万象象的的站站点点，把把所所有有精精彩彩的的东东西西都都放放在在上上面面，结结果果往往往往会会事事与与愿愿违违，给给人人的的感感觉觉是是没没有有主主题题，没没有有特特色，色，样样样样有，却有，却样样样样都很肤浅。都很肤浅。网网站站的的题题材材最最好好选选自自己己擅擅长长或或者者喜喜爱爱的的内内容容。兴兴趣趣是是制制作作网网站站的的动动力力，没没有有热热情情，很很难难设设计计制制作作出优秀的网站。出优秀的网站。1.4.1 网站定位网站定位 进进行行网网站站的的整整体体规规划

19、划也也就就是是组组织织网网站站的的内内容容和和设计其结构。设计其结构。组组织织网网站站的的内内容容可可以以从从两两个个角角度度来来考考虑虑。从从设设计计者者的的角角度度来来考考虑虑，可可以以依依据据被被描描述述对对象象的的组组织织机机构构、类类别别划划分分等等来来组组织织内内容容；从从浏浏览览者者的的角角度度来来考考虑虑，就就应应该该将将各各种种素素材材依依据据浏浏览览者者的的需需要要进进行行内内容容分分类类，以以便便浏浏览览者者可可以以快快捷捷地地获获取取所所需需要要的的信信息息及及其其相相关关内容。内容。1.4.2 整体规划整体规划 合合理理的的结结构构设设计计对对于于网网站站的的规规划划

20、也也是是至至关关重重要要的的。以下是三种常用的结构类型。以下是三种常用的结构类型。层状结构层状结构 层状结构类似于目录系统的树型结构，层状结构类似于目录系统的树型结构，主主 页页页页面面1页页面面2页页面面3 线性结构线性结构 线线性性结结构构类类似似于于数数据据结结构构中中的的线线性性表表，用用于于组组织织本本身身的的线线性性顺顺序序形形式式存存在在的的信信息息，可可以以引引导导浏浏览览者按部就班地浏览整个网站文件。者按部就班地浏览整个网站文件。主主 页页页面页面1页面页面2页面页面3页面页面4页面页面5页面页面7页面页面8一级标题一级标题二级标题二级标题页面页面6 WebWeb结构结构 W

21、ebWeb结结构构类类似似于于InternetInternet的的组组成成结结构构，各各网网页页之之间形成网状连接，允许用户随意浏览。间形成网状连接，允许用户随意浏览。通通常常在在进进行行网网页页开开发发时时，首首先先都都进进行行静静态态网网页页的的制制作作，然然后后再再在在其其中中加加入入脚脚本本程程序序、表表单单等等动动态态内内容容。静静态态网网页页仅仅仅仅用用来来被被动动地地发发布布信信息息，而而不不具具有有任何交互功能，它是任何交互功能，它是WebWeb网页的重要组成部分。网页的重要组成部分。一一个个好好的的网网站站首首先先是是内内容容丰丰富富，其其次次就就是是网网页页设设计计美美观。

22、对于网页的外观设计，提供以下建议：观。对于网页的外观设计，提供以下建议：（1 1）不不要要先先决决定定网网页页的的外外观观，然然后后迫迫使使自自己己去去适适应应它它，应应该该根根据据网网站站的的访访问问者者对对象象、要要提提供供的的信信息息以及制作目标得出一个最适合的网页架构。以及制作目标得出一个最适合的网页架构。1.4.3 网页设计与制作网页设计与制作 1静态网页的设计与制作静态网页的设计与制作 （2 2）每每页页排排版版不不要要太太松松散散或或用用太太大大的的字字，尽尽量量避避免免访访问问者者浏浏览览网网页页时时要要作作大大幅幅度度的的滚滚动动，对对于于篇篇幅太长的一页可以使用内部链接解决

23、。幅太长的一页可以使用内部链接解决。（3 3）切切勿勿以以800800600600以以上上的的分分辨辨率率设设计计网网页页，常常用用的的分分辨辨率率是是640640480480及及800800600600。现现在在国国内内的的站站点点基基本本上上都都是是800800600600，但但是是如如果果主主要要是是面面向向国国外访问者的站点，建议使用外访问者的站点，建议使用640640480480。（4 4）不不应应在在每每页页中中插插入入太太多多的的广广告告。相相信信任任何何访访问问者者都都不不会会喜喜欢欢浏浏览览尽尽是是些些广广告告的的网网页页，要要考考虑虑该页内容与广告的比例，广告太多，只会令人

24、烦厌。该页内容与广告的比例，广告太多，只会令人烦厌。（5 5）不不要要每每页页都都采采用用不不同同的的墙墙纸纸，以以免免每每次次转转页时都要花费过多的时间去下载。页时都要花费过多的时间去下载。（6 6）底底色色或或墙墙纸纸必必须须与与文文字字对对比比强强烈烈，以以易易于于阅阅读读。如如果果网网页页是是文文章章式式或或是是包包含含大大量量文文字字，不不妨妨在在底底色色与与文文字字的的搭搭配配上上下下些些工工夫夫，力力求求让让访访问问者者能能够舒适地阅读网页。够舒适地阅读网页。（7 7）不不要要把把图图片片白白色色当当作作透透明明，要要知知道道别别人人的的系系统统不不一一定定把把内内定定底底色色设

25、设为为白白色色，解解决决的的办办法法除除了了真真的的把把该该网网页页的的底底色色设设为为白白色色之之外外，最最好好还还是是用用图图片编辑工具将图片设为透明颜色。片编辑工具将图片设为透明颜色。静静态态网网页页制制作作完完成成后后，接接下下来来的的工工作作就就是是为为网网页页添添加加动动态态效效果果，包包括括一一些些脚脚本本语语言言程程序序和和数数据据库库程程序的设计，以及加入动画效果等。序的设计，以及加入动画效果等。一一个个真真正正的的网网站站，不不仅仅应应该该实实现现传传统统媒媒体体的的电电子子化化，给给用用户户提提供供需需要要的的内内容容，而而且且还还应应该该做做更更多多的的事事情情，完完成

26、成比比页页面面浏浏览览更更高高层层次次的的需需求求，例例如如收收集集信息、数据传递、数据存储以及系统维护等。信息、数据传递、数据存储以及系统维护等。2为网页的添加动态效果为网页的添加动态效果 当当网网页页设设计计人人员员制制作作完完所所有有网网站站页页面面之之后后，需需要要对对所所设设计计的的网网页页进进行行审审查查和和测测试试，测测试试内内容容包包括括功功能性测试和完整性测试两个方面。能性测试和完整性测试两个方面。所所谓谓功功能能性性测测试试就就是是要要保保证证网网页页的的可可用用性性，达达到到最最初初的的内内容容组组织织设设计计目目标标，实实现现所所规规定定的的功功能能，读读者者可可方方便

27、便快快速速地地寻寻找找到到所所需需的的内内容容。完完整整性性测测试试就就是是保保证证页页面面内内容容显显示示正正确确，链链接接准准确确，无无差差错错无无遗遗漏。漏。1.4.4 测试网页测试网页 网网页页设设计计好好，必必须须把把它它发发布布到到互互连连网网上上，否否则则网网站站形形象象仍仍然然不不能能展展现现出出去去。发发布布的的服服务务器器可可以以是是远远程程，也也可可以以是是本本地地，但但必必须须支支持持ASPASP，因因为为动动态态程程序是建立在序是建立在ASPASP基础上的。基础上的。1.4.5 网页上传发布网页上传发布 网网站站的的宣宣传传和和推推广广一一般般有有两两种种途途径径和和

28、方方法法。一一是是通通过过传传统统媒媒体体进进行行广广告告宣宣传传；另另一一是是利利用用InternetInternet自身的特点向外宣传。自身的特点向外宣传。可可用用来来宣宣传传的的传传统统媒媒体体包包括括：电电视视、广广播播、报报纸纸、广告牌、海报和黄页等。广告牌、海报和黄页等。在在InternetInternet上上宣宣传传网网站站的的方方法法也也是是多多种种多多样样的的，如如可可以以将将网网址址和和网网站站信信息息发发布布到到搜搜索索引引擎擎、网网上上黄黄页页、新新闻闻组组、邮邮件件列列表表上上进进行行宣宣传传推推广广，也也可可以以与与其他同类网站交换宣传广告。其他同类网站交换宣传广告

29、。1.4.6 网站的宣传与推广网站的宣传与推广 现现在在的的网网站站注注重重信信息息的的不不断断更更新新和和交交互互性性，只只有有这这样样才才能能吸吸引引更更多多的的浏浏览览者者来来访访问问和和参参与与。如如何何知知道道哪哪些些网网页页内内容容需需要要调调整整、更更新新和和修修改改，网网页页需需要要增增加加那那些些内内容容呢呢？这这些些不不能能靠靠主主观观臆臆断断来来确确定定，而而是是需需要要得得到到访访问问者者的的反反馈馈意意见见，也也可可根根据据不不同同网网页的被访次数来分析。页的被访次数来分析。获获得得用用户户反反馈馈信信息息的的方方法法很很多多，常常用用的的有有计计数数器器、留留言言板板、调调查查表表等等，也也可可以以建建立立系系统统日日志志来来记记录录网网页的被访情况。页的被访情况。1.4.7 网站的反馈与评价网站的反馈与评价 网网站站要要注注意意经经常常维维护护更更新新内内容容，保保持持内内容容的的新新鲜鲜，不不要要做做好好就就放放到到服服务务器器永永远远不不变变了了，只只有有不不断断地地补补充充、更更新新内内容容，才才能能够够吸吸引引浏浏览览者者。维维护护更更新新时时可可以以充充分分利利用用DreamweaverDreamweaver提提供供的的模模板板和和库库技技术术，以以提高工作效率。提高工作效率。1.4.8 网站的更新与维护网站的更新与维护 E N D