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

《轻松学HTML+CSS之门户网站制作》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第15章门户网站制作门户网站是描述大型综合性网站的通用概念，内容包罗万象，除了新闻以外，还有博客、专题、论坛等。实现这么多复杂的内容需要服务器端编程和数据库技术，由于本书只学习网页前台表现技术，所以本章只制作门户网站的基本页面。15.1网站整体规划类似于上一章的个人网站，门户网站也要提前进行规划。首先作整体规划，规划页面层次和页面中功能版块。门户网站有很多复杂的制作方法，本例网站只描述最简单的新闻网站的前台结构。15.1.1层次分析要做好一个门户网站，首先要进行层次分析。门户网站看似复杂，但实际上都是有规律的分层管理的模型。通过

2、分层可以使整个网站更简洁，更容易进行设计。一般较简单的门户网站结构可分为3层，如图15.1所示。15.1.2模块分析为了使全站的风格统一，本站3个页面采用统一的头部和底部。头部为顶部栏、网站Logo和导航条部分；底部为版权信息或个人信息部分；中间部分则为页面的主要内容。15.1.2模块分析网站页面的功能结构图和相对应代码如下所示。15.1.3首页分析类似于个人网站的示例，门户网站首页也是综合各个栏目的内容，其首页一般会显示最新的时事新闻，如热点新闻，社会新闻，体育新闻，热点人物等。15.1.3首页分析本章门户网站首页主体区结构和

3、相应代码如下所示。15.2首页制作进行完整体的规划就可以开始进行页面的制作。首页的制作是网站设计的重要环节，而在CSS布局的网站中更为重要。在CSS布局设计之中。要更多的考虑到后期CSS布局上的可用性。15.2.1首页设计效果图与个人网站一样，笔者同样先使用Photoshop软件制作处首页的设计效果图，其设计原则和个人网站相似。本网站效果图使用了蓝色、灰色和黑色构成，给人一种清爽的感觉。15.2.1首页设计效果图读者可以参考笔者制作的首页效果图，如图15.2所示。15.2.2XHTML结构的构建和CSS布局和个人网站一样，网站布

4、局完就要开始XHTML结构的构建。在D:web目录下创建网页文件（XHTML1.0），命名为index.htm。结构构建完以后同样要用CSS来进行布局。对CSS考虑最多的还是CSS代码的重用，使多个板块，多个页面能够经常共享重用这些代码，以减少开发的事件，同时也是为了代码的优化。在D:webcss目录下创建CSS文件，命名为style.css。15.2.3顶部栏的制作在门户网站中同样有顶部栏的制作。在本例顶部栏制作中HTML调用CSS中的top来设置顶部栏的大小长宽。15.2.4Banner条的制作本例中的Banner条

5、上用来放置一个网站Logo和一个flash动画。在Banner条制作中，HTML调用CSS中的ad来设置Banner的大小，用logo来设置网站logo的大小，用swf来设置flash动画的大小。15.2.5导航条的制作导航条是用来放置各个页面标题的超级链接。在导航条制作中，HTML调用CSS中的nav来设置导航条和各个标题的大小，用search来设置搜索框和搜索按钮的大小。15.2.6热点消息栏的制作热点消息栏是用来放置各个类型的热点消息，如热点新闻，社会新闻，体育新闻，财经消息等。在热点消息栏的制作中，HTML调用CSS中的

6、content来设置整个热点消息栏的大小；用left来使热点消息栏放置在网页主体的左侧；用pro来设置热点消息栏中不同类型的热点消息的大小和位置。15.2.7便民信息栏和热点人物栏的制作在网站主体部分的右侧用来放置便民信息栏和热点人物栏。在制作中，HTML调用CSS中的right来使便民信息栏和热点人物栏放置在网页主体的右侧以及设置整个信息栏的大小，用msg_top来设置便民信息栏的大小。15.2.7设置页面主体背景从效果图上可看到，页面主体背景为阴影图片。用类似个人网站背景设置方法，将所示的图片裁剪为1像素高，作为body元素

7、的背景图，并进行垂直平铺。将此图片命名为bg.gif放入D:webimg目录中，读者注意，CSS代码中一定需要指明repeat-y平铺方式，并且居中。15.2.8设置有规律的背景图片为了使网站色彩看起来不单调，本例的多处功能模块虽然不是单纯的颜色渐变背景，但是其背景图片仍然有规律。15.2.9插入无虚框的Flash动画首页的网站Logo旁边还有1个空位，那是留给Flash广告的。在前面学习过，插入Flash广告类似于插入其他多媒体资源，使用embed标签即可。由于微软公司的系统补丁影响，如果用这种方法直接插入Flash动画到

8、网页中的文件中，IE浏览器浏览时将会产生虚框。15.2.10轮换照片的制作新闻图片轮换流行于各大门户网站，轮换动画效果的参数一般由JavaScript程序提供，如轮换的图片路径。其工作原理如图15.4所示。15.3栏目页制作在门户网站中也包含栏目页面和文章页面。