您现在的位置: 365建站网 > 365学习 > 建站之制作自己的时政新闻网站的实例(凤凰网)教程

建站之制作自己的时政新闻网站的实例(凤凰网)教程

文章来源:365jz.com     点击数:285    更新时间:2018-01-31 10:53   参与评论

26.1 建站之制作自己的时政新闻网站的实例 网站配置分析

新闻网站大多数弱化了网民对互联网功能的需求,而强化了网民对内容的需求。从新闻网站的结构来看,传播的效果明显集中在“首页”上,网站首页的传播效果最好。调查显示,一条新闻如果不能出现在首页上,其传播的效果会大打折扣,对多数读者来说,他们只会到像首页这样的重要位置区浏览新闻,根本不会再往“深处”寻找新闻。某种程度上,一条新闻如果仅仅进入了网站的滚动新闻,而没有在页面上得到呈现,其传播效果接近于零,故而,此类网站首页的设计是至关重要的。

26.1.1 服务器配置分析

凤凰网对外的通信线路都连接到FVR9416S路由器上,向下接上一部主干交换机,作为向内连接用。在该主干交换机下,接了五台流媒体服务器、两台文件服务器及一台可网管型群组交换机。可网管型群组交换机向下连接内部的用户,局域网带机量约为100台计算机。

在新的配置上,对外的流量仍保持原有的结构。视频编辑人员通过某条线路执行相关的工作,而局域网用户上网及外部用户存取流媒体和文件则通过另一条线路。这两条线路互相独立,互不影响。但是,视频编辑人员不用再做网关配置的改变,就可同时上网及执行视频作业,而外部用户观看流媒体,也不会受局域网用户大量上网的影响。


26.1.2 页面设计分析

本小节将介绍凤凰网的页面设计架构。用户可以通过在IE浏览器输入http://www.ifeng.com/来访问凤凰网。凤凰网的主页如下图所示。

从凤凰网首页可以看出,凤凰网首页严格地遵循新闻网站信息量大的特点。首页虽布置简洁、排列有序,但是其信息量极大,几乎从首页上就可以轻松地发现最近一段时间的时政热点新闻。其布局从垂直方向分为上中下三栏。上栏从上到下依次是网站的logo、导航条、要点资讯。中栏又分为左中右三栏,左栏在垂直方向再次划分多栏来显示评论、凤凰出品、凤凰联播台、凤凰卫视、证券信息、凤凰节目等内容;中栏从上到下则依次是要闻、财经股票、汽车车型库、科技数码等栏目,右栏首先是一栏动态显示资讯,然后依次是视频、博报、娱乐、体育、时尚等栏目。


凤凰网首页框架如下图所示。

框架使用网页布局方式中的DIV布局方式,下面给出凤凰网首页部分模块所包含的子<div>块。用户快捷导航设计的主要代码如下:

01 <div class="headBg" id="head_bg_turnRed">02 <div class="headBg">03 <div class="headNav cWhite">04 <ul>05 <li><strong><a target="_blank" href="http://
news.ifeng.com/"> 资讯 </a></strong> <a target="_blank"
href="http://news.ifeng.com/mil/"> 军事 </a> <a target="_blank"
href="http://news.ifeng.com/taiwan/"> 台湾 </a> <atarget="_blank"
href="http://opinion.ifeng.com/">评论 </a> <a 

target="_blank"href="http://news.ifeng.com/photo/being/">图片</a></
li>06 <li><strong><a target="_blank" href="http://v.ifeng.com/">

视频 </a></strong> <a target="_blank" href="http://v.ifeng.com/
documentary/"> 纪实 </a> <a target="_blank" href="http://
v.ifeng.com/vblog/index.sHTML"> 播客 </a><a target="_blank"
href="http://v.ifeng.com/mil/">军情</a> <a target="_blank"href="http://
vip.v.ifeng.com/">VIP</a></li>07 </ul>

08 <ul>09 <li><strong><a target="_blank" href="http://
finance.ifeng.com/">财经 </a></strong> <a target="_blank"
href="http://finance.ifeng.com/stock/">股票</a> <a target="_blank"
href="http://finance.ifeng.com/fund/">基金</a></li>10 <li><strong><a target="_blank" href="http://ent.ifeng.com/">

娱乐</a></strong> <a target="_blank" href="http://ent.ifeng.com/
idolnews/">明星</a> <atarget="_blank" href="http://ent.ifeng.com/
movie/">电影</a></li>11 </ul>12 <ul>13 <li><strong><a target="_blank" href="http://
tech.ifeng.com/"> 科技 </a></strong> <a target="_blank" href="http://
digi.ifeng.com/">数码</a></li>14 < li><strong><a target="_blank" href="http://sports.
ifeng.com/"> 体育 </a></strong> <a target="_blank" href="http://
sports. ifeng.com/lanqiu/nba/">NBA</a></li>15 </ul>16 <ul>

17 <li><strong><a target="_blank" href="http://
auto.ifeng.com/"> 汽车 </a></strong> <a target="_blank" href="http://
data.auto.ifeng.com/price">车型</a> <a target="_blank" href="http://
fashion.ifeng.com/travel/">旅游</a></li>18 <li><strong><a target="_blank" href="http://
fashion.ifeng.com/">时尚 </a></strong> <a target="_blank"
href="http://fashion.ifeng.com/health/"> 健康</a> <a target="_blank"
href="http://fashion.ifeng.com/baby/">亲子</a></li>19 </ul>20 <ul>21 <li><strong><a target="_blank" href="http://news.ifeng.com/
history/">历史</a></strong> <a target="_blank" href="http://
culture.ifeng.com/">文化</a> <a target="_blank" href="http://
book.ifeng.com/"> 读书 </a> <a target="_blank" href="http://book.
ifeng.com/yuanchuang/"> 原创 </a> <a target="_blank" href="http://
edu.ifeng.com/">教育</a></li>22 < l i><strong><a target="_blank" href="http://blog.
ifeng.com/"> 博报</a></strong> <a target="_blank" href="http://
bbs.ifeng.com/"> 论坛 </a><a target="_blank" href="http://
t.ifeng.com"> 微博 </a> <a target="_blank"href="http://
gongyi.ifeng.com/"> 公益 </a> <a target="_blank" href="http://
fo.ifeng.com/">佛教</a></li>

23 </ul>24 <ul>25 <li><strong><a target="_blank" href="http://
house.ifeng.com/">房产 </a></strong> <a target="_blank"
href="http://home.ifeng.com/"> 家居 </a> <atarget="_blank"
href="http://city.ifeng.com/"> 城市 </a> <a target="_blank"href="http://
city.ifeng.com/special/duihua/">会客室</a></li>26 <li><strong><a target="_blank" href="http://
games.ifeng.com/"> 游戏</a></strong> <a target="_blank"
href="http://yue.ifeng.com/">音乐 </a> <atarget="_blank" href="http://
astro.ifeng.com/"> 星座 </a> <a target="_blank"href="http://
talk.ifeng.com/">大讲堂</a></li>27 </ul>28 <ul style="background: none repeat scroll 0% 0% 

transparent; padding-right: 0pt; margin-right: 0pt;">29 <li><a target="_blank" href="http://bc.ifeng.com/main/c?
db=ifeng&amp;bid=7491,7265,1674&amp;cid=1003,33,1&amp;
sid=16298&amp;advid=26&amp;camid=1773&amp;show=ignore&amp;
url=http://zhongyi.ifeng.com/">中医 </a><a target="_blank"
href="http://city.ifeng.com/special/njd/index.shtml">读城</a><span
class="sep01"><a target="_blank" href="http://phtv.ifeng.com/">凤凰

卫视</a></span></li>30 <li><a target="_blank" href="http://
dolphin.deliver.ifeng.com/c?
z=ifeng&la=0&si=2&cg=1&c=1&ci=2&or=1524&l=3642&bg=3642&b=3640&u=http://innovation.ifeng.com/">创新 </a> <a target="_blank"
href="http://abroad.edu.ifeng.com/"> 出国 </a><span
class="sep02"><a target="_blank" href="http://phtv.ifeng.com/epg/">

节目表 </a> <a target="_blank" href="http://phtv.ifeng.com/star/">主持人</a></span></li>31 </ul>32 </div>33 </div>34 </div>35 </div>36 <div class="clear"></div>

26.1.3 网站程序开发分析

凤凰网的栏目很多,且内容丰富、信息量非常大,如果只是以平铺的方式展现,无疑会使浏览者不停地拖动滚动条。凤凰网在主页上多处采用了轮播的方式,避免了用户不停地拖动滚动条,节省了用户

的浏览时间。轮播的代码如下:

01 <script>02 ads.push({03  catagory: 'Coupletsnew',//对联

04    //path: 'ifeng/coupletsnew.js',05     list: [{06  path: 'http://y2.ifengimg.com/zhishaofei/
js/131030-130couplet.js',07  swfUrl: 'http://y1.ifengimg.com/
mappa/2013/11/09/8e5266657b6e94867f93b1a04e1c0fcf.swf',08     ifengLink: 'http://dolphin.deliver.ifeng.com/c?
z=ifeng&la=0&si=2&cg=1&c=1&ci=2&or=1890&l=7305&bg=7305&b=7300&u=http://biz.ifeng.com/finance/special/xjfwsp/index.shtml',09 monitor_clickUrl:'',10 monitor_exposureUrl:'',11 monitor_closeUrl: '',12  bodywidth : '1000',

13    targetId: 'body',14    flightId:'1003',15     isInteractive : 0,// 是否有互动  0:否 1:是

16  zIndex: 888, //对联显示层级

17 maxOpenTime: '10|24'
18 }],19 runArgs: '',20 isFlash:true,21 level: 2,22 posId: 'adPosId_' + 'ifengCoupletsnew',23 bingo: '',24 freeze: '',25 changeTimes : 1//该产品轮播数

26 });
27 </script>28 EOF-->

29 </code>30 <!--0,0,NULL,fixture--><cite>31 <!--BOF32 EOF-->33 </cite>34 </div>35 <script language="JavaScript">36 try{37 var defaultAdRotatorConfig = {maxTimes : 3, saleMode :

 "CPD"};
38 new adRotatorFactory({identifier : "Ap33"});
39 }catch(e){}40 </script>41 <!--/s_ifeng_index_110831_ad_couplet-->42 <!--s_ifeng_index_110831_ad_floatpause 2013.11.19 09:19:53-->43 <script type="text/javascript">try{aptracker.add(41);}

catch(e){}</script>44 <div id="ArpAdPro_2950" style="display:none;">45 <!--13204,3942,祝帆 ,B1--><code>46 <!--BOF47 <script>48 ads.push({49 catagory:'Hover',//悬停

50 //path: 'ifeng/hover.js',51 list: [{52 path: 'http://img.ifeng.com/tres/html/birangtest/111028-
hover.js',53 swfUrl: 'http://y1.ifengimg.com/
mappa/2013/11/18/6191c3d8e724fd46c652d24146dc6da3.swf',54 ifengLink: 'http://dolphin.deliver.ifeng.com/c?
z=ifeng&la=0&si=2&cg=1&c=1&ci=2&or=1764&l=5514&bg=5514&b=5508&u=http://click.mediav.com/c?
type=2&db=mediav&pub=49_3752_1021110&cus=9_138573_1145054_10664383_10664383000&url=http://click.union.jd.com/JdClicK/?

unionId=42054&siteId={source_id}&to=http://sale.jd.com/act/
rSR4ExMjOnyGwWmf.html',55 left: '40',56 bottom: '50',57 targetId: 'body',58 flightId:'1002',59 maxOpenTime: ''
60 }],61 runArgs: '',62 isFlash:true,63 level: 2,64 posId: 'adPosId_' + 'ifengHover', // 

location.href.split('.')[0] + posId; 记录轮播顺序

65 bingo: '',66 freeze: '',67 changeTimes: 168 });

69 </script>70 EOF-->71 </code>72 <!--0,0,NULL,fixture--><cite>73 <!--BOF74 EOF-->75 </cite>76 </div>77 <script language="javascript">78 try{79 var defaultAdRotatorConfig = {maxTimes : 2, saleMode :

 "CPD"};
80 new adRotatorFactory({identifier : "ArpAdPro_2950"});
81 }catch(e){}82 </script>83 <!--/s_ifeng_index_110831_ad_floatpause-->

84 <!--s_ifeng_index_ad_xdgm 2013.11.19 09:21:29-->85 <scr ipt type="text/javascr ipt">try{aptracker.add(2198);}
catch(e){}</script>86 <!--0,0,NULL,fixture-->87 <!--/s_ifeng_index_ad_xdgm-->88 <!--s_ifeng_index_110831_ad_bgwindows 2013.11.19 09:19:52-->89 <script type="text/javascript">try{aptracker.add(32);}
catch(e){}</script>90 <div id="Ap2948" style="display:none;">91 <!--0,0,NULL,fixture--><cite>92 <!--BOF93 EOF-->94 </cite>95 </div>96 <script language="javascript">97 new AdRotator({maxTimes : 2, identifier :

 'Ap2948'});
98 </script>99 <!--/s_ifeng_index_110831_ad_bgwindows-->100 <!--s_ifeng_index_110831_ad_media 2013.11.19 09:19:52-->101 <script type="text/javascript">try{aptracker.add(40);}
catch(e){}</script>102 <!--0,0,NULL,fixture-->103 <!--0,0,NULL,fixture-->104 <div id="Ap40" style="display:none;">105 <code>106 <!--BOF107 <script>108 (function(){109 var mfp_base = "http://mfp.deliver.ifeng.com/mfp/
mfpMultipleDelivery.do?t=html&ADUNITID=207&CHANNEL=index";
110 var mfp_user_cookie_name = "userid";
111 var mfp_preview_cookie_name = "MFPPID";

112 function mfp_getCookie(c_name){113 var start = document.cookie.indexOf(c_name+"=");
114 if(start ==-1){return "";}115 start = start+c_name.length+1;
116 var end = document.cookie.indexOf(";",start);
117 if(end==-1){end = document.cookie.length;}118 return decodeURIComponent(document.cookie.
substring(start,end));
119 };
120 var mfpp id="&"+mfp_preview_cookie_name+"="+mfp_getCook ie(mfp_preview_cookie_name);
121 var mfp_url=mfp_base+"&USERID="+mfp_getCookie(mfp_user_cookie_name)+mfppid;
122 document.write('<scr'+'ipt src="'+mfp_url+'"></scr'+'ipt>');
123 })();
124 </script>125 EOF-->

126 </code>127 <cite>128 <!--BOF129 EOF-->130 </cite>131 </div>132 <script>133 var ifengWindow = function(obj){134 var _ = this;
135 //轮播控制

136 var identifier = obj.identifier;
137 var wrapper = document.getElementById(identifier);
138 var maxTimes = obj.maxTimes;
139 var adContent = '';
140 var elements = wrapper.getElementsByTagName('code');
141 var fixtures = wrapper.getElementsByTagName('cite');

142 //轮播控制 cookie143 var cookieFlag = 'ifengRotator_'+ identifier;
144 var current = _.getcookie(cookieFlag);
145 var timeOut = 43200;//过期时间

146 var element,tempStr;
147 if(typeof current === 'undefined' || current == ''){148 current = parseInt(Math.random()* 100000)%
maxTimes;
149 }150 //频次控制 cookie151 var i fengW indowCook ieName = ' i fengW indowCook
ieName ' +_.getSecondDomain();
152 if(_.getcookie(ifengWindowCookieName)!=1){153 _.setcookie(cookieFlag,((parseInt(current)+ 1)%
maxTimes), timeOut);154 if(typeof elements[current] !=

 'undefined'){155 element = elements[current];

156 adContent = element.innerHTML;
157 }158 if(adContent == ''){159 if(typeof fixtures[0] != 'undefined'){160 element = fixtures[0];
161 adContent = element.innerHTML;
162 }163 }164 adContent = adContent.replace('<!--BOF', '');
165 adContent = adContent.replace('EOF-->', '');
166 }167 //频次控制

168 var date=new Date();
169 if(_.getcookie(ifengWindowCookieName)!=1){170 showIfengWindow();
171 }

172 function showIfengWindow(){173 document.write(adContent);
174 _.setcookie(ifengWindowCookieName, 1,
obj.showIntervalTime);
175 }176 };
177 ifengWindow.prototype = {178 //得到一个 cookie的值

179 getcookie : function(name){180 var splitCookie = document.cookie.split("; ");
181 for(var i = 0; i < splitCookie.length; i++){182 var cookieNameValue = splitCookie[i].split("=");
183 if(cookieNameValue[0] == name){184 return unescape(cookieNameValue[1]);
185 }186 }

187 return '';
188 },189 //种一个 cookie190 setcookie : function(name, value, time){191 var date = new Date();
192 var expiresTime = new Date(date.getTime()+ time * 1000);
193 ...... //此处有代码省略

193 identifier : 'Ap40'
194 });
195 </script>

26.2 制作自己的时政新闻网站

本节视频教学录像:2分钟新闻网站不仅仅操作简单且功能强大,具有灵活的栏目管理和文章、图文、下载、广告等管理功能。一般的新闻网站的整体设计都比较简洁,栏目分类非常清晰,以便于网民的阅读,除此之外,对于热点新闻一定要以某种方式突出显示,以便于浏览者可以快速地看到热

点新闻。另外,具有地域特色也是新闻网站的特点之一,需要根据用户的IP地址,将用户本地的新闻呈现给用户。

大家之所以选择网络媒体查看新闻,与其快捷的访问速度是密不可分的,如果下载速度过慢,能够耐心等待的用户是有限的。

26.2.1 需求分析

新闻网站一般均需要有:

会员管理模块,可根据会员的级别设置不同的权限。

栏目管理模块,可以根据需要自由地创建新栏目。

图文发布系统,可以由非专业人员进行即时地更新图文。

互动模块,比如时下流行的BBS、博客等。

广告系统管理模块,网站的运营势必需要有广告模块,所以,此模块如何巧妙地加入页面不致引起网民反感,也很重要。

访问人员的统计及友情链接等则是几乎所有新闻网站都具有的模块。

此外,在创建网站时所采用的应用技术、建设周期、运营成本等更是技术人员所必须考虑的。

26.2.2 配置分析

本新闻网站采用ASP 和SQL Server 开发。数据库连接代码如下:

01 <connectionString>02 <clear/>03 <add name=”MyNews”

04 connectionString=”server=localhost/
sqlexpress;database=MyNews;Integrated Security=SSPI;”

05 providerName=”System.Data.SqlClient”/>06 </connectionString>

26.2.3 网站制作步骤

主页的主要代码如下:

01 <body>02 <div id="container">03 <div id="banner">04 <div id="dashed">05 <h1>Random Landscapes</h1>06 <h2>A Free CSS Template</h2>

07 </div>08 </div>09 <div id="main">10 <h3>This is a Header</h3>11 <p>vv</p>12 <p>gg</p>13 <span class="comments"> 12.27.06 //Comments(5)</
span>14 <h3>This is a Header</h3>15 <p>gg</p>16 <p>jj</p>17 <span class="comments"> 12.22.06 //Comments(1)</
span>18 </div>19 <div id="sideBar">20 <img src="bg2b.jpg" alt="Tropical Picture" />21 <ul id="navBar">

22 <li><a href="index.html">&raquo; Home</a></li>23 <li><a href="index.html">&raquo; Blog</a></li>24 <li><a href="index.html">&raquo; Archive</a></li>25 <li><a href="index.html">&raquo; Store</a></li>26 <li><a href="index.html">&raquo; Links</a></li>27 <li id="noLine"><a href="index.html">&raquo; Contact</
a></li>28 </ul>29 <p>kk</p>30 <p>kk</p>31 <div id="box">32 <p>kk</p>33 </div>34 </div>35 <div id="clear"></div>36 </div>

37 <div id="bottom">38 </div>39 <div id= "copy ">&copy ; 2007 Your Name Here .
Sitedesign by <ahref="http://www.gorotron.com">gorotron</a>.</div>40 </body>41 </html>

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (285人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------