《計算機教學(xué)課件 JavaEE企業(yè)級開發(fā)PPT》由會員分享，可在線閱讀，更多相關(guān)《計算機教學(xué)課件 JavaEE企業(yè)級開發(fā)PPT（26頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、JavaEE企業(yè)級開發(fā)第十八講由NordriDesign提供主要內(nèi)容需求分析說明需求分析說明頁面設(shè)計頁面設(shè)計天狗 T實現(xiàn)電子商務(wù)平臺的基本功能商戶可以管理商品購物者可以添加購物車用戶分角色登陸登陸模塊登陸模塊登錄登錄角色判斷角色判斷商品管理商品管理購物模塊購物模塊登陸頁面登陸頁面登陸框登陸框分類分類/列表列表Use case:login訪問數(shù)據(jù)庫判斷用戶名、密碼是否正確如果不正確，返回登陸頁面重新登陸根據(jù)用戶的角色選擇不同的跳轉(zhuǎn)商品管理模塊商品管理模塊商戶主頁面商戶主頁面商品列表商品列表添加商品頁面添加商品頁面刪除商品刪除商品商品管理頁面商品管理頁面商品列表商品列表添加添加/修改商品屬性修改商
2、品屬性購物模塊購物模塊買家登陸買家登陸商品詳細信息頁面商品詳細信息頁面加入購物車加入購物車商品列表頁面商品列表頁面大圖視圖大圖視圖列表視圖列表視圖單個商品頁面單個商品頁面加入購物車加入購物車設(shè)計數(shù)據(jù)庫設(shè)計數(shù)據(jù)庫需要哪些表表的字段表的關(guān)聯(lián)需要補充的知識需要補充的知識頁面設(shè)計HTMLCSS+DIVJavaScriptDiv+css的概述業(yè)界對業(yè)界對DIV+CSS的標(biāo)準(zhǔn)化設(shè)計關(guān)注的標(biāo)準(zhǔn)化設(shè)計關(guān)注DIV+CSS標(biāo)準(zhǔn)化的影響下，網(wǎng)頁設(shè)計標(biāo)準(zhǔn)化的影響下，網(wǎng)頁設(shè)計人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn)人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn) 傳統(tǒng)的網(wǎng)頁布局是使用網(wǎng)格傳統(tǒng)的網(wǎng)頁布局是使用網(wǎng)格DIV+CSS布局DIV+CSS布局
3、這個布局中，div承載的是內(nèi)容，而承載的是內(nèi)容，而css承載的是承載的是樣式。樣式。內(nèi)容和樣式的分離對于所見即所得的傳統(tǒng)TABLE編輯方式確實是一個很大的沖擊，尤其是設(shè)計人員很難接受設(shè)計一個他們不能立即看到的樣式。不過隨著學(xué)習(xí)，會發(fā)現(xiàn)div+css的好處實在是太明顯了DIV的概念1. DIV 全稱全稱 division 意為意為“區(qū)分區(qū)分”使用使用 DIV 的方法跟使的方法跟使用其他用其他 tag 的方法一樣。的方法一樣。 2. 如果單獨使用如果單獨使用 DIV 而不加任何而不加任何 CSS，那么它在網(wǎng)頁中，那么它在網(wǎng)頁中的效果和使用的效果和使用 是一樣的。是一樣的。 3. DIV本身就是容器
4、性質(zhì)的本身就是容器性質(zhì)的，你不但可以內(nèi)嵌，你不但可以內(nèi)嵌table還可以還可以內(nèi)嵌文本和其它的內(nèi)嵌文本和其它的HTML代碼代碼 4. 注意：注意：標(biāo)簽可以用來組合其它的標(biāo)簽可以用來組合其它的HTML元素，但不元素，但不能嵌套在段落元素中，例如，能嵌套在段落元素中，例如，aabbcc的結(jié)果是不確定的。的結(jié)果是不確定的。css的概念CSS:Cascading Style Sheets 層疊式樣式表HTML語言并不是真正的版面語言，它只是標(biāo)記語言，意圖把語言并不是真正的版面語言，它只是標(biāo)記語言，意圖把文檔的不同部分通過它們的功能作用進行分類，但并不指出這文檔的不同部分通過它們的功能作用進行分類，但并
5、不指出這些元素如何在計算機屏幕上顯示。些元素如何在計算機屏幕上顯示。CSS則提供對文檔外觀的更好更全面的控制，而且不干擾文檔則提供對文檔外觀的更好更全面的控制，而且不干擾文檔的內(nèi)容。的內(nèi)容。CSS基本語句的結(jié)構(gòu)：HTML選擇符選擇符屬性屬性1：值：值1；屬性；屬性2：值：值2；屬性；屬性n：值：值n；選擇符是要對它應(yīng)用說明的選擇符是要對它應(yīng)用說明的HTML元素名稱；屬性就是能夠被元素名稱；屬性就是能夠被CSS影響的瀏覽器行為，如字體、背景、邊界等；值就是可以影響的瀏覽器行為，如字體、背景、邊界等；值就是可以為屬性設(shè)置的任何選項，如為屬性設(shè)置的任何選項，如“楷體楷體”，“red”等。等。如：如：
6、p font-size:12pt；color:blueSPAN 和和 DIV 的區(qū)別的區(qū)別SPAN 和 DIV 的區(qū)別在于，DIV(division)是一個塊是一個塊級元素級元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。是行級容器標(biāo)簽是行級容器標(biāo)簽，不可以包含圖片、標(biāo)題、段落等，只能包含文字內(nèi)容而SPAN 是行內(nèi)元素，SPAN 的前后是不會換行的，它沒有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時，可以使用SPAN。 盒子模型每個每個HTML元素都可以看作一個裝了東西的盒子，元素都可以看作一個裝了東西的盒子，盒子具有盒子具有寬度（寬度（width）和和高度（高度（heig
7、ht），盒，盒子里面的內(nèi)容到盒子的邊框之間的距離即子里面的內(nèi)容到盒子的邊框之間的距離即填充填充（padding），盒子本身有，盒子本身有邊框（邊框（border），而，而盒子邊框外和其他盒子之間，還有盒子邊框外和其他盒子之間，還有邊界邊界（margin）。實例實例所有的設(shè)計第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來，以下是一個構(gòu)思好的界面布局圖。頁面構(gòu)圖頁面構(gòu)圖仔細分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個部分：1、頂部部分，其中又包括了、頂部部分，其中又包括了LOGO、MENU和
8、一幅和一幅Banner圖片；圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。、底部，包括一些版權(quán)信息。 有了以上的分析，我們就可以很容易的布局了，我有了以上的分析，我們就可以很容易的布局了，我們設(shè)計層如下圖們設(shè)計層如下圖:DIV結(jié)構(gòu)如下：body /*這是一個HTML元素*/#Container /*頁面層容器*/#Header /*頁面頭部*/#PageBody /*頁面主體*/#Sidebar /*側(cè)邊欄*/#MainBody /*主體內(nèi)容*/#Footer /*頁面底部*/創(chuàng)建頁面創(chuàng)建CSS文件開發(fā)方式開發(fā)方式分組開發(fā)，每組三人各個小組統(tǒng)一表結(jié)構(gòu)設(shè)計、頁面風(fēng)格、命名方式、開發(fā)平臺版本等每個成員負(fù)責(zé)一個模塊的開發(fā)，包括該模塊的頁面、業(yè)務(wù)邏輯、pojo、DAO等
計算機教學(xué)課件 JavaEE企業(yè)級開發(fā)PPT
