javaweb信息化门户网站
来源：互联网 发布：python爬虫框架scrapy 编辑：程序博客网 时间：2024/06/02 22:55
模板包含以下部分：
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完美的设计，此案例设计里面的大多方法的使用，值得研究研究。
- javaweb信息化门户网站
- 基于javaweb开发的小区门户网站
- 未来门户网站在企业信息化架构中的地位与价值
- 门户网站！
- 门户网站
- 门户网站
- 门户网站
- 门户网站
- yanjiangbo谈门户网站!
- 门户网站分流(一)
- 门户网站分流(二)
- 什么是门户网站？
- 地方性门户网站推广
- 门户网站开发
- 门户网站开发总结
- 关于门户网站设计方案
- 门户网站运维
- 出售公司门户网站
- Light oj 1316 - A Wedding Party（状压dp）
- 回归分析
- 动态规划简单例子--象棋步骤
- 多重继承
- 华为手机调试Android程序崩溃不打印Log
- javaweb信息化门户网站
- Coursera_Stanford_ML_ex3_多标度分类和神经网络初步 作业记录
- Objective-C浅拷贝和深拷贝
- Haskell编译不能的问题
- JAVA编程规则【转自java编程思想】
- HDU5491 The Next【二进制】
- Leetcode 67:Add Binary
- 安卓控件使用系列15：ImageView适屏和裁剪图片
- HDU 2140 模拟
