使用已有的HTML和CSS文件

我们假设你已经有了HTML页面和CSS样式，如列表8-4和8-5中所给出的，现在让你将它们转化为一个Drupal主题。显然在一个实际的项目中，你所用到的文件应该比这些更详细；我们在这里介绍的是方法，所以示例简单了一些。

列表 8-4. page.html

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Header</h1>

</div>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut.

</p>

</div>

<h2>Subheading</h2>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut.

</p>

</div>

Footer

</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