第3章制作第一个网页.pptVIP

第3章 制作第一个网页 前面已经介绍了网站的一些基础内容，本章将介绍在Dreamweaver CS5中创建、编辑和格式化网页的相关内容。目的在于让大家掌握网页的基本操作，以及格式化和页面设置的方法，并对上述内容有基本的概念的了解。具体内容如下： 网页文件的创建 网页的基本操作 格式化的方法 页面设置的方法 3.1 创建网页文件 网页文件可以是空白网页，也可以是根据示例文件创建的内容，还可以是根据实际需要设计后创建的网页。想要怎样的网页，也就意味着你将制作符合想法的网页文件。在这一节中，将为大家介绍有关网页文件的创建方法及其相关内容。 3.1.1 创建空白网页 在网页制作开始前，我们需要先创建一个网页文件，这是首要工作。这里为其先创建一个空白的网页文件，以便于在接下来进行内容的调整，从而实现网页的制作。关于网页文件的创建，它的具体方法如下： （1）在文档窗口中，单击“文件”|“新建”命令，在弹出的如图所示“新建文档”对话框中，选择“空白页”选项卡，将“页面类型”设置为“HTML”，“布局”选项为“无”。单击“创建”按钮，进行空白网页的创建。 （2）在创建的如图所示空白页面中，可以为其“绘制”自己想要的内容了。其实这幅画的最终效果如何？漂不漂？接下来才是最考验功底的。在后续内容中，在陆续为大家揭晓。共同探讨关于网页制作的相应的各方面内容。 3.1.2 基于示例文件创建网页 如果你希望不必什么都从头开始设计，以便于你更加地发挥效率，Dreamweaver CS5提供的示例文件创建网页，可以帮助你实现。它可以让您创建具有专业化外观、设计完善的网页。该操作的具体方法如下所示： （1）在文档窗口中，单击“文件”|“新建”命令，在弹出的如图所示“新建文档”对话框中，选择“示例中的页”选项卡，将“示例文件夹”设置为“框架页”，“示例页”选项为“上方固定，下方固定”。单击“创建”按钮，进行带框架的网页的创建。 （2）在接着弹出的“框架标签辅助功能属性”对话框中，为框架指定标题，单击“确定”按钮完成，如图所示。 （3）上述的设置完成以后，可得到如图所示的带有框架的页面效果。 3.1.3 保存和关闭网页文件 在相关的网页文件创建的过程中，会需要执行保存和关闭网页文件的操作。为了避免因断电或者计算机死机而造成的网页文件的丢失，在制作网页的过程中，一定要经常存盘。 1．保存网页文件 网页文件有二种情况，一类是新建的网页文件，另一类是已有的网页文件，它们的保存方法，也是有所不同的。 （1）新建的网页文件 （2）已有的网页文件 2．关闭网页文件 要关闭当前正在编辑的网页文件，单击“文件”|“关闭”命令即可。此时，在页面内容没有保存的情况下，将弹出是否存盘的提示，根据情况选择按钮“是”或者“否”。单击按钮“是”将弹出“另存为”对话框，需要进行保存的相应选项的确认。反之，就将关闭网页文件。 3.2 实现设计布局 这里就向大家介绍有关设计布局实现的方法。 1．设计与构思 网页在制作开始之前，首要任务是明确，我们想要什么样的网页，它的各项任务是什么。这就要求我们心中有一个确切的概念，为了能够把这些内容落实清楚，很多的设计师会在开始之初，用Photoshop设计相应的图纸，来帮助进行相应内容的构思与确认。 2．框架 如图所示，将页面分成根据三部分来处理，包括网页的标题、网页的内容、网页的相关说明信息。这是网站比较常用的编排，在网站中是最常见的网页框架之一。 3．DIV+CSS 在网页的制作过程中，DIV与CSS的有效应用，能够使得网站更好地被大家所接受。因为在经过相应的处理，它们能够帮助网页更好地实现美化与效果。这就要求我们在制作时，要合理借助此功能，并且熟练掌握它。 4．图像设计工具 网页中离不开图像，这就要求我们掌握并熟练应用其相应的设计工具，例如Photoshop、Fireworks等。只有图文结合的页面内容，才更具有吸引力。只有生动的图像内容，才能更充分地表达网页的理念，以及效果。 5．Flash 静的内容肯定没有动的内容具有动感，只有动静结合，才是网站的设计之本。在越来越多的网站发布，展现在观众面前时，大家都在相互拼尽全力，展示着自己的网站的特色。为了让网页更有意义，同时也为了能更突出个性，很多的设计师，会在网页的内容部分添加Flash动画的相关应用，来帮助提升页面的可看性。 3.3 准备素材 在制作网站时，准备好素材，是重要的一步。素材的质量，严重影响着网站出来后的效果。在进行素材的处理时，它的方法与技巧是至关重要的。因为处理不当，可能会使得效果变成“画蛇添足”的境地。这也就意味着，其它内容再怎样完美，但是整个网站在素材来说，存在着不可忽视的缺限。 3.3.1 素材种类 网站设计的素材一般分为：声音