CSS+DIV+XML+XSL小解


概要:    本文通过一个简单的例子来说明了CSS+DIV+XML+XSL的应用在文中我通过
       DIV定义了一个上中下结构的的窗体,其中中间部分又被两个DIV分成了左右两部分我通过定义
       一个XML文件来存储中间两部分的数据,通过两个XSL来表现数据,并用C#语法动态的加载数据
       展现在了中间的DIV部分,这就是本文说明的一种表现层的数据于页面的分离。用这种机制大大
       提高了页面布局的灵活性,你可以很方便的改变页面展现的内容(通过操作XML文件)你也可以
       很方便的体现不同的数据展现(通过修改XSL),可以修改样式属性(通过修改CSS),您还可以
       方便的改变整体的架构布局(通过模板),当然这些操作都是独立进行的,这才是它的精华,你
       了解了吗?有人就要提问了 ,那我要是把页面分成50快,那我不是要写50个XSL来展现这样会不
       会对网站的性能影响太的,哈哈,那我回大你 不会太大 基于XSL+XML的展现做的是很完美的,你
       可以不用太担心(当然肯定会有损失,它不可能和静态页媲美的),再者我做两个XSL文件主要是
       为了说明你可以把网页分块独立的特性,当你觉得没必要的时候你大可以只写一个XSL,在XSL里
       完成DIV布局。
          有人又要问那为什么用多个XSL那?你想想吧,这样当然是为了满足需要经常修改的特性了
       你可以把主页面当成一个摸版,你想吧它关联到那就关联到那,这就实现了动态布局,是非常奇妙的
       客户体验 哦,你想明白了吗?奇妙在什么地方,仔细想象吧
总结 :
       结构1:单XML+单XSL(描述页面结构DIV)+单CSS(其中CSS对XSL文档用运)
              优点:表现层数据表现分离,方便修改页面数据,样式  
       结构2:单XML+多XSL(描述单模块结构)+多CSS(对XSL和模板描述样式)+模板(描述页面结构DIV)
              优点:表现层数据表现分离,方便修改页面数据,样式 ;结构于内容分离,方便修改内容

  注意:本文是描述一个简单个结构2例子
1。首先,在阅读本问之前请先自行熟悉XML,XSL,CSS相关知识,应为这些知识网上一搜一大堆我就
   不罗嗦了
2。我先给出本文的XML文档(xml.xml)
  

 
   
      我的连接
   

   
      我的连接
   

   
      我的连接
   

   
      我的连接
   

   
      我的连接
   

   
      我的连接
   

   
      我的连接
   

 

 
   
      让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
     让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
       让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
     让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
      让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
      让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
      让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

   
      让我们开始神秘的CSS+DIV+XML+XSL之旅吧
   

 

本XML文档主要给出了我用DIV做的内容页中的左右页面中的内容列表,分别为

3。我们来给出显示用的两个XSL文档(xslLift.xsl,xslRight.xsl)
  3。1。xslLift.xsl(表现左边DIV中的内容的XSL文件)

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


   
   
   
     
       


         
       

     
   
   


   3。2 xslRight.xsl(表现右边DIV中的内容的XSL文件)

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


   
   
   
     
       


         
       

     
   
   


我也就不多说了,主要用到了结构
来读取XML中的内容

4。下面我们介绍关键的技术:
   先来看段代码:
      public StringWriter getHTMLstrWrite(string xmlPath, string xslPath)
       {
        //get the xsl as a string
        StreamReader xslr = new StreamReader(xslPath);
        string xslStr = xslr.ReadToEnd();

        //get the xml as a string
        StreamReader sr = new StreamReader(xmlPath);
        string inStr = sr.ReadToEnd();

        // Load the style sheet.
        StringReader xslReader = new StringReader(xslStr);
        XmlReader xslRdr = XmlReader.Create(xslReader);
        XslCompiledTransform xslt = new XslCompiledTransform();
        xslt.Load(xslRdr);

        //Load the xml
        StringReader strReader = new StringReader(inStr);
        StringWriter strWriter = new StringWriter();
        XmlReader reader = XmlReader.Create(strReader);

        // Transform
        xslt.Transform(reader, null, strWriter);
        return strWriter;
    }

现在我来给大家解释
   1,string xmlPath, string xslPath分别是我们要给出的参数 也就是你的XML和XSL的文件路径
   2,StreamReader xslr = new StreamReader(xslPath);
       string xslStr = xslr.ReadToEnd();
      读取XSL文件到xslStr中
   3, StreamReader sr = new StreamReader(xmlPath);
        string inStr = sr.ReadToEnd();
      读取 XML文件到inStr中
   4 StringReader xslReader = new StringReader(xslStr);
        XmlReader xslRdr = XmlReader.Create(xslReader);
        XslCompiledTransform xslt = new XslCompiledTransform();
        xslt.Load(xslRdr);
     这是最重要的一步,通过XslCompiledTransform 来载入XSL文件并提供关联XML文件的功能
     有关详细解释查看帮助
   5,StringReader strReader = new StringReader(inStr);
        StringWriter strWriter = new StringWriter();
        XmlReader reader = XmlReader.Create(strReader);
     载入XML文档没什么可说的
   6, xslt.Transform(reader, null, strWriter);
       就想4步所说的 提供关联XML和XSL文档的功能(是动态的哦,会很有用)

现在我们准备好了一切,马上我们开始够建主页面吧!(Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>



    无标题页
   






  




有人看了就要问(大哥别开玩笑了这也能当主页面 你玩那吧你)
哈哈 ,您别着急啊 你看到了我一共用了五组DIV其中第一组是也头最后一组是页尾
现在让我们看看中间吧 中间部分用一个DIV里嵌套两个DIV的形式出现




看明白了吗这就是我们内容部分的架构,有的人可能会很迷糊
但是您如果熟悉CSS您将不会再有任何疑问了

好了让我们来看看CSS文件把(css.css)
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
}
#content1
{
    WIDTH:776px;
    MARGIN-RIGHT: auto;
    margin-left : auto;
    padding : 0px;
    background:#ffffff;
    border-left:1px solid #9662A9;
    border-right:1px solid #9662A9;
    text-align:left;
    height:303px;
    overflow: hidden;。//益处自动隐藏
}
#right
{
 FLOAT:right;//在左侧浮动
 width:590px;
 text-align:left;
 height:303px;
}
#left
{
 text-align:center;
 padding-top:6px;
 height:303px;
}
#footer
{
  clear:both;
  width:776px;
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  background: #EEE;
  height:60px;
 }
.text{margin:0px;padding:20px;}
不用多说了吧 自己看看吧
 下载本例DEMO:http://download.csdn.net/user/desertFishToHeaven/

(名为CSS+DIV+XML+XSL之旅)

你可能感兴趣的:(ASP.NET)