轻松学HTML+CSS之门户网站制作VIP免费

15.2首页制作进行完整体的规划就可以开始进行页面的制作。首页的制作是网站设计的重要环节，而在CSS布局的网站中更为重要。在CSS布局设计之中。要更多的考虑到后期CSS布局上的可用性。15.2.1首页设计效果图与个人网站一样，笔者同样先使用Photoshop软件制作处首页的设计效果图，其设计原则和个人网站相似。本网站效果图使用了蓝色、灰色和黑色构成，给人一种清爽的感觉。15.2.1首页设计效果图读者可以参考笔者制作的首页效果图，如图15.2所示。15.2.2XHTML结构的构建和CSS布局和个人网站一样，网站布局完就要开始XHTML结构的构建。在D:\web\目录下创建网页文件（XHTML1.0），命名为index.htm。结构构建完以后同样要用CSS来进行布局。对CSS考虑最多的还是CSS代码的重用，使多个板块，多个页面能够经常共享重用这些代码，以减少开发的事件，同时也是为了代码的优化。在D:\web\css目录下创建CSS文件，命名为style.css。15.2.3顶部栏的制作在门户网站中同样有顶部栏的制作。在本例顶部栏制作中HTML调用CSS中的top来设置顶部栏的大小长宽。15.2.4BANNER条的制作本例中的Banner条上用来放置一个网站Logo和一个flash动画。在Banner条制作中，HTML调用CSS中的ad来设置Banner的大小，用logo来设置网站logo的大小，用swf来设置flash动画的大小。15.2.5导航条的制作导航条是用来放置各个页面标题的超级链接。在导航条制作中，HTML调用CSS中的nav来设置导航条和各个标题的大小，用search来设置搜索框和搜索按钮的大小。15.2.6热点消息栏的制作热点消息栏是用来放置各个类型的热点消息，如热点新闻，社会新闻，体育新闻，财经消息等。在热点消息栏的制作中，HTML调用CSS中的content来设置整个热点消息栏的大小；用left来使热点消息栏放置在网页主体的左侧；用pro来设置热点消息栏中不同类型的热点消息的大小和位置。15.2.7便民信息栏和热点人物栏的制作在网站主体部分的右侧用来放置便民信息栏和热点人物栏。在制作中，HTML调用CSS中的right来使便民信息栏和热点人物栏放置在网页主体的右侧以及设置整个信息栏的大小，用msg_top来设置便民信息栏的大小。15.2.7设置页面主体背景从效果图上可看到，页面主体背景为阴影图片。用类似个人网站背景设置方法，将所示的图片裁剪为1像素高，作为body元素的背景图，并进行垂直平铺。将此图片命名为bg.gif放入D:\web\img目录中，读者注意，CSS代码中一定需要指...