11-12学院网站制作——新闻详情页设计.docVIP

课程名称 WEB前端开发（1） 课次 41 任务、项目、课题名称 学院网站制作—新闻详情页设计 课时 2学时 教学内容 创建主页，搭建主页结构，添加页面各元素 创建外部样式表，设置各元素的样式 教学目标 能够创建主页，搭建主页结构，添加页面各元素 能够创建外部样式表，设置各元素的样式 教学重点 创建主页，搭建主页结构，添加页面各元素 教学难点 创建外部样式表，设置各元素的样式 教学活动及主要环节 导入新课：（2分钟） 上节课带领同学们制作学院官网新闻列表页部分这节课我们对新闻详情页进行制作。 新授： 页面结构制作（25分钟） （带领同学们一起操作） 将newsList.html页面 按快捷键ctrl+d复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，因此修改该页面右侧部分的代码如下所示。 !--右侧内容开始-- div id=listR div class=Rtop h2新闻中心/h2 span当前位置：a href=index1.html首页/a a target=_blank href=#新闻中心/a a target=_blank href=#学校要闻/a正文/span /div div class=Rcon h2我院被确定为空军士官人才培养定点院校/h2 h3撰稿人：招生就业指导处nbsp;nbsp;时间：2018-09-02 15:49:10nbsp;nbsp;浏览次数：2354次/h3 div class=DetailCon p8月29日晚，空军军民融合定向培养士官联席会议在吉林长春召开。学院院长毕丛福与另外17所院校代表一道，与空军签订定向培养士官协议。至此，学院由空军定向培养士官试点院校转为空军士官人才培养定点院校。/p …… /div /div div class=preNext 上一篇：a href=#我院喜迎2018级新同学/abr 下一篇：a href=#我院在山东省新一代信息技术创新应用大赛—工业信息安全技能大赛中荣获三等奖/a /div /div !--右侧内容结束-- 添加css效果（35分钟） （带领同学一起操作） 设置CSS样式： .Rcon h2{ width:858px; height: 40px; line-height:40px; text-align: center; color: #ff7200; font-size: 20px; } .Rcon h3{ color: #6f6f6f; font-size: 14px; height: 40px; line-height: 40px; text-align: center; font-weight:normal; } .DetailCon{ border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding-top:5px; } .DetailCon video{ width:100%; height:500px; } .DetailCon p{ width:858px; color: #161616; font-size:16px;s line-height: 26px; padding-top:15px; text-indent:2em; } .DetailCon p.cent{ text-align:center; } .preNext{ line-height: 30px; margin-top: 20px; } .preNext a { color:#999; } .preNext a:hover{ color: #1a4aa7; }.Rcon ul li a { color: #3c3c3c; } .Rcon ul li a:hover { color:#00F; } 总结：（2分钟） 制作网页时按照从整体到部分，从上到下，从左到右的顺序制作 作业： 完成主页的新闻详情页主体部分结构以及样式设置。