Верстка сайта. Что необходимо учесть?
Прежде чем передавать готовую верстку заказчику, вы должны быть уверены, что все необходимые элементы учтены и изменение контента не приведет к “развалу” страницы. Поэтому хочу привести свой небольшой проверочный список пунктов, которые должны быть учтены при верстке.
Сервисы постинга в социальные закладки
В чем особенности дизайна блогов? Узнайте подробнее насколько это важно!
padlik.ru – записки интернет-маньяка о бабле
1. Цвет фона body
Даже если body не имеет никакого фона, обязательно прописывайте background, дабы избежать некорректного цвета, в случае если на компьютере изменена палитра.
body {background:#FFF}
2. Минимальная ширина
Если вы верстаете “резиновый” дизайн, вам необходимо напомнить заказчику, что должна быть минимальная ширина, при которой страница не развалится. Как правило, это либо 1004px, либо 780px. Если вы верстаете под IE6, то вам придется использовать специальную , либо воспользоваться JS скриптом, исправляющим многие недостатки IE6. Я использую скрипт IE7.js JavaScript library.
3. Наличие правил для отсутствующих элементов в дизайне.
Здесь я имею ввиду правила для заголовков H1-H6, посещенных и активных ссылок (a:visited, a:active), списков (ol, ul), таблиц, форм. Все стандартные элементы, которые не присутствуют в дизайне, но процент их использования велик – должны быть прописаны в CSS. Не стоит лениться, воспитывайте в себе обязательство всегда выполнять полноценную верстку.
4. Картинки-ссылки
Этот пункт я вынесла отдельно, хотя он и относится к предыдущему. Не забывайте обнулять границы у картинок, которые обернуты в ссылку (если конечно, для таких картинок не предусмотрен отдельный дизайн).
a img {border:none}
5. Проверка в браузерах, указанных в ТЗ
Как правило, это FF2/FF3, Opera 9, IE6/IE7, Safari. Я тестирую верстку для IE6 в IETester (там же есть и 7й, и 8й).
6. Семантика во всем
Следите за тем, чтобы ваш код был как можно более правильным и читабельным. Советую почитать об этом статью на моем блоге.
7. Вес страницы
Важно помнить о том, что вес страницы должен быть как можно более минимальным. Постарайтесь избегать громоздких картинок и скриптов. Как оптимизировать вес страницы можно узнать из этого обзора.
8. Валидность
И в заключение, не забудьте , впрочем как и CSS. Даже если это не обязательный пункт ТЗ, то сделайте это для себя, чтобы в будущем не делать ошибок.
А вы учитываете эти пункты при верстке? Буду рада вашим дополнениям к списку :)
Принимаю от и расскажу о железе своей машины :)
Работаю я на ноуте ASUS F7Z:
| Процессор | AMD Turion 64 X2 RM-70 2 GHz |
| Кэш L2 | 1 Mb |
| Экран | 17″ (43.2 см) |
| Разрешение экрана | WXGA+ (1440×900) |
| Видео | интегрированная ATI Mobility Radeon |
| Оперативная память | 3072 Mb DDR2 RAM (расширяется до 4096 Mb) |
| Привод | DVD-RW |
| Жесткий диск | 320 Gb (5400 об/мин) |
| Программное обеспечение | Windows Vista™ Home Premium |
| Порты и коммуникации | 5 x USB 2.0 Wi-Fi Bluetooth Выход на внешний монитор VGA IEEE 1394 (FireWire) Веб-камера HDMI ТВ-тюнер |
| Габариты | 403 x 299 x 32- 42 мм |
| Вес | 3.5 кг |
Передаю эстафету про железо , и .
Dmoz
все правильно, спасибо что напомнила про 5-ый пункт, вечно о нем забываю.А еще, если в дизайне присутствуют графические кнопки или лого, то прописать текст для них, который будут видеть гуглбот и иже с ним. (я текст сдвигаю с помощю text-indent в -9999px). Или же, чтобы при отключенных рисунках было вместо логотипа текст, то я пользуюсь 1 советом из этой страницы
lilumiЦитировать
Полезная статья. Новички обычно забывают про 4 пункт.
пс. а давно ли у этого блога поменялась форма для комментариев?
qosysЦитировать
Форма комментария не менялась изначально.
АвторЦитировать
Соглашусь со всеми пунктами. И добавлю только, что проверять отображение сайта в браузере можно с помощью этого . А еще есть неплохая статья про правильный подбор разрешения к сайту.
ИльяЦитировать
>при которой страница на развалится
не развалится
Алик КирилловичЦитировать
Очень рада была передать эстафету))
Огорчает лишь изменившаяся политика, касаемо прямых ссылок…
Хотя, наверное так и надо…
KisuhvostikЦитировать
Пункты 3 и 4 нужны всем, не только новичкам.
А вообще я бы хотел добавить одно. Пусть это и может относится к пункту 3 или это не самый важный пункт, но все же.
Для Мозилы, следует ссылкам назначать outline, чтобы они не выделялись при нажатии на них. Пример: a {outline:none;}
WebMastЦитировать
Хочу добавить по нескольким пунктам.
По мимо минимальной ширины должна быть и максимальная. Часто встречаются сайты когда для среднего блока содержащего контент забывают указать максимальную ширину.
Полностью согласен с пунктом 3. Я бы его даже первым сделал. Чтобы ничего не пропустить пользуюсь . Очень удобная вещичка :)
monkroЦитировать
Обратите внимание -
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘hilite_head’ was given in /home2/getincss/public_html/wp-includes/plugin.php on line 339
БорисЦитировать
Борис, где вы увидели эту ошибку?
АвторЦитировать
Ну.. это на самом деле. Основы всех основ))
МихаилЦитировать
Этого делать не стоит, вы потеряете посетителей которые работают без мышки.
ParikmailЦитировать
Parikmail, спасибо, не подумал.
WebMastЦитировать
С пятым пунктом не будьте так самоуверены, отображения разметки для восьмого не соответствует действительности.
СмоленскийЦитировать
При создании print-страницы надо прятать ненужные для печати этементы: навигацию, баннеры, сайдбар, и т.д.
АнтонЦитировать
А я не когда не верстаю под IE =\
Простите не хочу вас обидеть, но… разве это так классно?
RodgerFoxЦитировать
Пункты с 1 по 4 и, в большинстве случаев, 5 отпадают сами собой, если сперва сбрасывать стили (подключая reset.css, например).
АлександрЦитировать
Хмм, что-то скудноватая статья. Требований к вёрстке гораздо больше.
w3c_userЦитировать
То есть верстка сайта это уже полноценное его преобразование? т.е имея эскиз сайта и все его условия верстальщик доделывает сайт до конца?
Лично я подразумевал под словосочетанием:
“верстать сайт” – это делать как бы каркас сайта, его готовую структуру и окончательный дизайн, а вот на счет самой начинки функций написанных на различных языках таких как php, java script и другие, всячиских обработчиков – это дело веб-программиста.
или мое представление не верное? Заранее спасибо за ответ!
РинатЦитировать