1、2012年9月,JSP程序設(shè)計(jì),第二章 Web開發(fā)基礎(chǔ),JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-2-,第2章 Web開發(fā)基礎(chǔ),JSP開發(fā)環(huán)境的搭建 Web服務(wù)目錄的設(shè)置 B/S結(jié)構(gòu)特點(diǎn) 使用MyEclipse開發(fā)和部署B(yǎng)/S應(yīng)用程序的基本步驟 軟件 部署 創(chuàng)建JSP文件常用的方法,復(fù)習(xí),JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-3-,第2章 Web開發(fā)基礎(chǔ),HTML/XHTML 文檔結(jié)構(gòu)、常用標(biāo)記等技術(shù) DIV+CSS頁面布局原理與實(shí)現(xiàn)技術(shù) 頁面表格的制作技術(shù) 掌握頁面表格的制作技術(shù) 掌握定義css選擇器的方法,內(nèi)容,要求,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-4-,2.1 HTML簡介,HTML HTML（Hype

2、r Text Marked Language，即超文本標(biāo)記語言）是描述網(wǎng)頁的標(biāo)記語言。 HTML文件由Web服務(wù)器發(fā)送給客戶端瀏覽器，客戶瀏覽器按HTML描述的格式將其顯示在瀏覽器窗口內(nèi)。 HTML文件通過HTTP通信協(xié)議，使得HTML文件可以在互聯(lián)網(wǎng)上順暢的進(jìn)行文件交換和訪問。 HTML文件是純文本文件格式，可以用文本編輯器、專業(yè)的網(wǎng)頁編輯工具編輯制作。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-5-,2.1 HTML簡介,URL URL是Uniform Resource Locator的縮寫，中文稱之為統(tǒng)一資源定位器。URL是Internet中資源的簡單命名機(jī)制。 URL由三部分構(gòu)成：協(xié)議、主機(jī)DN

3、S名或IP地址和文件名。例如URL： 其含義為：協(xié)議為http協(xié)議，主機(jī)為，文件名為index.html。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-6-,2.1 HTML簡介,以下哪些是正確的URL? 1、 2、file:/ 3、 4、 5、:80 6、/news/welcome.html,問題,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-7-,2.1 HTML簡介,HTML文件結(jié)構(gòu) HTML的標(biāo)記與屬性 HTML標(biāo)記是用“”括起來的標(biāo)識(shí)符，括號(hào)中間的標(biāo)識(shí)符為標(biāo)記名稱，如標(biāo)記 屬性是標(biāo)記中的參數(shù)選項(xiàng)。大多數(shù)標(biāo)記都有一些自己的屬性，有些標(biāo)記也有共用的一些屬性，各屬性之間無先后順序，如果省略屬性則采用默認(rèn)值。 屬性的

4、一般使用格式： 內(nèi)容,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-8-,2.2 常用HTML標(biāo)記,HTML的文字標(biāo)記 標(biāo)記 、和標(biāo)記 標(biāo)記 標(biāo)記 標(biāo)記 標(biāo)記,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-9-,2.2 常用HTML標(biāo)記,特殊標(biāo)記和圖形標(biāo)記 和 attribute:value; 其中： tagName為標(biāo)記名稱，被所包含的規(guī)則指定。 attribute:value;在之內(nèi)，用“屬性:值；”的形式為tagName指定規(guī)則。 選擇器可以有一個(gè)或多個(gè)attribute:value;形式指定的規(guī)則。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-18-,2.4 頁面布局,標(biāo)記選擇器 類型選擇器 tagName.classNam

5、e attribute:value; attribute:value; id選擇器 tagName#idName attribute:value; attribute:value; ,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-19-,2.4 頁面布局,CSS的盒子模型 在CSS中一個(gè)盒子模型包括4個(gè)區(qū)，分別是內(nèi)容（Content Container）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）、內(nèi)容高度height、內(nèi)容寬度width等。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-20-,2.4 頁面布局,DIV層 層又稱為Block-Level區(qū)塊或Div Element 或CSS-

6、Layer，中文一般都稱之為層。 div標(biāo)記是為HTML文檔定義層的標(biāo)記。 標(biāo)記定義的層可以方便地放在頁面的任何一個(gè)位置，除了平面上的并行定位，層還增加了三位空間的定位z-index，因?yàn)閦-index定義了堆疊的順序，類似于圖形設(shè)計(jì)中使用的圖層，所以擁有了z-index屬性的元素被形象的稱為層。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-21-,2.4 頁面布局,DIV標(biāo)記 在HTML中使用定義層，標(biāo)記使用內(nèi)聯(lián)樣式定義層的格式如下： ,其中： class為層的類名稱，類名稱要符合HTML標(biāo)識(shí)符的規(guī)范，類名稱可以重名。 id為層的ID，在整個(gè)HTML文檔中，id必須是唯一的。 title為層的標(biāo)題屬性，

7、取值為文字。 style為層樣式屬性，取值為css樣式語句， 如“background:#cc6666;border:#cc99cc; position：absolute； left:50px;top:50px;width:200px; height:200px;z-index:1;“， 樣式語句采用“屬性:屬性值；”形式。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-22-,2.4 頁面布局,div層定位 樣式在控制層的大小、背景時(shí)使用了CSS的盒子模型，如2.4.1所述。盒子模型常用的定位屬性有position、float、z-index、top、right、left、bottom和visiblity等，對(duì)這些屬性的理解，會(huì)極大地幫助讀者控制定義的層，使設(shè)計(jì)的頁面更美觀。 position屬性有五個(gè)取值，分別為：static、relative、absolute、fixed、inherit。,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-23-,上機(jī)實(shí)踐,掌握基本HTML文件組成及標(biāo)記使用 理解CSS+DIV頁面布局模式 完成“陜西省職稱計(jì)算機(jī)考試報(bào)名系統(tǒng)”首頁面,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-24-,作業(yè),P50:1-1；1-5,JSP程序設(shè)計(jì) 計(jì)算機(jī)工程系,-25-,2.4 頁面布局,div+css頁面布局 在W3C