1、网页制作 天津渤海职业技术学院 信息工程系1天津渤海职业技术 学院教 师 教 案课 程 网页制作 班 级 应用 161、162 上课时间 年 月 日任课教师 张玉娟 课 时 4 上课地点 教室/机房教 材 网页制作与实训 参考材料章 节 第十五章 DIV+CSS 布局思路 DIV+CSS 布局应用实例教学目标 了解 DIV+CSS 布局的概念 掌握 DIV+CSS 布局方法 掌握应用 DIV+CSS 布局的实例教学重点 掌握 DIV+CSS 布局方法教学难点 DIV+CSS 在网页中的应用方法教学工具 多媒体教学，软件采用 Dreamweaver cs3网页制作 天津渤海职业技术学院 信息工程
2、系2DIV+CSS 布 局本章在 CSS 定位的基础上，从页面的整体排版出发，介绍 CSS 排版的观念和具体方法，包括 CSS 排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。一、将页面用 div 分块二、设计各块的位置#contaier #baner #contet #links #foter #contet .blog.date .blogcntet .update .page#links .calendarhed .calendartble .friends.syndicate .side #contaier #baner #contet #li
3、nks #foter 网页制作 天津渤海职业技术学院 信息工程系3DIV+CSS 布 局三、实例一二、实例二 电子相册#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;ma
4、rgin-left: 10px;#vphoto img height: 135px;width: 90px;border: 1px solid #0099FF;margin-top: 10px;margin-left: 34px;#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 li
5、,#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;he
6、ight: 160px;width: 160px;#vphoto a:hover background: url(framept_hover.jpg) no-repeat;display: block;height: 160px;width: 160px;div margin-bottom: 15px;网页制作 天津渤海职业技术学院 信息工程系4DIV+CSS 布 局#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 solid #00CCFF;float: left;font-style: italic;padding-right: 10px;padding-left: 10px;
