天津渤海职业技术 学院
教 师 教 案
课 程 网页制作 班 级 应用161、162 上课时间 年 月 日 任课教师 张玉娟 课 时 4 上课地点 教室/机房 教 材 网页制作与实训 参考材料 章 节 ? 第十五章DIV+CSS布局思路 ? DIV+CSS布局应用实例 教学目标 ? 了解DIV+CSS布局的概念 ? 掌握DIV+CSS布局方法 ? 掌握应用DIV+CSS布局的实例 教学重点 ? 掌握DIV+CSS布局方法 教学难点 ? DIV+CSS在网页中的应用方法 教学工具 多媒体教学，软件采用Dreamweaver cs3 DIV+CSS布局本章在CSS定位的基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。 一、将页面用div分块 二、设计各块的位置 三、实例一 #footer #content #links #container #banner #links #footer #content #container #banner #content .blog .date .blogcontent #links .calendarhead .calendartable .side …… …… .page .update .syndicate .friends DIV+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 a,#vphoto a { display: block; height: 160px; width: 160px; #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 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: #66CCFF; line-height: 1.5; padding-left: 10px; font-weight: bold; } 1px solid
网页教案(div布局)
