Требования к вёрстке

Передавая вёрстку программисту, верстальщик не всегда задумывается о функционале сайта, поэтому часто в вёрстке чего-то не хватает либо допущены ошибки.

Вот несколько требований, на которые нужно проверить вёрстку, прежде чем программист сможет приступить к "поcадке" её на СMS

1. Располагайте файлы css-стилей в папке "css", файлы js-скриптов - в папке "js". Некоторые верстальщики хранят файлы в папках "styles" и "scripts" соответственно. Вот вам несколько аргументов в пользу предложенного мною варианта:

• названия папок короче
• начинаются с разных букв и легче распознаются глазом
• вариант с именованием "css" + "js" более распространён, чем "styles" + "scripts"

 

2. Проверьте, прокомментирована ли вёрстка: выделены ли все ключевые блоки, такие как шапка, контент, колонки, меню, подвал. Старайтесь показать начало и окончание блока:

<!--header--> <div class="header"> <h1>Слоган</h1> <ul> <li>Главная</li> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> </ul> </div> <!—end header-->

3. Бывает, что вёрстка состоит из нескольких макетов: главной, внутренней страницы с одной и двумя колонками. И Вы решили проблему разного количество колонок применением разных классов: "onecolumn" и "twocolumn". Не поленитесь написать небольшой комментарий программисту, иначе довольно сложно искать отличия в длинном коде вёрстки.

4.Часто дизайнеры выделяют в меню и других блоках какие-то фразы или слова КАПСЛОКОМ. Стоит при вёрстке учитывать это и делать на css приведение к верхнему регистру (это НЕ касается контента, а касается исключительно статично свёрстанных зон) .

5. Почти на всех сайтах есть страница контактов. Проверьте, создали ли Вы пример вёрстки для формы обратной связи. Вам в помощь я подготовила пример кода формы обратной связи: просто создайте новую страницу, киньте туда этот код и проверьте, корректно ли он отображается в Вашей вёрстке. Пропишите для всех полей формы шрифт сайта и корректные размеры!

<form action="" method="post"> <table> <tr> <td>ФИО <span class="required">*</span></td> <td><input type="text" name="fullname" value="Татьяна"></td> </tr> <tr> <td>Телефон <span class="required">*</span></td> <td><input type="text" name="phone" value="33-44-55"></td> </tr> <tr> <td>E-mail <span class="required">*</span></td> <td><input type="text" name="email" value="mail@mail.mail"></td> </tr> <tr> <td>Текст письма <span class="required">*</span></td> <td> <textarea name="comment">Пишу статья для верстальщиков. Надеюсь на их понимание и отклики!!!</textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" value="Отправить"> </td> </tr> </table> </form>

6. Проверьте, показали ли вы, как будет выглядеть активные пункты меню . При этом, привязывайте все стили активного пункта меню к классу-активатору, а не наследуйте их от ссылки. Потому что иначе, программисты вынуждены оставлять теги <a> без href атрибута для поддержания вида вёрстки.

7. Узнайте у менеджера, будет ли на сайте, например, список новостей. Если да, то сделайте пожалуйста пример такой страницы. Обязательно покажите как будет выглядеть навигация.

8. Создайте тестовую страницу. Что это такое и для чего нужна тестовая страница?
После того как сайт посадили на CMS, к работе приступают контенщики - люди, которые заполняют сайт информацией. Они не знают HTML и CSS и пользуются редакторами. Редакторы используют стандартные теги, без применения css. Поэтому Вам нужно предусмотреть, чтобы все теги в контентной области отображались корректно: то есть для вашего класса content, нужно прописать отображение: заголовков, параграфов, ссылок, таблиц, список. Больше про оформление контента читайте на сайте xiper.net.

Вам в помощь я подготовила следующий код:

<p><b>Проверка заголовков:</b></p> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <p><b>Проверка текста без параграфов:</b></p> Большой круг небесной сферы дает метеорит, как это случилось в 1994 году с кометой Шумейкеpов-Леви 9. Реликтовый ледник прочно перечеркивает метеорный дождь, выслеживая яркие, броские образования. Тукан, сублимиpуя с повеpхности ядpа кометы, дает центральный параллакс, хотя для имеющих глаза-телескопы туманность Андромеды показалась бы на небе величиной с треть ковша Большой Медведицы.<br> Реликтовый ледник <a href="">изменяем</a>. Астероид выбирает космический мусор, однако большинство спутников движутся вокруг своих планет в ту же сторону, в какую вращаются планеты. Все известные астероиды имеют прямое движение, при этом радиант представляет собой экваториальный восход , об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). Параметр разрушаем. <p><b>Проверка текста в параграфах:</b></p> <p>Реликтовый ледник <a href="">изменяем</a>. Астероид выбирает космический мусор, однако большинство спутников движутся вокруг своих планет в ту же сторону, в какую вращаются планеты. Все известные астероиды имеют прямое движение, при этом радиант представляет собой экваториальный восход , об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). Параметр разрушаем.</p> <p>Юпитер перечеркивает далекий Тукан, данное соглашение было заключено на 2-й международной конференции "Земля из космоса - наиболее эффективные решения". Зенит на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), изменяем. Элонгация выбирает близкий экватор, но это не может быть причиной наблюдаемого эффекта. Гелиоцентрическое расстояние недоступно выслеживает азимут (расчет Тарутия затмения точен - 23 хояка 1 г. II О. = 24.06.-771). В связи с этим нужно подчеркнуть, что планета колеблет большой круг небесной сферы, как это случилось в 1994 году с кометой Шумейкеpов-Леви 9. Весеннее равноденствие , это удалось установить по характеру спектра, прекрасно дает секстант – у таких объектов рукава столь фрагментарны и обрывочны, что их уже нельзя назвать спиральными.</p> <p><b>Проверка таблицы:</b></p> <table cellpadding="0" cellspacing="0"> <tbody><tr> <th>Текст 1</th> <th>Текст 2</th> <th>Текст 3</th> <th>Текст 4</th> <th>Текст 5</th> <th>Текст 6</th> <th>Текст 7</th> </tr> <tr> <td>строка 1</td> <td>строка 1</td> <td>строка 1</td> <td>строка 1</td> <td>строка 1</td> <td>строка 1</td> <td>строка 1</td> </tr> <tr> <td>строка 2</td> <td>строка 2</td> <td>строка 2</td> <td>строка 2</td> <td>строка 2</td> <td>строка 2</td> <td>строка 2</td> </tr> </tbody> </table> <p><b>Проверка списка:</b></p> <ul> <li>пункт 1</li> <li>пункт 2 <ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul> </li> <li>пункт 3</li> </ul>

Если у таблиц появились рамки, а у списков маркеры не вылезли за границы контентной области, поздравляю, Вы хороший верстальщик!

Давайте вместе стремится к качественной работе!

Спасибо за внимание, Татьяна