11-8学院网站制作——网站主页设计（主体部分页脚部分）.docVIP

课程名称 WEB前端开发（1） 课次 37 任务、项目、课题名称 学院网站制作—制作主页主体页脚部分 课时 2学时 教学内容 创建主页，搭建主页结构，添加页面各元素 创建外部样式表，设置各元素的样式 教学目标 能够创建主页，搭建主页结构，添加页面各元素 能够创建外部样式表，设置各元素的样式 教学重点 创建主页，搭建主页结构，添加页面各元素 教学难点 创建外部样式表，设置各元素的样式 教学活动及主要环节 导入新课：（2分钟） 上节课给大家留下了制作学院官网首页的友情链接部分这节课我们对主页的页脚部分进行设置。 （提前发放电子教材，在超星平台发放任务书，让同学们进行预习） 新授： 首页主体页脚部分（25分钟） （带领同学们一起操作） 分析基本页面结构： div class=footerwrap div class=footer div class=textlj img src=images/footer1.png /div div class=textm 版权所有 ? 山东信息职业技术学院 鲁ICPbr 本站开通中文网址：山东信息职业技术学院.公益 nbsp;nbsp;关注学院微信公众号：山东信院或sdcitwxbr 学院地址：山东省潍坊市奎文区东风东街7494号 nbsp;nbsp; 滨海校区：山东省潍坊市滨海经济开发区智慧南二街588号br 学院办公室：0536-2931600 24小时值班电话：0536-2931799 招生就业指导处：0536-2931828 /div div class=image1 img src=images/ewm.png /div /div /div 添加css效果（35分钟） （带领同学一起操作） 设置CSS样式： #footer{ .footerwrap { background: rgb(26, 74, 168); width: 100%; height: 150px; } .footer { margin: 0px auto; width: 1200px; padding-top: 35px; } .textlj { width: 100px; padding-left: 80px; float: left; } .textlj img { width: 100px; padding-bottom: 10px; } .textm { margin: 0px auto; width: 750px; text-align: center; color: #FFF; line-height: 28px; overflow: hidden; font-size: 12px; float: left; } .footer .image1 { height: 112px; margin-right: 140px; float: right; } 总结：（2分钟） 制作网页时按照从整体到部分，从上到下，从左到右的顺序制作 作业： 完成主页的主体部分页脚部分结构以及样式设置。