网页教案(div布局).doc

天津渤海职业技术 学院教 师 教 案课 程网页制作班 级应用161、162上课时间年 月 日任课教师张玉娟课 时4上课地点教室/机房教 材网页制作与实训参考材料章 节n 第十五章DIV+CSS布局思路n DIV+CSS布局应用实例教学目标n 了解DIV+CSS布局的概念n 掌握DIV+CSS布局方法n 掌握应用DIV+CSS布局的实例教学重点n 掌握DIV+CSS布局方法教学难点n DIV+CSS在网页中的应用方法教学工具多媒体教学，软件采用Dreamweaver cs3DIV+CSS布局本章在CSS定位的基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。一、将页面用div分块二、设计各块的位置三、实例一二、实例二 电子相册#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-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: 34px;#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;display: 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