Методичка Верстка web

Практическая работа 7-8
Тема. Верстка web - ресурсов
Вёрстка в простом понимании это процесс превращения работы дизайнера в веб-страницу,
отображаемую в браузере. Но один и тот же результат можно получить разными методами и
уже от верстальщика зависит, какой из них предпочесть. От такого выбора зависит результат
работы сайта, быстрота его отображения, доступность для разных устройств и браузеров.
Табличная верстка
Таблицы в HTML придуманы для вывода табличных данных, а не для разметки элементов
страницы. Но так повелось в интернет в связи с легкостью форматирования таблицы
стали применять и для верстки. Простейший пример верстки с использованием таблицы
выглядит следующим образом:
В ней может быть достаточно много вложенных таблиц с разным количеством столбцов.
Соответственно, можно построить таблицами такую структуру сайта, которая бы
устраивала веб-мастера.
Преимущества табличной верстки:
- Простота в позиционировании элементов на странице.
- Можно создавать достаточно сложные дизайнерские решения.
Недостатки табличной верстки:
- достаточно большой код страницы,
- сложность применения SEO – технологий.
Блочная верстка
Блочная верстка сайта - это более совершенный способ верстки и отказ от применения
таблиц в качестве макета. Посмотрим, как абзац может быть представлен в виде блочной
(div) верстки:
Такой способ занимает гораздо меньший объем памяти.
Разница в весе веб-страницы и, тем более, целого сайта, становится весьма существенной
и непосредственно сказывается на скорости загрузки веб-ресурса, к чему и следует
стремиться любому веб-мастеру.
Преимущества блочной верстки по сравнению с табличной:
- Уменьшение размера веб-страницы (в зависимости от сложности структуры страниц
объем может быть уменьшен в 2–3 раза).
- Уменьшает время загрузки веб-сайта. При этом вырастет размер CSS-файла, но,
благодаря тому, что он единожды кэшируется браузером пользователя и при обращении к
другим страницам считывается уже с его компьютера, сайт грузится гораздо быстрее, чем
табличный.
- Снижение нагрузки на сервер.
- Значительно удобнее менять оформление страниц сайта, вынесенное в CSS-файл. При
этом практически отсутствует необходимость редактирования HTML-кода.
- Легкость манипулирования элементами сайта. Любой SEO-специалист подтвердит,
что чем выше контент располагается в HTML-коде, тем боле значима такая страница с
точки зрения поисковой оптимизации. Поисковые системы отдадут больше респекта
такой странице и быстрее проиндексируют ее.
Благодаря возможностям div верстки можно добиться того, что в коде сначала пойдет
основной контент, а только потом шапка, левая и/или правая колонки. При этом внешний
вид страницы совершенно не изменится. Несомненно, таблицами тоже можно добиться
подобного результата, однако блоки позволяют реализовать это гораздо проще.
Визуально приятна прозрачность кода при верстке блоками – нет никаких
нагромождений тегов, все очень красиво и компактно.
Верстка div-ами базируется на знании технологии каскадных таблиц стилей. Если вы
хорошо владеете данной технологией, то с уверенностью могу сказать, что очень легко
перестроитесь на блочную верстку и выполните эту часть практической работы.
Верстка с использованием шаблонизаторов
Одним из самых популярных шаблонных движков для php является smarty.
Smarty - это компилирующий обработчик шаблонов для PHP. Говоря более четко, он
предоставляет один из инструментов, которые позволяет добиться отделения прикладной
логики и данных от представления. Это очень удобно в ситуациях, когда программист и
верстальщик шаблона - различные люди.
Например, скажем, вы создаете страницу, которая показывает газетную статью.
- Название статьи, автор и сама статья - элементы, которые не содержат никакой
информации о том, как они будут представлены. Их передают в Smarty из приложения.
- Затем верстальщик шаблона редактирует шаблоны и использует комбинацию тэгов
HTML и тэгов шаблона, чтобы отформатировать представление этих переменных,
содержащих элементы типа таблиц HTML, фоновых цветов, размеров шрифта, стилей,
SVG и т.д.).
- Однажды программист захочет изменить способ хранения статьи, то есть внести
изменения в логику приложения. Это изменение не вызовет изменений в шаблонах.
Содержание будет все еще передаваться в шаблон таким же самым способом.
- Аналогично, если верстальщик захочет полностью перепроектировать шаблоны, это не
потребует никаких изменений в прикладной логике.
- Таким образом, программист может вносить изменения в прикладную логику без
необходимости изменения шаблонов, а дизайнер шаблонов может вносить изменения в
шаблоны без вреда для прикладной логики.
Одно из предназначений Smarty - это отделение логики приложения от представления.
Итак, начнем с того, для чего вообще нужен шаблонизатор: отделение кода от
представления, то есть от того, что видно снаружи (так называемого пользовательского
интерфейса). В шаблоны выносится все отображения, вся верстка и определяются места,
где будут вставлены или использованы данные, пришедшие от обработчика.
Все это дело выглядит так: скрипт получает данные от пользователя (get, post и т.д.),
обрабатывает их и передаёт в шаблонизатор, а уже шаблонизатор выводи эти данные
используя шаблоны.
Пример: сделаем шаблон, который будет выводить переданный из скрипта текст и
текущее время.
Файл “template.tpl”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head profile="http://gmpg.org/xfn/11">
<title>Изучаем smarty на ПЫХА.РУ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<html>
<h1>Здравствуйте</h1>
<p>{$text|default:"текст не передан в шаблонизатор"}</p>
<small>{$smarty.now|date_format:"%d-%m-%Y %H:%M:%S"}</small>
</body>
</html>
Итак, это шаблон, в который мы должны передать $text. В случае, если эта переменная не
определена, выведется значение по умолчанию ("текст не передан в шаблонизатор").
Здесь мы воспользовались модификатором default, который и устанавливает значение по
умолчанию.
Файл “script.php”:
// подключаем смарти
require_once ('smarty/Smarty.class.php');
$smarty = new Smarty;
$text = 'Текст, который мы собираемся вывести в шаблоне.';
// передаем шаблонизатору наш текст
$smarty -> assign('text', $text);
// выводим шаблон в люди
$smarty -> display('template.tpl');
Также, необходимо обратить внимание на использование {$smarty.now}, эта переменная
выводит текущее время. Здесь для неё используется модификатор date_format,
форматирующий дату.
Важное замечание (обязательное!), о данных.
Абсолютно все данные, абсолютно все массивы данных должны быть сформированы в
скрипте до передачи в шаблонизатор! Старайтесь этого не допускать, т.к. с данными в
шаблонизаторе работать не нужно, он не для этого.
Задание на работу студенту очной формы:
1. Сверстать один документ тремя способами: табличная верстка, блочная верстка,
шаблонная верстка. Документ должен содержать:
не менее трех абзацев и не менее 1000 символов на человека.
2. Сделать выводы.
Задание на работу студенту заочной формы:
1. Сверстать один документ двумя способами: табличная верстка, блочная верстка.
Документ должен содержать:
не менее четырех абзацев и не менее 1000 символов на человека.
2. Сделать выводы.