内容页面的设计主要包括两种形式,一种是生活类的内容介绍页面,一种是新闻类的内容介绍页面。两种介绍均以图文并茂的形式展示。生活类页面配上相应场景的图片,而新闻类的搭配新闻现场的图片。
内容页最终是一个图文形式的展示页,生成一个这样的页面内容即可。
生活类页面的核心实现代码如下。
<p> <img src="img/anquanchangshi.jpg"></p><p> <ul> <li> <h2>防地震须知</h2> <p>(1)保持镇定,切勿离开处身地方。<br>(2)躲在桌子或坚固结构物下寻求掩护。<br>(3)远离窗户、玻璃隔板、架或有悬挂物件处。<br>(4)地震时不要躲在楼梯底下。<br>(5)准备应付更多次余震。<br>(6)如您的房屋受到损坏,请立即通知管理处。<br>(7)切勿散播谣言或夸大的报告 </p> </li> </ul></p>
新闻类页面的核心实现代码如下。
<section> <header> <h3 >区安监局开展以“防治职业病,职业要健康”为主题的《职业 病防治法》宣传活动</h3> <small>2014.04.28</small> </header> <article> <p> 区安全监管局在《职业病防治法》宣传周活动期间,以推进 职业卫生基础建设和职业卫生管理示范企业创建为契机,突出以“防治职业病,职业要健康”为主题, 开展了形式多样宣传活动。针对辖区粉尘职业危害较严重的情况,把尘肺病防治作为宣传重点,工作 人员深入粉尘、有机溶剂危害较严重的机械加工、家具制作等企业,开展有针对性的宣传,切实维护 劳动者的健康权益。活动期间,区安全监管局联合经开区安监局安排工作人员48人次,深入园区企 业进行宣传。共印制了宣传横幅15条、宣传展板40块、职业卫生告知牌3000块、宣传单10000 余份、答疑解惑120余人次。<br></p><p > <img src="img/5image008.jpg" > </p> <p> 本次宣传活动得到了湖南省职业病防治院的大力 支持,红网和湖南安全与防灾杂志社的记者也到现场进行了宣传采访 </p> </article></section>
从以上代码可以看出,这些页面的实现方式其实比较简单。内容介绍页面的实现效果如图24-26所示。
如果要实现内容在后台的发布,则一般需要用到框架,如ThinkPHP,用于文章的保存及管理,同时还需要一个编辑器,如百度UEditor,用于编辑文章。
图24-26 内容页实现效果