Продолжим коррекцию шаблона для нашего приложения CakePHP. В предыдущем уроке мы добавили поддержку темы в наш проект и начали корректировать xHTML/CSS код для работы с движком CakePHP. Сегодня мы удалим ненужные элементы и настроим виды CakePHP нашего приложения, чтобы они хорошо выглядели и работали правильно.
Сначала удалим некоторые элементы, открываем /app/views/themed/default/layouts/default.ctp и изменяем его, чтобы он выглядел следующим образом:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title><?php echo $title_for_layout; ?></title> <?php echo $this->Html->css(‘default’); ?> </head> <body> <!—Header Background Part Starts —> <div id=»header-bg»> <!—Header Contant Part Starts —> <div id=»header»> <?php echo $html->link($html->image(«logo.gif»), array(‘controller’=>’jobs’, ‘action’ => ‘index’), array(‘escape’ => false));?> <br class=»spacer» /> </div> <!—Header Contant Part Ends —> </div> <!—Header Background Part Ends —> <?php echo $this->element(‘menu’, array(‘cache’ => true)); ?> <!—Our Company Bacground Part Starts —> <div id=»ourCompany-bg»> <!—Our Company Part Starts —> <div id=»ourCompany-part»> <?php echo $content_for_layout; ?> <br class=»spacer» /> </div> <!—Our Company Part Ends —> </div> <!—Our Company Bacground Part Ends —> <!—Footer Part Starts —> <div id=»footer-bg»> <!—Footer Menu Part Starts —> <div id=»footer-menu»> <p class=»copyright»>© Package 2007 All Rights Reserved</p> <p class=»copyright topPad»>Powered by <a href=»http://www.templatekingdom.com/Web-Templates/Web-Design/» target=»_blank» title=»TemplateKingdom.com»>TemplateKingdom.com</a></p> </div> <!—Footer Menu Part Ends —> </div> <!—Footer Part Ends —> </body> </html>
Из шаблона удален раздел, посвященный планам на будущее, поле для логина и список меню в нижнем колонтитуле.
Теперь открываем файл default.css, который размещен в папке /app/views/themed/default/webroot/css/ и находим в нем строки:
div#ourCompany-bg div#ourCompany-part{ width:922px; margin:0 auto; padding:26px 0 28px 0; background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat; }
и делаем комментарием строку, определяющую фон:
div#ourCompany-bg div#ourCompany-part{ width:922px; margin:0 auto; padding:26px 0 28px 0; /*background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat;*/ }
Мы просто отключили вывод изображения упаковки в правой части элемента div, в котором размещается содержание. Теперь мы можем сделать содержание шире.
Теперь настроим вид index для вакансий (Jobs). Открываем файл /app/views/themed/default/jobs/index.ctp и делаем в нем изменения:
<h2 class=»ourCompany-hdr»>Вакансии</h2> <div class=»jobs index»> <?php if(!empty($jobs)) { $i = 0; echo ‘<ul class=»jobs_list»>’; foreach ($jobs as $job): $class = null; if ($i++ % 2 != 0) { $class = ‘ class=»odd»‘; } echo ‘<li’.$class.’>’; echo ‘<h3>’.$this->Html->link($job[‘Job’][‘title’], array(‘action’ => ‘view’, $job[‘Job’][‘id’])).'</h3>’; echo ‘<div class=»details»>’; echo ‘<span class=»category»>’.$job[‘Job’][‘job_type’].'</span>’; echo ‘ — ‘ . $job[‘Job’][‘company’]; echo ‘<span class=»date»>’ . date(‘M d’, strtotime($job[‘Job’][‘created’])) . ‘</span>’; echo ‘<div>’; echo ‘</li>’; endforeach; echo ‘<ul>’; } else { echo ‘Вакансий нет …’; } ?>
Были удалены ссылки на действия и постраничный вывод, а добавлена разметка HTML для вывода вакансий.
Добавим стили CSS для только что введенной разметки в файл /app/views/themed/default/webroot/css/default.css:
ul.jobs_list { width: 565px; } ul.jobs_list li { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;} ul.jobs_list li:hover, ul.jobs_list li.odd:hover{ background:#ded698; } ul.jobs_list li.odd{ background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); } ul.jobs_list li h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); } ul.jobs_list li h3 a { color: #082733; font-family: «Arial Narrow», Arial, Helvetica, sans-serif; } ul.jobs_list li h3 a:hover { color: #000; text-decoration: underline; } ul.jobs_list li .details { font-size: 13px; } ul.jobs_list li .details .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: «Arial Narrow», Arial, Helvetica, sans-serif; } ul.jobs_list li .details .date { position:absolute; top:38px; right:20px; }
Хорошо выглядит. Добавьте несколько вакансий с помощью действия add (оно доступно через соответствующий контроллер, например , http://localhost/cake/jobs/add) и перейдите на главную страницу вашего приложения.
Теперь внесем изменения на страницу с подробными сведениями о вакансии. Она открывается, если нажать кнопку мыши на описании вакансии в списке. Изменим разметку. Открываем файл /app/views/themed/default/jobs/view.ctp и делаем его таким:
<h3 class=»jobs_view_h3″><?php echo $job[‘Job’][‘title’]; ?></h3> <div class=»jobs view»> <?php echo ‘<div class=»info»>’; echo ‘<span class=»category»>’.$job[‘Job’][‘company’].'</span>’; echo ‘ — ‘ . $job[‘Job’][‘job_type’]; echo ‘<span class=»date»>’ . date(‘M d’, strtotime($job[‘Job’][‘created’])) . ‘</span>’; echo ‘</div>’; echo ‘<div class=»job_details»>’; echo ‘<p>’ . nl2br($job[‘Job’][‘body’]) . ‘</p>’; echo ‘</div>’; ?>
Также надо добавить стили для детального описания вакансии в файл /app/views/themed/webrot/css/default.ctp:
.job_details { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; width: 600px; background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); } .job_details p { font-size: 15px; line-height: 21px;} .info { width: 640px; font-size: 13px;} .info .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: «Arial Narrow», Arial, Helvetica, sans-serif; } .info .date { float:right; } .jobs_view_h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); }
Теперь нажимаем кнопку мыши на любой вакансии и смотрим, как выглядит ее подробное описание.
На этом наш краткий экскурс в необъятный мир CakePHP завершен. Для тренировки вы можете исправить стили остальных частей нашего приложения.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/5MDySN3ehzg/lessons.php
Источник: