工信版（中职）网页设计与制作教程1.ppt

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

1、YCF（中职）网页设计与制作教程1项目活动一网页设计与制作基础知识项目活动一网页设计与制作基础知识任务一认识网络、网站和网页任务一认识网络、网站和网页任务二初识网页制作软件任务二初识网页制作软件任务三站点和文件操作任务三站点和文件操作任务四网站制作流程任务四网站制作流程返回任务一认识网络、网站和网页任务一认识网络、网站和网页一、网站开发需要遵循的规范一、网站开发需要遵循的规范.网站规划书的撰写网站规划书的撰写在网站规划书中，在网站规划书中，要将网站的前期调查、网站目标、解决方案、功能要将网站的前期调查、网站目标、解决方案、功能需求、内容规则、设计风格、网站推广、网站测试及维护等内容进行需求、内

2、容规则、设计风格、网站推广、网站测试及维护等内容进行详细的说明和规范。详细的说明和规范。.目录规范目录规范目录的建立原则是以最少的层次提供最清晰简洁的访问结构。目录的建立原则是以最少的层次提供最清晰简洁的访问结构。对文件对文件的访问路径、存放位置要进行详细的规范。的访问路径、存放位置要进行详细的规范。比如，比如，根目录一般只允根目录一般只允许存放许存放 文件及相关系统文件目录，图片及多媒体元素要设文件及相关系统文件目录，图片及多媒体元素要设计专门的目录等。计专门的目录等。规范的目录是联合开发的基础。规范的目录是联合开发的基础。一个规范的网站一个规范的网站能够提供清晰的目录和说明。能够提供清晰的

3、目录和说明。下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页.命名规则命名规则不当的文件命名会直接造成开发者之间的混乱和维护的不便。不当的文件命名会直接造成开发者之间的混乱和维护的不便。运用大运用大家一致认可的命名方案和规范，家一致认可的命名方案和规范，使文件类别一目了然，使文件类别一目了然，防止错误的防止错误的命名命名(因为服务器系统的设置一般不使用中文名称或大写名称因为服务器系统的设置一般不使用中文名称或大写名称)。.技术文档技术文档在网站开发结束后，在网站开发结束后，要养成良好的撰写技术文档的习惯，要养成良好的撰写技术文档的习惯，为今后网为今后网站的维护、改版与持续性发展提

4、供参考，站的维护、改版与持续性发展提供参考，同时也是开发者最好的技术同时也是开发者最好的技术总结。总结。二、网站配色二、网站配色一个好的网站，一个好的网站，其成功的要素在于形式的美观合理和内容的准确翔实。其成功的要素在于形式的美观合理和内容的准确翔实。在网站的形式方面，在网站的形式方面，色彩体系的表现力直接影响形式的统一与美观。色彩体系的表现力直接影响形式的统一与美观。因此，因此，学习必要的网页配色知识、掌握基本色彩的搭配技巧对网页设学习必要的网页配色知识、掌握基本色彩的搭配技巧对网页设计有着重要的意义。计有着重要的意义。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页设

5、计网页时，设计网页时，切记以下几点切记以下几点:.忌忌“花花”:颜色不要过多颜色不要过多.冷暖搭配要谨慎冷暖搭配要谨慎.网站各界面色彩统一网站各界面色彩统一.不要用不要用“花花”背景背景三、常见网站类型三、常见网站类型在开始建设网站之前，在开始建设网站之前，应该首先根据项目、目标浏览者和资源制订一应该首先根据项目、目标浏览者和资源制订一个计划。个计划。当清楚了要建设一个什么样的网站之后，当清楚了要建设一个什么样的网站之后，才好确定网站的才好确定网站的开发者和项目的技术范围。开发者和项目的技术范围。常常上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页四、首页的设计原则四、首

6、页的设计原则.首页在网站中的作用和意义首页在网站中的作用和意义首页或主页是网站的第一页，首页或主页是网站的第一页，也是网站的总入口。也是网站的总入口。它包含了整个网它包含了整个网站的索引、网站的动态更新等内容。站的索引、网站的动态更新等内容。可以说，可以说，首页是网站的首页是网站的“脸面脸面”，它集中代表了网站的形象。它集中代表了网站的形象。一个网民是否有兴趣浏览网站，一个网民是否有兴趣浏览网站，在在很大程度上取决于首页。很大程度上取决于首页。网站的风格也集中体现在首页的设计上。网站的风格也集中体现在首页的设计上。所以对于一个网站来说，所以对于一个网站来说，首页是最重要的页面。首页是最重要的页

7、面。另外，另外，网站也是浏览者的向导，网站也是浏览者的向导，它应该具有很清晰的浏览机制和导它应该具有很清晰的浏览机制和导航系统。航系统。此外，此外，网站还担负着吸引网民注意力的重要使命，网站还担负着吸引网民注意力的重要使命，如果没如果没有新颖的设计和引人入胜的内容，有新颖的设计和引人入胜的内容，人们很快就会离开网站。人们很快就会离开网站。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页.内容选择内容选择:重要的东西放在首页上重要的东西放在首页上首页犹如商店的橱窗，首页犹如商店的橱窗，不可能将所有的内容都列出来，不可能将所有的内容都列出来，只能将最好只能将最好的、最重要的东

8、西放置在第一页，的、最重要的东西放置在第一页，这也是为了吸引注意力，这也是为了吸引注意力，增加浏增加浏览者点击的欲望。览者点击的欲望。初学者容易犯的一个错误是，初学者容易犯的一个错误是，把页面搞得很花哨，把页面搞得很花哨，却让人弄不明白要突出的主题和内容是什么，却让人弄不明白要突出的主题和内容是什么，况且杂乱的内容会分散况且杂乱的内容会分散人的注意力。人的注意力。既然首页的位置如此宝贵，既然首页的位置如此宝贵，那么应该放什么内容呢那么应该放什么内容呢?首先，首先，应该把网站最具特色、最具吸引力的内容放置在首页上，应该把网站最具特色、最具吸引力的内容放置在首页上，使使网民可以迅速进入主题。网民可

9、以迅速进入主题。新浪是一个以新闻为特色和主要内容的网站，新浪是一个以新闻为特色和主要内容的网站，虽然它有很多其他方面的内容，虽然它有很多其他方面的内容，但首页上大部分的位置都放置新闻内但首页上大部分的位置都放置新闻内容，容，因为浏览者来这里的最大目的就是观看新闻。因为浏览者来这里的最大目的就是观看新闻。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页其次，其次，要考虑到网民的需要。要考虑到网民的需要。很多网站把浏览者可能需要的东西放很多网站把浏览者可能需要的东西放在首页上，在首页上，如网站点击排行等内容，如网站点击排行等内容，虽然很多大型网站的网站定位虽然很多大型网站的网

10、站定位和经营内容不同，和经营内容不同，但都在醒目的位置安排了手机铃声、短信等内容，但都在醒目的位置安排了手机铃声、短信等内容，因为这是网民所感兴趣的。因为这是网民所感兴趣的。再次，再次，把及时更新的内容放到首页上。把及时更新的内容放到首页上。首页上有固定的内容，首页上有固定的内容，也有也有不断更新的内容，比如门户网站每天提供的焦点新闻等内容。不断更新的内容，比如门户网站每天提供的焦点新闻等内容。应当把应当把网站近期所做的更新尽量放在首页上体现出来，网站近期所做的更新尽量放在首页上体现出来，这样可以经常为浏览这样可以经常为浏览者提供崭新的内容，者提供崭新的内容，增加浏览者的访问频率和兴趣。增加浏

11、览者的访问频率和兴趣。.风格及版式结构确定风格及版式结构确定由于网站的首页集中体现了网站的整体风格，由于网站的首页集中体现了网站的整体风格，所以首页本身的风格决所以首页本身的风格决定了整个网站的风格，定了整个网站的风格，也是其他栏目界面设计的根据。也是其他栏目界面设计的根据。网站风格的网站风格的确定主要通过以下几个方面完成确定主要通过以下几个方面完成:标准色彩、图片样式、网页装饰及标准色彩、图片样式、网页装饰及版式结构。版式结构。色彩和样式决定了风格的形成，色彩和样式决定了风格的形成，而这种搭配又要以网站而这种搭配又要以网站的定位为依据。的定位为依据。上一页 下一页返回任务一认识网络、网站和网

12、页任务一认识网络、网站和网页.位置的安排位置的安排:区域分割、网眼区域分割、网眼首页的位置是宝贵的，首页的位置是宝贵的，除了相关固定的及动态的栏目外，除了相关固定的及动态的栏目外，首页上还首页上还有大量的图片和广告，有大量的图片和广告，为它们寻找最适当的位置也是非常重要的。为它们寻找最适当的位置也是非常重要的。比如网站的比如网站的 是网站形象的代表，是网站形象的代表，所以一般放在网站的黄金所以一般放在网站的黄金位置位置左上角左上角(网眼网眼)。首页的内容往往是多而繁杂的，首页的内容往往是多而繁杂的，需要进行合理的布局设计，需要进行合理的布局设计，进行内进行内容的分类和分割，安排好栏目出现的位置

13、，容的分类和分割，安排好栏目出现的位置，为浏览者提供了一个尽可为浏览者提供了一个尽可能清晰的结构。能清晰的结构。常用的方法是，常用的方法是，通过色彩或线条将网页分割成几个通过色彩或线条将网页分割成几个基本的模块，基本的模块，然后将众多栏目按照类别分别排放，然后将众多栏目按照类别分别排放，把重要和最新的把重要和最新的东西放在上方，东西放在上方，把相对固定的内容放在下方。把相对固定的内容放在下方。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页.标志的放置标志的放置标志标志()是网站形象的代表。是网站形象的代表。因其对网站的重要性，因其对网站的重要性，往往将往往将其放在首页中

14、醒目的位置，其放在首页中醒目的位置，在其他级别的页面中基本也都出现。在其他级别的页面中基本也都出现。为为了保证浏览者进入首页的第一眼可以看到，了保证浏览者进入首页的第一眼可以看到，的位的位置基本上被设计在左上角置基本上被设计在左上角“网眼网眼”附近的位置，附近的位置，这也是网站中的黄这也是网站中的黄金位置。金位置。也是网站各级别页面保持相互联系的一个重要因也是网站各级别页面保持相互联系的一个重要因素。素。.广告位广告位几乎任何媒体中都存在着广告。几乎任何媒体中都存在着广告。作为一种商业手段，作为一种商业手段，广告是网站中广告是网站中最常见的元素。最常见的元素。在互联网发展初期，在互联网发展初期

15、，广告很少，广告很少，但近些年来，但近些年来，广告广告几乎成了网站盈利最重要的手段之一几乎成了网站盈利最重要的手段之一(对商业性的网站而言对商业性的网站而言)。一个有一个有影响力的网站，影响力的网站，广告浏览率是非常高的，广告浏览率是非常高的，其广告功能也就发挥得比其广告功能也就发挥得比较好较好。广告在网页上有多种不同的表现形式，广告在网页上有多种不同的表现形式，其中最常见的是旗帜广告、浮其中最常见的是旗帜广告、浮动广告和弹出广告等动广告和弹出广告等。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页首页是网站的总入口，首页是网站的总入口，所以最重要的广告也集中体现在这里。

16、所以最重要的广告也集中体现在这里。广告广告对于网页来说，对于网页来说，是一个尴尬的问题是一个尴尬的问题:一方面，一方面，它的出现势必对网站的它的出现势必对网站的整体和美观造成一定的影响整体和美观造成一定的影响 另一方面，另一方面，它又是网站盈利的重要手段。它又是网站盈利的重要手段。但通过合理的设计可以对它进行控制，但通过合理的设计可以对它进行控制，甚至使其成为网页的点缀甚至使其成为网页的点缀。从位置来看，从位置来看，旗帜广告一般存在于页眉、页脚和页中。旗帜广告一般存在于页眉、页脚和页中。从视觉流程从视觉流程来讲，来讲，页眉是优势位置，页眉是优势位置，其位置的醒目性仅次于，其位置的醒目性仅次于，

17、所以对所以对网站形象影响最大。网站形象影响最大。不过无论哪种广告，不过无论哪种广告，都应当把广告的数量控制都应当把广告的数量控制在一个较小的范围之内，在一个较小的范围之内，太多的广告不仅严重影响页面的美观，太多的广告不仅严重影响页面的美观，而而且也会造成浏览者的强烈反感而达不到预期的效果。且也会造成浏览者的强烈反感而达不到预期的效果。.内容的多链接进入方式内容的多链接进入方式首页是网站内容的入口，首页是网站内容的入口，在大量的信息内容中，在大量的信息内容中，如何使浏览者在尽如何使浏览者在尽量短的时间内到达需要的信息页面呢量短的时间内到达需要的信息页面呢?在网络结构中，在网络结构中，人们可以通过

18、人们可以通过各种方式到达信息页面，各种方式到达信息页面，打破了传统的线性检索方式，打破了传统的线性检索方式，这主要归功这主要归功于超级链接的使用。于超级链接的使用。上一页 下一页返回任务一认识网络、网站和网页任务一认识网络、网站和网页超级链接允许人们在网站的任意位置到达所链接的位置，超级链接允许人们在网站的任意位置到达所链接的位置，为用户浏览为用户浏览信息提供了多种便利。信息提供了多种便利。另外，另外，还可以为精彩和有特色的栏目在首页还可以为精彩和有特色的栏目在首页设立设立“精彩推荐精彩推荐”“专题专题”等动态栏目直接进行链接。等动态栏目直接进行链接。再如，再如，可以可以在固定栏目的传统链接方

19、式之外，在固定栏目的传统链接方式之外，通过首页上的栏目列表，通过首页上的栏目列表，将固定将固定栏目的二级甚至是三级栏目的链接直接列出，栏目的二级甚至是三级栏目的链接直接列出，使浏览者可以直接进入使浏览者可以直接进入最终页面最终页面。上一页返回任务二初识网页制作软件任务二初识网页制作软件一、软件介绍一、软件介绍 是由是由 公司开发的图像处理软件，公司开发的图像处理软件，被被公认为目前公认为目前 上最好的平面美术设计软件，上最好的平面美术设计软件，它功能完善、性能稳它功能完善、性能稳定、使用方便，定、使用方便，几乎所有的广告公司、出版社、软件公司都将几乎所有的广告公司、出版社、软件公司都将 作为平

20、面制作工具的首选。作为平面制作工具的首选。是也由是也由 公司开发的图像处理软件，公司开发的图像处理软件，是第一套专门为制作网页图形而设计的软件，是第一套专门为制作网页图形而设计的软件，提供了网页图形设计及提供了网页图形设计及制作的解决方案。制作的解决方案。作为一款为网络设计而开发的图像处理软件，作为一款为网络设计而开发的图像处理软件，能够自动切割图像、生成光标动态感应的能够自动切割图像、生成光标动态感应的 程序，程序，且具有强大的动画功能和相当完美的网络图像且具有强大的动画功能和相当完美的网络图像生成器。生成器。是由是由 公司开发设计的交互式动画设计软件，公司开发设计的交互式动画设计软件，可以

21、将声音、动画以及富有新意的界面融合在一起，可以将声音、动画以及富有新意的界面融合在一起，制作出高品质的制作出高品质的网页动态效果。网页动态效果。广泛应用于网页动画制作中广泛应用于网页动画制作中。下一页返回任务二初识网页制作软件任务二初识网页制作软件 是由是由 公司推出的新一代公司推出的新一代 网页制作软件。网页制作软件。由于由于 界面与、界面与、等软件的界面极为相似，等软件的界面极为相似，因此网页制作者能够因此网页制作者能够更加方便、快捷地创建和发布网页，更加方便、快捷地创建和发布网页，且且 具有直具有直观的网页制作和管理方法，观的网页制作和管理方法，简化了大量的工作简化了大量的工作。是是 公

22、司推出的一款大众化的网公司推出的一款大众化的网页制作软件，页制作软件，它具有可视化编辑界面，它具有可视化编辑界面，用户不用编写复杂的用户不用编写复杂的 代码就可以生成跨平台、跨浏览器的网页，代码就可以生成跨平台、跨浏览器的网页，既适合于专业网页编既适合于专业网页编辑人员，辑人员，同时也容易为业余网页制作人员所掌握。同时也容易为业余网页制作人员所掌握。市面上有很多种市面上有很多种网页编辑软件，有的重视效率，网页编辑软件，有的重视效率，有的强调版面设计，有的强调版面设计，而这些功能在而这些功能在 中都可以很方便地实现。中都可以很方便地实现。还支持动态还支持动态 技术，技术，并采用并采用 技术。技术

23、。在网页设计过程中，在网页设计过程中，上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件动态动态 技术能够让用户轻松设计复杂的交互式网页，技术能够让用户轻松设计复杂的交互式网页，产生动产生动态效果，态效果，从而奠定了其在网页高级设计功能方面的领先地位。从而奠定了其在网页高级设计功能方面的领先地位。因此，因此，是一款可以满足多层次需求的可视化专业级是一款可以满足多层次需求的可视化专业级网页制作软件。网页制作软件。目前，目前，网页设计与制作一般采用的软件是、网页设计与制作一般采用的软件是、和和 的组合，即使用的组合，即使用 设计与制作网站和网页，设计与制作网站和网页，使用使用 制作和制

24、作和处理网页中用到的图像，处理网页中用到的图像，使用使用 制作和处理网页中的动画。制作和处理网页中的动画。上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件二、了解二、了解 界面界面组成组成 是集网页制作与网站管理于一体的是集网页制作与网站管理于一体的可视化网页编辑制作工具，可视化网页编辑制作工具，是网页设计开发人员使用最多的网页制作是网页设计开发人员使用最多的网页制作软件，软件，具有具有“所见即所得所见即所得”的特点和强大的跨平台、跨浏览器功能。的特点和强大的跨平台、跨浏览器功能。安装安装 与安装其他软件的方法大体相与安装其他软件的方法大体相似，似，在此不再过多叙述。在此不再过多

25、叙述。在安装在安装 后，后，通过桌面上通过桌面上 的快捷方式或通过程序的快捷方式或通过程序菜单都可以启动菜单都可以启动。启动启动 软件后，软件后，创建新创建新 文档，文档，就可以打开就可以打开 的工作界面，的工作界面，如如图图 所示。所示。的工作界面主要包括菜单的工作界面主要包括菜单栏、标题栏、工具栏、状态栏、工作区域、属性栏和面板栏等。栏、标题栏、工具栏、状态栏、工作区域、属性栏和面板栏等。上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件.菜单栏菜单栏主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。这些菜单这些菜单允许用户

26、方便地管理整个主窗口的布局，允许用户方便地管理整个主窗口的布局，配置配置 环境。环境。菜单栏由菜单栏由“文件文件”“编辑编辑”“查看查看”“插入插入”“修改修改”“格式格式”“命令命令”“站点站点”“窗口窗口”“帮助帮助”等项目组成，等项目组成，用于用于对当前文档执行一些操作以及对对当前文档执行一些操作以及对 主窗口布局主窗口布局进行一些修改。进行一些修改。另外菜单栏的另外菜单栏的“帮助帮助”项，项，提供了关于使用提供了关于使用 和创建和创建 扩展功能的帮助扩展功能的帮助系统及各种语言的参考材料。系统及各种语言的参考材料。.标题栏标题栏标题栏处显示当前文档的名称。标题栏处显示当前文档的名称。允

27、允许同时对多个文件进行编辑与修改，许同时对多个文件进行编辑与修改，当打开多个文件时，当打开多个文件时，标题栏处标题栏处显示多个文件。显示多个文件。通过单击文件名的方式可以实现在多个文档间的切换。通过单击文件名的方式可以实现在多个文档间的切换。上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件.工具栏工具栏使用工具栏中的视图按钮可以快速切换到文档的不同视图，使用工具栏中的视图按钮可以快速切换到文档的不同视图，包括包括:代代码视图、设计视图和拆分视图。码视图、设计视图和拆分视图。其中代码视图在工作区域显示当前文其中代码视图在工作区域显示当前文档的档的 代码，代码，主要用于网页的修改、特

28、效的制作和动态网站主要用于网页的修改、特效的制作和动态网站的开发的开发 设计视图是网页设计与制作人员使用较多的视图，设计视图是网页设计与制作人员使用较多的视图，在此视图在此视图中可以实现中可以实现“所见即所得所见即所得”的设计制作，的设计制作，网页设计人员可以在此区网页设计人员可以在此区域对网页的元素如文字、图像和表格等进行可视化处理域对网页的元素如文字、图像和表格等进行可视化处理 拆分视图是拆分视图是指在工作区域的上半部分显示代码，在下半部分显示设计效果，指在工作区域的上半部分显示代码，在下半部分显示设计效果，此视此视图在网页修改过程中使用较多。图在网页修改过程中使用较多。工具栏中还包含一些

29、与查看文档、本地和远程站点间传输文档有关的工具栏中还包含一些与查看文档、本地和远程站点间传输文档有关的常用命令和选项，常用命令和选项，如输入网页的标题、预览网页等。如输入网页的标题、预览网页等。上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件.状态栏状态栏状态栏也叫标签选择器，状态栏也叫标签选择器，用于显示环绕当前选定内容的标签的层次结用于显示环绕当前选定内容的标签的层次结构。构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击该层次结构中的任何标签可以选择该标签及其全部内容。在网页设计时，在网页设计时，有时通过单击和拖动鼠标很难选定有关的内容，有时通过单击和拖动鼠标很

30、难选定有关的内容，单单击状态栏的相应标签选择相关内容是网页制作人员经常采用的方法，击状态栏的相应标签选择相关内容是网页制作人员经常采用的方法，如表格标签如表格标签、表格中的一行、表格中的一行、表格中的一个、表格中的一个单元格单元格 等。等。.属性栏属性栏属性栏也叫属性面板。属性栏也叫属性面板。在网页制作过程中，在网页制作过程中，尤其是网页美工设计与尤其是网页美工设计与网站前台制作过程中，网站前台制作过程中，主要任务就是插入网页元素主要任务就是插入网页元素(如文字、表格、如文字、表格、图像图像)，然后通过属性面板设计其属性。所以属性面板是网页设计人然后通过属性面板设计其属性。所以属性面板是网页设

31、计人员最常用的面板，员最常用的面板，通过属性面板查看和更改所选对象或文本的各种属通过属性面板查看和更改所选对象或文本的各种属性。性。选定的对象不同，选定的对象不同，属性面板包含信息的也不同。属性面板包含信息的也不同。上一页 下一页返回任务二初识网页制作软件任务二初识网页制作软件如果如果 软件界面上不显示属性面板，软件界面上不显示属性面板，则执行菜单命令则执行菜单命令“窗口窗口”“属性属性”，属性面板就会显示在窗口界面。属性面板就会显示在窗口界面。同理，同理，如果需要在界面上显示其他面板，如果需要在界面上显示其他面板，都可以通过都可以通过“窗口窗口”菜单菜单进行设置。进行设置。.面板栏面板栏除了

32、创建和插入网页元素以及对网页元素的属性进行修改外，除了创建和插入网页元素以及对网页元素的属性进行修改外，将其强大的网页制作与网站管理功能以面将其强大的网页制作与网站管理功能以面板栏的形式放在其界面的右侧，板栏的形式放在其界面的右侧，如对站点和文件进行管理的面板、对如对站点和文件进行管理的面板、对 样式进行设置的面板等。样式进行设置的面板等。面板栏中选定的面板显示为一个选面板栏中选定的面板显示为一个选项卡，项卡，每个面板都可以展开或折叠，每个面板都可以展开或折叠，并且可以和其他面板停靠在一并且可以和其他面板停靠在一起，起，还可以停靠到集成的应用程序窗口中。还可以停靠到集成的应用程序窗口中。这使得

33、网页设计者能够这使得网页设计者能够很容易地访问所需的面板，很容易地访问所需的面板，而不会使工作区变得混乱。而不会使工作区变得混乱。上一页返回任务三站点和文件操作任务三站点和文件操作一、启动、退出一、启动、退出 启动启动 后，后，首先显示其起始页面。首先显示其起始页面。通通过起始页面可以直接打开最近使用过的文档或其他文档，过起始页面可以直接打开最近使用过的文档或其他文档，也可以创建也可以创建新文档，新文档，如如图图 所示。所示。单击单击图图 右上角的关闭按钮，右上角的关闭按钮，可以退出可以退出。也可以单击左上角的也可以单击左上角的 图图标，标，执行执行“关闭关闭”命令或直接按命令或直接按“”组合

34、键，组合键，退出退出。下一页返回任务三站点和文件操作任务三站点和文件操作二、创建站点二、创建站点下面通过实例了解创建站点的一般方法。下面通过实例了解创建站点的一般方法。)通过开始菜单，通过开始菜单，启动启动，执行菜执行菜单命令单命令“站点站点”“新建站点新建站点”，弹出弹出“新建站点新建站点”对话框，对话框，如如图图 和和图图 所示。所示。“本地信息本地信息”选项选项:定义或修改本地站点。定义或修改本地站点。“站点名称站点名称”:在文本框中输入用户自定义的站点名称。在文本框中输入用户自定义的站点名称。“本地站点文件夹本地站点文件夹”:在文本框中输入本地磁盘中存储站点文件、模在文本框中输入本地磁

35、盘中存储站点文件、模板和库项目的文件夹的路径，板和库项目的文件夹的路径，或者单击浏览文件夹图标查找到该文件或者单击浏览文件夹图标查找到该文件夹。夹。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作“默认图像文件夹默认图像文件夹”:在文本框中输入此站点的默认图像文件夹的路在文本框中输入此站点的默认图像文件夹的路径，径，或者单击浏览文件夹图标查找到该文件夹。或者单击浏览文件夹图标查找到该文件夹。例如，例如，将非站点图将非站点图像添加到网页中时，像添加到网页中时，图像会自动添加到当前站点的默认图像文件夹中。图像会自动添加到当前站点的默认图像文件夹中。“区分大小写的链接检查区分大小写的链接检

36、查”:选择此复选框，选择此复选框，则对使用区分大小写的则对使用区分大小写的链接进行检查链接进行检查。“启用缓存启用缓存”:指定是否创建本地缓存以提高链接和站点管理任务的指定是否创建本地缓存以提高链接和站点管理任务的速度。速度。若选择此复选框，若选择此复选框，则创建本地缓存。则创建本地缓存。)设置完成，设置完成，单击单击“保存保存”按钮。按钮。)完成站点的创建后，完成站点的创建后，新建的站点显示在软件主界面的右下角，新建的站点显示在软件主界面的右下角，如如图图 所示。所示。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作三、文件的创建与管理三、文件的创建与管理文件的创建与管理可以实现网

37、页的新建、删除、保存及重命名等操作，文件的创建与管理可以实现网页的新建、删除、保存及重命名等操作，可以从可以从“文件文件”菜单中选择相应的命令完成上述操作，菜单中选择相应的命令完成上述操作，也可以在也可以在图图 所示的文件面板中完成文件的新建、删除和重命名操作。所示的文件面板中完成文件的新建、删除和重命名操作。后后者具有操作简便的特点，者具有操作简便的特点，所以被更多的网页设计与制作人员采用。所以被更多的网页设计与制作人员采用。具体的操作方法如下具体的操作方法如下:)新建网页新建网页:鼠标右键单击站点文件夹，鼠标右键单击站点文件夹，选择选择“新建文件新建文件”命令，命令，如如图图 所示，就可以

38、新建一个网页文件。所示，就可以新建一个网页文件。双击打开此文件，双击打开此文件，在在工作区域中对其进行编辑操作，工作区域中对其进行编辑操作，或执行菜单命令或执行菜单命令“文件文件”“新建新建”，选择选择“空白页面空白页面”。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作)网页重命名网页重命名:鼠标右键单击新建的文件名，鼠标右键单击新建的文件名，执行菜单命令执行菜单命令“编辑编辑”“重命名重命名”，文件名变成可编辑状态，文件名变成可编辑状态，输入新的网页名称，输入新的网页名称，完完成网页重命名的操作。成网页重命名的操作。)删除网页删除网页:鼠标右键单击新建的文件名，鼠标右键单击新建的

39、文件名，执行执行“编辑编辑”“删除删除”命令，命令，就可以删除选定的网页。就可以删除选定的网页。)保存网页保存网页:执行菜单命令执行菜单命令“文件文件”“保存保存”或按或按“”组合键，组合键，即可保存网页即可保存网页。)关闭网页关闭网页:执行菜单命令执行菜单命令“文件文件”“关闭关闭”或直接单击页面名或直接单击页面名称旁边的关闭按钮称旁边的关闭按钮。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作四、站点管理四、站点管理在新建站点后，在新建站点后，可以对站点进行打开、修改、复制、删除、导入和导可以对站点进行打开、修改、复制、删除、导入和导出等操作。出等操作。.打开站点打开站点()启动

40、启动。()执行菜单命令执行菜单命令“窗口窗口”“文件文件”，打开打开“文件文件”面板，面板，在其在其中选择要打开的站点名，中选择要打开的站点名，打开站点，打开站点，如如图图 和和图图 所示。所示。修改站点修改站点()执行菜单命令执行菜单命令“站点站点”“管理站点管理站点”，打开打开“管理站点管理站点”对对话框，话框，如如图图 所示所示。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作()在对话框中，在对话框中，双击站点名称，双击站点名称，弹出弹出“站点设置对象站点设置对象”对话框，对话框，此时可根据需要进行修改，此时可根据需要进行修改，如如图图 所示，所示，修改完成后，修改完成后，单

41、单击击“保存保存”按钮完成设置。按钮完成设置。()如果不需要修改其他站点，如果不需要修改其他站点，可单击可单击“完成完成”按钮，按钮，关闭关闭“管理管理站点站点”对话框。对话框。.复制站点复制站点()在在“管理站点管理站点”对话框左侧的站点列表中选择要复制的站点，对话框左侧的站点列表中选择要复制的站点，单击单击“复制复制”按钮进行复制按钮进行复制。()用鼠标左键双击新复制的站点，用鼠标左键双击新复制的站点，在弹出的在弹出的“站点设置对象站点设置对象”对对话框中输入新站点的名称话框中输入新站点的名称。.删除站点删除站点()在在“管理站点管理站点”对话框左侧的站点列表选择要删除的站点。对话框左侧的

42、站点列表选择要删除的站点。()单击单击“删除删除”按钮即可删除选择的站点。按钮即可删除选择的站点。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作 导入和导出站点导入和导出站点()在在“管理站点管理站点”对话框中，对话框中，选择要导出的站点，选择要导出的站点，单击单击“导出站导出站点点”按钮，按钮，弹出弹出“导出站点导出站点”对话框。对话框。()在在“导出站点导出站点”对话框中浏览并选择保存该站点的路径，对话框中浏览并选择保存该站点的路径，单击单击“保存保存”按钮，文件扩展名为按钮，文件扩展名为“.”。()单击单击“完成完成”按钮，按钮，关闭关闭“管理站点管理站点”对话框，对话框，完

43、成导出站点完成导出站点操作。同理，操作。同理，在在“管理站点管理站点”对话框中导入站点。对话框中导入站点。上一页 下一页返回任务三站点和文件操作任务三站点和文件操作五、设置页面属性五、设置页面属性创建网页文件后，创建网页文件后，一般还需要对网页的页面进行设置。一般还需要对网页的页面进行设置。在未选定任在未选定任何网页元素的情况下，何网页元素的情况下，在属性栏中有一个在属性栏中有一个“页面属性页面属性”按钮，按钮，单击单击此按钮，此按钮，弹出如弹出如图图 所示的所示的“页面属性页面属性”对话框。对话框。通过通过“外观外观”“链接链接”“标题标题”“标题标题/编码编码”“跟踪图像跟踪图像”分类项目

44、对分类项目对当当前网页进行相应的设计。前网页进行相应的设计。如在如在“外观外观”分类中，分类中，可以设置网页的页可以设置网页的页面字体、大小、文本颜色、背景颜色、背景图像、网页边距等属性。面字体、大小、文本颜色、背景颜色、背景图像、网页边距等属性。说明说明:在一般情况下，在一般情况下，需要将网页的左边距和上边距的值设为，需要将网页的左边距和上边距的值设为，因因为默认的左边距和上边距的值是，为默认的左边距和上边距的值是，不进行设置网页就会距离左边距不进行设置网页就会距离左边距和上边距各有和上边距各有 个像素的距离，个像素的距离，会影响网页的美观效果。会影响网页的美观效果。上一页返回任务四网站制作

45、流程任务四网站制作流程网站的一般制作流程如下所述网站的一般制作流程如下所述。)前期策划前期策划:这一阶段的工作包含了确立网站目标、前期调查、网站定这一阶段的工作包含了确立网站目标、前期调查、网站定位及网站风格的确立等多项重要工作。位及网站风格的确立等多项重要工作。这是一个至关重要的环节，这是一个至关重要的环节，可可以说，以说，这是网站建设成败的起点。这是网站建设成败的起点。只有好的策划才能有好的设计只有好的策划才能有好的设计)搜集资料搜集资料:在前期策划完成之后，在前期策划完成之后，需要搜集大量的材料，需要搜集大量的材料，考察网站考察网站相关内容，相关内容，搜集设计所需要的图片等素材，搜集设计

46、所需要的图片等素材，为以后的设计提供资源。为以后的设计提供资源。)结构确定结构确定:根据网站内容的性质和数量以及网站的风格确定网站的结根据网站内容的性质和数量以及网站的风格确定网站的结构，构，包括网页布局形式、栏目结构等，包括网页布局形式、栏目结构等，决定模板的使用，决定模板的使用，估计页面开估计页面开发的工作量等。发的工作量等。)设计草图设计草图:在在 等相关软件中进行最初的首页及等相关软件中进行最初的首页及其他主要页面的方案设计，其他主要页面的方案设计，完成大致框架。完成大致框架。如果条件允许，如果条件允许，可以设计可以设计几套方案进行分析比较，几套方案进行分析比较，选出最终设计方案选出最

47、终设计方案。)设计定稿设计定稿:完善设计方案，完善设计方案，进行方案的细节设计，进行方案的细节设计，完成最终设计图完成最终设计图下一页返回任务四网站制作流程任务四网站制作流程)评价和修改评价和修改:对设计方案进行评价，对设计方案进行评价，提出具体修改意见。提出具体修改意见。在这个在这个阶段，阶段，一般只针对具体的细节做出局部调整，一般只针对具体的细节做出局部调整，大的设计方案不进行大的设计方案不进行修改。修改。对方案的选取应当在第对方案的选取应当在第)步骤完成步骤完成。)页面移植页面移植:按照设计稿方案，按照设计稿方案，在网页排版工具中进行最终的排版在网页排版工具中进行最终的排版工作以及页面设

48、计元素的制作，工作以及页面设计元素的制作，包括网页排版、图片优化、动画制作、包括网页排版、图片优化、动画制作、特效设计等。特效设计等。)空间和域名申请空间和域名申请:要使自己的网页能够让更多的人浏览访问，要使自己的网页能够让更多的人浏览访问，就就需要将其上传到服务器上，需要将其上传到服务器上，并拥有一个属于自己的域名，并拥有一个属于自己的域名，这就需要这就需要申请虚拟空间和域名。申请虚拟空间和域名。)测试和发布网站测试和发布网站:有了空间和域名后，有了空间和域名后，就可以测试并发布网站了，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页网站测试一般包括服务器

49、稳定和安全测试、程序和数据库测试、网页兼容性测试等。兼容性测试等。)推广和维护网站推广和维护网站:发布网站后，发布网站后，还要进行宣传推广，还要进行宣传推广，提高知名提高知名度，度，并且不断地更新网站内容，并且不断地更新网站内容，让更多的人浏览访问自己的网站。让更多的人浏览访问自己的网站。上一页返回图图 工作界面工作界面返回菜单栏菜单栏 标题栏标题栏 工具栏工具栏 状态栏状态栏 属性栏属性栏 面板栏面板栏图图 起始页面起始页面返回图图“新建站点新建站点”对话框对话框返回图图“新建站点新建站点”对话框中的本对话框中的本地信息地信息返回图图“文件文件”面板面板返回图图 新建网页新建网页返回图图 选择站点选择站点返回图图 打开站点打开站点返回图图“管理站点管理站点”对话框对话框返回图图“站点设置对象站点设置对象”对话框对话框返回图图“页面属性页面属性”对话框对话框返回