javaweb信息化门户网站

模板包含以下部分：

1. 页面顶部显示登录信息，允许新用户注册和输入已存在的用户名和密码登录网站，登录后显示用户名称、用户类型信息和退出登录按钮；

2. 企业VI和Banner广告条，VI应突出企业信息和网站地址，使浏览用户能够形成心理暗示，加强对网站的印象；

3. 导航条，指向各版块链接；

4. 全站显示广告条，在每一个页面上都进行显示的广告；

5. 模板内容区域，根据页面的不同显示不同的内容；

6. 页脚，显示网站介绍、网站地图、联系方式、版权、链接、意见反馈链接。

一：实现思路

1、根据效果图设计网站模板（统一风格）



2、首页具体布局模块名称及尺寸



1. 基本结构划分：

1.1 页面整体容器main_container :宽度1000px

1.2 网页分左中右三列：左侧边container_bg1：宽度62px,中间内容区：main_content:宽度876px,右侧边container_bg2:宽度62px.

1.3 左右侧边分上下两部分：container_bg1_top:宽度62px,高度45px; container_bg1_main:高度自动调整

default.html ：

<divid="main_container">

<div id="container_bg1">

<divid="container_bg1_top"></div>

<divid="container_bg1_main"></div>

</div>

<divid="main_content">

中间内容信息

</div>

<divid="container_bg2">

<divid="container_bg2_top"></div>

<divid="container_bg2_main"></div>

</div>

<divid="container_clear"></div>

</div>

<script type="text/javascript">

vardiv=document.getElementById("main_container");

varmdiv=document.getElementById("container_bg1_main");

varmdiv2=document.getElementById("container_bg2_main");

var h=div.scrollHeight;

h-=45;

mdiv.style.height=h+"px";

mdiv2.style.height=h+"px";

</script>

style.css

/*页面整体样式*/

*{margin:0px;

padding:0px;

font-size:12px;}

/*整体容器*/

#main_container{ width:1000px;

background-color:red;

margin:auto;}

#container_clear{ clear:both;}

/*左侧边*/

#container_bg1{

width:62px;

float:left;}

#container_bg1_top{

background-color:#006600;

height:45px;

width:62px;}

#container_bg1_main{

background-color:#333;

}

/*右侧边*/

#container_bg2{

width:62px;

float:left;}

#container_bg2_top{

background-color:#006600;

height:45px;

width:62px;}

#container_bg2_main{

background-color:#333;

}

/*中间内容区*/

#main_content{

width:876px;

background-color:#069;

float:left;}

2 中间内容信息(main_content)划分

1） 登录区域（login_container），居中显示登录文本框及按钮，宽度1000px，高度45px，显示背景图片。

2） 网站标识及banner区域（vi_container），从左到右显示VI标识和banner广告条，宽度874px，高度90px。

3） 导航条区域（navigator_container），具有移到导航菜单上时特效，宽度874px，高度26px。

4） 第一个广告条区域（advertise），显示广告图片或动画，宽度864px，高度100px。

5） 第一行信息显示区域（line_content），宽度864px，高度260px。每行中显示三块区域的图片和信息列表。第一列，宽度224px，第二列320px，第三列320px。

6） 第二个广告条区域（advertise），显示广告图片或动画，宽度864px，高度100px。

7） 第二行信息显示区域（line_content），宽度864px，高度260px。每行中显示三块区域的图片和信息列表。第一列，宽度224px，第二列320px，第三列320px。

8） 页脚区：（foot_container）:，宽度876px,高度127px

default.html

<div id="main_content">

<divid="login_container">

</div>

<div id="vi_container">

</div>

<div id="nav_container">

</div>

<div class="advertise">

</div>

<div class="line_content">

</div>

<div class="advertise">

</div>

<div class="line_content">

</div>

<div id="foot_container">

</div>

</div>

style.css

/****登录*****/

#login_container{

height:45px;

background-color:#FCC;}

/****VI*****/

#vi_container{

height:90px;

background-color:ff9900;}

/****导航nav*****/

#nav_container{

height:26px;

background-color:#999999;}

/****广告条 advertise ****/

.advertise{

height:100px;

background-color:#339900;}

/****内容 content****/

.line_content{

height:261px;

background-color:#006666;}

/**** foot *******/

#foot_container{

height:127px;

background-color:#006699;}

3. 编写侧边区

侧边区分上下两部分，左侧上部（container_bg1_top），是背景图片mt1.jpg.左侧下部（container_bg1_main）,是背景图片ml1.jpg,y轴重复。右侧类似

style.css

/*左侧边*/

#container_bg1{

width:62px;

float:left;}

#container_bg1_top{

background:url(../images/mt1.jpg) no-repeat top center;

height:45px;

width:62px;}

#container_bg1_main{

background: url(../images/ml1.jpg)repeat-y top center;

}

/*右侧边*/

#container_bg2{

width:62px;

float:left;}

#container_bg2_top{

background:url(../images/mt2.jpg) no-repeat top center;

height:45px;

width:62px;}

#container_bg2_main{

background: url(../images/ml2.jpg)repeat-y top center;

}

4. 编写主内容区

4.1 编写登录区（login_container）

表单元素放到<ul><li>中

按钮的class=”btn” 文本框的class=”txt”



4.2 编写VI区(vi_container)

左侧vi_main是背景图像，右侧vi_banner层中放置图像<img src=””/>



4.3 编写导航栏区(nav_container)

导航链接放到<ul><li>中



4.4 编写广告条区(.advertise)



广告条内只放置广告图片<img src=””/>

4.5 编写内容区(.line_content)



.line_content中左侧是.line_hot,右边两个都是.news_content,

.news_title是标题

.news_content是详细内容，放到详细内容都放到<ul><li>中



4.6 编写页脚区(foot_container)



页脚区分三层，普通流，foot_vi, foot_nav, foot_copyright,期中foot_nav内容使用<ul><li>



二：具体完整实现设计及原码



defeaul.html原码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>企业网</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main_container">
<div id="container_bg1">
<div id="container_bg1_top"></div>
<div id="container_bg1_main"></div>
</div>

<div id="main_content">
<div id="main_content">
<div id="login_container">
<form>
<ul>
<li><label for="txt_name">用户名</label><input id="txt_name" type="text" class="txt" /></li>
<li><label for="txt_password">密码</label><input type="password"  class="txt" /></li>
<li><label for="chk_remeber">记住我</label>
<input id="chk_remeber" type="checkbox"/>验证码<img src="images/num.png" alt="验证码" title="验证码" /></li>
<li><button class="btn">登录</button></li>
<li><button class="btn">注册</button></li>
</ul>
</form>
</div>

<div id="vi_container">
<div id="vi_main"></div>
<div id="vi_banner">
<img src="images/ban.jpg" alt="广告" title="企业间的互动" />
</div>
</div>

<div id="nav_container">
<div id="nav_content">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">知识</a></li>
<li><a href="#">软件</a></li>
<li><a href="#">硬件</a></li>
<li><a href="#">外包</a></li>
<li><a href="#">方案</a></li>
<li><a href="#">厂商</a></li>
<li><a href="#">供求</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">书籍</a></li>
<li><a href="#">人在</a></li>
<li><a href="#">下载</a></li>
<li><a href="#">社区</a></li>

</ul>
</div>
</div>

<div class="advertise">
<img src="images/ad1.jpg" alt="advertisement" title="广告" />
</div>

<div class="line_content">
<div class="line_hot">
<img src="images/01.jpg" alt="news" />
</div>

<div class="news_container">
<div class="news_title">>> 资讯</div>
<div class="news_content">
<ul>
<li><a href="#" target="_blank" title="视频直播：阅兵分列式正式开始">视频直播：阅兵分列式正式开始</a></li>
<li><a href="#" target="_blank" title="习近平集体会见并宴请外国领导人">习近平集体会见并宴请外国领导人</a></li>
<li><a href="#" target="_blank" title="外媒妄评有西方国家不出席北京阅兵原因 中方回应销">外媒妄评有西方国家不出席北京阅兵原因 中方回应</a></li>
<li><a href="#" target="_blank" title="解放军上将向阅兵外军队伍代表颁发指挥刀(">解放军上将向阅兵外军队伍代表颁发指挥刀(</a></li>
<li><a href="#" target="_blank" title="毕业生被要求开高考证明 高招办：无义务出脑残证明">毕业生被要求开高考证明 高招办：无义务出脑残证明</a></li>
<li><a href="#" target="_blank" title="美国3位前总统后人出席台湾官方抗战纪念活动">美国3位前总统后人出席台湾官方抗战纪念活动</a></li>
<li><a href="#" target="_blank" title="非洲明星狮被猎杀后剥皮制成内衣出售(">非洲明星狮被猎杀后剥皮制成内衣出售(</a></li>
<li><a href="#" target="_blank" title="夫妻出游吵架弃车而走 宝马扔高速上两天两夜">夫妻出游吵架弃车而走 宝马扔高速上两天两夜</a></li>
<li><a href="#" target="_blank" title="博士男为50元折扣让相亲对象埋单 女孩拒绝再交往">博士男为50元折扣让相亲对象埋单 女孩拒绝再交往</a></li>
<li><a href="#" target="_blank" title="">普京访华，中俄将签订天然气“大单”</a></li>
<li><a href="#" target="_blank" title="">女副局长裸辞求职记</a></li>
<li><a href="#" target="_blank" title="">洪秀柱突然宣布暂停竞选行程</a></li>
</ul>

</div>
</div>

<div class="news_container">
<div class="news_title">>> 软件</div>
<div class="news_content">

<ul>
<li><a href="#" target="_blank" title="">三星18.4寸平板将发售 </a></li>
<li><a href="#" target="_blank" title="">英特尔Skylake处理器全线曝光</a></li>
<li><a href="#" target="_blank" title="">谷歌宣布推出全新Logo</a></li>
<li><a href="#" target="_blank" title="">苹果iPhone 6s Plus屏幕曝光 </a></li>
<li><a href="#" target="_blank" title="">《不法之徒》登XB1/PS4 </a></li>
<li><a href="#" target="_blank" title=""> 《星球大战：前线》测试启动</a></li>
<li><a href="#" target="_blank" title="">揭秘Samsung Pay：看三星如何“叫板”苹果？</a></li>
<li><a href="#" target="_blank" title="">垃圾短信起底 畸形营销催生黑色利益链</a></li>
<li><a href="#" target="_blank" title="">3D打印医疗技术 掀起新医学产业革命</a></li>
<li><a href="#" target="_blank" title="">“后PC”时代正式来临：移动设备和应用成大势所趋</a></li>
<li><a href="#" target="_blank" title="">阿里发布Yun OS 3.0：软硬结合再战移动OS市场</a></li>
<li><a href="#" target="_blank" title="">4K电视价值待审视：1080p或为更好选择</a></li>
</ul>

</div>
</div>
</div>

<div class="advertise">
<img src="images/ad2.jpg" alt="advertisement" title="广告" />
</div>

<div class="line_content">
<div class="line_hot">
<div class="news_title">>> 方案</div>
<div class="news_content">
<ul>
<li><a href="#" target="_blank" title="">三星18.4寸平板将发售 </a></li>
<li><a href="#" target="_blank" title="">英特尔Skylake处理器全线曝光</a></li>
<li><a href="#" target="_blank" title="">谷歌宣布推出全新Logo</a></li>
<li><a href="#" target="_blank" title="">苹果iPhone 6s Plus屏幕曝光 </a></li>
<li><a href="#" target="_blank" title="">《不法之徒》登XB1/PS4 </a></li>
<li><a href="#" target="_blank" title=""> 《星球大战：前线》测试启动</a></li>
<li><a href="#" target="_blank" title="">揭秘Samsung Pay：看三星如何“叫板”苹果？</a></li>
<li><a href="#" target="_blank" title="">垃圾短信起底 畸形营销催生黑色利益链</a></li>
<li><a href="#" target="_blank" title="">3D打印医疗技术 掀起新医学产业革命</a></li>
</ul>
</div>
</div>

<div class="news_container">
<div class="news_title">>> 供求</div>
<div class="news_content">
<ul>
<li><a href="#" target="_blank" title="">三星18.4寸平板将发售 </a></li>
<li><a href="#" target="_blank" title="">英特尔Skylake处理器全线曝光</a></li>
<li><a href="#" target="_blank" title="">谷歌宣布推出全新Logo</a></li>
<li><a href="#" target="_blank" title="">苹果iPhone 6s Plus屏幕曝光 </a></li>
<li><a href="#" target="_blank" title="">《不法之徒》登XB1/PS4 </a></li>
<li><a href="#" target="_blank" title=""> 《星球大战：前线》测试启动</a></li>
<li><a href="#" target="_blank" title="">揭秘Samsung Pay：看三星如何“叫板”苹果？</a></li>
<li><a href="#" target="_blank" title="">垃圾短信起底 畸形营销催生黑色利益链</a></li>
<li><a href="#" target="_blank" title="">3D打印医疗技术 掀起新医学产业革命</a></li>
<li><a href="#" target="_blank" title="">“后PC”时代正式来临：移动设备和应用成大势所趋</a></li>
<li><a href="#" target="_blank" title="">阿里发布Yun OS 3.0：软硬结合再战移动OS市场</a></li>
<li><a href="#" target="_blank" title="">4K电视价值待审视：1080p或为更好选择</a></li>
</ul>
</div>
</div>

<div class="news_container">
<div class="news_title">>> 人才</div>
<div class="news_content">
<ul>
<li><a href="#" target="_blank" title="">三星18.4寸平板将发售 </a></li>
<li><a href="#" target="_blank" title="">英特尔Skylake处理器全线曝光</a></li>
<li><a href="#" target="_blank" title="">谷歌宣布推出全新Logo</a></li>
<li><a href="#" target="_blank" title="">苹果iPhone 6s Plus屏幕曝光 </a></li>
<li><a href="#" target="_blank" title="">《不法之徒》登XB1/PS4 </a></li>
<li><a href="#" target="_blank" title=""> 《星球大战：前线》测试启动</a></li>
<li><a href="#" target="_blank" title="">揭秘Samsung Pay：看三星如何“叫板”苹果？</a></li>
<li><a href="#" target="_blank" title="">垃圾短信起底 畸形营销催生黑色利益链</a></li>
<li><a href="#" target="_blank" title="">3D打印医疗技术 掀起新医学产业革命</a></li>
</ul>

</div>
</div>
</div>

<div id="foot_container">
<div id="foot_vi"></div>
<div id="foot_nav">
<ul>
<li>网站介绍</li>
<li>网站地图</li>
<li>联系我们</li>
<li>版权说明</li>
<li>工作机会</li>
<li>友情链接</li>
<li>意见反馈</li>
</ul>
</div>
<div id="foot_copyright">
Copyright www.enterinfo.com$reg; 2015 All right reserved</br>网络备案号： 12345-67890
</div>
</div>
</div>

</div>

<div id="container_bg2">
<div id="container_bg2_top"></div>
<div id="container_bg2_main"></div>
</div>

<div id="container_clear"></div>
</div>

<script type="text/javascript">
var div=document.getElementById("main_container");
var mdiv=document.getElementById("container_bg1_main");
var mdiv2=document.getElementById("container_bg2_main");

var h=div.scrollHeight;
h-=45;
mdiv.style.height=h+"px";
mdiv2.style.height=h+"px";
</script>

</body>
</html>

style.css原码：

/* CSS Document */
/*页面整体样式*/
*{ margin:0px;
padding:0px;
font-size:12px;}   /*所有字体大小*/
/*整体容器*/
#main_container{ width:1000px;
background-color:red;
margin:auto;}    /*居中显示*/
#container_clear{ clear:both;}
/*左侧边*/
#container_bg1{
width:62px;
float:left;}
#container_bg1_top{
background:url(../images/mt1.jpg) no-repeat top center;
height:45px;
width:62px;}
#container_bg1_main{
background:url(../images/ml1.jpg) repeat-y top center;
}
/*右侧边*/

#container_bg2{
width:62px;
float:left;}
#container_bg2_top{
background: url(../images/mt2.jpg) no-repeat top center;
height:45px;
width:62px;}
#container_bg2_main{
background: url(../images/ml2.jpg) repeat-y top center;
}

/*中间内容区*/
#main_content{
width:876px;
background-color:#069;
float:left;}
/****登录*****/
#login_container{
height:45px;
border-bottom:solid 1px #e7e7e7; background:url(../images/ct1.jpg) repeat-x top center;}
#login_container ul{ width: 600px; margin:0 auto;}
#login_container ul li{ float:left; list-style-type:none; padding-top:15px; padding-left:2px;}
#login_container .btn{  width:58px; height:22px; background-color:#f4f4f4; border:solid 1px #bebebe; border-left:solid 3px #f90;}
#login_container .txt{ width:80px; height:22px; border-style:none; border-bottom:solid 1px silver; background-color:transparent
;}
/****VI*****/
#vi_container{
height:90px;
}
#vi_main{ float:left; background-image:url(../images/vi.jpg); width:220px; height:90px;
}
#vi_banner{ float:left; width:656px; height:90px; text-align:center; overflow:hidden;}
/****导航nav*****/
#nav_container{
height:26px;
width:876px; background:url(../images/mn1.jpg) no-repeat left center;}
#nav_content{ width:791px; height:26px; line-height:26px; overflow:hidden; background:url(../images/mn2.jpg) repeat-x left center; float:right}
#nav_content ul li{ list-style-type:none;float:left; width:50px; height:20px; text-align:center;}
#nav_content ul li a{ display:block; text-decoration:none; width:50px; color:#000000;}
#nav_content ul li a:hover{ background-image:url(../images/mn4.jpg);}
/****广告条 advertise ****/
.advertise{ background-color:#ffffff; padding:6px; padding-bottom:0px;
}
/****内容 content****/
.line_content{
background-color:#fff; padding-left:5px; padding-top:5px; height:260px;}
.line_hot{ width:226px; height:260px; float:left; border:solid 1px #aeb8c2;}
.line_hot img{ width:220px; height:252px; margin-top:5px; margin-left:3px;}
.news_container{border:solid 1px #aeb8c2; width:312px; height:260px; float:left; margin-left:5px;}
.news_title{ background-image:url(../images/titlebg1.jpg); height:23px; line-height:23px; overflow:hidden; padding-left:10px; font-weight:bold;}
.news_content{ padding:5px; padding-left:20px;}
.news_content ul{ padding-left:5px;}
.news_content ul li{ list-style-image:url(../images/start.gif); line-height:18px;}
/**** foot *******/
#foot_container{
height:127px; width:876px; text-align:center; clear:both;}
#foot_vi { width:876px; height:27px; background:url(../images/footvi.jpg) repeat-x top left;}
#foot_nav{ height:20px; background-color:#e7e7e7; line-height:20px; padding-left:200px; overflow:hidden;}
#foot_nav ul li{ width:60px; float:left; list-style-type:none;}
#foot_copyright{ height:80px; background-color:#f7f7f7; line-height:20px;}

三：体会

div+css完美的设计，此案例设计里面的大多方法的使用，值得研究研究。