第27章 符Web标准的企业网站制作.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的“切片”功能，可以将页面需要的图像从设计图稿中提取出来，并导出为适合在