Регистрация

Требования к верстке сайта. Макеты, таблицы, страницы.

User 18-03-2016, 22:25 7 486 Для веб-программиста
1

Требования к верстке сайта. Макеты, таблицы, страницы.

Как известно, театр начинает с вешалки. Сайт начинается с профессионально верстки страниц. К великому сожалению, до сих пор встречается огромное количество «умельцев» и веб-студий, которые используют устаревшие стандарты и технологии (подробнее об этом мы поговорим в девятой главе).

Какой же должна быть современная профессиональная верстка?

1. Верстка должна быть валидной, за исключением случаев, описанных выше. Это желательный критерий, но не обязательный. Однако игнорировать указания валидатора тоже нельзя. Разработчик должен стремиться к достижению минимального количества ошибок валидации.

2. Верстка должна точно соответствовать дизайн-макету.
Дизайнер разрабатывает для вашего сайта дизайн-макеты (графические макеты страниц сайта). Готовая верстка макетов должна абсолютно точно копировать оригинальные графические макеты. Очень часто встречаются случаи, когда верстка производится неквалифицированным специалистом с отступлениями от уже готового дизайна (например, берется похожий, а не исходный шрифт, изменяется начертание шрифтов, используется неточная передача цветового оформления, изменяется оформление блоков страницы, блоки позиционированы относительно друг друга неточно т.п.).

На первый взгляд все это может показаться вам ерундой, но взгляд искушенного посетителя все эти недочеты обязательно заметит и сочтет их недоработками дизайнера. Имидж сайта и компании испорчен. Вложенные деньги в качественный дизайн оказались потраченными зря, а испортил все верстальщик.

3. Верстка должна быть кроссбраузерной.
Под кроссбраузерной версткой подразумевается одинаковое отображение сайта во всех популярных браузерах (Internet Explorer, Opera, Mozilla Firefox, Google Chrome). Если ваш сайт рассчитан на зарубежную аудиторию, то к этому списку добавится браузер Safari. В России Safari распространен незначительно из-за достаточно малой популярности продукции Apple.На остальных устройствах его практически не используют (мне он не нравится из-за очень низкой скорости работы).

Распространенное мнение о необходимости верстки макетов под браузер Internet Explorer 6.0 уже можно считать несостоятельным. На сегодняшний день от поддержки этого браузера можно отказаться – доля его пользователей равняется 4-6% (по данным статистики посещаемости сайтов моих клиентов на момент написания этих строк). Все остальные браузеры должны полноценно поддерживаться в последней и предпоследней версии (лучше, если в двух последних версиях).

И напоследок не могу не бросить камень в огород разработчиков браузеров. Некоторые из них по каким-то личным соображениям отказываются от полноценной поддержки рекомендаций W3C, что может приводить к незначительным отличиям во внешнем виде сайта в разных браузерах.

Например, Internet Explorer только в восьмой и девятой версиях стал работать на уровне своих конкурентов, а максимальная поддержка еще не утвержденного HTML5 на момент написания книги реализована только в последних версиях Safari. В целом, отличия в отображении сайта в различных браузерах иногда могут быть допустимы, но они должны быть минимальны и не мешать полноценному использованию сайта.

4. Верстка должна быть блочной с внешними таблицами стилей. Едва ли не половина разработчиков продолжает верстать макеты при помощи таблиц, а не при помощи CSS. Использование CSS («блочная» верстка) позволяет добиться более быстрой работы сайта и облегчает его поддержку. Табличная верстка на сегодняшний день считается неприемлемой.

Табличная верстка выглядит примерно так:

<body>
<table>
<tr>
<td>это ячейка таблицы</ td >
<td>это вторая ячейка первой строки таблицы </ td >
</ tr >
<tr>
<td>это ячейка второй строки таблицы</ td >
<td>еще одна ячейка второй строки таблицы </ td >
</ tr >
</ table>
</body>


Каркас страницы (код внутри тэга <body>) состоит из тэгов таблицы, а должен
быть создан с использованием блочных элементов <div>….</ div>.

Использование блочных элементов позволяет добиться максимальной гибкости макета страницы и полного контроля всех элементов страницы. Кстати, большинство бесплатных шаблонов оформления для популярных CMS создано с применение табличной, а не блочной верстки.
Так же современными стандартами предусмотрено вынесение стилевого оформления страниц во внешние файлы. В физическом плане таблицы стилей (CSS) представляют собой файлы вида file.css, которые должны подключаться к веб-страницам в разделе <head>:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Написание стилей непосредственно в самой странице выгладит примерно так:
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>


Такой подход недопустим! Подобные вольности разработчиков в случае внесения изменений на сайт окажут вам «медвежью» услугу. Кроме того, это наглядный пример «плохого стиля программирования», который отрицательно сказывается на скорости загрузки страниц.

5. Верстка должна быть семантической. Концепция семантической верстки подразумевает использование элементов (тегов) в соответствии с их смыслом (семантическим) значением. Спецификация HTML5 разрабатывается с учетом максимального соответствия концепции семантической верстки.

Примеры:
- Табличная верстка не соответствует данной концепции. Таблицы с таким подходом должны использоваться только для представления табличных данных, а не для формирования каркаса страницы
- Списки и навигационное меню должны формироваться тэгами списков;
(<ul>…</ ul>, <ol>…</ ol>, <li>…</li>)
- Заголовки должны формироваться тэгами заголовков 1-6 уровней <h1>-<h6> и никак иначе;
- Использование семантической верстки сделает ваши сайты максимально доступным для поисковых систем, альтернативных браузеров (например, голосовых) и мобильных устройств.

Теперь вы понимаете, что верстка сайтов не такое уж и просто занятие, как говорят некоторые. Если кто-то обещает вам сделать верстку макета за 300 рублей и за 1-2 часа, то будьте уверены: макет, за который дизайнер может запросить с вас 10-12 тысяч рублей будет испорчен нерадивым верстальщиком буквально за 1 час!

Квалифицированный верстальщик в своей работе никогда не будет использовать визуальные редакторы. Весь код должен быть написан исключительно вручную, потому что только таким образом можно добиться максимально «чистоты» и «хорошего стиля» кода. Единственное средство «механизации» - это «заготовки» кода, сделанные самим же вручную верстальщиком специально под свой стиль написания кода.

В целях сокращения временных затрат верстальщик иногда может использовать специальные библиотеки (CSS-фреймворки), однако в этом случае дизайнер должен разрабатывать макеты именно под тот CSS-фреймворк, который будет использовать верстальщик.

Для сравнения могу сказать, что верстка хорошего макета главной страницы сайта с использованием собственных заготовок и соблюдением всех описанных выше стандартов у меня занимает около одного рабочего дня (порядка 6-8 рабочих часов). Стоить такая верстка будет около 1500-2000 рублей. То есть разница по временным и материальным затратам составляет 4-5 раз.

И последнее, что хочу отметить по верстке. Заказывайте дизайн-макеты только у профессиональных дизайнеров. Макеты, выполненные непрофессиональным дизайнером, не только сильно уступают по качеству дизайна и юзабилити, но и значительно усложняют процесс верстки. Чаще всего макеты выполняются в «фотошопе» и отдаются заказчику в виде psd-файлов с разделением на слои.

Мне доводилось верстать макеты:
- выполненные на одном слое (по сути, получилась верстка из обычной картинки, а не из слоев);
- дешевые макеты, в которых слои выполнены настолько некачественно, что заказчикам приходилось отдавать макеты на переработку, потому что сверстать из них задуманное заказчиком не представлялось возможным.

Если вы считаете оплату услуг «дорогих» специалистов роскошью, то это не так. «Переплату» можно считать страховкой ваших нервов. Такой подход работает во всех сферах профессиональных услуг, а не только в области разработки сайтов. Убедиться в этом у вас будет возможность в девятой главе.

Представим, что с выбором подрядчиков вы определились. Самое время выбрать тот тип сайта, который более всего будет соответствовать вашим бизнес-задачам.скачать dle 12.0

Комментарии (3)

avatar
0
#1 Thomas
Stable need for alternative credit sources ensures that when regulators target and rein a single product, other, loosely regulated
and frequently-abusive options pop up in the place. He saw his fees spiral
to a point where he simply couldn't pay his pay day loan costs on his disability income.
And our Act Now Alert Service warns customers of upcoming unarranged borrowing to allow time to transfer
money to stop fees. payday loans online same day British Gas 'preparing' to hike energy prices
that may add almost £100 to annual bills. A government review
to the sector was because of make its recommendations this month.
Officials recommended that Nikolas Cruz, the
suspect in recently's Florida school shooting, be involuntarily committed to get a mental evaluation, nevertheless
the information never was acted upon, in accordance with a report Sunday.
avatar
0
#2 Dell
Seven in 10 who use payday loan services report that
the money is used to hide normal household expenses, Crowley said.
Sure, possibly that by making it hard for these to get loans we
will force them to live inside their limited means , and thus impose upon them an admirable ethic (albeit one
within which government entities imposing the rule can't seem to live).
Supreme Court rules on a Wisconsin gerrymandering case before creating new redistricting criteria for Indiana.
direct lender payday loans online That fuelled not
only our expansion but a lots of others. As it stands now, the loans can be to get a
term as short as 10 days and charge interest with rates all the way
to 437 APR. According to Al Antle, head of Credit Counseling Services,
this is a welcome change.
avatar
0
#3 Thorsten
Some employers in Pasadena will handle a percentage
of one's CNA tuition; others pays tuition costs as much as a specific dollar amount cna
classes near me for free online cna classes cna classes cost cna training is offered through community colleges,
technical or vocation colleges, the red cross, hospitals, or
nursing homes. Greater Horizon Training Institute usually provides free CNA training through their financial aid
office cna classes in pa https://cnaclasses.us.com/ cna classes jacksonville
fl due for the limited class size, candidates are chosen depending on the available slots.

Написать сообщение

Кликните на изображение чтобы обновить код, если он неразборчив



Похожие новости

Шаблон готового сайта SEREBRO с видео и песнями

Тема сайта: трио "Серебро", была выбрана случайно, лишь для заполнения сайта контентом. Можете

02.12.17 Примеры сайтов
Что такое JavaScript?

jаvascript — это название языка программирования, добавляющий на сайты интерактивность и

18.09.17 Для веб-программиста
Добавление стилей CSS

Следует обратить внимание на ключевой компонент кода HTML страницы. В верхней части HTML-документа

18.09.17 Для веб-программиста

 
2018 UseSite.ru. Все права защищены. Копирование материала строго запрещено.
Закрыть