您現在的位置: 365建站網 > 365學習 > 建站之制作自己的時政新聞網站的實例(鳳凰網)教程

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

文章來源:365jz.com     點擊數:352    更新時間:2018-01-31 10:53   參與評論

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

新聞網站大多數弱化了網民對互聯網功能的需求,而強化了網民對內容的需求。從新聞網站的結構來看,傳播的效果明顯集中在“首頁”上,網站首頁的傳播效果最好。調查顯示,一條新聞如果不能出現在首頁上,其傳播的效果會大打折扣,對多數讀者來說,他們只會到像首頁這樣的重要位置區瀏覽新聞,根本不會再往“深處”尋找新聞。某種程度上,一條新聞如果僅僅進入了網站的滾動新聞,而沒有在頁面上得到呈現,其傳播效果接近于零,故而,此類網站首頁的設計是至關重要的。

26.1.1 服務器配置分析

鳳凰網對外的通信線路都連接到FVR9416S路由器上,向下接上一部主干交換機,作為向內連接用。在該主干交換機下,接了五臺流媒體服務器、兩臺文件服務器及一臺可網管型群組交換機??删W管型群組交換機向下連接內部的用戶,局域網帶機量約為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?。╢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 <!--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>

 

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (352人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 freesex高清日本vide| japanese8 10sex| 尤物网| A片毛在线视频免费观看| 免费无码中文a级毛片| 帅哥吃直男大雕视频| 三級片黃色三級片黃色| 666日本大胆艺术裸体| 免费av无卡在线观看| 龚玥菲版新梅瓶在线观看dvd| 高h全肉动漫在线观看| 小12萝自慰喷水网站| 久久精品国产精品亚洲欧美| 曰批免费视频播放免费| 狠狠she2017在线电影| piss厕所撒尿1wc女厕所| 美女扒开内裤无遮挡18禁| 中国人XxX| 高潮爽到下面喷水的视频| 欧美肥胖老太bbw| 男女猛烈拍拍拍无挡视频免费| 久久99精品久久久久久婷婷| 性爱小电影| 最高清的青春草在线看视频| 真人做受120分钟小视频| 日韩中文人妻无码不卡| 国产网友愉拍精品视频手机| 欧美另类69xxxxx| 欧美60老妇p|us| 免费人成网站在线观看| 久久影院| http://www.icrbd.com