网页教案(div布局)

《网页教案(div布局)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、天津渤海职业技术学院教师教案课程网页制作班级应用161、162上课时间年月日任课教师张玉娟课时4上课地点教室/机房教材网页制作与实训参考材料章节n第十五章DIV+CSS布局思路nDIV+CSS布局应用实例教学目标n了解DIV+CSS布局的概念n掌握DIV+CSS布局方法n掌握应用DIV+CSS布局的实例教学重点n掌握DIV+CSS布局方法教学难点nDIV+CSS在网页中的应用方法教学工具多媒体教学，软件采用Dreamweavercs34网页制作天津渤海职业技术学院信息工程系DIV+CSS布局本章在CSS定位的基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法

2、，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。一、将页面用div分块二、设计各块的位置4网页制作天津渤海职业技术学院信息工程系三、实例一二、实例二电子相册#hphotoul,#vphotoul{list-style:none;float:left;padding:0px;margin-top:8px;margin-left:15px;font-size:12px;border:1pxsolid#00CCFF;background:#CCFFFF;color:#0066FF;}#hphoto{width:500px

3、;background:url(framels.jpg)no-repeatleft;height:160px;}#vphoto{width:500px;background:url(framept.jpg)no-repeatleft;height:160px;}#hphotoimg{height:90px;width:135px;border:1pxsolid#0099FF;margin-top:36px;margin-left:10px;}#vphotoimg{height:135px;width:90px;border:1pxsolid#0099FF;margin

4、-top:10px;margin-left:34px;}#hphotoli,#vphotoli{background:#CCFFFF;}#hphoto.title,#vphoto.title{border-bottom:1pxsolid#66CCFF;line-height:1.5;padding-left:10px;font-weight:bold;}4网页制作天津渤海职业技术学院信息工程系#hphotoa,#vphotoa{display:block;height:160px;width:160px;float:left;}#hphotoa:hover{backg

5、round:url(framels_hover.jpg)no-repeat;display:block;height:160px;width:160px;}#vphotoa: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:1pxsolid#66CCFF;padding-

6、left:10px;padding-right:20px;}#hphoto.price,#vphoto.price{border-left:1pxsolid#00CCFF;float:left;font-style:italic;padding-right:10px;padding-left:10px;}4网页制作天津渤海职业技术学院信息工程系