JavaWeb課程體系介紹
在JavaWeb階段，我們會(huì)帶領(lǐng)學(xué)員經(jīng)歷五個(gè)階段的學(xué)習(xí)，如上圖所示。
第一階段（當(dāng)前課程階段）：前端開發(fā)階段
開發(fā)要求：
1.可以讀懂UI工程師編寫的頁(yè)面，在整個(gè)頁(yè)面中根據(jù)自己的需求填寫代碼；
2.可以在指定位置進(jìn)行簡(jiǎn)單內(nèi)容的編寫，核心目的在于顯示數(shù)據(jù)；
3.掌握表單內(nèi)容的編寫；
4.掌握J(rèn)S簡(jiǎn)單動(dòng)畫的使用
第二階段：數(shù)據(jù)庫(kù)基礎(chǔ)回顧和進(jìn)階
開發(fā)要求：
1.必須會(huì)使用SQL語(yǔ)句進(jìn)行數(shù)據(jù)庫(kù)表操作；
2.會(huì)使用JDBC連接數(shù)據(jù)庫(kù)和數(shù)據(jù)庫(kù)連接池技術(shù)。為之后的框架打基礎(chǔ)
第三階段：服務(wù)端開發(fā)
開發(fā)要求：
1.會(huì)使用tomcat.可以將Web項(xiàng)目成功部署到Tomcat下，并通過(guò)瀏覽器可以訪問；
2.可以進(jìn)行服務(wù)器端程序開發(fā)，能夠綜合運(yùn)用JavaWeb技術(shù)開發(fā)實(shí)際項(xiàng)目
第四階段：服務(wù)器開發(fā)高級(jí)進(jìn)階
開發(fā)要求：
1.掌握監(jiān)聽器和過(guò)濾器的用法,重點(diǎn)會(huì)使用過(guò)濾器完成實(shí)際功能;
2.了解Ajax運(yùn)行原理,掌握jQuery中的Ajax操作;
第五階段：綜合案例
開發(fā)要求：
1.掌握J(rèn)avaWeb開發(fā)基本流程
2.linux操作系統(tǒng)的使用
3.掌握項(xiàng)目中的郵件發(fā)送、支付功能、緩存等技術(shù)的應(yīng)用。
2.網(wǎng)站信息頁(yè)面顯示案例
2.1需求分析
[案例一] 實(shí)現(xiàn)示例網(wǎng)站中 [公司簡(jiǎn)介] 頁(yè)面的制作
2.1技術(shù)分析
2.2.1什么是 HTML？
超文本標(biāo)記語(yǔ)言: Hyper Text Markup Language
超文本: 功能比普通的文本更加的強(qiáng)大.
標(biāo)記語(yǔ)言: 使用一組標(biāo)簽對(duì)內(nèi)容進(jìn)行描述的語(yǔ)言,它不是編程語(yǔ)言.是一種解釋性的語(yǔ)言。
為什么學(xué)習(xí) HTML？
靜態(tài)頁(yè)面，通過(guò)瀏覽器顯示出來(lái)的靜態(tài)的頁(yè)面?？梢院秃笈_(tái)程序組合成項(xiàng)目網(wǎng)站。
HTML 的語(yǔ)法和規(guī)范
Html 文件 都是以 .html 或者.htm 結(jié)尾.建議使用.html
Html文件分為頭部<head></head> 和主體<body></body>組成的.
Html標(biāo)簽都是由開始標(biāo)簽和結(jié)束標(biāo)簽組成的（除自閉合標(biāo)簽）
例如:<br/>
Html 標(biāo)簽忽略大小寫，建議使用小寫形式。
Html源碼中忽略空格和換行 HTML 入門
<html><!--開始標(biāo)簽-->
<head><!--頭部標(biāo)簽-->
<!--網(wǎng)頁(yè)標(biāo)題標(biāo)簽-->
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body><!--網(wǎng)頁(yè)內(nèi)容標(biāo)簽-->
網(wǎng)頁(yè)的主體內(nèi)容
</body>
</html><!--結(jié)束標(biāo)簽-->
HTML 排版標(biāo)簽
標(biāo)題標(biāo)簽
從h1~h6 逐漸變小
特點(diǎn)：加粗并且加黑顯示，獨(dú)占一行，每行與其他行之間有間距
屬性：align:取值 left(默認(rèn))/right/center
水平線標(biāo)簽<hr/>
屬性：color:顏色
size:粗細(xì)
width:長(zhǎng)度
段落標(biāo)簽<p></p>
特點(diǎn)：有段前段后間距，獨(dú)占一行
換行：<br/>
字體標(biāo)簽<font></font>
必須結(jié)合屬性使用
<font 屬性=值>字體內(nèi)容</font>
屬性: color：字體的顏色,可以使用英文單詞或者16進(jìn)制
size：字體大小 1 2 3 4 +1 +2 +3 -1 -2 -3 … point=1/72英寸
face：設(shè)置字體 (黑體 ,楷體,華文隸書… )在系統(tǒng)中存在的字體
注釋：<!--注釋--> 快捷鍵ctrl+/
加粗<b></b>
傾斜<i></i> 步驟分析
第一步: 創(chuàng)建一個(gè)Html文件
第二步: 創(chuàng)建一個(gè)標(biāo)題標(biāo)題 顯示極客營(yíng)
第三步: 創(chuàng)建四個(gè)段落的標(biāo)簽,分別顯示文字內(nèi)容.
第四步: 對(duì)文字內(nèi)容進(jìn)行完善(加粗 變色等等)
補(bǔ)充:特殊符號(hào) ( 空格 < > 等)
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)站信息顯示</title>
</head>
<body>
<h2 align="center">品牌故事</h2>
<hr>
<h1>極客營(yíng)</h1>
<p><font color="red">極客營(yíng)</font>---是基于多年培訓(xùn)、實(shí)訓(xùn)基礎(chǔ)之上累積而成的IT精英教育 連鎖品牌。自成立以來(lái)，一直致力于精英化培訓(xùn)，施行高質(zhì)量教學(xué)、 高品質(zhì)服務(wù)、高薪就業(yè)這一“三高”標(biāo)準(zhǔn)，全面打造IT精英團(tuán)隊(duì)。 為推動(dòng)“互聯(lián)網(wǎng)+”、“大眾創(chuàng)業(yè)、萬(wàn)眾創(chuàng)新”這一國(guó)家級(jí)新興戰(zhàn)略培 育優(yōu)質(zhì)人才，孕育領(lǐng)軍人物；經(jīng)過(guò)多年發(fā)展，極客營(yíng)人才實(shí)訓(xùn)連鎖 基地已發(fā)展成為國(guó)內(nèi)IT研發(fā)培訓(xùn)領(lǐng)導(dǎo)品牌。</p>
<p><b>企業(yè)定位</b>：極客營(yíng)專業(yè)從事于IT類人才實(shí)訓(xùn)和人力資源解決方案。 我們的成功源自于不懈地幫助學(xué)員提高IT技術(shù)，增加社會(huì)核心競(jìng)爭(zhēng)力 乃至提升生活品質(zhì)；幫助合作伙伴解決人才培育培養(yǎng)問題， 定制化各類人才解決方案。</p>
<p><b>企業(yè)使命</b>：為提高學(xué)員技能而努力創(chuàng)新，提供最優(yōu)秀、最具創(chuàng)新性的 IT教育產(chǎn)品，像對(duì)待生命一樣致力于IT教學(xué)創(chuàng)新，讓更多的人獲得更新 、更好的IT教育。</p>
<p><b>價(jià)值觀念</b>極客營(yíng)及所有教職員工鄭重承諾，以下四個(gè)核心價(jià)值觀是我們 一切工作的基礎(chǔ)：，成就學(xué)員——致力于學(xué)員的滿意度與口碑，創(chuàng)業(yè)創(chuàng)新—— 追求教學(xué)質(zhì)量和效率，專注于對(duì)學(xué)員和公司有影響的創(chuàng)新，精準(zhǔn)求實(shí)—— 基于高質(zhì)量教學(xué)與高薪就業(yè)，誠(chéng)信正直——建立信任與高性能的伙伴關(guān)系， 秉承銳意創(chuàng)新與追求卓越的傳統(tǒng)，極客營(yíng)將是一個(gè)具有競(jìng)爭(zhēng)力的IT教育先鋒。</p>
<p><b>品牌精神</b>：合作、共贏、創(chuàng)新、成就。</p>
</body>
</html>
網(wǎng)站圖片顯示頁(yè)面案例 需求分析
技術(shù)分析
1.<img/>標(biāo)簽
屬性：
1) src :訪問的圖片的路徑
路徑分為相對(duì)路徑和絕對(duì)路徑
相對(duì)路勁: 指定相對(duì)于當(dāng)前文件的資源文件位置.
當(dāng)前目錄：直接寫文件名稱(文件名稱包括后綴名稱 .jpg .gif 等)
上一級(jí)目錄：../文件名稱（返回多級(jí)，加多個(gè)../）
下一級(jí)：目錄名稱/文件名稱
絕對(duì)路徑（用的較少）: 指定從盤符到資源文件的完整路徑.
2) width：設(shè)置圖片的寬度
3)height：設(shè)置圖片的高度
一般情況下，設(shè)置圖片的width和height，防止布局亂
)alt：當(dāng)圖片無(wú)法正常顯示的時(shí)候給出的提示信息，它的顯示效果與瀏覽器有關(guān)
5)title: 鼠標(biāo)移到圖片時(shí)，顯示的提示信息
步驟分析
第一步：創(chuàng)建一個(gè) html 文件
第二步：創(chuàng)建一個(gè)圖片標(biāo)簽顯示 logo 圖片
第三步：創(chuàng)建一個(gè)圖片標(biāo)簽顯示 header 圖片
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頭部圖片顯示頁(yè)面</title>
</head>
<body>
<!--logo圖片-->
<img src="../img/logo.png" alt="logo圖片" width="327" height="58" />
<!--header圖片-->
<img src="../img/header.png" alt="header圖片" width="299" height="51">
</body>
</html>
網(wǎng)站友情鏈接顯示頁(yè)面案例 需求分析
技術(shù)分析
【HTML的列表標(biāo)簽】
無(wú)序列表
<ul>
<li>CSDN</li>
<li>百度</li>
</ul>
屬性：
type:指定無(wú)序列表前項(xiàng)目符號(hào)
有序列表
<ol>
<li>淘寶</li>
<li>阿里巴巴</li>
</ol>
屬性：
type:指定列表項(xiàng)前面的序號(hào)（1,a,A,i,I）
reversed:倒敘 html5里有的屬性
start:起始值
超鏈接標(biāo)簽<a></a>
屬性：href:超鏈接的地址
target:指定頁(yè)面顯示的位置
_self:默認(rèn)取值，覆蓋當(dāng)前頁(yè)面本身
_blank:打開新頁(yè)面
frame的name取值
步驟分析
創(chuàng)建一個(gè)無(wú)序列表
使用超鏈接標(biāo)簽包含文本 代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>友情鏈接顯示頁(yè)面</title>
</head>
<body>
<!--列表項(xiàng)-->
<ul>
<li><a >CSDN</a></li>
<li><a >百度</a></li>
<li><a href="#">淘寶</a></li>
<li><a href="#">阿里巴巴</a></li>
</ul>
</body>
</html>
網(wǎng)站首頁(yè)顯示案例 需求分析
網(wǎng)站首頁(yè)顯示頁(yè)面
技術(shù)分析
單元格
1.HTML的表格標(biāo)簽
1) 表格標(biāo)簽（組合標(biāo)簽）：
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
</table>
2) 表格的屬性：
table標(biāo)簽上
border ：表格邊框
width ：表格寬度
height ：表格高度
align ：水平方向?qū)R方式 left/ center/ right
bgcolor ：背景色
cellspacing : 單元格與單元格之間的間距
cellpadding : 單元格與內(nèi)容的填充
tr標(biāo)簽上的屬性
bgcolor:背景色
align:本行文本對(duì)其方式 left/center/right
height:行高
td標(biāo)簽上屬性與tr屬性類似
valign:垂直對(duì)其方式，這是td所特有的屬性。（top,center,bottom）
2.HTML的表格跨行跨列操作】
實(shí)現(xiàn):
在td標(biāo)簽上使用下面的屬性
跨列：colspan="值"
跨行：rowspan="值"
步驟分析
第一步：網(wǎng)站首頁(yè)分為八行一列的表格
第二步：實(shí)現(xiàn)第一行頭部：（一行三列表格）
第三步：實(shí)現(xiàn)第二行（用font，a實(shí)現(xiàn)）
第四步：實(shí)現(xiàn)第三行（靜態(tài)圖片）
第五步：實(shí)現(xiàn)第四行（嵌入一個(gè)三行七列的表格）
第六步：實(shí)現(xiàn)第五行（插入圖片）
第七步：實(shí)現(xiàn)第六行：復(fù)制第四行內(nèi)容
第八步：實(shí)現(xiàn)第七行（插入圖片）
第九步：實(shí)現(xiàn)第八行（寫文本標(biāo)簽）
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)站首頁(yè)</title>
</head>
<body>
<!--第一步：8行1列表格-->
<table border="1" width="1300px" align="center">
<!--第一行-->
<tr>
<td height="58">
<!--嵌入一行三列的表格-->
<table border="1" width="100%" height="100%">
<tr>
<td width="40%">
<img src="../img/logo.png">
</td>
<td width="40%">
<img src="../img/header.png">
</td>
<td>
<a href="#"><font color="blue"> 登錄 </font></a>
<a href="#"><font color="blue"> 注冊(cè) </font></a>
<a href="#"><font color="blue"> 購(gòu)物車 </font></a>
</td>
</tr>
</table>
</td>
</tr>
<!--第二行-->
<tr height="50">
<td bgcolor="black">
<a href="#"><font color="grey" size="4"> 首頁(yè) </font></a>
<a href="#"><font color="white" size="3"> 手機(jī)數(shù)碼 </font></a>
<a href="#"><font color="grey" size="3"> 電腦辦公 </font></a>
<a href="#"><font color="grey" size="3"> 電腦辦公 </font></a>
<a href="#"><font color="grey" size="3"> 電腦辦公 </font></a>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<img src="../img/1.jpg" width="100%">
</td>
</tr>
<!--第四行-->
<tr>
<td height="525px">
<!--嵌入3行七列表格-->
<table border="1" width="100%" height="100%">
<tr height="50">
<td colspan="7">
<font size="6"> 最新商品 </font>
<img src="../img/title2.jpg">
</td>
</tr>
<tr align="center">
<td rowspan="2" width="220px">
<a href="#"><img src="../img/big01.jpg"></a>
</td>
<td colspan="3" width="540" height="236">
<a href="#"><img src="../img/middle01.jpg"></a>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
</tr>
<tr align="center">
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第五行-->
<tr>
<td>
<img src="../img/ad.jpg" width="100%">
</td>
</tr>
<!--第六行-->
<tr>
<td height="525px">
<!--嵌入3行七列表格-->
<table border="1" width="100%" height="100%">
<tr height="50">
<td colspan="7">
<font size="6"> 熱門商品 </font>
<img src="../img/title2.jpg">
</td>
</tr>
<tr align="center">
<td rowspan="2" width="220px">
<a href="#"><img src="../img/big01.jpg"></a>
</td>
<td colspan="3" width="540" height="236">
<a href="#"><img src="../img/middle01.jpg"></a>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
</tr>
<tr align="center">
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
<td width="180">
<img src="../img/small03.jpg"><br>
<font size="2">電炒鍋</font><br><br>
<font size="2" color="red">￥299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="../img/footer.jpg">
</td>
</tr>
<!--第八行-->
<tr align="center">
<td>
<p>
<a href="#"><font size="2" color="blue">關(guān)于我們</font></a>
<a href="#"><font size="2" color="blue">聯(lián)系我們</font></a>
<a href="#"><font size="2" color="blue">招賢納士</font></a>
<a href="#"><font size="2" color="blue">法律聲明</font></a>
<a href="#"><font size="2" color="blue">友情鏈接</font></a>
<a href="#"><font size="2" color="blue">支付方式</font></a>
<a href="#"><font size="2" color="blue">配送方式</font></a>
<a href="#"><font size="2" color="blue">服務(wù)聲明</font></a>
<a href="#"><font size="2" color="blue">廣告聲明</font></a>
</p>
<p>
<font size="2">Copyright ? 2009-2017 極客商城 版權(quán)所有 </font>
</p>
</td>
</tr>
</table>
</body>
</html>
網(wǎng)站后臺(tái)管理頁(yè)面案例 需求分析
技術(shù)分析
1.框架集標(biāo)簽<frameset></frameset>
作用：將頁(yè)面進(jìn)行區(qū)域的劃分
屬性：cols="20%,*" 垂直分割成多列，取值可以是百分比，可以是數(shù)值，其中一個(gè)可以是*。
rows="" 水平分割成多行，取值可以是百分比，可以是數(shù)值，其中一個(gè)可以是*。
注意事項(xiàng)：應(yīng)用該標(biāo)簽時(shí)，頁(yè)面中不能包含body標(biāo)簽
frameset可以進(jìn)行嵌套使用，完成較復(fù)雜的頁(yè)面分割
2.frame標(biāo)簽
作用：在每個(gè)區(qū)域中使用frame標(biāo)簽顯示頁(yè)面
屬性：src指定該區(qū)域顯示的頁(yè)面地址
name:為區(qū)域起名，配合a標(biāo)簽上的target使用。
步驟分析
第一步：創(chuàng)建頁(yè)面"后臺(tái)管理系統(tǒng)頁(yè)面.html"
第二步：使用frameset標(biāo)簽將頁(yè)面進(jìn)行劃分成top，left，rigth三部分，為right部分frame添加name屬性
第三步：分別創(chuàng)建top.html，left.html，right.html等頁(yè)面
第四步：在left.html中創(chuàng)建列表和超鏈接文本，添加target屬性。
代碼實(shí)現(xiàn)
后臺(tái)管理系統(tǒng)顯示頁(yè)面.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺(tái)管理</title>
</head>
<frameset rows="20%,*">
<frame src="top.html" />
<!--第二行嵌入一個(gè)框架集-->
<frameset cols="25%,*">
<frame src="left.html" />
<frame name="right" src="right.html" />
</frameset>
</frameset>
</html>
left.html頁(yè)面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="member.html" target="right">會(huì)員管理</a></li>
<li><a href="product.html" target="right">商品管理</a></li>
<li><a href="brand.html" target="right">品牌管理</a></li>
<li><a href="type.html" target="right">分類管理</a></li>
</ul>
</body>
</html>
