上一节介绍了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 视图代码。