序
前一段時(shí)間有很多朋友來問我各種問題，比如java怎么學(xué)，c，c++，c#，java，還有php等等，到底學(xué)哪個(gè)好，哪個(gè)好就業(yè)？其中不乏剛畢業(yè)找不到工作的學(xué)生，我對(duì)此也是很有感觸，回想當(dāng)初那最最艱難的日子，我的確很了解這種焦急的心態(tài)。其實(shí)我個(gè)人感覺，編程語言都大同小異，無非是語法變一變，當(dāng)然，如果你為了快速上手，我還是優(yōu)先推薦java。
最近琢磨著要寫點(diǎn)東西，把基本的Java Web開發(fā)流程完整地走一遍，最后決定，干脆就寫一個(gè)小小的項(xiàng)目實(shí)戰(zhàn)吧。這個(gè)小項(xiàng)目作為一個(gè)JavaWeb的入門例子，從前臺(tái)頁面到項(xiàng)目發(fā)布，把整個(gè)流程走通。所謂麻雀雖小，五臟俱全。難度不是很高，正好可以作為入門使用。
接下來就是做什么的問題了，首先不能太簡(jiǎn)單，那樣的話就沒意思了。也不能太復(fù)雜，因?yàn)槲业拇_也沒那么多時(shí)間，思前想后，我打算寫一個(gè)小型的文章發(fā)布系統(tǒng)。
老實(shí)說，我也不知道最終會(huì)做成什么樣子，但是基本的CRUD肯定少不了的。前臺(tái)頁面的話，我會(huì)盡可能做得好看一點(diǎn)，畢竟我也不是專門做前端的。
至于知識(shí)點(diǎn)，當(dāng)然是盡可能豐富，把我用過的，并且理解的東西，一步一步地集成進(jìn)去。
嗯，這個(gè)系列一旦開始，以后基本上就圍繞著這個(gè)小項(xiàng)目寫文了。我的意思是，其他文章都不更了，在這個(gè)小項(xiàng)目寫完之前，我會(huì)把其他的文章都放下，全心全意地編寫這個(gè)系列。
終于開始了，想想還有點(diǎn)小激動(dòng)呢。
1. 項(xiàng)目的大致規(guī)劃
開發(fā)工具還是用eclipse，數(shù)據(jù)庫(kù)采用mysql。MVC框架的話，我就不用框架了，純粹用JSP來寫，實(shí)際開發(fā)肯定不會(huì)這么做，不過，這畢竟還是有意義的。當(dāng)然，你也可以把它換成框架版的。為什么用JSP？因?yàn)镴SP比較簡(jiǎn)單，作為一個(gè)入門級(jí)的web項(xiàng)目，而且我是一邊開發(fā)一邊寫文，我就懶得用MVC框架了。
為什么我要一邊開發(fā)一邊寫，因?yàn)槲矣X得，如果全部開發(fā)好了，再讓我從頭開始，把開發(fā)流程寫出來，那是很龐大的工作量，也不現(xiàn)實(shí)。而且，一邊開發(fā)一邊寫還有個(gè)好處，那就是可以幫助讀者看到整個(gè)項(xiàng)目的開發(fā)流程。
而且，包括我自己也不知道最終會(huì)寫成什么樣子，也可能本文結(jié)束后就GG了。
不過不管怎么說，這樣都會(huì)保留一點(diǎn)點(diǎn)新鮮感和樂趣。
如果你是初學(xué)者，并且希望完整地看一個(gè)小項(xiàng)目是如何做出來的，那么，這個(gè)系列也許會(huì)適合你。
可能寫10篇文章就結(jié)束，也可能30篇，看情況了。
好了，正式開始吧。
2. 項(xiàng)目搭建
2.1 新建項(xiàng)目
新建一個(gè) Dynamic Web Project，名字叫Article
點(diǎn)擊Finish
將項(xiàng)目的編碼改為 utf-8
2.2 新建web.xml
這是web項(xiàng)目的規(guī)范，一個(gè)web.xml文件可以對(duì)你的web項(xiàng)目進(jìn)行基本的配置。
2.3 編寫web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<!-- 歡迎頁面 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
2.4 編寫index.jsp
在WebContent目錄下新建一個(gè)index.jsp
代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<body>
恭喜，web項(xiàng)目已經(jīng)搭建完成。
</body>
</html>
這就是我們項(xiàng)目的首頁。
2.5 用 tomcat 發(fā)布項(xiàng)目
我這邊用的是tomcat7.0
運(yùn)行。
啟動(dòng)完畢后，打開瀏覽器，在地址欄輸入
http://localhost:8080/Article/
(我這邊的tomcat端口號(hào)為8080)
然后可以清楚得看到，網(wǎng)頁上出現(xiàn)了這么一行字：
恭喜，web項(xiàng)目已經(jīng)搭建完成。
這就說明，web項(xiàng)目已經(jīng)搭建成功了！
3. 首頁制作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<style>
</style>
</head>
<body>
<div class="header">
</div>
</body>
</html>
3.1 標(biāo)題欄
我們?cè)赽ody區(qū)域畫一個(gè)div，作為首頁的標(biāo)題欄。它的樣式先全部在本頁面寫，也就是style塊里面。
div是塊級(jí)元素，所以，雖然我們沒有給它設(shè)定寬度，它也默認(rèn)就是父容器的寬度。所以，我們只需要給它一個(gè)高度就OK啦。
*{
padding: 0 ;
margin: 0 ;
}
.header {
height: 60px ;
background: #458fce ;
}
效果：
3.2 畫一個(gè)LOGO
接下來，繪制 logo，由于樓主的 PS水平比較渣，所以這個(gè)部分就用文字替代吧。當(dāng)然，如果你是PS大神的話，也可以隨便給我做一個(gè)logo，在下一節(jié)中我就放上去。
求 logo ...
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
</div>
css:
*{
padding: 0 ;
margin: 0 ;
font-family: "微軟雅黑" ;
}
.header {
height: 72px ;
background: #458fce ;
}
.header .logo {
color: #fff ;
line-height: 72px ;
font-size: 30px ;
margin-left: 20px ;
display:inline-block ;
font-weight:500 ;
}
3.3 導(dǎo)航欄
我隨便想了幾個(gè)導(dǎo)航按鈕（其實(shí)就是 ul li）：
- 首頁
- 原創(chuàng)故事
- 熱門專題
- 欣賞美文
- 贊助
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li>首頁</li>
<li>原創(chuàng)故事</li>
<li>熱門專題</li>
<li>欣賞美文</li>
<li>贊助</li>
</ul>
</div>
同時(shí)，我們把 li 的小圓點(diǎn)去掉：
ul li {
list-style: none ;
}
這個(gè)效果顯然不是我們想要的，我們給logo加一個(gè)浮動(dòng)。
然后，給每一個(gè) li 添加一個(gè)左浮動(dòng)：
.header ul li {
float: left ;
}
接著，我們把位置和顏色做一些調(diào)整：
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'>首頁</li>
<li>原創(chuàng)故事</li>
<li>熱門專題</li>
<li>欣賞美文</li>
<li>贊助</li>
</ul>
</div>
css樣式
.header ul li.first {
margin-left: 30px ;
}
.header ul li {
float: left ;
color: #fff ;
display: inline-block ;
width: 112px ;
height: 72px ;
text-align: center ;
line-height:72px ;
cursor: pointer ;
}
cursor: pointer 的意思就是說，當(dāng)我鼠標(biāo)劃上去的時(shí)候，讓鼠標(biāo)變成一個(gè)小手的模樣。
因?yàn)閷?shí)際使用的時(shí)候，我們點(diǎn)擊導(dǎo)航按鈕就自動(dòng)跳轉(zhuǎn)頁面，所以，一般來說，每一個(gè)導(dǎo)航按鈕都應(yīng)該是一個(gè)a標(biāo)簽。
我們將代碼改一下：
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'><a href="javascript:void(0)">首頁</a></li>
<li><a href="javascript:void(0)">原創(chuàng)故事</a></li>
<li><a href="javascript:void(0)">熱門專題</li>
<li><a href="javascript:void(0)">欣賞美文</li>
<li><a href="javascript:void(0)">贊助</a></li>
</ul>
</div>
因?yàn)槟J(rèn)的a標(biāo)簽會(huì)有下劃線，字體顏色是藍(lán)色，為了美觀，我們修改一下a標(biāo)簽的樣式：
a {
color: #fff ;
text-decoration: none ;
}
3.5 給導(dǎo)航按鈕添加hover事件
.header ul li :hover {
background:#74b0e2 ;
}
效果：
奇怪了，li 的區(qū)域沒有變色，而當(dāng)我鼠標(biāo)劃到文字上的時(shí)候，會(huì)有一個(gè)小范圍的變色，這是咋回事呢？
難道hover失效了？
當(dāng)樓主寫到這里的時(shí)候，我也確實(shí)納悶了一會(huì)。。。
結(jié)果一查，發(fā)現(xiàn)：
我擦，這里多了一個(gè)空格啊，有木有！
好吧，要細(xì)心一點(diǎn)。。
那么，我們?nèi)サ艨崭瘢驼Ａ恕?/p>
.header ul li:hover {
background:#74b0e2 ;
}
這樣就好看多了吧。
時(shí)間差不多了，今天就到這里。至于更新頻率的話，不一定，不過周更是肯定會(huì)有的。
這個(gè)系列也是我的一次嘗試，希望大家喜歡。
您的支持是我寫作的最大動(dòng)力：
免責(zé)聲明： 博客中所有的圖片素材均來自百度搜索，僅供學(xué)習(xí)交流，如有問題請(qǐng)聯(lián)系我，侵立刪，謝謝。
