项目1-企业门户网-1-首页

来源：互联网发布：js 运动轨迹编辑：程序博客网时间：2024/05/01 08:00

话说：

各位读者早上好！前2篇温故了 HTML、MySQL基础知识，这篇吹响项目开始的号角！这里发表的项目都是最基础的，前端比较费时，就简单制作。整体素材与技术来源于“明日科技”，感谢作者耐心的写作。代码等都是笔者参考后自己所写。

项目目标：企业门户网站-陕西小确幸科技有限公司（虚拟）
（JSP+JavaScript+MySQL 实现）
前端页面及后台新闻的CURD操作；

技术：
1.环境与工具：Eclipse、Tomcat的部署与启动、MySQL使用；
2.JSP页面：request、 session 、JSP表达式、 img图片标签；
3.数据库处理：DDQ DDM语句；

本篇博客目标：搭建前端页面
难度：★☆☆☆☆
用时：2H之内
当然笔者没有实现图片轮播效果，感觉有点复杂，暂且放下。

一、效果展示
二、整体布局
三、页面代码
四、CSS样式
五、总结
六、下期预告

一、效果展示

这里写图片描述

这是笔者布局时候的DIV样式

这里写图片描述

这是成型后的首页。

二、整体布局

这里写图片描述

三、页面代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!--Author:Meice 2017年12月16日下午2:49:40 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>小确幸</title><!-- 引入外部 样式 --><link href="css/mymain.css" rel="stylesheet" type="text/css" /><!-- 引入js --><script type="text/javascript" src="js/mymain.js"></script></head><body>    <div id="wholeBody">        <!-- 头部信息 -->        <%@ include file="common_header.jsp" %>         <%-- <jsp:include page="common_header.jsp" flush=true/> --%>        <!-- 图片轮播 -->        <div id="middleLog">            <div class="slide" style="opacity:1;z-index:0;display:block;">                <img src="image/img1.jpg" style="width:99%"/>            </div>            <div class="slide" style="opacity:1;z-index:1;display:none;">                <img src="image/img2.jpg"/>             </div>            <div class="slide" style="opacity:1;z-index:1;display:none;">                <img src="image/img3.jpg"/>            </div>            <div class="slide" style="opacity:1;z-index:0;display:none;">                <img src="image/img4.jpg"/>            </div>            <div class="slide" style="opacity:1;z-index:0;display:none;">                <img src="image/img5.jpg">            </div>        </div>        <!--底部业务领域信息  -->        <div id="footLog">            <!-- <div style="color:white;margin-top:128x;float:left">业务领域</div> -->            <div id="bottomImg">                <p style="height:55px;"></p>                <div >                    <img style="float:left;margin-left:280px" src="image/pic1.png" />                </div>                <div>                    <img style="float:left" class="bottomImg" src="image/pic2.png"/>                </div>                <div>                    <img style="float:left" class="bottomImg" src="image/pic3.png"/>                </div>                <div>                    <img style="float:left" class="bottomImg" src="image/pic4.png"/>                </div>                <div>                    <img  style="float:left" class="bottomImg" src="image/pic5.png"/>                </div>            </div>        </div>        <!-- 版权信息 -->        <div id="bottomLog" style="text-align:center;color:black;padding-top:20px">            Copyright&nbsp; 2017&nbsp;&nbsp; 小确幸科技有限公司  All Rights<br/>            <a href="#" style="color:green">陕西小确幸科技有限公司</a>技术支持              <a href="#" style="color:green">后台</a><br/>            陕ICP备 888888号 -1 陕公网安备215525566555122号        </div>    </div></body></html>

最顶部导航栏抽离出来：
common_header.jsp

<%@ page language="java" import="java.util.*"  pageEncoding="UTF-8"%><!--Author:Meice 2017年12月17日上午11:11:00 --><!-- 头部 --><div id="topLog">            <div class="logo">                <a href="#">陕西小确幸科技有限公司</a>            </div>            <!--导航栏  -->            <div id="menu">                <ul>                    <li>                        <a href="index.jsp">首页</a>                    </li>                    <li>                        <a href="about.jsp">企业简介</a>                    </li>                    <li>                        <a href="newsFrontList.jsp">新闻</a>                    </li>                    <li>                        <a href="content.jsp">核心竞争力</a>                    </li>                    <li>                        <a href="contact.jsp">联系我们</a>                    </li>                </ul>            </div>        </div><!-- 头部 -->

默认访问的是Webcontent下面的index.jsp，里面做了跳转：

<script>        //直接跳转至首页        window.location.href="front/index.jsp";//这里不写window也是可以的    </script>

这里跳转用的是script种的location对象，我们知道JS最顶层是Window对象，然后是：history location dom；这里的href本身就是个连接。
DOM除了平级的无法调用之外，可以调用所有网页元素。
要实现页面跳转，方式多样，还可以使用JSP这么跳转：

request.getRequestDispatcher("front/index.jsp").forward(request,response);

这种方式跳转效等同于：

<jsp:forward page="front/index.jsp"/>

转发跳转可以携带参数，但是由于地址未发生变化，而CSS js等样式引用路径又是相对的，那么样式是引用不到的；JSP动作标签也类似；当然页面还是跳过去了的；

所以，还可以用重定向跳转。

response.sendRedirect("front/index.jsp");

直接改变地址。无法带参，但是页面路径转变为跳转后的路径，好处在于：如果单纯是页面跳转，就可以解决转发样式无法引用的问题；

四、CSS样式

样式琐碎，这里记录只是为了后续如果有类似操作，忘记相关属性可以快速浏览。
mymain.css

@CHARSET "UTF-8";<!--Author:Meice2017年12月16日 下午3:43:20 -->/* 清楚所有边距 */*{    margin:0px;    padding:0px;}/* 设置整体Div */#wholeBody{    /* border:1px solid red; */    width:1355px;    height:720px;/*  background-color:green; */}/* 设置头部导航栏样式-外部引入 */#topLog{    /* border:1px solid red; */    width:1355px;    height:100px;    background-color:black; }/* 设置图片轮播样式 */#middleLog{    /* border:1px solid red; */    width:1355px;    height:350px;/*  background-color:yellow;    z-index:2; */}/* 设置业务领域样式 */#footLog{    /* border:1px solid red; */    width:1355px;    height:150px;    background-color:black;     z-index:5;}/*设置底部版权样式  */#bottomLog{    /* border:1px solid yellow; */    width:1355px;    height:50px;    text-align:center;    color:white;}/* 设置公司图标样式 */.logo{    /* border:1px solid black; */    width:340px;    height:100px;    /* background-color:pink; */     margin:10px 10px 100px 200px; }/*去除所有超链接下划线  */a{    text-decoration:none;}div[class="logo"] a{    font-size:30px;    color:white;}/*设置导航栏样式  */#menu{    /* border:1px solid black; */    width:700px;    height:100px;    /* background-color:blue;  */    z-index:3;/* 发现这个没效果 */    margin:-210px 100px 10px 570px;}/* 导航栏内容样式 */#menu ul li{    float:left;    margin:20px;    margin-top:47px;    /* border:1px red solid; */    font-size:20px;    list-style:none;}#menu ul li a{    color:white;}

五、总结

1、Tomcat部署问题

1）如何建立Tomcat与Eclipse的关系？

    Tomcat下载后，直接运行startup.bat，不要关闭，然后访问：localhost:8080就可以打开猫首页的界面；要想和Eclipse关联，需要window->show view -->servers 然后右键添加Tomcat下载路径即可。（先在Eclipse中打开Java视图（JavaEE视图不会显示Servers））

2）如何建立Eclipse中Servers与每个项目的关系？

    为Eclipse添加servers后，表明可以在Eclipse中启动Tomcat服务器，但是这时候还没有和每个项目建立联系，要想把单个项目部署到刚才添加到Eclipse中的Server上，需要双击添加后的Tomcat v8.5 at localhost;然后添加单个项目，这个时候，一旦添加，Tomcat服务器一启动，就会部署该项目到Tomcat安装路径下的webapps下面（和Root文件夹同级），此时此刻，在页面访问 localhost:8080/项目名称/页面  就可以访问到项目页面啦。    Tomcat默认直接访问的就是Root下面的页面 localhost:8080/index.jsp 和localhost:8080效果一样，因为web.xml中有默认的界面配置。如果访问我们自己的项目，也向类似这样直接访问，就需要把整个项目直接放到Root目录下即可，同时页面要放到最外层。

3）其他需要注意的地方？

    a.Eclipse中使用Project Explorer视图（建议）或者Package Explorer视图；    b.创建dynamic web项目时候，最好要在创建项目的时候，勾选web.xml；    c.编码问题。        1.1为避免过多处理编码，在服务器部署好后，Eclipse中会自动出现一个Servers的工程,在里面修改Server.xml；在8080端口位置，增加URIEncoding="UTF-8"即可；（等同于修改Tomcat的conf目录下的server.xml）;        1.2 修改.jsp页面的编码：Window-->Preferences-->web-->JSP Files-->修改默认编码为ISO 10646/Unicode(UTF-8)有什么用？这样每次新建JSP页面的时候，就不用手动修改编码啦。做好以上工作，一个Eclipse中的Web开发环境就搭建好了。这个是高度概括，适合有点基础的快速回顾。

2、多层DIV显示顺序

用到属性z-index，我虽然遇到了这个问题，但是通过其他方式处理掉了，对这个理解还不够；
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

3.display:none或visibility:hidden区别？

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

我们在做轮播图的时候，每张图片都是一个div，那么这里要用display:none，让其真正消失，而不是“表面消失”；

4、门户网站头部信息独立出来

便于统一样式，避免重复代码编写；引入方式是：

<%@ include="common_header.jsp"%>

这里可以温习下JSP三大指令:page include taglib
page主要是用来设置编码pageEncoding、导包import、错误页面显示errorPage
include就是在页面部分需要独立引入，就可以用这个；
taglib用来引入第三方库，比如JSTL标签库(引入前先导包)

5、实现页面跳转，方式多样：

1)、jsp方式跳转

转发request.getRequestDispatcher(“”).forward(request,response); //注意，转发带参，同时，页面如果这样转过去，而CSS js等样式引用路径又是相对的，那么样式是引用不到的；

<jsp:forward page="front/index.jsp"/>JSP动作便签跳转效果和转发一样；    重定向：response.sendRedirect("");    重定向，直接改变地址。无法带参，但是页面路径转变为跳转后的路径，好处在于：如果单纯是页面跳转，就可以解决转发样式无法引用的问题；

2)、JavaScript方式

window.location.href("");

六、下期预告

下一篇博客，将实现后台新闻管理。让我们拭目以待吧！

阅读全文

0 0