網(wǎng)頁教案(div布局)

1、 天津渤海職業(yè)技術(shù) 學(xué)院教 師 教 案課 程網(wǎng)頁制作班 級應(yīng)用161、162上課時(shí)間年 月 日任課教師張玉娟課 時(shí)4上課地點(diǎn)教室/機(jī)房教 材網(wǎng)頁制作與實(shí)訓(xùn)參考材料章 節(jié)n 第十五章DIV+CSS布局思路n DIV+CSS布局應(yīng)用實(shí)例教學(xué)目標(biāo)n 了解DIV+CSS布局的概念n 掌握DIV+CSS布局方法n 掌握應(yīng)用DIV+CSS布局的實(shí)例教學(xué)重點(diǎn)n 掌握DIV+CSS布局方法教學(xué)難點(diǎn)n DIV+CSS在網(wǎng)頁中的應(yīng)用方法教學(xué)工具多媒體教學(xué)，軟件采用Dreamweaver cs3DIV+CSS布局本章在CSS定位的基礎(chǔ)上，從頁面的整體排版出發(fā)，介紹CSS排版的觀念和具體方法，包括CSS排版的整體思路

2、、兩種具體的排版結(jié)構(gòu)、電子相冊的幾種版式制作，以及與傳統(tǒng)表格排版方法的比較。一、將頁面用div分塊二、設(shè)計(jì)各塊的位置三、實(shí)例一二、實(shí)例二 電子相冊#hphoto ul,#vphoto ul list-style: none;float: left;padding: 0px;margin-top: 8px;margin-left: 15px;font-size: 12px;border: 1px solid #00CCFF;background: #CCFFFF;color: #0066FF;#hphoto width: 500px;background: url(framels.jpg) no

3、-repeat left;height: 160px;#vphoto width: 500px;background: url(framept.jpg) no-repeat left;height: 160px;#hphoto img height: 90px;width: 135px;border: 1px solid #0099FF;margin-top: 36px;margin-left: 10px;#vphoto img height: 135px;width: 90px;border: 1px solid #0099FF;margin-top: 10px;margin-left: 3

4、4px;#hphoto li,#vphoto li background: #CCFFFF;#hphoto .title,#vphoto .title border-bottom: 1px solid #66CCFF;line-height: 1.5;padding-left: 10px;font-weight: bold;#hphoto a,#vphoto a display: block;height: 160px;width: 160px;float: left;#hphoto a:hoverbackground: url(framels_hover.jpg) no-repeat;dis

5、play: block;height: 160px;width: 160px;#vphoto a:hover background: url(framept_hover.jpg) no-repeat;display: block;height: 160px;width: 160px;div margin-bottom: 15px;#hphoto .xh,#vphoto .xh float: left;margin-left: 150px;border-left: 1px solid #66CCFF;padding-left: 10px;padding-right: 20px;#hphoto .price,#vphoto .priceborder-left: 1px sol