主题：我的第一个CSS/XHTML网站：详细介绍的一次实验

发布者： alain01On 2006/5/22 14:14:49 8671 reads
缩放图片在详细展示我的新主题（可以说是我在完全CSS/XHTML和无表格下的第一次尝试）之前，让我先分享一下达到这个最终结果的过程，以及在之前，简单回顾我的网站。


原始新闻在法语中可在此处找到 here

摘要
0) 简介
1) 开始主题 - 想法
2) 假专栏
3) 主要的"div"
4) 斜接，第1部分：无图像的圆角
5) 斜接，第2部分：如何着色活动的斜接
W3C验证
下载主题



0) 简介

在我第一个网站（内部网站）以来，我的第一个XOOPS项目（不可见），我想说的是通过这个惊人的CMS和这个惊人的社区（“无可匹敌且无与伦比”）。

阅读更多...


Resized Image Resized ImageResized Image
我的第一个公共网站是
theRhone-Alpes排球联盟，我为此主题（阅读法语新闻）工作。

此主题在下载部分可用 here。


我继续进行了2个多语言法英网站的建筑“净值”。这些网站看起来不像XOOPS网站，但是...点击底部“登录”，你会找到你熟悉的部分！

这些网站是 Laboratoire de Dynamique des Machines et des Structures (阅读法语新闻) 和一个名为ROTORINSA的特定软件。







缩放图片然后，我为Gilles管理的亚洲象协会的（核心、模块和主题）网站进行了全面更新，名为Elefantasia。


在我的新站点建成后，阅读了Christian的新闻《10分钟内制作Xoops xhtml/css模板》后，我想：为什么不是我呢？
所以，我尝试了一下，仅仅是一项挑战，对建设我的新站点并不是真正需要的，仅仅是一项挑战！
[分页符]
首先，我只花了14天和10分钟，所以，比Christian只多14天！

受到了以下站点的启发
- Pompage.net
- Alsacréation和这里
- peutetreunereponse.net

我的目标是（没有对于网站的具体目标，只是主题设计目标）
- 创作一个原创主题，
- 仅使用CSS/XHTML，
- 无表格布局，
- 通过W3C验证，
- 使用优雅的边角，
- 圆滑的边角，
- 活动边角的着色，



已缩小图片1) 开始主题 - 想法

我真的很喜欢这里展示的并可在这里获取的主题。

所以我以创建一个带有两列的记事本主题开始，没有右侧列。






2) 假专栏

阅读这条新闻：虚构列。
这种方法对我的主题来说非常有意思。

Resized Image
顶部1 + 边角（外部链接）

Resized Image
顶部2 + 边角（内部链接）

Resized Image
主要图像（y轴重复）

Resized Image
底部


3) 主要的"div"

<div id="conteneur">
     <div id="navigation">
          // 外部链接的裁剪定位
     div>

     <div id="navigation2">
        // 内部链接的裁剪定位
     div>

     <div id="logo">
         // 这里放置logo的url
     div>

     <div id="gauche">
         // 左侧轮播图
     div>

     <div id="centre_gd">
          <div id="centre_gauche">
               // 中左侧轮播图
          div>
          <div id="centre_droite">
               // 中右侧轮播图
          div>
     div>

     <div id="centre">
         // 中中心轮播图
          <div id="content">显示模块内容div>
     div>

     <div id="blocnote_bottom">
         // 页面底部
     div>
div>

[分页符]
4) 斜接，第1部分：无图像的圆角

存在一种使用裁剪的方法：[滑动门]，但我使用了一种不同的方法，但它是这样的（示例2，水平）。

这是一个神奇的小技巧（"窍门"）。利用这种方法，你可以创建大量没有图片的裁剪。当你理解了方法（CSS方法）后，很容易创建具有很多组合的裁剪。
- 颜色，
- 尺寸（宽度）（小、正常和大裁剪）
- 选中或非选中裁剪

我将尽力向你解释
<div id>
    <ul>
        <li>
            <a class="menumini" href>
                 <b class="BoxOnglet"><span class="BoxContenu couleur4">链接<span>链接span><b class="b4 couleur4">b><b class="b3 couleur4">b><b class="b2 couleur4">b>b>
            a>
        li>
    ul>
div>


使用以下CSS规则（请参阅注释）
// localsation of mitres on the page
#navigation {
    padding-left: 300px;
    background: transparent no-repeat;
    margin: 0px;
    height: 4em; /* cache overflow:hidden de IE5/Mac */
    overflow: hidden; /* */
    background-image: url(images/fonds_blocnote_top.png);
   height: 45px;
}

#navigation ul {
  margin:0px;
  padding:0;
  list-style-type:none;
  background:transparent;
  }
#navigation li {
  display:block;
  float:left;
  margin:15px 2px 0px 0px;
  }
.BoxOnglet, .BoxOngletFonce {
  background:transparent;
  }

// mitres for dark text
.BoxOnglet span {
   text-align: center;
   color: #FFCC33;
   margin: 0px;
   font-family: verdana;
   font-size: 80%;
   font-weight: normal;
}

// Mitres for not dark text
.BoxOngletFonce span {
   text-align: center;
   color: #093F7D;
   margin: 0;
   font-family: verdana;
   font-size: 80%;
   font-weight: normal;
}


// Cheat for the rounded mitres
// b1 étant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
  display:block; 
  font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */ 
/* */ 
  overflow: hidden; 
/* */ 
  }

.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
  border-left:1px solid #FFFFFF; 
  border-right:1px solid #FFFFFF;
  }
.b1 {margin:0px 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}

// mitres contour
.BoxContenu {
  display:block; 
  border-left:1px solid #FFFFFF; 
  border-right:1px solid #FFFFFF;
  }

// normal size mitres
a.menu {
  display:block; 
  text-decoration:none; 
  width:6.5em;
  }

// small sire mitres
a.menumini {
  display:block; 
  text-decoration:none; 
  width:3.5em;
  }

// large size mitres
a.menugrand {
  display:block; 
  text-decoration:none; 
  width:9.5em;
  }

a.menu:hover, a.menumini:hover, a.menugrand:hover  {
  background:transparent; 
  cursor:pointer;
  text-decoration: none;
  }
a.menu:hover span, a.menumini:hover span, a.menugrand:hover span {
  padding-top:8px;
  }

// Color mitres
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}

[分页符]
5) 斜接，第2部分：如何着色活动的斜接

好的，现在我们有漂亮的角，但如果角处于活动状态，我希望它为红色。

对于模块
<{if $xoops_dirname == 'wordpress'}>


<{if $xoops_dirname == 'xhld0'}>


对于文件上的角

首页
<{if $SCRIPT_NAME >=alias: "/index.php"}>


登录/注册
<{if $xoops_requesturi == "/user.php?xoops_redirect"}>

为什么？
因为页面可以在此页面进行重定向。

最后，我增加了一个测试，当成员登录时，将“登录/注册”替换为“我的会计”。
<{if $xoops_isuser}>
// 选项卡 "我的 会计"
<{else}>
// 选项卡 "登录/注册"
<{/if}>



6) W3C 验证

缩小后的图像XHTML 验证


调整大小后的图片CSS验证




调整大小后的图片7) 下载主题

这个新主题现在可以免费下载，请在此处下载。