6.1.1  图像准备与网页图像制作

6.1.2 首页规划布局与配色

1．页面布局

（1）页眉区：包括公司Logo、公司名称、语言选择、收藏本站4个元素。

（2）Banner区：放置横幅广告，3个广告交替显示，具有很好的视觉效果。

（3）导航栏区：设置首页、公司资讯、笔记本电脑系列、台式机系列、技术优势、荣誉资质、服务网络7个主栏目，并采用视角协调的横向排列方式。

（4）主题内容区

（5）页脚区：设立3行信息。第1行为友情链接，有人民邮电出版社、人邮学院、人邮教育社区的链接；第2行为联络方式，有公司名称、地址、电话、邮箱；第3行为网站备案登记信息。

2．网页配色与字体字号

6.1.3  首页主要构件设计制作

1．Logo制作

2．公司名称的文字图像制作

3．Banner制作

4．制作展示图像

5．制作导航栏

6.1.4  首页效果图像制作

6.1.5  图像切片

一个网页往往有尺寸较大的图片，如背景图。如果不拆分成各个小图片，会影响显示速度。同时基于网页布局的要求，局部图像需要添加超链接等。所以，效果图必须分割成各个小图片。

6.1.6  采用HTML+CSS制作首页

1、制作主页的框架文件，文件名为index.html。按照布局需要，建立3个网页框架，框架名称分别为top、menu、main，按照图像切片的高度要求，定义好框架的高度，框架的边框必须是“0”。

2、 简单制作3个主页构成网页，即top.html、menu.html、main.html，分别与框架对应。

3、 详细设计制作第二步中的3个网页，实现相应的功能。

4、 按照导航栏的内容制作相应的子网页。本例中，导航栏有6个，其中“首页”链接的是main.html，再制作4个网页分别对应“暑期促销”“笔记本系列”“台式机系列”“技术与服务”“联系我们”这5个导航栏代表的功能，并建立好链接。

5、 将导航栏与主题内容区建立链接关联。当单击导航栏时，在主体内容区显示相应的内容（通过target="main"指定目标网页在“main”框架中打开）。

6.1.7  设计制作子网页