如何更改界面风格（修改数字报界面模板）?

分享到： QQ空间微信新浪微博

准备软件：dreamweaver

1. 目录说明

1. Content目录保存图片及样式，Content/themes目录是主题目录,themes目录是各个主题样式目录（如：Content/themes/blue目录），blue目录下又分为图片（Images)和样式（Css）目录.

2. 根目录下面Themes目录下面为程序文件,以 .aspx或者.ascx为扩展名。 Themes/blue为主题目录名称。

每个文件对应模块：(以Default风格为例）

网站首页：Themes/default/main/index.aspx 对应样式目录-Content/themes/default/

每期页面：Themes/default/content/eachqi.aspx 对应样式目录-Content/themes/default/

版面页面：Themes/default/content/Edition.aspx 对应样式目录-Content/themes/default/

内容页面：Themes/default/content/View.aspx 对应样式目录-Content/themes/default/

版面导航：Themes/default/content/Menu.aspx 对应样式目录-Content/themes/default/

关于我们： Themes/default/about/目录

往期回顾： Themes/default/review/目录

搜索： Themes/default/search/目录

控件目录：Themes/default/userinc/

底部：Themes/default/userinc/foot.ascx

头部：Themes/default/userinc/top.ascx

日历控件：Themes/default/userinc/Calendarqi.ascx

如：程序文件：Themes/blue目录<——程序对应图片文件——> 图片目录：Content/themes/blue

2. 模板修改

Themes-default目录下面为程序文件，可用Dreamweaver软件打开，如：修改 Themes/default/main/index.aspx文件，即可修改网站首页，界面所见即所得。

业务层向Web层所传的视图数据ViewData或者Model，如下列表：

E_eachedition eachban = ViewData["edition"] as E_eachedition;
E_eachqi eachqi2 = ViewData["eachqi"] as E_eachqi;
eachban 代表版面类数据
eachqi2 代表刊期类数据
eachqi2.Id 刊期Id号
ViewData["webd"] 网站目录
ViewData["preqihref"] 上一期链接
ViewData["nextqihref"] 下一期链接
ViewData["issuedate"] 本期发行日期
ViewData["Declaration"] 网站声明
ViewData["newslist"] 本版新闻列表List<>
ViewData["editionlist"] 版面导航列表List<>
eachban.Pagemap 版面图片内容(包含热点链接)
eachban.Pagepic 版面图片路径
eachban.Pagepdf 本版版面pdf路径
eachban.Pagename 本版版面名称
eachban.Pagetitle 本版版面标题
eachban.Id 版面Id号
eachban.Prelink 上一版面链接
eachban.Nextlink 下一版面链接
Model.Prelink 上一篇
Model.Nextlink 下一篇
ViewData["three_editions"] List<E_eachedition> 最近三期数据
ViewData["footmenu"] 底部导航
ViewData["powerby"] 版权信息
ViewData["Logo"] logo图片src
ViewData["topmenu"]头部导航
ViewData["today"] 今天日期
ICP证：<%=ViewData["Icp"]%>

内页标题变量：

<%
string pagetitle2= Mvc_seobll.Pageseo().Title; //内页
string pagekey2 = Mvc_seobll.Pageseo().Keywords;
string pagedes2 = Mvc_seobll.Pageseo().Description;%>

首页标题变量：

<%
string hometitle2= Mvc_seobll.Homeseo().Title; // 
string homekey2 = Mvc_seobll.Homeseo().Keywords;
string homedes2 = Mvc_seobll.Homeseo().Description;%>

53BK数字报V5.1替换视图数据列表，请见:http://www.53bk.com/news/detail/v767.html

3. 创建新的模板

1. 进入Content目录和复制一份相类似模板(如：default)的图片目录，如：newtheme;
2. 进入Themes目录复制一份相类似模板(如：default)的Views文件目录，如文件夹名：newtheme
3. 更新 Themes/newtheme目录里面*.aspx文件引用路径"/default/"全部替换成 "/newtheme/". 此步可用deamweaver批量替换完成.
4. 设计电子报模板，更改*.aspx文件
5. 每个页面视图数据（ViewData数据）可在引用控件页面直接调用,引用控件页面的ViewData数据同样可在父页面直接调用；也就是说视图数据（ViewData数据）在每个页面（包括父页面的和子页面的）都是共享的. 便于前台设计人员自由对网站进行布局。（控件也可以完全除去，重新自定义页面布局）
6. 修改完top.ascx和foot.ascx后台一定要重启应用程序，前台刷新，才会立即看到效果。

4. 调用源代码示例

新闻调用:

<div class="tj clearfix"> 
   <div class="qinews clearfix">
    <h3><span>本期精彩推荐</span></h3>
    <div class="box clearfix "> 
    <%List<E_news> newslist2= E_newsbll.Newslist(3, eachqi2.Id,1,0);
 string css4="";
 if (newslist2.Count>3)
   css4=" class=\"scroll\"";
 k = 0;
 foreach (var item in newslist2){
  k++;
  if (k>1)
  break;
     bool ispic =false;
     ispic = item.Ispic;
     string css50="";
     if (ispic == true)
  {
      css4 = " class=\"seeno\"";
  css50=" tjimg";
  }
  %>
  <div class="tjtitle1"><a href="<%=item.Newslink %>"><%=Fun.W3c(item.Title)%></a></div>
  <div class="tjdes1 <%=css50%>"><%if (ispic == true)
        {%><img src="<%=item.Picsmall %>" /><%} %><span><a href="<%=item.Newslink %>" ><%=Fun.left(Fun.UnW3c(Fun.Htmlno(item.Content)),130)%></a></span></div>
    <%}%>
    <ul <%=css4%>>
    <%
     k = 0;
     string css5="";
    foreach (var item in newslist2){
     k++;
     css5="";
  if (k==1)
  continue;
  if (k>5)
   break;
     if (k >= 2 && k % 2 == 0)
      css5="class=\"one\"";%>
    <li <%=css5 %>><a title="<%=Fun.W3c(item.Title)%>" href="<%=item.Newslink %>"><%=Fun.W3c(item.Title)%></a></li>
    <% } %> 
    </ul> 
    </div>
   </div><!--qinews-->
  </div><!--tj-->
  
 <!--Newslist(3, eachqi2.Id,1,0); 3为行数 1 为推存， 0为非图片新闻-->

新闻类源码:

namespace Mvcmode
{
public class E_news
{
private int _id;
public int Id
{
get { return _id; }
set { _id = value; }
}
public int Classid { get; set; }
public int Qiclid { get; set; } 
public int Qiid { get; set; }
public string Editionids { get; set; }
public string Jiantitle { get; set; }
public string Title { get; set; }
public string SubTitle { get; set; }
public string Content { get; set; }
public string Author { get; set; }
public string Reporter { get; set; }
public string Editer { get; set; }
public string Auditor { get; set; }
public string Keywords { get; set; }
public int Hits { get; set; }
public DateTime Edittime { get; set; }
public DateTime Issuedate { get; set; }
public int Infoid { get; set; }
public bool Isrefer { get; set; }
public bool Istj { get; set; }
public bool Ispic { get; set; }
public int Showtype { get; set; }
public string Picsmall { get; set; }
public string Picsmall2 { get; set; }
public string Picsmall3 { get; set; }
public string Referurl { get; set; }
public string Froms { get; set; }
public string Fromsurl { get; set; }
public string Classname { get; set; }
public string Newslink { get; set; }
public string Showstr { get; set; }
public string Tvurl { get; set; }
public string Prelink { get; set; }
public string Nextlink { get; set; }
public string Pretitle { get; set; }
public string Nexttitle { get; set; }
public int Goods { get; set; }
public List<Mvc_infopic> Piclist { get; set; }

}
}

刊期变量：

“总1期今年第1期 2018年1月16日发行” 用如下代码：

总<%=E_eachqibll.Totalqi%>期 今年第<%=eachqi2.Totalqi%>期 <%=ViewData["issuedate_cn"]%>发行