Home > Developer > Web Develop
JSP implements Pet Shop design
650) this.width=650; "alt=" wkiom1t2tm_gqipgaamfw_1idj4257.jpg "src=" http://s3.51cto.com/wyfs02/M01/5A/1E/ Wkiom1t2tm_gqipgaamfw_1idj4257.jpg "width=" height= "288"/>
First, MyEclipse deployment
Open myeclipse,window--references, text box, enter JRE or Tomcat for related operations
(1) Configuring the JRE
(2) Integrating Tomcat
(3) Deployment project
Baidu Experience: MyEclipse deploy project to tomcat (including download related software)
Second, MyEclipse New project
Baidu Experience: MyEclipse2014 Create a new Web project
(1) New project
(2) Create a new JSP page
Three, MyEclipse development Pet Shop
(a) Website homepage design
First page code analysis (recommended to view the code in Firefox browser, code debugging, of course, now IE page has this feature)
650) this.width=650; "Title=" Home code. PNG "alt=" wkiom1t-hgstxv3qaagvo_wr2m4159.jpg "src=" http://s3.51cto.com/wyfs02/ M02/5a/dc/wkiom1t-hgstxv3qaagvo_wr2m4159.jpg "/>
After the static home page analysis as shown, the clear layer can be considered first
650) this.width=650; "title=" Qq20150310100911.png "alt=" wkiol1t-z2ccwtu7aadw3pe2bli452.jpg "src="/HTTP/ S3.51cto.com/wyfs02/m01/5a/d6/wkiol1t-z2ccwtu7aadw3pe2bli452.jpg "/>
We will top, nav, banner, searcher several layers of content, in different pages are not changed to the header page, the next Contrainer layer content to the Contents page, footer layer content into the footer page,
The home code is as follows:
<% @page contenttype= "Text/html;charset=utf-8"%>
<title> Untitled Document </title>
<link href= "Css/css.css" rel= "stylesheet" type= "Text/css"/>
<body>
<div class= "Wrap" >
<div class= "Header" >
<% @include file= "header.jsp"%> contains top to searcher layers of code
</div>
<div class= "Contrainer" >
<div class= "Left" >
<% @include file= "left.jsp"%> contains left layer code
</div>
<div class= "Right" >
<% @include file= "right.jsp"%> contains right layer code
</div>
</div>
<div class= "Footer" >
<% @include file= "footer.jsp"%> contains footer layer code
</div>
</div>
</body>
Next apply the Firefox browser, paste the corresponding section of the code
Install debug on the Firefox browser, press F12, view the source code, select the appropriate section to paste the content using innerHTML method, or you can use Dreamweaver and other software to help achieve
Header.jsp page Code
<% @pagecontenttype= "Text/html;charset=utf-8"%>
<div class= "Top" >
<div class= "logo" >
</div>
<div class= "Top_right" >
<ul><li><a href= "#" > Once cat Home </a></li>
<li>
</li><li><a href= "#" > Mall </a></li>
<li>
</li><li><a href= "#" > a shopping cart </a></li>
<li>
</li>
<li><a href= "#" > Forum </a></li>
<li>
</li>
<li><a href= "#" > Admin login </a></li>
<li>
</ul>
</div>
</div>
<div class= "Clear" ></div>
<div class= "nav" ><ul><li style= "padding-left:170px;" ><a href= "index.jsp" > Home </a></li>
<li>
</li>
<li><a href= "Index.jsp?type=product" > Products </a></li><li>
</li><li><a href= "#" > New Products </a></li><li>
</li><li><a href= "Index.jsp?type=intro" > Company Introduction </a> </li><li>
</li><li><a href= "Index.jsp?type=news" > Company news </a>< /li><li>
</li><li>
<a href= "Index.jsp?type=video" > Wonderful video </a></li><li>
</li><li><a href= "Index.jsp?type=teles" >
Contact Us </a></li>
</ul></div>
<div class= "banner" ></div>
<div class= "Searcher" ><form><span> merchandise </span><input type= "text"/><input type= " Submit "class=" BTN "value=" "/>
</form></div>
Right.jsp page Code
<% @pagecontenttype= "Text/html;charset=utf-8"%>
<div class= "Main_gsjs" >
<p> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p> text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text and text </p>
<p><a href= "#" >[more]</a></p>
</div>
<div class= "Clear" ></div>
<div class= "Main_xpzs" >
<div class= "left" ></div>
<div class= "right" ></div>
<div class= "center" ><ul><li></li><li></li>
<li></li>
<li></li>
</ul>
</div>
<div class= "Clear" ></div>
</div>
Add another page to see if you can achieve the previous static site home page effect
(ii) Overall design of the website
(1) To achieve the alignment between pages, you need to pass the parameters in the navigation links section
Header part content:
<div class= "nav" ><ul><li style= "padding-left:170px;" ><a href= "index.jsp" > Home </a></li>
<li>
</li>
<li><a href= "Index.jsp?type=product" > Products </a></li><li>
</li><li><a href= "#" > New Products </a></li><li>
</li><li><a href= "Index.jsp?type=intro" > Company Introduction </a> </li><li>
</li><li><a href= "Index.jsp?type=news" > Company news </a>< /li><li>
</li><li>
<a href= "Index.jsp?type=video" > Wonderful video </a></li><li>
</li><li><a href= "Index.jsp?type=teles" >
Contact Us </a></li>
</ul></div>
(2) Right page design
First you need to save the right.jsp file as a right1.jsp
right.jsp implementation according to HEADER.JSP click Pass parameter different right display different content
<% @page contenttype= "Text/html;charset=utf-8"%>
<%
String type=request.getparameter ("type");
if (type==null) {
%>
<jsp:include page= "right1.jsp" ></jsp:include>
<%}else if (type.equals ("News")) {%>
<jsp:include page= "news.html" ></jsp:include>
<%}else if (type.equals ("Product")) {%>
<jsp:include page= "products.html" ></jsp:include>
<%}else if (type.equals ("Teles")) {%>
<jsp:include page= "teles.html" ></jsp:include>
<%}else if (type.equals ("video")) {%>
<jsp:include page= "videos.html" ></jsp:include>
<%}else if (type.equals ("Intro")) {%>
<jsp:include page= "introduction.html" ></jsp:include>
<%}%>
Dynamically import different pages depending on the passing parameters.
Keep the right layer innerHTML code on the original news.html,teles.html,products.html,introductin.html,videos.html page as required, and delete the other parts
(3) Right also code further optimization, the news.html,teles.html,products.html,introductin.html,videos.html page content is integrated into the page
you can keep the original design, save right as a content.jsp page, and change the index.jsp page code section
<div class= "right" >
<% @include file= "content.jsp"%> contains right layer code
</div>
content.jsp File Code section changes:
<% @page contenttype= "Text/html;charset=utf-8"%>
<%
String type=request.getparameter ("type");
if (type==null) {
%>
<!--right1.jsp part of the content--
<div class= "Main_gsjs" >
<p> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p> text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text and text </p>
<p><a href= "#" >[more]</a></p>
</div>
<div class= "Clear" ></div>
<div class= "Main_xpzs" >
<div class= "left" ></div>
<div class= "right" ></div>
<div class= "center" ><ul><li></li><li></li>
<li></li>
<li></li>
</ul>
</div>
<div class= "Clear" ></div>
</div>
else if part changes as above
Related knowledge:
(1) Elipse/myeclipse shortcut key: alt+/code hint, ctrl+/comment or cancel
Note, Ctrl+shift+o quick Import class package, F3 jump to a class or variable declaration
Information: MyEclipse shortcut key Daquan
This article is from the "Learn Without thinking" blog, please be sure to keep this source http://dyzyxy.blog.51cto.com/944775/1618918
JSP third lesson content: JSP realizes pet Shop design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
