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

,JSP 網(wǎng) 頁 設(shè) 計(jì),董祥和,第一章 JSP概述(第1章) 第二章 網(wǎng)頁布局基礎(chǔ) 第三章 JavaScript基礎(chǔ) 第四章 DOM基礎(chǔ) 第五章 JSP頁面與JSP標(biāo)記 (第2章) 第六章 JSP內(nèi)置對(duì)象 (第4章) 第七章 JSP中的文件操作(第5章) 第八章 JSP中使用數(shù)據(jù)庫 (第6章) 第九章 JSP與JavaBean (第7章) 第十章 Java Servlet基礎(chǔ) (第8章),課程內(nèi)容,前端,動(dòng)態(tài),第二章 網(wǎng)頁布局基礎(chǔ),本章主要內(nèi)容 1 CSS如何控制頁面 2 CSS選擇器 3 CSS選擇器命名及常用命名 4 盒子模型 5 塊狀元素和內(nèi)聯(lián)元素 6 CSS常用屬性,第二章 網(wǎng)頁布局基礎(chǔ),本章主要內(nèi)容 7 浮動(dòng) 8 清除浮動(dòng) 9 導(dǎo)航條 10 頁面布局 11 定位 12 CSS Hack,十 頁面布局,網(wǎng)頁效果圖(參見布局素材)：,背景圖片bg.gif、clouds.gif； 網(wǎng)站logo標(biāo)識(shí)logo.png； 導(dǎo)航條背景圖片navHoverBg.png； 網(wǎng)站banner或廣告圖片：banner.jpg； 網(wǎng)頁正文顯示圖片articleBanner.jpg； 欄目標(biāo)題背景圖片title.jpg，欄目列表項(xiàng)圖片dot.gif。,(一)浮動(dòng)布局之結(jié)構(gòu)設(shè)計(jì),【第一步】：,首先分析頁面由幾大塊組成。,從效果圖上看，由四大塊組成：頭部版塊、廣告版塊、內(nèi)容版塊、頁底版塊，,分別命名：頭部版塊：header、廣告版塊：banner、內(nèi)容版塊：content、頁底版塊：footer。,頁面第一層結(jié)構(gòu)：,示例： layoutDemo1.html,【第二步】：,1)網(wǎng)站logo一般是張圖片，而且是可以點(diǎn)擊的，,點(diǎn)擊后回到首頁，所以logo部分的結(jié)構(gòu)為：,2)導(dǎo)航nav肯定要用標(biāo)簽ul和li，,而li里面內(nèi)容又是鏈接，在加上真實(shí)的鏈接信息后，,導(dǎo)航條部分的結(jié)構(gòu)如下：, 首 頁 企業(yè)簡(jiǎn)介 企業(yè)文化 企業(yè)榮譽(yù) 產(chǎn)品展示 機(jī)構(gòu)設(shè)置 客戶留言 聯(lián)系我們 ,到此，整個(gè)頭部的結(jié)構(gòu)設(shè)計(jì)完成，完整的結(jié)構(gòu)如下：, 首 頁 企業(yè)簡(jiǎn)介 企業(yè)文化 企業(yè)榮譽(yù) 產(chǎn)品展示 機(jī)構(gòu)設(shè)置 客戶留言 聯(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è)為資訊信息類的內(nèi)容，右側(cè)的id為“rightInfo“。,結(jié)構(gòu)如下： ,1)左側(cè)的leftArticle文章版塊，分“文章圖片，文章標(biāo)題和文章內(nèi)容“三部分。,文章圖片：從功能上來說文章頂部圖片應(yīng)該是可以點(diǎn)擊的，點(diǎn)擊后進(jìn)入文章詳情，所以圖片外面要被鏈接a包含：,文章標(biāo)題：文章標(biāo)題就是文章內(nèi)容的總結(jié)，對(duì)搜索引擎來說文章標(biāo)題的權(quán)重要比內(nèi)容要高，,怎么才能讓搜索引擎知道這里是標(biāo)題呢？,用標(biāo)題標(biāo)簽h1h6，這里選用h1，標(biāo)題也是可以點(diǎn)擊的，所以也要用a進(jìn)行包含：, Web前端開發(fā) ,文章內(nèi)容：內(nèi)容常用段落標(biāo)簽p。,有幾段文字就用幾個(gè)“：,全國Web前端開發(fā)行業(yè)調(diào)查顯示 . . . . . .,示例：layoutDemo4.html, Web前端開發(fā)工作嗎？ 全國Web前端開發(fā)行業(yè)調(diào)查.。 現(xiàn)在YAHOO、MSN等國際門戶網(wǎng)站，。 正因?yàn)槿绱薟eb前端開發(fā)人員成為市場(chǎng)上。 ,2)右側(cè)分兩個(gè)版塊“職業(yè)生涯“和“職位推薦“，,分析“職業(yè)生涯“的網(wǎng)頁結(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 ,參見列表分析, 職業(yè)生涯 Web前端開發(fā) 有必要進(jìn)行Web 我是網(wǎng)站美工發(fā) 從事Web前端行 如何給自己定位 Web前端開發(fā)工 ,“職位推薦“版塊類似于“職業(yè)生涯“的結(jié)構(gòu)。,示例：layoutDemo5.html, 職業(yè)生涯 . . 職位推薦 . ,【第五步】：,頁底版塊的布局。,由兩行文字組成，第一行文字全部為鏈接：, 關(guān)于 | 廣告服務(wù) | 提交問題 | 聯(lián)系我們 | 版權(quán)聲明 | 合作伙伴 ,第二行左邊的是備案號(hào)，右側(cè)是版權(quán)信息：, 津ICP備0055601號(hào) All rights(C)2010-2015Reserved ,頁底版塊結(jié)構(gòu)：, 關(guān)于 | . 廣告服務(wù) ICP備0055601號(hào)All rights(C)2008. ,既然文字分兩行，在第一行的最后加上一個(gè)就可以了，沒有必要每一行都用p標(biāo)簽包含起來：, 關(guān)于本企業(yè)合作伙伴 津ICP備0055601號(hào) All rights(C)2008- ,整個(gè)頁面結(jié)構(gòu)設(shè)計(jì)完成(頁面的骨架搭建完成)。,示例：layoutDemo6.html,(二)浮動(dòng)布局之表現(xiàn)設(shè)計(jì),W3C標(biāo)準(zhǔn)建議結(jié)構(gòu)和表現(xiàn)相分離，,“結(jié)構(gòu)“是搭建的HTML頁面框架，“表現(xiàn)“則是CSS樣式，,樣式設(shè)計(jì)會(huì)直接影響頁面的加載速度及改版的復(fù)雜度。,【第六步】：,為了頁面能夠具有更好的瀏覽器兼容性，,在設(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ì)于云彩這種無規(guī)律的背景，直接切割出來作為背景，起名為clouds，如下圖：,如果不做任何處理直接將頁面內(nèi)的背景整個(gè)切割下來，,當(dāng)用戶打開頁面，會(huì)看到背景一片空白，然后瞬間顯示背景，給用戶的感覺很突兀。,為了提升網(wǎng)頁的用戶體驗(yàn)，先加載10px寬度的小圖片，這樣背景加載速度快，,用戶打開網(wǎng)頁的時(shí)候，先把這種背景圖加載上，不至于展現(xiàn)在瀏覽者前面的是一片空白，,然后等云彩背景下載完畢后，再加載在頁面內(nèi)。,實(shí)現(xiàn)背景的顯示順序，為不同的盒子的設(shè)置背景，,bg.gif當(dāng)做html盒子的背景，而clouds.gif當(dāng)做body盒子的背景，,因?yàn)榫W(wǎng)頁會(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;,【第七步】：,頁面的寬度為1000px，所以四大板塊header、banner、content、footer的寬度也為1000px，且水平居中于瀏覽器，,所以用CSS集體聲明的方法，對(duì)四大板塊的共同樣式進(jìn)行定義：,#header,#banner,#content,#footer width:1000px; margin:0 auto; ,其中“margin:0 auto;“的作用就是將頁面元素水平居中。,采用設(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)頁里所有能夠點(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è)地方都可以回到首頁，,即第二層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圖片上吸取下來的紅色，,為了保證在網(wǎng)速比較慢的情況下，logo圖片還未加載完成之時(shí)，,目的和前面的設(shè)置頁面背景一樣，,先顯示紅色背景，增強(qiáng)用戶體驗(yàn)！,示例：layoutDemo10.css、layoutDemo10.html,a已經(jīng)設(shè)置了寬度和高度，,外面的那個(gè)id為logo的div，就沒有存在的必要了，,不妨直接去掉外層的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了，不再是原來最外層的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è)類選擇器，專門加在處于激活狀態(tài)的欄目上，,#nav li .navActive background:url(/images/navHoverBg.png) no-repeat; color:#fff; ,如果激活狀態(tài)的欄目是“首頁“，結(jié)構(gòu)代碼就這么寫,首 頁,header的樣式定義基本完成。,示例：layoutDemo13.css、layoutDemo13.html,注意：高度自適應(yīng)的問題。,盡管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，,參見overflow,刪除導(dǎo)航條代碼后的header結(jié)構(gòu)代碼：,CSS代碼：#headerbackground:#000;,在IE6內(nèi)的顯示效果：,示例：layoutDemo14.css、layoutDemo14.html,在FF內(nèi)的顯示效果：,問題：在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的高度情況下，,無論內(nèi)部元素再多，header的高度也會(huì)自動(dòng)適應(yīng)，,直接在header的樣式里寫入“overflow:hidden;“就可以了。,#header overflow:hidden; ,示例：layoutDemo15.css、layoutDemo15.html,FF下頁面黑色的header顯示出來了，,既然高度自適應(yīng)了，黑色的背景也就沒用了，去掉它，,再在HTML結(jié)構(gòu)代碼內(nèi)恢復(fù)導(dǎo)航代碼，完成頁面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ì)溢出，圖片小了不美觀。,無論圖片的大小如何，只要在頁面上顯示，,寬高永遠(yuǎn)是1000px292px：,#banner imgdisplay:block; width:1000px; height:292px;,這句話的意思就是#banner里面的圖片大小為1000px292px，無論圖片原本大小，只要在#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)來實(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è)的公共樣式定義完了，就開始對(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,制作出來的標(biāo)題鼠標(biāo)移上去會(huì)出現(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的背景且不