網頁設計第二章III.ppt

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