《龙湖地产》企业门户网站前端设计（Html，CSS，JavaScript，jQuery）

朴灿烈づ我的快乐病毒、 2024-03-31 13:02 22阅读 0赞

目 录  
引言 1  
一、企业网站建设方案 2  
（一）搭建网站的必要性和可行性 2  
（二）网站建设的目的 2  
（三）网站设计原则 2  
二、企业网站开发工具的选择和介绍 4  
（一） HTML概述 4  
（二） CSS概述 4  
（三）JavaScript概述 4  
（四） Visual Studio 2016概述 4  
（五） SQL Server概述 4  
三、网页的界面设计 5  
（一）网页界面构成要素 5  
（二）网页设计 5  
（三）网站建设流程 6  
四、企业网站的设计与核心代码实现 7  
（一）企业网站架构 7  
（二）数据库的设计 7  
（三）系统数据库的设计 8  
五、网站功能模块的实现 11  
（一）网站前台系统 11  
（二） 网站后台系统 13  
六、针对不同浏览器的兼容问题 17  
结论 18  
参考文献 19  
致谢 20  
一、企业网站建设方案  
（一）搭建网站的必要性和可行性  
现在是互联网全速信息时代，信息化时代给所有领域带来新的改变。随着电脑办公自动化的普及，企业纷纷建立自己所需的门户网站，一切都归功于Internet的巨大贡献。互联网的世界里蕴藏着无限生机，这里只有想不到的、没有做不到的。  
随着全球信息向网络化方向发展，Internet正成为世界最大的公共资料库，它包容着数不清的信息资源，任何最新的信息都可以通过网络搜索迅速获得，更重要的是，大部分信息都是免费的。我们可以购买域名，建立企业自己的网站，树立企业在科技信息时代的完美形象。以互联网为媒介来创建网站，利用网络来拓展公司的信息资源，通过网站的传播可以使企业得到以前无法获得的商业资源，获得更多的商机，在激烈的市场竞争中领先对手。  
龙湖地产是一个房地产公司，我们想通过互联网传播的方式让更多的人了解我们的房源，拓宽我们房源的购买渠道，所以在现今社会对于我们企业来说，建立网站已经是不可缺少的一部分了。而我们做网站不是为了赶一时的潮流或是博取一个好听的名声才做的，只有把网络技术同企业管理体系、工作流程和商务动态实现紧密地连接，才能真正发挥企业网站的作用。一个企业建网站的最终目的和它的经营目的应该是一致的，就是通过企业网站来降低企业的管理成本和交易成本以及通过开展商业活动来获得更多的利润。  
（二）网站建设的目的  
企业形象展示：树立良好的企业形象，展示优渥的企业实力，宣传企业文化，建立企业品牌。  
1.商业动态：实时更新最新的房产动态，提供详细参数以供参考。  
2.信息更新：及时发布企业信息，商业动态，公司新闻。  
3.客户服务：为客户提供在线联系企业，解答客户疑问，提供与客户信息交流的渠道。  
4.人员招聘：发布集团各企业招聘信息，为各岗位招聘合适人才。  
5.联系我们：可以及时获取公司的地址以及联系方式。  
（三）网站设计原则  
企业网站的建设是有一定的原则的,下面就这些原则来谈谈龙湖地产网站的建设。  
1.目的性  
任何一个网站，必须首先具有明确的目的和目标群体。龙湖地产网站是面对客户、供应商、消费者以及一些求职者，主要目的是为了介绍企业文化、宣传房地产资源、拓宽消费群体。  
2.专业性  
龙湖地产网站的信息内容应该充分展现企业的专业特性，对外介绍企业自身，扩展更多的服务对象，最主要的目的是向外界介绍企业的业务范围、性质和实力，从而创造更多的商机。我们采用现今网络上最流行的HTML5，CSS，jQuery，Javascript等技术进行网站的静态和动态页面设计。动态的按钮，活动的小图标，滚动的banner，将会给浏览者留下深刻的印象。  
3.实用性  
龙湖地产网站提供的功能服务是切合浏览者实际需求且符合企业特点的。网站根据不同的需求分为几大板块，浏览者可以根据自身需求来选择不同的页面进行浏览。例如：针对需要找工作的人，可以进入网站的“人才招聘”页面，更快的获取信息。  
4. 层次性  
条理清晰、层次分明的结构，表现在网站的板块划分的合理性，信息内容的获取和功能服务的过程都应该尽量将所需要进行的步骤控制在3-5步以内，让浏览者以最少的步骤达到他们想要的效果。  
5.一致性  
龙湖地产网站做到了页面整体设计风格的一致，整体页面布局和用图用色风格前后一致。在该网站中所有界面元素做到了命名的一致性，做到即使某个元素的表述不清楚也能从上下文推断取义。

<!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>
    <script src="jquery.js"></script>
    <script>
    $(function(){
        
    	var n=0;
    	function run(){
        
    		n++;
    		if(n>4) n=0;
    		$(".rightPic").animate({
        top:-87*n},1000);	
    	};
    	var timer=setInterval(run,2000)
    	
    	$(".rightPic li").hover(function(){
        
    		clearInterval(timer);
    		},function(){
        
    		timer=setInterval(run,2000)
    		})
    })
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>龙湖地产</title>
    </head>
    <style type="text/css">
    *{
        padding:0;margin:0;font-size:12px;}
    body{
         background-color:#00327c;}
    .parent{
        width:1002px; height:867px; background-image:url(images/background.jpg);margin:0 auto}
    .bg{
        margin:0 auto;width:900px;overflow:hidden}
    .logo{
         background-image:url(images/logo.jpg);width:900px; height:80px;}
    .logo li{
         list-style-type:none;float:left;padding:0 5px;}
    .logo ul{
         float:right;margin-top:5px;width:150px}
    .logo a{
         color:#97d1ff; text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;width:60px;height:20px;display:block}
    .logo a:hover{
        color:#FFF; text-decoration:underline}
    .navBar li{
         list-style-type:none;float:left;width:97px; text-align:center;padding-right:35px}
    .navBar{
        width:900px; height:37px; background-color:#000;margin:0 auto;}
    .navBar a{
        color:#FFF; text-decoration:none;font-size:14px; font-weight:bold;line-height:37px;display:block}
    .navBar a:hover{
         background-image:url(images/choose.jpg);width:97px; height:37px;color:#20acff}
    .banner img{
        width:900px;height:238px;margin-top:10px}
    .content{
         background-image:url(images/content.jpg);height:407px;width:878px;margin-top:10px;padding-top:15px;padding-left:22px}
    .left{
        width:590px;height:390px;float:left;margin-right:10px}
    .right{
        width:260px;height:390px; float:left;}
    .leftTop{
        margin-top:10px;}
    .leftTop h3{
        margin-left:8px;width:578px;height:20px;border-bottom:solid 1px #2c89c6;font-size:14px;color:#FFF}
    .top{
        height:135px;width:580px}
    .top01,.top02{
        float:left}
    .top01{
        margin-top:8px;margin-left:10px}
    .top02{
        margin-top:15px;margin-left:5px}
    .top02 h1{
        color:#FFF;font-size:14px}
    .top02 p{
        color:#FFF;margin-top:15px;line-height:10px}
    .leftBottom{
        height:210px;width:590px;margin-top:17px}
    .leftList,.rightList{
        float:left}
    .leftList h3{
        margin-left:8px;width:300px;height:20px;border-bottom:solid 1px #2c89c6;font-size:14px;color:#FFF}
    .text01 a{
        color:#FFF; text-decoration:none;line-height:18px}
    .text01 a:hover{
         text-decoration:underline}
    .text01 li{
        color:#FFF}
    .text01{
        width:260px;height:75px}
    .rightList{
        width:282px;overflow:hidden}
    .rightList h3{
        margin-left:8px;width:270px;height:20px;border-bottom:solid 1px #2c89c6;font-size:14px;color:#FFF}
    .right{
        margin-top:10px}
    .right h3{
        width:246px;height:20px;border-bottom:solid 1px #2c89c6;font-size:14px;color:#FFF}
    .mask{
        margin-top:5px;margin-left:2px;width:243px;height:350px;overflow:hidden; position:relative}
    .rightPic{
         width:243px;height:688px; position:absolute;top:0;left:0}
    .rightPic li{
         list-style-type:none;margin-bottom:3px}
    .rightPic img{
        border:0 none}
    .footer{
         background-image:url(images/bottom.jpg);width:898px; height:48px;margin-top:10px;padding-top:12px;}
    .footer a{
         text-decoration:none;color:#97d1ff;}
    .footer li{
         list-style-type:none;float:left;padding:0 20px;border-right:solid 1px #97d1ff}
    .footer a:hover{
         text-decoration:underline}
    .last{
        width:898px; text-align:center;padding-top:8px; color:#97d1ff}
    .footer ul{
        margin-left:230px;}
    </style>
    <body>
    <div class="parent">
      <div class="bg">
            <div class="logo">
                <ul>
                    <li><a href="#">简体中文</a></li>
                    <li><a href="#">ENGLISH</a></li>
                </ul>
            </div>
            
            <ul class="navBar">
                <li><a href="#" style="color:#20acff">首页</a></li>
                <li><a href="web02-page01.html">公司简介</a></li>
                <li><a href="web02-page02.html">新闻中心</a></li>
                <li><a href="web02-page03.html">客户服务</a></li>
                <li><a href="web02-page04.html">人力资源</a></li>
                <li><a href="#">客服中心</a></li>
                <li style="padding-right:0"><a href="#">业务区域</a></li>
            </ul>
            
            <div class="banner"><img src="images/banner.jpg" /></div>           
            
            <div class="content">
            	<div class="left">
                	<div class="leftTop">
                    	<h3><img src="images/label.gif" style="margin-left:5px;margin-right:5px"/>热点资讯</h3>
                        <div class="top" >
                        	<div class="top01"><img src="images/pic1.png" /></div>
                            <div class="top02" style=" position:relative">
                            	<h1>龙湖股份:百强房企跨越上市 引领地产阔步走强</h1>
                                <p style=" text-indent:24px">12月30日上午9点28分，随着董事长俞午先生和总裁汪液女士一起敲</p>
                                <p>响了当天开市锣声，A股开盘之时，正式更名为"龙湖股份"。......</p>
                                <p style="background-image:url(images/choose02.gif); background-color:transparent; width:61px; height:22px; line-height:22px; text-align:center; position:absolute; left: 315px; top: 70px;"><a href="#" style="color:#FFF; text-decoration:none;">阅读全文</a></p>
                            </div>
                        </div>
                    </div>
                    
            <div class="leftBottom">
                    	<div class="leftList" style=" position:relative">
                       	  <h3><img src="images/label.gif" style="margin-left:5px;margin-right:5px"/>公司新闻<a href="#" style=" text-decoration:none"><img src="images/more.gif" style="position:absolute; left:265px; top:10px;border:0"/></a></h3>
                            <img src="images/pic2.jpg" style="margin-top:8px;margin-left:12px"/>
                            <div class="text01" style="padding-left:30px;margin-top:5px">
                                <ul>
                                    <li><a href="#">龙湖地产5月签约33.5亿元 北京双天街热销超</a></li>
                                    <li><a href="#">龙湖地产4月签约30.4亿 重庆项目刷新市场成</a></li>
                                    <li><a href="#">龙湖地产一季度合同销售65.3亿 二季度加推新</a></li>
                                    <li><a href="#">2011年合同销售额达人民币382.7亿元</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="rightList" style=" position:relative">
                        	<h3><img src="images/label.gif" style="margin-left:5px;margin-right:5px"/>商业动态<a href="#" style=" text-decoration:none"><img src="images/more.gif" style="position:absolute; left: 235px; top: 10px;border:0"/></a></h3>
                            <img src="images/pic3.jpg" style="margin-top:8px;margin-left:12px;width:257px;height:87px"/>
                            <div class="text01" style="padding-left:30px;margin-top:5px">
                                <ul>
                                    <li><a href="#">重庆龙湖MOCO家居生活馆全馆盛装开放！</a></li>
                                    <li><a href="#">北京"龙湖·星悦荟"商业街盛大开街！</a></li>
                                    <li><a href="#">北城天街新馆开业，取得轰动性成功！</a></li>
                                    <li><a href="#">重庆龙湖再启社区儿童素质教育第二课堂</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="right" >
                	<h3 style=" position:relative"><img src="images/label.gif" style="margin-left:5px;margin-right:5px"/>最新楼盘<a href="#" style=" text-decoration:none"><img src="images/more.gif" style="position:absolute; left: 203px; top: 10px;border:0"/></a></h3>
                    <div class="mask">          
                    	<ul class="rightPic">
                            <li><a href="#"><img src="images/pic-right1.jpg" /></a></li>
                            <li><a href="#"><img src="images/pic-right2.jpg" /></a></li>
                            <li><a href="#"><img src="images/pic-right3.jpg" /></a></li>
                            <li><a href="#"><img src="images/pic-right4.jpg" /></a></li>
                            <li><a href="#"><img src="images/index-lp2-1.jpg" /></a></li>
                            <li><a href="#"><img src="images/index-lp2-2.jpg" /></a></li>
                            <li><a href="#"><img src="images/index-lp2-3.jpg" /></a></li>
                            <li><a href="#"><img src="images/index-lp2-4.jpg" /></a></li>
                    	</ul>
                    </div>
                </div>
            </div>
            
            <div class="footer">
            	<ul>
                	<li><a href="#">法律声明</a></li>
                	<li><a href="#">网站地图</a></li>
                	<li><a href="#">意见建议</a></li>
                	<li><a href="#">版权信息</a></li>
                	<li style="border:0;padding-right:0"><a href="#">联系我们</a></li>
                </ul><br />
           </div>
      </div>
    </div>
    </body>
    </html>

![在这里插入图片描述][7430ff36ef8a4796bbb8448193ae7c6e.png_pic_center]  
![在这里插入图片描述][6b32c5017285445bb842a68fe73d23b0.png_pic_center]  
![在这里插入图片描述][0372c68a79d14cc7a54104715129e78d.png_pic_center]  
![在这里插入图片描述][6bfa8f092eb5450c98b673b0c1477e04.png_pic_center]  
![在这里插入图片描述][6d2646618a324e189b7bda047f8df305.png_pic_center]  
![在这里插入图片描述][8e94ba98a0e54e368b1d15672dbf113b.png_pic_center]  
![在这里插入图片描述][ca7bdaf22d6f4385a5edee5d5441a63a.png_pic_center]  
![在这里插入图片描述][58ade396b7074a16b229776aff374317.png_pic_center]  
![在这里插入图片描述][b4bf71139c47418894551a878e09d271.png_pic_center]  
![在这里插入图片描述][15dd913154b54470a356263b293616c7.png_pic_center]  
![在这里插入图片描述][415b5abac39d45789f4591ad159f64bf.png_pic_center]

[7430ff36ef8a4796bbb8448193ae7c6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/98c85bbd512649778fed5b10f69ffb77.png
[6b32c5017285445bb842a68fe73d23b0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b471c2d8495e4d929759362696461588.png
[0372c68a79d14cc7a54104715129e78d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2927068d18954e8e99239ffd1b3a4aa4.png
[6bfa8f092eb5450c98b673b0c1477e04.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/82426282847246a484689146937f8600.png
[6d2646618a324e189b7bda047f8df305.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8d30ed0f13e5470e9aa0d57b08dbb5bb.png
[8e94ba98a0e54e368b1d15672dbf113b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3c8dc948c2ae421c825ce7173e828857.png
[ca7bdaf22d6f4385a5edee5d5441a63a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ebcc1f2a6acc4416914fe8aec8b39990.png
[58ade396b7074a16b229776aff374317.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/fac93d2f6a834cba95123f6ee5721d43.png
[b4bf71139c47418894551a878e09d271.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/62e361fd68e84dcb9f38c32a071e3510.png
[15dd913154b54470a356263b293616c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/99e71621a74b4045a0c33cd0fc938567.png
[415b5abac39d45789f4591ad159f64bf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/456bd6a2e42b4b648650fa995b3ae1c1.png