您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 建站之制作自己的時政新聞網(wǎng)站的實例(鳳凰網(wǎng))教程

建站之制作自己的時政新聞網(wǎng)站的實例(鳳凰網(wǎng))教程

文章來源：365jz.com 點擊數(shù)：760 更新時間：2018-01-31 10:53 參與評論

26.1 建站之制作自己的時政新聞網(wǎng)站的實例 網(wǎng)站配置分析

新聞網(wǎng)站大多數(shù)弱化了網(wǎng)民對互聯(lián)網(wǎng)功能的需求，而強(qiáng)化了網(wǎng)民對內(nèi)容的需求。從新聞網(wǎng)站的結(jié)構(gòu)來看，傳播的效果明顯集中在“首頁”上，網(wǎng)站首頁的傳播效果最好。調(diào)查顯示，一條新聞如果不能出現(xiàn)在首頁上，其傳播的效果會大打折扣，對多數(shù)讀者來說，他們只會到像首頁這樣的重要位置區(qū)瀏覽新聞，根本不會再往“深處”尋找新聞。某種程度上，一條新聞如果僅僅進(jìn)入了網(wǎng)站的滾動新聞，而沒有在頁面上得到呈現(xiàn)，其傳播效果接近于零，故而，此類網(wǎng)站首頁的設(shè)計是至關(guān)重要的。

26.1.1 服務(wù)器配置分析

鳳凰網(wǎng)對外的通信線路都連接到FVR9416S路由器上，向下接上一部主干交換機(jī)，作為向內(nèi)連接用。在該主干交換機(jī)下，接了五臺流媒體服務(wù)器、兩臺文件服務(wù)器及一臺可網(wǎng)管型群組交換機(jī)?？删W(wǎng)管型群組交換機(jī)向下連接內(nèi)部的用戶，局域網(wǎng)帶機(jī)量約為100臺計算機(jī)。

在新的配置上，對外的流量仍保持原有的結(jié)構(gòu)。視頻編輯人員通過某條線路執(zhí)行相關(guān)的工作，而局域網(wǎng)用戶上網(wǎng)及外部用戶存取流媒體和文件則通過另一條線路。這兩條線路互相獨(dú)立，互不影響。但是，視頻編輯人員不用再做網(wǎng)關(guān)配置的改變，就可同時上網(wǎng)及執(zhí)行視頻作業(yè)，而外部用戶觀看流媒體，也不會受局域網(wǎng)用戶大量上網(wǎng)的影響。

26.1.2 頁面設(shè)計分析

本小節(jié)將介紹鳳凰網(wǎng)的頁面設(shè)計架構(gòu)。用戶可以通過在IE瀏覽器輸入http://www.ifeng.com/來訪問鳳凰網(wǎng)。鳳凰網(wǎng)的主頁如下圖所示。

從鳳凰網(wǎng)首頁可以看出，鳳凰網(wǎng)首頁嚴(yán)格地遵循新聞網(wǎng)站信息量大的特點。首頁雖布置簡潔、排列有序，但是其信息量極大，幾乎從首頁上就可以輕松地發(fā)現(xiàn)最近一段時間的時政熱點新聞。其布局從垂直方向分為上中下三欄。上欄從上到下依次是網(wǎng)站的logo、導(dǎo)航條、要點資訊。中欄又分為左中右三欄，左欄在垂直方向再次劃分多欄來顯示評論、鳳凰出品、鳳凰聯(lián)播臺、鳳凰衛(wèi)視、證券信息、鳳凰節(jié)目等內(nèi)容；中欄從上到下則依次是要聞、財經(jīng)股票、汽車車型庫、科技數(shù)碼等欄目，右欄首先是一欄動態(tài)顯示資訊，然后依次是視頻、博報、娛樂、體育、時尚等欄目。

鳳凰網(wǎng)首頁框架如下圖所示。

框架使用網(wǎng)頁布局方式中的DIV布局方式，下面給出鳳凰網(wǎng)首頁部分模塊所包含的子<div>塊。用戶快捷導(dǎo)航設(shè)計的主要代碼如下：

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/"> 紀(jì)實 </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/">財經(jīng) </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/">數(shù)碼</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/"> 原創(chuàng) </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/">房產(chǎn) </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&bid=7491,7265,1674&cid=1003,33,1&
sid=16298&advid=26&camid=1773&show=ignore&
url=http://zhongyi.ifeng.com/">中醫(yī) </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/">鳳凰

衛(wèi)視</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/">創(chuàng)新 </a> <a　target="_blank"
href="http://abroad.edu.ifeng.com/"> 出國 </a><span
class="sep02"><a　target="_blank" href="http://phtv.ifeng.com/epg/">

節(jié)目表 </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 網(wǎng)站程序開發(fā)分析

鳳凰網(wǎng)的欄目很多，且內(nèi)容豐富、信息量非常大，如果只是以平鋪的方式展現(xiàn)，無疑會使瀏覽者不停地拖動滾動條。鳳凰網(wǎng)在主頁上多處采用了輪播的方式，避免了用戶不停地拖動滾動條，節(jié)省了用戶

的瀏覽時間。輪播的代碼如下：

01　<script>02　ads.push（{03　　catagory:　'Coupletsnew',//對聯(lián)

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,　//對聯(lián)顯示層級

17　maxOpenTime:　'10|24'
18　}],19　runArgs:　'',20　isFlash:true,21　level: 2,22　posId:　'adPosId_' +　'ifengCoupletsnew',23　bingo:　'',24　freeze:　'',25　changeTimes　: 1//該產(chǎn)品輪播數(shù)

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

29　</code>30　<cite>31　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　42　43　<script type="text/javascript">try{aptracker.add（41）;}

catch（e）{}</script>44　<div　id="ArpAdPro_2950" style="display:none;">45　<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　<cite>73　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

84　85　<scr ipt type="text/javascr ipt">try{aptracker.add（2198）;}
catch（e）{}</script>86　87　88　89　<script type="text/javascript">try{aptracker.add（32）;}
catch（e）{}</script>90　<div　id="Ap2948" style="display:none;">91　<cite>92　94　</cite>95　</div>96　<script　language="javascript">97　new AdRotator（{maxTimes　: 2,　identifier　:

'Ap2948'}）;
98　</script>99　100 101 <script type="text/javascript">try{aptracker.add（40）;}
catch（e）{}</script>102 103 104 <div　id="Ap40" style="display:none;">105 <code>106 <!--BOF107 <script>108?。╢unction（）{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 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（'',　''）;
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 制作自己的時政新聞網(wǎng)站

本節(jié)視頻教學(xué)錄像：2分鐘新聞網(wǎng)站不僅僅操作簡單且功能強(qiáng)大，具有靈活的欄目管理和文章、圖文、下載、廣告等管理功能。一般的新聞網(wǎng)站的整體設(shè)計都比較簡潔，欄目分類非常清晰，以便于網(wǎng)民的閱讀，除此之外，對于熱點新聞一定要以某種方式突出顯示，以便于瀏覽者可以快速地看到熱

點新聞。另外，具有地域特色也是新聞網(wǎng)站的特點之一，需要根據(jù)用戶的IP地址，將用戶本地的新聞呈現(xiàn)給用戶。

大家之所以選擇網(wǎng)絡(luò)媒體查看新聞，與其快捷的訪問速度是密不可分的，如果下載速度過慢，能夠耐心等待的用戶是有限的。

26.2.1 需求分析

新聞網(wǎng)站一般均需要有：

會員管理模塊，可根據(jù)會員的級別設(shè)置不同的權(quán)限。

欄目管理模塊，可以根據(jù)需要自由地創(chuàng)建新欄目。

圖文發(fā)布系統(tǒng)，可以由非專業(yè)人員進(jìn)行即時地更新圖文。

互動模塊，比如時下流行的BBS、博客等。

廣告系統(tǒng)管理模塊，網(wǎng)站的運(yùn)營勢必需要有廣告模塊，所以，此模塊如何巧妙地加入頁面不致引起網(wǎng)民反感，也很重要。

訪問人員的統(tǒng)計及友情鏈接等則是幾乎所有新聞網(wǎng)站都具有的模塊。

此外，在創(chuàng)建網(wǎng)站時所采用的應(yīng)用技術(shù)、建設(shè)周期、運(yùn)營成本等更是技術(shù)人員所必須考慮的。

26.2.2 配置分析

本新聞網(wǎng)站采用ASP 和SQL Server 開發(fā)。數(shù)據(jù)庫連接代碼如下：

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 網(wǎng)站制作步驟

主頁的主要代碼如下：

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">» Home</a></li>23　<li><a href="index.html">» Blog</a></li>24　<li><a href="index.html">» Archive</a></li>25　<li><a href="index.html">» Store</a></li>26　<li><a href="index.html">» Links</a></li>27　<li　id="noLine"><a href="index.html">» 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>