2016建筑施工方案.pptVIP

第27章 符合Web标准的企业网站制作 前面几章学习了采用传统的表格布局来制作各种网站，我们前面讲过表格布局虽然简单易用，但也存在很多弊端。Web标准抛弃了传统的表格布局方式，采用层（Div）布局，并且使用层叠样式表（CSS）设置页面的外观，从而实现内容与表现相分离。 本章将通过具体实例来学习符合Web标准的企业网站制作。主要制作步骤也包括设计图的分析，在Fireworks中切割图像，在Dreamweaver中制作网页等。但各个环节与传统表格布局的网站有很大不同。通过学习本实例，读者既可以熟悉符合Web标准的网站制作的全过程，又可以复习巩固所学知识。 27.1 设计图分析 本实例是一个公司的网站，其网页设计图如图27.1所示。网页包括“公司简介”、“产品介绍”、“购买商品”、“联系我们”、“招聘信息”等五个栏目。页面自上而下分为Logo区域、Banner与导航区域、内容区域、页脚区域。 27.1.1 布局分析 搞清楚网页的布局方式，对于后面搭建页面非常重要。这将指导如何切割图像以及如何创建层结构。网页采用的是常见的分栏式结构，其布局图如图27.2所示。 27.1.2 配色分析 接下来需要从设计图稿中提取各区域和字体的颜色。具体操作步骤如下： 27.2 在Fireworks中切图 利用Fireworks的“切片”功能，可以将页面需要的图像从设计图稿中提取出来，并导出为适合在网页上使用的图形格式。 27.2.1 切割图像 切割图像 27.2.2 将图像切片导出 在导出切片时，颜色较少且变化不大的切片最好导出为gif格式的图像，这样可以图像尺寸很小；颜色较丰富的切片最好导出为jpeg格式的图像，能较好地保留色彩信息。在本实例中，将banner切片设置为jpeg格式，背景切片设为gif格式。具体操作步骤如下： 27.3 在Dreamweaver中制作网页 现在就到了在Dreamweaver CS4中制作网页环节。主要包括定义站点、创建层结构、向层中插入内容、设置超链接、添加CSS样式表等几个步骤。下面一一来介绍。 27.3.1 定义站点 具体操作步骤如下： 27.3.2 创建层 在前面的布局分析环节，已经对要创建的层结构和大小有了清晰的认识，下面就来创建层，具体操作步骤如下： 27.3.3 向层中添加内容 接下来向创建好的层结构中添加相应的内容。注意为了实现内容与表现的分离，在层中只插入网页的具体内容，修饰用的图像，如背景图像等不插入到层中。具体操作步骤如下： 27.3.4 设置超链接 具体操作步骤如下： 27.3.5 添加CSS样式表 1．设置body标签 2．设置main层 3．设置Logo层 4．设置head层 5．设置link层 6．设置层content 7．设置层left 8．设置层right 9．设置层foot 10．设置层foot中的链接文字 11．设置ul标签 12．设置li标签 13．设置列表中的链接文字 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.