网页制作教程指导.ppt

《网页制作教程指导.ppt》由会员分享，可在线阅读，更多相关《网页制作教程指导.ppt（169页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作教程指导 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望1.1 一个校园网的制作示例一个校园网的制作示例1.1.1 主要网页画面主要网页画面1.1.2 网页的基本功能网页的基本功能1.2 网页的基本要素网页的基本要素1.2.1 文字文字 文文字字是是网网页页发发布布信信息息所所用用的的主主要要形形式式，由由文文字字制制作作出出的的网网页页占占用用空空间间小小，因因此此，当当用用户户浏浏览览时时，可可以以很很快快的的展展现现在在用用户户面面前前。另另外外，文

2、文字字性性网网页页还还可可以以利利用用浏浏览览器器中中“文文件件”菜菜单单下下的的“另另存存为为”功功能能将将其其下下载载，便便于于以以后后长长期期阅阅读读，也也可可对对其其进进行行编编辑辑打打印印。但但是是没没有有编编排排点点缀缀的的纯纯文文字字网网页页，又又会会给给人人带带来来死死板板不不活活泼泼的的感感觉觉，使使得得人人们们不不愿愿意意再再往往下下浏浏览览。所所以以，文文字字性性网网页页一一定定要要注注意意编编排排，包包括括标标题题得得字字型型字字号号，内内容容的的层层次次样样式式，是是否否需需要要变换颜色进行点缀等等。变换颜色进行点缀等等。1标题标题 一个网页通常都有一个标题，表明本网

3、页的主要内容。标题是一个网页通常都有一个标题，表明本网页的主要内容。标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。很重要的。2字号字号 网页中的文字不能太大或太小。太大会使得一个网页信息量变，网页中的文字不能太大或太小。太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。规划，大小搭配适当，给人以生动活泼之感觉。3字型字型 在网页适当的位置采用不同的字体字型，也能使网页产生吸引在网页适

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

5、可以将采用的特殊字体制作成图如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。形方式，就可避免其他浏览者看不到的尴尬局面了。当文本内容较多时。可以利用表格形式来实现。当文本内容较多时。可以利用表格形式来实现。1.2.2 图形图形 这里的图形概念是广义的，它可以是普通的绘制图形，可以是这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的的文字形式和内容外，图形的表现功能是不能低估

6、的。网页上的图形格式一般使用图形格式一般使用JPEGJPEG和和GIFGIF，这两种格式具有跨平台的特性，可，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。下应用。1菜单按钮菜单按钮 网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。种形式，由此可以转入不同的页面。2背景图形背景图形 为了加强视觉效果，有些网页在整个网页的底层放置了图形，称为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图

7、。背景图可以使网页更加华丽，使人感到界面友好。但作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。较大网站一般都不设置背景图形。1.2.3 链接标志链接标志 链接是网页中一种非常重要的功能，是网页中最重要、最根链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可本的元素之一。通过链接

8、可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。1.2.4 交互功能交互功能 InternetInternet区别其他媒体的一个重要标志就是它的交互功能。区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过就需要将自己的决定通过InternetInternet告诉

9、这个网站，网站能够自动告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能够返回确认信息。价格等信息。如果用户选择确定，那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。像这种交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。

10、提交表单后，数据就会传送到服务器上。1.3 网页制作和美化工具网页制作和美化工具1.3.1网页制作工具网页制作工具1超文本标识语言（超文本标识语言（HTML）HTMLHTML（Hypertext Markup LanguageHypertext Markup Language）是一种专门用于）是一种专门用于WebWeb页制页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。显示文本，怎样生成与别的文本或图像的链接点。HTML HTML文档由文本、格式化代码和导向其他文档的超链接组成。

11、文档由文本、格式化代码和导向其他文档的超链接组成。2FrontPage FrontPageFrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制作工具。网页制作工具。FrontPageFrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。有直观的网页制作和管理方法，简化了大量工作。FrontPage FrontPage界面与界面与WordWord、PowerPointPowerPoint等软件的界面极为相似，等软件的界面极为相似，

12、为使用者带来了极大的方便，为使用者带来了极大的方便，MicrosoftMicrosoft公司将公司将FrontPageFrontPage封装入封装入OfficeOffice之中，成为之中，成为OfficeOffice家族的一员，使之功能更为强大。家族的一员，使之功能更为强大。3Dreamweaver DreamweaverDreamweaver是由是由MacromediaMacromedia公司推出的一款在网页制作方面大公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTMLHTML源代源代码就可以生成跨平台

13、、跨浏览器的网页，不仅适合于专业网页编辑人码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，员的需要，同时也容易被业余网友们所掌握。另外，DreamweaverDreamweaver的的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以能制作出相当于专业水准的网页，所以DreamweaverDreamweaver是网页设计者的是网页设计者的首选工具。首选工具。Dreamweaver Dreamweaver支持动态支持动态HTMLHTML

14、，并采用了，并采用了Roundtrip HTMLRoundtrip HTML技术，从技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态中，动态HTMLHTML技术能够让用户轻松设计复杂的交互式网页，产生动态技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而效果；而Roundtrip HTMLRoundtrip HTML技术则可以真正支持技术则可以真正支持HTMLHTML源编辑模式，不源编辑模式，不会产生冗余代码，使网页渲染速度加快。因此，会产生冗余代码，使网页渲染速度加快。因此，DreamweaverD

15、reamweaver是一种是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。1.3.2网页美化工具网页美化工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化页时，还需利用网页美化 工具对网页进行美化。工具对网页进行美化。1Photoshop Photoshop是由是由Adobe公司开发的图形处理软件，它是目前公认公司开发的图形处理软件，它是目前公认的的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、机上最好的通用平面美术

16、设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。都是首选的平面制作工具。2Fireworks Fireworks是由是由Macromedia公司开发的图形处理工具，它的出公司开发的图形处理工具，它的出现使现使Web作图发生了革命性的变化。因为作图发生了革命性的变化。因为Fireworks是第一套专门为是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。的解决方案。作为一款为网络设计而开

17、发的图像处理软件，作为一款为网络设计而开发的图像处理软件，Fireworks还能还能够自动切割图像、生成光够自动切割图像、生成光 标动态感应的标动态感应的JavaScript程序等等，而程序等等，而且且Fireworks具有强大的动画功能和一个相当完美的具有强大的动画功能和一个相当完美的 网络图像生网络图像生成器。成器。用户可以从用户可以从http:/站点下载该软件站点下载该软件。3Flash FlashFlash是美国是美国MacromediaMacromedia公司开发的矢量图形编辑和动画创作的公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声专业软

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

19、.1 1.4.1 整体规划整体规划 进行网站的整体规划也就是组织网站的内容和设计其结构。网进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。扩展性增强。层状结构层状结构 层状结构（如图层状结构（如图1.81.8所示）类似于目录系统的树型结构，由网站

20、所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。主 页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题图1.8 层状结构 线性结构线性结构 线性结构（如图线性结构（如图1.91.9所示）类似于数据结构中的线性表，用于所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。浏览

21、整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。性、规范性，又可同时满足设计者和浏览者的要求。主 页页面1页面2页面3图1.9 线性结构 Web结构结构 Web结构（如图结构（如图1.10所示）类似于所示）类似于Internet的组成结构，各网页的组成结构，各网页之间形成网状连接，允许用户随意浏览。之间形成网状连接，允许用户

22、随意浏览。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10 Web结构页面61收集整理资料收集整理资料2准备素材准备素材3内容规划内容规划1.4.2 网页设计与制作网页设计与制作1静态网页的设计与制作静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后

23、再通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是，而不具有任何交互功能的网页，它是WebWeb网页的重要组成部分。网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：网页的外观设计，提供以下建议：（1 1）不要先决定网页的外观，然后迫使自己去适应它，应该根据）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供

24、的信息以及制作目标得出一个最适合网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。的网页架构。（2 2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。粗大的字或图片。（3 3）切勿以）切勿以800600800600以上的分辨率设计网页，常用的分辨率是以上的分辨率设计网页，常用的分辨

25、率是640480640480及及800600800600。现在国内的站点基本上都是。现在国内的站点基本上都是800600800600，但，但是如果主要是面向国外访问者的站点，建议使用是如果主要是面向国外访问者的站点，建议使用640480640480。（4 4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。多，只会令人烦厌。（5 5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多）不要每页都采用不同的墙

26、纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。以树立自己的风格。（6 6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地不妨在底色与文字的搭配上下

27、些工夫，力求让访问者能够舒适地阅读网页。阅读网页。（7 7）不要把图片白色当作透明，要知道别人的系统不一定把内定）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。外，最好还是用图片编辑工具将图片设为透明颜色。2为网页的添加动态效果为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果包括一些脚本语言程

28、序和数据库程序的设计，以及加入动画效果等。等。1.4.3 测试网页测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错内容。完整

29、性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在方可正式在InternetInternet上发布。在进行功能性测试和完整性测试后，上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。有的还需要掌握整个站点的结构以备日后的修改。1.4.4 网页上传发布网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支能

30、展现出去。发布的服务器可以是远程，也可以是本地，但必须支持持ASPASP，因为动态程序是建立在，因为动态程序是建立在ASPASP基础上的。基础上的。通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.1.FrontPageFrontPage和和DreamweaverDreamweaver的基本操作的基本操作2.2.创建站点的方法创建站点的方法 3.3.管理站点的方法管理站点的方法 4.4.能够为站点添加网页能够为站点添加网页 5.5.导入文件到当前站点的方法导入文件到当前站点的方法6.6.发布站点的方法发布站点的方法 第第2章章 创建站点创建站点 2.1 利用利用FrontPa

31、ge 2002创建站点创建站点 2.1.1 FrontPage 2002简介简介 1FrontPage 2002的特色的特色（1）强大的网页设计功能）强大的网页设计功能 可以智能地完成可以智能地完成HTML文本的编辑，并可以针对不同的浏览器文本的编辑，并可以针对不同的浏览器对网页进行设置对网页进行设置;可以提供对多种版本的浏览器的支持可以提供对多种版本的浏览器的支持;完善了完善了所见即所得的网页编辑操作所见即所得的网页编辑操作（2）丰富的网页设计模板、设计向导和主题样式）丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。使用这提供了多种网页设计模板、网页设

32、计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。的网站。2FrontPage 2002的新增功能的新增功能 FrontPage 2002在在FrontPage 2000的原有功能基础上增加的原有功能基础上增加了图片库和增强的绘图工具，优化了更新、控制与管理站点的方了图片库和增强的绘图工具，优化了更新、控制与管理站点的方法。还增加了更多的表格格式选项、法。还增加了更多的表格格式选项、Office剪贴板任务窗格、网剪贴板任务窗格、网页选项卡、自定义链接栏和电子商务等其他新功能。页选项卡、自定义链接栏和电

33、子商务等其他新功能。3FrontPage 2002工作界面工作界面（1）标题栏）标题栏（2）菜单栏）菜单栏（3）常用工具栏）常用工具栏（4）格式工具栏）格式工具栏（5）窗口栏）窗口栏 “网页网页”视图视图 网页视图是进行网页编辑的操作界面。网页视图是进行网页编辑的操作界面。“文件夹文件夹”视图视图 文件夹视图的功能有些类似于文件夹视图的功能有些类似于Windows资源管资源管理器，主要是用来对网站的目录和文件夹进行管理理器，主要是用来对网站的目录和文件夹进行管理.“报表报表”视图视图 “报表报表”视图主要用于查看与网页制作有关的各项参视图主要用于查看与网页制作有关的各项参数。数。“导航导航”视

34、图视图 “导航导航”视图用来显示和编辑网页的导航关系。视图用来显示和编辑网页的导航关系。“超链接超链接”视图视图 “超链接超链接”视图显示的是站点中的某个网页与其他视图显示的是站点中的某个网页与其他网页之间的关系，网页之间的关系，“任务任务”视图视图 “任务任务”视图用来查看网站和网页设计的完成情视图用来查看网站和网页设计的完成情况。况。（6）状态栏）状态栏 2.1.2 创建站点创建站点1创建新站点创建新站点 选选择择“文文件件”|“新新建建”|“网网页页或或站站点点”命命令令，在在窗窗口口栏栏打打开开“新建网页或站点新建网页或站点”窗格；窗格；单单击击“新新建建”下下的的“空空白白站站点点”

35、超超级级链链接接，打打开开“Web站站点点模模板板”对话框对话框;单单击击站站点点模模板板中中的的“空空白白站站点点”图图标标，在在“指指定定新新站站点点的的位位置置”文本框中输入新站点的位置。单击文本框中输入新站点的位置。单击“确定确定”按钮按钮.注注意意：在在创创建建站站点点选选择择路路径径时时，最最好好选选择择某某个个文文件件夹夹作作为为站站点点，而而不不要要选选择择某某个个磁磁盘盘分分区区（例例如如F盘盘）作作为为站站点点，否否则则可可能能会会导导致整个磁盘分区瘫痪致整个磁盘分区瘫痪。2导入一个已存在的站点导入一个已存在的站点 要要导导入入一一个个站站点点，首首先先应应选选择择“文文件

36、件”菜菜单单下下的的“导导入入”命命令令，然后根据提示，依次选择需导入的站点即可。然后根据提示，依次选择需导入的站点即可。3将文件夹转换为站点将文件夹转换为站点 FrontPage 2002中可以将一个已经存在的文件夹转换为站点中可以将一个已经存在的文件夹转换为站点 2.1.3 管理站点管理站点 1打开站点打开站点 单击工具栏中的单击工具栏中的“打开打开”按钮，弹出按钮，弹出“打开文件打开文件”对话框，在对话框，在“打开文件打开文件”对话框中选择要打开得网页，选中之后，单击对话框中选择要打开得网页，选中之后，单击“打打开开”按钮，按钮，2重命名站点重命名站点 在创建站点时，如果没有为站点创建一

37、个好的名称，可以重在创建站点时，如果没有为站点创建一个好的名称，可以重新为站点命名。重命名新为站点命名。重命名Web站点时，站点时，FrontPage 2002会用新站点会用新站点名称自动更新所有内部超链接以及其他站点设置。名称自动更新所有内部超链接以及其他站点设置。3删除站点删除站点 如果创建的站点不理想，修改起来又十分麻烦，可以将站点删如果创建的站点不理想，修改起来又十分麻烦，可以将站点删除。在除。在FrontPage 2002中选择中选择“文件夹文件夹”视图，并选择要删除的视图，并选择要删除的站点，单击站点，单击“Delete”键，或单击鼠标右键，从弹出的快捷菜单键，或单击鼠标右键，从弹

38、出的快捷菜单中选择中选择“删除删除”命令，就可以删除所选的站点了。命令，就可以删除所选的站点了。注注意意：应应用用手手动动方方式式删删除除文文件件，删删除除的的文文件件会会自自动动放放置置于于“回回收收站站”中中，而而应应用用“删删除除”命命令令方方式式删删除除文文件件，被被删删除除的的文文件件直直接接从从磁盘中删除，是不可恢复的。磁盘中删除，是不可恢复的。2.1.4 为站点添加网页为站点添加网页 创建完站点，接下来的任务就是为站点添加网页。在创建完站点，接下来的任务就是为站点添加网页。在FrontPage 中，为站点添加网页的方法有两种。一种是：单击工具栏中的中，为站点添加网页的方法有两种。

39、一种是：单击工具栏中的“新建网页新建网页”按钮或者按快捷键按钮或者按快捷键“CtrlN”，打开一个空白网页，打开一个空白网页，设计者可以在网页编辑区编辑自己的网页；另一种是：选择设计者可以在网页编辑区编辑自己的网页；另一种是：选择“文文件件”|“新建新建”|“网页或站点网页或站点”命令，在打开的命令，在打开的“新建网页或站新建网页或站点点”窗格中单击窗格中单击“网页模板网页模板”超级链接，利用网页模板创建网页。超级链接，利用网页模板创建网页。2.1.5 导入文件到当前站点导入文件到当前站点 站点设计者可以通过导入一个页面而减轻自己的工作量，并站点设计者可以通过导入一个页面而减轻自己的工作量，并

40、吸收别人成功的经验（当然要得到版权的许可）。导入方法与导吸收别人成功的经验（当然要得到版权的许可）。导入方法与导入站点的方法类似。入站点的方法类似。2.1.6 发布站点发布站点 1设置浏览器的兼容性设置浏览器的兼容性 2测试站点测试站点（1）查看站点中的所有内部超链接）查看站点中的所有内部超链接（2）验证各个外部超链接的有效性）验证各个外部超链接的有效性（3）修复断开的超链接）修复断开的超链接（4）更新超链接）更新超链接 2.2 利用利用Dreamweaver 4.0创建站点创建站点2.2.1 Dreamweaver 4.0简介简介 1Dreamweaver 4.0的界面的界面（1）菜单栏）菜

41、单栏（2）工具栏）工具栏（3）对象面板）对象面板（4）浮动面板）浮动面板（5）文档窗口）文档窗口（6）状态栏）状态栏（7）启动面板）启动面板（8）属性面板）属性面板 2Dreamweaver的视图的视图 作为一种所见即所得的网页编辑软件，作为一种所见即所得的网页编辑软件，Dreamweaver自动在自动在用户创建网页时生成底层的用户创建网页时生成底层的HTML代码，同时提供了很好的代码，同时提供了很好的HTML代码编辑功能。使用工具栏中的视图切换按钮可以很方便代码编辑功能。使用工具栏中的视图切换按钮可以很方便地切换到代码视图，以便查看当前编辑网页的地切换到代码视图，以便查看当前编辑网页的HTM

42、L源代码。源代码。2.2.2 定义站点定义站点1 1站点窗口站点窗口 在在Dreamweaver 4.0的的编编辑辑窗窗口口，选选择择“Site”|“New Site”菜菜单单，可以打开站点窗口。可以打开站点窗口。站站点点窗窗口口是是Dreamweaver另另一一个个重重要要的的窗窗口口，左左半半部部是是远远程程站站点点的的目目录录，一一般般显显示示为为空空，只只有有在在FTP连连通通状状态态下下才才有有显显示示内内容容；右半部是当前编辑中的本地目录，有点像右半部是当前编辑中的本地目录，有点像windows的资源管理器。的资源管理器。2 2定义站点定义站点 方法方法1：在在站站点点窗窗口口的的

43、下下拉拉菜菜单单选选择择最最后后一一项项“Define Sites”，弹弹出出“Define Sites”对话框，点击对话框，点击“New”按钮定义一个新网站。按钮定义一个新网站。方法方法2：在在编编辑辑窗窗口口或或站站点点窗窗口口选选择择命命令令菜菜单单“Site”|“New Site”选选项项，弹弹出出“Site Definition for Unnamed Site”对对话话框框，设设置置结结束束单击单击“OK”按钮。按钮。2.2.3 站点的基本操作站点的基本操作 1 1打开站点打开站点 如如果果要要打打开开站站点点，可可以以在在文文档档窗窗口口或或站站点点窗窗口口中中单单击击“Site

44、”菜菜单单的的“Open Site”命命令令，然然后后在在弹弹出出列列表表中中选选择择当当前前已已经经定定义义过过的的站站点点名名称称。也也可可以以使使用用键键盘盘快快捷捷键键“F8”，此此时时将将打打开最后一次打开的站点窗口。开最后一次打开的站点窗口。2复制站点复制站点 若若要要复复制制当当前前站站点点，可可以以使使用用文文档档窗窗口口或或站站点点窗窗口口中中“Site”菜菜单单的的“Define Site”命命令令，打打开开“Define Site”对对话话框框。选选中中要要复复制制的的站站点点名名称称，单单击击“Duplicate”（复复制制）按按钮钮即即可可对对当前站点进行复制操作。当

45、前站点进行复制操作。3编辑站点编辑站点 如如果果要要更更改改当当前前站站点点设设置置，比比如如对对站站点点进进行行修修改改站站点点名名称称、设设置置参参数数选选项项等等编编辑辑操操作作，可可以以使使用用上上面面的的方方法法打打开开“Define Site”对对话话框框，选选中中一一个个站站点点后后单单击击“Edit”按按钮钮，即即可可打打开开该该站站点的定义对话框进行站点编辑。点的定义对话框进行站点编辑。4删除站点删除站点 在在Dreamweaver 4.0中中删删除除一一个个站站点点非非常常容容易易，在在弹弹出出的的“Define Site”对对话话框框中中，单单击击“Remove”（删删除

46、除）按按钮钮就就可可以以删删除选中的站点。除选中的站点。通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.HTML及其功能及其功能2.利用利用HTML创建和测试创建和测试Web页的方法页的方法3.利用利用HTML设置标题和文字设置标题和文字4.利用利用HTML设置段落设置段落5.利用利用HTML进行文本格式的处理进行文本格式的处理6.利用利用FrontPage 2002和和Dreamweaver 4.0处理处理文本文本第第3章章 网页文本的处理网页文本的处理 3.1 利用利用HTML处理文本处理文本 3.1.1 HTML基础基础1标记符标记符 标标记记符符又又称称标标签签，H

47、TML是是影影响响网网页页内内容容显显示示格格式式的的标标记记符符集集合，浏览器根据标记符决定网页的实际显示效果。合，浏览器根据标记符决定网页的实际显示效果。在在HTML中中，所所有有的的标标记记符符都都用用尖尖括括号号括括起起来来。例例如如，表表示示HTML标标记记符符。绝绝大大多多数数标标记记符符都都是是成成对对出出现现的的，包括开始标记符和结束标记符。包括开始标记符和结束标记符。如：如：.HTML标标记记符符是是不不区区分分大大小小写写的的，但但通通常常约约定定标标记记符符使使用用大大写写字字母母，这有利于这有利于HTML文档的维护。文档的维护。属属性性是是用用来来描描述述对对象象特特征

48、征的的特特性性。在在HTML中中，所所有有的的属属性性都都放放置置在在开开始始标标记记符符的的尖尖括括号号里里，属属性性与与标标记记符符之之间间用用空空格格分分隔隔，属属性性的的值值放放在在相相应应属属性性之之后后，用用等等号号分分隔隔，而而不不同同的的属属性性之之间间用用空格分隔。格式为：空格分隔。格式为：受受影影响响的的内内容容 HTML属性通常也不区分大小写。属性通常也不区分大小写。2HTML文档的基本结构文档的基本结构一个典型的一个典型的HTML文本的基本结构形式如下：文本的基本结构形式如下：文本标题文本标题文本内容文本内容上述文档用到四种标记符，其意义如下：上述文档用到四种标记符，其

49、意义如下：（1）HTML标记符标记符 这两个标记符是这两个标记符是HTML文档的标记符。文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从处于文档的最前端，表示文档的开始，即浏览器从开始解释。而开始解释。而则位于文件的最后一行，这样则位于文件的最后一行，这样的结果表示这一整份的文档都是的结果表示这一整份的文档都是HTML语法的文档。语法的文档。（2）HEAD标记符标记符 是是HTML文件头标记符，用来描述文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用出现在利用WWW浏览器所看到的窗体中。浏览器

50、所看到的窗体中。通常与某些标记符一起使用，如通常与某些标记符一起使用，如标记符。标记符。（3）TITLE标记符标记符 指的是一份文档的标题。通常来说，指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。而不同，但是大部分都位于浏览器的最上方。（4）BODY标记符标记符 指的是定义出一个指的是定义出一个HTML文档的体部，文档的体部，位于首部下面。在位于首部