How do you organise a large html file?
Question
I have already factored around 3500 lines of JS & CSS code out of a JSP file.
I am currently cleaning a large html file with greater than 1500 lines of code so that I can I can do some enhancement to the functionality. How can I break this file up further to make it manageable and to make the structure of the web page visible in the jsp file?
2 answers
solution1
1 2012-08-06 17:52:14
Use the "source code formatting" functionality of whatever IDE you are using. Almost all IDE's have this functionality. It will give you the structure as it indents the source code depending upon how nested the elements are. You mentioned you have 1500 lines of code. I'm guessing you have lot of styles which are are defined inline for each element. Create new classes in css file and assign them to elements to separate styling from the page structure. Launch the page in browser and use firebug or chromes developer tool to "chunk" out the major structures like Navigation, Copyright information, Contact Notices, blah, blah. If you are using any backend technology like jsp, save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html and include them in the required file for eg:
<?(some jsp tag to include that file here because I do not know jsp);
?>
solution2
0 2012-08-07 01:59:39
i use my tags as controls and templates, for example:
masterPage.tag file - general site template
<%@ tag description="page template" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${title} | ${app.servName}</title>
<link href="${app.staticUrl}/css/general.css${v}" rel="stylesheet" type="text/css" />
</head>
<body>
<jsp:doBody />
</body>
</html>
comments.jsp - page with comments list(used masterPage.tag as template and commentsList.tag as controls)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="utd" tagdir="/WEB-INF/tags/templates/default" %>
<%@ taglib prefix="uc" tagdir="/WEB-INF/tags/controls/" %>
<utd:masterPage>
<div class="post-comments">
<uc:commentsList comments="${post.comments}" />
</div>
</utd:masterPage>
<jsp:doBody> will be replaced in master page with content in <utd:masterPage>
commentsList.tag - control, rendering comments, used in several places
<%@ tag description="render comments" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="comments" required="true" type="java.util.List" description="comments list" %>
<c:if test="${not empty comments}">
<ul class="comments">
<c:forEach items="${comments}" var="comment" varStatus="i">
<li>
<div class="comments-text">
${comment.friendlyCreateDate}
<p>
${comment.text}
</p>
</div>
</li>
</c:forEach>
</ul>
</c:if>
- i try logic html block make in control, this control may be used in other page
- controls may in itself have other controls
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.