Zend Framework 教程 – 添加样式文件 - web开发自学

webcode

浏览: 5949675 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

Zend Framework 教程 – 添加样式文件

上一节介绍了zend framework 的layout 布局文件，现在我们为本教程中的实例添加一些CSS 样式，让应用看起来更像样一些。

因为应用中 URL 并没有明确指向正确的根目录，那我们应该如何指定CSS文件的路径呢（其他静态文件也一样）？zf提供了一个叫baseUrl() 的view helper。这个helper 从请求的对象中收集必要的信息，然后提供给我们不清楚的 URL 的位置。

在布局文件 application/layouts/scripts/layout.phtml 的<header> 部分添加CSS文件。我们使用headLink()这个view helper：

zf-tutorial/application/layouts/scripts/layout.phtml
...
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'); ?>
</head>
...

通过使用headLink() 的 prependStylesheet() 方法，我们可以在<head>部分，site.css 后面添加任何其他指定的CSS 文件。

然后我们在public/目录下创建css 目录，里面创建 site.css文件：

zf-tutorial/public/css/site.css
body,html {
margin: 0 5px;
font-family: Verdana,sans-serif;
}
h1 {
font-size: 1.4em;
color: #008000;
}
a {
color: #008000;
}
/* Table */
th {
text-align: left;
}
td, th {
padding-right: 5px;
}
/* style form */
form dt {
width: 100px;
display: block;
float: left;
clear: left;
}
form dd {
margin-left: 0;
float: left;

}
form #submitbutton {
margin-left: 100px;
}

因为我们已经创建并设置了布局文件，现在就可以清空 application/views/scripts/index目录中zf 自动创建的4个view 文件中的默认代码了（index.phtml, add.phtml, edit.phtml 和 delete.phtml），开始编写自己的view 视图代码。

分享到：