網(wǎng)頁(yè)設(shè)計(jì)第二章III.pptVIP

,JSP 網(wǎng) 頁(yè) 設(shè) 計(jì),董祥和,第一章 JSP概述(第1章) 第二章 網(wǎng)頁(yè)布局基礎(chǔ) 第三章 JavaScript基礎(chǔ) 第四章 DOM基礎(chǔ) 第五章 JSP頁(yè)面與JSP標(biāo)記 (第2章) 第六章 JSP內(nèi)置對(duì)象 (第4章) 第七章 JSP中的文件操作(第5章) 第八章 JSP中使用數(shù)據(jù)庫(kù) (第6章) 第九章 JSP與JavaBean (第7章) 第十章 Java Servlet基礎(chǔ) (第8章),課程內(nèi)容,前端,動(dòng)態(tài),第二章 網(wǎng)頁(yè)布局基礎(chǔ),本章主要內(nèi)容 1 CSS如何控制頁(yè)面 2 CSS選擇器 3 CSS選擇器命名及常用命名 4 盒子模型 5 塊狀元素和內(nèi)聯(lián)元素 6 CSS常用屬性,第二章 網(wǎng)頁(yè)布局基礎(chǔ),本章主要內(nèi)容 7 浮動(dòng) 8 清除浮動(dòng) 9 導(dǎo)航條 10 頁(yè)面布局 11 定位 12 CSS Hack,十 頁(yè)面布局,網(wǎng)頁(yè)效果圖(參見(jiàn)布局素材)：,背景圖片bg.gif、clouds.gif； 網(wǎng)站logo標(biāo)識(shí)logo.png； 導(dǎo)航條背景圖片navHoverBg.png； 網(wǎng)站banner或廣告圖片：banner.jpg； 網(wǎng)頁(yè)正文顯示圖片articleBanner.jpg； 欄目標(biāo)題背景圖片title.jpg，欄目列表項(xiàng)圖片dot.gif。,(一)浮動(dòng)布局之結(jié)構(gòu)設(shè)計(jì),【第一步】：,首先分析頁(yè)面由幾大塊組成。,從效果圖上看，由四大塊組成：頭部版塊、廣告版塊、內(nèi)容版塊、頁(yè)底版塊，,分別命名：頭部版塊：header、廣告版塊：banner、內(nèi)容版塊：content、頁(yè)底版塊：footer。,頁(yè)面第一層結(jié)構(gòu)：,示例： layoutDemo1.html,【第二步】：,1)網(wǎng)站logo一般是張圖片，而且是可以點(diǎn)擊的，,點(diǎn)擊后回到首頁(yè)，所以logo部分的結(jié)構(gòu)為：,2)導(dǎo)航nav肯定要用標(biāo)簽ul和li，,而li里面內(nèi)容又是鏈接，在加上真實(shí)的鏈接信息后，,導(dǎo)航條部分的結(jié)構(gòu)如下：, 首 頁(yè) 企業(yè)簡(jiǎn)介 企業(yè)文化 企業(yè)榮譽(yù) 產(chǎn)品展示 機(jī)構(gòu)設(shè)置 客戶(hù)留言 聯(lián)系我們 ,到此，整個(gè)頭部的結(jié)構(gòu)設(shè)計(jì)完成，完整的結(jié)構(gòu)如下：, 首 頁(yè) 企業(yè)簡(jiǎn)介 企業(yè)文化 企業(yè)榮譽(yù) 產(chǎn)品展示 機(jī)構(gòu)設(shè)置 客戶(hù)留言 聯(lián)系我們 ,示例： layoutDemo2.html,【第三步】：,banner部分布局時(shí)，只需將一個(gè)圖片放在此處就可以，,因?yàn)閺V告是可以點(diǎn)擊的，所以就需要在圖片外面加上超鏈接，結(jié)構(gòu)代碼如下：,示例： layoutDemo3.html,【第四步】：,內(nèi)容content版塊是有左右兩部分組成，,左側(cè)部分放置文章，將“l(fā)eft“和“article“組合，命名左側(cè)版塊id為“l(fā)eftArticle“。,右側(cè)為資訊信息類(lèi)的內(nèi)容，右側(cè)的id為“rightInfo“。,結(jié)構(gòu)如下： ,1)左側(cè)的leftArticle文章版塊，分“文章圖片，文章標(biāo)題和文章內(nèi)容“三部分。,文章圖片：從功能上來(lái)說(shuō)文章頂部圖片應(yīng)該是可以點(diǎn)擊的，點(diǎn)擊后進(jìn)入文章詳情，所以圖片外面要被鏈接a包含：,文章標(biāo)題：文章標(biāo)題就是文章內(nèi)容的總結(jié)，對(duì)搜索引擎來(lái)說(shuō)文章標(biāo)題的權(quán)重要比內(nèi)容要高，,怎么才能讓搜索引擎知道這里是標(biāo)題呢？,用標(biāo)題標(biāo)簽h1h6，這里選用h1，標(biāo)題也是可以點(diǎn)擊的，所以也要用a進(jìn)行包含：, Web前端開(kāi)發(fā) ,文章內(nèi)容：內(nèi)容常用段落標(biāo)簽p。,有幾段文字就用幾個(gè)“：,全國(guó)Web前端開(kāi)發(fā)行業(yè)調(diào)查顯示 . . . . . .,示例：layoutDemo4.html, Web前端開(kāi)發(fā)工作嗎？ 全國(guó)Web前端開(kāi)發(fā)行業(yè)調(diào)查.。 現(xiàn)在YAHOO、MSN等國(guó)際門(mén)戶(hù)網(wǎng)站，。 正因?yàn)槿绱薟eb前端開(kāi)發(fā)人員成為市場(chǎng)上。 ,2)右側(cè)分兩個(gè)版塊“職業(yè)生涯“和“職位推薦“，,分析“職業(yè)生涯“的網(wǎng)頁(yè)結(jié)構(gòu)，,它們有共同的結(jié)構(gòu)、共同的樣式。,首先有個(gè)標(biāo)題，其次下面是標(biāo)題的一個(gè)列表，可以用“dl+dt+dd“組合。,dl、dt、dd的用法： /dl為內(nèi)容塊 內(nèi)容標(biāo)題/dt為內(nèi)容塊的標(biāo)題 內(nèi)容1 /dd為內(nèi)容 內(nèi)容2 ,參見(jiàn)列表分析, 職業(yè)生涯 Web前端開(kāi)發(fā) 有必要進(jìn)行Web 我是網(wǎng)站美工發(fā) 從事Web前端行 如何給自己定位 Web前端開(kāi)發(fā)工 ,“職位推薦“版塊類(lèi)似于“職業(yè)生涯“的結(jié)構(gòu)。,示例：layoutDemo5.html, 職業(yè)生涯 . . 職位推薦 . ,【第五步】：,頁(yè)底版塊的布局。,由兩行文字組成，第一行文字全部為鏈接：, 關(guān)于 | 廣告服務(wù) | 提交問(wèn)題 | 聯(lián)系我們 | 版權(quán)聲明 | 合作伙伴 ,第二行左邊的是備案號(hào)，右側(cè)是版權(quán)信息：, 津ICP備0055601號(hào) All rights(C)2010-2015Reserved ,頁(yè)底版塊結(jié)構(gòu)：, 關(guān)于 | . 廣告服務(wù) ICP備0055601號(hào)All rights(C)2008. ,既然文字分兩行，在第一行的最后加上一個(gè)就可以了，沒(méi)有必要每一行都用p標(biāo)簽包含起來(lái)：, 關(guān)于本企業(yè)合作伙伴 津ICP備0055601號(hào) All rights(C)2008- ,整個(gè)頁(yè)面結(jié)構(gòu)設(shè)計(jì)完成(頁(yè)面的骨架搭建完成)。,示例：layoutDemo6.html,(二)浮動(dòng)布局之表現(xiàn)設(shè)計(jì),W3C標(biāo)準(zhǔn)建議結(jié)構(gòu)和表現(xiàn)相分離，,“結(jié)構(gòu)“是搭建的HTML頁(yè)面框架，“表現(xiàn)“則是CSS樣式，,樣式設(shè)計(jì)會(huì)直接影響頁(yè)面的加載速度及改版的復(fù)雜度。,【第六步】：,為了頁(yè)面能夠具有更好的瀏覽器兼容性，,在設(shè)計(jì)表現(xiàn)的時(shí)候，首先要對(duì)標(biāo)簽重置，,用到哪些標(biāo)簽就重置哪些標(biāo)簽，,用到“body,div,p,ul,li,dl,dt,dd,h1,a“標(biāo)簽，,所以重置代碼為： body,div,p,ul,li,dl,dt,dd,h1,amargin:0; padding:0;,效果圖主背景是一個(gè)從上至下由藍(lán)色漸變?yōu)榘咨?，且?guī)в性撇实谋尘啊?針對(duì)背景的漸變，將漸變背景切割為一個(gè)寬度為10px的小圖，起名為bg，然后水平方向平鋪(repeat-x)。,而對(duì)于云彩這種無(wú)規(guī)律的背景，直接切割出來(lái)作為背景，起名為clouds，如下圖：,如果不做任何處理直接將頁(yè)面內(nèi)的背景整個(gè)切割下來(lái)，,當(dāng)用戶(hù)打開(kāi)頁(yè)面，會(huì)看到背景一片空白，然后瞬間顯示背景，給用戶(hù)的感覺(jué)很突兀。,為了提升網(wǎng)頁(yè)的用戶(hù)體驗(yàn)，先加載10px寬度的小圖片，這樣背景加載速度快，,用戶(hù)打開(kāi)網(wǎng)頁(yè)的時(shí)候，先把這種背景圖加載上，不至于展現(xiàn)在瀏覽者前面的是一片空白，,然后等云彩背景下載完畢后，再加載在頁(yè)面內(nèi)。,實(shí)現(xiàn)背景的顯示順序，為不同的盒子的設(shè)置背景，,bg.gif當(dāng)做html盒子的背景，而clouds.gif當(dāng)做body盒子的背景，,因?yàn)榫W(wǎng)頁(yè)會(huì)先加載html盒子，然后再加載body盒子，那么CSS代碼如下：,htmlbackground:url(images/bg.gif) repeat-x; bodybackground:url(images/clouds.gif) repeat-x;,示例：layoutDemo7.css、layoutDemo7.html,body,div,p,ul,li,dl,dt,dd,h1,amargin:0; padding:0; htmlbackground:url(images/bg.gif) repeat-x; bodybackground:url(images/clouds.gif) repeat-x;,【第七步】：,頁(yè)面的寬度為1000px，所以四大板塊header、banner、content、footer的寬度也為1000px，且水平居中于瀏覽器，,所以用CSS集體聲明的方法，對(duì)四大板塊的共同樣式進(jìn)行定義：,#header,#banner,#content,#footer width:1000px; margin:0 auto; ,其中“margin:0 auto;“的作用就是將頁(yè)面元素水平居中。,采用設(shè)置body上內(nèi)邊距的辦法，將padding-top加到body的樣式內(nèi)：,頭部與上邊沿有45px的距離，為實(shí)現(xiàn)這個(gè)效果，,body background:url(images/clouds.gif) repeat-x; padding-top:45px; ,示例：layoutDemo8.css、layoutDemo8.html,【第八步】：,網(wǎng)頁(yè)里所有能夠點(diǎn)擊的鏈接圖片，全部都有一個(gè)寬度為2px的紫色邊框，,將邊框去掉，CSS代碼：imgborder:none;,上面這段代碼是對(duì)img標(biāo)簽邊框的重置，所以把它和之前標(biāo)簽內(nèi)外邊距重置的代碼放一塊，如下：,body,div,p,ul,li,dl,dt,dd,h1,a,imgmargin:0; padding:0; imgborder:none;,如果后面有對(duì)其它標(biāo)簽的重置，就添加到第二條的后面。,示例：layoutDemo9.css、layoutDemo9.html,頭部header包含兩部分，左側(cè)的logo和右側(cè)的導(dǎo)航nav。,左側(cè)logo部分的結(jié)構(gòu)：,分析上面的結(jié)構(gòu)，最外層由一個(gè)塊狀元素div構(gòu)成的盒子，第二層由內(nèi)聯(lián)元素a構(gòu)成，第三層由內(nèi)聯(lián)元素img構(gòu)成。,img標(biāo)簽是一個(gè)很特別的標(biāo)簽，因?yàn)樗旧硎莾?nèi)聯(lián)元素，但卻體現(xiàn)出塊狀元素寬高起作用的特性，,在這里需要它的塊狀元素的屬性，所以將身為內(nèi)聯(lián)元素的img標(biāo)簽轉(zhuǎn)化為塊狀元素，用“display:block;“。,既然第三層的img轉(zhuǎn)化為塊狀元素，根據(jù)W3C規(guī)范，內(nèi)聯(lián)元素是不能包含塊狀元素的，,所以還必須把第二層的鏈接a，也要轉(zhuǎn)化為塊狀元素，還是用“display:block;“。,希望點(diǎn)擊logo圖片的任何一個(gè)地方都可以回到首頁(yè)，,即第二層a的有效點(diǎn)擊區(qū)域大小就為圖片的大小，,而外面的盒子的大小也等于圖片的大小。,相應(yīng)的CSS代碼： #logo float:left; width:220px; height:54px; background:#991616; #logo a display:block; width:220px; height:54px; #logo a imgdisplay:block;,代碼中的“background:#991616;“是一個(gè)從logo圖片上吸取下來(lái)的紅色，,為了保證在網(wǎng)速比較慢的情況下，logo圖片還未加載完成之時(shí)，,目的和前面的設(shè)置頁(yè)面背景一樣，,先顯示紅色背景，增強(qiáng)用戶(hù)體驗(yàn)！,示例：layoutDemo10.css、layoutDemo10.html,a已經(jīng)設(shè)置了寬度和高度，,外面的那個(gè)id為logo的div，就沒(méi)有存在的必要了，,不妨直接去掉外層的div，并將a的id設(shè)置為logo，,這樣結(jié)構(gòu)就少一層，logo部分的HTML結(jié)構(gòu)變?yōu)椋?CSS代碼為：,#logo display:block; float:left; background:#991616; width:220px; height:54px; ,而#logo a imgdisplay:block;就要轉(zhuǎn)化為,#logo imgdisplay:block;,因?yàn)楝F(xiàn)在的#logo已經(jīng)為a的id了，不再是原來(lái)最外層的div的id。,示例：layoutDemo11.css、layoutDemo11.html,導(dǎo)航nav CSS代碼：,#nav float:left; width:780px; height:54px; background:#393838; list-style:none; #nav lifloat:left;,#nav li a display:block; float:left; width:86px; height:54px; line-height:54px; text-align:center; font-size:12px; color:#ccc; text-decoration:none; #nav li a:hovercolor:#fff;,示例：layoutDemo12.css、layoutDemo12.html,現(xiàn)在要求實(shí)現(xiàn)的效果：,鼠標(biāo)移至導(dǎo)航條欄目的上面，,文字由灰色變?yōu)榘咨髽?biāo)移出，文字又轉(zhuǎn)為灰色，,處于激活狀態(tài)的欄目的背景是一個(gè)灰色且兩邊帶有光影的圖片，如下圖：,激活狀態(tài)的欄目是不受鼠標(biāo)的移入和移出影響的，,需定義一個(gè)類(lèi)選擇器，專(zhuān)門(mén)加在處于激活狀態(tài)的欄目上，,#nav li .navActive background:url(/images/navHoverBg.png) no-repeat; color:#fff; ,如果激活狀態(tài)的欄目是“首頁(yè)“，結(jié)構(gòu)代碼就這么寫(xiě),首 頁(yè),header的樣式定義基本完成。,示例：layoutDemo13.css、layoutDemo13.html,注意：高度自適應(yīng)的問(wèn)題。,盡管header里面的logo和導(dǎo)航條nav都設(shè)置了高度，,但是header的高度在IE7、IE8、IE9、FF內(nèi)，是不能自動(dòng)適應(yīng)里面元素的高度的。,測(cè)試：,將HTML結(jié)構(gòu)代碼中的導(dǎo)航條部分刪除，,然后再給header設(shè)置一個(gè)背景色為黑色#000，,參見(jiàn)overflow,刪除導(dǎo)航條代碼后的header結(jié)構(gòu)代碼：,CSS代碼：#headerbackground:#000;,在IE6內(nèi)的顯示效果：,示例：layoutDemo14.css、layoutDemo14.html,在FF內(nèi)的顯示效果：,問(wèn)題：在FireFox內(nèi)，看不到背景為黑色的header，,因?yàn)樗荒軌蜃赃m應(yīng)內(nèi)部元素的高度，所以它的高度變?yōu)榱悖?而在IE6里面卻可以正常顯示。,高度不能自適應(yīng)，就給它設(shè)置一個(gè)高度，,高度值為子級(jí)元素的高度，,這樣header盒子就可以剛好裝下內(nèi)部的子logo和nav，,但是這種辦法不夠靈活，,如果header內(nèi)部多了一些元素，那就需要再次計(jì)算一下子級(jí)元素的高度，比較麻煩。,常用方法：在不設(shè)置header的高度情況下，,無(wú)論內(nèi)部元素再多，header的高度也會(huì)自動(dòng)適應(yīng)，,直接在header的樣式里寫(xiě)入“overflow:hidden;“就可以了。,#header overflow:hidden; ,示例：layoutDemo15.css、layoutDemo15.html,FF下頁(yè)面黑色的header顯示出來(lái)了，,既然高度自適應(yīng)了，黑色的背景也就沒(méi)用了，去掉它，,再在HTML結(jié)構(gòu)代碼內(nèi)恢復(fù)導(dǎo)航代碼，完成頁(yè)面header部分的樣式。,示例：layoutDemo16.css、layoutDemo16.html,【第九步】：,banner版塊結(jié)構(gòu)和logo版塊一樣，對(duì)結(jié)構(gòu)進(jìn)行優(yōu)化，,將最外層的div去掉，然后將里面的a定義為banner，,所以banner版塊的結(jié)構(gòu)如下：,CSS代碼：,#banner display:block; width:1000px; height:292px; margin:10px auto; #banner imgdisplay:block;,如果圖片的大小不是1000px292px怎么辦？,圖片大了，就會(huì)溢出，圖片小了不美觀。,無(wú)論圖片的大小如何，只要在頁(yè)面上顯示，,寬高永遠(yuǎn)是1000px292px：,#banner imgdisplay:block; width:1000px; height:292px;,這句話(huà)的意思就是#banner里面的圖片大小為1000px292px，無(wú)論圖片原本大小，只要在#banner內(nèi)，就是這個(gè)寬高。,示例：layoutDemo17.css、layoutDemo17.html,【第十步】：,針對(duì)content版塊進(jìn)行樣式設(shè)計(jì)，從效果圖上可以看出，,content版塊分為兩塊，左側(cè)的文章(leftArticle)和右側(cè)的資訊(rightInfo)。,content內(nèi)部的leftArticle和rightInfo兩個(gè)都要左側(cè)浮動(dòng)，,內(nèi)部元素浮動(dòng)就會(huì)導(dǎo)致外面的content的高度不能夠自適應(yīng)內(nèi)部元素的高度，,所以首先要在content的CSS代碼中加入“overflow:hidden;“，,定義背景色、文字大小和文字行距，如下：,#content overflow:hidden; background:#eaeaea; font-size:12px; line-height:24px; ,示例：layoutDemo18.css、layoutDemo18.html,然后再針對(duì)leftArticle和rightInfo單獨(dú)定義樣式，,leftArticle和rightInfo上下左右都有10像素的外邊距，,如果用左側(cè)浮動(dòng)來(lái)實(shí)現(xiàn)兩欄效果，,在存在外邊距的情況下就會(huì)出現(xiàn)IE6的雙倍邊距bug，,為了避免出現(xiàn)bug，利用“display:inline;“,CSS定義： #leftArticle,#rightInfo margin:10px; float:left; display:inline;,示例：layoutDemo19.css、layoutDemo19.html,它們兩個(gè)的公共樣式定義完了，就開(kāi)始對(duì)它們單個(gè)定義，,原本leftArticle和rightInfo的寬度分別為680px和320px，,當(dāng)存在10px的外邊距后，如果再給它們用CSS定義寬度，,那么寬度的數(shù)值就變?yōu)?60px和300px，都要減去20像素（因?yàn)榇嬖?0px左外邊距和10px右外邊距） 。,#leftArticlewidth:660px; #rightInfowidth:300px;,示例：layoutDemo20.css、layoutDemo20.html,左側(cè)leftArticle有個(gè)圖片，圖片是可以點(diǎn)擊的，,遇到圖片鏈接這種情況，第一反應(yīng)就是先將這兩塊給設(shè)置成塊狀元素，,給圖片外面的鏈接起個(gè)id叫articlePicA，意思是文章圖片外部的鏈接：,相應(yīng)的CSS如下：,#articlePicA,#articlePicA imgdisplay:block;,示例：layoutDemo21.css、layoutDemo21.html,文章的標(biāo)題在HTML結(jié)構(gòu)中用標(biāo)簽，,標(biāo)題距離上面圖片和下方文字的距離為20px，,文字的大小為24px，首選字體為“微軟雅黑”，其次為“黑體”。,#leftArticle h1 margin:20px 0; font-size:24px; font-family:“微軟雅黑“, “黑體“; ,示例：layoutDemo22.css、layoutDemo22.html,制作出來(lái)的標(biāo)題鼠標(biāo)移上去會(huì)出現(xiàn)下劃線(xiàn)，,需要對(duì)標(biāo)題內(nèi)的鏈接的樣式進(jìn)行定義：,#leftArticle h1 acolor:#900; text-decoration:none; #leftArticle h1 a:hovertext-decoration:underline;,示例：layoutDemo23.css、layoutDemo23.html,內(nèi)容的文字顏色是數(shù)值為“#333“的黑色，,并且每段文字都會(huì)縮進(jìn)兩個(gè)文字，,每段文字距離下段文字之間的距離是30px，文字大小為14px，,CSS如下定義： #leftArticle p color:#333; text-indent:2em;margin-bottom:30px; font-size:14px;,示例：layoutDemo24.css、layoutDemo24.html,定義rightInfo版塊的樣式，“職業(yè)生涯“和“職位推薦“之間有10px的距離，,實(shí)現(xiàn)這個(gè)效果采取設(shè)置dl的下外邊距的方法 :,#rightInfo dlmargin-bottom:10px;,針對(duì)每個(gè)版塊的標(biāo)題dt的定義，如下：,#rightInfo dl dt background:url(/images/title.jpg) no-repeat; height:32px; line-height:32px; color:#FFF; font-size:14px; font-weight:bold; text-indent:20px; ,背景采用已經(jīng)切好的title.jpg且不平鋪，,dt高度就是title.jpg的高度32px，,為了使文字垂直居中，采取設(shè)置行高的方法，,然后設(shè)置文字大小為14px、粗細(xì)為加粗、以及文字縮進(jìn)20px。,示例：layoutDemo25.css、layoutDemo25.html,針對(duì)dd的定義：,#rightInfo dl dd height:24px; line-height:24px; background:url(/images/dot.gif) no-repeat 7px 10px; text-indent:16px; ,第三句的目的是將做好的小紅點(diǎn)圖片dot.gif設(shè)置為dd的背景且不