You are here

使用已有的HTML和CSS文件

 

我们假设你已经有了HTML页面和CSS样式,如列表8-4和8-5中所给出的,现在让你将它们转化为一个Drupal主题。显然在一个实际的项目中,你所用到的文件应该比这些更详细;我们在这里介绍的是方法,所以示例简单了一些。
 
列表 8-4. page.html
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="global.css" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="sidebar-left">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                nonummy nibh euismod tincidunt ut.
            </p>
        </div>
        <div id="main">
            <h2>Subheading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                nonummy nibh euismod tincidunt ut.
            </p>
        </div>
 
        <div id="footer">
            Footer
        </div>
    </div>
</body>
</html>
 
列表 8-5. global.css
#container {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
}
#header {
    padding: .5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
}
#header h1 {
    padding: 0;
    margin: 0;
}
#sidebar-left {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
}
#main {
    margin-left: 200px;
    border-left: 1px solid gray;
    padding: 1em;
    max-width: 36em;
}
#footer {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
}
#sidebar-left p {
    margin: 0 0 1em 0;
}
#main h2 {
    margin: 0 0 .5em 0;
}
 
    该设计如图8-3所示
 
8-3 在转化为Drupal主题以前的设计
 
    让我们将这个新主题叫作greyscale,在文件夹sites/all/themes/custom下面创建一个子文件夹greyscale。如果sites/all/themes/custom文件夹不存在的话,那么你需要新建一个。将page.html和global.css复制到greyscale文件夹下面。接下来,将page.html重命名为page.tpl.php,这样它将作为一个新的页面模板,为Drupal的每个页面服务了。
 老葛的Drupal培训班 Think in Drupal

Drupal版本:

评论

官方勘误:http://www.drupalbook.com/errata2?page=3    Page 174

Error: 

3 new additions to the code have not been made bold.

Correction: 

The following portions should be bold for consistency:
<?php print $breadcrumb ?>
<?php print $title ?>
<?php print $closure ?>

Description of the Error: 

Minor formatting inconsistency.