1、第2章 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)技術(shù),表達(dá)層 應(yīng)用/邏輯層 數(shù)據(jù)層,商務(wù)表達(dá)層的功能靜態(tài)網(wǎng)頁(yè)的表達(dá)及其技術(shù)（HTTP/HTML）網(wǎng)頁(yè)的制作和發(fā)布,2.1 商務(wù)表達(dá)層的功能,商務(wù)表達(dá)層功能：表現(xiàn)數(shù)據(jù) 客戶(hù)端：表現(xiàn)數(shù)據(jù) Web服務(wù)器：發(fā)布信息，與客戶(hù)端和應(yīng)用服務(wù)端進(jìn)行交互 “客戶(hù)獨(dú)立的”：只為用戶(hù)提供界面和接受請(qǐng)求，并返回結(jié)果 頁(yè)面和風(fēng)格等變化，不會(huì)影響應(yīng)用和數(shù)據(jù)層,2.2 靜態(tài)頁(yè)面的表達(dá)及其技術(shù),2.2.1 靜態(tài)頁(yè)面的體系結(jié)構(gòu),HTTP協(xié)議完成消息傳遞、HTML語(yǔ)言用來(lái)管理文本內(nèi)容的顯示和格式等,2.2.2 置標(biāo)語(yǔ)言 標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言SGML (Standard Generalized Mark

2、up Language),SGML(Standard Generalized Markup Language) ISO組織在1986年推出的一種用標(biāo)記來(lái)描述文檔資料的通用語(yǔ)言。十分龐大，不易學(xué)習(xí)和使用，在計(jì)算機(jī)實(shí)現(xiàn)上比較困難。 HTML和XML都是在此基礎(chǔ)上派生出來(lái)的： HTML只使用了SGML中很小一部分標(biāo)記，簡(jiǎn)單，適用于Web頁(yè)面的顯示。 XML用來(lái)定義數(shù)據(jù)結(jié)構(gòu)，適合于電子商務(wù)中的大規(guī)模數(shù)據(jù)傳輸。,HTTP簡(jiǎn)介 HTML簡(jiǎn)介 HTML的常用標(biāo)記 用HTML提高網(wǎng)頁(yè)設(shè)計(jì)水平,HTTP 與 HTML,第一節(jié) HTTP簡(jiǎn)介,HTTP（超文本傳輸協(xié)議） 是一種基本的客戶(hù)機(jī)/服務(wù)器的訪問(wèn)協(xié)議，用于支

3、持WWW應(yīng)用。 使用HTTP協(xié)議，客戶(hù)端（比如瀏覽器）向WWW服務(wù)器發(fā)送HTTP命令請(qǐng)求，而服務(wù)器回應(yīng)相應(yīng)的網(wǎng)頁(yè)(或者數(shù)據(jù))。,HTTP消息的三個(gè)組成部分,一個(gè)單獨(dú)的請(qǐng)求或響應(yīng)行 HTTP頭 HTTP主體,一個(gè)單獨(dú)的請(qǐng)求或響應(yīng)行,用戶(hù)請(qǐng)求行： 一個(gè)方法（通常是GET或POST） 其后跟著一個(gè)文檔地址以及所使用的版本號(hào) GET / contents.html HTTP/1.1 表示瀏覽器使用GET方法從Web服務(wù)器獲取所需的網(wǎng)頁(yè)contents.html 文檔，HTTP協(xié)議版本號(hào)是1.1。,一個(gè)單獨(dú)的請(qǐng)求或響應(yīng)行,響應(yīng)行： HTTP協(xié)議版本號(hào) 一個(gè)用來(lái)指示請(qǐng)求是否成功的HTTP狀態(tài)碼（under

4、stood或satisfied）、以及請(qǐng)求不成功的原因。 HTTP/1.1 404 Not Found 當(dāng)服務(wù)器無(wú)法找到請(qǐng)求的URL時(shí)，發(fā)送給瀏覽器的狀態(tài)碼就是 404（描述為Not Found）。,Status Codes 及描述,1xx: Informational 2xx: Success 3xx: Redirection 4xx: Client Error 5xx: Server Error,GET通過(guò)在URL地址后面附加參數(shù)的形式來(lái)向后臺(tái)遞交數(shù)據(jù) ，此時(shí)URL一般包含一個(gè)詢(xún)問(wèn)字符串（跟在？號(hào)之后），如：http:/localhost:8000/j2ee?day=12； ?name=l

5、iudong div#menu background-color:#ffff99; height:200px; width:100px; float:left; div#content background-color:#EEEEEE; height:200px; width:400px; float:left;,div#footer background-color:#99bbbb; clear:both; text-align:center; h1 margin-bottom:0; h2 margin-bottom:0; font-size:14px; ul margin:0; li li

6、st-style:none; , Main Title of Web Page Menu HTML CSS JavaScript ,Content goes here Copyright W3S ,HTML樣式style,CSS定義,CSSCascade Style Sheet層疊樣式表 CSS 成為W3C標(biāo)準(zhǔn) 用來(lái)裝飾HTML/XML的標(biāo)記集合,字體屬性,h2 font-family : helvetica, impact, sans-serif,顏色與背景屬性,文本屬性,邊距屬性,填充屬性,邊框?qū)傩?圖文混排,列表屬性,鼠標(biāo)屬性,定位屬性,濾鏡屬性,樣式,HTML樣式、內(nèi)嵌的CSS樣式、外

7、接的CSS樣式, h1 color: red; p color: blue; header 1 A paragraph. , This is a heading This is a paragraph. , ,外接的CSS樣式, 我通過(guò)外部樣式表進(jìn)行格式化。 我也一樣！ ,mystyle.css h1 color: blue p color: red,HTML和CSS入門(mén)示例1,Step 1: 新建記事本，代碼如下，文件名為dreamdu.html, 歡迎來(lái)到夢(mèng)之都 歡迎來(lái)到夢(mèng)之都 這是我的第一個(gè)網(wǎng)頁(yè),在這里 盡情學(xué)習(xí)CSS 吧! ,Step 2: 新建記事本，代碼如下，文件名為dreamdu

8、.css,/*段落樣式*/ p color: purple; font-size: 12px; /*標(biāo)題樣式*/ h1 color: olive; text-decoration: underline; /*鏈接樣式*/ a:link color:#006486; a:visited color:#464646; a:hover color: #fff; background: #3080CB; /*a:hover指的是鼠標(biāo)經(jīng)過(guò)它時(shí)候的效果*/ a:active color:white; background: #3080CB ; ,HTML和CSS入門(mén)示例2,見(jiàn)網(wǎng)絡(luò)編程技術(shù)_程序-HTML-Example-1-CSS,HTTP HTTP消息的三個(gè)組成部分 統(tǒng)